Mit Flash spielt die Musik
Webdesign mit Flash
Keine Technik eignet sich besser für einen Software-MP3-Player auf der Webseite als Flash.
- Webdesign mit Flash
- Teil 2: Webdesign mit Flash
- Teil 3: Webdesign mit Flash
- Teil 4: Webdesign mit Flash
Dass Flash mit Musik umgehen kann, ist hinlänglich bekannt. Die integrierte MP3-Kompression erlaubt es, Musikstücke stark zu komprimieren und gleichzeitig eine annehmbare Qualität zu erhalten. Die Tatsache, dass der Flash-Player selbst das Abspielen der Musik vornimmt, sorgt dafür, dass kein weiterer Player gestartet werden muss.
MP3-Songs lassen sich somit sichtbar und auch unsichtbar an HTML-Seiten anhängen. Kommt der Browser mit dem Flash-File zurecht, spielt die Musik, kann er das Format nicht interpretieren, bleiben die Lautsprecher zwar stumm, doch es entsteht auch kein größerer Schaden in Form einer nicht ladbaren Seite.
Die direkte Integration eines Musikstücks in einen Flashfilm ist einfach. Der Einsatzbereich dieser statischen Technik erstreckt sich aber auf limitierte Musikangebote, etwa die musikalische Untermahlung einer Diashow oder eines Intros. Schon wenn dem User die Wahl zwischen mehreren Musikstücken gegeben werden soll, kommt sie jedoch an die Grenzen der erträglichen Ladezeiten. Ein Song hat in Flash-MP3-Qualität durchschnittlich 1,2 Megabyte pro Minute. Mehr als ein ganzes Stück ist im Download kaum verträglich.
Es gilt also, ein dynamisches System aufzusetzen, das die Tracks erst lädt, wenn der User seine Auswahl getroffen hat. Die MP3s liegen dabei als eigene Files auf dem Server. Der User sieht zunächst nur eine sehr kleine Steuerdatei. Wählt er dann einen Song oder ein Genre, lädt die Steuerdatei die Musik dynamisch vom Server.
Unser kleiner MP3-Player kann aber noch viel mehr. Er ist in der Lage, Songs in einem Shuffle-Modus zufällig auszuwählen. Er kann die Songinformationen aus den ID3-Tags lesen und darstellen und er erlaubt die Manipulation von Lautstärke und Balance.
Das Interface
Um den Workshop möglichst kurz zu halten, reduzieren wir den grafischen Aufwand auf das Nötigste. Wir benötigen einen grafischen Rahmen, der in der Mitte Platz für die Anzeige der Titelinformationen lässt sowie zwei Slider-Schienen, auf denen die Schieberegler für Lautstärke und Balance laufen.
Stellen Sie die Hintergrundgrafik in Ihrem Bildbearbeitungsprogramm zusammen. Wir wählen eine recht kleine Outline von 350 x 200 Pixel. Die Slider-Schienen sind 200 Pixel breit (Balance) beziehungsweise 100 Pixel hoch (Lautstärke). Das hat den Vorteil, dass später keine Umrechnung für die Werte nötig ist.
Importieren Sie die Grafik in Flash. Jetzt benötigen wir drei Buttons. Der erste ist der Ein/Aus-Schalter. Erstellen Sie einen Kreis in Flash und füllen Sie ihn mit einem radialen Farbverlauf von Rot nach Schwarz. Wandeln Sie diese Grafik in einen Movie- clip um. Gehen Sie in den Movieclip, setzen Sie ein zweites Schlüsselbild und färben Sie dort den Ball mit einem Verlauf von Grün nach Schwarz. Wandeln Sie jetzt nacheinander beide Bälle in Schaltflächen um.
on(press) {
stopAllSounds();
_root.loader.stop();
gotoAndStop(2); }
Beim Drücken beendet er die Musik, verhindert das Laden des nächsten Titels und wandert in den nächsten Frame mit dem grünen Button. Er reagiert so:
on (press){
gotoAndStop(1);
_root.loader.play(); }
Er stellt sich selbst zurück auf die Farbe Rot und startet den Loader.
Kehren Sie nun zurück zu Szene 1. Holen Sie eine weitere Instanz des grünen Buttons auf die Bühne und positionieren Sie sie über der horizontalen Schiene für die Balance. Wandeln Sie den Button zum Movieclip um. Im Movieclip programmieren Sie den Button wie folgt:
on (press) {
startDrag(this, false, 70, 162,
270, 162); }
on (release, releaseOutside) {
stopDrag(); }
Auf Knopfdruck können Sie den Button ziehen. Der Ziehbereich ist durch die Koordinaten in den Klammern begrenzt. Der identische Wert für oben und unten bedeutet, dass Sie den Button nur horizontal ziehen können. Hier ist Ausprobieren gefordert, damit die Zuglinie exakt der Position der grafisch angelegten Schiene entspricht.
Kehren Sie zurück zu Szene1 und geben Sie dem Movieclip in den Eigenschaften den Instanznamen bal (für Balance). Nun öffnen Sie die Bibliothek und duplizieren den Clip. Ziehen Sie das Duplikat über die vertikale Schiene und geben Sie dem Clip den Instanznamen vol. Doppelklicken Sie auf den Clip und verändern Sie die Zug-Koordinaten so, dass Sie eine vertikale Bewegung erzeugen, die über 100 Pixel geht:
on (press) {
startDrag(this, false, 22, 30, 22,
130); }
on (release, releaseOutside) {
stopDrag(); }
Testen Sie den Film. Die Slider müssen sich exakt ziehen lassen und der Ein/Aus-Schalter muss beim Klick die Farbe wechseln.
Die Steuerung
Nun erzeugen wir eine Programmschleife, die kontinuierlich die Koordinaten der Slider ausliest und daraus die Werte für Lautstärke und Balance berechnet. Das geschieht auch bereits während der Nutzer den Slider noch geklickt hat und ist somit einer Lösung, die auf die Button-Aktion onRelease reagiert, überlegen.
Erzeugen Sie also einen neuen Movieclip. Setzen Sie ein zweites Schlüsselbild und programmieren Sie folgende beiden Befehle hinein:
_root.loader.my_sound.setPan
(_root.bal._x-165);
_root.loader.my_sound.setVolume
(150-_root.vol._y); 
