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

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)

Wichtige Tutorien & Beiträge

• 7. 5. 2008 Film im Web
• Video-Export
• Einbinden von QuickTime-Streams
• Kommentar zu Einbinden von QuickTime-Streams

Video

Bei Accessability Prüfungen wie etwa mit WAVE - web accessibility evaluation tool ist eine Fehlermeldung ähnlich 'ERROR: Form label missing::A form <input>, <select>, or <textarea> does not have a corresponding label' gekommen. Der Grund dafür ist, wie die Meldung sagt, das fehlen eine <label> Elements für jedes Formular-Element wie Eingabefelder oder Checkboxes

Zur Korrektur des Problems muss man einfach das label tag in das Formular einfügen. In vielen Fällen wird das zu bezeichnende Formular-Element bereits eine Beschriftung besitzen, nur ist diese eben nicht von einem label tag eingeschlossen. Wichtig beim Hinzufügen des label tags:

• Das label tag muss das Attribut for="id des zu bezeichnenden elements" gesetzt haben
• Das zu bezeichnende Element muss das Attribut id, und nicht nur das Attribut name, gesetzt haben (zB. id="username"). Die id muss eindeutig sein auf der Seite.

Beispiel:

<label for="loginform_username">Username:</label><input name="username" id="loginform_username" type="text" /><

I added a feature that allows a user to quickly add a comment to a story by simply double-clicking anywhere within the story text. This is done with the help of a javascript library thats allows to open a popup with a comment edit form.

It was not so easy to add the proper javascript to the skins, especially to hand over the html code to be displayed in the popup. I added custom story and site skins for popup comment form and popup caption

Resources: http://www.bosrup.com/web/overlib/

I am trying to create a blog header image according to my idea. I searched for black and white images of books, thinker of rodin and chess in http://www.google.at. At first I wanted to add big-lettered single words for "read", "think", "learn" overlapping the image of books, thinker and chess respectively. But when I searched for ways to make text transparent or a similar effect, I found a page explaining how to create image that is outlined by text: http://www.drweb.de/photoshop/bild-aus-schrift.shtml

I decided to go for that and made a few versions of the header image, with gaps between the 3 parts and without, with more or less transparency and so on. Lacking experience as designer and as well as the tool I used (Adobe Photoshop CS 3) I finally took the image I liked best so far.

It has a special property to make it suitable for different layouts: There is no 100% background color, only a 50% white fill layer. So by setting the background-color css style for the image, you can basically give the image a slight hue in a color matching your layout. In my case, its the layout.titlecolor.

Download link for zipped header-image project: /9756179/getfile?name=header-image_read-think-learn

Like me you might have recognized that editing the default site skin 'Main page of a single day' does not have an effect. This seems to be a problem of antville.org default layout. The link in the site skin list refers to skin 'day.main' while the id is in fact 'Day.main'. So if you want to edit the skin, simple select 'Main page of a single day' and change 'key=day.main' to 'key=Day.main' in the browser url.

I try to add icons to my layout for action-links, menu-items, etc.
Resource:
http://www.freeiconsweb.com/