Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un diaporama pas à pas - 2 - Le bouton Image Suivante

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Par lilive (Olivier Tarasse), le 12 juin 2008

Objectif

Ce tutoriel est la suite de celui-ci, qu'il est recommandé de lire en premier. Cette série de tutoriaux propose la création d'un diaporama en ligne, avec explications détaillées et à l'usage des débutants en ActionScript 2.

Dans la première partie nous avons vu comment afficher une image externe. Dans cette partie, nous partirons de ce point, et nous allons créer un bouton image suivante qui permet à l'utilisateur de faire défiler les images.


Connaissances requises pour la deuxième partie

Pour suivre ce tutoriel il vous faudra déjà savoir, en plus de ce qui était nécessaire en première partie :

  • Dessiner et placer un MovieClip sur la scène, le nommer.

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


Rappel

Nous en étions donc arrivés à créer sur la scène un MovieClip nommé image et à charger dedans une image externe. Le code qui réalise cela, et qui est le code de départ pour le présent article, est:

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


I - Créer le bouton

Placez sur la scène un MovieClip avec le dessin qui vous plaît pour le bouton image suivante et donnez-lui comme nom nextBtn (en respectant bien caractère minuscule et majuscule, ça compte).

Pour l'instant nous allons faire au plus simple : le bouton sera “statique”, c'est-à-dire que son apparence ne changera pas au survol de la souris ou quand on clique dessus. Nous verrons comment faire cela plus tard.

Pour nommer un symbole de MovieClip dans Flash CS3 voyez Aide de Flash > Utilisation de Flash > Utilisation de symboles, d'occurrences et d'actifs de bibliothèque > Utilisation des occurrences de symboles. Pour d'autres IDE, voyez l'aide correspondante.

Positionnez ce bouton pour qu'il soit en bas de la scène, et apparaisse ainsi sous l'image. Par exemple, si vous avez choisi les mêmes dimensions de photos et de scène que moi, placez-le en x=10 et y=310, c'est-à-dire aux coordonnées (10,310).


II - Eviter les conflits de profondeur : la méthode getNextHighestDepth

Du coup, nous allons devoir changer la première ligne du code, pour être plus sûrs.
En effet, cette ligne demandait la création d'un MovieClip vide nommé image sur la scène, à la profondeur 0, par un this.createEmptyMovieClip(“image”, 0);
Mais qui nous dit que le MovieClip du bouton n'a pas justement été créé à la profondeur 0, là où nous créons le MovieClip image ? Si c'était le cas, cela entraînerait à l'exécution la disparition du bouton, qui serait “écrasé” par le nouveau MovieClip. Donc nous allons changer la première ligne par:

1- Le code

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

Ce qui introduit une nouvelle méthode de MovieClip: getNextHighestDepth.

Mais voyons d'abord le résultat:

2- Le résultat

Vous devriez obtenir ceci:

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

Le bouton est dessiné sur la scène, et bien sûr il ne sert encore à rien, puisque nous n'avons rien fait en ce sens.

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

3- Comment ça marche ?

Cela indique à flash de créer le MovieClip non plus à la profondeur 0, mais à la profondeur this.getNextHighestDepth(), qui est la profondeur la plus élevée qui n'est pas occupée par un MovieClip sur la scène.

this désigne toujours la scène, qui est elle-même un MovieClip.
Un MovieClip possède une méthode getNextHighestDepth qui renvoie le numéro de la première profondeur libre au-dessus de tous les MovieClip contenus dans ce MovieClip.
Cette méthode, contrairement à loadMovie et à createEmptyMovieClip que nous avons déjà présentées, ne nécessite aucun paramètre. C'est pour cela que l'on ouvre et ferme des parenthèses sans rien à l'intérieur, après avoir écrit le nom de la méthode. Ces parenthèses sont indispensables pour que flash comprenne bien qu'on lui demande d'exécuter cette méthode et de renvoyer le résultat.

4- Exemple

Pour expliquer un peu mieux la méthode getNextHighestDepth, considérons l'exemple suivant:

Supposons que nous ayons un MovieClip nommé machin. Que machin contienne en profondeur 0 un MovieClip nommé trucA, en profondeur 3 un MovieClip nommé trucB, et en profondeur 5 un MovieClip nommé trucC.
Alors la première profondeur libre au-dessus de tous les MovieClip de machin sera la profondeur 6 (au-dessus de trucC).
Ecrire machin.getNextHighestDepth() dans le code revient à écrire 6.
Ecrire machin.createEmptyMovieClip(“trucD”,this.getNextHighestDepth()) revient à écrire machin.createEmptyMovieClip(“trucD”,6) et donc à créer dans machin un nouveau MovieClip trucD placé au-dessus de tous les autres, à la profondeur 6.

getNextHighestDepth nous permet donc de créer un MovieClip dans un autre, en étant sûr que ce MovieClip n'écrasera pas un MovieClip déjà existant.
Dans notre cas, nous l'utilisons pour être sûr que le MovieClip image ne va pas écraser le bouton sur la scène.

Ce point étant résolu, passons à la suite.


III - Le code qui charge la deuxième image

1- Le code

A la suite du code de départ, ajoutons le code suivant :

function chargerImageSuivante() {
	imageMC.loadMovie("images/image1.jpg");
}

Si, impatient que vous êtes, vous compilez et lancez le swf, vous constaterez que le bouton ne marche pas encore. Et c'est normal.

2- Explications

Ce code sert uniquement à déclarer une fonction. Fonction, vous avez dit fonction ? Mais qu'est-ce au juste qu'une fonction ?

Une fonction est un bloc de code que l'on peut demander à flash d'exécuter à tout moment.

- On commence par déclarer la fonction, comme on vient de le faire. Le fait d'écrire le code précédent ne fait que déclarer la fonction. Rien ne se passe, sinon qu'on informe flash qu'il existe une fonction nommé chargerImageSuivante qui chargera images/image1.jpg dans le MovieClip imageMC si on l'exécute.

- Si on veut que image1.jpg soit affichée il faut écrire, ailleurs dans le code, par exemple :

chargerImageSuivante();

Ce qui demandera à flash d'exécuter le code correspondant à chargerImageSuivante. Cela s'appelle appeler la fonction. Et on peut appeler une fonction autant de fois que l'on veut une fois qu'elle est déclarée.

Donc si notre code devient :

var imageMC:MovieClip = this.createEmptyMovieClip("image", this.getNextHighestDepth());
imageMC.loadMovie("images/image0.jpg");
 
function chargerImageSuivante() {
	imageMC.loadMovie("images/image1.jpg");
}
 
chargerImageSuivante();

Alors nous obtiendrons ceci :

3- Le résultat

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

Dans l'ordre :
- Le swf est lancé,
- Le MovieClip imageMC est créé,
- Le chargement de image0.jpg est demandé,
- La fonction chargerImageSuivante est déclarée,
- La fonction chargerImageSuivante est appelée et exécutée, ce qui demande le chargement de image1.jpg.

Comme tout ceci se passe très vite, le résultat final et que l'on n'a pas le temps de voir image0.jpg, qui n'a d'ailleurs pas le temps de se charger, et on se retrouve directement au chargement et à l'affichage de image1.jpg

Passons donc à la suite, pour essayer de différer l'appel de chargerImageSuivante au moment où l'utilisateur cliquera sur le bouton.

IV - Associer le code au clic sur le bouton

1- Le code

var imageMC:MovieClip = this.createEmptyMovieClip("image", this.getNextHighestDepth());
imageMC.loadMovie("images/image0.jpg");
 
function chargerImageSuivante() {
	imageMC.loadMovie("images/image1.jpg");
}
 
var nextBtn:MovieClip = this["nextBtn"];
nextBtn.onPress = chargerImageSuivante;

2- Explications

Vous avez donc, au I), placé sur la scène un MovieClip nommé nextBtn. Comme this est une référence à la scène (désigne la scène), this[“nextBtn”] est une référence au MovieClip nommé nextBtn sur la scène, c'est-à-dire le bouton que vous avez créé.

var nextBtn:MovieClip = this[“nextBtn”]; crée donc une nouvelle variable nextBtn qui désigne le bouton.

Un MovieClip est doté d'un évènement onPress. Ceci veut dire que si l'utilisateur clique sur ce MovieClip, le code correspondant à la fonction onPress du MovieClip va être exécuté.

Quand un nouveau MovieClip est créé, par défaut, sa fonction onPress est undefined, c'est-à-dire non définie. Si l'utilisateur clique sur le bouton, il ne se passe rien.

