Aller au menu - Aller au contenu

Icône Vidéos

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 37 sur ce chapitre classé 39/786
Voilà la dernière partie de nos tribulations au pays des chargements dynamiques de ressources. :D
Nous apprendrons maintenant à charger des vidéos dans Flash. Attention, les seules vidéos acceptées par Flash sont au format FLV. Nous verrons donc en premier comment convertir une vidéo dans ce format. :)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Riva FLV Encoder

Un outil est fourni avec Flash pour convertir vos vidéos au format FLV, mais il n'est pas très puissant, et plutôt lent.

Un éditeur allemand a publié un logiciel gratuit plus complet, et beaucoup plus intuitif, qui vous permettra d'encoder vos vidéos : Riva FLV Encoder (cliquez sur l'image "download now").

Une fois le logiciel lancé, vous pourrez changer la langue dans la barre de menu du haut pour le français (sprache->fransözisch ou language->french).

Ci-dessous, l'interface du logiciel avec les différentes étapes. Dans la troisième étape, en vert, je ne donne que des conseils pour pouvoir avoir une vidéo avec un minimum de poids, mais la perte de qualité sera assez conséquente ! C'est donc à vous de faire vos propres réglages, selon l'utilisation que vous ferez de votre vidéo !
Le lecteur que nous allons réaliser en Flash fera 320 * 240 pixels, mais vous pourrez changer cette taille très facilement.
La fréquence correspond au nombre d'images par seconde (15 dans notre exemple), et le bitrate au débit des données en bits par seconde (sachez que plus c'est grand, mieux la qualitée est, mais plus le fichier est lourd).

Le logiciel vous permet aussi de "couper" votre vidéo, si vous connaissez la durée en secondes à partir duquel la coupe doit s'effectuer (Start Offset), et la durée du fichier de Sortie (Duration).
Ensuite, il ne vous reste plus qu'à lancer la conversion, qui peut durer de quelques secondes à quelques minutes.

Vous devriez voir apparaître un fichier .flv, c'est celui qui sera chargé par Flash !


Image utilisateur


Au cas où vous n'auriez pas de vidéo sous la main, j'ai encodé pour vous la vidéo de présentation du SDZ qui était passée à la télévision (québécoise apparemment :D ) : télécharger Ztélé au format FLV.
Vous pouvez voir le résultat final de la vidéo jouée dans Flash sur mon blog.
Retour en haut

Un nouvel objet

L'import d'une vidéo de façon statique n'ayant aucun intérêt, nous passons directement au chargement dynamique. :D

Image utilisateur


Je vous avais présenté, il y a longtemps de ça maintenant, les différents objets de Flash. On avait vu qu'en gros, il y avait les formes et les symboles (clips, graphiques et boutons).

Mais il existe deux autres objets qu'on peut trouver dans la bibliothèque : les polices et les vidéos.

Nous nous intéresserons bien sûr à cette seconde catégorie. :D

Cliquez donc avec le bouton droit de la souris sur un espace vide de votre bibliothèque, et dans le menu contextuel, choisissez : Nouvelle Vidéo...

Donnez-lui le nom qui vous chante, ça n'a pas d'importance.
Ensuite, glissez cette vidéo sur votre scène pour en créer une occurrence.

Donnez ces différentes propriétés à votre occurrence :
  • nom d'occurrence : video
  • largeur : 320px
  • hauteur : 240px


Nous sommes maintenant prêts à accueillir une vidéo dans notre animation. :D
Retour en haut

Trois classes pour le prix d'une

Pour le son, c'était simple : une seule classe.
Pour la vidéo, ça se complique drôlement ! Nous avons droit à trois classes différentes, chacune remplissant son rôle (plus ou moins bien défini).

netconnection



Sûrement une des classes les plus simples de Flash : elle n'a qu'une seule méthode et pas de propriété. :p

En fait, son rôle paraît un peu obscur. En effet, une fois l'objet créé, on appelle sa méthode connect() à laquelle on est censé passer une URL. Mais dans la documentation, on précise, je cite :
Citation : Aide de Flash
targetURI:String - Pour ce paramètre, vous devez transmettre null.


Bref, on ne sait pas à quoi ça sert, mais on obéit ; on mettra donc en haut de notre code :
Code : Actionscript
1
2
var connection:NetConnection = new NetConnection();
connection.connect(null);


