Vidéo et Sous-titres sous Flash : FLV, cuePoints et Actionscript 3

Cet article montre comment créer des sous-titres d’un contenu vidéo au format XML . Vous devez au préalable maîtriser la création de vidéos au format FLV. (vous pouvez pour cela utiliser FFMPEG ou même Flash directement). Il s'agit d'un pas de plus vers l'accessibilité numérique de Flash.

Il est basé sur un article original de Fintan Boyle [en], sur actionscript.org [en], qui m'a gentiment donné l'autorisation de d'utiliser; ce n'est par contre pas le même, du fait que je n'utilise pas de bibliothèque externe, et que j'utilise Actionscript 3. Il a donc été mis au goût du jour.

Créer le fichier Flash

Placement du FLVPLayBack sur la scène

Nous utiliserons le composant natif Flash FLVPlayBack. Premièrement, vous devez créer un nouveau fichier FLA et créer 2 images clés. Faites ensuite glisser un composant FLVPlayBack sur la scene. Pour plus de compréhension dans cet article, nous appellerons l'instance de ce composant mon_flv.

Sélectionnez une enveloppe dans les paramètres pour obtenir les boutons jouer/stop, celle que vous souhaitez, ça n'a aucune importance dans le cadre de cet article.

Création d'un Champ texte

Dans un calque plus élevé, nous créerons également un champ texte dynamique TextField . Apellez ce champ texte txt_sous_titres comme illustré ci dessous :

Notez que :

• ll vaut mieux mettre ce champ en multilignes,
• le texte est centré, et en gras pour une meilleure lisibilité,
• le texte est en blanc, et afin d'éviter les problèmes de lecture sur les fonds clairs, vous pouvez (devez) appliquer un filtre à ce champ texte; personnellement j'ai choisi l'ombre portée : (flou x et y : 4, angle : 0, distance : 0, intensité : 100%), ainsi, le texte reste lisible même si le fond du film est blanc également.

Maintenant, le FLA est prêt, passons à l'actionscript.

L'actionscript

A propos des CuePoints

Adobe appelle CuePoint un point de la vidéo ou le composant FLVPlayBack va lancer un événement pendant que la vidéo est jouée.

Nous aurons donc à créer un CuePoint

pour chaque point de la vidéo ou nous devrons afficher un sous-titre. Il est à noter qu’il est possible de définir directement ces CuePoints dans le composant FLVPlayBack, dans le panneau paramètres (situé dans l’inspecteur de composant).

Nous allons donc maintenant charger dynamiquement la vidéo et son fichier de sous-titres, en utilisant Actionscript :

Fichier de sous-titres

Chaque point requiert un nom, un temps (en secondes) pour afficher le texte. Ces informations, nous les stockerons dans un fichier XML, nous utiliserons la structure suivante :

<?xml version="1.0" encoding="utf-8" ?>
<data>
    <cuepoints>
       <!-- 
       attribut time = temps en secondes
       attribut nom = nom du cuepoint
       -->
        <cuepoint time="1" name="cue_1">
            <![CDATA[premier]]>
        </cuepoint>
        <cuepoint time="2" name="cue_2">
            <![CDATA[deuxième ]]>
        </cuepoint>
        ...
    </cuepoints>
</data>

Parser le fichier XML

Actionscript 3 offre un support natif de XPath, il s'agit plus d'un objet mappé que d'un réel XPath; nous utiliserons cette manière de procéder. Voici comment nous chargeons notre fichier XML :

var request:URLRequest = new URLRequest("film.xml");
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, SubTitlesLoaded, false, 0, true);
loader.addEventListener(IOErrorEvent.IO_ERROR, this.NoSubTitle, false, 0, true);
loader.load(request);
 
function SubTitlesLoaded(e:Event = null):void
 {
            var szXML:String = URLLoader(e.target).data;
            this.mon_xml = new XML(szXML);
}

Notre fichier XML est maintenant chargé dans une instance de la classe XML, appellée mon_xml.

Chargement de la vidéo

Maintenant que l'on a à disposition nos sous titres, il faut charger la vidéo FLV. Pour cela, rien de plus simple :

this.mon_flv.load("film.flv");

Assigner les CuePoint à la vidéo

Nous allons maintenant assigner chacun des CuePoint du XML à la vidéo :

//on récupère un XMLList de CuePoint
var list:XMLList = XMLList(this.mon_xml.cuepoints.cuepoint);
//et on boucle : attention, length de XMLList est une méthode !
for (var i:Number = 0; i <= list.length(); i++)
{
     //on récupère chacune des propriétés du XML grâce au Mappage de l'objet
      var time:Number = Number(list[i].@time);
      var name:String = list[i].@name;
      var _texte:String = list[i].toString();
      //on assigne un nouveau CuePoint à notre FLV
      this.mon_flv.addASCuePoint(time, name, { texte:_texte } );
}

Maintenant, nous devons ajouter l'écouteur à mon_flv pour qu'il affiche le texte correspondant :

A chaque CuePoint, la méthode showSubtitle sera donc appelée, pour récupérer facilement l'object CuePoint correspondant, le composant FLVPlayBack dispose d'une méthode findNearestCuePoint :

function showSubtitle(e:MetadataEvent):void
{
            //on récupère l'objet CuePoint
            var current:Object = this._flv.findNearestCuePoint(Math.floor(this._flv.playheadTime));
            //on assigne la valeur à notre textField
            this.txt_sous_titres.text = current.parameters.texte;
}

Exemple

Téléchargez la source FLA, si d'aventure vous veniez à l'utiliser en production ou même si ce tutoriel vous a aidé, n'hésitez pas à citer cette source :)

Vous constaterez avec effroi que les sous-titres ne sont pas très bien synchronisés, mais j'ai jamais dit que cela n'était pas long à faire !

Articles connexes

• Intégration d'animations flash : SwfObjet, Embed, Object
• Flash et l'accessibilité (Partie 1)