Die aktuellen Tipps zu AnimateCC / Html5 Canvas gibt es jetzt zu einem freiwilligen Kostenbeitrag.
AnimateCC / Programmierung / CreateJS
Easel JS Tipps von Adobe
von mir in deutsch 2013
diese Seite
Beispiele
Step by Step
Ü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 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
Es folgen einige komplette Beispiele der offiziellen docs
example 1 - :|:- example 2 - :|:- example 3 - :|:- example 4 - :|:- example 5 - :|:- example 6 - :|:- example 7 - :|:- example 8
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.
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();
}
*/
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: https://code.createjs.com/ Dort sind alle Links aufgeführt.
<script src="https://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="https://code.createjs.com/createjs-2013.12.12.min.js"></script>
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
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();
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();
Man kann auch nachträglich einen Klassennamen vergeben. Wähle dazu den Mc in der Bibliothek und vergebe im Feld "Verknüpfung" einen Klassennamen. Das Feld Verknüpfung sieht so aus, als könnte man dort nichts eintragen. Einfach anklicken und eintragen. Auf folgende Weise erzeugt man eine Instanz. Im folgenden Beispiel ist MeinMc ist der Klassenname/ Verknüpfungsname / Linkage Name
mc1 = new lib.MeinMc();
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);
}
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);
Mittels Javascript kann man folgendermaßen eine URL aufrufen:
window.open("https://www.adobe.com", "_blank");
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:
<link href='https://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
/* js
WebFontConfig = {
google: { families: [ 'Peralta::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
*/
In der Flash IDE weist man die Schriftformatierungen folgendermaßen zu.
/* js
this.anzeige.font = "bold 96px Dorsa";
this.anzeige.text = "Hallo";
*/
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();
}
LoaderMittels 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:
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();
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)
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);
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);
}
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;
}
*/
Mit der TweenJS Library lassen sich Animationen auf einfache Art erstellen.
Hier die offizielle Seite TweenJS
Auf dieser Seite kann man die Animation testen https://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
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");
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");
}
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>
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="https://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="https://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>
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.
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);
}