explainMe

Introduction |

Jusque-là nous nous sommes appliqué à construire la scène principale, disons « l’interface générale » du site. Dans ce nouveau chapitre, nous allons commencer à préparer la première section qui contiendra tous les visuels de nos jolies petits projets que nous souhaitons dévoiler au monde entier, j’ai nommée : la section Portfolio !

Petit rappel pour ceux qui l’aurait oublié, cette section contiendra 2 types de « données » : des images, et des textes.

La préparation des éléments |

Comme tout site internet, il va nous falloir préparer tout ces éléments externes afin de pouvoir travailler avec dans flash.

Nous aurons donc besoin des éléments suivants :

• les images de nos travaux
• les textes correspondant

Pour ceux qui souhaitent mettre aussi des vidéos sur leur site, nous verrons cela plus tard.

Pour organiser tout ça nous avons 2 options :

1. tout importer dans flash et directement le placer ‘en dur’ dans notre fichier (c’est ce que nous ferons dans la méthode 1)
2. gérer les liens vers les images et les textes via un fichier XML comme s’il s’agissait d’une mini base de données (c’est comme ça que nous procèderont pour les méthodes 2 & 3)

Et comment on fait quand on n’a jamais fait de XML ? Hein ?!

Alors là pas de souci rassurez-vous. On va faire un « cours accéléré » de XML vous allez voir, ça n’a rien de difficile.

Mais avant nous allons réaliser la version avec le minimum d’ActionScript puisqu’elle ne nécessitera pas de XML.

Pour ça voyons qu’elle va-t-être la structure de cette sous-partie :

Je vais utiliser un nombre volontairement restreint de fichiers pour mon exemple, mais vous pouvez utiliser la même méthode quelque soit le nombre de projets que contient votre book. De plus pour ne pas compliquer encore plus les choses (et embrouiller tout le monde), j’ai préparé mes fichiers pour qu’ils aient tous les mêmes dimensions. Donc je ne présenterai pas ici de technique pour adapter la forme du contenant à celle du contenu puisque tous les fichiers ont la même taille et orientation. Mais si vous souhaitez faire ça nous pouvons toujours en parler sur le forum.

la sous-partie Portfolio de mon site comportera les éléments suivants :

• Graphisme : 4 projets
• Web : 3 projets
• 3D : 2 projets
• Sketch : 1 projet

Chaque projet sera donc représenté par une image ainsi qu’un texte explicatif.

Une fois de plus je n’utilise qu’une seule image par projet pour garder un contenu le plus simple possible afin de faciliter les explications, mais tout est envisageable. Aussi vous pouvez décider d’avoir plusieurs images pour un même projet, et même avoir un nombre différent d’images pour chaque projet (il faudra juste adapter le fichier XML dans ce sens, et surtout modifier les fonctions AS en charge du chargement et de l’affichage des projets). Gardez à l’esprit qu’il s’agit ici d’un exemple simple de ce qu’il est possible de faire. Il ne tiens qu’à vous de vous en inspirer pour réaliser des sites tous plus fabuleux les uns que les autres.

Méthode 1 : minimum d’ActionScript |

Comme cette méthode ne nécessite pas de fichier XML, nous allons directement importer nos fichiers dans le flash et copier/coller nos textes depuis notre traitement de texte.

