Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un diaporama pas à pas - 4 - Transition en fondu entre les images

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

Objectif

Voici le quatrième volet de la série commencée ici. 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 troisième partie nous avons amélioré la transition entre les images, en supprimant le moment où la scène restait vide. Pour cela, nous avons appris à nous servir de MovieClipLoader. Nous allons maintenant finaliser la transition entre les images, en réalisant un effet de fondu enchaîné: A chaque changement d'image, la nouvelle image viendra remplacer progressivement celle qui était affichée.

Ainsi:

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


Connaissances requises pour cette partie

Rien de plus que les éléments déjà vus dans les parties précédentes.

Comment utiliser ce tutoriel

Nous allons d'abord réaliser de petits tests, “études” qui nous apprendrons à manier les outils nécessaires à notre objectif.
Lors de ces études je proposerais des variations à réaliser, en guise “d'exercices”. Si vous êtes débutants je vous conseille d'essayer de réaliser ces exercices de vous même, avant d'aller consulter les solutions en pièce jointe. C'est à mon avis, et de loin, la meilleure façon de s'approprier les notions abordées.

Comme dans les parties précédentes, le code utilisé tout au long de ce tutoriel se retrouve intégralement en pièce jointe à cet article. Pour vous procurer ces fichiers joints, voyez en bas de page : 1)


I - Plan de bataille

L'idée pour réaliser notre fondu est assez simple. Puisque la nouvelle image est chargée dans un MovieClip placé derrière celui de l'image actuelle, il suffirait d'attendre la fin du chargement, puis de faire progressivement augmenter la transparence de l'image actuelle, jusqu'à ce qu'elle devienne invisible. Ceci révélerait peu à peu la nouvelle image, réalisant un effet dit de fondu.

Comment faire varier la transparence d'un MovieClip? Et bien voilà l'occasion rêvée pour vous présenter:


II - Les propriétés d'un MovieClip

1- Qu'est-ce qu'une propriété?

Nous avons vu jusqu'ici plusieurs méthodes des objets de classe MovieClip. Les méthodes sont comme les verbes d'action. Appeler une méthode revient à demander à l'objet de faire quelque chose.

Outre les méthodes, les objets ont également des propriétés. Les propriétés sont des variables attachées à un objet. Les valeurs des propriétés d'un objet décrivent ce qu'il a de particulier par rapport aux autres objets de même classe. Les propriétés d'un objet de classe Humain, par exemple, pourraient être son sexe, sa taille, sa couleur de cheveux, son niveau en Action Script, sa rapidité à faire la vaisselle.

Note: Le terme correct serait attributs, mais dans le pratique on utilise toujours propriétés. A ce sujet voir Concepts de la Programmation Orientée Objet.

2- Opacité d'un MovieClip - La propriété _alpha

Par exemple: Tous les MovieClips ont une propriété nommée _alpha. Cette propriété peut prendre toutes les valeurs allant de 0 à 100. La valeur de cette propriété correspond à l'opacité de chaque MovieClip.

Si _alpha vaut 100, le MovieClip est totalement opaque. On le voit normalement, c'est la valeur par défaut, tous les MovieClip que nous avons utilisés jusqu'à présent avaient cette opacité.
Si _alpha vaut 0, le MovieClip est totalement transparent. On ne le voit pas.
Si _alpha vaut 50, le MovieClip est semi-transparent. On le voit en partie, et il laisse apparaître les autres MovieClips qui sont “derrière” lui (en terme de profondeur).

Pour utiliser la propriété _alpha d'un MovieClip imageMC on écrit imageMC._alpha

3- Définir l'opacité d'un MovieClip

Nous allons essayer. Créez un nouveau document, placez sur scène 2 MovieClips nommés image0 et image1, image1 étant devant image0, et mettez le code suivant:

var image0MC:MovieClip = this["image0"];
var image1MC:MovieClip = this["image1"];
image0MC._alpha = 100;
image1MC._alpha = 50;
trace(image1MC._alpha); // Ecrira 50 dans la fenêtre de sortie.

Et vous obtiendrez ceci:

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

Essayez la même chose avec des valeurs différentes.

Suggestion d'exercice: faire en sorte que chaque clic sur image1MC augmente son opacité de 10.

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

Voir la solution en pièce jointe: 2)

4- Bien d'autres propriétés

Un MovieClip a beaucoup d'autres propriétés. Par exemple _x et _y qui définissent ses coordonnées d'affichage, _width et _height qui définissent ses dimensions, _rotation qui définit son inclinaison par rapport à l'horizontale, etc.

Pour connaître toutes les propriétés d'un MovieClip, consultez l'Aide de Flash > Référence du langage ActionScript 2.0 > Classes ActionScript > MovieClip.
Faites vos essais!


III - Exécuter du code à la cadence d'affichage

Pour notre effet de fondu, nous allons avoir besoin de faire varier progressivement l'opacité d'un MovieClip.

