Introduction
Ce tutorial sur un visualiseur d'images n'est pas une finalité en soit, il va juste nous permettre de mettre en place diverses approches de FlashTM, comme l'utilisation de XML ou encore l'utilisation de classe en ActionScript 2.0. Trois parties vont être étudié et seront nécessaires pour réaliser l'approche complète, elle couvrira les points suivants:
- Génération d'une barre de menu au travers d'un fichier XML avec gestion multifonction des boutons de sous menu
- Génération d'un bando d'image défilant et dynamique utilisant aussi XML avec mise en place d'un outil de glissé déposé
- Ajout d'un système d'assenceur avec utilisation d'une classe
Du fait du partenariat entre Puce et Média et Next Formation, ce tutorial à pour origine une partie de support du cours suite à une formation Flash Programmation en cours particulier. Les images utilisées sont des images libres de droits fournis sur les CD Rom du magazine Computer Arts.
Prérecquis et fichiers nécessaires
Pour mener à bien ce tutorial, il vous faut
- Télécharger l'ensemble des fichiers sources nécessaires
- Connaître l'environnement FlashTM
- Avoir des bases minimums en XML
- Être familier avec l'ActionScript
- FlashTM MX 2004 installé sous Mac ou PC
Présentation
Le but ne portant pas sur le rendu esthétique ou sur une quelconque recherche graphique, l'interface est des plus basique, elle se compose d'une partie menu, d'une partie de sélection d'images et une partie d'affichage. Le croquis ci dessous présente la disposition et l'apprence des divers éléments. Vous pouvez visualiser le résultat final sur cet écran
Génération d'une barre de menus au travers d'un fichier XML
Cette partie du tutorial présente une approche pour travailler avec un fichier XML, dans le but de pouvoir générer du contenu dynamique. Dans un premier temps on va analyser la construction générale qui a été donné à cette animation. La barre de menus proposera divers sous menus qui pourront avoir chacun une fonctionnalité différente. Ceci nous aménera à mettre en place un gestionnaire de fonctionnalités. Pour cet exemple nous nous cantonnerons à trois fonctionalités principale :
- Chargement de librairie images
- Accès à une URL
- Changement de la langue d'affichage
L'aspect visuel des boutons de menus et des boutons de sous menus pourra être différent. L'ensemble de ce module pourra éventuellement être transformé en un composant basique. Pour cette raison, un ensemble de valeurs sera initialisée sur un premier calques afin de les avoir plus facilement accessible et de rendre l'implémentation en composant plus rapide. Il est a noté que pour ceux d'entre vous qui souhaiterait réaliser un composant plus avancé, qu'il pourrait être mis en place un tutorial, faites en la demande.
Approche générale de la construction de l'animation
Les divers groupes de calques permettent de regrouper :
- init/valeur : les valeurs d'initialisations
- bts : la gestion des boutons
- images : les galleries d'images et la zone d'affichage
- visuel : le reste du décor et des éléments d'interface
Utilisation des divers groupes de calques et calques de l'interface principale
Pour une meilleure clarté, le fichier FlashTM étant constitué en grande partie de code, nous allons séparer les diverses fonctions en calques et groupe de calques. Vous pouvez consulter sur l'animation ci contre les diverses utilisations de chacun de ces groupes et calques.
En survollant les groupes ou les calques une info-bulle vous informe sur la nature des informations contenu, si vous cliquez, vous en avez un micro-aperçu.
Il se peut que vous ayez un problème au niveau des polices de caractères utilisées. Dans le tutorial, il est utilisé Fujyama (pour les boutons de menus et de sous menus) et Eras Light ITC et Eras Light Bold ITC (pour le titre). Si tel était le cas, n'hésitez pas d'en faire part à Cette adresse email est protégée contre les robots des spammeurs, vous devez activer Javascript pour la voir. , nous améliorerons l'animation en utilisant des polices partagées. Les couleurs sont à base de gris #F2F2F2, #333333, #666666 et de marron #660000.
Le fichier XML de la barre de menus
Du fait que la barre de menu va être générée dynamiquement, il est important de travailler le fichier XML en même temps que la génération du fichier FlashTM et de son ActionScript. Au niveau des relations menus sous menus, il suffira de passer par une imbrication d'éléments du type :
<menu>
<menu_item>
<smenu> </smenu>
</menu_item>
</menu>
Coté Action des boutons du sous menu, nous pourrions distinguer :
- chargement d'une nouvelle librairie
- accès d'une URL
- changement de la langue de présentation de l'interface
De ce fait cela nous donne quelques informations pour une meilleure définition des boutons, menus et sous menus, Donc coté barre de menu, les informations nécessaires sont pour l'instant sont :
- le libéllé du bouton
- le type d'action du bouton
- le paramètre direct sur l'action (nom du fichier gallerie, url à atteindre, langue choisi...)
- l'information complémentaire (le dossier d'accès, la cible d'ouverture de l'URL, etc...)
Une fois complété, le fichier XML pourrait avoir cette apparence
<menu>
<menu_item infos="datas">
<titre>Galleries</titre>
<smenu typeAction="chargeXML" param="animaux.xml" infos="animaux">Animaux</smenu>
<smenu typeAction="chargeXML" param="lieux.xml" infos="lieux">Lieux du monde</smenu>
<smenu typeAction="chargeXML" param="sports.xml" infos="sports">Sports / Actions</smenu>
</menu_item>
<menu_item infos="datas">
<titre>Les liens</titre>
<smenu typeAction="lienURL" param="http://www.nextformation.com">Centre</smenu>
<smenu typeAction="lienURL" param="http://puceetmedia.free.fre/datas/flash/v_image_0.php">Tutorial</smenu>
</menu_item>
<menu_item infos="datas">
<titre>Langues</titre>
<smenu typeAction="chargeXML" param="french.xml" infos="langues">Français</smenu>
<smenu typeAction="chargeXML" param="uk.xml" infos="langues">Anglais</smenu>
<smenu typeAction="chargeXML" param="" infos="langues">Espagnol</smenu>
<smenu typeAction="chargeXML" param="" infos="langues">Italien</smenu>
</menu_item>
</menu>
ActionScript pour la gestion du fichier XML
Le code pour la génération de la barre va s'éffectuer en quatre modules
- le parseur XML
- le générateur de menu
- le générateur de sous menus
- le gestionnaire de non survol (afin de replier les sous menus si l'utilisateur sort sans cliquer)
En ce qui concerne le travail avec un fichier XML, il ya deux écoles, soit on travaille tout au long de l'animation avec le fichier XML, soit on le transfère dès le début dans un objet Array() parfois plus souple à manipuler. Du fait que nous n'aurons pas à renvoyer de datas vers le serveur, nous allons opter pour la seconde méthode. Pour ceux qui ne sont pas familier avec la technologie XML et FlashTM, il est conseillé de suivre le tutorial prévu à cet effet sur les bases de XML avec FlashTM.
Du fait qu'il aura certainement plusieurs fichiers XML à utiliser durant l'animation, il est préférable de sortir dans le calques des valeurs l'utilisation éventuelle de l'encodage de la page, donc placez la ligne suivante sur le calque d'initialisation des valeurs.
System.useCodePage = true;
Présentation des structures XML et de l'objet Array()
Pour le reste, on parsera le fichier sur deux niveaux, une première boucle pour les menus, et la seconde pour les sous menus. La plupart des informations étant sous forme d'attribut, le code en sera d'autant plus lisible. La structure Array() pourra respecter les mêmes noms afin de faciliter notre lecture et compréhension des documents.
Vous pouvez consulter la structure de l'objet Array en comparasion avec celle du fichier XML dans l'animation ci-contre.
Une fois l'objet Array() composé, il ne reste plus qu'à supprimer l'objet XML() afin de le libérer de la mémoire et ensuite lancer l'appel de la fonction qui va prendre en charge l'affichage de la barre de menu.
La génération et l'affichage des menus
Pour ceux d'entre vous qui ne sont pas familier avec la génération de clip à la volée, l'ensemble de cette démarche est repris dans le détail au cours du tutorial sur la génération de clip à la volée, il vous est alors conseillé de le suivre.
Dans l'optique de créer un éventuel composant ou tout simplement de rendre plus accessible les divers paramèttres utilisés dans le code, il est intéressant d'initialiser certaines valeurs dans le calque initprévu à cet effet. Nous pouvons utiliser trois variables depX, depY et esp qui contiendront respectivement les offset X et Y et l'espacement inter bouton.
Afin d'optimiser l'utilisation de la barre des menus, il est préférable de créer un clip vide qui servira d'enveloppe. Ceci permettra éventuellement de changer le mode d'affciahege ou de déplacer plus facilement l'ensemble des boutons en une seule étape. Commençons donc par invoquer l'instruction createEmptyMoivieClip() pour mettre en place un clip menuGlobal ainsi que de positionner son offset _x et _y sur les valeurs de depX et depY.
Connaissant le nombre de menu à implémenter, il est facile en utilisant une boucle de positionner et libéller les divers boutons du menus. Le symbole des menus btM est lié à l'exportation sous l'identifiant btMdonc en utilisant la fonction attachMovie()nous pouvons l'ajouter au clip menuGlobal, et en utilisant l'instruction with ( ) { } le positionner en _x et _y et lui attribuer le libellé titre. Il peut être judicieux d'ajouter une propriété suplémentaire id qui pourra s'avérer utile par la suite afin d'identifier le bouton. Du fait de l'utilisation de l'instruction width ( ) { }, une propriété ne peut être affectée que si elle existe déjà, donc il nous faut l'instancier au travers de l'objet passé à la fonction attachMovie()afin de l'initialiser au cours de l'instruction with ( ) { }.
A ce stade nous pourrions également ajouter à nos boutons soit une classe (comme nous le verrons pour les boutons d'assenceurs) soit une fonction d'évènement. Pour ce tutorial, il a été retenu une méthode moins optimisée d'un point de vue purement codeur, mais qui permet quelques ouvertures dans certains cas. Il s'agit d'encapsuler un bouton, qui contient déjà un script, dans un clip lié pour l'exportation. La seule partie de ce script qui nous interesse pour l'instant est celle qui invoque le sous menu :
on (rollOver) {
_root.afficheSmenu(id, this);
}
Récapitulatifs de l'encapsulation du clip et du bouton
Positionnement des scripts de bouton à l'intérieur de clip.
L'animation ci contre permet de voir un récpitulatif sur l'encapsulation du bouton dans un clip lié à l'exportation.
L'utilisation des boutons menus et sous menus, n'a pas été optimisé pour la version MX. En effet ceux ci sont composés d'un clip qui encapsule un bouton et ce bouton possède un script. Vous pouvez le voir sur l'animation ci contre :
Les scripts auraient pu être également apposés à la volée lors de la génération dynamique de la barre de menus, mais ceci nous permet d'explorer une technique ancienne qui peut parfois être utile. Voir dans les paragraphes suivants le détails des contenus de ces scripts.
Les clips sont exportables pour l'action script et portent le même nom d'exportation que les symboles qui les compose.
Génération dynamique des éléments du sous menu
La génération des sous menus reproduit à l'identique le principe de la génration des menus, à la différence que celle ci doit prendre en compte un paramètre important qui est le bouton de menu qui appele la fonction. C'est la raison pour laquelle la fonction afficheSmenu() passe deux paramètres. Il est à noter qu'un seul aurait suffit, puisque this réfère au bouton de menu appelant, donc on aurait dans un second temp pu extraire facilement id.
Il est important au préalable de désafficher un éventuel sous menu en cours, et pour une question de commodité il est plus simple d'appeler une fonction qui prendre cela en compte deSafficheSmenu(). Ensuite on peut recréer un clip vide smenuGlobal qui va contenir l'ensemble des éléments du sous menu. Le positionnement de cette enveloppe doit prendre en compte la position et les dimensions du bouton qui appelle, le décalage offset de la barre de menu, et le décalage offset de l'ensemble du sous menu, ce qui se traduit par une équation du type depX+depSMX+b._x+b._width ou depY+depSMY+b._y+b._height, ou bien entendu depX, depY, depSMX et depSMY sont les différentes valeurs de offset, et b la référence au paramètre reçu, c'est à dire le bouton appelant.
Il est également intéressant de déclarer et initialiser les valeurs de offset de l'ensemble du sous menu, depSMX et depSMY, dans le calque init/valeur.
Cette fois ci, lors de l'execution de la boucle pour attacher chacun des éléments de sous menu, en plus du positionnement _x, _y et de l'ajout du libéllé titre, il faut également initialiser les valeurs action, param et infos. Précédemment nous avons stocké un identifiant id pour chacun des menus, nous voyons que pour générer les sous menus, ceci nous a été grandement utile, nous pouvons donc envisager une réutilisation possible ultérieurement. Pour cela il peut être utile de stcoker cette valeur comme une propriété id_appel pour chacun des sous menus.
Avant de s'interesser à l'action des bouton de sous menu, il faut prendre en compte une interaction de fonctionnement qui ergonomiquement parlant peut avoir son importance sur une barre de menu. Que se passe t il lorsque l'on quitte le menu sans cliquer nulle part? Il faudrait que le sous menu se retracte. Un simple rollOut() placé sur un bouton ne peut suffir car pour entrer sur un nouvel élément de menu, il faut en quitter un... donc nous allons mettre en place une mécanique un peu plus complexe, qui est également approché dans le tutorial sur la génération dynamique de clip.
Cela consiste dans un premier temps à utiliser une variable temoin (flag) qui indique si l'internaute survole actuellement un bouton ou non. En complément, et dans un second temps une fonction Ftemoin() sera appeler dans un intervalle sufisant pour vérifier si le flag est "on" ou "off", auquel cas le sous menu sera préservé ou retiré. Chacun des boutons, menus et sous menus doit comporter le script qui initialisera le flag sur "on" à l'entrée du survol et sur "off" à la sortie du survol. De même, il enclenchera à la sortie du survol l'appel de la fonction Ftemoin() dans un intervalle de 300 ms pour vérifier si entre temps l'internaute est entré sur un autre bouton ou non. Il est à noter que pour éviter d'éventuels 'télescopages' il est préférable lors de l'appel de la fonction de nettoyer un éventuel appel précédent .
on (rollOver) {
_root.temoin = "on";
}
on (rollOut) {
_root.temoin = "off";
clearInterval(_root.Appel_temoin);
_root.Appel_temoin = setInterval(_root.Ftemoin, 300);
}
La fonction Ftemoin() elle même, présente sur le calque bts/function, nettoie son propre rappel, puis vérifie la position du flag témoin, auquel cas elle invoque la fonction deSafficheSmenu() pour retirer le sous menu
function Ftemoin() {
clearInterval(_root.Appel_temoin);
if (_root.temoin == "off") {
deSafficheSmenu();
}
}
Interaction des boutons de sous menu
Nous avon sprévu des boutons de sous menus ayant plusieurs possibilités d'interaction, notamment, le chargement d'une nouvelle gallerie d'image, l'accès à une URL, ou la permutation de la langue d'affichage. Nous pouvons avoir recourt à un langage interne qui définirait les diverses interaction, et chacun d'eux utiliserait les deux paramètres param et infos de manière différente, par exemple :
Description du langage interne et de l'utilisation des paramètres
| nature de la fonction | action | param | infos | |
|---|---|---|---|---|
| 1 | Accès à une URL | lienURL | URL à atteindre | cible du navigateur |
| 2 | Chargement d'une librairie image | chargeXML | fichier XML à charger | dossier Images |
| 3 | Permutation de la langue d'affichage | permutteLangue | fichier XML de la langue |
Pour l'instant nous allons nous préoccuper des deux premières fonctionalités qui seront plus simple à implémenter. Pour l'accès à une URL un simple appel à la fonction getURL() en passant les paramètres param et infos suffiront. Il est toutefois conseillé d'avoir recour à un simple test dans le cas où le paramètre info ne soit pas défini, afin de le réinitialiser sur _blank. Pour la seconde fonctionnalité, il suffit d'interpeler la fonction rechargeXML() (que nous allons créer dans la partie suivante) afin de regénéré l'affichage de la librairie d'images. Il suffit de passer les trois paramètres param, infoset également l'identifiant de l'appeleur id_appel. Enfin, il est bon d'avoir recour la méthode du flag temoin afin de désafficher les éléments de sous mennu. Voici le code des événement onPress() des boutons de sous menus.
on (press) {
switch (action) {
case "lienURL" :
if (infos == undefined) {
infos = "_blank";
}
getURL(param, infos);
break;
case "chargeXML" :
_root.rechargeXML(param, infos, id_appel);
break;
}
_root.temoin = "off";
clearInterval(_root.Appel_temoin);
_root.Appel_temoin = setInterval(_root.Ftemoin, 300);
}
Désaffichage des éléments de sous menu
La fonction deSafficheSmenu() utilisée pour désafficher les éléments de sous menu, est réduite à son minimum pour ce tutorial. Elle ne fait que retirer directement le clip smenuGlobal qui contient l'ensemble des éléments de sous menus. Vous pouvez, si vous le souhaitez, lui apporter une interaction plus visuelle en modifiant son principe d'animation.
