Hier wurde ein Movieclip komplett mit Javascript erzeugt. Siehe dazu die Dokumentation
Das Script befindet sich im ersten Frame der Bühne.
Ein weiteres Beispiel befindet sich im Ordner prototype
// Parameter für die Konstruktorfunktion des Movieclips werden erstellt
var mode = createjs.MovieClip.INDEPENDENT;
var startPos = 0;
var loop = true;
var labels = {start:0, mitte:30, ende:60};
var mc = new createjs.MovieClip(mode, startPos, loop, labels);
//alternativ könnte man die Argumente der Konstruktorfunktion auch mit initialize vergeben.
//mc.initialize(mode, startPos, loop, labels)
this.addChild(mc);
// ein Displayobjekt für den mc wird erzeugt
var kreis = new createjs.Shape();
kreis.graphics.beginFill("red").drawCircle(0, 0, 50);
kreis.x = 50;
kreis.y = 150;
/*die timline.addTween() Methode wird angehängt
Animation wird per TweenJS erstellt, siehe TweenJs
Möchte man weitere Objekte animieren fügt man auf gleiche Weise
die folgende Zeile hinzu mit anderen Parametern
*/
mc.timeline.addTween(createjs.Tween.get(kreis).to({x:300},30).to({x:10},100));
INDEPENDENT, SYNCHED, SINGLE_FRAME
bezieht sich auf das Zeitleistenverhalten im Zusammenhang mit der Zeitleiste des Elternelements
INDEPENDENT die Zeitleiste des Movieclips verhält sich unabhängig von der Elternzeitleiste. Es entspricht dem Verhalten eine Movieclip Symbols, welche man mit Einfügen / Neues Symbol / Movieclip erstellt
SYNCHED entspricht dem Grafiksymbol
wo Elternzeitleiste mit der Zeitleiste des Symbols synchron laufen, stoppt die Elternzeitleiste stoppt auch die Zeitleiste des Symbols
SINGLE_FRAME der Movieclip hat nur einen Frame
Der Wert bezieht sich auf den Frame in dem der Movieclip starten soll
true: Die Zeitleiste läuft in Schleife durch
false: die Zeitleiste stoppt, wenn Sie am Ende angekommen ist
Mittels label kann man für Frames Bildnamen erzeugen, welche man dann mit Zeitleistenbefehlen wie gotoAndStop("meinBildname"); ansteuern kann. Es wird ein Objekt erwartet mit den bildnamen und framenumern in denen der Bildname zugewiesen wird.
Der MovieClip wird auf herkömmliche Art mit new und der Konstruktorfunktion erzeugt. Alternativ kann man aber auch mittels initialize() Funktion die Parameter der Konstruktor Funktion übergeben. Allerdings ist die initialize Methode deprecated.
var mc = new createjs.MovieClip;
mc.initialize(mode, startPos, loop, labels);
Mittels addChild(mc) wird der Mc der Displayliste hinzugefügt.
Damit in dem Beispiel auch etwas zu sehen ist, wird hier das Shape Objekt kreis erzeugt und ein kreis gezeichnet.
Wenn rein programmatisch Movieclips erzeugt, die auch Animationen beinhalten sollen, braucht man auch TweenJS. Eine ausführliche Beschreibung findet ihr in meinen TweenJS Tipps.
Ein Movieclip besitzt eine timeline Methode an die man ein Tween anhängt.
mc.timeline.addTween()
Als Argument wird ein Tween erwartet. Die Zeit wird nicht in Millisekunden, sondern in Anzahl von Frames angegeben.
Weitere Tweens mit anderen Objekten lassen sich auf gleiche Art hinzufügen.
Im nächsten Beispiel passiert nicht viel Neues zu diesem Thema. Der Unterschied ist die prototype Methode.