[stuff]mp3 Player Tutorial

[labrar]

Ich weiß war schon oft da. Aber für letztes Projekt muuste ich einen simplen Player bauen und möcht diesem nun Anfänger zur Verfügung stellen.
Falls das der falsche Bereich ist bitte ich die Mods das ganze zu verschieben.

Datei hängt an, aber ihr wollt ja sicher such wissen wie es geht.

Also aufmerken
Der Player in diesem Fall hat folgende Features

• Stop
• Play
• Nächster Titel
• Vorheriger Titel
• Lautstärkeregler

1. Zunächst erstellen wir uns alle Symbole für unsere Buttons die wir brauchen nach eigenen Wünschen und speichern diese als Schaltflächen in der Bibliothek ab.

Ich habe für die Datei dieses Tuts mal die einfachste Variante gewält(Also Pfeil, Doppelpfeil und Quadrat. Eben wie beim Cd Player)

2.
Da wir unseren Player ja immer wieder verwenden wollen, verdient dieser in ein eigenes Symbol konvertiert zu werden.

Also erstellen wir ein neues Symbol mit dem Namen Player(Oder wie ihr das Kind auch immer nennen wollt.)

3. Im Symbol(oder besser Movieclip)Player erstellt ihr nun 2 Ebenen. In der unteren werden vier leere Schlüsselbilder nebeneinander eingefügt, in der oberen lediglich eines. Über Bild einfügen(falls nicht schon von selbst) sollte dieses Schlüsselbild aber ebenfalls über diese vier Schlüsselbilder der unteren reichen.

2. Bevor wir uns der erstellung des Schiebereglers wagen, programmieren wir erst das einladen der mp3 Dateien.
In meinem Beispiel habe ich 6 verschieden Titel verwendet. Ihr könnt auch mehr oder weniger. Aber dazu später.

Wir gehen nun ins letzte(also das vierte)Schlüsselbild der unteren Ebene und fügen folgenden Code ein:

PHP-Code:

stop();
    son=new Sound();        dat=["Titel1","Titel2","Titel3","Titel4","Titel5","Titel6"];
    son.loadSound("audio/"+dat[song]+".mp3",true);
        son.onSoundComplete=function(){
            if(song<=dat.length){
    song+=1;
    gotoAndPlay(3);
    }
if(song>=dat.length)
    {
        gotoAndPlay(2);
        }
        if(song>0){
    
    song-=1;
    gotoAndPlay(3);
    
    }
    if(song==0){
        song=5;
        gotoAndPlay(3);
    }
        } 


Erklärung des Scripts:
stop(); macht nix anderes als den Flashfilm an diesem Schlüsselbild(also 4) anzuhalten.

son=new Sound(); erstellt ein neues Soundobjekt Namens son.Ihr könnts auch anderst nennen. Son war für mich die Abkürzung für Song.

dat=["Titel1","Titel2","Titel3","Titel4","Titel5","Tite l6"]; hier haben wir ein Array namens dat erstellt.Auch dieser Namen ist frei wählbar. In meinem Falle stand er für Datei. Unser Array dat enthält alle Audiofiles die wir abspielen möchten.Titel1 etc müsst ihr natürlich durch die nämen eurer Files ersetzen. !!!! Aber „.mp3“ weglassen.
In diesem Falle liegen die mp3s im Ordner audio welcher im gleichen Ordner wie unser Player liegt.

Alles was zwischen den Gänsefüsen steht wird von Flash als String(oder festes Wort) gewertet. Die Kommas teilen in diesem Falle Flash mit „hier kommt noch einer“.

son.loadSound("audio/"+dat[song]+".mp3",true); Hier teielen wir unserem Soundobjekt “son” mit das es bitte die von uns in dat definierten mp3 laden soll. Und zwar so:
loadSound(lade Sound) gefolgt von Klammern in denen definiert wir von wo geladen werden soll.
Audio(unser Ordner als String./ nicht vergessen) + (bedeutet soviel wie und oder „an String anfügen“)dat[song] (unser datArray.Zu song später aber merken)
+ (wieder ein String) mp3(selbsterklärend) Komma true.

