explainMe

Introduction |

Dans le précédent cours, nous avons délaissé notre fichier principal au profit de notre première sous-partie (portfolio). à cette occasion, nous avons pu manipuler un fichier XML afin de charger les données de manière dynamique.

Jusque-là tout va bien, si ce n’est que pour le moment, nous nous sommes contenté de manipuler nos 2 fichiers séparément. Or le but est tout de même au final, de charger Porfolio dans Interface (le fichier principal) et de pouvoir le manipuler grâce au menu, nous permettant ainsi de naviguer au sein de la section Portfolio, et d’en explorer les sous-parties.

L’objet de ce chapitre est donc de modifier nos 2 fichiers afin qu’ils puissent interagir l’un avec l’autre et réaliser nos vœux les plus fous (enfin presque).

Méthode 1 : minimum d’ActionScript |

Une fois de plus nous commencerons par la méthode la moins dynamique, mais la plus « simple ».

Vous vous souvenez certainement que pour cette version, nous  nous sommes cantonnés à réaliser non pas un fichier Porfolio en charge des 4 sous-parties (Graphisme/Multimédia/Synthèse/Sketch), mais 4 fichiers (Portfolio1, Portfolio2,… ou PortfolioGraphisme, PortfolioMultimédia,…) afin de limiter le plus possible l’utilisation de l’AS.

Ainsi il nous faudra charger un swf différent à chaque fois que nous souhaiterons visualiser une sous-partie. Cependant, cela ne sera pas trop un problème, la méthode restera la même à chaque fois.

Et pour être totalement honnête avec vous, nous avons déjà vu en partie ce que nous allons faire…

Mais qu’est-ce qu’y raconte encore ?!

Pour charger les sections dans le clip principal, il nous faut 2 « ingrédients » :

1. Le chargeur qui va, comme son nom l’indique, charger le swf de la section dans le swf principal.
2. Et l’animation de préchargement, qui va nous faire patienter si nous avons des fichiers relativement lourds à charger ou si notre FAI est « escargot.net » !

Et comme nous sommes feignants, la seconde partie nous allons la récupérer (vous voyez où je veux en venir ?).

Comme nous sommes sur la méthode avec le moins d’AS, nous allons directement placer une animation de préchargement dans chacun de nos fichiers de sections.

Mais c’est pas pratique on va devoir refaire la même chose pour chaque fichier ?! C’est nul !!!

Oui et non, en fait il s’agira juste de faire des copier/coller (à moins que vous ne souhaitiez faire une animation différente pour chaque fichier, ça vous regarde). En même temps cette section traite de comment faire le site avec le moins d’AS possible, donc faut pas venir se plaindre d’avoir plus de « manutention » à faire, c’est le prix à payer pour avoir moins de code ! (et en plus c’est plus chiant à maintenir* na !).

* En langage web, maintenir signifie mettre à jour et/ou faire évoluer un site.

Mais trêve de plaisanterie, rentrons dans le vif du sujet, en commençant… par la fin !

Comme c’est le plus simple autant s’en débarrasser de suite .

Mise à jour de la section Portfolio :

Pour le moment je n’ai réalisé qu’une seule section dans le cours, donc je repars de celle-là, mais si vous en avez plusieurs, vous devrez faire la manipulation pour chacune d’entre elles.

Commençons par mettre à jour le fichier au niveau des calques. Comme nous allons ajouter une animation de preload et un peu de code (pour la gestion de l’animation durant le chargement justement) il faut légèrement réorganiser le fichier :

Vous noterez au passage que pour changer un peu, je n’ai pas utilisé ici d’étiquettes (pour ceux à qui ce terme ne parle pas, rendez-vous à la fin du chapitre 1) mais juste 2 images clefs.
Ça ne posera pas de problème particulier ici puisque nous n’aurons que 2 images clefs (1 et 2), mais je vous laisse imaginer, pour un fichier plus complexe, la difficulté de travailler uniquement avec des gotoAndStop([numeroFrame]);, merci donc Adobe^® (et Macromdia^® ) d’avoir pensé au étiquettes !

Et voici le code que nous allons placer sur la première image clef de l’animation :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

Je ne vais pas revenir sur la création du preload puisque nous l’avons déjà vu dans le chapitre 3, et la méthode reste strictement identique.

Pour ma part j’ai simplement, comme dit plus haut, fait un copier/coller de l’animation déjà présente dans l’animation principal (interface.fla).

Notez également ici l’utilisation du this.gotoAndStop(2); puisque nous n’utilisons pas d’étiquettes.

Dernière chose : vérifiez bien que l’animation a un nom d’occurrence et que vous utilisez le même dans votre code. Sinon ça ne marchera pas !

Ceci étant fait, ne nous reste plus qu’à créer le petit bout de code dans l’animation principal, qui va nous permettre de charger cette section (ou d’autres).

Nous allons donc nous placer dans notre fichier interface.fla, dans le clip MC_INTERFACE, puis dans le clip MC_MENU_BAS (qui contient les boutons).

Vous vous souvenez qu’avec cette méthode, nous disposons directement le code SUR les boutons eux-même. Sélectionnez donc le bouton sensé charger la section portfolio. Il contient déjà du code car est aussi en charge d’afficher, au besoin le sous-menu.

Nous allons modifier ce code comme suit :

1
2
3
4
5
6
7
8
9
10
11
12

on (release) {
    //--- Test de sousMenu1 ---
    if (sousMenu1._currentframe != 6) {
        //--- Test de SousMenu2 ---
        if (sousMenu2._currentframe == 6) {
            sousMenu2.play();
        }
        sousMenu1.play();
        this._parent.contenu.unloadMovie();
        this._parent.contenu.loadMovie('portfolio-graphisme.swf');
    }
}

Et pourquoi on place le code sur le bouton « Portfolio » et pas sur le bouton « Graphisme » du sous-menu ? Hein !

