• 0) Présentation rapide des bases de Flash
  • I) Création d’un nouveau projet (pour les débutant)
    • a) Création du projet
    • b) Importation du design Photoshop
  • II) Avant d’attaquer le codage
    • a) Présentation des MovieClip
    • b) Organisons-nous
  • III) Partie Codage =)
    • a) Un Pré-Chargement
    • b) Les boutons (normal / top / cliqué)
    • c) Réglage du volume
  • IV) Des modifs pour un lecteur MP3!

Ce que nous allons créer:

Version Webradio: [kml_flashembed movie="http://webiswell.fr/contents/tuto/webradio.swf" height="145" width="465" /]
Version Lecteur MP3: [kml_flashembed movie="http://webiswell.fr/contents/tuto/lecteur_mp3.swf" height="145" width="465" /]

  • 0) Présentation rapide des bases de Flash

Si c’est la toute première fois que vous utilisez Flash, veuillez télécharger la petite vidéo de présentation que j’ai réalisée:

flash cs4 tuto

  • I) Création d’un nouveau projet (pour les débutant)

    • a) Création du projet

Premièrement, téléchargez la version PSD (design photoshop) de la radio.

Après avoir téléchargé et installé Adobe Flash CS4, nous allons créer un nouveau projet. Faites Fichier > Nouveau > Fichier Flash avec ActionScript 3.
Vous devez ensuite définir les dimensions de votre fichier Flash ainsi que sa vitesse de lecture. A droite, mettez une taille légèrement supérieure à votre fichier .PSD (+10px en largeur et en longueur). Et mettez 20fps environ. Pas la peine de mettre plus!

1

attention

Vous pourrez à tout moment changer les dimensions et la vitesse de lecture du document flash. Pour cela cliquez sur l’arrière de la scène, allez dans Propriétés à droite (si ce n’est pas affiché: Fenêtres > Propriétés (ou CTRL + F3) )

    • b) Importation du design Photoshop

Après avoir fini le design de votre lecteur Webradio sous Photoshop, il faudra l’importer sous Adobe Flash Cs4.
Pour cela faites Fichier > Importer > Importer sur la scène et importez le fichier PSD de votre design.Sélectionnez les images du design (et pas les textes), puis Cochez « Image bitmap avec style de calque modifiables », et mettez une compression sans perte.

2

Vous aurez alors plusieurs calques disposés sur la keyframe n°1 (image-clé n°1) de la timeline.

Effacez alors sur la scène: tous les éléments dynamiques, c’est à dire les boutons, le curseur, et le fond rouge (que l’on animera par la suite). Vous obtenez alors quelque chose de semblable à ça:

3

attention

Si par un quelconque hasard vous voudriez changer l’image d’un calque en particulier, allez dans la bibliothèque (ou librairie) sur la gauche (Fenêtre > Bibliothèque). Dans la Biliothèque, allez dans le dossier de votre psd, puis dans le dossier « Elements », faites un clic droit sur l’élément à changer en question, « Propriétés », et « Mise à jour », puis choisissez l’image à remplacer.

  • II) Avant d’attaquer le codage

    • a) Présentation des MovieClip

Nous allons directement passer au codage, puis nous passerons aux quelques animations visuelles, pour rendre votre player plus « design ».

Pour ceux qui utilisent pour LA PREMIERE FOIS le logiciel Flash d’Adobe, veuillez regarder la vidéo qui montre les principales fonctions, et présente les symboles: Movie Clip, Boutons, et Graphique.

attention

Les Movie Clip ne sont ni des films, ni des clips musicaux…

^^

Pour résumer tout ça, un symbole peut avoir plusieurs « Instance Names » ou « Occurences », mais pas la contraire! Les occurences sont UNIQUES.

4

C’est très important pour les fonctions d’ActionScript. D’ailleurs en ActionScript 2, il était possible d’assigner du code directement sur les Boutons ou Movie Clip. En AS3, ce n’est hélas plus possible, et nous devons obligatoirement utiliser des fonctions pour chaque évènement.

Dans ce tutoriel, nous n’utiliserons que des Movie Clip, car ils peuvent être à la fois des boutons et des graphiques.

  • b) Organisons-nous

Commençons à nous organiser.

Sélectionnez tous les calques qui restent (directement via la scène), puis faites Clic Droit > Convertir en Symbole > Cochez Movie Clip et appelez le « Fond ». Tous les calques sont ainsi empacketés dans le Movie Clip. Lorsque vous double-cliquez sur le Movie Clip, vous verrez tous les calques du fond du player.

5

