NetObserver Studie
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Flash > Mit Flash MX eine Schrift animieren

Mit Flash MX eine Schrift animieren

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. tooltipp

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. tooltipp

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). tooltipp

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. tooltipp

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. tooltipp

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! tooltipp

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. tooltipp

Jetzt wird das zweite Schlüsselbild makiert, nun wird das Zeichenwerkzeug Radieren ausgewählt. Die Größe und Stärke des Radiergummis sollte man seinen Bedürfnissen / Vorlieben anpassen. Nun geht man auf die Arbeitsbühne und Radiert fast den ganzen Buchstaben weg. Es bleibt nur noch ein Stück stehen, wo später der Zeichenstift anfangen soll. Nun wird ein weiteres Schlüsselbild eingefügt, wie es oben beschrieben wurde. Im Anschluss wird wieder fast der ganze Buchstabe wegradiert, allerdings lässt man diesmal etwas mehr stehen, wie bei dem vorherigen Bild. Nun werden die Schritte wiederholt, solange bis der Buchstabe voll das ist. Wenn der ganze Buchstabe zu sehen ist, wird noch ein weiteres Schlüsselbild gesetzt. (Das ist für den einen späteren Abschnitt wichtig und erklärt sich dann von selbst.) tooltipp tooltipp tooltipp

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. tooltipp

Anschließend geht man wieder auf die Zeitleiste und schließt die Ebene ab. Danach erstellt man eine neue Ebene und eine Führungsebene. tooltipp

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. tooltipp

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. tooltipp

Jetzt wird in der Zeitleiste in der Ebene vom Stift mit rechts reingeklickt. Im folgenden Kontextmenü wird dann Bewegungstween erstellen ausgewählt. tooltipp

Die Ebene müßte nun blau hinterlegt sein. tooltipp

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. tooltipp

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. tooltipp tooltipp

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. tooltipp

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. tooltipp

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

Abbildungen

Abbildung 1 - Einstellungen der Schrift

Abbildung 1 - Einstellungen der Schrift

Abbildung 2 - Es müsste sich um jeden Buchstaben ein blaues Kästchen gebildet haben

Abbildung 2 - Es müsste sich um jeden Buchstaben ein blaues Kästchen gebildet haben

Abbildung 3 - Die Buchstaben haben sich auf eine eigene Ebene verteilt.

Abbildung 3 - Die Buchstaben haben sich auf eine eigene Ebene verteilt.

Abbildung 4 - Einstellungen der Symbole.

Abbildung 4 - Einstellungen der Symbole.

Abbildung 5 - Der Buchstabe sollte jetzt so aussehen.

Abbildung 5 - Der Buchstabe sollte jetzt so aussehen.

Abbildung 6 - Bild kopieren

Abbildung 6 - Bild kopieren

Abbildung 7 - Bild einfügen

Abbildung 7 - Bild einfügen

Abbildung 8 - Das erste Bild nach dem Radieren

Abbildung 8 - Das erste Bild nach dem Radieren

Abbildung 9 - Das zweite Bild nach dem Radieren

Abbildung 9 - Das zweite Bild nach dem Radieren

Abbildung 10 - Das dritte Bild nach dem Radieren

Abbildung 10 - Das dritte Bild nach dem Radieren

Abbildung 11 - Jenachdem wir Flash eingestellt ist, muss man das Aktionsfeld auf Expertenmodus umstellen.

Abbildung 11 - Jenachdem wir Flash eingestellt ist, muss man das Aktionsfeld auf Expertenmodus umstellen.

Abbildung 12 - Führungsebene

Abbildung 12 - Führungsebene

Abbildung 13 - Diese Linie sieht man im fertigen Film nicht mehr.

Abbildung 13 - Diese Linie sieht man im fertigen Film nicht mehr.

Abbildung 14 - markieren

Abbildung 14 - markieren

Abbildung 15 - Bewegungs Tween

Abbildung 15 - Bewegungs Tween

Abbildung 16 - Zeitleiste

Abbildung 16 - Zeitleiste

Abbildung 17 - Linie ziehen

Abbildung 17 - Linie ziehen

Abbildung 18

Abbildung 18

Abbildung 19 - Nun sollte es so aussehen

Abbildung 19 - Nun sollte es so aussehen

Abbildung 20 - Zeitleiste am Ende

Abbildung 20 - Zeitleiste am Ende

Abbildung 21 - Instanznamen

Abbildung 21 - Instanznamen

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /