Die aktuellen Tipps zu AnimateCC / Html5 Canvas können Sie nun in meinem Premium Bereich aufrufen.

Hier können Sie sich registrieren.

EaselJS für Flash CC


Easel JS

Über diese Tipps

CreateJS und die dazugehörigen Javascript Bibliotheken werden ständig erneuert, und auch ein wenig verändert, deshalb achtet auf die Versionen, die ich hier benutze. Ein großer Teil dieser Tipps ist Anfang 2013 entstanden. Dort konnte man mit dem CreateJS Toolkit (eine Erweiterung für Flash CS6) HTML5/ Canvas Inhalte erzeugen. In CS6 handelt es sich um die Version easeljs-0.5.0.

In der aktuellen Flash CC Version (Aug 2015) wird easeljs-0.8.1 benutzt. Siehe dazu meine Tipps: Flash CC Canvas

EaselJS

CreateJS die offizielle Seite

EaselJS ist eine Javascript Bibliothek, welche das Arbeiten mit HTML5 und dem canvas Element für alle Flasher vereinfacht, denn die Klassen, Eigenschaften und Methoden sind denen von Actionscript3 so ähnlich wie möglich. Das englische Wort Easel bedeutet Staffelei, welches einen Bezug zum HTML5 canvas Element herstellt. Außerdem steckt darin noch das Wort ease (deut: vereinfachen) und genau das ist der Sinn von EaselJS, es vereinfacht den Umstieg von Flash auf HTML5, da viele Objekte und Methoden auch in Actionscript vorkommen. Unter dem Namen CreateJS hat Adobe einige Tools zusammengestellt, die es Flashern ermöglichen sich schnell in Html5 einzufinden. Es ist sogar möglich Grafiken, Movieclips und Animationen aus Flash heraus zu exportieren.

Hier einige Tutorials für den Anfang

 

Quickstart

Es folgen einige komplette Beispiele der offiziellen docs

example 1 - :|:- example 2 - :|:- example 3 - :|:- example 4 - :|:- example 5 - :|:- example 6 - :|:- example 7 - :|:- example 8

HTML5 und Flash als Alternative

Die mit Flash erstellten Animationen, welche als Html5 veröffentlicht werden, erscheinen innerhalb eines HTML5 canvas Element.

Mittels EaselFL kann man alternativen Flashcontent zur Html5 canvas Version anbieten, sofern ältere Browser HTML5 canvas nicht unterstützen, jedoch das Flashplugin installiert ist. Siehe dazu EaselFL

Ich gehe hier den umgekehrten Weg. Die SWF Datei wird eingebunden, sofern kein Flashplugin installiert ist wird abgefragt, ob es das Canvas Element gibt, um den Inhalt auf diese Weise darzustellen.
Mit der Javasript Bibliothek Modernizr kann man abfragen, ob das Html5 canvas Element unterstützt wird. Siehe dazu dieses Beispiel.

 

CreateJS Toolkit in Flash CS6

Mit der Erweiterung für Flash CS6 ist es möglich Flashinhalte als HTML5 zu exportieren.

Laden Sie die Erweiterung hier herunter und installieren Sie diese mit dem Extension Manager.

In FlashCS6 kann man dann über Fenster / andere Bedienfelder / Toolkit für CreateJS die Inhalte in Html 5 exportieren. Es entsteht eine HTML Seite und eine Javascript Datei. Außerdem können noch weitere Ordner mit Dateien entstehen.

Ein 1 zu 1 Export von Flash nach Html 5 ist nicht möglich. Hier gibt es einige Einschränkungen. Allerdings befindet sich CreateJS noch in den Entwicklungsphase und es kommen ständig neue Verbesserungen hinzu. So kann es sein, dass einige Aussagen, die ich hier mache mittlerweile veraltet sind (Aktualisierung Jan 2014).

 

Actionscript wird nicht unterstützt. Es ist jedoch möglich stattdessen Javascript und das Javascript des EaselJS Frameworks zu benutzen. EaselJS ist Actionscript 3 sehr ähnlich. Den Code kann man entweder im Scriptblock der Html Seite einfügen oder in der Flash IDE im Schlüsselbild der Zeitleiste und zwar innerhalb eines mehrzeiligen Kommentarblocks in folgender Form:

/* js

Javascriptanweisungen;

*/

Hier findet man die Documentation von EaselJS

