Animationen und Tweening

Transkript

1

2 Inhalt Vorwort... 8 Animationen und Tweening Die Dokumentklasse Die neuen Zeichen werkzeuge in Flash CS Nutzen Sie die neuen Möglichkeiten Zufallsanimation Mit Hilfe der TweenLite-Engine krabbelt eine Spinne zufallsgesteuert hin und her Klassen, Vererbung, Pakete Inverse Kinematik Erzeugen von lebendigen Animationen Der neue Bewegungs-Editor in Flash CS Neue Tween-Möglichkeiten in Flash CS4 Die Anzeigeliste Audio Audio-Player Ein eigener MP3-Player in Flash CS4 Sprechender Smiley Ein Smiley bewegt den Mund passend zur Mikrofon-Aufnahme Soundgenerierung: Mini-Synthesizer Programmieren von dynamisch generierten Sounds mit Flash CS4 4 Inhalt

3 Farben und Bilder Das BitmapData-Objekt Vergrößerungs-Effekt Bildteile wie mit einer echten Lupe vergrößern Farbwähler Farbwerte eines Bildes auslesen und anzeigen Effekte Web 2.0-Reflexion Movieclips mit einem nahtlosen Übergang und Alphaverlauf spiegeln Feuer-Effekt Ein feuriges Flash-Vergnügen mit den Bitmap-Operationen von Flash Partikel-Effekt Bildpartikel animieren Flüssigkeit-Effekt Plastischen Ketchup mit der Maus erzeugen Pflanzengenerator Pflanzen mit der Maus wachsen lassen Verwischen-Effekt Bitmapdaten abhängig von der Mausposition kopieren und verwischen 3D Flash und 3D CardFlip Programmieren eines CardFlip-Effekts mit der 3D-Engine von Flash CS4 Inhalt 5

4 Cover Flow und Flickr Programmieren eines Cover-Flow-Effekts mit der 3D-Engine von Flash CS4 XML Papervision3D-Bilder karussell Einführung in die 3D-Programmierung mit Papervision3D Dynamisches Formular mit Validierung Ein Kontaktformular mit ActionScript 3 prüfen Flash Remoting Flash-Gästebuch Flash Remoting für dynamische Inhalte Tooltips in Flash Eigene Tooltips erstellen Kontextmenü Ein eigenes Kontextmenü erstellen XML-Quiz-Spiel Ein Quiz-Spiel mit XML AIR-Thermometer Aktuelle Temperatur laden und darstellen Erweiterungen Pixel Bender Eigene Filter erstellen Flash-Filme in HTML einbinden Mit dem SWFObject unnötige Klicks vermeiden 6 Inhalt

5 Eine Website komplett in Flash Deeplinks, Browsernavigation und benutzer freundliche URLs Adobe AIR Die DVD zum Buch Index Video-Lektionen auf der Buch-DVD Die Video-Lektionen auf der Buch-DVD entstammen unserem Video- Training»Adobe Flash CS4 Praxis-Workshops«von Benjamin Bischoff (ISBN ). Sie finden dort folgende Lektionen: 1 Pixel Bender-Filter programmieren (10:01 Min.) 2 Pixel Bender-Filter anwenden (08:53 Min.) 3 Pixel Bender-Parameter animieren (07:24 Min.) 4 Die TextFlow-Markupsprache anwenden (05:34 Min.) 5 TextFlow-Elementen anzeigen (09:04 Min.) 6 TextFlow-Text bearbeiten (05:15 Min.) 7 Text in Spalten anzeigen (03:12 Min.) 8 Text-Container untereinander verbinden (06:39 Min.) 9 Die Webcam ansprechen und anzeigen (05:49 Min.) 10 3D Z-Sorting verstehen und reparieren (07:38 Min.) Inhalt 7

6 Die neuen Zeichenwerkzeuge in Flash CS4 Nutzen Sie die neuen Möglichkeiten Mit der Einführung der neuen Flash-Version haben auch zwei interessante Zeichenwerkzeuge das Licht der Welt erblickt das Sprühen- und das Deko-Werkzeug. Dieser Workshop arbeitet nicht auf ein bestimmtes Ziel hin, sondern soll Ihnen nach und nach die Funktionen dieser neuen Werkzeuge aufzeigen und erklären. Die neuen Zeichenwerkzeuge in Flash CS4 Die Zeichenwerkzeuge kennenlernen Die Werkzeuge in der Praxis testen Sprühen-, Deko - und Symmetrie-Werkzeug Ziel [Ergebnis: 01_Zeichenwerkzeuge/deco1.fla, deco2.fla, deco3.fla, spray brush.fla] Ziel

