Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Programmation > ActionScript / Flash / Flex > Lecture du tutoriel

Fil Rouge - Radio-Blog

Avatar
Auteur : SuprazZz
Créé : le 01/06/2006 17:39:28
Modifié : le 09/05/2007 21:25:16
Noter et commenter ce tutoriel
Imprimer ce tutoriel
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Et voilà notre traditionnel petit fil rouge de fin de chapitre. On a appris pas mal de choses dans cette partie, nous utiliserons principalement vos connaissances sur le transfert de variables, et sur le chargement dynamique de musique.

Dans un premier temps, voilà le résultat final que nous devrons obtenir.


Et maintenant, voilà la source sur laquelle nous allons nous baser pour commencer ;) .

Il y a déjà tous les composants, mais vous ne trouverez aucun code ActionScript. Je tiens à remercier yash pour le design. ;)
Sommaire du chapitre :
Chapitre précédent Sommaire

Du côté de PHP

Ai-je besoin de préciser que pour fonctionner correctement, votre fichier PHP doit être uploadé sur votre serveur, ou que vous devez avoir installé un serveur PHP sur votre ordinateur ? De même, n'oubliez pas d'envoyer un crossdomain.xml sur votre serveur pour éviter les problèmes.


Bon. Cette partie va être facile pour moi, je vais vous donner le code minimum du côté PHP, car ce n'est pas mon boulot de vous apprendre ce langage. Cela étant dit, je vous encourage fortement à compléter ce script pour le rendre plus dynamique, et vous permettre de mettre à jour facilement votre radio-blog.

Nous allons transmettre toujours de la même façon les données à Flash, en utilisant une succession de variables. Le script PHP devra donc retourner une chaîne de caractères de ce genre :
Citation : Chaîne à transmettre
radio=Radio du SDZ&total=1&lien_0=Hallelujah.mp3&infos_0=hallelujah+-+jeff+buckley



Bon, vous avez 500 techniques différentes pour coder cette partie : moi, je ne me suis pas embêté, toute la playlist est enregistrée en "dur" dans le script PHP. Il faut donc le modifier à chaque fois qu'on change la playlist, même si c'est moyennement pratique. Le nom de mon script PHP est lecteur.php, et encodé en UTF-8, bien entendu. ;)

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?PHP

$racine = 'http://www.votresite.com/'; // Répertoire contenant les musiques
$radio = 'Radio du SDZ'; // Nom de la radio

$lien[0] = 'Hallelujah.mp3'; // Lien vers la première musique
$infos[0] = 'Hallelujah - Jeff Buckley'; // Infos de la première musique
$lien[1] = 'calypso.mp3';
$infos[1] = 'Harry Belafonte - Calypso';

$retour = 'radio='.$radio; // On crée une chaîne pour stocker les données à envoyer
$retour .= '&total='.count($lien); // On compte le nombre d'entrées pour la variable "total"

for ($i=0;$i<count($lien);$i++) {
        $retour .= '&lien_'.$i.'='.$racine.urlencode($lien[$i]).'&infos_'.$i.'='.urlencode($infos[$i]);
// On oublie surtout pas "d'urlencoder" les données pour que la transmission ne bogue pas au premier titre contenant un & ou un =
}

echo $retour; // On affiche la chaîne contenant les données

?>


Il ne vous reste plus qu'à coupler ce script à une base de données, ou à un bête fichier texte, et une interface vous permettant de gérer simplement la playlist.
Je vous conseille de compléter, pour la suite du fil-rouge, la playlist avec au moins un quinzaine de musiques pour pouvoir coder les boutons de défilement de la liste dans le lecteur.

Chargement de la Playlist

Allons dans l'ordre, et avant de commencer à jouer une musique, chargeons déjà les données qui leurs correspondent.
On va donc créer un nouvel objet LoadVars load_playlist qui se chargera de cette tâche :

Code : Autre
1
2
3
4
5
6
7
8
9
var load_playlist:LoadVars = new LoadVars();
load_playlist.load('lecteur.php');
load_playlist.onLoad = function(succes) {
        if (succes) {
                // A coder :D 
        } else {
                _root.infos = 'ERREUR dans le chargement'; // En cas d'erreur
        }
};


La question maintenant, c'est : comment donc récupérer les chansons et les stocker ?
Ma solution, et elle vaut ce qu'elle vaut ;) , c'est de créer une occurrence du clip ligne présent dans la bibliothèque par chanson. L'occurrence aurait donc non seulement un rôle d'interface, mais chaque clip contiendrait les informations sur sa chanson. L'avantage de cette méthode, c'est qu'elle est rapide, et très "Flash" dans l'idée. On aurait aussi très bien pu séparer l'interface des données (et ça aurait d'ailleurs été plus propre pour un programmeur venant d'un autre langage), nous aurions stocké les données dans un tableau, et associé chaque ligne de la liste avec une ligne du tableau par un numéro d'identifiant.

