Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un diaporama pas à pas - 1 - Charger une image externe

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Par lilive (Olivier Tarasse), le 12 juin 2008
  • Révision : lilive - 31/08/2008

Objectif

Ce tutoriel est le premier d'une série qui va traiter de la réalisation d'un diaporama en ligne avec flash, en actionscript 2 (AS2). Il est recommandé de lire l'introduction avant de commencer.

Nous allons commencer très simplement par la fonction première d'un diaporama, à savoir: Comment utiliser flash pour charger et afficher des images?


Connaissances requises pour la première partie

Ce tutoriel s'adresse à des débutants en programmation ActionScript 2, et sera très détaillé.

Néanmoins, il n'est pas destiné à apprendre à se servir de l'environnement de développement intégré de Macromedia (Flash IDE), ni de tout autre environnement. Il s'adresse à des personnes qui savent déjà compiler un swf, même vierge, par quelque moyen que ce soit 1). Je donnerais quand même parfois des indications spécifiques à l'IDE de flash pour aider les supers-débutants qui le posséderaient.

Pour suivre ce tutoriel il vous faudra donc déjà savoir :

  • Créer un fichier compilé pour flash player (swf).
  • Choisir les dimensions de la scène.
  • Où mettre le code AS2 pour qu'il soit exécuté au lancement du swf (sur la première image).

Si vous ne savez pas, pour Flash IDE, voyez "Pour en savoir plus" en bas de page.

Conseil très bateau mais toujours bon à rappeler

La programmation nécessite un long apprentissage. Si vous n'avez jamais programmé, soyez sûrs qu'il vous faudra beaucoup d'efforts, de temps, de moments d'incompréhension totale, d'énervements, compensés éventuellement par de grandes satisfactions. Malgré tous les efforts de l'auteur (c'est moi :-) ) pour être le plus accessible possible, la quantité de connaissances à assimiler au long de cette série de tutoriaux est très importante. En cas de difficulté, je ne peux que vous encourager à:

  • prendre votre temps,
  • relire les choses plusieurs fois,
  • apprendre peu à peu à utiliser l'aide de Flash (grâce notamment au chapitre “Pour en savoir plus” présent au bas de chaque tutoriel de cette série),
  • essayer de refaire les choses par vous-même, essayer d'inventer de petits programmes simples pour vous entraîner à manipuler les notions présentées,
  • parfois savoir laisser une question de côté, certaines choses s'éclairciront peu à peu,
  • et enfin, ne surtout pas hésiter à poster des messages de demande d'aide si vous n'y arrivez pas tout seul.


I - Préparer l'album

Au travail ! Sachez que vous trouverez à titre d'exemple les fichiers de ce tutoriel en bas de page: 2)

Créez sur votre disque dur un répertoire nommé diaporama. Nous mettrons dans ce répertoire les fichiers nécessaires à ce tutoriel. C'est là que vous créerez le .fla ou les fichiers .as . C'est aussi là que vous mettrez le .swf compilé.

Créez un sous-répertoire nommé images. Dans ce répertoire mettez les photos que vous voulez inclure dans le diaporama, en les nommant image0.jpg, image1.jpg, image2.jpg, etc. Soyez exacts sur les noms et n'utilisez ni image 0.jpg, ni image_0.jpg, ni image00.jpg. Commencez bien votre numérotation à partir de 0.

Ces photos feront 400×300 pixels.

Les photos que vous possédez ne font sûrement pas 400×300 pixels. Un appareil photo même de médiocre qualité génère des photos plus grandes que cela. Si vous ne savez pas changer la taille d'une photo, vous pouvez par exemple utiliser le logiciel irfanview. Voici deux tutoriaux parmi d'autres expliquant comment redimensionner des photos avec ce logiciel, trouvés facilement en faisant la recherche “irfanview redimensionner” sur le net : http://recit.cssamares.qc.ca/spip.php?article85 et http://www.touchon.net/internet-selon-ben-tutorial.php

Note: J'ai choisi cette taille d'image pour avoir un résultat pas trop grand, de façon à pouvoir insérer les résultats dans la page du présent tutoriel. Vous pouvez facilement faire un autre choix, en augmentant les tailles des photos et de la scène.
De même, les dimensions 400×300 correspondent à des photos au format 4:3. Si les photos que vous avez ne sont pas à ce format, vous pouvez également adapter le tutoriel sans grandes difficultés.


II - Afficher une photo sur la scène

Deuxième chose à faire : écrire le code pour un swf qui amène notre première photo sur la scène.
Créez un nouveau projet et donnez à la scène la dimension 400×350 pixels. Nous aurons ainsi la place d'y afficher une photo, et un peu de marge dessous pour placer plus tard des boutons.
Demandons à flash, en ActionScript, de charger la photo, en entrant ce code sur la première et unique image du scénario :

1- Le code

this.loadMovie("images/image0.jpg");

Compilez et lancez le swf. Vous devriez avoir le résultat désiré.

2- Le résultat

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Bien sûr ce sera votre photo qui apparaitra, et non la mienne! Le texte “image0.jpg” apparaissant dans le résultat ci-dessus n'est pas affiché automatiquement. C'est moi-même qui ai retouché ma photo, dans le seul but de rendre les exemples plus clairs. Inutile de le faire dans votre cas, nous ajouterons plus tard le code qui fera ce travail.

Pour vous procurer les fichiers joints à cet article, voyez en bas de page : 3)