Vidéo 13 : sous-partie Portfolio V1 [28'00] :

Voilà nous avons donc créé notre fichier incluant directement les images et les textes de nos projets. C’est une méthode assez facile à mettre en place mais elle n’est pas des plus intéressante, car elle limite les options en terme de mise à jour du site.
En effet avec ce système, le moindre changement au niveau d’un projet nécessite d’éditer à nouveau le flash et d’effectuer directement les modifications « à la main ».
De plus les images étant déjà présentes dans le SWF final, le poids de ce SWF sera relativement conséquent (en fonction du poids des images et de leur nombre), donc d’autant plus long à charger.

Petite présentation du format XML |

Avant de voir comment réaliser cette sous-section en AS2 et AS3 à l’aide d’un fichier XML, voyons rapidement ce qu’est un fichier XML et comment il doit être rédigé.

Le XML c’est quoi ?

Le XML (pour eXtensible Markup Language ou langage de balisage extensible) est un langage générique dont vous déterminez  vous-même la syntaxe. Il peut se rédiger avec n’importe quel outil de texte (le bloc note par exemple pour les Windowsiens). Le fichier doit être enregistré avec l’extension .xml et respecter une syntaxe enfantine.

De quoi y cause lui là ?!

Je m’explique :
Vous l’aurez donc compris, le XML sert à organiser du contenu.

Mais où le place-t-on ce contenu ?

Vous pouvez placer des informations soit entre 2 balises « couples » :

1

<balise>Ici le contenu.</balise>

Soit en attribut d’une balise auto-fermante :

ou en attribut de la balise ouvrante « d’un couple » :

1

<balise attribut="Ici un autre contenu"></balise>

Seulement vous devez garder à l’esprit que l’on ne peut pas stocker autant d’informations dans un attribut qu’entre 2 balises d’un « couple ». Aussi, généralement les attributs sont utilisés pour stocker des information relativement courtes (un lien, un titre, un chiffre,…), alors que les balises « couples » seront plutôt utilisées pour encadrer un contenu plus important (un texte, d’autres balises, …).
Dernière chose enfin, vous pouvez aussi saisir des annotations dans un fichier XML, qui ne seront pas lues comme contenant des données, mais juste comme indicateurs pour vous. Comme pour le HTML (décidément).

La syntaxe d’une annotation prend la forme suivante :

1
2

<!-- Ceci est une annotation -->
<balise>Ici du contenu.</balise>

Où <!– et –> font office de balises ouvrante et fermante.

Bon tout ça c’est bien beau mais quel est l’intérêt ?

Vous vous souvenez au tout début je vous parlais du fait que VOUS définissiez les noms des balises, et bien nous y voilà, c’est grâce à cette propriété du langage XML, couplé à sa simplicité de rédaction que nous allons pouvoir créer un fichier qui contiendra nos données de manière organisée et intuitive.

Prenons un exemple en rapport avec notre site-portfolio, le fichier XML de mon site d’exemple :

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

< ?xml version="1.0" encoding="utf-8"?>
<portfolio>
	<!-- GRAPHISME -->
	<graphisme>
		<projet nom="Graphic 1" typeProjet="Wallpaper" image="images/graphisme/01.jpg">
		Description du premier projet de la catégorie graphisme.
		</projet>
		<projet nom="Graphic 2" typeProjet="Wallpaper" image="images/graphisme/02.jpg">
		Description du second projet.
		On peut également revenir à la ligne.
		</projet>
		<projet nom="Graphic 3" typeProjet="Wallpaper" image="images/graphisme/03.jpg">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at lorem. Ut tempor volutpat lectus. Vivamus eleifend lacinia lectus. Nulla facilisis mollis tortor. Quisque tristique tincidunt quam.
 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</projet>
		<projet nom="Graphic 4" typeProjet="Affiche" image="images/graphisme/04.jpg">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at lorem. Ut tempor volutpat lectus.
		Vivamus eleifend lacinia lectus.
		Nulla facilisis mollis tortor. Quisque tristique tincidunt quam.
 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</projet>
	</graphisme>
	<!-- MULTIMEDIA -->
	<multimedia>
		<projet nom="Multimédia 1" typeProjet="CD-ROM" image="images/multimedia/01.jpg">
		Vivamus eleifend lacinia lectus.
		Nulla facilisis mollis tortor. Quisque tristique tincidunt quam.
		</projet>
		<projet nom="Multimédia 2" typeProjet="Site web" image="images/multimedia/02.jpg">
		Vivamus eleifend lacinia lectus.
		Nulla facilisis mollis tortor.
		Quisque tristique tincidunt quam.
		</projet>
		<projet nom="Multimédia 3" typeProjet="Site web" image="images/multimedia/03.jpg">
		Vivamus eleifend lacinia lectus.
		Nulla facilisis mollis tortor. 
 
		Quisque tristique tincidunt quam.
		</projet>
	</multimedia>
	<!-- 3D / SYNTHESE -->
	<synthese>
		<projet nom="Synthese 1" typeProjet="Film d'animation" images="images/synthese/01.jpg">
		Vivamus eleifend lacinia lectus.
		Nulla facilisis mollis tortor.
		Quisque tristique tincidunt quam.
		</projet>
		<projet nom="Synthese 2" typeProjet="Film d'animation" images="images/synthese/02.jpg">
		Vivamus eleifend lacinia lectus.
		Nulla facilisis mollis tortor.
 
		Quisque tristique tincidunt quam.
		</projet>
	</synthese>
</portfolio>

Vous voyez la logique ?

Ça tombe bien parce que vous allez devoir construire votre propre fichier pour continuer le cours…

Méthode 2 : création de la sous-partie Portfolio en AS2 |

Donc nous voici tout excités et prêts à en découdre avec flash pour enfin voir nos plus belles réalisations apparaître à l’écran.

Voyons tout d’abord comment réaliser notre fichier flash avant d’attaquer le code :

Vidéo 14 : sous-partie Portfolio V2 & 3  [25'33] :

Petite précision sur l’identifiant de liaison en AS2 et AS3 :

Contrairement à ce que je raconte dans la vidéo, l’identifiant de liaison ne s’affecte pas exactement de la même manière en AS2 et AS3. Aussi voici une petite illustration qui vous présente les différences d’une version à l’autre :

Et maintenant que notre fichier est prêt, attaquons-nous au code.

Le code AS2 :

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

//
//-------------------------------------------------------------------------------------- INITIALISATIONS ---//
//
this.infosChargement.texteCharge.text = "Chargement des projets en cours...";
this.infosChargement._visible = true;
//
//--- Importation de la class Tween ---
//
import mx.transitions.Tween;
import mx.transitions.easing.*;
//
//-------------------------------------------------------------------- Importation de la classe XPathAPI ---//
//
import mx.xpath.XPathAPI;
//
//----------------------------------------------------------------------------------- Chargement du XML ---//
//
Portfolio = new XML();
//
//--- Chargement du fichier XML ---
//
Portfolio.load("portfolio.xml");
//
//--- On ignore les espaces blancs ---
//
Portfolio.ignoreWhite = true;
//
//--- Chargement des valeurs une fois la base chargée ---
//
Portfolio.onLoad = function(success:Boolean) {
	if (success) {
		infosChargement._visible = false;
		chargeProjets("graphisme");
	} else {
		infosChargement.texteCharge.text = "Erreur lors du chargement des projets.";
	}
};
//
//------------------------------------------------------------------------------------------- Fonctions ---//
//
//
//--- Fonction qui charge les projets de GRAPHISME ---
//
function chargeProjets(categorie:String) {
	//
	//--- On récupère la liste des projets de la catégorie ---
	//
	var chemin:String = "/portfolio/"+categorie+"/*";
	var graphisme:Array = XPathAPI.selectNodeList(Portfolio.firstChild, chemin);
	//--- Variable qui va permettre ade scroller d'un projet à l'autre ---
	var index:Number = 0;
	//
	//--- Boucle qui génère les boutons et leurs actions ---
	//
	for (i=0; i

Houlaaaaa, mais c’est quoi tout s’truc j’y comprends rien ?!

Pas de panique, dans quelques lignes vous ne direz plus ça ! (enfin j’espère ).

Alors commençons par la phase d’initialisation :

this.infosChargement.texteCharge.text = « Chargement des projets en cours… »;
this.infosChargement._visible = true;
//
//— Importation de la class Tween —
//
import mx.transitions.Tween;
import mx.transitions.easing.*;

Comme nous l’avons évoqué plus haut (dans la vidéo pour ceux qui ne s’en souviennent pas), nous allons « scroller » d’un projet à l’autre grâce à la classe Tween, comme nous avons pu le faire déjà avec le curseur du menu.

Donc nous importons la classe Tween, comme ça c’est fait on en parle plus.

Mais reste 2 lignes juste avant…
Ces lignes servent tout simplement à afficher un texte pendant le chargement du fichier XML afin d’informer l’internaute. Donc on affecte la phrase au champ texte dynamique texteCharge du clip infosChargement que nous avons créé puis nous le rendons visible (au cas où il aurait été masqué : nous servira plus tard).

Ensuite, pour nous simplifier la vie, nous importons la classe XPathAPI qui va grandement nous simplifier la vie lors de l’accès aux nœuds XML :

import mx.xpath.XPathAPI;

Un nœud ? Kecec’est ça ?

Ah oui les nœuds ! Alors est appeler un nœud, une « branche » de l’architecture XML.

Ok super l’explication ! Vraiment là bravo.

Par exemple ici :

1
2
3
4
5

<balise1>
  <balise2>
     <balise3>Ici du contenu.</balise3>
  </balise2>
</balise1>

balise1 est un nœud XML, balise2 est un nœud XML, etc, etc…

En gros un « nœud », c’est un couple balise ouvrante/balise fermante. Et oui car on ne peux pas réellement considérer une balise auto-fermante comme un nœud puisque, mise à part des attributs, elle ne pourra contenir de sous-arborescence (formée par d’autres balises).

Voilà pour le nœud.

Je ne peux malheureusement pas m’embarquer dans une explication de la classe XPathAPI, sinon le chapitre va faire 5 km de long ! Néanmoins vous pouvez trouver d’excellentes explications aux adresses suivantes :

Exemples de manipulations sans XPathAPI : Gestion du XML (dans flash) (cliquez ActionScript dans le menu du haut, puis 8.Gestion le XML)

Exemples de manipulations avec XPathAPI : Utilisation du format XML dans FLASH

Le chargement du fichier XML :

Avant de pouvoir faire quoi que ce soit avec les données contenues (et organisées ) dans le fichier XML, il nous faut le charger. Le code qui se charge de cette opération est le suivant :

//
//———————————————————————— Chargement du XML —//
//
Portfolio = new XML();
//
//— Chargement du fichier XML —
//
Portfolio.load( »portfolio.xml »);
//
//— On ignore les espaces blancs —
//
Portfolio.ignoreWhite = true;
//
//— Chargement des valeurs une fois la base chargée —
//
Portfolio.onLoad = function(success:Boolean) {
if (success) {
infosChargement._visible = false;
chargeProjets( »graphisme »);
} else {
infosChargement.texteCharge.text = « Erreur lors du chargement des projets. »;
}
};

Alors qu’est-ce que ça veut dire tout ça :

- 1 – On déclare un nouvel objet XML qui contiendra les données de notre fichier et sera manipulable en ActionScript :

Portfolio = new XML();

- 2 - Maintenant que nous avons un objet XML, il faut bien le remplir avec un peu de contenu, donc on charge à l’intérieur le contenu de notre fichier :

Portfolio.load( »portfolio.xml »);

- 3 - L’étape suivante est optionnelle. Elle permet de spécifier à flash d’ignorer les éventuels espaces vides (blanc) avant et après la valeur d’un nœud :

Portfolio.ignoreWhite = true;

Qu’est que c’est encore que ce truc ?

Lorsque vous créez un fichier XML, il est possible qu’un espace se glisse à votre insu au début ou à la fin de la valeur d’un nœud, or cet espace vide est indésirable, donc on demande à flash de l’ignorer en saisissant le code ci-dessous.

Exemple d’espace blanc :

1
2
3
4

<!-- avec espaces blancs -->
<balise>  valeur 1 </balise>
<!-- sans espaces blancs -->
<balise>valeur 2</balise>

Par défaut la propriété ignoreWhite est définie sur false. À vous de voir s’il est nécessaire de l’utiliser ou non.

- 4 - On contrôle le bon chargement du fichier XML.

L’avantage d’un objet XML, c’est que l’on peut (entre autres choses) contrôler s’il est correctement chargé ou non. Histoire d’en informer l’utilisateur, c’est toujours plus agréable pour lui !

Pour ce faire, nous pouvons faire référence à la propriété (l’état si vous préférez) onLoad :

Portfolio.onLoad = function(success:Boolean) {
if (success) {
infosChargement._visible = false;
chargeProjets( »graphisme »);
} else {
infosChargement.texteCharge.text = « Erreur lors du chargement des projets. »;
}
};

Cela consite, comme nous l’avons déjà fait pour les boutons, à écrir une déclaration assez proche de celle d’une fonction.

Portfolio.onLoad = function(success:Boolean) {
//— actions —
}

Ensuite dans cette fonction de contrôle, nous allons tester l’état du chargement via la variable success que nous « passons » à la fonction lors de la déclaration. Vous noterez que je marque le mot passons entre guillemets car en réalité cette variable viens directement de l’objet XML lui-même. Pour simplifier disons que nous nommons une valeur intrinsèque à l’objet Portfolio sous la forme de la variable success, afin de pouvoir y faire référence par la suite.

Donc maintenant que lui avons donné une existence plus concrète pour nous en lui affectant un nom, nous pouvons le tester :

- S’il est true, alors le chargement s’est bien passé, donc nous masquons « l’info-bulle » infosChargement et nous lançons la fonction pour charger, par défaut, les projets de la section graphisme chargeProjets( »graphisme »); :

if (success) {
infosChargement._visible = false;
chargeProjets( »graphisme »);
}

Ici if(success) est équivalent à if(success == true), c’est une forme raccourcie.

- Si la valeur de success est false, alors cela signifie qu’il y a eu un problème lors du chargement du fichier XML, donc on en informe l’utilisateur en modifiant le texte de « l’info-bulle » infosChargement :

else {
infosChargement.texteCharge.text = « Erreur lors du chargement des projets. »;
}

Bien, maintenant que notre fichier XML est correctement chargé, nous allons pouvoir l’attaquer avec l’ActionScript pour en soutirer les informations qui nous intéresse et ainsi afficher nos beaux projets de manière dynamique.

Parcourons le fichier XML et affichons nos projets :

Donc nous voici au cœur de la fonction chargeProjets();, la fonction la plus importante (et la plus longue aussi) de cette section :

function chargeProjet(categorie:String) {
//
//— Toutes les actions qui seront nécessaires à l’obtention des informations et leur traitement —
//
}

Première question :

Pourquoi passe-t-on un argument à cette fonction ?

Effectivement on pourrait se dire qu’il n’est pas nécessaire de fournir un argument à cette fonction. Oui mais souvenez-vous, nous avons organisé nos projets en sections (graphisme, web, 3d, sketch). Et c’est tant mieux car nous ne voulons afficher qu’une seule section à la fois (donc qu’une seule « branche » de notre fichier XML). Cependant nous devons conserver un caractère modifiable à cette option puisqu’elle dépendra (plus tard) du choix de l’internaute. Donc dès à présent nous mettons cette variable en place afin de n’écrire qu’une seule fonction qui sera donc utilisable pour toute les sections du portfolio (il nous suffira juste de préciser la section que l’on souhaite afficher lors de notre appel de la fonction).

Notez que pour le moment, bien que la fonction attende un argument, nous offrant du même coup la possibilité de choisir la section à afficher, l’appel est fixe puisqu’il est définit un peu plus haut « en dur » lors du test du chargement du XML :
chargeProjets( »graphisme »);
Ne vous inquiétez pas c’est tout à fait normal car pour le moment (pendant notre phase de développement et de test) nous souhaitons contrôler les événements uniquement depuis le fichier portfolio.swf, mais plus tard, nous modifierons un peu le code pour que le choix puisse se faire via le menu et le sous-menu qui eux, se trouvent dans le fichier interface.swf.

Cela étant dit, voyons un peu ce que nous réserve cette fonction…

Tout d’abord, il nous faut aller nous « placer » au bon endroit dans l’arborescence du fichier XML pour pouvoir manipuler les données correspondant à la catégorie que l’on souhaite afficher.
Comme nous venons de le voir, cette catégorie arrive en argument de fonction sous la forme d’un String (chaîne de caractères) contenu dans la variable nommée categorie.

Voici donc les premières étapes que nous allons réaliser :

1. On définit le chemin de la catégorie sur laquelle on souhaite travailler (la portion qui nous intéresse dans l’arborescence du XML).
2. On récupère les données dans une variable nommée cat (pour « catégorie », categorie étant déjà utilisé pour l’argument ).
3. Notez également que j’en profite pour initialiser une variable index qui nous servira un peu plus tard pour basculer d’un projet à l’autre. Nous y reviendrons.

//
//— On récupère la liste des projets de la catégorie  —
//
var chemin:String = « /portfolio/ »+categorie+ »/* »; [1]
var cat:Array = XPathAPI.selectNodeList(Portfolio.firstChild, chemin); [2]
//— Variable qui va permettra de scroller d’un projet à l’autre —
var index:Number = 0; [3]

Attardons-nous un instant sur ces quelques lignes (surtout les 2 premières en fait) :

La première définie donc l’adresse de la portion du fichier sur laquelle nous allons travailler. Elle prend la forme d’un String et détermine un « chemin » à suivre (d’où son nom) :
C’est pour définir ce chemin que nous avons besoin de la valeur passée en argument (categorie).

Pourquoi ?

Si vous vous souvenez bien de notre fichier XML, nous avons 4 chemins possibles (puisque 4 catégories) :

1. « /portfolio/graphisme/* »
2. « /portfolio/multimedia/* »
3. « /portfolio/synthese/* »
4. « /portfolio/sketch/* »

Mais comme on est malin (si si), et que l’on souhaite limiter le nombre de lignes pour optimiser notre code (si si j’vous assure), on a imaginé une fonction capable de marcher qu’elle que soit la catégorie, à partir du moment où on lui précise sur qu’elle catégorie elle doit pointer.

D’où le :

var chemin:String = « /portfolio/ »+categorie+« /* »;

Qui sera interprété comme l’une des 4 possibilités selon la valeur fournie à la fonction grâce à la variable categorie.

OK, mais à quoi il sert l’astérisque (*) à la fin du chemin ?

À récupéré tous les nœuds enfants du nœud categorie (donc tous les <projet></projet> présents entre les balises <graphisme></graphisme> pour notre exemple).

Bon, tout ça c’est bien jolie, mais maintenant que nous avons définit le chemin de notre cible, il faut l’utiliser :

var cat:Array = XPathAPI.selectNodeList(Portfolio.firstChild, chemin);

Et nous voici à déclarer une nouvelle variable cat (un tableau : Array) qui contiendra donc toute la portion du fichier XML, pointée grâce à notre chemin.

Ici la syntaxe XPathAPI.SelectNodeList permet donc de sélectionner la liste complète des nœuds pointés par chemin, dans l’arborescence  (Portfolio.firstChild nous plaçant à la racine de l’arborescence du fichier XML).

Et nous voici arrivé au cœur de la fonction, la boucle qui va générer les boutons et les clips avec les textes et les images qui vont bien.

Nous venons donc de récupérer la sous-arborescence contenu entre les balises <graphisme></graphisme> ( »graphisme » étant définit lors de l’appel de la fonction : petit rappel au cas où) de notre fichier XML. Afin de charger les projets et les boutons permettant d’afficher l’un ou l’autre des projets, il nous faut parcourir les informations contenus dans la variable cat. Et pour ce faire, nous allons nous servir d’une boucle for.

Qu’est-ce qu’une boucle et qu’est-ce qu’une boucle for ?

Je ne vais pas vous en faire une description détaillée ici (ce chapitre est déjà assez fourni je pense), mais disons pour simplifier qu’une boucle permet d’effectuer des actions de manière répétée par rapport à des conditions définies.

Il existe plusieurs type de boucle (for, while, for each,…). Ici j’utilise une boucle for car c’est la mieux adaptée à la situation (me semble-t-il).

La boucle for va s’écrire de la manière suivante :

for (i=0; i<cat.length; i++) {
//— actions à effectuer —
}

La variable cat étant un tableau, on peut connaître sa longueur (le nombre de valeurs qu’elle contient) grâce au code : cat.length.

Donc la boucle for va utiliser un « compteur » (i) qui, au début de la boucle aura la valeur 0 (zéro) (i=0) (car les objets tableaux commencent toujours par 0). Les actions s’effectueront tant que la valeur de i sera strictement inférieure à la taille du tableau parcouru (cat.length), et i s’incrémentera (= augmentera sa propre valeur d’une itération, selon l’itération définie) à chaque nouveau « tour de boucle »  (i++).

La notation : i++ est un raccourci pour : i = i+1

Voyons donc ce qu’il se passe pendant cette boucle :

Juste avant la boucle nous avons donc « capturé » une portion du code XML dans la variable cat. Cette variable sera donc appelée à plusierus reprise pour chaque projet afin de récupérer différentes valeurs.

Voici ce que nous allons faire à chaque tour de boucle :

1. Ajouter sur la scène une nouvelle occurrence du bouton bProjet que nous avons dans notre bibliothèque.
2. Affecter une action au clic sur ce bouton.
3. Ajouter sur la scène (dans le clip sections) une nouvelle occurrence du clip clipProjet que nous avons dans notre bibliothèque.
4. Remplir les champs de texte de notre nouvele occurrence fraîchement créée avec les informations contenues dans le fichier XML pour ce projet.
5. Charger l’image du projet dans le clip.
6. Et enfin nous incrémenterons la variable index pour le prochain clip.

this.attachMovie( »bProjet », »bProjet »+i,i); [1]
this["bProjet"+i].texteBouton.text = i+1;
//
//— On place le bouton —
//
this["bProjet"+i]._x = 10;
this["bProjet"+i]._y = 45*i;
this['bProjet'+i].indexProjet = index;
//
//— On définit l’action du bouton —
//
this["bProjet"+i].onRelease = function() { [2]
afficheProjet(this.indexProjet);
};
//
//— On charge les infos du projet —
//
sections.attachMovie( »clipProjet », »clipProjet »+i,i); [3]
sections["clipProjet"+i]._y = this['bProjet'+i].indexProjet;
//— Nom du projet —
sections["clipProjet"+i].nomProjet.text = cat[i].attributes.nom; [4]
//— Type de projet —
sections["clipProjet"+i].typeProjet.text = cat[i].attributes.typeProjet;
//— Descriptif du projet —
sections["clipProjet"+i].descriptionP = « /portfolio/ »+categorie+ »/projet[ @nom='"+cat[i].attributes.nom+ »‘]/* »;
sections["clipProjet"+i].descriptionProjet.text = XPathAPI.selectSingleNode(Portfolio.firstChild, sections["clipProjet"+i].descriptionP);
//
//— L’image du projet —
//
chargeImage(cat[i].attributes.image,sections["clipProjet"+i].imageProjet); [5]
//
//— On incrémente l’index : pour les futurs positions des autres projets —
//
index += 470; [6]

Donc en premier nous ajoutons un clip présent dans la bibliothèque (et auquel nous avons pris soins d’associer un identifiant de liaison : voir vidéo) :

this.attachMovie( »bProjet », »bProjet »+i,i);

Ici this représente la scène puisque nous souhaitons palcer nos boutons directement sur la scène. La fonction attachMovie comme vous l’avez compris, permet d’ajouter dynamiquement une nouvelle occurrence d’un objet présent dans la bibliothèque et possédant un identifiant de liaison (ici bProjet).

La syntaxe est la suivante : attachMovie(« nom de liaison de l’objet présent dans la bibliothèque », « nom de l’occurrence qui sera créée », index de l’occurrence);

Ici nous nous servons donc de la variable i pour définir le nom du bouton (ce qui nous donnera donc bProjet0, bProjet1, bProjet2,…).

Elle nous sert aussi à définir l’index de l’objet.

L’index ?

Oui l’index correspond en quelque sorte au z-index utilisé en CSS. C’est le niveau auquel se situe l’objet (ou le level si vous préférez).
Lorsque vous ajouter une occurrence sur la scène, elle se voit attribuer le niveau supérieur à l’occurrence la précédant (c’est pour ça qu’il y a toujours une occurrence qui se trouve au dessus d’un autre dans un même calque, parce que son index est plus grand). Ici donc nous utilisons la valeur de i, ainsi nous sommes sûr que l’index augmentera de lui-même.

Nous venons donc d’ajouter un bouton sur notre scène. Vous vous souvenez que notre bouton contient un champ de texte dynamique. Il faut donc lui attribuer une valeur :

this["bProjet"+i].texteBouton.text = i+1;

Ici nous lui attribuons la valeur de i + 1 (tout simplement car i est égale à 0 lors du premier tour de boucle : obligatoire car la variable cat est un tableau (Array) donc sa première valeur a la position 0). Ainsi le premier bouton aura le texte 1 et non 0.

Pour accéder au champ de texte contenu dans le clip bProjet la syntaxe reste :

bProjet.texteBouton.text = nouvelle valeur ;

Oui mais nous ne travaillon  pas ici sur bProjet directement mais sur une coccurrence créée dynamiquement, donc le code devient :

this["bProjet"+i].texteBouton.text = nouvelle valeur ;

Ensuite nous déplaçons le bouton sur la scène à l’endroit que nous avons choisi pour lui :

this["bProjet"+i]._x = 10;
this["bProjet"+i]._y = 45*i;
this['bProjet'+i].indexProjet = index;

Nous souhaitons que tous les boutons soient placés les uns sous les autres, donc la valeur sur X ne changera jamais (ici 10 histoire qu’ils ne soient pas calés contre le bord gauche), alors que la valeur sur Y doit changer (sinon tous les boutons seront superposés) donc connaissant la hauteur du clip bProjet (40px), j’incrémente la position en Y de chaque bouton en multipliant 45 par la valeur de i (45 qui nous assure donc un espace de 5 pixels entre chaque bouton). Donc les boutons auront, les coordonnées suivantes (i = 0 : Y = 0 / i= 1 : Y = 45 / i = 2 : Y = 90 / …).

La dernière ligne en revanche n’a rien à voir avec la position du bouton mais c’est une méthode pour ajouter une variable liée au bouton, sous la forme d’une propriété du bouton :

this['bProjet'+i].indexProjet = index;

Ce qui reviens à dire : « Le bouton possède une variable indexProjet donc la valeur est index » (index étant égale à 0 pour le premier tour, puis sera incrémenté à la fin de la boucle). Cette valeur nous servira pour passer d’un projet à l’autre.

Qu’allons nous dont faire avec cette valeur indexProjet ?

Les projets seront chargés dans le clip sections qui s’y vous vous souvenez bien est partiellement visible (grâce à un masque), de sorte qu’un seul projet ne soit visible à la fois. Donc les actions des boutons doivent nous permettre de « glisser » (grâce à la classe Tween), d’un projet à l’autre. indexProjet indique donc la position sur l’axe des Y qu’il faudra atteindre.

Voici un petit schéma explicatif :

Mais pour que ce glissemanet se fasse, nous devons affecter une action au clic du bouton, ce que va faire la portion de code suivante :

this["bProjet"+i].onRelease = function() {
afficheProjet(this.indexProjet);
};

Vous comprenez donc que nous déclarons ici l’action du bouton nouvellement créé (this.["bProjet"+1]) et que nous lui affectons une action au clic (onRelease) qui déclenchera la fonction afficheProjet();, laquelle reçoie en argument le fameux index du projet (this.indexProjet sa coordonnée en Y).

Rappel : ici nous faisons référence à this['bProjet'+i].indexProjet via la notation this.indexProjet car nous sommes déjà sur la propriété onRelease du bouton, donc this fait référence à this['bProjet'+i] (le bouton lui-même : this).

Voilà nous avons donc ajouté un bouton, auquel nous avons modifié le texte ainsi que la position, et enfin nous lui avons attribuer une action lorsque l’on clic dessus.

Voyons maintenant les détails du code qui ajoute le projet :

Comme nous l’avons dit plus haut, les clips projets ne sont pas ajoutés sur la scène, mais dans le clip sections, donc le code du attachMovie sera :

sections.attachMovie( »clipProjet », »clipProjet »+i,i);

Où sections remplace donc this que nous avions utilisé pour les boutons (vous voyez que c’est simple ).

Ensuite nous déplaçons le clip sur l’axe des Y, à l’intérieur même du clip sections :

sections["clipProjet"+i]._y = this['bProjet'+i].indexProjet;

En utilisant devinez quoi ?

indexProjet bien sûr !

Et c’est maintenant que nous récupérons les données du XML pour remplire notre clip ["clipProjet"+i] :

1. On récupère le nom du projet (contenu dans l’attribut nom).
2. On récupère le type de projet (contenu dans l’attribut type).
3. On récupère le texte correspondant au projet en cours.

//— Nom du projet —
sections["clipProjet"+i].nomProjet.text = cat[i].attributes.nom; [1]
//— Type de projet —
sections["clipProjet"+i].typeProjet.text = cat[i].attributes.typeProjet; [2]
//— Descriptif du projet —
sections["clipProjet"+i].descriptionP = « /portfolio/ »+categorie+ »/projet[ @nom='"+cat[i].attributes.nom+ »‘]/* »; [3]
sections["clipProjet"+i].descriptionProjet.text = XPathAPI.selectSingleNode(Portfolio.firstChild, sections["clipProjet"+i].descriptionP);

Ici rien de bien compliqué concernant le nom du projet et son type, ils sont tous deux contenus dans les attributs nom et type de la balise projet.

Nous les affectons directement aux champs de texte dynamique contenus dans le clip que nous venons d’instancier sur la scène.
Donc les premières parties des lignes de code :

sections["clipProjet"+i].nomProjet.text …

et :

sections["clipProjet"+i].typeProjet.text …

Font références aux champs de textes dynamiques (portant respectivement les noms d’occurrence nomProjet et typeProjet) à l’intérieur du clip ["clipProjet"+i] (lui-même à l’intérieur du clip sections (fiouuu… ).

La propriété text servant donc ici à préciser que nous nous apprétons à modifier les contenus de ces 2 champs (comme nous l’avons déjà vu dans les précédents chapitres).

La seconde partie de ces lignes (après le signe égale), correspond donc aux valeurs qui seront affectées à ces champs. Il s’agit évidement des valeurs correspondant aux attribut de la balise projet en cours de lecture par le script.

Nous récupérons donc chaque attribut en le nommant attribute.[le nom de l'attribut], ce qui nous donne :

… cat[i].attributes.nom;

et :

… cat[i].attributes.typeProjet;

La récupération du texte contenu entre les balises <projet></projet> est un tout petit peu différente. Il va nous falloir spécifier le chemin PUIS aller récupérer la valeur pointée par le chemin. Ce qui ce fait exactement comme nous l’avons déjà fait pour pointer vers la catégorie à la seule différence qu’ici nous allons rajouter une précision qui nous permettra de récupérer le contenu du projet en cours de lecture (en contraignat la recherche au projet dont on connais désormais le nom) :

Le chemin se présentera donc de la manière suivante :

sections["clipProjet"+i].descriptionP = « /portfolio/ »+categorie+ »/projet[ @nom='"+cat[i].attributes.nom+ »‘]/* »;

Nous ajoutons donc une nouvelle « propriété au clip (descriptionP) qui contiendra le chemin. Et dans ce chemin justement notez comment nous rajoutons une précision sur le projet à sélectionner grâce à l’un des attribut :

« /portfolio/ »+categorie+ »/projet[ @nom='"+cat[i].attributes.nom+ »‘]/* »

Cette ligne nous permet donc de pointer vers le projet ayant comme valeur d’attribut nom celle que l’on viens de récupérer (cat[i].attribute.nom), le projet appartenant bien à la catégorie en cours de « lecture » (categorie).

Ensuite ne nous reste plus qu’à affecter au champ texte dynamique descriptionProjet du clip ["clipProjet"+i], la valeur pointée (grâce à l’XpathAPI) :

sections["clipProjet"+i].descriptionProjet.text = XPathAPI.selectSingleNode(Portfolio.firstChild, sections["clipProjet"+i].descriptionP);

La dernière information qu’il nous reste à récupérer pour le projet est l’image (ahhh, enfin !!!). Et si l’url de l’image est bien contenue dans l’attribut image de la balise projet, elle devra être traîtée par une fonction qui chargera l’image au bon endroit.

Donc pour ce faire nous allons appeler une fonction que j’ai nommé chargeImage en lui passant 2 arguments :

1. l’url de l’image à charger
2. la cible où l’image devra être chargée.

En effet pour « simplifier » la réalisation, j’ai au préalable créé un clip vide portant le nom d’occurrence imageProjet, à l’intérieur du clip clipProjet (qui est présent dans la bibliothèque et qui sert de référant à tous les clips ["clipProjet"+i] qui seront ajoutés sur la scène via la boucle).

Donc l’appel de la fonction nous donne ceci :

chargeImage(cat[i].attributes.image, sections["clipProjet"+i].imageProjet);

Où chargeImage est donc la fonction appelée, à laquelle nous fournissons l’url de l’image et le ciblage vers le clip vide de destination de l’image.

Enfin nous arrivons à la fin de la boucle.

Prêt pour un deuxième tour ?

Non rassurez-vous, c’est tout l’interêt de la boucle, on ne l’écrit qu’une fois et elle se charge d’effectuer le travail autant de fois que necessaire à notre place (encore heureux).

Juste une dernière chose avant de laisser la boucle tranquille, nous allons incrémenter la valeur de la variable index (souvenez-vous elle sert à placer chaque nouveau clip ["clipProjet"+i] sur l’axe des Y dans le clip sections).

index += 470;

Et pourquoi 470 pixels ?

Rappelez-vous la vidéo, c’est pile-poil la hauteur du fichier portfolio que nous avons définie lors de la création du fichier fla (et c’est également la hauteur du masque placé au dessus du clip sections donc ainsi nous sommes sûr que chaque nouveau clip sera invisible tant que nous ne cliquons pas sur le bouton qui nous fait « glisser » vers lui (merci la classe Tween).

Voilà la boucle est finie.

Certains, un peu plus avancés en AS auront remarqué que j’ai à l’avance créé un clip et un bouton contenant tout ce dont j’avais besoin pour afficher un projet. Me permettant ainsi de le dupliquer et de le « remplir » à chaque nouveau tour de boucle. Et ils se sont peut-être demandé pourquoi je n’avais pas directement créé tous ces éléments directement en AS (ce qui est faisable en AS2 ou en AS3 d’ailleurs). Tout simplement pour ne pas en rajouter trop pour les débutants complets qui auront déjà suffisamment de choses à assimiler ici sans venir en rajouter une couche relativement dense par dessus.

J’en profite pour signaler à ceux qui ne l’aurait pas remarqué, que nous n’avons pas besoin d’avoir des noms d’occurrences différents pour les clips à l’intérieur des clips instanciés (le champ de texte nomProjet aura le même nom d’occurrence dans toutes les occurrences ["clipProjet"+i] qui seront créées par exemple). Ceci ne pose pas de problème dans la mesure où aucune confusion ne sera possible puisque les noms d’occurrences de leurs clips parents respectifs seront, eux, différents (clipProjet1, clipProjet2,… en fonction de i).

Bien tout ça c’était pour la boucle principale, mais reste 2 fonctions qui sont appelées par cette boucle (ou par les actions des boutons initialisées dans la boucle) :

chargeImage et afficheProjet

Voyons d’abord la fonction qui charge les images des projets :

function chargeImage(url:String, cible:Object) {
var loaderImage:MovieClipLoader = new MovieClipLoader();
loaderImage.loadClip(url,cible);
}

Remarquez qu’elle n’est pas très longue. Et non pas besoin de tant de code que ça finalement pour charger un élément !

Donc notre fonction reçoie 2 arguments : url et cible.

url contient une chaîne de caractères puisqu’elle correspond à l’adresse de l’image récupérée dans le fichier XML.

cible en revanche est un objet. Tiens, tiens… Et oui dans ce cas la variable contient le ciblage vers un clip destiné à contenir l’image chargée, et ce clip est un… objet !

Cela étant dit, voyons exactement ce qui se trame dans cette fonction :

Tout d’abord nous allons définir un nouvel objet de type MovieClipLoader, j’ai nommée : loaderImage.

Notez qu’il se déclare comme une variable, d’où la présence du mot var, mais il s’agit bien d’un objet de programmation (et non un objet « physique » comme un clip sur la scène par exemple).

Mais qu’est-ce qu’il est encore allé nous chercher là ?!

Ce type d’objet permet donc de charger un élément externe (un SWF, une image, …) et plus encore. À vrai dire, cette méthode a supplanté le fameux loadMovie car elle offre nativement la possibilité de récupérer des informations sur le chargement de l’élément (utile pour afficher la progression du chargement par exemple). Cependant pour ce premier « rendez-vous » avec cette méthode, nous n’allons pas l’utiliser, nous allons nous contenter de faire appel à sa fonction première : l’exécuton du chargement point barre.

Nous reviendrons plus en détails sur ces méthodes (qui servent à afficher les infos sur le chargement en cours) lorsque nous réutiliserons cet objet pour charger les sous-parties dans le fichier interface (dans un futur chapitre).

Bien, maintenant que nous avons déclaré ce nouvel objet, nous allons lui indiquer de charger l’image dans le clip cible en utilisant sa méthode loadClip.

Et devinez quoi ? loadClip attend 2 paramètres : une url, et un clip cible (ça alors, c’est fou les coïncidences ).

La déclaration est donc la suivante :

loaderImage.loadClip(url,cible);

Et l’image est chargée !

Pour terminer, voyons rapidement la fonction afficheProjet qui sera appelée lors du clic sur l’un des boutons créés durant la boucle :

function afficheProjet(indexProjet:Number) {
var deplaceSections:Tween = new Tween(sections, « _y », Strong.easeOut, sections._y, -indexProjet, 1, true);
}

Et oui ! Rien d’extraordinaire ici, vous l’aviez d’ailleurs certainement déjà compris depuis le premier coup d’œil au code, il s’agit d’une « simple » animation grâce à la lcasse Tween.

C’est donc d’une animation sur l’axe des Y, directement sur le clip sections (puisqu’il contient tous les projets, autant qu’il serve).

Le principe est donc de faire « glisser » le clip sections du bas vers le haut (et inversement) en pointant vers la coordonnée de chaque clip ["clipProjet"+i] sur l’axe des Y. Seulement comme nous allons devoir « descendre » pour aller jusqu’au clips 2, 3, … autant que ce soit eux qui montent. Et pour ça il faut faire monter le clip sections (donc nous affecterons la coordonnée de chaque clip en négatif ! (-indexProjet). Ça tombe bien car la valeur indexProjet est fournie en argument à la fonction lors de son appel.

Et oui rappelez-vous c’est la proriété que nous avons ajouté à chaque bouton :

this['bProjet'+i].indexProjet = index;

index étant une variable définie à 0 (zéro) au début de la boucle et s’incrémentant de 470 en 470.

Petite précision : nous indiquons ici une valeur négative pour la coordonnée en Y vers laquelle doit se déplacer le clip sections. Nous permettant ainsi, en montant, d’afficher les autres projets qui sont situés plus bas (et donc invisibles grâce au masque). Mais alors que se passe-til si je suis au projet 3 (sections est donc en -940 sur Y) et que je décide d’aller voir le projet 2 (à -470) ? sections doit donc « glisser » vetrs le bas pour s’y rendre. Pas de panique il le fera, et ce sans modifier notre code.

Ah ?

Et oui, -470 est supérieur à -970 donc ça fonctionne tout seul ! Ahhhh la magie des mathématiques…

Et nous avons terminé notre sous-partie Portfolio (version AS2) qui peux désormais charger une section depuis notre fichier XML.

Pour le moment cependant, elle fonctionne de manière autonome, c’est à dire que nous devrons lui apporter quelques modifications lorsque nous voudrons la charger dans le fichier parent interface.swf. C’était une volonté de ma part pour mieux vous présenter le chargement via un fichier XML, ainsi vous pouvez pour le moment modifié l’appel :

chargeProjets( »graphisme »);

En remplacant « graphisme » par « multimedia » ou tout autre nom de section, afin de constater que le code fonctionne quelque soit la section appelée (faites vos tests avec [Ctrl + Entrée]).

Méthode 3 : création de la sous-partie Portfolio en AS3 |

Voici le code :

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

//
//---------------------------------------------------------------- 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 categorie:String="graphisme";
this.infosChargement.visible = true;
this.infosChargement.text = "Section cours de chargement...";
//
//--- 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(categorie);
}
//
//--- 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);

Comme nous allons le voir, la procédure reste, dans les grandes lignes, assez proche de celle que nous venons de réaliser pour l’AS2. en fait nous allons juste « adapter » le code à l’AS3.

La partie d’initialisation tout d’abord change quelque peu puisqu’ici il n’est plus nécessaire d’utiliser la classe XpathAPI puisque l’AS3 possède désormais une classe XML bien plus simple à utiliser.

//
//—————————————————————- 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 categorie:String= »graphisme »;
this.infosChargement.text = « Section cours de chargement… »;
//
//— Importation de la class Tween —
//
import fl.transitions.*;
import fl.transitions.easing.*;

Il s’agit donc ici de déclarer tout d’abord :

• un objet XML (portfolioXML)
• un objet URLLoader (chargeDonnees)
• un objet URLRequest (adresseFichier)

AAAAARRRRRGGGGHHHHH !

Mais non ce sont juste des objets qui vont nous permetttre de charger (URLLoader) et d’accéder (XML) au XML par la suite. D’ailleurs vous avez, à n’en pas douter, déjà compris à quoi sert l’objet URLRequest : à fournir l’adresse d’un fichier XML.

var adresseFichier:URLRequest=new URLRequest(« portfolio.xml »);

Ici donc le fichier XML se trouve au même niveau que le SWF final (si vous rangez vos XML dans un dossier XML, l’adresse devient : « XML/portfolio.xml » : cqfd).

Nous reviendrons sur les 2 autres objets tout de suite après, mais voyons le reste des initialisations :

var index:Number=0;
var categorie:String= »graphisme »;
this.infosChargement.visible = true;
this.infosChargement.text = « Section cours de chargement… »;

Ici il s’agit juste de déclarer 2 variables et un texte d’attente :

• index qui sera utilisée, comme en AS2, pour naviguer d’un projet à l’autre (puisque nous n’affichons toujours qu’un projet à la fois).
• categorie, qui déterminera la catégorie que nous souhaitons afficher (graphisme, multimédia, …). Elle est déclarée en avance car j’ai voulu vous présenter une autre manière de faire (de toute façon ces 2 méthodes se rejoindront lorsque nous modifierons les codes dans un prochian chapitre…).
• infosChargement, comme nous avons pu le voir dans la vidéo, est une « info-bulle » destinée à informer l’internaute sur ce qu’il se passe (et accessoirement nous lors de nos tests ), donc ici nous affichons un texte d’attente et nous affichons le clip qui le contient.

Enfin les 2 dernières lignes chargent la classe Tween et les méthodes d’accélération, comme en AS2 :

import fl.transitions.*;
import fl.transitions.easing.*;

Voilà pour les initialisations. Ensuite nous arrivons aux fonctions, mais avant de vous les présenter, nous allons faire un tour directement à la fin du code, pour voir les 2 dernières lignes :

chargeDonnees.load(adresseFichier);
chargeDonnees.addEventListener(Event.COMPLETE, chargementFini);

Pour ma part je les ai placées à la fin du code car je préfère d’abord écrire mes fonctions avant de les appeler (c’est une manière de faire, chacun à la sienne). En revanche je vais vous les expliquer maintenant, ce sera certainement plus clair pour vous.

Donc nous avons 2 actions ici, la seconde est un écouteur qui permet de lancer la fonction chargementFini lorsque le chargement du fichier XML est terminé (on le sait notamment grâce à l’objet chargeDonnees).

La première est tout simplement le déclenchement du chargemet du fichier XML grâce à la méthode load de l’objet URLLoader (chargeDonnees).
Et devinez quoi ?
L’objet URLLoader a besoin d’un objet URLRequest pour fonctionner (donc on lui donne adresseFichier en argument et le tour est joué).

Voilà pour ces 2 actions.

Donc nous avons lancé le chargement du fichier XML, et maintenant quoi ?

Et bien maintenant nous allons voir ce qui se produit dans la fonction chargementFini qui est appelée lorsque le chargement est terminé (ça on s’en doute un peu remarque).

La fonction réceptionne donc un évènement en argument (sûrement le Event.COMPLETE de notre écouteur, vous en pensez quoi ?).

Ensuite voici les étapes :

1. on masque l’info-bulle puisque le chargement est terminé.
2. on affecte les informations chargées à notre objet XML (portfolioXML).
3. on lance la fonction chargeProjet qui chargera la catégorie que nous aurons sélectionnée.

function chargementFini(event:Event) {
infosChargement.visible = false; [1]
portfolioXML=new XML(chargeDonnees.data); [2]
chargeProjet(categorie); [3]
}

Pas besoin d’explication sur la propriété visible je pense car nous l’avons déjà vu.
Même chose pour l’appel de la fonction chargeProjet à laquelle nous passons un argument (categorie).
Ce qui est nouveau en revanche, c’est la deuxième ligne. Et pour cause puisqu’elle utilise les objets XML et URLLoader que nous venons de découvrir…

Donc ici il s’agit tout simplement d’affecter les données contenues dans l’objet URLLoader (qui vient de les charger ), à l’objet XML, pour pouvoir travailler avec par la suite.

Pour faire référence aux données qui viennent d’être chargées avec l’URLLoader, il suffit d’utiliser sa propriété data, ce qui nous donne : chargeDonnees.data.

L’objet XML est une sorte de « super variable ». c’est à dire qu’il contiendra tout le fichier XML que nous venons de charger. Ainsi nous n’aurons plus besoin de définir de chemin d’accès puis d’aller chercher le contenu pointé (comme nous devions le faire en AS2). Nous pourrons directement faire référence à une valeur en la pointant comme nous allons le voir plus loin.

Bien, nous en avons terminé avec la fonction chargementFini, passons donc maintenant à la fonction suivante : chargeProjet :

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

Premièrement la fonction reçoie donc un argument (categorieP). En fait il s’agit de la variable categorie, mais j’ai décidé de la nommer autrement à l’intérieur de la fonction pour n’embrouiller personne (j’espère juste que ça ne produira pas l’effet invers ).

Ayant donc pris réception de la catégorie que nous souhaitons afficher (et donc parcourir dans notre boucle), nous devons déterminer le nombre de projet de cette categorie.

Pour ce faire l’objet XML possède une propriété fort utile, j’ai nommée : children().length();

En fait pour être exact, disons plutôt qu’il s’agit de 2 propriétés qui, conjointement nous donnent exactement la réponse que nous attendons.

Examinons la syntaxe :

var nbProjets:Number=portfolioXML[categorieP].children().length();

Nous déclarons donc une nouvelle variable (var), de type nombre (Number) qui se nommera nbProjet, qui aura comme valeur le nombre (ou la longueur (length), ici c’est pareil) des enfants directs (au premier rang) (children) de notre objet XML (portfolioXML), pour le nœud spécifié (catagorieP, dans notre exemple : graphisme).

Ce qui veux dire que flash va directement aller regarder entre les balises <graphisme></graphisme>, il va compter les nœuds directement enfants du nœud graphisme, et il nous donnera le total obtenu.

Notez que la propriété children(); fait référence aux enfants directs du nœud (ici celui de la catégorie : graphisme). Si par exemple la structure d’un nœud projet contient d’autres nœuds, ils ne seront pas ajoutés au total car ils sont des enfants du nœud graphisme, mais au second rang seulement car leur parent est bien le  nœud projet (pour parler de manière imagée : parent->enfants).

Bref, nous voici donc avec notre nombre total de projets (nbProjets) pour cette catégorie, nous allons donc pouvoir l’utiliser comme valeur de buttée pour notre boucle for :

for (var i=0; i<nbProjets; i++) {
— actions —
}

Ensuite dans notre boucle nous retrouvons les mêmes actions que celles de la boucle AS2, si ce n’est que la syntaxe est bien souvent assez différente.

Ajout du 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;

Vous voyez qu’ici il n’est pas question d’attachMovie (qui n’existe plus en AS3), mais nous déclarons un nouvel objet boutonP, qui est une occurrence de l’objet bProjet, comme nous le ferions pour un objet natif de flash (un movieclip par exemple). bProjet étant le nom de liaison affecté à l’objet présent dans la bibliothèque comme vous l’aurez compris.

Ensuite nous définissons l’emplacement de ce nouvel objet en précisant ses coordonnées sur x et y.

De plus, comme vous le voyez ici, la déclaration du nouvel objet boutonP ne réclame pas de nom, donc pour le moment notre boutonP n’a pas de nom d’occurrence et ne peux donc pas être affecté par des actions tel que le clic ou autre. Qu’à cela ne tienne, il suiffit de lui en donner un (et on l’incrémente bien sûr) :

boutonP.name= »bProjet »+i;

Qui a dit que l’ActionScript était compliqué ?

Et bien sûr on personnalise son nom d’occurrence grâce à notre variable i (n’oublions pas que nous sommes dans une boucle et que cette objet sera créé autant de fois qu’il y a de projet dans la catégorie, donc il faut préciser à chaque fois un nom d’occurrence différent, sinon flash va s’emmêler les pinceaux).

Tout ça c’est bien beau mais alors à quoi il sert le addChild(); qui vient ensuite ?

Et bien mes amis… Jusque-là nous avons déclaré un nouveau bonton (boutonP), occurrence de l’objet bProjet présent dans notre bibliothèque, et qui porte le nom d’occurrence « bProjet »+i (sous-entendu, bProjet0 au premier tour de boucle, puis bProjet1, bProjet2, …).
Cependant pour l’instant notre nouveau bouton n’est pas sur la scène ! Et oui addChild(); sert à ajouter une occurrence sur la scène, tout simplement. Donc :

addChild(boutonP);

Ne nous reste plus qu’à rajouter une propriété à cet objet (comme nous l’avons fait en AS2) :

boutonP.indexProjet=index;

index est égale à 0 (zéro) au premier tour de boucle (c’est la valeur que nous lui avons donné lors de l’initialisation), puis il s’incrémentera de 470 (comme en AS2) à chaque fin de boucle pour le tour suivant.

Puis de définir la valeur du champ de texte dynamique qu’il contient :

boutonP.texteBouton.text = i+1;

En prenant soin d’ajouter 1 puisque i démarre à 0 (zéro).

Notre bouton créé, nous allons maintenant définir son action. Pour cela, rien de bien compliqué, il nous suffit d’utiliser un écouteur qui appellera la fonction afficheProjet :

boutonP.addEventListener(MouseEvent.CLICK, afficheProjet);

Mais on ajoute l’écouteur à boutonP ? Pas à « bProjet »+i ?

Et oui ! nous avons définit le nom d’occurrence avant, donc ce code est lue par flash comme :

bProjet0.addEventListener(MouseEvent.CLICK, afficheProjet);

Du moins pour le premier tour où « bProjet »+i vaut bProjet0.

Voilà, nous avons créé le bouton, lui avons défini une action, ne reste plus qu’à ajouter le projet et nous en aurons terminé avec la boucle (puisqu’àprès tout elle se fera les autres tours sans nous…).

Voici le déroulement :

1. Ajout d’une nouvelle occurrence du clip clipProjet sur la scène (déclaration, positionnement, définition de son nom d’occurrence, et ajout).
2. On remplie le champ de texte dynamique nomProjet avec la valeur de l’attribut nom.
3. On remplie le champ de texte dynamique typeProjet avec la valeur de l’attribut typeProjet.
4. On remplie le champ de texte dynamique descriptionProjet avec les données contenues entre les balises <projet></projet>.

Et le code :

var projetC:clipProjet=new clipProjet ; [1]
projetC.y=boutonP.indexProjet;
projetC.name= »clipProjet »+i;
sections.addChild(projetC);
//— Nom du projet —
projetC.nomProjet.text = portfolioXML[categorieP].projet[i].@nom; [2]
//— Type de projet —
projetC.typeProjet.text = portfolioXML[categorieP].projet[i].@typeProjet; [3]
//— Descriptif du projet —
projetC.descriptionProjet.text = portfolioXML[categorieP].projet[i]; [4]

Ce qui nous donne l’occasion de voir comment, en AS3, grâce à la classe XML, nous pointons vers un nœud ou vers un attribut.

Pour la valeur d’un nœud (contenu entre les 2 balises d’un « couple ») :

valeur = objetXML.nœud;

Pour la valeur d’un attribut de nœud :

valeur = objetXML.nœud.@nom_attribut;

Bien sûr objetXML doit être remplacé par le nom que nous avons défini lors de l’initialisation de notre objet (ici portfolioXML), et comme nous souhaitont ne récupérer que la sous-section correspondant à la variable categorieP, nous devons l’écrire portfolioXML[categorieP].

Et pourquoi pas portfolioXML.categorieP ?

Parce que categorieP est une variable et pas le nom d’un nœud, donc si nous l’écrivons de la sorte, flash ne trouvera jamais le nœud categorieP.

L’écriture portfolioXML[categorieP] est donc lue par flash comme étant portfolio.graphisme (car ici nous avons avons défini la valeur de la variable categorie comme étant « graphisme », et categorie deviens categorieP dans la fonction chargeProjet).

Ça va j’ai perdu personne ?

Je ne reviens pas sur projet[i], vous avez certainement compris que nous sommes obligé d’utiliser cette syntaxe car nous sommes dans la boucle, donc nous nous servons de i pour être sûr de récupérer les valeurs du projet correspondant au tour de boucle en cours.

Et nous voilà donc arrivé en fin de boucle. Ne nous reste plus qu’à incrémenter la valeur de la variable index (tout comme nous le faisions en AS2) :

index+=470;

Voici donc qui est fait pour notre boucle de génération des boutons et des projets. Intéressons-nous maintenant aux 2 fonction restantes.

Commençons par la plus simple : afficheProjet :

function afficheProjet(event:MouseEvent) {
var deplaceSections:Tween = new Tween(sections, « y », Strong.easeOut, sections.y, -event.currentTarget.indexProjet, 1, true);
}

Comme pour l’AS2, la fonction ne se composte que d’une animation Tween.

Ici la fonction reçoie un argument d’évènement (event:MouseEvent) qui provient de l’écouteur associé au bouton lors de la boucle (MouseEvent.CLICK). Aussi nous faut-il préciser (dans l’animation Tween) à quelle valeur le clip sections doit se déplacer sur l’axe des Y.

Et ça tombe plutôt bien figurez-vous car cette information est contenue dans le bouton sur lequel nous venons de cliquer (MouseEvent.CLICK) et qui donc a appelé la fonction afficheProjet.

Pardon ?

Je veux parler ici de la valeur contenue dans la prorpiété indexProjet que nous avons ajouté au bouton lors de la boucle :

boutonP.indexProjet=index;

Et nous savons, car nous l’avons déjà vu dans le précédent chapitre, que nous pouvons faire référence au bouton (ou au clip selon les cas) sur lequel nous avons cliqué via le code event.currentTarget (que l’on peut traduire par : « la cible actuel de l’événement ». L’évènement étant ici le MouseEvent.CLICK).

De fait, pour accéder à la propriété indexProjet, il nous suffit d’y faire référence comme ceci :

event.currentTarget.indexProjet

Et comme nous voulons que le clip sections remonte, nous donnons la valeur négative d’indexProjet (pour remonter sur l’axe des Y), ce qui nous donne :

var deplaceSections:Tween = new Tween(sections, « y », Strong.easeOut, sections.y, -event.currentTarget.indexProjet, 1, true);

Je ne reviens pas sur toute la syntaxe de cette animation Tween, nous l’avons déjà vu dans le chapitre précédent.

Passons à présent à la fonction chargeImage qui elle, a quelque peu changée par rapport à la version AS2 :

En effet il ne s’agit plus d’utiliser la classe MovieClipLoader utilisée en AS2, mais plutôt la classe Loader.

Voici les étapes de la fonction :

1. On déclare un nouvel objet Loader (loaderImage) qui sera en charge du chargement de l’image.
2. On déclare un nouvel objet URLRequest (urlImage, auquel on attribut la valeur de la variable url, passée en argument à la fonction) qui contiendra le chemin vers l’image à charger.
3. On charge notre image dans notre objet Loader (loaderImage).
4. On ajoute l’image chargée, par le biais de l’objet Loader, dans le clip cible (passée en argument à la fonction : cible).

function chargeImage(url:String, cible:Object) {
var loaderImage:Loader = new Loader(); [1]
var urlImage:URLRequest = new URLRequest(url); [2]
loaderImage.load(urlImage); [3]
cible.addChild(loaderImage); [4]
}

Pas grand chose à expliquer de plus ici je pense. Disons simplement que l’objet Loader fonctionne à peu prêt comme l’objet URLLoader que nous avons utilisé pour charger le fichier XML, du moins pour ce qui est de charger un objet désigné par une url de type URLRequest.

Donc le fichier est chargé grâce à la méthode load (identique à celle de l’objet URLLoader). Seulement après il suffit d’ajouter l’objet chargé avec un addChild (donc plus question d’utiliser la proriété data réservée au URLLoader, logique puisqu’il ne s’agit pas du même type d’objet chargé).

Notez ici que le addChild est rattaché à un objet cible :

cible.addChild(loaderImage);

Qui en fait est un ciblage vers un clip. Par exemple ici pour le premier tour de boucle il correspondrait à sections.clipProjet0 puisque i vaut 0 (zéro) (donc « clipProjet »+ i équivaut à clipProjet0) .

Et c’est fini. Vous pouvez, comme pour la version en AS2, tester votre animation avec toutes vos sections en modifiant la valeur de la variable categorie.

Conclusion |

Vous savez à présent comment récupérer des données dans un fichier XML depuis flash. Qu’il s’agisse de textes ou d’images.

J’espère que ce cours vous aura autant intéressé que les précédents et surtout que vous avez compris ce que j’ai essayé d’y expliquer (même si parfois ça peu vite devenir confus).

Le prochain chapitre sera plus une révision de ce que nous venons de voir puisqu’il s’agira de créer la sous-partie Profil, destinée à nous présenter.