Hello ! J'ai passé pas mal de temps sur le net à chercher un fichier actionscript Flash pour faire un slider / scroller horizontal de panorama (ou d'images) sympa. Après être revenu bredouille à plusieurs reprises, je m'y suis collé. Voilà donc un tutorial détaillé sur la réalisation de ce script.

Voici ce que vous aller apprendre à faire :

Source .fla + fichier .swf à télécharger ici !

Ce qui est nécessaire

Comme un cuistot, nous devons réunir les ingrédients pour que la recette fonctionne correctement. Il faut donc :

- 30mn devant soit.
- un document Flash MX vide.
- un panorama (ou plusieurs images à accoler).
- un bouton qui servira de poignée à glisser.
- un masque pour définir l'espace de visibilité de notre panorama.
- un zest de script sur quelques clips pour associer l'ensemble.
- quelques retouches pour affiner l'ensemble.

Mise en place des ingrédients

La première chose à faire est de créer un nouveau document. Pour vous faire la main commencez par le format de base proposé par Flash, à savoir du 550px par 400px. On modifiera simplement la cadence à 25 images/secondes de manière à fluidifier notre scrolling horizontal. La fenêtre Modification > Document... (Ctrl + J) doit ressembler à ça :

Une fois ceci fait, attaquons-nous au premier élément : la poignée qui servira à faire glisser l'image de gauche à droite.
Faites Ctrl+F8 et créez un CLIP dont le nom sera "poignée". Sur la scène de ce nouveau clip, dessinez un rectangle de hauteur 30px, largeur 8px, puis faites Ctrl+k pour ouvrir la fenêtre d'alignement et cliquez sur "Aligner les centres horizontalement" puis sur "Aligner les centres verticalement". Vous devez obtenir un élément qui ressemble à ceci :

Passons maintenant a l'élément scroller qui va être la barre sur laquelle va glisser horizontalement notre poignée. Pour que l'ensemble du script soit élégant, il faut que la longueur de cette barre corresponde à la largeur de la partie visible de notre panorama (mais chacun fait comme bon lui semble évidemment). En l'occurence, dans cet exemple, notre barre va faire 350px de long. Allons-y gaiement : Ctrl+F8, création d'un nouveau Clip intitulé "scroller". Sur la scène de ce nouveau clip on tire un trait horizontal d'une valeur de 1 d'épaisseur, L: 350px, X:0.0, Y:0.0 et, Ô merveille, vous devriez obtenir ce formidable trait :

Evidemment, si les deux éléments poignée+scroller étaient réunis, on commencerait à y voir plus clair. Donc, dans votre clip "scroller", créez un calque au-dessus de celui contenant la barre, et glissez-y une occurence de "poignée". Dans la fenêtre d'alignement (Ctrl+k), cliquez sur "Aligner les centres horizontalement" puis sur "Aligner les centres verticalement" puis ajustez la valeur de X à 0. Vous devriez obtenir un scoller qui a la tête suivante :

Pour l'instant ces deux éléments n'interagissent pas l'un avec l'autre. Ce sera au rôle du script d'associer les deux.

Il est maintenant grand temps d'importer votre panorama.Personellement, j'ai importé un panorama d'un voyage sur les volcans Hawaïens dont voici la miniature (taille réelle 1500px par 300px : à télécharger ici pour l'exemple.)

Donc pour Importer : Fichier > Importer > Importer dans la bibliothèque... sélectionnez l'image du panorama, et Open. La photo est maintenant dans votre bibliothèque (Ctrl+l).

Nous pouvons donc créer le Clip "panorama" dans lequel nous allons insérer une occurence de la photo de notre panorama. Ctrl+F8, création d'un nouveau Clip nommé "panorama". Sur la scène de ce clip, faire glisser une occurence de la photo du panorama depuis la bibliothèque. Dans la fenêtre d'alignement, cliquez sur "Aligner les centres verticalement" puis ajustez la valeur de X à 0. Ca devrait donner un truc du genre :

Il est grand temps de passer aux choses sérieuses....

Retournons sur la scène principale de notre flash. A partir de la bibliotèque, faites glisser le clip "scroller" sur la scène. Créez ensuite un nouveau calque au-dessus du précédent, et faites glisser le clip "panorama" au-dessus du clip "scroller". Comme nous ne voulons pas que toute la photo soit visible, il nous faut un masque. Créez donc un nouveau calque au-dessus de celui contenant le panorama et dessinez un rectangle d'une couleur plutôt flashouille (genre bleu fluo) d'une taille de L:350px (largeur du "slider") , H:300px (hauteur de l'image). Cliquez droit sur ce rectangle, et choisissez l'option "Convertir en symbole" -> Graphique intitulé "masque".
Créons encore un calque au-dessus des autres et intitulons-le "Action".

OK.... tous les éléments sont en place... reste le script qui va tous les réunir.

ActionsScript

Sur la scène principale cliquez une fois sur l'image du panorama, et dans la fenêtre propriété donnez le nom d'occurence : "panorama".

Cliquez sur la première image du calque "Action" et dans la fenêtre d'action, collez le code suivant :

panorama.targetX = panorama._x;

panorama.onEnterFrame = function() {
var speed = 3;
this._x += (this.targetX - (this._x / 3)) / speed;
}

Ce script récupère la valeur de X et lui en attribue une nouvelle selon le déplacement du scroller. La variable speed détermine la souplesse du scrolling, quand à la valeur 3 elle est à modifier en fonction de la longueur de votre image.

Retournez maintenant dans votre clip "scroller" et cliquez une fois sur l'élément "poignée" pour lui donner un nom d'occurence : "poignee" /!\ sans l'accent !!! /!\ :

Toujours dans votre clip "scroller", au-dessus des deux calques "scroller" + "poignée", créez un calque "Action" et dans la première image, collez le script suivant :

poignee.onPress = function(){
this.startDrag(false,0,0,350,0);
};

poignee.onRelease = function(){
this.stopDrag()
}

poignee.onEnterFrame = function() {
_root.panorama.targetX = -this._x;
};

La première fonction déclare qu'en pressant sur la poignée, on peut la dépacer sur un axe horizontal, entre 0 et 350px (correspondant à la taille de notre barre de scroll).
La deuxième fonction est assez claire : on appuie plus sur la poignée, elle ne se déplace plus.
La troisième fonction renvoie la nouvelle valeur de x au Clip panorama sur la scène principale. C'est en fait -x de manière à ce que le panorama se déplace dans le sens inverse de notre scroller.

Touches Finales

Il ne reste plus qu'à retourner sur la scène principale et à cliquer droit sur le calque correspondant au masque bleu fluo. Choisissez l'option "Masque" puis faites un premier essai de votre scroller : Ctrl+Entrée. Si tout est ok, votre slider doit fonctionner, et votre image glisser avec :

Fort probablement, vous aurez quelques ajustements à faire pour que l'image se voit parfaitement d'un bout à l'autre. C'est là qu'il faut jouer avec trois choses :

1. La valeur 3 de la fonction this._x += (this.targetX - (this._x / 3)) / speed; diminuez la ou augmentez la (n'hésitez pas à donnez des valeurs décimales).

2. La valeur de X du panorama dans le clip "panorama".

3. Pour ajuster la position de la poignée, faites varier les valeurs de la fonction this.startDrag(false,0,0,350,0); à, par exemple : this.startDrag(false,4,0,347,0)

Bref, ces ajustages correspondent souvent à la façon dont vous allez intégrer le slider dans votre site... voilà

C'était long... mais ça en valait le coup non ?

Source .fla + fichier .swf à télécharger ici !

Shaun WOURM
http://www.althacker.com