Aller au contenu | Aller au menu | Aller à la recherche

Site membre du réseau Izardev et LCNET

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 du fichier FLA avec FLV

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 :

Création du TextField pour accueillir les sous-titres

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 :)

sous_titres.zip 1,15 MB

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

Partagez cet article !

  • Delicious
  • Stumbleupon
  • Digg
  • Facebook
  • Google
  • Linkedin
  • Yahoo Buzz
  • Twitter
Vous avez apprécié cet article ?

Commentaires S'abonner au flux RSS des commentaires

  1. Bonjour,
    merci pour le tutoriel je vais pouvoir enfin développer mon propre lecteur!
    merci encore pour l'article et bonne continuation.
  2. très bien, je vais développer mon propre lecteur.
    merci encore pour votre aide.
  3. Tout s'explique... si vous utilisez l'animation de ce site, cela ne fonctionnera pas en l'état. En fait, la télécommande de FLVPlayback doit faire un FullScreen sur le composant video (donc sans le TextField).

    Le mieux pour vous est de faire vos propres boutons de contrôle, ou ajouter votre bouton de fullscreen par dessus celui-ci, bouton qui lui zoomera l'animation complète.
  4. Bonjour,
    le fichier est accessible ici : http://.../q4wkYEqv7
    au niveau police, je suis en Arial.
    merci encore pour votre aide.
  5. Votre code semble correct, êtes-vous certain que l'événement est appelé ?
    Une autre possibilité : tentez de supprimer l'anti-alias et utiliser une police par défaut, genre system afin de voir si le problème ne viendrait pas de la.
    Sinon, publiez votre fla quelque part que j'y jette un oeil :)
  6. Audax | fullscreen |
    Bonjour,
    merci pour votre réponse, j'ai essayé en ajoutant ce code,
    mais aucun changement, il doit manquer quelque chose, ce serait super si vous pouviez m'aider.
    merci.

    stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenEventHandler);

    function fullScreenEventHandler(e:FullScreenEvent):void {
    if (e.fullScreen) {
    this.txt_sous_titres.x = 10;
    this.txt_sous_titres.y = 10;
    } else {
    this.txt_sous_titres.x = 0;
    this.txt_sous_titres.y = 190;
    }

    }
  7. Bonjour,

    Lorsque vous activez le fullscreen, il faut déplacer et modifier la taille du textfield en conséquence (écoutez l'événement FullScreenEvent.FULL_SCREEN -je n'ai pas regardé faites gaffe-).
    En fait, le textfiels est toujours quelque part, mais bien caché :)
  8. Audax | fullscreen |
    Bonjour,
    en fullscreen, les sous-titres ne s'affichent plus, avez vous le même problème, et comment avez vous corriger ce problème,
    merci.
  9. Stéphane Le Merre | Re : Obligation du FLVPlayBack |
    Non, vous pouvez utiliser le composant de base (VideoPlayer), ou même n'importe quel lecteur, ça fonctionne également.
  10. | Obligation du FLVPlayBack |
    Bonjour,
    Très bon article, mais j'aimerais savoir si ajouter du sous-titre XML externe était possible sans avoir à utiliser le FLVPlayBack ?
    Merci beaucoup.

Ajouter un commentaire

Les commentaires sont tous validés par un modérateur, votre commentaire n'apparaît pas directement sur le site.
Aucun support n'est assuré ici, vous pouvez néanmoins laisser vos remarques et critiques sur l'article, les points de vue pertinents sont toujours les bienvenus.