Ein Projekt der. Aktive Audioarbeit. "Sprechende Bilder" basierend auf HTML5

Transkript

1 Ein Projekt der Durchgeführt durch das Aktive Audioarbeit "Sprechende Bilder" basierend auf HTML5 Kurzbeschreibung: Sprechende Bilder können nicht nur mit Powerpoint oder OpenOffice sondern auch direkt in HTML5 erstellt werden. Von Vorteil ist das vor allem dann, wenn Sie später auf Webseiten veröffentlicht werden sollen. Dank HTML5 ist dafür kein zusätzliches Plugin notwendig. Technik/Material: The Gimp.6, Texteditor, Windows 7, Bild/ Foto, Sounds Zielgruppe: ab Klasse 7 Zeitumfang: 3-4 Stunden Vorbereitung Am Anfang steht die Auswahl eines geeigneten Bildes. Das kann eine Fotografie sein, ein Gemälde, oder auch ein selbst gemaltes Bild. Nun werden Überlegungen angestellt, was man in diesem Bild hören möchte. Das könnten bei abgebildeten Menschen Dialoge, Meinungen, Gedanken sein. Auch Gegenständen könnte Sprache verliehen werden. Man kann ein Bild auch nur mit Musik oder Geräuschen akustisch-atmosphärisch zum Klingen bringen. Sobald geklärt ist, wie sich das Bild akustisch präsentieren soll, werden alle Geräusche zusammengestellt, Texte formuliert, aufgezeichnet und mit Audacity bearbeitet. Erst dann geht man an die Montage von Bild und Ton. 1

2 Durchführung 1. Ausblick Diese Anleitung zeigt Ihnen Schritt für Schritt wie Sie mit Hilfe einer Vorlage ein sprechendes Bild mit HTML5 erstellen. Ihr sprechendes Bild wird aus folgenden Dateien bestehen, die alle in einem Ordner abgelegt sein müssen: index.html 1.ogg und 1.mp3.ogg und.mp3 ( und weitere Audiodateien) Bild.jpg lmz.gif hg.jpg. Vorlage entpacken In einem ersten Schritt entpacken Sie die Vorlage in das Verzeichnis in dem Sie arbeiten möchten. Am schnellsten geht das direkt mit dem Windows Explorer. Rechtsklick auf die Zip-Datei der Vorlage Sprechende Bilder mit HTML5 01.zip Alle extrahieren Anschließend im Fenster das Ziel angeben. In der Regel wird man hier den Ordner Eigene Dokumente auswählen. Die Dateien der Vorlage werden nun in einem neuen Ordner ablegt: Im Ordner Vorlage Sprechende Bilder mit HTML5 sind nun bereits folgende Dateien vorhanden: index.html lmz.gif hg.jpg Wir werden in den nächsten Schritten die Audiodateien vorbereiten (1.mp3; 1.ogg ) das Bild bild.jpg anlegen, die Imagemap erstellen und die Datei index.html anpassen.

3 Die Datei index.html ist die wichtigste Datei Ihres sprechenden Bildes. Hier sind alle wichtigen Informationen enthalten, zum Beispiel: Welches Bild soll verwendet werden, Wo sind die Bereiche über denen ein Ton abgespielt wird? (Welche Form haben diese Bereiche?) Wie heißt der Künstler des Bildes? Wer hat das sprechende Bild erstellt? hg.jpg und lmz.gif sind Bilddateien die auf der HTML Seite verwendet werden. Hier sind keine Änderungen notwendig 3. Audio Dateien vorbereiten Alle Tondateien die abgespielt werden sollen, müssen als MP3 und als OGG-Datei abgelegt werden. Bestehende Dateien lassen sich durch die nachfolgend dargestellten Schritte schnell mit dem VLC- Player konvertieren. Bitte beachten: Die Dateien müssen mit Ziffern benannt sein, da Sie später aus der HTML-Datei darauf zu greifen. Für jeden Bereich des sprechenden Bildes an dem ein Ton zu hören sein soll benötigen Sie den Ton einmal im MP3-Format und einmal im OGG-Format. Diese Bereiche werden durchnummeriert, die Reihenfolge ist beliebig. Der erste Bereich an dem ein Ton abgespielt werden soll spielt die Dateien 1.mp3 oder 1.ogg ab. Der zweite Bereich spielt entsprechend.mp3 oder.ogg ab ( ). Welches Dateiformat abgespielt wird richtet sich nach dem Browser der eingesetzt wird. Dateien mit dem VLC-Player konvertieren: 1 3