Ce qu'il faut retenir : NetConnection permet d'ouvrir une connexion (dans le vide puisqu'on transmet null) qu'on pourra associer ensuite à la vidéo.

netstream et Video



Là, on rentre dans le vif du sujet : cette classe s'occupe du transfert et du contrôle de la vidéo. :D

Petite particularité du constructeur de cette classe (c'est-à-dire dans la façon de créer une nouvelle instance) : on doit passer en argument une instance de NetConnection (c'est la dernière fois qu'on le reverra celui-là) :

Code : Actionscript
1
2
3
var connection:NetConnection = new NetConnection();
connection.connect(null);
var flux_video:NetStream = new NetStream(connection); // un NetConnection en argument


Pour la suite, ça fonctionne comme pour la musique. On appelle la méthode attachVideo(), qui est une méthode de la classe Video, et qui va faire le lien entre l'objet vidéo sur la scène et l'objet NetStream fraîchement créé.

Code : Actionscript
1
2
3
4
var connection:NetConnection = new NetConnection();
connection.connect(null);
var flux_video:NetStream = new NetStream(connection);
video.attachVideo(flux_video);


Enfin, il ne reste plus qu'à donner l'URL de la vidéo FLV en elle-même, grâce à la méthode play() de la classe NetStream.

Code : Actionscript
1
2
3
4
5
var connection:NetConnection = new NetConnection();
connection.connect(null);
var flux_video:NetStream = new NetStream(connection);
video.attachVideo(flux_video);
flux_video.play("ztele.flv");


Ce qu'il faut retenir, c'est que NetStream s'occupe du chargement et du contrôle de la vidéo, et que Video ne s'occupe que de l'affichage du film (et NetConnection, on s'en fiche :p ).
Retour en haut

Contrôle du flux

Lecture, pause et arrêt



Créez deux boutons sur votre scène : lecture et arret. Le bouton lecture permettra aussi de faire pause si on clique dessus, alors que la vidéo est déjà en cours de lecture.

Le code pour le bouton lecture va être très simple, car il existe une méthode pause() dans la classe NetStream.
Si on ne passe aucun argument à cette méthode, elle mettra la vidéo en pause si elle est en lecture, et en lecture si elle est en pause : exactement ce qu'on veut. :D

Code : Actionscript
1
2
3
lecture.onRelease = function() {
        flux_video.pause();
};


Un brin plus compliqué, voyons maintenant le code pour le bouton arret. Ce bouton a pour rôle de remettre la vidéo au début. Mais la classe ne possède pas de méthode "stop()".
Il va donc falloir ruser ! ;) Il existe une méthode seek(), qui permet de se positionner à un endroit de la vidéo en transmettant l'instant en secondes comme argument, un peu l'équivalent de la méthode play() de la classe Sound.
On va donc positionner la vidéo à l'instant 0, et la mettre en pause immédiatement après. Le problème, c'est que pause() ne met en pause que si la vidéo était en lecture ; or, nous on veut que la vidéo s'arrête à tous les coups ! Heureusement, on peut passer un argument à pause() : true si on veut arrêter la vidéo et false, si on veut reprendre la lecture. Ce qui nous fait :

Code : Actionscript
1
2
3
4
arret.onRelease = function() {
        flux_video.seek(0);
        flux_video.pause(true);
};



Curseur de lecture



Comme pour le son, nous allons créer un curseur de lecture tout simple. Dessinez un rectangle plein, foncé, horizontal, et convertissez seulement l'intérieur en clip qu'on nommera : curseur. Faites attention à bien placer le centre du clip en haut à gauche du rectangle !

Vous allez voir qu'on va retrouver le même problème que pour le son : on connaît la position actuelle de la tête de lecture en secondes avec la propriété time de NetStream. Par contre, on ne connaît pas la durée totale. Alors, on pourrait utiliser la même astuce avec approximation de la durée totale, mais il existe une autre technique. Si les tags ID3 sont peu répandus pour les mp3, la plupart des vidéos FLV possèdent des métadonnées plus complètes.

La classe NetStream incorpore un événement onMetaData qui va nous permettre de récupérer facilement la donnée qui nous intéresse. Cette méthode possède un argument, que nous appellerons metadata, et qui contient justement les métadonnées du clip vidéo. Il ne reste plus qu'à savoir que la métadonnée qui contient la durée s'appelle duration, et le tour est joué. On stockera la durée totale de notre vidéo dans la variable tduration :

Code : Actionscript
1
2
3
flux_video.onMetaData = function(metadata) { // On donne un nom à la variable fournie par onMetaData 
tduration = metadata.duration; // Et on récupère la valeur de cette variable
}


Je ne vous représente pas le principe de la proportionnalité :D ; pour faire avancer notre curseur, nous rajouterons donc :

Code : Actionscript
1
2
3
curseur.onEnterFrame = function() {
        this._xscale = (flux_video.time/tduration)*100;
}


Dupliquez maintenant le clip curseur pour faire un clip selecteur de même taille et de même position, mais plus clair de couleur, et positionné en-dessous (au niveau des calques) de curseur.

Nous allons ajouter du code pour pouvoir positionner la vidéo facilement, en cliquant sur selecteur. Encore une fois, le code est très ressemblant à celui du son, il faut juste enlever la division par mille, puisqu'ici tout est donné en secondes, et ne pas oublier que la méthode pour se placer dans une vidéo est seek(). Si on reprend tout le code depuis le début, on aura donc :

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
var connection:NetConnection = new NetConnection();
connection.connect(null);
var flux_video:NetStream = new NetStream(connection);
video.attachVideo(flux_video);
flux_video.play("ztele.flv");
lecture.onRelease = function() {
        flux_video.pause();
};
arret.onRelease = function() {
        flux_video.seek(0);
        flux_video.pause(true);
};
flux_video.onMetaData = function(metadata) {
        tduration = metadata.duration;
}
curseur.onEnterFrame = function() {
        this._xscale = (flux_video.time/tduration)*100;
}
selecteur.onRelease = function() {
        flux_video.seek((this._xmouse*tduration)/this._width);
}


