Le but: gérer un lecteur vidéo avec actionscript et le composant FLVPlayback.

• Dans ce billet nous allons créer le fichier flv (hum hum trop dur…)
• Positionner les composants FLVPlayback et FLVPlayback Custom UI sur la scène.
• Affecter des évènements aux occurences placées sur la scène.
• Indiquer les paramètres que nous voulons par défaut à la vidéo
• et enfin Positionner dynamiquement un champs de texte sur la scène dans lequel on fera apparaitre les informations souhaitées

EXEMPLE

LE FICHIER FLA

Création du fichier FLV

Tout d’abord convertissez votre vidéo au format .flv.
Pour cela :

• Fichier > Importer > Importer de la vidéo
• Sélectionner le fichier vidéo : sélectionner, sur votre disque dur, la vidéo que vous voulez convertir
• Déploiement : choisir téléchargement progressif à partir d’un serveur web
• Options de codage : afficher les paramètres de codage et les changer si nécessaire
• Réhabillage : ne choisir aucun habillage car nous le ferons nous-même
• Cliquez sur terminer.

Nous aurions pu utiliser une enveloppe pour gérer la lecture du fichier, mais certaines fois on aimerait avoir la possibilité de gérer soi-même son bouton, alors autant le faire par AS.

Placement sur la scène des occurences qui nous intéressent

this.attachMovie ("FLVPlayback", "laVideo",this.getNextHighestDepth()); // création d'une occurence de flvplayback sur la scene : on lui donne comme nom laVideo. getNextHighestDepth() = la profondeur la plus "haute"
this.attachMovie ("PlayButton", "playButton_mc",this.getNextHighestDepth(), {_x:10, _y:90}); // création d'une occurence du bouton play (n'oubliez pas de cocher dans les propriétés de liaison : exporter dans la première image)
this.attachMovie ("StopButton", "stopButton_mc",this.getNextHighestDepth(), {_x:40, _y:90}); // création d'une occurence du bouton stop(n'oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
this.attachMovie ("VolumeBar", "volumeBar_mc",this.getNextHighestDepth(), {_x:10, _y:130}); // création d'une occurence du bouton volume(n'oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)
this.attachMovie ("SeekBar", "seekBar_mc",this.getNextHighestDepth()); // création d'une occurence de la barre de recherche (n'oubliez pas de cocher dans les propiétés de liaison : exporter dans la première image)

placement de la vidéo au centre de la scene.

var ecouteur:Object = new Object();
ecouteur.onResize = function(){
laVideo._x = Stage.width/2 - laVideo._width/2; // vidéo centrée horizontalement
laVideo._y = Stage.height/2 - laVideo._height/2; // vidéo centrée verticalement // placement de la seekbar sur la scene
seekBar_mc._width = laVideo._width; // même taille que la video
seekBar_mc._x = Stage.width/2 - laVideo._width/2; // centré horizontalement comme la vidéo
seekBar_mc._y = Stage.height/2 + laVideo._height/2; // placé en dessous de la vidéo// placement des bouton sur la scene: c’est se compliquer la vie pour rien mais au moins vous voyez qu’on peut le faire comme ca
playButton_mc._x = Stage.width/2 - laVideo._width/2;
playButton_mc._y = Stage.height/2 + laVideo._height/2 + playButton_mc._height;
stopButton_mc._x = Stage.width/2 - laVideo._width/2 + 40;
stopButton_mc._y = Stage.height/2 + laVideo._height/2 + stopButton_mc._height;
volumeBar_mc._x = Stage.width/2 - laVideo._width/2 + 80;
volumeBar_mc._y = Stage.height/2 + laVideo._height/2 + 38;
// il y a un bug losqu’on redimmensionne la fenetre les curseurs ne suivent pas. Si quelqu’un a une idée
}
Stage.addListener(ecouteur); // on ajoute un écouteur
ecouteur.onResize();

Utilisation du composant FLVPlayback

Tout d’abord, insérer le composant dans votre bibliothèque.
Pour cela, afficher la palette composant (si elle n’est pas visible : fenêtre > composant ou ctrl + F7).

Pour le controle de la vidéo nous allons utiliser les FLVPayback Custom UI (mais on aurait pu aussi créer des boutons ).

// affectation des évènements aux occurences placées sur la scène.
laVideo.playButton = playButton_mc;
laVideo.stopButton = stopButton_mc;
laVideo.volumeBar = volumeBar_mc;
laVideo.seekBar = seekBar_mc;

La vidéo

// chemin de la video
laVideo.contentPath = “spider-cochon.flv”;// parametres de la video
laVideo.autoPlay = false; //la vidéo ne démarrera pas automatiquement
laVideo.autoSize = false; // la vidéo ne changera pas de taille si on joue une autre vidéo de taille différente
laVideo.autoRewind = false; // la vidéo ne sera pas remise au début losqu’elle aura fini de jouer
laVideo.maintainAspectRatio = true; // la vidéo garde son ratio largeur hauteur d’origine// propriété de la vidéo : ici on veut afficher des infos sur la fenetre sur la scene
this.createTextField(”monTexte”,this.getNextHighestDepth(),0, 0, 550,100); // création d’un champs de texte
monTexte.html = true;
monTexte.multiline = true;
monTexte.wordWrap = true;var etat:Object = new Object(); // création d'un nouvel objet auquel on va associer un évènement
etat.stateChange = function (information) { // si évènement se produit
monTexte.text = information.state
if (information.state == "playing") { // l'état est playing : afficher mon texte
monTexte.htmlText = "Spider cochon spider cochon
Il peut marher au plafond
Est ce qu'il peut faire une toile
Bien sur que non c'est un cochon
Prends gaaaarde spider cochon est lààà.";
}
};
laVideo.addEventListener("stateChange", etat); // on ajoute un écouteur d'évènement à la vidéo

Voila.

Lire un flv avec FLVPlayback et le controler avec les FLVPayback Custom UI (staring Homer Simpson)
Inscrivez vous aux flux RSS pour rester informé des news du site.