Adobe Flash CC Pro ActionScript 3 & Video

Transkript

1 webmasters press Frank Schad Adobe Flash CC Pro ActionScript 3 & Video Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm

2

3 webmasters press Frank Schad Adobe Flash CC Pro ActionScript 3 & Video Art.-Nr Version 4.0 vom Autor: Frank Schad webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie Nürnberg GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell Autorisiertes verbliebene fehlerhafte Angaben Curriculum und deren Folgen. für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm

4

5 Inhalt 5 Inhalt Einführung Movieclip-Steuerung Methoden für Movieclips Die Anzeigeliste: Objekthierarchie in ActionScript Eigenschaften von Movieclips Bedingte Anweisungen Fehlersuche Mausverfolgung Aktuelle Framenummer auslesen Movieclip-Ereignisse Variablen und Datentypen Anlegen von Variablen Variablen Werte zuweisen Datentypen Mit Text arbeiten Dynamische Textfelder Texte dynamisch generieren Scrollpfeile für Textfelder Eingabetext Das Math-Objekt Verwendung des Math-Objekts Runden von Zahlen Zufallsgenerator... 57

6 6 Inhalt 5 Drag & Drop Einfaches Drag & Drop Ziehbereich einschränken Kollisionstest hittestobject() hittestpoint() Das Sound-Objekt Sounds verknüpfen Sound instanzieren Sounds starten und anhalten Soundüberlagerungen verhindern Fortschrittsanzeige Lautstärkeregler Externe Filme laden Laden eines Films Film wieder entladen Preloader Video Videos für Flash vorbereiten Dateiformat und Profil auswählen Manuelle Exporteinstellungen Videos in Flash importieren Video auswählen Skin auswählen FLV-Komponente anpassen Video ins Web stellen Videos mit Flash-Elementen kombinieren Transparente Videos in Flash importieren Videos mit ActionScript steuern...95

7 Inhalt 7 9 Programmierung eines Spiels Vorbereitung des Spiels Tastatursteuerung Gedrückte Tasten mit Variablen abfragen Schmetterling bewegen Tempo in Variable auslagern Rotation hinzufügen Verhindern, dass der Schmetterling die Bühne verlassen kann Textfelder erzeugen Movieclip-Instanzen dynamisch erzeugen Movieclip-Instanzen steuern Zufallsgenerator Movieclips über die Bühne bewegen Movieclips von der Bühne entfernen Festlegen der Framenummer Sound abspielen Timer einbauen Spiel beenden Lösungen Index

8 80 Video Video In dieser Lektion lernen Sie: die Verwendung von Videos in Flash kennen. Lange Zeit galt Flash als führende Technologie zur Publikation von Videos im Web. Der Vorteil für den Anwender (und für Adobe) lag auf der Hand: Es wurde für alle Arten von Inhalten nur noch ein einziges Plug-in benötigt, nämlich das Flash-Plug-in. Seit der Einführung von HTML5 hat sich dies geändert. Zur Anzeige von einzelnen Videos auf einer Website wird nun kein Flash (und auch kein anderes Browser-Plug-in) mehr benötigt. Doch die Verwendung von Videos in Flash dient einem anderen Zweck: der Kombination von Videos und Flash-Animationen zu einer Multimedia-Einheit. 8.1 Videos für Flash vorbereiten Zunächst müssen wir uns noch einmal einen fundamentalen Unterschied in Erinnerung rufen: Flash- Filme bzw. Flash-Animationen, wie wir sie bisher erstellt haben, sind keine Videos! Sie werden in dem proprietären Dateiformat SWF exportiert und mit dem Flash-Player abgespielt. Videos hingegen werden i. d. R. mit einem Videoschnitt-Programm wie z. B. Adobe Premiere oder Final Cut bearbeitet und anschließend in einem Video-Format (z. B. MP4 oder QuickTime) exportiert, das entweder mit einem Webbrowser oder einem Video-Player (z. B. VLC oder QuickTime-Player) abgespielt werden kann. Allerdings hat Adobe, um Videos in Flash-Projekten verwenden zu können, einige Video-Formate speziell zu diesem Zweck entwickelt: FLV (Flash-Video mit älterem Codec On2 VP6) und das neuere F4V (Flash-Video mit MP4-Codec). Außerdem kann Flash seit einiger Zeit auch direkt mit dem Industriestandard MP4 umgehen. Verwechseln Sie also nicht Flash-Filme (= Animationen, die jedoch Videos enthalten können) mit Flash- Videos (= zur Verwendung in Flash exportierte Digitalvideos)! Um in Flash mit Videos zu arbeiten, müssen diese also zunächst in eines der genannten, Flash-eigenen Videoformate (FLV oder F4V) oder in das Standardformat MP4 konvertiert werden. Dafür haben Sie zwei Möglichkeiten:

