Préambule

Qu'est ce que le format FLV ? Abréviation anglaise de FLash Vidéo, il s'agit d'un format de vidéo pouvant être lu par les players adobe Flash 6 et +.
Il s'agit d'un format très convoité par les webmasters sur la toile car il est light et lu en streaming. Cliquez ici pour plus d'information sur ce format

Dans le vif du sujet

Ouvrez votre logiciel Adobe Flash et créer un nouveau document Flash (Action Script 2.0).
Avant de nous lancer dans le code voyons un peu comment va se dérouler ce tutorial :

1 - Préparation des calques
2 - Préparation de l'espace dédié à la vidéo
3 - Préparation des graphiques (boutons etc.)
4 - Action script partie 1 (lançons notre vidéo)
5 - Action script partie 2 (Codons nos boutons)
6 - Temps total et Timer en temps réel

1 - Préparation des calques

Avant de nous embarquez dans tout et n'importe quoi réfléchissons un tant soit peu sur ce que nous voulons faire et comment nous allons le faire.
Il est important je pense de bien préparer son espace de travail avec des calques bien distincts pour éviter que notre document devienne une bataille pour la terre du milieu :p

Nous allons donc préparer un calque nommé "VIDEO" qui contiendra notre vidéo, un calque "BOUTONS" pour les graphiques tels que les boutons play et stop et un calque "AS" pour notre code Action Script. Pour créer un calque faites Insertion > Scénario > calque

Ce qui nous donne ceci :

2 - Préparation de l'espace dédié à la vidéo

Dans ce tuto nous allons créer un espace dédié à la vidéo en général, c'est à dire que vous pourrez y insérer n'importe quelle vidéo sans avoir à refaire un document à chaque vidéo. Avec ce système de template vous pourrez très simplement insérer des vidéos à la volée tel que Youtube ou autre Dailymotion.

Allons-y ! Ouvrez votre panneau "Bibliothèque" en faisant Fenêtres > Bibliothèques ou Ctrl + L.
Dans cette fenêtre cliquez sur l'icone en haut à droite et cliquez sur "Ajouter vidéo".

Dans la fenêtre qui s'ouvre entrer dans le champ symbole le nom "video" et cocher si ce n'est déja fait le bouton Vidéo (contrôlé par Action Script)

Une fois ceci effectué vous pouvez apercevoir dans votre bibliothèque un nouvel icone apparaitre nommé "vidéo"

Maintenant que notre symbole vidéo est créé il ne nous reste plus qu'a l'insérer dans notre scénario, pour ce faire sélectionner votre calque "VIDEO" dans votre scénario et faites-y glisser le symbole "video" que nous venons de créer.

En sélectionnant la vidéo dans le scénario vous pourrez à l'aide du panneau de propriétés en dessous lui donner les dimensions que vous désirez (L et H)

Dans le champ Vidéo sur l'image ci dessus vous devez entrer par exemple "maVideo" : TRES IMPORTANT pour la suite du tuto.

Nous en avons fini avec l'insertion de la vidéo, nous pouvons passer maintenant à la création des boutons.

3- Préparation des graphiques (boutons etc.)

Commençons par le bouton "play", "pause" et "stop". Pour notre tutorial j'ai pris des boutons directement disponible dans la "bibliothèque commune" (Fenêtres > Bibliothèque commune).

Sélectionnez votre calque "BOUTONS" et glissez/créez y vos boutons play, pause et stop.

Voila rien de sorcier pour ce passage, nous pouvons passer maintenant à l'action script et commencer à tester notre vidéo.

4- Action script partie 1 (lançons notre vidéo)

Cliquez sur l'image 1 de votre calque "AS" et ouvrez le panneau d'action script (F9).

/!\ Attention : le code doit être inséré sur l'image 1, il est donc primordial de cliquez sur l'image 1 du scénario avant d'entrer votre code /!\

Une fois votre panneau ouvert nous allons pouvoir commencer à entrer nos premières lignes de code Action Script :p

