explainMe

Site complet en flash : part 4

Le 14 décembre 2008

Introduction |

Dans le précédent chapitre nous avons entamé la création du menu. Il est temps maintenant de terminer sa structure en ajoutant un sous-menu pour les catégories qui le nécessite.Puis une fois le menu terminé, nous nous attaquerons à la mise en place d’une animation de chargement (ou preload) pour tout le fichier interface.

Au programme de ce chapitre :

Des vidéos, des schémas commentés, et beaucoup (beaucoup, beaucoup,…) d’explications sur les différentes méthodes d’animation.

La structure du/des sous-menus |

Un sous-menu sera nécessaire pour les sections Portfolio et Profil.

Voici leurs structures :

Portfolio :

2D/Print
3D/Animation
Multimédia

Profil :

Cursus Scolaire
Expérience Professionnelle
Informations complémentaires

Une fois de plus nous allons donc voir comment s’y prendre pour réaliser ce sous-menu de 3 méthodes différentes.

Mais commençons par la première méthode, avec le minimum d’ActionScript.

Le sous-menu avec le minimum d’AS |

Comme nous allons utiliser le minimum d’AS ici, il va nous falloir ruser une fois de plus (le but étant d’en faire le moins possible).

Résumons, nous voulons que le menu :

Apparaisse.
Donne accès aux sous-catégories souhaitées.
Disparaisse lorsque l’on clique sur une autre catégorie.

Nous avons donc clairement 2 états communs aux deux sous-menus (1 et 3), et comme nous sommes malins (si si), nous allons nous arranger pour réutiliser les mêmes animations d’apparition et de disparition pour les 2 sous-menus.

Voyons comment réaliser ces sous-menus…

Les explications suivantes, tout comme la méthode avec le minimum d’ActionScript s’apparentent plutôt à un contre-exemple, me permettant ainsi de mettre en avant les avantages à utiliser les méthodes 2 ou 3 (respectivement en AS 2 ou AS3).
Ceci dit cette étape nous permet aussi d’explorer certaines fonctionnalités de flash relatives à l’animation que nous n’aurions peut-être pas l’occasion de voir avec les 2 autres méthodes.