Diese true könntet ihr auch weglassen. Ist aber sinnvoller so da:

Mit true wird der Sound gestreamt. D.h. Flash spielt die Datei ab wenn genügend des Files geladen ist.Was bei langsamen Verbindungen von Vorteil ist. Ohne true lädt Flash erst den ganzen File bevor er abgespielt wird.

son.onSoundComplete=function(){
if(song<=dat.length){
song+=1;
gotoAndPlay(3);
}

Beduetet soviel wie: Wenn der Song komplett abgespielt ist mache folgendes:
Wenn song(dazu später) kleiner gleich dat.length( die Menge der Songs im Array dat)
Dann addiere 1 zu song und spiele ab Schlüsselbild 3. Auch dazu später. Grins.

if(song>=dat.length)
{
gotoAndPlay(2);
}
if(song>0){

song-=1;
gotoAndPlay(3);

}
if(song==0){
song=5;
gotoAndPlay(3);
}
}
Wenn song größer gleich Menge der Songs in dat spiele ab Schlüsselbild 2

Wenn song größer als 0 dann ziehe von song einen ab und spiele ab Schlüsselbild 3.
Wenn song gleich 0 ist, setzte den Wert von song auf 5 und spiele ab Schlüsselbild 3.

Verwirrend nicht wahr?

Aber hier die Erklärung.

Song ist eine Variable die wir später erstellen werden. Auch hier ist es wurscht ob ihr nun ebenfalls das Wort song oder Oma nehmt. Es bot sich mir einfach nur an.
Die Variable song gibt lediglich die jeweilige Titelnummer die unser Player spielt an.
Da in nahezu allen Programmiersprachen 0 als 1 gilt trifft das auch für Flash zu.
Wir haben also in diesem Beispiel sechs Titel. D.h. Flash gibt uns eine Gesamtzahl an Titeln von 5 aus.

0,1,2,3,4,5 . Verständlich????

Um es etwas verständlicher zu machen könnt ihr unter diese Zeilen mal
trace(dat[0]);

eingeben. Wenn Ihr jetzt testet zeigt euch ein kleines Popup den ersten Namen des mp3 an den ihr in dat deklariert habt. Tauscht die Zahl 0 ruhig auch mal gegen 1,2,3,4,5 aus. Wenn ihr 6 eingebt wird die Meldung „undefined“ erscheinen. Denn wir haben nur 6 und nicht 7 Titel.

[labrar]

3. Bevor euch die Variable song noch verunsichert deklarieren wir sie jetzt 

