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

Zielsetzung und Zielpublikum

Das Zielpublikum wird festgelegt als der Blog-Besitzer, die restlichen Teilnehmern der Lehrveranstaltung, dem Lehrveranstaltungsleiter und der Tutorin. Nicht zum Zielpublikum gezählt werden andere Collabor Benutzer und anonyme Benutzer (globale Publikum).

Erwartungen:

• Der Blog-Autor erwartet sich einen Blog der den Abschluss der Lehrveranstaltung ermöglicht.
• Die Lehrveranstaltungsteilnehmer erwarten sich einen Blog der nach Möglichkeit nützliche Beiträge zur Realisierung des eigenen Blogs und der Aufgabestellung bietet und vielleicht als Anregung, Inspiration oder Vergleichsmöglichkeit bei der Gestaltung des eigenen Blogs dient.
• Die Lehrenden erwarten einen möglichst aktiven Blog, der die Aufgabenstellungen erfüllt und eventuell ein kreativer, wertvoller Bestandteil der Lehrveranstaltung wird.

Ziele:

• Erfüllung der Aufgabenstellungen
• Dokumentation der eigenen Lernerfahrung im Verlauf der Lehrveranstaltung
• Schreiben eigener Beiträge zu den Themen der Lehrveranstaltung und Tutorien
• Verlinken auf Beiträge in den Blogs zur Lehrveranstaltung
• Zugang zu den Blog-Beiträgen für das Zielpublikum
• Möglichkeit zum Kommentieren von Beiträgen und zum Verlinken auf Beiträge durch das Zielpublikum

Nicht-Ziele

• Vermittlung der Beiträge an das Nicht-Zielpublikum
• Schreiben von Beiträgen durch das Zielpublikum mit Ausnahme des Blog-Besitzers
• Erstellung eines langfristig betreuten, über die Dauer der Lehrveranstaltung hinausgehenden Blogs

Gliederung

• Abgaben zu Aufgabestellungen
• Beiträge im Rahmen der Tutorien
• Beiträge im Rahmen der Blog-Entwicklung
• Off-Topic Beiträge

Interface design

Excel-Datei mit Entwürfen: aufgabe 2 interface design (xls, 28 KB)

Der Blog besitzt eine lineare Struktur. Die Gliederung der Beiträge besitzt nur eine Ebene. Der Blog selbst ist in die Netzstruktur von Collabor, im Speziellen der Menge der zur Lehrveranstaltung gehörenden Blogs eingebettet.

Aufbau:

Der Blog ist grundsätzlich einspaltig aufgebaut. Es gibt einen Kopfbereich, zusammengesetzt aus 3 horizontal geteilten Bereichen:
Der oberste Bereich ist 2spaltig. Links befindet sich das Blog-Header-Image "read-think-learn". Rechts davon sind untereinander angeordent: Loginstatus mit Username, Role und Aktion "Anmelden" bzw. "Abmelden"; Elementare Navigation für anonyme und Nicht-Admin/Nicht-Contributor Benutzer mit Link auf lehrveranstaltungsbegleitenden Blog "Blog Medienproduktion"; Anzeige der letzten Beitrags- oder Kommentar-Änderung mit site.history Makro; Anzeige des Suchformulars
Der mittlere Bereich beinhaltet eine horizontale Auflistung der Themenbereiche
Der unterste Bereich beinhaltet einen horizontal orientierten Kalender

Falls der eingeloggte Benutzer eine Blog-Administrator oder Contributor ist (nur Blog-Besitzer) wird ein zusätzlicher Bereich zwischen dem obersten und mittleren Bereich eingefügt, der eine horizontale Auflistung aller Aktionen für Administrator bzw. Contributor enthält.
Alternative: JavaScript-basiertes Menü zum Aufklappen im obersten Bereich rechts zur elementaren Navigation.

Unter dem Kopfbereich ist der Inhaltsbereich.

Der Blog soll möglichst in Deutsch sein.

Liste der Inhaltsseiten:

• Liste Beitragsvorschau gesamt chronologisch
• Übersicht über Themenbereiche
• Liste Beitragsvorschau je Themenbereich
• Vollansicht Einzelbeitrag inklusive Kommentare
• Gesamtliste aller Änderungen

Die Startseite ist die Liste der Beitragsvorschau gesamt chronologisch.

Multimediale Inhalte:

• Bild im Kopfbereich
• Ergebnisse der Aufgabenstellungen: Film, Animation

Das Interaktionsdesign beschränkt sich auf die Gestaltung der von Collabor angebotenen Makros für folgende Aktionen:

• Hinzufügen und Ändern eines Kommentars
• Hinzufügen und Ändern eines Beitrags
• Hinzufügen und Ändern eines Bildes
• Hinzufügen und Ändern einer Datei
• Status angemeldeter Benutzer
• Status nicht angemeldete Benutzerin

(in Aufgabe 1 verlangte Skins für Änderung des Profils und Rechteverwaltung sind nicht Teil des Layouts und können nicht geändert werden)

Das Hinzufügen und Ändern von Beiträgen, Bildern und Dateien ist nur durch den Blog-Besitzer möglich. Die Gestaltung wird sich deshalb mehr auf die restlichen Aktionen konzentrieren.

Der Ablauf der Interaktion (Seitenfolge, Makroverschachtelung) ist durch Collabor festgelegt.

Der Blog besitzt eine eigene Druckansicht. Der Kopfbereich ist in der Vollansicht Einzelbeitrag ausgeblendet, für Listenansichten wie Beitragsvorschau eines Themenbereichs ist wird er gedruckt. Interaktionselemente im Kopf- und Inhaltsbereich (Bearbeiten-Link, etc.) sind ebenfalls ausgeblendet.

Screen-Design

Fensterverhalten: Das Browserfenster muss in fast allen Inhaltsansichten gescrollt werden (abhängig von der Anzahl der Stories bzw. Kommentare).

Schrift: Trebuchet MS, Verdana, sans-serif; für den gesamten Blog

Farben:

• Text: Schwarz #000000
• Text Hintergrund: leicht Grau: #f0f0f0
• Nicht-Text Hintergrund: Weiß: #000000
• Titel: stark Blau: #0000ff
• Link: leicht Blau: #000060
• gewählter Link: leicht Blau: #000060, unterstrichen

Dünner weißer Rahmen um Block-Elemente:

• Kopfbereich, 3 Bereiche
• Inhaltsbereich, Beitrag bzw. Kommentar

Bilder: Kopfbereich, Blog-Header image "read-think-learn", in Schwarz-weiß

Formate: Datumsformat durch Collabor Makro, kein festgelegtes Format für sonstige Zahlen bzw. Adressen

Tabellen werden durch div-Elemente ersetzt.

Es werden keine Icons und Grafiken verwendet.

Alle Inhalts- und Interaktionsseiten besitzen dieselbe Einheit und Struktur (auch bedingt durch Collabor Makros)

http://www.sitepoint.com/article/anatomy-web-fonts
http://typetester.maratz.com/

Draft: style-guide-v1.0 (0, 6 KB)