9 Videos für Flash vorbereiten Sie exportieren das Video bereits aus dem Ursprungsprogramm (z. B. Premiere) heraus. Viele moderne Schnittprogramme unterstützen den Export von Flash-Videos. 2. Sie benutzen ein eigenständiges Encoding-Programm wie z. B. den Adobe Media Encoder. Solche Programme erlauben Stapelverarbeitung (engl. Batch Processing), d. h. Sie können mehrere Filme gleichzeitig in das Programm laden, die dann nacheinander konvertiert werden, während Sie sich sinnvolleren Tätigkeiten zuwenden. Die grundsätzliche Vorgehensweise und die Optionen sind bei beiden Möglichkeiten identisch. Im Folgenden verwenden wir die zweite Variante, den Adobe Media Encoder: Übung Erstellen Sie auf Ihrem System (z. B. auf dem Desktop) einen neuen Ordner und nennen Sie ihn video. Kopieren Sie dorthin die Übungsdatei ellen_feiss.mov. 2. Starten Sie das Programm Adobe Media Encoder. 3. Ziehen Sie die Videodatei ellen_feiss.mov in den Bereich Warteschlange des Programmfensters oder klicken Sie auf den Button Hinzufügen (Plus-Zeichen oben links). Abb. 14: Das Hauptfenster des Adobe Media Encoders.

10 82 Video Dateiformat und Profil auswählen Abb. 15: Auswahl des Formats 4. Stellen Sie sicher, dass im Drop-down-Menü unter der Rubrik Format der Eintrag H.264 ausgewählt ist. Dies ist das Standardformat MP4 mit H.264-Codec. In der Rubrik Vorgabe haben Sie die Möglichkeit, vorgefertigte Exporteinstellungen auszuwählen (Sie können auch eigene Profile aus häufig benötigten Einstellungen erzeugen). Mit diesen Einstellungen bestimmen Sie direkt die Qualität und die Dateigröße des fertigen Videos! Abb. 16: Auswahl eines Profils 5. Wählen Sie in der Rubrik Vorgabe den Eintrag Mit Quelle abgleichen Hohe Bitrate.

11 Videos für Flash vorbereiten Manuelle Exporteinstellungen Diese Einstellungen können Sie natürlich manuell anpassen. 6. Klicken Sie auf den»link«mit Quelle abgleichen Hohe Bitrate neben dem Drop-down- Menü. Es öffnet sich ein Einstellungsfenster. Abb. 17: Manuelle Wahl des Dateiformats Im linken Bereich des Fensters sehen Sie eine Vorschau des Videos. Dort können Sie ähnlich wie im Dialog Für Web Speichern in Photoshop zwischen Quelle und Ausgabe hin- und herschalten, um diese zu vergleichen. 7. Im oberen rechten Bereich unter Exporteinstellungen muss sowohl Video exportieren als auch Audio exportieren ausgewählt sein. Im unteren rechten Bereich können Sie sämtliche Export-Parameter anpassen.