Une fois que l'image est chargée dans imageChargementMC, il va falloir diminuer plusieurs fois de suite l'opacité de imageCouranteMC, jusqu'à atteindre _alpha = 0. Cette diminution doit être progressive dans le temps, pour que la transition soit douce et que l'on ait un effet de fondu.

Si on code

imageCouranteMC._alpha -= 10;

l'opacité de imageCouranteMC va diminuer de 10, grâce à l'opération -= 10 qui veut dire “retire 10 à la valeur de la variable _alpha”.

On voudrait pouvoir exécuter ce code plusieurs fois de suite, à intervalles de temps réguliers. Comment faire?

Et c'est là qu'intervient un nouvel évènement:

1- Présentation de l'évènement onEnterFrame

Quand un swf est exécuté, chaque MovieClip déclenche régulièrement l'évènement onEnterFrame:

Mettons qu'on ait fixé le nombre d'images par secondes (ips en abrégé, aussi appelé cadence) à 25. Dans Flash IDE on choisit la cadence dans les propriétés du document, avec la taille de la scène et la couleur de fond.

La cadence est le nombre de fois par seconde où le swf va se redessiner à l'écran.

Chaque MovieClip va déclencher, chaque 25ème de seconde, l'évènement onEnterFrame. C'est-à-dire que la méthode onEnterFrame de chaque MovieClip va être exécutée chaque 25ème de seconde. Pour être exact, on dit que onEnterFrame est une méthode de gestionnaire d'évènement.

On retrouve là un mode de gestion des évènements identique à celui de l'évènement onPress, vu en deuxième partie. Dans ce mode de gestion, on utilise les méthodes de gestionnaire d'évènement.

Par défaut, la méthode de gestionnaire d'évènement onEnterFrame est undefined, non définie. Nous pouvons écrire notre propre méthode, et l'attacher au MovieClip de notre choix.

2- Un premier fondu

Créez un nouveau document, placez un MovieClip nommé image sur la scène, et donnez une cadence de 25 ips. Entrez le code suivant et exécutez.

var imageMC:MovieClip = this["image"];
imageMC._alpha = 100;
 
function diminuerAlpha() {
	imageMC._alpha -= 1;
}
 
imageMC.onEnterFrame = diminuerAlpha;

Vous devriez voir le MovieClip disparaître peu à peu.

Je pense que vous avez compris, car c'est très semblable à ce que nous avons déjà fait pour onPress : Nous définissons une fonction diminuerAlpha qui fait décroître de 1 l'opacité de imageMC. Puis nous associons le onEnterFrame de imageMC avec cette fonction. Donc la fonction est appelée régulièrement tous les 25èmes de seconde, et le MovieClip disparaît progressivement.

Note: une fois que _alpha est à zéro, il est inutile que onEnterFrame continue à s'exécuter. Pour “enlever” notre fonction à ce moment il suffit de faire:

function diminuerAlpha() {
	imageMC._alpha -= 1;
	if (imageMC._alpha <= 0) imageMC.onEnterFrame = undefined;
}

Ce qui redonne la valeur undefined à onEnterFrame quand l'opacité est devenue inférieure ou égale à 0. (Nous avons déjà expliqué l'utilisation de if ici).

3- Un fondu à répétition

Pour améliorer, nous pouvons faire en sorte que l'opacité revienne à 100 quand elle atteint la valeur 0, pour avoir ceci:

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

Vous pouvez sûrement réaliser vous même cette variante. Le code correspondant est en pièce jointe: 3)

Une autre variante serait de faire en sorte que l'opacité remonte doucement une fois qu'elle a atteint 0:

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

Essayez! La solution est également en pièce jointe.


IV - Nous touchons au but

Et voilà, nous n'avons plus qu'à intégrer ces nouveautés dans notre code!

1- Le code

var imageChargementMC:MovieClip = this.createEmptyMovieClip("image1",this.getNextHighestDepth());
var imageCouranteMC:MovieClip = this.createEmptyMovieClip("image2",this.getNextHighestDepth());
 
// *********  Les boutons  ************************************
function chargerImageSuivante() {
	imageActuelle++ ;
	if (imageActuelle == 4) imageActuelle = 0;
	chargerImage();
}
function chargerImagePrecedente() {
	imageActuelle-- ;
	if (imageActuelle == -1) imageActuelle = 3;
	chargerImage();
}
var nextBtn:MovieClip = this["nextBtn"];
nextBtn.onPress = chargerImageSuivante;
var lastBtn:MovieClip = this["lastBtn"];
lastBtn.onPress = chargerImagePrecedente;
 
// **********  Chargement des images  **************************
var mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadInit = function () {
	imageChargementMC._alpha = 100;
	imageCouranteMC.onEnterFrame = transition;	
}
mcl.addListener(mclListener);
 
function chargerImage() {
	mcl.loadClip("images/image" + imageActuelle + ".jpg", imageChargementMC);
}
 
