tutoriaux flash et actionscript

Tutoriaux : Diaporama horizontal et défilement interactif

1. Introduction

Le but de ce tutoriel est de vous présenter un code épuré qui vous permettra de visualiser une série d'images. Ces images se trouvent dans un même répertoire, ont toutes le même format et seront chargées dynamiquement par l'animation flash. Pour garder un code simple j'ai fait le choix de ne pas mettre de barre de chargement mais si vos images ont une bonne définition je vous conseille d'ajouter des barres de chargement afin de faire patienter vos visiteurs. La présentation de ces images est interactive : le défilement latéral des images dépend de la position du curseur... C'est une présentation classique sans grande originalité mais l'objectif de cette page est de comprendre et non de céder à la facilité en vous proposant un diaporama élaboré, "clé en main" et paramétrable ! Observez l'animation ci-dessous dont je vais vous détailler la réalisation.

2. Dans la bibliothèque

Ouvrez le logiciel flash et créez un nouveau document. Dans le panneau "document" du menu "modification" définissez les dimensions de l'animation : 600 pixels de largeur et 230 pixels de hauteur. Ces dimensions ont été choisies pour être adaptées aux dimensions des images qui ont respectivement 135 et 170 pixels de largeur et de hauteur. Pour une fois, ce qui se trouve dans la bibliothèque est simple à détailler : rien. Il n'y a rien dans la bibliothèque ! Dans le même répertoire que celui qui contient votre animation, créez un nouveau répertoire et nommez le "photos". Placez dans ce répertoire les photos que vous voulez présenter. Pour suivre ce tutoriel vous pouvez télécharger l'ensemble des 23 photos présentées dans l'animation ci-dessus. Détail d'une extrême importance, vous devez nommer "correctement" vos images : 0.gif, 1.gif, 2.gif, ...., 22.gif !

3. Sur la scène principale

Sur la scène principale, créez un champ de texte dynamique. Dans le panneau "propriétés", nommez cette occurrence "commentaires". A l'aide du panneau "aligner" (ctrl+K), centrez cette zone de texte horizontalement et placez la au bas de la scène. Ce texte dynamique vous permettra d'afficher un petit commentaire pour chaque image.

4. Le code

Dans le panneau "action" de l'image clé n°1, placez le code ci-dessous.

largeur = 135;
hauteur = 170;
espace = 25;
nbr = 23;
 
infos = new Array();
infos[0] = "Paul très concentré !";
infos[1] = "Frank dans son petit seau jaune";
infos[2] = "Claude en marcel jaune";
infos[3] = "Paco le charmeur !";
infos[4] = "Grégory en admiration devant ses parents";
infos[5] = "Muriel et son petit ourson";
infos[6] = "Serge dans les îles";
infos[7] = "Thomas-les-binocles";
infos[8] = "Huguette sort du trou";
infos[9] = "Vincent le joufflu";
infos[10] = "Pascal en couche culotte";
infos[11] = "Hélène-la-joie-de-vivre";
infos[12] = "Léon... quelles joues !";
infos[13] = "Vaïra avec son bob et le chien de Columbo";
infos[14] = "Antoine fait des pâtés de sable";
infos[15] = "Vania en gros plan...";
infos[16] = "Paul alias la crevette";
infos[17] = "Calvin et son bob bleu";
infos[18] = "Rokia et son \"coin-coin\" sous la serviette de bain";
infos[19] = "Leïla les p'tites bouclettes";
infos[20] = "Victor et ses haltères";
infos[21] = "Juliette en salopette";
infos[22] = "Brice qui tire la langue";
 
largeurTotale = nbr*(largeur + espace) + espace;
 
this.createEmptyMovieClip("diaporama", 0);
diaporama._y = 10;
 