Das folgende Beispiel ist gänzlich mit dem CreateJS Toolkit erzeugt.

Es gibt 2 Movieclips (Instanznamen: "playBut" und "stopBut"), die als Schaltflächen dienen. In den MCs befinden sich 2 Bilder. Im ersten Bild ist folgendes Javascript eingefügt:

/* js
this.stop();
*/

In der Hauptzeitleiste befindet sich folgendes Javascript im ersten Bild. Man beachte das in EaselJS die Zeitleiste nicht in Bild 1 sondern in Bild 0 beginnt.

/* js
this.stopBut.onPress = function(){
this.parent.stop();
this.gotoAndStop(1);
}

this.playBut.onPress = function(){
this.parent.play();
this.gotoAndStop(1);
}

this.playBut.onClick = this.stopBut.onClick = function(){

this.gotoAndStop(0);
}

*/

Da man neuerdings auch Schaltflächen einsetzen kann, wäre das Beispiel mit Schaltflächen noch einfacher zu realisieren. Beachte dass "this" innerhalb der Event Funktion sich auf die Instanz bezieht, die den Event aufruft, also in diesem Beispiel der jeweilige Button. this.parent.stop(), stoppt die Hauptzeitleiste, in der sich der button befindet.

/* js
this.stopBut.onPress = function(){
this.parent.stop();
}

this.playBut.onPress = function(){
this.parent.play();
}

*/

 

Bibliothek einbinden

Man kann Javascript und das Framework basierte Javascript von EaselJS auch in der Html Seite einfügen. Dazu muss man sich die EaselJS Bibliothek einbinden.

Hier gibt es verschiedene Möglichkeiten. Die beiden populärsten ist ein link auf eine lokale js Datei oder auf folgende Seite. Nutzt man auch die TweenJS Bibliothek, so muss diese nach der EaselJS eingebunden werden. Ganz unten der Link, um alle Bibliotheken ein zubinden. Siehe auch folgende Seite: http://code.createjs.com/ Dort sind alle Links aufgeführt.

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>

 

Canvas und Stage

Die meisten Dinge erstellt man innerhalb dem Html5 Element canvas. Dazu erzeugt man ein canvas Element irgendwo auf der Seite.

<canvas id="myCanvas" width="960" height="400"></canvas>

In EaselJS erzeugt man auf folgende Weise ein stage Objekt, welches ähnlich funktioniert wie die stage in Flash.

var canvas, stage;

demoCanvas = document.getElementById("myCanvas");
stage = new createjs.Stage(demoCanvas);

oder man übergibt die ID des canvas Elementes dem Parameter des neuen Stage Objektes als String:

var stage = new createjs.Stage("myCanvas");

Der Zugriff auf das canvas Element erfolgt dann folgendermaßen:

stage.canvas

Display List

Auch die Display Liste arbeitet ähnlich wie in Actionscript. Es gibt gleiche Eigenschaften und Methoden. Nachdem man ein DisplayObjekt und eine Stage Instanz erzeugt hat, kann man es der Display List hinzufügen.

stage.addChild(myChild);

Man kann auch mehrere Objekte auf einmal hinzufügen.

stage.addChild(kreis, rechteck, linie);

Es ist wichtig, die Bühne zu aktualisieren, nachdem Display Objekte hinzugefügt wurden, oder deren Position geändert wurde.

stage.update();

Neue Instanz eines Movieclips CS6

Hier geht es darum eine Instanz eines MCs per Javascript zu erzeugen und der Displayliste hinzuzufügen.

Erzeuge in der fla einen Movieclip und wähle Export für Actionscript und vergebe einen Klassennamen. Selbst wenn man keine Instanz auf die Bühne gezogen hat kann man innerhalb der init Function folgendermaßen eine Instanz erzeugen und der Displayliste hinzufügen. Nehmen wir an der Klassenname sei: "Greeni"

cloud = new lib.Greeni();
//cloud.regX = 70;//Registrierpunkt mittig setzen
//cloud.regY = 30;//Registrierpunkt mittig setzen
cloud.x = 200;
cloud.y=200;
stage.addChild(cloud);
stage.update();

