[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Programmation > ActionScript / Flash / Flex > Créer un Preloader avec Flash > Lecture du tutoriel

Créer un Preloader avec Flash

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Vous avez fais une belle animation et vous en êtes fier, alors vous voulez la mettre sur Internet. Vous dites au gens d'aller la voir, mais personne ne la regarde, car la fenêtre reste vide trop longtemps. Mais pourquoi cela ? Car votre animation est en train de ce charger. Les gens ne savent pas que votre animation se charge et donc croient qu'il n'y a rien. Ce tutoriel vous apprendra donc à faire un preloader, ainsi, les gens sauront que votre animation est bien là

. Ce tutoriel abordera d'abord les preloaders simple, soit un chiffre qui augmente et une barre qui allonge. Par la suite, un preloader "avancé", soit une image qui change de couleur selon le pourcentage.

Ce tutoriel a été réalisé avec le logiciel Flash CS3. Si vous utilisez Flash 8, les différences, au niveau de ce que l'on a à faire, sont les icônes du programme. La principale différence, qui n'interférera pas avec ce tutoriel, est la version de l'ActionScript.

Sommaire du tutoriel :

Préparer le terrain
Donner du style à notre preloader
L'actionscript, pour que ça fonctionne !
Un loader plus avancé
Une simple ligne de code !
Q.C.M.

Préparer le terrain

Créer un preloader en flash, ça ne demande pas énormément de travail. En fait il y a 3 étapes. Il faut préparer le terrain, placer le loader comme on le souhaite et écrire l'action script.

En commençant, ouvrez un nouveau fichier (spécifiez AS2.0 si vous êtes sur Flash CS3). Pour la taille du document, c'est à vous de voir ;).

Vous devez vous assurer d'avoir 2 séquences. Pour ce faire, allez dans le menu Fenêtre sur la barre d'outils, dans le sous-menu Autres Panneaux et sélectionnez Séquence. Vous devriez alors voir une fenêtre Séquence apparaître avec Séquence 1 à l'intérieur. Votre séquence 1 est, si vous en avez fait une, votre animation. Pour nous faciliter la tâche, double-cliquez sur le texte et changez le pour main (qui sera notre séquence principale).

Pour ouvrir la fenêtre de séquence rapidement, vous pouvez simplement utiliser le raccourci Maj+F2.

Ensuite, cliquez sur le signe + au bas de la fenêtre. Séquence 2 apparaîtra alors. Renommez-la, de la même façon que l'autre, loader. C'est sur cette séquence que ce trouvera votre Preloader.

Votre séquence loader doit ABSOLUMENT être placée avant la séquence main, sinon main débutera avant la séquence loader, donc elle ne se chargera pas.

Ensuite, en haut de votre scène, vous avez le scénario. C'est dans celui-ci que sera votre preloader.

D'abord, assurez-vous d'être dans la séquence loader, simplement en cliquant sur son icône dans votre fenêtre de séquence. Une fois à l'intérieur de votre séquence, allez dans le scénario et cliquez sur le bouton Nouveau Calque (représenté par une feuille dont le coin est plié, avec un + sur le dessus). Cliquez dessus jusqu'à avoir 4 calques. Nommez vos calques ainsi:

Loadanim
Prcnt
Bar
Actions

Voici ce que vous êtes supposé avoir présentement (cliquez pour agrandir):

Et après, on fait quoi ? ?

Par la suite, vous allez lire le prochain chapitre car celui-ci est terminé ! !

Déjà ! ? ! ?

Hé oui, car ceci n'était que la préparation du terrain, il vous reste maintenant la partie la plus amusante, mettre vos images et votre code !

Donner du style à notre preloader

Maintenant que votre scène est préparée, nous pouvons passer au style de notre preloader.

Pour commencer, allons sur le calque Loadanim. Ce calque sera simplement l'animation du mot Loading avec 3 petits points qui apparaissent consécutivement.
Vous allez donc utiliser l'outil texte, en cliquant sur l'icône dans la barre d'outils, ou en appuyant sur la touche T. Ensuite, vous allez choisir, dans la fenêtre de propriété (Ctrl+F3), l'option Texte Statique, la police, la couleur et la grosseur de votre choix. Ensuite, sur votre scène, vous allez écrire le texte Loading (ou chargement, peu importe, c'est à votre goût). Une fois votre texte écrit, utilisez l'outil pointeur (flèche noire ou V) et sélectionnez votre texte. Appuyez sur la touche F8. Cette fenêtre apparaîtra alors:

Ceci est la fenêtre de conversion de symbole. Elle vous permet de créer des symboles qui ont chacun des utilités différentes. Dans notre cas, nous choisirons le Clip, et nous l'appellerons Loadanim (il peut avoir le même nom que le calque, mais le nom importe peu, car nous n'utiliserons pas ce nom dans nos actions).Une fois votre calque créé, double-cliquez dessus. Vous entrez alors dans votre clip.

Si vous n'êtes pas sûr d'être dans votre Clip, vérifiez vous votre scénario, il sera écrit : "loader______loadanim".

Une fois dans votre Clip, créez une animation dans laquelle s'ajoute, à votre texte, trois points de ponctuation (si vous ne savez pas créer d'animation , allez sur cette page pour le découvrir).

