Zum Inhalt springen
Der Guide für ein smartes Leben.
Mit Flash spielt die Musik

Teil 2: Webdesign mit Flash

Autoren: Redaktion pcmagazin und Frank Puscher • 28.4.2009 • ca. 3:00 Min

Der Pfad _root.loader.my_sound hat derzeit natürlich noch keine Wirkung. Das Prinzip der Lautstärke- und Balanceregelung ist aber denkbar einfach: Die Werte für die X-Koordinate des Balancereglers und die Y-Koordinate des Lautstärkereglers werden 1:1 zu Prozentwerten für die Lautstärke auf den...

Der Pfad _root.loader.my_sound hat derzeit natürlich noch keine Wirkung. Das Prinzip der Lautstärke- und Balanceregelung ist aber denkbar einfach: Die Werte für die X-Koordinate des Balancereglers und die Y-Koordinate des Lautstärkereglers werden 1:1 zu Prozentwerten für die Lautstärke auf den Boxen umgerechnet.

Webdesign mit Flash
Der Ein/Aus-Schalter ist ein Movieclip, der zwischen zwei Frames wechselt.
© Archiv

Bei der Balance müssen wir die Koordinate für den Mittelpunkt der Schiene abziehen, denn das ist der Nullpunkt. Der Balancewert variiert also zwischen -100 und 100. Bei der Lautstärke müssen wir den Wertebereich umkehren, schließlich soll die Lautstärke nach oben hin größer werden. Wir ziehen also die Y-Koordinate des Reglers von dem Wert ab, der das obere Ende der Schiene beschreibt. Hier ist das 150.

Kehren Sie zurück zu Szene 1, erzeugen Sie eine neue Ebene namens steuerung und bringen Sie den neuen Clip dort auf die Bühne.

Der Loader

Nun zum Herz unseres MP3-Players. Der Loader ist ein Movieclip. Er erfüllt folgende Aufgaben: dynamisches Laden der MP3-Datei, Puffern der Wartezeit, Darstellung der ID3-Tags, Laden des nächsten Songs, wenn der erste vorbei ist.

Webdesign mit Flash
Der Loader pendelt so lange zwischen Frame 2 und 4 bis der ganze Song geladen wurde.
© Archiv

Erzeugen Sie auf einer neuen Ebene einen neuen Movieclip. Vergessen Sie nicht, ihm den Instanznamen loader zuzuweisen. Ziehen Sie zwei dynamische Textfelder auf. Im oberen wird der Titel des gespielten Songs angezeigt, im unteren der Interpret. Die Variable für das untere Feld lautet: _root.loader.id3.Artist, die für das obere: _root.loader.id3.Titel.

Setzen Sie in Frame 4 dieser Ebene ein Schlüsselbild. Erzeugen Sie nun eine Ebene für die Aktionen. In Frame 1 wird das Sound-Objekt initialisiert:

var my_sound:Sound = new Sound();
mp3 = "musik/"+
"track"+_root.zahl+".mp3";
my_sound.loadSound
(mp3,true);

Die Zeilen eins und drei sind Standard. Spannend ist die mittlere Zeile. Sie erzeugt einen dynamischen Pfad zur MP3-Datei. Dieser wird gebildet aus dem Ordnernamen musik/, aus dem neutralen Bezeichner track aus der Variablen _root.zahl und aus dem Suffix .mp3. Ihre MP3-Files müssen also in einem Ordner namens musik liegen, der im gleichen Verzeichnis platziert ist, wie der Flash-Film. Die Soundfiles haben die Namen track0.mp3, track1.mp3 und so weiter.

In Frame 3 dieser Ebene platzieren Sie die Ladeschleife:

if(my_sound.getBytesLoaded()< my_sound.getBytesTotal()){
gotoAndPlay(2);
}else{
id3.Titel=my_sound.id3.songname;
id3.Artist=my_sound.id3.artist;
play();
}

Die erste If-Bedingung fragt, ob bereits alle Daten des Soundfiles geladen wurden. Ist das nicht der Fall, kehrt der Film in Frame 2 zurück und lädt weiter. Ist der Sound geladen, werden die ID3-Tags ausgelesen, der Movieclip wird abgespielt und die Musik gestartet. In Frame 4 steht hält der Clip an und zeigt die Textfelder an:

stop();
my_sound.onSoundComplete =
function() {
if(_root.selected=="top"){
if(_root.zahl==9){
_root.zahl=0;
}else{_root.zahl=_root.zahl+1;}
}else if(_root.selected=="random"){
_root.zahl=random(10); }
gotoAndPlay(1); };

Die Funktion onSoundComplete wartet auf das Ende der Musik und lädt dann das nächste File. Wir gehen von zehn Songs aus. Wenn die Variable _root.zahl den Wert 9 erreicht hat, würde der nächste Ladevorgang ins Leere zielen. Wir müssen _root.zahl also zurücksetzen.

Sie sehen noch eine Fallunterscheidung mit einer Variablen namens _root.selected. Hierfür erzeugen wir gleich einen Schalter, um zu wählen, ob man die Tracks nacheinander oder in zufälliger Folge hören will.

Wir benötigen noch eine weitere Ebene im Loaderclip. Hier platzieren Sie einen neuen, komplett leeren Movieclip auf der Bühne. Es trägt den Instanznamen id3 und fungiert als temporärer Container für die ID3-Informationen.

Kehren Sie zu Szene 1 zurück und bringen Sie, falls noch nicht geschehen, den Loader mit passendem Instanznamen auf die Bühne. Erzeugen Sie eine neue Ebene für die Initialisierung der Variablen. Hier steht folgendes Skript als Programmierung:

Var zahl=0;
Var selected="top";
top.gotoAndStop(2);

Der Movieclip top, der hier adressiert wird, erscheint auf der Bühne als Schaltfläche TopTen. Zusammen mit einer weiteren Schaltfläche Random soll er es dem Benutzer ermöglichen, zwischen zufälliger Trackwahl und festgelegter Reihenfolge Track0 bis Track9 zu unterscheiden. Beide Movieclips sind identisch aufgebaut. Sie enthalten im ersten Frame einen grauen, im zweiten einen schwarzen Text. Im ersten Frame liegt ein unsichtbarer Button darüber und ein stop(); als Programmierung.