Macromedia Flash MX Animation Seminar/Workshop - Arbeitsunterlagen

Transkript

1 Macromedia Flash MX Animation Seminar/Workshop - Arbeitsunterlagen Flash Grundlagen Animation - Inhalt Topics 1 Grundlagen der Animation Textanimation, Motion Tweening 2 Mehrfachtextanimation Animationseigenschaften: Rotation, Größe 3 Publizieren und Testen Bannerwerbung, Symbole und Library, Alpha, Farbe 4 Bilderanimation, Ebenenbenennung, Lables Import von Photoshop, Transparenz mit PNG 5 Buttons und Interaktion 6 Szenen und Inhaltsstrukturierung 7 Pfad Animation und Einsatz Vektorgrafiken, Zeichnen und charmap.exe 8 Shape Tweening, Vectortext Bilder vektorisieren 9 Masken und Effekte (ab Flash 8) Wichtige Ressourcen: Kontakt und Impressum: Alexander K Nischelwitzer alexander@nischelwitzer.com Diese Unterlagen sind rein für den internen Seminargebraucht gedacht. Hierin erwähnte Produkte wurden nur zu Identifizierungszwecken erwähnt und sind möglicherweise eingetragene Marken oder Marken der jeweiligen Unternehmen. Macromedia und Macromedia Flash ist eine Marke von Macromedia, Inc. Alle anderen Markennamen oder Marken sind Eigentum der jeweiligen Besitzer. Wir liefern diese Veröffentlichung so, wie sie vorliegt, ohne jegliche Garantie, weder ausdrücklich noch impliziert, einschließlich, aber nicht beschränkt auf, die implizierten Gewährleistungen der Gebrauchstauglichkeit oder der Eignung für einen bestimmten Zweck. Wir behalten uns das Recht vor, diese Herausgabe ohne Ankündigung zu überarbeiten und ihren Inhalt zu ändern. Unterlagen Version Herbst 2005 Update: Flash Professional 8 Infos Flash Seminar Animation Grundlagen 1 / 11 Alexander K Nischelwitzer

