Projekt 03: Objektorientiertes Arbeiten mit Flash: Camelrace

Transkript

1 Michael Gieding Erstellen von Multimediaanwendungen für den Unterricht (Flash) Projekt 03: Objektorientiertes Arbeiten mit Flash: Camelrace Folien zur gleichnamigen Lehrveranstaltung PH-Heidelberg, Sommersemester 2004

2 Das Projekt Folie 1: Ziele bzw. Inhalte Projekt 03: Camelrace I 1.1. Das Projekt Ziele bzw. Inhalte Generierung von Objekten (Movieclips) und Instanzen Konvertierung eines Bitmaps in eine Vektorgrafik Überlagerte Bewegungen Beschreibung des Projekts Drei Instanzen eines Movieclips (Camel) werden einem Tweening unterworfen.

3 Generierung des Movieclips Folie 2: Vorbereitungen 1.2. Generierung des Movieclips Vorbereitungen Öffnen Sie ein leeres Flash-Dokument Wählen Sie Einfügen, Neues Symbol: Geben Sie dem neuen Movieclip den Namen Camel Nach der Bestätigung befinden Sie sich in der Bearbeitung des Movieclips Camel :

4 Generierung des Movieclips Folie 3: Importieren eines Bitmaps Importieren eines Bitmaps Speichern Sie das GIF-Bild, das sich hinter dem folgenden Link verbirgt auf Ihrem Rechner Wählen Sie Datei, Importieren und dann die soeben abgespeicherte Datei camel.gif Es erscheint das folgende Bild auf der Bühne:

5 Generierung des Movieclips Folie 4: Vektorisieren des Bitmaps Vektorisieren des Bitmaps Überzeugen Sie sich davon, das das Bitmap ausgewählt ist. Wählen Sie Modifizieren, Bitmap nachzeichnen Stellen Sie den sich öffnenden Dialog wie folgt ein: Das Bitmap wurde jetzt in einzelne Vektorelemente zerlegt

6 Generierung des Movieclips Folie 5: Verteilen der Vektorobjekte auf Ebenen Verteilen der Vektorobjekte auf Ebenen Wählen Sie den Rumpf des Kamels aus: Richten Sie eine eigene Ebene für den Rumpf ein: Modifizieren, Auf Ebenen verteilen Für den Rumpf wurde eine eigene Ebene eingerichtet, bezeichnen Sie diese mit Rumpf Richten Sie analog folgende Ebenen ein: Bein vorn, Bein hinten, Schwanz Der Kopf und ein paar weitere Objekte liegen jetzt allein in der Ebene 1, bezeichnen Sie diese mit Kopf.

7 Generierung des Movieclips Folie 6: Optimieren und Glätten Optimieren und Glätten Führen Sie eine Zwischenspeicherung der Datei aus (camelrace.fla) Sperren Sie alle Ebenen und entsperren Sie dann die Ebene Rumps Wählen Sie den gesamten Inhalt der Ebene Rumpf und dann Modifizieren, Optimieren Stellen Sie die Optionen für das Optimieren wie folgt ein: Führen Sie die Optimierung solange durch, bis sich keine Verringerung des Anzahl der Kurven mehr ergibt. Wenden Sie auf den Inhalt der Ebene Rumpf die Option Modifizieren, Glätten an. Manipulieren Sie den Rumpf nach eigenen Vorstellungen mit dem Pfeil- bzw. Radiergummi- Werkzeug Verfahren Sie analog mit den anderen Ebenen.

8 Generierung des Movieclips Folie 7: Das Kamel trampelt auf der Stelle Das Kamel trampelt auf der Stelle Fügen Sie für alle Ebenen des Movieclips camel im Bild 2 Schlüsselbilder ein. Löschen Sie im Bild 2 die Inhalte der Ebenen Bein vorn und Bein hinten. Beenden Sie die Bearbeitung des Movieclips camel indem Sie in der Leiste über dem Inhalt des Movieclips auf Szene 1 klicken. Die Bühne ist derzeit leer Fenster, Bibliothek Ziehen Sie eine Instanz des Movieclips camel auf die Bühne Skalieren Sie diese so, dass sie kleiner wird (Das Skalieren wirkt sich nur auf die Instanz aus, das Original camel bleibt unberührt.) Testen Sie das Flash-Movie (STRG + Eingabe)

9 Generierung des Films Folie 8: Überlagerung zweier Bewegungen: Das Kamel läuft Projekt 03: Camelrace I 1.3. Generierung des Films Überlagerung zweier Bewegungen: Das Kamel läuft Unterwerfen Sie die Instanz von camel einem Bewegungstweening:

10 Generierung des Films Folie 9: Experimente mit Instanzen Experimente mit Instanzen Generieren Sie in weiteren Ebenen weitere Instanzen vom Movieclip camel Ändern Sie ggf. die Größe der Instanzen Instanzen von Movieclips bieten gegenüber einfachen Objekten mehr Möglichkeiten der Manipulation: Experimentieren Sie mit den Farbeigenschaften (Instanz markieren, Eigenschaften- Dialog) Unterwerfen Sie die weiteren Instanzen von camel jeweils einem Bewegungstweening