En fait le code de chargement du swf potfolio-graphisme.swf se retrouvera sur les 2 boutons (il faudra juste ajuster le ciblage vers le clip contenu. Si je place également le code de chargement sur le bouton « Portfolio », c’est parce que par défaut le clic sur ce bouton affichera le sous-menu ET chargera la première sous-partie. Ça évite d’avoir à ouvrir le sous-menu PUIS refaire un clic pour charger la première sous-partie (prenez soins de vos visiteurs, ils adorent ça !).

Comme vous l’avez remarqué, ici les changements sont minimes, mais cependant importants… En gros nous avons ajouter 2 lignes :

this._parent.contenu.unloadMovie();
this._parent.contenu.loadMovie(‘portfolio-graphisme.swf’);

Mais que nous disent-elles avec tous ses this, _parent, …

Vous vous souvenez du concept de « ciblage » (ou « adressage ») dans Flash ? et bien nous sommes en plein dedans !

Pour ceux qu’y sont perdus, faites donc un petit tour au chapitre 3 (début de la méthode 2).

Il ne faut pas perdre de vu que nous sommes à l’intérieur du clip  MC_MENU (this), qui se trouve au même niveau que le clip conteneur (contenu), donc pour le cibler, nous devons remonter d’un niveau (this._parent), ce qui nous donne bien this._parent.contenu.

Ensuite la fonction pré-définie loadMovie(); lance à proprement parler, l’action de chargement du fichier que nous lui indiquons entre guillemets :

loadMovie(‘portfolio-graphisme.swf’);

La ligne :

this._parent.contenu.unloadMovie();

Est surtout là par sécurité. Au cas où le bouton serait appelé alors qu’une section est déjà chargée dans le conteneur, nous prenons soins de la décharger (unloadMovie();) avant d’en charger une nouvelle.

Méthode 2 : ActionScript 2 |

Ici, comme ce sera le cas pour l’AS3, les choses se corsent un peu…

En effet, contrairement à la méthode précédente, nous n’avons bien qu’un seul fichier à charger. En revanche celui-ci doit également charger des données depuis un fichier XML. Ainsi il va nous falloir lui spécifier quelles informations il doit charger, en fonction de la sous-partie que l’on souhaite visualiser.

Pour se faire, il va nous falloir effectuer quelques modification/ajouts dans chaque fichier (interface.fla et portfolio.fla). Rassurez-vous nous n’allons pas tout bouleverser non-plus, mais il s’agit quand même de choses assez précises donc il va falloir être attentif.

La propriété _global de l’ActionScript 2 :

Nous sommes donc en train de parler ici de dialoguer entre 2 fichiers swf (l’un étant chargé à l’intérieur de l’autre). Eh bien sachez que l’AS2 possède un propriété très très intéressante, qui se nomme _global.

Ouai ok, c’est sympa, et ça fait quoi au juste ?

Son nom est assez évocateur je pense… Il s’agit en faite d’accorder à une variable, une visibilité « globale ». C’est à dire qu’il s’agit d’une variable lisible et modifiable depuis n’importe quel endroit du code (y compris un autre swf chargé).

Pour déclarer une telle variable, rien de plus simple :

_global.maVariable = ‘toto’;

Notez que le mot var a disparu (habituellement devant une variable lors de la déclaration) et que je ne type pas la variable comme d’habitude (car cela provoquerait une erreur).

Donc si je déclare une telle variable dans mon fichier principal (interface) je pourrais y avoir accès dans mon fichier chargé (portfolio, ou autre).

Une seule animation de chargement pour toutes les sections :

Contrairement à la première méthode, nous n’allons pas ajouter d’animation de préchargement à chacun de fichiers de section, mais nous en créons un seul, dans le fichier principal, qui nous servira à chaque fois que nous en aurons besoin.

Pour ma part j’ai opté pour quelque chose de simple : une animation d’un cadrant qui tourne sur lui-même en boucle au centre duquel s’affiche le pourcentage de téléchargement effectué. Il n’y aura donc qu’une simple interpolation pour l’animation de rotation et un champ de texte dynamique pour afficher le pourcentage.

Je ne vais pas détailler ici comment j’ai construit le clip de préchargement, nous l’avons déjà vu. Cependant, pour que vous puissiez vous y retrouver dans le code qui va suivre, voici les informations que vous devez garder à l’esprit :

• Le clip de chargement porte le nom d’occurrence : prechargement
• Le texte dynamique qu’il contient porte le nom d’occurrence : pourcentage

Sur ce, rentrons dans le vif du sujet.

Code complet fichier interface.fla :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191

//
//---------------------------------------------------- Initialisations ---//
//
var positionCurseur:Number = menuBas.bPortfolio._x;
var etatSousMenu:Boolean = false;
this.prechargement._visible = false;
_global.categorie = '';
//
//--- Importation de la class Tween ---
//
import mx.transitions.Tween;
import mx.transitions.easing.*;
//
//------------------------------------------------------- Fonctions ---//
//
//
//--- Fonction goCurseur ---
//
function goCurseur(idBouton) {
    var translationCurseur:Tween = new Tween(menuBas.curseur, "_x", Strong.easeOut, menuBas.curseur._x, idBouton._x, 0.5, true);
}
//
//--- Fonction backCurseur ---
//
function backCurseur() {
    var translationCurseur:Tween = new Tween(menuBas.curseur, "_x", Strong.easeOut, menuBas.curseur._x, positionCurseur, 0.5, true);
}
//
//--- Fonction afficheSousMenu ---
//
function checkSousMenu(version) {
    //--- on Masque le sous-menu ---
    if (etatSousMenu == true) {
        masqueSousMenu(version);
    } else {
        if (version != 0) {
            afficheSousMenu(version);
        }
    }
}
//
//--- Fonction masqueSousMenu ---
//
function masqueSousMenu(choix) {
    var translationSousMenu:Tween = new Tween(menuBas.sousMenu, "_y", Strong.easeOut, menuBas.sousMenu._y, -35, 0.5, true);
    translationSousMenu.onMotionFinished = function() {
        etatSousMenu = false;
        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;
    };
}
//
//--- Fonction ChargeSousPartie ---
//
function chargeSousPartie(sousPartie:String) {
    //--- ECOUTEUR ---
    var mclListener:Object = new Object();
    mclListener.onLoadStart = function() {
        prechargement._visible = true;
    };
    //--- pourcentage ---
    mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
        prechargement.pourcentage.text = Math.round(bytesLoaded/bytesTotal*100)+' %';
    };
    //--- On complete ---
    mclListener.onLoadComplete = function(target_mc:MovieClip) {
        prechargement._visible = false;
    };
    //--- loader ---
    var loaderClip:MovieClipLoader = new MovieClipLoader();
    loaderClip.addListener(mclListener);
    loaderClip.unloadClip(contenu);
    loaderClip.loadClip(sousPartie,contenu);
}
//
//
//----------------------------------------------- Actions des boutons ---//
//
//--- Bouton Portfolio ---
//
//--- Rollover ---
this.menuBas.bPortfolio.onRollOver = function() {
    goCurseur(this);
};
//--- Rollout ---
this.menuBas.bPortfolio.onRollOut = function() {
    backCurseur();
};
//--- Release ---
this.menuBas.bPortfolio.onRelease = function() {
    checkSousMenu(1);
    positionCurseur = this._x;
    chargeSousPartie("portfolio.swf");
    _global.categorie = "graphisme";
};
//
//--- Bouton Profil ---
//
//--- Rollover ---
this.menuBas.bProfil.onRollOver = function() {
    goCurseur(this);
};
//--- Rollout ---
this.menuBas.bProfil.onRollOut = function() {
    backCurseur();
};
//--- Release ---
this.menuBas.bProfil.onRelease = function() {
    checkSousMenu(2);
    positionCurseur = this._x;
    chargeSousPartie("profil.swf");
    _global.categorie = "competences";
};
//
//--- Bouton Goodies ---
//
//--- Rollover ---
this.menuBas.bGoodies.onRollOver = function() {
    goCurseur(this);
};
//--- Rollout ---
this.menuBas.bGoodies.onRollOut = function() {
    backCurseur();
};
//--- Release ---
this.menuBas.bGoodies.onRelease = function() {
    checkSousMenu(0);
    positionCurseur = this._x;
    chargeSousPartie("goodies.swf");
    _global.categorie = "";
};
//
//--- Bouton Liens ---
//
//--- Rollover ---
this.menuBas.bLiens.onRollOver = function() {
    goCurseur(this);
};
//--- Rollout ---
this.menuBas.bLiens.onRollOut = function() {
    backCurseur();
};
//--- Release ---
this.menuBas.bLiens.onRelease = function() {
    checkSousMenu(0);
    positionCurseur = this._x;
    chargeSousPartie("liens.swf");
    _global.categorie = "";
};
//
//--- Bouton Contact ---
//
//--- Rollover ---
this.menuBas.bContact.onRollOver = function() {
    goCurseur(this);
};
//--- Rollout ---
this.menuBas.bContact.onRollOut = function() {
    backCurseur();
};
//--- Rollout ---
this.menuBas.bContact.onRelease = function() {
    checkSousMenu(0);
    positionCurseur = this._x;
    chargeSousPartie("contact.swf");
    _global.categorie = "";
};

