Text Animationen mit DoTween
DoTween ist ein Actionscript Framework zum erstellen von Text Animationen.
Es erweitert die TweenLite (v9.28) Tweening Klassen. Mit ihnen ermöglicht das Framework in kürzester Zeit komplizierten Text Animationen zu erstellen
DOWNLOAD – DoTween v1.32 (212 KB)
Wie funktioniert DoTween?
Do Tween muss ein Dynamisches Textfeld mit eingebetteter Schrift übergeben werden. Das Textfeld wird ausgeblendet und über ihm ein MovieClip erstellt. In diesem Container wird für jeden Buchstaben im Textfeld ein eigener MovieClip angelegt. Wurde bereits ein Container zum Textfeld erstellt, wird der bereits vorhandene verwendet. Ebenso wird für jede Animation ein leerer MovieClip angelegt der über ein onEnterFrame die Timings berechnet. Die MovieClips werden nun nach den Eigenschaften im Setup Object eingerichtet. Getweent werden die Buchstaben mit TweenLite nach dem übergebenen Tweening Objekt.
Voraussetzungen
DoTween läuft ab Flash Player 6 mit Actionscript 2. Mit TweenLite v9.28 ist das Framework (exportiert) in etwa 6Kb groß.
Beispiel:
Import de.davidochmann.animation.DoTween
DoTween.from(mText, {_init:1, _delay:.5, _time:2}, {_alpha:0});
Im Beispiel startet die Animation nach einer Sekunde. Der Abstand zwischen den Buchstabenanimationen beträgt eine halbe Sekunde. Die Animationszeit für jeden Buchstaben beträgt zwei Sekunden.
Die Animation beginnt bei allen Buchstaben auf mit einem Alpha Wert von 0, und endet mit allen Buchstaben auf einem Alpha Wert von 100.
DoTween Anwenden:
DoTween.from(Dynamisches Textfeld, Setup Object , Tween Object);
Setup Object
Das Setup Object kann folgende Eigenschaften enthalten:
- _init – Pause in Sekunden bis zum Start der Animation. (Default Value: 0)
- _delay – Pause in Sekunden zwischen den Animationen der einzelnen Buchstaben. (Default Value: 1)
- _time – Die Dauer in Sekunden, eines Buchstaben Tweens. (Default Value: 1)
- _spacing – Abstand in Pixeln zwischen den einzelnen Buchstaben. Wird kein Wert angegeben wird das Spacing nach der breite der Buchstaben im übergebenen Textfeled errechnet.
- _disx – Dislocation X. Verschiebung jedes Buchstaben in der X Achse. (Default Value: 0)
- _disy – Dislocation Y. Verschiebung jedes Buchstaben in der Y Achse. (Default Value: 0)
- _visible – Wichtig bei “to” Animationen. Boolscher Wert der angibt ob die zu animierenden Buchstaben vor der Animation sichtbar sein sollen. (Default Value: false)
- _onStart – Funktion die beim start der Animation ausgeführt werden soll.
- _onStartScope – Scope der Funktion die beim Starten der Animation ausgeführt wird.
- _onStartParams – Parameter die an die start Funktion übergeben werden sollen.
- _onComplete – Funktion die zum Ende der Animation ausgeführt werden soll.
- _onCompleteScope – Scope der Funktion die zum Ende der Animation ausgeführt wird.
- _onCompleteParams – Parameter die an die complete Funktion übergeben werden sollen.
TweenObject
Eine ausführliche Dokumentation der Eigenschaften die das TweenObject enthalten kann, finden Sie unter http://blog.greensock.com/tweenliteas2/.
Wichtiger Hinweis:
Durch das automatische anlegen von MovieClips über dem Dynamischen Textfeld, wird der Inhalt von Ebenen die über den Textfeld liegen und keine MovieClips, Buttons oder Textfelder enthalten überschrieben!
Umgehen lässt sich dieses Verhalten indem man das Textfeld selbst innerhalb eines leeren MovieClips anlegt.
DoTween befindet sich immer noch in Entwicklung. Das Framework ist nicht Fehlerfrei und die Datei Größe noch nicht optimiert! Änderungen und Erweiterungen der Klassen werden auf diesem Blog dokumentiert.Feedback und/oder Verbesserungsvorschläge zu DoTween können an mail@davidochmann.de geschickt werden. Ich freue mich auf erste Ergebnisse. Und nun viel Spass beim Text tweenen.
DoTween v1.0
Die zip Datei enthält: Eine Beispiel fla, DoTween v1.0 und TweenLite AS2 v9.28