Wenn man mit Flash CC und "HTML5 canvas" einen Movieclip erzeugt, kann man diesen über den Klassen Namen, der beim Erzeugen des Movieclips vergeben wird, eine Instanz auf die Bühne bringen. Der Name kann auch in der Bibliothek im Feld "Verknüpfung" eingetragen werden. Dann kann man in einem Schlüsselbild folgendermaßen eine neue Instanz erzeugen.
mc1 = new lib.MeinMc();

Mouse Events CS6

Folgendermaßen kann man MouseEvents mit CreateJS CS6 hinzufügen

myChild.onPress = myFunction;

function myFunction(evt){
console.log('pressed');
}

Auch eine namenlose Funktion ist möglich:

myChild.onPress = function(){
console.log("Hallo");
}

Wie auch in Flash kann man bei Mouse Events über den Parameter der Funktion Eigenschaften wie beispielsweise die Mausposition abrufen.

myChild.onPress = myFunction;

function myFunction(evt){
console.log(evt.stageX);
}

Touch Events

Damit auf Tablets und Smartphones Mouse Events als Touch Events umgewandelt werden, muss man man folgenden Befehl einfügen. Am Besten in der Html Datei nicht in der Flash IDE. Besonders beim Andorid Betriebssystem werden hier die Probleme gelöst.

stage = new createjs.Stage(canvas);
createjs.Touch.enable(stage);

URL aufrufen

Mittels Javascript kann man folgendermaßen eine URL aufrufen:

window.open("http://www.adobe.com", "_blank");

Text

Folgendermaßen erzeugt man ein Textobjekt im Scriptblock auf der Html Seite. Siehe auch diesen Tipp.

var myText = new createjs.Text('Hallo', 'Bold 25px Arial', "#005FAF");
myText.x = 25;
myText.y = 25;
stage.addChild( myText);

In der Flash IDE kann man ein dynamisches Textfeld mit folgenden Optionen erzeugen. Schriftart, _sans, _serif oder _typewriter, außerdem Option "Text als Html wiedergeben" im Eigenschaftenfenster auswählen.

/* js
this.anzeige.text = "Hallo";
*/

Beispiel
Man kann sogar in der Flash IDE Google Fonts benutzen. Es gibt 2 Möglichkeiten die Google Fonts einzubinden:

 

In der Flash IDE weist man die Schriftformatierungen folgendermaßen zu.

/* js
this.anzeige.font = "bold 96px Dorsa";
this.anzeige.text = "Hallo";
*/

Bitmap

Folgendermaßen wird ein Bitmap Object erzeugt und der Display Liste hinzugefügt. Es wird die URL erwartet. Sofern man einen Ticker mit stage.update() hinzufügt, wird das Bild angezeigt. Man kann auch mehrere Dateien mit preloadjs laden siehe dazu "Mehrere Dateien laden"

var jesus = new createjs.Bitmap("jesus.png");
stage.addChild(jesus);

createjs.Ticker.addListener(stage);

jesus.onTick = function()
{
stage.update();
}

Loader

Mittels preloadJs, welches in createJs enthalten ist kann man Bilder, Sounds etc. ins Dokument laden. Der Ladevorgang wird überwacht und das Element kann nach Abschluss beispielweise dem Dokument hinzuegefügt werden:

Beispiel

 

Graphics Api

Siehe EaselJS Graphics Dokumentation

Folgendermaßen kann man ein Kreisobjekt erzeugen und es der Displayliste hinzufügen.

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

Hier eine andere Schreibweise, diesmal mit einem Rechteck:

var recGraph = new createjs.Graphics().beginFill("rgba(100,0,255,1)").rect(5,5,80,80);
var recShape = new createjs.Shape(recGraph);
stage.addChild(recShape);

Oder man übergibt dem Parameter des Shape Objekts das Graphics Objekt.

var recShape = new createjs.Shape(new createjs.Graphics().beginFill("rgba(100,0,255,1)").rect(5,5,80,80));
stage.addChild(recShape);


Es folgen einige Api Beispiele.


//drawRect();
new createjs.Graphics().beginFill("rgba(255,0,255,1)").rect(5,5,80,80);


//drawRoundRect();
new createjs.Graphics().beginFill("rgba(255,0,255,1)").drawRoundRect(0,0, 120, 120, 5);

//beginLinearGradientFill() with drawRoundRect();
new createjs.Graphics().beginLinearGradientFill(["rgba(255,0,255,1)", "rgba(0,0,0,1)"], [0,1],0,0,0,130).drawRoundRect(0,0, 120, 120, 5);