3- Les explications

Quand flash exécute le swf, il se met à lire le code ActionScript que nous avons tapé. Il le lit de haut en bas, et effectue au fur et à mesure les opérations qui y sont indiquées.

Ici nous avons une seule ligne de code : this.loadMovie(“images/image0.jpg”);
Elle utilise deux mots de programmation (on dit mots clé): this et loadMovie

this, qui veut dire “ce”,”cela”,”ceci” en anglais, désigne l'objet où ce code est écrit. Donc dans notre cas, this désigne la scène, le premier de tous les MovieClips.

loadMovie est une méthode de MovieClip. Une méthode, en programmation, c'est une chose que sait faire un objet. Si vous étiez un objet programmé, vous seriez en train d'exécuter votre méthode “lireEtComprendre”. Un chien aurait entre autres une méthode “aboyer”, le monde une méthode “tourner”, et un sentiment une méthode “atteindreSonParoxysme”. Un MovieClip, lui, a parmi ses méthodes une méthode “loadMovie” qui lui permet de charger une image stockée dans un fichier externe.

Pour appeler une méthode d'un objet on commence par désigner l'objet, on ajoute un point, puis le nom de la méthode. Pour finir, entre parenthèse, on ajoute les paramètres dont à besoin la méthode pour s'exécuter. Ici cela donne this.loadMovie(“images/image0.jpg”); . Si nous nous contentions de this.loadMovie(); nous obtiendrions une erreur, car la méthode ne saurait pas quel fichier charger.

Si nous codons this.loadMovie(“images/image0.jpg”); nous demandons donc à la scène de charger l'image image0.jpg du répertoire images. Le swf démarre, le code est exécuté, l'image est chargée et s'affiche, tout va bien.

Comme vous le voyez c'est très simple. Attention toutefois : Le swf doit bien être placé dans le répertoire diaporama, à côté du répertoire images, pour que flash trouve bien l'image et puisse la charger.


III - Charger une photo dans un MovieClip

Vous avez peut-être remarqué le fait suivant : la scène fait 400×350 pixels, l'image 400×300 pixels. Pourquoi dans le résultat n'avons nous pas un bandeau de 50 pixels de hauteur où il n'y a pas d'image et où on voit le fond de la scène?

C'est parce-que loadMovie remplace le MovieClip sur lequel il agit par le fichier chargé. L'image faisant 400×300 pixels, le MovieClip de la scène devient cette image de 400×300 pixels.

Ceci ne correspond pas tout à fait à notre attente. De plus, si nous posons des éléments sur la scène, comme un bouton permettant de passer à l'image suivante, ces éléments disparaîtront lors du chargement de l'image.

Il va falloir trouver une autre organisation. C'est pour cela que nous allons renoncer à charger notre image directement sur la scène, comme nous l'avons fait au I).

Créons plutôt un MovieClip vierge sur la scène. C'est dans ce MovieClip que nous chargerons la photo. Remplacez le code que nous avions par celui-ci:

1- Le code

this.createEmptyMovieClip("image",0);
this["image"].loadMovie("images/image0.jpg");

Compilez et lancez le swf. Vous devriez avoir le résultat désiré.

2- Le résultat

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Cette fois, nous avons bien un bandeau de 50 pixels de haut qui laisse apparaitre le fond de la scène, car l'image est chargée dans un nouveau MovieClip. D'autres éléments vont pouvoir cohabiter avec l'image chargée.

Pour vous procurer les fichiers joints à cet article, voyez en bas de page : 4)

3- Les explications

Première ligne :