Vous ne devez pas utiliser d'interpolation de mouvement pour faire cette animation.

Revenez ensuite à votre scène principale en cliquant sur loader sous votre scénario. Si vous faites un test de votre animation, le mot "Loading" ne fera que flasher, dû au fait que vous avez deux séquence, vous devez donc attendre à la fin avant de voir le résultat

.

Passons maintenant au calque Pcrnt qui se complique très légèrement. Tout d'abord, reprenez l'outil texte et écrivez le texte à l'endroit où vous le voulez. Une fois qu'il est écrit, sélectionnez-le, allez dans votre fenêtre de propriétés et changez l'option Texte Statique pour Texte Dynamique. Un champs de texte dans lequel est écrit <Nom de l'occurrence> apparaît en dessous de Texte dynamique. À l'intérieur, écrivez pct_txt. Vous devez être sûr de la façon que vous l'écrivez, car c'est ce mot que nous utiliserons dans notre action script, et il est sensible à la case. Si vous le voulez, vous pouvez ajouter le signe % à côté de votre 100, dans un texte séparé pour faire une décoration, mais faites attention de bien le remettre en Texte Statique.

L'option texte dynamique fait en sorte que votre texte peut être modifié de l'extérieur, et c'est avec ce texte dynamique que nous sauront à quel pourcentage le chargement est rendu.

Donc voici un aperçu d'où nous sommes rendu (j'ai mis un effet au % pour faire plus beau)(cliquez pour agrandir):

Et c'est tout ? ?

Non, il nous reste un seul calque à faire dans cette section, et après, nous pourront passez au actions

Maintenant, lançons nous dans la création de notre barre, une étape très courte. Utilisez l'outil rectangle (R). Mettez la couleur de votre choix pour l'intérieur, et une autre pour le cadre (le contour). Faites ensuite votre rectangle sous le texte "Loading". Utilisez ensuite l'outil pointeur et cliquez sur le rectangle, MAIS seulement l'intérieur, sans toucher au cadre. Appuyez sur F8 et créez un clip appelé loadbar. Sélectionnez le et donner lui loaderbar comme <Nom de l'occurrence>.

Et voilà c'est fini pour cette section !! Il ne nous reste plus qu'à mettre nos actions

! !

L'actionscript, pour que ça fonctionne !

Nous voici donc à la dernière section de ce tutoriel. Voici approximativement ce que vous devriez avoir (cliquez pour agrandir):

Donc nous allons commencer très simplement par ouvrir, sur notre calque actions de la séquence loader, la fenêtre d'action (F9) et écrire ceci:

Code : Autre

stop();

C'est ce qui va permettre à notre animation de ne pas sauter immédiatement à notre scène main.

Par la suite, nous allons écrire notre code. C'est grâce à lui que notre animation sera chargée:
Code : Autre

stop(); //arrêt du scénario
 
myInterval = setInterval(preload,100); // création d'une intervalle où la fonction est appelée preload
 
function preload() { //ici, on défini ce que fait la fonction preload
        var current = _root.getBytesLoaded(); //la variable current va être égale au nombre d'octets chargés
 
        var total = _root.getBytesTotal(); // la variable total var être égale au nombres d'octets qu'il y a à charger
 
        var pctLoaded = Math.round(current/total*100); //notre variable pctLoaded sera une équation mathématique. Le calcul donne notre pourcentage
 
        pct_txt.text = pctLoaded; //pct_txt, soit notre "100" où pct_txt est le nom d'occurence, sera un texte qui sera égal à pctLoaded, donc notre pourcentage
 
        loaderbar._xscale = pctLoaded; //Ici, la longueur de notre barre s'allonge sur l'axe des X selon le pourcentage
        
        if (current == total) { // si tous les octets sont chargés (c'est la condition)
                gotoAndPlay("main",1); // Va jouer notre séquence "main", notre animation
                clearInterval(myInterval); //et supprime l'intervalle
        } //fermeture de notre condition
        
} //fermeture de notre fonction

Maintenant, l'étape la plus importante de toutes... relaxer un peu, car vous avez fini votre loader... au niveau basique :-°

