Exploitation de données XML

Création de l'animation

Télécharger l'animation ici.

Plutôt que d'afficher les données dans la fenêtre de sortie, nous allons les afficher sur la scène.

Chaque roi sera affiché dans un cartouche. Nous créons donc un symbole clip nommé mc:cartouche formé d'un simple rectangle de couleur bleu roi servant d'arrière-plan et d'une zone de texte dynamique de couleur or nommée nom_txt.

Il faut veiller lors de la création du symbole à placer le point d'ancrage aux coordonnées {0,0}.

 

Dans la boîte de dialogue Liaison (bouton droit sur le symbole clip dans la bibliothèque) on attribue au symbole clip un identifiant qui sera utilisé par la méthode attachMovie().

Sur la scène principale se trouvent deux occurrences d'un clip vide. Elles sont nommées colonne1_mc et colonne2_mc. Elles serviront à appeler les cartouches.

Rappel sur attachMovie()

Tout sur les méthodes de création dynamique d'occurrences ici

La méthode movieClip.attachMovie() importe une occurrence d'un symbole clip depuis la bibliothèque vers l'occurrence de movieClip qui devient le clip parent.

Donc l'occurrence de clip colonne1_mc peut importer une occurrence du symbole clip mc:cartouche.

cartouche_mc = colonne1_mc.attachMovie("cartouche", nom, i) ;

Dans cette instruction,

La variable nom contient un nom calculé, formé de la concaténation d'une lettre et d'un compteur i. Avec la lettre c et les valeurs 0, 1, 2, 3 on obtient les noms calculés "c0", "c1", "c2", "c3".

On a déjà compris que les valeurs du compteur seront générées par une boucle. On obtient donc

for (var i = 0 ; i < 11 ; i++) {
nom = "c" + i ;
cartouche_mc = colonne1_mc.attachMovie("cartouche", nom, i) ;

}

Les coordonnées du clip enfant sont calculées par rapport au clip parent et au point d'ancrage. Comme nous avons bien pris soin de placer le point d'ancrage en {0,0}, nous pouvons facilement aligner chaque occurrence enfant sous le clip parent en affectant 0 à la propriété _x. Pour positionner les cartouches les uns en dessous des autres, on calcule la valeur de la propriété _y comme étant la constante 32*i. Pourquoi 32 ? Parce que le symbole clip fait 30 pixels de hauteur, ce qui laissera 2 pixels entre les cartouches.

 

cartouche_mc._x = 0 ;
cartouche_mc._y = 32 * i ;

 

Il reste maintenant à compléter la zone de texte. Il faut activer la propriété html de la zone de texte pour que les entités caractères (par exemple &quot; soient interprétées correctement. Ensuite, on affecte la valeur du noeud à la propriété htmlText.

cartouche_mc.nom_txt.html = true ;
cartouche_mc.nom_txt.htmlText = lesRois[i].firstChild;

 

Voici la boucle complète

 

for (var i = 0 ; i < 11 ; i++) {
nom = "c" + i ;
cartouche_mc = colonne1_mc.attachMovie("cartouche", nom, i) ;
cartouche_mc._x = 0 ;
cartouche_mc._y = 32 * i ;
cartouche_mc.nom_txt.text = lesRois[i].firstChild ;

}

Et voici le code complet

Comme vous avez tout lu attentivement et que vous avez installé et testé l'animation, il y a de grandes chances que vous avez compris. Si vous parvenez à construire un autre document XML contenant par exemple une dizaine de restaurants prestigieux, les 7 merveilles du monde ou la liste du patrimoine immatériel de l'humanité et si vous arrivez à les afficher dans une animation Flash, vous approcherez de la vérité.

 

 

 

***