Houlalala !!!

Pas de panique, j’ai remis tout le code mais seul 2-3 lignes ont été rajoutées ainsi que la fonction de chargement des sections (swf externes), ainsi les nouveautés concernent les lignes :

7, 81 à 99, et 119 à 120.

Remarquez que malgré que nous n’ayons pas encore réalisé les autres sous-parties, j’ai tout de même déjà attribué les actions de chargement et de re-définition de la variable globale à tous les boutons. D’ailleurs si vous vous posez la question de pourquoi les 3 derniers boutons réinitialise cette variable avec une valeur nulle, c’est tout simplement parce que ces sections ne chargerons pas de fichier XML, au tout du moins ne chargerons un XML ne contenant qu’une seule catégorie (donc pas besoin de définir laquelle nous souhaitons charger puisqu’il n’y en a qu’une).

Commençons en premier par déclarer notre fameuse variable globale :

_global.categorie = »";

Rien de compliqué ici , nous venons d’en parler. Par défaut donc, nous déclarons la variable sans lui affecter de valeur («  »), puisque pour le moment elle n’en a pas besoin.

De plus à la ligne juste au dessus, j’ai pris le soin de rendre le clip de chargement invisible :

this.prechargement._visible = false;

Nous ne le rendrons visible que lorsque nous aurons besoin de lui !

Ensuite nous allons directement nous rendre au niveau des actions des boutons, avec notamment celle du bouton bPortfolio :

//— Release —
this.menuBas.bPortfolio.onRelease = function() {
checkSousMenu(1);
positionCurseur = this._x;
chargeSousPartie( »portfolio.swf »); [1]
_global.categorie = « graphisme »; [2]
};

Nous agissons sur le onRelease car nous voulons que la sous-partie se charge uniquement si nous cliquons sur le bouton (pas au survol sinon ça risque de vite partir dans tous les sens).
Les deux dernières lignes sont donc nouvelles :

1. On charge la sous-partie en appelant la fonction chargeSousPartie(); sans oublier de lui transmettre en paramètre l’adresse vers le swf à charger.
2. On modifie la valeur de la variable globale pour correspondre à la première catégorie de la sous-partie.

Notez que pour ma part tous les fichiers swf seront stockés à la racine de mon site donc je n’ai besoin que de renseigner le nom du swf à charger en paramètre de la fonction.
Cependant ne perdez pas de vu qu’il s’agit en fait ici de fournir l’adresse relative au swf principale, vers le swf à charger. Ainsi si mon swf principal était à la racine du site et mes autres swf dans un sous-dossier nommé SWF, il me faudrait transformer mon appel comme suit :
chargeSousPartie(« SWF/potfolio.swf »);

Donc pour le moment nous avons une variable globale qui est déclarée, puis dont la valeur est modifiée lors du clic sur le bouton, qui en profite pour appeler une fonction qui chargera le swf dont le chemin a été passé en argument lors de l’appel.

La variable globale, quand à elle, sera récupérée par le swf lui-même (je parle ici de la section : portfolio.swf), qui l’utilisera à son tour pour charger la bonne catégorie dans le fichier XML, mais nous verrons ça ensuite (tout le monde suit ?).

La fonction de chargement : chargeSousPartie(); :

Voici ce que va réaliser cette fonction :

1. Réception de l’adresse du fichier à charger.
2. Déclaration d’un objet « écouteur », qui exécutera certaines tâches en fonction de l’état du chargement.
3. Déclaration d’un objet « chargeur », qui effectuera le chargement du fichier à proprement parler.
4. Association de l’objet écouteur à l’objet chargeur.
5. On vide le clip conteneur (contenu).
6. On lance le chargement du fichier dans le conteneur (portfolio.swf -> contenu).

//
//— Fonction ChargeSousPartie —
//
function chargeSousPartie(sousPartie:String) {   [1]
//— ECOUTEUR — [2]
var mclListener:Object = new Object();
mclListener.onLoadStart = function() {
prechargement._visible = true;
};
//— pourcentage —
mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
prechargement.pourcentage.text = Math.round(bytesLoaded/bytesTotal*100)+’ %’;
};
//— On complete —
mclListener.onLoadComplete = function(target_mc:MovieClip) {
prechargement._visible = false;
};
//— loader —
var loaderClip:MovieClipLoader = new MovieClipLoader(); [3]
loaderClip.addListener(mclListener); [4]
loaderClip.unloadClip(contenu); [5]
loaderClip.loadClip(sousPartie,contenu); [6]
}

Explications:

1 - Réception de la variable contenant l’adresse du fichier à charger. Rien de difficile ici, nous l’avons déjà vu à plusieurs reprises. Cette variable sera réutilisée à l’étape 6.

2 - Déclaration d’un objet « écouteur ».

Un objet écouteur a pour fonction de déclencher des actions précises lorsque certains événements se produisent. C’est pour cela que l’on dit qu’il « écoute » le/les événement(s) afin de déterminer si telle ou telle action doit s’exécuter.
En premier lieu on déclare tout simplement une variable de type Objet :

var mclListener:Object = new Object();

