Control du chargement de site & du chargement de clip

Dernière mise à jour le par pijaku .

Flash - Control du chargement de site & du chargement de clip

C'est parti

Chargement de site

Chargement de l'animation principale.

Préparation

Vous avez votre site dans flash, on dira que le site commence à la séquence "Site" pour l'exemple, à vous d'adapter.

  • Créez une nouvelle séquence (Fenêtres > Autres panneaux > Séquences, et appuyez sur le +)
  • Nommez là "Chargement" (en double cliquant sur le nom)
  • Déplacez là dans la liste (glisser déposer) de sorte qu'elle soit en première place (tout en haut).
  • Fermez la fenêtre des Séquences.

Les éléments graphiques

Vous vous retrouvez maintenant face à une séquence vide, avec un calque vide
Nommez ce calque "Eléments", et créez en un autre au dessus, nommé "Chargement" ou "Actions".
Sur le calque "Eléments", créez un clip rectangulaire (la future barre de chargement), et nommez son occurrence (dans le panneau de propriété) "Barre".
Sur ce même calque, créez un champ texte dynamique de nom d'occurrence "Pourcentage".

Les éléments graphiques sont prêts. Si je récapitule, nous sommes sur la séquence "Chargement" contenant 2 calques, un nommé "Actions", l'autre "Eléments". Sur ce dernier, nous avons un clip nommé "Barre" et un champ texte dynamique nommé "Pourcentage".

Le code Action Script

