Ein Text in Flash so animieren, dass es aussieht als würde er gerade erst geschrieben. Ein ausführliches Tut für Flash MX mit vielen Screenshots. Vor allem für Anfänger geeignet Da in diesen Tutorial die Einstellungen der Bühnengröße, Farbe usw. egal ist, gehe ich auf diese nicht näher ein. Als erstes sollte man ein Bild von einem Stift importieren oder selber erstellen. Danach sucht man sich die Schriftart aus und stellt sie nach seinen Wünschen ein. Diese Einstellungen sind genau zu Überlegen. Später kann man an diesen Einstellungen nichts mehr ändern. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 1 - Einstellungen der Schrift] body=[<img src='uploads/pics/tutorial01.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Danach erstellt man auf der Bühne den Text und richtet ihn aus. Bei längeren Texten ist es zu empfehlen das komplette Alphabet zu animieren. Nach dem der Text erstellt wurde, drückt man F8 und erzeugt mit dem Text ein neues Symbol. Danach Arbeitet man mit dem Symbol weiter, jetzt drückt man CTRL+B oder man wählt aus dem Menü Modifizieren/Teilen aus. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 2 - Es müsste sich um jeden Buchstaben ein blaues Kästchen gebildet haben] body=[<img src='uploads/pics/tutorial07.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Im Anschluss wird CTRL + Shift + D gedrückt. Jeder Buchstabe vom Wort sollte sich jetzt auf eine eigene Ebene verteilt haben, anschließend schließt man die Ebenen ab. (Sicherheitshalber damit man später nicht aus versehen eine falsche Ebene bearbeitet). ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 3 - Die Buchstaben haben sich auf eine eigene Ebene verteilt.] body=[<img src='uploads/pics/tutorial08.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Nun wird der erste Buchstabe markiert, dieser wird dann mit der rechten Maustaste angeklickt. Im Folgenenden Kontextmenü wird dann das Feld Im Symbol Umwandeln ausgewählt. Alternativ kann man auch F8 drücken. Danach wird das Symbol auf Film eingestellt und ein Namen vergeben. Das wird jetzt bei jedem Buchstaben wiederholt. Doppelte Buchstaben brauchen nicht in ein Symbole umgewandelt werden. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 4 - Einstellungen der Symbole.] body=[<img src='uploads/pics/tutorial10.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Jetzt wird die Bibliothek mit CTRL+L oder in der Menüleiste auf Fenster/Bibliothek geöffnet. In der Bibliothek öffnet man dann den ersten Film mit einem Doppelklick. Auf der Arbeitsfläche erscheint nun der Inhalt des Filmes. Nun wird die Arbeitsfläche auf 800% eingestellt und jetzt wird der Buchstabe auf der Arbeitsfläche markiert, so das ein blauer Rahmen um den Buchstaben erscheint und dann drückt man CTRL+B. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 5 - Der Buchstabe sollte jetzt so aussehen.] body=[<img src='uploads/pics/tutorial12.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Im Anschluss geht man wieder auf die Zeitleiste, dort wird dann auf das erste Schlüsselbild mit der rechten Maustaste geklickt, im Kontextmenü wird dann das Feld Frame Kopieren ausgesucht.
Wichtig: Ab jetzt nichts mehr Kopieren oder Löschen! ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 6 - Bild kopieren] body=[<img src='uploads/pics/tutorial14.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Nun klickt man hinter dem ersten Schlüsselbild in der Zeitleiste mit der rechten Maustaste, im darauf erscheinende Kontextmenü wird dann auf Bild einfügen geklickt, danach wird das neue Schlüsselbild markiert. Der Vorteil bei dieser Variante ist, man brauch das Bild nicht jedesmal neu auszurichten. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 7 - Bild einfügen] body=[<img src='uploads/pics/tutorial15.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Jetzt wird in der Zeitleiste das letzte Schlüsselbild markiert und mit der rechten Maustaste angeklickt. Im dem erscheinenden Kontextmenü, wählt man dann das Feld Aktionen aus. Unten auf der Arbeitsbühne öffnet sich nun das Aktionsfeld. Dort wird folgender Code eingegeben. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 11 - Jenachdem wir Flash eingestellt ist, muss man das Aktionsfeld auf Expertenmodus umstellen.] body=[<img src='uploads/pics/tutorial18.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Anschließend geht man wieder auf die Zeitleiste und schließt die Ebene ab. Danach erstellt man eine neue Ebene und eine Führungsebene. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 12 - Führungsebene] body=[<img src='uploads/pics/tutorial22.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Jetzt wird die Führungsebene markiert und danach geht man dann dann auf die Arbeitsbühne. Mit dem Freihandwerkzeug (Bleistift), wird dann der Buchstabe nachgezeichnet. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 13 - Diese Linie sieht man im fertigen Film nicht mehr.] body=[<img src='uploads/pics/tutorial23.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Nun geht man wieder in die Zeitleiste und markiert die mittlere Ebene und erstellt ein zweites leeres Schlüsselbild. Danach geht es wieder zurück auf die Arbeitsbühne und holt aus der Bibliothek den Stift. Der wird auf der Bühne platziert. Dabei ist zu beachten, dass das erste Schlüsselbild leer bleibt. Nun wird das Bild mit dem Stift markiert und der Mittelpunkt wird auf die Spitze des Stiftes gezogen, im Anschluß richtet man die Spitze am oberen Rand von der Linie aus. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 14 - markieren] body=[<img src='uploads/pics/tutorial24.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Jetzt wird in der Zeitleiste in der Ebene vom Stift mit rechts reingeklickt. Im folgenden Kontextmenü wird dann Bewegungstween erstellen ausgewählt. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 15 - Bewegungs Tween] body=[<img src='uploads/pics/tutorial39.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Die Ebene müßte nun blau hinterlegt sein. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 16 - Zeitleiste] body=[<img src='uploads/pics/tutorial25.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Jetzt wird das letzte Bild auf der Zeitleiste von der Ebene "stift" markiert. Darauf ist zu achten, dass die Zeitleiste ein Bild vor der untersten Ebene endet. Ansonsten bleibt der Stift sichtbar und das soll ja nicht sein. Nun geht man wieder auf die Arbeitsbühne und zieht den Stift bis zum Ende der Linie. Flash erzeugt automatisch ein neues Schlüsselbild. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 17 - Linie ziehen] body=[<img src='uploads/pics/tutorial27.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Der erste Buchstabe ist nun fertig, die ganzen Schritte werden dann mit den anderen Buchstaben wiederholt. Nun geht man wieder auf die erste Szene zurück. Dort wird eine zweite Ebene erstellt in der man den Text nochmal reinschreibt. Diese Ebene wird zum Schluß wieder gelöscht, sie ist nur als Hilfe zum Ausrichten gedacht. Jetzt klickt man doppelt auf den Film, wo der Text drin steht. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 19 - Nun sollte es so aussehen] body=[<img src='uploads/pics/tutorial29.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Nun ersetzt man in der Zeitleiste, die einzelen Buchstaben mit den animierten Filme und richtet sie anhand der Schrift aus. In jeder Ebene wird allerdings das Schlüsselbild um 1 Bild weiter rechts verschoben, so das es am Schluß so aussieht. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 20 - Zeitleiste am Ende] body=[<img src='uploads/pics/tutorial32.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) In der Aktionsebene setzte man nun auf dem ersten Schlüsselbild ein "stop();" und in der Höhe des letzten Schlüsselbildes erstellt man ein leeres Schlüsselbild. Das auch nur ein "stop();" enthält.
Jetzt geht es wieder auf die Szene 1 zurück und man löscht dort die Hilfsebene wieder. Danach makiert man den eigentlichen Film und vergibt im einen Instanznamen, in diesem Fall ist es wichtig das er schrift heißt. ![cssbody=[boxover] cssheader=[boxoverheader] header=[Abbildung 21 - Instanznamen] body=[<img src='uploads/pics/tutorial33.jpg'>] tooltipp](typo3conf/ext/sk_tutimglinks/tt.gif) Wenn man das hinter sich hat, geht man wieder in die Bibliothek und klickt auf die einzelnen Filme doppelt und dort löscht man jeweils das erste Schlüsselbild.
Jetzt ist es fertig und es sollte nun so aussehen. Ich hoffe, ich konnte es halbwegs verständlich erklären. Es ist mein erstes Tutorial, dass ich geschrieben habe.
Gruß
Wanderratte
Ralf Berg)
Autor: Wanderratte
|