Et pour éviter de quelconques erreurs, vous pouvez aussi effacer tous les calques de la Timeline. (Un carré représente une « frame » ou une « image » pour les frenchies. Si vous connaissez After Effects, c’est exactement le même principe, nous avons des KeyFrames ou Images-clées. Une image-clée est représentée par un rond noir rempli. Un rond blanc signifie qu’il n’y a aucun élément sur cette image.
Cette notion est très importante pour pouvoir continuer, je ne vais pas m’étaler dessus…

Effacez donc tous les calques VIDES de la timeline, c’est à dire les calques avec un rond blanc dans l’image. Voilà le résultat:

6

  • III) Partie Codage =)

    • a) Un Pré-Chargement

Afin d’éviter un gros « Blanc » lors du téléchargement du fichier flash dans un navigateur pendant quelques secondes, il est important de faire une chargement personnalisé, avec une barre qui défile et un pourcentage représentant l’avancement du téléchargement.

attention

Le fichier SWF final sera d’environ 80ko à 120ko, si un ordinateur possède une mauvaise connexion, le fichier SWF restera tout blanc jusqu’à ce qu’il soit téléchargé entièrement. Nous allons donc créer un chargement personnalisé.

Voilà comment nous allons procéder:
- Nous allons mettre le module de chargement en position 1 sur la timeline. Lorsque le fichier sera entièrement chargé, la « tête de lecture » passera directement en position 2.
- Nous mettrons donc tout notre player en position 2.

Mais tout ceci n’est pas automatique, il faut le coder! =)

Sélectionnez l’image clée n°1, puis faites un Glisser/Déposer sur l’image clée n°2.
Vous n’avez plus rien en position 1, c’est une image-clée vide. Le Movie Clip « Fond » créé précédemment est alors en position 2.

7

Re-Sélectionnez l’image-vide n°1, et créez un Texte (l’outil « T » dans la colonne de droite for the noobs ^^) n’importe où sur la scène.
Dans les Propriétés, choisissez Texte Dynamique, et juste au dessus mettez lui une occurence « chargement ». Ce texte nous affichera le pourcentage de téléchargement.

8

Créez maintenant un rectangle sur la scène ayant la forme d’une barre de chargement (outil Rectangle sur la gauche), allez dans Propriétés en bas et changez les couleurs à votre envie.
Sélectionnez le rectangle (et pas le texte), Clic-Droit > Convertir en Movie Clip. Mettez lui une occurence « chargement_barre », et j’INSISTE bien sur l’occurence et non pas le nom du Movie Clip !!!

Re-re-sélectionnez l’image-clé n°1, puis appuyez sur F9 pour afficher la fenêtre des Actions. C’est ici que nous mettrons le code du chargement, en ActionScript 3. Voilà le code que vous pouvez Copier/Coller:

// On arrête la tête de lecture en position n°1 de la timeline

stop();

// On définit la fonction "chargement_progress". Grâce à ProgressEvent, la fonction fera une boucle tant que des packets d'octets seront reçus.

function chargement_progress(event:ProgressEvent):void {

// On définit la variable "pourcentage" en tant que Nombre Entier (int), bytesLoaded représente le nombre d'octets reçus, bytesTotal le nombre total d'octets

var pourcentage:int = Math.round(event.bytesLoaded / event.bytesTotal * 100);

// On affiche le pourcentage dans le texte dynamique ayant l'occurence "chargement"
chargement.text = pourcentage + "%";

// La barre de chargement est redimensionnée en fonction du ratio octets-reçus / nb-d'octets-total
chargement_barre.scaleX = event.bytesLoaded / event.bytesTotal;

}

// On définit la fonction chargement_termine
function chargement_termine(event:Event):void {
loaderInfo.removeEventListener(ProgressEvent.PROGRESS, chargement_progress);
loaderInfo.removeEventListener(Event.COMPLETE, chargement_termine);

// gotoAndStop comme son nom l'indique, déplace la tête de lecture en position n°2 puis s'arrête.

gotoAndStop(2);

}

// On exécute les fonctions définies

loaderInfo.addEventListener(ProgressEvent.PROGRESS, chargement_progress);
loaderInfo.addEventListener(Event.COMPLETE, chargement_termine);

Pour vérifier si ça marche, rien de plus simple: faites Ctrl + Entrée pour compiler le document, faites Affichage > Simuler un téléchargement (ou encore Ctrl + Entrée). WOAAW trop bien =)

9

A vous d’améliorer le design de votre chargement, avec les couleurs que vous désirez, etc…

On a donc un petit « a » sur l’image-clé n°1, ça veut dire qu’elle comporte des Actions.
Passons maintenant aux choses un peu plus sérieuses !! Les boutons !!

    • b) Les boutons (normal / top / cliqué)

Les boutons ont 4 états: bouton normal, bouton « top » lorsque la souris passe dessus, bouton appuyé (pendant le clic) et bouton cliqué après le clic. Nous allons considérer que bouton appuyé = bouton cliqué. Nous avons donc 3 états de boutons, et pour chaqu’un d’eux on va utiliser une fonction.

