explainMe

1

<balise attribut="Non concerné car directement dans la balise">Texte simple sans mise en page.</balise>

Voici la structure simplifiée d’un fichier XML avec des données préparées pour êtres mises en page par flash :

1

<balise attribut="Non concerné car directement dans la balise">< ![CDATA[<b>Texte mis en page à l'aide de balises HTML :<b><br /> Avec mise en page ce qui permet de mettre <u>certaines parties</u> du texte en <font color="#CF0000">valeur</font>.]]></b></balise>

Houlaaaaa, mais c’est du chinois son truc !!!

Mais non… Il sûr que si vous n’êtes pas familiarisé(e) avec le HTML, vous allez un peu patauger, mais vous allez voir ça n’a rien de si complexe que ça.

Tout d’abord notez que seul le texte entre 2 balises peut être mis en page (les attributs ne le peuvent pas).

Ensuite ce texte est placé entre 2 signes bizarroïdes :

<![CDATA[ et ]]>

Mais à quoi c’était-t-y qu’ça sert ces machins là ?

Il ne faut pas perdre de vu que notre fichier XML est interprété à un moment donné car lue tel quel il ne pourrait pas servir à grand chose si rien ni personne n’était capable de l’interpréter. C’est là qu’intervient le fameux « parser » (« analyseur syntaxique » en anglais), qui va donc « parser » (le verbe francisé ce coup-ci) tout le texte contenu dans notre fichier XML pour l‘interpréter.

Oui mais alors si on utilise des balises HTML dans notre texte, elles vont êtres identifiées comme des balises XML ?!

Presque ! Disons plutôt que ça plante votre fichier XML.

Donc nous devons dire au parser de ne pas interpréter notre texte, c’est pourquoi nous utilisons ces signes en début et fin de chaque portion de texte, pour indiquer à l’analyseur :

« Ah non ça tu l’affiche tel quel, je m’en charge ! »

Ensuite nous pouvons utiliser certaines balises HTML (eh non… pas toutes) qui seront reconnues par flash.

Voici la liste des balises HTML reconnues par flash :

Ceci étant posé, nous allons donc pouvoir créer notre fichier XML pour la section Profil.

J’ai choisie de faire un fichier XML différent du premier, pour bien séparer le contenu, mais sachez qu’il aurait tout à fait été possible de ne faire qu’un seul fichier XML pour tout le site (moyennant quelques modifications cependant).

Petite précision pour le saut de ligne : pour vous assurer que vos sauts de ligne soient bien pris en compte par flash, assurez-vous d’avoir sélectionnez le comportement « Multiligne » dans la palette Propriétés de votre champ de texte dynamique. Sans ce réglage, le comportement « Une seule ligne » sera prioritaire sur vos balises<br>.

Voici donc le fichier XML dont nous allons nous servir pour le suite du cours :

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

< ?xml version="1.0" encoding="utf-8"?>
<profil>
	<!-- COMPETENCES -->
	<competences>
		<chapitre titre="internet">< ![CDATA[<b>Quisque malesuada justo nec felis congue eget dignissim augue rutrum?<br /> Nunc consequat bibendum mauris, quis feugiat arcu consequat nec! <br />Vivamus aliquet erat sit amet sem rutrum convallis lobortis elit porta. Nunc at mauris erat. Nunc ultrices volutpat sapien, ac auctor lectus iaculis in. <u>Donec</u> neque elit; pulvinar non placerat non, semper ac ante! Nullam ]]>
		</chapitre>
		<chapitre titre="off-line">< ![CDATA[Cras eu turpis et sapien lacinia porttitor. Suspendisse potenti.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum aliquet neque. Praesent vitae ipsum ac elit aliquam suscipit at eu nulla. <br />In sit amet ipsum quis ipsum pellentesque dapibus. Integer malesuada erat aliquam sem dictum eu vehicula dui rutrum. <br /><br />In hendrerit rutrum est, sit amet dictum ipsum porta a. Cras.]]>
		</chapitre>
		<chapitre titre="2D traditonnel">< ![CDATA[Duis in porttitor nulla. Vivamus sollicitudin porttitor massa, sit amet porta metus condimentum eget.<br>	Vivamus gravida feugiat nulla, nec aliquam sapien pretium id. In vel egestas lectus. <br /><br />Donec vehicula, nisi sed lacinia suscipit, <font color="#42FF30">Suspendisse potenti</font> diam, sollicitudin tristique diam mauris eleifend elit. Duis placerat neque a urna faucibus molestie! <br /><br />	Fusce odio nulla.]]>
		</chapitre>
		<chapitre titre="Print">< ![CDATA[Quisque malesuada justo nec felis congue eget dignissim augue rutrum? <br>Nunc consequat bibendum mauris, quis feugiat arcu consequat nec! Vivamus aliquet erat sit amet sem rutrum convallis lobortis elit porta. <br />	Nunc at mauris erat. Nunc ultrices volutpat sapien, ac auctor lectus iaculis in. Donec neque elit; pulvinar non placerat non, semper ac ante! <br />Nullam facilisis malesuada ante ac tempus? In risus ligula, eleifend nec lobortis ut, fringilla vitae tortor. Aliquam venenatis mollis lacinia. <br /><br />Vivamus eget augue tellus, nec aliquam magna. Donec vitae purus nibh, vel rhoncus urna. Quisque ornare erat eu nisi sollicitudin semper!<br />Maecenas sit amet dolor vel felis dignissim interdum. Aenean aliquet dui consectetur massa porta lobortis! <br />Vivamus accumsan vehicula accumsan. Maecenas a lacus at lectus tincidunt condimentum.]]>
		</chapitre>
		<chapitre titre="3D images de synthèse">< ![CDATA[Modélisation, mapping, et rendu d’images fixes et animées.<br>Modélisation, mapping, rendu, et habillage de vues pour l’architecture et les stands.]]>
		</chapitre>
		<chapitre titre="Autres">< ![CDATA[Pratique de l’anglais : écrit, parlé, lue (niveau scolaire).<br><br />Mise au point d’un cahier des charges et suivit de projet avec le client.<br /><br />Réalisation et rédaction de document explicatif (type règles aux auteurs, brochures techniques, ...).<br /><br />Assemblage, installation et entretien d’ordinateur (Hardware et Software).]]>
		</chapitre>
	</competences>
	<!-- EXPERIENCE PROFESSIONNELLE -->
	<experience>
		<chapitre titre="explainMe">< ![CDATA[Refonte complète du site <a href="http://www.explain-me.com">explainMe (design et application) en vu d'améliorer le site et de donner un peu plus de pouvoir aux membres.]]>
		</chapitre>
		<chapitre titre="entreprise X">< ![CDATA[<b>Quisque malesuada justo nec felis congue eget dignissim augue rutrum?<br /> Nunc consequat bibendum mauris, quis feugiat arcu consequat nec! <br />Vivamus aliquet erat sit amet sem rutrum convallis lobortis elit porta. Nunc at mauris erat. Nunc ultrices volutpat sapien, ac auctor lectus iaculis in. <u>Donec</u> neque elit; pulvinar non placerat non, semper ac ante! Nullam ]]>
		</chapitre>
		<chapitre titre="entreprise Y">< ![CDATA[Nunc at mauris erat. Nunc ultrices volutpat sapien, ac auctor lectus iaculis in. Donec neque elit; pulvinar non placerat non, semper ac ante! <br>Nullam facilisis malesuada ante ac tempus? In risus ligula, eleifend nec lobortis ut, fringilla vitae tortor. Aliquam venenatis mollis lacinia. <br /><br />Vivamus eget augue tellus, nec aliquam magna. Donec vitae purus nibh, vel rhoncus urna. Quisque ornare erat eu nisi sollicitudin semper!]]>
		</chapitre>
	</experience>
	<!-- CURSUS -->
	<cursus>
		<chapitre titre="2010">< ![CDATA[Certification <font color="#C00000"><a href="http://framework.zend.com/" target="blank">Zend</a> obtenue (c'est pas vrai). <br />En avant les projets.]]>
		</chapitre>
	</cursus>
</profil>

Méthode2 : ActionScript 2 |

Tout d’abord nous allons « construire » le fichier profil.fla qui recevra toutes les données stockées dans notre fichier XML.

Pour ce faire nous n’allons pas réinventer la roue, mais tout simplement nous servir du fichier portfolio.fla comme base de départ que nous allons modifier pour qu’il corresponde aux besoins de la section profil.fla.

Attention : ça peux sembler idiot mais je vous engage très vivement à enregistrer une copie de votre fichier portfolio.fla en le nommant profil.fla (comme je le fait au début de la vidéo). Ceci afin de ne pas travailler sur le fichier portfolio puis d’enregistrer les modifications faites par un simple [Ctrl+S] ([Pom+S] sous Mac) en ayant oublié de modifier le nom du fichier, ce qui serait une catastrophe pour vous. Et croyez moi ça arrive…

[Toutes mes excuses pour la piètre qualité de la vidéo : elle est floue je sais et je m'en excuse. Promis je ré-encode toutes les vidéos pour la V2.]

Comme vous avez pu le voir dans la vidéo, nous repartons de l’existant pour créer du neuf, et celà pour une raison simple :

Parce que dans une optique de production c’est un bon réflexe (pourquoi repartir de zéro quand une partie du travail est déjà fait) : ça va plus vite.

Et pour le code la démarche sera un peu la même puisque j’ai utilisé le code de la section portfolio.fla que j’ai adapté à mes besoins.

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

//
//-------------------------------------------------------------------------------------- INITIALISATIONS ---//
//
this.infosChargement.texteCharge.text = "Chargement des chapitres 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;
//
//------------------------------------------------------------------------ Déclaration de la classe XML ---//
//
Profil = new XML();
//
//--- Chargement du fichier XML ---
//
Profil.load("profil.xml");
//
//--- On ignore les espaces blancs ---
//
Profil.ignoreWhite = true;
//
//--- Chargement des valeurs une fois la base chargée ---
//
Profil.onLoad = function(success:Boolean) {
	if (success) {
		infosChargement._visible = false;
		chargeChapitres(_global.categorie);
	} else {
		infosChargement.texteCharge.text = "Erreur lors du chargement des projets.";
	}
};
//
//------------------------------------------------------------------------------------------- Fonctions ---//
//
//
//--- Fonction qui charge les chapitres de la catégorie ---
//
function chargeChapitres(categorie:String) {
	//
	//--- On récupère la liste des chapitres de la catégorie cat ---
	//
	var chemin:String = "/profil/"+categorie+"/*";
	var chap:Array = XPathAPI.selectNodeList(Profil.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<chap .length; i++) {
		this.attachMovie("bChapitre","bChapitre"+i,i);
		this["bChapitre"+i].texteBouton.text = chap[i].attributes.titre;
		//
		//--- On place le bouton ---
		//
		this["bChapitre"+i]._x = 10;
		this["bChapitre"+i]._y = 35*i+10;
		this['bChapitre'+i].indexChapitre = index;
		//
		//--- On définit l'action du bouton ---
		//
		this["bChapitre"+i].onRelease = function() {
			afficheChapitre(this.indexChapitre);
		};
		//
		//--- On charge les infos du chapitre ---
		//
		sections.attachMovie("clipChapitre","clipChapitre"+i,i);
		sections["clipChapitre"+i]._y = this['bChapitre'+i].indexChapitre;
		//--- Titre du chapitre ---
		sections["clipChapitre"+i].titreChapitre.text = chap[i].attributes.titre;
		//--- texte du chapitre ---
		sections["clipChapitre"+i].texteC = "/profil/"+categorie+"/chapitre[ @titre='"+chap[i].attributes.titre+"']/*";
		sections["clipChapitre"+i].texteChapitre.htmlText = XPathAPI.selectSingleNode(Profil.firstChild, sections["clipChapitre"+i].texteC).nodeValue;
		//
		//--- On incrémente l'index : pour les futurs positions des autres chapitres ---
		//
		index += 470;
	}
}
//
//--- Fonction qui scroll d'un chapitre à l'autre ---
//
function afficheChapitre(indexChapitre:Number) {
	var deplaceSections:Tween = new Tween(sections, "_y", Strong.easeOut, sections._y, -indexChapitre, 1, true);
}

Pour des raisons évidentes de redondance je ne vais pas ré-expliquer tout le fonctionnement que vous trouverez en détaille dans le chapitre 5.

En revanche nous allons voir ce qui a changé.

Premièrement nous avons dit adieu à la fonction chargeImage(); qui n’avait plus d’intérêt ici puisque nous ne chargeons pas d’images. Cependant vous pouvez évidement la laisser si jamais vous souhaitez afficher également des images dans cette section. C’est votre site, c’est vous le/la chef !
De plus la fonction afficheProjet(); est devenue afficheChapitre(); mais mis à part le changement de nom ainsi que les noms des variables qui la compose, le fonctionnement est resté le même.

Ensuite nous avons modifié le nom du fichier XML à charger puisque nous avons pris le partie de faire un fichier XML par section (plus simple pour la maintenance du site plus tard pour s’y retrouver plutôt que de rechercher dans un XML de 3 Kms…).

Profil.load(« profil.xml« );

Ne soyez pas trop surpris non-plus j’ai pris soin de renommer toutes les variables afin de correspondre à la section dans laquelle nous sommes. Cela peu vous embrouiller un peu au début mais au moins si vous travaillez sur plusieurs sections en même temps, vous saurez où vous êtes juste en regardant le nom des variables.

Voyons donc à quoi ressemble notre nouvelle fonction chargeChapitres(); :

//
//
//— Fonction qui charge les chapitres de la catégorie —
//
function chargeChapitres(categorie:String) { [1]
//
//— On récupère la liste des chapitres de la catégorie cat —
//
var chemin:String = « /profil/ »+categorie+ »/* »; [2]
var chap:Array = XPathAPI.selectNodeList(Profil.firstChild, chemin);
//— Variable qui va permettre de scroller d’un projet à l’autre —
var index:Number = 0; [3]
//
//— Boucle qui génère les boutons et leurs actions —
//
for (i=0; i<chap.length; i++) { [4]
this.attachMovie(« bChapitre », »bChapitre »+i,i); [5]
this["bChapitre"+i].texteBouton.text = chap[i].attributes.titre;
//
//— On place le bouton —
//
this["bChapitre"+i]._x = 10;
this["bChapitre"+i]._y = 35*i+10;
this['bChapitre'+i].indexChapitre = index;
//
//— On définit l’action du bouton —
//
this["bChapitre"+i].onRelease = function() {
afficheChapitre(this.indexChapitre);
};
//
//— On charge les infos du chapitre —
//
sections.attachMovie(« clipChapitre », »clipChapitre »+i,i);     [6]
sections["clipChapitre"+i]._y = this['bChapitre'+i].indexChapitre;
//— Titre du chapitre —
sections["clipChapitre"+i].titreChapitre.text = chap[i].attributes.titre;
//— texte du chapitre —
sections["clipChapitre"+i].texteC = « /profil/ »+categorie+ »/chapitre[ @titre='"+chap[i].attributes.titre+ »‘]/* »;
sections["clipChapitre"+i].texteChapitre.htmlText = XPathAPI.selectSingleNode(Profil.firstChild, sections["clipChapitre"+i].texteC).nodeValue;
//
//— On incrémente l’index : pour les futurs positions des autres chapitres —
//
index += 470;
}
}

Récapitulons les actions de la fonction :

1. La fonction récupère la valeur de la variable categorie dont elle a besoin pour déterminer quelle catégorie elle doit afficher.
2. grâce à cette variable on définit le chemin dans lequel la fonction doit aller récupérer les informations.
3. On initialise la variable index qui sera redéfinie à chaque tour de boucle et qui nous permet de placer les différents chapitres sur l’axe des Y, à l’intérieur du clip conteneur sections.
4. On rentre dans la boucle qui fera autant de tour qu’il y a de chapitres dans le chemin défini en [2].
5. À chaque tour de boucle, on affiche un bouton (texte + placement + options + actions).
6. À chaque tour de boucle, on affiche un chapitre (textes + placement + options).

Je ne reviens pas sur le point [1] qui me semble suffisamment évident.

Pour le point [2] je préciserais simplement que nous avons également modifié la valeur du String avant la catégorie en y remplaçant portfolio par profil qui est le nom de la première balise de notre fichier XML :

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

Le point [3] n’a pas bougé non-plus par rapport à la section Portfolio (son action est la même et je ne l’ai pas modifié).

Le point [4] est juste la déclaration de la boucle for, ici nous récupérons le nombre de chapitres de la section via la propriété lenght de la variable chap :

for (i=0; i<chap.length; i++) {

La variable chap étant un tableau (Array) défini au point [2] :

var chap:Array = XPathAPI.selectNodeList(Profil.firstChild, chemin);

Les points [5] et [6] sont certainement ceux qui ont reçu le plus de modifications  :

En premier nous chargeons (dupliquons plus exactement) un clip présent dans la bibliothèque grâce à la fonction attachMovie();, et nous en profitons pour lui donner un nom d’occurrence et également pour définir le contenu du champ de texte dynamique qu’il contient avec la valeur de l’attribut « titre », récupéré dans le fichier XML.

this.attachMovie(« bChapitre », »bChapitre »+i,i);
this["bChapitre"+i].texteBouton.text = chap[i].attributes.titre;

Pour rappel, ici la variable i est ce que l’on appel un « compteur ». C’est à dire que ça valeur change à chaque tour de boucle (on parle d’incrémentation lorsque sa valeur augmente et de décrémentation lorsque ça valeur diminue). La variable chap étant un tableau, le compteur nous permet de pointer vers l’index de la valeur dans le tableau, c’est pourquoi nous retrouvons des notations tel que : chap[i].attributes.titre;

Ensuite nous définissons les coordonnées du bouton et nous lui affectons une variable indexChapitre qui nous servira lorsque nous cliquerons sur le bouton :

this["bChapitre"+i]._x = 10;
this["bChapitre"+i]._y = 35*i+10;
this['bChapitre'+i].indexChapitre = index;

Et pour finir avec le bouton, nous lui affectons une action qui justement utilisera la valeur de la variable que nous venons de lui rattacher (si le monde n’est pas bien fait quand même ) :

this["bChapitre"+i].onRelease = function() {
afficheChapitre(this.indexChapitre);
};

Pour le clip contenant les textes du chapitre maintenant, la procédure est globalement la même :

Dans un premier temps nous « chargeons » le clip existant dans la bibliothèque en lui affectant un nom d’occurrence et une position sur l’axe des Y relative à la variable déjà utilisée avec le boutons (histoire que le tout corresponde en fait) :

sections.attachMovie(« clipChapitre », »clipChapitre »+i,i);
sections["clipChapitre"+i]._y = this['bChapitre'+i].indexChapitre;

Dans un deuxième temps, nous attribuons la valeur de l’attribut « titre » à notre champ de texte dynamique titreChapitre (toujours histoire de confirmer que nous avons bien affiché le chapitre demandé) :

sections["clipChapitre"+i].titreChapitre.text = chap[i].attributes.titre;

Dans un troisième temps nous allons afficher le texte du chapitre dans notre champ de texte dynamique texteChapitre, cependant cette action va se dérouler en 2 étapes :

sections["clipChapitre"+i].texteC = « /profil/ »+categorie+ »/chapitre[ @titre='"+chap[i].attributes.titre+ »‘]/* »; [A]
sections["clipChapitre"+i].texteChapitre.htmlText = XPathAPI.selectSingleNode(Profil.firstChild, sections["clipChapitre"+i].texteC).nodeValue;     [B]

• A - D’abord nous récupérons le chemin vers le texte entre les balises <chapitre> et </chapitre> que nous sommes en train de parcourir, que nous affectons à la variable texteC que nous rattachons à notre clipChapitre pour plus de sécurité.
• B - Puis nous attribuons la valeur du texte contenu dans le chemin que nous venons de spécifier, au champ de texte dynamique texteChapitre.

Noter le changement ici lors de l’affectation du texte au champ de texte dynamique, nous n’utilisons plus la notation :

monChampsTexte.text = valeur;

Mais plutôt :

monChampsTexte.htmlText = valeur;

Tiens c’est nouveau ça !

Et oui, conjointement à la case cochée dans le panneau « propriétés » (voir vidéo), cette notation précise à flash que nous fournissons au champ de texte, un texte au format HTML, ainsi il recherchera les balises qu’il est capable de traiter afin de modifier le texte en conséquence.

Sachez cependant que cette notation prend le pas sur la case que nous avons coché dans la vidéo. Ce qui signifie que la case soit cochée ou non, cette notation vous permettra tout de même d’afficher le texte au format HTML. Nous l’avons tout de même cochée dans la vidéo par sécurité (et de plus c’était l’occasion de vous montrer cette option).

Enfin, avant de repartir dans un nouveau tour de boucle, nous modifions la valeur de la variable index en ajoutant 470 (ce qui équivaut à la hauteur d’un chapitre dans mon cas, en pixels).

Voici à quoi ressemble le site à la fin de ce chapitre (AS2)

Note : le code présenté plus haut est prévu directement pour fonctionner une fois le fichier chargé dans l’interface, cependant si vous souhaitez tester le fichier de la section de manière autonome, il vous suffit de remplacer le code suivante :

Profil.onLoad = function(success:Boolean) {
if (success) {
infosChargement._visible = false;
chargeChapitres(_global.categorie);
} else {
infosChargement.texteCharge.text = « Erreur lors du chargement des projets. »;
}
};

par celui-ci :

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

Méthode 3 : ActionScript 3 |

Cette méthode se base sur la même structure de fichier que la méthode 2, aussi je vous renvoi à la vidéo disponible plus haut afin de visualiser comment est élaborée le fichier destiné à fonctionner avec le code à venir.

Voici donc le code AS3 :

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

//
//---------------------------------------------------------------- INITIALISATIONS ---//
//
var profilXML:XML;
var chargeDonnees:URLLoader = new URLLoader();
var adresseFichier:URLRequest=new URLRequest("profil.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;
	profilXML=new XML(chargeDonnees.data);
	chargeChapitre(categorie2);
}
//
//--- Fonction qui charge les projets d'une section ---
//
function chargeChapitre(categorieC:String) {
	//--- On détermine le nombre de projets
	var nbChapitres:Number=profilXML[categorieC].children().length();
	//
	//
	//
	for (var i=0; i<nbchapitres ; i++) {
		//
		//--- On place le bouton ---
		//
		var boutonC:bChapitre=new bChapitre  ;
		boutonC.x=10;
		boutonC.y=45*i;
		boutonC.name="bChapitre"+i;
		addChild(boutonC);
		boutonC.indexChapitre=index;
		boutonC.texteBouton.text=profilXML[categorieC].chapitre[i].@titre;
		//
		//--- On définit l'action du bouton ---
		//
		boutonC.addEventListener(MouseEvent.CLICK, afficheChapitre);
		//
		//--- On charge les infos du projet ---
		//
		var chapitreC:clipChapitre=new clipChapitre  ;
		chapitreC.y=boutonC.indexChapitre;
		chapitreC.name="clipChapitre"+i;
		sections.addChild(chapitreC);
		//--- Nom du chapitre ---
		chapitreC.titreChapitre.htmlText=profilXML[categorieC].chapitre[i].@titre;
		//--- Texte du chapitre ---
		chapitreC.texteChapitre.htmlText=profilXML[categorieC].chapitre[i];
		//--- On incrémente l'index : pour les futurs positions des autres projets ---
		//
		index+=470;
	}
}
//
//--- Fonction qui scroll d'un projet à l'autre ---
//
function afficheChapitre(event:MouseEvent) {
	var deplaceSections:Tween=new Tween(sections,"y",Strong.easeOut,sections.y,- event.currentTarget.indexChapitre,1,true);
}
//
//-------------------------------------------------------------------- ECOUTEURS ---//
//
chargeDonnees.load(adresseFichier);
chargeDonnees.addEventListener(Event.COMPLETE, chargementFini);

Ici encore nous nous sommes séparé de la fonction chargeImage(); comme dans la méthode 2 puisque nous n’afficherons pas d’image dans cette section (du moins dans le site d’exemple).

De plus toutes les variables ont été renommées pour mieux correspondre à la thématique de la section.

Voyons donc la nouvelle fonction chargeChapitre(); :

function chargeChapitre(categorieC:String) { [1]
//— On détermine le nombre de projets
var nbChapitres:Number=profilXML[categorieC].children().length(); [2]
//
//
//
for (var i=0; i<nbChapitres; i++) { [3]
//
//— On place le bouton —
//
var boutonC:bChapitre=new bChapitre  ;     [4]
boutonC.x=10;
boutonC.y=45*i;
boutonC.name= »bChapitre »+i;
addChild(boutonC);
boutonC.indexChapitre=index;
boutonC.texteBouton.text=profilXML[categorieC].chapitre[i].@titre;
//
//— On définit l’action du bouton —
//
boutonC.addEventListener(MouseEvent.CLICK, afficheChapitre);
//
//— On charge les infos du projet —
//
var chapitreC:clipChapitre=new clipChapitre  ;     [5]
chapitreC.y=boutonC.indexChapitre;
chapitreC.name= »clipChapitre »+i;
sections.addChild(chapitreC);
//— Nom du chapitre —
chapitreC.titreChapitre.htmlText=profilXML[categorieC].chapitre[i].@titre;
//— Texte du chapitre —
chapitreC.texteChapitre.htmlText=profilXML[categorieC].chapitre[i];
//— On incrémente l’index : pour les futurs positions des autres projets —
//
index+=470; [6]
}
}

Nous retrouvons globalement la même structure que dans le code en ActionScript 2, avec néanmoins quelques différences (évidement) :

1. Premièrement la fonction reçoit la variable categorieC en argument, qui nous permettra de définir le chemin pour récupérer les valeurs dans le fichier XML.
2. Ensuite nous définissons une variable nbChapitres qui nous permet de récupérer le nombre de chapitres dans la catégorie parcourue *
3. Nous rentrons dans la boucle pour générer tous les boutons et les chapitres correspondant à la catégorie.
4. Chargement du clip bouton (texte + propriétés + action).
5. Chargement du clip chapitre (textes + propriétés).
6. Incrémentation de la variable index de 470 pixels (hauteur d’un chapitre).

* Ici cette étape permet simplement d’éviter que l’ouverture de la boucle for ne soit illisible.

Quoi ?

Par exemple, au lieu d’écrire :

for (var i=0; i<nbChapitres; i++) {

nous aurions pu mettre :

for (var i=0; i<profilXML[categorieC].children().length(); i++) {

Cela dit je trouve personnellement que la seconde écriture est beaucoup moins lisible.

Vous aurez noté que contrairement à la méthode 2, la variable index n’est pas définie au début de la fonction. Ceci n’est pas gênant puisqu’elle a été déclarée bien avant, hors de la fonction, au tout début de notre code (var index:Number=0;).

Une variable déclarée à l’extérieur d’une fonction est accessible même à l’intérieur d’une fonction, en revanche, une variable déclarée à l’intérieur d’une fonction, n’est accessible qu’à l’intérieur de cette fonction, et pas à l’extérieur. C’est ce qu’on appel la « portée » d’une variable.

Mais revenons à nos moutons :

L’étape [1] n’a pas besoin d’être détaillée je pense.

Pour l’étape [2], nous pointons vers la catégorie que nous souhaitons parcourir, puis nous comptons le nombre d’enfant que contient le nœud XML où nous nous trouvons grâce au couple children().lenght(); (children(); pour enfants, et lenght(); pour la longueur : équivaut ici au nombre d’enfants).

L’étape [3] est identique à la méthode 2, si ce n’est que nous passons ici par la variable définie à l’étape [2].

L’étape [4] reprend également la logique de la méthode 2, mais avec la syntaxe de l’ActionScript 3 :

var boutonC:bChapitre=new bChapitre  ; [A]
boutonC.x=10;     [B]
boutonC.y=45*i;
boutonC.name= »bChapitre »+i;     [C]
addChild(boutonC);     [D]
boutonC.indexChapitre=index; [E]
boutonC.texteBouton.text=profilXML[categorieC].chapitre[i].@titre;     [F]
//
//— On définit l’action du bouton —
//
boutonC.addEventListener(MouseEvent.CLICK, afficheChapitre); [G]

• A - On déclare un nouvel objet boutonC, dupliqué depuis l’objet bChapitre présent dans la bibliothèque.
• B - On définit les coordonnées de l’objet sur les axes X et Y.
• C - On détermine le nom d’occurrence de l’objet.
• D – On ajoute l’objet sur la scène courante.
• E - On rattache une variable indexChapitre à l’objet, prenant comme valeur celle de la variable index.
• F - On attribue la valeur de l’attribue « titre » du chapitre en cours de lecture dans le XML, au champ de texte dynamique du clip bouton.
• G - On déclare un écouteur d’évènement sur le bouton qui déclenchera la fonction afficheChapitre(); lors du clique sur le bouton.

L’étape [5] réalise globalement les mêmes actions mais pour le chapitre :

var chapitreC:clipChapitre=new clipChapitre  ; [H]
chapitreC.y=boutonC.indexChapitre;     [I]
chapitreC.name= »clipChapitre »+i;     [J]
sections.addChild(chapitreC);     [K]
//— Nom du chapitre —
chapitreC.titreChapitre.text=profilXML[categorieC].chapitre[i].@titre; [L]
//— Texte du chapitre —
chapitreC.texteChapitre.htmlText=profilXML[categorieC].chapitre[i]; [M]

• H - On déclare un nouvel objet clipChapitre, dupliqué depuis l’objet clipChapitre présent dans la bibliothèque.
• I - On définit la position de l’objet sur l’axe des Y en fonction de la variable indexChapitre (ici pas la peine de placer l’objet sur l’axe des X puisqu’il sera ajouté dans le clip conteneur sections, et sera automatiquement calé à zéro sur l’axe des X grâce aux points de référence des 2 clips (le chapitre et le conteneur).
• J - On détermine le nom d’occurrence de l’objet.
• K - On ajout l’objet dans le clip conteneur sections.
• L – On attribue la valeur de l’attribue « titre » du chapitre en cours de lecture dans le XML, au champ de texte dynamique titreChapitre du clip.
• M – On attribue le texte contenu entre les balises <chapitre> et </chapitre> au champs de texte dynamique texteChapitre du clip.

Comme vous l’aurez certainement remarqué, ici nous pouvons affecter directement le texte contenu entre les balises ([M]), sans passer par la redéfinition d’un chemin quelconque comme nous l’avions fait dans la méthode 2. Ceci est due à la nouvelle classe XML de l’ActionScript 3 qui améliore grandement la manipulation des fichiers XML dans flash.

Et enfin l’étape [6] incrémente la variable index de 470 pixels (vous commencez à comprendre pourquoi 470 pixels je pense, inutile de l’écrire une fois de plus ).

Voici à quoi ressemble le site à la fin de ce chapitre (AS3)

Conclusion |

Petit à petit notre site prend forme et nous avons déjà réalisé 2 sections en plus de l’interface principale (mine de rien).

J’espère que ce petit chapitre de révision vous aura permit d’être encore plus à l’aise avec l’importation des données XML dans flash et qu’il vous aura également appris quelques petites nouveautés comme la mise en page des textes via certaines balises HTML notamment.

Il nous reste cependant encore 3 sections à réaliser, et dès le prochain chapitre nous nous attaquerons à la réalisation de la troisième, nommée « Goodies ». ce sera pour nous l’occasion de voir comment faire des liens vers l’extérieur avec flash (que ce soit pour faire un lien vers un site, une image, un PDF, ou du JavaScript).