actionscript, animation, Flash

Nous allons voir, dans cet article, un préchargement simple via une zone de texte (TextField) en mettant l’accent sur son fonctionnement.

Nous aborderons cette technique qui affiche la progression sous forme de pourcentage en introduisant quelques principes de base de conception d’une animation Flash.

I. Préparation

1. Créez un fichier Flash (AS 2.0)
2. Renommez le seul calque présent en Préchargement
3. Ajoutez 2 nouveaux calques nommés AS2 et Animation
4. Munissez-vous d’une grande photo (200 Ko suffiront)

Cette première étape permet d’organiser son projet :

• les symboles du préchargement (1 zone de texte dans notre cas) seront placés sur la première image du calque Préchargement
• le code du préchargement sera inséré sur la première image du calque AS2
• les symboles de l’animation (1 photo dans notre cas) seront placés sur la deuxième image du claque Animation

Organisé ainsi, le calque AS2 est destiné à contenir l’ensemble de votre code AS2.0.

II. Partie graphique

a. La zone de texte de préchargement (TextField)

1. Sélectionner la 1ère image du calque Préchargement
2. Sélectionnez l’outil Texte (racc : ‘T’)
3. Créez, sur la scène, une zone de texte dynamique au contenu centré.
4. Nommez l’occurrence prechargementTF
5. Choisissez la police et sélectionnez l’option Anti-alias pour la lisibilité comme méthode de rendu
6. Intégrez les caractères 0,1,2,3,4,5,6,7,8,9,%

L’option Anti-alias permet l’utilisation de polices embarquées. Autrement dit, lors de la publication, les caractères sont vectorisés puis intégrés à votre animation. Le swf rompt ainsi le lien avec les polices présentes sur le poste client et permet un affichage de qualité (lissage du texte).

Ce fonctionnement pourrait être assimilé à une fonction JavaScript qui remplacerait chaque caractère d’une page par une image.

Pour une zone de texte dynamique dont le contenu n’est pas défini à l’avance, Flash exige la déclaration des caractères utilisés pour qu’il puisse les vectoriser et les intégrer. Bien sûr cette option alourdit l’animation, il est donc nécessaire de s’interroger sur son utilité pour le préchargement d’une animation de petite taille.

b. L’insertion de la photo

1. Sélectionner la 2ème image du calque Animation, faites un clic droit puis sélectionnez Insérez une image clé vide.
2. Glissez/déposez la photo sur la scène.

Par défaut un swf est lu de la 1ère image de la scène jusqu’à la dernière puis revient à la première et ainsi de suite selon une cadence que l’on peut définir (par défaut : 12 images par seconde). En positionnant notre animation sur la 2ème image nous nous assurons que le lecteur affiche dans l’ordre le préchargement puis notre photo.

Il faudra donc piloter notre animation sous peine de voir défiler indéfiniment le préchargement puis la photo.

III. Le code (AS 2.0)

1. Sélectionner la 1ère image du calque AS2
2. Dans le fenêtre Actions (racc : ‘F9′) insérer le code ci-dessous

//On stoppe la lecture du swf
stop();

//A la cadence définie (12 fois par seconde dans notre cas)
_root.onEnterFrame = function() {
    //On renseigne le ratio contenu téléchargé / contenu total à télécharger
    _root.prechargementTF.text = Math.round( _root.getBytesLoaded() / _root.getBytesTotal() * 100 )+"%";

    //Si tout est téléchargé
    if(_root.getBytesLoaded() == _root.getBytesTotal()) {
        //On supprime cette fonction
        delete _root.onEnterFrame;

        //On passe à la 2ème image du swf et on stoppe à nouveau la lecture
        _root.gotoAndStop(2);
    }
}

stop(); permet d’arrêter la lecture sur l’image où est inséré le code.

_root correspond grossièrement au symbole « maître », celui qui contient tous les autres symboles de l’animation. Il permet donc de cibler les symboles que nous avons placé sur la scène. Ainsi _root.prechargementTF permet de cibler le symbole qui a pour nom d’occurence prechargementTF et qui est positionné sur la scène.

onEnterFrame est un événement invoqué continuellement à la cadence de l’animation (événement affecté dans notre cas sur le symbole « maître »).

IV. Test

1. Faites une 1ère fois ‘Ctrl+Maj’ pour visualiser votre animation
2. Faites  ‘Ctrl+B’ pour afficher le testeur de bande passante
3. Faite une 2ème fois ‘Ctrl+Maj’ pour simuler le téléchargement

Nous verrons dans un prochain article comment effectuer un préchargement via une barre de progression.