Choix de la langue :

Menu Principal

Ligams » Publications » Flash et Actionscript » Chargement d'un fichier XML avec Actionscript 3 et preloader

Chargement d'un fichier XML avec Actionscript 3 et preloader

Cas concret : un lecteur de flux RSS en Flash

Cet article explique comment charger un fichier XML et récupérer son contenu en Actionscript 3, pendant le chargement, on affichera le pourcentage effectué. Le fichier XML de référence sera le RSS du site dont nous afficherons la dernière news une fois chargé.

Nous allons externaliser un maximum de code dans une classe actionscript à part, le fichier Main.as.

création du fichier FLA

Créez tout d'abord le Fichier FLA, et attachons le à la classe Main ( Onglet propriétés » Classe du document dans l'interface de Flash), et créer ensuite le fichier Main.as dans le même répertoire.

Dans ce fichier FLA, créez 2 images clés, et nommez les en utilisant les flags (onglet propriétés de l'image clé » champ Image), la premiere image clé sera nommée FL_CHARGEMENT et la deuxième FL_CHARGE.

Sur les 2 images clés, ajoutez un calque pour y mettre un peu d'Actionscript, nous externaliserons tout le reste du code dans la classe. La première image clé servira pour le chargement, la seconde pour afficher les données du fil RSS.

Dans la première image clé

this.stop();
this.Init();

Nous allons également créer un champ texte dynamique (TextField) que nous nommerons "pourcentage", il renseignera sur le taux de chargement de l'animation Flash, plus particulièrement du XML.

dans la seconde image clé

this.stop();
this.Start();

Dans le seconde image clé, créez 5 champs texte qui servirons à afficher :

• le titre général du flux RSS
• la description du flux RSS
• le titre du premier article
• la date du premier article
• la description du premier article

Nommez les respectivement : titre, description, newstitre, newsdate et newsdescription.

C'est maintenant terminé pour le fichier FLA, occupons nous de construire sa classe Actionscript.

Création du fichier .AS

Ouvrez maintenant le fichier Main.as, créez le constructeur, les constantes et les méthodes que nous avons crée dans le FLA, vous devriez avoir :

package  
{
    import flash.display.*;
    import flash.net.*;
    import flash.events.*;

    public class Main extends MovieClip
    {
        public const urlXMl:String = "rss.xml";
        public const FL_CHARGEMENT = "FL_CHARGEMENT";
        public const FL_CHARGE = "FL_CHARGE";
        //pour stocker le xml que nous allons charger
        public var rss:XML;
        /**
         * Main : constructeur
         */
        public function Main() 
            
        }
        /**
         * Init : initialise l'animation
         */
        public function Init():void
        {

        }
        /**
         * Renseigne les champs en lisant le flux RSS chargé
         */
        public function Start():void
        {

        }
    }
}

Fichier Main.as

la méthode Init()

c'est la méthode Init qui, comme son nom l'indique, initialise l'animation, elle va lancer le chargement du fichier XML et attribuer les écouteur des événement spéciaux :

• l'échec du chargement (ce qui ne devrait pas arriver),
• pendant le chargement,
• et la fin du chargement.

public function Init():void
{
    trace("Main.Init");
    var request:URLRequest = new URLRequest(this.urlXMl);
    var loader:URLLoader = new URLLoader();
    //on attache l'événement en cas de plantage
    loader.addEventListener(IOErrorEvent.IO_ERROR, this.Failed, false, 0, true);
    //pour afficher la progression
    loader.addEventListener(ProgressEvent.PROGRESS, this.Loading, false, 0, true);
    //chargement terminé
    loader.addEventListener(Event.COMPLETE, this.Complete, false, 0, true);
    
    //lancement du chargement
    loader.load(request);
}

Pour lancer le téléchargement du XML, nous utilisons les classes du package Flash.net : URLRequest et URLLoader.

Gestion des évenements du loader que l'on souhaite écouter :

Pendant le chargement

On récupère le pourcentage de du XML chargé, et on l'affiche :

public function Loading(evt:ProgressEvent)
{
    trace("Main.Loading");
    var loader:URLLoader = evt.target as URLLoader;
    
    var t:TextField = this.getChildByName("pourcentage") as TextField;
    var complete:Number = Math.round(loader.bytesLoaded / loader.bytesTotal * 100);
    
    t.text = complete +" %";
    
}

A la fin du chargement

On initialise l'attribut rss de la classe Main, et on joue la seconde frame :

public function Complete(evt:Event):void
{
    trace("Main.Complete");
    //on initialise l'attribut rss
    this.rss = new XML(URLLoader(evt.target).data);
    //une fois le XML chargé et l'attibut initialisé, on lance la seconde frame
    this.gotoAndStop(this.FL_CHARGE);
}

La méthode Start

La méthode start est appelée à l'arrivée sur la seconde Frame, elle va simple attribuer des valeurs aux 5 champs textes que nous avons crée. Actionscript 3 gère de manière native une forme particulière de XPath, comme nous l'avons déjà vu pour la création de sous-titres pour les vidéos FLV avec FLVPlayback .

C'est exactement la même chose ici, l'objet XML this.rss est déjà mappé :

public function Start():void
{
    //trace(this.titre+this.description);
    TextField(this.titre).text = this.rss.channel.title;
    TextField(this.description).text  =  this.rss.channel.description;
    TextField(this.newstitre).text = this.rss.channel.item[0].title;
    TextField(this.newsdate).text = this.rss.channel.item[0].pubDate;
    
    //notez que l'on peut mettre du HTML dans un TextField, c'ets relativement limité cela dit
    TextField(this.newsdescription).htmlText = this.rss.channel.item[0].description;
    
    //on place un petit lien sur le titre pour la forme
    TextField(this.newstitre).addEventListener(MouseEvent.CLICK,this.NewsTitreRelease,false,0,true)
}

Ainsi, nous avons crée facilement un petit lecteur RSS propulsé par Flash.

Télécharger la source FLA

Ce fichier contient:

• La source FLA
• Le fichier SWF
• un fichier rss.xml exemple
• la classe.as

Concernant l'avertissement de sécurité lors d'une exécution locale :
Pour faire fonctionner l'animation sans modifier les paramètres de sécurité, modifiez l'url dans Main.as de "http://www.ligams.com/rss.xml" à "rss.xml" et recompilez.
Notez que cet avertissement ne s'affichera que si vous exécutez le fichier SWF en local. exécutez le à partir d'une page Web sur un serveur et il n'en sera rien.

Si cet article vous a été utile, ou même si vous utilisez ces sources en production, faites un petit lien vers l'article ;)

Commentaires