Aller au menu - Aller au contenu

Icône Images et Animations

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 77 sur ce chapitre classé 39/786
Nous allons, tout d'abord, apprendre à charger dans notre animation d'autres animations, et / ou des images aux formats JPG, PNG et GIF (support des PNG et GIF à partir de Flash player 8) de façon dynamique.

Flash intègre, depuis ses dernières versions, une classe sensée faciliter le chargement de fichiers images, ou SWF externes (la classe MovieClipLoader), mais puisqu'on est des pros, on va s'en passer. ;)

Durant tout ce tuto, nous nous efforcerons de charger cette image :
Image utilisateur


Vous pouvez donc dès maintenant rajoutez cette variable en haut de votre code :
Code : Autre
1

lien = 'http://uploads.siteduzero.com/files/105001_106000/105747.jpg';


L'image est lourde, si elle pèse plus de 800ko, c'est pour pouvoir observer son chargement avec un preloader.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Dans un clip ou un niveau

Il existe deux fonctions pour charger une image (ou un SWF) dans votre animation :
  • loadMovieNum(lien,niveau)
  • MovieClip.loadMovie(lien)


loadMovieNum(lien,niveau)



Nous allons vite passer sur la première fonction, car nous ne l'utiliserons pas. Elle permet de charger le contenu dans un niveau de l'animation. Attention : ne confondez pas niveau et profondeur ! Les profondeurs, c'est pour les clips, les niveaux, c'est uniquement des "calques" dans lesquels vous pouvez placer des animations complètes. D'ailleurs, même sans charger une animation externe avec loadMovieNum(), il existe déjà un niveau dans votre animation : le niveau 0. Vous pouvez y accéder grâce à _level0.

_root est en fait une référence au level dans lequel vous tapez votre code. La plupart du temps _root et _level0 sont donc confondus !

Vous pouvez d'ailleurs le vérifier aisément avec la fonction trace() :
Code : Actionscript
1
trace(_root); // Affiche _level0 dans la fenêtre Sortie


Donc, pour vous faire plaisir, je vous montre comment charger notre astronaute avec cette fonction, mais nous ne l'utiliserons plus après !

Code : Actionscript
1
2
lien = 'http://uploads.siteduzero.com/files/105001_106000/105747.jpg';
loadMovieNum(lien,1);


On peut croire que rien ne se passe une fois l'animation lancée ; en fait, il faut patienter quelques dizaines de secondes (voir minutes pour les oubliés de l'ADSL) pour charger les 800 ko de l'image.


MovieClip.loadMovie(lien)



Cette méthode me plaît mieux. :D Vous remarquez déjà que contrairement à l'autre fonction, celle-là appartient à une classe, et pas n'importe laquelle : MovieClip !

On va donc charger notre image dans un clip, et pour être plus précis, on va même remplacer ce clip par l'image, il ne faudra donc rien laisser d'important dans ce clip, car tout sera supprimé par l'image !

Un petit code qui nous permet de charger l'image dans un clip vide créé dynamiquement :

Code : Actionscript
1
2
3
lien = 'http://uploads.siteduzero.com/files/105001_106000/105747.jpg';
this.createEmptyMovieClip('image',1) // Créé un clip vide;
this.image.loadMovie(lien); // Remplace le clip par l'image


Encore une fois, soyez patient ! Il faut le temps de charger l'image !
Retour en haut

Un chargeur

Moi je veux bien attendre une minute que l'image se charge, mais comment afficher l'état d'avancement ?


Pour cela, on va créer un chargeur (ou preloader, en anglais dans le texte).
Je vais vous montrer deux méthodes de la classe MovieClip.

getBytesLoaded et getBytesTotal



Ce sont sûrement les méthodes les plus simples à utiliser !

monclip.getBytesTotal() renvoie la taille en octets d'un clip
monclip.getBytesLoaded() renvoie en octets ce qui a été chargé du clip pour l'instant