12 84 Video Video-Einstellungen Unter dem Tab Video bestimmen Sie die Eigenschaften der Videospur: Abb. 18: Video-Einstellungen Standardmäßig übernimmt der Media Encoder hier sämtliche Eigenschaften des Originalvideos. Wenn Sie eine dieser Eigenschaften ändern möchten, müssen Sie zuerst das entsprechende Häkchen unter Mit Quelle abgleichen entfernen. Zunächst haben Sie unter Breite und Höhe die Möglichkeit, Ihr Video zu skalieren, falls noch nicht im Schnittprogramm geschehen. Hier empfiehlt es sich natürlich, die Option zum Beibehalten der Proportionen aktiviert zu lassen. Eine wichtige Einstellung ist die Framerate: Für eine flüssige Wiedergabe sollten Sie mindestens 15 fps wählen, eine Wiedergabe in PAL-Qualität erfordert 25 fps. Dadurch steigt jedoch auch die Dateigröße. Wählen Sie niemals eine höhere Framerate als die des Originals. Die Feldreihenfolge sollten Sie für Web-Videos immer auf Progressiv belassen. Die anderen Einstellungen beziehen sich auf die Wiedergabe im Zeilensprungverfahren (interlaced) auf Fernsehschirmen. Dasselbe gilt für das Pixel-Seitenverhältnis. Im Web sind Pixel immer quadratisch. Auch die Fernsehnorm (PAL oder NTSC) spielt im Web keine Rolle. Mit den Bitrateneinstellungen steuern Sie die Bandbreite, die für die Wiedergabe des Videos mindestens nötig ist, und damit die Stärke der Kompression. Diese Einstellungen bestimmen direkt

13 Videos für Flash vorbereiten 85 die Bildqualität Ihres Videos. Sie haben die Wahl zwischen einer konstanten (Constant Bitrate, CBR) und einer variablen Bitrate (VBR), wobei Sie für letztere auch zwei Kodierungsdurchgänge für eine noch höhere Qualität wählen können. Die Option Keyframeabstand hat nichts mit den Schlüsselbildern der Flash-Zeitleiste zu tun! Hier steuern Sie die Häufigkeit von Keyframes bei der temporalen Kompression der Videobilder. Je niedriger die Zahl, desto mehr Keyframes enthält das fertige Video und desto höher ist demnach die Qualität. 8. Wählen Sie unter Bitrateneinstellungen VBR 1-Pass, Zielbitrate 0,4 MBit/s, Maximale Bitrate 0,7 MBit/s, Keyframe-Abstand deaktiviert (automatisch). Belassen Sie alle anderen Einstellungen auf Mit Quelle abgleichen. Audio-Einstellungen Abb. 19: Audio-Einstellungen Der Standard-Audio-Codec des MP4-Formats ist AAC. Je geringer die Abtastrate, desto kleiner ist die Datei, desto niedriger ist jedoch auch die Qualität. Folgende Richtlinien können bei der Wahl der Abtastrate behilflich sein: khz sind höchstens für Sprache geeignet. Für Musik kaum zu empfehlen und khz werden öfters für Multimedia-Projekte oder im Web verwendet khz entsprechen der qualitativ hochwertigen Abtastrate von Standard-Audio-CDs khz sind ein derzeitiger Standard für Digitalvideos. Wählen Sie auch hier nie einen höheren Wert als den des Originals. Beachten Sie, dass nicht alle der oben genannten Auswahlmöglichkeiten für alle Codecs zur Verfügung stehen.

14 86 Video Unter Kanäle können Sie zwischen Mono und Stereo wählen, was natürlich die Dateigröße enorm beeinflusst. Die Audioqualität sollten Sie i. d. R. natürlich auf Hoch stellen. Dadurch dauert der Kodierungsvorgang jedoch etwas länger. Auch hier können Sie die Bitrate einstellen. Je höher die Bitrate, desto besser die Audio-Qualität, desto schneller muss jedoch auch die Internet-Verbindung des Anwenders sein. 9. Wählen Sie hier eine Abtastrate von 44,1 khz, Mono und eine Bitrate von 64 KB/s. Das ist in unserem Fall vollkommen ausreichend, da unser Video nur Sprache enthält. Kodierung starten 10. Klicken Sie auf OK und wählen Sie im Hauptfenster unter der Rubrik Ausgabedatei Ihren Ordner video als Speicherort. 11. Klicken Sie anschließend auf Warteschlange starten (grüner Pfeil). Flash wandelt nun das Video mit den angegebenen Einstellungen in das MP4-Format um. Je nach Länge des Films kann das einige Zeit in Anspruch nehmen. Abb. 20: Fortschrittsanzeige für die Videokonvertierung