2 Allgemeines & Einführung Flash einmal kritisch betrachtet Beispielseiten Was ist Flash? Was kann Flash? Was sind Plug Ins (Player)? Macromedia und Preise und Flash Basic 8 Vollversion ab 462 Flash Professional 8 - Vollversion ab 810 (Filter, Mobile & Video) Flash MX 2004, 499 US$, 694 Was ist Usability? Was ist Accessibility? Einsatz und Usability ( Wo und wo nicht? Flash kritisch betrachtet Nachteile? Vorteile? Flash Seminar Animation Grundlagen 2 / 11 Alexander K Nischelwitzer

3 1 Textanimation Erzeugen einer Textanimation mit Motion-Tween. Lernziel: Zeitleiste Keyframes Tweening K1 K Achtung: Twenning benötigt 2 Keyframes! K Schritte 1. Leerer Frame am Anfang erzeugen (K1) 2. Textobjekt erstellen bei (K1) mit allen Texteinstellungen 3. Keyframe (K2) erzeugen Frame wählen, rechts Click, Schlüsselbild einfügen 4. Textobjekt verschieben (bei K2) mit dem Pfeilwerkzeug 5. Tweening einstellen (bei K1) Keyframe (=Schlüsselbild) K1 wählen, rechts Click, Bewegungs-Tween erstellen Flash Seminar Animation Grundlagen 3 / 11 Alexander K Nischelwitzer

4 2 Mehrfachtextanimation Erzeugen mehrerer Textanimationen mit Layer und Leerbildern Lernziel: Layers Arten von Frames Shortcuts für Frameerzeugung K1 K2 LK K3 K Frameinfos: 1. F5 leeres Bild 2. Shift-F5 löschen eines leeren Bildes 3. F6 Schlüsselbild 4. Shift-F6 löschen eines Schlüsselbildes 5. F7 leeres Schlüsselbild Schritte für die erste Animation: 1. Leerer Frame am Anfang erzeugen (Frame 5) 2. (Leerer) Keyframe [K1] bei Frame 6 erzeugen 3. Textobjekt erstellen bei K1 4. Keyframe (K2) erzeugen 5. Textobjekt verschieben (bei K2) 6. Tweening einstellen (bei K1) 7. Leeren Keyframe (LK) erzeugen (Frame 31) 8. nächste Animation bei Frame 32: wie unter Punkt 2 Flash Seminar Animation Grundlagen 4 / 11 Alexander K Nischelwitzer

5 3 Bannerwerbung Eine Bannerwerbung (468x60 Pixel) für das Internet erstellen! Referenz: Lernziel: Symbole und Library Texteffekte (Größe, Rotation) Transparenz- und Farbeffekte Publizieren im Internet (HTML und SWF) K1 K2 K3 K4 K5 K Wichtig: Alle Textelemente aus der Bibliothek (Strg-L Library) Wiederverwendbarkeit Im Symbol nur 1 Frame! (Grafik oder Filmschleife) Einschalten der Abspielsteuerung (Fenster Symbolleisten) Vorteile von Symbolen bei Textänderungen (Instanz auf der Bühne ) Tipps mit Layers: Benennen Sperren Sichtbarkeit Flash Seminar Animation Grundlagen 5 / 11 Alexander K Nischelwitzer

6 4 Bilderanimation Grafiken einbinden und animieren. Bilddaten: bzw. Lernziel: Bilder einbinden in die Bibliothek Komplexe Animationen mit Text und Bild Erweiterte Tweeningeinstellungen K1 K2 K3 K4 K Keyframebeschreibung K1 K2 hereinbewegen und erscheinen (Alpha) K2 K3 vergrößern und Rotation K3 K4 stehen bleiben und warten (Zeitdauer zb. 3 sec) K4 K5 verschwinden Tipps: Bibliothek strukturieren mit Ordnern Teamarbeit mit Bibliotheken Zugriffsstatistik auf Objekte Benennung der Multimediaobjekte: pic_xxx, txt_xxx, snd_xxx, mov_xxx,... Filtereffekte (ab Flash Professional 8) Import von Bildern mit Transparenzbereichen mittels PNG Flash Seminar Animation Grundlagen 6 / 11 Alexander K Nischelwitzer

7 5 Buttons / Schaltflächen Einen Button mit 3 Zuständen erstellen. Unterschied zwischen: Movie Clip (Filmschleifen) Button Graphics Button Zustände: Up Over Down Hit Wichtig: Control Enable simple Buttons (Ctrl-Alt-B) Textfarbe nur beim Textsymbol Einfärbung eines Symbols über Effekt! Animierte Buttons Movie testen Exakt im Mittelpunkt die Symbole setzen (Info Fenster 0/0) Achtung: es gibt 9 Positionen zum setzen (wie in Tabellen bei HTML) Wo sind Sie? Szene Button Symbol Layer Bild Animationen in Buttons mit Test Movie testen! Tipp: Scale-9 um Schaltflächen optimal zu skalieren (seit Flash 8) Flash Seminar Animation Grundlagen 7 / 11 Alexander K Nischelwitzer

8 6 Szenen Szenen erstellen und mit Buttons zwischen ihnen wechseln. Programmierung von Objekt- und Frameactions! 3 Szenen erstellen: Intro / Main / End Intro Main End Step by Step für Frame Action: 1. neue Ebene ganz oben (zb. mit Name scripts) 2. leeren Keyframe setzen (zb. bei Frame 20 mit F7) 3. In Actionsmenü wechseln (Doppelclick bei Frame) 4. Action Basic Actions - Stop einfügen bei Frame 20 (Doppelclick auf Stop Action) 5. Control Enable simple Frame Actions Frame Action (bei leeren Keyframe im Intro) stop (); Step by Step für Object Action: 1. Button auf Bühne in eine eigene Ebene (Layer) einfügen 2. Basic Action Script einfügen bei Buttons (rechte Maustaste) a. On Mouse Event (Doppelclick) b. Go To: Scenen einstellen! Object Action (bei ersten Button im Intro) on (release) { gotoandplay ("main", 1); } Tipp: eigenes Layer (ganz oben) für die Frame Actions Wichtig: Control Enable simple Frame Actions Buttons von der Standardlibrary: Windows Common Libraries Buttons Flash Seminar Animation Grundlagen 8 / 11 Alexander K Nischelwitzer

9 7 Pfadanimation Motion Tween entlang eines Pfades (Guide) Step by Step: 1. Add motion guide (Layer, rechte Maustaste) 2. Pfad zeichnen (im Guide Layer) Stiftwerkzeug verwenden Vermeiden Sie Überkreuzungen! 3. Symbol erzeugen (zb. Kreis) Mittelpunkt richtig setzen 0/0 4. Symbol unter Motion Guide einfügen (Objektlayer) 5. Keyframe am Ende erzeugen (im Objektlayer) 6. Motion Tweening einstellen (im Objektlayer 7. Click im Mittelpunkt des Objekts und Positionierung am Anfang und am Ende des Guides Guide Layer sperren (Schloss) 8. Pfadanimation testen Tipps: Orientierung an Pfad (zb. Flugzeug, Mauszeiger, etc.) Flash Seminar Animation Grundlagen 9 / 11 Alexander K Nischelwitzer

10 8 Shape Tweening Aufgabe und Ziele: Objektänderung von Form1 und Form2. Step by Step: 1. 2 Symbole generieren (zb. Charmap) 2. Objekte plazieren in ein Layer 3. Objekt aufspalten (Modify Break apart) 4. Shape Tweening einstellen (Panel: Frame Shape Tweening) Tipp: Zwiebelschichten (Onion Skin) einstellen um die Animation zu optimieren Exakte Shape Tweens erstellen: 1. Shape Tweening Startkeyframe auswählen 2. Shape Hints: Modify Transform Add Shape Hints (setzen) (Ctrl-Shift-H) 3. Shape Hints in beiden Keyframes positionieren Flash Seminar Animation Grundlagen 10 / 11 Alexander K Nischelwitzer

11 9 Maskeneffekt Erstellen eines Maskeneffekts (zb. Spotlight) 1. Symbol anlegen: Bild einfügen 2. Symbol anlegen: Kreis 3. Anlegen von 2 Ebenen 4. Obere Ebene als Maske definieren 5. Kreis in die Maskenebene (oben) 6. Bild in die untere Ebene 7. Animation der Maske (zb. Größe) 8. Animation mit dem Bild (zb. Alpha [unsichtbar]) 9. Wichtig; beide Ebenen sperren (Schloss)!! Tipp: Gleiches Bild im Hintergrund mit leichter Sichtbarkeit Flash Seminar Animation Grundlagen 11 / 11 Alexander K Nischelwitzer