Donc, si on veut connaître le pourcentage de chargement d'un clip, on fait :

Code : Actionscript
1
pourcentage = (unclip.getBytesLoaded() / unclip.getBytesTotal() ) * 100;


Chargeur texte



Voilà un code qui permet d'afficher la progression du chargement, la zone de texte se crée en haut à gauche de l'animation dynamiquement :

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
lien = 'http://uploads.siteduzero.com/files/105001_106000/105747.jpg';
// On crée deux clips, un pour recevoir l'image, l'autre pour le preloader
this.createEmptyMovieClip('image', 1);
this.createEmptyMovieClip('chargeur', 2);
// On crée un champ de texte dans chargeur et on charge l'astronaute dans image
this.chargeur.createTextField('pourcentage', 1, 0, 0, 100, 20);
this.image.loadMovie(lien);
// On regarde à chaque image où en est le chargement
this.chargeur.onEnterFrame = function() {
        this.pourcentage.text = (this._parent.image.getBytesLoaded()/this._parent.image.getBytesTotal())*100;
};


Ce code fonctionne, mais on ne peut pas dire que ce soit ce qu'il y a de plus beau ; on va donc lui apporter quelques améliorations :
  • on ne va pas répéter 2 fois dans le code this._parent.image qui est trop long
  • Il faut enlever les 13 chiffres après la virgule qui ne servent à rien !
  • pourcentage.text est une variable de type String (= chaîne de caractères), et on lui donne un nombre, ce n'est pas très propre !


On va donc :
  • créer une variable faisant référence à image, et la réutiliser ensuite.
  • arrondir le nombre avec Math.round()
  • convertir le nombre en texte avec toString()


Ce qui nous donne :

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
lien = 'http://uploads.siteduzero.com/files/105001_106000/105747.jpg';
// On crée deux clips, un pour recevoir l'image, l'autre pour le preloader
this.createEmptyMovieClip('image', 1);
this.createEmptyMovieClip('chargeur', 2);
// On crée un champ de texte dans chargeur et on charge l'astronaute dans image
this.chargeur.createTextField('pourcentage', 1, 0, 0, 100, 20);
this.image.loadMovie(lien);
// On regarde à chaque image où en est le chargement
this.chargeur.image = this.image;
this.chargeur.onEnterFrame = function() {
        this.pourcentage.text = (Math.round(((image.getBytesLoaded()/image.getBytesTotal())*100)).toString())+' %';
};


  • this.chargeur.image = this.image; permet de créer une référence à image directement dans le clip chargeur, et nous fait gagner du temps ensuite.
  • Math.round(((image.getBytesLoaded()/image.getBytesTotal())*100)) arrondit le nombre.
  • le_nombre.toString() convertit le nombre en texte, ce qui permet de rajouter le % à la fin de la chaîne de caractères.


Chargeur graphique



Le texte c'est bien, facile à programmer, mais c'est pas très esthétique.
On va donc dessiner une barre de progression. On pourrait la dessiner complètement en ActionScript, grâce aux méthodes de dessin qu'on avait vu, mais rassurez-vous, on va les dessiner nous-mêmes avec l'IDE de Flash.

Créez donc un clip sur la scène principale, et donnez-lui pour nom d'occurrence : chargeur
Dans ce clip, dessinez deux rectangles : ils doivent être de la même taille et se superposer ; celui du dessous devrait un peu déborder sur les côtés. Transformez celui du dessus en un clip auquel vous donnerez comme nom d'occurrence : barre. Placez le centre de barre comme vous le souhaitez par rapport au rectangle, selon l'effet que vous souhaiterez obtenir.

