Abgabe, Flash Animation

Aufgabenstellung

Ziel war das Erstellen einer einfachen Flash Animation auf Basis des im Tutorium gelernten: Zeichnungsobjekte, Symbole, Schaltflächen, Bewegungs- und Formtweens, Pfade, Masken.

Idee

Eine Idee hatte ich zu Beginn keine, aber bei der Suche nach verschiedenen Flash-Tutorials, Effekten mit Flash und ähnlichem habe ich mich dazu entschlossen, eine Musik-Visualisierung eines beliebigen mit Effekt versehenen Textes zu machen.

Quellen

Sound Visualization in Flash CS3
Dynamic text effect
Random Bubbles made with ActionScript 3.0
Making Buttons Work in Flash CS3 (ActionScript 3.0)
MP3 Dateien: http://www.lastfm.de/music/+free (Danke an Andrea für diese Quelle)
... und viele mehr, die ich nicht alle notiert habe: Parameterübergabe an Flash, Starten / Stoppen eines Films, Event-Handler für Sound, Buttons, ...

Anmerkungen

Ich habe Vergleichsweise wenig Symbole, Tweens, Layers und ähnliches, da meine Flash Animation stark auf ActionScript 3.0 aufbaut. So wird etwa der zu animierende Text programmatisch erzeugt, aber auf Basis zweier selbst erstellter Komponenten/Symbole. Einzig die Bedienelemente (Stop- und Playbutton, Texteingabefelder für MP3-Url und Text, Beschrieftungen) wurden direkt zur Bühne hinzugefügt.

Einbindung in den Blog

Beim Veröffentlichen im Flash CS3 kann man sich auch eine HTML Datei generieren lassen, die auch Javascript enthält. Damit lässt sich eine Flash-Animation Browser-unabhängig einbinden. Ich habe dieses Javascript zu meinem Blog hinzugefügt. Falls Javascript deaktivert ist, wird direkt ein Object Tag zum Einbinden benutzt, allerdings ohne classid und basecode. Interessanterweise scheint IE diesen Tag trotzdem korrekt zu interpretieren, ebenso wie Firefox. Die Datei mit dem HTML Code der in diesem Beitrag zum Einbinden benutzt wurde: flash-embedded (txt, 3 KB)

Wichtige Tutorien & Beiträge

14. 5. 2008 Animation im Web

Bedienung

Man kann den Text der durch die Musik anmiert wird ändern, bzw. beim Einbinden des Flash direkt als Parameter mitübergeben. Das gleiche gilt für die Musik. Leider scheint bei der Anzeige im Browser die Verwendung externen MP3 Dateien nicht möglich zu sein. Man hört zwar die Musik, aber es wird nichts animiert. Beim Verwenden von auf dem Blog gespeicherter Musikdateien funktioniert die Animation.

Dateien

Flash SWF: read-think-learn.swf (swf, 7 KB)
Flash FLA: read-think-learn.fla (fla, 108 KB)
Musik 1: test-song.mp3 (mp3, 191 KB)
Musik 2: morningsunlight.mp3 (mp3, 4,111 KB)
http://freedownloads.last.fm/download/29453608/Morning Sunlight.mp3

Flash Animation

Abgabe, QuickTime Streaming Video

Aufgabenstellung

Eine Aufgabenstellung im Rahmen der Lehrveranstaltung pim08s war das Drehen und Anbieten eines Videos.

Team 'Fliege'

Michael: Schauspieler (Man mit Handy)
Stefan: Schauspieler (Man mit Zeitung)
Peter: Kamera
Astrid: Produktion, Regie
Jürgen: Produktion, Regie, Schnitt

Drehbuch

Das Drehbuch unseres Teams 'Fliege' findet sich im Blog von Astrid. Der Ablauf wurde von der Gruppe gemeinsam erarbeitet. Idee zum Thema 'Fliege' von Astrid.

Video drehen

Das Video wurde vom ganzen Team gemeinsam im Tutorium mit Unterstützung der Tutorin am Uni-Campus gedreht. Etwas Zeitdruck wegen Termine einiger Mitglieder, ging aber zügig und ohne Probleme. Skizzierte Drehbuch wahr dabei sehr hilfreich.

Videoschnitt

Das Schneiden des Videos war eine Einzelaufgabe. Ich habe mich für einen Ablauf entschieden, der sich grob an das Drehbuch hält:

Titel (mit "Vor-hören" des Antagonisten/Insekt)
Vorstellung des Ortes, der Situation (inkl. Texteinblendung) der beiden Personen, ihre aktuelle Tätigkeit
Wechsel zum Auftritt des Insekts (inkl. Texteinblendung), Annährung an Personen, mit Beschleunigungseffekt für Dramatik
Insekt wird entdeckt, bzw. macht sich bemerkbar. Man mit Zeitung reagiert agressiv und schlägt mit der Hand nach Insekt, mit harten Schnitten bzw. Überblendungen zwischen Szenen um Hektik darzustellen (bzw. weil Originalmaterial länger war)
Man mit Zeitung rollt Zeitung zusammen und schlägt nach Insekt, Insekt setzt sich auf Man mit Handy, Höhepunkt: Man mit Zeitung schlägt Man mit Handy, welcher aufschreit.
Epilog: es ist wieder Ruhe eingekehrt, aber auch Friede? (inkl. Texteinblendung)
Abspann: Titel, Team, Schnitt

Geräusch Insekt durch aufgenommenes Brummen, mit varierender Lautstärke

Streaming

Mit Hilfe der Beiträge im Lehrveranstaltungsblog und den Tutorien war das Exportieren des Films als QuickTime Streaming Video und das Hochladen auf den Streaming-Server des Instituts relativ einfach. Das Video liegt in 2 Formaten vor:

320 x 240, 32000 kHz, stereo, H.264: http://qstreaming.idv.edu:80/pim/9756179_248408_08s_Buzz_320_32s.mov
240 x 180, 22100 kHz, stereo, H.264: http://qstreaming.idv.edu:80/pim/9756179_248408_08s_Buzz_240_22s.mov

In diesen Beitrag eingebunden ist die 1. Variante mit 320

Einbindung in den Blog

Ein Kommentar zur Beitrag von Einbinden von QuickTime enthält einen Link auf eine Javascript-Datei für ein Browser-kompatibles Einbinden, sofern Javascript atkiv ist. Ich habe mich beim Einbinden für den Einsatz dieses Javascripts entschieden. Zusätzlich werden direkt 2 verschlachtelte Object Tags benutzt falls Javascript deaktiviert ist. Das Embed-Tag verwende ich nicht, damit der Beitrag XHTML konform bleibt. Den in diesem Beitrag verwendeten Code zum Einbinen als Download:

Probleme

Sehr umständlich war das Arbeiten mit dem Schnittwerkzeug iMovie: Programm nur im Labor, nur für Mac, kein Speicherplatz für Video, kein FTP Zugriff auf Streaming Server im Mac-Labor (active connection mit Fetch FTP Client nicht möglich ?), Probleme mit NTFS formatierten externen Festplatten, Problem mit USB Geräten

Ausserdem sind mir punktuell Mängel an iMovie aufgefallen. Speziell das Zusammenfügen von Clips zu einem einzigen Clip, Probleme mit der Fixierung von Audiodaten, keine (?) Möglichkeit, einen extrahierten Audioclip wieder zu einem Videoclip beizumengen, keine Möglichkeit einen Effekt auf Video und Audiospur parallel anzuwenden (zB. Schneller / Langsamer wirkt nur auf Audiospur im Video, nicht auf separate Audiospur)