Vidéo 1/4 – l’animation d’apparition [5'58 ] :

Vidéo 2/4 – l’animation de disparition [2'54 ] :

Vidéo 3/4 – les boutons [7'15 ] :

Vidéo 4/4 – création du sous-menu 2 à partir du sous-menu 1 [4'58 ] :

A présent que nous avons réalisé la structure des sous-menus, voyons les codes nécessaires à son animation.

Avant tout une petite précision : nous sommes ici dans le cadre où nous souhaitons limiter au maximum l’utilisation de l’ActionScript, donc pour cela nous allons directement placer nos codes d’action sur les boutons eux-mêmes. Cependant je tiens à mettre en avant que cette manière de faire est archaïque et très fortement déconseillée. D’ailleurs à partir de l’AS3 vous ne pouvez tout simplement plus le faire ! Cependant je pense qu’il est bon de vous montrer aussi cette manière de faire, ne serait-ce que pour vous monter ce qu’il ne faut pas faire.

Du coup, étant donné que nous allons directement placer notre code sur chaque bouton, nous n’avons plus besoin d’attribuer un nom d’occurrence à chacun des boutons comme nous avons due le faire pour l’AS2 et 3. Par contre comme nos codes vont faire référence aux occurrences de SOUS_MENU_1 et SOUS_MENU_2 , il nous faut donner un nom d’occurrence à chacun d’entre eux pour pouvoir les désigner depuis l’AS.

Revoyons donc comment attribuer un nom d’occurrence à un clip sur la scène :

Sélectionnez le clip en cliquant dessus.
Saisissez un nom d’occurrence dans la palette Propriétés.
puis cliquez sur [entrée] pour valider.

En ce qui me concerne je vais donner les noms d’occurrence suivant aux 2 sous-menus :

SOUS_MENU_1 : sousMenu1

SOUS_MENU_2 : sousMenu2

Les codes d’animation :

Code du bouton Portfolio (affiche le sous-menu 1) :

^?View Code ACTIONSCRIPT

on (release) {
	//--- Test de sousMenu1 ---
	if (sousMenu1._currentframe != 6) {
		//--- Test de SousMenu2 ---
		if (sousMenu2._currentframe == 6) {
			sousMenu2.play();
		}
		sousMenu1.play();
	}
}

Comme nous sommes directement sur le bouton lui-même, nous n’avons ici pas besoin de nommer le bouton (d’autant que nous ne lui avons pas donné de nom d’occurrence donc c’est inutile).

Aussi nous faisons directement appel à l’action qui doit déclencher une réaction, ici :

on (release) {
/— Actions —
}

Vous vous demandez peut-être pourquoi j’utilise l’action on(release) plutôt qu’on(press). Tout simplement parce que dans le cas on(release), l’action ne se déclenchera que si le relâchement du bouton de la souris se fait au-dessus du bouton. Alors que dans le cas du on(press), l’action se déclenche dès la pression du bouton gauche de la souris. C’est un choix personnel pour lequel vous êtes seul(e) juge. Personnellement il m’arrive de temps en temps de cliquer sur un bouton alors que je souhaitait en fait actionner son voisin, voilà pourquoi je privilégie le on(release).

Ensuite l’action que nous souhaitons effectuer est tout simplement :

sousMenu1.play();

Mais alors pourquoi tout ce code ?

Parce qu’avant de lancer la lecture du clip sousMenu1, nous devons savoir plusieurs choses :

Qu’elle est sa position.
Qu’elle est la position de sousMenu2.

Lorsque je parle ici de la « position » de tel ou tel clip, je veux bien sûr parler de la position de la tête de lecture dans chaque clip, puisque dans cette méthode les clips sousMenu1 et sousMenu2 sont lus et non déplacés.

Pour connaître la position de la tête de lecture dans un clip, nous avons à notre disposition la propriété _currentframe qui, si elle est « rattachée » à un clip, désigne la position de la tête de lecture à l’intérieur du clip en question (c’est-y pas beau ça ?).

Donc la position de la tête de lecture dans le clip sousMenu1 se note : sousMenu1._currentframe

Ensuite ne nous reste plus qu’à tester cette propriété dans un test conditionnel (ou if) :

if (sousMenu1._currentframe != 6) {
sousMenu1.play();
}

Ce qui reviens à dire :

« Si la position de la tête de lecture dans le clip sousMenu1 n’est pas à l’image clef 6, alors lance la lecture du clip sousMenu1.«

Notez au passage le signe != qui signifie « différent de » ou « n’est pas égale à » .

Pourquoi l’image clef 6 ?

Souvenez-vous c’est à cette image clef que se situe les boutons, donc on peut en déduire que si sousMenu1 est déjà à cette image clef, il est déjà ouvert, donc inutile de faire quoi que ce soit. D’autre part, si il n’y est pas, on peut vraisemblablement en déduire qu’il est à l’image clef 1 (la position où il est masqué) car c’est la seule autre qui contient un code stop();. Donc par conséquent, le menu étant masqué, lorsque l ‘on clique sur le bouton Profil, sousMenu1 doit apparaitre, d’où le code :

sousMenu1.play();

qui lance la lecture du clip (qui s’arrêtera à nouveau de lui-même à l’image clef 6 (sa position affiché).

Jusque là nous avons donc écrit un code qui nous permet de lancer l’apparition du clip sousMenu1 mais uniquement lorsque celui-ci n’est pas déjà affiché.

Donc on a fini !

Et non… Car il nous reste un cas de figue que nous n’avons pas encore pris en compte : si sousMenu2 est déjà affiché !

En effet pour le moment le sous-menu 1 s’affiche mais si le sous-menu 2 est déjà affiché, alors nous allons nous retrouver avec les 2 sous-menus affichés l’un au dessus de l’autre. Pas vraiment terrible quoi…

C’est pourquoi il nous faut ajouter un second test si jamais nous décidons de lancer la lecture :

//— Test de SousMenu2 —
if (sousMenu2._currentframe == 6) {
sousMenu2.play();
}

Ce test sert à déterminer si sousMenu2 est affiché ou non.

Comme pour sousMenu1, si sousMenu2 est affiché, alors cela veut dire que la tête de lecture est arrêtée sur son image clef 6.

Donc nous utilisons la même propriété _currentframe !

Cependant cette fois-ci le test est inversé puisque nous ne lancerons la lecture du clip que s’il EST à la position testée et non s’il ne s’y trouve pas comme dans le premier cas.

D’où l’utilisation du symbole « égalité » : ==

Ensuite l’action de lecture se lance de la même manière que pour l’exemple précédent, en utilisant l’instruction play();

Récapitulons donc :

Notre code s’exécute au moment où nous cliquons, puis relâchons la souris au dessus du bouton : on(release)

Puis le code test si le sousMenu1 n’est pas déjà affiché : sousMenu1._currentframe != 6

Si sousMenu1 est déjà affiché, il ne se passe rien, sinon on test la position de sousMenu2 (au cas où il soit affiché auquel cas nous le masquerions : sousMenu2._currentframe == 6), et nous lançons la lecture de sousMenu1 pour qu’il s’affiche : sousMenu1.play();

Code du bouton Profil (affiche le sous-menu 2) :

^?View Code ACTIONSCRIPT

on (release) {
	//--- Test de sousMenu2 ---
	if (sousMenu2._currentframe != 6) {
		//--- Test de SousMenu1 ---
		if(sousMenu1._currentframe == 6) {
			sousMenu1.play();
		}
		sousMenu2.play();
	}
}

Le code du bouton Profil respect exactement la même structure que celui du bouton Portfolio, si ce n’est que les tests et les ordres sont inversés :

Pour le bouton Portfolio :

if (sousMenu1._currentframe != 6) {
sousMenu1.play();
}

if(sousMenu2._currentframe == 6) {
sousMenu2.play();
}

Pour le bouton Profil :

if (sousMenu2._currentframe != 6) {
sousMenu2.play();
}

if(sousMenu1._currentframe == 6) {
sousMenu1.play();
}

Logique puisque l’effet désiré est l’inverse.

Codes des boutons Goodies, Liens, Contact (masquent les sous-menus si besoin) :

^?View Code ACTIONSCRIPT

on (release) {
	//--- Test de sousMenu1 ---
	if (sousMenu1._currentframe == 6) {
		sousMenu1.play();
	}
	//--- Test de sousMenu2 ---
	if (sousMenu2._currentframe == 6) {
		sousMenu2.play();
	}
}

Pour le moment ces codes se bornent à gérer l’apparition ou la disparition des sous-menus donc il est normal que les codes des trois derniers boutons soient identiques.

Pour ces cas de figure nous devons juste, à chaque fois, tester :

Si sousMenu1 est affiché (et si oui le masquer) :

if (sousMenu1._currentframe == 6) {
sousMenu1.play();
}

Si sousMenu2 est affiché (et si oui le masquer) :

if (sousMenu2._currentframe == 6) {
sousMenu2.play();
}

Si vous testez votre animation [Ctrl + entrée], vous devriez obtenir quelque chose dans ce goût là :

Le sous-menu en AS2 et AS3 |

Comme la structure sera la même en AS2 ou en AS3, j’ai préféré faire un vidéo commune pour la réalisation de la structure du sous-menu.

Vidéo – réalisation de la structure du sous-menu en AS2 ou AS3 [durée] :

A présent que nous avons réaliser la structure du sous-menu, nous allons donc voir les codes qui nous permettrons d’animer tout cela, mais avant voici un petit schéma récapitulatif des différents éléments principaux de la scène avec leur hiérarchie. Le but étant de vous remémorer la place de chaque élément par rapport aux autre puisque nous allons pointer vers différents éléments dans l’ActionScript…

Code d’animation du sous-menu en AS2 |

Je ne vais pas vous remettre tout le code ici mais seulement les nouvelles portions, vous laissant ainsi le soin de les replacer à l’endroit qui vous convient (on va voir ceux qui suivent… ). Mais je vous conseille tout de même de garder votre code le plus structuré possible afin de pouvoir vous y retrouver plus facilement par la suite.

Initialisations :

^?View Code ACTIONSCRIPT

1	var etatSousMenu:Boolean = false;

Fonctions :

^?View Code ACTIONSCRIPT

//
//--- 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;
		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;
	};
}

Actions des boutons :

^?View Code ACTIONSCRIPT

//--- Release bPortfolio ---
this.menuBas.bPortfolio.onRelease = function() {
	checkSousMenu(1);
	positionCurseur = this._x;
};
//--- Release bProfil ---
this.menuBas.bProfil.onRelease = function() {
	checkSousMenu(2);
	positionCurseur = this._x;
};
//--- Release bGoodies ---
this.menuBas.bGoodies.onRelease = function() {
	checkSousMenu(0);
	positionCurseur = this._x;
};
//--- Release bLiens ---
this.menuBas.bLiens.onRelease = function() {
	checkSousMenu(0);
	positionCurseur = this._x;
};
//--- Release bContact ---
this.menuBas.bContact.onRelease = function() {
	checkSousMenu(0);
	positionCurseur = this._x;
};

Essayons de comprendre quel va-t-être la logique qui nécessite tous ces codes...

Tout d’abord un point concernant les actions des boutons. Dans le chapitre précédent nous n’avons utilisé que les actions sur le onRollOver et le onRollOut des boutons. Ici nous allons déclencher des actions lorsque l’on clique sur un bouton, aussi la propriété utilisée dans ce cas là est onRelease (lorsque le bouton a été cliqué et que la personne à relâché la souris au-dessus du bouton).

L’action est toujours la même (seules les portions en rouge seront différentes suivant le bouton) :

this.menuBas.bContact.onRelease = function() {
checkSousMenu(0);
positionCurseur = this._x;
};

Que ce passe-t-il donc lorsque l’on clique sur un menu ?
Tout d’abord pour clairement identifier la section dans laquelle nous nous trouvons, nous modifions la valeur de la position initiale du curseur, ainsi, dans le cas présent, nous avons cliqué sur bContact, donc sa position sur l’axe des X (this._x) devient la nouvelle position de référence du curseur (la variable positionCurseur). c’est à dire que si nous allons à présent survoler n’importe quel autre bouton (sans cliquer dessus), le curseur va suivre la souris, mais lorsque nous ne survolerons plus aucun bouton, il reviendra se placer au-dessus de bContact (et non plus au-dessus de bPortfolio, qui était sa position initiale avant que nous ne la redéfinissions grâce à la ligne :

positionCurseur = this._x;

Qui signifie, this étant ici bContact puisque nous sommes dans son propre code, que la valeur contenue dans la variable positionCurseur devient identique à la coordonnée en X du bouton Contact.

Ne reste donc plus qu’une ligne :

checkSousMenu(0);

Il s’agit comme vous l’aurez sans-doute reconnu, d’un appel à une fonction nommée checkSousMenu à laquelle on passe l’argument 0 (zéro).

0 étant la valeur que passeront à cette fonction les trois boutons bGoodies, bLiens, et bContact, alors que les boutons bPortfolio et bProfil passeront respectivement les valeurs 1 et 2.

Et là je sent que je commence à vous perdre….

Petite pause et explication :

Lorsque de l’on clique sur un bouton nous voulons 2 choses :

Charger la sous-partie correspondante (nous ne nous en occuperons pas pour le moment).
Vérifier l’état du sous-menu pour savoir si nous devons l’affiche, le masquer et/ou en afficher un autre.

A - le cas de bPortfolio :

Si le sous-menu n’est pas afficher, il nous suffit de le « transformer » en sous-menu 1 et de l’afficher.

Si le sous-menu est déjà affiché :

-> soit il s’agit déjà du sous-menu 1 et nous ne faisons rien

-> soit il s’agit du sous-menu 2 et nous devons le masquer, le transformer en sous-menu 1, puis l’afficher à nouveau.

B – le cas de bProfil :

Si le sous-menu n’est pas afficher, il nous suffit de le « transformer » en sous-menu 2 et de l’afficher.

Si le sous-menu est déjà affiché :

-> soit il s’agit déjà du sous-menu 2 et nous ne faisons rien

-> soit il s’agit du sous-menu 1 et nous devons le masquer, le transformer en sous-menu 2, puis l’afficher à nouveau.

C – le cas des autres boutons :

Soit le sous-menu n’est pas affiché et nous ne faisons rien.

Soit le sous-menu est afficher et quelque soit sa version (1 ou 2) il nous suffit de le masquer.

Donc nous avons besoin d’une fonction (checkSousMenu) qui vérifie l’état du sous-menu (sousMenu), et à laquelle nous indiquons vers quel état nous souhaitons aller (la valeur passée : 0, 1 ou 2).

Examinons cette fameuse fonction :

function checkSousMenu(version) {
//— on Masque le sous-menu —
if (etatSousMenu == true) {
masqueSousMenu(version);
} else {
if(version != 0) {
afficheSousMenu(version);
}
}
}

Comme vous pouvez le voir nous récupérons la valeur passée à la fonction sous le nom de variable « version ».
Pour autant ce n’est pas directement sur cette valeur que nous effectuons le premier test car comme nous l’avons dit plus haut, cette valeur version va nous servir à déterminer vers quel état du sous-menu nous souhaitons aller (sous-menu 1 : 1 / sous-menu 2 : 2 / aucun sous-menu : 0). Hors avant de savoir qu’elle action nous devons lancer pour arriver à notre but, il nous faut d’abord savoir quel est l’état actuel du sous-menu, car c’est cet état qui déterminera l’action à entreprendre pour arriver à nos fins.

La valeur que nous allons tester pour savoir quel est l’état du sous-menu se nomme etatSousMenu.

Eh mais ce ne serait pas…

Et si c’est la variable que nous avons déclaré au tout début de notre code dans la phase d’initialisation :

var etatSousMenu:Boolean = false;

Comme le sous-menu ne peut avoir que 2 état (affiché ou masqué), la variable etatSousMenu est définie comme booléenne et sa valeur par défaut est false.

Comme nous l’avons déjà vu dans le précédent chapitre, une variable booléenne ne peut avoir que 2 valeurs : true ou false. Imaginons ici que cette valeur indique si le sous-menu est visible ou non :

true = oui il est visible.

false = non il n’est pas visible.

C’est pourquoi par défaut, le sous-menu étant masqué derrière le menu, la valeur de etatSousMenu est false.

Mais revenons à notre fonction qui teste justement la valeur de etatSousMenu :

if (etatSousMenu == true) {
masqueSousMenu(version);
} else {
if(version != 0) {
afficheSousMenu(version);
}
}

Ce qui reviens à dire :
»Si le sous-menu est affiché (if (etatSousMenu == true)), on fait appel à la fonction masqueSousMenu (masqueSousMenu(version);)pour le masquer. Sinon (else), si un sous-menu est demandé (if(version != 0)), nous appelons la fonction afficheSousMenu pour affiche le bon sous-menu (afficheSousMenu(version);) ».

Sous-entendu que si le sous-menu n’est pas visible (etatSousMenu == false) et qu’aucun sous-menu n’est demandé (version == 0), rien ne se passera.

C’est aussi simple que ça.

Mais que se passe-t-il ensuite ?

Prenons le cas le plus simple (qui est d’ailleurs celui au début de l’animation ) :

Le sous-menu n’est pas affiché (etatSousMenu == false) et nous avons cliqué sur bPortfolio, donc nous souhaitons afficher le sous-menu 1 (version = 1).

Nous appelons donc la fonction afficheSousMenu en lui passant comme argument la valeur de version :

afficheSousMenu(1);

Voici la fonction afficheSousMenu :

Cette fonction, bien que comportant quelques lignes, n’a rien de difficile en soit rassurez-vous.

Tout d’abord la fonction reçoit un argument que nous désignerons dans la fonction sous le nom de choix. En fait il s’agit de l’argument version passé par le bouton à l’a fonction checkSousMenu qui a son tour le transfert à afficheSousMenu (il voyage le p’tit gars ). Je lui ai donc donné un autre nom histoire de vous montrer que cette désignation est interne à la fonction et peut donc être différente de celle utilisée dans la fonction checkSousMenu. L’important ici reste que quelle que soit sa désignation, l’argument a toujours la valeur transmise par le bouton à l’origine.

Nous devons donc « tester » la valeur de cet argument pour savoir quel sous-menu nous souhaitons afficher.

C’est éxactement le principe des 2 tests suivants :

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 »;
}

f (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 »;
}

Comme j’ai essayé de le mettre en évidence à l’aide des couleurs, suivant la valeur de l’argument, l’initialisation ne sera pas la même. Car en fait ces 2 tests ne servent ni plus ni moins qu’à initialiser le sous-menu pour le faire correspondre à nos souhaits.

Quelles sont donc les étapes de cette initialisation :

est déplacer pour se caler sur le bouton correspondant à la catégorie qui viens d’être cliqué.
Les textes des boutons sont définis pour correspondre aux dénominations correspondantes à la catégorie.

Pour replacer le sousMenu sur l’axe des X nous devons faire correspondre la position de son point d’origine avec l’extrémité gauche du bouton sur lequel nous venons de cliquer.

Vous vous souvenez que le point d’origine de sousMenu est situé sur son coin en haut à gauche. En revanche ceux des boutons sont positionnés en haut mais au milieu de chaque bouton, donc nous devons reculer sousMenu de la moitié de la largeur du bouton pour qu’il soit bien calé sur son extrémité gauche.

Voici un petit schéma explicatif pour mieux vous exposer les faits :

Donc nous devons positionner sousMenu à la même position que le bouton MOINS la largeur du bouton, ce qui donne par exemple :

menuBas.sousMenu._x = menuBas.bPortfolio._x - (menuBas.bPortfolio._width/2);

Ne reste plus ensuite qu’à définir les textes des trois boutons conformément au sous-menu sélectionné.

Pour ce faire, nous ciblons chaque zone de texte suivie de la propriété text, indiquant ainsi que nous allons changer la valeur du champ texte, valeur que nous donnerons entre guillemets car il s’agit d’une chaîne de caractères (ou string)

Ce qui nous donne :

menuBas.sousMenu.texteB1.text = « Cursus »;

La phase d’initialisation de sousMenu étant achevée, il nous faut maintenant l’animer pour qu’il soit visible PUIS définir son état sur true pour spécifier qu’il est effectivement visible, ce qui est le travail de la dernière partie de la fonction afficheSousMenu :

var translationSousMenu:Tween = new Tween(menuBas.sousMenu, « _y », Strong.easeOut, menuBas.sousMenu._y, -60, 0.5, true);
translationSousMenu.onMotionFinished = function() {
etatSousMenu = true;
};

La première ligne doit vous sembler familière car c’est une simple animation grâce à la classe Tween comme nous l’avons vu dans le chapitre précédent. Il est à noter juste que la valeur en rouge doit correspondre à votre configuration. Pour ma part j’ai un menuBas d’une hauteur de 35 pixels et comme je veux afficher sousMenu, je lui ai donné la valeur -70, mais comme cela me semblait trop, je l’ai abaissé à -60 qui visuelement me convient mieux.

La valeur est négative car nous souhaitons remonter sur l’axe des Y. Or l’axe des Y est positif du haut vers le bas dans flash, donc pour aller dans l’autre sens, nous devons spécifier une valeur négative.

En revanche les 3 lignes qui suivent l’animation Tween sont nouvelles pour vous.

Il s’agit en fait de déclencher une action lorsque l’animation Tween nommée translationSousMenu s’achève.

C’est pourquoi nous utilisons l’appelation onMotionFinished qui déclenchera donc une (ou plusieurs) actions lorsque l’animation sera terminée.

Ensuite la structure est la même que pour l’action d’un bouton (= function() { — actions — }).

Et l’action que l’on doit réaliser ici est la mise-à-jour de « l’état » de sousMenu en modifiant la valeur de la variable etatSousMenu, donc :

etatSousMenu = true;

Enfin, pour finir avec l’AS2, voyons la fonction masqueSousMenu :

Mais que se passe-t-il dont dans cette fonction ?

Trois choses en fait :

sousMenu est masqué.
son état est redéfinie sur « masqué » (false).
Si un autre sous-menu avait été demandé (via l’argument passé par la fonction checkSousMenu), on appel la fonction afficheSousMenu en lui repassant l’argument (encore ! ) car c’est son boulot.

Au passage vous noterez que j’utilise la même désignation pour l’argument que dans la fonction afficheSousMenu (à savoir choix). J’aurais très bien pu choisir une troisième dénomination mais j’ai gardé 2 dénominations pour 3 fonctions afin de vous montrer que la désignation reste interne à la fonction (dans le cas d’un argument tout du moins).

Pour masquer le sous-menu, rien de bien compliqué, une petite animation Tween et le tour est joué :

var translationSousMenu:Tween = new Tween(menuBas.sousMenu, « _y », Strong.easeOut, menuBas.sousMenu._y, -35, 0.5, true);

Et mais pourquoi t’es encore en négatif alors qu’on descend ce coup-ci, on devrait être en positif ?!

Eh non, pas là !

Je vous rappel que le clip sousMenu est à l’intérieur du clip menuBas, lequel à son point de référence situé en bas à gauche. Et le point de référence d’un clip devenant le point d’origine pour ses enfants, pour aller à 35 pixel du bord inférieur, nous sommes toujours au-dessus du point d’origine, donc en négatif !

Un petit croquis pour exprimer tout ça :

D’où le -35 qui viens placer sousMenu juste derrière menuBas puisque ce dernier fait exactement 35 pixels de haut (dans mon cas).

Ensuite nous retrouvons à nouveau onMotionFinished qui va nous permettre là-encore, de déclencher des actions une fois l’animation Tween terminée.

Ces actions sont les suivantes :

sousMenu est masqué donc on indique qu’il l’est en définissant etatSousMenu comme flase :

etatSousMenu = false;

Enfin on test si un autre sous-menu est demandé, si c’est le cas, on appel la fonction afficheSousMenu en lui indiquant quel sous-menu il doit afficher (via l’argument justement) :

if (choix != 0) {
afficheSousMenu(choix);
}

Et nous en avons terminé avec l’AS2. Si vous testez votre animation, vous devriez avoir assez proche de ça :

Le menu a été rétrécie par rapport à sa taille originale.

Code d’animation du sous-menu en AS3 |

Une fois encore je ne vous afficherait ici que les morceaux de codes qui s’ajoutent à ceux déjà existants. À vous de les placer conformément à votre organisation dans votre code.

Initialisation :

^?View Code ACTIONSCRIPT

1 2	var etatSousMenu:Boolean = false; var sousMenuSelectionne:Number = 0;

Fonctions :

^?View Code ACTIONSCRIPT

//
//--- Fonction afficheSousMenu ---
//
function afficheSousMenu(event:MouseEvent) {
	posInitCurseur = event.currentTarget.x;
	if (event.currentTarget == menuBas.bPortfolio) {
		sousMenuSelectionne = 1;
		if (etatSousMenu == false) {
			initSousMenu();
		} else {
			masqueSousMenu();
		}
	} else if (event.currentTarget == menuBas.bProfil) {
		sousMenuSelectionne = 2;
		if (etatSousMenu == false) {
			initSousMenu();
		} else {
			masqueSousMenu();
		}
	} else {
		if (etatSousMenu == true) {
			sousMenuSelectionne = 0;
			masqueSousMenu();
		}
	}
}
//
//--- 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 = "3D/Animation";
		menuBas.sousMenu.texteB3.text = "Multimédia";
	}
	//--- 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, -70, 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;
}

Écouteurs des boutons :

^?View Code ACTIONSCRIPT

//
//--- bPortfolio ---
//
this.menuBas.bPortfolio.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bProfil ---
//
this.menuBas.bProfil.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bGoodies ---
//
this.menuBas.bGoodies.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bLiens ---
//
this.menuBas.bLiens.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bContact ---
//
this.menuBas.bContact.addEventListener(MouseEvent.CLICK, afficheSousMenu);

Bien bien bien… Voilà qui en fait du code. Mais ne paniquez pas, une fois de plus nous allons prendre le temps de voir tout ça en détails.

Gardez à l’esprit que la logique est à peu de choses prêt la même que pour l’AS2, seul la syntaxe a changé pour s’adapter aux contraintes de l’AS3.

Comme précédemment pour l’AS2, je vais commencer par la fin, à savoir les écouteurs pour les boutons, car il n’y a pas grand chose à en dire.

Il s’agit une fois de plus de déclarer un nouvel écouteur pour chaque bouton qui aura la tâche de déclencher la fonction afficheSousMenu en réponse à l’action MouseEvent.CLICK, c’est-à-dire lorsque l’on clique sur le bouton, ce qui nous donne donc, par exemple pour le bouton contact :

this.menuBas.bContact.addEventListener(MouseEvent.CLICK, afficheSousMenu);

Et la procédure est identique pour chacun des boutons bien évidement.

Jetons à présent un coup d’oeil sur les initialisations :

var etatSousMenu:Boolean = false;
var sousMenuSelectionne:Number = 0;

Tiens y’a 2 variables ce coup-ci ?

En effet contrairement à la version en AS2, je déclare ici 2 variables. Vous avez sûrement reconnue la première car c’est la même que pour l’AS2 : etatSousMenu qui nous servira à définir si le menu est affiché ou masqué.

En revanche la seconde est « nouvelle ». Cependant elle doit tout de même vous rappeler un petit quelque chose non ?

Mais si regardez bien, c’est une variable qui contient un nombre et son nom est sousMenuSelectionne !

En fait, comme nous allons le voir par la suite, nous ne pouvons pas passer d’argument à une fonction lorsque celle-ci est appelé par un écouteur d’évènement car l’écouteur ne tolère que le nom de la fonction appelée en réponse (ou fonction callBack) donc nous ne pouvons pas placer notre argument.

Mais ce n’est pas un problème pour autant car il nous suffit de déclarer la variable à l’extérieur de toute fonction, ce qui lui confère une porté « globale », c’est à dire que nous pourrons faire référence à cette variable (et donc la tester ou redéfinir sa valeur) depuis n’importe où dans notre code.

Voyons donc comment va circuler l’information dans cet imbroglio de fonctions.

Déroulement de l’action à l’intérieur de la fonction afficheSousMenu :

L’internaute clique sur un bouton
La fonction afficheSousMenu va redéfinir le point de référence du bouton cliqué comme étant le point d’origine du curseur.
La fonction afficheSousMenu va analyser quel bouton qui a été cliqué et suivant le résultat, redéfinira la valeur de la variable sousMenuSelectionne en fonction (bPortfolio : 1 / bProfil : 2 / autres : 0).
Suivant le choix, et l’état actuel de sousMenu (définit par etatSousMenu), la fonction afficheSousMenu appellera la fonction appropriée.

Déroulement de l’action à l’intérieur de la fonction initSousMenu :

Cette fonction est appellée depuis la fonction afficheSousMenu, uniquement si le bouton cliqué est bPortfolio ou bProfil.

La fonction initSousMenu va redéfinir les textes des boutons du sous-menu selon que la valeur de la variable sousMenuSelectionne sera égale à 1 ou 2. Elle replacera également sousMenu au bon endroit sur l’axe des X.
Une fois l’initialisation terminée, elle lancera l’affichage de sousMenu en appelant la fonction montreSousMenu.

Déroulement de l’action à l’intérieur de la fonction montreSousmenu :

sousMenu est animé à l’aide d’une animation Tween qui le fait sortir de sa cachette.
La fonction initialise un écouteur qui appèlera la fonction sousMenuYes une fois l’animation terminée.

function montreSousMenu() {
var translationSousMenu:Tween = new Tween(menuBas.sousMenu, « y », Strong.easeOut, menuBas.sousMenu.y, -60, 0.5, true); [1]
translationSousMenu.addEventListener(TweenEvent.MOTION_FINISH, sousMenuYes); [2]
}

Déroulement de l’action à l’intérieur de la fonction sousMenuYes :

Cette fonction est appelé lorsque l’animation d’apparition de sousMenu est achevée.

La valeur de la variable etatSousMenu est modifié pour true (le sous-menu est affiché).

function sousMenuYes(evt:TweenEvent) {
etatSousMenu = true; [1]
}

Déroulement de l’action à l’intérieur de la fonction masqueSousmenu :

sousMenu est animer à l’aide d’une animation Tween qui le déplace derrière le menu.
La fonction initialise un écouteur qui appèllera la fonction sousMenuNo une fois l’animation terminée.

function masqueSousMenu() {
var translationSousMenu:Tween = new Tween(menuBas.sousMenu, « y », Strong.easeOut, menuBas.sousMenu.y, -35, 0.5, true); [1]
translationSousMenu.addEventListener(TweenEvent.MOTION_FINISH, sousMenuNo); [2]
}

Déroulement de l’action à l’intérieur de la fonction sousMenuNo :

La fonction test la valeur de la variable sousMenuSelectionne afin d’identifier si elle doit afficher un nouveau sous-menu ou non. Si sa valeur est non, elle file directement au 3, sinon elle se rend au 2.
Si la valeur de sousMenuSelectionne vaut 0, alors la fonction modifie la valeur de la variable etatSousMenu pour false (le sous-menu est masqué).
Si la valeur de sousMenuSelectionne vaut 1 ou 2, alors la fonction appel la fonction initSousMenu (ce qui relance à processus d’initialisation puis par la suite d’animation,…).

function sousMenuNo(evt:TweenEvent) {
if (sousMenuSelectionne == 0) { [1]
etatSousMenu = false; [2]
} else { [1]
//— On réinitialise le sousMenu —
initSousMenu(); [3]
}
}

Il faut bien comprendre que la fonction masqueSousMenu peut être appellée dans 2 cas :

Pour masquer le sous-menu car le bouton cliqué n’a pas de sous-menu.
Pour masquer le sous-menu afin de le réinitialiser puis le ré-afficher avec les bons noms de boutons et la bonne position.

C’est pourquoi à la fin de la fonction masqueSousMenu, nous appelons la fonction sousMenuNo qui se charger d’effectuer ces tests et d’agir en conséquent.

À présent si vous testez votre animation [Ctrl+Entrée], vous devriez avoir quelque chose de sensiblement proche de ceci :

Le menu a été rétrécie par rapport à sa taille originale.

A présent nous en avons presque terminé avec la structure de l’interface (du moins pour le moment). Mais avant de passer aux sous-parties, il nous reste à créer l’animation de préchargement de l’interface.

Le préchargement |

A quoi ça sert une animation de préchargement au fait ?

À 2 choses en faite :

Tout d’abord imaginons que nous ayons réalisé une animation extrêmement complexe et lourde. Lorsqu’un internaute tombera sur notre site, il est fort possible que l’animation ne s’affiche pas immédiatement dès son arrivée (à plus forte raison si sa connexion n’est pas des plus performantes).

Et c’est précisément là que le preload rentre en scène. Il permet non seulement d’informer le visiteur que quelque chose est en court de chargement, mais aussi de lui donner un avant goût de votre talent (pourquoi pas) par l’aspect graphique que vous donnerez à cette animation.

Cependant un petit conseil : assurez vous que l’animation de chargement reste relativement simple (ou tout du moins légère) car si vous y incorporez trop d’éléments, il est possible qu’elle aussi ne s’affiche pas immédiatement, ce qui serait dommage…

Voyons donc comment construire notre animation :

Notez tout d’abord que pour ce cas particulier, nous allons garder la même structure qu’elle que soit la version d’AS que l’on ai décidé d’utiliser.

création du clip preload : 1 – la barre de chargement

création du clip preload : 2 – le champ de texte

Je ne l’ai pas indiqué dasn les illustrations, mais n’oubliez pas de donner un nom d’occurrence au clip PRELOAD (preload par exemple).

Voyons à présent comment cela va se passer au niveau du code :

Une fois de plus, une fois n’est pas coutume, ce coup-ci ce sont les méthodes 1 et 2 (minimum d’AS et AS2) qui utiliserons le même code.

Code de préchargement en AS2 :

^?View Code ACTIONSCRIPT

stop();
_root.onEnterFrame = function() {
        x = _root.getBytesLoaded();
	y = _root.getBytesTotal();
	z = 100/y*x;
	_root.preload.texteChargement.text = Math.floor(z)+" %";
	_root.preload.barreChargement._xscale = z;
	if (x>=y) {
		_root.gotoAndStop("interface");
		_root.onEnterFrame = null;
	}
};

Tout d’abord nous avons bien entendu retiré le :

gotoAndStop( »interface »);

Que nous avions mis dans le chapitre précédent pour pouvoir tester notre animation en « sautant » la zone de préchargement qui n’était alors pas encore faite.

À la place nous avons placé un stop(); pour nous assurer que la tête de lecture de flash n’ira pas plus loin tant que nous ne le lui aurons pas demandé..

Ensuite arrive le code qui gère le chargement de l’animation et agit sur notre clip preload en conséquence… Voici le déroulement des opérations :

La fonction s’éxecute en continu.
On affecte à la variable nommé z, le nombre de bytes chargées.
On affecte à la variable y, le nombre de bytes total du fichier.
On affecte à la variable z, le résultat d’une opération visant à obtenir le pourcentage de données chargées.
On écrit le pourcentage (la valeur de z) dans le champ de texte texteChargement.
On redimenssione le clip barrechargement en fonction du pourcentage.
Enfin on test si la totalité de l’animation est chargée. Si oui, on demande à la tête de lecture d’aller à l’étiquette « interface » et on stoppe la fonction.

_root.onEnterFrame = function() { [1]
x = _root.getBytesLoaded(); [2]
y = _root.getBytesTotal(); [3]
z = 100/y*x; [4]
_root.preload.texteChargement.text = Math.floor(z)+ » % »; [5]
_root.preload.barreChargement._xscale = z; [6]
if (x>=y) { [7]
_root.gotoAndStop( »interface »);
_root.onEnterFrame = null;
}
};

Vous noterez que dans ce code nous faisons référence à l’élément _root, qui représente en fait le niveau le plus haut dans la hiérarchie des éléments constitutifs de la scène. En somme on utilise ce mot réservé pour faire référence au fichier swf lui-même. Dans le cas présent ce procédé est tout à fait utilisable car nous savons que le fichier interface sera le fichier « maître » de notre site internet, c’est à dire que c’est lui qui sera le parent des autres fichiers swf que l’on chargera à l’intérieur d’interface. Cependant je vous conseil de limiter le plus possible l’utilisation du mot réservé _root.

Pourquoi ?

Imaginons que vous conceviez un jeu en flash dans le code duquel vous faite référence, à de nombreuses reprises, au _root. Vous développez votre jeu et il marche très bien, la vie est belle, etc… Et un beau jour on vous demande d’intégrer votre jeu dans une application flash (un CD-ROM ou un site par exemple) donc il sera chargé dans un autre swf . Et là, ça ne marche plus, ou pire vous avez des conflits avec des variables du clip parent !

Hein ?!

Eh oui, _root fait toujours référence à l’élément le plus haut dans la hiérarchie finale, donc si votre swf est chargé dans un autre swf, il n’est plus au sommet de la chaîne (alimentaire ). C’est précisément pourquoi beaucoup de gens vous déconseillerons d’utiliser _root. Il reste pourtant des cas pour lesquels son utilisation s’avère utile (récupération de variable externe par exemple), mais nous n’en parlerons pas ici.

Bref, donc notre fonction s’éxecute en boucle grâce à onEnterFrame (comme vous l’avez peut-être déjà vue si vous avez lue le cours sur les collisions en AS2). Au passage voyez comment on arrête une fonction onEnterFrame en AS2 : en la rendant nulle :

_root.onEnterFrame = null;

Ne nous reste donc plus que 3 méthodes à vous présenter (le reste est suffisamment simple pour ne pas nécessiter plus d’explications je pense) :

_root.getBytesLoaded(); : qui nous renvoie la quantité de bytes chargées pour l’élément _root.

_root.getBytesTotal(); : qui nous renvoie la quantité de bytes total que comporte l’lément _root (c’est le poids de l’animation en fait).

Math.floor(nb); : en fait il s’agit d’un composé ici car nous utilisons la méthode floor de la classe Math de l’ActionScript.

La classe Math permet, comme son nom l’indique, de réaliser des opérations mathématiques sur des nombres à l’aide de plusieurs méthodes (round, floor, cos,…). Ici nous utilisons floor, qui renvoie l’entier de la valeur minimale la plus proche de la valeur nb (ex : nb = 12.3, Math.floor(nb) = 12 / nb = 42.8, Math.floor(nb) = 42).

Ne vous reste plus qu’à sauvegarder votre animation et à la tester comme indiqué dasn l’illustration suivante :

Code de préchargement en AS3 :

^?View Code ACTIONSCRIPT

stop();
//
//--------------------------------------------------------------- Prechargement ---//
//
//
//--- Fonction qui va gérer la progression ---
//
function afficheProgession(evt:ProgressEvent) {
	var charger:Number = evt.bytesLoaded / evt.bytesTotal;
	var pourcentage:int = charger * 100;
	preload.texteChargement.text = pourcentage+" %";
	preload.barreChargement.scaleX = charger;
	preload.texteChargement.x = preload.barreChargement.x + preload.barreChargement.width + 10;
}
//
//--- Fonction qui sera appelée une fois le chargement terminé ---
//
function chargementTermine(evt:Event) {
	loaderInfo.removeEventListener(ProgressEvent.PROGRESS, afficheProgession);
	loaderInfo.removeEventListener(Event.COMPLETE, chargementTermine);
	gotoAndStop("interface");
}
//
//--- Ecouteurs ---
//
loaderInfo.addEventListener(ProgressEvent.PROGRESS, afficheProgession);
loaderInfo.addEventListener(Event.COMPLETE, chargementTermine);

Tout comme pour les 2 précédents cas, nous avons remplacé le gotoAndStop( »interface »); par un stop();.

En revanche la manière de procéder est un peu différente car nous allons utiliser non pas une mais deux fonctions.

Pourquoi ?

Parce que comme nous allons appeler ces fonctions à partir d’écouteurs, et que nous aurons 2 écouteurs, donc nous aurons 2 fonctions.

Finalement l’AS3 me semble presque plus logique que l’As2 car se borne à créer une fonction pour chaque action. Ce qui peut sembler plus compliqué au début mais finalement m’apparaît comme une simplification des choses… Je vous laisse en juger par vous-même.

Ce coup-ci les développeurs de flash on encore simplifié le problème puisque l’ActionScript 3 nous fourni une classe nommée loaderInfo qui sert justement à donner des informations sur le chargement du swf dont il fait partie (du coup même plus besoin de faire référence au _root puisque c’est déjà « compris dedans » si j’ose dire).

De plus il existe un vaste champ d’évènements susceptibles d’êtres « interceptés » par un écouteur (pour peu que l’on sache le nommer), justement certains correspondent au chargement !

C’est pourquoi nous déclarons 2 écouteurs, un pour le chargement en cours :

loaderInfo.addEventListener(ProgressEvent.PROGRESS, afficheProgession);

et un pour la fin du chargement :

loaderInfo.addEventListener(Event.COMPLETE, chargementTermine);

Petite subtilité ajoutée également au code, le champ de texte dans lequel nous affichons le pourcentage de données chargées s’animera et avancera en même temps que la barre de chargement.

Voyons donc comment s’articulent les fonctions relatives à ces évènements :

La progression du chargement :

On défini le coefiscient de données chargées (données chargées sur données totales) dasn une variable nommée charger, dont la valeur sera un chiffre entre 0 et 1.
On défini une variable pourcentage qui contiendra le pourcentage chargé (charger x 100).
On affiche le pourcentage chargé dans le champ de texte texteChargement.
On redimentionne la barre de chargement en fonction du taux de données chargées.
On déplace le texte indiquant le pourcentage de chargement qui suit l’étirement de la barre de chargement.

function afficheProgession(evt:ProgressEvent) {
var charger:Number = evt.bytesLoaded / evt.bytesTotal; [1]
var pourcentage:int = charger * 100; [2]
preload.texteChargement.text = pourcentage+ » % »; [3]
preload.barreChargement.scaleX = charger; [4]
preload.texteChargement.x = preload.barreChargement.x + preload.barreChargement.width + 10; [5]
}

Nous retrouvons bien ici nos bytesLoaded et bytesTotal (même si leur syntaxe est différente de celle de l’AS2, leur principe de fonctionnement reste le même), mais récupérés de notre événement passé en argument à la fonction et qui donc se rapporte à la classe loaderInfo.

Vous avez certainement noté également que les propriétés ne se notent plus avec le « _ » comme c’était le cas en AS2. Voici quelques exemples de correspondances AS -> AS3 :

_x -> x

_y -> y

_xscale -> scaleX

_width -> width

…

De plus certaines propriétés qui auparavant s’exprimées de 0 à 100, s’expriment maintenant de 0 à 1 (ou 0.5 en AS3 équivaut à 50 en AS2).

C’est pourquoi nous redimensionnons la barre de chargement directement en affectant la valeur de charger à sa propriété scaleX et non celle de pourcenatage comme ce fut le cas précédemment.

preload.barreChargement.scaleX = charger;

Enfin pour déplacer la zone de texte affichant le pourcentage en même temps, je lui affecte la position en X de la barre de chargement, + sa longueur + 10 (histoire qu’ils ne soient pas collés l’un à l’autre :

preload.texteChargement.x = preload.barreChargement.x + preload.barreChargement.width + 10;

La fin du chargement :

On désactive les écouteurs.
On dit à la tête de lecture de faire un bond vers l’étiquette « infertface ».

function chargementTermine(evt:Event) {
loaderInfo.removeEventListener(ProgressEvent.PROGRESS, afficheProgession); [1]
loaderInfo.removeEventListener(Event.COMPLETE, chargementTermine);
gotoAndStop( »interface »); [2]
}

Nous voyons donc que pour désactiver un écouteur la structure est la même que pour sa création, si ce n’est que addEventListerner est remplacé par removeEventListerner.

Conclusion |

Félicitation vous êtes parvenu à la fin de cet interminable cours ! ( )

Tout ça pour ça me direz-vous. Et oui mais j’ai essayé d’être le plus explicatif possible (et le plus clair possible aussi) et pour ça il faut quelques lignes tout de même.

Nous n’avons pas fait grand chose dans ce chapitre (juste animé le sous-menu et créé une animation basique de préchargement) mais peut-être sans que vous ne vous en aperçeviez, nous avons revu certaines notions présentées dans les chapitres précédents ainsi que de nouvelles aussi.

Dès le prochain chapitre nous laisserons de côté le fichier principale « interface.fla » (nous y reviendrons par la suite) pour commencer à créer les sous-parties…

D’ici là si vous avez trouvez des erreurs, si vous avez des questions ou besoin d’aide, n’hésitez pas à laisser un commentaire ou a poster votre demande sur le forum.

«Site complet en flash : part 3Site complet en flash : part 5»

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

Article lu 6 175 fois

[4,87 / 5 - 15 vote(s)]

Loading ...

Haut de page

86 commentaires sur “Site complet en flash : part 4”

Speer0 dit :

14 décembre 2008 à 17:07

Enfin la partie 4 ! Merci beaucoup ^^

Répondre
Speer0 dit :

16 décembre 2008 à 8:51

Les vidéos ne fonctionnent pas !

Répondre
admin dit :

16 décembre 2008 à 12:34

C’est rectifié !

Désolé à chaque fois j’oublie de mettre des liens en absolus (honte à moi).

Promis la prochaine fois j’essaierai d’être bon du premier coup…

Répondre
Speer0 dit :

19 décembre 2008 à 11:33

Lol, merci j’attaque de suite à suivre la suite

Répondre
Antoine dit :

24 décembre 2008 à 18:50

Petit problème avec l’affichage « shadowbox » ou « slimbox ».
Après avoir cliqué sur « close » la page reste noire avec Firefox ou Safari sur mac.

Répondre
admin dit :

24 décembre 2008 à 19:53

Oui c’est slimbox qui me fait ça depuis que j’ai fait la mise à jour vers Wordpress 2.7

Pas encore eu le temps de m’en occuper mais je vais me penser dessus dès les fêtes passées

Merci de ma l’avoir signalé.

Répondre
Speer0 dit :

30 décembre 2008 à 16:46

http://grafikart.fr/pages/zoombox?lang=fr Essaye avec ça, ça ira peut être mieu, c’est développer par mon formateur PHP.

Répondre
admin dit :

30 décembre 2008 à 17:27

Merci !

J’utilise déjà un système équivalent pour ouvrir les vidéos (shadowbox, qui tourne avec jQuery aussi d’ailleurs) mais comme ton exemple, à la différence de slimbox, ils ne sont pas intégrés à Wordpress sous la forme de plugin (je sais là je fait le flémard ).

De toute façon la solution risque d’être la suivante :
Comme shadowbox fonctionne très bien et gère les images, les flv, et bien plus encore… Je vais repasser toutes les images sous shadowbox et non plus slimbox, comme ça me fera un plugin de trop en moins et ce sera aussi simple. Seulement faut que je me repasse tous les articles à la mains (en même temps y’en a pas trop encore ça va [no comment please]).

Je m’occupe de ça à la rentrée promis.

Merci quand même pour le liens, ça fait toujorus une bibliothèque js de plus sous le coude qui peux servir !

Répondre
Antoine dit :

2 janvier 2009 à 14:36

Bonjour,
J’ai un souci de lecture des versions AS2 et AS3.
Sur Mac, elles sont fonctionnelles sous Safari et avec Firefox c’est la page blanche?
Je précise que le preload n’est pas encore ajouté.
Par contre, quand j’utilise la commande dans Flash : Fichier>Aperçu avant publication>Flash
c’est OK, bizarre, bizarre?

Répondre
admin dit :

3 janvier 2009 à 18:18

Bonjour,

Oui en effet c’est bizarre…

Peut-être que ta version du plugin sous Firefox est trop ancienne. Pour lire l’AS2 avec les tween il te faut au minimum la version 9 je crois. Même choses pour l’AS3, qui ne pourra être interprété qu’à partir du player 9. Au pire si ce n’est pas déjà le cas je tenterais une mise à jour vers la version 10 (la version actuelle).

Après comment lis-tu les fichiers dans otn navigateur ? Tu a fait une publication et tu lis le fichier HTML ou bien tu glisse directement le SWF dans le navigateur ?

Comme je n’ai pas encore expliqué les réglages au niveau de l’exportation car il y en a plusieurs possibles suivant ce que l’on souhaite obtenir et nous n’en sommes pas là (du moins par rapport à l’avancée du mini-site).

Répondre
- Antoine dit :
  
  8 janvier 2009 à 23:08
  
  J’ai la version Shockwave Flash 10.0 r12 sur Firefox et sur Safari ?? J’ai publié pour avoir un html avec le swf et seul Safari affiche bien les version AS2 et AS3.
  Pour Shadowbox c’est OK
- admin dit :
  
  9 janvier 2009 à 18:44
  
  Zut j’ai oublié de regarder au bureau (j’ai Mac là-bas ).
  Je ferait le test lundi voir si j’ai le même problème…
- admin dit :
  
  13 janvier 2009 à 12:37
  
  Je viens de faire le test sous Firefox et Safari (sous Leopard) et ça a très bien fonctionné.
  
  Je ne comprends pas pourqui ça ne marche pas chez toi, désolé…
admin dit :

6 janvier 2009 à 20:55

Voilà le souci au niveau des plugins javascript est définitivement réglé !

J’ai viré le plugin slimbox, retiré ma bidouille pour ajouter shadowbox, puis installer le vrai plugin shadowbox et ça roule sous Firefox et internet Explorer (chez moi).

Pourquoi faire coompliqué quand ça amrche meiux en étant simple ?

Répondre
Yves dit :

9 janvier 2009 à 1:18

Vraiment vraiment trop génial comme cours… j’ai cherché pendant plusieurs mois pour avoir des cours de flash et la c’est trop trop bien fait j’attend avec impatiente la suite de vos cours. Je suis en congé de maladie pour le moment et je passe mes journées sur votre site.
MERCI MERCI !!!!

juste une petite question comment fait ton pour introduire des autres fichier swf dans le contenu, avec quel code mettre sur les liens du menu …. j’ai hate de savoir.

Répondre
- admin dit :
  
  9 janvier 2009 à 18:50
  
  Heureux de rendre service !
  
  Pour charger un swf dans un clip on utilise la fonction loadMovie en AS2. En AS3 il existe une classe Loader (au cas où certains souhaitent commencer à regarder par eux-même…).
  
  La suite arrive… J’y travaille ce week-end.
  Par contre je ne vais pas aborder le chargement des sous-parties tout de suite, je pense d’abord travailler sur les sous-parties elles-mêmes, puis après les charger dans l’interface.
Diabolo46 dit :

12 janvier 2009 à 13:14

Bonjour, tout d’abord merci pour ce tuto vraiment très clair et précis.

Je réalise un site entièrement en flash pour un projet de cours, et meme si j’ai un peu simplifié, j’utilise ton tuto a la lettre

Mais j’ai un soucis, je voudrais que lorsque l’on clique sur les zones du menu (je n’ai pas fait de sous menu), comment faire pour que l’animation affiche une autre frame et donc une autre page?

Si je met des boutons par dessus ca annule l’animation du curseur… Enfin voila si tu pouvais me donner un coup de pouce en donnant le code ou la méthode utilisée
Voila l’ébauchce de mon site : http://f.roges.free.fr/

Merci

Répondre
- Diabolo46 dit :
  
  12 janvier 2009 à 13:54
  
  J’oubliais je l’ai construit en AS3 ^^
- admin dit :
  
  12 janvier 2009 à 20:18
  
  Bonjour,
  
  Aucun problème je veux bien t’expliquer tout ça.
  
  Par contre si tu veux bien m’exposer ce que tu souhaite réaliser sur le forum, comme ça je pourrais mieux détailler ma réponse (car plus d’outils que dans les commentaires).
  
  P.S. : Si jamais cela te pose un souci sache que tu n’es pas obligé de t’inscrire pour écrire sur le forum.
wlup dit :

14 janvier 2009 à 12:34

Vraiment très agréable ton site et ce que tu fais bravo !
Si tu te sentais de nous faire un tuto sur des techniques d’animations (chargement d’un site animé par exemple), ou du moins d’en expliquer les grands principes et les bonnes pratiques (architectecture, économie de mémoires, poids…), ce serait tip-top !
Merci encore !
wlup

Répondre
admin dit :

14 janvier 2009 à 18:44

Merci.

Je ne suis pas sûr de comprendre ta demande. Qu’entend-tu par « techniques d’animations » ?
As-tu des exemples ?

Merci

Répondre
lemathurin dit :

22 janvier 2009 à 9:56

Bonjour !
Alors tout d’abord un grand merci pour ces tutos, ils sont géniaux et prennent (pour une fois) en compte l’AS3 !

J’ai une petite question pour toi ! J’ai réalisé tout les tutos pour mon site et j’ai remarqué une anomalie… Dans mon interface, j’ai inséré un fond au format *.png qui pèse environ 180Ko. Jusque là, pas de soucis. Sauf que en regardant le fichier *.swf qui en résulte, je remarque que celui-ci ne pèse que 21Ko. Comment est-ce possible ???

Ce serait génial si ça marchais tout le temps mais malheureusement pour mon préload (qui est un peu différent du tien; il y a une image), le poids de mes images se répercutent immédiatement sur le poids du *.swf. Du coup, mon préload est super long à charger par rapport à mon site ! Pas terrible !

Aurais-tu une solution ou une explication ? (à part réduire mes images car ça ne suffit pas et ça ne résoud pas mon mystère !)

Merci pour ton aide !

lemathurin

Répondre
- admin dit :
  
  22 janvier 2009 à 19:05
  
  En effet j’ai moi-même, dans la plupart des cas pu constater que flash re-compresse plutôt bien le PNG. Je ne sais par contre pas pourquoi et je t’avoue que je n’ai pas trop cherché à savoir non-plus (des fois je n’ai pas besoin de tout savoir ), donc je ne vais pas pouvoir te répondre plus à ce sujet (mais si jamais je trouve quelque chose je là-dessus, je vous tiendrai au courant).
  
  Pour ton souci au niveau de l’animation de preload malheureusement je ne vais pas avoir trop de solution non plus. Flash doit impérativement chargé le début du fichier (un minimum disons), ici le preload, pour pouvoir l’afficher, donc s’il contient des images il faut qu’il les ai chargé. C’est pourquoi je déconseille l’utilisation d’images pour les preload car il est sûr que ça plombe un peu le fichier.
  
  Maintenant as-tu vraiment besoin d’une image ? À moins qu’il s’agisse d’une photo ou d’une illustration vraiment complexe, peut-être le visuel est-t-il réalisable en vectoriel ?
Luc dit :

22 janvier 2009 à 15:10

Salut !
Merci beaucoup pour ce tutoriel très clair qui m’a permis de commencer ce que je voulais faire depuis pas mal de temps, apprendre flash et spécialement pour faire un portfolio !

J’en profite pour te communiquer quelques fautes que j’ai pensé à relever :
Part 3:
« c’est tout à fait normale » => normal

Part 4:
»sinthaxe » => syntaxe
»vasi » => vais
un moment tu écris « référence à cette fonction » alors que je crois si je ne trompe pas que tu parle d’une variable
et aussi au lieu de « explicatif » j’aurais mis « explicite » pour la conclusion !

Voila tout ça pour te donner envie de corriger les fautes et SURTOUT DE CONTINUER A ECRIRE LA PARTIE 5 !!! J’espère que tu pourras nous publier ça bientôt ^^

En coup cas très bon boulot !

Un dernier truc : fais gaffe des fois de ne pas parler trop près du micro ça sature vite fait..

A ++

Répondre
- admin dit :
  
  22 janvier 2009 à 18:46
  
  Merci à toi je vais de ce pas corriger tout ça.
  
  Je suis justement en train de repasser tous les articles par la case re-re-re-lecture pour réduire (à défaut de totalement éradiquer) toutes les fautes honteuses que j’ai laissé (et pour lesquelles je vous présente évidement mes plus profondes excuses), mais je n’en suis pas encore au cours sur flash (no comment).
  
  Bien entendu je vous prépare en ce moment même la partie 5 (ça à pris du retard car justement je suis en train de modifier la manière dont je capture les vidéos, à cause du son très exactement, qui n’était pas du tout satisfaisant jusque-là).
  
  Et j’en profite pour vous informer que finalement j’ai décidé d’aborder le chargement des images via un fichier XML pour les méthodes 2 et 3 (ce qu’y n’était pas le cas à l’origine).
  
  P.S. : juste pour te taquiner si je peux me permettre : « En coup cas très bon boulot ! »
- Luc dit :
  
  22 janvier 2009 à 21:40
  
  Tu peux te permettre … c’est honnête ^^
lemathurin dit :

23 janvier 2009 à 1:02

merci bien pour la réponse rapide ! Alors, tant pis pour moi, je vais devoir essayer de trouver mes solutions tout seul… Malheureusement, j’ai déjà passé en vectoriel tout ce que je pouvais…
Une petite question : lors d’un preload, flash télécharge toute l’application flash qui va suivre, mais télécharge-t-il aussi les autres fichiers flash auxquels le fichier fash interface (ici) va faire appel? (je sais pas si c’est très clair!) Et si non, est-il possible de demander à tout charger dès le début ? Est-ce une bonne idée ?

Voilà pour mes petites questions !
Et on attend avec impatience la suite des tutos ! Je suis ça au jour le jour !

Répondre
- admin dit :
  
  23 janvier 2009 à 18:40
  
  Salut, désolé mais non tu n’es pas seul !
  explainMe n’est pas le seul site à parler de flash, c’est pourquoi je te conseil de faire une tour sur la communauté mediabox (par exemple, il y en a d’autres) qui regorge de personnes plus compétentes que moi en flash et ActionScript. Peut-être auront-ils plus d’infos que moi à ce sujet ?
  
  Même chose concernant ta question sur le preload :
  Le preload que nous avons abordé dans ce chapitre ne gère que le fichier interface dans le cas présent, et non les fichiers qui y seront chargés par la suite.
  Pour être totalement honnête, je n’ai jamais, pour l’heure, eu à réaliser un tel chargement sur « plusieurs niveaux », en revanche je pense que c’est tout à fait faisable (peut-être via un fichier xml qui définirait tous les fichiers à charger, donc ensuite reste à créer une fonction de préchargement qui fasse le tour du fichier xml et charge chaque fichier un par un (c’est un peu le principe que je vais adopter pour les images du site exemple : je suis en train de vous préparer ça pour le chapitre 5 [peut-être y aura-t-il un chapitre 5.1, je ne sais pas encore car j’aimerais prendre le temps de définir un minimum le XML aussi...]).
  
  Tu devrais trouver des gens sur mediabox qui savent faire ça « les doigts dans le nez » je pense.
  Sinon on peut aussi envisager d’y réfléchir à plusieurs sur le forum d’explainMe, mais je ne te garantie pas de pouvoir y consacrer beaucoup de temps tout de suite car j’essaie d’avancer sur les cours en ce moment (donc si tu n’es pas pressé…).
Epoc dit :

23 janvier 2009 à 12:26

Moi je trouve que le son dans les vidéos est acceptable…

Répondre
Limou dit :

31 janvier 2009 à 20:25

Bonjour et merci beaucoup pour ce tuto efficace

J’aurais juste une petite question. Est – il possible par un moyen ou par un autre de définir une variable globale qui pourrait être utilisée dans tout le fichier. Par exemple j’ai trois étiquettes une Préload, une Accueil et une Interface (comme dans les tutos avec une page accueil intermédiaire en plus) comment peut on définir une variable conditionnée par la navigation sous Accueil dont on peu récupérer la valeur dans le code de l’interface ?

Je sais pas si c’est très clair

Merci d’avance

Répondre
- admin dit :
  
  2 février 2009 à 19:23
  
  Salut.
  
  Désolé pour la réponse tardive…
  
  Juste une question à mon tour : quelle version d’ActionScript utilise-tu ? AS2 ou AS3 ?
  
  Pour l’AS2 rien de bien compliqué mais pour l’AS3 c’est un peu plus « délicat » à mettre en œuvre (mais rien d’infaisable).
- Limou dit :
  
  7 février 2009 à 18:32
  
  Je suis en AS3 (désolé pour la réponse de la réponse tardive :p)
- admin dit :
  
  16 février 2009 à 22:17
  
  Bon alors ce coup-ci j’ai vraiment mis 3 plombes pour te répondre.
  En fait j’ai cherché désespérément un moyen simple de définir une variable globale (comme en aS2), mais c’est une chose impossible en AS3.
  
  Bref, je t’ai rédigé une petite réponse sur le forum.
  
  C’est « un poil » plus compliqué qu’en AS2 mais ça reste totalement faisable.
  
  J’espère que tu as toujours besoin de la réponse :/
Manydia dit :

11 février 2009 à 23:31

Super le cours ! Je doit rendre un projet similaire en cours donc ça m’aide beaucoup ! A quand la suite ?

Répondre
- admin dit :
  
  12 février 2009 à 0:32
  
  Merci.
  J’ai beaucoup de taff en ce moment donc le chapitre 5 à pris du retard malheureusement (d’autant qu’il est important donc il me prend du temps). Bref j’y travaille et j’essaie de le terminer avant la fin du mois, ça dépendra du temps que je pourrais y consacrer…
Manydia dit :

12 février 2009 à 18:04

Ok pas de soucis et merci pour la réponce si rapide, je vais essayer de continuer par moi même car je doit quand même rendr eun projet complet lol. Serais t’il possible de scinder le chapitre 5 en deux pour les plus impatients ou pas ? Bien entendu si vous préférez le publier entier c’est pas grave. Dans ce cas là pourrai-je avoir des information sur la procédure que vous avez choisie pour la suite au niveau des contenus etc… pour que j’essai de le faire seule.
Merci d’avance,
Manydia

Répondre
admin dit :

12 février 2009 à 18:26

J’avais pensé scinder le cours effectivement. Malheureusement cela m’aurais obligé à faire 3 parties, une pour chaque méthode (sans AS, AS2 et AS3). Du coup j’aurais été obligé de répéter des choses dans les 2 sous-chapitres (AS2 et AS3) car ils utilisent tous-deux le même fichier XML donc pas très pratique. De plus j’essaie de suivre une progression la plus logique possible entre les 3 méthodes dans un même chapitre, c’est pourquoi je rassemble toujours les 3 méthodes dans un seul et même chapitre.

Sinon voici « en gros » la structure que je vais employer :
- SANS AS : les éléments sont directement dans la sous-catégorie (images + texte), après il s’agira d’un jeu d’étiquettes en gros.
- AS2 et AS3 : les informations sur les projets sont stockés dans un fichier XML (textes + liens vers les images). Le XML est donc chargé puis parcourus en fonction de certains critères pour fournir les informations souhaités : affichage des bons textes et chargement de la bonne image.

Si tu code en AS2 et que tu souhaite utiliser un fichier XML, je te conseil de regarder du côté de l’XPath API qui permet de grandement simplifier les pointages vers les noeuds XML.
Voici un lien relatif à ça qui me semble assez bien expliqué : Flash et le XML (developpez.com)

Si tu code en AS3, la syntax est complètement différente puisque l’As3 contient nativement des fonction pour lire le XML.
Un lien intéressant : Gérer le XML (Yazo)

De toute fasson si tu as des souci ou besoin d’aide tu peux toujours utiliser le forum.
Par contre il te faudra t’inscrire… À l’origine j’autorisai les invités à poster des messages mais malgré le CAPTCHA certaines personnes malintentionnées se sont permis de venir poster des liens vers leurs « marchandises » !

Une fois de plus c’est la majorité qui trinque par la faute de la minorité…

Répondre
- Manydia dit :
  
  12 février 2009 à 18:58
  
  J’emploie la méthode en AS3, J’ai le pluggin de Yazo justement installé sur la CS4. Mon projet étant à rendre pour la première semaine de mars, je vais essayer de faire la suite seule pour ne pas prendre le risque de ne pas pouvoir le finir. Merci pour ces informations précieuses et espérons que j’y arrive
  Encore merci pour ce très bon cours,
  Manydia
- admin dit :
  
  12 février 2009 à 19:11
  
  Avec plaisir et bon courage.
  
  Juste une question : si c’est un projet dans le cadre de tes études, tu n’as pas des cours sur l’AS3 justement ? Sinon je vois mal comment vous apprenez (si je peux me permettre).
- Manydia dit :
  
  12 février 2009 à 20:45
  
  Et bien ma formation est tourné beaucoup sur la programmation c’est pour ça que j’utilise la méthode en AS3. On à bien sur des cours de Flash mais le problème c’est que comme ils ne trouvaient pas de prof spécialisé dans la programmation en AS3 ils ont pris un graphiste donc il apprend en même temps que nous. Et puis donner des cours en recopiant les exemples d’un bouquin à mon avis c’est pas le mieux ^^
admin dit :

12 février 2009 à 21:04

Oui je te l’accorde. Sinon autant vous donner la référence du livre et vous faire des ateliers où il vous aide (ce qui n’est pas le même chose à mon sens). Cependant je ne lui jetterai pas totalement la pierre, ayant moi-même constamment recours à de la documentation pour valider ce que j’écris ici. Histoire de ne pas raconter n’importe quoi…

Cependant même avec l’As3, tu n’es pas forcement obligée de passer par du XML ou autre, c’est une question de choix aussi. Cela dit c’est d’autant plus intéressent pour une personne qui s’oriente vers la programmation.

Répondre
- Manydia dit :
  
  12 février 2009 à 22:09
  
  Oui et en plus vu qu’on la un peu vu en cours je suppose qu’il faut l’appliquer dans le rendu final…Donc je mettrais bien de l’XML ^^
Miz Air ® dit :

22 février 2009 à 4:55

Bonjour,

Vraiment parfait ce cours!! Je pense qu’aucun prof n’explique aussi bien à l’école!
Donc j’ai terminé les 4 parties avec succès (inutile de dire que j’attends la partie 5 avec impatience!).
Par contre, j’ai un petit souci avec la barre de chargement: aucun chiffre ne s’affiche pendant le chargement! J’ai pourtant bien intégré les caractères. Pouvez-vous m’aider ?

Merci et à bientot

Répondre
- admin dit :
  
  22 février 2009 à 9:45
  
  Bonjour (et merci),
  
  Donc pour ton champ de texte qui n’affiche rien il faudrait vérifier 2-3 choses (il y en a qui te paraîtrons évident, mais mieux vaut penser à tout) :
  - Le champ est-il bien un champ de « texte dynamique » ?
  - Le nom d’occurrence du champ est-il bien le même que dans le code ?
  - la couleur du texte n’est-elle pas la même que la couleur du fond ? (on ne sais jamais )
  - Si ton code est : preload.texteChargement.text = pourcentage+” %”;
  soit sûr(e) que ton champ de texte se trouve bien dans un clip ayant pour nom d’occurrence preload
  - À la fin du code il faut bien mettre .text = , et non .texte = Si le code est bon, text doit être affiché en bleu.
  – Assures-toi que la largeur de ton champ de texte permet d’affiche tout ton texte
  
  Voilà en gros je pense que toutes les petites erreurs possibles sont là, si malgré tout ça ne règle pas ton problème, il faudrait que je puisse voir ton fichier (tu peux me l’envoyer par mail ou sur le forum si tu préfère).
  
  À bientôt.
Miz Air ® dit :

23 février 2009 à 0:29

Ok je t’envoie un mail alors parce que je suis perdu :s …

Répondre
jilham dit :

23 février 2009 à 18:20

Merci beaucoup pour cet excellent tutoriel! Excellent transfert de connaissance.
C’est avec plaisir que j’ai découvert ce tutoriel/cours où l’on s’arrête sur la méthodologie plutôt que sur du code à copier/coller… où l’on fait des choses sans savoir pourquoi!

Moi je te poserai pas de question, comme ça tu publiera plus vite le nouveau chapitre.

Bonne continuation

Répondre
- jilham dit :
  
  23 février 2009 à 18:49
  
  si au final, je vais poser une question…lol
  En fait j’ai flash CS4 et j’ai l’impression que la façon de faire une interpolation de mouvement à changer….
  je fais tout exactement comme le tutoriel le dit, pourtant il ne m’affiche pas la flèche de l’interpolation, à la place l’image clé se met en couleur bleu et le petit rectangle à droite de l’image clé disparait.
  J’ai également vu qu’il y avait un éditeur de mouvement, c’est peut être ça, mais c’est un peu trop compliqué pour moi et je ne sais pas vraiment où chercher pour trouver une solution à ce problème.
  Aurais-tu des échos du problème où est-ce que je suis aussi nul que ça? :p
- jilham dit :
  
  23 février 2009 à 18:57
  
  oups, j’ai pas réussi à supprimer mon dernier post…
  Donc en fait c’est bon je suis allé faire un tour sur le site d’adobe, pour ceux que ça intéresse
  http://tv.adobe.com/fr/#vi+f15278v1007
  ou ils expliquent comment CS4 gère les interpolations de mouvement par rapport à la dernière version de flash…
  désolé pour la pollution de mes interventions…
- admin dit :
  
  23 février 2009 à 20:18
  
  Y’a aucun souci tu ne pollue pas du tout puisque tu permet à tous ceux qui se posaient la question sans oser la poser de comprendre pourquoi ça ne fonctionne pas.
  
  Effectivement j’ai la version CS4 depuis peu et je n’ai pas encore pris le temps de regarder comment tout fonctionne (d’autant que je ne fait pas trop de flash en ce moment, et encore mois des animation ).
  
  Bref, l’éditeur de mouvement existait déjà dans une moindre mesure depuis la CS3 si mes souvenirs sont bon (il était alors accessibles via le panneau « Propriétés » et permettait de manipuler une courbe représentant l’interpolation afin de lui appliquer des effets de ralentissement ou de rebond comme on peux le faire grâce à la classe Tween).
  
  Là comme tu fait bien de nous le signaler, la méthode est complètement différente car flash dispose presque d’un sous-module réservé à l’animation (un peu à la manière d’After Effect pour ceux qui l’on déjà un peu manipulé).
  
  Du coup pour ceux qui se poserait la question, plus besoin de fait 2 images clefs, mais une seule que vous « rallongez » avec quelques images ([F5]) puis vous basculez sur « l’Editeur de mouvement » pour gérer l’animation de l’objet.
  
  Je pense qu’Adobe a mis en place ce nouveau procédé car il est bien plus puissant que l’ancien, et de plus, même s’il semble plus compliqué à prendre en main au début, il permet de mieux gérer l’animation d’un objet (surtout maintenant ue flash gère un peu de 3D, ce qui ajoute un axe supplémentaire pour toutes les tranformations…
  
  À l’occasion si ça intéresse du monde je peux envisager de faire un petit article là-dessus…
asmae dit :

4 mars 2009 à 8:22

j’aimerai vous remercier vivement pour cet excellent cours, c’est vraiment bien fait et bien expliqué, j’attends vivement la suite…mais comme c’est urgent pour moi et je dois créer un site pour mon doctorat, je me suis lançée un peu plus, mais j’ai quelques ennuis, surtout que de mauvaises surprises surviennent. par exemple, j’ai créé un menu avec un sous-menu vertical, tout marchait très bien, puis j’ai créé le contenu des différentes pages en tant que movie clips et j’ai utilisé l’option linkage et j’ai tout codé en as3, mais voilà que mon sous-menu s’affiche derrière la page, je n’arrive pas à résoudre le prb même si j’ai essayé de transférer le calque des boutons en dessus des autres…je ne sais pas quoi faire, est-ce qu’il n’y aurait pas de code magique par hasard?
surtout que je ne veux pas tout déplacer et tout recoder, j’ai plein de sous-menus et de sous-menus dans les sous-menus!
que faire?
et encore merci pour ce beau site et pour votre aide!
vivement la suite!

Répondre
- admin dit :
  
  4 mars 2009 à 19:35
  
  Merci à toi.
  
  Malheureusement il n’existe pas de solution à ton problème !
  
  Ah ah, j’t'ai bien eu là Mais si il y a une solution :
  
  Si j’ai bien compris donc tu utilise un addChild pour ajouter dynamiquement un clip déjà contenu dans ta bibliothèque, sur ta scène (c’est une des méthodes que j’utilise aussi pour le chapitre 5 actuellement en cours de rédaction).
  
  Je ne dispose pas des bons outils dans les commentaires pour te rédiger une réponse correcte donc j’ai reporté ta question dans le topic du cours sur le forum.
  Ma réponse est donc consultable à cette adresse.
jilham dit :

5 mars 2009 à 21:02

par contre serait-il possible de m’indiquer quel outil tu utilises pour l’affichage des vidéos/images. J’ai crée une carte interactive swf que je voudrais intégrer à mon site.swf.
Lorsque je l’affiche je voudrais avoir le même effet que ton affichage d’image.
Merci d’avance.

Ps: par contre je ne sais pas si je dois utiliser le forum ou si je peux le faire là, mais j’aimerai savoir quel est la stratégie pour charger un swf. Je vois plusieurs choix, mais je ne sais pas quels sont leurs avantages :
1) charger le swf dans la bibliotheque et l’intégrer au clip (je pense qu’on peut faire ça non?)
2) en chargeant un swf externe via loadMovieClip

Répondre
- admin dit :
  
  6 mars 2009 à 0:20
  
  Il n’y a pas vraiment de règle pour poser une question. Personnellement je préfère utiliser le forum lorsque je rédige une réponse dans laquelle je dois détailler mon propos avec des exemples de code (ou des images) car le forum possède plus d’options de mise en page du texte (et la possibilité d’ajouter un minimum de contenu) que les commentairesn du blog.
  
  Pour ce qui est de charger une image, tout dépend de la version d’ActionScript avec laquelle tu travaille, étant donné que l’AS2 et l’AS3 n’ont pas toujours les mêmes méthodes.
  Pour l’AS2 je te conseil de regarder su côté de la classe MovieClipLoader (plus complète que loadMoveClip car elle permet de récupérer des infos comme l’état de chargement entre autre : utilise parfois si tu souhaite afficher une animation de progression par exemple).
  Pour l’AS3 ce sera plutôt la classe Loader.
  
  Quelque soit la méthode (suivante la verion d’AS), elle fonctionne aussi bien sur une image qu’un SWF.
  
  Le chapitre 5 présentera un exemple de l’utilisation de ces 2 méthodes pour charger des images (je suis en train de le terminer, il devrait être en ligne dans un peu plus d’une semaine si j’avance suffisement bien).
  
  En revanche les vidéos ne sont pas traitées comme les images et nécessite soit l’utilisation d’un composant FLVPlayback de flash, soit le développement d’un player complet. Ensuite, dans un cas comme dans l’autre il faut charger le fichier FLV dans le player.
  
  Enfin concernant ta carte intéractive, s’il elle est déjà « compilée » sous la forme d’un SWF, alors je ne vois pas tellement l’interêt de la placer dans la bibliothèque d’un autre swf pour la charger sur la scène depuis la bibliothèque (ça alourdira le fichier final en cumulant le poids des 2 fichiers et ça n’apporte rien). Autant le charger depuis l’exterieur avec la même méthode que pour charger une image.
  
  Je préfère réserver l’appel d’un clip présent dans la bibliothèque à des utilisations plus spécifiques comme lorsqu’un clip (présent dans la bibliothèque), sert de modèle à plusieurs clips qui seront placés sur la scène dynamiquement. Ce qui sera également abordé dans le chapitre 5.
  
  Voilà, j’espère avoir répondu à tes questions.
  
  P.S. : « par contre serait-il possible de m’indiquer quel outil tu utilises pour l’affichage des vidéos/images. »
  -> Si tu fait référence aux images et vidéos présent dans les cours ça n’a rien à vois avec flash, j’utilise un plugin wordpress basé sur Shadowbox
  C’est un fichier JS qui permet de charger différents contenus (images, pages HTML, vidéos FLV (via player fournit)) dans uen iframe.
- jilham dit :
  
  6 mars 2009 à 14:12
  
  Merci pour ta réponse.
  Je voulais juste savoir également une chose :
  1) Je veux faire un enable sur un bouton se trouvant sur le clip parent. Comment je peux faire pour avoir accès à l’occurence de ce bouton sans utiliser le fameux _root? genre getParent() –> un appel relatif au clip parent ça existe?
  
  ps: la dès que j’ai fini mon site, j’aimerai bien te transmettre les fichiers sources pour me dire ce que j’aurai pu faire pour optimiser la méthodologie/logique de développement. Je pense que ça pourrait être utile pour agrémenter ton tutoriel d’automatismes à adopter pour les débutants flash (genre bien concevoir le clip pour pouvoir l’ activer ou le désactiver dans le cas de superposition de clips..etc.).
- jilham dit :
  
  6 mars 2009 à 14:39
  
  Je fais suite à mon dernier post.
  En regardant de plus près il semble que ce soit plus compliqué que je pensai pour faire appel à des fonctions dynamiques du clip parent. ils semble qu’il y ait besoin de faire une transformation de type du displayObject en MovieClip…
  genre : MovieClip(parent).maFunction(); (enfin pour ma part ça n’a pas marché, je vais voir si je me suis pas planté quelque part…)
  
  Sinon je vais essayer d’approfondir le fait de développer directement à partir d’un fichier AS. Je pense que c’est beaucoup plus optimisé que développer à partir du scenario, du moins pour tout les objets/fonctions de type global c’est à dire manipulé par différents clips.
  Si je vois que c’est concluant, je pourrai te faire un check up de mes différents tests. ça sera peut être plus facile pour moi, vu que j’ai une formation de type développeur objet même si c’est pas en actionScript. (j’ai commencé à m’intéresser à flash/actionscript y a seulement 2 semaines donc je suis pas encore familiarisé avec les librairies..)
  Merci encore à toi pour ce tutoriel, il m’a fait gagné beaucoup de temps
- admin dit :
  
  7 mars 2009 à 18:37
  
  Je ne suis pas chez moi ce week-end mais j’ai bien vu tes 2 messages.
  Je regarde tous ces points en rentrant et j’essaie de te répondre rapidement.
  
  Concernant le codage dans un fichier AS externe, effectivement c’est préférable si tes différents swf doivent pouvoir accéder à des variables globales (et de toute manière c’est une façon de travailler bien plus pro et complète). Cependant si je n’ai pas problème à travailler avec des classe (POO) en PHP, les modifications de syntaxe et d’appel me posent pour l’instant plus de problème donc je ne préfère pas vous présenter cette méthode tant que je ne la maîtrise aps moi-même (au rsique de vous dire des bêtises).
- admin dit :
  
  10 mars 2009 à 20:27
  
  Je reviens vers toi concernant ta question :
  
  « 1) Je veux faire un enable sur un bouton se trouvant sur le clip parent. Comment je peux faire pour avoir accès à l’occurence de ce bouton sans utiliser le fameux _root? genre getParent() –> un appel relatif au clip parent ça existe? »
  
  Pas d’appel au parent depuis un enfant en AS3. Je ne sais pas si c’est faisable (je crois que non mais je ne voudrais pas trop m’avancer) mais c’est une mauvaise idée à mon avis car ça va un peu à l’encontre de la logique de l’ActionScript (depuis l’AS2 et plus encore avec l’AS3) qui préconise, à défaut de placer son code dans un fichier externe, de centraliser son code le plus possible au sommet de la hiérarchie des clips :
  Mieux vaut déclarer une action sur un bouton en le ciblant depuis la racine vers l’intérieur que déclancher une action depuis l’intétrieur sur des éléments plus haut dans le hiérarchie.
  
  Pour ma part j’ai malheureusement fait un peu ça aussi ( »éparpiller » mon code) pour le chapitre 5, (pour des raisons de simplicité), mais je pense que je rajouterai un chapitre supplémentaire une fois le site terminé pour apporter quelques précisions quand à ce qui peut être amélioré dans l’exemple que j’aurai présenté tout au long du cours (toujours dans l’optique d’y aller par palier, et d’améliorer sa pratique une fois que l’on a déjà assimilé un certain nombre de choses).
  
  Pour ce qui est de me faire passer ton code une fois terminé pour voir s’il peut être optimisé, je n’y vois pas d’inconvénient (dans la limite de mes capacités bien entendu, je ne sais pas tout en AS, loin de là).