15 Videos in Flash importieren Videos in Flash importieren Der Flash-Player ist nicht in der Lage, Videos direkt abzuspielen, sondern er kann nur SWF-Dateien abspielen. Deshalb müssen die fertigen Videos zur Publikation im Web zunächst in eine SWF-Datei importiert werden. Der Unterschied dabei ist jedoch, dass die fertige SWF-Datei nicht das Video selbst enthält, sondern lediglich eine Referenz darauf, d. h. Sie müssen sowohl die SWF-Datei als auch die MP4-Datei ins Web stellen! 12. Erstellen Sie eine neue Flash-Datei, Bühnengröße 480 x 360 px, Bildrate 24 bps. Bei der Verwendung von Videos müssen Sie darauf achten, dass der Flash-Film dieselbe Framerate (Bildrate) hat wie das Video! 13. Speichern Sie auch die Flash-Datei im Ordner video als video.fla Video auswählen 14. Wählen Sie nun Datei Importierten Video importieren. Es öffnet sich folgender Dialog: Abb. 21: Dialog zur Auswahl der Videodatei Hier haben Sie zwei Möglichkeiten: Entweder Sie wählen eine Datei auf Ihrem lokalen System, oder Sie geben die URL einer bereits im Web befindlichen Datei an (vergessen Sie nicht: in der SWF-Datei wird in beiden Fällen lediglich eine Referenz auf das Video gespeichert). 15. Wählen Sie hier Auf Ihrem Computer und klicken Sie auf Durchsuchen. Wählen Sie dort die soeben erstellte Datei ellen_feiss.mp4 aus. Den Hinweis, dass die Videodatei anscheinend nicht für Flash kodiert sei, können Sie ignorieren.

16 88 Video Es werden Ihnen zwei Arten der Publikation angeboten: Externes Video mit Playback-Komponente laden: Dies ist die Standard-Methode. Hier wird das Video per HTTP-Protokoll von einem Webserver geladen. Mit dieser Möglichkeit können Sie auf jeder beliebigen Website Flash-Videos einbinden. FLV in SWF einbetten und in Zeitleiste abspielen: Dies ist die klassische Variante früherer Flash- Versionen. Das Video wird dabei in die Bibliothek der SWF-Datei kopiert, und es werden Frames in die Zeitleiste eingefügt. Diese Methode sollte heute nach Möglichkeit vermieden werden. 16. Wählen Sie die erste Methode, Externes Video mit Playback-Komponente laden, und klicken Sie auf Weiter Skin auswählen Im nächsten Schritt haben Sie die Wahl zwischen unterschiedlichen Skins (Oberflächen, Erscheinungsbildern) für die Steuerleiste Ihres Videos. Im Grunde gibt es hier nur drei verschiedene Designs: Minimal Flat, Minimal Silver und die klassische Skin früherer Flash-Versionen. Darunter gibt es solche, die vor dem Video liegen und nur eingeblendet werden, wenn der Anwender mit der Maus über das Video fährt (sie tragen Over im Namen), und solche, die unterhalb des Videos liegen (erkennbar an der Bezeichnung Under). Im zweiten Fall müssen Sie natürlich die Höhe der Steuerleiste bei der Wahl der Bühnengröße berücksichtigen. Die Skins unterscheiden sich weiterhin durch den Umfang der Steuerelemente. So gibt es z. B. solche ohne Lautstärkeregler für Videos ohne Ton. Rechts neben dem Drop-down-Menü können Sie eine Farbe für die Skin auswählen. f Die Skin wird in einer externen SWF-Datei gespeichert, die Sie ebenfalls auf den Webserver hochladen müssen! Abb. 22: Auswahl der Steuerleiste