Le nom de la variable étant ici mclListener, et son type Object ( »objet » en anglais ). Pour le moment ce n’est donc pas encore un écouteur, mais un objet. Il va devenir un « écouteur » car nous allons déclarer des actions à effectuer (sous la forme de fonctions), en fonction d’événements.

Dans notre cas l’écouteur va agir sur 3 événements :

Au début du chargement onLoadStart (il va rendre le clip de préchargement visible) :

mclListener.onLoadStart = function() {
prechargement._visible = true;
};

Au cours du chargement onLoadProgress (il va modifier la valeur du champs dynamique affiché par le clip de préchargement, en fonction du taux de chargement effectué) :

mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
prechargement.pourcentage.text = Math.round(bytesLoaded/bytesTotal*100)+’ %’;
};

Une fois le chargement achevé onLoadComplete (il va masquer à nouveau le clip de préchargement dont nous n’avons plus besoin) :

mclListener.onLoadComplete = function(target_mc:MovieClip) {
prechargement._visible = false;
};

Comme vous l’avez certainement remarqué, les fonctions appelées sur les événements onLoadProgress et onLoadComplete attendent des paramètres qui sont fournis implicitement par l’objet chargé grâce à l’objet « chargeur » justement.

3 - Justement nous déclarons notre chargeur. Il s’agit ici d’une variable de type MovieCLipLoader, la syntaxe de déclaration reste globalement la même que pour chaque variable.

var loaderClip:MovieClipLoader = new MovieClipLoader();

4 – L’ajout de l’écouteur au chargeur se fait à l’aide de la méthode addListener(); :

loaderClip.addListener(mclListener);

5 et 6 – Le déchargement et le chargement du clip conteneur se fait à l’aide des 2 méthodes assez proches de celles déjà rencontrées dans la première méthode (unLoadMovie(); et loadMovie();), le langage a juste « évolué » vers quelque chose de plus « manœuvrable » disons :

loaderClip.unloadClip(contenu);
loaderClip.loadClip(sousPartie,contenu);

Remarquez la syntaxe de la méthode loadClip :

Nous utilisons l’objet loader loaderClip, pour charger le fichier identifié par la variable sousPartie, dans le clip conteneur contenu.

Et voilà notre fonction chargeSousPartie(); pleinement fonctionnelle.

Je reviens brièvement sur un point que nous avons évoqué au début : la fonction que nous venons de créer à la particularité de n’utiliser (et ré-utiliser) qu’un seul et même clip de préchargement.
En effet, contrairement à la méthode 1 où nous sommes « obligés » d’intégrer un clip de préchargement à chaque swf, ici le clip de préchargement est directement intégré au clip parent, ce qui nous permet donc de le réutiliser à chaque fois que nous en avons besoin. Il nous suffit de le rendre visible (grâce à sa propriété _visible), de lui passer les valeurs dont il a besoin (ce qui est fait ici par l’écouteur lors du onLoadComplete), et de le masquer une fois le chargement terminé.

Une seule restriction persiste cependant : vous ne pouvez pas charger 2 fichiers en même temps avec la même animation de préchargement. Pour ça il vaudrait mieux laisser le clip de préchargement dans la bibliothèque (en lui attribuant un nom de liaison) et d’utiliser la méthode attachMovie(); comme nous avons pu le faire dans le fichier portfolio.fla dans le chapitre précédent avec l’objet clipProjet.

Passons maintenant aux modifications à apporter au fichier de la section : portfolio.fla

Voici la portion de code qui va changer :

1
2
3
4
5
6
7
8
9
10
11

//
//--- Chargement des valeurs une fois la base chargée ---
//
Portfolio.onLoad = function(success:Boolean) {
 if (success) {
 infosChargement._visible = false;
 chargeProjets(_global.categorie);
 } else {
 infosChargement.texteCharge.text = "Erreur lors du chargement des projets.";
 }
};

J’ai remis toute la fonction mais seul 1 éléments change (pour ceux qui sont perdus, il s’agit de la première fonction dans le fichier portfolio.fla, juste après le chargement des classes et les déclarations des variables, lorsque l’on charge le fichier XML) :

chargeProjets(_global.categorie);

La seule ligne a changer est donc celle dui fait appel à la fonction de chargement des projets. En effet à l’origine, nous avions définie une valeur fixe pour la catégorie grâce au code suivant :

chargeProjets(« graphisme »);

Eh bien en changeant la chaîne « graphisme » par la variable globale _global.categorie, la fonction récupère directement la valeur de la variable définie dans le fichier parent, puisque celle-ci, ayant une portée « globale », est visible depuis n’importe où dans l’arborescence. Ainsi elle aura la valeur que nous lui avons attribué en cliquant sur le bouton.

Et grâce à cette subtilité de l’ActionScript 2, nous pouvons, à la fois charger le swf de la section, mais aussi nous assurer qu’il puisse à son tour charger les bonnes données depuis le fichier XML, puisque nous avons pris le soins de définir la catégorie en amont, et de nous assurer qu’elle soit visible par la section une fois chargée.

Malheureusement, cette possibilité (la portée globale d’une variable :  _global), n’étant plus possible en ActionScript 3, la même action ne se présentera pas tout à fait de la même façon dans les lignes qui vont suivre… Mais n’ayez crainte, ça marche tout aussi bien !

Méthode 3 : ActionScript 3 |

Pour cette dernière méthode, le principe est strictement identique à celle que nous venons de voir pour l’AS2. Seules quelques particularités du langage AS3 viendront, comme à l’acoutumé, se mettre en travers de notre chemin, mais comme dans les autres chapitres, nous trouverons une parade.

Comme pour la méthode 2, gardez à l’esprit que j’ai ajouté un clip de préchargement dans mon clip MC_INTERFACE. Il s’agit d’une simple animation (interpolation) ainsi qu’un champ de texte dynamique.
Comme précédement, le clip porte le nom d’occurrence prechargement et le champ de texte dynamique pourcentage.

Voici le code pour le fichier interface_AS3.fla (que j’ai placé sur la première image clef dans le clip MC_INTERFACE) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203