nextBtn.onPress = chargerImageSuivante; dit à flash que la fonction onPress de nextBtn est la fonction chargerImageSuivante. Quand l'utilisateur cliquera sur le bouton, la fonction chargerImageSuivante sera exécutée, et la deuxième image sera donc chargée.

Note: Notez que l'on n'écrit pas chargerImageSuivante(), avec les parenthèses, mais bien chargerImageSuivante. L'usage des parenthèses serait une erreur, car cela demanderait à flash d'exécuter la fonction, et d'affecter à nextBtn.onPress non pas la fonction chargerImageSuivante, mais la valeur renvoyée par chargerImageSuivante. Cela serait d'autant plus une erreur que chargerImageSuivante ne renvoie pas de valeur. Cette notion de valeur renvoyée, si vous êtes encore confus à ce sujet, sera détaillée ailleurs.

3- Le résultat

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

Le bouton est maintenant “cliquable” !

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

Remarque 1 :
Attention à l'erreur qui consiste, pour les utilisateurs de Flash IDE, à oublier de nommer l'occurence du symbole du bouton placé sur la scène, dans le panneau des propriétés de l'occurence. Si vous oubliez cette étape, le bouton ne répondra pas.
A ce sujet voir: Aide de Flash > Utilisation de Flash > Utilisation de symboles, d'occurrences et d'actifs de bibliothèque > Utilisation des occurrences de symboles > Affectation d'un nom à une occurrence.

Remarque 2 :
Nous aurions obtenu le même résultat avec le code plus compact :

var imageMC:MovieClip = this.createEmptyMovieClip("image", this.getNextHighestDepth());
imageMC.loadMovie("images/image0.jpg");
 
var nextBtn:MovieClip = this["nextBtn"];
nextBtn.onPress = function () {
	imageMC.loadMovie("images/image1.jpg");
}

Mais pour les explications, j'ai préféré procéder en 2 temps, et introduire d'abord la notion de fonction avec la déclaration de chargerImageSuivante au III), puis la notion de l'évènement onPress.

Remarque 3 :
Une fois l'évènement onPress du bouton défini, quand la souris passe au dessus du bouton le curseur change de forme, indiquant que l'on peut cliquer ici. Ceci a deux avantages : d'une part l'utilisateur est alerté qu'il y a un endroit où cliquer, d'autre part le programmeur a confirmation qu'il a bien défini une réponse pour l'évènement onPress.

V - Charger successivement toutes les images

Evidemment, vous avez noté le point faible: le bouton permet de charger image1.jpg, mais pas les images suivantes de l'album.

1- Le code

Nous devons donc modifier notre fonction chargerImageSuivante pour atteindre ce résultat:

var imageMC:MovieClip = this.createEmptyMovieClip("image", this.getNextHighestDepth());
imageMC.loadMovie("images/image0.jpg");
 
var imageActuelle:Number = 0;
 
function chargerImageSuivante() {
	imageActuelle++ ;
	if (imageActuelle == 4) imageActuelle = 0;
	imageMC.loadMovie("images/image" + imageActuelle + ".jpg");
}
 
var nextBtn:MovieClip = this["nextBtn"];
nextBtn.onPress = chargerImageSuivante;

2- Le résultat

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

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

3- La variable imageActuelle

D'abord nous introduisons une nouvelle variable : imageActuelle
Cette variable est de type Number, c'est-à-dire qu'elle est à utiliser pour stocker des nombres.
Nous utiliserons cette variable pour mémoriser le numéro de la photo actuellement affichée.

var imageActuelle:Number = 0; demande à flash de créer une variable nommée imageActuelle et de “mettre dedans” le nombre 0.
A partir de là, si nous avons besoin du numéro de l'image actuellement chargée, nous utiliserons la variable imageActuelle dans le code. Par exemple si nous voulons faire afficher dans la fenêtre de sortie ce numéro, nous n'avons qu'à faire trace(imageActuelle); 4)

Une variable, comme son nom l'indique, peut varier =) . Si nous voulons par la suite que cette variable prenne la valeur 2, il suffira de faire imageActuelle=2; , ce qui affectera la valeur 2 à cette variable. Notez qu'on n'utilise plus le mot var. Ce mot sert uniquement à déclarer (créer) la variable, ce qui doit être fait une seule fois dans tout le code.

