Téléchargements

Le visuel
Le fichier source (.fla)

Naviguer d'une image à l'autre

Le CDCF est constitué de trois onglets :

• Documentation commerciale
• Analyse fonctionnelle du besoin
• Analyse fonctionnelle technique

Seul le deuxième onglet "Analyse fonctionnelle du besoin" donne accés à un sous menu constitué de trois boutons :

• Besoin
• Fonctions de service
• Caractérisation des fonctions

On retrouve donc dans le fichier .fla, sur le calque étiquettes, cinq images clés, qui chacune correspond à un état de l'animation :

• Documentation commerciale
• AFB-Besoin
• AFB-Fonctions de service
• AFB-Caractérisation des fonctions
• Analyse fonctionnelle technique

Ces cinq images portent un drapeau rouge (ou encore une étiquette); cela permet de donner un nom à chaque image pour s'y référer plus facilement dans le code qu'il faut écrire pour définir la navigation au sein de l'animation.

Les étiquettes se nomment respectivement :

• com
• afbes
• fs
• carac
• aftec

Le nom de l'étiquette attribué à chaque image est visible dans le panneau des propriétés.

Notez qu'il y a une sixième image clé (la numéro 1) qui ne porte pas d'étiquette.
Cette image contient simplement du code qui s'appliquera à toutes les images.

Sur le calque "menu général" se trouvent les trois boutons permettant d'accéder aux trois images clé : Documentation commerciale, Analyse fonctionnelle du besoin et Analyse fonctionnelle technique.

Ces trois boutons portent tous un nom d'occurrence, respectivement :

• bt_com
• bt_afbes
• bt_aftec

Le nom d'occurence de chaque bouton est visible dans le panneau des propriétés

Le code associé à ces boutons se trouve sur l'image 1 du calque action script (F9):

bt_com.onRelease=function(){ définit une fonction qui s'exécute lorsque l'évenement clic sur bt_com se produit.

this._parent.createEmptyMovieClip("conteneur",10); permet de supprimer le clip se trouvant au niveau 10; Voir plus loin Charger une image.

this._parent.gotoAndStop("com"); permet de se rendre à l'image étiquettée "com" de l'animation principale.

Remarque importante sur le ciblage (le truc un peu compliqué dans Flash mais qu'il faut absolument comprendre) :

Tous les symboles (boutons ou clips) placés sur un calque de l'animation se trouvent sur le _root.

L'évenement onRelease, est défini sur le bouton bt_com qui se trouve sur l'animation principale donc le _root.

Si l'on met simplement gotoAndStop("com"), Flash va comprendre qu'il faut se rendre sur l'image étiquettée com du symbole bouton bt_com (elle n'existe pas) et non sur l'image étiquettée com de l'animation principale.

Il faut donc cibler l'animation principale comme suit :

this = lui ou encore le bouton bt_com sur lequel est déclaré l'évenement onRelease

this._parent = l'animation parente du bouton bt_com = l'animation principale = _root

On peut donc tout à fait remplacer this._parent par _root dans cet exemple.

this._parent permet de cibler en relatif par rapport au bouton, alors que _root permet de cibler en absolu, c'est à dire par rapport à la "racine" de l'animation principale.
A vous de choisir

Rendre visible ou invisible un bouton

Lorsque vous lancez l'animation remarquez que le bouton "Documentation commerciale" du premier onglet est inactif et grisé

En fait, le bouton bt_com correspondant est rendu invisible de la façon suivante : bt_com._visible=0;

L'inscription grisée "Documentation commerciale" n'a rien à voir avec le bouton bt_com mais est un un champs de texte statique se trouvant sur le calque "sur menu général" qui est inférieur au calque "menu général".

On note donc que la propriété _visible permet de rendre visible ou invisible un symbole.

Charger une image .jpg extérieure à l'animation

Sur la page "caractérisations des fonctions", on retrouve l'énoncé des différentes fonctions de service du produit.

Cliquer sur l'une des fonctions de service permet d'afficher le tableau qui la caractérise, en effaçant le précédent.

Il y a donc un tableau pour chaque fonction de service; ces tableaux sont des images .jpg externes à l'animation et qui sont chargées dynamiquement lorsqu'on clique sur l'intitulé d'une fonction.

• La fonction

function affichJpg(jpg){ On déclare la fonction "affichJpg" qui a pour argument la variable "jpg"

_root.createEmptyMovieClip("conteneur",10); On crée un clip vide nommé "conteneur" et placé au niveau 10.

_root.conteneur._x=101; _root.conteneur._y=218; permet de positionner ce clip "conteneur" par rapport à l'origine de l'animation qui se trouve en haut à gauche; l'axe x est horizontal et orienté vers la droite, et l'axe y est vertical et orienté vers le bas.

_root.conteneur.loadMovie(jpg); permet de charger dans le clip "conteneur" l'image téléchargée à l'url "jpg".


• L'appel à la fonction

fp1.onRelease=function(){ affichJpg("data_im/fp1.jpg"); };

fp1 est le nom d'occurrence de l'intitulé de la fonction FP1 qui fait office de bouton.

affichJpg("data_im/fp1.jpg"); permet de charger dans l'animation l'image dont l'url est "data_im/fp1.jpg" lorsque l'événement onRelease est invoqué sur fp1.

- FIN -