//
//--------------------------------------------- Initialisations ---//
//
//
//--- Importation de la class Tween ---
//
import fl.transitions.*;
import fl.transitions.easing.*;
//
//--- Position initiale du curseur ---
//
var posInitCurseur:Number=menuBas.curseur.x;
var etatSousMenu:Boolean=false;
var sousMenuSelectionne:Number=0;
this.prechargement.visible=false;
this.contenu.categorie = new String();
//
//------------------------------------------- Animation du menu ---//
//
//
//--- Fonction deplaceCurseur ---
//
function deplaceCurseur(event:MouseEvent) {
	var translationCurseur:Tween=new Tween(menuBas.curseur,"x",Strong.easeOut,menuBas.curseur.x,event.currentTarget.x,0.5,true);
}
//
//--- Fonction initCurseur ---
//
function initCurseur(event:MouseEvent) {
	var translationCurseur:Tween=new Tween(menuBas.curseur,"x",Strong.easeOut,menuBas.curseur.x,posInitCurseur,0.5,true);
}
//
//--- Fonction afficheSousMenu ---
//
function afficheSousMenu(event:MouseEvent) {
	//--- Fixe la position du curseur ---
	posInitCurseur=event.currentTarget.x;
	//--- Affiche le sous-menu ---
	if (event.currentTarget==menuBas.bPortfolio) {
		//---Sous-menu ---
		sousMenuSelectionne=1;
		if (etatSousMenu==false) {
			initSousMenu();
		} else {
			masqueSousMenu();
		}
	} else if (event.currentTarget == menuBas.bProfil) {
		//---Sous-menu ---
		sousMenuSelectionne=2;
		if (etatSousMenu==false) {
			initSousMenu();
		} else {
			masqueSousMenu();
		}
	} else {
		if (etatSousMenu==true) {
			sousMenuSelectionne=0;
			masqueSousMenu();
		}
       }
               //--- chargement sous-partie : autres boutons ---
	switch (event.currentTarget) {
 
		case menuBas.bPortfolio :
			chargeSousPartie("portfolio.swf", "graphisme");
			break;
 
		case menuBas.bProfil :
			chargeSousPartie("profil.swf", "competences");
			break;
 
		case menuBas.bGoodies :
			chargeSousPartie("goodies.swf", "");
			break;
 
		case menuBas.bLiens :
			chargeSousPartie("liens.swf", "");
			break;
 
		case menuBas.bContact :
			chargeSousPartie("contact.swf", "");
			break;
	}
}
//
//--- 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,-60,0.5,true);
	translationSousMenu.addEventListener(TweenEvent.MOTION_FINISH, sousMenuYes);
}
//
//--- Fonction sousMenuNo ---
//
function sousMenuNo(evt:TweenEvent) {
	if (sousMenuSelectionne==0) {
		etatSousMenu=false;
	} else {
		//--- On réinitialise le sousMenu ---
		initSousMenu();
	}
}
//
//--- Fonction sousMenuYes ---
//
function sousMenuYes(evt:TweenEvent) {
	etatSousMenu=true;
}
//
//--------------------------------- Chargement des sous-parties ---//
//
function chargeSousPartie(section:String, categorieXML:String) {
	//--- On vide le conteneur ---
	while (this.contenu.numChildren > 0) {
		this.contenu.removeChildAt(0);
	}
	//--- On redéfinit la catégorie à charger : pour le clip enfant ---
	contenu.categorie=categorieXML;
	// création du chargeur
	var chargeur:Loader = new Loader();
	//--- url à atteindre ---
	var chemin:URLRequest=new URLRequest(section);
	//--- chargement du contenu ---
	chargeur.load(chemin);
	//--- ajout à la liste d'affichage : lancement du chargement ---
	contenu.addChild(chargeur);
	//--- Ecouteurs ---
	chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, prechargeSection);
	chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finChargementSection);
}
//
//--- Fonction prechargement clips ---
//
function prechargeSection(evt:Event) {
	prechargement.visible=true;
	prechargement.pourcentage.text= Math.floor(100/(evt.currentTarget.bytesLoaded*evt.currentTarget.bytesTotal))+'%';
}
//
//--- Fonction fin de prechargement ---
//
function finChargementSection(evt:Event) {
	prechargement.visible=false;
}
//
//----------------------------------------- Actions des boutons ---//
//
//
//--- bPortfolio ---
//
this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bPortfolio.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bPortfolio.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bProfil ---
//
this.menuBas.bProfil.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bProfil.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bProfil.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bGoodies ---
//
this.menuBas.bGoodies.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bGoodies.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bGoodies.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bLiens ---
//
this.menuBas.bLiens.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bLiens.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bLiens.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bContact ---
//
this.menuBas.bContact.addEventListener(MouseEvent.MOUSE_OVER, deplaceCurseur);
this.menuBas.bContact.addEventListener(MouseEvent.MOUSE_OUT, initCurseur);
this.menuBas.bContact.addEventListener(MouseEvent.CLICK, afficheSousMenu);

Ah oui ça commence à faire un peu de code… Mais comme pour l’AS2, j’ai remis ici tout le code, les lignes contenant des nouveautés/changements sont :

15 et 16,  49, 59, 66 à 78 et 136 à 169.

En premier lieu, comme pour la méthode 2, nous allons donc déclarer notre nouvelle variable, et masquer le clip de préchargement (puisque par défaut nous n’avons pas besoin de lui) :

this.prechargement.visible=false;
this.contenu.categorie = new String();

Pour masquer le clip de préchargement, c’est comme en AS2, sauf que la propriété _visible est devenue juste visible, mais nous l’avons déjà vu. Donc je ne m’attarde pas (d’autant que je n’ai plus rien à rajouter ).

Ensuite avant d’expliquer la déclaration de la variable qui nous servira de variable « globale », je dois vous préciser quelque chose :

En AS3, _global n’existe plus !

Eh oui je sais c’est une vraie tragédie et ça complique la vie à pas mal de gens (dont moi je dois dire…).

Mais pourquoi ce changement ?

Parce que l’AS3 est une refonte assez importante de l’ActionScript par rapport à l’AS2, notamment car il est plus axé « Programmation Orientée Objet ».

Ça y est j’ai peur !

Il faut bien saisir que depuis le début, nous faisons ce que l’on appel de la « Programmation séquentielle ». C’est à dire que tout le code est placé directement dans le fichier et de ce fait, n’est pas réellement réutilisable. Bien sûr on peu toujours faire un copier/coller, mais le code n’est pas conçue pour pouvoir être réutilisé de manière optimum.

Sans rentrer dans les détails (il ne s’agit pas de vous perdre non-plus), disons qu’à contrario, la « Programmation Orientée Objet » (que l’on retrouve d’ailleurs dans la majorité des langages de programmation : PHP, C++, Java, …), permet de créer ce que l’on appel des Package et des Class réutilisables d’un projet à l’autre.

En AS cela se traduit par le fait que le code n’est plus dans le fichier fla (ou du moins un minimum de code reste), et les « méthodes » (fonctions) sont créées dans des fichiers externes (des fichiers .as ici), qui sont ensuite chargés au moment de la « compilation » du fichier (la création du fichier SWF), puis les fonctions sont appelées lorsque cela est nécessaire.

Nous ne traiterons pas de ce mode de programmation jusqu’à la fin du cours (même dans les chapitres à venir).

Mais pourquoi ?