Pour l'instant, suivons mon idée ! Nous allons donc créer une occurrence de ligne pour chaque lien transmis par le script PHP. Nous allons donc utiliser une boucle, qui ira de zéro à... Secret (cliquez pour afficher)
la valeur de total transmise par le script PHP.


Code : Autre
1
2
3
4
5
6
7
8
9
10
11
load_playlist.onLoad = function(succes) {
        if (succes) {
                for (var i = 0; i<this.total; i++) { // Boucle de 0 au nombre total de chansons
                        var temp = _root.attachMovie('ligne', 'ligne_'+i, i); // Création d'une occurence de ligne
                }
                radio.htmlText = this.radio; // On donne le titre à la radio
                total = this.total; // On stocke le nombre total de titres dans une variable de _root
        } else {
                _root.infos = 'ERREUR dans le chargement';
        }
};

On est dans un bloc de code de load_playlist, pour accéder à un de ses objets (c'est-à-dire à une des variables transmises), on passe par this.lavariable.

Nous devons transmettre maintenant plusieurs informations à ce clip fraîchement créé, et on a donc une référence simple donné par temp.



Vous pouvez maintenant tester votre animation :D ! Ça devrait fonctionner. :lol: (J'utilise le conditionnel, car il y a toujours des Zéros qui arrivent à se compliquer la vie ;) .) Pour ces derniers, voilà le code complet pour l'instant, j'y ai rajouté tout de même une ligne, qui transmet à notre future fonction chargeur() les données pour la première chanson de la liste, histoire de commencer la lecture aussi tôt que possible. ;)

Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//--
// CHARGEMENT DES DONNEES
//--
var load_playlist:LoadVars = new LoadVars();
load_playlist.load('lecteur.php');
load_playlist.onLoad = function(succes) {
        if (succes) {
                for (var i = 0; i<this.total; i++) {
                        var temp = _root.attachMovie('ligne', 'ligne_'+i, i);
                        temp._y = 95+i*20;
                        temp._x = 17;
                        temp.id = i;
                        temp.infos.text = this['infos_'+i];
                        temp.lien = this['lien_'+i];
                        temp.lecture._visible = false;
                        temp.onRelease = function() {
                                chargeur(this.id);
                        };
                        if (temp._y>271) {
                                temp._visible = false;
                                temp._alpha = 0;
                        }
                }
                radio.htmlText = this.radio;
                total = this.total;
                chargeur(0); // La ligne que j'ai rajoutée :D 
        } else {
                _root.infos = 'ERREUR dans le chargement';
        }
};

Gestion de la musique

Interface de base



Nous avons déjà vu la majeure partie dans le tutoriel précédent, Musique !, auquel je vous invite à vous reporter si vous souhaitez comprendre quelque chose à la suite. :p

On va en effet passer sur les explications déjà données quant au chargement de la musique et à l'approximation effectuée sur sa durée totale.

Voilà notre code de départ, celui qu'on peut reprendre de plus haut :

Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var tduration:Number = 0; // Variable stockant la durée approximée totale de la musique
var largeur:Number = selecteur._width; // Largeur de la barre de navigation
var musique:Sound = new Sound(); // Notre objet son
arret.onRelease = function() {
        musique.start(0); // On remet la musique à zéro
        musique.stop(); // Pour l'arrêter tout de suite après
};
pause.onRelease = function() {
        musique.stop();
};
lecture.onRelease = function() {
        musique.start(musique.position/1000); // "position" donnée en millisecondes
};
curseur.onEnterFrame = function() {
        this._xscale = (musique.position/tduration)*100;
};
selecteur.onRelease = function() {
        musique.stop();
        musique.start((this._xmouse*musique.duration)/(largeur*1000));
};
selecteur.onEnterFrame = function() {
        this._xscale = (musique.getBytesLoaded()/musique.getBytesTotal())*100;
        tduration = (musique.getBytesTotal()*musique.duration)/musique.getBytesLoaded();
};


Comme vous le constatez, on n'a aucune ligne qui s'occupe du chargement de la chanson : c'est normal. :D On a dit en effet que nous allions construire une fonction chargeur() qui s'en occuperait. Cette fonction prend pour argument la variable id que chaque ligne lui transmet :

Code : Autre
1
2
3
4
chargeur = function (id) {
musique.start(0); // On remet la musique à zéro
// Le code
};


On a le numéro de la ligne, et on connaît la structure du nom des clips ligne que nous avons créés : ligne_X.
On utilisera donc la même syntaxe que d'habitude pour aller chercher nos petites infos :

Code : Autre
1
2
3
4
5
chargeur = function (id) {
        musique.start(0);
        musique.loadSound(this['ligne_'+id].lien, true);
        info.text = this['ligne_'+id].infos.text;
};


On pouvait aussi bien écrire _root['ligne_'+id] à chaque fois, ça n'aurait rien changé.

Maintenant, le petit fignolage de dernière minute : on va faire disparaître la petite flèche lecture de la ligne qui n'est plus lue, et la rajouter à celle qui est lue.

Comment je connais l'id de la ligne qui n'est plus lue ?


Bah, il suffit de faire intervenir une nouvelle variable : var id_encours = 0;

Ensuite, dans notre fonction, on va rendre invisible la flèche du clip correspondant à id_encours, afficher celle de id, et mettre à jour la valeur de id_encours avec la nouvelle musique. (Et bien sûr dans cet ordre-là, sinon, il y aurait un petit problème .;) )

Code : Autre
1
2
3
4
5
6
7
8
chargeur = function (id) {
        this['ligne_'+id_encours].lecture._visible = false; // On la fait disparaître
        this['ligne_'+id].lecture._visible = true; // On la fait apparaître
        id_encours = id; // Et on met à jour l'id du nouveau titre
        musique.start(0);
        musique.loadSound(this['ligne_'+id].lien, true);
        info.text = this['ligne_'+id].infos.text;
};


Petit récapitulatif de cette première partie :

Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var tduration:Number = 0;
var id_encours = 0;
var largeur:Number = selecteur._width;
var musique:Sound = new Sound();
chargeur = function (id) {
        this['ligne_'+id_encours].lecture._visible = false;
        this['ligne_'+id].lecture._visible = true;
        id_encours = id;
        musique.start(0);
        musique.loadSound(this['ligne_'+id].lien, true);
        info.text = this['ligne_'+id].infos.text;
};
arret.onRelease = function() {
        musique.start(0);
        musique.stop();
};
pause.onRelease = function() {
        musique.stop();
};
lecture.onRelease = function() {
        musique.start(musique.position/1000);
};
curseur.onEnterFrame = function() {
        this._xscale = (musique.position/tduration)*100;
};
selecteur.onRelease = function() {
        musique.stop();
        musique.start((this._xmouse*musique.duration)/(largeur*1000));
};
selecteur.onEnterFrame = function() {
        this._xscale = (musique.getBytesLoaded()/musique.getBytesTotal())*100;
        tduration = (musique.getBytesTotal()*musique.duration)/musique.getBytesLoaded();
};


Vous pouvez exécuter votre animation, et miracle, la plupart des fonctions sont déjà opérationnelles :D !

Précédent, suivant et passage automatique



Il manque les nouvelles fonctions inhérentes à l'utilisation d'une playlist : les boutons "précédent", "suivant" et le passage automatique à la chanson suivante, à la fin de celle en cours.

Pour les boutons "précédent" et "suivant", ça pourrait paraître facile ; il y a cependant un petit piège : arrivé à la dernière chanson, il faut revenir au début ! De même, si on est à la première chanson, et que l'utilisateur fait "précédent", il faudra aller à la dernière !
Bon, je vous laisse créer le code (les boutons ont pour nom d'occurrence precedent et suivant).

Correction possible :
Secret (cliquez pour afficher)
Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
precedent.onRelease = function() {
        if (id_encours>0) {
                chargeur(id_encours-1);
        } else {
                chargeur(total-1);
        }
};
suivant.onRelease = function() {
        if (id_encours<total-1) {
                chargeur(id_encours+1);
        } else {
                chargeur(0);
        }
};


Maintenant, je vais vous présenter un événement pratique dans notre cas de la classe Sound : onSoundComplete.
Cet événement se déclenche, comme son nom l'indique, quand une musique arrive à sa fin.
On aura donc :

Code : Autre
1
2
3
4
5
6
7
musique.onSoundComplete = function() {
        if (id_encours<total-1) {
                chargeur(id_encours+1);
        } else {
                chargeur(0);
        }
};


Maintenant, on peut constater que le code est le même que pour le bouton suivant, on peut donc lier les deux pour gagner un peu de place :

Code : Autre
1
2
3
4
5
6
7
suivant.onRelease = musique.onSoundComplete =function() {
        if (id_encours<total-1) {
                chargeur(id_encours+1);
        } else {
                chargeur(0);
        }
};


Allez, courage, on a déjà fait plus de la moitié. :p


Le volume - startDrag() notre ami

La gestion du volume n'est en elle-même pas bien complexe. Si vous vous souvenez de la méthode setVolume(), il n'y devrait pas y avoir de problème.

Sur la scène, vous pouvez voir une petite barre de volume nommée volume (les noms simples sont toujours les meilleurs :) ). Si vous rentrez dans ce clip, vous trouverez le petit curseur qui s'appelle, allez, essayez de deviner... OUI ! curseur.

Bref, comme d'habitude, on va devoir lui appliquer une petite règle de trois qui va nous permettre de transformer sa position en volume. Tout à gauche, (_x = 0) le volume est nul, tout à droite (_x = 60), le volume est à fond.

Les positions 0 et 60 pixels sont les positions de curseur à l'intérieur de volume, et non sa vraie position sur scène. Et heureusement pour nous ! Ça nous simplifie grandement le travail !


Pour restreindre curseur dans ses déplacements, on a plusieurs solutions. On peut lui appliquer un onEnterFrame pour suivre la souris sur l'axe des abscisses, et se limiter de 0 à 60. Une solution énormément plus simple est d'utiliser la fonction startDrag(), qui fait tout ça à elle toute seule. startDrag(souris_centrée?, agauche, enhaut, adroite, enbas) demande pas mal d'arguments, le premier précise si la souris doit être verrouillée sur le centre du clip, les 4 suivants demandent les positions limites du clip. Quand vous appelez cette méthode pour un clip, il suivra alors la souris, tout bêtement.


Voyons si vous avez bien compris comment fonctionnait startDrag(), et donnez-moi le code qui ira dans volume.curseur.onPress.

Solution :
Secret (cliquez pour afficher)
Code : Autre
1
2
3
volume.curseur.onPress = function() {
        this.startDrag(false, 0, 0, 60, 0);
};


On n'a en effet pas besoin que le curseur soit verrouillé au centre du clip, le curseur ne doit ni aller vers le haut, ni vers le bas. Il est limité à 0 à gauche, et à 60 à droite !

Le problème, c'est qu'une fois la souris relâchée, le curseur continue de la suivre. Il faut donc utiliser la méthode stopDrag() qui ne demande par d'argument, et qui arrêtera la poursuite. Appelez cette fonction quand la souris est relâchée, que ce soit à l'intérieur, ou à l'extérieur du clip !

Code : Autre
1
2
3
volume.curseur.onRelease = volume.curseur.onReleaseOutside=function () {
        this.stopDrag();
};


Il manque encore le plus utile, c'est-à-dire le onEnterFrame, qui va ajuster le volume en fonction de la position. Je vais supposer que vous connaissez la proportionnalité (soit par la logique, soit par l'école, soit par les exemples que j'ai donnés jusqu'à maintenant), c'est donc à vous de jouer. :)
Secret (cliquez pour afficher)