//drawCircle();
new createjs.Graphics().beginFill("rgba(255,0,255,1)").drawCircle(40,40,40);


//beginRadialGradientFill() with drawCircle();
new createjs.Graphics().beginRadialGradientFill(["rgba(255,0,255,1)","rgba(0,0,0,1)"],[0,1],0,0,0,0,0,60).drawCircle(40,40,40);


//drawEllipse();
new createjs.Graphics().beginFill("rgba(255,1,255,1)").drawEllipse(5,5,60,120);


//Draw Hexagon using drawPolyStar();
new createjs.Graphics().beginFill("rgba(255,1,1,1)").drawPolyStar(60,60,60,6,0,45);


//Draw a star using drawPolyStar();
new createjs.Graphics().beginFill("rgba(255,0,0,1)").drawPolyStar(80,80,70,5,0.6,-90);


//beginBitmapStroke() with drawRect();
new createjs.Graphics().setStrokeStyle(25).beginBitmapStroke(img).rect(5,5,100,100);


//drawRoundRectComplex();
new createjs.Graphics().beginFill("rgba(255,1,255,1)").drawRoundRectComplex(5,5,70,70,5,10,15,25);


//drawCircle(); with beginBitmapFill();
new createjs.Graphics().beginStroke("rgba(255,1,255,1)").beginBitmapFill(img).drawCircle(30,30,30).endStroke();

//Mask var shape = new createjs.Shape();
shape.graphics = new createjs.Graphics().beginStroke("rgba(255,1,255,1)").beginBitmapFill(img).drawCircle(35,25,20).endStroke();
var image = new createjs.Bitmap(img); image.mask = shape;
stage.addChild(image);


//lineTo();
new createjs.Graphics().beginStroke("rgba(10,255,255,1)").moveTo(5, 35).lineTo(110,75).endStroke();


//arcTo();
new createjs.Graphics().beginStroke("rgba(255,1,255,1)").moveTo(50,20).arcTo(150,20,150,70,50).endStroke();


//quadraticCurveTo();
new createjs.Graphics().beginStroke("rgba(255,1,1,1)").moveTo(0, 25).quadraticCurveTo(45,50,35,25).endStroke();


//bezierCurveTo();
new createjs.Graphics().beginStroke("rgba(255,1,1,1)").moveTo(5, 75).bezierCurveTo(45,90,75,75,-25,-25).endStroke();
//beginLinearGradientStroke();  
new createjs.Graphics().beginLinearGradientStroke(["rgba(255,1,255,1)","rgba(50, 50, 50, 1)"],[0,.4],0,0,70,140).moveTo(5, 25).lineTo(110,25).endStroke();

Color

Es gibt einige Möglichkeiten Farben zu definieren, wie üblich als Hex Code

"#ff00ff"

RGB oder RGBA, dabei ist A ein optionaler Parameter und steht für alpha, einTransparenzwert von 0-1.

"rgb(250, 0, 200, 0.5)"

oder mittels der statischen Methode getRGB(rot, grün, blau, alpha)

createjs.Graphics.getRGB(250, 200, 40, 0.5)

getHSL(Farbton, Sättigung, Helligkeit, alpha) erzeugt einen HSB Farbwert Farbton 0-360, Sättigung 0-100, Helligkeit 0-100, alpha (optional) 0-1

createjs.Graphics.getHSL(360, 100, 50, 0.8)

 

Ticker

Die Ticker Klasse unterstützt einen Tick oder Herzschlag, den man mit dem EnterFrame Event in Flash vergleichen kann. Im folgenden wird die Framerate auf 30 gesetzt.

createjs.Ticker.addListener(window);
createjs.Ticker.setFPS(30);

Mittels dieser Funktion wird eine Animation erzeugt. Achten Sie darauf die Bühne zu aktualisieren.

function tick() {
circle.x = circle.x + 5;
if (circle.x > stage.canvas.width) { circle.x = 0; }
stage.update(); // important!!
}

Es gibt außerdem die Möglichkeit, dass ein Objekt eine Tickerfunktion aufruft.

circle.onTick = function(elapsedTime) {
this.x += elapsedTime/1000*100;
if (this.x > stage.canvas.width) { this.x = 0; }
}
var ticker = createjs.Ticker.addListener(stage);

 Siehe auch diesen Tipp

