Exemple de réalisation
| Télécharger les fichiers sources de cet exemple (format CS5) |
Preparation
Commencer par télécharger les fichiers sources de l'exemple ci-dessus.
Une fois l'archive décompressée, vous aurez ainsi en votre possession le dossier "caurina", indispensable à cette réalisation, contenant les fichiers Tweener permettant d'animer votre carte.
Créer le dossier destiné à contenir votre animation Flash. Le nom de celui-ci à peu d'importance, vous avez donc libre cours.
Choisissez un fichier image au format .jpg ou .png qui sera le "guide" utilisé pour la réalisation. Cela peut etre directement l'image que vous souhaité rendre intéractive ou une créée spécialement pour vous faire la main. Pour illustrer ce tuto, vous constaterez que j'utilise un simple carré lui meme divisé en 4 parties, image au format .jpg .
Je vais vous expliquer ici comment appliquer le principe de survol, rollover, indication texte et redirection url.
Le but de ce tuto n'est pas de vous faire réaliser une carte de france interactive mais de vous faire comprendre comment obtenir ce résultat, afin que vous puissiez l'appliquer à l'élément de votre choix, que ce soit un diagramme, un damier ou meme une carte terrestre (là il y aura du boulot).
Etape 1
Commencez par créer un nouveau document dans Flash Pro en choisissant ActionScript 3 et sauvegarder le dans le dossier destiné à héberger votre projet.
Dans la fenetre des propriétés, définissez la taille de la scène en prenant pour dimensions la largeur et la hauteur de votre guide et réglez la cadence à 30 fps.
Etape 2
Dans le menu supérieur, choississez Fichier > Importer > Importer dans la bibliothèque et importez votre image guide.
Glissez-déposez ce guide sur le "calque 1" et renommez le "Guide", puis faites un clic droit sur ce calque et choisissez Guide, cette action permettra de ne pas exporter ce calque dans le fichier SWF.
Verrouillez ce calque.
Etape 3
Dans la fenetre Scénario, créez un nouveau calque que vous nommerez "Contour" puis sélectionnez l'outil ligne, dans la colonne des outils, et assignez la couleur rouge.
Décochez la case "accrocher aux objets" dans la colonne des outils et dessinez des lignes jointes correspondant aux tracés de votre image guide.
Si nécessaire, utilisez le zoom. Prenez soin de bien lier vos différents contours, si l'un d'entre eux présente une ouverture ou une mauvaise jonction, vous rencontrerez des difficultées lors des étapes suivantes.
Effectuez maintenant une sauvegarde du document, celle-ci se révèlera utile si vos contours présente une erreur.
Etape 4
Une fois vos tracés terminés, renommez le calque "Contour" en le nommant "Exemple" (ou autre) et convertissez le en symbole (touche [F8]) en lui donnant le nom d'instance "exemple" (ou autre mais il faudra reporter ce nom dans le code ActionScript) également.
Etape 5
Double-cliquez sur le calque "Exemple" pour entrer dedans.
Renommez le calque 1, présent dans la fenetre de scénario, en lui donnant pour denomination "Contour".
Vous allez maintenant créer autant de nouveaux calques que de zones interactives prévues dans votre animation. Pour cet exemple j'ai créé 4 nouveaux calques (mon projet final intégrant 4 zone intéractives) nommés respectivement "élément 1, 2, 3 et 4".
Le nom que vous donnerez à ces calques à peu d'importance mais, si vous avez prévu de nombreuses zones, choisissez le judicieusementcar ils seront vos repères par la suite. Pour info, sur l'animation de la carte de france, chaque calque à pour nom le département qu'il héberge (ce qui fait 96 calques).
Toujours à l'intérieur du clip "Exemple", sélectionner le calque "Contour", puis dans la barre d'outils, sélectionner le pot de peinture en lui assignant une couleur gris clair (ou ce que vous voulez).
Avec cet outil, cliquez maintenant à l'intérieur des zones définies par vos tracés.
A ce stade, 2 hypothèses :
- Toutes vos zones se remplissent correctement, une par une, au fur et à mesure de vos clics. Dans ce cas tout va bien, vous pouvez passez à l'étape 6.
- Certaines de vos zones ne se remplissent pas ou plusieurs se remplissent simultanéments. Ne cherchez pas, cela signifie que certains des contours que vous avez délimité ne sont pas fermés. Il vous faut dans ce cas revenir à l'étape 3, avant la création du clip "Exemple" (en appelant la sauvegarde conseillée ou en utilisant le raccouci clavier [ctrl]+[z] autant de fois que nécessaire pour revenir au point voulu) et controler la bonne jonction de vos contours.
Utilisez la fonction de zoom pour plus de facilité (poussez parfois jusqu'à 2000%) et utilisez l'outil ligne pour effectuer vos retouches. Vous pouvez "boucher" une ouverture avec un petit bout de ligne, vous n'etes pas obliger de refaire l'ensemble des contours défectueux.
Etape 6
Une fois toutes vos zones grisées, choisissez l'outil de sélection (flèche noire), sélectionner le calque "Contour", cliquez à l'extérieur de la scène pour désélectionner l'ensemble du calque, cliquez sur la surface de votre choix.
Quand cette zone apparait grisée, car sélectionnée, coupez la (touche [ctrl]+[x]), sélectionnez le calque correspondant (celui qui l'hébergera, pour l'exemple "element1"), collez la (touche [ctrl]+[v]), ajustez sa position.
Revenez au calque "Contour" et répétez cette opération autant de fois que nécessaire, jusqu'à ce que le calque "Contour" ne contienne plus aucune zone grise (sauf animation finale spécifique).
Etape 7
Toutes vos zones sont en place ! Déplacez maintenant le calque "Contour" au-dessus des autres calques et modifiez la couleur des lignes pour du noir. Verrouillez ce calque.
Vous allez maintenant convertir chaque zone en clip.
Selon votre projet, cette étape sera plus ou moins laborieuses. L'ordre dans lequel vous allez convertir et donnez les noms d'instance à ces zones aura une influence directe sur le résultat final, cet ordre étant lu ensuite par l'ActionScript et le fichier XML (j'espère etre compréhensible).
En exemple avec la carte de france :
Le département de l'Ain à pour nom d'instance "région1" et le département de l'Aisne "région2". Si j'inverse ces noms d'instance, le "tooltip" de texte indiquera "Aisne" au survol de "l'Ain" et inversement. Pour remédier à cela je devrais inversé leur caractéristique propre dans le fichier XML.
Afin d'éviter un désagréable travail de reclassement dans le fichier XML, effectuer les convertion de zone dans un ordre réfléchi.
Sélectionnez le premier calque / zone à convertir (chaque calque représentant une zone distincte) et convertissez le en clip (touche [F8]).
Donnez a ce clip le meme nom que celui du calque (sans majuscule), un point d'alignement central, validez sur ok et donnez lui, via la fenetre de propriétés, le nom d'instance de "zone1".
Répétez cette opération autant de fois que nécessaire en respectant un ordre, dans l'application des noms d'instance, de zone1 > zone2 > zone3 > zone4 > ...
Etape 8
Une fois toutes vos conversion en clip effectuée, verrouillez tous ces calques et cliquer sur "Scene1" (en haut à gauche) pour sortir du clip "Exemple".
Supprimez maintenant le calque "Guide" du scénario et votre image, utilisée pour établir vos contours, de la bibliothèque.
Etape 9
Créez un nouveau calque dans la fenetre scénario.
Sélectionnez l'outil "rectangle primitif", assignez lui une couleur de fond, de contour et un arrondi d'angle selon vos envies et dessinez un rectangle à l'extérieur de la scène.
Dans la fenetre des propriétés, définissez sa longueur et sa hauteur selon le contenu texte qu'il hébergera.
Toujours avec ce rectangle sélectionné, convertissez le en clip en passant par Menu > Modification > Convertir en symbole.
Dans la fenetre qui s'ouvre, donnez-lui le nom de "tooltip", avec un point d'alignement central. Cochez la case "Exporter pour ActionScript" et donnez lui le nom de classe de tooltip (logiquement automatiquement inscrit). Cliquez sur OK.
Si un message "d'alerte" apparait, cliquez sur OK.
Etape 10
Double-cliquez sur le clip "tooltip" pour entrer à l'intérieur.
Renommez le calque 1 en "Fond" et créez un nouveau calque que vous nommerez "Texte".
Sélectionnez l'outil texte.
Dans la fenetre des propriétés, déterminez vos paramètres de police, taille, couleur de texte, etc ..., définissez ce champ comme "texte dynamique" avec un nom d'instance "texte". Dessinez votre champ de texte sur la scène en veillant à sont accord avec le calque "Fond" (taille et position).
Si besoin vous pourrez revenir agir sur ce calque en double cliquant sur "tooltip" dans la bibliothèque.
Etape 11
En haut à gauche, cliquez sur "Scène1" pour sortir du clip "tooltip".
Avec le clip "tooltip" sélectionné, appuyer sur la touche [effacer] de votre clavier (si,si, vous avez bien lu) pour retirer ce clip de la scène.
Renommez le calque ou se trouvait le tooltip "ActionScript" et verrouillez ce calque.
Le calque "ActionScript" sélectionné, appuyer sur la touche [F9] pour passez à la programmation.
Etape 12
Le code de programmation, je vous le donne tout prêt, vous aurez juste à le copier-coller dans la fenetre [F9] d'ActionScript.
Celui-ci est agrémenté d'explication vous permettant d'apporté les éventuelles modifications relatives aux noms d'instance ou de fichiers que vous auriez défini.
//Importez Tweener
import caurina.transitions.*;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();
//Variables
var loader:URLLoader;
var xml:XML;
var xmlList:XMLList;
var overTooltip:tooltip = new tooltip();
//Set up - remplacez exemple par le nom d instance definie a l etape 4
exemple.visible = false;
overTooltip.mouseEnabled = false;
overTooltip.mouseChildren = false;
//Charger xml - remplacez info.xml par le nom de votre fichier .xml defini a l etape 13
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, xmlCharge);
loader.load(new URLRequest("info.xml"));
//Fontion declenche quand le fichier xml est charge
function xmlCharge(e:Event):void
{
//Sauvegarder les donnees xml - remplacez zone par le nom defini dans votre fichier .xml a l etape 13
xml=new XML(e.target.data);
//Organiser les donnees dans un Array de type xmlList - remplacez zone par le nom defini dans votre fichier .xml a l etape 13
xmlList=xml.zone;
//Creer une boucle en fonction du nombre d'element dans xmlList
for (var i:int = 0; i<xmlList.length(); i++) {
var zone = exemple.getChildByName("zone"+(i+1));
zone.id=i;
//Colorer chaque departement - remplacez zone par le nom d instance de vos elements interactifs
Tweener.addTween(zone,{_color:"0x"+xmlList[i].@couleurBase,time:0});
//Ajouter les ecouteurs pour chaque region - remplacez zone par le nom d instance de vos elements interactifs
zone.buttonMode=true;
zone.addEventListener(MouseEvent.ROLL_OVER, over, false, 0, true);
zone.addEventListener(MouseEvent.ROLL_OUT, out, false, 0, true);
zone.addEventListener(MouseEvent.MOUSE_UP, clicked, false, 0, true);
}
//Rendre la carte visible - remplacez exemple par le nom d instance definie a l etape 4
exemple.visible=true;
}
//Fonction declenchee quand la souris est au dessus d'un departement
function over(e:MouseEvent):void {
//Couleur
Tweener.addTween(e.currentTarget,{_color:"0x"+xmlList[e.currentTarget.id].@couleurDessus,time:.5,transition:"easeOut"});
//tooltip
overTooltip.texte.text=xmlList[e.currentTarget.id].texte;
addChild(overTooltip);
stage.addEventListener(MouseEvent.MOUSE_MOVE, bougeTooltip, false, 0, true);
}
//Fonction declenchee quand la souris quitte un departement
function out(e:MouseEvent):void {
//Couleur
Tweener.addTween(e.currentTarget,{_color:"0x"+xmlList[e.currentTarget.id].@couleurBase,time:.5,transition:"easeOut"});
//tooltip
removeChild(overTooltip);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, bougeTooltip);
}
//Fonction declenchee par un clic souris sur un departement
function clicked(e:MouseEvent):void {
navigateToURL(new URLRequest(xmlList[e.currentTarget.id].url));
}
//Fonction declenchee quand la souris bouge
function bougeTooltip(e:MouseEvent) {
Tweener.addTween(overTooltip, {x:Math.round(mouseX),y:Math.round(mouseY)-25, time:1, transition:"easeOut"});
}
Etape 13
Avec votre éditeur de code favori, créez maintenant un fichier XML que vous enregistrerez sous le nom de "info.xml" dans le meme dossier que celui contenant votre fichier .swf et le dossier "caurina". Si vous modifiez le nom de ce fichier, reportez celui-ci dans le code ActionScript de votre animation.
Le XML est relativement simple et vous permet de définir la couleur de vos zones au repos et au survol (chacune peut etre différente), le texte affiché par le tooltip ainsi que l'url vers laquelle sera redirigé l'utilisateur en cliquant sur l'élément.
Le code çi-dessous est celui de l'exemple utiliser dans ce tuto, pas celui de la carte, afin d'en faciliter la compréhension.
<?xml version="1.0" encoding="utf-8"?>
<info>
<!-- remplacez zone par le nom d'instance donné à vos
elements interactif, sans le chiffre ; définissez les couleurs au repos et au survol -->
<zone couleurBase="58798D" couleurDessus="B12401">
<!-- remplacez texte par le nom d'instance donné au calque Texte ; définissez le texte affiché à la place de "la zone 1 " -->
<texte><![CDATA[la zone 1 ]]></texte>
<!-- remplacez # par l'url vers laquelle sera redirigé l'utilisateur en cliquant sur cet élément -->
<url>#</url>
</zone>
<zone couleurBase="58798D" couleurDessus="B12401">
<texte><![CDATA[la zone 2 ]]></texte>
<url>#</url>
</zone>
<zone couleurBase="58798D" couleurDessus="B12401">
<texte><![CDATA[la zone 3 ]]></texte>
<url>#</url>
</zone>
<zone couleurBase="58798D" couleurDessus="B12401">
<texte><![CDATA[la zone 4 ]]></texte>
<url>#</url>
</zone>
...
</info>
Etape 14
Et voici maintenant un exemple du code d'intégration de cette animation au sein de votre page HTML. Celui-ci est évidemment à personnaliser selon les dénominations de fichiers que vous aurez choisi, l'arborescence de votre site et les dimensions de votre animation.
<param name="name" value="banner" />
<param name="src" value="chemin de votre fichier .swf" />
<param name="base" value="." />
<param name="wmode" value="transparent" />
<param name="flashvars" value="xml_source=chemin de votre fichier .xml" />
<embed src="chemin de votre fichier .swf" width="890" height="800" type="application/x-shockwave-flash" flashvars="xml_source= ../images/default.xml" wmode="transparent" base="."></embed>
</object>
Voilà, tout est dis et j'espère que cette petite animation vous sera utile !