Vous pouvez télécharger notre exemple en cliquant sur ce lien, vous avez le FLA et le FLV ainsi que le SWF (14 Mo).
Nous allons voir dans cette partie III du lecteur FLV personnel le moyen de faire sa propre barre de navigation.
Ci dessous vous trouverez un exemple du Lecteur FLV avec la barre de navigation.
.
Vous pouvez si vous le désirez vous pouvez lire la première partie du cours en cliquant sur ce lien. (bouton play, stop, pause etc.)
Vous pouvez si vous le désirez vous pouvez lire la deuxième partie du cours en cliquant sur ce lien. (Gestion du volume)
Voici ce que vous trouverez dans le fichier ZIP.
1 - Préambule
Notre barre de navigation va se composer de deux calques :
Un premier calque qui nous montrera ou en est la vidéo
Un deuxième calque qui aura pour fonction d'une part le pourcentage du chargement de la vidéo et d'autre part sera le bouton de navigation de la vidéo.
Ci dessous une image des deux calques mis l'un à coté de l'autre pour bien les dissocier et une image superposée (qui sera sa position finale)
2 - Création de la barre de téléchargement (bouton)
Attaquons le bouton en premier car c'est lui qui sera en arrière plan. Faites Insertion > Nouveau Symbole ou Ctrl + F8
Choisissez "Bouton" puis valider par OK.
Vous êtes redirigé dans le nouveau symbole, prenez l'outil "Rectangle" et tracer votre barre
Selectionner ensuite l'image 1 de votre bouton et déplacer le sur l'image 4. Replacer ensuite l'image 4 sur l'image 1 (Image 1 ci dessous)
Ce qui a pour résultat l'image 2 ci dessous.
Vous pouvez maintenant sortir de votre bouton en cliquant sur "Séquence 1":
Nous devons maintenant créer le calque qui contiendra notre nouveau bouton.
Faites Insertion > Scénario > Calque (Nommer ce calque seek bouton par exemple)
Ouvrez maintenant votre bibliothèque et faites glisser notre nouveau bouton dans le scénario sur le nouveau calque.
Sélectionner ce nouveau bouton fraichement glisser dans le scénario et nommer le "seeking" comme sur l'image ci dessous.
Ceci est très important pour l'action script utilisé plus bas.
Pour résumer ce chapitre nous avons donc :
- Un nouveau calque nommé comme on le désire
- Un nouveau bouton en forme de barre que nous nommerons "seeking"
Nous pouvons passer maintenant à la barre de progression proprement dites.
3 - Création de la barre de progression
De la même manière que le chapitre 2 nous allons ici créer un nouveau symbole (Ctrl+ F8) mais cette fois ci nous allons choisir "clip".
Une fois dans le symbole créer une barre de couleur beaucoup plus claire et un peu plus fine de façon à ce qu'elle ressorte bien au dessus de notre précédente barre. Sortez du symbole en cliquant sur "Séquence 1".
Créer un nouveau calque que nous nommerons "seek" par exemple. Ce calque devra se trouver au dessus de celui créer dans le chapitre 2.
Faites glisser notre barre dans ce nouveau calque.
La première image ci dessous nous montre notre nouvelle barre au dessus de celle créer plus haut. La deuxième image quant à elle nous montre les deux barres superposées.
Sélectionner notre nouvelle barre (ici bleue) et donner lui le nom : currentplay
Nous en avons fini avec la création de nos deux barres.
Pour résumer ce chapitre nous avons donc :
- Un nouveau calque nommé comme on le désire
- Un nouveau clip en forme de barre que nous nommerons "currentplay"
Nous pouvons passer maintenant à l'action script.
3 - Création de la barre de progression
Si vous avez suivi les deux autres tutoriels concernant les lecteurs FLV personnels vous devez avoir un calque à part que se nomme AS et qui contient tout notre action script. C'est dans ce calque la que nous allons entrer l'action script pour les barres de navigation. Selectionner donc l'image du calque AS ou se trouve l'action script (il y a un petit "a" dessus).
Si vous n'avez pas suivi les deux précédents tutoriels, créer un nouveau calque en faisant Insertion > Scénario > Calque.
Nommez ce calque comme bon vous semble (ici nous l'avons nommé AS)
Ouvrez le panneau Action Script : Fenêtre > Actions ou F9 et entrez-y le code suivant :
Code
function checkBytesLoaded(my_ns:NetStream) {
//création de la variable pctLoaded byte chargé divisé par byte total multiplié par 100 > donc le pourcentage de chargement :)
pctLoaded = my_ns.bytesLoaded/my_ns.bytesTotal*100;
//Nous définissons la longueur du clip seeking avec _xscale, ce qui nous permet de voir la barre de chargement progresser au fur et à mesure que la vidéo est téléchargée
seeking._xscale = pctLoaded;
//Création de la variable ns_seconds qui nous retourne le temps en seconde
var ns_seconds:Number = my_ns.time;
//Le calcul ci dessous nous retourne le _xscale = pourcentage de la vidéo donc il augment au fur et à mesure que la vidéo défile
currentplay._xscale = ns_seconds/duree*100;
}
//Utilisation de setInterva pour executer la function toutes les 0.5 sec (500).
var loaded_interval:Number = setInterval(checkBytesLoaded, 500, monFluxVideo);
Je vous ai mis en gras les noms de nos deux symboles créés plus haut. Voila pourquoi le fait de leur donner un nom est primordial, sinon cela ne fonctionnera pas.
Vous pouvez aussi voir à la fin du code ceci : monFluxVideo.
monFluxVideo est une variable créée dans la partie I du tutoriel lors de l'importation du flux vidéo.
CodemonFluxVideo = new NetStream(maConnexion);
Vous avez aussi la variable "duree", cette variable a aussi été créé dans la partie I du tutorial.
CodemonFluxVideo.onMetaData = function(obj) {
duree = obj.duration;
};
Vous avez aussi :
Codevar loaded_interval:Number = setInterval(checkBytesLoaded, 500, monFluxVideo);
setInterval s'utilise avec une fonction (ici checkBytesLoaded).
Le principe est simple : vous définissez une série d'action que vous incorporez dans une fonction.
Cette fonction va être appelée par la méthode
setInterval, à un interval régulier que vous définissez (ici 500 soit
0.5 secondes).
L'Action Sctipt sur le bouton "Seeking"
Ici nous allons voir quel action script nous allons mettre sur le bouton préalablement créé pour que la vidéo se positionne la ou on clique.
Code
seeking.onPress = function ()
{
pourcent = Math.round((currentplay._width*100)/546); // calcul du pourcentage la ou je clique
head = Math.round((pourcent*duree)/100); // calcul position de la vidéo, on fait une rêgle de 3, on a la valeur total de la vidéo, on a le pourcentage de la ou on a cliqué (pourcent). On peut donc faire une rêgle de 3 et avoir le temps en seconde de la ou on veut que la vidéo se place.
monFluxVideo.seek(head); // On déplace la tête de lecture
currentplay._width = _xmouse-10; // position du MovieClip currentplay
}
Je vous joint à ce cours un lecteur complet avec son FLA, SWF et FLV que vous puissiez regarder directement tout ça.
Avec ces 3 tutorials et les sources associées vous ne devrez pas rencontrer de problèmes. Cependant si c'était effectivement le cas vous pouvez sur le forum pour en parler.
- Cliquez ici pour télécharger les sources
- Accédez au premier chapitre de ce cours
- Accéder au deuxième chapitre de ce cours.
- Topic visant à l'amélioration du lecteur
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres
Anniversaire du jour
Dernières vidéos 
Vidéo postée dans Photoshop
Derniers BlogArticles
A ne pas manquer !