Sélectionnez l’image-clé n°2 et double-cliquez sur le Movie Clip « Fond » créé précédemment. Afin que l’on puisse animer notre player plus tard, sélectionnez tout puis re-convertissez en Movie Clip (appelez le « Fond_2″).
On a donc le Movie Clip « Fond_2″ intégré dans le Movie Clip « Fond ».

Placez vous dans le Movie Clip « Fond_2″. Allez dans la Bibliothèque à droite, et glissez/déposez sur la scène l’élément bouton play normal (ALLEZ DANS LE DOSSIER Element de la bibliothèque).
Et tout de suite, donnez lui l’occurence « play1″, notez bien le « 1″.
Double-cliquez sur le Movie Clip « bouton play », et insérez une image-clé vide. (Clic droit > Insérer une image clé vide).

Cliquez sur « Pelure d’Onion », ou Onion Skin (regardez le screenshot ci-dessous). Placez-vous en position 2, vous verrez donc un bouton translucide, qui représente l’image-clé n°1.

10

Insérez le bouton « top » sur la scène, depuis la bibliothèque, et ajustez le pour que ça coïncide avec l’image précédente (oui c’est fastidieux…).
Puis ré-insérez une image-clé vide, puis faites de même avec le bouton « cliqué ».

attention

Attention : Il faut sélectionner l’image-clé n°1 du Movie Clip play1, puis ajouter l’action stop(); en appuyant sur F9. Cela évitera que le bouton loop sur lui même.

Il ne vous reste plus qu’à nommer ces 3 images-clés. Pour cela, cliquez sur les images-clés et attribuez leur (dans Propriétés > Etiquette) les noms suivants: normal, top, clique.
Passons au bouton Stop. Placez-vous dans le Movie Clip Fond_2 et créez un nouveau calque dans la Timeline. Placez le bouton stop normal dans ce calque (occurence: « stop1″) de façon à ce qu’il soit au dessus du bouton Play. N’oubliez pas de mettre son occurence, et faite la même chose que pour le bouton Play. Mettez les mêmes noms aux images-clés (normal, top, clique).

Passons maintenant à la partie codage.
Remettez vous dans le Movie Clip « Fond_2″, et créez un nouveau calque où l’on placera le code, cliquez sur la première image-clé, appuyez sur F9, et copiez-collez le code ci-dessous:

// Code C1

stop();

// On importe les packages nécessaires

import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundLoaderContext;
import flash.net.URLRequest;

this.play1.buttonMode=true;
this.stop1.buttonMode=true;

// Lorsque le curseur est en dehors du bouton
this.play1.addEventListener(MouseEvent.MOUSE_OUT, playMouseOut);
// Lorsque le curseur est sur le bouton
this.play1.addEventListener(MouseEvent.MOUSE_OVER, playMouseOver);
// Lorsque le curseur appuie sur le bouton
this.play1.addEventListener(MouseEvent.MOUSE_DOWN, playMouseDown);

this.stop1.addEventListener(MouseEvent.MOUSE_OUT, stopMouseOut);

this.stop1.addEventListener(MouseEvent.MOUSE_OVER, stopMouseOver);
this.stop1.addEventListener(MouseEvent.MOUSE_DOWN, stopMouseDown);

// Et maintenant, les fonctions.

function playMouseOver(event:MouseEvent):void {
this.play1.gotoAndStop("top");
}
function playMouseOut(event:MouseEvent):void {
this.play1.gotoAndStop("normal");
}
function playMouseDown(event:MouseEvent):void {
this.play1.gotoAndStop("clique");
}

function stopMouseOver(event:MouseEvent):void {
this.stop1.gotoAndStop("top");
}
function stopMouseOut(event:MouseEvent):void {
this.stop1.gotoAndStop("normal");
}
function stopMouseDown(event:MouseEvent):void {
this.stop1.gotoAndStop("clique");
}

Maintenant on attaque les choses vraiment sérieuse: le son! Vous pourrez ainsi écouter Chimène Badi via votre navigateur, c’est pas beau tout ça??

On a donc deux solutions pour loader le son:
1- Soit le son est chargé dès le chargement du Flash, puis il est joué quand on clique sur Play. (On utilisera ça pour le Lecteur MP3)
2- Soit le son est chargé et joué quand on clique sur Play. (Pour la Webradio)

De toute évidence, j’ai réalisé plusieurs tests, et pour le streaming d’un flux continu, il est préférable d’opter pour l’option 2. Après, tout dépend de vos envies…

Lorsque l’on cliquera sur Play, celui-ci disparaîtra, laissant place au bouton Stop.

Résumons donc en quelques mots. Quand on cliquera sur Play:
- La musique se charge
- La musique se joue après que le buffer soit « rempli »
- Le bouton Play disparaît, pour laisser place au bouton Stop