In einem Frame in der Flash IDE im Actionfenster kann man folgendermaßen einen Enter Frame ähnlichen Eventlistner hinzufügen.

this.addEventListener("tick", myEnterFrameFunktion);


Zeitanzeige im Textfeld

Anstatt this, könnte man irgendein Display Objekt ansprechen. Innerhalb der Funktion kann man über den Parameter mittels target auf das Objekt zugreifen dem der Eventlistener zugewiesen ist.

Ein Beispiel: Im Hauptfilm liegt ein dynamisches Textfeld, Schriftart _sans, Option Html-Text, Instanzname anzeige
Das Textfeld soll die verstrichene Zeit seit dem Start der Seite in Sekunden anzeigen.

this.addEventListener("tick", zeitanzeige);

function zeitanzeige(evt)
{
spielzeit = Math.floor(createjs.Ticker.getTime()/1000);
evt.target.anzeige.text = (60 - spielzeit);

}

Animation Mousemove

Es folgt ein Beispiel, der Flash IDE. Auf der Hauptbühne liegt eine MC Instanz namens fly. Das soll sich dynamisch auf die Maus zubewegen.

/* js
this.fly.addEventListener("tick", flying);
function flying(evt)
{
evt.target.x += (stage.mouseX-evt.target.x)*0.1;
evt.target.y += (stage.mouseY-evt.target.y)*0.1;
}
*/

TweenJS

Mit der TweenJS Library lassen sich Animationen auf einfache Art erstellen.
Hier die offizielle Seite TweenJS

Auf dieser Seite kann man die Animation testen http://andysaia.com/blog/tweenjs/

Doch aufgepasst, man kann den Code der Seite nicht einfach übernehmen, sondern muss auf createjs verweisen, hier ein Beispiel:

createjs.Tween.get(ball ,{loop:true}).to({x:472,y:373,scaleX:1,scaleY:1,rotation:0},2000,createjs.Ease.bounceOut);

Der Loop Parameter kann weggelassen werden.
Hier die Api Dokumentation

Beispiel

Sound

Sound in der Flash IDE

In der Flash IDE kann man einen Sound wie gewohnt importieren und diesen in einem Schlüsselbild im Eigenschaftenfenster zuweisen. Ich habe jedoch festgestellt, dass das nicht innerhalb eines Buttons oder der Zeitleiste eines Movieclips funktioniert.

Daher habe ich folgendes ausprobiert. Die Lösung funktioniert allerdings nicht im Firefox. Beispiel

Sound in Bibliothek importieren und dort auswählen. Im Kontextmenü, Eigenschaften wählen.

Actionscript, "Export für Actionscript" aktivieren, Klassennamen vergeben.

Mit folgendem Script kann man einen Sound mit Klassenanmen "squirk" abspielen.

createjs.Sound.play("squirk");

Sound im Script auf der HTML Seite

Es folgt ein einfaches Beispiel Sound einzubinden. Selbstverständlich muss die Soundbibliothek eingebunden sein.

Innerhalb der Init Funktion kann man mittels Sound.registerSound den Sound laden. Die beiden Parameter sind, der Pfad zum Sound, und eine id für den Sound.

createjs.Sound.registerSound("assets/drop.mp3","sound");

Da es zu Problemen führen kann, wenn man auf einen Sound zugreift, bevor er komplett geladen ist kann man folgendermaßen überprüfen ob der Sound komplett geladen ist.

createjs.Sound.addEventListener("fileload", handleFileLoad);

Eine andere Möglichkeit ist.

createjs.Sound.addEventListener("loadComplete", handleComplete);

In der Funktion handleFileLoad oder handleComplete kann man den Sound mittels play() abspielen. In der play() Funktion übergibt man die id des Sounds, die man bei Sound.registerSound vergeben hat.

function handleFileLoad(event)

{

createjs.Sound.play("sound");

}

Mehrere Dateien laden

Wenn man mehrere Dateien laden will, kann man folgendermaßen vorgehen. Ich benutze das Basic Beispiel von gskinner Allerdings habe ich im Eventlistener den Event "complete" durch "fileload" ersetzt, da "complete" bei mir nicht funktioniert. Außerdem habe ich ein paar weitere kleine Änderungen vorgenommen. Hier das komplette Beispiel Hier das Script.

 

<script>
var stage, ball;