Manydia dit :

12 mars 2009 à 12:54

Bonjour,
C’est seulement pour savoir où en est la rédaction du chapitre 5.
Merci d’avance

Répondre
admin dit :

12 mars 2009 à 13:31

Je n’ai malheureusement pas pu avancer comme j’aurais voulu (d’où le « retard »), mais je travaille dessus actuellement (tous les soirs).

J’espère le mettre en ligne ce week-end (dans le meilleur des cas).

Répondre
Fred dit :

17 mai 2009 à 15:09

Bonjour, d’une part exelente initiative que d’expliquer de cette manière Flash.
Travail énorme et rien à redire. C’est parfait.
Par contre j’ai une question concernant le preload.
Dans votre cas il s’agit de faire un preload d’une animation chargée?
Car je souhaiterais savoir si il existe un méthode pour charger une animation principale ainsi que les swf externes que celle-ci doit gérer. Soit comment charger directement un site complet?

Merci d’avance et bonne continuation.

Répondre
- admin dit :
  
  18 mai 2009 à 18:38
  
  Bonjour, et merci pour les compliments…
  
  C’est une très bonne question !
  Pour ma part je n’ai pas encore eu à le faire donc je n’ai malheureusement pas de solution toute faite (je ne sais pas tout faire malheureusement ).
  
  Cependant j’ai peut-être une hypothèse : le XML !
  Je pense qu’il peut être envisageable de créer un fichier XML qui référence les fichiers à charger (dans l’ordre). Ainsi la première chose à faire et de charger le XML (il ne devrait pas être très lourd vu le peu d’informations qu’il va contenir), puis faire une boucle qui lance un nouveau chargement pour chaque fichier.
  
  Ce qui permettrait d’une part de dire à l’internaute la partie en cours de chargement (pour ça il suffit d’ajouter un attribut « titre » à chaque balise du fichier XML par exemple).
  
  etc, etc…
  
  Cependant il ne s’agit là que d’une hypothèse puisque je ne l’ai pas expérimenté moi-même.
  À expérimenter donc…