Code : Autre
1
2
3
volume.curseur.onEnterFrame = function() {
        musique.setVolume((this._x*100)/60);
};


Voilà donc le petit récapitulatif de la partie sur la gestion du volume :

Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
//--
// GESTION DU VOLUME
//--
volume.curseur.onEnterFrame = function() {
        musique.setVolume((this._x*100)/60);
};
volume.curseur.onPress = function() {
        this.startDrag(false, 0, 0, 60, 0);
};
volume.curseur.onRelease = volume.curseur.onReleaseOutside=function () {
        this.stopDrag();
};


Encore un peu de courage, tout fonctionne maintenant, il ne reste plus que les détails. ;)

L'ascenceur

Certes, ce ne sont que des détails, mais il vont nous prendre pas mal de temps. ^^ !

Commençons par créer deux fonctions qui, attachées à un onEnterFrame, feraient apparaître et disparaître progressivement le clip :

Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
apparition = function () {
        this._alpha += 5; // On le fait apparaître de 5 à chaque image
        this._visible = true; // On le rend visible au cas où il aurait été rendu invisible
        if (this._alpha>=100) { // Une fois complétment affiché
                delete this.onEnterFrame; // On supprime l'événement
        }
};
disparition = function () {
        this._alpha -= 5;
        if (this._alpha<=0) {
                this._visible = false;
                delete this.onEnterFrame;
        }
};


