In diesem Beispiel wird ein Movieclip im Script auf der HTML Seite erzeugt. Siehe auch dieses etwas überschaubarere Beispiel addChild/movieClip_1.html
Anstatt einen Movieclip mit
var mc = new createjs.MovieClip();
this.addChild(mc);
zu erzeugen wurde er hier auf eine etwas andere Art gemacht. Das Script wurde nicht innerhalb des AnimateCC Programms eingegeben, obwohl auch das möglich wäre. In erster Linie wird diese Art jedoch dazu eingesetzt um einen Movieclip ohne das AnimateCC Programm zu erzeugen. Die Prototype Funktion wird unter OOP erklärt.
Siehe dazu den Quelltext.
var Child = function (){
//INDEPENDENT, SYNCHED, SINGLE_FRAME
var mode = createjs.MovieClip.INDEPENDENT;
//in welchem Frame startet es
var startPos = 0;
var loop = true;
var labels = {start:0, mitte:30, ende:60};
this.initialize(mode, startPos, loop, labels);
//irgendein Displayobjekt wird dem MC hinzugefügt, in diesem Fall ein Kreis
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
//this.addChild(circle);
//Animation wird per Tween erstellt, siehe TweenJs
this.timeline.addTween(createjs.Tween.get(circle).to({_off:true},30).wait(30));
}
Child.prototype = new createjs.MovieClip();
var myMc = new Child();
stage.addChild(myMc);
//INDEPENDENT, SYNCHED, SINGLE_FRAME bezieht sich auf das Zeitleistenverhalten im Zusammenhang mit der Zeitleiste des Elternelements
INDEPENDENT entspricht dem Movieclip
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
startPos bestimmt den Startframe der Animation bzw. Zeitleiste
labels hier wird ein Objekt erstellt. Es werden Framebezeichnungen oder Labels angegeben und als Wert die Framenummern.
initialize() erwartet die Argumente der Konstruktorfunktion
Mittels timeline.addTween wird ein Zeitleistenverhalten definiert. Anstatt das DisplayObject circle mittels this.addChild(circle) dem Movieclip hinzuzufügen, wurde der timline Methode ein Tween hinzugefügt
this.timeline.addTween();
addTween erwartet ein Tween. Das Zielobjekt wird in der get() Funktion übergeben. Eigenschaften werden mit .to() definiert. Es werden keine Millisekunden sondern Frames angegeben. _off bedeutet das Objekt ist ausgeblendet. In diesem Beispiel ist das Objekt am Anfang sichtbar, ab Frame 20 ist es unsichtbar, dann folgt eine Wartezeit von 30 Frames. Gesamtzeit 50 Frames.
createjs.Tween.get(circle).to({_off:true}, 20) .wait(30)
Ein weiteres Beispiel für eine Zeitleistenprogrammierung
this.timeline.addTween(createjs.Tween.get(circle).to({x:300},30).to({x:100},30));
labels bietet die Möglichkeit Bildnamen zu vergeben, welche man dann nutzen kann beispielsweise mit
gotoAndStop("mitte");