Adobe Flash CC Pro ActionScript & Video - Frank Schad
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
webmasters
press Frank Schad
Adobe Flash CC Pro
ActionScript 3 & Video
Autorisiertes Curriculum für das Webmasters Europe
Ausbildungs- und Zertifizierungsprogramm
webmasters
press Frank Schad
Adobe Flash CC Pro
ActionScript 3 & Video
Art.-Nr. 011766756
Version 4.0 vom 26.11.2013
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 Ge-
nehmigung 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 Heraus-
geber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell
Autorisiertes Curriculum für das Webmasters Europe
verbliebene fehlerhafte Angaben und deren Folgen.
Ausbildungs- und Zertifizierungsprogramm
Inhalt5
Inhalt
Einführung................................................................................................................................................................................. 9
1 Movieclip-Steuerung.................................................................................................................................... 11
1.1 Methoden für Movieclips................................................................................................................. 11
1.2 Die Anzeigeliste: Objekthierarchie in ActionScript............................................................. 14
1.3 Eigenschaften von Movieclips.......................................................................................................15
1.4 Bedingte Anweisungen................................................................................................................... 22
1.5 Fehlersuche...........................................................................................................................................26
1.6 Mausverfolgung................................................................................................................................. 27
1.7 Aktuelle Framenummer auslesen...............................................................................................30
1.8 Movieclip-Ereignisse..........................................................................................................................31
2 Variablen und Datentypen...................................................................................................................... 33
2.1 Anlegen von Variablen..................................................................................................................... 33
2.2 Variablen Werte zuweisen.............................................................................................................. 34
2.3 Datentypen........................................................................................................................................... 35
3 Mit Text arbeiten............................................................................................................................................. 43
3.1 Dynamische Textfelder.................................................................................................................... 43
3.1.1 Texte dynamisch generieren.......................................................................................... 45
3.1.2 Scrollpfeile für Textfelder................................................................................................. 47
3.2 Eingabetext........................................................................................................................................... 52
4 Das Math-Objekt.............................................................................................................................................56
4.1 Verwendung des Math-Objekts...................................................................................................56
4.2 Runden von Zahlen...........................................................................................................................56
4.3 Zufallsgenerator................................................................................................................................. 57
6Inhalt
5 Drag & Drop........................................................................................................................................................ 58
5.1 Einfaches Drag & Drop..................................................................................................................... 58
5.2 Ziehbereich einschränken..............................................................................................................59
5.3 Kollisionstest........................................................................................................................................ 61
5.3.1 hitTestObject()..................................................................................................................... 61
5.3.2 hitTestPoint()........................................................................................................................62
6 Das Sound-Objekt..........................................................................................................................................65
6.1 Sounds verknüpfen...........................................................................................................................66
6.2 Sound instanzieren........................................................................................................................... 67
6.3 Sounds starten und anhalten.......................................................................................................68
6.4 Soundüberlagerungen verhindern............................................................................................70
6.5 Fortschrittsanzeige.............................................................................................................................71
6.6 Lautstärkeregler..................................................................................................................................71
7 Externe Filme laden...................................................................................................................................... 74
7.1 Laden eines Films............................................................................................................................... 74
7.2 Film wieder entladen........................................................................................................................ 76
7.3 Preloader................................................................................................................................................ 76
8 Video.......................................................................................................................................................................80
8.1 Videos für Flash vorbereiten.........................................................................................................80
8.1.1 Dateiformat und Profil auswählen...............................................................................82
8.1.2 Manuelle Exporteinstellungen...................................................................................... 83
8.2 Videos in Flash importieren........................................................................................................... 87
8.2.1 Video auswählen................................................................................................................ 87
8.2.2 Skin auswählen...................................................................................................................88
8.3 FLV-Komponente anpassen...........................................................................................................89
8.4 Video ins Web stellen........................................................................................................................90
8.5 Videos mit Flash-Elementen kombinieren.............................................................................. 91
8.5.1 Transparente Videos in Flash importieren.................................................................92
8.5.2 Videos mit ActionScript steuern...................................................................................95
Inhalt7
9 Programmierung eines Spiels................................................................................................................ 97
9.1 Vorbereitung des Spiels..................................................................................................................98
9.2 Tastatursteuerung.............................................................................................................................99
9.2.1 Gedrückte Tasten mit Variablen abfragen.................................................................99
9.2.2 Schmetterling bewegen................................................................................................100
9.2.3 Tempo in Variable auslagern.........................................................................................101
9.2.4 Rotation hinzufügen........................................................................................................101
9.2.5 Verhindern, dass der Schmetterling die Bühne verlassen kann...................... 102
9.3 Textfelder erzeugen........................................................................................................................ 105
9.4 Movieclip-Instanzen dynamisch erzeugen........................................................................... 105
9.5 Movieclip-Instanzen steuern....................................................................................................... 107
9.5.1 Zufallsgenerator................................................................................................................ 107
9.5.2 Movieclips über die Bühne bewegen.......................................................................108
9.6 Movieclips von der Bühne entfernen.......................................................................................110
9.7 Festlegen der Framenummer.......................................................................................................110
9.8 Sound abspielen................................................................................................................................ 111
9.9 Timer einbauen..................................................................................................................................112
9.10 Spiel beenden.....................................................................................................................................112
Lösungen.................................................................................................................................................................................119
Index.......................................................................................................................................................................................... 120
80Video
Video
In dieser Lektion lernen Sie:
hh 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 Web-
site 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 ent-
weder 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 spe-
ziell 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 Industriestan-
dard 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:
Videos für Flash vorbereiten81
1. Sie exportieren das Video bereits aus dem Ursprungsprogramm (z. B. Premiere) heraus. Viele mo-
derne 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 Fol-
genden verwenden wir die zweite Variante, den Adobe Media Encoder:
Übung 20
1. 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 Programmfens-
ters oder klicken Sie auf den Button Hinzufügen (Plus-Zeichen oben links).
Abb. 14: Das Hauptfenster des Adobe Media Encoders.
82Video
8.1.1 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 aus-
gewä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.Videos für Flash vorbereiten83
8.1.2 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.84Video 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. hh 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. hh 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 Da- teigröße. Wählen Sie niemals eine höhere Framerate als die des Originals. hh Die Feldreihenfolge sollten Sie für Web-Videos immer auf Progressiv belassen. Die anderen Ein- stellungen beziehen sich auf die Wiedergabe im Zeilensprungverfahren (interlaced) auf Fernseh- schirmen. hh Dasselbe gilt für das Pixel-Seitenverhältnis. Im Web sind Pixel immer quadratisch. Auch die Fern- sehnorm (PAL oder NTSC) spielt im Web keine Rolle. hh Mit den Bitrateneinstellungen steuern Sie die Bandbreite, die für die Wiedergabe des Videos min- destens nötig ist, und damit die Stärke der Kompression. Diese Einstellungen bestimmen direkt
Videos für Flash vorbereiten85
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.
hh 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 nied-
riger 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 Einstellun-
gen auf Mit Quelle abgleichen.
Audio-Einstellungen
Abb. 19: Audio-Einstellungen
hh Der Standard-Audio-Codec des MP4-Formats ist AAC.
hh 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:
hh 11025 kHz sind höchstens für Sprache geeignet. Für Musik kaum zu empfehlen.
hh 22050 und 32000 kHz werden öfters für Multimedia-Projekte oder im Web verwendet.
hh 44100 kHz entsprechen der qualitativ hochwertigen Abtastrate von Standard-Audio-CDs.
hh 48000 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.86Video
hh Unter Kanäle können Sie zwischen Mono und Stereo wählen, was natürlich die Dateigröße enorm
beeinflusst.
hh Die Audioqualität sollten Sie i. d. R. natürlich auf Hoch stellen. Dadurch dauert der Kodierungsvor-
gang jedoch etwas länger.
hh 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 VideokonvertierungVideos in Flash importieren87
8.2 Videos in Flash importieren
Der Flash-Player ist nicht in der Lage, Videos direkt abzuspielen, sondern er kann nur SWF-Dateien ab-
spielen. Deshalb müssen die fertigen Videos zur Publikation im Web zunächst in eine SWF-Datei im-
portiert 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 (Bild-
rate) hat wie das Video!
13. Speichern Sie auch die Flash-Datei im Ordner video als video.fla.
8.2.1 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.88Video
Es werden Ihnen zwei Arten der Publikation angeboten:
hh 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.
hh 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.
8.2.2 Skin auswählen
Im nächsten Schritt haben Sie die Wahl zwischen unterschiedlichen Skins (Oberflächen, Erscheinungs-
bildern) 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 Steuer-
leiste 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 hochla-
den müssen!
Abb. 22: Auswahl der SteuerleisteFLV-Komponente anpassen89
17. 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 un-
serem 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 Kompo-
nentenparameter weiter anpassen.
Abb. 24: Die Komponentenparameter im Eigenschaftsinspektor90Video
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. Standard-
mäß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!
hh 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.
hh 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 verde-
cken.
hh Mit skinBackgroundAlpha können Sie den Transparenzgrad der Steuerleiste festlegen.
hh Mit skinBackgroundColor können Sie die Farbe der Steuerleiste ändern.
hh Mit volume legen Sie die Anfangslautstärke des Videos fest.
19. Deaktivieren Sie die Option autoPlay und aktivieren Sie skinAutoHide. Setzen Sie die Transpa-
renz 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:
hh Die HTML-Datei, die im Browser aufgerufen wird.
hh Die Datei video.swf mit der Playback-Komponente. Diese Datei ist in der HTML-Datei verlinkt.
hh Die Datei ellen_feiss.mp4, die in video.swf referenziert ist.
hh Die Datei SkinOverAllNoCaption.swf mit der Steuerleiste. Diese Datei ist ebenfalls in video.swf
referenziert.
hh Der ursprüngliche QuickTime-Film ellen_feiss.mov.
hh Die Flash-Projektdatei video.fla.Videos mit Flash-Elementen kombinieren91
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 hoch-
geladen 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-Ele-
mente, 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 trans-
parent 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.92Video
8.5.1 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 trans-
parenten 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 Enco-
ders. 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.Videos mit Flash-Elementen kombinieren93
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 ent-
halten. 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 erzeu-
gen 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 (um-
kreist) 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.94Video
9. Durch Doppelklicken auf den Standardnamen Cue-Point können Sie den Namen ändern. Ver-
geben 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 ver-
wendet, um mit Hilfe der FLV-Playback-Komponente von Cue-Point zu Cue-Point zu springen. Je-
desmal, 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) hinzu-
fü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).Videos mit Flash-Elementen kombinieren95
15. Stellen Sie sicher, dass in den Komponenten-Eigenschaften für das Video die Option autoPlay
aktiviert ist.
16. Fertig. Testen Sie den Film.
8.5.2 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. Verge-
ben 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 inte-
griert.
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:96Video
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 }
13
14 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.Lösungen119 Lösungen Die Lösungen zu den Übungsaufgaben finden Sie im Begleitmaterial zu diesem Lernheft.
120Index
Index
load (Methode) 75
ENTER_FRAME (Ereignis) 31
Export für ActionScript 66, 105
Math-Objekt 56
Maus
verfolgen 27
F4V 80 MOUSE_DOWN (Ereignis) 38
FLV 80 mouseEnabled (Eigenschaft) 29
ActionScript FLV-Playback Mouse.hide (Methode) 29
Siehe Aktionen Siehe Komponenten MOUSE_MOVE (Ereignis) 28
addChild (Methode) 75, 106, 107 for-Schleifen 108, 114 MOUSE_UP (Ereignis) 38
Adobe Media Encoder 81 Movieclips
alpha (Eigenschaft) 19 Eigenschaften 15, 19
Anzeigeliste 14, 75, 107 Methoden 11
Anzeigeobjekte 14, 15 MP4 80
getChildByName (Methode)
109
Bezeichner 33 name (Eigenschaft) 108
Bildlauf 47 new 67, 74, 106, 111
Boole’sche Werte 19 hitTestObject (Methode) 61, 110
bytesLoaded (Eigenschaft) 78 hitTestPoint (Methode) 62
bytesTotal (Eigenschaft) 78
play (Methode) 68
Preloader 76
if 22 ProgressEvent 77
COMPLETE 77, 78 Initialisierung 34
contentLoaderInfo (Eigen- Instanznamen 12
schaft) 77 Instanzpfad einfügen 15
Cue-Points 93
currentFrame (Eigenschaft) 30 random (Methode) 57, 106, 107,
108
Rectangle 59
KeyboardEvent 99 removeChild (Methode) 110
keyCode 99 restrict (Eigenschaft) 54
Datentypen 35, 53 Klassen 15 root 14
ändern 36 Kollisionstest 61 rotation (Eigenschaft) 19
DisplayObject Komponenten 89 round (Methode) 56, 107
Siehe Anzeigeobjekte FLV-Playback 89
Drag & Drop 58 Kontrollstrukturen 25
einrasten 58
Ziehbereich einschränken
59 scaleX (Eigenschaft) 19
scaleY (Eigenschaft) 19
Loader 74 Scrollpfeile 47Index121
Skin 88
SoundChannel 67, 68, 111
SOUND_COMPLETE 68 x (Eigenschaft) 19
Sound-Objekt 65
soundTransform 68
SoundTransform 71
Stage 14
startDrag (Methode) 58 y (Eigenschaft) 19
stopDrag (Methode) 59
stop (Methode) 68
Strikte Typisierung 35
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) 19Sie können auch lesen