4 1. Linksklick auf Medien. Linksklick auf Konvertieren/Speichern 3. Linksklick auf Hinzufügen. Die Datei hinzufügen, die in einem neuen Format gespeichert werden soll. 4. Linksklick auf Konvertieren/Speichern 3 5. Zieldatei angeben. Es ist sinnvoll hier gleich den Ordner Sprechende Bilder mit HTML5 zu wählen. Achten Sie auf die Eingabe der richtigen Dateiendung (.mp3 oder.ogg) Mit einem Linksklick auf die Profilliste klappt diese auf Aus der Liste wählen Sie mit einem weiteren Linksklick das Dateiformat das 7 4

5 erstellt werden soll. 8. Mit einem Klick auf Starten (nicht im Bildschirmfoto zu sehen) beginnt VLC damit die Datei ins gewünschte Format umzuwandeln. 9. Wichtig: Der Fortschritt der Umwandlung wird über den Track- Schieberegler angezeigt. Bitte warten Sie ab bis der Regler vollständig nach rechts gelaufen ist, dann erst ist die Datei vollständig umgewandelt: Fortschrittsanzeige Nach diesem Schritt sollten für jeden Bereich, über dem Sound abgespielt werden soll, zwei Dateien abgelegt sein. Folgende Dateien sollten demnach bisher im Ordner vorhanden sein: index.html 1.ogg und 1.mp3.ogg und.mp3 ( und möglicherweise weitere Audiodateien) lmz.gif hg.jpg 4. Bild vorbereiten Starten Sie The Gimp und öffnen Sie das Bild, das sie zum Sprechen bringen wollen. Schnell geht das aus Gimp heraus mit der Tastenkombination STRG O Über einen Linksklick auf Bild skalieren öffnen Sie das Unterfenster in dem Sie die Größenangaben des Bildes ändern können. Die Breite des Bildes sollte nicht mehr als 1000 Pixel, die Höhe nicht mehr als 700 Pixel betragen, sonst kann das Bild nicht komplett auf dem Monitor dargestellt werden. 5

6 Wenn einer der beiden Werte zu hoch ist ändern Sie ihn bitte entsprechend ab. Das Seitenverhältnis wird beibehalten, sobald Sie mit der Tabulator-Taste Wert wird dann automatisch angepasst. ins nächste Feld springen. Der andere. Anschließend mit einem Linksklick auf Skalieren bestätigen Bilddatei im Vorlagenordner speichern 3. Anschließend speichern Sie das Bild in Ihrem Ordner ab. Mit der Tastenkombination Umschalt STRG S öffnet sich das Dialogfenster Speichern unter. 4. Als Namen geben Sie Bild.jpg ein, wählen den Ordner Sprechende Bilder mit HTML5 aus und klicken auf speichern. 6

7 The Gimp: Imagemap erstellen Auch für den nächsten Schritt benötigen Sie The Gimp. Mit Hilfe des Filters Imagemap erstellen Sie einige Zeilen HTML-Code, die dem Computer genau sagen, an welchen Bereichen des Bildes anschließend welche Tondatei abgespielt werden soll. 1. Öffnen sie den Filter über die Menüleiste: Filter Web Imagemap 3 Linksklicks 4 Doppelklick. Im neuen Fenster klicken sie auf das Polygon-Symbol. 3. Durch Linksklicks legen sie nun die Eckpunkte des Polygons fest. Wenn sie alle Punkte festgelegt haben 4. beenden sie die Eingabe mit einem Doppelklick. 7

8 Wechseln Sie auf den Reiter JavaScript und tragen sie Folgendes ein: mouseoversound1.playclip() mouseoversound1.stopclip()" Die 1 bitte jeweils durch die Nummer der Datei ersetzen, die abgespielt werden soll. Wiederholen sie die Schritte bis sie alle Bereiche mit Polygonen versehen haben. 5. Index.html anpassen Gimp erzeugt aus unseren Eingaben einige Zeilen HTML Code den wir nun in die bestehende Datei index.html einfügen müssen. Klicken sie in der Menüzeile auf das Menü Ansicht und wählen sie dann den Menüpunkt Quelle aus. Markieren sie den Code und kopieren sie ihn mit STRG C in die Zwischenablage. Anschließend öffnen sie die Datei Index.html im Texteditor und fügen sie den Code an der bezeichneten Stelle ein: 6. Test Zum Abschluss testen sie ihr sprechendes Bild und öffnen die Datei index.html mit Mozilla Firefox. 8 Code hier einfügen 8