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

Teil 4: Webdesign mit Flash

Autoren: Redaktion pcmagazin und Frank Puscher • 28.4.2009 • ca. 2:50 Min

Die For-Schleife läuft alle Positionen des Arrays von 0 bis 4 durch. Der Wert der aktuellen Array-Variablen wird in die Variable gehtnicht übersetzt. Die If-Bedingung überprüft die mögliche Übereinstimmung einer Array-Position mit der aktuellen in zahl. Ist sie enthalten, springt der Moviecl...

Die For-Schleife läuft alle Positionen des Arrays von 0 bis 4 durch. Der Wert der aktuellen Array-Variablen wird in die Variable gehtnicht übersetzt. Die If-Bedingung überprüft die mögliche Übereinstimmung einer Array-Position mit der aktuellen in zahl.

Ist sie enthalten, springt der Movieclip in Frame 4 und gibt außerdem eine Meldung aus. Ist die Zahl nicht enthalten, läuft der Clip normal in den nächsten Frame weiter. Hier in Frame 3 wird der Abspielvorgang für die Musik gestartet und der Skip-Clip zurückgesetzt.

_root.loader.play();
gotoAndStop(1);

In Frame 4 berechnen wir die neue Ordnungszahl nach dem bekannten Muster. Dann starten wir erneut die Abfrage in Frame 2, ob die neue Zahl verboten ist.

if(_root.selected=="top"){
if(_root.zahl==5){ _root.zahl=0;
}else{_root.zahl=_root.zahl+1; }
}else if(_root.selected=="random"){
_root.zahl=random(5);
}
gotoAndPlay(2);

Bringen Sie den fertigen Clip mit dem Instanznamen skip auf die Bühne.

Natürlich muss diese Abfrage auch ausgelöst werden, wenn ein Titel zu Ende gespielt wurde. Somit machen Sie einen Abstecher in den Loader-Clip und verändern die Funktion im letzten Frame wie folgt:

stop();
my_sound.onSoundComplete = function()
{_root.skip.gotoAndPlay(4);};

Zum Schluss kehren Sie zurück in Szene 1 und legen dort einen zweiten Frame an. Hier erklären Sie dem User, dass alle Titel angespielt wurden. Wollen Sie ihm einen Reset-Button anbieten, dann genügt es, ihn einfach in Frame 1 zurückzuschicken, da alle wichtigen Variablen dort initialisiert werden. Wichtig: Der loader-clip, der skip-clip und der steuerung-clip dürfen in Frame 2 nicht mehr auftauchen, damit sie beim Reset neu gestartet werden.

Variable Ordner

Bislang sind wir auf fünf Titel festgelegt, die in einem Ordner namens musik liegen. Das ist natürlich eine unnötige Einschränkung, wenn Sie noch mehr Musik anbieten wollen. Sofern Ihr Interface dafür Platz bietet, können Sie dem User eine Reihe von Genre-Buttons zur Verfügung stellen, mit denen er unterschiedliche Ordner ansteuert.

Webdesign mit Flash
Der Skip-Clip prüft jede neue Auswahl, bevor der Titel gespielt wird.
© Archiv

Der entscheidende Trigger für den Ordnerwechsel liegt im loader-clip. Hier hatten wir gleich im ersten Frame festgelegt, dass der Ordner als Text festgelegt wird. Diese Festlegung ersetzen wir durch eine Variable. Aus der Formulierung:

mp3 = "musik/"+"track"+_root.zahl+".
mp3";

wird jetzt:

mp3 = eval("_root.ordner")+"track"+_
root.zahl+".mp3";

Damit das Prinzip von Beginn an funktioniert, muss es im ersten Frame der Szene 1 eine Initialisierung geben. Da ein Wechsel des Genres einem Reset gleichkommt, helfen wir uns hier mit einem Trick: Wir schreiben eine einmalige Start-Variable. Ist diese wahr, wird bei Reset der Ordner-Name nicht erneut initialisiert:

if (start==1){
}else{
_root.ordner="pop/"
pop_clip.gotoAndStop(2);
selected="top";
top.gotoAndStop(2);
start=1; }

Wie Sie sehen, wird auch die Startauswahl Top Ten (Zeilen 3 und 4) in diese Initialisierung hineingenommen.

Wir haben hier drei Genre-Buttons eingefügt mit den Instanznamen pop_clip (default), soul_clip und klassik_clip. Sie sind genauso aufgebaut wie die beiden Clips für random und topten. Es sind also Movieclips mit enthaltenen unsichtbaren Buttons und Texten, die die Farbe wechseln, wenn ein Button geklickt wird.

Dieser unsichtbare Button trägt folgende Programmierung:

on (release) {
nextFrame();
_root.ordner="soul/";
_root.pop_clip.gotoAndStop(1);
_root.klassik_clip.gotoAndStop(1);
_root.gotoAndPlay(3);
}

Jeder Button verändert also die Ordner-Variable und stellt außerdem die beiden anderen Buttons wieder in den Originalzustand zurück. Analog werden auch die beiden anderen Clip-Buttons programmiert. Außerdem müssen Sie auch in die Buttons für Top Ten und Random noch den Reset-Befehl einfügen, also am Ende des Button-Skripts einfach _root.gotoAndPlay(3); einfügen.

Der Verweis auf Frame 3 des Hauptfilms löst den Reset aus, denn dort steht nur eine einfache Bildprogrammierung: gotoAndPlay( 1); Achtung: Die Ebene mit den Genre- Buttons und die mit Random bzw. Top Ten müssen in diesem dritten Frame noch vorhanden sein, damit der gewählte Button seine Farbe behält und kein optischer Reset erfolgt.