! ! Reste maintenant à en voir un autre légèrement plus compliqué.

Un loader plus avancé

Nous allons maintenant passer à un tutoriel un brin plus compliqué. Admettons que vous gardez le loader que vous avez présentement. Prenez la barre "loading" et descendez la sur votre scène pour laisser place à votre nouvelle animation. Si vous le voulez, vous pouvez simplement la supprimer, car elle ne sera plus vraiment utile.

Pour commencer, vous devez avoir 2 images. L'une de vos images doit (selon vos goûts) être blanche, et la deuxième doit être d'une autre couleur, ou simplement colorée. Pour ma part, j'ai utilisé l'image d'un snowboardeur que j'ai découpée et où j'ai augmenté la luminosité. Mon image était donc devenu blanche. J'ai ensuite copier cette image et j'ai baissé la luminosité, elle est donc devenu grise. Voici les 2 images que j'ai présentement:

Vous devez placer les 2 images l'une par dessus l'autre, la plus foncé sur le dessus, sur 2 calques différents. Prenez la taille de vos images en note. Présentement, mon image est de 347px*359px.

Ensuite, voici la partie plus compliquée. Prenez l'outil rectangle. Jusqu'à présent, c'est simple. Sur un nouveau calque, appelé "Masque", placé au dessus de celui qui est foncé, faites un carré vert fluo, pour qu'il soit plus facilement repérable, et transformez le en clip (F8)(le nom donné n'est pas important). Il n'est pas obligatoire de le mettre vert, mais ça fait plus beau

. De toute façon, votre carré n'apparaîtra pas sur votre animation.

Mettez votre carré exactement de la même grandeur que votre image (ici 347px*359px), et placez le exactement à gauche de vos images, à 1 pixel près. Prenez en note la position qu'il a sur l'axe des X (voir l'image, présentement à -164.1):

Sélectionnez ensuite votre image et vérifiez la coordonnée sur l'axe des X (j'ai présentement 202.8px). Ensuite, fait un simple calcul: 202.8+164.1= 366.9. C'est le nombre de pixel que devra parcourir votre carré sur l'axe des X.

Dans votre fenêtre de calque, ouvrez le menu contextuel (clique-droit) sur le calque "Masque" et sélectionnez l'option "Masque" (Mask en anglais). Votre calque "Masque" est maintenant considéré comme un masque, et votre calque contenant l'image foncée est dans le masque. Cliquez sur votre rectangle pour le sélectionner, et dans la fenêtre de Propriétés, remplacez le <Nom de l'occurrence> par "masque". C'est ce nom qui est important et que nous allons utiliser dans nos actions.

Lorsque vous avez un masque, les images se trouvant en dessous du masque apparaissent. Dans cette animation, vous pouvez remarquer le le masque n'est pas par dessus notre image. Donc, l'image ne serait pas visible lors de l'animation. Notre but à présent, est de faire en sorte que selon le pourcentage, notre masque se déplace vers la droite pour faire apparaître notre image grise.

Une simple ligne de code !

Maintenant que vous avez fait vos images et votre masque, nous devons insérer un nouveau code.

Alors voici le code que vous devez ajouter, habituellement sous votre var pctLoaded:
Code : Autre

1	masque._x = (pctLoaded*3.66)-163.1;

Signification:
masque: c'est le <Nom de l'occurrence> que nous avons mis à notre masque, l'action s'appliquera donc à lui seulement.
_x: C'est la commande qui va faire en sorte que notre occurrence "masque" va se déplacer sur l'axe des X (soit Horizontalement)
(pctLoaded*3.66): pctLoaded, qui est la variable de notre calcul (current/total*100), qui donne le pourcentage, multiplié par 3.66, qui sont nos 366 pixels sur lesquels notre masque doit se déplacer.
-163.1: Faire très attention ici: Votre masque sort par la gauche de votre scène. Votre coordonnée X de votre masque est -163.1. Si vous ne le soustrayez pas à votre formule, votre masque ira directement se placer à la coordonnée "X=0" et donc aura une avance de 163.1 pixels.

Et vous avez fini !! Vous pouvez maintenant tester votre animation ! !

Hé oui, vous avez fini votre preloader. Ce n'est pas plus compliqué que ça. Mais voici quelques informations:

Il se peut que votre preloader ne commence pas à 0%. Dans certain cas, il se peut même qu'il commence à 50%. J'ajouterai probablement une extension à ce tutoriel pour régler ce problème. Il survient surtout lorsque l'animation est plus petite que le preloader lui même.

Vous pouvez varier les couleurs, comme celle du fond, ou encore l'animation de votre texte à votre goût.

Il y a encore plusieurs façons de faire des loaders différents, mais je vous laisse les découvrir par vous même

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité