Flash on line - Leçon n° 11 :

Création d'un Preload simple
et en pourcentage.

Bonjour à tous, je suis de retour avec une toute nouvelle leçon. Beaucoup de personnes me l'ont demandée alors elle est là pour vous !
Alors les preload, ou loading ou préchargements sont de petites animations qui, placées au début d'une animation un peu lourde à télécharger, sont là pour faire patienter l'internaute. Cela peut être une barre de chargement, un pourcentage ou une animation quelconque du moment que les scripts soient là !

Pour le plaisir de tous, nous allons commencer :o)

I. PRELOAD SIMPLE

Étape 1 : comment ça marche ???

Tout d'abord nous allons revoir ce que c'est qu'un preload : c'est une animation qui se joue tant que celle principale n'est pas téléchargée partiellement ou totalement. Donc si l'animation est téléchargée on peut commencer à la jouer, sinon on rejoue le preload. Simple non? Au travail maintenant !

Étape 2 : la création du clip

Dans votre animation existante, insérer une nouvelle scène (ou séquence si vous travaillez sur MX) appelez-la Preload et placez-la au début de votre animation grâce à votre inspecteur de scène.

Faites Ctrl+F8 et sélectionnez Clip. Ensuite faites ce que vous voulez, ce clip va jouer en boucle suivant la taille de l'animation à télécharger, mais ne soyez pas trop gourmand et faites quelque chose d'assez léger car c'est quand même le but !! ;op

Étape 3 : les actions scripts

Une fois votre clip terminé, créez alors un nouveau claque et insérez 2 images clé vides à l'avant et dernière frame du clip (F7... oui c'est ça!!). Nous allons pouvoir y insérer nos fantastiques actions !
Choisissez If Frame Is Loaded et sélectionnez la dernière scène de votre animation ainsi que le numéro de la dernière image. Ajoutez une autre action (sur la même image clé) entre le If et le End et sélectionnez la scène et l'image que vous voulez jouer (le début de votre animation quoi !)

Donc si vous avez bien compris : Si le film est téléchargé Alors on peut commencer à jouer l'animation.

Maintenant cliquez sur la deuxième image clé vide. Ajoutez l'action Go To and Play image 1 de la scène courante. Cela veut dire que si l'animation n'est pas téléchargée entièrement et bien le clip se remet à jouer.

Étape 4 : Le test

Insérez à présent votre clip sur la première image clé de la scène Preload. Faites Ctrl+Entrée pour tester votre animation. Vous pouvez même choisir plusieurs vitesses de modem qui sont proposées dans la rubrique Déboguer.

Voilà, c'est pas très compliqué non? Et assez facile à piger. Maintenant nous allons faire la même chose mais avec un pourcentage !! Allez on y go !

II. Preload avec pourcentage

Étape 1 : Créer les éléments

Créer un movie clip Ctrl+F8 et nommez-le barre. Puis dessinez un rectangle représentant la barre de téléchargement. Faites attention à bien aligner le bord gauche de la barre sur l'origine (petite croix).

Revenez sur la scène et mettez le clip là où vous voulez qu'il apparaisse.

Sélectionnez le clip et faites F8. Vous allez faire un autre clip avec cet élément. Appelez-le preload.

Faites un nouveau calque dans ce symbole et copiez-collez la barre du calque 1 sur le calque 2. (bien un sur l'autre !)
Modifiez sa couleur via les palettes teintes etc. Sélectionnez la deuxième barre que vous venez de retouchez sur le calque 2 et dans ses propriétés nommez la "barre".

Créer maintenant un nouveau calque sur le calque 2 et appelez-le Chiffre. Placez alors juste sous la barre un champ texte dynamique et nommez sa variable num.

Maintenant les choses se compliquent mais on va y aller doucement et tout va bien se passer ! (on se croirait chez le dentiste lollll)

Placez votre movie clip "preload" sur la scène et attribuez-lui l'action suivante :

onClipEvent (enterFrame) {
num =_root.getBytesLoaded()/_root.getBytesTotal()*100;
num=math.Round(num);
barre._xscale=num;
if (num>99) {
_root.gotoAndStop(25);
}
}

Explications :
- la variable num : correspond à une simple règle de 3 : le poids de l'animation chargé est divisé par le poids de l'animation totale et le tout est multiplié par 100.
- Math.Round () : permet d'arrondir le résultat.
- si la variable num est supérieure à 99 %, alors on se déplace à la frame 25.

A présent prolongez votre image jusqu'à la frame 25. Créez un nouveau calque et placer votre animation principale sur la frame 25 (n'oubliez pas de faire F7 !)

Testez !! vous ne voyez rien : c'est normal c'est normal, il faut appuyer de nouveau pour voir la barre de préchargement en action!

Alors ça vous a plu? Oh j'en suis sûre et j'espère que tous ceux qui m'ont demandé cette leçon seront contents :o))

Téléchargez le fichier source de travail .fla ici

Bonne continuation et à très bientôt !!!

attention si vous ne voyez pas l'animation il faut que vous téléchargiez le player de Flash 6.0

ANOUCHKA.

Page créée par Anouchka. Toute copie partielle ou totale interdite.  www.petrucciweb.com