explainMe

Site complet en flash : part 7

Le 18 décembre 2009

Introduction |

Depuis le premier chapitre de ce cours, nous avons fait un certain chemin dans notre appréhension de Flash et au fil des chapitres nous n’avons eu cesse de compliquer les choses en rajoutant toujours plus de code, pour plus de fonctionnalités. Il est temps maintenant de faire un petit point, optimiser notre code, et bien sûr rajouter les actions des sous-menus !

Un petit Point |

Avant toute chose, tâchons d’évaluer le chemin parcouru.

Tout au long des précédent chapitres nous avons appris à :

nous servir de flash
créer et organiser nos fichiers à l’aide de la bibliothèque
gérer de simples animations en ActionScript et en interpolation
charger un SWF dans un autre
charger un fichier XML et lire les informations qu’il contient
passer une variable d’un SWF parent vers un SWF enfant

Pour réaliser tout cela nous avons étudier différentes fonctions et propriétés de l’ActionScript, et si notre code est parfaitement fonctionnel en l’état, il faut bien reconnaître qu’il peut encore être optimisé.

Nous n’allons évidement pas modifier tout le code, cela risquerait d’embrouiller tout le mode sans pour autant apporter quoi que ce soit de plus. En revanche je me suis rendu compte que nous utilisions beaucoup (trop ?) de switch dans notre code.

Et alors ?

Rien ! Après tout nous pourrions très bien le laisser tel qu’il est. Mais (et oui il y a toujours un « mais »), le code sera complété dans les prochains chapitres (et oui il nous reste encore un peu de travail !). De ce fait, afin de ne pas saturer le code avec des switch qui d’une part sont assez imposants, et d’autre part, dans notre cas, n’aident pas vraiment à simplifier la maintenant du code, je pense qu’il est plus judicieux de simplifier le code.

Ça ne fera pas de mal et en plus ce sera l’occasion de voir de nouvelles choses.

Également vous avez très certainement remarqué que nous ne nous étions toujours pas occuper de rendre les boutons des sous-menus actifs… Et bien cette petite optimisation du code nous offrira justement l’opportunité de nous en occuper !

Méthode 1 : minimum d’ActionScript |

Il faut bien commencer par quelque chose, mais en l’occurence pour une fois nous commencerons par ne rien faire !

Et oui pour cette méthode, étant donné que de toute façon nous n’utilisons que peu de code, nous devons réaliser chaque section « à la main » (à l’ancienne en quelque sorte). De ce fait, il n’y a pas vraiment de code à optimiser vu le peu de code dont nous nous sommes servi pour cette partie. Il ne nous reste juste qu’à faire toutes les sous-parties dans des SWF séparés, et à charger chaque SWF lorsque cela est nécessaire.

Les tableaux associatifs |

Avant de continuer, faisons un petit point sur les variables de type tableau an ActionScript :

À dire vrai , les tableaux associatifs n’existent pas en ActionScript. J’entends par là que les variables de type Array (tableau), ne supporte pas « l’association » comme nous pouvons par exemple le faire en PHP.

Alors comment procède-t-on ?

Comme nous l’avons déjà vu, l’AS, comme tout langage de programmation qui se respecte, supporte plusieurs types de variables (nous n’en avons d’ailleurs pas vu tant que ça pour le moment, juste les plus basiques, comme les Number (nombre), les String (chaînes de caractères), et les Object (objet) ).
Alors à quoi correspond une variable de type Array (tableau) ?

Une variable de type tableau est tout simplement une variable qui peux contenir plusieurs valeurs simultanément.

Ah yes !!

Et oui c’est bien pratique…

Et pour s’y retrouver dans tout ça, chaque valeur est repérée par un index (qui est en faite une valeur numérique).

Prenons un exemple :

var monTableau:Array = new Array(« valeur 1″, « valeur 2″, « valeur 3″);

Dans notre exemple la variable monTableau contient donc 3 valeurs :

valeur 1 (à l’index 0)
valeur 2 (à l’index 1)
valeur 3 (à l’index 2)

Hein ?! Mais pourquoi les index sont décalés ?

Parce qu’un tableau commence toujours la « numérotation » de ses index par 0. C’est comme ça (et ce dans tous les langages de programmation que vous pourrez rencontrer).

Ainsi pour faire référence à la deuxième valeur contenu dans le tableau, il suffira d’écrire :

monTableau[1];

Notez que les valeurs contenues dans monTableau sont ici toutes des String, mais je peux y placer toute sorte de variable (Number, String, Object, …) et même plusieurs types différents dans un seul et même tableau. Les valeurs sont simplement placées entre parenthèses et séparées par des virgules.

Mais alors qu’est-ce que c’est qu’un tableau associatif ? Et qu’est-ce qu’il a de plus ?

Parfois (souvent ?) il peut être plus intéressant de pouvoir faire référence à une valeur par un nom plutôt que par un numéro. c’est tout simplement plus facile pour se le remémorer et en plus peu importe l’index de la valeur puisque c’est l’association qui compte.

Voici un exemple de 3 tableaux en PHP (langage qui supporte les tableaux associatifs) :

^?View Code PHP

//--- Tableau classique ---
$monTableau1 = array( 'Boris', 'explainMe', 'http://www.explain-me.com' );
//--- Tableau associatif ---
$monTableau2 = array( 'prenom' => 'Boris', 'site'    => 'explainMe', 'URL' => 'http://www.explain-me.com' );
//--- Tableau associatif (l'ordre des valeurs a été modifié) ---
$monTableau3 = array( 'URL' => 'http://www.explain-me.com', 'prenom' => 'Boris', 'site'    => 'explainMe'  );

Les trois tableaux contiennent les même valeurs : mon prénom, le nom de mon site et son URL.

Dans le premier cas il s’agit d’un tableau « classique », aussi pour pouvoir faire référence à l’une des valeurs je dois savoir quel est son index dans le tableau. En revanche si vous observez les 2 autres tableaux, vous noterez que j’ai modifié l’ordre des variable, ce qui n’a aucune importance au final car pour faire référence à n’importe quelle valeur contenu dans ces 2 tableaux, il me suffit de connaître l’identifiant que j’ai associé à la valeur.

