Anzeige
Tutorialbeschreibung

Webplayer in Flash basierend auf einer XML-Datei

Webplayer in Flash basierend auf einer XML-Datei

Da immer wieder Fragen zum Thema Web-Player auf Flash Basis im Forum auftauchen, habe ich mich entschlossen mal ein kleines Tutorial hinsichtlich der Konfiguration eines Web-Players zu schreiben. Das Tutorial basiert auf einer Player-Vorlage der Seite
http://www.Flashkit.com


Also das ganze ist ja eher ne Flashanwendung, die auf XML-Dateien basiert. Ist bei den meisten Webplayern jedenfalls so. Also hab Dir hier mal etwas herausgesucht:
www.flashkit.com/movies/Sound/Players/mp3_play-Peter_Da-11215/index.php

Die XML-Datei schaut denn so aus:
<songs>
 <song title="1. demo 01" artist="demo" path="mp3z/demo1.mp3"/>
 <song title="2. demo 02" artist="demo" path="mp3z/demo2.mp3"/>
 <song title="3. demo 03" artist="demo" path="mp3z/demo3.mp3"/>
</songs>



Dem ZIP-Archiv liegt eine .*fla-Datei bei, mit der Du das Design des Players konfiguieren kannst.

Also eine detailierte Anleitung zum erfolgreichen Erstellen:

1. Lade die ZIP-Datei runter

2. Rechtsklick auf die Zip Datei -> Entpacken nach /mp3_play-Peter_Da-11215

3. In dem Ordner mp3_play-Peter_Da-11215n04a befindet sich ein Ordner namens [color=red]n04a[/color], diesen Ordner schneidest Du aus und fügst in z.B. in eigene Dateien ein. Am einfachsten ist es Du benennst den Ordner in Player um

4. Nun öffnest Du den Ordner Player. In diesem Ordner befindet sich ein Ordner namens mp3z. In diesen Ordner kopierst Du nun die Lieder, die später in deinem Player wiedergegeben werden sollen. Bitte den Ordner mp3z nicht umbenennen, anderenfalls müßtest Du nämlich auch den Pfad in der Playlist ändern, was unnötige Arbeit machen würde.

5. Nun widmen wir uns der XML-Datei:
Ich gehe nun Beispielsweise davon aus, dass sich nun in deinem Ordner eine Datei namens Sample.mp3 befindet, der Artist ist der Einfachheit einfach mal Robbie Williams und der Songtitel ist Rock DJ.
Denn sehe das in der XML-Datei wie folgt aus:

<songs>
 <song title="Rock DJ" artist="Robbie Williams" path="mp3z/Sample.mp3"/>
 <song title="2. demo 02" artist="demo" path="mp3z/demo2.mp3"/>
 <song title="3. demo 03" artist="demo" path="mp3z/demo3.mp3"/>
</songs>


Die darunterliegenden Zeilen füllst Du auf die gleiche Art und Weise aus.
Solltest Du mehr als einen 3 Titel in deinem Player haben wollen (wovon ich doch mal sehr stark ausgehe), erweiterst Du die XML-Datei einfach in dem Du für jeden neuen Song eine Zeilenumbruch machst und folgendes einfügst und ausfüllst:

<song title="1. demo 01" artist="demo" path="mp3z/demo1.mp3"/>


Wichtig: Achte bitte darauf, dass die XML-Datei mit
</songs> in der letzten Zeile endet.
Bitte bennene die XML-Datei auch nicht um, sondern belasse es bei dem Namen songInfo.xml, da Du den Pfad ansonsten auch in der *.fla-Datei editieren müßtest.

So nun sollte deine Playlist soweit eigentlich stehen.

6. Jetzt widmen wir uns dem Design des Players:

Öffne die Datei n04a.fla mit in Flash MX oder dergleichen (je nachdem, welche Version Du verwendest).
Klicke in der Navigationsleisten oben auf Fenster und setze eine Häckchen bei Bibliothek. Damit blendest Du die Bibliothek ein und somit alle Dateien, aus den sich der Player zumsammensetzt.
Graphiken in Flash zu bearbeiten, ist meist recht kompliziert bzw. nahezu unmöglich, da Flash nicht die gleichen Werkzeuge wie z.B. Photoshop beinhaltet. Darum ist der Player leider designmäßig nicht ganz so einfach konfiguierbar. Versuche es einfach, soweit Du kommst. Ansonsten bin ich gerne bereit dazu, Dir Hilfestellung zu geben bzw. das Design für Dich anzupassen.
Solltest Du alleine klarkommen, exportiere den Flash-Film einfach und nenne ihn Player. Speichere die .*fla-Datei unter dem Namen Player.fla.

7. Erstellen der HTML-Datei:
Erstelle ein neues HTML-Dokument z.B. in Dreamweaver oder Editor und füge folgendes ein:

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html;  charset=ISO-8859-1">
<TITLE>n04a</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used in the movie-->
<!-- text used in the movie-->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="472" HEIGHT="260" id="n04a" ALIGN="">
 <PARAM NAME=movie VALUE="n04a.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="n04a.swf" quality=high bgcolor=#FFFFFF  WIDTH="472" HEIGHT="260" NAME="n04a" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</BODY>
</HTML>


