Génération d'un bando d'image défilant et dynamique utilisant aussi XML
Le principe de l'animation globale est de pouvoir fournir diverses banques d'images à visionner, l'idée d'utiliser la souplesse de XML pour cela n'est pas contournable. Chaque librairie sera donc composé d'un fichier XML que nous analyserons dans le paragraphe suivant. L'approche XML pour le chargement de la librairie d'images est la même que celle utilisée précédemment pour la mise en place de la barre de menus. Les phases sont similaires :
- chargement et parsing du fichier XML
- modification en objet Array()
- génération à la volée d'un bando de vignettes
- ajout de code sur les évènements onPress() et onRelease()
Nous ajouterons le script directement lors de la génération de chaque vignette image. Son rôle sera de controller une action de glissé déposé des images vers l'affichage de la grande image. En ce qui concerne le graphisme il va falloir apposé un masque au bando de vignettes car celui ci risque fort d'être trop long et de dépasser le cadre qui lui est réservé sur l'interface. De ce fait deux assenceurs risque fort d'être utile, nous verrons cet ajout dans la troisième partie.
Le fichier XML pour générer la gallerie d'images
Un seul niveau d'imbrication est nécessaire pour cette utilisation et l'ensemble des informations peut être transmis par des attributs. Nous ferons donc appel à des balises vides. Les informations nécessaires sont :
- le titre de l'image
- le nom de fichier de l'image
- la largeur et la hauteur de l'image
- le son à jouer durant l'affichage de l'image (cette fonctionalité ne sera pas approché dans cette partie)
Voici le schéma de représentation du fichier :
<affiche>
<affiche_item titre="" lien="" width="" height="" son="" />
</affiche>
ActionScript pour la gestion du fichier XML
Le code pour générer la liste de vignettes d'une gallerie est sensiblement identique à celui utilisé précédemment pour la barre de menu, à la diiférence que celui ci sera interpellé par une fonction rechargeXML(), et non pas par un script de TimeLine qui s'exécute systématiquement dès la lecture de l'animation. De ce fait, avant tout code qui génerera la liste des images de la librairie, il serait bien de se débarasser d'une éventuelle librairie déjà chargée. Pour cela il est mis en place la fonction retireImages() que l'on appelle dès le début et que l'on verra un peu plus tard.
La fonction rechargeXML()reçoit donc les trois paramètres vu précédement, et qui ont pour valeur respectivement : le nom du fichier XML à charger, le nom du dossier dans lequel se trouve les images de la gallerie et pour le troisième l'identifiant du bouton de menu appelleur. Grace à ce dernier paramètre nous allons pouvoir intéroger l'array() menu, pour connaître le dossier principal contenant l'ensemble des images et ce au travers de le l'instruction menu[c]["infos"] où c représente l'identifiant du bouton de menu.
Une simple boucle va permettre de stocker l'ensemble des informations nécessaires sur les images de la gallerie. Les propriétés récupérées sont : titre, lien, son, width, height. Elles sont toutes stockées dans l'array() affiches. La seule que nous n'utiliseront pas dans cette partie du tutorial est la propriété son. La largeur et la hauteur de l'image vont nous être très utile car elles permettent de travailler le clip qui contiendra l'image sans avoir à attendre le chargement complet de l'image.
Une fois la liste composée, nous pouvons libérer l'objet XML() contenu dans la variable datas_affiche de la mémoire et appelé la fonction afficheImages() qui prendra en charge l'affichage complet de la librairie.
Analyse de la construction et la mise en place des éléments graphiques
La complexité de cette partie ne vient nullement de l'ActionScript mais plutôt de la manière d'imbriquer l'ensemble des éléments entre eux afin de rendre l'ensemble de la structure le plus souple à manipuler et à faire évoluer. Quelques préparations de clips sont nécessaires dans la bibliothèque. Comme nous avons vu pour la barre de menu, il est intéressant d'imbriquer les élements générés à la volée dans un clip conteneur. Seulement cette fois ci ce clip devra être positionner dans un graphique complexe. De plus, en fonction d'éventuelles modifications ergonomique, il serait plus facile de le modifier directement sur l'interface plutôt que dans le code. Pour cela nous utiliserons un clip cadreImage positionné à notre souhait directement sur la scène. De même, chacune des vignettes peuvent être amené à être modifié visuellement, (ajout d'un cadre, d'un logo, etc...), pour cela nous passerons par un clip img_fiche lié à l'exportation sous le même nom d'identifiant. Par ailleurs et du fait que tout loadMovie() adressé à une cible prend la place de celle ci, nous encapsulerons un clip img_cont à l'intérieur de img_fiche pour réaliser notre chargement.
Apercu des diverses imbrications de clip
L'animation ci-contre devrait permettre de mieux visualiser les diverses imbrications de clip.
Le bando principal de vignettes d'image est contenu dans le clip cadreImage. Ce clip a directement été posé sur la scène. Chaque vignette est un clone du clip img_fiche et contient un clip img_cont dans lequel à été chargé l'image.
Enfin un calque masque couvre l'ensemble afin de ne laisser apparaître que la partie souhaitée du bando d'images.
Action script pour l'affichage de la librairie image
Pour afficher la série d'images, nous faisons appel à une boucle qui tour à tour, attache un clip à volée, télécharge la vignette adéquate, attribut le libellé, positionne correctement l'ensemble dans le bando, affecte un identifiant id et ajoute une série d'évènements de souris afin d'apporter l'interactivité de glissé déposé souhaité. Le bando est vertical et chaque image doit être espacée d'une valeur fixe espImg. L'idéal est de définir cette propriété dans le calque init/valeur. Chaque image ne possède pas une hauteur identique, de ce fait nous ne pouvons pas utiliser comme pour les menus, une équation du type _y = i * (_height + espImg). Faisons tout simplement appel à une variable y_Images qui s'incremente à chaque tour de la valeur d'espace et de la hauteur de l'image, y_Images += ref.height+espImg; de ce fait peut importe les écarts de hauteur entre image. Il ne nous reste plus qu'à l'affecter à la position _y de la vignette.
Visualisation de l'effet de glissé déposé recherché
Afin de mieux comprendre l'interactivité recherché, regardez l'animation ci contre. Dans un premier temps le click sur la vignette crée une image fantôme qui suit le déplacement de la souris (tant que celle ci sera pressée), puis au relachement l'image fantôme disparaît et une grande image apparaît dans l'écran d'affichage.
Pour simplifier le fonctionnement de ce tutorial, nous utiliserons une image agrandie de la vignette. Si vous vous inspirez de ce tutorial pour développer une telle application, il sera préférable alors de faire appel à une image grande taille réelle.
Pour mieux concevoir les gestionnaires dévènement, il est plus simple de tout mettre à plat. Créeons un organigramme nous permettant de visualiser la logique à reproduire en ActionScript. Ce schéma nous permet de constater que le click de la souris a lieu sur la vignette, mais qu'ensuite le relachement aura lieu sur l'image fantôme puisque c'est elle qui suit le déplacement de la souris. Donc nous aurons à faire à un évènement onPress() et un évènement onReleaseOutside()directement apposé sur chacune des vignettes.
Une fois les vignettes images chargées et repertoriés dans la librairie, il faut interpeller une fonctuion fixeLimite() qui nous permettra de définir les dimensions du bando image représenté par le clip cadreImage. Nous verrons l'utilité et l'utilisation des cette fonction au cours de la troisième partie lors de la mise en place des assenceurs.
Gestion du glissé déposé de la vignette sur la zone d'affichage
Sur le onPress(), nous placerons la fonction glisseImage() en passant les deux paramètres this(pointeur de l'instance de la vignette) et this.id (identifiant de cette vignette dans l'Array() Affiches). Sur le onReleaseOutside() nous appelerons la fonction grandeAffiche() en passant cette fois ci uniquement l'identifiant de la vignette, this.id. Voyons de plus près chacune de ces fonctions. La première, glisseImage(), doit mettre en place l'image fantôme et enclancher un déplacement lié à celui de la souris.
function glisseImage(a, b) {
_root.ghost.removeMovieClip();
ref = _root.attachMovie("img_fiche", "ghost", 500);
with (ref) {
_x = a._parent._x;
_y = a._parent._y+a._y;
_alpha = 30;
img_cont.loadMovie(affiches[b]["lien"]);
}
ref.startDrag();
}
Commençons par retirer une éventuelle image fantôme déjà présente, puis attachons en une nouvelle en la nommant symboliquement ghost. Un clône du symbole lié img_fiche, fera très bien l'affaire. Positionnons le sur les mêmes coordonnées x, y que la vignette appelante (en n'oubliant pas de prendre en compte la position du clip parent cadreImage). Réglons l'opacité sur 30 afin de donné cet effet de transparence et terminons en chargeant l'image. Le deuxième paramètre, b qui correspond à l'identifiant de la vignette dans la liste Affiche va bien nous simplifier la tâche, affiches[b]["lien"]. Enfin nous pouvons lancer le déplacement de ce clip lié au mouvement de la souris.
Affichage de la grande image
La deuxième fonction grandeAffiche(), devra quant à elle arrêter le déplacement, retirer l'image fantôme de la scène et afficher la grande image accompagné de son titre dans le visualiseur.
function grandeAffiche(a) {
stopDrag();
_root.ghost.removeMovieClip();
var Img = affiches[a];
affichage.titre.text = Img.titre;
affichage.affichage_cont.loadMovie(Img["lien"]);
var rapX = affichage.mesure._width/Img["width"];
var rapY = affichage.mesure._height/Img["height"];
affichage.affichage_cont._xscale = rapX*100;
affichage.affichage_cont._yscale = rapY*100;
}
La seule complexité ici peut venir de la mise à l'échelle de l'image en utilisant les propriétés de clip _xscale et _yscale. leur utilisation peut sembler confuse. La valeur s'exprime en pourcentage, par défaut les valeurs sont de 100, car un clip est affiché à 100% de sa largeur et à 100% de sa hauteur. Ici nous allons calculer un rapport de largeur (rapX) et de hauteur (rapY) pour le clip (ils n'ont pas tous la même hauteur). Il nous faut pour cela un cadre de reférence mesure, qui contiendra les dimensions théoriques à atteindre pour la grande image, on le place dans la zone d'affichage.
Vue éclatée de la composition du clip Affichage
Si vous regardez de près la construction du clip d'affichage, celui se compose de quatre calques.
Le premier tout en haut contient le clip affichage_cont, dans lequel est télécharger l'image grand format. Ensuite vient un clip mesure qui est mis à la dimension souhaité pour les images grand format, son opacité est placé sur 0 afin de le rendre invisible. Le calque suivant contient un champ texte dynamiquetitre pour recvoir le libellé de l'image, et enfin en dernier plan, viennent les divers éléments graphique qui compose le visuel du support d'affichage.
Le rapport de largeur et de hauteur peut donc être appliqué en fonction des dimensions de ce clip mesure. En ce qui concerne la mise à l'échelle de la grande image, il peut être appliqué un rapport préservant l'homotétie de l'image, ou bien il peut être appliqué un rapport forçant l'image à prendre les dimensions du clip mesure. Pour ce tutorial nous opterons pour la deuxième possibilité. Le rapport de largeur sera donc équivalent à la largeur du clip mesure / la hauteur de la vignette, et réciproquement pour la hauteur. Nous optenons donc les rapports
rapX = affichage.mesure._width/Img["width"];
rapY = affichage.mesure._height/Img["height"];
Il ne nous reste plus qu'à les appliquer respectivement aux propriétés d'échelle de largeur _xscale et de hauteur _yscale en prenant soin de les multiplier par 100.
Et enfin la fonction qui retire les images
Au début, lors du parsage du fichier XML nous avions appellé la fonction retireImage() que nous devions voir plus tard... voilà il est donc maintenant temps. En fait cette fonction doit être appellé dès le début car une fois le fichier XML parsé, la variable affiches n'aura plus la même valeur et la fonctionnalité sera de ce fait caduque. Cette fonction va retirer une à une l'ensemble des vignettes qui auraient été crées à la volée par une fonction précédente. On en profitera pour également repositionner la propriété _y du clip cadreImage. cadreImage étant le conteneur de l'ensemble des vignettes. Nous verrons au cour de la troisième partie, quelle est cette valeur limH.
function retireImages() {
var nb_img = affiches.length;
for (var i = 0; i<nb_img; i++) {
this.cadreImage["img"+i].removeMovieClip();
}
cadreImage._y = limH;
}