En PHP le signe « => » signifie que le marqueur à gauche est associé à la valeur à droite. Donc pour faire référence à la valeur, il suffit de pointer sur son marqueur.

Imaginez si votre tableau contient non pas 3 mais 30 valeurs ! Il sera tout de même plus simple de se rappeler que l’on cherche la valeur associée au mot clé ‘URL’ plutôt que la valeur occupant l’index 3 du tableau vous ne pensez pas ?!

Voici tout l’intérêt des tableaux associatifs : associer des valeurs à des marqueurs (ou mots clés peu importe comment vous les nommez) qui vous permettent de mieux vous y retrouver.

Et en ActionScript alors comment on fait ?

Comme nous l’avons déjà évoqué, les variables de type Array ne supportent pas l’association en ActionScript (2 ou 3 d’ailleurs). En revanche les variables de type Object elles, le peuvent.

Voici la syntaxe :

var monTableau:Object = { marqueur1:valeur1, marqueur2:valeur2, marqueur3:valeur3 };

La syntaxe est un peu différent du PHP, mais le principe reste le même.

La variable est donc de type Object et les valeurs ne sont plus entre parenthèses, mais entre accolades. Elles sont toujours séparées par des virgules, mais le signe d’association cette fois-ci sont les deux point « :« . De plus le marqueur n’est pas entre guillemets.

Et pour faire référence à une valeur du tableau, on utilise le code suivant (par exemple pour valeur2) :

monTableau["marqueur2"];

Et oui cette fois-ci on utilise les guillemets !

Bon tout ça c’est bien joli, mais en quoi ça va nous servir pour simplifier notre code ?

Et bien nous allons tout simplement remplacer certains switch par des tableaux associatifs. Ainsi nous n’aurons plus besoin de faire le moindre test (comme c’était le cas avec le switch qui, je vous le rappel, et une forme de test), il nous suffira de pointer directement vers le bon marqueur dans notre tableau.

Un peu perdus ?

Rassurez-vous nous allons voir ça calmement…

Méthode 2 : ActionScript 2 |

Dans cette méthode, les actions des boutons étant directement placées sur leurs états (en l’occurrence ici c’est le onRelease qui va nous intéresser), nous n’allons pas remplacer de switch (puisqu’il n’y en a pas), mais plutôt centraliser les données pour en simplifier la maintenance.

Voici le code complet pour le fichier interface_AS2.fla :

^?View Code ACTIONSCRIPT

//
//---------------------------------------------------- Initialisations ---//
//
var positionCurseur:Number = menuBas.bPortfolio._x;
var etatSousMenu:Boolean = false;
_global.sousMenuSelectionne = 0;
this.prechargement._visible = false;
_global.categorie = '';
//
//--- Tableaux associatifs ---
//
var sectionACharger:Object={bPortfolio:"portfolio.swf",bProfil:"profil.swf",bGoodies:"goodies.swf",bLiens:"liens.swf",bContact:"contact.swf"};
var sectionsPortfolio:Object={bPortfolio:"graphisme",zoneB1:"graphisme",zoneB2:"multimedia",zoneB3:"synthese"};
var sectionsProfil:Object={bProfil:"competences",zoneB1:"competences",zoneB2:"experience",zoneB3:"cursus"};
//
//--- Importation de la class Tween ---
//
import mx.transitions.Tween;
import mx.transitions.easing.*;
//
//------------------------------------------------------- Fonctions ---//
//
//
//--- Fonction goCurseur ---
//
function goCurseur(idBouton) {
	var translationCurseur:Tween = new Tween(menuBas.curseur, "_x", Strong.easeOut, menuBas.curseur._x, idBouton._x, 0.5, true);
}
//
//--- Fonction backCurseur ---
//
function backCurseur() {
	var translationCurseur:Tween = new Tween(menuBas.curseur, "_x", Strong.easeOut, menuBas.curseur._x, positionCurseur, 0.5, true);
}
//
//--- Fonction afficheSousMenu ---
//
function checkSousMenu(version) {
	//--- on Masque le sous-menu ---
	if (etatSousMenu == true) {
		masqueSousMenu(version);
	} else {
		if (version != 0) {
			afficheSousMenu(version);
		}
	}
}
//
//--- Fonction masqueSousMenu ---
//
function masqueSousMenu(choix) {
	var translationSousMenu:Tween = new Tween(menuBas.sousMenu, "_y", Strong.easeOut, menuBas.sousMenu._y, -35, 0.5, true);
	translationSousMenu.onMotionFinished = function() {
		etatSousMenu = false;
		_global.sousMenuSelectionne = 0;
		if (choix != 0) {
			afficheSousMenu(choix);
		}
	};
}
//
//--- Fonction afficheSousMenu---
//
function afficheSousMenu(choix) {
	//---sous-menu 1 ---
	if (choix == 1) {
		menuBas.sousMenu._x = menuBas.bPortfolio._x-(menuBas.bPortfolio._width/2);
		menuBas.sousMenu.texteB1.text = "2D/Print";
		menuBas.sousMenu.texteB2.text = "3D/Animation";
		menuBas.sousMenu.texteB3.text = "Multimédia";
	}
	//---sous-menu 2 ---
	if (choix == 2) {
		menuBas.sousMenu._x = menuBas.bProfil._x-(menuBas.bProfil._width/2);
		menuBas.sousMenu.texteB1.text = "Cursus";
		menuBas.sousMenu.texteB2.text = "Exprerience pro.";
		menuBas.sousMenu.texteB3.text = "Informations";
	}
	var translationSousMenu:Tween = new Tween(menuBas.sousMenu, "_y", Strong.easeOut, menuBas.sousMenu._y, -60, 0.5, true);
	translationSousMenu.onMotionFinished = function() {
		etatSousMenu = true;
		_global.sousMenuSelectionne = choix;
	};
}
//
//--- Fonction ChargeSousPartie ---
//
function chargeSousPartie(nomBouton:Object) {
	//--- ECOUTEUR ---
	var mclListener:Object = new Object();
	mclListener.onLoadStart = function() {
		prechargement._visible = true;
	};
	//--- pourcentage ---
	mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
		prechargement.pourcentage.text = Math.round(bytesLoaded/bytesTotal*100)+' %';
	};
	//--- On complete ---
	mclListener.onLoadComplete = function(target_mc:MovieClip) {
		prechargement._visible = false;
	};
	//--- loader ---
	var loaderClip:MovieClipLoader = new MovieClipLoader();
	loaderClip.addListener(mclListener);
	loaderClip.unloadClip(contenu);
	loaderClip.loadClip(sectionACharger[nomBouton._name],contenu);
}
//
//--- Fonction switchCategorie(); ---
//
function switchCategorie(nomBoutonSousMenu:String) {
	trace(_global.sousMenuSelectionne);
	if(_global.sousMenuSelectionne == 1 ) {
		_global.categorie = sectionsPortfolio[nomBoutonSousMenu];
		chargeSousPartie(menuBas.bPortfolio);
	}
	else if (_global.sousMenuSelectionne == 2) {
		_global.categorie = sectionsProfil[nomBoutonSousMenu];
		chargeSousPartie(menuBas.bProfil);
	}
}
//
//
//----------------------------------------------- Actions des boutons ---//
//
//--- Bouton Portfolio ---
//
//--- Rollover ---
this.menuBas.bPortfolio.onRollOver = function() {
	goCurseur(this);
};
//--- Rollout ---
this.menuBas.bPortfolio.onRollOut = function() {
	backCurseur();
};
//--- Release ---
this.menuBas.bPortfolio.onRelease = function() {
	checkSousMenu(1);
	positionCurseur = this._x;
	chargeSousPartie(this);
	_global.categorie = sectionsPortfolio[this._name];
};
//
//--- Bouton Profil ---
//
//--- Rollover ---
this.menuBas.bProfil.onRollOver = function() {
	goCurseur(this);
};
//--- Rollout ---
this.menuBas.bProfil.onRollOut = function() {
	backCurseur();
};
//--- Release ---
this.menuBas.bProfil.onRelease = function() {
	checkSousMenu(2);
	positionCurseur = this._x;
	chargeSousPartie(this);
	_global.categorie = sectionsProfil[this._name];
};
//
//--- Bouton Goodies ---
//
//--- Rollover ---
this.menuBas.bGoodies.onRollOver = function() {
	goCurseur(this);
};
//--- Rollout ---
this.menuBas.bGoodies.onRollOut = function() {
	backCurseur();
};
//--- Release ---
this.menuBas.bGoodies.onRelease = function() {
	checkSousMenu(0);
	positionCurseur = this._x;
	chargeSousPartie(this);
};
 
//
//--- Bouton Liens ---
//
//--- Rollover ---
this.menuBas.bLiens.onRollOver = function() {
	goCurseur(this);
};
//--- Rollout ---
this.menuBas.bLiens.onRollOut = function() {
	backCurseur();
};
//--- Release ---
this.menuBas.bLiens.onRelease = function() {
	checkSousMenu(0);
	positionCurseur = this._x;
	chargeSousPartie(this);
};
//
//--- Bouton Contact ---
//
//--- Rollover ---
this.menuBas.bContact.onRollOver = function() {
	goCurseur(this);
};
//--- Rollout ---
this.menuBas.bContact.onRollOut = function() {
	backCurseur();
};
//--- Rollout ---
this.menuBas.bContact.onRelease = function() {
	checkSousMenu(0);
	positionCurseur = this._x;
	chargeSousPartie(this);
};
//
//--- Action des boutons du sous-menu ---
//
//
//--- zoneB1 ---
//
this.menuBas.sousMenu.zoneB1.onRelease = function() {
	switchCategorie(this._name);
}
//
//--- zoneB2 ---
//
this.menuBas.sousMenu.zoneB2.onRelease = function() {
	switchCategorie(this._name);
}
//
//--- zoneB3 ---
//
this.menuBas.sousMenu.zoneB3.onRelease = function() {
	switchCategorie(this._name);
}

Mais qu’est-ce qu’y a changé finalement ?

En fait nous avons rajouté :

Une variable globale sousMenuSelectionne
La modification de la valeur de cette variable dans les fonctions masqueSousMenu(); et afficheSousMenu();.
Une fonction switchCategorie();
3 variables de type Object (nos tableaux associatifs).
Une légère modification sur les actions des boutons principaux.
Et les actions lors du clic sur les boutons du sous-menu.

Pfiouuuuu !

Oui je sais comme ça on dirait qu’il y a beaucoup de choses mais au final ça n’est pas trop compliqué vous allez voir.

Commençons par les actions des boutons principaux :

En fait ce qui a changé, c’est qu’au lieu d’écrire le code de chaque bouton de la manière suivante :

^?View Code ACTIONSCRIPT

//--- Release ---
this.menuBas.bProfil.onRelease = function() {
       checkSousMenu(2);
       positionCurseur = this._x;
       chargeSousPartie("portfolio");
       _global.categorie = "graphisme";
};

Nous allons appliquer le même code au niveau des 2 dernières lignes, à tous les boutons, à savoir :

^?View Code ACTIONSCRIPT

//--- Release ---
this.menuBas.bProfil.onRelease = function() {
     checkSousMenu(2);
     positionCurseur = this._x;
     chargeSousPartie(this);
     _global.categorie = sectionsProfil[this._name];
};

Alors qu’est-ce que ça change ?

En fait ça ne va pas bouleverser le code mais c’est tout de même pratique.

Premièrement nous ne spécifions plus le fichier à charger et la catégorie à afficher directement dans l’action du bouton, mais nous allons la charger dans un tableau associatif ! Aaah !

Et oui, prenez les 2 lignes suivantes :

chargeSousPartie(this); [1]
_global.categorie = sectionsProfil[this._name]; [2]

On appel la fonction chargeSousPartie(); en lui fournissant comme argument this (c’est à dire le bouton lui-même).
On définit la valeur de la variable globale categorie en allant chercher la valeur rattachée au marqueur portant le nom du bouton (this._name).

ici this fait référence à l’occurrence du bouton puisque nous sommes en train de réaliser les actions sur son état onRelease.

La propriété _name permet d’accéder au nom d’occurrence de l’objet auquel elle est rattachée (ici this, donc le bouton sur lequel nous nous trouvons).

Maintenant pour que ces codes puissent donner un résultat, il nous faut encore faire 2 choses :

Modifier la fonction chargeSousPartie(); pour qu’elle puisse interpréter correctement l’argument que nous lui passons (puisqu’il ne s’agit plus d’un String mais d’un Object).
Créer les variables Object qui nous serviront de tableaux associatifs et qui permettront à l’ensemble de fonctionner.

Voici la fonction chargeSousPartie(); mise à jour :

^?View Code ACTIONSCRIPT

//
//--- Fonction ChargeSousPartie ---
//
function chargeSousPartie(nomBouton:Object) {
      //--- ECOUTEUR ---
      var mclListener:Object = new Object();
      mclListener.onLoadStart = function() {
          prechargement._visible = true;
      };
      //--- pourcentage ---
      mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
           prechargement.pourcentage.text = Math.round(bytesLoaded/bytesTotal*100)+' %';
      };
      //--- On complete ---
      mclListener.onLoadComplete = function(target_mc:MovieClip) {
           prechargement._visible = false;
      };
      //--- loader ---
      var loaderClip:MovieClipLoader = new MovieClipLoader();
      loaderClip.addListener(mclListener);
      loaderClip.unloadClip(contenu);
      loaderClip.loadClip(sectionACharger[nomBouton._name],contenu);
}

Qu’est-ce qui a changé alors ?

L’argument a changé de type, ce n’est plus un String mais un Object (j’ai changé son nom aussi pour qu’il corresponde mieux à sa nouvelle nature).

La dernière ligne qui s’occupe de charger le SWF dans le clip vide contenu. Vous vous souvenez que nous devons frounir un String en premier argument à la méthode loadClip, or pour le moment nous avons un Object. Pas de problème, il nous suffit d’aller récupérer le chemin dans un tableau associatif grâce au marqueur qui ne sera autre que le nom de l’Object justement.

D’où le code :

loaderClip.loadClip(sectionACharger[nomBouton._name],contenu);

Ainsi, l’action sur le bouton bPortfolio cherche à récupérer une valeur dans le tableau associatif sectionsPortfolio, en précisant comme marqueur this._name et la méthode loadClip de la fonction chargeSousPartie(); va chercher l’url du SWF à charger dans le tableau associatif sectionACharger en lui fournissant comme marqueur le nom de l’argument qu’elle a reçu (monBouton._name).

Ce qui nous donne les variables « tableaux associatifs » suivants :

^?View Code ACTIONSCRIPT

1
2
3

var sectionACharger:Object={bPortfolio:"portfolio.swf",bProfil:"profil.swf",bGoodies:"goodies.swf",bLiens:"liens.swf",bContact:"contact.swf"};
var sectionsPortfolio:Object={bPortfolio:"graphisme",zoneB1:"graphisme",zoneB2:"multimedia",zoneB3:"synthese"};
var sectionsProfil:Object={bProfil:"competences",zoneB1:"competences",zoneB2:"experience",zoneB3:"cursus"};

Et mais pourquoi il y a 3 tableaux ?

J’ai créé 2 tableaux associatifs différents pour regrouper les sections de la partie Portfolio (sectionPortfolio) et celles de la partie Profil (sectionProfil) car j’utilise le même sous-menu pour les deux et donc les 3 mêmes occurrences (zoneB1, zoneB2, zoneB3).