Hierzu geht ihr jetzt eine Ebene hoch(da wo bislang nur ein Schlüsselbild ist und fügt direkt daneben(Bild 2) ein weiteres leeres Schlüsselbild ein das ihr wie folgt programmiert

PHP-Code:

song=0; 


Somit habt ihr den Grundwert von song auf 0(also 1) gestellt. Schließlich soll unser Player ja mit dem ersten Titel anfangen zu spielen.

Wenn Ihr jetzt testet passiert folgendes:

Unser Player spielt die Songs der Reihe nach ab. Aber wir wollen ja auch unsere Buttons die wir als erste erstellt haben zum Einsatz bringen.

4. Also ziehen wir diese nun der Reihe nach auf die Bühne und programmieren sie.
Beginnend mit dem Button der für Play steht.
Also:

PHP-Code:

on(press){
    
        son.start();
        } 


Heißt soviel wie“beim drücken spiel unser soundobjekt son ab.

Im Moment spielt unser Player sowieso schon ab. Trotzdem brauchen wir diesen Button für später als Gegensatz zu unserem Button Stop den wir jetzt programmieren. Und zwar mit:

PHP-Code:

on(press){
    
        son.stop();
        } 


Verständlich??

Jetzt können wir beim testen schon aktiv eingreifen und unseren Player anhalten und wieder abspielen lassen.

Nun die Programmierung für unseren Button „nächster Titel“:

PHP-Code:

on(press){
    if(song<=dat.length){
    
    song+=1;
    gotoAndPlay(3);
    
    }
    if(song>=dat.length)
    {
        gotoAndPlay(2);
        }
    
    
    } 


[labrar]

Erklärung: Beim drücken:

Wenn song kleiner gleich letzter Titel, addiere 1 auf song und spiele ab Schlüsselbild 3.

D.h. wenn nochh wietere Titel folgen gehe zum nächsten.

Wenn song aber größer gleich der Gesamtanzahl von Titeln ist spiele ab Schlüsselbild 2.

D.h. wenn schon der letzte Titel abgespielt wird und wir unwissenden trotzdem auf weiter drücken soll wieder der erste Titel abgespielt werden. Da wir ja in Schlüsselbild 2 bereits den Wert von song auf 0 gestellt hatten, brauchen wir das hier nicht erneut zu tun.


Die Programmierung für den Button vorheriger ist nicht weniger einfach.

PHP-Code:

on(press){
    if(song>0){
    
    song-=1;
    gotoAndPlay(3);
    
    }
    if(song==0){
        song=5;
        gotoAndPlay(3);
    }
} 


Erklärung: Wie bei vorherigem Button(nächster Titel) nur umgedreht.

5. Der schwierigste Teil unseres Tuts. Der Volumeschieberegler.


Als erstes erstellen wir hierfür eine neue Ebene mit nur „einem „ Schlüsselbild das allerdings mit Bild einfügen auf unsere vier verlängert wird.
Die anderen beiden Ebenen sperren wir nun. Da sind wir fertig.

In unserem neuen Schlüsselbild ziehen wir nun eine horizontale Linie(wie lang ist egal) , konvertieren diese mit F8 in einen Movieclip und geben ihr unter Eigenschaften den Instanznamen „vol“ (oder wie ihrs eben nennen wollt)

Nun ziehen wir eine gefüllte Ovale auf(die unseren Mauszieher darstellen wird) konvertieren diese ebenfalls in ein MovieClip und geben ihr den instanznamen „bt“.

Wenn Ihr wollt könnt ihr bt in die Mitte von Vol setzten. Müsst ihr aber nicht da das da folgendes script sowieso macht.

Auf das Schlüsselbild kommt nun folgender Script:

PHP-Code:

verh = (vol._width-1)/100;
left=vol._x-vol._width/2;
right=vol._x+vol._width/2;
qu=vol._y;
qa=vol._y;
mid=vol._x;
bt._x=mid;
bt._y=vol._y;

bt.onPress=function(){
    
    
    
    
    this.startDrag(false,left,qu,right,qa);
}
bt.onRelease=bt.onReleaseOutside=function(){
    this.stopDrag();
}
this.onEnterFrame=function(){
    this.wert = Math.round((bt._x - vol._x)/verh+50);
    if(wert<=0){
        wert=0;
    }
    son.setVolume(wert);
    
    
    
    trace(wert);
    } 


Erklärung:
verh = (vol._width-1)/100; verh (oder wir ihrs nenen wollt) wurde als Variable ins Leben gerufen. Sie trägt den Wert von der Gesamtbreite/länge unserer Vollinie in Pixeln -1 geteilt durch 100.
Verh steht in diesem Fall für Verhältnis zu.

left=vol._x-vol._width/2;

left(ebenfalls Fantasiename wie auch die restlichen vor =) steht für links und wird mit der Pixelnummer unseres Linken Endes der Linie als Wert deklariert.

right=vol._x+vol._width/2; Und das gleiche für das rechte Ende.
qu=vol._y; und qa=vol._y; erhalten jeweils den gleichen Wert. Nämlich die der Breite unserer Linie.
mid=vol._x; mid gleich die Mitte der Linie
bt._x=mid; setzte bt auf mid
bt._y=vol._y; setzte bt auf y aches von linie


bt.onPress=function(){
beim drücken unseres Schiebers bt

this.startDrag(false,left,qu,right,qa);

lass ihn uns folgendermaßen verschieben. Und jetzt kommt es.
In den Klammern hinter startDrag geben wir an in wieweit wir unseren Button verschieben dürfen, und wann nicht mehr. Flash geht immer von einer Flache, bestehend von vier Seiten aus.
false verhindert dabei das unser verschiebebutton bt seine Mitte auf den Mauszeiger zwingt. Was nicht schlimm wäre. Es sei denn unser Button wäre 5 cm groß. Das würde denn Wert schon beeinträchtigen. Dazu aber später.

Nun geben wir in Kommas getrennt Flash an auf welcher Fläche der Button zu verschieben sein darf.
left(bis zum Ende der linken Seite der Linie vol)
qu(nicht weiter nach unten als die Linie dick ist)
right(bis zum Ende der rechten Seite der Linie vol)
qa(nicht weiter nach oben als die Linie dick ist).

Die Reihenfolge ist hier wichtig.
Da unsere Linie in unserem Fall nur einen Pixel dick ist sind die Werte von qu und qa gleich. Also hätte man auch einen davon zweimal nehmen können. Aber es geht hier ja ums lernen und nicht um Faulheit gell 

bt.onRelease=bt.onReleaseOutside=function(){
this.stopDrag();
Wenn wir loslassen oder die Maus den Ziehbaren Bereich verlässt dann stoppe das ziehen.

this.onEnterFrame=function(){

onEnterFrame macht es uns möglich ein einziges Schlüsselbild endlos zu wiederholen. Also mehr oder weniger eine Schleife zu bilden ohne dafür andere Schlüsselbilder einzubeziehen.
Mit anderen Worten: Damit reiten wir auf einem Schlüsselbild rum bis entweder der Arzt kommt oder wir ein delete this.onEnterFrame; setzten. Da wir letzteres aber nicht tun warten wir also auf den Doc.

Scherz beiseite.

this.wert = Math.round((bt._x - vol._x)/verh+50);

this ist als Bezugspunkt oder Pfad zu sehen. Wert ist widerum ein Name den ihr vergeben könnt wie ihr lustig seid. Hier wird nämlich eine Variable namens wert ins leben gerufen die die Zahl von der x Position unseres bts minus der Zahl unserer x Position der vol Linie geteilt durch verh + 50 enthält. Die Zahl 50 müsst ihr gegebenenfalls anpassen. Dazu aber später.

if(wert<=0){
wert=0;
}


Wenn unser wert kleiner gleich 0 ist erzwinge ihn auf genau 0. So verhindern wir das wir in den minus Bereich geraten wo unsere mp3 nämlich wieder hörbar wären.

son.setVolume(wert);

setzte das Volumen(0-100) auf den Wert unserer Variable wert.

trace(wert);

So. Dieses trace ist für das Script belanglos. Es dient nur uns selbst. Erinnert ihr euch an die Zahl 50 die ihr gegebenenfalls anpassen müsst?

Testet den Film und schiebt den Regler hin und her. Links muss 0 rauskommen und rechts 100. Wenn nicht müsst ihr die Zahl entsprechend ändern.

Danach könnt ihr die trace Zeile löschen wenn ihr wollt. Stört aber nicht da der Enduser der eure Seite besucht den trace nicht sieht. Ist nur Flashern vorbehalten hehe.


So. Ich hoffe es war lehrreich, Nicht hauen wegen meinen legastenischen Fähigkeiten.

An die Obere Liga

Für Verbesserungen und Kritiken Dankbar

[Fl!PP]

hallo ich hab mal ne frag zu dem script...kann man es irgendwie modifizieren, dass es am anfang noch nix abspielt... weil im moment ist es ja so, dass der sofort anfängt den ersten titel abzuspielen, ich möchte aber dass er erstmal ruhig^^ ist und erst bei drücken des play buttons anfäng den ersten song abzuspielen

EDIT: ok ich habs selber hinbekommn durch nen kleinen (oder auch großen) umweg...wens interessiert wie ichs geamcht hab, der aknn ja später ma nachfragn..bin jetzt zu faul um das aufzuschriebn

[Dahn]

Hallo labrar,
hab deinen Player nachgebaut deine eklärungen zu den einzelnen schritten fand ich super.

Kannst du mir vielleicht noch sagen ob es mit diesem tut möglich ist den aktuellen songtitel anzeigen zu lassen?

merci bien

[mfeske]

Hallo labrar,
wie müßte man das den umschreiben, um die dateien aus der Bibliothek anzusteuern?
Gruß
Micha