11 Generierung einer Schaltfläche Folie 10: Allgemeines zur Generierung von Schaltflächen 1.4. Generierung einer Schaltfläche Allgemeines zur Generierung von Schaltflächen Einfügen, Neues Symbol Stellen Sie im sich öffnenden Dialog den Typ Schaltfläche ein Bezeichnen Sie die neue Schaltfläche mit vorwärts Für jede Schalfläche stehen genau 4 Bilder zur Verfügung: Auf: Mauszeiger befindet sich nicht über der Schaltfläche Darüber: Mauszeiger befindet sich über der Schaltfläche Drücken: Mausklick Aktiv: Das Script, das mit der Schaltfläche verbunden ist, wird ausgeführt

12 Generierung einer Schaltfläche Folie 11: Generierung der Schaltflächen vorwärts und zurück Generierung der Schaltflächen vorwärts und zurück Benennen Sie Ebene 1 der Schaltfläche in Hintergrund um Generieren Sie in Bild 1 in der Ebene Hintergrund ein Rechteck (Rechteckwerkzeug) Gehen Sie in das letzte Bild der Ebene (Aktiv) und fügen Sie weitere Bilder ein (rechte Maustaste: kontextsensitives Menü) Hinweis: Die Einbeziehung eines Hintergrundes ist sinnvoll. Würde man nur Text etwa eingeben, so würde die Schaltfläche nur dann ansprechen wenn man sich mit der Maus genau auf dem Text befindet. Fügen Sie eine weitere Ebene ein, die mit Text zu bezeichnen ist. Fügen Sie in das Bild Auf in der Ebene Text den (statischen) Text Vorwärts ein. Fügen Sie in das nächste Bild ( Darüber ) ein Schlüsselbild ein (rechte Maustaste) Ändern Sie die Schriftfarbe in diesem Schlüsselbild. Verfahren Sie analog mit den Bildern Drücken und Aktiv. Auf Darüber Drücken Aktiv Vorwärts Vorwärts Vorwärts Vorwärts Generieren Sie analog eine Schaltfläche Zurück

13 Steuern des Films mittels der Schaltflächen Folie 12: Einfügen der Schaltflächen 1.5. Steuern des Films mittels der Schaltflächen Einfügen der Schaltflächen Kehren Sie zur Bearbeitung des Flash-Filmes zurück (Szene 1) Fügen Sie eine weitere Ebene ein, bezeichnen Sie diese mit Steuerung Ins erste Bild des Filmes wird die Schaltfläche Vorwärts eingefügt: Fenster, Bibliothek, Instanz der Schaltfläche Vorwärts auf die Bühne ziehen. Fügen Sie in das letzte Bild des Filmes in der Ebene Steuerung ein leeres Schlüsselbild ein Ziehen Sie in dieses Bild eine Instanz der Schaltfläche Zurück

14 Steuern des Films mittels der Schaltflächen Folie 13: Stoppen der Bildfolge des Films Stoppen der Bildfolge des Films Fügen Sie in Szene 1 eine weitere Ebene ein, bezeichnen Sie diese mit Script Wählen Sie in dieser Ebene das erste Bild des Filmes aus Aktivieren Sie den Dialog Aktionen Fügen Sie die Aktion STOP ein und stellen Sie die Parameter wie folgt ein: Wählen Sie in der Ebene Script das letzte Bild der Szene 1 und fügen Sie dort eine leeres Schlüsselbild ein. Verknüpfen Sie auch dieses Bild mit der Aktion STOP

15 Steuern des Films mittels der Schaltflächen Folie 14: Schaltfläche Vorwärts mit Aktion verbinden Schaltfläche Vorwärts mit Aktion verbinden Wählen Sie in der Ebene Steuerung im Bild 1 der Szene 1 die Instanz der Schaltfläche Vorwärts aus. Aktivieren Sie den Aktionen-Dialog Verknüpfen Sie mit der Schaltfläche die Aktion GOTO (gotoandplay(2))

16 Steuern des Films mittels der Schaltflächen Folie 15: Schaltfläche Zurück mit Aktion verbinden Schaltfläche Zurück mit Aktion verbinden Wählen Sie im letzten Bild von Szene 1 die Schaltfläche Zurück aus Verknüpfen Sie diese mit der Aktion GOTO (gotoandstop(1)) Testen Sie den Film (STRG + Eingabetaste)

17 Grafikobjekte generieren Folie 16: Normale Grafik 1.6. Grafikobjekte generieren Normale Grafik Fügen Sie in Szene 1 eine weitere Ebene mit der Bezeichnung Hintergrund ein Positionieren Sie die Ebene so, dass sie die unterste aller Ebenen ist (Ziehen mit der Maus) Sperren Sie außer der Ebene Hintergrund alle weiteren Ebenen. Zeichnen Sie das Bild einer Pyramide

18 Grafikobjekte generieren Folie 17: Grafik in Symbol konvertieren Grafik in Symbol konvertieren Wählen Sie die gesamte Pyramide aus Einfügen, In Symbol konvertieren Nennen Sie das neue Objekt Pyramide, Stellen Sie die Option Grafik ein. Die Pyramide, die sich jetzt auf der Bühne befindet ist eine Instanz des Grafikobjekts Pyramide

19 Grafikobjekte generieren Folie 18: Weitere Instanzen erzeugen Weitere Instanzen erzeugen Ziehen Sie aus der Bibliothek weitere Instanzen des Grafikobjekts Pyramide auf die Bühne. Ändern Sie im Eigenschaften-Dialog das Aussehen der Instanzen Der Film ist fertig: Vorwärts