Certes les textes et les actions des boutons changent selon le cas, mais leurs noms d’occurrence eux, restent les mêmes. Il faut donc que mon code puisse identifier dans quel cas zoneB1 est utilisé (Portfolio ou Profil), c’est la raison pour laquelle j’utilise 2 tableaux, ainsi les codes des boutons de la section Portfolio seront un poil différents de ceux de la section Profil (la différente étant juste qu’ils iront chercher le nom de la catégorie à charger dans leurs tableaux respectifs.

Et grâce à cette technique, vous allez voir que nous pourrons bientôt nous servir de nos boutons de sous-menu :

Vous vous souvenez très certainement qu’en début de chapitre j’ai évoqué l’ajout d’une nouvelle variable globale dans le code nommée sousMenuSelectionne. Mais pourquoi cette variable ? Si vous avez suivie le cours depuis le début, elle doit vous sembler famillière puisque nous en utilisons déjà une qui porte le même nom avec la méthode en AS3.

Et bien son rôle ici sera le même, à savoir : connaître le sous-menu actif au moment du clic sur un bouton de l’un des 2 sous-menus.

Comme nous l’avons déjà évoqué, les 2 sous-menus sont en faite un seul et même objet qui est réutilisé. Ainsi les 3 boutons qu’il contient portent toujours le même nom d’occurrence quel que soit le contexte (sous-menu 1 ou sous-menu 2), donc nous nous servirons de la variable sousMenuSelectionne comme repère pour savoir où nous nous trouvons (quel sous-menu) lors d’un clic sur l’un des boutons du sous-menu (zoneB1, zoneB2, zoneB3).

Voici comment nous allons procéder :

Création de la variable.
Modification de sa valeur à chaque fois que le sous-menu change (aucun sous-menu, sous-menu 1 actif, sous-menu 2 actif).
Création de la fonction permettant de changer de catégorie au sein d’une section lors du clic sur l’un des boutons du sous-menu.
Ajout de l’action d’appel de la fonction pour chaque bouton du sous-menu.

[1] Pour créer la vairable, rien de plus simple, il suffit de la déclarer et de lui affecter une valeur par défaut (vous commencez à connaître la syntaxe donc je ne reviens pas dessus) :

_global.sousMenuSelectionne = 0;

[2] Ensuite cette variable sera modifiée à chaque fosi que l’état du sous-menu changera, c’est à dire pour dans les fonctions masqueSousMenu(); :

et afficheSousMenu(); :

Je ne pense pas qu’il soit nécessaire d’expliquer ces codes, chacun aura compris que suivant le cas de figure, la variable vaudra 0, 1 ou 2.

Et que va-t-on faire concrètement avec cette variable ?

On y arrive…

[3] En fait nous allons créer une nouvelle fonction qui sera déclenchée lors du clic sur un des boutons du sous-menu, la voici :

Mais que fait-elle au juste ?

La fonction reçoit en argument le nom d’occurrence du bouton qui viens d’être cliqué (zoneB1, zoneB2, ou zoneB3).
Elle teste la valeur de la variable sousMenuSelectionne pour déterminer dans quel sous-menu se trouve le bouton qui viens d’être cliqué.
En fonction du résultat, la valeur de la variable categorie est redéfinie en allant chercher la valeur rattachée au marqueur correspondant au nom du bouton cliqué, dans le bon tableau associatif (sectionsPortfolio ou sectionsProfil selon le cas).
Puis la fonction chargeSousPartie(); est appelée pour recharger la section en lui fournissant comme argument le bouton parent du sous-menu actif.

[4] Ne nous reste donc plus qu’à affecter l’appel de la fonction au clic sur les boutons du sous-menu et le tour est joué :

//
//— Action des boutons du sous-menu —
//
//
//— zoneB1 —
//
this.menuBas.sousMenu.zoneB1.onRelease = function() {
switchCategorie(this._name);
}
//
//— zoneB2 —
//
this.menuBas.sousMenu.zoneB2.onRelease = function() {
switchCategorie(this._name);
}
//
//— zoneB3 —
//
this.menuBas.sousMenu.zoneB3.onRelease = function() {
switchCategorie(this._name);
}

Lorsque nous sommes dans l’action d’un bouton, this fait référence au bouton lui-même, donc this._name fourni le nom d’occurrence du bouton, ce qui est un String (pile-poil l’argument qu’attend la fonction switchCategorie(); ! Ça pour un coïncidence !

Voici à quoi ressemble le site à la fin de ce chapitre (AS2)
Attention : aucune section n’est chargée par défaut. C’est tout à fait normale puisqu’il faut cliquer sur le bouton Portfolio pour charger la section correspondante.
Seule la section « Portfolio » est affichable pour le moment, ce qui est tout à fait normale.

Je vous rassure (ou pas), l’utilisation des tableaux associatifs, pour la méthode 2 telle que nous l’avons codée, n’est pas vraiment impérative car au final, on ne peux pas réellement dire que le code se simplifie, seulement cela nous aura permit d’aborder les tableaux associatifs en AS2. En revanche, comme vous allez vous en rendre compte, cette technique va se révéler beaucoup plus intéressante avec l’ActionScript 3, notamment en remplacement de certains switch qui finiront plus par nous embrouiller qu’autre chose.

Méthode 3 : ActionScript 3 |

Pour cette section en revanche, comme nous allons le voir, nous pouvons simplifier les choses…

Voici tout d’abord le code du fichier interface_AS3.fla tel qu’il sera à la fin de ce chapitre :

^?View Code ACTIONSCRIPT

//
//--------------------------------------------- Initialisations ---//
//
//
//--- Importation de la class Tween ---
//
import fl.transitions.*;
import fl.transitions.easing.*;
//
//--- Position initiale du curseur ---
//
var posInitCurseur:Number=menuBas.curseur.x;
var etatSousMenu:Boolean=false;
var sousMenuSelectionne:Number=0;
this.prechargement.visible=false;
this.contenu.categorie = new String();
 
var sectionC:String = new String();
var catC:String = new String();
//
//--- Tableaux associatifs ---
//
var sectionACharger:Object={bPortfolio:"portfolio.swf",bProfil:"profil.swf",bGoodies:"goodies.swf",bLiens:"liens.swf",bContact:"contact.swf"};
var sectionsPortfolio:Object={bPortfolio:"graphisme",zoneB1:"graphisme",zoneB2:"multimedia",zoneB3:"synthese"};
var sectionsProfil:Object={bProfil:"competences",zoneB1:"competences",zoneB2:"experience",zoneB3:"cursus"};
//
//------------------------------------------- Animation du menu ---//
//
//
//--- Fonction deplaceCurseur ---
//
function deplaceCurseur(event:MouseEvent) {
	var translationCurseur:Tween=new Tween(menuBas.curseur,"x",Strong.easeOut,menuBas.curseur.x,event.currentTarget.x,0.5,true);
}
//
//--- Fonction initCurseur ---
//
function initCurseur(event:MouseEvent) {
	var translationCurseur:Tween=new Tween(menuBas.curseur,"x",Strong.easeOut,menuBas.curseur.x,posInitCurseur,0.5,true);
}
//
//--- Fonction afficheSousMenu ---
//
function afficheSousMenu(event:MouseEvent) {
	//--- Fixe la position du curseur ---
	posInitCurseur=event.currentTarget.x;
	//--- Affiche le sous-menu ---
	if (event.currentTarget==menuBas.bPortfolio) {
		//---Sous-menu ---
		sousMenuSelectionne=1;
		if (etatSousMenu==false) {
			initSousMenu();
		} else {
			masqueSousMenu();
		}
	} else if (event.currentTarget == menuBas.bProfil) {
		//---Sous-menu ---
		sousMenuSelectionne=2;
		if (etatSousMenu==false) {
			initSousMenu();
		} else {
			masqueSousMenu();
		}
	} else {
		if (etatSousMenu==true) {
			sousMenuSelectionne=0;
			masqueSousMenu();
		}
	}
	//--- chargement sous-partie : autres boutons ---
	sectionC=sectionACharger[event.currentTarget.name];
	if (sousMenuSelectionne==1) {
		catC=sectionsPortfolio[event.currentTarget.name];
	}
	else if (sousMenuSelectionne == 2) {
		catC=sectionsProfil[event.currentTarget.name];
	}
	else {
		catC="";
	}
	chargeSousPartie(sectionC, catC);
}
//
//--- Fonction initSousMenu ---
//
function initSousMenu() {
	//--- sous-menu 1 ---
	if (sousMenuSelectionne==1) {
		menuBas.sousMenu.x = menuBas.bPortfolio.x - (menuBas.bPortfolio.width/2);
		menuBas.sousMenu.texteB1.text="2D/Print";
		menuBas.sousMenu.texteB2.text="Multimédia";
		menuBas.sousMenu.texteB3.text="3D/Animation";
	}
	//--- sous-menu 2 ---
	if (sousMenuSelectionne==2) {
		menuBas.sousMenu.x = menuBas.bProfil.x - (menuBas.bProfil.width/2);
		menuBas.sousMenu.texteB1.text="Cursus";
		menuBas.sousMenu.texteB2.text="Experience pro.";
		menuBas.sousMenu.texteB3.text="Informations";
	}
	montreSousMenu();
}
//
//--- Fonction masqueSousMenu ---
//
function masqueSousMenu() {
	var translationSousMenu:Tween=new Tween(menuBas.sousMenu,"y",Strong.easeOut,menuBas.sousMenu.y,-35,0.5,true);
	translationSousMenu.addEventListener(TweenEvent.MOTION_FINISH, sousMenuNo);
}
//
//--- Fonction montreSousMenu ---
//
function montreSousMenu() {
	var translationSousMenu:Tween=new Tween(menuBas.sousMenu,"y",Strong.easeOut,menuBas.sousMenu.y,-60,0.5,true);
	translationSousMenu.addEventListener(TweenEvent.MOTION_FINISH, sousMenuYes);
}
//
//--- Fonction sousMenuNo ---
//
function sousMenuNo(evt:TweenEvent) {
	if (sousMenuSelectionne==0) {
		etatSousMenu=false;
	} else {
		//--- On réinitialise le sousMenu ---
		initSousMenu();
	}
}
//
//--- Fonction sousMenuYes ---
//
function sousMenuYes(evt:TweenEvent) {
	etatSousMenu=true;
}
//
//--------------------------------- Chargement des sous-parties ---//
//
function chargeSousPartie(section:String, categorieXML:String) {
	//--- On vide le conteneur ---
	while (this.contenu.numChildren &gt; 0) {
		this.contenu.removeChildAt(0);
	}
	//--- On redéfinit la catégorie à charger : pour le clip enfant ---
	contenu.categorie=categorieXML;
	// création du chargeur
	var chargeur:Loader = new Loader();
	//--- url à atteindre ---
	var chemin:URLRequest=new URLRequest(section);
	//--- chargement du contenu ---
	chargeur.load(chemin);
	//--- ajout à la liste d'affichage : lancement du chargement ---
	contenu.addChild(chargeur);
	//--- Ecouteurs ---
	chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, prechargeSection);
	chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finChargementSection);
}
//
//--- Fonction prechargement clips ---
//
function prechargeSection(evt:Event) {
	prechargement.visible=true;
	prechargement.pourcentage.text= Math.floor(100/(evt.currentTarget.bytesLoaded*evt.currentTarget.bytesTotal))+'%';
}
//
//--- Fonction fin de prechargement ---
//
function finChargementSection(evt:Event) {
	prechargement.visible=false;
}
//
//--- Fonction permettant de basculer d'une catégorie à l'autre ---
//
function switchCategorie(event:MouseEvent) {
	//--- chargement sous-partie : autres boutons ---
	if (sousMenuSelectionne==1) {
		sectionC=sectionACharger["bPortfolio"];
		catC=sectionsPortfolio[event.currentTarget.name];
	} else {
		sectionC=sectionACharger["bProfil"];
		catC=sectionsProfil[event.currentTarget.name];
	}
	chargeSousPartie(sectionC, catC);
}
//
//----------------------------------------- Actions des boutons ---//
//
//
//--- bPortfolio ---
//
this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bPortfolio.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bProfil ---
//
this.menuBas.bProfil.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bProfil.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bProfil.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bGoodies ---
//
this.menuBas.bGoodies.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bGoodies.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bGoodies.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bLiens ---
//
this.menuBas.bLiens.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bLiens.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bLiens.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bContact ---
//
this.menuBas.bContact.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bContact.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bContact.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//----------------------------------------- Actions des boutons : sous-menu ---//
//
this.menuBas.sousMenu.zoneB1.addEventListener(MouseEvent.CLICK, switchCategorie);
this.menuBas.sousMenu.zoneB2.addEventListener(MouseEvent.CLICK, switchCategorie);
this.menuBas.sousMenu.zoneB3.addEventListener(MouseEvent.CLICK, switchCategorie);

Mais quel est donc le problème avec ces fameux switch :

Le principal souci avec un switch, c’est que bien que sa syntaxe soit différente de ce celle d’un if + X else if, au bout d’un moment, plus nous avons de case, et plus le code s’allonge…

Lorsque le switch a pour but de réaliser plusieurs actions par case, le problème reste « intact » dirons-nous et nous ne ferons rien ici. En revanche si chaque case ne correspond qu’à une seule action, alors il y a un moyen simple de réduire notre code : les tableaux associatifs !

Souvenez-vous à l’origine, dons notre fichier interface, nous avions un switch dans la fonction afficheSousMenu(); qui nous permettait de tester le bouton cliqué et de déterminer ainsi quel sous-partie charger :

^?View Code ACTIONSCRIPT

//--- chargement sous-partie : autres boutons ---
switch (event.currentTarget) {
 
     case menuBas.bPortfolio :
     chargeSousPartie("portfolio.swf", "graphisme");
     break;
 
     case menuBas.bProfil :
     chargeSousPartie("profil.swf", "competences");
     break;
 
     case menuBas.bGoodies :
     chargeSousPartie("goodies.swf", "");
     break;
 
     case menuBas.bLiens :
     chargeSousPartie("liens.swf", "");
     break;
 
     case menuBas.bContact :
     chargeSousPartie("contact.swf", "");
    break;
 
 }

Et bien Mesdames, Mesdemoiselles, et vous aussi Messieurs, ceci va devenir (enfin presque…) :

^?View Code ACTIONSCRIPT

//--- chargement sous-partie : autres boutons ---
 sectionC=sectionACharger[event.currentTarget.name];
 catC=sectionsPortfolio[event.currentTarget.name];
 chargeSousPartie(sectionC, catC);

Euh…. Alors là j’ai due rater un wagon ?!

C’est pas faut ! J’ai juste oublié de vous préciser que pour que ça marche, nous devons au préalable créer 3 nouvelles variables (nos fameux tableaux associatifs) :

^?View Code ACTIONSCRIPT

1
2
3

var sectionACharger:Object={bPortfolio:"portfolio.swf",bProfil:"profil.swf",bGoodies:"goodies.swf",bLiens:"liens.swf",bContact:"contact.swf"};
var sectionsPortfolio:Object={bPortfolio:"graphisme",zoneB1:"graphisme",zoneB2:"multimedia",zoneB3:"synthese"};
var sectionsProfil:Object={bProfil:"competences",zoneB1:"competences",zoneB2:"experience",zoneB3:"cursus"};

Et voici les explications :

Comme vous vous en souvenez très certainement (qui a dit non ?), dasn cette fonction, nous utilisons l’objet event.currentTarget pour identifier quel bouton viens d’être cliqué. Ce qui très intéressent avec cette objet, c’est qu’il agit un peu comme un raccourci vers l’objet en question, ainsi on peut récupérer les attributs de l’objet initial en questionnant l’objet currentTarget.

Par exemple dans notre cas nous voulons connaître le nom d’occurrence de l’objet cliqué. Il nous suffit donc d’écrire :

event.currentTarget.name;

sectionC=sectionACharger[event.currentTarget.name]; [1]
catC=sectionsPortfolio[event.currentTarget.name]; [2]
chargeSousPartie(sectionC, catC); [3]