17 FLV-Komponente anpassen Wählen Sie SkinOverAllNoCaption (= alle Steuerelemente bis auf Untertitel) und eine beliebige Farbe. 18. Nun wird noch ein Bestätigungsdialog eingeblendet. Klicken Sie dort auf Fertig stellen. Auf der Bühne wird nun automatisch eine neue FLV-Playback-Komponente erstellt. Komponenten sind vorgefertigte Flash-Elemente, komplett mit Grafiken und zugehörigem ActionScript-Code in unserem Fall zur Steuerung des Videos. Abb. 23: Die FLV-Playback-Komponente auf der Bühne 8.3 FLV-Komponente anpassen Sie können Komponenten meist nicht direkt bearbeiten wie Movieclips o. ä., da sie in kompilierter Form vorliegen. Stattdessen können Sie die Darstellung des Videos im Eigenschaftsinspektor unter Komponentenparameter weiter anpassen. Abb. 24: Die Komponentenparameter im Eigenschaftsinspektor

18 90 Video Die beiden wichtigsten Parameter sind skin und source. Sowohl die Video-Datei als auch die Skin liegen als separate Dateien vor und werden in der SWF-Datei lediglich referenziert. Hier können Sie die Pfade anpassen, falls Sie die Dateien an einem anderen Ort als die SWF-Datei speichern möchten. Standardmäßig werden hier relative Pfade verwendet, ausgehend vom Speicherort der SWF-Datei: Wenn die Video-Datei und die Skin im selben Ordner wie die SWF-Datei liegen, genügt der jeweilige Dateiname als Pfadangabe. f Ändern Sie die Pfade ggf. so, wie die Dateien später auf dem Webserver abgelegt werden sollen! Mit autoplay können Sie festlegen, ob das Video von selbst zu spielen beginnen soll, oder ob der Anwender erst auf den Play-Button klicken muss. Mit skinautohide legen Sie fest, ob die Steuerleiste ausgeblendet werden soll, wenn sich die Maus nicht über dem Video befindet. Dies ist vor allem bei den Over-Skins sinnvoll, die das Video verdecken. Mit skinbackgroundalpha können Sie den Transparenzgrad der Steuerleiste festlegen. Mit skinbackgroundcolor können Sie die Farbe der Steuerleiste ändern. Mit volume legen Sie die Anfangslautstärke des Videos fest. 19. Deaktivieren Sie die Option autoplay und aktivieren Sie skinautohide. Setzen Sie die Transparenz der Steuerleiste auf 0,8. Testen Sie den Film. 20. Passen Sie die Einstellungen für Veröffentlichungen an und veröffentlichen Sie den Film als SWF und HTML. 8.4 Video ins Web stellen Es sollten sich nun folgende Dateien in Ihrem Ordner video befinden: Die HTML-Datei, die im Browser aufgerufen wird. Die Datei video.swf mit der Playback-Komponente. Diese Datei ist in der HTML-Datei verlinkt. Die Datei ellen_feiss.mp4, die in video.swf referenziert ist. Die Datei SkinOverAllNoCaption.swf mit der Steuerleiste. Diese Datei ist ebenfalls in video.swf referenziert. Der ursprüngliche QuickTime-Film ellen_feiss.mov. Die Flash-Projektdatei video.fla.

19 Videos mit Flash-Elementen kombinieren 91 Abb. 25: Die Bestandteile des Video-Projekts. Die vier oberen Dateien (HTML, SWF, MP4 und Skin) müssen ins Web gestellt werden, die beiden unteren (FLA-Datei und QuickTime-Film) können Sie archivieren. Von diesen Dateien müssen Sie lediglich die FLA-Projektdatei und den QuickTime-Film nicht ins Web stellen. Alle anderen Dateien sind Bestandteil des Web-Projekts und müssen auf den Webserver hochgeladen werden! 21. Öffnen Sie die HTML-Datei im Browser. Auch SWF-Dateien, die Videos enthalten, können und sollten Sie in der Praxis natürlich wie im Grundlagen-Lernheft beschrieben mit swfobject manuell in Ihr bestehendes Weblayout einbinden. Q 8.5 Videos mit Flash-Elementen kombinieren Die eigentliche Stärke von Flash ist jedoch nicht, einfach einen Film ins Web zu stellen, sondern Videos als Bestandteil eines umfangreicheren Flash-Projekts zu verwenden. Sie können beliebige Flash-Elemente, Bilder oder Text neben, vor oder hinter dem Video platzieren und damit das Video nahtlos in eine Animation oder Präsentation integrieren. Besonders interessant wir das Ganze dann, wenn Sie zuvor Teile des Videos im Schnittprogramm transparent gemacht, also z. B. eine Person freigestellt haben. Zudem können Sie mit ActionScript Ihre Flash-Elemente auf das Video reagieren lassen. So kann z. B. eine Animation ausgelöst werden, sobald im Video eine ganz bestimmte Stelle abgespielt wird.