Sélectionnez le calque "Actions", la première image (d'ailleurs il n'y en a qu'une) et ouvrez le panneau d'Action Script (F9). Il doit y avoir écrit en haut dans le titre de la fenêtre "Actions - Image", sinon c'est que vous n'avez pas sélectionné l'image sur le calque "Actions".
Il nous faut noter ceci :

Premièrement, on type les éléments graphique pour l'aide à la saisie du code Action Script :

var Barre:MovieClip;
var Pourcentage:TextField;

Ensuite, nous passons le champ texte dynamique en html, histoire que ce soit plus joli :

Pourcentage.html = true;

Puis nous allons définir une fonction onEnterFrame qui va nous permettre de savoir ou nous en sommes du chargement.
Une fonction onEnterFrame, est une fonction récurrente, c'est à dire exécutée en permanence tant que l'on ne l'arrête pas (la supprime pas). Sur une animation cadencée à 12 images par secondes (valeur par défaut) le code contenu dans la fonction onEnterFrame sera exécuté 12 fois par secondes.

function onEnterFrame(){
    // calcul du pourcentage chargé
    var pc = _root.getBytesLoaded()*100/_root.getBytesTotal();
    // on redimensionne la barre de progression du chargement.
    Barre._xscale = pc;
    // on met à jour le champ texte
    Pourcentage.htmlText = "Chargement : <b>"+Math.round(pc)+"%</b> effectué";
    // on vérifie si le chargement est complet
    if (pc >= 100){
        // si oui
        // on supprime la fonction onEnterFrame qui ne sert plus.
        delete onEnterFrame;
        // on va à la séquence suivante, le site.
        play();
    }
}

Enfin il ne faut pas oublier de mettre un stop(); pour ne pas passer directement à la séquence "Site".

stop();

Récapitulation du code :

var Barre:MovieClip;
var Pourcentage:TextField;

Pourcentage.html = true;

// on défini une fonction onEnterFrame, 
// exécutée en permanence pour contrôler le chargement
function onEnterFrame(){
    // calcul du pourcentage chargé
    var pc = _root.getBytesLoaded()*100/_root.getBytesTotal();
    // on redimensionne la barre de progression du chargement.
    Barre._xscale = pc;
    // on met a jour le champ texte
    Pourcentage.htmlText = "Chargement : <b>"+Math.round(pc)+"%</b> effectué";
    // on vérifie si le chargement est complet
    if (pc >= 100){
        // si oui
        // on supprime la fonction onEnterFrame qui ne sert plus.
        delete onEnterFrame;
        // on va à la séquence suivante, le site.
        play();
    }
}

stop();

Et voilà le préchargement pour votre site est fini.
Vous pouvez maintenant imaginer ce que vous voulez comme animation de chargement...
N'oubliez pas de mettre un stop a la fin de votre séquence "Site" (ou à la première image s'il y en a qu'une) pour ne pas revenir en boucle au chargement.
Pour tester votre chargement dans Flash, vous devez compiler votre animation une première fois (CTRL+ENTRER) et refaire CTRL+ENTRER une seconde fois, sans avoir refermé la fenêtre.

Chargement de fichier externe

Nous allons commencer avec le chargement de clip externe, une image jpg fera parfaitement l'affaire.
Donc, copiez vous une image jpg dans votre dossier de travail, et nommez là "image.jpg".

Le modèle de fonctionnement est le même que pour le chargement de l'animation principale. Nous allons utiliser un onEnterFrame pour vérifier le chargement de l'image dans le clip.

Un clip (img/jpg et png/gif en plus pour Flash8) se charge soit sur un niveau (loadMovieNum), soit dans un movieclip préexistant (clip.loadMovie).
Nous allons, nous, voir comment faire le chargement et le contrôler dans un clip (je préfère personnellement cette méthode)

Les éléments graphiques

Donc, vous devez créer un clip vide.
Soit via la bibliothèque (cliquez sur le menu de la bibliothèque > nouveau symbole) et placez le sur la séquence,
Soit en dessinant une forme, la sélectionnant, appuyez sur F8 pour créer un symbole. Et supprimer le dessin dans ce symbole.

Vous avez donc un clip posé sur la séquence.
Nommez ce clip "Image".
Nous allons ajouter aussi un bouton qui lancera le chargement, et nommez son occurrence : "ChargerImage"
Faites un nouveau calque et nommez le "Actions".

le code Action Scipt

Sélectionnez le calque "Actions" et ouvrez le panneau d'actions.

On va créer un fonction charger(nomImage) qui créera la fonction onEnterFrame (pour ne l'avoir que quand c'est nécessaire) et lancera le chargement de l'image.

On commence par typer les éléments graphiques pour l'aide à la saisie :

var Image:MovieClip;
var Barre:MovieClip;

Puis on cache la barre de chargement par défaut.

Barre._visible = false;

On crée la fonction charger :

function charger(url){
    // on affiche la barre de chargement
    Barre._visible = true;
    Barre._xscale = 0;
    // création de la fonction récurrente de contrôle de chargement
    onEnterFrame = function(){
        // calcul du pourcentage chargé
        var pc = Image.getBytesLoaded()*100/Image.getBytesTotal();
        // ajustement de la taille de la barre de chargement
        Barre._xscale = pc;
        if (pc >= 100){
            // si c'est chargé, on stop (supprime) le contrôle
            delete onEnterFrame;
            // et on re-cache la barre de chargement
            Barre._visible = false;
        }
    }
    // ici on lance le chargement de l'image dans le clip
    Image.loadMovie(url);
}

Il ne reste plus qu'a mettre l'appel de la fonction de chargement sur le bouton :

on(release){
    charger("image.jpg");
}

Vous pouvez modifier ce script pour charger des sons MP3, ou encore des fichiers XML ou les données LoadVars (seulement de fichier brut txt car avec un script serveur genre php ça ne marche pas, le texte ecrit n'ayant pas de taille prédéfini a l'avance)

Pour les sons :
Créez un objet Sound, chargez un MP3, en non streaming et contrôlez son chargement avec getBytesLoaded()

var son:Sound = new Sound()
son.loadSound("audio.mp3",false);

Le onEnterFrame et le même, en ciblant le son et non le clip bien sur.
Il en est de même avec les XML et LoadVars, référez vous a l'aide plus plus de détails.

Récapitulation du code :

Sur Image dans le scénario

var Image:MovieClip;
var Barre:MovieClip;

Barre._visible = false;

function charger(url){
    // on affiche la barre de chargement
    Barre._visible = true;
    Barre._xscale = 0;
    // création de la fonction récurrente de contrôle de chargement
    onEnterFrame = function(){
        // calcul du pourcentage chargé
        var pc = Image.getBytesLoaded()*100/Image.getBytesTotal();
        // ajustement de la taille de la barre de chargement
        Barre._xscale = pc;
        if (pc >= 100){
            // si c'est chargé, on stop (supprime) le control
            delete onEnterFrame;
            // et on re-cache la barre de chargement
            Barre._visible = false;
        }
    }
    // ici on lance le chargement de l'image dans le clip
    Image.loadMovie(url);
}

et sur le bouton

on(release){
    charger("image.jpg");
}

FIN

_Benjy

Ce document intitulé « Control du chargement de site & du chargement de clip » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Random et suppression
Interpolation, guide de mouvement, outils et autre...
Rejoignez-nous