stephane dit :

21 mai 2009 à 11:42

Bonjour,

me revoici coincé, il se trouve que j’ai fais une variante du tuto, car je n’ai qu’ un seul sous menu.Donc dans le code, j’ai supprimé tout ce qui touchais au sous menu2, mais pas tout apparement…il se trouve que j’ai un probleme avec la fonction TweenEvent ( »1046: Type was not found or was not a compile-time constant: TweenEvent.)…
peut tu m’expliquer s’il te pait…

Répondre
- admin dit :
  
  22 mai 2009 à 9:13
  
  Je me demande si en fait tu n’en as pas trop supprimé
  
  Il semble qu’il y ai un souci au niveau du TweenEvent.
  
  Dans le code d’exemple, 2 fonctions ettandent un TweenEvent comme argument lorsqu’elles sont déclenchées :
  
  sousMenuNo(); et sousMenuYes();
  
  C’est à dire que ces fonction, pour se lancer, doivent :
  - être appelées à la suite d’un événement de type Tween (onComplete par exemple).
  
  Ces événements sont fournis par les fonctions :
  masqueSousMenu(); et montreSousMenu();
  
  Au niveau des dernières lignes.
  
  Sans voir ton code je ne peux malheureusement pas t’en dire beaucoup plus, si ce n’est de vérifier que tu n’as pas supprimer une de ses fonctions…