function init()
{
stage = new createjs.Stage("myCanvas");
queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
queue.addEventListener("fileload", handleComplete);
queue.loadManifest([{id:"daisy", src:"assets/daisy.png"},{id:"sound", src:"assets/drop.mp3"}]);
ball = new createjs.Shape();
ball.addEventListener("click", handleClick);
ball.graphics.beginFill("#000000").drawCircle(0,0,50);
ball.x = 50;
ball.y = 200;
}

function handleComplete(event)
{

stage.addChild(ball);
createjs.Tween.get(ball,{loop:true}).to({x:450},3000).to({x:50},3000);
createjs.Ticker.addEventListener("tick", tick);

}
function tick(event)
{
stage.update();
}
function handleClick(event)
{
var bmp = new createjs.Bitmap(queue.getResult("daisy"));
bmp.x = Math.random()*500;
bmp.y = Math.random()*500;
stage.addChild(bmp);
createjs.Sound.play("sound");
}
</script>

 

 

Hallo Welt

Es folgt ein kleines Beispiel. Ein Kreis wird gezeichnet, der Displayliste hinzugefügt und mittels Ticker animiert.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hallo</title>

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>


<script>
var canvas, stage, circle


function init()
{
canvas = document.getElementById("myCanvas");
stage = new createjs.Stage(canvas);

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 0;
circle.y = 0;
stage.addChild(circle);
stage.update();

createjs.Tween.get(circle ,{loop:true}).to({x:472,y:373,scaleX:1,scaleY:1,rotation:0},2000,createjs.Ease.bounceOut);
createjs.Ticker.addListener(window);

}

function tick() {
stage.update();
}

</script>

</head>

<body onLoad="init()">

<canvas id="myCanvas" width="500" height="400"></canvas>
</body>
</html>

 

Dom Element

Neben den Elementen des Canvas gibt es auch Elemente die außerhalb liegen, wie beispielsweise stage, Div-Tags oder sogar Formulare. Dieses Domelement Object ist auch Bestandteil der EaselJS Bibliothek. Man kann es der Display Liste hinzufügen und somit die Eigenschaften und Methoden bestimmen. Obwohl DOMElemente vom DisplayObjekt erben, kann man jedoch nicht alle Eigenschaften des DisplayObjekts nutzen (wie Filter, HitTest, globalToLocal etc.), sondern nur die, die sich per CSS Styles bestimmen lassen. Außerdem ist das Ganze ist noch im Entwicklungsstadium und kann bei komplizierten Projekten Probleme bereiten.

Achtung, das folgende Beispiel von small codes benutzt älteren Versionen von TweenJS und EaselJS.

siehe hier: small codes

Ich habe hier das Beispiel aktualisiert und den Code an die neuen Versionen angepasst.

Simples Beispiel

Beispiel

Wir erzeugen ein neues DOMElement() Objekt und übergeben das Html Element als Parameter.

form = document.getElementById("myform");
formDOMElement = new createjs.DOMElement(form);

Der Registrierpunkt liegt standardmäßig oben links in 0, 0 und kann folgendermaßen in die Mitte gesetzt werden, damit sich das Objekt um seinen Mittelpunkt drehen kann. Anschließend setzen wir es nach oben außerhalb des Sichtbereichs.

formDOMElement.regX = form.offsetWidth*0.5;

formDOMElement.regY = form.offsetHeight*0.5;

formDOMElement.x = canvas.width * 0.5;

formDOMElement.y =  - 200;

Anschließend wird das DOMElement der Display Liste hinzugefügt.

stage.addChild(formDOMElement);

Mittels TweenJS kann man auf schnelle Art eine Animation erzeugen.

createjs.Ticker.setFPS(32);
createjs.Ticker.addListener(stage);

createjs.Tween.get(formDOMElement).to({alpha:1, y:canvas.height * 0.5, rotation:720},2000,createjs.Ease.cubicOut);

Wenn es nicht ein Problem mit dem IE geben würde, wäre die Sache hiermit erledigt, leider verliert das Formular immer wieder den Focus. Um das zu beheben wird das DOMELement nach der Animation aus der Displayliste entfernt.

 [...]
createjs.Tween.get(formDOMElement).to({alpha:1, y:canvas.height * 0.5, rotation:720},2000,createjs.Ease.cubicOut).call(tweenComplete);
}

function tweenComplete(){
stage.removeChild(formDOMElement);
}