Flash MP3-Spieler

~ Alle Anleitungen ~

Diese Anleitung zeigt, wie externe MP3-Datei in eine Flash-Animation übergeben wird und wie das Abspielen kontrolliert wird. Alles mit Selteco Flash Designer.

Laden Sie fertige Projektdatei: t1061.zip
Quellcode aus dieser Beispieldatei können Sie unbehindert in Ihren Projekten nutzen.

Um den Quellcode anzusehen, wähen Sie "Frame" > "ActionScript".
Falls Sie eine andere Musikdatei anwenden möchten, müssen Sie den Dateipfad im ActionScript Quellcode ändern.

Das ist eine Anleitung für Fortgeschrittene.

Schalten Sie Alligator Flash Designer ein und stellen Sie die Framegröße auf 400 x 64 und die Framedauer auf "Stop" ein.
Zeichnen Sie ein Rechteck und füllen Sie es mit einem vertikalen Farbverlauf.
Erstellen Sie zwei runde, mit einem Farbverlauf gefüllte Buttons. Einer 39x39 Pixel groß und der zweite 35x35 Pixel.

Passen Sie den beiden Buttons einander an. Richten Sie sie aus und 3-Mal duplizieren.
Zeichnen Sie alle Bedienelementsymbole mit dem "Linie oder Form" Werkzeug und füllen sie mit unterschiedlichen Farbverläufen. Sie können auch "Einfügen" > "Navigation" wählen und dort alle Zeichen finden
Verschieben Sie die Bedienelemente auf im Punkt 3 erstellen Buttons. Gruppieren Sie alle drei Teile (zwei runden Buttons und ein Symbol), die zu einer Spieler-Taste gehören.
Zeichen Sie ein Display : ein schwarzes Rechteck mit grauem, 3 Pixel großem Umriss.
Fügen Sie 2 Eingabefelder ein. Beide Felder müssen benannt werden - z.B. "playedtime" und "totaltime" (diese Namen werden im ActionScript als Variablennamen behandelt). Wenden Sie weiße Schriftfarbe an.
Zeichen Sie ein Fortschrittsbalken - ein 110x10 Pixel großes Rechteck, ohne Umriss, mit grünem, vertikal orientiertem Farbverlauf.
Wandeln Sie den Fortschrittsbalken in Sprite um und benennen Sie es "sndbar". In Objekteigenschaften markieren Sie "als Ziel für Programmskripte".
Fügen Sie ein "/" Zeichen zwischen "playedtime" und "totaltime"
Erstellen Sie die Lautstärkeregelung. Fügen Sie zwei Dreiecke ("Einfügen" > "Navigation"), von dem ein nach oben und ein nach unten zeigt. Passen Sie ihre Größe an. Als Hintergrund für Lautstärkeregelung können Sie ein Rechteck einfügen mit beliebiger Füllung.

ActionScritp Code für ersten Frame:

mySnd = new Sound(); // Erstellen eines neuen Sound-Objekts
sndbar._visible = false; // Progess-Bar zunächst verstecken


 // onLoad - wird ausgeführt nachdem die Sound-Datei komplett heruntergeladen ist
mySnd.onLoad = function(){
 // Spielzeit in Sekunden anstatt in Prozenten anzeigen 
 totalseconds = Math.floor(mySnd.duration/1000);
 totaltime=Math.floor(totalseconds/60) + ":" + totalseconds%60;
 // Fortschrittsbalken anzeigen
 sndbar._visible = true;

}

// Falls Sie Ihr eigener Sound nutzen möchten, laden Sie die Datei auf Ihre Seite
// und ändern den Pfad unten:
mySnd.loadSound("http://www.flashdesignerzone.com/tutorials/sound.mp3",true);



volume = 100;
pause=0;


function f1()
{
 // Prozent geladen
 buffered=Math.floor((mySnd.getBytesLoaded()/mySnd.getBytesTotal())*100);

 // Progress im Display anzeigen
 if(buffered<100) { totaltime=buffered; totaltime = totaltime+"%"; }

 // Größe der Progress-Bar aktualisieren 
 sndbar._xscale=(mySnd.position/mySnd.duration)*100;

 // Zeige wieviele Sekunden schon abgespielt sind. 
 playedseconds=Math.floor(mySnd.position/1000);
 playedtime=Math.floor(playedseconds/60) + ":" + playedseconds%60;

 // Falls gestoppt - Fortschrittsbalken verstecken.
 if(action=="stop"){ sndbar._xscale=0; }

 if(pause==1){
  pausepos=mySnd.position;
  mySnd.stop();
 }

}

setInterval(f1,100); // f1-Funktion jede 0.1 Sekunde ausführen

ActionScript Code für "Bei Mausklick" Aktion der Play-Taste:
```
mySnd.start(0,100);
pause=0;
action="play";
```
ActionScript Code für "Bei Mausklick" Aktion der Stop-Taste:
```
mySnd.stop();
action="stop";
```

ActionScript Code für "Bei Mausklick" Aktion der Pause-Taste:

if(pause==1){
 pause=0;
  mySnd.start(pausepos/1000);
} else {
 pause=1;
}

Mit F9 Schalten Sie die Vorschau ein.

Flash MP3-Spieler

Möchten Sie diese Anleitung kommentieren?