philo64 dit :

25 mai 2009 à 17:00

Bonjour, J’ai un souci. je ne sais pas d’ou ça viens, mais l’animation ne donne rien.

TypeError: Error #1010: Un terme n’est pas défini et n’a pas de propriété.
at Interfacev3_fla::MC_INTERFACE_1/initSousMenu()
at Interfacev3_fla::MC_INTERFACE_1/afficheSousMenu()
TypeError: Error #1010: Un terme n’est pas défini et n’a pas de propriété.
at Interfacev3_fla::MC_INTERFACE_1/initSousMenu()
at Interfacev3_fla::MC_INTERFACE_1/afficheSousMenu()

Merci pour vos commentaires

Philippe

Répondre
- admin dit :
  
  25 mai 2009 à 17:39
  
  Bonjour,
  
  Il s’agit d’un problème avec les noms d’occurrence(s).
  
  Certaines occurrences appelées dans le code ne sont pas présentent sur la scène OU n’ont pas de nom d’occurrence correspondant à celui recherché par le code.
  
  Par exemple lorsque dans la fonction afficheSousMenu(); , nous faisons référence à l’élément :
  menuBas.bPortfolio
  
  Il s’agit d’un clip portant le nom d’occurrence bPortfolio qui se trouve DANS un clip portant lui-même le nom d’occurrence menuBas.
  
  Il ne s’agit pas du nom de l’objet dans la bibliothèque de flash, mais bien du nom d’occurrence affecté à l’une de ses occurrences (ou à son occurrence s’il n’y en a qu’une) présente sur la scène (définissable via la palette « Propriétés » lorsque l’occurrence est sélectionnée sur la scène.
  
  Donc il faut vérifier que toutes les occurrences ont bien les même noms d’occurrences que ceux présents dans le code (à bien vérifier donc s’ils sont différents de ceux de mon exemple) :
  
  Par exemple si au lieu d’avoir, comme moi, un bouton bPortfolio, le votre se nomme bGalerie, il faut bien vérifier que l’occurrence en question porte bien se nom là (palette « Propriétés« ), et que toutes les références à cette même occurrence ont bien la même syntaxe dans le code.
philo64 dit :

26 mai 2009 à 15:22

REbonsoir, ça commence à marcher, mais mon sousmenu du premier bouton est à moitié découvert il manque la partie gauche et les textes correspondants. ne serait ce pas dans les parametre de tween :

var translationSousMenu:Tween = new Tween(menuBas.sousMenu, « y », Strong.easeOut, menuBas.sousMenu.y, -70, 0.5, true);
le « y »mais comment cela se passe? Merci pour votre patience, puisje vous envoyer le fichier? Merci

Répondre
- admin dit :
  
  27 mai 2009 à 18:04
  
  Bonsoir,
  
  J’ai regardé votre fichier (reçue par mail) et si votre sous-menu s’affiche en décalé sur la gauche, c’est tout simplement parce que le point de référence du clip MC_SOUSMENU est placé en haut au centre de l’objet. Alors que dans mon exemple il est placé en haut à gauche.
  
  Donc le souci se situe plutôt dans la fonction intiSousMenu(); au moment où l’on définit la position du clip sur l’axe des X (horizontalement).
  Il faut tout simplement décaler le clip de la moitié de sa longueur (donc on ajoute la moitier de sa longueur).
  
  Par exemple pour le premier cas, la ligne :
  
  menuBas.sousMenu.x = menuBas.bMonprofil.x – (menuBas.bMonprofil.width/2);
  
  Devient quelque chose du genre :
  
  menuBas.sousMenu.x = menuBas.bMonprofil.x – (menuBas.bMonprofil.width/2) + (menuBas.width/2);
Jérôme dit :

22 juillet 2009 à 18:45

Félicitations !

Et merci beaucoup pour tes tutoriels ça aide beaucoup de gens je pense et surtout moi …

Encore merci.

Répondre
Pasthell dit :

6 septembre 2009 à 14:27

Bonjour,

Je test pour l’instant la partie en AS1 donc avec le code sur le bouton même et ai quelques difficultés… J’ai réalisé un seul sousMenu et le code, sur mon bouton Creations, est assez simple :

on (release) {
sousMenu1.play(); }

Mon sous-menu s’affiche et se retire quand je clique à nouveau sur le bouton mais 4 erreurs s’affichent :

impossible de charger la classe ou l’interface ‘MouseEvent’ (x2, à 2 endroit différents)
impossible de charger la classe ou l’interface ‘Tween’ (x2, à 2 endroits différents)

Est-ce-que tu saurais par hasard d’où pourrait venir le problème?

Merci d’avance et bravo pour ces tutos qui, bien expliqués, doivent te prendre pas mal de temps à réaliser

Répondre
- admin dit :
  
  6 septembre 2009 à 18:07
  
  Bonjour,
  
  Ton code est correct et n’est pas en cause ici (du moins celui que tu post ici).
  
  Le proviens du fait que tu semble avoir placer du code des méthodes 2 et 3 dans le code de la méthode 1.
  En effet, ni la classe Tween, ni les MouseEvent ne sont utilisés dans la méthode 1. Je t’invite donc à vérifier tout ton fichier à la recherche de portions de codes contenant ces notations et à les supprimer.
  
  P.S. : Je confirme que ça prend un peu de temps
Pasthell dit :

7 septembre 2009 à 21:54

Re-bonjour et merci pour ta réponse – on ne peut plus – rapide.
Je n’ai pas encore trouvé les codes en trop …mais je fais des fouilles!
A plus!

Répondre
Anko dit :

8 septembre 2009 à 7:47

Bonjour, tout d’abord, merci à toi de consacrer un peut de ton temps pour faire ces tutoriels, ça fait un moment que je cher des cours pour apprendre à faire un site en flash (parce que le html c’est bien, mais c’est un peut trop statique à mon gout)
Ensuite je rencontre quelque petits soucis avec mon code, et je ne vois pas comment les régler :
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 76 1180: Appel à une méthode qui ne semble pas définie, masqueSousMenu. masqueSousMenu();
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 83 1180: Appel à une méthode qui ne semble pas définie, masqueSousMenu. masqueSousMenu();

Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 88 1180: Appel à une méthode qui ne semble pas définie, masqueSousMenu. masqueSousMenu();
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 106 1120: Accès à la propriété non définie choix. if (choix == 2) {
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 113 1119: Accès à la propriété onMotionFinished peut-être non définie, via la référence de type static fl.transitions:Tween. translationSousMenu.onMotionFinished = function() {
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 119 1180: Appel à une méthode qui ne semble pas définie, checkSousMenu. checkSousMenu(1);
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 120 1120: Accès à la propriété non définie positionCurseur. positionCurseur = this._x;
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 124 1180: Appel à une méthode qui ne semble pas définie, checkSousMenu. checkSousMenu(2);
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 125 1120: Accès à la propriété non définie positionCurseur. positionCurseur = this._x;
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 129 1180: Appel à une méthode qui ne semble pas définie, checkSousMenu. checkSousMenu(0);
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 130 1120: Accès à la propriété non définie positionCurseur. positionCurseur = this._x;
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 134 1180: Appel à une méthode qui ne semble pas définie, checkSousMenu. checkSousMenu(0);
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 135 1120: Accès à la propriété non définie positionCurseur. positionCurseur = this._x;
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 139 1180: Appel à une méthode qui ne semble pas définie, checkSousMenu. checkSousMenu(0);
Symbole ‘MC_INTERFACE, Calque ‘CODE’, Image 1, ligne 140 1120: Accès à la propriété non définie positionCurseur. positionCurseur = this._x;
Est-ce-que par tu aurai une idée?

Répondre
admin dit :

8 septembre 2009 à 18:28

Oui j’ai une idée :

En fait flash te demande juste de déclarer les fonctions que tu appel, ainsi que les variables utilisées.

La cause de ceci peut-être :

1 – tu as tout simplement oublié de placer les propriétés et fonctions dans ton code, donc flash ne peut pas les trouver.

2 – tu as renommé les variables et fonctions pour que les noms correspondent mieux à tes besoin (ton projet), mais tu n’a pas mis à jour les noms dans les actions/écouteurs des boutons.

3 – Enfin il est possible que les fonctions soient placées après leurs codes d’appel, du coup flash cherche une fonction qu’il n’a pas encore déclarée.

Il faut savoir que Flash lie le code (et l’exécute) dans l’ordre des lignes, de haut en bas (et de gauche à droite si vous éparpillez votre code sur plusieurs images clefs). De ce fait il est possible que si l’appel d’une fois est écrit avant la fonction elle-même, Flash ne comprenne pas de quelle fonction/variable vous lui parlez.

C’est pour ça que dans mon code j’essaie toujours de conserver l’ordre suivant :

- 1 – initialisation (chargement des classes et déclaration des variables) – 2 – fonction (on écrit toutes les fonctions) – 3 – actions des boutons/écouteurs (qui déclenchent les fonctions et se serve des variables).

Voilà, au pire si le souci persiste, envoi moi ton fla par mail et j’y jetterai un cou d’œil si tu veux.

P.S. :

« parce que le html c’est bien, mais c’est un peut trop statique à mon gout »

Je ne suis pas totalement d’accord avec toi. Aujourd’hui il existe de très bons frameworks JavaScript (jQuery, Mootools, Prototype, …) étendus par des tas de plugins qui, couplés au HTML, permettent de faire des sites « dynamiques » (au sens d’animés), sans flash.

Après le must c’est PHP/JavaScript/Flash, mais là ça commence à filer des petits maux de crâne au début

Répondre
Anko dit :

9 septembre 2009 à 10:45

Merci pour tes précieux conseils, sinon comment je fais pour t’envoyer mon fla ^_^ »

Répondre
admin dit :

9 septembre 2009 à 12:36

Tu la compresse dans un .zip ou un .rar, puis tu me l’envoi à l’adresse dans le footer du site :

boris@explain-me.com

Répondre
Muktaditi dit :

30 septembre 2009 à 9:19

bonjour, et tout d’abord un grand merci pour ce tuto..
dand mon projet, le menu est positionné verticalement a gauche.. je n’ais pas eu de soucis pour le curseur, mais je n’arrive pas a positionner le sous menu… il se cache derrière le menu (en dessous quoi) et apparait au clic, comme sur le tuto…
c’est en fait ces 3 lignes que je ne capte pas:
menuBas.sousMenu.x = menuBas.bPortfolio.x – (menuBas.bPortfolio.width/2);
est ce que ça veut dire que la coordonnée x de sous menu = la coordonnée x de potfolio -la demi largeur du bouton ?

si oui,

Répondre
Muktaditi dit :

30 septembre 2009 à 9:27

pardon, j’ai validé… je continu..
dans mon cas, le sous menu se déplace uniquement sur l’axe x, et au même endroit…
var translationSousMenu:Tween = new Tween(menuBas.sousMenu, « y », Strong.easeOut, menuBas.sousMenu.y, -35, 0.5, true);
translationSousMenu.addEventListener(TweenEvent.MOTION_FINISH, sousMenuNo);

ici, a quoi correspondent -35, 0.5 ? j’avoue que je suis perdue pour adapter

Répondre
- admin dit :
  
  12 octobre 2009 à 21:00
  
  Bonjour,
  
  Une petite traduction pour commencer :
  
  menuBas.sousMenu.x = menuBas.bPortfolio.x – (menuBas.bPortfolio.width/2);
  
  Ce qui signifie en français :
  
  La position de l’objet sousMenu (contenu dans menuBas : rapport à l’emplacement du code), sur l’axe des X est égale à la position sur l’axe des X de l’objet bPortfolio (aussi dans menuBas), moins la moitié de sa longueur (ceci étant due au fait que j’ai créé les boutons en plaçant leur point d’origine en leur centre, si ce point d’origine avait été le coin supérieur gauche, nous n’aurions pas mis le « – (menuBas.bPortfolio.width/2) » puisque nous étions déjà bien positionnés.
  
  Petite explication sur l’animation Tween à présent :
  
  var TranslationSousMenu : Tween = new Tween(…);
  
  ça c’est juste la déclaration d’une nouvelle variable qui sera de type Tween, donc permettra de réaliser une animation, suivant toutes les propriétés qui seront indiquées entre les parenthèses.
  
  Pour les propriétés maintenant (dans l’ordre) :
  
  menuBas.sousMenu
  C’est l’objet que nous allons animé
  
  « y »
  Nous l’animerons sur l’axe des Y.
  
  Strong.easeOut
  C’est la méthode d’animation : ici il s’agit d’une méthode Strong , avec un ralentissement vers la fin (easeOut) : voir la doc de flash pour plus d’infos sur toutes les méthodes et variantes possibles (si j’ai le temps je ferait un petit texte ou une fiche PDF là-dessus).
  
  menuBas.sousMenu.y
  C’est la position de départ de l’animation. Nous pourrions très bien y placer un chiffre, mais ici j’ai préféré partir de sa position actuelle sur l’axe des Y évidement puisque c’est sur cet axe que l’animation se déroule (récupérer sa propriété sur l’axe des X aurait odnc été absurde).
  
  -35
  C’est la position d’arrivée. Ici elle a été déterminée par la hauteur de mon menu principale (derrière lequel est caché mon sous-menu). De plus la valeur est négative car l’axe des Y dans flash, est orienté vers le bas, donc pour remonter, il faut donner une valeur négative.
  En gros l’objet se déplacera de sa position au moment où débute l’animation moins 35 pixels vers le haut.
  
  0.5
  C’est la durée de l’animation, exprimée en seconde(s). Donc ici l’animation durera 1/2 seconde.
  
  true
  C’est un réglage qui permet justement de lire la propriété précédente en secondes. Si cette valeur vaut false, alors la durée sera lue par Flash comme des images et non des secondes.
  
  Donc dans ton cas, si le sous-menu ne doit se déplacer que sur l’axe des X, il te faut modifier toutes les références à l’axe des Y par des références à l’axe des X, de plus la valeur d’arriver doit être positive, car l’axe des X dans flash est orienté de la gauche vers la droite, donc si tu laisse une valeur négative, ton sous-menue s’animera, mais vers la gauche, docn hors-champ.
  
  J’espère avoir été clair et avoir sue dissiper tes doutes. Si besoin n’hésite pas à poser d’autres questions.
Muktaditi dit :

19 octobre 2009 à 8:26

Merci beaucoup pour ta réponse, en l’attendant j’ai cherché par moi même et je suis contente de constater que j’avais donc bien compris… j’ai donc avancé et voici mon code :
//
//——————————————— Initialisations —//
//
//
//— Importation de la class Tween —
//
import fl.transitions.*;
import fl.transitions.easing.*;
//
//— Position initiale du curseur —
//
var posInitCurseur:Number = menuGauche.curseur.y;
//
//——————————————- Animation du menu —//
//
//
//— Fonction deplaceCurseur —
//
function deplaceCurseur(event:MouseEvent) {
var translationCurseur:Tween = new Tween(menuGauche.curseur, « y », Strong.easeOut, menuGauche.curseur.y, event.currentTarget.y
, 1, true);
}
//
//— Fonction initCurseur —
//
function initCurseur(event:MouseEvent) {
var translationCurseur:Tween = new Tween(menuGauche.curseur, « y », Strong.easeOut, menuGauche.curseur.y, posInitCurseur, 1, true);
}
//

var etatSousMenu:Boolean = false;
var sousMenuSelectionne:Number = 0;

//
//— Fonction afficheSousMenu —
//
function afficheSousMenu(event:MouseEvent) {
posInitCurseur = event.currentTarget.x;
if (event.currentTarget == menuGauche.btPortfolio) {
sousMenuSelectionne = 1;
if (etatSousMenu == false) {
initSousMenu();
} else {
masqueSousMenu();
}
} else if (event.currentTarget == menuGauche.btArcherie) {
sousMenuSelectionne = 2;
if (etatSousMenu == false) {
initSousMenu();
} else {
masqueSousMenu();
}
} else if (event.currentTarget == menuGauche.btMagie) {
sousMenuSelectionne = 3;
if (etatSousMenu == false) {
initSousMenu();
} else {
masqueSousMenu();
}
} else {
if (etatSousMenu == true) {
sousMenuSelectionne = 0;
masqueSousMenu();
}
}
}
//
//— Fonction initSousMenu —
//
function initSousMenu() {
//— sous-menu 1 —
if (sousMenuSelectionne == 1) {
menuGauche.sousMenu.y = menuGauche.btPortfolio.y +70;
menuGauche.sousMenu.textebt1.text = « Qui suis-je »;
menuGauche.sousMenu.textebt2.text = « D’où je viens »;
menuGauche.sousMenu.textebt3.text = « Où je vais »;
}
//— sous-menu 2 —
if (sousMenuSelectionne == 2) {
menuGauche.sousMenu.y = menuGauche.btPortfolio.y +70;
menuGauche.sousMenu.textebt1.text = « blabla »;
menuGauche.sousMenu.textebt2.text = « blibli »;
menuGauche.sousMenu.textebt3.text = « bloblo »;
}
//— sous-menu 3 —
if (sousMenuSelectionne == 3) {
menuGauche.sousMenu.y = menuGauche.btPortfolio.y +70;
menuGauche.sousMenu.textebt1.text = « papa »;
menuGauche.sousMenu.textebt2.text = « pipi »;
menuGauche.sousMenu.textebt3.text = « popo »;
}
montreSousMenu();
}
//
//— Fonction masqueSousMenu —
//
function masqueSousMenu() {
var translationSousMenu:Tween = new Tween(menuGauche.sousMenu, « x », Strong.easeOut, menuGauche.sousMenu.x, 250, 1, true);
translationSousMenu.addEventListener(TweenEvent.MOTION_FINISH, sousMenuNo);
}
//
//— Fonction montreSousMenu —
//
function montreSousMenu() {
var translationSousMenu:Tween = new Tween(menuGauche.sousMenu, « x », Strong.easeOut, menuGauche.sousMenu.x, 400, 1, 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;
}

//—————————————– Actions des boutons —//
//
//
//— btPortfolio —
//
this.menuGauche.btPortfolio.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuGauche.btPortfolio.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuGauche.btPortfolio.addEventListener(MouseEvent.CLICK, afficheSousMenu);

//
//— btArcherie —
//
this.menuGauche.btArcherie.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuGauche.btArcherie.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuGauche.btArcherie.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//— btMagie —
//
this.menuGauche.btMagie.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuGauche.btMagie.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuGauche.btMagie.addEventListener(MouseEvent.CLICK, afficheSousMenu);
cela fonctionne très bien a ceci près que lorsqu’ après avoir cliqué sur un bouton du menu et déplacé ma souris le curseur disparait vers le bas… je cherche comment le faire se déplacer vers les boutons du sous menu en rollover, comme pour le menu…

Répondre
- admin dit :
  
  19 octobre 2009 à 20:01
  
  Très bien.
  
  En revanche je ne vois pas de code en rapport avec ce que tu souhaite rajouter :
  
  le même curseur sur le sous-menu.
  Sûrement ne l’as tu pas mis avec le code initial.
  
  Pour faire ce que tu souhaite, je vois 2 solutions :
  
  1 – tu créé un second curseur dans le sous-menu que tu manipule comme le premier, mais avec les boutons du sous-menu.
  
  2 – tu modifie tes fonction pour qu’elles inclue un test pour évaluer quelle série de bouton est survolée (bouton du menu ou bouton du sous-menu), afin de modifier la position du curseur sur X en fonction de la série de bouton.
  
  Je te laisse chercher un peu, si tu n’aboutis à rien, je te propose de déplacer le sujet vers le forum où nous aurons des outils plus complet pour dialoguer (couleur de typo, meilleur mise en page du code,…).
Muktaditi dit :

20 octobre 2009 à 7:24

merci beaucoup, comme tu as pu le voir, je débute, mon expérience se borne à celle-ci, et j’ai l’impression d’apprendre à l’envers…
Bien que tes explications et vidéos soient franchement très clair, je passe du temps a « décoder », (j’ai pas les bases) Je fais ma formation seule,mais sans réelle pédagogie, grâce à des « professeurs » tel que toi , , et j’avoue que je patauge…
Si tu veux bien m’aider à avancer, je serrai vraiment ravie d’être ton « élève »
Des questions je vais en avoir des tas, j’ai plein d’idées,
Pour déplacer le sujet dans le forum, faut il que j’y crée un nouveau sujet ??

Répondre
- admin dit :
  
  20 octobre 2009 à 23:09
  
  Tant mieux si tu as des questions, c’est en étant curieux que l’on progresse. Surtout dans se genre de discipline où les technologies évoluent continuellement, pour ma part, comme tout le monde, j’en apprend tous les jours (pas uniquement sur flash d’ailleurs, ) et c’est principalement ce que j’aime dans mon métier.
  
  Par contre je en comprends pas trop quand tu dit : « … j’ai l’impression d’apprendre à l’envers… »
  
  Dans le premier chapitre justement j’ai voulu débuter par le logiciel lui-même avant d’attaquer quoi que ce soit. Cela dit Flash ne deviens concret que lorsque l’on commence à mettre les mains dedans.
  
  De toute façon si tu as (toi ou quelqu’un d’autre d’ailleurs), la moindre question, même s’il te semble que ça porte sur quelque chose d’insignifiant ou une base quelconque, n’hésite pas, si j’en suis capable, j’essaierai d’y répondre du mieux possible. à mon sens, il ne faut surtout pas faire quelque chose que l’on ne comprend pas car ça ne pourra pas resservir, donc c’est presque du temps de « perdu ». S’il faut ré-expliquer 10 fois ce n’est pas du temps de perdu, mais du temps consacré à trouver une formulation qui corresponde à la manière dont la personne comprend les choses… Nous ne voyons pas tous les choses de la même façon et il serait utopique de croire que chacun comprend tout comme son voisin (même si notre système scolaire repose sur ce postulat.. Mais je comprends aussi la difficulté de mise en place à grande échelle).
  
  Pour déplacer le sujet sur le forum, soit tu post une question sur le topic de l’article (automatiquement créé lors de la publication du cours), soit, si tu considère que le sujet sort un peu du contexte du cours, tu peux créer un nouveau sujet sans souci.
  
  En revanche je suis en train de changer d’hébergeur pour augmenter les capacités et permettre le développement du site, donc si tu peux patienter jusqu’à la semaine prochaine (je pense que je fait finaliser le transfert d’ici à la fin de la semaine).Comme ça il n’y aura pas de perte de données.
  
  Je vais créer un article pour tenir tout le monde au courant de toute façon pour ça.
Muktaditi dit :

21 octobre 2009 à 7:52

J’attendrai donc la semaine prochaine, ce qui me permettra de « préparer » mes questions…
Concernant flash, je connaissais déja, mais dans son utilisation la plus simple, sans code (ou presque) j’avais fais ceci pour une asso de court métrages dans laquelle j’étais active :
http://img232.imageshack.us/my.....iteoc2.swf
mais j’ai vite été limitée par le poids et mes connaissances du codage ( il y a 2 ans..)
Ce sentiment d’apprendre à l’envers tient au fait que je travail sur du « construit » que je « démonte » pour comprendre comment c’est construit…
La manière traditionnelle d’apprendre un langage passe par l’apprentissage des « mots » puis la construction des phrases et des règles du langage… Je travail a la Champollion, je « décrypte », décortique chaque phrase et remplie mon carnet de « mots » et de règles au fur et à mesure ; ce qui ,bien évidemment, est source d’erreur et de mauvaises interprétations…
S’il faut ré-expliquer 10 fois ce n’est pas du temps de perdu, mais du temps consacré à trouver une formulation qui corresponde à la manière dont la personne comprend les choses…
Merci beaucoup , si le monde enseignant portait en son sein des gens tels que toi la passion ne disparaitrai pas au profit du besoin de « gagner » sa vie.

Répondre
- admin dit :
  
  21 octobre 2009 à 19:50
  
  Pas mal pour une première expérience. Et puis il faut bien commencer quelque part, mes premiers fichiers flash me fond bien rire aujourd’hui, et c’est normal.
  
  Pour le fait d’apprendre en « déconstruisant » du code existant, c’est à mon sens une étape inévitable :
  Certes il faut que la syntaxe de base soit expliquée, mais sans cas pratique, elle reste théorique et sans saveur. Et quel que soit le langage, il faut en passer par là de toute façon à un moment donnée donc ce n’est pas un mal. Là où ça devient prise de tête, et là je te rejoins, c’est quand on doit explorer le code seul(e), sans explications, car ça peut vite devenir générateur de migraines (et suivant la « qualité de rédaction du code »ça peut être pire encore…).
  
  En revanche il y a une caractéristique de flash qui rend son apprentissage un poil plus difficile je trouve (c’est mon avis) :
  Avant de faire du « full code » (construction de l’interface dynamiquement grâce au code), il faut inévitablement passer par la méthode que j’utilise et dont je me sert dans le cours. à savoir un côté « graphique » et un côté « code » qui sont liés (le côté graphique étant représenté par les clips et tous les objets dessinées grâce aux outils de flash et non du code).
  
  Du coup on doit constamment faire le va-et-vient entre les occurrences et le code pour s’assurer de ne pas avoir commis d’impaire… Au début c’est un vraiment casse-tête, surtout si l’on a du mal à saisir les notions d’objet, occurrence, ciblage, etc… qui sont loin d’être évidentes au premier abord.
  
  Pour ce qui est de l’enseignement, merci beaucoup pour le compliment, mais je dois dire que j’ai le beau rôle :
  Assis tranquillement chez moi et travaillant à mon rythme, je gère mon temps comme bon me semble et n’est presque pas de contraintes. Et même si je te rejoins sur la passion, je reste persuadé que bon nombre d’enseignant(es), passionné(e)s à l’origine, finissent par se résigner, écrasé(e)s par le poids d’un système qui à mon sens, à un réel besoin d’être repensé.
  
  Cependant je n’ai certainement pas toutes les données du problème donc je me garderai bien de donner des conseils à des gens certainement plus qualifiés que moi pour analyser la situation. Pour autant le sujet reste très intéressant et si quelqu’un veut lancer un débat sur la question, le forum est aussi là pour ça (d’ici la semaine prochaine ).
Muktaditi dit :

22 octobre 2009 à 6:45

j’ai trouvé un truc utile pour vérifier les erreurs avec les noms des objets:
je lance mon anim par ctrl/entrée, et je fais déboguer /lister les objets…ils se retrouvent dans la fenêtre sortie et c’est bien pratique…
Concernant l’enseignement, à mon grand regret, je ne peux qu’être d’accord avec toi…
A la semaine prochaine…

Répondre
- admin dit :
  
  22 octobre 2009 à 18:45
  
  J’avoue :/, je n’ai jamais utilisé toutes les options de flash, donc je ne connaissais pas cette technique. Merci pour l’info, je testerais et je l’ajouterais peut-être dans le dernier chapitre du cours qui comportera des annexes.