Nous allons voir dans cette partie II du lecteur FLV personnel le moyen de faire sa propre "jauge" de volume.
Ci dessous vous trouverez un exemple du Lecteur FLV avec le slider du volume.
Vous pouvez si vous le désirez vous pouvez lire la première partie du cours en cliquant sur ce lien.
Cours qui explique comment intégrer et créer son propre lecteur Flv.

1 - Création du clip qui contiendra le volume

Créer un nouveau calque que vous nommerez "volume" (Insertion > Scénario > Calque)

Une fois le calque créé nous allons nous attaquer au clip proprement dit.
Pour créer un clip appuyer sur les touches "Ctrl + F8" ou "Insertion > Nouveau symbole" et nommer le comme vous le désirez, ce n'est pas important.

En cliquant sur OK, Flash vous dirige directement dans le clip, pour en sortir cliquer sur "Sequence 1" comme l'image ci dessous.

En ouvrant votre Bibliothèque vous pourrez constater qu'un nouveau clip du nom que vous avez choisi a été créé.
Sélectionner l'image 1 du calque "Volume" et glissez-y votre nouveau clip.

Ce qui aura pour effet de vous mettre un petit rond (image ci dessous en bas à droite)

Cliquez sur ce petit rond pour sélectionner le clip et nommé l'occurrence "Myslider", c'est important pour l'Action Script que nous verrons plus bas

Double cliquez ensuite sur ce rond pour entrer dans le clip et commencer à concevoir notre slider volume.

Dans ce clip nous allons créer organiser les calques dont nous avons besoin.
Nous allons donc créer un claque nommé "Elements" par exemple qui contiendra toute la partie "graphique" de notre slider et un calque nommé "Code" qui contiendra bien évidemment le code Action Script nécessaire pour le fonctionnement de notre slider.

2 - Création de la barre type "Slider"

Sélectionner l'image 1 du calque "Elements" et tracer un trait horizontal avec l'outil qui sera l'élément correspondant à notre barre de slider.

Sélectionner ce nouveau trait et transformer le en clip (Touche F8), ensuite nommé ce clip "line"

Je vous invite à créer une barre qui mesure une longueur facilement calculable par rapport au nombre 100, cela facilitera grandement le code action script par la suite. Ok cette phrase est un peu barbare je vous le concède, l'idée est de partir par exemple sur une barre de 100 pixels ou chaque pixel correspondra au pourcentage du volume (0 à 100% du volume).

Nous en avons fini avec notre ligne, nous allons maintenant attaquer la partie qui servira à monter ou descendre le volume.
Tracer un rectangle à l'aide de l'outil toujours sur le calque "Elements"

Transformer de nouveau cette forme en clip (Touche F8) et nommer la "dragger"

Voila nous en avons fini avec la partie "graphique" du volume.

3 - Attaquons l'Action Script

Sélectionner l'image 1 du calque "Code", je vous rappelle que nous sommes toujours dans le clip du départ.

Ouvrez maintenant le panneau d'Action Script (Fenêtres > Bibliothèques ou Ctrl + L)

Et entrez-y le code suivant

Les deux premières lignes sont le processus habituel pour attacher du son et pouvoir le gérer par Action Script

• SonVideo.attachAudio(GestionFluxVideo);
• var VolumeVideo:Sound = new Sound(SonVideo);

La ligne suivante définit le volume à 70%

• VolumeVideo.setVolume(70);

Ici nous définissons une variable "son" qui correspond au volume en cours, autrement dit 70%
Cette variable va nous servir à placer le clip "dragger" à l'endroit correspondant au volume sur la barre "line"

• var son = VolumeVideo.getVolume();
• dragger._x = son;

Nous définissons maintenant un variable "ratio" égale à 0 qui nous sera utile pour le code à venir

• this.ratio = 0;

Ici nous définissons que dragger va devenir déplaçable en cliquant dessus => dragger.onPress = ...

• dragger.onPress = function() {
• this.startDrag(true,0,0,line._width,0);

Et nous attachons une fonction à ce drag. Cette fonction attachée au drag consiste à calculer lors du déplacement de "dragger" sur "line" ceci :

• this.onEnterFrame = function() {
• ratio = Math.round(this._x*100/line._width);

Position de dragger sur l'axe X multiplié par 100 divisé par longueur de line soit 100.
Comme line est égal à 100 finalement ça revient à dire tout simplement ratio = position de X sur "line"
De cette manière ont a tout de suite le pourcentage de volume désiré, donc on définit ensuite la nouvelle valeur du volume avec :

• VolumeVideo.setVolume(ratio);

Pour info Math.round est la fonction en action script pour arrondir à l'entier supérieur.

Les deux dernières lignes sont les actions à effectuer lors du relachement de la souris.
J'avais un bug lorsque je lachais le drag en dehors de l'animation Flash, le drag ne s'annulait pas j'ai donc ajouté la deuxième ligne ci dessous pour resoudre le problème.

• dragger.onRelease = dragger.onreleaseOutside=stopDrag;
• dragger.onReleaseOutside = dragger.onreleaseOutside=stopDrag;
  

Vous pouvez tester votre animation le son fonctionne :)

 

4 - Petit bonus

Vu que dans la fonction drag vous avez une espéce de temps réel avec this.onEnterFrame = function() { nous allons en profiter pour créer un champ texte dynamique qui nous donnera le volume en "temps réel". Pour ce faire créer toujours sur le calque "Elements" un texte dynamique avec l'outil et entrez y les paramètres suivants. Notez les champs entourés en rouge.

Ajouter la ligne vol = VolumeVideo.getVolume(); dans la function startdrag comme ceci :

Nous devons aussi définir une valeur par défaut de ce champ texte.
Nous avions déja définit une variable "son" en début de code qui correspondait au volume. Servons nous en pour donner également une valeur à notre variable "vol".

Mettez le code ci dessous en dessous de la variable "son" (var son = VolumeVideo.getVolume();) :

Et voila vous pouvez maintenant créer votre propre slider de volume. Vous pouvez télécharger ci dessous les sources de ce cours afin de mieux apréhander ce tuto.

Vous pouvez télécharger notre exemple en cliquant sur ce lien, vous avez le FLA et le FLV ainsi que le SWF.

Je ne suis pas un crack en Flash cependant après quelques test et optimisation vous pouvez aisément arriver à faire des slider intéressants.



Bon courage, il en faut quand on me lis :).

Dans la partie III nous attaquerons la barre de navigation du lecteur .. .