Des fois, quand je clique pour changer la position, la vidéo se place un peu plus loin, il y a un bug ?

Non, c'est le comportement normal. En effet, seek() ne place pas la tête de lecture exactement à un instant donné en secondes, mais à l'image clé de la vidéo la plus proche. Alors, si les images-clés de votre vidéo sont très espacées, il y aura un petit décalage, imperceptible la plupart du temps.

Chargeur



Il ne nous reste plus qu'à rendre la taille de selecteur proportionnelle à l'état de chargement de la vidéo.

Bizarrement, les méthodes getBytesLoaded() et getBytesTotal() n'existent pas dans la classe NetStream... :o Les développeurs ont préféré utiliser les propriétés bytesLoaded et bytesTotal, on se demande bien pourquoi...
Le code pour la barre de chargement sera donc le suivant :

Code : Actionscript
1
2
3
4
5
6
selecteur.onEnterFrame = function() {
        this._xscale = (flux_video.bytesLoaded/flux_video.bytesTotal)*100;
        if (this._xscale == 100) {
                delete this.onEnterFrame;
        }
};


Mais, comme pour le son, la taille de selecteur étant devenue variable, il va falloir la stocker dans la variable, et utiliser largeur à la place de this._width par la suite.

En bref, voici le code complet et fonctionnel :

Code : Actionscript
 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
var connection:NetConnection = new NetConnection();
connection.connect(null);
var flux_video:NetStream = new NetStream(connection);
video.attachVideo(flux_video);
flux_video.play("ztele.flv");
var largeur:Number = selecteur._width;
// On stocke la largeur maximale
lecture.onRelease = function() {
        flux_video.pause();
};
arret.onRelease = function() {
        flux_video.seek(0);
        flux_video.pause(true);
};
flux_video.onMetaData = function(metadata) {
        tduration = metadata.duration;
};
curseur.onEnterFrame = function() {
        this._xscale = (flux_video.time/tduration)*100;
};
selecteur.onRelease = function() {
        flux_video.seek((this._xmouse*tduration)/largeur);
};
selecteur.onEnterFrame = function() {
        this._xscale = (flux_video.bytesLoaded/flux_video.bytesTotal)*100;
        if (this._xscale == 100) {
                delete this.onEnterFrame;
        }
};
Retour en haut
Vous connaissez maintenant tout ce qu'il faut savoir sur le chargement de données externes par requête HTTP : le chargement de variables, d'images, d'animations, de musiques et de vidéos n'a plus de secret pour vous !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
6 commentaires pour "Vidéos"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne amezghal # Posté le 31/01/2007 à 10:41:37

quoi dire, super !!!
mais vraiment bravo :)
Hors ligne christian.sempere # Posté le 29/11/2007 à 19:02:02

Bonsoir,
Votre tuto est un vrai régal, progressif et très complet.
Bravo pour avoir partagé de tels trésors!
Une question ou plutôt deux :
1. Je souhaiterais ne pas voir la vidéo se lancer automatiquement dès le lancement de l'animation. Comment faire ?
2. J'ai une dizaine de vidéos à lire. est-il possible de mettre une variable à la place du nom de la vidéo, et de choisir l'une ou l'autre ?
Merci par avance pour vos réonses et pardon pour ma grande ignorance !
Hors ligne dexinou # Posté le 10/05/2008 à 12:39:42
Avatar

 Bonjour,
j'ai un problème avec SUPER sur XP j'ai un message d'erreur lorsque j'encode au format flv une video wmv:
1210422981,078 is not a valid integer value

quelqu'un sait me dire à quoi ça correspond ?
"La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Ici, nous avons réuni théorie et pratique :
Rien ne fonctionne... et personne ne sait pourquoi !" A.E.

 
Hors ligne j79y910 # Posté le 13/12/2008 à 14:29:11

Bonjour d'un petit nouveau et Bonnes fêtes à tous avant tout.
Je rencontre un petit problème: lorsque j'utilise ce script seule la première image de la vidéo s'affiche. je ne comprends vraiment pas pourquoi. Le flv est valide car je le lis sans problème par ailleurs.
Nb: je ne suis encore qu'en local (pas de publication).
Avez-vous déjà rencontré ce problème?
Hors ligne Aserion358 # Posté le 20/04/2012 à 10:35:05

Avis : Très bon

Super ce tuto!
J'aurai néanmoins une petite demande... :)
Je souhaiterai que l'objet vidéo créé n'ai pas une taille définie et prenne donc la taille de ma video.flv.
Cela est-il possible?

Merci d'avance!

Voir tous les commentaires