Premièrement parce que je ne maîtrise pas suffisamment ce mode de programmation en ActionScript pour vous l’expliquer de manière suffisante. Mais surtout parce que cela demande une certaine habitude de la programmation et des notions assez complexes (notamment la notion d’ »Objet » pour ne citer que celle-là, qui s’apparente plus à un concept qu’à un objet réel lorsque l’on parle de programmation). Enfin mon but premier et de faire découvrir flash et l’ActionScript au plus grand nombre, et surtout aux débutants, donc si je commence à embrouiller tout le monde en parlant d’objet, de class, de package, d’héritage, de portée,… je sent que je vais en faire fuir quelques uns.

Ceci étant dit, revenons donc à notre variable globale qui n’existe plus. Qu’est-ce que cela implique pour nous ? Qu’il va falloir trouver un autre moyen pour dialoguer entre nos 2 swf (si madame). Et heureusement il existe des solutions. Oui DES solutions !

Cependant je ne vais pas vous les présenter toutes. Voici un lien vers un article du site mediabox qui détaille 3 méthodes différentes de passser un variable entre 2 swf (dont l’un charge l’autre) :

tutoriaux flash swf_communiquants

Sachez simplement que nous allons ici utiliser la première méthode (qui m’a semblé la plus simple à mettre en place).

Cependant telle que présentée dans le tutoriel cité plus haut, la méthode n’est pas fonctionnelle dans notre cas, c’est pourquoi un très léger ajustement est nécessaire.

En effet, contrairement à l’exemple de mediabox, je déclare la variable comme ceci :

this.contenu.categorie = new String();

Il s’agit donc de déclarer un variable de type String vide (car aucune valeur ne lui est affectée pour le moment).

Mais alors que viens faire contenu là-dedans ?

Dans notre cas, le SWF sera chargé dans le clip contenu, et non directement dans le clip MC_INTERFACE, donc je déclare directement la variable comme faisant partie de contenu, de sorte que le pointage que nous réaliserons depuis le clip enfant (portfolio.swf), retrouve bien la variable (sinon il ne la verra pas). Ne vous inquiétez pas trop, nous reviendrons dessus en fin de chapitre lors de la modification du fichier portfolio.fla.

Voilà pour l’initialisation.
Passons pour le moment les appels de la fonction de chargement (nous les verrons ensuite) pour directement nous intéresser à la fonction elle-même :

function chargeSousPartie(section:String, categorieXML:String) {   [1]
//— On vide le conteneur —
while (this.contenu.numChildren > 0) { [2]
this.contenu.removeChildAt(0);
}
//— On redéfinit la catégorie à charger : pour le clip enfant —
contenu.categorie=categorieXML; [3]
// création du chargeur
var chargeur:Loader = new Loader(); [4]
//— url à atteindre —
var chemin:URLRequest=new URLRequest(section);
//— chargement du contenu —
chargeur.load(chemin);
//— ajout à la liste d’affichage : lancement du chargement —
contenu.addChild(chargeur);
//— Ecouteurs —
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, prechargeSection); [5]
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finChargementSection);
}

On retrouve à peu de chose près le déroulement que nous avions avec la méthode 2 :

1. La fonction reçoit 2 variables de type String (chaîne de caractères) : section et categorieXML.
2. Par sécurité, on vide le clip conteneur (contenu).
3. On redéfinit la valeur de la variable categorie avec la valeur passée en argument (lors de l’appel).
4. On prépare l’architecture de chargement et on lance le chargement du fichier.
5. On ajoute les écouteurs à l’objet de chargement pour pouvoir effectuer des actions lors du chargement et une fois le chargement terminé.

Bien entendu, les méthodes sont différentes en AS3 de celles utilisées en AS2 :

1 – Réception de 2 variables en arguments :

Contrairement à l’AS2, en AS3, nous ne pouvons directement redéfinir une variable via un bouton. Au lieu de cela, nous affectons un écouteur sur le bouton qui appel une fonction en charge d’effectuer l’action (ou d’effectuer une action en fonction du bouton cliqué (par exemple), le tout étant déterminé dans la fonction).
Par conséquent, la fonction de chargement reçoit non plus 1, mais 2 arguments, les 2 étant définis dans la fonction afficheSousMenu qui réalise l’appel de la fonction chargeSousPartie et que nous verrons un peu plus tard).

Pour faire simple voici le cheminement :

1. L’écouteur d’action capte l’événement de clic sur le bouton -> il appelle la fonction afficheSousMenu.
2. La fonction afficheSousMenu détermine quel bouton viens d’être cliqué et en fonction, ce qu’elle doit afficher comme sous-menu ET appelle la fonction chargeSousPartie avec les bons paramètres (cette dernière action nous la verrons après avoir détaillé la fonction chargeSousPartie).
3. La fonction chargeSousPartie se charge d’afficher la bonne section et la bonne catégorie, suivant les valeurs reçues en arguments (c’est ce que nous sommes en train de détailler).

Donc la variable section correspond au chemin vers le fichier SWF à charger (c’est pour ça que c’est un String).
La variable categorieXML représente donc, vous l’aurez deviné, le nom de la catégorie à charger (utilisée par le clip portfolio.swf pour charger la bonne portion de XML).

2 – « Vidage » du clip conteneur :

Avant de charger un nouveau fichier dans le conteneur, il nous faut le vider, sinon les fichiers vont s’entasser les uns sur les autres (pas très pratique, ni beau ).
La méthode ici est un boucle de type while (tant que), qui supprime l’enfant du clip conteneur (contenu) à la position 0, et ce, tant que le clip contenu possède des « enfants ».
Ainsi la méthode numChildren détermine le nombre d’enfants que possède le clip auquel elle est rattachée (ici contenu), et la méthode removeChildAt([position:Number]);, supprime l’enfant qui occupe la position indiquée entre les parenthèses.

Pour bien comprendre ce mécanisme, il faut savoir que tous les objets dans votre fichier flash, qu’ils soient positionnés « à la mains » ou dynamiquement par de l’ActionScript (avec un addChild(); par exemple), sont inscrits dans ce que l’on nomme la « liste d’affichage ».

Cette liste d’affichage pourrait être représentée comme un organigramme composé de plusieurs branches, certaines dépendantes d’autres… Je ne rentre pas dans les détails mais en gros sachez que chaque branche correspond à un type d’objet spécifique.