for(var i = 0; i < nbr; i++) {
 
var mc = diaporama.createEmptyMovieClip("photo"+i, i);
mc._x = espace + (largeur + espace)*i;
mc.createEmptyMovieClip("conteneur", 0);
mc.conteneur.loadMovie("photos/" + i + ".gif");
mc.createEmptyMovieClip("cadre", 1);
 
with(mc.cadre) {
lineStyle(1, "0x000000", 100);
moveTo(0, 0);
lineTo(largeur, 0);
lineTo(largeur, hauteur);
lineTo(0, hauteur);
lineTo(0, 0);
}
 
mc.nombre = i;
 
mc.onRollOver = function() {
commentaires.text = "Photo n°" + this.nombre + " : " + infos[this.nombre];
}
 
mc.onRollOut = function() {
commentaires.text = "";
}
 
}
 
onMouseMove = function() {
diaporama._x = (600 - largeurTotale)/600*_xmouse;
}

5. Le code avec ses commentaires

Nous définissons les dimensions des photos que nous allons charger.

largeur = 135;
hauteur = 170;

Nous définissons le nombre de pixels entre deux images consécutives.

espace = 10;

Nous indiquons le nombre d'images à charger.

nbr = 23;

Nous créons un tableau qui contiendra les commentaires propres à chaque image. Commentaire qui sera affiché lorsque la souris survolera la photo. Nous aurions également pu mettre ces commentaires dans un fichier texte et chargé les commentaires dans l'animation (j'ai écrit un tutoriel sur le sujet...). Si les commentaires sont vraiment longs, je vous conseille alors de placer ces textes dans un fichier xml (tutoriel à venir...).

infos = new Array();

infos[i] est le commentaire qui correspond à la photo i.gif (i variant de 0 à 22). Observez le commentaire n°18 dans lequel se trouvent des guillemets...

infos[0] = "Paul très concentré !";
infos[1] = "Frank dans son petit seau jaune";
infos[2] = "Claude en marcel jaune";
infos[3] = "Paco le charmeur !";
infos[4] = "Grégory en admiration devant ses parents";
infos[5] = "Muriel et son petit ourson";
infos[6] = "Serge dans les îles";
infos[7] = "Thomas-les-binocles";
infos[8] = "Huguette sort du trou";
infos[9] = "Vincent le joufflu";
infos[10] = "Pascal en couche culotte";
infos[11] = "Hélène-la-joie-de-vivre";
infos[12] = "Léon... quelles joues !";
infos[13] = "Vaïra avec son bob et le chien de Columbo";
infos[14] = "Antoine fait des pâtés de sable";
infos[15] = "Vania en gros plan...";
infos[16] = "Paul alias la crevette";
infos[17] = "Calvin et son bob bleu";
infos[18] = "Rokia et son \"coin-coin\" sous la serviette de bain";
infos[19] = "Leïla les p'tites bouclettes";
infos[20] = "Victor et ses haltères";
infos[21] = "Juliette en salopette";
infos[22] = "Brice qui tire la langue";

Toutes nos images vont être placées dans un même clip : largeurTotale est la largeur de ce clip. Cette variable aura son importance pour gérer le déplacement latéral des images.

largeurTotale = nbr*(largeur + espace) + espace;

Nous créons un clip vide qui s'appelle "diaporama".

this.createEmptyMovieClip("diaporama", 0);

Nous définissons l'ordonnée du clip "diaporama". Son abscisse sera définie plus loin par la position du curseur.

diaporama._y = 10;

Nous utilisons une boucle for pour faire varier un nombre entier i entre 0 et nbr (nbr exclu).