Ah oui mais c’est quoi le Buffer, c’est important ce truc??
Très important. C’est grâce à lui que la radio ne « laguera » pas. Il existe déjà un buffer intégré à la fonction load(); le problème c’est qu’il ne dure que 1000 millisecondes. Pour une webradio, il est préférable d’augmenter cette valeur à 6000 ou 7000. mis 6500, et ça marche très bien! Mais tout dépend de votre serveur et de votre bande-passante.
C’est grâce à SoundLoaderContext(); que nous allons augmenter le temps de Buffer (BufferTime).

Avant de coder, il faut savoir d’où viennent les éventuelles erreurs. Créez donc un Texte Dynamique sur la scène, et mettez lui une occurence « infos ».

Trêve de plaisanteries. Voilà le code, que vous pouvez mettre à la suite du code C2.


var bouton_play_alpha:Number;
// Le son n'est pas encore joué, la variable "played" contient 0
var played:Number = 0;
var son:Sound = new Sound();

// La radio Fréquence Jazz, pour tester
var stream:URLRequest = new URLRequest("http://broadcast.infomaniak.net/frequencejazz-high.mp3");

// 6,5 secondes de Buffer.
var bufferTime:int = 6500;

// ATTENTION IMPORTANT! Si le son est situé sur le même serveur que le fichier Flash, mettez False, dans la plupart des cas on met true. ATTENTION, il faut alors créer un fichier crossdomain.xml (voir en-dessous de ce code).
var context:SoundLoaderContext = new SoundLoaderContext(bufferTime, true);
var canal:SoundChannel = new SoundChannel(); // Objet indispensable pour le canal son
var soundVol:SoundTransform = new SoundTransform();

// Pour être sûr de ne pas voir le bouton Stop à l'arrière, on lui applique la valeur alpha = 0, il devient invisible.
stop1.alpha = 0;

this.play1.addEventListener(MouseEvent.CLICK, clickPlay);

function clickPlay(event:MouseEvent):void {

if (played == 0) { // Si le son n'est pas encore joué.

// S'il y a un problème de chargement, on exécute la fct erreur_lecture.
son.addEventListener(IOErrorEvent.IO_ERROR, erreur_lecture);

// Pendant le chargement, on affichera un pourcentage.
son.addEventListener(ProgressEvent.PROGRESS, chargement);

// On load le son
son.load(stream,context);

// On joue le son...
canal = son.play();

// Le son est joué, la variable "played" prend la valeur 1, vous verrez pourquoi après
played = 1;

// On affiche le bouton Stop
stop1.alpha = 1;

// On change la largeur du bouton Play à 0, il est donc... inexistant.
play1.width = 0;

}

else {

// Si le son n'est pas joué avant d'avoir appuyé sur Play, c'est qu'il y a une erreur donc on l'affiche dans le texte dynamique "infos"
infos.text = "Erreur.";

}
}

function erreur_lecture(event:Event):void {

// Si le flux n'est pas accessible
infos.text = "Radio Eteinte";

}

// Pour les webradios =>
function chargement(event:ProgressEvent):void {

// J'ai mis 120000 octets, c'est à peu près ce qu'on doit charger pour 6,5 secondes de Buffer (trouvé un peu au pif... donc si quelqu'un connait une fonction plus précise en tenant compte du BufferTime je suis preneur ^^)
var pourcent:Number = Math.round(event.bytesLoaded / 120000 * 100);

if (pourcent < 100) {

// On affiche le pourcentage de chargement dans le texte dynamique "infos"
infos.text = pourcent + "%";

}

else if (pourcent > 100) {

infos.text = "Live!";
// on supprime l'évènement de chargement.
son.removeEventListener(ProgressEvent.PROGRESS, chargement);

}

} // <= Pour les Webradios
attention

Comme spécifié dans le code ci-dessus (pour ceux qui l’ont lu…), il faut créer un fichier , que vous placerez à la racine du FTP de votre serveur (celui qui ENVOIE le flux audio), je précise bien car on a vite fait de se tromper ^^ . Si vous ne le faites pas, le flux restera bloqué à 4%… Voilà son contenu:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy>
<cross-domain-policy>
<allow-access-from domain="*" secure="true" />
</cross-domain-policy>

De plus, il faudra rajouter quelques lignes dans le code Embed pour l’afficher dans une page HTML. Regardez en bas de page !!

Voilà, contrôlez votre flash: appuyez sur Ctrl + Entrée. Cliquez sur Play…… Suspense…. WAOUUW TROP FORT DU JAZZZZZ !!
Mais il reste encore plein de choses à faire: la barre de volume, les actions du bouton Stop (quand même…); et pour les lecteurs MP3 (only), rajoutez: les titres de musiques (tags ID3), et la barre d’avancement. iOuff…

