Anzeige
Tutorialbeschreibung

Flash Grundlagen Tutorials Teil 9

Flash Grundlagen Tutorials Teil 9

Hey Leute,

Ich hab endlich mal wieder Zeit gefunden ein Tutorial für meine Grundlagenserie zu schreiben.
Diesmal gehts um die Animation eines Textes, mit mehreren Beispielen.

[[ Diesmal habe ich ein bisschen rumexperiementiert, dass die Erfahrenen User nicht unbedingt alles lesen müssen und die Neulinge trotzdem immer wissen wie sie es ganz genau machen müssen damit es so wird wie bei mir.

Also das Fettgedruckte sind die Schritte die jeder befolgen sollte und die Schritte mit dem "-->" sind für Neulinge wenn sie mal nicht wissen was sie machen sollen.

Ich hoffe das ihr alles versteht ;-) ]]


Fangen wir an.

Öffnet zuallererst natürlich Macromedia Flash 8 Professional, oder Adobe Flash CS3. Welches Programm ist definitiv egal, weil wir nicht mit Skript arbeiten müssen.

1. Erstellt ein neues Dokument und stellt die Framerate unter den Einstellungen auf 30.

2. Erstellt einen Text mit dem Textwerkzeug.
    --> Einfach auf das 

Bilder
bei den Werkzeugen klicken.
       --> Ich habe einfach mal geschrieben "Textanimation".

3. Zentriert den Text horizontal und vertikal. (Setzt ihn in die Mitte)
   --> Einfach den Text auswählen indem ihr einmal draufklickt, und dann rechts im Fenster Ausrichten Transformieren Info
   
Bilder

    auf
Bilder
und
Bilder
klicken.


So sieht dann der Komplette Bildschirm bisher aus:
Bilder

(für Vollansicht auf das Bild klicken)


4. Jetzt konvertieren wir den Text zu einem mc.
   --> Den Text auswählen und F8 drücken.
   --> Beim folgenden Fenster die Registration in die Mitte festlegen. (Bild)
Bilder

  --> Danach einfach auf OK klicken.


5. In den mc gehen, und nochmal den Text teilen.

   --> Doppelklick auf den mc.
   --> Rechtsklick auf den Text und dann auf teilen klicken. (Bild)
Bilder


Jetzt haben wir alle Buchstaben als einzelne Textfelder und können sie unabhängig bearbeiten, allerdings wirds dann schwer den Text noch zu ändern also vorher entscheiden.


6. Jeden einzelnen Buchstaben in einen mc konvertieren.
   --> ersten Buchstaben anwählen F8 drücken, und dann auf OK, zweiten Buchstaben anwählen.... usw.

Jetzt haben wir jeden einzelnen Buchstaben als mc und können sie animieren.


7. Alle Buchstaben auf Verschiedene Ebenen legen.

   --> Wählt alle Buchstaben an und drückt auf "auf Ebenen verteilen", dann sind alle Buchstaben auf einer einzelnen Ebene in der Zeitleiste.
     -->Jetzt haben wir so viele Ebenen wie Buchstaben der Text hat, und noch eine leere Ebene wo vorher alle Buchstaben drauf waren.
        --> Die kann man löschen, weil sie nicht benötigt wird. (einfach anwählen und dann auf den Papierkorb im unteren Bereich der Zeitleiste drücken.)
Bilder



Damit hätten wir den einfachsten Teil geschafft. ;-)
Weiter gehts mit der Animation.


8. Auf allen Ebenen ein Schlüsselbild in Frame 15 erstellen.
   --> In der Zeitleiste auf das Zehnte Bild mit der Maus gehen und alle Ebenen in auf dem Bild anstreichen. (Bild)
     --> Jetzt F6 drücken um in jeder angestrichenen Ebene ein Schlüsselbild zu erstellen.
Bilder



Jetzt werden die Veränderungen vorgenommen die Animiert werden sollen:

Wert der verändert wird Veränderung
Y-Wert ca. 100px
Weichzeichner Y 100% auf hoher Qualität
Alpha (Deckkraft) 100%
Skalierung Y 200%
 
Das mal als kleine Vorschau was ich verändere, das wird von mir natürlich nochmal ausführlich erläutert.


9. Im ersten Frame die Veränderungen oben Anwenden.
   --> Alle mc´s anstreichen und auf den ersten Frame/Bild in der Zeitleiste gehen.
   --> Alle mc´s nach oben verschieben, um 100px, also in den Einstellungen bei Y den Wert auf 119 festlegen.
Bilder



Jetzt wird der Weichzeichenfilter angewendet und das geht wie folgt:
Zuerst muss man das Fenster für die Filter öffnen und zwar auf Fenster --> Eigenschaften --> Filter. (Bild)
Bilder



Hoffentlich sind noch alle mc´s angestrichen, wenn nicht wieder alle anstreichen. Jetzt bei den Filtern auf das Plus Zeichen klicken und den Weichzeichen Filter auswählen. (Bild)
Bilder


Jetzt haben wir folgende Voreinstellungen:
Bilder


Stellt x Weichzeichnen auf 0.
Stellt y Weichzeichnen auf 100.
Stellt Qualität auf: hoch.

Dann müssten alle Buchstaben nach oben und unten verwischt sein, so das man sie nicht mehr erkennt.

Jetzt kommt noch die Alpha also die Deckkraft der Buchstaben hinzu. Wählt wieder alle mc´s an und klickt auf die Eigenschaften. Jetzt müsst ihr auf Farbe gehen und dort Alpha auswählen. Stellt den Wert auf 0. (Bild)

Bilder