Vous allez voir, on ne va presque rien changer dans le code précédent.
Il ne sert plus à rien de créer le clip chargeur, puisqu'on l'a déjà, donc on supprime la ligne.
Idem pour la zone de texte qui est devenue inutile, puisqu'on affiche la progression sous forme graphique.
On ne va plus affecter le pourcentage à la propriété text d'une zone de texte, mais à la propriété _xscale de barre. On doit donc transmettre un nombre, on enlève donc le % et le tostring(). Éventuellement, on peut aussi enlever le Math.round(), qui ne sert plus à grand chose non plus.

Ça nous donne donc :

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
lien = 'http://uploads.siteduzero.com/files/105001_106000/105747.jpg';
// On crée un clip pour recevoir l'image
this.createEmptyMovieClip('image', 1);
// On charge l'astronaute dans image
this.image.loadMovie(lien);
// On regarde à chaque image où en est le chargement
this.chargeur.image = this.image;
this.chargeur.onEnterFrame = function() {
        this.barre._xscale = (image.getBytesLoaded()/image.getBytesTotal())*100;
};


Au cas où vous auriez décroché au cours de ce tuto, voilà la SOURCE.
Retour en haut

Redimensionner l'image

Par contre, vous l'aurez remarqué je l'espère, on a un petit problème !
L'image se charge bien, mais elle est tellement grande qu'elle ne rentre pas dans l'animation.

Pas de problème, après avoir créé le clip, rajoutons :
Code : Actionscript
1
2
this.image._width = Stage.width;
this.image._height = Stage.height;


Stage.width et Stage.height (sans _ avant la propriété) contiennent la largeur et la hauteur de l'animation.


Ça ne marche pas ! L'image n'est même plus du toute affichée !


Eh bien oui, on a fait une erreur ! On a donné une taille à un clip qui était encore vide ! Même si vous mettez ce code juste après le loadMovie(), vous aurez le même problème, car l'image n'étant pas chargée complètement, Flash ne peut toujours pas redimensionner le clip vide !

Il faut donc attendre que l'image soit chargée pour la redimensionner !
Dans le bloc de code de chargeur, on va donc rajouter une condition qui redimensionne l'image une fois qu'elle est chargée. On a donc :

Code : Actionscript
1
2
3
4
5
6
7
this.chargeur.onEnterFrame = function() {
        this.barre._xscale = ((image.getBytesLoaded()/image.getBytesTotal())*100);
        if (image.getBytesLoaded() == image.getBytesTotal()) {
                image._width = Stage.width;
                image._height = Stage.height;
        }
};


Ça ne marche toujours pas !


Eh oui, en effet, essayez de deviner pourquoi. N'oubliez pas d'utiliser la fonction trace() !

Secret (cliquez pour afficher)
Avant que l'image soit chargée, le clip image existe déjà ! Et il est complètement chargé (en plus, il est vide). Notre condition est donc validée au début, avant même le chargement de l'image. Or, on a vu au-dessus qu'il ne fallait surtout pas redimensionner un clip vide avant que l'image ne soit chargée, sinon ça ne fonctionne pas.
Il faut donc rajouter une condition supplémentaire : vérifier que le clip ne soit pas vide. Ainsi, on aura :

Code : Actionscript
1
2
3
4
5
6
7
this.chargeur.onEnterFrame = function() {
        this.barre._xscale = ((image.getBytesLoaded()/image.getBytesTotal())*100);
        if ((image.getBytesLoaded() == image.getBytesTotal()) && (image.getBytesTotal()>0)) {
                image._width = Stage.width;
                image._height = Stage.height;
        }
};




Tout bête, n'est-ce pas ? :p

Ensuite, c'est à vous de trouver le code pour conserver les proportions de l'image lors du redimensionnement ; sur internet, vous en trouverez pour de nombreux langages, il ne restera plus qu'à l'adapter à votre animation !
Retour en haut

Particularité du chargement des animations

Eh oui, charger une animation dans un clip d'une autre animation, ça peut vite devenir un casse-tête, style poupées russes ! :p