Passons au bouton Stop. Il existe deux cas pour le bouton Stop:
- Pour le lecteur MP3, le bouton Stop servira de bouton pause: la lecture s’arrête, le chargement continue.
- Pour la webradio, on arrête tout, le chargement aussi. (ça évite de bouffer la bande passante du serveur)

Of course, voici le code, à mettre après les codes C1 et C2.


this.stop1.addEventListener(MouseEvent.CLICK, clickStop);

function clickStop(event:MouseEvent):void {
if (played == 1) { // si le son est joué

// on rétablit la taille du bouton Play pour le faire réapparaître
play1.width = 65;
infos.text = "Stop !";

}
}

Alors? Le bouton stop fonctionne bien? Il n’arrête pas la musique, mais il bascule sur Play quand on clique dessus, c’est déjà ça.

    • c) Réglage du volume

On continue avec le réglage du volume.

Remettez vous dans le Movie Clip « Fond_2″ là où le fond et les boutons se trouvent. Créez un rectangle très fin là où le curseur de volume se déplacera. Sélectionnez-le, et convertissez-le en Movie Clip. Mettez lui une occurence « reg_volume ».
Double cliquez sur ce Movie Clip, puis placez le petit curseur en mode normal sous forme de Movie Clip avec une occurence « curseur », que vous aurez préalablement transformé en bouton (voir le chapitre sur les boutons). Vous avez donc un Movie Clip « curseur » avec 2 frames (normal, top) dans un Movie Clip d’occurence « reg_volume ». (Pour ceux qui sont perdus allez voir le fichier source .fla en bas de page).

Appliquons le code, celui-ci regroupe les codes C1, C2 et C3 avec quelques modifications!


stop();
// On importe les packages nécessaires

import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundLoaderContext;
import flash.net.URLRequest;

this.play1.buttonMode=true;
this.stop1.buttonMode=true;
// Lorsque le curseur est en dehors du bouton
this.play1.addEventListener(MouseEvent.MOUSE_OUT, playMouseOut);
// Lorsque le curseur est sur le bouton
this.play1.addEventListener(MouseEvent.MOUSE_OVER, playMouseOver);
// Lorsque le curseur appuie sur le bouton
this.play1.addEventListener(MouseEvent.MOUSE_DOWN, playMouseDown);

this.stop1.addEventListener(MouseEvent.MOUSE_OUT, stopMouseOut);
this.stop1.addEventListener(MouseEvent.MOUSE_OVER, stopMouseOver);
this.stop1.addEventListener(MouseEvent.MOUSE_DOWN, stopMouseDown);

// Et maintenant, les fonctions.

function playMouseOver(event:MouseEvent):void {
this.play1.gotoAndStop("top");
}
function playMouseOut(event:MouseEvent):void {
this.play1.gotoAndStop("normal");
}
function playMouseDown(event:MouseEvent):void {
this.play1.gotoAndStop("clique");
}

function stopMouseOver(event:MouseEvent):void {
this.stop1.gotoAndStop("top");
}
function stopMouseOut(event:MouseEvent):void {
this.stop1.gotoAndStop("normal");
}
function stopMouseDown(event:MouseEvent):void {
this.stop1.gotoAndStop("clique");
}

var bouton_play_alpha:Number;
// Le son n'est pas encore joué, la variable "played" contient 0
var played:Number = 0;
var son:Sound = new Sound();
var stream:URLRequest = new URLRequest("http://broadcast.infomaniak.net/frequencejazz-high.mp3");
// 6,5 secondes de Buffer.
var bufferTime:int = 6500;

// ATTENTION IMPORTANT! Si le son est situé sur le même serveur que le fichier Flash, mettez False, dans la plupart des cas on met true. ATTENTION, il faut alors créer un fichier crossdomain.xml (voir en-dessous de ce code).
var context:SoundLoaderContext = new SoundLoaderContext(bufferTime, true);

var canal:SoundChannel = new SoundChannel();
var soundVol:SoundTransform = new SoundTransform();
// Pour être sûr de ne pas voir le bouton Stop à l'arrière, on lui applique la valeur alpha = 0, il devient invisible.
stop1.alpha = 0;
this.play1.addEventListener(MouseEvent.CLICK, clickPlay);

function clickPlay(event:MouseEvent):void {
if (played == 0) { // Si le son n'est pas encore joué.

// S'il y a un problème de chargement, on exécute la fct erreur_lecture.
son.addEventListener(IOErrorEvent.IO_ERROR, erreur_lecture);
// Pendant le chargement, on affichera un pourcentage.
son.addEventListener(ProgressEvent.PROGRESS, chargement);

// On load le son
son.load(stream,context);

// On joue le son...
canal = son.play();

// Le son est joué, la variable "played" prend la valeur 1, vous verrez pourquoi après.
played = 1;

// On affiche le bouton Stop
stop1.alpha = 1;
// On change la largeur du bouton Play à 0, il est donc... inexistant.
play1.width = 0;
// on met le curseur de volume au maximum
reg_volume.curseur.x = widthPos;
}
else if (played == 0.5) { // si le son a déjà été joué, mais qu'il est arrêté

// il est rejoué, on le notifie dans la variable "played"
played = 1;
addEventListener(Event.ENTER_FRAME,regVolume);
stop1.alpha = 1;
play1.width = 0;
infos.text = "Live !";
}
else {

// Si le son n'est pas joué avant d'avoir appuyé sur Play, c'est qu'il y a une erreur donc on l'affiche dans le texte dynamique "infos"
infos.text = "Erreur.";

}
}