Le code des deux fonctions n'est pas très compliqué.
Le reste va être plus dur. Si vous ouvrez le clip ascenseur, vous trouverez en haut un clip haut et en bas un clip... bas ! On va ajouter des actions à ces deux boutons pour faire respectivement descendre et monter la liste.

Je vais vous montrer pour haut, et vous extrapolerez pour bas.

On commence par les événement "presque" vides :

Code : Autre
1
2
3
4
5
6
7
8
ascenceur.haut.onPress = function() {
        this.onEnterFrame = function() {
                // Notre code
        };
};
ascenceur.haut.onRelease = ascenceur.haut.onReleaseOutside=function () {
        delete this.onEnterFrame;
};


On va donc créer une événement onEnterFrame quand on appuiera sur le bouton. Il faut rajouter le code qui fera monter les lignes, si la ligne numéro 0 n'est pas en dessous de 95 pixels.

Code : Autre
1
2
3
4
5
6
7
ascenceur.haut.onPress = function() {
        this.onEnterFrame = function() {
                if (ligne_0._y<95) {
                        // Le code
                }
        };
};


Nous allons donc devoir créer une boucle, qui va effectuer sur chaque ligne_X, avec X variant de 0 à (total-1) une augmentation de la coordonnée _y :

Code : Autre
1
2
3
4
5
6
7
8
9
ascenceur.haut.onPress = function() {
        this.onEnterFrame = function() {
                if (ligne_0._y<95) {
                        for (var i = 0; i<total; i++) {
                                _root['ligne_'+i]._y += 5;
                        }
                }
        };
};


