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

© Archiv

Mit Flash wird Ihre Seite musikalisch.

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);

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".