function erreur_lecture(event:Event):void {
// Si le flux n'est pas accessible
infos.text = "Radio Eteinte";
}

// Pour les webradios ==>
function chargement(event:ProgressEvent):void {

// J'ai mis 120000 octets, c'est à peu près ce qu'on doit charger pour 6,5 secondes de Buffer (trouvé un peu au pif... donc si quelqu'un connait une fonction plus précise en tenant compte du BufferTime je suis preneur ^^)
var pourcent:Number = Math.round(event.bytesLoaded / 120000 * 100);

if (pourcent < 100) {
// On affiche le pourcentage de chargement dans le texte dynamique "infos"
infos.text = pourcent + "%";
}

else if (pourcent > 100) {
infos.text = "Live!";
// on supprime l'évènement de chargement.
son.removeEventListener(ProgressEvent.PROGRESS, chargement);
}

} // <== Pour les webradios

this.stop1.addEventListener(MouseEvent.CLICK, clickStop);

function clickStop(event:MouseEvent):void {
if (played == 1) {
played = 0.5;
addEventListener(Event.ENTER_FRAME,regVolume);
play1.width = 65;
infos.text = "Stop !";
}
}

reg_volume.curseur.addEventListener(MouseEvent.MOUSE_OUT, curseurMouseOut);
reg_volume.curseur.addEventListener(MouseEvent.MOUSE_OVER, curseurMouseOver);

function curseurMouseOver(event:MouseEvent):void {
reg_volume.curseur.gotoAndStop("top");
}
function curseurMouseOut(event:MouseEvent):void {
reg_volume.curseur.gotoAndStop("normal");
}

var ratio_volume:Number;
var trackBounds:Rectangle = reg_volume.getBounds(reg_volume);
var xPos:Number = trackBounds.x;
var yPos:Number = trackBounds.y;
var widthPos:Number = trackBounds.width-reg_volume.curseur.width;
var heightPos:Number = 0;
var bounds:Rectangle = new Rectangle(xPos,yPos,widthPos,heightPos);
reg_volume.curseur.x = widthPos;
reg_volume.mouseEnabled = false;
reg_volume.curseur.buttonMode = true;

reg_volume.curseur.addEventListener(MouseEvent.MOUSE_DOWN,Slider);
stage.addEventListener(MouseEvent.MOUSE_UP,Slider_Stop);

function Slider(event:MouseEvent):void {
event.target.startDrag(false,bounds);
addEventListener(Event.ENTER_FRAME,regVolume);
}

function Slider_Stop(event:MouseEvent):void {
reg_volume.curseur.stopDrag();
}
function regVolume(event:Event):void {
if (played == 1) {
ratio_volume = reg_volume.curseur.x/widthPos;
soundVol.volume = ratio_volume;
canal.soundTransform = soundVol;
}
else if (played == 0.5) {
soundVol.volume = 0;
canal.soundTransform = soundVol;
}
}

La fonction Slider s’exécute lorsque la souris clique sur le curseur grâce à l’évènement MOUSE_DOWN. Dans la fonction Slider, j’ai rajouté un évènement ENTER_FRAME, qui agira sur le volume en appelant la fonction regVolume. La fonction regVolume est LA fonction qui appliquera le résultat à l’objet SoundTransform ce qui modifiera les propriétés du canal son. Do you understand?

De ce fait, en résumé:
- On clique sur le curseur pour le slider (le bouger)
=> Exécution de la fonction Slider
=> Exécution de la fonction regVolume
- si le son est déjà joué
=> On règle le ratio du volume (de 0 à 1) suivant le ratio [position du curseur] / [largeur de la barre "reg_volume"]
- si le son a déjà été joué, et que l’on appuie sur Stop
=>
On met le volume à 0

La fonction Slider_Stop s’exécute lorsque l’on « déclique » du curseur, grâce à l’évènement MOUSE_UP, ce qui provoquera l’arrêt du slider.
On applique le résultat à l’objet SoundTransform ce qui modifira les propriétés du canal son.

Voilà c’est fini pour la partie Webradio! Si vous voulez des fonctionnalités supplémentaires faites le moi savoir ;) Par contre, sachez qu’on ne peut pas récupérer les tags ID3 d’un flux continu, en tout cas pas directement avec ActionScript.

  • IV) Des modifs pour un lecteur MP3!