Jetzt kommt noch die letzte Veränderung und zwar das wir alle Buchstaben noch ein bisschen vergrößern, in der Höhe.
Mit 200% in der Tabelle meine ich das wir alle Buchstaben doppelt so groß machen wie sie eigentlich sind.
Streicht also wieder alle mc´s an und geht unter den Einstellungen auf H:
Die ist bei mir auf 39.8.
Also stelle ich sie auf 79.6.
Achtet dabei dadrauf, dass das Schloss in der Mitte von B und H geöffnet ist, weil ihr sonst beide Werte gleichzeitig verändert und wir wollen nur die Höhe verändern.


So sieht mein Bildschirm jetzt aus:
Bilder

(für Vollansicht auf das Bild klicken)

Somit wäre die Animation fast fertig.

10. Bewegungstween in allen Ebenen erstellen.
   --> Alle Ebenen nochmal anstreichen im ersten Bild.
     --> Unter den Einstellungen bei Tween auf Bewegungstween klicken.
       --> Die Beschleunigung auf 100 stellen. (Bild)
Bilder


Wenn man jetzt einmal die Animation anguckt dann sieht es so aus:



Jetzt kann man noch einen kleinen schönen Effekt zaubern, den ich schon in einem anderen Tutorial benutzt habe.

11. Jede weitere Ebene um 5 Bilder mehr verschieben.
   --> Streicht die zweite Ebene an, wo der zweite Buchstabe drin ist und streicht alle 10 Bilder in der Zeitleiste an.
     --> Drückt und haltet auf die Bilder und verschiebt sie um 5 Bilder weiter.
      --> Geht in die Dritte Ebene wo der dritte Buchstabe drin ist und verschiebt ihn um 10 Bilder weiter.
     --> Jede Ebene 5 Bilder mehr verschieben. (Animation)



Zu guter letzt gibts noch eine Sache die man machen muss.

12. Jede Ebene, außer die letzte, auf das letzte Bild anstreichen und F5 drücken.
   --> Damit jeder Buchstabe auch die ganze Animation über angezeigt wird, muss man in jeder Ebene ausser der letzten normale Frames/Bilder bis zum letzten Bild machen, also da wo das letzte Schlüsselbild in der letzten Ebene gemacht wurde.
Beispiel: Die Animation des letzten Buchstabens endet auf Bild 60, dann muss jede Ebene bis zu diesem Bild (also Bild 60) erstellt werden.


So sieht jetzt mein Bildschirm aus:
Bilder

(für Vollansicht drauf klicken)


So, damit wären wir fertig mit diesem Tutorial.
und da wir alles in einem mc gemacht haben, könnt ihr jetzt noch die Größe des mc´s oder die Position verändern, ihr könnt auch noch Filter drauflegen usw.

Ich hoffe ihr habt alles verstanden und damit ihr eure Arbeit auch überprüfen könnt, stell ich hier mal die fla. zur Verfügung.
(Aber wohlgemerkt könnt ihr euch die Arbeit nicht ersparen, weil wenn ihr einen anderen Text haben wollt sofort alles ändern müsst *g*)

www.therocki.de/pn/Psd-Tutorials/Textanimation.zip

zur Sicherheit ist mein Name das Passwort.^^

Falls der Link nicht mehr funktioniert bitte per pm melden ich geb euch dann so die Datei oder versuche das Problem zu lösen.


Bis zum Nächsten mal.
Und vergesst nicht ein Kommentar zu machen. ;-)



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.09.2010 - 11:15

Diesmal echt super erklärt, macht Spaß :D

Portrait von pfriemala
  • 13.04.2010 - 13:17

vielen dank - war sehr verständlich ;)

Portrait von kristinam
  • 09.03.2010 - 08:19

vielen vielen dank! ich bin gespannt auf deine anderen tutorials :)

Portrait von trespasser
  • 18.02.2010 - 09:56

Sehr gutes Tutorial! Auch für die Benutzer neuerer Versionen.

Portrait von miendienche
  • 10.02.2010 - 14:14

vielen Dank, es funktioniert prima

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.01.2010 - 14:40

Super Tutorial.
Werde ich heute schon probieren.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 22.10.2009 - 15:21

ICH TICKS SUPER:WEITER SO HOMIE

Portrait von wuttge
  • 14.10.2009 - 08:58

Danke für das tolle Tutorial!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 02.10.2009 - 14:38

super find deine tutorials alles sehr gut mach weiter so

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 23.09.2009 - 11:35

Super Tutorial, habe gut was gelernt

Portrait von seppdomin
  • 08.09.2009 - 16:25

hat mir wirklich geholfen

Portrait von Verpeilt67
  • 04.08.2009 - 00:15

Danke!! sehr gut und verständlich erklärt!!

Portrait von ivadesign
  • 03.07.2009 - 10:17

Ganz toll und verstänlich gemacht!
Danke

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.06.2009 - 20:12

ich habe deine ganze serie bis jetzt durchgemacht, werde sie auch noch vollenden! bis jetzt hat alles super geklappt und der einstieg in flash ist mir super gelungen, davor hatte ich das prog nie in den händen, echt genial, danke!

Portrait von Kavita
  • 25.03.2009 - 09:01

Danke für die tollen Erklärungen.

Portrait von Morano
  • 17.03.2009 - 14:26

Einmalig gut..! Dankeschön

Portrait von suslik87
  • 11.02.2009 - 18:04

:) danke...........................

Portrait von Glueckskatze
Portrait von Nerevar25
  • 20.01.2009 - 17:18

Super für banner, danke.

Portrait von Spin_1987
  • 17.01.2009 - 12:06

Vielen dnk für dieses tutorial.war hilfreich

x
×
×