20 92 Video Transparente Videos in Flash importieren Einen»Freisteller«erzeugen Sie i. d. R. bereits im Schnittprogramm (z. B. Premiere), etwa durch das Green-Screen-Verfahren. Dadurch wird in der fertigen Videodatei ein Alphakanal erzeugt, der die transparenten Bereiche definiert. f Um diesen Alphakanal auch in Ihrem Flash-Video zu erhalten, muss das Video zwingend als FLV (nicht als F4V) mit dem On2-VP6-Codec kodiert werden. Nur dieser Codec unterstützt Alphakanäle. Übung 21 walking.swf Die Übungsdatei mann_geht.mov ist bereits fertig freigestellt und enthält einen Alphakanal. Sie muss nur noch in das Flash-Videoformat konvertiert werden. 1. Ziehen Sie die Videodatei mann_geht.mov in das Programmfenster des Adobe Media Encoders. Gehen Sie beim Anpassen der Einstellungen analog zu Übung 20 vor. 2. Wählen Sie im Hauptfenster im Drop-down-Menü unter Format den Eintrag FLV und unter Vorgabe die Option Entspricht den Quellenattributen (hohe Qualität). 3. Öffnen Sie das Fenster mit den erweiterten Exporteinstellungen und aktivieren Sie unter Video unbedingt die Checkbox Alphakanal kodieren! Abb. 26: Um den eingebetteten Alphakanal zu erhalten, muss als Codec On2 VP6 gewählt und die entsprechende Checkbox aktiviert werden.

21 Videos mit Flash-Elementen kombinieren 93 Das Video hat eine ungewöhnliche Größe und ist 640 Pixel hoch. Dies ist ein wenig zu groß für unser Flash-Projekt 4. Aktivieren Sie deshalb die Option zum Ändern der Videogröße und setzen Sie die Höhe auf 480 px. Achten Sie darauf, dass dabei die Proportionen erhalten bleiben (Kettensymbol). 5. Auch die Framerate von 50 fps ist für ein Webprojekt zu hoch. Ändern Sie sie auf 25 fps. 6. Stellen Sie die Bitrateneinstellungen auf VBR, benutzerdefiniert 800 KBit/s. Cue-Points setzen Damit das Video später mit ActionScript Ereignisse auslösen kann, muss es sogenannte Cue-Points enthalten. Cue-Points sind Markierungen an einer bestimmten Stelle des Videos, auf die Sie mit Action- Script zugreifen können. Um zu erreichen, dass in unserem Flash-Projekt etwas passiert, nachdem der junge Mann seine Brille zurechtgerückt hat, müssen Sie an dieser Stelle des Videos einen Cue-Point setzen. 7. Im linken Bereich des Einstellungsfensters finden Sie unter der Video-Vorschau eine gelbe Steuerleiste zum Abspielen und Trimmen des Videos. Ziehen Sie dort den Abspielkopf etwa in die Mitte des Films, wo der Mann den rechten Arm senkt (00:00:02.00). 8. Links unterhalb der Steuerleiste befindet sich ein Button mit einem Pluszeichen. Damit erzeugen Sie an dieser Stelle einen neuen Cue-Point, der dann in der Liste darunter angezeigt wird. Abb. 27: Nachdem Sie in der Steuerleiste den gewünschten Zeitpunkt gewählt haben, können Sie dort mit Hilfe des Plus-Buttons (umkreist) einen neuen Cue-Point einfügen. Dieser wird in der Liste darunter angezeigt, wo Sie im Drop-down-Menü den Typ auswählen können.