Pour le lecteur MP3 il manque l’affichage des tags ID3, et la barre de progression. Je ne vais pas vous expliquer en détails car ce n’est pas le but principal de ce tuto; veuillez voir le code ci-dessous, et regardez dans la source (en bas de page).


var stream:URLRequest = new URLRequest("test.mp3"); // A changer

stop();
// On importe les packages nécessaires
import flash.events.Event;
import flash.media.ID3Info;
import flash.media.Sound;
import flash.media.SoundLoaderContext;
import flash.net.URLRequest;

this.play1.buttonMode=true;
this.stop1.buttonMode=true;

// Lorsque le curseur est en dehors du bouton
this.play1.addEventListener(MouseEvent.MOUSE_OUT, playMouseOut);
// Lorsque le curseur est sur le bouton
this.play1.addEventListener(MouseEvent.MOUSE_OVER, playMouseOver);
// Lorsque le curseur appuie sur le bouton
this.play1.addEventListener(MouseEvent.MOUSE_DOWN, playMouseDown);

this.stop1.addEventListener(MouseEvent.MOUSE_OUT, stopMouseOut);
this.stop1.addEventListener(MouseEvent.MOUSE_OVER, stopMouseOver);
this.stop1.addEventListener(MouseEvent.MOUSE_DOWN, stopMouseDown);

// Et maintenant, les fonctions.

function playMouseOver(event:MouseEvent):void {
this.play1.gotoAndStop("top");
}
function playMouseOut(event:MouseEvent):void {
this.play1.gotoAndStop("normal");
}
function playMouseDown(event:MouseEvent):void {
this.play1.gotoAndStop("clique");
}

function stopMouseOver(event:MouseEvent):void {
this.stop1.gotoAndStop("top");
}
function stopMouseOut(event:MouseEvent):void {
this.stop1.gotoAndStop("normal");
}
function stopMouseDown(event:MouseEvent):void {
this.stop1.gotoAndStop("clique");
}

var finie:Number = 0;
var bouton_play_alpha:Number;
// Le son n'est pas encore joué, la variable "played" contient 0
var played:Number = 0;
var son:Sound = new Sound();
// 6,5 secondes de Buffer.
var bufferTime:int = 6500;
var canal:SoundChannel = new SoundChannel();
var soundVol:SoundTransform = new SoundTransform();

// On load le son
son.load(stream);
// Longueur du masque "masque" situé dans le MC "barre"
var posMasque:Number = barre.masque.width;
// Longueur du masque "masqueChargement" situé dans le MC "barre"
var posMasqueChargement:Number = barre.masqueChargement.width;
// On fixe la longueur du "masque" à 0
barre.masque.width = 0;

addEventListener(Event.ENTER_FRAME, onEnterFrame);

son.addEventListener(Event.ID3, id3Handler);
function id3Handler(event:Event):void {
// Récupération des infos ID3 de la musique
var id3:ID3Info = son.id3;
var artiste = id3.artist;
var track = id3.songname;
// Affichage de l'auteur et du titre
titre.text = artiste + " - " + track;
}

function onEnterFrame(event:Event):void {
// Position de lecture
var position:Number = canal.position;
var chargementSon:Number = son.bytesLoaded / son.bytesTotal;
var longueurEstimee:int = Math.ceil(son.length / chargementSon);
var longueurSon:Number = son.length;
var scale:Number = position / longueurEstimee;
barre.masqueChargement.width = posMasqueChargement*chargementSon;
barre.masque.width = posMasque*(scale);
this.play1.addEventListener(MouseEvent.CLICK, clickPlay);
this.stop1.addEventListener(MouseEvent.CLICK, clickStop);
}
// S'il y a un problème de chargement, on exécute la fct erreur_lecture.
son.addEventListener(IOErrorEvent.IO_ERROR, erreur_lecture);
// Pendant le chargement, on affichera un pourcentage.
son.addEventListener(ProgressEvent.PROGRESS, chargement);

// Pour être sûr de ne pas voir le bouton Stop à l'arrière, on lui applique la valeur alpha = 0, il devient invisible.
stop1.alpha = 0;

function clickPlay(event:MouseEvent):void {

if (played == 0) { // Si le son n'est pas encore joué.

function onComplete(event:Event):void {
titre.text = "La musique est finie";
play1.width = 65;
played = 0;
finie = 1;
position = 0;

}

// On obtient la position de lecture
var position:Number = canal.position;

if (finie == 0) {

// On joue le son en fonction de la position
canal = son.play(position);

}

else if (finie == 1) {

canal = son.play(0);

}

canal.addEventListener(Event.SOUND_COMPLETE, onComplete);
// Le son est joué, la variable "played" prend la valeur 1, vous verrez pourquoi après.
played = 1;
// On affiche le bouton Stop
stop1.alpha = 1;
// On change la largeur du bouton Play à 0, il est donc... inexistant.
play1.width = 0;
// on met le curseur de volume au maximum
reg_volume.curseur.x = widthPos;
// Affiche Play !
infos.text = "Play !";

}

else {

// Si le son n'est pas joué avant d'avoir appuyé sur Play, c'est qu'il y a une erreur donc on l'affiche dans le texte dynamique "infos"
infos.text = "Erreur.";

}
}