this.createEmptyMovieClip("image",0);

this désigne toujours le MovieClip de la scène.

this.createEmptyMovieClip(“image”, 0) demande à flash de créer un nouveau MovieClip vierge sur la scène.
createEmptyMovieClip est donc la deuxième méthode de MovieClip avec laquelle nous faisons connaissance. Cette méthode crée un “sous-MovieClip” dans le MovieClip de la scène. Les paramètres entre parenthèses indiquent que le MovieClip créé doit recevoir pour nom “image” et être placé à la profondeur 0. Ce MovieClip va nous servir à afficher les images. C'est dans ce MovieClip que nous chargerons les images, c'est ce MovieClip que nous déplacerons si nous voulons placer les images à un autre endroit de la scène, c'est la transparence de ce MovieClip que nous ferons varier pour réaliser des fondus entre les images, etc.

En attendant tout cela, le MovieClip est créé aux coordonnées (0,0), c'est-à-dire qu'il sera affiché en haut à gauche de la scène. Pour l'instant le MovieClip est vide, et on ne voit encore rien sur la scène. Quand nous chargerons une image dedans, cette image s'affichera alignée en haut à gauche de la scène.

Note: Dans flash, chaque MovieClip est placé à une profondeur. Plus le chiffre de cette profondeur est grand, plus le MovieClip est mis en avant. C'est-à-dire, par exemple, qu'un MovieClip à une profondeur de 25 sera affiché devant (on pourrait aussi dire par-dessus) un MovieClip à une profondeur de 8. Si ces deux MovieClip se chevauchent, le MovieClip à la profondeur 8 sera en partie “caché” par l'autre MovieClip. Il peut y avoir un seul MovieClip par profondeur. Pour l'instant nous n'avons qu'un MovieClip sur la scène, à la profondeur 0.

Deuxième ligne :

Nous avons donc créé sur la scène un MovieClip nommé image.
Nous n'avons plus qu'à utiliser la méthode loadMovie de ce MovieClip pour y charger l'image.
Mais comment indiquer à flash que c'est de ce MovieClip dont on parle ? Comment écrire :

leMovieClipQueJeViensDeCréerQuiSappelleImage.loadMovie(“images/image0.jpg”);

C'est à dire, en jargon informatique : Comment écrire une référence au MovieClip nommé image?

La réponse vous l'avez déjà lue, c'est la deuxième ligne du code:

this["image"].loadMovie("images/image0.jpg");

Le code this[“image”] est lu par flash comme : ceci est une référence (désigne) le MovieClip nommé image contenu dans this, c'est-à-dire le MovieClip nommé image contenu dans la scène, donc bien celui que nous avons créé à la première ligne du code.


IV - Introduction des variables

Pour simplifier les références au MovieClip image créé sur la scène, nous allons maintenant introduire une nouvelle notion, celle de variable.

1- Le code

this.createEmptyMovieClip("image",0);
var imageMC:MovieClip;
imageMC = this["image"];
imageMC.loadMovie("images/image0.jpg");

Ce qui donne exactement le même résultat que précédemment =)

Pour vous procurer les fichiers joints à cet article, voyez en bas de page : 5)

2- Déclarer une variable

var imageMC:MovieClip; crée une nouvelle variable nommé imageMC et de type MovieClip.
C'est-à-dire que nous créons une entité, nommée imageMC, qui peut stocker une référence à un MovieClip, autrement dit désigner un MovieClip. Cela deviendra vite très clair par la pratique.

Le nom imageMC est arbitraire, on pourrait choisir n'importe quel autre nom. imageMC est choisi ici pour nous rappeler que c'est un MovieClip (MC) qui va recevoir une référence au MovieClip image.

Une variable peut être vue comme un conteneur. Dans ce conteneur on peut mettre une chose, selon le type de la variable. Ici son type est MovieClip, on peut donc y stocker une référence à un MovieClip. Si son type était Number on pourrait y stocker un nombre, si c'était Boolean on pourrait y stocker une valeur booléenne (vrai ou faux), si c'était String on pourrait y stocker une chaîne de caractère comme “Ce tutoriel est très clair et je comprends tout”, héhé.

Pour déclarer une variable on écrit d'abord le mot clé var suivi d'un espace, puis le nom que l'on veut donner à la variable, puis deux points ”:”, puis le type de la variable, ici MovieClip.

3- Variables typées contre variables non typées

Il est aussi possible de déclarer une variable sans préciser son type, en écrivant simplement:

var imageMC;

On peut alors mettre ce que l'on veut dans cette variable.

