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)
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 !
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
) :
télécharger Ztélé au format FLV.
L'import d'une vidéo de façon statique n'ayant aucun intérêt, nous passons directement au chargement dynamique.
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.
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.
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é.
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 FlashtargetURI: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 : Autre1
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.
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 : Autre1
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 : Autre1
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 : Autre1
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
).
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.
Code : Autre1
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 : Autre1
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 : Autre1
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é
; pour faire avancer notre curseur, nous rajouterons donc :
Code : Autre1
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 : Autre1
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...
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 : Autre1
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 : Autre1
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;
}
}; |
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 !
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
634 Zéros connectés |
9 requêtes |
0.0298s (0.0145s)