function erreur_lecture(event:Event):void {

// Si la musique n'existe pas
infos.text = "Music absente";

}

// Pour les lecteurs MP3 simple ==>
function chargement(event:ProgressEvent):void {

var ratio:Number = event.bytesLoaded / event.bytesTotal;
var pourcent:int = Math.round(ratio * 100);

if (pourcent < 100) {
// On affiche le pourcentage de chargement dans le texte dynamique "infos"
infos.text = pourcent + "%";
}

else if (pourcent == 100) {
// on supprime l'évènement de chargement.
son.removeEventListener(ProgressEvent.PROGRESS, chargement);
infos.text = "Chargé !";
}

}
// <== Pour les lecteurs MP3 simple

function clickStop(event:MouseEvent):void {
if (played == 1) {
played = 0;
son.removeEventListener(IOErrorEvent.IO_ERROR, erreur_lecture);
son.removeEventListener(ProgressEvent.PROGRESS, chargement);
canal.stop();
play1.width = 65;
infos.text = "Stop !";
}
}

reg_volume.curseur.addEventListener(MouseEvent.MOUSE_OUT, curseurMouseOut);
reg_volume.curseur.addEventListener(MouseEvent.MOUSE_OVER, curseurMouseOver);

function curseurMouseOver(event:MouseEvent):void {
reg_volume.curseur.gotoAndStop("top");
}
function curseurMouseOut(event:MouseEvent):void {
reg_volume.curseur.gotoAndStop("normal");
}

var ratio_volume:Number;
var trackBounds:Rectangle = reg_volume.getBounds(reg_volume);
var xPos:Number = trackBounds.x;
var yPos:Number = trackBounds.y;
var widthPos:Number = trackBounds.width-reg_volume.curseur.width;
var heightPos:Number = 0;
var bounds:Rectangle = new Rectangle(xPos,yPos,widthPos,heightPos);
reg_volume.curseur.x = widthPos;
reg_volume.mouseEnabled = false;
reg_volume.curseur.buttonMode = true;

reg_volume.curseur.addEventListener(MouseEvent.MOUSE_DOWN,Slider);
stage.addEventListener(MouseEvent.MOUSE_UP,Slider_Stop);

function Slider(event:MouseEvent):void {
event.target.startDrag(false,bounds);
addEventListener(Event.ENTER_FRAME,regVolume);
}

function Slider_Stop(event:MouseEvent):void {
reg_volume.curseur.stopDrag();
}
function regVolume(event:Event):void {
if (played == 1) {
ratio_volume = reg_volume.curseur.x/widthPos;
soundVol.volume = ratio_volume;
canal.soundTransform = soundVol;
}
else if (played == 0) {
soundVol.volume = 0;
canal.soundTransform = soundVol;
}
}

PISTES pour améliorer le lecteur MP3:
- ajouter une playlist XML
- barre de progression cliquable pour avancer dans la musique
A vous de jouer !

Pour intégrer votre radio dans une page Html, utilisez le code ci-dessous !

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="465" height="145" align="middle">
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="nom_du_fichier.swf" />
<param name="quality" value="high" />
<embed src="nom_du_fichier.swf" quality="high" width="465" height="145" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object>

Si vous avez une question, un problème, écrivez un commentaire en bas de page, je suis à tout moment à votre disposition.

Téléchargez:

Le fichier source du tuto, pour la Webradio
Le fichier source du tuto, pour le lecteur MP3
Design de la radio, version PSD Photoshop

NB: Etant donné la gratuité et la longue durée de notre travail, il serait aimable de mettre un petit lien sur votre page web, lorsque vous utiliserez l’un des player ci-dessus. Ce n’est pas obligatoire mais ce serait vraiment apprécié =)
Si vous voulez un player webradio en flash, visitez également notre partenaire Seetweb.

Wikio
Wikio

 scoopeo:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. fuzz:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. tapemoi:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. nuouz:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. blogmemes:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. bookeet:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. pioche:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. digg:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. del.icio.us:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. spurl:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. wists:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. simpy:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. newsvine:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. blinklist:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. furl:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. reddit:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. fark:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. blogmarks:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. Y!:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. smarking:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. magnolia:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3. segnalo:[Tuto n°3] Créer le flash de votre web-radio avec Flash CS3/CS4 et ActionScript 3.