Dans ce code nous créons une nouvelle connexion, nous créons ensuite une connexion NetStream, nous définissons ensuite un buffer de 5 secondes et enfin nous commençons la lecture de la vidéo. Vous remarquerez que sur la 4 ème ligne nous attachons la vidéo dans notre symbole "maVideo".
Dans la dernière ligne de code nous définissons le fichier "rambo.flv" comme vidéo (Dans notre exemple la .flv doit être dans le même dossier que le swf, mais nous aurions pu très mettre monFluxVideo.play("mesvideos/flv/rambo.flv");.

Nous pouvons dès à présent tester notre vidéo, faites "Controle > Tester l'animation"
Si cela ne fonctionne pas vérifier que vous avez bien nommé votre symbole "video" en mettant maVideo comme nom d'ocurrence

5- Action script partie 2 (Codons nos boutons)

Nous allons maintenant nous occuper de mettre un peu d'action script sur nos boutons
Commençons par nommer nos boutons pour pouvoir créer des fonctions lors du clic. Sélectionner le bouton play et nommé le par exemple "lecture".

Faites de même avec le bouton PAUSE et STOP en les nommant respectivement "bouton_pause" et "bouton_arret"

Revenons sur notre calque "AS" et commençons avec le bouton "bouton_pause", entrez le code ci-dessous à la suite du code précédent :

Tester votre vidéo et cliquez sur le bouton pause, la vidéo se met en pause, recliquez dessus la vidéo reprend :) magique non :)

Pour le bouton "STOP" entrez le code suivant :

Vous remarquerez que pour stoper une vidéo en NetStream il faut mettre play(""); sans information de fichier flv, en effet cela à pour résultat de stopper la vidéo :p

Pour le bouton "Lecture" vous faites comme les autres boutons en entrant le code suivant :

Je vous rappelle que dans notre première partie de code nous avions déja lancé la vidéo en mettant monFluxVideo.play("rambo.flv");, cela à pour but de lancer la vidéo directement lorsque le fichier swf est affiché, mais nous aurions pu ne pas mettre cette ligne pour plutot l'affilier au bouton play pour laisser à l'internaute le choix de démarrer la lecture quand il le désire, utile lorsqu'on a plusieurs vidéos sur la même page :)

Voila vous avez un lecteur de fichier FLV personnalisé avec lecture, pause et stop. Le principal est la, vous pouvez maintenant vous concentrez sur un nouveau calque qui vous servira à designer votre lecteur en y incrustant une interface plus conviviale.

Dans la suite de ce tutorial nous allons voir comment récupérer le temps totale de la vidéo et afficher un timer temp réèl.

6 - Temps total et Timer en temps réel

Pour récupérer le temps total d'une vidéo nous allons utilisez les Metadata, entrer la fonction ci-dessous à la suite du code:

la fonction qui nous donne ici la durée de la vidéo est "duration", math.round est la fonction flash pour arrondir le chiffre à l'entier le plus proche.
Nous définissons dans la code ci-dessus que "timer" vaut "duration" (pas très clair tout ça :p)

En fait nous allons créer une zone de texte dynamique qui va afficher la valeur que renvoie "timer" à savoir "duration".
Sélectionner l'outil texte dans le panneau des outils et tracer une zone de texte :

Comme vous le constater dans l'image ci-dessus nous avons mis le texte en "texte dynamque" et avons inscrit dans le champ "var" la valeur "timer".
Je suis sure que tout deviens plus clair maintenant :)

Lancer votre vidéo, vous verrez apparaitre le temps de votre vidéo exprimé en secondes.

Pour avoir le temps qui s'écoule en temps réel nous devons dans un premier temps ajouter une variable qui correspondra au temps total de la vidéo comme on a pu le faire avec la variable "timer" ci-dessus. Ajoutons donc la variable nommé "duree" dans notre précédente fonction, ce qui nous donne :

Voici maintenant la fonction qui va nous permettre d'avoir un timer temps réel :

la variable qui affiche le résultat est la variable "temp" vous devez donc créer ensuite un texte dynamique avec comme nom dans le champ "var" : "temps". Tester votre vidéo, vous devriez obtenir quelques dans ce style.

Et voila :) Dans ce tuto nous nous arrêterons la.
Dans la partie II du tutorial qui est en cours de rédaction nous nous attaquerons à la gestion du volume et la création d'une "seekbar" pour pouvoir naviguer dans la vidéo comme bon nous semble. En attendant voici un exemple de lecteur FLV créer avec cette méthode.

Bon courage à tous et merci d'avoir lu ces quelques lignes :)
Sky