Si nous voulons ajouter 1 à la valeur de cette variable nous ferons imageActuelle++;

4- Exemples d'utilisation d'une variable de type Number

Pour éclaircir un peu l'usage qu'on peut faire des variables de type Number, voici un code que vous pouvez essayer dans un document séparé, à créer pour l'occasion:

var uneVariable:Number = 0; // Déclare une variable et lui donne 0 pour valeur
trace(uneVariable); // Ceci affichera "0" dans la fenêtre de sortie
uneVariable = 2; // Donne la valeur 2 à la variable.
trace(uneVariable); // Ceci affichera "2"
uneVariable++;
trace(uneVariable); // Ceci affichera "3"
uneVariable = uneVariable + 10;
trace(uneVariable); // Ceci affichera "13" (3+10)
trace("uneVariable vaut " + uneVariable); // Affichera "uneVariable vaut 13"
 
var autreVariable:Number;
trace(autreVariable);
// Affichera "undefined" car la valeur de autreVariable n'est pas définie
autreVariable = 5;
trace(autreVariable); // Ceci affichera "5"
trace(uneVariable + autreVariable); // Affichera "18" (13+5)
 
var unResultat:Number = uneVariable + autreVariable;
trace(unResultat); // Affichera "18" (13+5)

Note: Le double slash // permet d'ajouter des commentaires au code, c'est-à-dire des portions de code dont flash ne tiendra aucun compte.

5- Charger la photo correspondant à la valeur d'imageActuelle - Les chaînes de caractères

Maintenant, si nous voulons charger dans imageMC l'image qui correspond à la valeur d'imageActuelle, nous pouvons faire:

imageMC.loadMovie("images/image" + imageActuelle + ".jpg");

Car si imageActuelle vaut 2, alors “images/image” + imageActuelle + ”.jpg” vaut “images/image2.jpg”

Nous sommes ici en présence d'une notion que je n'ai pas encore détaillée: les chaînes de caractères. Une chaîne de caractères est une donnée de type texte.
Dans le code, pour faire comprendre à flash qu'on introduit une chaîne de caractères, on entoure du texte par des guillemets. Flash comprend alors qu'il s'agit d'une chaîne de caractères, et n'essaie pas d'exécuter ce texte.

Si on code:

trace(Vive les haricots verts!);

On obtiendra une erreur car flash essaira sans succès, malgré sa bonne volonté, d'exécuter Vive les haricots verts!, qui ne veut rien dire pour lui.

Si on code:

trace("Vive les haricots verts!");

Tout se passera bien et flash affichera dans la fenêtre de sortie le texte correspondant.

L'opération qui consiste à mettre bout à bout des chaînes de caractères s'appelle concaténation.
Coder “Vive les” + ” haricots verts!” s'appelle concaténer la chaîne de caractères “vive les” avec la chaîne de caractères ” haricots verts!”. Le résultat de cette opération est une nouvelle chaîne de caractères “Vive les haricots verts!” .

Dans ce cas le signe + est l'opérateur de concaténation. Cette opérateur est à placer entre deux chaînes.

Flash offre également la facilité de concaténer une donnée numérique avec une chaîne de caractères, pour obtenir une nouvelle chaîne: L'opération “Le résultat est ” + 10 renvoie la chaîne “Le résultat est 10”, même si 10 est une valeur numérique, car écrit sans les guillemets, et pas une chaîne.

La donnée numérique peut également être une variable de type Number, et c'est pour cela que

"images/image" + imageActuelle + ".jpg"

est bien évalué comme “images/image2.jpg” si imageActuelle vaut 2.

Le mieux pour se familiariser avec les chaînes de caractères et la concaténation est encore de faire ses propres essais. Voyez “Pour en savoir plus” en bas de la page.

6- La nouvelle fonction chargerImageSuivante

function chargerImageSuivante() {
	imageActuelle++ ;
	if (imageActuelle == 4) imageActuelle = 0;
	imageMC.loadMovie("images/image" + imageActuelle + ".jpg");
}

La fonction commence par ajouter 1 à la valeur de imageActuelle. Si imageActuelle valait 0, elle vaudra 1. Si elle valait 1, elle vaudra 2, etc.