7 Vorbereitungen 1 Im ersten Schritt legen Sie einen neuen Ordner auf Ihrer Festplatte an und nennen diesen»zeichenwerkzeuge«. Hier werden Sie die von Ihnen erstellten Beispiele zu diesem Workshop abspeichern. Flash-Datei erzeugen 2 Starten Sie die Flash-Autorenumgebung, und erstellen Sie über Datei N Neu eine neue Flash-Datei (ActionScript 3.0) 1. Bestätigen Sie mit Ok 2. Speichern Sie anschließend die Datei direkt im Projektordner ab. a Abbildung 1 E Flash-Datei»Zeichenwerkzeuge.fla«anlegen b Dokumenteigenschaften anpassen 3 Öffnen Sie mit (Strg)/( )+(J) das Fenster Dokumenteigenschaften und passen Sie die Werte an. Für die Beispiele, die Sie in diesem Workshop anlegen werden, brauchen Sie nicht sehr viel Platz, deshalb belassen Sie die Grösse der Bühne auf den standardmäßigen Pixel 3, die Hintergrundfarbe bekommt einen Wert von»#000033«4, und die Bildrate setzen Sie auf 25 Bilder pro Sekunde (bps) 5. Schließen Sie das Fenster mit Ok 6. c d e Abbildung 2 E Passen Sie die Dokumenteigenschaften an. f 16 Animationen und Tweening

8 Wählen Sie das Sprühen-Werkzeug ((B)) aus dieses versteckt sich als weiterer Punkt unter dem Pinsel-Werkzeug. 4 Erste Versuche mit dem Sprühen- Werkzeug G Abbildung 3 Hier finden Sie das Sprühen-Werkzeug. Direkt nach der Auswahl des Werkzeugs, ändert sich das allgemeine Eigenschaften-Fenster und zeigt nun die Einstellungsmöglichkeiten für das Sprühen-Werkzeug an. Ändern Sie die vorausgewählte Farbe 7 auf»#ffffff«(weiß) und setzen Sie den Haken bei Zufällige Skalierung 8. g h G Abbildung 4 Die Einstellungen des Sprühen-Werkzeuges Die Pinsel-Einstellungen belassen Sie bei den eingestellten Werten. Hier könnten Sie die Breite und Höhe des Pinsels beeinflussen. Je breiter/höher der Pinsel ist, umso weiter entfernen sich die Quadrate beim Zeichnen von dem Mauszeiger. Zeichnen Sie nun mit einer leicht geschwungenen Bewegung auf der Bühne. Es entstehen viele kleine weiße Vierecke in unterschiedlichen Größen, die in einer zufälligen Art rund um die»sprühdose «verteilt werden. Jedes Mal 5 Einen Schweif zeichnen Die neuen Zeichen werkzeuge in Flash CS4 17

9 Abbildung 5 E Zeichnen Sie eine geschwungene Bewegung mit dem Sprühen-Werkzeug. wenn Sie die linke Maustaste loslassen, erstellt Flash aus den gezeichneten Elementen eine Gruppe, so dass Sie diese später einfacher bearbeiten können. Abbildung 6 E Flash erstellt aus den gezeichneten Elementen eine Gruppe, wenn Sie die linke Maustaste loslassen. Löschen Sie die erstellten Gruppen anschließend wieder von der Bühne. Standard-Symbol austauschen 6 Wenn Sie nichts anderes einstellen, benutzt Flash automatisch die quadratische Form zum Sprühen. Sie können diese aber durch jedes beliebige Symbol ersetzen. Zu diesem Zweck erstellen Sie mit Hilfe des Stiftwerkzeugs (P) ein einfaches Dreieck und konvertieren dieses über (F8) in einen Movieclip mit dem Namen»dreieck«. 18 Animationen und Tweening

10 F Abbildung 7 Ersetzen Sie das Symbol. Jetzt löschen Sie den entstandenen Movieclip von der Bühne und wählen anschließend wieder das Sprühen-Werkzeug (B) aus. Im Eigenschaften- Fenster ändern Sie das Symbol 1 über den Bearbeiten-Knopf 2 wählen Sie den eben erstellen Movieclip»dreieck«im Symbol austauschen-dialog aus und bestätigen Sie mit Ok 3. a b F Abbildung 8 Hier tauschen Sie das Symbol aus. c Wenn Sie ein eigenes Symbol auswählen, erweitern sich die Einstellungsmöglichkeiten des Sprühen-Werkzeugs. Sie können nun auch die maximale Höhen- und Breiten-Skalierung festlegen. Zusätzlich können Sie Zufällige Skalierung, Symbol drehen und Zufällige Drehung aktivieren/ deaktivieren. Diese Einstellungen sind ziemlich selbsterklärend und ich 7 Neue Einstellungsmöglichkeiten Die neuen Zeichen werkzeuge in Flash CS4 19