On affecte à la variable sectionC la valeur correspondant au marqueur [nom d'occurrence du bouton cliqué] dans le tableau sectionACharger.
On affecte à la variable catC, la valeur correspondant au marqueur [nom d'occurrence du bouton cliqué] dans le tableau sectionPortfolio.
On lance l’exécution de la fonction chargeSousPartie(); en lui fournissant les 2 variables que l’on viens de définir comme argument.

En fin de compte, en l’espace de 3 lignes, on viens de déterminer la section à charger (le swf), la catégorie de cette section qu’il faudra afficher, et pour finir on a lancé le chargement.

Plutôt efficace non ?

Examinons de plus prêt nos tableaux associatifs :

var sectionACharger:Object={bPortfolio: »portfolio.swf »,bProfil: »profil.swf »,bGoodies: »goodies.swf »,bLiens: »liens.swf »,bContact: »contact.swf »};
var sectionsPortfolio:Object={bPortfolio: »graphisme »,zoneB1: »graphisme »,zoneB2: »multimedia »,zoneB3: »synthese »};
var sectionsProfil:Object={bProfil: »competences »,zoneB1: »competences »,zoneB2: »experience »,zoneB3: »cursus »};

Le premier tableau (sectionAcharger) ne devrait pas vous poser trop de problème puisqu’il ne s’agit que de faire correspondre les noms de nos principaux boutons aux swf correspondants.

En revanche pourquoi 2 tableaux (sectionsPortfolio et sectionsProfil) dont certains marqueurs sont identiques ?

Ici nous sommes « victime » de notre code si j’ose dire.

Rappelez vous nous avons 2 sous-menus qui sont en faite un seul et même menu dont les textes attribués aux boutons changent selon le cas. Oui mais pas les noms d’occurrence donnés aux zones réactives ! Ainsi le sous-menu 1 aura les boutons zoneB1, zoneB2, et ZoneB3, mais le sous-menu 2 aussi. Donc nous créons 2 tableau et nous irons iocher dans le bon tableau suivant le cas !

Oui mais dans les 3 lignes que tu nous as donné plus haut on va systématiquement piocher dans le tableau sectionsPortfolio donc ça ne marchera qu’une fois sur deux ?!

Exactement ! en fait mon premier code était volontairement incomplet pour vous expliquer le principe. Au final pour que notre code fonctionne comme nous le souhaitons, nous devons l’écrire de la sorte :

^?View Code ACTIONSCRIPT

//--- chargement sous-partie : autres boutons ---
	sectionC=sectionACharger[event.currentTarget.name];
	if (sousMenuSelectionne==1) {
		catC=sectionsPortfolio[event.currentTarget.name];
	}
	else if (sousMenuSelectionne == 2) {
		catC=sectionsProfil[event.currentTarget.name];
	}
	else {
		catC="";
	}
	chargeSousPartie(sectionC, catC);

Ainsi pour définir la valeur de la variable catC, nous avons trois possibilités :

Soit le sous-menu actif est le sous-menu 1, auquel cas nous allons récupérer la valeur dans le tableau sectionsPortfolio.
Soit le sous-menu actif est le sous-menu 2, auquel cas nous allons récupérer la valeur dans le tableau sectionsProfil.
Soit il n’y a pas de sous-menu actif (sections Goodies / Liens / Contact), auquel cas la valeur est vide (« » = chaîne de caractères vide).

Et grâce à ça, la bonne section sera chargée avec la bonne catégorie affichée dès que l’on cliquera sur l’on des principaux boutons.

Oui mais alors comment ça se passe pour les boutons des sous-menus ?

Là nous allons avoir recours à une nouvelle fonction.

Encore !! Pourquoi ?

Parce que comme nous venons de le voir, en cliquant sur l’on des 2 boutons principaux, nous affichons le sous-menu (s’il y en a un ) et nous chargons directement le swf correspondant à la section en affichant par défaut la première catégorie.

Jusque là nous sommes d’accord, mais alors que doit-il se passer lorsque l’on clique sur un bouton de l’un des sous-menus ?

La même chose à la différence prêt que nous ne devons pas passer par la fonction afficheSousMenu(); qui détermine le sous-menu a afficher avant de lancer le chargement de la section puisque c’est une action qui a déjà été effectuée par les boutons principaux (et puis un bouton d’un sous-menu ne doit pas pouvoir afficher le sous-menu, ça ne serait pas logique du tout).

Donc nous allons créer une fonction qui se contentera de définir la section a charger et la catégorie à afficher sans se soucier d’afficher ou non le sous-menu puisque c’est déjà fait :

^?View Code ACTIONSCRIPT

//
//--- Fonction permettant de basculer d'une catégorie à l'autre ---
//
function switchCategorie(event:MouseEvent) {
	//--- chargement sous-partie : autres boutons ---
	if (sousMenuSelectionne==1) {
		sectionC=sectionACharger["bPortfolio"];
		catC=sectionsPortfolio[event.currentTarget.name];
	} else {
		sectionC=sectionACharger["bProfil"];
		catC=sectionsProfil[event.currentTarget.name];
	}
	chargeSousPartie(sectionC, catC);
}

Cette fonction est la réplique exacte (adaptée pour l’AS3), de sa grande sœur que nous avons créée dans la méthode 2. En conséquence, mis à part la syntaxe qui varie quelque peu, son principe de fonctionnement ne devrait pas vous poser plus de problème que ça.

Voici à quoi ressemble le site à la fin de ce chapitre (AS3)
Attention : aucune section n’est chargée par défaut. C’est tout à fait normale puisqu’il faut cliquer sur le bouton Portfolio pour charger la section correspondante.
Seule la section « Portfolio » est affichable pour le moment, ce qui est tout à fait normale.

Conclusion |

Nous y voilà ! Ce chapitre est terminé et avec lui nous en avons terminé avec le fichier « interface » puisque nous y avons fait tout ce que nous avions a y faire, à savoir la mise en place de tout le code nécessaire à la gestion du menu, des sous-menus, et du chargement des sections. Nous reviendrons dessus à lors de la finalisation de notre site (notamment pour régler la question de l’affichage plein écran et les réglages nécessaire avant publication).

Mais en l’état, sachez que toutes les conditions sont remplies pour que notre site soit fonctionnel. Ainsi dans les prochains chapitres, nous nous attarderons à la réalisation des sous-parties restantes que nous n’avons pas encore traitées.

J’espère que malgré la difficulté croissante, vous prenez toujours du plaisir à suivre ce long cours et surtout que vous apprenez des choses.

«Site complet en flash : part 6Site complet en flash : part 8»

Catégorie(s) : Flash, Flash - AS2, Flash - AS3

Article lu 734 fois

[4,00 / 5 - 4 vote(s)]

Loading ...

Haut de page

5 commentaires sur “Site complet en flash : part 7”

Muktaditi dit :

20 décembre 2009 à 9:00

YES!!!!!
Un bon professeur est un professeur qui sait reconnaître ce dont ces élèves peuvent avoir besoin…
Merci beaucoup….

Répondre
- admin dit :
  
  20 décembre 2009 à 11:38
  
  À votre service
Bronzo dit :

21 décembre 2009 à 12:07

Super !
C’est vrai qu’en AS2, je ne m’attendais pas à l’usage des tableaux associatifs, mais je suis très content d’avoir enfin compris comment ça marchait !
Au final, c’est propre et ça fonctionne.

Répondre
fil dit :

15 février 2010 à 2:26

bonjour et merci pour vos tutos.
Du très bon travail!!! mais comme beaucoup de personnes j’attends impatiencement le tuto sur la mise en page pour mettre mon site en ligne. HEEEEELP ME!!!!

Répondre
- admin dit :
  
  15 février 2010 à 12:38
  
  Merci.
  
  Je devais le mettre en ligne ce week-end mais j’avoue que j’ai pas eu le courage de travailler dessus ce week-end.
  
  J’essaie de faire au mieux pour une mise ligne ce soir tard (au prie du pire demain soir).

Laisser une réponse

Haut de page

Derniers commentaires

Il n'y a pas de problème, tout le monde ...
par admin le 11 mars 2010 | 18:31
Salut c'est encore moi... lol je débute ...
par seaman130092 le 11 mars 2010 | 11:51
effectivement l'erreur venez de la... :D...
par seaman130092 le 11 mars 2010 | 11:34
Salut, Je viens de récupérer tes fichier...
par admin le 10 mars 2010 | 18:43
Re bonjour, Alors effectivement j'avais ...
par seaman130092 le 10 mars 2010 | 10:52

Dossiers

Catégories

Articles les plus lus

Mots-clefs

Site complet en flash : part 7

Introduction |

Un petit Point |

Méthode 1 : minimum d’ActionScript |

Les tableaux associatifs |

Méthode 2 : ActionScript 2 |

Méthode 3 : ActionScript 3 |

Conclusion |

5 commentaires sur “Site complet en flash : part 7”

Laisser une réponse

Derniers articles

Derniers commentaires

Crédits

explainMe

Dossiers

Catégories

Articles les plus lus

Mots-clefs

Site complet en flash : part 7

Introduction |

Un petit Point |

Méthode 1 : minimum d’ActionScript |

Les tableaux associatifs |

Méthode 2 : ActionScript 2 |

Méthode 3 : ActionScript 3 |

Conclusion |

Articles en rapport

5 commentaires sur “Site complet en flash : part 7”

Laisser une réponse

Derniers articles

Derniers commentaires

Crédits