J'ai mis 4 images dans le répertoire images : image0.jpg, image1.jpg, image2.jpg, et image3.jpg. Si on n'y prend garde, la quatrième fois que l'utilisateur cliquera sur le bouton, imageActuelle prendra pour valeur 4. Comme il n'y a pas de photo image4.jpg il faut faire quelque chose. Nous allons donc, dans ce cas là, faire en sorte de revenir à la première photo, numéro 0. D'où la mystérieuse deuxième ligne de la fonction.

7- L'instruction conditionnelle if

if (imageActuelle == 4) imageActuelle = 0;

Ceci se traduirait en français par:
Si la valeur d'imageActuelle est 4 alors donner à imageActuelle la valeur 0.

Ceci s'appelle une instruction conditionnelle. Cela veut dire que l'instruction imageActuelle=0 ne sera exécutée que si (if en anglais) la condition (imageActuelle == 4) est vraie.

Dans le cas général, une instruction conditionnelle s'écrit ainsi:

if (condition) instruction;

if annonce à flash que l'exécution de l'instruction est soumise à l'évaluation de la condition.

Si la condition est vraie, l'instruction est exécutée, sinon rien ne se passe.

La condition doit être une expression booléenne (quelque chose qui est calculable et renvoie un résultat vrai ou faux).

Dans notre cas la condition est imageActuelle == 4

Le double signe égal == (à ne surtout pas confondre avec l'opérateur d'affectation = ) sert à comparer l'égalité de deux choses, ici imageActuelle et la valeur 4. Si imageActuelle a pour valeur 4, (imageActuelle == 4) vaudra true (vrai), et imageActuelle=0 sera exécuté. Pour toute autre valeur d'imageActuelle, (imageActuelle == 4) vaudra false (faux), et imageActuelle=0 ne sera pas exécuté.

Le danger d'essayer de charger une photo numéro 4 qui n'existe pas est maintenant écarté, et le diaporama “boucle” de la dernière image vers la première.

Ouf! Ce chapitre est un gros morceau, car contenant plusieurs nouvelles notions. Je ne pense pas qu'il soit possible d'assimiler toutes ces notions en une première lecture. Mais ces notions seront de nouveau employées par la suite, et j'espère que vous aurez l'occasion de vous familiariser progressivement avec elles. En gros: c'est normal si certaines choses vous semblent encore floues, il faut le temps de s'y faire :-D .

VI- Ajouter un bouton pour afficher l'image précédente

Vous avez donc maintenant tout les éléments en main pour créer un second bouton, nommé lastBtn, qui permettra d'afficher la photo précédente de l'album, en bouclant de la première image vers la dernière.

Je vous conseille d'essayer par vous-même de le réaliser, ce qui sera certainement formateur, en vous permettant de faire toutes les erreurs que ce tutoriel vous a évité :-D !

Deux indications quand même:
a) Pour enlever 1 à la variable imageActuelle il faut coder:

imageActuelle-- ;

b) 0 - 1 = -1 :-)

Vous trouverez en fichier joint le code correspondant, qui donne le résultat voulu.
Pour vous procurer les fichiers joints à cet article, voyez en bas de page : 5)

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


Conclusion

Nous avons donc introduit dans cet article:

  • La méthode MovieClip.getNextHighestDepth
  • Les fonctions
  • La notion d'évènement et l'évènement onPress
  • Les variables de type Number
  • Les chaînes de caractères
  • Les instructions conditionnelles

Si vous êtes tout à fait débutant, c'est énorme !
A mon avis, n'essayez pas d'aller trop vite et donnez vous du temps. Vous avez là une matière qui peut vous occuper des heures, et même peut-être plusieurs “séances” de programmation.
Faites vos propres essais, tentez des variantes.
Essayez de réécrire tout le code de vous même, en partant de 0. Cela sera l'occasion de faire vos propres erreurs, et de vous approprier vraiment les choses.

Ou alors jetez-vous sur la suite, après tout chacun son rythme!

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) , 2) , 3) , 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
4) L'instruction trace permet d'afficher du texte dans le fenêtre de sortie de Flash IDE. Pour en savoir plus à ce sujet consultez:
- Aide de Flash CS3 > Utilisation de Flash > ActionScript > Débogage du code ActionScript 1.0 et 2.0 > Utilisation de l'instruction trace.
- Ce tutoriel mediabox
- Pour les autres environnement que Flash IDE, les informations sur le débogage, dans leur documentation.
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).