11 Index 3D 216, 229 3D-Engine 214, 216, 250 A ActionScript 3 Loslassen der Maustaste 96 Adobe AIR 407 AIR 345, 407 Alpha 62 Alphaverlauf hinzufügen 154 Alphawert auslesen 127, 168, 179 Alternativa3D 215 alternativer Inhalt 378 AMF 284 AMFPHP 284, 294 Animation 11 loopen 38 neu anstoßen 38 Zufallsanimation 31 Anzeige stetig aktualisieren 85 Anzeigeliste 70 Äste 203 attachmovie() 70 Audio-Player 74 Audiostream 117 Authoringzeit 53 Away3D 215 B Beschleunigung anwenden 67 erstellen 65 Beschleunigungs-Methoden 37 Bewegung 194 horizontal 61 organisch animieren 175 Zielposition bestimmen 36 zu einem Zufallspunkt 36 Bewegungs-Editor 57 Bewegungs-Tween 57, 60 Bibliothek Externe Bibliothek einbinden 347 Bild importieren 130, 139, 346 kopieren 134 Partikelanzahl auslesen 177 spiegeln 152 Bilddaten kopieren 136, 210 Bildpartikel animieren 170 Bildteil vergrößern 129 Bitmap mit ActionScript vergrößern 134 BitmapData 142 anzeigen 126 auslesen 127 setzen 127 Bitmapdaten kopieren 204 vergrößern 134 Blendmodes 351 Blüten 203 BlurFilter 165 Bogenmaß 155 Bones 50 Bone-Werkzeug 51 Browser-Navigation abfangen 385 buttonmode 399 C CardFlip 216 CardFlip-Klasse 216 Cover 101 laden 103 Cover Flow 229 Cover-Flow-Klasse 240 D Datenbank 294 Deeplinks 380, 385 Dekos 194 Deko-Werkzeug 15, 23, 28 Einstellungen 22 Farben 22 Display erweitern 77 hinzufügen 76 DIV-Container 375 Document Object Model 249 Dokumenteigenschaften anpassen 32 Dokumentklasse 12, 172 anlegen 12 verknüpfen 173 zuweisen 13 DOM 249 Drag & Drop implementieren 95 DropShadowFilter 316 E Ease-Klasse 174 Easing-Methoden 37, 175 Effekt Flüssigkeit 183 Lupe 129 Partikel 170 Verwischen 204 Wasser 183 Eingabefeld Adresse 264 EventListener 38, 101, 335 Externe Bibliothek 347 F Farbe radialer Verlauf 185 Farbeffekt 62 Farbwert als Zeichenkette ausgeben 144 auslesen 138, 179 bei Mausbewegung auslesen 144 ersetzen 168 Farbwähler 138 Feuer 159 Feuerbewegung simulieren 164 Filter 129 Flammen 165, 168 Flash 3D Index

12 Flashfilm mit SWFObject einbinden 404 testen 37 Flash-Formular 286 Flash-Navigation 385 Flash Player Test mit unterschiedlichen Versionen 378 Version 375 Flash Remoting Flash-Website 385 Flex 407 Flickr 230 Flüssigkeitseffekt 183 Formular 264 Fehlermeldung 313 prüfen 264 Tab-Reihenfolge 291 validieren 271 Formulareingaben überprüfen 310 G Gästebuch Einträge auslesen 296 Einträge erstellen 308 Erstellungszeitpunkt 305 Formular 291 Gelenk 53 Getter-Methoden 177 Glätten 196 Glow-Filter 129, 133 gotopage 401 Graphics-Klasse 42 H Hilfsfunktionen 326 HTML 373 Seitentitel 405 I ID3-Eigenschaft 85 ID3-Tag auslesen 84 Importe 82 in HTML einbinden 371 Instanzeigenschaften 231 Instanznamen 53 Inverse Kinematik 49 K Karussell 250 Ketchup 183 Keyboard 116 Klasse 44 importieren 36 Klassenvariablen 82 vererben 33 Klassengerüst 13 Knochengerüst 49, 52 Komponenten 286, 288 Kontextmenü 322 eigenes erstellen 324 Körperteil 50 L Last.fm 100 Lautstärke 93 Linie per ActionScript zeichnen 43 Lupe 129 mit der Maus verfolgen 136 M Map 189 animieren 165 Maske runde 129 MATH.ATAN2 39 Math.random 176 Matrix-Objekt 134, 152 Maus Werkzeugspitze erstellen 189 Mausbewegung 194 Lupe erstellen 135 Startposition 137 Mausinteraktion 260 Mauszeiger Verfolgung 55 Menü-Punkte Klick abfangen 400 Rollover 398 Mikrofon 107 einrichten 113 MouseEvent-Klasse 400 MouseEvent anlegen 180 MouseEvent integrieren 179 Movieclip auf einem Hintergrund platzieren 140 Registrierungspunkt 172 unsichtbar schalten 188 MP3-Datei ID3-Tag 84 MP3-Player 74 Endlosschleife 87 Hintergrundgrafik 76 ID3-Daten 85 Ladestatus anzeigen 85 Lautstärke regulieren 93 Musik-Player 74 Muster 26 Muster animieren 26 MySQL-Datenbank 294 N Navigation Menü-Elemente 395 Seitenwechsel 401, 402 Sprungmarken 392 Unterseiten erstellen 392 O onkeyboarddown 121 onkeyboardup 121 OpenAMF 284 P Pakete 44 palettemap 168 Papervision3D 214, 250 Partikel Anzahl auslesen 177 erstellen 178 Richtung der Animation 176 Partikelanimation 170 Partikel-Effekt 170 Partikel-Klasse 176 Pflanzengenerator 194, 203 Pixel Bender 356 Filter 359 Player 74 Index 413