Car l'animation qu'on charge peut contenir du code ActionScript. Tant que les références à l'intérieur de cette animation se font de façon relative : pas de problème ! Mais imaginez que vous utilisiez _root dans l'animation qui est chargée dans le clip ...
Oui, vous avez compris, le _root ne sera pas le _root de l'animation chargée, mais le _root de l'animation chargeur : un vrai problème !

Alors, soit vous réécrivez toutes vos animations pour vous assurer que vous n'utilisez jamais _root (et si vous avec bien suivi ce cours vous ne devriez n'avoir jamais utilisé _root jusqu'ici), soit vous suivez l'astuce suivante.

ActionScript, depuis la version 7, possède une nouvelle propriété pour les clips : _lockroot.
C'est une variable booléenne (elle prend les valeurs true ou false). Par exemple, si vous chargez une animation qui contient des chemins d'accès absolus (utilisant _root) dans le clip image de tout à l'heure, il faudra préciser avant de charger l'animation :

Code : Actionscript
1
2
this.image._lockroot = true;
this.image.loadMovie(lien);


Et grâce à cette propriété, l'animation chargée conservera son _root propre ! :D
Retour en haut
Pour pouvoir tester le preloader, nous avons chargé une image distante, mais vous pouvez aussi tester le chargement avec une image locale, en activant "simuler le téléchargement" dans le menu "affichage" du testeur d'animations de Flash.


Vous savez maintenant charger du contenu graphique (image et SWF) externe ! Vous pouvez donc déjà créer des animations complexes qui peuvent charger dynamiquement des parties trop lourdes. Vous pouvez aussi commencer l'élaboration d'une galerie basique en Flash ! ;)

Mais il existe aussi d'autres types de contenus qu'on peut charger dans une animation : les variables et la musique. :p
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
7 commentaires pour "Images et Animations"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne Genezis # Posté le 03/05/2006 à 14:23:48
Avatar

 Merci pour ta réponse :)

Et c'est vrai que l'aide integrée à Flash est plutot dur à utiliser !

Sinon j'ai trouver la documentation de Flash 8 ici :
Doc de Flash

Est-ce la même doc que celle integrée à Macromedia Flash 8 (je ne peux pas les comparer étant donné que j'utilise la version Flash MX 2004) ?
Hors ligne normandart # Posté le 07/10/2007 à 21:07:59

bravo pour ce tuto bien fait; MovieClip.loadMovie(lien)

j'ai une question, pour "Créé un clip vide;" comment indiquer le chargement dans un clip qui existe déja? dans une dimension précise...
je ne veux pas créer un clip dynamiquement, il y a un cadre déja tracé dans la bonne dimension et le bon endroit dans mon anim.
merci en tous cas !

:) :) :) :)
Hors ligne nath # Posté le 20/01/2008 à 16:05:15
yeeah, rastafari!!!!
Avatar

 Bonjour,
j'apprécie tout tes tutos sur flash, vraiment utiles ;)

j'ai une question, à propos de cette partie, pour les images. J'ai essayé et ça fonctionen bien, mais pas avec les png...
Comment faire? :)

Merci ;)

Edit: en fait non rien, ça amrche tres bien, merci ;)
Hors ligne Léa # Posté le 22/03/2010 à 12:57:47

Bonjour,

Je viens de découvrir ce tuto car je cherche à créer un preloader sur une image externe. Merci pour la qualité des explications.
Mais je rencontre un autre problème ... voilà l'image que je charge utilise une fonction de redimensionne automatique en fonction de la fenêtre du navigateur. Et impossible d'appliquer ce preloader.
Pouvez-vous m'aider s'il vous plais ? je peux vous envoyer le code que j'ai déjà ...
merci beaucoup pour votre aide
Hors ligne abdell # Posté le 13/10/2011 à 15:46:02
Avatar

 est ce que je peux avoir le programme d'une animation en flash CS3 contenant AQUARIUM et DES POISSONS juste simple.................merci

Voir tous les commentaires