Il ne reste plus qu'à rajouter deux conditions qui vont utiliser les deux fonctions écrites en début de partie pour faire apparaître les lignes selon qu'elle sortent ou qu'elle rentrent dans le cadre :

Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ascenceur.haut.onPress = function() {
        this.onEnterFrame = function() {
                if (ligne_0._y<95) {
                        for (var i = 0; i<total; i++) {
                                _root['ligne_'+i]._y += 5;
                                if (_root['ligne_'+i]._y>=95) {
                                        _root['ligne_'+i].onEnterFrame = apparition;
                                }
                                if (_root['ligne_'+i]._y>=271) {
                                        _root['ligne_'+i].onEnterFrame = disparition;
                                }
                        }
                }
        };
};


Je vous laisse donc faire la même chose pour le bouton bas : n'hésitez pas à tâtonner, à regardez à la règle les positions limites des clips...

Le code complet pour la gestion de l'ascenseur est ci-dessous :
Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//--
// GESTION DE L'ASCENCEUR
//--
apparition = function () {
        this._alpha += 5;
        this._visible = true;
        if (this._alpha>=100) {
                delete this.onEnterFrame;
        }
};
disparition = function () {
        this._alpha -= 5;
        if (this._alpha<=0) {
                this._visible = false;
                delete this.onEnterFrame;
        }
};
ascenceur.haut.onPress = function() {
        this.onEnterFrame = function() {
                if (ligne_0._y<95) {
                        for (var i = 0; i<total; i++) {
                                _root['ligne_'+i]._y += 5;
                                if (_root['ligne_'+i]._y>=95) {
                                        _root['ligne_'+i].onEnterFrame = apparition;
                                }
                                if (_root['ligne_'+i]._y>=271) {
                                        _root['ligne_'+i].onEnterFrame = disparition;
                                }
                        }
                }
        };
};
ascenceur.haut.onRelease = ascenceur.haut.onReleaseOutside=function () {
        delete this.onEnterFrame;
};
ascenceur.bas.onPress = function() {
        this.onEnterFrame = function() {
                if (_root['ligne_'+(total-1)]._y>271) {
                        for (var i = 0; i<total; i++) {
                                _root['ligne_'+i]._y -= 5;
                                if (_root['ligne_'+i]._y<=271) {
                                        _root['ligne_'+i].onEnterFrame = apparition;
                                }
                                if (_root['ligne_'+i]._y<=95) {
                                        _root['ligne_'+i].onEnterFrame = disparition;
                                }
                        }
                }
        };
};
ascenceur.bas.onRelease = ascenceur.bas.onReleaseOutside=function () {
        delete this.onEnterFrame;
};

Et la source finale tant attendue, que j'ai même pris la peine de convertir au format Flash MX 2004, pour que ceux qui ne se sont pas encore mis à jour puissent en profiter. ;)


Que rajouter sur ce TP ? Si ce n'est qu'il vous ouvre déjà pas mal de perspectives pour l'utilisation de Flash sur votre site-web.

Soyez donc bien sûrs que vous avez tout compris, car dans le chapitre prochain je considérerais ce que nous avons vu comme un acquis, et passerai plus rapidement sur les fonctions triviales.
Chapitre précédent Sommaire
Auteur : SuprazZz
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 301 Zéros connectés | Requêtes SQL 9 requêtes | Temps de génération de la page : Total (SQL) 0.0247s (0.013s)