22 94 Video 9. Durch Doppelklicken auf den Standardnamen Cue-Point können Sie den Namen ändern. Vergeben Sie hier den Namen filmmitte. Es gibt zwei Typen von Cue-Points: 1. Ereignis-Cue-Points lösen einen Event aus, den Sie mit Hilfe von ActionScript auffangen können, um beliebigen Code auszuführen. 2. Navigations-Cue-Points entsprechen in etwa den Kapitel-Markern in DVD-Videos. Sie werden verwendet, um mit Hilfe der FLV-Playback-Komponente von Cue-Point zu Cue-Point zu springen. Jedesmal, wenn der Benutzer den Vorwärts- oder Rückwärts-Button betätigt, kann er so zum jeweils vorherigen oder nächsten Cue-Point springen. 10. Wählen Sie im Drop-down-Menü für den Cue-Point-Typ Ereignis. 11. Bestätigen Sie Ihre Einstellungen mit OK und starten Sie den Export. Flash-Projekt anlegen 12. Erstellen Sie eine neue Flash-Datei, Bühnengröße 720 x 480 px. Stellen Sie die Framerate auf 25 bps. 13. Importieren Sie Ihre eben erstellte FLV-Datei auf die gleiche Weise wie in Übung 20. Achten Sie bei den Import-Optionen jedoch darauf, dass Sie diesmal keine Steuerleiste (Skin) hinzufügen. Das Video soll ja Bestandteil der Animation werden und vom Benutzer nicht gesteuert werden können. 14. Fügen Sie auf weiteren Ebenen beliebige Objekte (Zeichnungen, Bilder, Text ) hinzu. Die Bühne und die Ebenenpalette des Beispielprojekts walking.swf sehen folgendermaßen aus: Abb. 28: Die Bühne und die Ebenenpalette des Beispielprojekts (links die FLV-Playback-Komponente).

23 Videos mit Flash-Elementen kombinieren Stellen Sie sicher, dass in den Komponenten-Eigenschaften für das Video die Option autoplay aktiviert ist. 16. Fertig. Testen Sie den Film Videos mit ActionScript steuern Übung 22 In unserem Beispielprojekt soll die Blume wachsen, wenn das Video den Cue-Point erreicht hat. 1. Wandeln Sie die Blume in einen Movieclip um, damit sie mit ActionScript steuerbar ist. Vergeben Sie den Instanznamen blume_mc. 2. Erstellen Sie eine neue Scripts-Ebene und notieren Sie im ersten Keyframe folgenden Code: blume_mc.scalex = 0; blume_mc.scaley = 0; Dadurch wird die Blume zu Beginn des Films so weit verkleinert, dass man sie nicht sieht. Einige Funktionen stehen dem Flash-Player standardmäßig nicht zur Verfügung, dazu gehören auch die zur Kommunikation mit Videos. Daher müssen wir diese Funktionen manuell»importieren«: 3. Notieren Sie im Script-Editor: import fl.video.*; Auf diese Weise werden alle (*) Video-Funktionen beim Veröffentlichen des Films in die SWF-Datei integriert. 4. Vergeben Sie nun einen Instanznamen für die FLV-Komponente auf der Bühne: Nennen Sie sie einfach film. 5. Als nächstes folgt der Event-Listener zur Abfrage des Cue-Points: film.addeventlistener(metadataevent.cue_point, starteanimation); Hier wird die Funktion starteanimation ausgeführt, wenn ein Cue-Point erreicht ist. Welcher Cue- Point das ist, wird an dieser Stelle noch nicht festgelegt. 6. Die Funktion selbst sieht folgendermaßen aus:

24 96 Video function starteanimation(ereignis:metadataevent) { if(ereignis.info.name == "filmmitte") { blume_mc.addeventlistener(event.enter_frame, wachsen); } } Wenn also der Cue-Point filmmitte erreicht ist, wird der Blume ihrerseits ein EventListener hinzugefügt, der immer wieder (ENTER_FRAME) die Funktion wachsen ausführt. 7. In der Funktion wachsen wird die Blume einfach vergrößert, solange sie ihre Originalgröße noch nicht erreicht hat: function wachsen(ereignis:event) { if(blume_mc.scalex < 1) { blume_mc.scalex += 0.03; blume_mc.scaley += 0.03; } } Hier noch einmal der vollständige Code: 1 blume_mc.scalex = 0; 2 blume_mc.scaley = 0; 3 4 import fl.video.*; 5 6 film.addeventlistener(metadataevent.cue_point, starteanimation); 7 8 function starteanimation(ereignis:metadataevent) { 9 if(ereignis.info.name == "filmmitte") { 10 blume_mc.addeventlistener(event.enter_frame, wachsen); 11 } 12 } function wachsen(ereignis:event) { 15 if(blume_mc.scalex < 1) { 16 blume_mc.scalex += 0.03; 17 blume_mc.scaley += 0.03; 18 } 19 } Codebeispiel: Der vollständige Code für Übung 22.

25 Lösungen 119 Lösungen Die Lösungen zu den Übungsaufgaben finden Sie im Begleitmaterial zu diesem Lernheft.

26 120 Index Index ENTER_FRAME (Ereignis) 31 Export für ActionScript 66, 105 load (Methode) 75 ActionScript Siehe Aktionen addchild (Methode) 75, 106, 107 Adobe Media Encoder 81 alpha (Eigenschaft) 19 Anzeigeliste 14, 75, 107 Anzeigeobjekte 14, 15 F4V 80 FLV 80 FLV-Playback Siehe Komponenten for-schleifen 108, 114 getchildbyname (Methode) 109 Math-Objekt 56 Maus verfolgen 27 MOUSE_DOWN (Ereignis) 38 mouseenabled (Eigenschaft) 29 Mouse.hide (Methode) 29 MOUSE_MOVE (Ereignis) 28 MOUSE_UP (Ereignis) 38 Movieclips Eigenschaften 15, 19 Methoden 11 MP4 80 Bezeichner 33 Bildlauf 47 Boole sche Werte 19 bytesloaded (Eigenschaft) 78 bytestotal (Eigenschaft) 78 hittestobject (Methode) 61, 110 hittestpoint (Methode) 62 name (Eigenschaft) 108 new 67, 74, 106, 111 COMPLETE 77, 78 contentloaderinfo (Eigenschaft) 77 Cue-Points 93 currentframe (Eigenschaft) 30 Datentypen 35, 53 ändern 36 DisplayObject Siehe Anzeigeobjekte Drag & Drop 58 einrasten 58 Ziehbereich einschränken 59 if 22 Initialisierung 34 Instanznamen 12 Instanzpfad einfügen 15 KeyboardEvent 99 keycode 99 Klassen 15 Kollisionstest 61 Komponenten 89 FLV-Playback 89 Kontrollstrukturen 25 Loader 74 play (Methode) 68 Preloader 76 ProgressEvent 77 random (Methode) 57, 106, 107, 108 Rectangle 59 removechild (Methode) 110 restrict (Eigenschaft) 54 root 14 rotation (Eigenschaft) 19 round (Methode) 56, 107 scalex (Eigenschaft) 19 scaley (Eigenschaft) 19 Scrollpfeile 47

27 Index 121 Skin 88 SoundChannel 67, 68, 111 SOUND_COMPLETE 68 Sound-Objekt 65 soundtransform 68 SoundTransform 71 Stage 14 startdrag (Methode) 58 stopdrag (Methode) 59 stop (Methode) 68 Strikte Typisierung 35 x (Eigenschaft) 19 y (Eigenschaft) 19 Zuweisungsoperator 19, 34 Tastatursteuerung 99 Text 43 dynamischer Text 43 Eingabetext 52 Zeichen beschränken 54 this 14 totalframes (Eigenschaft) 30 trace (Methode) 26 typeof 36 unload (Methode) 76 URLRequest 74 var 33 Variablen 33 anlegen 33 Vergleichsoperatoren 23 Verknüpfung 66, 105 Video 80 importieren 87 kodieren 80 Transparenz 92 veröffentlichen 90 visible (Eigenschaft) 19