Bien entendu, cette liste d’affichage conserve la hiérarchie (c’est comme cela que l’on sait que tel clip est dans tel autre ou bien à côté (au même niveau)). De plus, pour un même niveau, l’enregistrement commence par 0, puis augmente au fur et à mesure que des objet sont ajoutés (un peu comme dans une variable de type Array (tableau), où le premier enregistrement est placé à l’index 0.

Prenons un exemple :

Lorsque nous avons construit notre clip MC_INTERFACE, nous avons créé à l’intérieur :

• le fond (index : 0)
• le menu (index : 1)
• le clip conteneur (index : 2)
• l’entête (index : 3)
• …

L’ordre étant déterminé par l’ordre dans lequel nous avons créé les différents éléments (ffond était le premier créé, donc il est placé à l’index 0,…).
Ceci étant totalement indépendant des calques (je préfère préciser). Ainsi je peux charger plusieurs objets dans un autre objet, sans créer de claque (de tout façon je ne peux pas créer de calque dynamiquement), tout en gardant une certaine hiérarchie d’affichage (le dernier objet ajouté est visible par-dessus les autres).

Mais tut ce charabia là, c’est pour en venir où au juste ?

C’est pour vous expliquer le pourquoi du removeChildAt(0); !

Comme je viens de vous l’expliquer (je sais que c’est assez compliqué, mais il suffit que vous en compreniez les grandes lignes), le fait de charger un swf dans le clip conteneur va donc le positionner sur le premier index vide (par défaut si le conteneur ne comporte rien, se sera donc 0).

Notre volonté ici est donc de vider le conteneur de tout son contenu, mais nous ne savons pas combien d’objets (d’enfants) il contient, d’où la boucle : tant que le nombre d’enfants du clip conteneur n’est pas égale à zéro :

while (this.contenu.numChildren > 0) {
//— actions a faire —
}

L’action étant ici de supprimer l’enfant au premier index (0) (une fois l’index zéro vidé de son contenu, s’il reste des éléments aux index supérieurs, ils « remontent » dans le classement pour prendre la place laissée vide). C’est pourquoi l’action reste la même, nous supprimons l’enfant placé sur l’index 0 jusqu’à que le clip ne contienne plus d’enfants :

removeChildAt(0);

3 – Définition de la valeur de la variable categorie :

Ici rien d’extraordinaire, nous redéfinissons la valeur de la variable categorie (enregistrée dans le conteneur contenu) en lui affectant la valeur reçue en argument : categorieXML.

Mais ?! Si la variable categorie était enregistrée dans le clip contenu, elle n’existe plus puisque nous avons supprimé tous ses enfants ?!

Et si elle existe toujours ! Car removeChil(); ou removeChildAt(); sont des méthodes qui n’agissent que sur les objets présent « physiquement », pas sur les variables…

4 – Construction de l’objet chargeur et lancement du chargement :

Le principe est le même qu’en AS2 :

On créé un objet chargeur :

var chargeur:Loader = new Loader();

On créé un nouvel objet chemin (qui contient l’adresse (l’URL) de l’objet à charger (ici la variable section puisque c’est exactement à ça qu’elle sert : elle contient l’adresse vers le SWF à charger) :

var chemin:URLRequest=new URLRequest(section);

On lance le chargement du fichier grâce à la méthode load de l’objet Loader (à laquelle on fournie l’adresse, sous la forme de l’objet URLRequest nouvellement créé) :

chargeur.load(chemin);

Et enfin on ajoute le fichier chargé dans le clip conteneur avec la méthode addChild(); appliquée sur l’objet contenu :

contenu.addChild(chargeur);

Toute cette procédure n’a rien de « nouveau », nous l’avons déjà appliquée dans le chapitre 5 lors du chargement des projets.

5 – Ajout des écouteur à l’objet Loader :

Afin de pouvoir intervenir sur les événements du chargement (progression et chargement terminé), nous devons ajouter des écouteurs sur l’objet Loader, qui se chargeront d’appeler les fonctions nécessaires pour chaque événement) :

chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, prechargeSection);
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finChargementSection);

Ces 2 fonctions sont justement ce que nous allons voir immédiatement :

Elles se nomment : prechargeSection(); (appelée lors de la progression du chargement) :

function prechargeSection(evt:Event) {
prechargement.visible=true;
prechargement.pourcentage.text= Math.floor(100/(evt.currentTarget.bytesLoaded*evt.currentTarget.bytesTotal))+’%';
}

et finChargementSection(); (appelée une fois le chargement achevé) :

function finChargementSection(evt:Event) {
prechargement.visible=false;
}

Je ne détaille pas ici leur contenus, sachant qu’ils sont quasiment identiques à ce qui a déjà été vu en AS2…

Nous avons donc à présent notre variable categorie et notre fonction chargeSousPartie(); prêtes à servir, mais nous ne les utilisons pas encore .

Pour rendre le tout opérationnel, il faut rajouter les appels à la fonction chargeSousPartie(); et pour ça nous allons devoir modifier la fonction afficheSousMenu(); (souvenez-vous nous l’avons évoqué un peu plus haut).

Voici la fonction mise à jour :

