Gestion des vidéos avec Flash » Flash et Actionscript

Ligams » Publications » Flash et Actionscript » Gestion des vidéos avec Flash

Gestion des vidéos avec Flash - Tutoriel 1

Cet article explique comment ajouter facilement des vidéos grâce à Flash (peu-importe la version utilisée... Flash CS3, CS4, MX...). La vidéo fût d'abord considérée comme un élément secondaire sur internet, ce n'est plus du tout le cas aujourd'hui avec les plates-formes de média comme Youtube, Dailymotion qui proposent aux internautes la diffusion de spot vidéos, voire de films plus longs.

Il s'agit d'un premier pas, je ne recommande pas d'intégrer les vidéos sur vos sites de cette manière.

Il y a plusieurs approches pour lire des vidéos avec Flash, on peut embarquer directement la vidéo dans le SWF, la charger dynamiquement au format FLV, utiliser un serveur de streaming (FMS, Red5) ou le simuler avec un fichier PHP Streaming.

Encoder la vidéo au format FLV
Méthodes de diffusion
Embarquer la vidéo dans le SWF
Piloter la vidéo avec Actionscript
Conclusion

Encoder sa vidéo

La première des choses à faire est tout d'abord d'encoder sa vidéo en l'un des formats supportés par le player Flash. Nous avions présenté récemment FFMPEG, mais il est possible d'utiliser l'encoder livré avec la suite CS d'Adobe.

Vous obtiendrez des fichiers des fichiers au format FLV lisibles pour le Player Flash.

Diffuser de la vidéo avec Flash

Embarquer la vidéo directement dans le SWF,
Charger une vidéo externe,
Faire du streaming avec PHP,
Utiliser un serveur de streaming,

Embarquer de la vidéo dans le SWF

Pour débuter, vous pouvez vous contenter d'importer directement la vidéo dans la bibliothèque Flash. Importer tout d'abord la vidéo au format FLV dans la bibliothèque de votre animation :

Sélectionnez ensuite votre vidéo FLV, puis choisissez Incorporer le fichier FLV dans SWF et le diffuser dans le scénario :

Vous arrivez ensuite sur un écran qui vous propose une sélection, choisissez Vidéo intégrée.

Terminez le processus, vous devriez maintenant voir apparaître dans la bibliothèque votre vidéo avec une icône de film. Faites maintenant glisser celui-ci dans un clip comme sur la figure ci dessous :

Puis compilez l'animation, vous obtenez votre film lu en boucle dans une animation. Ajoutons y un peu de code pour piloter cette vidéos.

Un petit peu d'actionscript

Avoir incorporé une vidéo dans flash, c'est bien beau, mais chacun veut pouvoir piloter celle-ci sur des actions basiques : Play, Pause, Mute, Stop. Avec très peu de code, nous allons implémenter ces fonctions.

Création des calques

Pour que notre animation soit ordonnée, nous allons commencer par créer de nouveaux calques en plus du calque qui contient notre film : un calque Action et un calque Boutons.

Par convention, on place en général le calque Action au dessus de tous les autres calques (Ce calque est en général nommé Action, Actions, 010101 selon les développeurs).

Ajout des boutons

Tout d'abord ajoutez 4 boutons sur la scène (pour Play, Pause, Mute, Stop). Dessinez grossièrement 4 clips ou utilisez les composants fournis par flash.

Il faut maintenant placer des noms d'occurrence sur chaque bouton pour pouvoir interagir avec : pour cela, sélectionnez le bouton sur la scène, puis entrez un nom d'occurrence dans la fenêtre propriétés :

Nous nommerons ces boutons bt_play, bt_pause, bt_stop et bt_mute. Les boutons sont maintenant prêts à recevoir les instructions Actionscript. Placer également un nom d'occurrence sur le clip contenant le film afin de pouvoir interagir avec dans l'AS, nous l'appellerons mc_film.

Actionscript

Ouvrez tout d'abord une fenêtre actions (sélectionnez le calque Action, puis cliquez sur la touche F9).

Entrez le code suivant :

_root.bt_play.onRelease = function()
{
    _root.mc_film.play();
};
_root.bt_pause.onRelease =  function()
{
    _root.mc_film.stop();
};
_root.bt_stop.onRelease =  function()
{
    _root.mc_film.gotoAndStop(1);
};
_root.bt_mute.onRelease = function()
{
    _root.stopAllSound();
}

Puis compilez l'animation. Votre vidéo est maintenant pilotable grâce aux boutons que vous venez d'intégrer.

Conclusion

On peut donc facilement faire un petit player flash en incorporant la vidéo, je disais au début du tutoriel que cette méthode n'était pas recommandée : en effet, pour visualiser la vidéo, il faudra attendre que l'intégralité de celle-ci soit chargé avant de commencer à lire l'application ce qui n'est pas souhaitable.

C'est pourquoi nous parlons de streaming, il est possible de débuter la lecture pendant son chargement. Ce sera l'objet du second tutoriel.

Pour aller plus loin, intégrez vos Vidéos avec le composant Video, les classes NetStream et NetConnection.