Komplexe Animationen mit exportRoot

In den ersten paar Frames der Bühne liegt jeweils ein anderes Bitmap mit einer Echse.

Auf einer Ebene darüber liegt ein Movieclip. In diesem Movieclip befindet sich eine Tweening Animation, in welcher eine schwarze Fläche nach unten hin größer wird und dann wieder nach oben hin kleiner.

In der Mitte dieses Tweenings verdeckt diese schwarze Fläche das Bild auf der Bühne. In dem Moment, sollte auf der Hauptbühne das nächste Bild angezeigt werden, indem der nächste Frame aufgerufen wird.

Mit folgendem Javascript wurde das erzeugt.

Erster Frame auf der Hauptbühne

this.stop();

 

Im Movieclip, welcher das Tweening enthält, befindet sich im mittleren Frame folgendes Script


exportRoot.gotoAndStop(exportRoot.currentFrame = exportRoot.currentFrame +1);

exportRoot verweist auf die Hauptbühne. Der nächste Frame des Hauptfilms wird aufgerufen. Wenn das letzte Bild der Zeitleiste erreicht ist und man geht ein Bild weiter, wird automatisch das erste Bild aufgerufen. Das ist in easelJS sehr komfortabel und in Actionscript nicht möglich.

In den Download Dateien befinden sich weitere Dateien, die Schritt für Schritt zum nächsten Beispiel führen.

Slideshow mit Navigation