function afficheSousMenu(event:MouseEvent) {
//— Fixe la position du curseur —
posInitCurseur=event.currentTarget.x;
//— Affiche le sous-menu —
function afficheSousMenu(event:MouseEvent) {
//— Fixe la position du curseur —
posInitCurseur=event.currentTarget.x;
//— Affiche le sous-menu —
if (event.currentTarget==menuBas.bPortfolio) {
//—Sous-menu —
sousMenuSelectionne=1;
if (etatSousMenu==false) {
initSousMenu();
} else {
masqueSousMenu();
}
} else if (event.currentTarget == menuBas.bProfil) {
//—Sous-menu —
sousMenuSelectionne=2;
if (etatSousMenu==false) {
initSousMenu();
} else {
masqueSousMenu();
}
} else {
if (etatSousMenu==true) {
sousMenuSelectionne=0;
masqueSousMenu();
}
}
//— chargement sous-partie : autres boutons —
switch (event.currentTarget) {
case menuBas.bPortfolio :
chargeSousPartie( »portfolio.swf », « graphisme »); break;
case menuBas.bProfil :
chargeSousPartie( »profil.swf », « competences »); break;
case menuBas.bGoodies :
chargeSousPartie( »goodies.swf », «  »); break;
case menuBas.bLiens :
chargeSousPartie( »liens.swf », «  »); break;
case menuBas.bContact :
chargeSousPartie( »contact.swf », «  »);
break;
}
}

À la suite du code existant (juste avant la fin de la fonction), nous ajoutons un nouveau test, indiquées en rouge.

Il s’agit d’un « switch case », il permet notamment d’éviter de faire tout un tas de test de type if sur une même valeur. Nous effectuons simplement un switch sur cette valeur, et déterminons les actions à entreprendre suivant la valeur qu’elle a (le case).
À la fin des actions de chaque « cas », nous plaçons un break;, ce qui nous permet de sortir du test puisqu’un cas a été vérifié et que les actions nécessaires ont été effectuées. Donc nous n’avons plus besoin de tester les autres cas possibles.

Pour chaque cas l’action est donc la même : nous appelons la fonction chargeSousPartie(); si ce n’est qu’à chaque fois les arguments changent pour correspondre au bouton cliqué, et donc au choix de l’internaute.

Et nous en avons terminé avec les mises à jour pour le fichier interface_AS3.fla.

Voyons pour finir les modifications à apporter au fichier portfolio.fla :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

//
//---------------------------------------------------------------- INITIALISATIONS ---//
//
var portfolioXML:XML;
var chargeDonnees:URLLoader = new URLLoader();
var adresseFichier:URLRequest=new URLRequest("portfolio.xml");
//--- Variable qui va permettre de scroller d'un projet à l'autre ---
var index:Number=0;
var categorie2:String ;
try {
	// on récupère la variable maVar du swf appelant
	(categorie2=this.parent.parent["categorie"]);
}
// on récupère l’erreur si la variable n’est pas passée
catch (e:Error) {
	// on affiche l’erreur, s’il y a lieu
	trace ("Erreur : "+e);
}
//
//--- Importation de la class Tween ---
//
import fl.transitions.*;
import fl.transitions.easing.*;
//
//-------------------------------------------------------------------- FONCTIONS ---//
//
//
//--- Fonction qui affecte les données chargées à une variable ---
//
function chargementFini(event:Event) {
	infosChargement.visible = false;
	portfolioXML=new XML(chargeDonnees.data);
	chargeProjet(categorie2);
}
//
//--- Fonction qui charge les projets d'une section ---
//
function chargeProjet(categorieP:String) {
	//--- On détermine le nombre de projets
	var nbProjets:Number=portfolioXML[categorieP].children().length();
	//
	//
	//
	for (var i=0; i<nbprojets ; i++) {
		//
		//--- On place le bouton ---
		//
		var boutonP:bProjet=new bProjet  ;
		boutonP.x=10;
		boutonP.y=45*i;
		boutonP.name="bProjet"+i;
		addChild(boutonP);
		boutonP.indexProjet=index;
		boutonP.texteBouton.text = i+1;
		//
		//--- On définit l'action du bouton ---
		//
		boutonP.addEventListener(MouseEvent.CLICK, afficheProjet);
		//
		//--- On charge les infos du projet ---
		//
		var projetC:clipProjet=new clipProjet  ;
		projetC.y=boutonP.indexProjet;
		projetC.name="clipProjet"+i;
		sections.addChild(projetC);
		//--- Nom du projet ---
		projetC.nomProjet.text = portfolioXML[categorieP].projet[i].@nom;
		//--- Type de projet ---
		projetC.typeProjet.text = portfolioXML[categorieP].projet[i].@typeProjet;
		//--- Descriptif du projet ---
		projetC.descriptionProjet.text = portfolioXML[categorieP].projet[i];
		//
		//--- L'image du projet ---
		//
		chargeImage(portfolioXML[categorieP].projet[i].@image, projetC.imageProjet);
		//
		//--- On incrémente l'index : pour les futurs positions des autres projets ---
		//
		index+=470;
	}
}
//
//--- Fonction qui charge les images ---
//
function chargeImage(url:String, cible:Object) {
	var loaderImage:Loader = new Loader();
	var urlImage:URLRequest = new URLRequest(url);
	loaderImage.load(urlImage);
	cible.addChild(loaderImage);
}
//
//--- Fonction qui scroll d'un projet à l'autre ---
//
function afficheProjet(event:MouseEvent) {
	var deplaceSections:Tween = new Tween(sections, "y", Strong.easeOut, sections.y, -event.currentTarget.indexProjet, 1, true);
}
//
//-------------------------------------------------------------------- ECOUTEURS ---//
//
chargeDonnees.load(adresseFichier);
chargeDonnees.addEventListener(Event.COMPLETE, chargementFini);

Une fois de plus j’ai remis tout le code mais seule une portion est nouvelle.

Ainsi il nous faut récupérer la variable categorie que nous avons créée et à laquelle nous avons attribué une valeur dans le fichier parent :

Avant toute chose, nous créons une nouvelle variable qui accueillera la valeur récupérée :

var categorie2:String ;

Elle peux porter le même nom que la variable que nous cherchons à récupérer du clip parent, mais pour ne pas vous embrouiller, je lui ai donné au nom différent.

Ensuite il nous faut essayer de récupérer cette variable afin d’affecter sa valeur à notre nouvelle variable qui sera alors exploitable. Pour cela la procédure est la suivante :

try {
// on récupère la variable maVar du swf appelant
(categorie2=this.parent.parent["categorie"]);
}
// on récupère l’erreur si la variable n’est pas passée
catch (e:Error) {
// on affiche l’erreur, s’il y a lieu
trace ( »Erreur : « +e);
}

Heulaa c’quoi ça !

Il s’agit d’une méthode de programmation (qui n’est une fois de plus, pas propre à l’ActionScript), permettant de tenter une action (try). Cependant, si une erreur apparaît lors de cette tentative, nous l’a capturerons grâce au catch, et nous l’afficherons grâce à la méthode trace(); (qui n’a d’effet que dans le logiciel flash lui-même et permet d’afficher des choses dans la fenêtre de sortie de flash : vous avez déjà due voir cette fenêtre c’est elle qui vous affiche les erreurs lorsque vous testez votre fichier avec [Ctrl + Entree]).

ici ce qu’y importe vraiment, c’est que nous affectons la valeur récupérée  à notre nouvelle variable.

(categorie2=this.parent.parent["categorie"]);

Ensuite il ne nous reste plus qu’à utiliser cette variable à l’endroit prévu dans notre code et le tour est joué :

function chargementFini(event:Event) {
infosChargement.visible = false;
portfolioXML=new XML(chargeDonnees.data);
chargeProjet(categorie2);
}

Voilà, grâce à ces quelques lignes de code, nous avons dialogué entre nos 2 fichiers, assurant ainsi le fonctionnement de l’application suivant les paramètres demandés. Ce n’est pas de la magie, mais on pourrait presque s’y méprendre .

Conclusion |

Avec ce chapitre, c’est encore tout une parties des possibilités de flash qui se sont dévoilées à nous.

Néanmoins beaucoup de notions abordées ici sont relativement complexes à appréhender, aussi ne vous jetez pas à l’eau précipitamment, prenez le temps de bien lire les explications (plusieurs fois si nécessaires), et n’hésitez pas à poser des question, que ce soit par le biais des commentaires ou du forum, ils sont là pour ça.

J’espère une fois de plus avoir était intéressant (et surtout compréhensible), et que malgré le niveau de difficulté croissant, vous restez toujours d’attaque pour la suite !

Pour la suite justement, nous allons « lever le pied » un peu et le prochain chapitre sera une sorte de révision puisque nous réaliserons la seconde sous-partie (profil.fla). Maintenant que nous savons charger les sous-parties, il va bien falloir les faire !