Introduction
Ce tutorial sur la gestion et leLa palette de commande pilotage d'une carte interactive et dynamique va nous permettre de mettre en place l'automatisation de certaines tâches de construction. Une fois encore on fera apple à des fichiers XML, 2 pour être précis, un premier qui permettra l'initialisation de l'animation principale, et un second qui contiendra la base des datas nécessaires à une carte en particulier. Trois parties vont être étudié et seront nécessaires pour réaliser l'approche complète, elle couvriront les points suivants:
- Génération et gestion d'une palette de menu d'interaction sur une carte, afin d'afficher ou masquer certaines informations.
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. La carte est issus d'un exemple de fichier vectoriel fournis par GéoAtlas et déssinées à l'origine par Régales Collection.
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
- Être familier avec l'ActionScript
- FlashTM MX 2004 (ou plus) 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 reste des plus basique. Elle se compose d'une palette de fonctionalités qui est déplaceable (en marron sur l'image), et d'une carte sur laquelle on peut afficher ou masquer certains types d'informations (qui peuvent également être activés au lancement au travers du fichier XML). Dans ce tutorial, les possibilités d'affichages sont
- Routes
- Rivières
- Villes.
Vous pouvez visualiser le résultat final sur cet écran
La palette de commande
Présentation et mise en place
Cette palette propose l'affichage ou le masquage des diverses options de la carte (dans notre cas, fleuves, routes, villes....). Chacun des boutons possède deux états, actif ou inactif et interagit directement avec la zone à laquelle il est affecté. Dans un but de clarté, la construction et la mise en place du code nécessaire va se faire par étapes :
- Création et positionnement sur la scène des boutons au travers d'une boucle
- Attribution des divers paramètres (positionnement, paramètres d'action, label...)
- Attribution d'une action individuelle
- Création d'une fonction de gestion
Boucle de création des boutons
Symbole du bouton de menu
Commencons par créer une nouvelle animation Flash de 400 pixels de large, 300 pixels de haut, avec une cadence de 18 images par seconde. Dessinons un rectangle qui servira de base à notre bouton (nous aurons tout le temps par la suite afin de l'améliorer et de lui donner un aspect convivial). Convertissons le en clip en prenant soin de positionner son point d'alignement sur l'angle haut gauche, et en définissant l'option avancée d'exportation pour l'action script. Optons pour un nom de symbole et un nom d'identifiant égal à "bt". Une fois le symbole créé, l'occurence présente sur la scène peut être supprimée.
Organigramme de la boucle de création
Occupons nous de la boucle de création et regardons de plus près les fonctionalités que l'on attend d'elle. Cette boucle va utiliser une variable d'incrémentation, (par exemple i, qui comptera de 0 jusqu'au nombre de bouton de menu nécessaire, avec un pas d'incrémentation de 1). La syntaxe de la boucle est simple, elle se présente sous la forme
for (var i=0;i<10;i++){
}