// ********** Transition entre les images  ********************************
function transition() {
	imageCouranteMC._alpha -= 10;
	if (imageCouranteMC._alpha <= 0) {
		imageCouranteMC.onEnterFrame = undefined;
		permuterProfondeurs(); // Exécute la fonction permuterProfondeurs.
	}
}
function permuterProfondeurs() {
	imageChargementMC.swapDepths(imageCouranteMC);
	var temp:MovieClip = imageCouranteMC;
	imageCouranteMC = imageChargementMC;
	imageChargementMC = temp;
}
 
// **********  Chargement de la première image  *******************************
var imageActuelle:Number = 0;
chargerImage(); // Charge la première image.

2- Le résultat

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

C'est quand même beaucoup plus agréable, non?

3- Explications

Nous avons déjà passé en détail l'utilisation des nouveautés, donc ce code ne devrait pas vous poser trop de problème (enfin, j'espère :-) ! ).

Pour clarifier un peu la lecture j'ai rajouté des commentaires, divisant ainsi le code en sections.

Dans mclListener.onLoadInit on commence par s'assurer que l'opacité de imageChargementMC est bien 100, puis on lance la transition en fondu, en associant l'onEnterFrame de imageCouranteMC à la fonction transition.

Cela aurait donné le même résultat en utilisant l'onEnterFrame de imageChargementMC ou même celui de la scène. Ce qui compte est de pouvoir exécuter régulièrement la fonction transition.

La fonction transition diminue l'opacité de l'image précédente par pas de 10. Quand cette opacité est à 0, onEnterFrame est supprimé et il reste à faire passer la nouvelle image au premier plan, comme nous le faisions déjà en fin d'article précédent, et c'est ce que fait la fonction permuterProfondeurs.

J'ai utilisé plus que jamais les fonctions pour séparer le code en plusieurs blocs. On aurait pu écrire aussi:

// ********** Transition entre les images  ********************************
function transition() {
	imageCouranteMC._alpha -= 10;
	if (imageCouranteMC._alpha <= 0) {
		imageCouranteMC.onEnterFrame = undefined;
		imageChargementMC.swapDepths(imageCouranteMC);
		var temp:MovieClip = imageCouranteMC;
		imageCouranteMC = imageChargementMC;
		imageChargementMC = temp;
	}
}

Et se passer de la fonction permuterProfondeurs. A ce stade, c'est uniquement une question de goût. Mais en général le code gagne en lisibilité par l'usage des fonctions.

De même, j'ai écrit une fonction chargerImage qui charge dans imageChargementMC l'image correspondant à la valeur de imageActuelle. J'aurais très bien pu garder les mcl.loadClip à la place, comme c'était avant, le résultat aurait été le même. C'est là encore une question de lisibilité, de commodité d'écriture, et cela peut faciliter grandement des changements ultérieurs.

Dernier petit point à préciser: L'usage de if dans la fonction transition.
Jusque-là if nous avait servi à exécuter conditionnellement une seule instruction. Comment faire pour exécuter plusieurs instructions? La réponse est dans le code, il suffit d'enclore les instructions à exécuter entre des accolades. Ceci s'appelle créer un bloc de code. Selon l'évaluation de la condition (imageCouranteMC._alpha ⇐ 0), c'est tout le bloc qui sera ou non exécuté.


Conclusion

Notre diaporama s'améliore, et la taille du code augmente. C'est pour cette raison qu'il est commode de pouvoir faire les “études” dont je parlais en introduction. Cela permet de se concentrer sur un problème, de s'approprier une nouvelle technique. Et ensuite seulement on peut essayer d'utiliser cette technique dans un projet plus vaste, comme celui du diaporama qui va aller sans cesse s'étoffant.

D'une manière générale, pour comprendre une nouvelle notion de programmation, c'est une bonne chose de créer un nouveau document, un petit swf qui mette en jeu uniquement cette nouvelle notion. Cela évite de s'y perdre. De cette manière vous pourriez tester par exemple l'usage des propriétés de MovieClip qui n'ont été que mentionnées, comme la taille ou les coordonnées.

Quelques exercices possibles, dont vous trouverez codes et résultats en pièce jointe:

  • Un MovieClip qui se déplace vers la droite progressivement (utiliser _x et onEnterFrame).
  • Un MovieClip qui fait des va-et-vient horizontaux entre deux positions.
  • Un MovieClip qui fait des va-et-vient horizontaux entre deux positions, qui s'arrête quand on clique dessus, qui repart quand le clic est relâché.

Quant à notre diaporama, nous n'en avons pas tout à fait fini avec MovieClipLoader. Vous vous y attendez sûrement: Nous allons programmer des barres de progression, qui informeront l'utilisateur de la progression du chargement des images.

N'hésitez surtout pas à poser vos questions ou à faire vos remarques sur ce tutoriel, sur le forum. Il peut comporter encore des erreurs, seuls vos retours permettront de les corriger! Vous pouvez répondre au message concernant ce tutoriel ou ouvrir un nouveau sujet. Faites-moi part de votre expérience!

Bonne programmation, et rendez-vous… en cinquième partie.


Pour en savoir plus

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

1) , 2) , 3) 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) 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).