Posted by admin
2 commentsL’objectif est de réaliser un mini player mp3 sur la base de données provenant d’un fichier XML. Pour réaliser cette animation nous aurons besoins des classes URLLoader, URLRequest et XML pour la lecture du fichier XML.
Définition du fichier XML
Pour stocker les données, nous utiliserons la structure XML. Celui-ci devra contenir les informations sur chaque chanson, un titre, le nom de l’artiste, le nom et l’URL du fichier mp3 et une éventuelle description.
Voici un fichier XML qu’il vous faudra adapter en fonction de vos chansons préférées 
<?xml version="1.0" encoding="ISO-8859-1"?> <playlist> <piste> <titre>Summertime</titre> <artiste>Peter Gabriel</artiste> <fichier>01 Summertime - by Peter Gabriel.mp3</fichier> <description><![CDATA[Excellente interprétation de Peter Gabriel pour ce standard maintes fois repris dans toutes sortes de styles.]]> </description> </piste> <piste> <titre>Nice Work If You Can Get It</titre> <artiste>Sting</artiste> <fichier>02 Nice Work If You Can Get It - by Sting.mp3</fichier> <description><![CDATA[Intéressant de voir ce standard de jazz interprété par Sting! Il s'agit d'un tout autre style de musique que Police...]]> </description> </piste> <piste> <titre>It Ain't Necessarily So</titre> <artiste>Cher</artiste> <fichier>07 It Ain't Necessarily So - by Cher.mp3</fichier> <description><![CDATA[Cher interprète avec merveille ce standard de jazz.]]> </description> </piste> <piste> <titre>The Man I Love</titre> <artiste>Kate Bush</artiste> <fichier>08 The Man I Love - by Kate Bush.mp3</fichier> <description><![CDATA[Kate Bush nous avait jusqu'alors caché ses talents de chanteuse Jazz.]]> </description> </piste> </playlist> </pre>
Le concept de l’animation est simple, il s’agit de lire le fichier XML et d’afficher les données dans un composant DataGrid dans Flash. Lorsque l’on double clique sur une chanson, celle-ci est lue en utilisant les classes Sound et SoundChannel.
Comme pour les autres animations nous commencons par créer une classe dans un fichier script ActionScript, nous appelerons notre classe playerMusic.
Dans le constructeur nous initialisons un composant DataGrid et nous chargeons le fichier XML en mémoire. Nous déclarons également un écouteur qui pointe vers une méthode remplirDataGrid qui sera exécutée lorsque le fichier sera entièrement chargé.
public class playerMusic extends MovieClip {
public var grdList:DataGrid;
public var req:URLRequest = new URLRequest("playlist.xml");
public var loader:URLLoader;
public function playerMusic():void
{
// Initialisation du composant DataGrid
grdList = new DataGrid();
grdList.x = 5;
grdList.y = 1;
grdList.width = 540;
grdList.height = 380;
grdList.rowHeight = 30;
addChild(grdList);
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, remplirDataGrid);
loader.load(req);
}
Lecture du fichier XML
Nous déclarons une variable de type XML, une classe qui nous permettra de parser notre fichier. Nous accédons ensuite aux différentes branche de notre structure XML par leur nom : titre, artiste, fichier, description.
Par la suite, il faut ajouter un événement pour gérer le double clic sur une ligne correspondant à une chanson, celle-ci va appeler une nouvelle méthode playSong. Notez qu’il s’agit d’un écouteur sur l’événement ListEvent.ITEM_DOUBLE_CLICK.
public function remplirDataGrid(e:Event):void
{
var chanson:XML = new XML(e.target.data);
var i:Number;
// Lecture de chaque élément PISTE
for(i=0; i < chanson.piste.length(); i++) {
var objPlayList:Object = {
titre:chanson.piste[i].titre.text(),
artiste:chanson.piste[i].artiste.text(),
fichier:chanson.piste[i].fichier.text(),
description:chanson.piste[i].description.text()
};
grdList.addItem(objPlayList);
}
grdList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, playSong);
}
Lecture du fichier son
Si un fichier est en cours de diffusion, nous le stoppons avant de charger celui qui a été sélectionné.
public function playSong(e:ListEvent):void
{
if (channel) {
channel.stop();
}
var reqSound:URLRequest = new URLRequest(e.item.fichier);
snd = new Sound(reqSound);
channel = snd.play();
}
Code complet de l’animation
Définition du package et des variables
package {
import flash.display.*;
import flash.events.*;
import flash.net.*;
import fl.controls.*;
import fl.events.ListEvent;
import flash.media.*;
import flash.text.*;
public class playerMusic extends MovieClip {
public var grdList:DataGrid;
public var req:URLRequest = new URLRequest("playlist.xml");
public var loader:URLLoader;
public var txtInfo:TextField;
public var snd:Sound;
public var channel:SoundChannel;
Constructeur de la classe
public function playerMusic():void
{
// Initialisation du composant DataGrid
grdList = new DataGrid();
grdList.x = 5;
grdList.y = 1;
grdList.width = 540;
grdList.height = 380;
grdList.rowHeight = 30;
addChild(grdList);
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, remplirDataGrid);
loader.load(req);
// Champ texte pour diffuser certaines informations
txtInfo = new TextField();
txtInfo.x = 5;
txtInfo.y = 390;
txtInfo.width = 500;
txtInfo.height = 20;
addChild(txtInfo);
}
Lecture du fichier XML
public function remplirDataGrid(e:Event):void
{
var chanson:XML = new XML(e.target.data);
var i:Number;
// Lecture de chaque élément PISTE
for(i=0; i < chanson.piste.length(); i++) {
var objPlayList:Object = {
titre:chanson.piste[i].titre.text(),
artiste:chanson.piste[i].artiste.text(),
fichier:chanson.piste[i].fichier.text(),
description:chanson.piste[i].description.text()
};
grdList.addItem(objPlayList);
}
grdList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, playSong);
}
Diffusion du fichier son
public function playSong(e:ListEvent):void
{
if (channel) {
channel.stop();
}
var reqSound:URLRequest = new URLRequest(e.item.fichier);
snd = new Sound(reqSound);
channel = snd.play();
}
}
}
Voici le résultat de l’animation Flash :
Playermusic Screenshot
Que s’est-il passé ?
Dans cette étude cas nous avons appris à lire un document XML en utilisant la classe XML. Nous avons vu que les classes URLRequest et URLLoader sont également nécessaires pour charger n’importe quel document externe. Nous avons utilisé deux nouvelles classes Sound et SoundChannel qui nous permettent de diffuser un fichier son.
Posts Feed