for(var i = 0; i < nbr; i++) {

Dans le clip diaporama nous créons des clips vides qui s'appellent respectivement photo0, photo1, ..., photo22.

var mc = diaporama.createEmptyMovieClip("photo"+i, i);

Nous définissons les abscisses des clips "photo" contenus dans le clip diaporama.

mc._x = espace + (largeur + espace)*i;

Dans les clips "photo" nous créons un nouveau clip vide qui s'appelle "conteneur". L'imbrication des clips commence peut être à devenir floue dans votre esprit... Ce clip "conteneur" est là pour contenir physiquement l'image que nous allons charger.

mc.createEmptyMovieClip("conteneur", 0);

Nous chargeons dans le clip "conteneur" l'image gif numéro i qui se trouve à côté de l'animation dans le répertoire "photos". Si vos images sont au format jpg il suffit de remplacer ".gif" par ".jpg" !

mc.conteneur.loadMovie("photos/" + i + ".gif");

Dans le clip "photo" nous créons un nouveau clip vide (encore !) qui s'appelle "cadre" et qui est "au-dessus" du clip "conteneur".

mc.createEmptyMovieClip("cadre", 1);

Dans le clip cadre, nous définissons un style de trait, puis nous dessinons un rectangle ayant exactement le format de nos images.

with(mc.cadre) {
lineStyle(1, "0x000000", 100);
moveTo(0, 0);
lineTo(largeur, 0);
lineTo(largeur, hauteur);
lineTo(0, hauteur);
lineTo(0, 0);
}

Dans le clip "photo" nous définissons une variable "nombre" qui prend la valeur de i.

mc.nombre = i;

Nous définissons ce qui doit se passer lorsque le curseur de la souris se pose sur le clip "photo" : la zone de texte dynamique "commentaires" doit afficher le numéro de la photo ainsi que le commentaire qui correspond à cette photo.

mc.onRollOver = function() {
commentaires.text = "Photo n°" + this.nombre + " : " + infos[this.nombre];
}

Nous définissons ce qui doit se passer lorsque la souris quitte la zone délimitée par la photo : le champ de texte dynamique "commentaires" affiche la chaîne vide... autrement dit le texte précédemment affiché disparaît.

mc.onRollOut = function() {
commentaires.text = "";
}

Fin de la boucle for !

}

Nous définissons ce qui doit se passer lorsque la souris bouge ! Et bien l'abscisse du clip "diaporama" doit être modifiée... Avec la formule introduite si _xmouse vaut zéro (la souris et sur le côté gauche de l'animation) alors diaporama._x vaut également zéro (la photo n°0 est à gauche de l'animation). Si _xmouse vaut 600 (ce qui signifie que la souris est du côté droit de la scène), alors diaporama._x vaut 600 - largeurTotale et dans ce cas la dernière photo (la photo n°22) est également du côté droit de la scène... A méditer !

onMouseMove = function() {
diaporama._x = (600 - largeurTotale)/600*_xmouse;
}

6. Remarques

Attention : ce diaporama est basique et je ne le présente pas comme un exemple abouti ! On peut largement améliorer cette présentation, la rendre plus attractive en ajoutant quelques effets.

Quelques petites améliorations :

- variation n°1 :	on peut ajouter une ombre à chaque image. Ombre qui disparaît lorsque la souris se trouve au dessus de l'image : on crée ainsi un pseudo effet de perspective.

- variation n°2 :	on voit souvent sur le net des défilements horizontaux avec un effet léger de "glissement" latéral... (technique dite du "easing" pour les anglophones).

- variation n°3 :	il est possible de jouer avec la transparence (propriété _alpha) de l'image pour mettre en valeur l'image qui est survolée.

- variation n°4 :	On ajoute une petite boucle for, une fonction sinus et on obtient ainsi un léger déplacement vertical des images qui donne un peu plus de vie à cette présentation.

Les variations sont infinies et c'est à vous de faire preuve d'originalité ! Au passage je vous invite à voir le magnifique portfolio du photographe Philippe McClelland qui utilise une présentation faisant penser à celle décrite dans cette page (avec de bien plus belles images évidemment !). Je vous laisse admirer les superbes transitions entre les photos : je pense que c'est un effet réalisé à l'aide des nouvelles fonctionnalités du flash player 8 (BimapData, setPixel et getPixel). Lire le tutoriel que j'ai réalisé à ce sujet...

"Je ne vois pas les images !"

Vous avez suivi scrupuleusement toutes les indications ci-dessus et pourtant lorsque vous publiez votre animation, vous ne voyez pas les images ! Inutile de m'envoyer un mail rageur pour me dire que mes tutoriaux sont nuls... Il y a sûrement un problème avec le format de vos images : en effet, Flash charge très bien les jpg par contre il n'en fait pas autant avec toutes les images au format gif...

Accueil | Tutoriaux