Je n'utiliserais pas cette possibilité. Car d'une part c'est une excellente habitude qui facilitera plus tard l'apprentissage de la programmation orienté objet (POO) dont nous reparlerons, et d'autre part cela permet à flash de vous signaler des erreurs qui seraient passées inaperçues sinon, et donc difficiles à corriger.

Par exemple, en typant imageMC comme un MovieClip…

var imageMC:MovieClip;

… flash nous signalera une erreur si nous codons par la suite :

imageMC.setVolume(50)

Car setVolume est une méthode des objets Sound, permettant de régler le volume d'un son. Pour un MovieClip, cela ne veut rien dire et génère une erreur.

Par contre, si nous faisions la même chose avec une variable non typée (var imageMC;), flash se contenterait de ne rien faire, nous laissant le soin de nous casser la tête sur : “Mais bon sang, je lui dit bien de régler le volume, alors pourquoi ça ne marche pas ?”

4- Utilisation de la variable

Par la suite, on peut utiliser cette variable pour stocker la référence au MovieClip image.

imageMC = this["image"];

Ceci s'appelle une affectation. Pour cela on utilise l'opérateur d'affectation: le signe =.
Cela se lit comme : Affecte this[“image”] à la variable imageMC.
Ou encore : Stocke dans la variable imageMC ce qui est à droite du signe =
Ou enfin : Stocke dans la variable imageMC une référence au MovieClip nommé image et contenu dans la scène.

A partir de là, écrire imageMC dans le code pourra remplacer l'écriture de this[“image”]. Cela est plus court à écrire, permet le contrôle des erreurs comme expliqué au 3), et nous permettra aussi d'éviter certains problèmes relatifs à l'usage de this, j'y reviendrais.

Il ne reste plus qu'à écrire :

imageMC.loadMovie("images/image0.jpg");

Pour charger l'image dans le MovieClip image.


V - Le code simplifié

Pour finir, voici une version plus compacte du code:

var imageMC:MovieClip = this.createEmptyMovieClip("image",0);
imageMC.loadMovie("images/image0.jpg");

Qui revient au même que le code précédent.

Cela s'explique ainsi :

D'une part, on peut sur la même ligne déclarer une variable et lui affecter une valeur. Par exemple:

var a:Number = 5;

Déclare une variable nommé a, de type Number, et lui affecte la valeur 5.

D'autre part, la méthode createEmptyMovieClip, outre le fait de créer effectivement un MovieClip, “renvoie” une référence à ce MovieClip. Avec l'opérateur d'affectation = , on s'empare immédiatement de cette référence renvoyée, et on la stocke dans la variable qu'on vient de créer.

Note: Une autre possibilité qu'offre ActionScript 2 serait de ne pas déclarer la variable, et de coder directement:

imageMC = this.createEmptyMovieClip("image",0);
imageMC.loadMovie("images/image0.jpg");

Je n'utiliserais jamais cette possibilité, car je trouve que c'est une bonne habitude à prendre, qui facilitera les choses plus tard.


Conclusion

Ainsi s'achève la première partie de ce tutoriel. J'ai pris le temps de détailler des notions fondamentales de programmation en AS2, et nous en sommes arrivés au nombre impressionnant de 2 lignes de code! Le rythme devrait s'accélérer au fur et à mesure des parties suivantes :-D .

En seconde partie, nous ajouterons un bouton qui permet à l'utilisateur d'afficher successivement toutes les images de l'album.

N'hésitez pas à poser vos questions ou à faire vos remarques sur ce tutoriel sur le forum. Vous pouvez répondre au message concernant ce tutoriel ou ouvrir un nouveau sujet.


Pour en savoir plus

Pour avoir des précisions ou des renseignements complémentaires à ce tutoriel, vous pouvez consulter 6) :

1) En dehors de Flash IDE de Macromedia, dont la licence est à un prix élevé pour certaines bourses, on peut compiler des swf avec notamment flashdevelop, FAME, mtasc et swfmill, ou encore Haxe.
2) , 3) , 4) , 5) Vous pouvez télécharger les fichiers de code correspondants à cet article, les swf compilés, et les images utilisées, le tout dans une archive compressée. Si vous utilisez Flash IDE, cliquez ici. Si vous utilisez un environnement intégrant mtasc et swfmill, cliquez ici
6) Les références à l'aide de Flash concernent la documentation de Flash CS3, accessible par l'IDE de Flash CS3 ou par le site d'Adobe (Support > Documentation).