Bitte nur folgende Angaben ändern:
- <TITLE>n04a</TITLE>  Ersetze das n04a durch den Titel deiner HTML-Seite, Beispielsweise Player. So wird <TITLE>n04a</TITLE> zu <TITLE>Player</TITLE>

- id="n04a"] wird bei dem Datei-Namen Player.swf zu id="Player"

- ALIGN="">Mit ALIGN bestimmst Du die Ausrichtung deines Players:
   -ALIGN="center"> Der Player wird zentriert in der HTML-Seite dargstellt
   -ALIGN="left"> Der Player wird linksbündig in deiner HTML Seite dargstellt
   -ALIGN="right"> Der Player wird rechtsbündig in deiner HTML-Seite dargstellt

<PARAM NAME=movie VALUE="n04a.swf"> wird bei dem Datei-Namen Player.swf zu <PARAM NAME=movie VALUE="Player.swf">

- <PARAM NAME=bgcolor VALUE=#FFFFFF> In dieser Zeile änder Du die Hintergrundfarbe der Seite. Ersetze #FFFFFF durch den entsprechenden Hexadezimalcode deiner Wunschfarbe. Hier mal ein Link zur Übersicht der Hexadezimalfarben:http://www.uni-protokolle.de/Lexikon/Web-Farben.html
Bitte vergesse beim Abändern nichts das # vor dem Hexadezimalcode.

- <EMBED src="n04a.swf" quality=high bgcolor=#FFFFFF  WIDTH="472" HEIGHT="260" NAME="n04a" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
wird bei dem Datei-Namen Player.swf zu <EMBED src="Player.swf" quality=high bgcolor=#FFFFFF  WIDTH="472" HEIGHT="260" NAME="Player" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>


Außerdem ändere in dieser Zeile auch noch Hintergrundfarbe sowie auch Ausrichtung, falls Du es oben getan hast (Wenn ja, gleich Daten wie oben einfügen)

Nach dem Du die Änderungen in der HTML-Datei vorgenommen hast, speichere diese nun unter Player.html bzw. unter Player.htm

8. So nun kommen wir zum entscheidenen Teil der Prozedur - Dem Publizieren unseres ganzen Gebildes:
Öffne dein FTP-Programm, verbinde mit deinem Server.
Lade den kompletten Ordner Player (inklusive Unterordner) auf deinen Server.
Der Player müsste nun wie folg erreichbar sein: http://namedeinesservers.de/Player/Player.html oder unter http://namedeinesservers.de/Player/Player.htm

namedeinesservers.de muss durch deinen Webspaceanbieter ersetzt werden, /Player/ gibt das Verzeichnis an und Player.html bzw. Player.htm gibt die Zieldatei an.

So nun sollte das ganze eigentlich funktionieren. Hoffe mein kleines Tutorial hat Dir weitergeholfen.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von wkoac
  • 01.10.2010 - 09:03

Sehr ausführlich erklärt.
Versuche gleich mal das auf meiner Seite anzuwenden.
Danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.10.2008 - 13:43

Sehr interessant, gleich mal ausprobieren. (:
Auf dem ersten Blick sieht das schon sehr vielversprechend an.

Portrait von KidKillOr1994
  • 13.08.2008 - 12:05

Vielen Dank habe so was schon lange gesucht

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.06.2008 - 21:35

endlich ein Lösung auf meine lang ersehnte frage

Portrait von golmatix
  • 24.05.2008 - 18:17

danke dir für die tipps hat mir sehr geholfen :)

Portrait von kleinerMaler
  • 08.02.2008 - 23:00

Interessante Sache. Muss es gleichmal ausprobieren, ob ich es irgendwo mit verwenden kann.

Portrait von r0dSiMpLy
  • 24.07.2007 - 18:46

alles gut und recht, nur dieser player ist nicht gerade anpassungsfähig in die eigne page. ist bissl schaade, aber das kann man nicht ändern. :)

aber sonst find ich's sehr gut erklährt etc.


mfg SiMpLy

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.06.2007 - 12:48

Richtig geil!!

Aber wie kann ich damit jetzt einen Radio Stream laufen lassen?

live.m3u



geht nicht, und auch wenn ich statt:

path="mp3z/live.m3u"

den direkt Pfad vom Server angebe, passiert nichts...

Portrait von Chaosherz
  • 20.04.2007 - 17:37

Einfach klasse. Hab auch grossen schritt gemacht

Portrait von zerocool327
  • 31.12.2007 - 11:09

benutz mal eine *.pls damit sollte es im normalfall laufen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.02.2007 - 07:19

Danach habe ich schon lange gesucht! Dankeschön!

Portrait von stef0511
  • 25.10.2006 - 15:01

Du hast mir sehr weitergeholfen!!

WEITER SO!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.10.2006 - 09:55

mir hat das tut auch sehr geholfen thx dafür ;)

Portrait von drcheez
  • 01.09.2006 - 22:25

hört sich nicht schlecht an werd ich mal ausprobieren

Portrait von coramos
  • 27.07.2006 - 17:41

Das muss ich mir auch mal genauer ansehen! Danke für das Tut!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.06.2006 - 12:24

Danke sehr gut beschrieben
thx
mfg
CaseofModder

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.04.2006 - 20:13

Mir hat dieses Tutorial sehr geholfen! Klasse Tutorial!

x
×
×