13 Playlist 74 Plug-in-Switcher 378 Point-Objekt 55 Pommes 183 Position verfolgen 62 Projektordner erstellen 12 Q Quiz 330 R Radialer Farbverlauf 185 Ranken 22 Rankenbefüllung 27 Rankenfüllung 28 Raster 27 Rasterfüllung 27 Reflexion 148 Registrierungspunkt 171 Reglerknopf 93 Reguläre Ausdrücke 268 Remoting-Service 295 Rollover-Menü 395 root-knoten 248 Rotation 38 Rotationsmatrix 152 Rotations-Tween 39 Rückgabewert 144, 177 S Samples 117 Sandy 3D-Engine 215 Schweif 17 Setter-Methoden 177 Shape 42 Sichtbarkeit von Movieclips 188 Skalierung 62 Skalierungsmatrix 134 Skelett 50 Smiley 107 SOAP 284 Sound 116 erzeugen 119 Sound-Objekt 119 Soundgenerator 116 Soundsteuerung Klassen und Variablen 89 umsetzen 90 Spiegelung 148 Spielelogik 330 Spinne Beine animieren 40 Bewegung 37 Netz spinnen 41 Sprühdose 17 Sprühen-Werkzeug 15, 17, 19 Sprite 194, 198, 323 Lupen-Sprite 133 Standard-Symbol 18 Statusbalken 77 Steuerungselemente 78 Stiftmodus 196 Stiftwerkzeug 196 SWFAddress integrieren 401 SWFObject 371 einbinden 374 testen 375 SWX 285 Symbol 20 Symmetrie-Objekt 29 Symmetriepinsel 29 Symmetrie-Werkzeug 15 Synthesizer 116 T Tab-Reihenfolge 291 Tasteneingabe 121 abfragen 121 aktivieren 120 Tastenfarbe ändern 122 Temperatur 345 Text in Textfeld ausgeben 142 Textfeld 332 Thermometer 345, 350 threshold-funktion 183 Tiefenverwaltung 72 Tooltipp 314 ein- und ausblenden 320 Tween 57 Neue Tween-Möglichkeiten 57 Tweening 11 Tween-Klasse 31 U Update 376 V Validierung 264 Adresse Postleitzahl 277 Telefonnummer 278 Value Object 337 Verdunstungseffekt 192 Vererbung 44 Vergrößerung 129 Veröffentlichen Browserspezifikation 371 Verlauf Alphawert definieren 155 Verwischen-Effekt 204 Video aktualisieren 156 spiegeln 156 Vorlage benennen 68 testen 69 W Wasserbild 191 Wassereffekt 183 Webservice 349 Website komplett in Flash 385 Seitensteuerung 401 Seitentitel 405 Weichzeichnen 63, 64 Weichzeichnung anpassen 64 Werkzeugspitze erstellen 185, 189 Wetter 351 Winkelberechnung Index

14 X XML 248, 253, 330 auslesen 256 laden 255 mit ActionScript XML-Daten Aufbau 248 XML-Klasse 249 XML-Knoten 248 Y Yahoo 347 Yahoo Weather API 347 Z Zeichenkette 143 Zeichenmethoden 324 Zeichenwerkzeuge 15 Zeichnen 194 Zend 284 Zoom 129 Zufallsanimation 31 Zufallsgesteuerte Positionierung 35 Zufallszahl 176 Zwischenablage 145 Index 415