150 Scripts Pour Flash CS3

50 scripts
pour
Flash CS3
David Tardiveau
50 scripts
pour
Flash CS3
CHEZ LE MME DITEUR

D. TARDIVEAU. La vido dans Flash. N12048, 2007, 190 pages. A. TASSO. Apprendre programmer en ActionScript 3 Avec 60 exercices corrigs. N12199, 500 pages. paratre. W. SIRAcUSA. Faites vos jeux avec Flash ! Du Pacman au Sudoku. N11993, 2006, 220 pages. M. LAVANT. Flash 8 Professional. N11950, 2006, 678 pages. C. BERG. Je cre mon site Internet avec Dreamweaver 8 et Flash 8. N11977, 2006, 144 pages + CD-Rom vido. J.-M. DEFRANcE. PHP/MySQL avec Flash 8. N11971, 2006, 782 pages. J.-M. DEFRANcE. PHP/MySQL avec Flash MX 2004. N11468, 2005, 710 pages. M. CAPRARO et al. Flash MX 2004 Magic. N11513, 2004, 164 pages. G. GUINE, A. MORAES. Flash MX Jeu en rseau avec Action Script et XML. N11068, 2002, 170 pages. K. GOTO, E. COTLER. Redesign web 2.0. N11579, 2005, 294 pages. R. GOETTER, S. BLONDEEL. CSS2 Pratique du design web. N11570, 2005, 324 pages. J. ZELDMAN. Design web : utiliser les standards CSS et XHTML. N11548, 2005, 414 pages. G. GUENEAU. Conduite de projets en cration numrique. N11474, 2005, 300 pages.
pour
50 scripts
David Tardiveau
Flash CS3
DITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Le code de la proprit intellectuelle du 1er juillet 1992 interdit en effet expressment la photocopie usage collectif sans autorisation des ayants droit. Or, cette pratique sest gnralise notamment dans les tablissements denseignement, provoquant une baisse brutale des achats de livres, au point que la possibilit mme pour les auteurs de crer des uvres nouvelles et de les faire diter correctement est aujourdhui menace. En application de la loi du 11 mars 1957, il est interdit de reproduire intgralement ou partiellement le prsent ouvrage, sur quelque support que ce soit, sans autorisation de lditeur ou du Centre Franais dExploitation du Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris. Groupe Eyrolles, 2007, ISBN : 978-2-212-12112-4
o t 2007 7:29 07
Remerciements
Merci Fanny pour ces moments passs sur MSN tester certaines animations et pour la relecture de quelques passages du livre. Merci Melux pour ses relectures. Enn, merci Marine et Marjorie qui ont vu mon dos et mon tte--tte avec lcran de lordinateur pendant quatre mois Promis, jattends deux mois avant dcrire le prochain livre !
0. ao t 2007 7:29 07
ao t 2007 7:29 07
Avant-propos
Pourquoi un tel ouvrage ?

Lorsque vous rencontrez un problme en ActionScript, vous disposez de diffrentes sources dinformation pour vous aider : en particulier, les forums vous permettent dinterroger la communaut des asheurs. Prenez-vous le temps dy rechercher si un post ne correspond pas la question que vous vous apprtez dposer ? En parcourant les sujets des principaux forums, on peut en effet constater que les questions sont nombreuses et prcises. Vous pouvez galement dcider dapprofondir vos connaissances en ActionScript, gnralement de manire acadmique ou par autoformation. Dans les deux cas, lanalyse dexercices et de cas existants constitue alors un axe majeur de lacquisition des bases. Enn, si vous navez ni le courage ni le temps de rechercher la solution dun problme dans un forum ou dapprendre par vous-mme, il vous reste toujours la possibilit dinterroger des spcialistes. Mais en production danimations Flash, si les problmes et besoins de dveloppement sont rcurrents, il nexiste pas cependant une seule solution de dploiement pour dvelopper une partie dun programme. Cest en partant de ces diffrents constats quest ne lide dcrire un ouvrage rfrenant les techniques les plus frquemment rencontres en production. En tant quenseignant, je constate que les difcults dapprentissage reposent toujours sur les mmes problmes : explications trop prcises lors dune premire approche (souvent dans un souci dexhaustivit), trop techniques et de ce fait trop abstraites. Cest pourquoi lapproche pdagogique utilise dans ce livre sappuie sur des techniques denseignement qui ont fait leurs preuves. Certains scripts seront parfois moins optimiss quils pourraient ou devraient ltre, mais ce sera dans un souci daccessibilit un large public. Nous ne sommes pas l pour critiquer les ressources mises disposition des asheurs sur Internet, mais il faut reconnatre que la majeure partie des sites proposant des tutoriaux sont rarement pertinents. Bien souvent, les webmasters (et/ou rdacteurs, auteurs
ao t 2007 7:29 07
150 scripts pour Flash CS3
darticles) ne se mettent ni la place ni au niveau des apprenants. Certes, toutes ces ressources ne sadressent pas uniquement aux dbutants, mais un certain nombre dentre elles manquent leur cible en raison de leur degr dabstraction. Dautant quun apprentissage seffectuant par paliers, on peut tre novice plusieurs niveaux. Un expert ne devrait jamais oublier que ce qui lui parat vident ne lest pas pour tout le monde. Nous garderons donc lesprit ces directives tout au long de nos analyses.
Compatibilit des scripts de ce livre

Chaque animation est introduite par un texte justiant lintrt de sa prsence dans ce livre, tandis que le chier .a correspondant sera disponible en ligne. Pour exploiter un script de louvrage, il vous sufra douvrir le chier dextension .a, sans aucune manipulation supplmentaire. En revanche, si vous souhaitez utiliser un script du livre dans un nouveau document Flash CS3, il faudra que ce document soit de type ActionScript 2 pour que le script soit compatible.
Remarque
Pour dvelopper en ActionScript 1 ou 2 partir de Flash CS3, vous devez slectionner Fichier Flash (ActionScript 2.0) lors de la cration dun nouveau document.
Les diffrents niveaux de dveloppement en ActionScript

Quelle est la crdibilit de lauteur face aux propos qui vont suivre ?
En tant quenseignant qui dispense des cours en ActionScript 2 et ActionScript 3, et auteur douvrages traitant des deux versions du langage, jai conscience des diffrences de niveaux qui existent entre les individus en matire de programmation. Il est donc inutile dessayer denseigner lActionScript 3 ceux qui auront plus de facilits apprendre lActionScript 1 ou 2.
Louvrage que vous avez entre les mains est sorti aprs la version CS3 de Flash. Vous pourriez en toute lgitimit vous demander si les scripts de ce livre sont compatibles avec cette nouvelle version et quel est le public vis. Rassurez-vous, si lauteur et les ditions Eyrolles ont dcid dditer une nouvelle version de cet ouvrage, cest parce que Flash CS3 utilise lActionScript 1 et 2, et lActionScript 3. Dans ce cas, o sont les diffrences ?
VIII
07 7:29 07
Avant-propos
ActionScript 1 et 2
Aujourdhui, face lActionScript 3, peut-on afrmer que lActionScript 1 et lActionScript 2 sont des langages obsoltes quAdobe conserve dans un souci de compatibilit ou sont-ils encore fonctionnels et utiles ? Il est intressant de rpondre cette question par une srie dautres interrogations : Est-il ncessaire de faire appel un architecte et/ou un menuisier pour fabriquer soimme une tagre ? Est-il ncessaire de faire appel un maquettiste et un imprimeur pour raliser un fairepart de naissance, etc. ? Est-il ncessaire de faire appel un lectricien pour installer un rseau lectrique dans une pice ? En fonction de vos comptences, peut-tre pourriez-vous fabriquer vous-mme cette tagre et concevoir un faire-part de naissance, mais la mise en place de linstallation lectrique pourrait tre plus difcile. Quen est-il de vos comptences en matire de programmation ? tes-vous un professionnel dans ce domaine ou ressentez-vous un besoin plus ou moins ponctuel en matire de dveloppement en ActionScript ? Nous souhaitons ainsi vous montrer que vous ne devez pas avoir de complexes dvelopper en ActionScript 1 ou 2 plutt quen ActionScript 3, ce dernier ncessitant de relles comptences en programmation, ainsi quune aptitude apprhender des notions difciles et souvent abstraites, lies la programmation oriente objet. En tant quenseignant depuis prs de quinze ans, jai pu constater quel point chacun dentre nous est plus ou moins rceptif aux informations qui peuvent lui tre dlivres. Nous possdons tous des blocages conscients ou inconscients, des facilits, des acquis et des lacunes, lis notre histoire respective, et cest pourquoi chacun apprend plus ou moins vite... Dailleurs, si laccs au dveloppement informatique tait si facile et si vident, la socit Adobe naurait pas dcid de conserver trois versions du langage ActionScript. Avant daller plus loin, tentons dexpliquer ce qui diffre entre ActionScript 1 et ActionScript 2. Rappelons pour commencer que la version 2 de lActionScript est sortie en 2003 avec larrive de Flash MX 2004. La syntaxe pointe, apparue en 2002 avec Flash MX, existait alors dj. Contrairement ce que beaucoup soutiennent, lActionScript 2 ne se caractrise pas par la syntaxe pointe. Il est donc inexact dafrmer que les gestionnaires de type on(press) relvent de lActionScript 1 et ceux de type instance.onPress de lActionScript 2. Ce qui caractrise rellement lActionScript 2, cest le fait de pouvoir crire ses propres classes dans des chiers externes (dont lextension est .as). Pour ces deux premires versions du langage, le vocabulaire est ainsi commun 99 %, et cest dans la faon de dvelopper et dcrire les scripts quil faut distinguer ActionScript 1 et ActionScript 2. Pour tre plus prcis, on parle de programmation oriente objet en ActionScript 2, alors quen ActionScript 1, on parle de programmation structure ou squentielle. Cet ouvrage est compatible avec ActionScript 1 et ActionScript 2 puisque les lignes dinstructions sont valables pour les deux versions du langage. Alors que
IX
t 2007 7:29 07
lActionScript 3 est sorti, si vous avez achet ce livre, cest que vous naurez srement pas besoin de vous lancer dans la programmation oriente objet.
Remarque
Adobe ne mentionne que Fichier Flash (ActionScript 2.0) lorsque vous souhaitez crer un nouveau document car cest le mme type de document pour lActionScript 1 et lActionScript 2. Seule lapproche dans la programmation diffre comme nous lavons expliqu plus haut.
ActionScript 3
Comme nous lvoquions dans le paragraphe prcdent, cest votre besoin en matire de dveloppement qui a motiv votre choix et vous a pouss acheter ce livre. Mme si en ActionScript 3 il est encore possible de programmer de manire structure, la syntaxe nen est pas pour autant accessible. Par ailleurs, sachez que le vocabulaire diffre compltement entre lActionScript 1, 2 et 3. Pour avoir un aperu de ce dernier et vous rendre compte des diffrences au travers de nombreux exemples, rendez-vous sur le site www.yazo.net.
Bouton ou clip ?
Nous utiliserons parfois le terme Bouton pour dsigner une occurrence sur laquelle lutilisateur peut cliquer. Il sagira dans 99,9 % des cas doccurrences de clips. Il est trs important que vous compreniez ds prsent que lutilisation des symboles de type Bouton est gnralement dconseille. Il est en effet impossible de dnir une variable dans loccurrence dun bouton ou dutiliser les mthodes de la classe MovieClip(). Ayez donc le rexe de crer des symboles de type Clip et non de type Bouton pour crer dynamiquement vos interfaces.
Doit-on utiliser les composants ?

Si vous dmarrez en ActionScript, la rponse cette question est embarrassante ! Pourquoi programmer ce qui existe dj, me direz-vous ? Les composants vous vitent en effet de redvelopper ce qui la dj t par dautres que vous : menus, textes dlants, lments de contrle de mdias, calendriers, barres de chargement, etc. Mais lorsque vous apprenez une langue, est-il prfrable de retenir des listes dexpressions ou dapprendre sa grammaire et son vocabulaire ? En fait, il est fortement conseill dapprendre dabord lActionScript sans faire appel aux composants, mme si vous devez redvelopper ce qui la dj t, car votre objectif principal est de matriser ce langage. Utiliser des morceaux de code que vous ne comprendrez que dans leur contexte ne vous fera pas progresser. Il vous faudra donc connatre les
X
150 scripts Livre Page XI Lundi, 20. ao t 2007 7:29 07
Avant-propos
notions lmentaires, telles que les techniques de lalgorithme, les gestionnaires, les mthodes de la classe MovieClip() et les classes intgres. En revanche, ds lors que vous aurez compris les grands mcanismes de lActionScript et ceux des composants, ne rinventez pas la roue !
Structure de louvrage
Le livre sarticule autour de cinq grandes parties. La premire partie vous prsentera des animations ddies aux techniques relatives au contrle des lments composant une interface. Vous dcouvrirez ainsi diffrents types de menus et boutons, des scripts de contrle du dplacement doccurrences sur la scne, des techniques de construction dynamique de linterface, et bien dautres encore. La deuxime partie est consacre la dcouverte des techniques de contrle des mdias. Il est conseill de se rfrer dans un premier temps aux explications donnes en annexe de ce livre si vous ne connaissez pas la technologie Flash Media Server (anciennement Flash Communication Server). La troisime partie est trs importante car elle vous permettra de comprendre les contraintes de traitement et de mise en page du texte dans une animation. La quatrime partie vous dmontrera que la ralisation de jeux en Flash ne prsente pas forcment de difcults particulires. Nous avons principalement retenu des jeux pour enfants qui sont utiliss dans de nombreux sites, ainsi que des jeux plus classiques de tir, de grattage et de machine sous. En simulant un jeu de dames en rseau, vous dcouvrirez galement comment crer un jeu multijoueur. Enn, la cinquime partie est ddie aux techniques de contrle de la scne dune animation. En annexe, vous trouverez des explications et des scripts (entiers ou partiels) rcurrents qui vous sont proposs tout au long de louvrage. Nous avons en effet prfr regrouper les explications communes plusieurs animations que dexpliquer plusieurs fois le mme point dans diffrentes analyses et augmenter ainsi inutilement le volume de ce livre.
Structure dune tude de cas

Comme vous pourrez le constater, la prsentation dune animation lautre est toujours identique : elle sappuie sur une structure prcise qui facilite la comprhension de lanalyse des scripts.
XI
150 scripts Livre Page XII Lundi, 20. ao t 2007 7:29 07
Titre de lanimation
Un petit texte de prsentation explique lintrt de lanimation et son fonctionnement dans certains cas.
Figure 1
Lgende des gures
Rappel
Pour certaines animations, nous rappelons une ou plusieurs bases, et nous vous mettons en garde sur les piges viter.
Description du chier
Indication de la version de Flash Player compatible avec lanimation
Chemin daccs : NomDunDossierPrincipal/NomDunSousDossier/NomDeLanimation.a Nous vous dcrivons ici la construction de linterface de lanimation, cest--dire les occurrences et textes dynamiques prsents sur la scne, et indiquons leurs noms. Dans certaines animations, nous numrons des procdures, sous formes de listes numrotes. Par exemple : 1. Procdure 1. 2. Procdure 2. 3. Procdure 3.
Script
Le script vous est ensuite prsent
var menus = ["Destinations", "Tarifs", "Promotions", "Horaires"]; var destinations = ["Asie", "Amrique du sud", "Amrique central", "Etats-Unis", "Europe"];
sen suit lanalyse

XII
150 scripts Livre Page XIII Lundi, 20. ao t 2007 7:29 07
Avant-propos
Analyse
Ligne 1 : dans certains cas, nous analysons ou expliquons le script ligne par ligne.
Rappel
Quelques petits commentaires ou rappels peuvent venir apporter une aide complmentaire.
Lignes 7 9 : certaines lignes dinstructions sont analyses et/ou commentes globalement.
Bogues ventuels
Pour certaines animations, nous vous mettons en garde sur des risques derreurs et/ou nous insistons sur limportance de certaines lignes.
Tlchargement des animations utilises dans cet ouvrage

Vous pouvez tlcharger toutes les animations que nous dcrivons dans ce livre ladresse suivante : www.editions-eyrolles.com.
XIII
150 scripts Livre Page XIV Lundi, 20. ao t 2007 7:29 07
150 scripts Livre Page XV Lundi, 20. ao t 2007 7:29 07
Table des matires
INTRODUCTION
Se prparer la lecture de louvrage . . . . . . . . . . . . . . . . . . . . . . . . . .

Utilisation du XML dans Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Crer un document XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Charger un document XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lire un nud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lire un attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Informations complmentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Premier exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Deuxime exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1 2 4 4 6 8 11 11 16 19 21 24
Interprtation du nom dune occurrence . . . . . . . . . . . . . . . . . . . . . . . . . . Gestion des lignes dinstructions contenues dans une boucle for() . . . Le sens du mot-cl this selon les contextes . . . . . . . . . . . . . . . . . . . . . . . . . .
PARTIE I
Linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 1
25
Optimisation dune animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Techniques doptimisation dune production en Flash . . . . . . . . . . . . . .
Prise en main du logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27 27 27
150 scripts Livre Page XVI Lundi, 20. ao t 2007 7:29 07
Avant de dmarrer un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimisation via lActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . En cours de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Piges et autres bogues rcurrents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29 30 32 32 33
Raliser un prchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 2
Les menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Barre de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu droulant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu anim avec la classe Tween() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu droulant avec le composant MenuBar . . . . . . . . . . . . . . . . . . . . . . . Menu en accordon anim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu en accordon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Menu contextuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ronde de boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Le composant Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navigation par onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navigation dynamique par onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Construction dynamique du menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 3
37 37 40 44 48 52 58 58 62 64 67 69 73
Les boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Crer un bouton bascule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dsactiver un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser un double-clic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un bouton avec un effet denfoncement . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 4
75 75 77 80 82
Les variateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Variateur linaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Variateur circulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XVI
85 85 89
150 scripts Livre Page XVII Lundi, 20. ao t 2007 7:29 07
Table des matires
Variateur de couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Variateur de couleur avec la classe geom.ColorTransform . . . . . . . . . . . .

CHAPITRE 5
91 95
Les paniers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Panier sous forme de liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Drag & drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Drag & drop avec gestion de linventaire . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 6
97 97 102 104
Les lments de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ralisation dun formulaire avec les composants Flash . . . . . . . . . . . . . . Ralisation dun QCM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ralisation dun QCM avec un chier XML . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 7
109 109 114 117
Scroll et panoramiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Scroll vitesse constante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dplacement dun point un autre dans un plan panoramique . . . . . . . Dlement de plusieurs plans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 8
121 121 123 126
Les transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Transition entre deux images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Transition au chargement dune animation . . . . . . . . . . . . . . . . . . . . . . . . Transition en utilisant la classe TransitionManager() . . . . . . . . . . . . . . . .
CHAPITRE 9
129 129 132 134
Constructions dynamiques dinterfaces . . . . . . . . . . . . . . . . . . . . . . .

Placement dynamique de symboles sur la scne . . . . . . . . . . . . . . . . . . . . Travailler avec le nom des occurrences . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utilisation de chiers XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
137 137 141 144

XVII
150 scripts Livre Page XVIII Lundi, 20. ao t 2007 7:29 07
Crer un symbole modle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Trac dune carte gographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Imbriquer des animations les unes dans les autres. . . . . . . . . . . . . . . . . . . Travailler avec les coordonnes de la souris . . . . . . . . . . . . . . . . . . . . . . . . Cration dune palette de couleur avec getPixel() . . . . . . . . . . . . . . . . . . . Utilisation dune palette de couleur utilisant getPixel() . . . . . . . . . . . . . .
CHAPITRE 10
149 152 155 157 158 161
Contrle et afchage du temps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Raliser une horloge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser un compte rebours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser un chronomtre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Calculer une date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dvelopper un calendrier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Temporiser une action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rpter une action intervalles rguliers . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser un planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Planning sur plusieurs mois . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 11
163 163 167 171 174 179 184 187 190 195
Dplacement de personnages ou dobjets . . . . . . . . . . . . . . . . . . . .

Dplacement par clics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dplacement par glisser-dplacer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dplacement par glisser-dplacer avec perspective . . . . . . . . . . . . . . . . . . Dplacement avec ralentissement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Yeux qui suivent la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser une loupe sur un plan ou une photo . . . . . . . . . . . . . . . . . . . . . . . Tester la collision entre deux occurrences . . . . . . . . . . . . . . . . . . . . . . . . . . lasticit dans un mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . lasticit dans un mouvement avec la classe Tween . . . . . . . . . . . . . . . . . . Simuler la gravit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Faire tomber de la pluie ou de la neige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contrle par le clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XVIII
199 200 203 208 211 213 214 217 221 222 225 229 231
150 scripts Livre Page XIX Lundi, 20. ao t 2007 7:29 07
Table des matires
SkyScraper dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SkyScraper dynamique avec tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CHAPITRE 12
235 236
La scne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Informations et contrle de la scne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 13
239 239
Enregistrement de scores et autres donnes . . . . . . . . . . . . . . . . .

Utilisation des cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Enregistrement dans une base MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . Obtenir un identiant unique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
243 244 249 253
PARTIE II
Les mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 14
255
Contrle des mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ralisation dun diaporama dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . Ralisation dun diaporama dynamique avec un chier XML . . . . . . . . . Ralisation dun diaporama dynamique avec un chier XML et de nombreuses photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ralisation dun lecteur MP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ralisation dun lecteur vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diffuser une vido en streaming (Flash Media Server) . . . . . . . . . . . . . . Ralisation dun module de visioconfrence (Flash Media Server) . . . . Ralisation dun module de confrence (Flash Media Server) . . . . . . . . . Contrler une squence QuickTime partir dune piste Flash . . . . . . . Interaction du niveau dentre du microphone et de la scne . . . . . . . . . Sous-titrer une vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Synchroniser un son avec des textes et des images . . . . . . . . . . . . . . . . . . Synchroniser un son au format FLV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
257 257 260 261 266 271 273 274 279 281 283 288 290 294
XIX
150 scripts Livre Page XX Lundi, 20. ao t 2007 7:29 07
CHAPITRE 15
Chat et RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cration dun chat avec Flash Media Server . . . . . . . . . . . . . . . . . . . . . . . . Cration dun lecteur de ux RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lecteur de ux RSS avec un menu local droulant . . . . . . . . . . . . . . . . . . . Lecteur de ux RSS sans composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
297 297 302 308 310
PARTIE III
Manipulation du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 16
313
Mise en forme du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mettre du texte en forme (classe TextFormat()) . . . . . . . . . . . . . . . . . . . . . Mettre du texte en forme (classe TextFormat() et CSS) . . . . . . . . . . . . . . . Contrler la casse et la nature dun texte . . . . . . . . . . . . . . . . . . . . . . . . . . . Vrication de la saisie dun texte en cours de frappe . . . . . . . . . . . . . . . . Le composant DataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 17
315 315 322 327 329 332
Traitement du texte et des variables . . . . . . . . . . . . . . . . . . . . . . . . . .

Vrier la validit dune adresse e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . Faire dler un texte avec ascenseur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Faire dler un texte avec ascenseur des lignes cliquables . . . . . . . . . . . . Faire dler un texte Description du chier . . . . . . . . . . . . . . . . . . . . . . . . Raliser un systme de mot de passe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser un module de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rendre un texte cliquable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grer les tabulations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afchage en mode Telex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afchage en mode Aroport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afchage de lettres glissant sur la scne . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afchage dun texte clignotant avec le ltre GlowFilter . . . . . . . . . . . . .
XX
335 335 337 343 348 350 352 355 358 362 363 365 368
150 scripts Livre Page XXI Lundi, 20. ao t 2007 7:29 07
Table des matires
Afchage dun texte qui vibre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Afchage dun texte qui explose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 18
370 372
Manipulation des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Afcher un tableau (array) sous forme de liste . . . . . . . . . . . . . . . . . . . . . Raliser un quadrillage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Raliser une grille de calculs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Manipuler les tableaux associatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
377 377 381 384 388
PARTIE IV
Les jeux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 19
391
Jeux pour enfants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Jeu du Memory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Puzzle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Puzzle avec chargement dynamique de photos . . . . . . . . . . . . . . . . . . . . . . Jeu de coloriage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu de mmoire sonore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu du morpion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu du serpent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu du taquin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu du pendu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu du pendu avec plusieurs parties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 20
393 393 399 404 408 412 417 421 425 428 433
Autres jeux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Machine sous (jackpot) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu de tir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu de grattage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
437 437 446 451

XXI
150 scripts Livre Page XXII Lundi, 20. ao t 2007 7:29 07
Jeu de grattage avec utilisation d'un masque . . . . . . . . . . . . . . . . . . . . . . . . Jeu de dames en rseau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jeu du chemin le plus court . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modles pour le jeu du chemin le plus court . . . . . . . . . . . . . . . . . . . . . . . . . Exercice pdagogique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
453 455 462 468 469
PARTIE V
Autres fonctionnalits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 21
473
Impression, e-mail et fentre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Envoyer un e-mail partir de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Imprimer une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Centrer une animation dans la fentre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Redimensionner la fentre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ouvrir une pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Appeler une fonction JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 22
475 475 476 482 484 485 485
System.capabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connatre la langue de lordinateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connatre le systme dexploitation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connatre la version du Flash Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 23
487 487 491 492
CD-Rom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Crer un projecteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contrles dune projection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XXII
495 496 497
150 scripts Livre Page XXIII Lundi, 20. ao t 2007 7:29 07
Table des matires
ANNEXE
Notions complmentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Flash Media Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Comment a marche ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer une connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Gnrer un ux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Envoyer et recevoir un ux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les SharedObject avec Flash Media Server . . . . . . . . . . . . . . . . . . . . . . . . . tablir une connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . indexOf() ou la recherche dune chane . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mise en forme du texte avec la classe TextFormat() . . . . . . . . . . . . . . . . . . Changer la couleur dune occurrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Classe Color() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mthode ColorTransform() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
501 503 503 504 505 506 508 509 511 513 514 515 515 517
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XXIII
150 scripts Livre Page XXIV Lundi, 20. ao t 2007 7:29 07
150 scripts Livre Page 1 Lundi, 20. ao t 2007 7:29 07
Introduction
Se prparer la lecture de louvrage
Comme nous lvoquions dans lavant-propos, nous prfrons nous assurer que vous matrisez certaines bases de lActionScript avant de vous lancer dans la lecture de cet ouvrage. Nous vous encourageons donc vivement parcourir les quelques pages qui suivent car elles prsentent des rappels lmentaires ncessaires pour une bonne comprhension des analyses des tudes de cas proposes dans ce livre. En n douvrage, lannexe vous fournira des explications communes plusieurs tudes de cas. linverse, cette introduction vous offre en amont un rappel des notions lmentaires telles que : lutilisation du XML dans Flash ; linterprtation du nom dune occurrence ; la gestion des lignes dinstructions contenues dans une boucle for(); le sens du mot-cl this selon les contextes. Il ne sagit ni de simples introductions, ni dexplications acadmiques exhaustives. Ces notions sont primordiales pour un dveloppeur Flash et nous les utiliserons trs souvent dans nos tudes de cas, cest pourquoi nous commencerons par les tudier ensemble ici.
Utilisation du XML dans Flash

Comprendre le XML dans Flash
Aujourdhui, il est trs difcile de concevoir un dveloppement sans faire appel un chier XML, mais quoi sert exactement cette technologie ? Lorsque vous avez besoin de manipuler des donnes dans une animation Flash, dans le but de les traiter ou de les afcher sur la scne au moment de la lecture dun chier .swf, plusieurs solutions soffrent vous. Les variables peuvent contenir ces informations, mais il en faudra autant que vous avez de valeurs stocker/traiter. Cette technique nest donc pas adapte. Les tableaux prsentent lavantage de pouvoir contenir plusieurs valeurs, mais le manque de souplesse dans le traitement des donnes contenues fait de cette technique une solution inadapte. Dans ce cas, quelle autre possibilit avons-nous ? Dans certaines applications, lutilisation dun chier texte contenant des paires variable = valeur & variable2 = valeur pourrait nous sufre, mais cette technique reste proche de celle du tableau. La meilleure des solutions reste tout de mme lutilisation du XML. Malheureusement, cette dernire solution a mauvaise rputation auprs des novices car elle semble complique par lapparence des documents quil est ncessaire de gnrer en XML et des lignes dinstructions en ActionScript quil faut saisir. Relevons le dt ! Le principe dun chier XML est de contenir des balises qui en imbriquent dautres. Avant daller plus loin et dtre trop technique, commenons par ce petit exemple la porte de tout le monde, y compris les nophytes. Imaginons un btiment, celui dune bibliothque, qui contiendrait quatre tages proposant des publications classes par thmes. Au premier tage, des livres pour les jeunes, au deuxime, des publications scientiques, au troisime des romans et CD et enn au dernier tage les publications de presse. Voici quoi pourrait ressembler la structure principale du document XML.
<Bibliotheque> <Accueil></Accueil> <Jeunes></Jeunes> <Sciences></Sciences> <Loisirs></Loisirs> <Presse></Presse> </Bibliotheque>
Vous remarquerez quune balise ouverte est obligatoirement ferme. Si elle ne lest pas, le document nest pas valide et il sera alors impossible de le parcourir, comme dans lexemple suivant o la balise <Sciences> est mal ferme.
<Bibliotheque> <Accueil></Accueil> <Jeunes></Jeunes>
Se prparer la lecture de louvrage Introduction
<Sciences><Sciences> <Loisirs></Loisirs> <Presse></Presse> </Bibliotheque>
Remarque
Parser un document, revient lire et interprter le contenu dun document. Le terme arbre est galement un synonyme de document XML .
Simplions davantage notre premier exemple an dy ajouter des valeurs.

<Bibliotheque> <Accueil>1</Accueil> <Jeunes>3</Jeunes> <Sciences>2</Sciences> </Bibliotheque>
Les trois chiffres que nous venons dajouter correspondent au personnel affect chaque tage. Avant daller plus loin, apportons un premier mot de vocabulaire. Le nud est un terme qui dsigne un niveau dans un document. Il contient deux balises, une qui indique son ouverture et une autre qui indique sa fermeture. Entre les deux balises, on place une valeur.
<Jeunes>3</Jeunes>
Lexemple ci-dessus est donc un nud dont le nom de balise est Jeunes, il contient une valeur, savoir le chiffre 3. Il existe une autre syntaxe qui ne contient quune seule balise. Dans ce cas, elle ne peut contenir que des attributs, mais pas de valeurs.
<Jeunes effectifs="3"/>
Dans lexemple ci-dessus, la balise dont le nom est Jeunes contient un attribut intitul effectifs dont la valeur est 3. Dois-je utiliser plutt des valeurs ou attributs ? On se pose souvent cette question. Ne choisissez pas de crer tous vos documents XML avec des nuds contenant des valeurs sans attributs et inversement. Selon la nature de vos besoins, vous combinerez dailleurs srement les deux. Vous dcouvrirez au travers des diffrentes tudes de cas de ce livre, que les exemples sont tous trs diffrents.
Remarque
Lavantage dutiliser les attributs est de pouvoir faire rfrence un nom sans se soucier de sa position.
Avant dapprendre charger un document XML dans un SWF, comment fait-on pour le crer ?
Crer un document XML

La technique est trs simple, commencez par lancer un diteur de texte qui gre de prfrence lUTF-8, puis suivez ces instructions : 1. Crez un nouveau document. 2. Saisissez le script simpli (5 lignes de script gurant page 3). 3. Enregistrez votre document sous le nom biblio.xml.
Remarque
Assurez-vous que lencodage du chier est en Unicode ou en UTF-8. Utilisez le bouton Options ou le menu local droulant dans la fentre d'enregistrement pour dnir ou vrier le format. Parfois, ce rglage doit se faire dans les menus du logiciel ou dans sa barre d'outils, car il sagit dun attribut ou dune proprit de la page.
Les spcialistes en XML pourraient crier au scandale ! Il ne parle mme pas de lencodage, ni de la version du XML quil faut prciser sur la premire ligne du document . Oui, ce document est vraiment simpli, mais nous devons apprendre le strict minimum pour commencer. Cette structure fonctionne trs bien, il ny a aucune raison pour que nous soyons exhaustif ce niveau-l des explications.
Charger un document XML

Quel est le code en ActionScript qui permet de charger le contenu de ce document dans un SWF ?
var charge = new XML(); charge.load("biblio.xml");
Voil, cest tout ! Le contenu du chier biblio.xml est prsent dans le SWF et plus particulirement dans linstance intitule charge qui est comparable une variable. Il aura suf de crer une instance de la classe XML avec le constructeur new puis de charger le chier au moyen de la mthode load() de la classe XML(). Le player Flash a charg le contenu du chier, puis il a lu toutes les lignes du document.
Remarque
La premire ligne dun document XML porte le numro d'index 0. Dans notre exemple, nous avons deux nuds dont les numros d'index sont 0 et 1.
Avant de continuer les explications, nous devons rsoudre un premier problme. Si un saut de paragraphe a t insr entre les deux lignes Jeunes et Sciences, est-ce que le player Flash doit comptabiliser la ligne vide comme un nud ?
<Bibliotheque> Jeunes>3</Jeunes> <Sciences>2</Sciences> </Bibliotheque>
Est-ce que le nud <Sciences> porte lindex 1 ou 2? Il serait trs difcile de se passer des sauts de paragraphe gnrs volontairement pour espacer les lignes, structurer ainsi larbre et faciliter sa lecture. Si une ligne de commentaire est ajoute, comment prciser au player Flash quil ne sagit pas dun nud ? Tout simplement en lui signiant que les blancs (lignes vides et commentaires) doivent tre ignors.
var charge = new XML(); charge.load("biblio.xml"); charge.ignoreWhite = true; Attention
Noubliez pas de saisir un W majuscule au milieu de la proprit ignoreWhite.
ce niveau-l de lexplication, nous avons bien compris que le contenu du document XML se trouve dans charge. Mais comment lire les nuds contenus dans linstance ? Avant de rpondre cette question, une autre se pose. Vous constaterez rapidement que certains documents XML peuvent tre trs longs, donc trs lourds charger. Lorsque la ligne dinstruction charge.load("biblio.xml") sexcute, les donnes sont-elles dans la mmoire vive de lordinateur en une fraction de seconde ? Tout dpend de la vitesse de votre connexion Internet et du poids du document. Quoi quil en soit, le temps de chargement du chier XML sera beaucoup plus long que le temps dexcution des lignes dinstructions de votre script. En partant de ce constat, il est plus facile de comprendre pourquoi nous navons pas le droit dajouter la ligne suivante :
var charge = new XML(); charge.load("biblio.xml"); charge.ignoreWhite = true; vAffichage = charge;
La variable vAffichage est celle dun texte dynamique sur la scne. En excutant ce script, nous pourrions nous attendre ce que le contenu de linstance vienne safcher sur la scne. Et bien non ! Il faut dabord sassurer que le contenu du document XML est bien charg en mmoire vive de votre ordinateur avant de tenter de faire appel lui. Nous devons donc ajouter ce gestionnaire :
var charge = new XML(); charge.load("biblio.xml"); charge.ignoreWhite = true;
charge.onLoad = function() { vAffichage = charge; };
Au moment o le chargement est termin, la variable vAffichage va enn pouvoir contenir charge. Voil, si vous ntes pas sr(e) davoir tout compris, nous vous invitons vivement relire ces explications car nous allons prsent essayer de comprendre comment lire un nud.
Lire un nud
Attention
Avant toute chose, il est important que vous sachiez que les nuds dune instance XML fonctionnent sur le mme principe que les entres dun tableau. Le premier nud porte l'index 0.
La technique est une fois encore trs simple, soyons mthodiques et nallons pas trop vite. Imaginons que nous ayons deux textes dynamiques sur la scne dont les noms de variables sont nbrPersonnesJeunes et nbrPersonnesSciences. Voici quoi devrait ressembler le script de votre animation pour placer le contenu de linstance charge sur la scne.
Remarque
partir de maintenant, nous ne reprenons plus les trois premires lignes du script, elles seront chaque fois sous-entendues.
charge.onLoad = function() { nbrPersonnesJeunes = charge.childNodes[0].childNodes[0]; nbrPersonnesSciences = charge.childNodes[0].childNodes[1]; };
Mais que signie charge.childNodes[0]? Pour mieux comprendre, voici le contenu dun document XML qui nest pas valide, mais nanmoins accept par Flash.
<Bibliotheque> <Jeunes>3</Jeunes> <Sciences>2</Sciences> </Bibliotheque> <Piscine> <Bassin>3</Bassin> <Administratif>2</Administratif> </Piscine>
Aprs chargement du chier XML, nous pouvons dire que linstance charge contient lensemble des balises. Donc, nous devons toujours commencer une ligne dinstruction par charge pour y faire rfrence. Maintenant, pourquoi crire childNodes[0] systmatiquement aprs le nom de linstance ? Dans notre exemple dorigine la premire et unique
6
balise sintitule Bibliotheque. Il nexiste pas dautre balise la racine. Elle porte donc le numro dindex 0, do le rsultat charge.childNodes[0], cest--dire le nud dont lindex est 0 dans linstance charge. Dans le dernier exemple donn, nous avons deux balises la racine. Bibliotheque et Piscine. Imaginez quun arbre ait deux troncs la base ! Ce ne serait plus un arbre ! Mme si la nature le tolre srement, en XML, cela nest pas possible. Alors le script qui va suivre est accept en ActionScript, mais pas dans les applications qui grent correctement le XML.
nbrPersonnesJeunes = charge.childNodes[0].childNodes[0]; nbrPersonnesBassin = charge.childNodes[1].childNodes[0];
Les deux lignes suivantes vont safcher dans les textes dynamiques sur la scne.
<Jeunes>3</Jeunes> <Bassin>3</Bassin>
Retenons donc que la valeur du premier childNodes ne peut tre diffrente de 0. Pourquoi ne peut-on pas obtenir 3 la place de <Jeunes>3</Jeunes>? Cest nous dindiquer au player Flash quil doit aller plus loin dans larborescence. Si nous reprenons donc correctement notre code, voici quoi il doit ressembler :
nbrPersonnesJeunes = charge.childNodes[0].childNodes[0].firstChild; nbrPersonnesSciences = charge.childNodes[0].childNodes[1].firstChild;
Essayons de traduire ce que comprend le player Flash.

charge.Bibliotheque.Jeunes.firstChild;
Le mot firstChild revient crire childNodes[0], cest--dire la premire information contenue dans un nud. La valeur 3 est donc considre comme un nud, tout du moins considre comme la premire information contenue dans charge.Bibliotheque[0].Jeunes[0]. Imaginons prsent que les nuds <Jeunes> et <Sciences> en contiennent dautres.
<Bibliotheque> <Jeunes> <Personne>Laurence</Personne> <Personne>Lola</Personne> <Personne>Manon</Personne> <Personne>Julie</Personne> </Jeunes> <Sciences> <Personne>Pascale</Personne> <Personne>Celia</Personne> <Personne>Charlene</Personne> </Sciences> </Bibliotheque>
Notre chier XML ne se contente plus de contenir des numros indiquant les effectifs, mais des noms de personnes affectes aux tages des Jeunes et des Sciences.
7
Pour lire Julie, il faut donc demander au player Flash de passer par les nuds suivants :
vResponsable = charge.childNodes[0].childNodes[0].childNodes[3].firstChild;
Sur la scne, un texte dynamique dont le nom de variable est vResponsable va afcher le mot Julie. Vous savez prsent parcourir tout un document. Nous naborderons pas dans ce chapitre la combinaison du XML dans Flash avec les boucles for() car de nombreuses tudes de cas font appel cette combinaison. Nous analyserons la structure du script, mais pour linstant, revenons plutt sur une notion trs intressante. Jusqu prsent, nous avons utilis des valeurs telles que : 3 et Julie, mais que sont les attributs en XML ?
Lire un attribut
Le document XML suivant prsente nouveau une partie des effectifs de notre bibliothque, mais sous une forme diffrente. Imaginons en effet que nous ayons de nombreux nuds, cest--dire de nombreuses lignes. Est-il indispensable davoir une valeur pour chaque nud ?
<Bibliotheque> <Jeunes> <Personne nom="Laurence"/> <Personne nom="Lola"/> <Personne nom="Manon"/> <Personne nom="Julie"/> </Jeunes> </Bibliotheque>
Cette syntaxe prsente lavantage de simplier votre document car les lignes y sont moins longues et plus claires ds lors quon a compris la notion dattribut. Voici une mthode pour lire un attribut. 1. Commencez par prciser le chemin du nud dont vous souhaitez lire un attribut.
vResponsable = charge.childNodes[0].childNodes[0].childNodes[3]
2. Ajoutez le mot attributes spar par un point.

vResponsable = charge.childNodes[0].childNodes[0].childNodes[3].attributes
3. Pour nir, indiquez le nom de lattribut.

vResponsable = charge.childNodes[0].childNodes[0].childNodes[3].attributes.nom;
Prcisons quune balise peut contenir plusieurs attributs comme dans lexemple suivant.
<Personne nom="Laurence" age = "35" profession ="Enseignante"/>
Si vous le souhaitez, vous pouvez combiner les attributs et les valeurs dans une balise. Voici ce que cela pourrait donner :
<Personne age = "37" yeux ="noirs" taille ="165">Laurence</Personne>
Pointer directement sur un nud grce la proprit idMap

Avec larrive de Flash 8, une nouvelle proprit a fait son apparition et quelle proprit ! Dans Flash MX 2004 et les versions antrieures, pour atteindre un nud prcis, vous deviez parcourir toute larborescence de votre instance XML. Avec le player Flash 8, vous avez la possibilit dutiliser la proprit idMap pour pointer directement sur un nud qui doit possder obligatoirement un attribut intitul id, quel que soit son niveau. Prenons lexemple dun chier intitul societe.xml dont la structure est la suivante :
<Bibliotheque> <Personne id="Marie" nom="Dupond"> <Profession>Enseignante</Profession> <Age>27</Age> </Personne> <Personne id="Marc" nom="Martin"> <Profession>Coursier</Profession> <Age>24</Age> </Personne> <Personne id="Jrme" nom="Durand"> <Profession>Responsable de dpartement</Profession> <Age>35</Age> </Personne> </Bibliotheque>
Ce document contient trois nuds enfants de niveau 1 la racine. Chacun possde deux proprits intitules id et nom. Pour pointer sur le nud 2 de niveau 1 (Jrme Durand), il faudrait utiliser le script suivant :
charge = new XML(); charge.load("societe.xml"); charge.ignoreWhite = true; charge.onLoad = function() { resultat = charge.firstChild.childNodes[2]; };
Il existe une solution plus simple qui fait appel la proprit idMap.
charge = new XML(); charge.load("societe.xml"); charge.ignoreWhite = true; charge.onLoad = function() { resultat = charge.idMap["Jrme"]; };
Comme vous pouvez le constater, il est plus ais de faire rfrence une information qui parle davantage quun numro. Attention toutefois certains abus : que se passe-t-il sil existe plusieurs Jrme dans notre arborescence ? Et bien ce sera le dernier nud qui possde cette valeur dattribut qui sera retenu.
9
Par consquent, utilisez cette technique avec des valeurs qui doivent tre uniques dun nud lautre, telles quun numro de scurit social, une cl primaire propre un enregistrement, un code personnel, etc. Notre exemple est volontairement simple pour cette premire approche du XML. Prcisons tout de mme que la proprit idMap est galement trs intressante pour les nuds dont le niveau est lev, cela permet de raccourcir les chemins. Voici une comparaison, partons de ce nouveau document.
<Bibliotheque> <Jeunes> <Personne id="Marie" nom="Dupond"> <Profession>Enseignante</Profession> <Age>27</Age> </Personne> <Personne id="Marc" nom="Martin"> <Profession>Coursier</Profession> <Age>24</Age> </Personne> <Personne id="Jrme" nom="Durand"> <Profession>Responsable de dpartement</Profession> <Age>35</Age> </Personne> </Jeunes> <Sciences> <Personne id="Eva" nom="Girondon"> <Profession>En retraite</Profession> <Age>58</Age> </Personne> <Personne id="Daniel" nom="Duvent"> <Profession>En congs paternit</Profession> <Age>26</Age> </Personne> <Personne id="Georges" nom="Maltris"> <Profession>En maladie</Profession> <Age>35</Age> </Personne> </Sciences> </Bibliotheque>
Pour afcher En retraite dans un texte dynamique intitul etatActuel sur la scne, voici les deux mthodes : avec utilisation de la proprit idMap:
charge.onLoad = function() { etatActuel = charge.idMap["Eva"].childNodes[0].firstChild; };
avec la rfrence un chemin relatif la racine :

charge.onLoad = function() { etatActuel = charge.firstChild.childNodes[1].childNodes[0].childNodes[0].firstChild; }
10
Informations complmentaires
Nombre de nuds
Trs souvent, vous aurez besoin de connatre le nombre de nuds contenus lintrieur dun autre. Cest la proprit length qui vous permettra de compter ces lignes. Dans notre dernier exemple, le nud <Jeunes> en contient 3. Voici la ligne dinstruction qui permet de renvoyer cette valeur.
nbrNoeuds = charge.childNodes[0].childNodes[0].childNodes.length;
Vous constaterez que le dernier childNodes nest pas spci, cest normal car vous souhaitez obtenir le nombre de tous les nuds et non un en particulier ! Il ne faut pas aller trop loin. Comme nous lavions fait prcdemment, essayons de traduire cette ligne dinstruction.
nbrNoeuds = charge.Bibliotheque[0].Jeunes.tousSesNoeuds.length;
Nom dun nud

Dans certains cas, il savre trs pratique dexploiter le nom dun nud sil est reprsentatif. Dans cet exemple, nous constaterons quil est trs ais de lire cette information.
<Bibliotheque> <Jeunes> <Personne> <Nom>Dupond</Nom> <Profession>Enseignante</Profession> <Age>27</Age> </Personne> </Jeunes> </Bibliotheque>
vNom = charge.childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeName; vProfession = charge.childNodes[0].childNodes[0].childNodes[0].childNodes[1].nodeName; vAge = charge.childNodes[0].childNodes[0].childNodes[0].childNodes[2].nodeName;
Utilisez le mot nodeName comme vous lavez fait avec attributes. La seule difcult reste une fois encore dindiquer le bon chemin, mais l il ny a pas de pige !
Premier exemple
Imaginons ce scnario qui contiendra des imbrications : Vous vous rendez dans la bibliothque de votre ville, car vous avez besoin d'un ouvrage. Arriv laccueil qui se trouve au rez-de-chausse, on vous indique que quatre tages sont votre disposition. Les horaires vous sont communiqus ainsi que les jours douverture. Il sagit dun btiment de cinq tages. Le premier est consacr aux livres pour les jeunes enfants. Le deuxime regroupe les publications scientiques destines aux tudiants et professionnels.
11
Le troisime tage propose des romans et une CDthque (CD-Rom et CD audio). Le quatrime est consacr la presse (publications quotidiennes, hebdomadaires et mensuelles uniquement). Enn, le dernier tage auquel vous navez pas accs est rserv ladministration. Essayons de reprsenter votre bibliothque sous forme de diagramme.
Figure I-1
La structure dun document XML sappuie sur ce genre de diagramme.
Leffort de comprhension que vous avez faire pour lire ce diagramme est minime car nous vous avons expliqu pralablement sa signication. Nous nallons pas tout de suite vous prsenter le chier XML correspondant avec des articles dans les avant-derniers nuds, vous pourriez prendre peur. Commenons plutt par une reprsentation simplie.
<Bibliotheque> <Jeunes> <Scolaires></Scolaires> <BD></BD> <Lecture></Lecture> </Jeunes> <Sciences>
12
<Physique></Physique> <Chimie></Chimie> <Telecommunications></Telecommunications> </Sciences> <Loisirs> <CDTheque> <CDAudio></CDAudio> <CDRom></CDRom> </CDTheque> <Romans> <Policiers></Policiers> <Amour></Amour> </Romans> </Loisirs> <Presse> <Quotidienne></Quotidienne> <Hebdo></Hebdo> <Mensuelle></Mensuelle> </Presse> </Bibliotheque>
Premire observation : deux balises peuvent se suivre sur la mme ligne ou lune sous lautre. Cela na aucune importance. Si vous avez une seule information enfermer entre deux balises, autant le faire sur une seule ligne. Dans le cas des balises <Jeunes> et </Jeunes>, vous constatez quil y a plusieurs informations stocker, vous navez plus le choix, vous tes oblig de le faire sur plusieurs lignes. Pour faciliter davantage la lecture de ce document, nous allons dcouper larbre XML en plusieurs parties. Cet exemple reprsente la bibliothque et ses tages.
<Bibliotheque> <Jeunes></Jeunes> <Sciences></Sciences> <Loisirs></Loisirs> <Presse></Presse> </Bibliotheque>
Voici une autre structure qui aboutit au mme rsultat.

<Bibliotheque> <Jeunes> </Jeunes> <Sciences> </Sciences> <Loisirs> </Loisirs>
13
<Presse> </Presse> </Bibliotheque>
Penchons-nous prsent sur le troisime nud. Il possde deux nuds enfants.

<Loisirs> <CDTheque> </CDTheque> <Romans> </Romans> </Loisirs>
Ces deux nuds possdent leur tour des nuds enfants :

<CDTheque> <CDAudio></CDAudio> <CDRom></CDRom> </CDTheque>
et
<Romans> <Policiers></Policiers> <Amour></Amour> </Romans>
Nous allons nous arrter l, vous laurez compris, lorsque vous ouvrez une balise, deux solutions soffrent vous. Vous ajoutez deux autres balises (ouvrantes et fermantes) avant de la fermer. Vous la fermez aprs avoir simplement saisi une valeur. Aprs cette dmonstration, essayez de lire le document suivant en faisant abstraction dans un premier temps des donnes quil contient (les livres et CD).
<Bibliotheque horaires="8H00-12H00 et 13H00-17H30" joursOuverture="Du lundi au samedi"> <Jeunes> <Scolaires> <Livre numero = "00001" editeur = "Hachette">La France de 1900 nos jours</Livre> <Livre numero = "00002" editeur = "Bayard">Mathmatiques en 6e</Livre> </Scolaires> <BD> <Livre numero = "00034" editeur = "Casterman">Toto en Amrique</Livre> <Livre numero = "00035" editeur = "Casterman">Toto au Tibet</Livre> </BD> <Lecture> <Livre numero = "00370" editeur = "Le Pron">Les aventures de Marine</Livre> <Livre numero = "00371" editeur = "Le pron">Qui est arriv au Tibet ?</Livre> </Lecture> </Jeunes> <Sciences>
14
<Physique> </Physique> <Chimie> </Chimie> <Telecommunications> </Telecommunications> </Sciences> <Loisirs> <CDTheque> <CDAudio> <CD numero = "100001" editeur = "Plusieurs grammes">Brel</CD> <CD numero = "100002" editeur = "Plusieurs grammes">Gainsbourg</CD> </CDAudio> <CDRom> <CD numero = "200001" editeur = "Montarnace">Le soleil jaune</CD> <CD numero = "200002" editeur = "Montarnace">Gribiste le chaton</CD> </CDRom> </CDTheque> <Romans> <Policiers> <Livre numero = "00642" editeur = "Dective">Qui a tu le grand ?</Livre> <Livre numero = "00643" editeur = "Dective">Sur les traces de Robert</Livre> </Policiers> <Amour> <Livre numero = "00798" editeur = "Lovatrice">Ils s'aiment dans le vent</Livre> <Livre numero = "00799" editeur = "Lovatrice">L'amour impossible</Livre> </Amour> </Romans> </Loisirs> <Presse> <Quotidienne> <Journal numero = "900001" date ="03/02/1970">Le matin</Journal> <Journal numero = "900002" date ="03/02/1970">Le soir</Journal> </Quotidienne> <Hebdo> <Magazine numero = "900008" date ="03/02/1970">Le nouveau regardeur</Magazine> <Magazine numero = "900009" date ="03/02/1970">La femme au drapeau</Magazine> </Hebdo> <Mensuelle> <Magazine numero = "900032" date ="02/1977">Problmes Constants Magazine</Magazine> <Magazine numero = "900033" date ="02/1977">Meilleurs Achats Consommateurs</Magazine> </Mensuelle> </Presse> </Bibliotheque>
Voil, nous venons de crer un document XML que vous seriez susceptible de devoir concevoir en mlangeant valeurs et attributs. Se passer de lun ou de lautre aurait t dommage.
15
Deuxime exemple
Prenons lexemple dun coursier qui doit tous les jours aller chercher une enveloppe dans une socit X pour lemmener dans une autre. Christophe, notre coursier, connat bien la socit X, il na plus besoin de demander laccueil quon lui apporte le paquet quil doit transporter, il va le chercher directement. La structure dun document XML est comparable nimporte quelle construction immobilire qui reprsente un ensemble compos de sous-parties. Lenveloppe que doit aller chercher Christophe se trouve quelque part sur une tagre dans les locaux de la socit commanditaire. Limmeuble est compos dtages qui contiennent des services ou dpartements qui, eux-mmes, contiennent des bureaux ou pices qui contiennent leur tour des armoires avec des tagres. Sur une mme tagre, il y a des parties. gauche de ltagre, au centre et droite, ce sont autant demplacements diffrents sur lesquelles on peu placer des documents. Christophe doit donc aller chercher une enveloppe qui se trouve au troisime tage, au service du courrier, bureau 320, dans la troisime armoire (en partant de la gauche), sur la premire tagre en partant du haut. Comment pourrions-nous reprsenter cette hirarchie sil sagissait dun document XML ? La socit X a choisi de rpartir un service par tage, nous pourrions donc dj reprsenter sa structure sous cette forme :
<SocieteX> <Commercial></Commercial> <Technique></Technique> <Communication></Communication > <Administratif></Administratif > </SocieteX>
Pour linstant, nous avons un document XML qui contient quatre nuds enfants la racine. Le troisime nud (dont le numro dindex est 2, car le premier porte le numro dindex 0) est ltage Communication. Ajoutons-lui des services.
<SocieteX> <Commercial></Commercial> <Technique></Technique> <Communication> <CommInterne> </CommInterne> <CommExterne> </CommExterne> <Courrier> </Courrier> </Communication > <Administratif></Administratif > </SocieteX>
Les services de communication interne et externes et de courrier ont t ajouts. Si nous essayons maintenant dimaginer quoi pourrait ressembler un service ou un dpartement dans une entreprise, nous avons deux solutions. Soit, ce sont des open spaces, soit
16
des bureaux qui dlimitent les emplacements des diffrents employs et donc des activits. Au service du courrier, deux personnes ont t affectes. Herv et David. Ils ont chacun leur bureau. Dans celui de David, il y a trois armoires.
<SocieteX> <Commercial> </Commercial> <Technique> </Technique> <Communication> <CommInterne> </CommInterne> <CommExterne> </CommExterne> <Courrier> <Bureau numero = "319" occupant = "Herv TIVERT" /> <Bureau numero = "320" occupant = "David LOUIS"> <Armoire></Armoire> <Armoire></Armoire> <Armoire> <Etagere> courrierExpeditionCoursier.pdf </Etagere> <Etagere></Etagere> <Etagere></Etagere> </Armoire> </Bureau> </Courrier> </Communication> <Administratif> </Administratif> </SocieteX>
La troisime armoire possde trois tagres. Souvenez-vous, cest sur la premire que Christophe, notre coursier, doit prendre le pli. La reprsentation du document XML est faite, prsent, comment pointer vers ce nud ?
charge = new XML(); charge.load("SocieteX.xml"); charge.ignoreWhite = true; charge.onLoad = function() { pliAPrendre = charge.childNodes[0].childNodes[2].childNodes[2].childNodes[1] .childNodes[2].childNodes[0].childNodes[0]; };
Si vous navez pas lu le dbut de ce chapitre, une premire question vous vient srement lesprit : pourquoi y a-t-il autant de nuds et surtout quoi correspondent-ils ? Pour rpondre cette question, nous allons nouveau essayer dinterprter chaque childNodes. Commenons par rappeler que charge.ChidlNodes[0] est obligatoire, cest pour indiquer le chemin des nuds aller chercher.
charge.childNodes[0].communication.courrier.bureau320.armoire3.etagere1
17
Attention
La syntaxe de lexemple ci-dessus nest pas valable, il sagit d'une explication sur la base dune mtaphore.
Le tableau suivant va vous permettre de comprendre comment nous pourrions parcourir le document XML.
Tableau 1 Correspondance des nuds et tages
tages
Commercial Technique Communication Administration
Code
charge.childNodes[0].childNodes[0] charge.childNodes[0].childNodes[1] charge.childNodes[0].childNodes[2] charge.childNodes[0].childNodes[3]
Retenons prsent que le nud qui nous intresse est celui de la communication, cest-dire charge.childNodes[0].childNodes[2]. Voici un deuxime tableau qui vous propose les diffrents services disponibles ltage de la communication.
Tableau 2 Correspondance des nuds et services
Services
Communication interne Communication externe Courrier
Code
charge.childNodes[0].childNodes[2].childNodes[0] charge.childNodes[0].childNodes[2].childNodes[1] charge.childNodes[0].childNodes[2].childNodes[2]
La ligne dinstruction qui nous intresse est celle du service courrier. Vous laurez compris, il suft de compter chaque fois partir de 0 et de compter le numro de ligne, appel index , qui correspond linformation recherche. Pourquoi y a-t-il un dernier childNodes[0]? Une fois encore, pour rpondre cette question, essayons de comprendre ce que nous renverrait la ligne suivante si elle ne contenait pas le dernier childNodes[0]:
pliAPrendre = charge.childNodes[0].childNodes[2].childNodes[2].childNodes[1] .childNodes[2].childNodes[0] <Etagere>courrierExpeditionCoursier.pdf</Etagere>
La ligne dinstruction vous renvoie le nud que vous avez spci. Vous souhaitez obtenir le contenu de ce nud. Dans ce cas, vous disposez de trois solutions : vous ajoutez childNodes[0];
18
vous ajoutez firstChild; vous najoutez rien, mais vous cochez la case dinterprtation des balises HTML du texte dynamique ou de saisie dans lequel le rsultat sera afch.
Figure I-2
Cochez cette case pour demander au player Flash dinterprter les balises contenues dans un texte dynamique ou de saisie.
Interprtation du nom dune occurrence

Lorsque vous faites rfrence au nom dune occurrence, vous prcisez le chemin et cela reprsente parfois une premire difcult pour les nophytes. Nous ne reviendrons pas sur cette notion, car ce nest pas ici lobjet de ce rappel. En revanche, nous allons dtailler la mthode employer pour faire rfrence une occurrence qui a gnralement t cre dynamiquement. Commenons par cet exemple :
_root.attachMovie("balle", "balle_inst", 1); balle_inst._x = 50; balle_inst._y = 50;
La premire ligne dinstruction a pour fonction de prendre dans la bibliothque de lanimation, un symbole disponible dont le nom de liaison est balle et de le placer sur la scne. Loccurrence obtenue est alors appele balle_inst. Rappelons que le chiffre dtermine le niveau, cest--dire le plan de loccurrence par rapport aux occurrences qui se trouvent et se trouveront sur la scne. Si aucune autre occurrence noccupe le niveau 1 (ou 0), celle-ci sera toujours en arrire-plan des autres. Les deux lignes dinstructions qui suivent la premire que nous venons danalyser, permettent de placer prcisment loccurrence obtenue. Dans cet exemple, il ny a aucune difcult, mais voyons prsent le cas o plusieurs occurrences auraient tres places sur la scne. Il nest pas question de dupliquer ces trois lignes dinstructions autant de fois quil y a doccurrences placer sur la scne. Il faut donc employer une boucle.
for (i=0; i<=10; i++) { _root.attachMovie("balle", "balle_inst"+i, i); _root["balle_inst"+i]._x = 15+i*35; _root["balle_inst"+i]._y = 50; }
19
Observez bien, la mthode attachMovie() est associe _root. Cela signie donc que les occurrences qui vont tres obtenues seront places sur la scne. Si nous avions une occurrence dj prsente sur la scne dont le nom serait tableauControle_inst, nous aurions pu saisir cette ligne dinstruction :
tableauControle_inst.attachMovie("balle", "balle_inst"+i, i);
Vous laurez compris, neuf exemples sur dix disponibles dans les publications traitant de lActionScript font gnralement rfrence _root, mais ce nest pas la seule solution. Dans ce cas, voici quoi devront ressembler les deux lignes qui suivent :
tableauControle_inst ["balle_inst"+i]._x = 15+i*35; tableauControle_inst ["balle_inst"+i]._y = 50;
Rappelons que les crochets symbolisent lappartenance. Dans lexemple suivant, janvier et fvrier sont bien des valeurs du tableau intitul mois.
var mois = ["janvier","fvrier","mars","avril","mai","juin"]
Si nous reprenons notre exemple ci-dessus, balle_inst est bien une occurrence de _root (ou de tableauControle_inst). Cest donc la seule solution pour faire rfrence par concatnation tous les noms des occurrences numrotes. Avez-vous dj nomm une occurrence "balle_inst"+i dans la palette Proprits ? Les guillemets et loprateur ne sont pas autoriss dans les noms doccurrences et de variables ! Si vous saisissiez donc la ligne dinstruction suivante, la player Flash serait incapable de linterprter.
"balle_inst"+i._x = 15+i*35;
Cette erreur est facile comprendre partir du moment o vous retiendrez que devant une proprit ou une mthode, seuls les noms dinstances (occurrences) ou de variables sont admis.
Astuce
Pour simplier votre script, nous aurions pu saisir les lignes d'instructions suivantes.
for (i=0; i<=10; i++) { nelleOccur = _root.attachMovie("balle", "balle_inst"+i, i); nelleOccur._x = 15+i*35; nelleOccur._y = 50; }
Pour nir, nous allons vous prsenter une syntaxe dont lavantage est quelle permet dconomiser plusieurs lignes de codes lorsque vous devez rgler les proprits dune occurrence place sur la scne avec les mthodes attachMovie() et duplicateMovieClip().
_root.attachMovie("carte", "carteFrance_inst", 1, {_alpha:60, _x:130, _y:60, _rotation:15});
et
nomduneoccurrence.duplicateMovieClip("nomcopie", 2, {_alpha:60, _x:130, _y:250, _rotation:15});
20
Gestion des lignes dinstructions contenues dans une boucle for()

Pourquoi est-il ncessaire dapporter un complment dinformations sur les boucles que vous connaissez srement ? LActionScript vous propose de dnir les scripts associs une occurrence cre dynamiquement, mais cela peut poser un problme. Prenons lexemple suivant :
for (i=0; i<=10; i++) { _root.attachMovie("photo", "photo"+i, i); _root["photo"+i]._x = 30+i*50; _root["photo"+i]._y = 50; _root["photo"+i].onPress = function() { nomDeLaPhoto = this._name; }; }
Si vous lancez une animation contenant ce script, toutes les lignes dinstructions ci-dessus ont t excutes lexception de celle qui se trouve dans le gestionnaire onPress. Cette ligne ne va sexcuter quau moment o lutilisateur cliquera sur une photo.
nomDeLaPhoto = this._name
Dans le texte dynamique qui se trouve sur la scne, celui dont le nom de variable est nomDeLaPhoto, le nom de loccurrence sur laquelle lutilisateur va cliquer va sinscrire.
this._name est une information relative loccurrence, celle qui contient cette ligne dinstruction. Cette occurrence prcisment. Rappelons que celle ou cette se traduisent notamment en anglais par this .
Le mot-cl this fait donc rfrence au nom de linstance qui se trouve devant le gestionnaire dans lequel il se trouve.
_root["photo"+i].onPress = function() { nomDeLaPhoto = this._alpha-=5; };
Le script ci-dessus signie qu chaque clic sur loccurrence laquelle est rattache ce script (pa exemple, photo3 si i vaut 3), cette mme occurrence va devenir de plus en plus transparente.
Figure I-3
Le mot-cl this fait bien rfrence au nom de l'occurrence qui se trouve devant le gestionnaire d'vnement.
21
Maintenant, essayons de comprendre pourquoi le script suivant renvoie toujours la mme valeur et notamment souvent une erreur.
photosDeClasse = ["Marine", "Marjorie", "David", "Pat", "Sandy", "Manon"]; for (i=0; i<6; i++) { _root.attachMovie("photo", "photo"+i, i); _root["photo"+i]._x = 30+i*50; _root["photo"+i]._y = 50; _root["photo"+i].onPress = function() { nomDeLaPhoto = photosDeClasse[i]; }; }
La premire question que nous vous poserons est : en combien de millisecondes sexcute cette boucle ? La rponse est simple, mais surtout logique : moins dune fraction de seconde, car cest ce qui caractrise le principe des boucles for() et while(). Ajoutons et prcisons qu la n de lexcution de la boucle, i vaut 6. Vous nallez pouvoir cliquer sur une occurrence qu la n de la boucle qui sera de toutes les faons plus rapide que vous. Au moment o vous cliquerez sur une occurrence, i vaudra donc dj 6! La ligne dinstruction suivante stait excute au moment de la boucle.
_root["photo"+i].onPress = function() {
ce moment-l, i valait une valeur trs prcise. Imaginons quil sagissait de 3, dans ce cas, lorsque vous cliquez sur loccurrence intitule photo3, la ligne dinstruction contenue dans son gestionnaire sexcute. Souvenez-vous quau moment o vous allez cliquer sur une des photos, i vaut 6. Alors que peut vous renvoyer la ligne dinstruction suivante ?
nomDeLaPhoto = photosDeClasse[6];
Une erreur ! En effet, lentre numro 6 nexiste pas. La premire entre du tableau porte le numro dindex 0 et la dernire le numro 5. Attention, le problme nest pas celui de lentre qui nexiste pas. Nous pourrions avoir dix entres dans notre tableau, alors un clic sur toutes les photos renverrait tout de mme la valeur de la sixime entre du tableau. Dans ce cas, comment faire pour obtenir la troisime entre du tableau au moment du clic sur la photo intitule photo3? Pour commencer, noubliez pas que la premire entre dun tableau porte lindex 0. Donc nous nallons pas cliquer sur loccurrence photo3 pour obtenir la troisime entre du tableau, mais sur loccurrence photo2. Comme il existe une occurrence intitule photo0, photo2 est bien la troisime occurrence. Ce problme de dcalage ne surviendra que dans les cas o vous travaillerez avec des tableaux. Reprenons, il ne sagissait que dun dtail minime par rapport notre problme majeur.
photosDeClasse = ["Marine", "Marjorie", "David", "Pat", "Sandy", "Manon"]; for (i=0; i<6; i++) { _root.attachMovie("photo", "photo"+i, i);
22
_root["photo"+i]._x = 30+i*50; _root["photo"+i]._y = 50; _root["photo"+i].sonNumero = i; _root["photo"+i].onPress = function() { nomDeLaPhoto = photosDeClasse[this.sonNumero]; }; }
Rappelons que dans le script ci-dessus, toutes les lignes dinstructions sexcutent au moment de la boucle lexception de la ligne qui est contenue dans le gestionnaire onPress. Si vous avez bien observ, nous avons ajout une nouvelle ligne :
_root["photo"+i].sonNumero = i;
Au moment de la boucle, nous avons associ chaque occurrence, une variable intitule sonNumero qui a pris pour valeur celle de i, donc diffrente et propre chaque occurrence. Loccurrence intitule photo4 contient une variable intitule sonNumero qui vaut 4. Ne peut-on donc pas dire que la variable qui vaut 2, cest celle de loccurrence qui sappelle photo2? Si nous pouvions traduire celle par this et rciproquement, voil ce que nous obtiendrions dans notre script.
photo4.onPress = function() { nomDeLaPhoto = photosDeClasse[this.sonNumero]; };
ou aussi
photo4.onPress = function() { nomDeLaPhoto = photosDeClasse[cette occurrence sur laquelle je clique.sonNumero]; };
Vous laurez compris, ds que vous dnissez un gestionnaire onPress dans une boucle for(), vous ne pouvez pas faire rfrence la variable locale (i dans notre exemple), car elle renvoie toujours la mme valeur. Vous devez donc associer une variable chaque occurrence.
Astuce
Une technique consiste rcuprer le numro gurant dans le nom pour lutiliser comme valeur. Lexemple suivant vous en fait la dmonstration.
photo4.onPress = function() { numero = this._name.substr(5, 1); trace(numero); };
23
Le sens du mot-cl this selon les contextes

Si vous avez lu les trois explications prcdentes de ce chapitre, nous avons voqu le sens de ce mot-cl, vous en savez donc srement un peu plus. Mais selon sa position dans un script, que signie ce mot-cl ? Partons de lexemple suivant :
this._rotation = 180;
Cette ligne dinstruction se trouve sur la premire image-cl de la timeline principale de votre animation. Lorsque vous tenterez de lire cette dernire dans la page dun navigateur ou dans un projecteur, toute la scne safchera lenvers, une rotation de 180 ayant t applique avant lafchage des lments qui la composent. prsent, imaginons quelle se trouve sur la premire image-cl de la timeline dune animation (un chier SWF) que vous chargez par le biais de la commande loadMovieNum(). La scne de votre animation principale ne va pas bouger ; en revanche, lanimation charge va safcher lenvers (retourne de 180). Pour nir, imaginons quelle se trouve sur la premire image-cl de la timeline dun clip. Lorsque vous placerez ce clip sur la scne, loccurrence issue de ce symbole safchera sur la scne retourne 180. Prenons dautres exemples
personnage.onPress = function() { this._rotation += 5; };
this fait rfrence au nom de loccurrence qui se trouve devant le gestionnaire, cest-dire personnage.
decor.onEnterFrame = function() { this._x += 5; };
this fait rfrence au nom de loccurrence qui se trouve devant le gestionnaire, cest--dire decor.
_root._alpha = 0; _root.onEnterFrame = function() { this._alpha += 3; if (this._alpha>=100) { delete this.onEnterFrame; } };
Rappelons que _root fait rfrence la scne. Ainsi, la premire ligne dinstruction va plonger la scne dans le noir (si la scne est noire). Ce script a donc pour effet de rendre la scne transparente, puis elle le devient de moins en moins. Lorsque son opacit dpasse les 100 %, le gestionnaire est tout simplement dtruit.
24
Partie I
Linterface
Cest le quotidien de la plupart des ashers et dveloppeurs Flash. Crer un menu, le programmer pour quil se droule, dplacer une occurrence par drag & drop (ou glisser-dposer, en franais), raliser un panier, construire dynamiquement un cran, ce sont autant de tches que vous pourriez tre conduits mener pour un dveloppement. Ce chapitre met donc laccent sur les techniques suivantes : loptimisation dune animation ; la cration de menus et boutons ; la ralisation de variateurs ; la gestion dun panier et des formulaires ; la gestion des effets de scrolls (menus et listes droulants), des panoramiques et transitions ; la construction dynamique de linterface ; le contrle du temps et de son afchage ; le dplacement de personnages et dobjets sur la scne ; lenregistrement de donnes dans des cookies et bases de donnes ; lobtention dinformations relatives la scne. Ces techniques sont toutes aussi importantes les unes que les autres, mais nous devons tout de mme mettre en avant le fait quil est primordial dtre capable de grer du XML dans une animation Flash. Cest pourquoi nous avons trs souvent utilis cette technologie dans nos tudes de cas. Par ailleurs, la construction dune interface doit vraiment se faire dynamiquement. Il est une rgle quil faut essayer de pousser au maximum de vos limites, placez et crez tout dynamiquement sur la scne, vitez de dposer vous-mme un symbole sur la zone de travail (il serait dailleurs impossible de le supprimer). Avant de vous lancer dans la lecture de ce livre, assurez-vous que vous comprenez bien les points abords dans le chapitre prcdent.
1
Optimisation dune animation
Il est trs facile de raliser une animation, avec ou sans interpolation, contenant ventuellement du code, car des centaines de sites sur Internet vous proposent des tutoriaux pour vous aider faire vos premiers pas en Flash puis en ActionScript. Allez-vous respecter toutes les rgles lmentaires qui gurent gnralement dans les notes et autres remarques de laide ofcielle de Macromedia Flash ? Sans avoir la prtention dtre exhaustif, nous allons mettre en avant certaines techniques qui vous permettront dobtenir des animations/scripts optimiss, cest--dire rapides lexcution, pas trop lourds, faciles mettre jour, et respectant certaines conventions propres la programmation.
Techniques doptimisation dune production en Flash

Nous nallons pas commencer par vous prsenter une animation optimise , ni nous arrter sur des conseils relatifs la programmation en ActionScript, mais plutt vous numrer des rgles quil est fortement conseill de suivre si vous voulez optimiser votre productivit, votre code et lexcution de vos animations.
Prise en main du logiciel

Ds le dbut de la cration dune animation, rglez sa cadence, cest--dire la vitesse de dlement de la tte de lecture. Dans le menu Modication>Document, rglez le chiffre gurant droite de ltiquette Cadence 20 au minimum.
Linterface Partie I
Nous vous conseillons de pousser cette valeur 30. Rglez galement la largeur, la hauteur et la couleur de la scne. Cette dernire pourra toujours tre change, mais il est dconseill de changer les dimensions dune animation en cours de dveloppement. Puisque vous tes dans cette fentre Proprits du document, protez-en pour rgler la cadence, la largeur, la hauteur et la couleur de la scne de vos prochaines animations de faon dnitive. Cliquez simplement sur le bouton tablir comme valeur par dfaut . Enregistrez votre animation avant mme de travailler dessus car dans certains cas, elle devra possder une identit, cest--dire tre physiquement prsente sur le disque dur de votre ordinateur sous forme de chier. Ds le premier lancement de Flash, congurez la disposition des palettes sur votre cran an de ne pas avoir les bouger continuellement, ce qui ralentirait votre productivit. Enregistrez alors cette disposition via le menu Fentre>Enregistrer la disposition des panneaux Ayez le rexe dutiliser les raccourcis prsents ci-dessous. Il en existe de nombreux autres, cest un minimum simposer pour optimiser sa productivit.
Tableau 1-1 Raccourcis clavier connatre
Raccourci
F6 F7 F5
Rsultat
Crer une image-cl reprenant le contenu de la prcdente sur le mme calque. Crer une image-cl vide. Ajouter des images. Si la tte de lecture se trouve avant la dernire image dun calque, le raccourci insre des images aprs limage slectionne. Dans le cas contraire, des images sont ajoutes entre la n du calque et limage slectionne. Transformer une slection en un Symbole. Afcher/Masquer la palette Action. Slectionner loutil Flche noire (Outil Slection). Slectionner respectivement les outils Rectangle et Ovale. Pour casser une occurrence et rcuprer son contenu. Dans le cas dun texte, vous obtenez des lettres spares. Une nouvelle excution du raccourci transforme chaque lettre en forme vectorielle. Permet de lire lanimation en plein cran (tout du moins sans les palettes). Lancer lanimation en mode dbogage. Afcher respectivement les palettes Aligner et Info.
F8 F9 La lettre V seule Les lettres R et O Ctrl + B Commande-B (Mac)
Ctrl + Entre Commande-Entre (Mac) Ctrl + Shift + Entre Commande + Shift + Entre (Mac) Ctrl + K et Ctrl + I Commande + K et Commande + I (Mac)
28
Optimisation dune animation Chapitre 1
Avant de dmarrer un projet

Si vous travaillez en quipe, dnissez des rgles, validez les documents de travail que vous allez partager. Si vous travaillez seul, imposez-vous une rigueur dans le rangement de vos chiers en commenant par crer des dossiers et sous-dossiers qui vont contenir les chiers servant la ralisation de votre projet. Parmi les documents de travail voqus ci-dessus, vous devez avoir une charte graphique et une arborescence. Il existe de nombreux autres documents, mais ces deux-l sont primordiaux. La charte graphique dnit les codes couleurs retenus pour linterface du projet ainsi que liconographie (par exemple pour la reprsentation des boutons) qui va ponctuer vos animations. Larborescence recense les diffrents crans qui vont composer votre ou vos animations. Dans le document prsentant la charte graphique, lcran du sommaire et quelques autres pages types doivent galement gurer. Lorsque vous avez une charte graphique accompagne des directives dergonomie (dnition de lemplacement des lments qui composent linterface), pensez au dcoupage de vos animations. En effet, une animation nest peut-tre pas constitue dun seul SWF. Par ailleurs, rpertoriez les parties dynamiques des parties statiques quil faudra intgrer directement dans Flash au moment de la composition de votre scne. Vous devez concevoir votre projet sous forme de modules qui sintgrent les uns aux autres. Par consquent, prparez vos mdias externes. Dnissez les noms de vos chiers. Attention, ce livre saccompagne danimations des ns pdagogiques. Nous avons donc retenu des noms de chiers en dos de chameau (avec des majuscules en dbut de chaque mot, pour faciliter la lecture). Prenez lhabitude de ne jamais utiliser de capitales dans les noms de vos chiers, cela limitera ainsi les risques derreurs lorsque vous ferez rfrence aux noms de vos chiers SWF. Rappelons que cette extension est le format dexportation de vos animations dextension .a (format de travail des documents Flash). Utilisez des noms reprsentatifs du contenu des chiers (les animations). Si vous travaillez en quipe, convenez dune nomenclature que tout le monde devra respecter. Il y a de fortes chances que vous utilisiez des chiers XML, pensez dans ce cas trs rapidement leurs structures. Anticipez sur les besoins venir en ajoutant des balises (des nuds) que vous nutiliserez peut-tre pas. Avant de raliser une animation, il est important dessayer les choix techniques non matriss dans des animations spares. Nessayez pas de nouvelles techniques dans un document de travail, vous risqueriez dabmer votre chier. valuez le temps ncessaire au traitement des mdias (images, textes/XML, sons et vidos) avant davancer une date de livraison de votre projet. Cette partie-l de la production est souvent sous-estime, ce qui repousse la date de livraison. Prparez vos symboles modles, cest--dire ceux qui vont tre utiliss plusieurs fois dans une ou plusieurs animations.
29
Linterface Partie I
Optimisation via lActionScript

Le premier conseil que nous vous invitons vivement suivre est relatif la saisie de vos scripts. Le tableau suivant vous prsente des lettres qui vous permettent dinsrer facilement du code. Rappelons le principe dapplication. Appuyez une seule fois sur la touche chap, relchez-la, puis appuyez successivement sur les deux touches souhaites.
Tableau 1-2
Commande
Function(){} if(){} for(){} delete getURL() loadMovie() removeMovieClip() startDrag() stopDrag() stop() F+N I+F F+R D+E G+U L+M R+M D+R S+D S+T
Raccourcis clavier connatre

Lettres du raccourci
Nous vous conseillons galement de placer votre code sur une seule image-cl. Dans tous les chiers dexemples des tudes de cas de cet ouvrage, vous constaterez quun calque a mme t cr spcialement pour contenir les scripts. Certaines animations contiennent un ou deux scripts dans des symboles, cela permet de rendre plus simple le dveloppement de ces tudes de cas. Tout le code dune animation peut et doit de prfrence se trouver sur une seule image-cl. Il est indispensable de placer des commentaires dans vos scripts an den faciliter sa relecture par une autre personne ou par vous-mme plusieurs jours aprs. Utilisez donc un double slash devant chaque ligne ou enfermez vos lignes dinstructions entre /* */.
//Les valeurs des variables pointDepartBordGauche //et pointDepartBordDroit ne peuvent tre //considres comme ngatives
ou aussi
/*Les valeurs des variables pointDepartBordGauche et pointDepartBordDroit ne peuvent tre considres comme ngatives*/
Utilisez les caractres dinsertion de commentaires pour dsactiver temporairement lexcution dune ou plusieurs lignes dinstructions.
//voitureRouge._x+=5; //voitureVerte._x+=5; //temps+=3;
30
ou aussi
/*voitureRouge._x+=5; voitureVerte._x+=5; temps+=3;*/
Lorsque vous rdigez un script, il contient obligatoirement plusieurs parties. Pour sparer ces dernires, utilisez deux slashs marquant ainsi un changement. Si vous souhaitez marquer un changement plus important, vous pouvez insrer deux lignes.
placePersonnage._x=placeDefinitiveX; placePersonnage._x=placeDefinitiveY; // // cadreChargement.onEnterFrame = function() { this._alpha += 5;
Vous ne devez pas nommer vos variables nimporte comment ! Commencez par ne jamais utiliser de majuscule en dbut de mot (il sagit dune rgle rserve pour les noms de classes). Vous savez srement que vous navez pas le droit dutiliser non plus des caractres spciaux et accentus dans le nom de vos variables, cependant, il est plus facile de lire un nom lorsquil est crit en dos de chameau. La variable nbrlignestableauventes est plus difcile lire que nbrLignesTableauVentes. Si vous souhaitez tre plus prcis dans le nom de vos variables ou uniquement dans certains cas de votre choix, vous pouvez opter pour lajout dun prxe, la lettre v par exemple, mettez dans ce cas la deuxime lettre en majuscule : vScore, vJours Lorsque vous nommez des occurrences, vous devez faire preuve de la mme rigueur. Nous vous conseillons fortement dajouter le sufxe _inst qui signie instance (traduction doccurrence en anglais). Vous obtiendrez ainsi personnage_inst ou personnage_ occu. la lecture de ces mots dans vos scripts, il ny aura aucun doute, il sagira bien doccurrences. Pensez effectuer les raccourcis Commande + Shift + F (Mac) ou Ctrl + Shift + F (PC) ds que vous nissez la saisie de lignes dinstructions. Cela permet de r-indenter vos lignes de code et de vrier les ventuels bogues. Malheureusement, vos structures de tests if() sur une seule ligne seront rednies sur plusieurs lignes. Lorsque vous le pouvez et si vous ne ralisez pas une animation qui devra tre exporte en Squence Quicktime, prfrez le code aux interpolations de mouvement. Consultez la rubrique Dplacement de personnages ou dobjets pour plus dexplications. Optez plutt pour les masques dynamiques. Ceux que vous pouvez obtenir par le biais des calques manquent de souplesse. Crez vos occurrences dynamiquement (seule possibilit de les supprimer dynamiquement) via la commande attachMovie() ou createEmptyMovieClip(). Gardez lesprit quil est prfrable de charger des sons et images dynamiquement, cest--dire en utilisant le code, plutt que de les importer dans la bibliothque.
31
Linterface Partie I
Vous constaterez trs rapidement que les fonctions sont indispensables. Pensez donc bien dcouper vos projets et vos scripts en de multiples fonctions que vous pouvez appeler de faon modulaire. Supprimez les occurrences et variables que vous nutilisez plus. Prfrez this _root lorsque vous ne savez pas si lanimation sur laquelle vous travaillez est susceptible dtre charge dans une autre animation.
En cours de projet
Pensez crer rgulirement des copies de secours de vos chiers. Alors que vous venez de nir la saisie de quelques lignes dinstructions importantes, effectuez un dernier enregistrement de votre document, puis enregistrez-le nouveau sous un autre nom en changeant le sufxe (par exemple : variateur1.fla, puis variateur2.fla). La recommandation ci-dessus ne suft pas. Nous vous conseillons vivement de faire une copie de secours de vos chiers sur un serveur distant ou un deuxime disque dur. Cela ne sert rien de faire une copie sur une partition du mme disque. Pour limiter les risques de perte dun document, il est prfrable dans la thorie et dans la pratique, davoir deux copies plus loriginal sur trois volumes ou supports diffrents. Nattendez pas non plus la n de la journe pour faire des copies de secours ! Au maximum toutes les demi-heures et cest dj beaucoup. Pensez utiliser la commande trace() pour afcher dans la fentre de sortie, les valeurs que vous souhaitez surveiller simplement. Structurez vos animations en utilisant des calques et surtout en nommant ces derniers. Limitez le nombre dimages-cls dans une animation, car plus elles sont nombreuses, plus vous alourdissez votre animation.
Piges et autres bogues rcurrents

Lorsque vous rdigerez vos premiers scripts, vous constaterez que les bogues surviennent trs vite si vous manquez de rigueur et/ou dexprience. Voici les quelques piges que vous pouvez viter facilement si vous tes vigilant. Les majuscules ne sutilisent qu des endroits prcis et surtout pas en dbut de mot. Prenez garde de toujours cliquer sur une image-cl ou sur la scne (en dehors dune occurrence) avant de cliquer dans la fentre Action an dy saisir votre code. Vous risqueriez de placer au dbut de votre apprentissage, des scripts sur les occurrences de votre scne, et cela gnrerait alors une erreur. Dans une structure conditionnelle if(), si vous devez valuer une galit, utilisez un double gale et non un seul. Essayons de comprendre ce quil se passe si vous omettez un signe gale. Pour affecter une valeur une variable, vous utilisez la ligne dinstruction
32
suivante : varnbrLignes=12;. Vous dnissez ainsi vous-mme la valeur stocker dans la variable. Vous afrmez que la variable nbrLignes vaut 12. Une afrmation est vraie (true) par dnition. Rappelons que le rsultat dun test dans les parenthses dune structure conditionnelle doit renvoyer true ou false. Si vous-mme placez true ou nrLignes=12, cela revient au mme. Le chemin dun chier que vous chargez en ActionScript est relatif la page HTML qui contient le SWF. Lorsque vous chargez des images et des sons, soyez donc vigilants. Gardez toujours lesprit quil est impossible dattribuer un gestionnaire une image qui nest pas charge compltement. Vous devez alors utiliser la classe MovieClipLoader(). De nombreuses tudes de cas dans ce livre utilisent cette classe.
Raliser un prchargement
Commenons par rappeler lutilit dun prchargement appel galement preload avant dexpliquer la technique de sa mise en place. Le principe de lecture dun SWF dans une page web repose sur une lecture en streaming. Plus prcisment, aprs quelques secondes de chargement des premiers kilo-octets du chier, lanimation se lance. Si le dbit de votre connexion Internet nest pas assez rapide, votre animation ne se jouera pas correctement car des coupures viendront interrompre la lecture quelques fractions de secondes (ou bien mme plusieurs secondes). Raliser un prchargement consiste donc arrter la tte de lecture sur la premire image-cl de votre animation, laissant ainsi sufsamment de temps votre ordinateur pour charger les kilos-octets contenus dans votre chier (le SWF). Durant le chargement, votre script gre une animation permettant de faire patienter linternaute, ainsi quun test qui surveille la n du chargement.
Rappel
Le gestionnaire onEnterFrame est valable pour toutes les images de lanimation ds lors quil a t excut une fois. Il est donc indispensable de le supprimer avec la commande delete ds quil ne remplit plus aucune fonction.
Flash Player 6 et ultrieur
Chemin daccs : Interface/Optimisation/Preload.a Limage-cl 1 ne contient quun texte dynamique dont le nom de variable est affichageChargement, ainsi quune occurrence intitule jaugeDeChargement. Cette dernire correspond un simple rectangle dans le sens de la largeur, qui va stirer peu peu au moment
33
Linterface Partie I
du chargement. Dessinez-le sa taille nale, celle quil aura lorsque le chargement sera termin et que votre barre indiquera la n de ce prchargement. Toutes les autres images-cls, partir de la 2, contiennent le reste de votre animation.
Remarque
Il est important de prciser que la scne de limage-cl 1 ne doit contenir que peu dlments, elle doit tre extrmement lgre. vitez donc de placer des bitmaps.
Le chier ne contient quun seul script sur la premire image-cl de la timeline principale, voici les quatre tapes de dveloppement. 1. Arrter la tte de lecture. 2. Boucler sur la premire image-cl avec le gestionnaire onEnterFrame. 3. Animation pour faire patienter linternaute. 4. Vrier si la n du chargement est effectif. Les lignes dinstructions suivantes reprsentent le code principal de votre script.
chargeEnCours = _root.getBytesLoaded(); partChargement = Math.ceil((chargeEnCours/poidsAnimation)*100); affichageChargement = partChargement+" %";
Lafchage du caractre % peut tre retir, dans ce cas noubliez pas denlever loprateur servant la concatnation.
Script
Avant de dmarrer lanalyse de cette tude de cas, voici le script ncessaire pour son excution.
1 2 3 4 5 6 7 8 9 10 11 12 stop(); var poidsAnimation = _root.getBytesTotal(); _root.onEnterFrame = function() { chargeEnCours = _root.getBytesLoaded(); partChargement = Math.ceil((chargeEnCours/poidsAnimation)*100); affichageChargement = partChargement+" %"; jaugeDeChargement._xscale = partChargement; if (partChargement == 100) { delete _root.onEnterFrame; gotoAndStop(2); } };
34
Analyse
Ligne 1 : la tte de lecture est arrte pour les raisons voques en introduction cette tude de cas. Ligne 2 : dans une variable, nous stockons le poids total de lanimation. Lignes 3 et 12 : gestionnaire qui permet dexcuter en boucle les lignes dinstructions quil contient. Ligne 4 : dans une variable, nous stockons le poids de lanimation un instant T. Cette ligne dinstruction est excute en continu grce au gestionnaire, la valeur de cette variable progresse ainsi de 0 8654 (si le poids total de lanimation est de 8654 octets). Ligne 5 : une variable stocke le rsultat du calcul qui value le rapport de lanimation charge par rapport au poids total. La mthode ceil() permet darrondir le rsultat du calcul lentier suprieur. Lignes 6 et 7 : afchent le pourcentage de lanimation charge et ajustent lchelle horizontale de loccurrence intitule jaugeDeChargement.
Figure 1-1
Lafchage du pourcentage et le rglage de lchelle horizontale de loccurrence se font grce aux lignes 6 et 7.
Note
Il existe trois mthodes qui permettent darrondir un nombre. floor() arrondit lentier infrieur, round() lentier le plus proche et ceil() lentier suprieur. Math.round(6,51) arrondit ainsi 7, alors que Math.round(14,48) arrondit 14.
Lignes 8 11 : test qui vrie si le chargement est termin, en comparant le nombre doctets chargs par rapport au nombre total doctets contenus dans lanimation. Dans ce cas, la tte de lecture est envoye sur limage 2. Le gestionnaire est dtruit car il ne joue plus aucun rle. Pour raliser un preload ou prchargement, il est donc important de comprendre que la premire image-cl doit non seulement tre lgre, mais galement bloque le temps du chargement.
Remarque
Dans cette tude de cas, nous avons volontairement construit une animation avec des images bitmaps prsentes dans la Bibliothque, cela permet de simuler une animation avec un poids important. Il aurait t prfrable dopter pour un chargement des images en ActionScript si vous aviez d rellement raliser une telle animation.
35
Linterface Partie I
Bogues ventuels
Dans certains cas, le preload semble ne pas fonctionner ou dmarrer tardivement. Les trois explications suivantes vous en donnent les raisons. Dans une animation, plus le nombre de symboles contenant des liaisons est important, plus long sera le dcalage entre le lancement de votre animation et lafchage de la premire image-cl. chaque fois que vous attribuez donc un nom de liaison un symbole, gardez lesprit que vous retarderez lafchage du preload. Lutilisation des pointills dans une animation alourdit considrablement le poids de vos chiers SWF. Il est donc dconseill de placer trop de tracs en pointills sur la premire image-cl. La jauge et lafchage ne fonctionnent pas car vous avez concatn la ligne 5 avec une chane de caractres.
36
2
Les menus
Au sein des pages HTML, plusieurs modes de navigation sont possibles, mais gnralement le clic sur des hyperliens est la solution retenue pour changer de page. Et pourtant, en DHTML, nous pourrions obtenir des menus bien plus attractifs que ceux qui sont gnralement proposs. Flash se positionnait au dbut de son introduction dans le monde du multimdia, comme un logiciel danimation. De nombreux ashers ont donc propos des menus originaux, mais cest avec la puissance croissante de lActionScript que les effets associs aux menus ont t de plus en plus impressionnants ! Au quotidien, les commanditaires rclament malgr tout continuellement les mmes menus et veulent ce qui est la mode. Nous avons donc ralis les menus typiques que vous pouvez rencontrer sur Internet, tout en essayant de proposer des solutions faisant appel au XML, ce qui facilite le dploiement de nouveaux menus et les mises jour.
Barre de menus
Cette tude de cas vous propose un dveloppement trs simple. Une barre de commandes est initialement masque au-dessus de la scne, seul un demi-cercle clignotant est visible.
Figure 2-1
Cette barre de commande ne droule aucun menu, mais excute directement une action.
Linterface Partie I
Lorsque vous placez votre curseur sur ce dernier ou sur le haut de la scne, la barre descend. Vous pouvez alors cliquer sur les diffrentes commandes qui la composent, dclenchant ainsi une action. Dans notre exemple, nous contrlons la tte de lecture dun clip dont une occurrence se trouve sur la scne.
Rappel
Pour optimiser votre animation, vitez dutiliser le gestionnaire onEnterFrame pour vrier si la souris se trouve dans le haut de la scne, optez pour une surveillance du mouvement de la souris avec le gestionnaire onMouseMove.
Chemin daccs : Interface/Menus/Barre.a Deux occurrences se trouvent sur la scne. La premire intitule barreMenu en contient cinq autres dont les noms commencent par bt (par exemple, btAccueil). La deuxime occurrence sintitule contenu et contient cinq images-cls. Lanimation ne contient quun seul script sur la premire image-cl de la timeline principale. Sa structure est trs simple car lanimation lest aussi. Voici les trois tapes de dveloppement. 1. Crer deux fonctions qui grent la descente de la barre de commandes et sa remonte. 2. Crer un gestionnaire qui surveille le dplacement de la souris. 3. Programmer les boutons contenus dans la barre de commandes pour quils dplacent la tte de lecture de loccurrence contenu.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 descenteBarre = function () { _root.onEnterFrame = function() { barreMenu._y += (11.5-barreMenu._y)*0.2; if (Math.abs(11.5-barreMenu._y)<1) { delete _root.onEnterFrame; } }; }; retraitBarre = function () { _root.onEnterFrame = function() { barreMenu._y += (-13.5-barreMenu._y)*0.2; if (Math.abs(-13.5-barreMenu._y)<1) { delete _root.onEnterFrame; } }; };
38
Les menus Chapitre 2
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
// _root.onMouseMove = function() { if (_root._ymouse<10) { descenteBarre(); } if (barreMenu._y>-13 && _root._ymouse>23) { retraitBarre(); } }; barreMenu.btAccueil.onPress = function() { retraitBarre(); contenu.gotoAndStop(1); }; barreMenu.btDestinations.onPress = function() { retraitBarre(); contenu.gotoAndStop(2); }; barreMenu.btTarifs.onPress = function() { retraitBarre(); contenu.gotoAndStop(3); }; barreMenu.btPromotions.onPress = function() { retraitBarre(); contenu.gotoAndStop(4); }; barreMenu.btHoraires.onPress = function() { retraitBarre(); contenu.gotoAndStop(5); };
Analyse
Lignes 1 8 : cration de la fonction permettant de faire descendre la barre de commandes. Elle contient un gestionnaire onEnterFrame qui permet dexcuter en continu les lignes dinstructions 3 6, si le curseur de lutilisateur est situ moins de 10 pixels du haut de la scne. Le bouton clignotant na donc aucun effet, si ce nest dattirer lattention. Ligne 4 : un test sassure que la barre de commandes est arrive sa destination, cest-dire le onzime pixel du haut de la scne. Si cest le cas, le gestionnaire onEnterFrame est dtruit la ligne 5. Lignes 9 16 : dans le mme esprit que les lignes 1 8, cette fonction gre la remonte de la barre de commandes. Lignes 18 25 : ce gestionnaire surveille le mouvement de la souris. Cest notamment cette partie du script qui excute les deux fonctions que nous venons de crer en fonction de la position de la souris.
39
Linterface Partie I
Lignes 26 45 : il sagit simplement des gestionnaires qui sexcutent lors des clics sur les commandes. La tte de lecture du clip de loccurrence contenu est dplace sur une image prcise aprs que nous ayons demand la barre de retrouver sa place dorigine.
Remarque
Flash est capable de placer une occurrence 11,3 pixels.
Menu droulant
Cette tude de cas est trs intressante, car il sagit de la premire animation qui utilise la mthode attachMovie() pour construire dynamiquement le menu. Dans de nombreuses animations de ce livre, nous utiliserons des boucles for() avec cette mthode pour obtenir des constructions dynamiques. Il est donc important que vous compreniez bien cette animation. Par ailleurs, nous affectons galement un gestionnaire onPress chaque occurrence, cest une action que nous raliserons dans de nombreuses tudes de cas. Lorsque vous aurez bien compris la notion de construction dynamique dun menu, nous vous invitons consulter lanimation intitule XML.fla qui utilise des donnes en provenance dun chier XML pour remplir ses menus.
Figure 2-2
Ce menu est compos doccurrences de clips places les unes sous les autres...
Rappel
Si vous ntes pas habitus construire des interfaces dynamiquement, veuillez consulter les trois derniers rappels du prambule du livre : interprtation du nom dune occurrence, gestion des lignes dinstructions contenues dans une boucle for(), et sens du mot-cl this selon le contexte.
40
Chemin daccs : Interface/Menus/Deroulant.a Comparable lanimation prcdente, une occurrence intitule barreMenu a t place sur la scne. Elle en contient cinq autres dont les noms commencent par bt (par exemple, btAccueil). La deuxime occurrence sintitule contenu et contient cinq images-cls. Lanimation ne contient quun seul script qui se dcompose en trois parties : 1. La cration des tableaux servant remplir les noms des commandes de menus. 2. La cration des fonctions de construction et destruction dun menu. 3. La programmation des boutons de la barre de commandes.
Remarque
Vous constaterez que cette animation ne ralise aucune action au clic sur une commande dun menu. Ajoutez les lignes dinstructions de votre choix la ligne 35.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 var menus = ["Destinations", "Tarifs", "Promotions", "Horaires"]; var destinations = ["Asie", "Amrique du sud", "Amrique centrale", "Etats-Unis", "Europe"]; var tarifs = ["Enfants", "Adultes", "Etudiants", "Seniors"]; var promotions = ["Vacances", "Hors-saisons", "Ftes"]; var horaires = ["Matin", "Aprs-midi", "Soirs"]; // _root.etatMenu = false; // barreMenu.btAccueil.onPress = function() { detruireMenu(); }; // for (i=0; i<=menus.length; i++) { barreMenu["bt"+menus[i]].sonNumero = i; barreMenu["bt"+menus[i]].onPress = function() { if (_root.etatMenu) { detruireMenu(); _root.etatMenu = !_root.etatMenu; } else { construireMenu(menus[this.sonNumero], this.sonNumero); _root.etatMenu = !_root.etatMenu; } }; }
41
Linterface Partie I
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
// construireMenu = function (nomMenu, numeroMenu) { ex = 0; nbrEntrees = _root[nomMenu.toLowerCase()].length; while (ex<nbrEntrees) { _root.attachMovie("elementMenu", "elementMenu"+ex, ex); _root["elementMenu"+ex]._x = 150+numeroMenu*100; _root["elementMenu"+ex]._y = 23+(ex*23); _root["elementMenu"+ex].nomCommande = _root[nomMenu.toLowerCase()][ex]; _root["elementMenu"+ex].onPress = function() { detruireMenu(); _root.etatMenu = false; // code ajouter pour rendre les commandes cliquables }; ex++; } }; // detruireMenu = function () { for (i=0; i<=10; i++) { _root["elementMenu"+i].removeMovieClip(); } };
Analyse
Lignes 1 5 : cration des tableaux qui vont servir de contenu aux menus crs dynamiquement.
Rappel
Sil nous arrive dans les pages venir dutiliser les termes liste ou array pour dsigner un tableau, sachez quil sagit de synonymes.
Ligne 7 : que se passera-t-il si un utilisateur clique sur une commande de la barre dont le menu est dj droul ? Il doit senrouler. Comment savoir si un menu est droul ou sil ne lest pas ? Nous allons utiliser une variable intitule etatMenu que nous initialisons dans un premier temps false, car aucun menu nest droul au lancement de lapplication. Lignes 9 11 : le bouton Accueil de notre barre de commande na pas daction particulire dans notre animation. Un clic sur cette occurrence doit donc au moins r-enrouler un menu au cas o il en existerait un. Nous aurions pu omettre de grer les actions lies cette commande. Lignes 13 24 : loccurrence barreMenu est celle qui est dj prsente sur la scne, cest-dire notre barre de commandes. Elle en contient quatre autres auxquelles nous faisions
42
rfrence en introduction cette animation (Destinations, Tarifs, Promotions et Horaires). Nous programmons ces quatre occurrences an quelles ragissent aux clics qui devront drouler les menus en utilisant une construction dynamique. Ligne 14 : nous associons chaque occurrence, un identiant unique dont la valeur est celle de i au moment de lassignation des gestionnaires dans la boucle for(). Ligne 15 : les quatre occurrences possdent prsent un gestionnaire onPress qui va Ligne 16 : effectuer un test an de savoir si un menu est dj droul. Lignes 17 18 : si cest le cas, le menu est dtruit et nous rinitialisons la variable etatMenu an quun autre clic puisse drouler un nouveau menu. Lignes 20 21 : si aucun menu nest construit, nous en construisons un. Lignes 26 41 : cette fonction va assurer la cration dun menu. Ligne 27 : nous allons crer un menu compos de plusieurs commandes, nous avons donc besoin dutiliser une variable qui va servir de niveau pour chaque occurrence place sur la scne. Ligne 28 : la variable nbrEntrees va stocker le nombre doccurrences crer en comptant le nombre dentres contenues dans un tableau spci comme premier paramtre de la fonction construireMenu. Nous utilisons la mthode toLowerCase() car les noms des menus contiennent une majuscule dans le premier tableau. Lignes 29 40 : nous bouclons sur la cration des occurrences qui composent le menu drouler . Ligne 30 : nous plaons autant de symbole sur la scne quil y a dentres dans lun des quatre tableaux correspondants. Lignes 31 32 : nous positionnons prcisment les occurrences obtenues. Ligne 33 : la variable nomCommande est celle du texte dynamique contenu dans le symbole que nous plaons sur la scne. Cette ligne dinstruction permet donc de remplir toutes les commandes du menu. Lignes 34 38 : nous assignons un comportement chaque commande du menu. Lignes 43 47 : nous dnissons enn la fonction charge de dtruire un menu.
Bogues ventuels
Il reste un bogue que nous navons pas voulu retirer volontairement, car cela aurait entran un dveloppement complmentaire. Vous noterez en effet quun clic sur une commande de la barre peut ne pas ragir si un menu est dj droul. Il faudra alors cliquer une deuxime fois sur la commande pour drouler le menu. Lanimation intitule Deroulant2.fla, situe dans le mme dossier que cette tude de cas, propose une autre solution avec un autre bogue .
43
Linterface Partie I
Menu anim avec la classe Tween()

Nous allons prsent analyser une animation un peu plus complexe. Non pas du point de vue de sa construction, mais par le code utilis. Il est une technique trs peu connue et pourtant trs simple dployer. Il faut malheureusement instancier pour cela deux classes, ce qui sous-entend que vous connaissez thoriquement la programmation oriente objet. Si ce nest pas le cas, vous devez simplement comprendre que les lignes 1 et 2 du script que nous allons parcourir servent faire comprendre Flash le sens de la ligne 5 au moment de lexportation de lanimation.
Figure 2-3
Ce menu original pivote sur un axe situ la pointe infrieure gauche de loccurrence.
Remarque
Le script que nous allons analyser contient de nombreuses lignes de code, mais quatre dentre elles sufsent obtenir ces effets dinterpolation. Par ailleurs, vous devez exporter vos animations en AS2 pour pouvoir lire une animation faisant appel ces classes.
Chemin daccs : Interface/Menus/DeroulantTween.a Notre animation contient trois occurrences. Celle du titre : titre_inst.
44
Celle du message daccueil : messageAccueil_inst. Celle du menu qui pivote : menuAide. Nous avons ajout un texte dynamique dont le contenu sera spci lorsque lutilisateur fera appel au menu circulaire. Son nom de variable est messageCarte.
Remarque
Loccurrence menuAide contient une autre occurrence intitule btMenuAide an de dceler le clic effectu sur le menu.
Nous ralisons deux petites interpolations dans cette animation, elles ne sont pas indispensables, seules les lignes 1 2 et 15 30 sont utiles au fonctionnement du menu. Par ailleurs, an que le menu pivotant ne soit visible que sur la scne (dans le cas dune projection plein cran), nous avons ajout un masque. Il sagit de loccurrence dun clip qui contient un simple carr aux dimensions du menu.
Script
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 import mx.transitions.Tween; import mx.transitions.easing.*; // messageAccueil_inst._alpha = 0; arriveeTitre = new Tween(titre_inst, "_x", Bounce.easeOut, 700, 251.9, 1.5, true); arriveeTitre.onMotionFinished = function() { new Tween(messageAccueil_inst, "_xscale", Bounce.easeOut, 0, 100, 1, true); new Tween(messageAccueil_inst, "_yscale", Bounce.easeOut, 0, 100, 1.4, true); new Tween(messageAccueil_inst, "_alpha", Bounce.easeOut, 0, 100, 2, true); }; // menu_aide.setMask(masque_inst); menu_aide._rotation = -85; // menu_aide.btMenuAide.onPress = function() { messageAccueil_inst._y = -150; if (!animVolet) { animVolet = new Tween(menu_aide, "_rotation", Bounce.easeOut, -85, 0, 1, true); menuCercle.enabled = false; animVolet.onMotionStarted = function() { menu_aide.btMenuAide.enabled = false; }; animVolet.onMotionStopped = function() { menu_aide.btMenuAide.enabled = true; }; } else { animVolet.yoyo(); messageCarte = "";
45
Linterface Partie I
29 30 31 32 33 34
} }; menu_aide.carteFrance_inst.onPress = function() { messageCarte = "Vous avez cliqu sur une rgion de France"; }; //
Analyse
Lignes 1 2 : nous importons deux classes an de rendre possibles les interpolations avec une seule ligne de code (ligne 5). Ligne 4 : nous rendons transparente loccurrence situe au centre de la scne qui va peu peu grossir et devenir de plus en plus opaque. Ligne 5 : nous animons le titre en instanciant la classe Tween() qui va gnrer une interpolation sans utiliser la timeline, mais avec uniquement du code. Les paramtres dnir sont les suivants : Nom de loccurrence concerne par linterpolation : messageAccueil_inst. Proprit avec laquelle doit se faire linterpolation : "_xscale". Vous noterez quelle doit tre saisie entre guillemets. Leffet souhait lors du mouvement : Bounce.easeOut. Vous pouvez galement essayer les valeurs suivantes : Bounce.easeIn, Bounce.easeInOut. Vous pouvez galement remplacer Bounce par Elastic, Back, Regular ou Strong. La valeur de dpart que va utiliser la proprit pour son interpolation : 700. La valeur de n que va utiliser la proprit pour son interpolation : 251.9. La dure exprime en secondes : 1.5. La valeur true pour spcier que la dure spcie correspond des secondes et non un nombre dimages. Pour une cadence danimation rgle 30 images par secondes, nous aurions pu remplacer ces deux derniers paramtres (1.5 et true) par 45 et false. Lignes 6 10 : nous dnissons un gestionnaire qui va excuter les lignes dinstructions 7 9 qui sont charges danimer loccurrence situe au centre de la scne.
Attention
Les lignes 4 10 napportent rien au fonctionnement de notre menu qui pivote. Il sagit dune animation dintroduction dans le seul but de dmontrer que linterpolation utilise pour notre menu (la rotation) nest pas la seule possibilit.
Lignes 12 13 : an que le menu ne soit visible que sur la scne, nous masquons la zone situe autour de son axe de rotation. An de mieux comprendre lintrt de ces deux lignes, remplacez-les par celles qui suivent et agrandissez la fentre de votre animation.
46
//menu_aide.setMask(masque_inst); menu_aide._rotation = -85; masque_inst._visible=false
Lignes 15 30 : la classe Tween() possde une mthode qui permet dinverser le mouvement obtenu lors de sa premire excution (yoyo()). Cependant, si vous cliquez trop rapidement sur le menu, linterpolation nutilise plus les paramtres que vous avez dni. Nous devons donc interdire le clic sur le menu tant que linterpolation nest pas termine. Ligne 16 : au travers de cette ligne dinstruction, nous souhaitons simplement masquer loccurrence situe au centre de la scne. Lignes 17 29 : lorsque nous droulons le menu pour la premire fois (ligne 18), nous lui associons en mme temps un identiant (animVolet). Lorsquun clic est donc effectu sur le menu, nous pouvons ainsi savoir si ce dernier est droul. Ligne 19 : nous rendons inactif le clic sur le menu, lors de la premire excution de linterpolation. Lignes 20 25 : ces deux gestionnaires dvnements permettent de grer lautorisation de cliquer sur le menu. Ligne 27 : en fonction du rsultat du test de la ligne 17, le menu est droul dans le sens inverse. Dans notre cas, la rotation se refait dans le sens inverse des aiguilles dune montre. Lignes 31 33 : nous avons souhait simplier ce menu, cest pourquoi il ne possde quun seul bouton, celui de la carte de France. Si nous avions d placer plusieurs occurrences cliquables lintrieur de notre menu, nous aurions plusieurs blocs de lignes dinstructions comme celles-ci. Vous obtiendriez ainsi les lignes suivantes :
menu_aide.nomBouton1.onPress = function() { messageCarte = "Vous avez cliqu sur le bouton 1"; }; menu_aide. nomBouton2.onPress = function() { messageCarte = "Vous avez cliqu l o il ne fallait pas"; }; menu_aide. nomBouton3.onPress = function() { messageCarte = "Pourquoi avez-vous cliqu sur ce bouton ?"; };
Bogues ventuels
Nous avons dj voqu le principal bogue de cette animation, mais il en reste un tout aussi important ! Noubliez pas dimporter vos classes de transitions (lignes 1 et 2), sinon, rien ne fonctionnera. Par ailleurs, sil vous manque un paramtre entre les parenthses de la classe Tween(), cela peut galement tre la source dun dysfonctionnement.
47
Linterface Partie I
Menu droulant avec le composant MenuBar

Cette technique de menu droulant est la fois plus simple et plus complique que celles que nous venons de voir jusqu prsent. Plus simple car le code est plus concis, la structure du script est logique, et lon peut placer visuellement la barre des menus car nous manipulons une occurrence sur la scne. Plus complique car le code contient des mots abstraits qui appartiennent la logique de dploiement dune telle barre de menus. Ces mots sont des mthodes de la classe MenuBar. Il serait donc indispensable que vous connaissiez la programmation oriente objet an de mieux comprendre cette tude de cas, mais le script nest pas trop long, vous ne devriez pas rencontrer trop de difcults pour comprendre le sens de ces lignes dinstructions.
Figure 2-4
Le composant MenuBar permet de dployer une barre de menus assez rapidement et facilement ds lors que vous connaissez bien la programmation oriente objet.
Flash Player 6.0. 79 et ultrieur
Chemin daccs : Interface/Menus/DeroulantComposant.a La scne de cette animation possde un texte dynamique dont le nom de variable est vMessage. Elle contient galement loccurrence dun composant MenuBar intitule barreMenu_inst. Nous avons galement cr un chier XML intitul menusComposant.xml qui contient les noms de menus et commandes de notre barre. Comme vous allez pouvoir le constater, le seul script de notre animation est trs structur. Il se dcompose en quatre parties : 1. Limportation des classes et linitialisation dune variable. 2. Le chargement du chier XML.
48
3. La construction du menu. 4. La demande de surveillance du droulement des menus. Dans notre animation, nous nous sommes limits remplir un texte dynamique sur la scne grce la ligne 24 de notre script, nous aurions pu remplacer cette dernire par dautres lignes an dexcuter des instructions diffrentes.
Script
Voici le contenu du chier XML que nous allons utiliser pour dployer notre menu.
<BarreMenu> <Menu nom="Destinations"> <Commande nom ="Europe">France ou Espagne ?</Commande> <Commande nom ="Asie">Au bord de la mer ou en montagne?</Commande> <Commande nom ="Ocanie"> Dans un dsert ou au bord de la mer?</Commande> </Menu> <Menu nom="Tarifs"> <Commande nom ="Jeunes">Tarif infrieur 500euros</Commande> <Commande nom ="Actifs">Tarif suprieur 1000euros</Commande> <Commande nom ="Sniors">Tarif vraiment suprieur 2000euros</Commande> </Menu> <Menu nom="Priodes"> <Commande nom ="Vacances Scolaires">Fvrier, avril, juillet, aot, novembre</Commande> <Commande nom ="Hors vacances scolaire">Quand les enfants sont l'cole</Commande> </Menu> </BarreMenu >
Le script suivant est plac sur la premire image-cl de la timeline principale.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 import mx.controls.Menu; import mx.controls.MenuBar; // var barreMenu_inst:MenuBar; // chargeMenus = new XML(); chargeMenus.load("menusComposant.xml"); chargeMenus.ignoreWhite = true; chargeMenus.onLoad = function() { // var racine = this.firstChild; // for (i=0; i<racine.childNodes.length; i++) { _root["menu"+i] = barreMenu_inst.addMenu(racine.childNodes[i] .attributes.nom); 15 var longeurMenu = racine.childNodes[i].childNodes.length;
49
Linterface Partie I
16 17
18 19 20 21 22 23 24 25 26 27 28 29 30 };
for (j=0; j<longeurMenu; j++) { _root["menu"+i].addMenuItem({label:racine.childNodes[i].childNodes[j] .attributes.nom, valeurCommande:racine.childNodes[i].childNodes[j] .firstChild}); } } // var surveil = new Object(); surveil.change = function(infoRenvoyee) { selectionCommande = infoRenvoyee.menuItem; vMessage = infoRenvoyee.menuItem.attributes.valeurCommande; }; // menu0.addEventListener("change", surveil); menu1.addEventListener("change", surveil); menu2.addEventListener("change", surveil);
Analyse
Lignes 1 2 : nous importons deux classes an de rendre possibles les interpolations avec une ligne de code. Ligne 4 : nous initialisons une variable qui correspond au nom doccurrence de notre barre de menus de type MenuBar qui se trouve sur la scne. Lignes 6 10 : nous chargeons le contenu du chier XML et nous excutons les lignes dinstructions qui suivent ds que le chargement des balises est termin. Ligne 11 : nous stockons dans une variable un raccourci an de limiter la longueur de nos lignes dinstructions (lignes 14, 15 et 17). Ligne 13 : nous allons construire trois menus car le document XML contient trois nuds de niveau 1 intituls <Menu>. Ligne 14 : nous ajoutons notre occurrence intitule barreMenu_inst qui se trouve sur la scne, des menus dont les noms correspondent aux attributs noms des balises <Menu>. Nous obtenons ainsi Destinations, Tarifs et Priodes. Ligne 15 : dans une variable, nous stockons une valeur correspondant au nombre de nuds que contient chaque nud de niveau 1. Lignes 16 18 : nous effectuons une nouvelle boucle pour remplir chaque menu avec des noms de commandes qui correspondent aux noms dattributs des balises <Commande>.
50
Lignes 21 25 : nous crons un couteur appel galement listener, qui va tre charg de surveiller la slection de lune des commandes de nos menus. Lignes 22 24 : en excutant cette fonction avec un paramtre, nous allons pouvoir lire la proprit menuItem de la commande slectionne. Plus prcisment, nous devons lire lattribut valeurCommande de cette proprit. Lignes 26 28 : nous avons dni laction excuter lorsquune commande de menu sera slectionne. Nous devons prsent lancer le dmarrage de la surveillance. Ce script peut vous paratre complexe car nous utilisons des boucles qui excutent des lignes dinstructions peut-tre difciles comprendre. Nous avons donc simpli ce script en ne construisant quun seul menu partir dune liste et non plus un chier XML.
import mx.controls.Menu; import mx.controls.MenuBar; // var barreMenu_inst:MenuBar; // contenuMenu1 = ["Janvier", "Fvrier", "Mars", "Avril", "Mai", "Juin"]; menu1 = barreMenu_inst.addMenu("1er semestre"); // for (i=0; i<contenuMenu1.length; i++) { menu1.addMenuItem({label:contenuMenu1[i], valeurRenvoyee:i}); } // var surveil = new Object(); surveil.change = function(infoRenvoyee) { vMessage = infoRenvoyee.menuItem.attributes.valeurRenvoyee; }; // menu1.addEventListener("change", surveil);
Vous noterez quil est plus court, mais il respecte la mme structure. Il ny a plus quune seule boucle car nous ne construisons quun seul menu, mais nous sommes tout de mme obligs den garder une pour remplir le nom de ses commandes. Ce script est celui de lanimation intitule DeroulantComposant2.fla.
Bogues ventuels
Noubliez pas dimporter vos classes de transitions (lignes 1 et 2), sinon rien ne fonctionnera. La mthode addMenuItem() attend un paramtre sous forme de liste de proprits. Noubliez pas de lancer lexcution de la surveillance de vos couteurs (lignes 26 28).
51
Linterface Partie I
Menu en accordon anim

Ce systme de menu en accordon est trs pratique car cest une solution pour gagner de la place verticalement dans une interface.
Figure 2-5
Le menu est dcoup en plusieurs parties que nous appellerons sous-menus du menu principal.
Nous allons utiliser une fois encore un chier XML pour remplir notre menu, mais nous aurions pu utiliser des tableaux.
Chemin daccs : Interface/Menus/AccordeonVolets.a Le menu qui gure gauche sur la scne est construit dynamiquement. De ce fait, notre animation ne contient que des textes dynamiques et une occurrence de clip intitule drapeau. Loccurrence intitule drapeau va nous servir placer une image qui va tre charge dynamiquement. Les noms de variables des textes dynamiques sont les suivants : nomPays, nomCapitale, nomMonnaie, population et regimePolitique. Lanimation contient un script assez long qui se dcompose ainsi : 1. Le chargement du contenu du chier XML. 2. La construction du menu compos de sous-menus. 3. La programmation des quatre sous-menus.
52
4. La cration dune fonction charge de repositionner les sous-menus aprs le dveloppement ou la contraction de lun dentre eux.
Script
Pour cette animation, nous avons utilis un chier XML intitul menuprincipal.xml.
1 <Monde> 2 <Continent Nom="Europe"> 3 <Pays Nom="France" X="289" Y="137"> 4 <Capitale>Paris</Capitale> 5 <Population>61.000.000</Population> 6 <Regime>Rpublique</Regime> 7 <Monnaie>Euro</Monnaie> 8 <imageDrapeau>france</imageDrapeau> 9 </Pays> 10 <Pays Nom="Angleterre" X="283" Y="125"> 11 <Capitale>Londres</Capitale> 12 <Population>60.000.000</Population> 13 <Regime>Monarchie</Regime> 14 <Monnaie>Livre</Monnaie> 15 <imageDrapeau>angleterre</imageDrapeau> 16 </Pays> 17 <Pays Nom="Belgique" X="292" Y="129"> 18 <Capitale>Bruxelles</Capitale> 19 <Population>11.000.000</Population> 20 <Regime>Monarchie</Regime> 21 <Monnaie>Euro</Monnaie> 22 <imageDrapeau>belgique</imageDrapeau> 23 </Pays> 24 </Continent> 25 <Continent Nom="Afrique"> 26 <Pays Nom="Angola" X="306" Y="231"> 27 <Capitale>Luanda</Capitale> 28 <Population>10.800.000</Population> 29 <Regime>Rpublique</Regime> 30 <Monnaie>Kwanza</Monnaie> 31 <imageDrapeau>angola</imageDrapeau> 32 </Pays> 33 <Pays Nom="Cameroun" X="295" Y="202"> 34 <Capitale>Yaound</Capitale> 35 <Population>16.000.000</Population> 36 <Regime>Rpublique</Regime> 37 <Monnaie>Franc CFA</Monnaie> 38 <imageDrapeau>cameroun</imageDrapeau> 39 </Pays> 40 <Pays Nom="Gabon" X="301" Y="209"> 41 <Capitale>Libreville</Capitale> 42 <Population>1.200.000</Population> 43 <Regime>Rpublique</Regime>
53
Linterface Partie I
44 <Monnaie>Franc CFA</Monnaie> 45 <imageDrapeau>gabon</imageDrapeau> 46 </Pays> 47 </Continent> 48 </Monde>
Pour ne pas goner inutilement le volume du livre, nous nous sommes limits deux nuds enfants de la racine (Europe et Afrique). Il existe deux nuds supplmentaires dans le chier dorigine.
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 var chargementPays = new XML(); chargementPays.load("menuprincipal.xml"); chargementPays.ignoreWhite = true; // chargementPays.onLoad = function() { _global.nbrContinents = this.childNodes[0].childNodes.length; _global.racine = this.childNodes[0]; for (i=0; i<nbrContinents; i++) { _root.attachMovie("etiquette", "etiquetteContinent"+i, i); _root["etiquetteContinent"+i]._x = 8; _root["etiquetteContinent"+i]._y = 30+(i*19); _root["etiquetteContinent"+i].nomElement = racine.childNodes[i].attributes.Nom; _root["etiquetteContinent"+i].derouleur.noeudsEnfants = racine.childNodes[i] .childNodes.length; _root["etiquetteContinent"+i].derouleur.niveau1 = i; // _root["etiquetteContinent"+i].derouleur.onPress = function() { this.brancheRacine = this.niveau1; // if (this._currentframe == 1) { this.gotoAndStop(2); for (i=0; i<this.noeudsEnfants; i++) { tempo = _root["etiquetteContinent"+this.niveau1].attachMovie ("etiquette","etiquettePays"+i, i); tempo._x = 10; tempo._y = 19+(i*19); tempo.nomElement = racine.childNodes[this.niveau1].childNodes[i] .attributes.Nom; tempo.derouleur.gotoAndStop(3); tempo.numeroDeNoeud = i; tempo.brancheRacine = this.brancheRacine; tempo.onPress = function() { nomPays = racine.childNodes[this.brancheRacine].childNodes [this.numeroDeNoeud].attributes.Nom.toUpperCase(); nomCapitale = racine.childNodes[this.brancheRacine].childNodes [this.numeroDeNoeud].childNodes[0].firstChild; population = racine.childNodes[this.brancheRacine].childNodes [this.numeroDeNoeud].childNodes[1].firstChild;
54
33 34 35
regimePolitique = racine.childNodes[this.brancheRacine] .childNodes[this.numeroDeNoeud].childNodes[2] .firstChild; nomMonnaie = racine.childNodes[this.brancheRacine].childNodes [this.numeroDeNoeud].childNodes[3].firstChild; drapeau.loadMovie("drapeaux/"+racine.childNodes[this. brancheRacine].childNodes[this.numeroDeNoeud].childNodes[4] .firstChild+".jpg"); }; } } else { this.gotoAndStop(1); for (i=0; i<this.noeudsEnfants; i++) { _root["etiquetteContinent"+this.niveau1]["etiquettePays" +i].removeMovieClip(); } nomPays = ""; nomCapitale = ""; population = ""; regimePolitique = ""; nomMonnaie = ""; drapeau.unloadMovie(); } replacerMenus(); // }; } }; // replacerMenus = function () { var decalY = 0; _global.destinationsMenus = []; for (i=0; i<nbrContinents; i++) { placeMenu = 30+decalY; destinationsMenus.push(placeMenu); decalY += _root["etiquetteContinent"+i]._height; } for (i=0; i<nbrContinents; i++) { _root["etiquetteContinent"+i].numeroEntree = i; _root["etiquetteContinent"+i].onEnterFrame = function() { this._y += (destinationsMenus[this.numeroEntree]-this._y)*0.2; }; } };
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
55
Linterface Partie I
Analyse
Lignes 1 5 : nous chargeons le contenu du chier XML. Ligne 5 : lorsque le chargement des balises est termin, nous excutons les lignes dinstructions suivantes. Ligne 6 : dans une variable, nous stockons une valeur correspondant au nombre de nuds contenus la racine de larbre XML, soit le chiffre 4 dans notre exemple. Ligne 7 : nous stockons dans une autre variable, une valeur correspondant au chemin initial de larbre XML an de raccourcir les lignes dinstructions de notre script. Ligne 8 : nous allons excuter une boucle autant de fois quil y a de nuds de niveau 1, soit Europe, Afrique, Asie, Amriques, un total de quatre sous-menus. Lignes 9 11 : nous procdons la construction du menu en plaant le symbole de la gure 2-6 sur le bord gauche de la scne.
Figure 2-6
Le menu est compos doccurrences issues dun symbole avec le nom de liaison etiquette. Ce dernier contient un texte dynamique dont le nom de variable est nomElement et une occurrence intitule derouleur.
Lignes 12 14 : nous initialisons le contenu de chaque texte dynamique qui se trouve dans nos 4 occurrences. Nous prcisons galement le nombre de commandes quil faudra afcher. Chaque occurrence possde un niveau an que nous puissions grer les sousmenus indpendamment les uns des autres.
Figure 2-7
Les sous-menus sont programms pour ragir au clic en afchant des commandes.
Ligne 16 : nous associons chaque occurrence qui compose le menu, un gestionnaire qui va tre charg de Ligne 19 : faire un test pour savoir si le menu est dj droul. Il faut en effet afcher le signe + ou - gauche des noms de sous-menus pour signaler lutilisateur que le menu est droul ou ne lest pas. Loccurrence qui contient un carr avec le signe plus possde deux images-cls. Sur la deuxime image, ce mme carr contient le signe moins.
56
Il est donc facile de savoir si le menu est droul, il suft de vrier la position de la tte de lecture avec la proprit _currentframe. Ligne 20 : nous changeons laspect du bouton + en -. Ligne 21 : une boucle va crer un certain nombre de commandes spcies la ligne 13. Ligne 22 : pour linstant, notre menu est compos de 4 occurrences places sur la scne. Nous associons lune dentre elles dautres occurrences qui contiennent les noms de pays. Lignes 23 24 : nous positionnons les occurrences les unes sous les autres. Ligne 25 : nous afchons dans loccurrence, un nom de pays dans le texte dynamique, dont le nom de variable est nomElement. Ligne 26 : le symbole utilis pour afcher des noms de pays est le mme que celui que nous avons utilis pour les noms de continents. Nous souhaitons donc masquer le carr avec le signe + ou -. Ligne 27 : nous associons chaque occurrence une valeur, celle de i au moment de lexcution de la boucle, an que nous puissions avoir un identiant unique pour chaque bouton de pays. Ligne 29 36 : nous assignons un gestionnaire chaque bouton de pays an que nous puissions excuter les lignes dinstructions 30 35. Les textes dynamiques sur la scne vont tout simplement se remplir dinformations gurant dans le chier XML. Les lignes 17, 27 et 28 stockent les valeurs ncessaires pour savoir quel est le sous-menu cliqu ainsi que le numro de commande. Lignes 39 49 : si le test de la ligne 19 savre faux, cela signie quun sous-menu est dj droul. Il faut donc le dtruire et vider les textes dynamiques sur la scne. Ligne 50 : pour cette animation, nous avons souhait que les sous-menus glissent sur la scne, se rapprochant ou sloignant les uns des autres au moment o ils se contractent ou se droulent. Ligne 56 : cette fonction permet dobtenir lanimation des sous-menus. Le gestionnaire
onEnterFrame associ la proprit _y assure donc le mouvement vertical.
Bogues ventuels
Dans une telle animation, le nombre de bogues est important et directement li la structure du script. La tche la plus difcile pour le dploiement dune telle technique est de faire un listing de toutes les instructions ncessaires pour la construction dun menu. Vous devez donc lister sur un papier, ce que doit faire chaque partie du menu.
57
Linterface Partie I
Menu en accordon
Cette animation est la mme que la prcdente. Elle ne diffre quau niveau de lafchage des commandes des sous-menus. Elles ne glissent pas sur la scne, car les sous-menus se dploient sans effet. Seul le script suivant est donc diffrent.
Chemin daccs : Interface/Menus/AccordeonArbre.a
Script
replacerMenus = function () { var decalY = 0; for (i=0; i<nbrContinents; i++) { _root["etiquetteContinent"+i]._y = 30+decalY; decalY += _root["etiquetteContinent"+i]._height; } };
Analyse
Comme vous pouvez le constater en comparaison de lanimation prcdente, la fonction ne fait plus appel au gestionnaire onEnterFrame qui permettait dobtenir cet effet de glissement.
Menu contextuel
Il est encore rare de voir des animations qui possdent des menus contextuels alors quils sont disponibles depuis trois versions. Et pourtant cette technique offre de nombreux avantages. Il est vrai que les menus contextuels sont paradoxalement peu et trs ergonomiques. Ils le sont car du bout du doigt, on accde plusieurs commandes, ils ne le sont pas car il faut penser cliquer sur le bouton droit de la souris ! Cest srement cette dernire raison qui explique la faible utilisation de cette technique.
58
Le manque dintrt pour les menus contextuels nest pas la seule raison qui explique la faible utilisation de cette technique. Tous les dveloppeurs Flash ne pensent pas aller lire la documentation de Flash pour connatre les possibilits et cest bien dommage ! Pour cette animation, vous dcouvrirez quun menu contextuel peut tre affect diffrentes occurrences, mme celles qui sont cres dynamiquement. Cliquez droit sur une photo ainsi que sur le bord des ronds que vous allez ajouter.
Figure 2-8
Un clic droit sur votre souris et ce menu droulant apparat.
Chemin daccs : Interface/Menus/Contextuel.a Lanimation est trs simple. Deux occurrences intitules img1 et img2 se trouvent sur la scne. Tout le reste relve de la programmation. Le seul et unique script de lanimation est structur de la faon suivante : 1. Programmation des occurrences an de les rendre mobiles. 2. Cration des fonctions appeles au moment de la slection des commandes du menu contextuel. 3. Dnition du contenu du menu contextuel des deux occurrences. 4. Assignation dun menu contextuel une occurrence.
59
Linterface Partie I
Script
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 img1.onPress = function() { this.startDrag(); }; img1.onRelease = img1.onReleaseOutside=function () { stopDrag(); }; // img2.onPress = function() { this.startDrag(); }; img2.onRelease = img2.onReleaseOutside=function () { stopDrag(); }; // var exemplaire = 0; menuPhoto = new ContextMenu(); menuCercle = new ContextMenu(); menuPhoto.hideBuiltInItems(); menuCercle.hideBuiltInItems(); // actionsaExecuter = function (occurrence, numCommande) { etiquette = numCommande.caption; switch (numCommande) { case commande1 : occurrence._xscale = occurrence._yscale=25; break; case commande2 : occurrence._xscale = occurrence._yscale=50; break; case commande3 : occurrence._xscale = occurrence._yscale=75; break; case commande4 : occurrence._xscale = occurrence._yscale=100; break; case commande5 : occurrence.etoiles.gotoAndStop(2); break; case commande6 : occurrence.etoiles.gotoAndStop(3); break; case commande7 : occurrence.etoiles.gotoAndStop(4); break; case commande8 : occurrence.etoiles.gotoAndStop(1); break; case commande9 :
60
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
exemplaire++; _root.attachMovie("cercle", "cercle"+exemplaire, exemplaire); _root["cercle"+exemplaire]._x = _root._xmouse; _root["cercle"+exemplaire]._y = _root._ymouse; menuCercle.customItems.push(commande10); _root["cercle"+exemplaire].menu = menuCercle; break; } }; suppressionCercle = function (occurrence, numCommande) { etiquette = numCommande.caption; switch (numCommande) { case commande10 : occurrence.removeMovieClip(); break; } }; commande1 = new ContextMenuItem("Echelle 25 %", actionsaExecuter); commande2 = new ContextMenuItem("Echelle 50 %", actionsaExecuter); commande3 = new ContextMenuItem("Echelle 75 %", actionsaExecuter); commande4 = new ContextMenuItem("Echelle 100 %", actionsaExecuter); commande5 = new ContextMenuItem("1 toile", actionsaExecuter); commande6 = new ContextMenuItem("2 toiles", actionsaExecuter); commande7 = new ContextMenuItem("3 toiles", actionsaExecuter); commande8 = new ContextMenuItem("Supprimer l(es) toile(s)", actionsaExecuter); commande9 = new ContextMenuItem("Ajouter un cercle", actionsaExecuter); commande10 = new ContextMenuItem("Supprimer le cercle", suppressionCercle); // commande5.separatorBefore = true; commande9.separatorBefore = true; for (i=1; i<=9; i++) { menuPhoto.customItems.push(_root["commande"+i]); } // img1.menu = img2.menu=menuPhoto;
Analyse
Lignes 1 13 : les deux occurrences sur la scne sont rendues mobiles. Lignes 16 17 : nous crons deux menus que nous allons ensuite remplir de commandes avant de les affecter aux occurrences. Lignes 18 19 : nous souhaitons personnaliser les menus en commenant par retirer le contenu par dfaut. Notez que vous ne pourrez supprimer les commandes Paramtres et propos de Macromedia Flash Lignes 21 57 : lorsque lutilisateur va slectionner une commande en cliquant sur une occurrence prcise, la fonction va reconnatre le nom de cette dernire, ainsi que le
61
Linterface Partie I
numro de ligne (par exemple : Echelle 75% sur la troisime ligne). Nous recherchons donc ce que doit faire la fonction, le rsultat se trouve la ligne 31. Ligne 22 : nous avons ajout cette ligne qui ne sert rien dans notre tude de cas, mais il est important de savoir quil est possible de connatre ainsi le nom de la commande slectionne. Ligne 23 : la variable numCommande a mmoris le numro de ligne slectionn. Nous allons donc faire un branchement sur un cas correspondant. Lignes 24 26 : dans le cas o la premire commande serait slectionne, nous excuterions la ligne 25. Ligne 48 : dans le cas o la 9e commande est slectionne, cest--dire Ajouter un cercle , nous ne nous contentons pas dexcuter une ligne dinstruction. Grce la commande attachMovie(), nous allons placer des cercles rouges sur la scne. Lignes 53 54 : ces deux lignes dinstructions vont nous permettre de dnir un menu personnalis pour les ronds rouges que nous plaons sur les images. Lignes 58 64 : lorsque vous cliquerez sur un cercle rouge que vous aurez pos, il sera possible de le supprimer. Nous devons donc crer une fonction an quelle puisse tre appele la ligne 75. Lignes 66 75 : au travers de ces lignes, vous dnissez la relation entre ltiquette dune commande et laction excuter. Lignes 77 78 : pour structurer votre menu contextuel, vous avez la possibilit dajouter des lignes de sparation entre deux commandes. Lignes 79 81 : nous remplissons prsent notre menu cr la ligne 16. Ligne 83 : nous assignons un menu commun nos deux occurrences.
Ronde de boutons
Vous allez dcouvrir une animation trs simple et pourtant trs pratique pour utiliser un menu sous forme de roue. Le choix dun bouton se fait sans bouger la souris ds que vous tes dans la zone de la roue. Les commandes dlent automatiquement.
Chemin daccs : Interface/Menus/RondeBoutons.a Lanimation est extrmement simple, deux occurrences intitules feuille et menuCercle se trouvent sur la scne. Il ne nous reste plus qu programmer la rotation de la roue et grer les clics sur les boutons.
62
Les menus Chapitre 2 Figure 2-9

Les commandes viennent vous ds lors que vous survolez le cercle de boutons.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 _root.onEnterFrame = function() { if (menuCercle.hitTest(_xmouse, _ymouse, 1)) { menuCercle._rotation += 3; } }; // couleurFeuille = new Color(feuille); // menuCercle.blanc.onPress = function() { couleurFeuille.setRGB(0xFFFFFF); }; menuCercle.jaune.onPress = function() { couleurFeuille.setRGB(0xFFFF00); }; menuCercle.bleu.onPress = function() { couleurFeuille.setRGB(0x0000FF); }; menuCercle.rouge.onPress = function() { couleurFeuille.setRGB(0xFF0000); };
Analyse
Ligne 1 : nous dnissons un gestionnaire charg de surveiller linstant o le curseur de la souris va survoler notre ronde de boutons.
63
Linterface Partie I
Ligne 3 : ds que le curseur survolera la zone de ce menu, la rotation sincrmentera de trois pixels. Pour changer la couleur de notre feuille, nous changeons la couleur dune occurrence de couleur lgrement transparente. Nous devons donc commencer par Ligne 7 : crer une instance de la classe Color(). Lignes 9 11 : rappelons que menuCercle est le nom doccurrence de notre ronde de boutons. lintrieur de celle-ci, nous avons plac quatre boutons intituls blanc, jaune, bleu et rouge. Nous dnissons donc des gestionnaires avec lvnement onPress, qui vont excuter la mthode setRGB() pour changer la couleur de loccurrence qui se trouve sur la photo. Cette animation est trs simple et dmontre quil est possible dobtenir une animation de menu avec peu de code.
Le composant Tree
Vous dcouvrirez dans ce livre quune autre animation est consacre au dveloppement dun composant. Cependant, si vous travaillez sur Flash 8, il existe un composant qui est par dnition dj dvelopp. Nous avons souhait vous en dmontrer la simplicit dutilisation mme si vous ne pouvez pas facilement personnaliser son graphisme.
Figure 2-10
Le composant Tree permet de grer trs simplement la prsentation de donnes sous forme darborescence.
64
Chemin daccs : Interface/Menus/ComposantTree.a Nous avons plac sur la scne, un composant Tree que nous avons intitul arbreGenea, ainsi que deux variables : vSituation et vDateNaissance. Ces trois lments sufsent pour raliser cette animation.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var chargeArbre:XML = new XML(); chargeArbre.ignoreWhite = true; chargeArbre.onLoad = function() { var racine:XML = this.firstChild; arbreGenea.dataProvider = racine; arbreGenea.setStyle("fontSize", 10); arbreGenea.setStyle("rollOverColor", 0x6C983E); arbreGenea.setStyle("selectionColor", 0xB0D789); arbreGenea.vScrollPolicy = "off"; }; // chargeArbre.load("ComposantTree.xml"); // var ecouteur:Object = new Object(); ecouteur.change = function(demande) { vSituation = demande.target.selectedItem.attributes.situation; vDateNaissance = demande.target.selectedItem.attributes.dateNaissance; }; arbreGenea.addEventListener("change", ecouteur);
Le chier XML auquel il est fait rfrence dans ce script est le suivant :
1 <Arbrefamille> 2 3 <Tardiveau label="Jean-Claude" situation="Divorc" dateNaissance="27/06/1935" 4 prenomconjoint="Yvonne"> 5 6 <Gervasoni label="Fabienne" situation="Marie" dateNaissance="28/04/1962" 7 prenomconjoint="Jean-Paul"> 8 <Gervasoni label="Adrien" situation="Clibataire" dateNaissance="20/02/1987"> 9 <Gervasoni label="Fanny" situation="Clibataire" dateNaissance="04/01/2007"/> 10 </Gervasoni> 11 <Gervasoni label="Mathilde" situation="Clibataire" dateNaissance="31/01/93"/> 12 </Gervasoni> 13 14 <Tardiveau label="Olivier" situation="Spar" dateNaissance="13/05/1967"> 15 <Tardiveau label="Jrmy" situation="Clibataire" dateNaissance="20/11/2000"/> 16 <Tardiveau label="Mellisa" situation="Clibataire" dateNaissance="20/01/2002"/> 17 </Tardiveau> 18
65
Linterface Partie I
19 <Tardiveau label="David" situation="Mari" dateNaissance="03/02/1970" prenomconjoint="Marjorie"> 20 21 <Tardiveau label="Marine" situation="Clibataire" dateNaissance="15/09/2002"/> 22 <Tardiveau label="Luna" situation="Clibataire" dateNaissance="20/07/2006"/> 23 </Tardiveau> 24 25 <Tardiveau label="Jrme" situation="Clibataire" dateNaissance="01/10/1981"/> 26 27 </Tardiveau> 28 29 </Arbrefamille>
Analyse
Comme vous pouvez le constater, le chier XML est simple comprendre : il reprsente les diffrents membres dune famille, savoir les parents et les enfants. Ligne 1 : nous commenons par crer une instance de la classe XML() pour y stocker le contenu du chier. Ligne 2 : nous prcisons que les ventuelles lignes vierges (sauts de lignes) contenues dans le chier XML doivent tre ignores. Lignes 3 10 : le contenu de la fonction onLoad va sexcuter lorsque le chargement du contenu du chier XML dans linstance cre la ligne 1 sera termin. Ligne 4 : nous mmorisons dans une variable locale la partie exploitable du contenu du chier XML. Rfrez-vous ventuellement lintroduction de ce livre pour mieux comprendre cette ligne. Ligne 5 : le composant Tree est tout simplement rempli grce la proprit provider. Lignes 6 9 : nous dnissons les attributs dapparence de loccurrence du composant Tree. La proprit vScrollPolicy permet de dnir ltat de visibilit de lventuel ascenseur vertical (tout dpend de la hauteur de loccurrence par rapport son contenu). Ligne 12 : aprs avoir dni les instructions excuter lorsque le chargement sera termin (lignes 3 10), nous faisons appel la mthode load() pour charger le chier ComposantTree.xml en mmoire vive de lordinateur. Lignes 14 19 : nous dnissons un couteur charg dafcher dans les textes dynamiques, dont les noms de variables sont vSituation et vDateNaissance, les valeurs stockes dans la proprit dataProvider de loccurrence arbreGenea. Lorsque vous cliquez sur une des lignes de loccurrence du composant Tree, vous changez le focus (la slection) et la fonction change enregistre le numro de ligne concerne dans la variable demande. Il ne vous reste plus qu utiliser les proprits target, selectedItem et attributes pour obtenir les informations stockes.
66
Bogues ventuels
Noubliez pas la ligne 2 qui joue un rle capital dans le comptage des lignes du chier XML. Loubli des guillemets des lignes 6 9 et de la ligne 19 entranera un bogue inluctable. la ligne 15, lvnement change ne doit pas commencer par une majuscule.
Navigation par onglets

Sans mme parler de Web 2.0 qui va nir, esprons-le, par tre dmod graphiquement, nous avons retenu le systme de navigation par onglets qui prsente lavantage de pouvoir accder une information trs simplement et rapidement. Pour cette premire animation, nous avons voulu retenir une solution de dveloppement simple, avec un code assez succinct. Elle prsente nanmoins le gros inconvnient de ne pas pouvoir mettre jour dynamiquement le contenu des volets accessibles par un clic sur un onglet.
Figure 2-11
Un clic sur un onglet change le plan de ce dernier et dplace la tte de lecture dun clip.
Chemin daccs : Interface/Menus/OngletsVolets.a Lorsque vous lancez lanimation et cliquez sur un onglet, vous pouvez avoir limpression que les deux autres changent de plan : lun des onglets passe au premier plan tandis que les deux autres passent en arrire-plan. Sur la gure 2-11, longlet du volet 2 est solidaire avec le grand rectangle contenant le texte, formant ainsi un seul lment graphique.
67
Linterface Partie I
Seul le grand rectangle reprsentant la plus grande partie du volet est ombre. Deux des trois onglets sont en arrire-plan de ce quadrilatre alors quun troisime est en revanche au premier plan de lanimation, donnant ainsi limpression dun ensemble. Pour raliser cette animation, nous avons donc congur la scne de la faon suivante : Trois occurrences reprsentant des onglets, intitules onglet1, onglet2 et onglet3. Loccurrence dun symbole reprsentant un grand rectangle aux coins arrondis lexception de celui qui se trouve en haut gauche. Elle possde une ombre porte, mais pas de nom. Trois textes statiques placs sur les occurrences des onglets. Un clip contenant 3 images-cls et prsentant la conjugaison du verbe tre au prsent sur la premire image, limparfait sur la deuxime et au futur sur la troisime. Loccurrence sintitule par mtaphore volet. La structure de lanimation est reprsente sur la gure 2-12.
Figure 2-12
Leffet donglet est obtenu par un jeu dombres sur le volet et une gestion des plans des onglets.
Script
1 nomOngletDevant = onglet1; 2 3 onglet1.onPress = function() { 4 this.swapDepths(nomOngletDevant); 5 nomOngletDevant = this; 6 volet.gotoAndStop(1); 7
68
8 9 10 11 12 13 14 15 16 17 18 19 20
}; onglet2.onPress = function() { this.swapDepths(nomOngletDevant); nomOngletDevant = this; volet.gotoAndStop(2); }; onglet3.onPress = function() { this.swapDepths(nomOngletDevant); nomOngletDevant = this; volet.gotoAndStop(3); };
Analyse
Le script de cette animation est simple, mais trs efcace. Rappelons que leffet de basculement dun volet au premier plan rside dans la gestion des plans des onglets. Ligne 1 : nous enregistrons dans la variable nomOngletDevant, le nom de loccurrence gurant actuellement au premier plan. Lignes 3 8 : nous dnissons un gestionnaire dvnement de type onPress sur le premier onglet an de le rendre cliquable. Ligne 4 : nous intervertissons le niveau de plan de loccurrence clique avec celui de loccurrence dont le nom est mmoris dans la variable nomOngletDevant. Ligne 5 : nous rednissons la valeur de la variable nomOngletDevant an de pouvoir effectuer dautres clics. Ligne 6 : pour nir, nous contrlons la position de la tte de lecture de loccurrence intitule volet qui contient les 3 images-cls avec les contenus diffrents. Lignes 10 20 : nous avons affect deux autres gestionnaires aux deux autres onglets.
Bogues ventuels
Ne saisissez surtout pas le nom onglet1 de la ligne 1 entre guillemets.
Navigation dynamique par onglets

Nous reprochions lanimation prcdente de ne pas tre dynamique. Cest pourquoi nous avons dvelopp celle-ci qui lest un peu plus. Nous aurions pu pousser ce deuxime dveloppement jusqu la cration dynamique des onglets, mais nous avons tout de
69
Linterface Partie I
mme voulu garder un script relativement simple. Si vous souhaitez gnrer dynamiquement la construction de votre menu base donglets, vous devrez utiliser la mthode attachMovie() avec une boucle for. Le script correspondant sera prsent la suite de celui que nous allons tudier maintenant.
Figure 2-13
Le chargement dynamique des donnes se fait partir dun chier XML.
Chemin daccs : Interface/Menus/OngletsVolets2.a Cette animation est base sur celle que nous venons danalyser dans le cas prcdent une diffrence prs, le clip contenant les 3 images-cls avec les conjugaisons du verbe tre nexiste pas. Il a tout simplement t remplac par un texte dynamique dont le nom de variable est vMessage.
Script
1 2 3 4 5 6 7 8 9 nomOngletDevant = onglet1; var dictionnaire = new XML(); dictionnaire.ignoreWhite = true; dictionnaire.onLoad = function() { vAffichage = this.firstChild.childNodes[0]; racine = this.firstChild; }; dictionnaire.load("verbes.xml");
70
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
onglet1.onPress = function() { this.swapDepths(nomOngletDevant); nomOngletDevant = this; volet.gotoAndStop(1); vAffichage = racine.childNodes[0]; }; onglet2.onPress = function() { this.swapDepths(nomOngletDevant); nomOngletDevant = this; volet.gotoAndStop(2); vAffichage = racine.childNodes[1]; }; onglet3.onPress = function() { this.swapDepths(nomOngletDevant); nomOngletDevant = this; volet.gotoAndStop(3); vAffichage = racine.childNodes[2]; };
Le chier XML auquel il est fait rfrence la ligne 9 contient le nud suivant :
<Verbe nom="Etre"> <Temps intitule="Prsent">Je suis Tu es Elle/il est Nous sommes Vous tes Elles/ils sont </Temps> <Temps intitule="Imparfait">J'tais Tu tais Elle/il tait Nous tions Vous tiez Elles/ils taient </Temps> <Temps intitule="Futur">Je serai Tu seras Elle/il sera Nous serons
71
Linterface Partie I
Vous serez Elles/ils seront </Temps> </Verbe>
Analyse
Avant de passer lanalyse du script contenant les lignes dinstructions en ActionScript, nous vous invitons consulter lanimation prcdente et prendre connaissance des informations la concernant (script et analyse). Ligne 1 : nous enregistrons dans la variable nomOngletDevant, le nom de loccurrence gurant actuellement au premier plan. Ligne 3 : nous commenons par crer une instance de la classe XML() pour y stocker le contenu du chier verbes.xml. Ligne 4 : nous prcisons que les ventuelles lignes vierges (sauts de lignes) contenues dans le chier XML doivent tre ignores. Lignes 5 8 : le contenu de la fonction onLoad va sexcuter lorsque le chargement du contenu du chier XML dans linstance cre la ligne 3 sera termin. Ligne 6 : nous commenons par placer sur la scne, dans le texte dynamique dont le nom de variable est vAffichage, le contenu du premier nud. Ligne 7 : nous mmorisons dans une variable locale la partie exploitable du contenu du chier XML. Rfrez-vous ventuellement lintroduction de ce livre pour mieux comprendre cette ligne. Ligne 9 : nous chargeons le chier XML intitul verbes.xml. Lignes 12 17 : si vous avez lu les explications sur lanimation prcdente, vous remarquerez que seule la ligne 16 diffre. En effet, dans cette deuxime animation, nous ne choisissons pas de changer la tte de lecture dun clip, mais nous chargeons le contenu dun nud XML dans le texte dynamique situ sur la scne dont le nom de variable est vAffichage. Lignes 19 31 : ces deux gestionnaires sappliquent aux deux autres onglets. Le code qui y est contenu est identique celui des lignes 12 17.
Bogues ventuels
Loubli de la ligne 4 constituerait le principal bogue, entranant un dysfonctionnement de lanimation.
72
Construction dynamique du menu

Comme nous lvoquions en introduction, nous avons volontairement simpli le script que nous venons danalyser ensemble, an dviter lusage dune boucle for. Prcisons tout de mme quune telle utilisation aurait permis de simplier le code de la manire suivante :
Chemin daccs : Interface/Menus/OngletsVolets3.a
Script
nomOngletDevant = onglet1; var dictionnaire = new XML(); dictionnaire.ignoreWhite = true; dictionnaire.onLoad = function() { vAffichage = this.firstChild.childNodes[0]; racine = this.firstChild; }; dictionnaire.load("verbes.xml"); for (i=1; i<=3; i++) { _root["onglet"+i].sonNumero = i-1; _root["onglet"+i].onPress = function() { this.swapDepths(nomOngletDevant); nomOngletDevant = this; volet.gotoAndStop(i); vAffichage = racine.childNodes[this.sonNumero]; }; }
Nous nallons pas analyser ce script. Prcisons simplement quil offre lavantage dtre dynamique. Cela signie que si le chier XML est mis jour, le contenu de lanimation sera automatiquement modi chaque excution. Dans le cas o de nombreux onglets seraient utiliss, le script ci-dessus ne changera pas contrairement au script que nous avons analys prcdemment. Prcisons galement que la mthode attachMovie() serait ncessaire pour pouvoir crer une vraie barre donglets dynamique, comme nous lvoquions quelques lignes plus haut.
73
3
Les boutons
Il est trs simple de programmer un bouton, mais son contrle est tout de mme plus difcile. Combien de dveloppeurs Flash savent quil est possible de dsactiver un bouton par une simple proprit ? Est-ce difcile de programmer un bouton qui ferait une chose et son contraire ?
Crer un bouton bascule

La principale caractristique de ce genre de bouton est de pouvoir excuter deux actions diffrentes alternativement chaque clic. Il sagit gnralement dinstructions excutant des tches opposes (par exemple : masquer ou afcher une occurrence). La technique est trs simple car elle sappuie sur lutilisation de loprateur logique not. chaque clic sur le mme bouton, une valeur boolenne va sinverser. Cette animation est intressante car il sagit de la premire de ce livre qui utilise cette technique dinversion de la valeur boolenne dune variable. Lorsque lutilisateur va cliquer sur le levier, il va rtablir le courant et ainsi contrler les proprits de certaines occurrences.
Chemin daccs : Interface/Menus/BoutonBascule2.a Notre animation ne contient que deux occurrences. Tout le reste nest que dcoration. La premire qui sintitule interrupt, correspond loccurrence sur laquelle lutilisateur va
Linterface Partie I
devoir cliquer pour allumer lampoule. La deuxime sintitule lumiere et nous allons lutiliser pour dmontrer quelle peut avoir deux tats, cest--dire prendre deux apparences en fonction de la valeur boolenne de notre variable etatClic.
Script
1 2 3 4 5 6 7 8 9 10 11 var etatClic = false; lumiere._visible = etatClic; interrupt.onPress = function() { etatClic = !etatClic; if (etatClic) { this._rotation = 0; } else { this._rotation = 30; } lumiere._visible = etatClic; };
Analyse
Ligne 1 : nous initialisons notre premire variable qui va justement contenir la valeur boolenne que nous allons changer au clic sur notre interrupteur. Ligne 2 : initialement, nous masquons loccurrence qui reprsente la grande lueur. Ligne 3 : ce gestionnaire va inverser de faon alternative la valeur de notre variable etatClic la ligne 4.
Ligne 5 : un test vrie donc la valeur de la variable et afche ou masque en consquence loccurrence intitule interrupt.
Remarque
vitez de comparer la valeur de la variable etatClic avec true ou false, elle vaut dj ellemme ces valeurs attendues entre les parenthses dune structure conditionnelle. Ainsi, if(etatClic==true) revient crire if(etatClic) et if(etatClic!=true) revient crire if(!etatClic).
Bogue ventuel
Il arrive parfois de constater que les novices se trompent dans lordre de loprateur. Nous avons volontairement ajout des espaces avant et aprs le signe = an que vous ne confondiez pas =! et !=. Cette dernire paire de signes reprsente lingalit dans un test conditionnel comme nous venons de vous le faire remarquer.
76
Les boutons Chapitre 3
Dsactiver un bouton
Cette technique est extrmement importante dans la mesure o vous serez contraint un jour ou lautre dinterdire le clic sur une occurrence, alors quelle est susceptible dtre cliquable dans certaines conditions et/ou certains moments. Cette proprit est malheureusement souvent mconnue, et certains dveloppeurs passent alors par une structure de test avec une variable qui stocke gnralement une valeur boolenne pour autoriser et interdire le dclenchement de lignes dinstructions contenues dans un gestionnaire onPress ou onRelease.
Remarque
Lorsque vous lancerez la lecture dun son avec la commande start() de la classe Sound(), vous constaterez que si vous cliquez plusieurs fois sur le bouton lecture, le son est lu plusieurs fois. Utilisez la proprit enabled comme nous allons le voir tout de suite.
Chemin daccs : Interface/Boutons/ BoutonsDesactiver1.a Lanimation contient uniquement trois occurrences intitules btLancer, btArret et radar.
Figure 3-1
Lorsque lutilisateur clique sur le bouton Lancer, il ne peut plus re-cliquer dessus tant quil na pas pralablement cliqu sur le bouton Arrter.
Script
1 tourner = function () { 2 radar._rotation += 3;
77
Linterface Partie I
3 4 5 6 7 8 9 10 11 12 13
}; btLancer.onPress = function() { lancer = setInterval(tourner, 10); radar.gotoAndStop(2); this.enabled = false; }; btArreter.onPress = function() { clearInterval(lancer); radar.gotoAndStop(1); btLancer.enabled = true; };
Analyse
Ligne 1 : une fonction est cre an de faire tourner loccurrence intitule radar. Lignes 4 8 : un gestionnaire onPress va excuter la fonction setInterval() an de lancer le mouvement rotatif en continu. Loccurrence intitule btLancer est rendue inactive au travers du mot-cl this et de la proprit enabled rgle sur false. Lignes 9 13 : ce gestionnaire interrompt le mouvement rotatif et change la valeur de la proprit enabled de loccurrence btLancer an de pouvoir relancer la rotation. Vous noterez que nous changeons la position de la tte de lecture de loccurrence du radar, an dobtenir une image qui propose un effet de trace derrire le trait blanc qui balaye lcran.
Bogue ventuel
Dans notre exemple, sans la proprit enabled, chaque clic sur le bouton Lancer excuterait plusieurs fois la fonction setInterval(), acclrant ainsi la vitesse de rotation. Il deviendrait alors difcile de larrter.
Flash Player 6.0.79 et ultrieur
Chemin daccs : Interface/ Boutons / BoutonsDesactiver3.a Voici prsent un deuxime exemple qui vous propose un QCM. Vous navez le droit qu une seule rponse par question, sans possibilit de changer davis. Cela signie donc que vous ne pouvez cliquer quune seule fois sur un bouton radio dune srie de trois. Lanimation contient 12 occurrences intitules q1r1 (question1rponse1), q1r2, q1r3, q2r1, q3r1, etc. Un texte dynamique dont le nom de variable est scoreGlobal a galement t plac sur la scne.
78
Figure 3-2
Lorsquun bouton est coch, vous ne pouvez plus changer davis car les deux autres boutons de la mme srie ne sont plus cliquables.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 var reponses = [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0]; var entree = -1; scoreGlobal = 0; // for (q=1; q<=4; q++) { for (r=1; r<=3; r++) { entree++; _root["q"+q+"r"+r].valeur = reponses[entree]; _root["q"+q+"r"+r].sonNumero = entree _root["q"+q+"r"+r].onPress = function() { scoreGlobal += this.valeur; groupe = this._name.substr(0, 3); _root[groupe+1].enabled = false; _root[groupe+2].enabled = false; _root[groupe+3].enabled = false; this.gotoAndStop(2); if (this.valeur == 1) { tempo = _root.attachMovie("coche", "coche"+this.sonNumero, this.sonNumero); tempo._x = this._x+15; tempo._y = this._y; } }; } }
79
Linterface Partie I
Analyse
Ligne 1 : dans un tableau, nous stockons la valeur des rponses correspondant aux 12 occurrences. Ligne 2 : nous allons excuter une boucle imbrique, nous avons besoin dune variable que nous incrmenterons cette occasion. Ligne 3 : cette variable correspond un texte dynamique sur la scne. Nous afcherons le rsultat de notre test lintrieur. Lignes 5 et 6 : cette boucle imbrique va nous permettre de dnir pour chaque occurrence de la scne, une valeur qui provient du tableau reponses. Nous assignons galement un gestionnaire onPress chacune de ces occurrences an de rendre non cliquables les boutons radio de la srie laquelle appartient loccurrence clique. Ligne 16 : laspect du bouton radio coch correspond la deuxime image de chaque occurrence. Toutes les images sont issues du mme symbole. Lignes 17 21 : si lutilisateur clique sur la bonne rponse, nous plaons ct du bouton radio coch, un symbole qui reprsente licne dune bonne rponse.
Raliser un double-clic
Le double-clic sur Internet nest pas naturel. Les liens se font par simple clic. Et pourtant, Flash propose des interfaces qui sloignent parfois, par chance, de celles que lon obtient en HTML. Comment simuler le double-clic puisque Flash ne gre pas cet vnement ? En mesurant le temps entre deux clics !
Chemin daccs : Interface/ Boutons /BoutonsDoubleClic.a Nous allons simplement placer dynamiquement sur la scne des occurrences. Rien ne sy trouve au lancement de lanimation.
Rappel
La fonction getTimer() permet de connatre le nombre de millisecondes coules depuis le lancement de lanimation. Dans le cas dune page Internet, on ne parlera pas de lancement de lanimation, mais du chargement de lanimation.
80
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var premierClic = 0; // for (i=0; i<=10; i++) { _root.attachMovie("bouton", "bouton"+i, i); _root["bouton"+i]._x = random(570)+15; _root["bouton"+i]._y = random(400)+15; _root["bouton"+i].onPress = function() { this.startDrag(); if (getTimer()-premierClic<300) { this._visible = false; } premierClic = getTimer(); }; _root["bouton"+i].onRelease = _root["bouton"+i].onReleaseOutside=function () { stopDrag(); }; }
Analyse
Ligne 1 : nous stockons dans une premire variable la valeur qui correspond au nombre de secondes coules depuis le lancement de lanimation, cest--dire 0 seconde. Puis cette premire ligne dinstruction sexcute avant mme que la scne ne safche lcran. Ligne 3 : nous allons effectuer une boucle qui va nous permettre de Ligne 4 : placer dynamiquement un symbole sur la scne Lignes 5 6 : une position alatoire sur la scne. Ligne 7 : nous assignons chaque occurrence, un gestionnaire charg de le rendre mobile (ligne 8). Lignes 9 11 : un test vrie si moins de 300 millisecondes se sont coules depuis le dernier clic. Cest uniquement le cas si lutilisateur a effectu deux clics trs rapprochs dans le temps, cest--dire un double-clic. Ligne 12 : nous mmorisons le temps an de pouvoir le comparer au prochain clic.
81
Linterface Partie I

Crer un bouton avec un effet denfoncement

Cette explication ne correspond pas un chier particulier, il vous suft dajouter les quelques lignes du script ci-aprs nimporte quelle animation en renommant une occurrence btChoix. Nous avons ajout ce chapitre ces quelques lignes de code qui vont vous permettre de donner limpression dun bouton qui senfonce lorsque vous cliquez sur une occurrence.
Dans notre exemple, nous avons plac une occurrence sur la scne, son nom est btChoix.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import flash.filters.DropShadowFilter; // monOmbre = new DropShadowFilter(); // monOmbre.strength = 0.8; monOmbre.quality = 15; monOmbre.blurX = monOmbre.blurY=3; mesFiltres = [monOmbre]; mesFiltresVides = []; btChoix.filters = mesFiltres; // btChoix.onPress = function() { this._x += 2; this._y += 2; btChoix.filters = mesFiltresVides; }; btChoix.onRelease = btChoix.onReleaseOutside=function () { this._x -= 2; this._y -= 2; btChoix.filters = mesFiltres; };
Analyse
Ligne 1 : nous importons la classe DropShadowFilter() an de pouvoir y faire rfrence. Ligne 3 : nous instancions la classe.
82
Lignes 5 7 : nous dnissons les proprits de linstance pralablement cre. Ligne 8 : nous crons une liste qui va tre utilise pour ajouter une ombre loccurrence de notre choix. Ligne 9 : nous crons une liste vide qui va nous permettre de retirer le(s) ltre(s) associ(s) une occurrence. Ligne 10 : nous dnissons initialement une ombre notre occurrence intitule btChoix qui se trouve sur la scne. Lignes 12 16 : nous dnissons un gestionnaire onPress qui va nous permettre de retirer le ltre que nous venons dappliquer loccurrence btChoix. Lignes 17 21 : ds que lutilisateur relche le bouton de la souris, nous raffectons le ltre loccurrence. Vous noterez que nous avons galement dplac loccurrence an de lui donner une impression de mouvement.
Bogue ventuel
Attention, si vous ouvrez dans Flash 8, un chier cr sous Flash MX 2004, il vous sera impossible dajouter les lignes ci-dessus, mme si vous le renregistrez sous le format Flash 8. Les ltres ne fonctionneront pas.
83
4
Les variateurs
Dplacer un objet sur la scne fait partie des bases de la programmation en ActionScript. Il est en revanche dommage de ne pas exploiter tous les paramtres de la mthode startDrag() qui est la cl de la mthode de cration des variateurs. En effet, en contraignant le dplacement dune occurrence sur une seule ligne de pixels (ou une seule colonne), il est trs simple de simuler un variateur. Reste tout de mme la programmation qui laccompagne.
Variateur linaire
Cette animation vous propose de dcouvrir quil est trs simple dexploiter les coordonnes renvoyes par un variateur pour effectuer des rglages. Pour tre plus prcis, vous allez dplacer une occurrence contrainte sur un axe, il nous sufra de lire ses coordonnes _x pour les utiliser dans un calcul relatif au rsultat attendu. En effet, si nous souhaitons obtenir une valeur comprise entre 0et 100, il faudra commencer par retirer la distance qui spare loccurrence lorsquelle est le plus gauche de sa graduation et du bord gauche de la scne. Ensuite, il faudra diviser la valeur obtenue par un coefcient que nous expliquerons dans lanalyse du script.
Linterface Partie I
Figure 4-1
En bougeant le variateur du bas de la scne, vous contrlez les trois proprits de trois occurrences.
Rappel
Pour crer un masque dynamique sur la scne, utilisez la commande setMask() en faisant pralablement rfrence au nom de loccurrence voir au travers de celle qui gure lintrieur des parenthses de cette mthode : nomOccurrenceMonImage.setMask(nomOccurrence-
DuMasque).
Chemin daccs : Interface/Variateurs/VariateursLineaire.a Exceptionnellement, nous nallons pas vous dcrire la composition de la scne de cette animation, an que vous vous concentriez sur le script qui repose sur une ligne dinstruction principale. Commenons dailleurs par dtacher le cur du script. Cest grce lui que nous pouvons effectuer nimporte quel rglage.
variateur.onPress = function() { this.startDrag(false, 160, 340, 400, 340); this.onMouseMove = function() { valeurVariateur = Math.round((this._x-160)/2.4); }
86
Les variateurs Chapitre 4
Le script est structur trs simplement si nous ne tenons pas compte des lignes dinstructions secondaires : 1. La cration dun gestionnaire onPress() avec la mthode startDrag() et une contrainte. 2. La cration dun gestionnaire onRelease() avec la mthode stopDrag().
Script
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 azo._alpha = 0; // paletteCouleur = new Color(lettreY); // lettreY2.setMask(masque_inst); lettreY2._xscale = 2500; lettreY2._yscale = 2500; // variateur.onPress = function() { this.startDrag(false, 160, 340, 400, 340); this.onMouseMove = function() { valeurVariateur = Math.round((this._x-160)/2.4); // basX._alpha = valeurVariateur; azo._alpha = 100-valeurVariateur; // changementCouleur = {ra:'0', rb:valeurVariateur*2.5, ga:'0', gb:'0', ba:'0', bb:'0',aa:'100', ab:'100'}; paletteCouleur.setTransform(changementCouleur); // lettreY2._xscale = (valeurVariateur*25)+100; lettreY2._yscale = (valeurVariateur*25)+100; // affichageVariateur = valeurVariateur+" %"; }; }; variateur.onRelease = variateur.onReleaseOutside=function () { stopDrag(); delete this.onMouseMove; };
Analyse
Ligne 1 : nous rendons transparente loccurrence intitule azo. Ligne 3 : nous instancions la classe Color() an de contrler la couleur de loccurrence lettreY.
87
Linterface Partie I
Ligne 5 : nous masquons loccurrence lettreY2 avec celle qui sintitule masque_inst. Sur la gure 4.1, vous noterez que le Y de la case de droite est coup, car il nest visible que dans ce cadre. Lignes 6 et 7 : nous initialisons ds le dpart la taille de loccurrence lettreY2 2500% car le variateur est rgl 100% ds le dpart. Ligne 9 : ce gestionnaire, accompagn de celui qui se trouve la ligne 11, assure la mise jour des transformations dans les trois cases ds que lutilisateur bouge le curseur du variateur. Ligne 10 : loccurrence variateur est rendue mobile ds que lutilisateur clique dessus. Nous contraignons le dplacement de loccurrence sur la 340e ligne en partant du haut de la scne. Elle ne pourra pas non plus se placer avant le 160e pixel du bord gauche de la scne, ni aprs le 400e. Elle peut donc glisser uniquement sur 240 pixels. Ligne 12 : nous stockons dans une variable une valeur qui rsulte du calcul suivant : this._x renvoie la position horizontale de loccurrence variateur. 160 correspond la position de la limite gauche que ne peut dpasser loccurrence variateur. Nous divisons par 2.4 car la distance sur laquelle est autorise glisser le variateur est de 240 pixels. Nous souhaitons obtenir une chelle de 0 100, cest pourquoi nous obtenons 2.4 en divisant 240 par 100. Ligne 14 : nous rglons la transparence de loccurrence basX avec la valeur que nous renvoie le calcul relatif la portion du variateur (ligne 12). Ligne 15 : an dinverser la valeur de la variable valeurVariateur pour obtenir 0 la place de 100et 100 la place de 0, nous effectuons cette soustraction. Ligne 17 : dans une variable, nous stockons une liste de proprits qui contient les valeurs colorimtriques que nous allons utiliser avec linstance paletteCouleur. Ligne 18 : nous procdons au rglage de la couleur du Y situ dans la case du milieu. Lignes 20 et 21 : nous procdons ici au rglage de lchelle du Y de la troisime case. Nous ajoutons 100 notre calcul, an que le Y soit au minimum une chelle de 100% lorsque le variateur est gauche sur sa graduation. Ligne 23 : nous afchons simplement la valeur de la variable que nous utilisons dans toutes les lignes dinstructions dans un texte dynamique sur la scne, et dont le nom de variable est affichageVariateur. Lignes 26 29 : nous devons annuler laction de glisser-dplacer de loccurrence du variateur ds que lutilisateur relche le bouton de sa souris. Nous avons prvu un deuxime gestionnaire au cas o il relcherait son clic, alors que le curseur de la souris nest plus sur celui du variateur. Par ailleurs, il faut arrter de demander Flash de faire son calcul lorsque lutilisateur bouge sa souris (ligne 28).
88
Bogue ventuel
Un bogue trs frquent dans ce genre de technique est lajout du signe pourcentage la n de la ligne 12. La valeur de la variable valeurVariateur doit toujours rester de type numrique, vous ne pouvez donc pas concatner le signe pourcentage.
Variateur circulaire
Ce type de variateur est peu courant car plus complexe raliser, il reste cependant plus raliste quun variateur linaire. Il suft de rcuprer les coordonnes _x et _y du curseur de la souris, pour les utiliser dans un calcul faisant appel la fonction mathmatique atan2().
Figure 4-2
Tournez loccurrence dans le sens des aiguilles dune montre, pour augmenter la transparence dune occurrence faisant ofce de lueur.
Chemin daccs : Interface/ Variateurs /VariateursCirculaire.a Le bouton de cette animation est une occurrence intitule boutonReglage, qui en comprend une autre intitule selecteur. Il sagit de la petite perle blanche qui indique galement le niveau de luminosit. La lueur qui va peu peu tre de plus en plus lumineuse est une occurrence intitule lumiere. Le script de lanimation est relativement simple, la seule difcult est de comprendre la ligne 18 qui fait appel la fonction mathmatique atan2(). Le script se dcompose ainsi : 1. Initialisation de la transparence de la lueur.
89
Linterface Partie I
2. Cration dune fonction appele lorsque le bouton tournera. 3. Cration dune fonction de limitation de langle de rotation. 4. Cration du gestionnaire onPress(). 5. Cration du gestionnaire onRelease().
Script
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 ampoule._alpha = lumiere._alpha=0; // verifierTropFaible = function () { if (angle<=360 && angle>315) { angle = 1; delete boutonReglage.onEnterFrame; // delete oblig car sinon, souris continue et passe la valeur dans calcul } }; verifierTropFort = function () { if (angle>275 && angle<315) { angle = 270; delete boutonReglage.onEnterFrame; } }; boutonReglage.selecteur.onPress = function() { boutonReglage.onEnterFrame = function() { angle = ((Math.atan2(_ymouse-250, _xmouse-300)/Math.PI)*180)+180; verifierTropFaible(); verifierTropFort(); this._rotation = angle; ampoule._alpha = lumiere._alpha=angle/2.7; }; }; boutonReglage.selecteur.onRelease = boutonReglage.selecteur.onReleaseOutside=function () { delete boutonReglage.onEnterFrame; };
Analyse
Ligne 1 : nous rglons deux proprits en mme temps, lalpha des occurrences ampoule et lumiere. Lignes 3 15 : nous crons ces fonctions qui vont nous permettre de vrier que lutilisateur ne tente pas de tourner le variateur en dehors des limites que nous avons xes. Nous reviendrons sur le calcul de la variable angle la ligne 18. Lignes 6 et 12 : nous annulons le calcul de langle et la rotation de loccurrence boutonReglage si lutilisateur dpasse les limites (lignes 4 et 10).
90
Ligne 16 : ce gestionnaire cible loccurrence selecteur qui se trouve dans celle qui sintitule boutonReglage, elle-mme situe sur la scne. Il sagit du marqueur en forme de rond blanc proche du chiffre 5 dans la copie dcran de la gure 4.2. Ligne 17 : ds que lutilisateur clique sur loccurrence voque la ligne 16, nous dnissons la fonction du gestionnaire onEnterFrame an dexcuter en continu les lignes dinstructions 18 22. Ligne 18 : nous calculons langle qui va nous permettre dexcuter une rotation sur loccurrence boutonReglage la ligne 20.
Remarque
Faites glisser sur la scne le symbole boutonRond qui se trouve dans la bibliothque de cette animation. Vous constaterez que le rond blanc qui sert de marqueur au variateur est gauche, bien au milieu verticalement. Il sagit en effet de langle 0 dans notre cas.
Lignes 19 et 20 : nous appelons ces deux fonctions an de bloquer le variateur sil dpasse les angles correspondants la position des chiffres 0 et 6 de sa graduation. Ligne 22 : nous procdons au rglage de la transparence de loccurrence reprsentant la lueur de notre ampoule. Puisque la valeur de la variable angle va nous renvoyer 270 lorsque le variateur sera sur la position 6, nous divisons le rsultat du calcul de la ligne 17 par 2.7 an dobtenir une valeur maximale de 100. Lignes 25 27 : ce gestionnaire doit annuler la rotation du variateur.
Bogue ventuel
Vous constaterez que le variateur se bloque aux valeurs 0 et 6 sur sa graduation, en cas de dpassement. Nous avions initialement un systme de glisser-dplacer fonctionnant sans annulation de la rotation au moment o les limites taient atteintes, mais le script tait plus complexe. Nous avons donc prfr le simplier.
Variateur de couleur
Avant de nous lancer dans la description dune nouvelle animation, prcisons que nous allons vous en prsenter deux. La premire utilisera la classe Color() qui nest pas recommande par Macromedia partir de Flash 8. La deuxime fera appel deux classes pour la mise en couleur dune occurrence, cette dernire technique nest compatible qu partir de la version 8 de Flash.
91
Linterface Partie I
Si vous avez tudi lanimation Variateur linaire , vous comprendrez plus facilement celle-ci car elle sappuie sur le mme fonctionnement. Nous allons simplement exploiter diffremment le rsultat renvoy par le curseur (sa proprit _x), cest--dire loccurrence contrainte se dplacer sur laxe horizontal que nous avons dni.
Figure 4-3
Bougez ces trois variateurs, la couleur de droite va alors se calculer en fonction de leurs positions _x.
Chemin daccs : Interface/ Variateurs /VariateursCouleur.a Des occurrences sur la scne doivent tre rendues mobiles sur une graduation qui ne joue aucun rle dans le script. Il sagit simplement de traits sur lesquels vont glisser les variateurs. Trois occurrences issues du mme symbole ont t places sur la scne, puis nommes variateurRouge, variateurVert, variateurBleu. Il sagit des petits ronds gris-vert sur les lignes qui mesurent 256 pixels de largeur. Trois textes dynamiques y ont galement t dposs avec les noms de variables suivants : couleurRouge, couleurVert, couleurBleu. Enn, le carr vert de la gure 4-3 a pour nom doccurrence, temoinCouleur. Lorsque lutilisateur va donc bouger ces trois variateurs, les variables des textes dynamiques vont changer de valeurs, pour aller de 0 255, et le carr de couleur va sadapter.
Script
1 2 3 4 5 6 7 8 9 10 var var var var var // for couleurRouge = 0; couleurVert = 0; couleurBleu = 0; couleurs = ["Rouge", "Vert", "Bleu"]; limitesDrag = [133, 155, 177]; (i=0; i<=2; i++) { _root["variateur"+couleurs[i]].sonIndex = i; _root["variateur"+couleurs[i]].onPress = function() { this.startDrag(0, 180, limitesDrag[this.sonIndex], 435, limitesDrag[this.sonIndex]);
92
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
this.onMouseMove = function() { _root["couleur"+couleurs[this.sonIndex]] = this._x-180; reglerCouleur(); }; }; _root["variateur"+couleurs[i]].onRelease = function() { stopDrag(); delete this.onMouseMove; }; } // palette = new Color(temoinCouleur); reglerCouleur = function () { // rouge = couleurRouge.toString(16); vert = couleurVert.toString(16); bleu = couleurBleu.toString(16); // if (rouge.length == 1) { rouge = "0"+rouge; } if (vert.length == 1) { vert = "0"+vert; } if (bleu.length == 1) { bleu = "0"+bleu; } // couleurAppliquee = "0x"+rouge+vert+bleu; palette.setRGB(couleurAppliquee); };
Analyse
Lignes 1 5 : nous initialisons les variables suivantes : couleurRouge, couleurVert et couleurBleu vont stocker une valeur comprise 0 et 255. couleurs est le tableau qui contient les sufxes des noms des 3 occurrences que lutilisateur va faire glisser pour changer la couleur de notre carr (actuellement vert sur la scne). Pour tre plus prcis, nous effectuerons une concatnation avec le prxe variateur pour obtenir le nom doccurrence variateurRouge. limitesDrag est un tableau qui contient les numros de lignes (de pixels) sur lesquelles les variateurs vont devoir glisser horizontalement. Ligne 7 : nous excutons une boucle for() an daffecter aux trois occurrences sur la scne, le gestionnaire onPress (ligne 9) qui contient lui-mme un gestionnaire onMouseMove (ligne 11).
93
Linterface Partie I
Ligne 8 : nous faisons dans un premier temps rfrence aux noms des occurrences variateurRouge, variateurVert et variateurBleu, an de leur dnir (associer) une variable intitule sonIndex qui va prendre pour valeur celle de i lexcution de la boucle. Rfrezvous la partie Avant-Propos de ce livre pour comprendre le problme de la rfrence une variable locale au cours de lexcution dune boucle. Ligne 10 : nous rendons mobiles les occurrences sur une seule ligne de pixels (133, 155 et 177) du 180e pixel du bord gauche de la scne au 435e. Ligne 12 : nous faisons prsent rfrence nos variables couleurRouge, couleurVert et couleurBleu pour leur dnir des valeurs qui rsultent du calcul suivant : this._x correspond la positon horizontale des occurrences variateurRouge, etc. 180 correspond la position de la limite gauche que ne peuvent dpasser ces trois occurrences. Ligne 13 : nous appelons ensuite la fonction reglerCouleur() qui va rgler la couleur de loccurrence temoinCouleur (le carr vert droite sur la scne). Ligne 16 : gestionnaire qui rend immobile loccurrence en cours de mouvement lorsque lutilisateur relche le bouton de sa souris. Le gestionnaire onMouseMove est galement annul. Ligne 22 : nous instancions la classe Color() an de rgler la couleur de loccurrence temoinCouleur. Ligne 23 : nous dnissons une fonction qui va appliquer la couleur calcule loccurrence temoinCouleur. Lignes 25 27 : nous convertissons les valeurs obtenues en valeurs hexadcimales. Lignes 29 37 : nous effectuons un test an dajouter un 0 si les valeurs des variables
rouge, vert et bleu sont comprises entre 0 et 9.
Ligne 39 : dans une variable, nous stockons lexpression utilise comme valeur pour la mthode setRGB() de la ligne 40, qui applique concrtement la couleur loccurrence temoinCouleur. Nous devons en effet obtenir une valeur sous la forme 0x000000.
Bogues ventuels
Dans cette animation, nous devons penser convertir les valeurs dcimales en valeurs hexadcimales, dans le cas contraire, nous ne pouvons effectuer la concatnation de la ligne 39. Par ailleurs, il nous faut une valeur sous la forme 0x000000, soit 6 chiffres. Il est donc indispensable de convertir les chiffres 0 9 en 00 09. Passons prsent la deuxime animation qui nous propose dutiliser la mthode colorTransform() de la classe Transform().
94
Variateur de couleur avec la classe geom.ColorTransform

Comme nous vous le prcisions dans lanimation prcdente, nous allons utiliser une technique qui nest compatible quavec le player 8 de Flash, mais qui prsente lavantage de pouvoir contrler plus prcisment la couleur dune occurrence. En complment cette animation, nous vous invitons consulter celles qui utilisent la mthode getPixel() pour un plus grand matrise de la couleur dans une animation Flash.
Chemin daccs : Interface/ Variateurs /VariateursCouleurF8.a La construction de la scne est identique lanimation prcdente, seules les lignes dinstructions sont diffrentes.
Script
var couleurRouge = 0; var couleurVert = 0; var couleurBleu = 0; var couleurs = ["Rouge", "Vert", "Bleu"]; var limitesDrag = [133, 155, 177]; // import flash.geom.Transform; import flash.geom.ColorTransform; // reglerCouleur = function () { changeCouleur = new Transform(temoinCouleur); nelleCouleur = new ColorTransform(0, 1, 1, 1, couleurRouge, couleurVert, couleurBleu, 0); changeCouleur.colorTransform = nelleCouleur; }; // for (i=0; i<=2; i++) { _root["variateur"+couleurs[i]].sonIndex = i; _root["variateur"+couleurs[i]].onPress = function() { this.startDrag(0, 180, limitesDrag[this.sonIndex], 435, limitesDrag[this.sonIndex]); this.onMouseMove = function() { _root["couleur"+couleurs[this.sonIndex]] = this._x-180; reglerCouleur(); }; };
95
Linterface Partie I
_root["variateur"+couleurs[i]].onRelease = function() { stopDrag(); delete this.onMouseMove; }; }
Analyse
Vous noterez que le script parat plus simple, car nous navons pas besoin de traiter les valeurs obtenues au moment o lutilisateur bouge le variateur (conversion en hexadcimal et test de la longueur du rsultat). En revanche, l o il fallait deux lignes de code
palette = new Color(temoinCouleur); palette.setRGB(couleurAppliquee);
il en faut prsent davantage.

changeCouleur = new Transform(temoinCouleur); nelleCouleur = new ColorTransform(0,1,1,1, couleurRouge, couleurVert, couleurBleu, 0); changeCouleur.colorTransform = nelleCouleur;
Il y a effectivement plus de lignes, mais le contrle dune couleur peut se faire plus prcisment. Cette solution est donc non seulement celle que vous devez utiliser pour garder une compatibilit maximale avec les futures versions de Flash, mais aussi celle retenir si vous devez faire des rglages prcis de couleurs. Pour des personnes qui nont ni lhabitude de programmer, ni lhabitude de manipuler le mode RVB, cette technique savre plus abstraite et plus complexe.
96
5
Les paniers
Ds que vous devez raliser un site marchand proposant de choisir des produits ou services, ds que vous ralisez un jeu dans lequel vous devez collecter des objets, il est ncessaire de faire appel un panier appel aussi caddie. Nous allons donc dcouvrir au travers de ces 3 exemples, quil est trs simple de dvelopper un tel module, mais quil est conseill dutiliser un chier XML.
Panier sous forme de liste

Ds que vous devez grer une liste dachats, il est conseill de stocker ces informations dans un tableau. Mais comment traiter ces donnes pour les modier et les afcher lcran ? Nous allons charger un document XML qui contient la liste des articles de notre magasin virtuel, puis crer un symbole modle qui va tre plac dynamiquement sur la scne en fonction du contenu du chier. Pour mmoriser les choix de lutilisateur, nous allons modier linstance XML. Si vous souhaitez mmoriser dnitivement les quantits commandes sur lordinateur de lutilisateur, utilisez les SharedObject().
Linterface Partie I
Figure 5-1
Ajoutez ou supprimez des articles, naviguez de rayons en rayons, les informations sont mmorises directement en RAM au travers de linstance XML.
Chemin daccs : Interface/Paniers/PanierListe.a La construction de cette animation va se faire dynamiquement, cest--dire que les lignes de textes sont places sur la scne au moyen dun script. Seuls le texte dynamique ayant pour nom de variable vPanier et loccurrence intitule pointeur reprsentant un triangle jaune gauche des rayons du magasin, ont t placs manuellement sur la scne.
Script
Il est gnralement fortement conseill de placer tous les scripts dune animation sur la timeline principale. Dans certains cas, il est plus pratique de placer le code sur la timeline dun symbole. Cest ce que nous avons fait pour cette animation, cela nous a permis dobtenir un code moins difcile comprendre. Un premier document XML contient les donnes suivantes :
<Magasin> <Rayon Nom="Hygine-Beaut"> <Article Ref="010203" Qte="0">Dentifrice X</Article> <Article Ref="034502" Qte="0">Shampoing Y</Article> </Rayon> <Rayon Nom="Alimentaire"> <Article Ref="326784" Qte="0">Gateau X</Article> <Article Ref="196712" Qte="0">Pain Y</Article> <Article Ref="326598" Qte="0">Bonons Z</Article> </Rayon> <Rayon Nom="Textile"> <Article Ref="141718" Qte="0">Pantalon X</Article> <Article Ref="253695" Qte="0">Chemise Y</Article> <Article Ref="878596" Qte="0">Maillot Z</Article>
98
Les paniers Chapitre 5
</Rayon> <Rayon Nom="Droguerie"> <Article Ref="486271" Qte="0">Lessive X</Article> <Article Ref="232125" Qte="0">Papier toilette Y</Article> <Article Ref="340912" Qte="0">Lingettes Z</Article> </Rayon> <Rayon Nom="Fruits et Lgumes"> <Article Ref="989690" Qte="0">Cerises X</Article> <Article Ref="050674" Qte="0">Poires Y</Article> </Rayon> <Rayon Nom="Viande"> <Article Ref="984821" Qte="0">Boeuf X</Article> <Article Ref="147861" Qte="0">Veau Y</Article> <Article Ref="379001" Qte="0">Poulet Z</Article> </Rayon> </Magasin>
Le script de la premire image-cl de lanimation contient le script suivant :

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 var chargementReferentiel = new XML(); chargementReferentiel.load("magasin.xml"); chargementReferentiel.ignoreWhite = true; // chargementReferentiel.onLoad = function() { var nbrRayons = this.childNodes[0].childNodes.length; _global.racine = this.childNodes[0]; for (i=0; i<nbrRayons; i++) { _root.attachMovie("rayon", "btrayon"+i, i); _root["btrayon"+i]._x = 8; _root["btrayon"+i]._y = 30+(i*19); _root["btrayon"+i].nomRayon = racine.childNodes[i].attributes.Nom; _root["btrayon"+i].niveau = i; //Niveau dans l'arbo XML // _root["btrayon"+i].onPress = function() { pointeur._y = this._y; pointeur.swapDepths(1000); vPanier = ""; suppressionAnciensCompteurs(); _global.rayonActuel = this.niveau; for (i=0; i<racine.childNodes[this.niveau].childNodes.length; i++) { vPanier += racine.childNodes[this.niveau].childNodes[i] .firstChild+newline; _root.attachMovie("compteur", "compteur"+i, i+100); _root["compteur"+i]._x = 500; _root["compteur"+i]._y = 40+(i*16.5); _root["compteur"+i].articleActuel = i; _root["compteur"+i].nbrArticles = racine.childNodes[this.niveau] .childNodes[i].attributes.Qte; } }; } };
99
Linterface Partie I
33 // 34 suppressionAnciensCompteurs = function () { 35 for (i=0; i<20; i++) { 36 _root["compteur"+i].removeMovieClip(); 37 } 38 };
Le symbole intitul Selectionneur dont le nom de liaison est compteur contient le script suivant :
1 ajoutArticle.onPress = function() { 2 nbrArticles++; 3 racine.childNodes[rayonActuel].childNodes[articleActuel].attributes.Qte = nbrArticles; 4 }; 5 suppressionArticle.onPress = function() { 6 if (nbrArticles>0) { 7 nbrArticles--; 8 racine.childNodes[rayonActuel].childNodes[articleActuel].attributes.Qte = nbrArticles; 9 } 10 };
Analyse
Le chier XML contient 5 nuds de niveau 1 intituls Rayon, avec un nom dattribut pour chacun : Nom. Un nud enfant de niveau 2 intitul Article contient deux attributs intituls Ref et Qte, ainsi quune valeur. Comme nous vous le prcisions ci-dessus, lanimation contient deux scripts. Voici celui qui se trouve sur limage-cl 1 de lanimation principale. Lignes 1 3 : nous chargeons le contenu du chier XML. Ligne 5 : ce gestionnaire va excuter les lignes quil contient ds que le chargement du chier XML aura t constat. Ligne 6 : dans une premire variable, nous stockons le nombre de nuds de niveau 1. Ligne 7 : nous crons un raccourci pour limiter la longueur de nos lignes dinstructions qui vont devoir parcourir linstance XML. Ligne 8 : nous effectuons une boucle for() qui va nous permettre de crer le menu gauche de notre interface. Lignes 9 11 : sur la scne, nous plaons le symbole dont le nom de liaison est rayon. Il sagit dun simple clip qui contient un rectangle dune couleur identique celle de la marge de gauche de lanimation, ainsi quun texte dynamique intitul nomRayon. Ligne 12 : sur la scne, nous allons placer 6 occurrences, car nous avons 6 nuds de niveau 1. Nous renseignons donc le contenu de la variable voque ci-dessus (ligne 11) en prenant pour valeur, celle des attributs de nos nuds de niveau 1.
100
Ligne 13 : chaque occurrence place sur la scne, nous dnissons une variable qui correspond au numro de nud par rapport linstance XML. Ainsi, loccurrence qui contient le mot Alimentaire stocke le chiffre 1 comme valeur de la variable niveau. Ligne 16 : Nous assignons galement un gestionnaires onPress ces occurrences, an quelles puissent ragir au clic, en afchant les articles (nuds de niveau 2) sur la partie droite de la scne. Ligne 17 : loccurrence qui reprsente le triangle jaune pour indiquer le rayon slectionn, est place au mme emplacement vertical que loccurrence qui sera clique. Ligne 18 : cette ligne ne sert quune seule fois, elle va permettre de placer notre pointeur, le triangle jaune, au premier plan. Ligne 19 : nous vidons la variable vPanier du texte dynamique qui se trouve sur la scne, et qui va contenir la liste des nuds de niveau 2. Ligne 20 : cette fonction est charge de supprimer toutes les occurrences qui auront t cres et places lors dun prcdent clic sur lun des noms de rayons dans la marge du document. Ligne 21 : rappelons que nous sommes en train de commenter les lignes dinstructions qui vont sexcuter lorsque lutilisateur cliquera sur lun des noms de rayons situs dans la marge de gauche. An de pouvoir parcourir les nuds de niveau 2, nous avons besoin de connatre le numro de nud de niveau 1 qui a t cliqu. Nous stockons donc dans une variable, la valeur de la variable que nous avions stocke ligne 13. Ligne 22 : nous effectuons prsent une boucle for() qui va nous permettre de placer dans la variable vPanier (ligne 23), les valeurs des nuds contenus dans celle que nous venons de choisir en cliquant sur un nom de rayon. Lignes 24 26 : nous plaons sur la scne, au-dessus des textes, un clip qui contient un compteur que nous allons dtailler un peu plus loin dans cette explication. Ligne 27 : comme nous lavions fait la ligne 13, nous dnissons une variable pour chaque occurrence place, an de connatre le numro de nud lire lors du clic sur lun des articles gurant dans la liste. Ligne 28 : dans une variable, nous stockons la valeur de lattribut Qte. Ligne 34 : comme nous vous le prcisions la ligne 20, nous crons cette fonction an de pouvoir supprimer les occurrences qui auront t places sur la scne, sur la liste des articles. Analysons prsent le script contenu dans le symbole dont le nom de liaison est compteur. Ligne 1 : ce gestionnaire est charg dincrmenter la variable nbrArticles que nous avions dnie ligne 28 du script principal, mais aussi de changer la valeur de lattribut Qte de notre instance XML qui rside en RAM. Ligne 5 : nous procdons lopration inverse en nous assurant pralablement, que lutilisateur ne commande pas un nombre ngatif darticles.
101
Linterface Partie I
Bogue ventuel
Si vous oubliez dencapsuler la police de caractres que vous utilisez dans le texte dynamique de la variable vPanier, vous risquez dobtenir un dcalage entre les occurrences places dynamiquement et les lignes de texte de la variable vPanier.
Drag & drop

Rendre une occurrence mobile est une technique trs simple. Que vous dplaciez le curseur dun variateur ou une pice de puzzle sur la scne, le code est toujours le mme, seuls les paramtres de la mthode changent. Dans cette animation, le script nest donc pas trs compliqu, mais il met en vidence les lignes dinstructions ncessaires au fonctionnement dune application devant grer la mobilit doccurrences et ses consquences. Dans une deuxime animation, nous grerons un panier plus prcis, mais plus complexe.
Figure 5-2
Glissez-dplacez ces objets sur la scne, un compteur enregistre le nombre doccurrences places sur la zone centrale.
Chemin daccs : Interface/ Paniers /PanierDragDrop.a Les occurrences de cette animation sintitulent lampe, cle, boussole et argent. Elles vont tre rendues mobiles selon deux syntaxes. La premire fait directement rfrence au nom de loccurrence, la deuxime utilise un tableau et une boucle.
102
Dans une telle animation, il est plus simple de placer les occurrences via la commande attachMovie(). La structure du script nest pas habituelle, car nous vous prsentons les deux techniques voques ci-dessus.
Script
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 lampe.onPress = function() { this.startDrag(); }; lampe.onRelease = function() { stopDrag(); if (this.hitTest(zoneDepot)) { this._y = -500; panier++; } }; // var panier = 0; var objets = ["cle", "boussole", "argent"]; // for (i=0; i<=2; i++) { _root[objets[i]].onPress = function() { this.startDrag(); }; _root[objets[i]].onRelease = function() { stopDrag(); if (this.hitTest(zoneDepot)) { this._y = -500; panier++; } }; }
Analyse
Attention
Nous vous proposons dans cette animation, deux mthodes de programmation pour rendre une occurrence mobile. Pour tre plus prcis, nous allons vous prsenter de la ligne 1 10, la mthode pour rendre mobile une seule occurrence. Des lignes 12 26, nous allons utiliser une boucle for(), ainsi quun tableau pour traiter plusieurs occurrences.
Ligne 1 : ce gestionnaire dclare mobile loccurrence clique intitule lampe. Ligne 4 : lorsque lutilisateur relche le bouton de sa souris
103
Linterface Partie I
Ligne 5 : loccurrence nest plus mobile Ligne 6 : et un test vrie si loccurrence que lutilisateur vient de dplacer ne se trouve pas au-dessus de celle qui sintitule zoneDepot. Si tel est le cas, loccurrence lampe est alors sortie de la scne an quelle disparaisse (ligne 7). Nous incrmentons alors la valeur de la variable panier. Ligne 12 : nous initialisons la variable panier an de pouvoir lincrmenter dans nos tests (lignes 6 et 21). Ligne 13 : nous dclarons un tableau qui contient le nom des occurrences que nous allons rendre mobiles au travers de la boucle for(). Ligne 15 : cette boucle va permettre daffecter aux occurrences, deux gestionnaires chargs de les rendre mobiles, et deffectuer un test. Celui-ci consiste vrier si les occurrences sont relches au-dessus de celle qui sintitule zoneDepot.
Bogue ventuel
Vous ne devez pas spcier de nom doccurrence avec la mthode stopDrag().
Drag & drop avec gestion de linventaire

Comme nous lvoquions au dbut de cette tude de cas, voici le deuxime panier qui va grer de faon plus complte le stockage des objets collects.
Figure 5-3
Lorsquun objet est saisi, il faut le placer dans linventaire. Ds que vous approchez le curseur de la souris prs du bord gauche de lcran, un volet arrive sur la scne.
104
Rappel
Il nest possible dutiliser la commande removeMovieClip() qu une seule condition : loccurrence doit avoir t place sur la scne avec les mthodes attachMovie(), duplicateMovieClip() ou createEmptyMovieClip().
Chemin daccs : Interface/ Paniers /PanierDragDrop2.a Comme nous vous lavons expliqu dans lanimation prcdente, les occurrences ont t places sur la scne manuellement, elles ont t nommes lampe, cle, boussole et argent. En plus de celles-ci, nous avons ajout un symbole dont loccurrence est zoneDepot. Voici le script qui se trouve sur la premire image-cl de la timeline principale de lanimation.
Script
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 var var var var var var var // for elementsDansPanier = 0; listePanier = []; objets = ["lampe", "cle", "boussole", "argent"]; posiX = [124, 237, 365, 502]; posiY = [293, 300, 280, 310]; placePanierVide = 30; niveauxObjetsPanier = 100; (i=0; i<=3; i++) { _root.attachMovie(objets[i], objets[i], i); _root[objets[i]]._x = posiX[i]; _root[objets[i]]._y = posiY[i]; _root[objets[i]].onPress = function() { this.startDrag(); }; _root[objets[i]].onRelease = function() { stopDrag(); if (this.hitTest(zoneDepot)) { trace(this._name); _root.zoneDepot.attachMovie(this._name, this._name, niveauxObjetsPanier); _root.zoneDepot[this._name]._y = placePanierVide; _root.zoneDepot[this._name]._xscale = 50; _root.zoneDepot[this._name]._yscale = 50; listePanier.push(this._name); _root.zoneDepot[this._name].onPress = function() { objetSelectionnne = this._name; }; // niveauxObjetsPanier++;
105
Linterface Partie I
30 placePanierVide += 40; 31 elementsDansPanier++; 32 this.removeMovieClip(); 33 } 34 }; 35 } 36 this.onMouseMove = function() { 37 if (this._xmouse<40) { 38 zoneDepot._x = 31; 39 } else { 40 zoneDepot._x = -31; 41 } 42 };
Analyse
Ligne 1 : nous initialisons une premire variable qui va contenir le nombre dobjets rcolts. Un texte dynamique situ sur la scne porte le mme nom de variable, ce qui permettra dafcher le rsultat. Ligne 2 : nous crons un tableau qui va contenir la liste des objets rcolts. Ligne 3 : nous crons un nouveau tableau qui rfrence le nom de toutes les occurrences que nous allons placer sur la scne. Des symboles de la bibliothque portent galement ces mmes noms de liaison. Lignes 4 et 5 : nous dnissons deux autres tableaux qui contiennent les positions horizontales et verticales des occurrences que nous allons devoir placer sur la scne. Lignes 6 et 7 : pour nir, nous initialisons encore deux autres variables qui vont servir placer les objets collects dans la barre dinventaire. placePanierVide dnit la position verticale laquelle doit venir se placer une occurrence collecte. niveauxObjetsPanier va nous servir dnir le niveau auquel doit tre affecte loccurrence place avec la mthode attachMovie(). Ligne 9 : sur la scne, cette boucle for() va placer les quatre occurrences dont les noms gurent dans le tableau objets. Nous aurions pu changer le chiffre 3 par objets.length, mais nous avons souhait rendre le script plus lisible. Lignes 10 12 : sur la scne, nous plaons les symboles dont les noms de liaisons sont spcis dans le tableau objets. Nous aurions pu utiliser la syntaxe suivante pour rsumer ces trois lignes en une seule.
_root.attachMovie(objets[i], objets[i], i, {_x:posiX[i],_y:posiY[i]});
Ligne 13 : chaque occurrence place sur la scne, nous affectons un gestionnaire charg de la rendre mobile. Ligne 16 : ce gestionnaire va permettre de rendre immobile loccurrence lorsque lutilisateur relchera le bouton de sa souris, mais surtout, le test suivant va tre effectu.
106
Ligne 18 : si une occurrence est relche au-dessus de celle qui sintitule zoneDepot, elle est alors dtruite (ligne 32), on incrmente la valeur de la variable elementsDansPanier (ligne 31), et lon replace une nouvelle occurrence du symbole qui vient dtre dtruit dans loccurrence zoneDepot (lignes 20 et 21). Lignes 22 et 23 : on diminue lchelle de loccurrence. Ligne 24 : on ajoute au tableau listePanier, une entre dont le nom est celui de loccurrence qui vient dtre place dans le volet gauche de la scne (zoneDepot). Ligne 25 : on affecte un gestionnaire qui va nouveau rendre cliquable lobjet, une fois quil est dans le volet de gauche. Cest donc partir de cette ligne quil faudrait ajouter dautres lignes dinstructions pour tendre les fonctionnalits dun objet collect. Ligne 30 : nous incrmentons cette variable utilise pour dnir la position verticale des occurrences dans le volet. Lignes 36 41 : ce gestionnaire permet de faire sortir le volet du ct gauche de la scne.
107
6
Les lments de formulaires
Il y a encore quelques mois, il tait dconseill dutiliser les composants de Flash, car ils alourdissaient considrablement le poids des animations. Aujourdhui, le haut dbit nest plus limit une lite ou des professionnels de linformatique, le nombre croissant de foyers connects Internet augmente de jour en jour trs rapidement, nous pouvons donc nous permettre de ne plus trop regarder le poids de nos chiers SWF. Qui na jamais laiss son nom et son adresse e-mail sur un site ? Qui na jamais droul un menu local droulant pour choisir une commande ? Nous allons donc analyser dans cette partie, deux tudes de cas qui proposent des menus droulants, des cases cocher et des boutons radio. Serez-vous la hauteur du QCM qui vous attend ?
Ralisation dun formulaire avec les composants Flash

Il y a quelques mois, les composants de formulaires taient encore dconseills cause de leurs poids. Aujourdhui, le haut dbit se gnralisant, il devient normal que nous les utilisions. Dans notre animation, nous navons pas utilis le composant TextArea, mais plutt un simple texte de saisie pour construire une interface de formulaire classique.
Linterface Partie I
Figure 6-1
Lutilisation des composants prsente lavantage de construire rapidement un formulaire.
Attention
Ne confondez pas addListener() et addEventListener(), ce dernier doit tre utilis pour grer les occurrences de composants de formulaires.
Chemin daccs : Interface/ElementsFormulaires/FormComposantsFlash.a La scne contient de nombreuses occurrences de diffrents types : textes de saisie, composants de types menu droulant , combo box, bouton radio et case cocher. Consultez le chier .a pour connatre les noms doccurrences.
Script
1 2 3 4 5 6 7 8 var listeInfos = []; for (i=0; i<=5; i++) { listeInfos.push(false); } listeInfos[3] = true; // vNom = vPrenom=vDateNaissance=vAdMail=""; //
110
Les lments de formulaires Chapitre 6
9 var professions = ["Choisissez un plat...", "Pizzas", "Gteaux secs sals", "Ptes au fromage", "Gteaux sucrs ou chocolat"]; 10 var signesParticuliers = [false, "Gros mangeur", "Nerveux", "Gros mangeur gourmand", "Gourmand"]; 11 // 12 for (i=0; i<professions.length; i++) { 13 professions_comp.addItem({label:professions[i], data:signesParticuliers[i]}); 14 } 15 // 16 jour_comp.setStyle("selected", false); 17 // 18 professions_comp.rowCount = professions.length; 19 professions_comp.setStyle("themeColor", "haloOrange"); 20 professions_comp.setStyle("color", 0x5E685B); 21 // 22 _global.style.setStyle("color", 0x5E685B); 23 _global.style.setStyle("themeColor", "haloBlue"); 24 _global.style.setStyle("fontSize", 11); 25 // 26 as1_comp.setStyle("color", 0x990000); 27 as1_comp.setStyle("selected", true); 28 // 29 // 30 var surveilMenu = new Object(); 31 surveilMenu.change = function(resultat) { 32 //trace(resultat.target.selectedItem.label); 33 listeInfos[0] = resultat.target.value; 34 //trace(resultat.target.selectedIndex); 35 }; 36 professions_comp.addEventListener("change", surveilMenu); 37 //----------------------------------------------38 var surveilFrequenceUtilisation = new Object(); 39 surveilFrequenceUtilisation.click = function(resultat) { 40 listeInfos[1] = resultat.target.selectedData; 41 for (i in resultat) { 42 trace(i); 43 } 44 //trace(resultat); 45 }; 46 utilisation.addEventListener("click", surveilFrequenceUtilisation); 47 //------------------------------------------------48 var lesUtilisations = ["Timeline", "AS1", "AS2", "Composants"]; 49 var surveilUtilisation = new Object(); 50 surveilUtilisation.click = function(resultat) { 51 elementClique = resultat.target.label; 52 for (i=0; i<lesUtilisations.length; i++) { 53 if (elementClique == lesUtilisations[i]) { 54 placeDansLaListe = i; 55 break; 56 } 57 }
111
Linterface Partie I
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
etatCoche = resultat.target.selected; listeInfos[2+placeDansLaListe] = etatCoche; trace(listeInfos); }; for (i=0; i<lesUtilisations.length; i++) { terme = lesUtilisations[i].toLowerCase()+"_comp"; _root[terme].addEventListener("click", surveilUtilisation); } // btValidation.onPress = function() { etatNom = vNom.length != 0; etatPrenom = vPrenom.length != 0; etatDateNaissance = vDateNaissance.length != 0; longueurDateNaissance = vDateNaissance.length == 10; etatAdMail = vAdMail.length != 0; arobasAdMail = vAdMail.indexOf("@") != -1; contenuPoint1AdMail = vAdMail.substr(vAdMail.length-3, 1) == "."; contenuPoint2AdMail = vAdMail.substr(vAdMail.length-4, 1) == "."; contenuPointAdMail = contenuPoint1AdMail || contenuPoint2AdMail; validiteNuit = listeInfos[0] != false; validiteFreqUtil = listeInfos[1] != false; if (etatNom && etatPrenom && etatDateNaissance && longueurDateNaissance && etatAdMail && arobasAdMail && contenuPointAdMail && validiteNuit && validiteFreqUtil) { var contenuEnvoi = ""; contenuEnvoi = vNom+newline+vPrenom+newline+vDateNaissance+newline +vAdMail+newline; contenuEnvoi += listeInfos[0]+newline+"Utilisation "+listeInfos[1]+" de Flash."; trace(contenuEnvoi); } };
Analyse
Lignes 1 4 : nous crons un tableau qui va contenir des valeurs boolennes, toutes initialises false au dpart. Au fur et mesure que lutilisateur renseignera les champs du formulaire quil doit remplir, nous changerons la valeur de ces entres true. Avant denvoyer le formulaire, nous pourrons le valider en testant si toutes les entres de ce tableau ont pour valeur true. Ligne 5 : ds le dpart, nous initialisons lindex 3 (la quatrime entre) du tableau true. Ligne 7 : nous vidons et initialisons ainsi le contenu des variables vNom, vPrenom, vDateNaissance et vAdMail qui sont celles de textes dynamiques sur la scne. Ligne 9 : nous crons un tableau qui va servir de contenu pour le menu droulant de cette animation. Ligne 10 : nous dnissons un deuxime tableau qui correspondra aux valeurs associes aux choix du menu droulant.
112
Ligne 12 : ce tableau permet de remplir le menu droulant dont le nom doccurrence est professions_comp. Ligne 16 : loccurrence jour_comp a t la premire tre place sur la scne partir dun bouton radio. Cest elle qui est slectionne par dfaut. Nous dnissons son tat de slection false, an quaucun des trois boutons radio de cette animation ne soit coch. Lignes 18 20 : nous congurons lapparence du menu droulant. Lignes 22 24 : nous dnissons prsent le style global utilis pour lensemble des occurrences de composants, lexception du menu droulant que nous venons de dnir pralablement. Lignes 26 27 : nous cochons par dfaut cette case cocher et changeons la couleur du texte.
Remarque
Vous naurez jamais un formulaire avec autant de diffrences de mise en forme, nous lavons simplement fait exprs an que vous dcouvriez des noms de proprits pour les rglages dune occurrence.
Nous allons prsent analyser les lignes dinstructions qui nous permettent de grer le choix de lutilisateur. Ligne 30 : nous crons un objet pour lequel Lignes 31 36 : nous dnissons un gestionnaire charg de surveiller la slection dune commande du menu professions_comp. Lignes 38 45 : nous rptons laction pour les boutons radio en changeant lvnement click la place de change. Prcisons quutilisation est le nom de groupe auquel appartiennent les boutons radio. la ligne 33, nous changeons lindex 1 de notre tableau listeInfos. Lignes 48 61 : nous allons prsent analyser les lignes de code charges de grer les clics sur les cases cocher. Ligne 48 : nous crons une liste qui correspond aux noms des cases cocher. Lignes 49 et 50 : nous crons un objet charg de surveiller la slection de lune des cases cocher. Ligne 51 : nous stockons dans cette variable le nom de la case cocher. Lignes 52 56 : lorsque lutilisateur va cliquer sur lune des cases cocher, la variable placeDansListe va prendre pour valeur le numro dindex du tableau lesUtilisations.
Ligne 58 : la variable etatCoche prend pour valeur true ou false. Ligne 62 : cette boucle for() permet denclencher la surveillance des cases cocher.
113
Linterface Partie I
Ligne 67 : nous avons besoin deffectuer un test, mais nous stockons dans des variables (lignes 65 75) des valeurs boolennes. Toutes doivent renvoyer true an que le test de la ligne 76 permette dexcuter les lignes 77 79. Si vous deviez envoyer les donnes de ce formulaire, vous le feriez la place de la ligne 80.
Ralisation dun QCM

Nous allons vous proposer deux mthodes pour raliser un QCM en Flash. La premire animation utilisera, sur la timeline principale, des images-cls dans lesquelles le contenu va changer. Dans la deuxime animation, nous utiliserons un chier XML, ce qui prsente lavantage dtre plus facile mettre jour. Sortez votre raccourci clavier F6 ! Vous allez en effet crer autant dimages-cls que vous avez de questions. Cette technique prsente lavantage dune construction statique plus visuelle, mais surtout plus contraignante. Si vous avez en effet plus de 6 ou 7 questions, cela va vite devenir rbarbatif de recommencer les mmes manipulations.
Figure 6-2
Tant que vous navez pas slectionn au moins un bouton radio, vous ne pouvez pas continuer la suite du QCM.
Attention
Vous ne devez pas confondre les vnements onPress et click. Pour les occurrences de composants de formulaires, vous devez utiliser le deuxime. Lvnement onClick ne fonctionne pas car il nexiste pas.
114
Chemin daccs : Interface/ElementsFormulaires/FormQCM.a Commencez par crer un cran type avec trois boutons radio dont le nom de groupe est reponses. Chaque occurrence doit ensuite tre congure indpendamment, la copie dcran de la gure 6.3 vous montre la conguration du premier bouton radio.
Figure 6-3
Vous devez slectionner chacun des trois boutons an de les congurer un un. Seul lun des trois possdera la valeur 1 pour la proprit data.
Placez ensuite un texte qui contient la question ainsi que loccurrence du bouton qui validera la rponse, nommez-la btSuite. Programmez prsent limage-cl 1 de lanimation principale.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 stop(); var scoreGlobal = 0; var pointQuestion = -1; // btSuite.onPress = function() { if (pointQuestion != -1) { scoreGlobal += pointQuestion; trace(scoreGlobal); pointQuestion = -1; nextFrame(); } }; // var surveil = new Object(); surveil.click = function(resultat) { pointQuestion = resultat.target.selectedData; }; reponses.addEventListener("click", surveil);
Ce deuxime script est plac sur la dernire image-cl de la timeline, sur lcran o safchera le rsultat.
1 switch (scoreGlobal) { 2 case 0 :
115
Linterface Partie I
4 5 case 6 7 8 case 9 10 11 case 12 13 14 case 15 16 17 case 18 19 }
commentaireResultat = "Aucune bonne rponse, mais bonne nouvelle, les plus grandes bibliothques qui se trouvent en France sont libres d'accs et gratuites. Pourquoi n'iriez-vous pas y faire un tour. On apprend srement des choses trs intressantes"; break; 1: commentaireResultat = "Une bonne rponse sur 5, c'est un bon dbut.\nContinuez sur cette voie"; break; 2: commentaireResultat = "Presque la moyenne, vous avez eu 2 bonnes rponses sur 5 ou aussi fait 3 erreurs sur 5 !!!"; break; 3: commentaireResultat = "Vous avez plus de la moyenne ! Courage, 2 bonnes rponses, vous aviez 5 sur 5 !"; break; 4: commentaireResultat = "L'erreur est humaine !"; break; 5: commentaireResultat = "Parfait, vous avez trouv toutes les bonnes rponses !";
Analyse
Ligne 1 : notre timeline contient plusieurs images-cls, il faut donc bloquer la tte de lecture sur la premire. Ligne 2 : cette variable va stocker le nombre de bonnes rponses. Ligne 3 : cette variable va contenir le point affect chaque rponse de chaque image-cl. Ligne 5 : ce gestionnaire va tre charg : Effectuer un test (ligne 6) pour sassurer quun bouton radio a bien t coch (ligne 16). Grer le score global du questionnaire (ligne 7). Rinitialiser la variable pointQuestion (ligne 9) avant de passer limage suivante (ligne 10). Lignes 14 et 15 : nous crons un objet qui va tre charg de grer les clics sur les boutons radio. Ligne 16 : dans la variable pointQuestion, nous stockons la valeur dnie pour chaque bouton radio dans la proprit data (gure 6-3). Ligne 18 : noubliez pas cette dernire ligne dinstruction qui enclenche la surveillance relative aux clics sur les boutons radio.
116
Analysons prsent le script de la dernire image-cl de lanimation, qui propose dafcher un commentaire en fonction du rsultat. Ligne 1 : plutt que deffectuer un test if(), nous prfrons opter pour une structure de branchement de condition. Lignes 2 4 : si la variable scoreGlobal vaut 0, la ligne 2 va excuter la ligne 3. An de ne pas continuer inutilement la recherche, nous interrompons le test la ligne 4.
Bogue ventuel
Dans une telle application, le plus important est de rinitialiser une variable, pour empcher lutilisateur de passer la question suivante tant quil na pas rpondu celle qui lui est propose.
Ralisation dun QCM avec un chier XML

Voyons prsent comment faire un QCM plus simplement. Non pas dans son dveloppement, mais dans la perspective de ses mises jour Dans cette animation, nous allons opter pour une construction dynamique. Cela signie que nous nallons utiliser quune seule image-cl, quel que soit le nombre de questions contenues dans le chier XML.
Chemin daccs : Interface/ElementsFormulaires/FormQCM2.a Comme dans lanimation prcdente, nous avons trois occurrences de boutons radio qui nont pas t nommes, mais sur une seule image-cl. Nous nutilisons plus la timeline pour lafchage des diffrentes questions sur plusieurs images-cls. Consultez la description du chier de lanimation prcdente pour plus de dtails. Changez le type de texte de la question en texte dynamique et donnez-lui le nom de variable suivant : vQuestion. Nous avons cr un chier XML qui contient six nuds de niveau 1. Les cinq premiers correspondent aux cinq questions de ce questionnaire, leur nom de nud est Question. Ils contiennent tous les cinq un attribut intitul intitule et trois nuds enfants de niveau 2 intituls Reponse. Ces trois nuds enfants possdent une valeur et un attribut intitul point dont la valeur correspond la valeur de la rponse. Le dernier nud de niveau 1 sintitule Commentaires. Il contient des nuds enfants que nous allons afcher sur limage-cl 2 en fonction de la valeur de la variable scoreGlobal.
117
Linterface Partie I
Script
Un premier chier XML intitul qcm.xml contient les donnes suivantes :
1 <QCM> 2 <Question intitule="Lequel de ces hommes n'a pas t prsident de la rpublique ?"> 3 <Reponse point="0">Raymond POINCARE</Reponse> 4 <Reponse point="1">Lon GAMBETTA</Reponse> 5 <Reponse point="0">Alexandre MILLERAND</Reponse> 6 </Question> 7 <Question intitule="Que signifie l'acronyme PIB ?"> 8 <Reponse point="0">Produit International Brut</Reponse> 9 <Reponse point="1">Produit Intrieur Brut</Reponse> 10 <Reponse point="0">Produit Industriel Bnfique</Reponse> 11 </Question> 12 <Question intitule="La Finlande est une..."> 13 <Reponse point="1">Rpublique</Reponse> 14 <Reponse point="0">Monarchie</Reponse> 15 <Reponse point="0">Monarchie parlementaire fdrale</Reponse> 16 </Question> 17 <Question intitule="Quelle est la langue officielle du Brsil ?"> 18 <Reponse point="0">Espagnol</Reponse> 19 <Reponse point="0">Brsilien</Reponse> 20 <Reponse point="1">Portugais</Reponse> 21 </Question> 22 <Question intitule="L'Amour est un fleuve qui se trouve :"> 23 <Reponse point="1">Asie</Reponse> 24 <Reponse point="0">Europe</Reponse> 25 <Reponse point="0">Amrique du nord</Reponse> 26 </Question> 27 <Commentaires> 28 <Commentaire>0 sur 5. Vous ne pourrez que faire mieux la prochaine fois. </Commentaire> 29 <Commentaire>1 sur 5. C'est un bon dbut. Sur Internet, vous trouverez srement les adresses des bibliothques de votre ville.</Commentaire> 30 <Commentaire>2 sur 5. Presque la moyenne.</Commentaire> 31 <Commentaire>3 sur 5. Vous avez la moyenne.</Commentaire> 32 <Commentaire>4 sur 5. L'erreur est humaine.</Commentaire> 33 <Commentaire>5 sur 5. Parfait. No comment.</Commentaire> 34 </Commentaires> 35 </QCM>
Ces donnes reprsentent les questions, rponses et valuations comme les noms lindiquent. Lanimation qui possde, rappelons-le, uniquement deux images-cls, une pour les questions, une autre pour les rponses, contient les deux scripts : Sur limage-cl 1 :
1 2 3 4 5 stop(); var scoreGlobal = 0; var pointQuestion = -1; var questionAafficher = 0; //
118
6 remplirQuestion = function () { 7 vQuestion = questionAafficher+1+". "+chargeQuest.childNodes[0].childNodes [questionAafficher].attributes.intitule; 8 question1_comp.label = chargeQuest.childNodes[0].childNodes[questionAafficher] .childNodes[0].firstChild; 9 question2_comp.label = chargeQuest.childNodes[0].childNodes[questionAafficher] .childNodes[1].firstChild; 10 question3_comp.label = chargeQuest.childNodes[0].childNodes[questionAafficher] .childNodes[2].firstChild; 11 question1_comp.data = chargeQuest.childNodes[0].childNodes[questionAafficher] .childNodes[0].attributes.point; 12 question2_comp.data = chargeQuest.childNodes[0].childNodes[questionAafficher] .childNodes[1].attributes.point; 13 question3_comp.data = chargeQuest.childNodes[0].childNodes[questionAafficher] .childNodes[2].attributes.point; 14 }; 15 chargeQuest = new XML(); 16 chargeQuest.load("qcm.xml"); 17 chargeQuest.ignoreWhite = true; 18 chargeQuest.onLoad = function() { 19 remplirQuestion(); 20 }; 21 // 22 btSuite.onPress = function() { 23 if (pointQuestion != -1) { 24 scoreGlobal += pointQuestion; 25 trace(scoreGlobal); 26 pointQuestion = -1; 27 question1_comp.setStyle("selected", false); 28 question2_comp.setStyle("selected", false); 29 question3_comp.setStyle("selected", false); 30 questionAafficher++; 31 if (questionAafficher<chargeQuest.childNodes[0].childNodes.length-1) { 32 remplirQuestion(); 33 } else { 34 nextFrame(); 35 } 36 } 37 }; 38 // 39 var surveil = new Object(); 40 surveil.click = function(resultat) { 41 pointQuestion = Number(resultat.target.selectedData); 42 }; 43 reponses.addEventListener("click", surveil);
Sur limage-cl 2 :
1 var dernierNoeud = chargeQuest.childNodes[0].childNodes.length-1; 2 commentaireResultat = chargeQuest.childNodes[0].childNodes[dernierNoeud] 3 .childNodes[scoreGlobal].firstChild;
119
Linterface Partie I
Analyse
Ligne 1 : notre timeline contient plusieurs images-cls, il faut donc bloquer la tte de lecture sur la premire. Ligne 2 : cette variable va stocker le nombre de bonnes rponses. Ligne 3 : cette variable va contenir le point affect chaque rponse de chaque image-cl. Ligne 4 : nous nallons pas changer dimage-cl pour afcher les diffrentes questions, nous devons donc stocker dans une variable, le numro de nud utiliser. Ligne 6 : cette fonction va tre charge : Dafcher la nouvelle question de la scne. De changer les textes qui apparaissent droite des boutons radio (lignes 8 10). De changer les valeurs des proprits data associes chaque occurrence de bouton radio (lignes 11 13). Lignes 15 20 : ces lignes assurent le chargement du chier XML qui contient les questions. Ligne 22 : ce gestionnaire va tre charg : Deffectuer un test (ligne 23) pour sassurer quun bouton radio a bien t coch (ligne 41). De grer le score global du questionnaire (ligne 24). De rinitialiser la variable pointQuestion (ligne 26) avant dafcher la question suivante (lignes 30 et 31). la ligne 31, un test vrie sil reste des questions afcher ; dans le cas contraire, la tte de lecture est dplace sur limage-cl 2 qui contient le script des deux lignes prsentes ci-dessus. Ligne 1 : rappelons que vous pouvez ajouter autant de nuds que vous le souhaitez avant le dernier, cest--dire autant de questions. Le commentaire afcher sur limage 2 se trouve donc dans le dernier nud de niveau 1. Nous stockons donc dans une variable le numro du dernier nud. Ligne 2 : nous utilisons la valeur de la variable scoreGlobal pour afcher le nud correspondant.
Bogue ventuel
Il ne sagit pas dun bogue, mais dune approche diffrente que nous aurions pu retenir pour le choix des commentaires. En effet, dans nos deux exemples, nous avons prvu autant de commentaires quil y a de questions. Si nous avions 30 questions, nous aurions pu prvoir quatre commentaires diffrents. Il aurait dans ce cas fallu prvoir quatre tests pour redonner la variable scoreGlobal ou une autre, une valeur comprise entre 0 et 4. De ce fait, seulement 4 nuds enfants de niveau 2 du dernier nud de niveau 1 auraient t sufsants.
120
7
Scroll et panoramiques
Dans de nombreuses applications, il est indispensable dtre capable de dplacer une occurrence sur la scne. Nous nallons pas apprendre dans cette partie dplacer un personnage sur la scne, mais plutt des surfaces plus grandes telles quune photo ou un plan au travers dun masque, un dlement de plusieurs plans pour simuler une profondeur de champs ! Rfrez-vous au chapitre 11 pour le dplacement de personnages ou dobjets.
Scroll vitesse constante

Classique ! La position de la souris qui contrle le dlement horizontal dune occurrence est une des techniques les plus frquentes ! Nous nous devions donc de vous prsenter une telle animation.
Attention
Nous employons exceptionnellement dans cette animation, des procds de dveloppement qui ne sont pas conseills : noms doccurrences avec des espaces et des caractres spciaux. Nous plaons du code lintrieur dun symbole ! Nous avons opt pour cette solution pour limiter le code et lutilisation de tableaux.
Linterface Partie I Figure 7-1

En fonction de la position de la souris, le panorama dle vers la gauche ou la droite.
Chemin daccs : Interface/ScrollsPanneaux/ScrollVitesseConstante.a Une image a donc t place sur la scne, puis transforme en clip. Son nom doccurrence est imageVille. Cette dernire contient des occurrences issues dun mme symbole, qui lui-mme contient un script prsent ci-aprs. An de voir le dlement de limage dans une zone restreinte en largeur, nous avons utilis un masque. Le nom de son occurrence est tout simplement masque. Le script suivant peut donc vous paratre simple, mais rappelons que le code qui permet dafcher le nom des lieux survols sur limage se trouve dans le symbole CadreBlanc.
Script
1 imageVille.setMask(masque); 2 this.onEnterFrame = function() { 3 if (this._xmouse>175 && this._xmouse<225 && imageVille._x<518) { 4 imageVille._x += 3; 5 } 6 if (this._xmouse>375 && this._xmouse<425 && imageVille._x>81) { 7 imageVille._x -= 3; 8 } 9 };
122
Scroll et panoramiques Chapitre 7
Analyse
Ligne 1 : nous commenons par masquer le contour de notre image an quelle ne soit visible quau centre de la scne. Ligne 2 : ce gestionnaire va excuter en continu le test qui permet de dplacer limage panoramique de notre animation lorsque la souris est sur les cts du cadre central, et de contrler si elle ne va pas trop loin gauche ou droite de la scne.
Dplacement dun point un autre dans un plan panoramique

Pour la ralisation de ce type de panoramique, il existe deux techniques. Un clic sur une zone dplace un rectangle de slection qui fait alors dler limage principale de grande taille. Vous dplacez un rectangle de slection sur une reprsentation miniature de limage visualiser plus grande chelle dans une autre partie de linterface. Quelles que soient les animations, toutes deux utilisent des techniques trs rpandues.
Figure 7-2
Dans la frise du bas, vous pouvez directement cliquer diffrents endroits, ou vous pouvez galement dplacer le cadre blanc en le saisissant et en le dplaant.
123
Linterface Partie I
Description des chiers

Interface/ ScrollsPanneaux /ScrollDeplacements.a
Interface/ ScrollsPanneaux /ScrollDeplacements2.a Les deux animations contiennent toutes les deux les occurrences suivantes : grandeFrise : la grande image du haut ; petiteFrise : la petite image du bas ; leMasque : le rectangle aux dimensions correspondant la taille de la grande image telle quon la voit sur la gure 7-2. cadreFrise : le rectangle qui va se dplacer tout seul par glissement lors du clic sur la petite frise, ou en le faisant glisser de gauche droite. Le script est ensuite trs court et trs simple, il faut juste connatre les dimensions de toutes ces occurrences que nous venons dnoncer, car des calculs sont ncessaires.
Script
Exceptionnellement, nous avons laiss des lignes de commentaires, car des explications sur les calculs des coefcients et limites sont ncessaires. Nous y revenons tout de mme dans lanalyse du script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 grandeFrise.setMask(leMasque); // petiteFrise.onPress = function() { destinationX = _root._xmouse-50.4; this.onEnterFrame = function() { if (cadreFrise._x<=475 && cadreFrise._x>=25) { cadreFrise._x += (destinationX-cadreFrise._x)*0.1; // grandeFrise._x += (((destinationX)*-5.454)-grandeFrise._x)*0.1; grandeFrise._x = ((cadreFrise._x-25)*-5.444)+25; // 5.44 = 2450/450 // 2450 = 3000-550 (Dplacement grande frise) // 450 = 475-25 (Dplacement petite frise) if(Math.abs(destinationX-cadreFrise._x)<1) delete this.onEnterFrame } if (cadreFrise._x>475) { cadreFrise._x = 475; grandeFrise._x = -2425; } if (cadreFrise._x<25) { cadreFrise._x = 25; grandeFrise._x = 25; } }; };
124
Panoramique dplacement par glisser-dplacer dune zone de slection :

1 2 3 4 5 6 7 8 9 10 11 12 grandeFrise.setMask(leMasque); // cadreFrise.onPress = function() { this.startDrag(0, 25, 343.6, 475, 343.6); cadreFrise.onMouseMove = function() { grandeFrise._x = ((cadreFrise._x-25)*-5.444)+25; }; }; cadreFrise.onRelease = cadreFrise.onReleaseOutside=function () { stopDrag(); delete cadreFrise.onMouseMove; };
Analyse
Commenons par lanalyse du premier script. Ligne 1 : nous masquons limage en dehors de la zone correspondant la surface de loccurrence intitule leMasque. Ligne 3 : ce gestionnaire va permettre de lancer le dlement horizontal du cadre qui se trouve sur la petite frise. Ligne 4 : lorsque vous cliquez sur la petite frise, une variable stocke un point sur lequel doit venir se placer le cadre. Ligne 5 : ce gestionnaire va permettre dexcuter en continu un test qui sassure que le cadre nest pas envoy trop loin (ligne 6), cest--dire avant ou aprs la petite frise. Il excute galement le dlement de la grande frise (ligne 9) ainsi que celui du petit cadre (ligne 7). Ligne 13 : si le cadre est arriv son point de destination (ligne 4), nous dtruisons le traitement qui assure le dplacement de la grande frise et du cadre (ligne 5). Lignes 15 22 : si le cadre dpasse ses limites, nous le recalons prcisment ainsi que la grande frise. Comme vous pouvez le constater, le script est simple, mais le plus difcile est de calculer les bons coefcients et rapports entre la grande et la petite image. La valeur 2450 rsulte du calcul suivant : largeur de la grande frise moins la largeur de la zone dans laquelle elle est visible. La valeur 450 rsulte du calcul suivant : largeur de la zone dans laquelle le cadre peut bouger moins la largeur du cadre. La valeur 5.4 rsulte du calcul suivant : largeur de la zone de dlement de la grande image par rapport celle de la petite.
125
Linterface Partie I
Analysons prsent le deuxime script. Ligne 1 : nous masquons limage en dehors de la zone correspondant la surface de loccurrence intitule leMasque. Ligne 3 : lorsque lutilisateur va cliquer sur le cadre Ligne 4 : loccurrence du cadre va tre rendue mobile, mais contrainte se dplacer sur un axe prcis. Du 25e pixel du bord gauche de la scne au 475e. Ligne 5 : ce gestionnaire assure le dlement de la grande frise (ligne 6) lorsque lutilisateur bouge sa souris. Ligne 9 : si lutilisateur relche le bouton de sa souris, nous devons annuler lexcution du gestionnaire de la ligne 5 et arrter la mobilit du petit cadre.
Dlement de plusieurs plans

Cette tude de cas est intressante, car elle propose une simulation de dplacement avec une certaine profondeur, donnant ainsi une sensation proche de la ralit. Cette technique est trs utilise pour les jeux o un personnage doit se dplacer de gauche droite de lcran, alors quun dcor en fond ne bouge pas la mme vitesse.
Figure 7-3
Cette image est compose de trois occurrences qui ne se dplacent pas toutes la mme vitesse de gauche droite : le premier plan, les champs avec les arbres, et les nuages.
126
Chemin daccs : Interface/ ScrollsPanneaux /ScrollDelement.a Lanimation ne contient que trois occurrences intitules nuages, bois et herbes. Toutes les trois sont trs larges et dpassent amplement de la scne. Ce script est trs court et trs simple car il utilise les coordonnes de la souris et uniquement 3 lignes dinstructions. Plus la souris est sur les cts de la scne, plus le dlement sera rapide.
Script
1 nuages.onEnterFrame = function() { 2 decalSouris = 300-_root._xmouse; 3 if (_root._xmouse>0 && _root._xmouse<200 && bois._x<595) { 4 this._x += decalSouris/300; 5 bois._x += decalSouris/120; 6 herbes._x += decalSouris/60; 7 } 8 if (_root._xmouse>400 && _root._xmouse<600 && bois._x>5) { 9 this._x += decalSouris/300; 10 bois._x += decalSouris/120; 11 herbes._x += decalSouris/60; 12 } 13 };
Analyse
Ligne 1 : le gestionnaire onEnterFrame va permettre dexcuter en continu les lignes dinstructions quil contient. Ligne 2 : dans une variable, nous stockons la distance qui spare le curseur de la souris du centre de la scne. Lignes 3 7 : ce test permet de vrier si la souris se trouve dans la partie gauche de lanimation, an de faire dler les trois occurrences vers la droite (lignes 4 6). Vous noterez que les nuages vont se dcaler au plus vite de 1 pixel si le curseur se trouve sur le bord gauche ou droit de la scne. Lignes 8 12 : comparables aux lignes prcdentes 3 7, ce test assure le dlement des occurrences vers la gauche.
127
8
Les transitions
Il est encore rare de voir des animations o le changement dimage se fait en fondu ! Et pourtant, cest la transition la plus simple que nous vous proposons dans cette partie. Nous nous sommes arrts au fondu, mais il serait trs simple dadapter le code propos pour changer la transition : _y la place de la proprit _alpha, et vous obtenez un volet. Savez-vous que depuis Flash MX 2004, il est possible dutiliser la classe TransitionManager() pour grer des transitions dans une animation ? Nous allons vous proposer une animation qui utilise cette technique, le code est un peu complexe pour un nophyte, mais il est assez court.
Transition entre deux images

Pour visualiser les photos de notre animation avec une transition, nous allons utiliser lActionScript, et non les images de la timeline. Il est important de prciser que nous avons utilis la classe MovieClipLoader() an de grer plus facilement le chargement des images. Cette technique est plus contraignante et semble moins abordable que la mthode loadMovie(), mais cest une question dhabitude facile changer.

La navigation se fait simplement, par deux boutons qui deviennent transparents sils ne sont plus actifs.
Chemin daccs : Interface/Transitions/TransitionsImages.a Sur la scne, nous avons dispos 3 occurrences intitules btPrecedente, btSuivante et cadreChargement. Les deux premires correspondent aux boutons pour contrler le diaporama, alors que la dernire est celle qui va contenir les photos charges avec loadClip().
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 chargeurImages = new MovieClipLoader(); //Coeur du code chargeurImages.onLoadComplete = function() { //Coeur du code cadreChargement.onEnterFrame = function() { this._alpha += 5; if (this._alpha>=100) { delete this.onEnterFrame; } }; }; //Coeur du code // btPrecedente.enabled = false; btPrecedente._alpha = 30; // var numeroImage = 0; //
130
Les transitions Chapitre 8
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
btSuivante.onPress = function() { numeroImage++; verifierLimites(); cadreChargement._alpha = 0; chargeurImages.loadClip("images/img"+numeroImage+".jpg", cadreChargement); //Coeur du code }; // btPrecedente.onPress = function() { numeroImage--; verifierLimites(); cadreChargement._alpha = 0; chargeurImages.loadClip("images/img"+numeroImage+".jpg", cadreChargement); }; // verifierLimites = function () { if (numeroImage>=6) { btSuivante.enabled = false; btSuivante._alpha = 30; } else { btSuivante.enabled = true; btSuivante._alpha = 100; } // if (numeroImage<=1) { btPrecedente.enabled = false; btPrecedente._alpha = 30; } else { btPrecedente.enabled = true; btPrecedente._alpha = 100; } };
Analyse
Ligne 1 : nous crons une instance de la classe MovieClipLoader() an de grer le chargement des images de notre diaporama. Ligne 3 : ce gestionnaire permet dexcuter les lignes dinstructions quil contient, lorsque le chargement demand aux lignes 23 et 31 est termin. Ligne 5 : lorsque lutilisateur demande le chargement dune image en cliquant sur le bouton Suivante ou Prcdente, loccurrence qui va recevoir limage est rendue transparente 100 % (lignes 22 et 30). Ce gestionnaire va donc permettre de rendre peu peu cette occurrence opaque (ligne 6). Ligne 7 : si loccurrence est 100 % de son opacit, le gestionnaire onEnterFrame est annul.
131
Linterface Partie I
Lignes 14 et 15 : nous dsactivons le bouton Prcdente en le rendant non cliquable et lgrement transparent pour donner limpression quil nest pas utilisable. Ligne 17 : cette ligne va stocker le numro dimage qui va tre demand par le chargement. La valeur de cette variable va sincrmenter chaque demande de lecture de limage suivante. Lignes 19 25 : gestionnaire associ loccurrence, qui va permettre de visualiser limage suivante. Nous commenons par incrmenter le numro dimage charger (ligne 20), puis nous vrions que le numro demand nexcde pas la limite des images disponibles. Lorsque toutes ces instructions sont excutes, nous demandons le chargement de limage (ligne 31). Lignes 27 32 : chargement des images dj vues. Lignes 34 50 : si la dernire image est afche, nous rendons lgrement transparent le bouton Suivante (ligne 37) et nous le dsactivons (ligne 36).
Bogue ventuel
Pour un diaporama, il est important de grer ltat inactif dun bouton lorsquil ny a plus dimages afcher. Le rle des lignes 14, 36 et 44 est donc capital pour viter le bogue dun chargement sans rsultat.
Transition au chargement dune animation

La technique de ltude de cas prcdente pourrait sappliquer au chargement dune animation. Si vous la trouvez trop complexe, voici une autre mthode pour appliquer une transition entre deux images, ou deux crans. Lavantage de cette technique est de pouvoir construire visuellement une interface de faon statique.
Chemin daccs : Interface/Transitions/TransitionsChargeAnim.a Nous avons cr trois animations que nous avons transformes en chiers .swf. Elles contiennent seulement une image et un titre. Par ailleurs, nous avons construit une autre animation qui va charger les trois premires. Elle contient un script de 9 lignes !
132
Script
Voici le script se trouvant sur la premire image-cl de la timeline principale qui excute le chargement des trois autres chiers .swf.
1 2 3 4 5 6 7 8 9 bt1.onPress = function() { loadMovieNum("animation1.swf", 1); }; bt2.onPress = function() { loadMovieNum("animation2.swf", 1); }; bt3.onPress = function() { loadMovieNum("animation3.swf", 1); };
La premire image-cl de la timeline principale des trois animations charges doit contenir le script suivant :
1 this._alpha = 0; 2 this.onEnterFrame = function() { 3 this._alpha += 3; 4 if (this._alpha>=100) { 5 this._alpha = 100; 6 delete this.onEnterFrame; 7 } 8 };
Analyse
Script de lanimation principale : trois gestionnaires demandent simplement le chargement danimations (.swf) au niveau 1. Script plac sur la premire image-cl de chaque animation charge : Ligne 1 : lanimation est rendue transparente ds la n du chargement, avant que lafchage ne se fasse. Ligne 2 : ce gestionnaire va rendre lanimation de plus en plus opaque. Le mot-cl this fait rfrence dans ce cas lanimation dans son intgralit.
Remarque
Si vous nencapsulez pas la description des caractres dun texte dynamique ou de saisie, la transparence ne sera pas valable (pour le texte uniquement).
133
Linterface Partie I
Transition en utilisant la classe TransitionManager()

Cette technique de transition nest pas uniquement valable dans Flash 8, elle lest depuis le player Flash 6 (6.0.79.0 pour tre plus prcis). Il vous suft dimporter deux classes et dcrire une ligne dinstruction. Pour raliser une telle transition, il existe deux syntaxes vraiment diffrentes lune de lautre, et qui prsentent chacune des avantages et des inconvnients. Dans les deux cas, vous devez importer les classes des transitions et deffets.
import mx.transitions.*; import mx.transitions.easing.*;
Si vous nimportez pas ces classes, vous avez alors la possibilit dy faire directement rfrence dans la ligne dinstruction faisant appel aux mthodes start() ou startTransition(), mais elles sont plus longues. Nous reviendrons sur cette solution la n de cette explication. Mthode 1 : utilisation de la mthode start() dans laquelle on prcise le nom de loccurrence afcher avec une transition. Lorsque les classes sont importes sur la mme image, on peut ajouter autant de lignes dinstructions contenant la mthode start() que lon souhaite. En revanche, dune image lautre, il est indispensable de r-importer ces classes pour refaire une transition.
TransitionManager.start(balle, {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:4});
Mthode 2 : utilisation de la mthode startTransition() dans laquelle on ne prcise pas le nom de loccurrence afcher avec une transition. Vous devez pralablement instancier la classe TransitionManager().
maTransition:TransitionManager = new TransitionManager(balle); maTransition.startTransition({type:Zoom, direction:Transition.OUT, duration:3, easing:Bounce.easeOut});
Vous noterez quil a fallu passer par linstanciation dune classe, cela nest peut-tre pas pratique si vous devez traiter plusieurs occurrences la fois. Comme nous lvoquions ci-dessus, si vous ne souhaitez pas importer les classes, voici quoi peut ressembler une ligne dinstruction.
mx.transitions.TransitionManager.start(myMovieClip_mc, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.IN, duration:1, easing:mx.transitions .easing.Bounce.easeOut});
134
Chemin daccs : Interface/Transitions/TransitionsImageTween.a Dans cette animation, nous avons opt pour un chargement des images directement dans le chier. Nous utilisons galement des images-cls au lieu dun script de chargement dynamique. Nous avons souhait opter pour cette solution an que le peu de code prsent dans cette animation soit celui des transitions. Nous plaons donc la commande stop() sur la premire image-cl de la timeline principale, puis nous faisons appel nos lignes de code.
Astuce
Nous avons plac dans le dossier Interface/Transitions, un chier .swf intitul PaletteYazo.swf que vous pouvez copier dans le dossier suivant : Sous Windows : C:\Documents and Settings\nomdevotresession\Local Settings\Application Data\Macromedia\Flash 8\fr\Conguration\WindowSWF. Sous Mac : votre ordinateur/disquedur/Utilisateurs/nomutilisateur/Bibliothque/Application Support/Macromedia/Flash 8/fr/Conguration/WindowSWF. Il sagit dune animation qui vous permettra de visualiser les diffrentes transitions possibles ainsi que les effets qui les accompagnent. Pensez simplement afcher cette palette via la commande Fentre>Autres panneaux, et lamarrer la palette Proprit.
Script
Nous avons plac plusieurs lignes de transitions sur les diffrentes images-cls de lanimation, ouvrez cette dernire pour en avoir un aperu.
1 2 3 4 5 6 7 stop(); this.onMouseDown = function() { nextFrame(); }; import mx.transitions.*; import mx.transitions.easing.*; TransitionManager.start(visuel1_inst, {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:4});
Analyse
Nous navons pas voulu compliquer davantage le code de cette animation, de ce fait, nous avons opt pour une disposition des images sur la timeline. Si vous souhaitez rendre le diaporama dynamique, servez-vous de lanimation utilise pour traiter des transitions entre deux images. Ligne 1 : nous bloquons la tte de lecture de lanimation car elle contient plusieurs imagescls.
135
Linterface Partie I
Ligne 2 : nous dnissons le gestionnaire onMouseDown an que lanimation sache ce quelle doit faire lorsque lutilisateur clique sur la scne. Dans notre exemple, il sagit de notre systme de navigation linaire. Nous aurions pu ajouter un test sur la dernire image-cl de lanimation pour renvoyer la tte de lecture sur la premire image-cl de lanimation. Lignes 5 et 6 : an de pouvoir excuter notre transition, nous avons besoin dimporter les packages de ces deux classes. Lignes 7 : cette ligne dinstruction va cibler loccurrence sur laquelle doit se faire la transition (visuel1_inst), puis nous indiquons le type de transition (Fly).
Bogues ventuels
Si vous avez des bogues dans une telle animation, assurez-vous que vous avez bien import les packages et renseign correctement les paramtres attendus.
136
9
Constructions dynamiques dinterfaces
Nous avons dj eu loccasion de lvoquer de nombreuses reprises depuis le dbut de ce livre, vous devez essayer de dvelopper des animations faciles mettre jour, faisant appel au XML, dont la construction se fait au moment de la lecture de lanimation, cest-dire lexcution du chier .swf. Une seule solution, la construction dynamique ! Comment procder ? Il existe de nombreuses techniques, mais elles sappuient gnralement toutes sur les mmes mthodes : LoadVars(), loadMovie(), loadClip(), load(), attachMovie(), duplicateMovieClip(), removeMovieClip() Toutes ces mthodes de classes permettent de charger au moment de lexcution des chiers, des donnes qui ne se trouvent pas dans la bibliothque de lanimation.
Placement dynamique de symboles sur la scne

La premire animation de ce chapitre est trs intressante, mais surtout trs importante. Nous allons en effet dcouvrir que le placement dun symbole sur la scne ne se fait pas obligatoirement au moment de la construction de lanimation au moyen de la timeline, du scnario et de la scne, mais aussi avec lActionScript.

Cliquez sur une case puis sur une des formes (tuyaux) de la palette du bas de lcran. Cliquez sur une forme place sur la grille pour la faire tourner.
Rappel
La boucle imbrique est une des meilleures solutions pour crer un quadrillage, cest--dire la cration rpte de lignes et de colonnes. Une ligne est obtenue par la cration rpte de cases (occurrences) places cte cte. Les lignes sont alors elles-mmes cres de faon rptitive.
Chemin daccs : Interface/ConstructionDynamique/DynPlaceSymbole.a Lanimation possde dj de nombreuses occurrences sur la scne, mais seules deux dentre elles sont importantes, cadreSelection et palette. Cette dernire contient dailleurs 4 autres occurrences intitules pieceCroisement, pieceCoude, pieceDroite et pieceT. Nous avons plac les formes disposer sur la grille dans une palette, an quelles puissent tre dplaces pour faciliter les clics sur ces pices.
Script
1 2 3 4 5 var var var // for typesDeCases = ["coude", "croisement", "t", "droit"]; caseActive = false; ex = 0; (i=0; i<=11; i++) {
138
Constructions dynamiques dinterfaces Chapitre 9
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
for (j=0; j<=6; j++) { ex++; quelleCase = typesDeCases[random(4)]; _root.attachMovie("caseVide", "case"+ex, ex); _root["case"+ex]._x = 80+i*40; _root["case"+ex]._y = 80+j*40; _root["case"+ex].onPress = function() { caseActive = true; profondeur = this.getDepth(); placeX = cadreSelection._x=this._x; placeY = cadreSelection._y=this._y; }; } } cadreSelection.swapDepths(1000); // placerPiece = function (nomLiaison) { if (caseActive) { piece = _root.attachMovie(nomLiaison, "case"+profondeur, profondeur); piece._x = placeX; piece._y = placeY; piece.onPress = function() { this._rotation += 90; }; cadreSelection._x = -40; cadreSelection._y = -40; } }; palette.pieceT.onPress = function() { placerPiece("t"); }; palette.pieceCoude.onPress = function() { placerPiece("coude"); }; palette.pieceCroisement.onPress = function() { placerPiece("croisement"); }; palette.pieceDroite.onPress = function() { placerPiece("droit"); }; // palette.swapDepths(1001); palette.poignee.onPress = function() { _root.palette.startDrag(); }; palette.poignee.onRelease = palette.poignee.onReleaseOutside=function () { stopDrag(); };
139
Linterface Partie I
Analyse
Ligne 2 : cette variable va nous permettre de ne placer un symbole sur la grille qu partir du moment o lutilisateur aura cliqu sur une case. Ligne 3 : au moment de la construction du quadrillage, pour chaque occurrence place sur la scne, nous allons avoir besoin dune valeur qui va nous servir de niveau et de sufxe pour lui donner un nom par concatnation. Lignes 5 et 6 : nous allons prsent crer le quadrillage sur la scne. Nous avons donc besoin dexcuter deux boucles imbriques an de crer 7 lignes de 12 cases. Ligne 7 : nous incrmentons cette variable, an de changer de valeur et dnir le niveau et le nom de chaque occurrence. Lignes 9 11 : pour la cration du tableau, le symbole qui reprsente une case porte le nom de liaison caseVide.
Remarque
Rappelons que vous pouvez utiliser la syntaxe ci-dessous pour passer de 3 1 ligne dinstruction.
_root.attachMovie("caseVide", "case"+ex, ex,{_x:80+i*40,_y:80+j*40});
Ligne 12 : pour chaque case pose sur la scne, nous dnissons un gestionnaire qui va tre charg de : placer un cadre rouge pour indiquer lemplacement de la prochaine pice dposer sur le quadrillage (lignes 15 et 16) ; changer la valeur de la variable caseActive pour prciser quun clic sur lune des formes de la palette de tuyaux peut dclencher son positionnement (ligne 13) ; mmoriser lemplacement de la case slectionne (lignes 15 et 16). Ligne 20 : la construction de cette animation se fait en deux temps. Nous avons intgr des occurrences sur la scne telles que le cadre rouge et nous programmons ensuite des instructions qui vont tre charges de construire le tableau. Ces dernires vont donc possder des niveaux suprieurs celui du cadre rouge. Nous devons donc replacer ce dernier au-dessus du quadrillage en utilisant la mthode swapDepths() avec une valeur leve. Ligne 22 : cette fonction va assurer le placement dun des quatre symboles dont les noms de liaisons sont t, coude, croisement et droit. Ligne 23 : nous testons dabord si lutilisateur a cliqu sur lune des cases du quadrillage. Lignes 24 26 : si tel est le cas, nous plaons lun des quatre symboles sur la scne. Son nom de liaison est prcis comme paramtre de la fonction (ligne 20 : nomLiaison).
140
Lignes 27 29 : pour chaque pice de tuyau place sur le quadrillage, nous dnissons un gestionnaire charg de faire tourner loccurrence de 90. Lignes 30 et 31 : nous sortons galement le cadre rouge de la scne. Lignes 34 45 : ces 4 gestionnaires vont permettre dappeler la fonction charge de placer les symboles sur la scne. Rappelons que nous avons regroup les quatre boutons pieceT, pieceCoude, pieceCroisement et pieceDroite dans un clip dont une occurrence gure sur la scne sous le nom palette. Ligne 47 : an que la palette des formes (tuyaux) se trouve au-dessus du quadrillage, nous la changeons de niveau comme nous lavons prcdemment fait avec le cadre rouge (ligne 20). Lignes 48 53 : ces gestionnaires permettent uniquement de rendre la palette transparente. Voil, lintrt du jeu est plutt limit, nous ne gagnons rien rejoindre les deux extrmits dj prsentes sur la scne, vous donc dimaginer la suite et n de ce jeu.
Bogue ventuel
Lorsque vous ralisez un quadrillage, vous devez toujours garder lesprit la ncessit dutiliser une variable qui va servir de niveau et de sufxe de nom doccurrence (lignes 3, 7 et 9).
Travailler avec le nom des occurrences

Cette animation est assez paradoxale pour tre place dans ce chapitre concernant la construction dynamique dune interface, mais elle reste trs pratique pour grer des informations propres chaque occurrence. Notons tout de mme que nous aurions pu placer et nommer ces occurrences dynamiquement dans notre exemple, mais nous avons prfr avoir une approche diffrente. Lintgrateur Flash qui possde un tel symbole (le smiley) dans la bibliothque, na pas se soucier de la programmation des occurrences quil va obtenir sur la scne. Nous vous dconseillerons toujours de placer du code en dehors des images-cls de votre animation ou dun chier .as, mais dans certains cas, rappelons que cela est autoris pour crer des symboles modles ! Dans notre exemple, lintgrateur Flash va placer un symbole sur la scne et donner un nom loccurrence obtenue, en commenant par les lettres be, rg ou jn et en nissant par un nombre deux chiffres. Nous reviendrons sur cette raison dans les explications de cette animation.
141

Lorsque lutilisateur dplace ces smileys, les couleurs et les textes associs (le nom et lge) proviennent des noms doccurrences.
Chemin daccs : Interface/ConstructionDynamique /DynNomOccurrences.a Sur la scne, nous avons plac 6 occurrences issues du mme symbole, et nous les avons nommes jnEmile66, beChristophe35, rgDavid35, jnRaymonde45, beVanessa32, rgMarjorie28. Le symbole principal de lanimation, intitul Personnage, contient une occurrence intitule fondVisage : il sagit dun simple rond gris dont nous allons changer la couleur lexcution de lanimation.
Script
1 var codesCouleurs = ["rg", "jn", "vr", "bl", "be"]; 2 var valeursCouleurs = ["FF0000", "FFFF00", "00FF00", "FFFFFF", "6666FF"];
Voici prsent le code contenu sur la premire image-cl de la timeline du symbole intitul Personnage.
1 2 3 4 5 6 7 8 9 10 11 var codeCouleur = this._name.substring(0, 2); for (i=0; i<=_parent.codesCouleurs.length; i++) { if (codeCouleur == _parent.codesCouleurs[i]) { couleurAappliquer = _parent.valeursCouleurs[i]; break; } } // var couleurPersonnage = new Color(fondVisage); couleurPersonnage.setRGB("0x"+couleurAappliquer); //
142
12 13 14 15 16 17 18 19 20 21 22 23 24 25
this.onPress = function() { this.startDrag(); agePersonnage = this._name.substr(this._name.length-2, this._name.length-4); }; this.onRelease = this.onReleaseOutside=function () { stopDrag(); agePersonnage = ""; }; this.onRollOver = function() { nomPersonnage = this._name.substr(2, this._name.length-4); }; this.onRollOut = function() { nomPersonnage = ""; };
Analyse
Commenons par dcrire les deux lignes qui se trouvent sur limage 1 de la timeline de lanimation. Ligne 1 : nous crons un tableau qui va contenir la liste des prxes disponibles pour nommer une occurrence. Ligne 2 : le deuxime tableau correspondant est en corrlation directe avec le premier. Il va nous servir dnir une couleur pour chaque occurrence en fonction de la paire de lettres qui lui sera affecte. Passons prsent au deuxime script, celui qui se trouve sur la premire image-cl de la timeline du clip reprsentant nos petits smileys. Avant de commencer notre analyse, rappelons et prcisons que le mot-cl this, fait rfrence loccurrence qui contient ce script. Ligne 1 : nous stockons dans la variable codeCouleur les deux premiers caractres du nom de loccurrence. Lignes 2 et 3 : cette boucle for() va permettre de savoir si la valeur de la variable de la ligne prcdente se trouve dans le tableau codeCouleurs. Si lintgrateur de lanimation Flash a respect la composition du nom dune occurrence comme nous vous lavons prsent, ses deux premire lettres doivent se trouver dans le tableau. Au moment o le test renvoie la valeur true, celle de i vaut une autre valeur, on peut alors lutiliser pour lire lentre correspondante dans le tableau valeursCouleurs. Ligne 4 : dans une nouvelle variable, nous stockons un code couleur que nous allons appliquer cette occurrence. Lignes 9 et 10 : maintenant que nous savons quelle couleur utiliser, nous instancions la classe Color() (ligne 9) avant de lappliquer (ligne 10). Ligne 12 : lorsque lutilisateur clique sur une occurrence, elle est rendue mobile, et lge safche dans un texte situ sous loccurrence. Ligne 16 : lorsquil la relche, elle nest plus mobile et lge disparat.
143
Linterface Partie I
Ligne 20 : quand le curseur de la souris survole cette occurrence, son nom safche dans un champ texte plac en dessous. Ligne 23 : si le curseur ne se trouve plus sur loccurrence, il faut alors vider le texte qui contient son nom. Comme vous laurez compris, le nom qui est donn loccurrence joue un rle trs important dans cette animation. Nous parcourons le nom pour en extraire, lge, la couleur et le nom. Il est important que vous testiez cette animation si vous ne comprenez pas les explications.
Bogues ventuels
Gardez toujours lesprit que le premier caractre dune chane porte lindex 0 (lignes 1, 14 et 21). Par ailleurs, noubliez pas que le tableau codeCouleurs se trouve sur la scne alors que ce script se trouve dans toutes les occurrences de la scne. Vous devez donc utiliser la proprit globale _parent pour cibler correctement le tableau partir de la timeline du clip.
Utilisation de chiers XML

Cette animation est srement lune des plus importantes de ce livre, car nous allons apprendre utiliser le XML pour construire dynamiquement une interface.
Figure 9-3
Tous les lments qui se trouvent sur la scne sont placs dynamiquement partir de donnes charges dun chier XML.
144
Chemin daccs : Interface/ ConstructionDynamique /DynXML.a Nous aurions pu partir dune scne rellement vide, mais nous avons voulu limiter le code. Nous avons donc plac en haut gauche de la scne, une occurrence intitule cadrePhoto. Il sagit dune simple forme reprsentant deux droites perpendiculaires peine visibles. Elle vont servir de rcepteur pour les images charges dynamiquement. Nous aurions pu simplement nous passer de cette occurrence en ajoutant la ligne dinstruction suivante :
_root.createEmptyMovieClip("cadrePhoto",1);
Nous avons aussi plac un texte dont le nom doccurrence est texteAccueil, pour indiquer lutilisateur ce quil doit faire au lancement de lanimation : cliquer sur la scne.
Script
Un premier chier XML intitul cartes.xml contient les donnes suivantes :
<Cartes> <carte titre="Le bonheur n'est jamais loin" positionX="18" positionY="13" couleur="0xFFFFFF"> <sousTitre positionX="43" positionY="49" couleur="0xFFFFFF" > Soyez souriant, il viendra vous...</sousTitre> <objetAplacer positionX="558" positionY="37" couleur="0xFFFFFF">symb1</objetAplacer> <placeCopyRight positionX="567" positionY="390" couleur ="0xFFFFFF"/> <image>fond1.jpg</image> </carte> <carte titre="Seuls" positionX="350" positionY="70" couleur="0xFFFFFF"> <sousTitre positionX="93" positionY="105" couleur="0xFFFFFF" > surtout dans ces grandes villes...</sousTitre> <objetAplacer positionX="44" positionY="290" couleur="0xFFFFFF">symb2</objetAplacer> <placeCopyRight positionX="567" positionY="390" couleur ="0x4087B7"/> <image>fond2.jpg</image> </carte> <carte titre="La colre est un signe de faiblesse" positionX="140" positionY="100" couleur="0xFFFFFF"> <sousTitre positionX="135" positionY="130" couleur="0xFFFFFF" > ...lorsque la sagesse nous gagne.</sousTitre> <objetAplacer positionX="540" positionY="290" couleur="0xFFFFFF">symb1</objetAplacer> <placeCopyRight positionX="567" positionY="390" couleur ="0x513303"/> <image>fond3.jpg</image> </carte> <carte titre="" positionX="345" positionY="95" couleur="0x4087B7"> <sousTitre positionX="350" positionY="266" couleur="0x4087B7" > Bah !</sousTitre> <objetAplacer positionX="558" positionY="37" couleur="0xFFFFFF">symb1</objetAplacer> <placeCopyRight positionX="35" positionY="390" couleur ="0xFFFFFF"/> <image>fond4.jpg</image> </carte> <carte titre="Gourmand" positionX="390" positionY="160" couleur="0xFFFFFF">
145
Linterface Partie I
<sousTitre positionX="410" positionY="190" couleur="0xFFFFFF" >is good !</sousTitre> <objetAplacer positionX="800" positionY="0" couleur="0xFFFFFF">symb1</objetAplacer> <placeCopyRight positionX="567" positionY="390" couleur ="0xFFFFFF"/> <image>fond5.jpg</image> </carte> <carte titre="On s'aime" positionX="68" positionY="73" couleur="0xFFFFFF"> <sousTitre positionX="93" positionY="109" couleur="0xFFFFFF" > on peut beaucoup la folie surtout...</sousTitre> <objetAplacer positionX="300" positionY="210" couleur="0xFFFFFF">symb2</objetAplacer> <placeCopyRight positionX="567" positionY="390" couleur ="0xFFFFFF"/> <image>fond6.jpg</image> </carte> <carte titre="Un enfant..." positionX="127" positionY="100" couleur="0xFFFFFF"> <sousTitre positionX="415" positionY="325" couleur="0xFFFFFF" > ...un amour</sousTitre> <objetAplacer positionX="325" positionY="235" couleur="0x3C7AB7">symb1</objetAplacer> <placeCopyRight positionX="567" positionY="390" couleur ="0xFFFFFF"/> <image>fond7.jpg</image> </carte> </Cartes>
Sur limage-cl de sa timeline principale, lanimation contient le script suivant :

1 var styleTitre = new TextFormat(); 2 // 3 var creerTexte = function (nomInst, niveau, x, y, contenuTexte, couleurTexte, tailleTexte) { 4 _root.createTextField(nomInst, niveau, x, y, 400, 50); 5 _root[nomInst].text = contenuTexte; 6 nomInst.border = true; 7 nomInst.borderColor = 0; 8 styleTitre.color = couleurTexte; 9 styleTitre.size = tailleTexte; 10 styleTitre.type = "input"; 11 styleTitre.font = "Century Gothic"; 12 _root[nomInst].setTextFormat(styleTitre); 13 _root[nomInst].autoSize = true; 14 }; 15 var placerSymbole = function (nomDuSymbole, nomOccurrence, niveau, x, y, couleur) { 16 _root.attachMovie(nomDuSymbole, nomOccurrence, niveau); 17 _root[nomOccurrence]._x = x; 18 _root[nomOccurrence]._y = y; 19 _root["couleur"+niveau] = new Color(_root[nomOccurrence]); 20 _root["couleur"+niveau].setRGB(couleur); 21 }; 22 var chargeDonnees = new XML(); 23 chargeDonnees.load("cartes.xml"); 24 chargeDonnees.ignoreWhite = true; 25 // 26 chargeDonnees.onLoad = function() { 27 var racine = this.childNodes[0]; 28 // 29 creerCarte = function (numeroCarte) { 30 var titre = racine.childNodes[numeroCarte].attributes.titre;
146
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
var sousTitre = racine.childNodes[numeroCarte].childNodes[0].firstChild; var nomSymbole = racine.childNodes[numeroCarte].childNodes[1].firstChild; var nomImage = racine.childNodes[numeroCarte].childNodes[3].firstChild; // var placeXTitre = racine.childNodes[numeroCarte].attributes.positionX; var placeYTitre = racine.childNodes[numeroCarte].attributes.positionY; var placeXSousTitre = racine.childNodes[numeroCarte].childNodes[0] .attributes.positionX; var placeYSousTitre = racine.childNodes[numeroCarte].childNodes[0] .attributes.positionY; var placeXObjet = racine.childNodes[numeroCarte].childNodes[1] .attributes.positionX; var placeYObjet = racine.childNodes[numeroCarte].childNodes[1] .attributes.positionY; var placeXCopyR = racine.childNodes[numeroCarte].childNodes[2] .attributes.positionX; var placeYCopyR = racine.childNodes[numeroCarte].childNodes[2] .attributes.positionY; // var couleurTitre = racine.childNodes[numeroCarte].attributes.couleur; var couleurSousTitre = racine.childNodes[numeroCarte].childNodes[0] .attributes.couleur; var couleurSymbole = racine.childNodes[numeroCarte].childNodes[1] .attributes.couleur; var couleurCopyRight = racine.childNodes[numeroCarte].childNodes[2] .attributes.couleur; // chargeurPhoto = new MovieClipLoader(); chargeurPhoto.onLoadComplete = function() { creerTexte("titre_inst", 10, placeXTitre, placeYTitre, titre, couleurTitre, 26); creerTexte("sousTitre_inst", 11, placeXSousTitre, placeYSousTitre, sousTitre, couleurSousTitre, 20); placerSymbole(nomSymbole, "accroche", 12, placeXObjet, placeYObjet, couleurSymbole); placerSymbole("copyRight", "copyRight", 13, placeXCopyR, placeYCopyR, couleurCopyRight); }; chargeurPhoto.loadClip("fondscartes/"+nomImage, cadrePhoto); }; // }; // var exemplaires = 0; _root.onMouseDown = function() { texteAccueil._y = -500; creerCarte(exemplaires); exemplaires++; if (exemplaires>=7) { exemplaires = 0; } };
147
Linterface Partie I
Analyse
Le document XML contient 7 nuds enfants de niveau 1 dont le nom de balise est carte. Ils contiennent chacun quatre proprits intitules titre, positionX, positionY et couleur. Ils possdent galement quatre nuds enfants dont les noms de balises sont sousTitre, objetAplacer, placeCopyRight et image. Ces quatre nuds enfants possdent les mmes proprits que leurs nuds parents. Ce document parle de lui-mme, mais prcisons quun nud de niveau 1 correspond une mise en page. Si nous devions construire nous-mmes 7 images-cls sur la scne, nous utiliserions les indications donnes dans ce chier XML pour placer les visuels et les textes. Passons prsent lanalyse du script principal de lanimation. Ligne 1 : dans cette animation, nous allons crer les textes des crans dynamiquement. Nous aurons donc besoin galement de les mettre en forme dynamiquement : nous instanons donc la classe TextFormat(). Ligne 3 : cette fonction va concrtement se charger de Lignes 4 et 5 : crer la zone de texte et la remplir, Lignes 6 11 : dnir un style de mise en forme pour le texte, Ligne 12 : et nir par appliquer le style. Ligne 13 : lorsque vous crez un texte dynamiquement, vous devez dnir certains paramtres dont la largeur (ligne 4, la valeur 400). La proprit autosize de la classe TextField() (et non TextFormat()) va permettre dajuster la largeur de la zone de texte son contenu. Comme vous pouvez le constater, de nombreux paramtres seront prciss au moment de lappel de la fonction, cest pourquoi nous avons utilis des variables locales. Lignes 15 18 : cette nouvelle fonction va assurer le placement dun symbole sur la scne. Lignes 19 et 20 : lorsque loccurrence est enn place sur la scne, nous rglons sa couleur. Lignes 22 24 : nous chargeons le document XML qui contient toutes les valeurs qui vont tre utilises comme paramtres des fonctions appeles. Ligne 26 : nous nous assurons que les donnes du chier XML sont charges. Ligne 27 : nous mmorisons dans une variable un raccourci du chemin de la racine, an de raccourcir toutes les lignes de la fonction creerCarte(). Ligne 29 : cest cette fonction qui va assurer la gnration dun cran que nous avons quali de carte (postale). Elle reprsente le cur du script. Lignes 30 47 : dans des variables, nous stockons les valeurs extraites dun nud XML qui vont nous permettre de placer sur la scne les textes et accroches graphiques, cest-dire tout ce qui compose un cran.
148
Ligne 49 : nous utilisons la classe MovieClipLoader() an de grer le chargement de notre image de fond. Ainsi, nous pouvons composer notre carte postale (lignes 51 54) lorsque limage est enn charge (ligne 50). Ligne 56 : nous excutons la demande de chargement de limage spcie. Lignes 61 69 : la navigation de cette animation repose sur une progression et une consultation linaire unidirectionnelle. Ainsi, chaque clic sur la scne, une nouvelle carte postale est charge (chargement dune nouvelle image accompagne de sa composition). Cette animation est donc trs intressante, car elle dmontre quil suft de changer le contenu du chier XML pour inuer directement sur le contenu de votre chier SWF.
Bogues ventuels
Pour la construction de ce chier XML, il est prfrable dutiliser des proprits. Il aurait en effet t dommage dutiliser des valeurs car cela aurait allong la longueur de votre chier XML.
Crer un symbole modle

Derrire lintitul de ce titre se cache une notion trs importante que nous allons dvelopper dans quelques instants les composants. Revenons tout dabord sur la signication du titre, car ce type de symbole nexiste pas ofciellement dans Flash. Cest la manire dont vous utiliserez un clip dans certains cas qui fera de lui un symbole modle . Dans labsolu et par dnition, lorsque vous construisez une interface dynamiquement, vous ne manipulez pas vous-mme les occurrences sur la scne. Des instructions en ActionScript sont charges de remplacer la phase dintgration. Cela ncessite alors que vous connaissiez trs bien le code ! Tous les utilisateurs de Flash sont-ils dexcellents dveloppeurs ? Malheureusement, non Flash vous propose de concevoir des animations de trois manires diffrentes correspondant au niveau de chacun : Utilisation exclusive de la timeline sans ActionScript. Le cas est rare, sauf pour un usage de production danimations destines tre exportes en squences QuickTime. Utilisation mlange de la timeline et de lActionScript. Lanimation est construite au travers dcrans, et comporte plus ou moins de code permettant dajouter de linteractivit. Cest le cas le plus frquent. Utilisation massive de lActionScript avec une gestion rduite de la timeline. Cette technique est rserve aux dveloppeurs chevronns.
149
Linterface Partie I
La deuxime manire est celle qui est la plus utilise, cela nous amne la conclusion qui suit. Des symboles doivent tre crs avant dtre placs sur la scne : dans ce cas, une fois les occurrences obtenues partir de ces symboles, il est obligatoire de les programmer pour obtenir de linteractivit ! Lorsque jutilise un composant de type menu droulant ou bouton radio, comment se fait-il que loccurrence ragisse au clic alors quaucun script na t plac sur la scne ? Cette animation va vous dmontrer quil est trs simple de pr-programmer un symbole, vous naurez alors plus besoin de saisir le moindre script sur la timeline principale de votre animation. Entendons par pr-programmer le fait que nous allons placer sur limage-cl 1 de la timeline dun symbole, un script qui va grer toutes les occurrences issues de ce dernier. Revenons prsent sur la notion de composant. Nous venons dafrmer que certains symboles placs sur la scne permettent dobtenir des occurrences pr-programmes. Nous voulons parler des composants, cest--dire de ces symboles que vous programmez en plaant un script sur la premire image-cl de leur timeline. Et ce, an que lintgrateur qui placera ces symboles sur la scne nait pas lui-mme programmer les occurrences. Noublions pas que la palette Inspecteurs de composant (ou la palette Paramtres) peut aussi proposer des rglages.
Rappel
Pour crer un composant, vous devez crer un symbole, ajouter sur la premire image-cl de sa timeline un script qui fait rfrence des noms de variables prcis. Vous devez ensuite effectuer un clic droit sur ce symbole dans la bibliothque, et slectionner la commande Dnition du composant. Un bouton + va vous permettre dajouter des variables, utilisez les mmes noms de variables que nous voquions au dbut de ce paragraphe. Lorsque vous placerez un composant sur la scne, vous renseignerez alors la valeur de ces variables.
Figure 9-4
Ces trois occurrences sont issues dun symboles qui contient un script sur la premire image-cl de sa timeline. Toutes les trois ont des sens de rotation et des vitesses diffrents, rgls via la palette Paramtres.
150
Description des chiers

Chemins daccs : Interface/ ConstructionDynamique /DynSymboleModele.a Interface/ ConstructionDynamique /DynSymboleModele2.a Sur la scne, nous avons plac trois occurrences issues dun mme symbole qui contient un script sur la premire image-cl de sa timeline.
Script
Fichier DynSymboleModele.a Script plac sur la premire image-cl de la timeline de lunique symbole de lanimation.
this.onEnterFrame = function() { rotor._rotation += 3; };
Fichier DynSymboleModele2.a Script plac sur la premire image-cl de la timeline de lunique symbole de lanimation. Celui-ci a la particularit dtre un composant et non plus seulement un symbole.
coefRotation = sensRotation == "Horaire" ? 1 : -1; this.onEnterFrame = function() { rotor._rotation += vitesseRotation*coefRotation; };
Analyse
Fichier DynSymboleModele.a Lignes 1 3 : un gestionnaire onEnterFrame va permettre dexcuter en continu une rotation de 3 degrs. Fichier DynSymboleModele2.a Ligne 1 : nous initialisons une variable intitule coefRotation en fonction du rsultat dun test qui value la valeur de la variable Horaire. Lignes 2 4 : la rotation des occurrences qui contiennent ce script se fait grce aux valeurs spcies dans le calcul de vitesse vitesseRotation*coefRotation. Elles ont t renseignes par lintgrateur dans la palette Paramtres aprs une slection pralable de loccurrence. Cet exemple de composant est trs simple, mais suft dmontrer le fonctionnement et lintrt dun composant. Attention cependant ne pas placer dynamiquement sur la scne des composants, cela ne servirait plus rien.
151
Linterface Partie I
Trac dune carte gographique

Lanimation la plus lgre du livre ! La carte de France que vous voyez sur la gure 9-5 nest pas la reprsentation dun symbole sur la scne, il sagit dune occurrence qui a t cre dynamiquement, et laquelle nous avons rattach un trac. Nous avons en effet cr un chier XML qui contient des valeurs que nous exploitons dans notre chier SWF. Une fonction de traage va alors permettre dobtenir tous les traits formant le contour de la France.
Figure 9-5
Cette carte de France nest pas une occurrence issue dun symbole. Il sagit dun trac ralis partir de donnes XML.
Chemin daccs : Interface/ ConstructionDynamique /DynTracerCarte.a La scne de notre animation ne contient rien, vous constaterez que limage-cl 1 est vide, elle ne contient quun simple script assez court. La bibliothque est galement vide. En revanche, nous avons besoin dun chier XML qui a t construit partir du pressepapiers de Flash ! Vous avez bien lu ! Nous avons dvelopp une animation dont la scne possde des dimensions importantes, permettant ainsi dy placer une image. Vous navez plus qu excuter lanimation, et cliquer sur les contours souhaits de limage, les coordonnes _x et _y vont tre mmorises puis copies dans le presse-papiers aprs avoir t traites pour une mise en forme du texte sous forme de document XML.
152
Cette animation se trouve dans le dossier ConstructionDynamique et sintitule SaisieCoordonnees.fla. Le script comporte trois parties : Le chargement des donnes XML. Le trac de la carte de France. Le repositionnement de la carte de France sur la scne.
Script
Contenu du chier XML intitul france.xml.
1 <Forme departX='541.95' departY='124'> 2 <Coordonnees xm='523.95' ym='132' x='523.95' 3 <Coordonnees xm='513.95' ym='130' x='513.95' 4 <Coordonnees xm='505.95' ym='141' x='505.95' 5 <Coordonnees xm='551.95' ym='147' x='551.95' 6 <Coordonnees xm='551.95' ym='142' x='551.95' 7 <Coordonnees xm='548.95' ym='135' x='548.95' 8 <Coordonnees xm='548.95' ym='135' x='541.95' 9 </Forme> y='132'/> y='130'/> y='141'/> y='147'/> y='142'/> y='135'/> y='124'/>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
chargeCoordonnees = new XML(); chargeCoordonnees.load("france.xml"); chargeCoordonnees.ignoreWhite = true; chargeCoordonnees.onLoad = function() { _root.createEmptyMovieClip("traceFrance", 1); traceFrance.lineStyle(1, 0, 100); traceFrance.beginFill(0xA3ADA2, 30); premierPointX = this.childNodes[0].attributes.departX; premierPointY = this.childNodes[0].attributes.departY; traceFrance.moveTo(premierPointX, premierPointY); for (i=0; i<this.childNodes[0].childNodes.length; i++) { xMilieu = this.childNodes[0].childNodes[i].attributes.xm; yMilieu = this.childNodes[0].childNodes[i].attributes.ym; destX = this.childNodes[0].childNodes[i].attributes.x; destY = this.childNodes[0].childNodes[i].attributes.y; traceFrance.curveTo(xMilieu, yMilieu, destX, destY); } traceFrance.endFill(); traceFrance._xscale = 70; traceFrance._yscale = 70; traceFrance._x = -100; traceFrance._y = -65; };
153
Linterface Partie I
Analyse
Le chier XML nest ni plus ni moins quune srie de nuds de niveau 1. Chacun dentre eux ne possde que quatre attributs sans valeurs. Les deux premiers dnissent les coordonnes du point directeur de la droite trace entre deux points x et y (les 3e et 4e attributs) de deux nuds qui se suivent. Lignes 1 3 : chargement des donnes XML. Lignes 4 22 : lignes dinstructions qui ne sexcuteront qu partir du moment o le document XML aura t charg. Ligne 5 : an de pouvoir tracer notre carte de France, nous devons rattacher nos courbes et droites une occurrence vide sur la scne. Cette occurrence est nomme traceFrance et place au niveau 1. Ligne 6 : nous dnissons le style de trait pour le contour de la carte de France (paisseur, couleur, opacit du trait). Cette ligne dinstruction est optionnelle si vous dnissez au moins un fond (ligne 7).
Remarque
Pour dnir la couleur du trait, vous devez normalement utiliser une valeur sous le format : 0xRRVVBB. Ex. : 0xFF0000 pour obtenir du rouge. Pour le noir, sagissant de la valeur 0x000000, il est possible dcrire uniquement le chiffre 0. Par ailleurs, si vous exportez votre animation pour Flash 8, vous pouvez ajouter dautres paramtres la mthode lineStyle(). Consultez laide de Flash pour dcouvrir que vous pouvez obtenir des angles arrondis, biseauts ou pointue.
Ligne 7 : pour que la carte de France possde un fond, nous demandons le dbut du remplissage de la forme que nous nous apprtons crer. Cette ligne dinstruction est optionnelle si vous dnissez au moins un contour (ligne 6). Lignes 8 et 9 : nous stockons dans deux variables, le point de dpart de la carte de France qui correspond aux deux attributs departX et departY du premier nud du document XML. Ligne 10 : nous dmarrons le dbut du trac en utilisant les valeurs des deux variables prcdemment cres avec la mthode moveTo(). Ligne 11 : voil, nous allons prsent excuter la boucle qui va parcourir tous les nuds de notre instance XML chargeCoordonnees. Nous stockons dans 4 variables les valeurs des attributs xm, ym, x et y (lignes 12 15), an de pouvoir les utiliser avec la mthode curveTo() (ligne 16). Ligne 18 : cette fonction termine le remplissage demand la ligne 7. Lignes 19 22 : nous replaons le trac de la France plus droite sur la scne et nous changeons galement son chelle.
154
Bogues ventuels
Vous augmenterez le nombre derreurs si vous tentez de ne pas passer par des variables pour mmoriser les coordonnes de chaque point. En effet, voici quoi ressemblerait la ligne 16 si vous nutilisiez pas de variables.
traceFrance.curveTo(this.childNodes[0].childNodes[i].attributes.xm, this.childNodes[0].childNodes[i].attributes.ym, this.childNodes[0].childNodes[i].attributes.x, this.childNodes[0].childNodes[i].attributes.y);
Imbriquer des animations les unes dans les autres

Nous allons dcouvrir quune animation Flash ne se compose pas obligatoirement dun seul chier .swf. Si vous avez dj travaill dans Photoshop, vous avez conscience de lintrt et de limportance des calques : il en va de mme pour Flash. Nous ne parlons pas ici des calques de la timeline de Flash, mais de cette notion de superposition des composantes dune image. Une animation peut donc tre conue de la mme faon. Vous devez crer une animation principale qui contient les lments de linterface qui seront toujours prsents lcran. Ensuite, vous devez crer les animations qui vont venir se charger audessus de la principale.
Figure 9-6
partir de deux animations, nous pouvons en obtenir une seule en chargeant la deuxime sur la premire avec la fonction loadMovieNum().
155
Linterface Partie I
Chemin daccs : Interface/ ConstructionDynamique /DynImbriquerAnims.a Nous nallons pas vous dcrire le fonctionnement des animations qui vont tre charges sur la principale. Il sagissait dans notre exemple de donner du sens aux animations charges, mais le chargement danimations les unes sur les autres ne ncessite quune seule ligne dinstruction. Nous avons donc cr quatre animations intitules DynImbriquerAnims.swf, Animation1.swf, Animation2.swf, Animation3.swf. Les trois dernires sont charges dans la premire. Trois occurrences qui sintitulent btElements, btTerre et btContinents se trouvent sur la scne de lanimation DynImbriquerAnims.swf. Sur limage-cl, les trois gestionnaires ci-aprs permettent de demander le chargement des trois animations.
Script
1 2 3 4 5 6 7 8 9 btElements.onPress = function() { loadMovieNum("animation1.swf", }; btTerre.onPress = function() { loadMovieNum("animation2.swf", }; btContinents.onPress = function() loadMovieNum("animation3.swf", }; 1);
1); { 1);
Analyse
Chaque gestionnaire assure le chargement dune animation au niveau 1, remplaant ainsi une ventuelle animation dj charge.
Bogues ventuels
Si vous le souhaitez, vous pouvez remplacer le deuxime paramtre de la fonction loadMovie() par un autre chiffre. 0 permet de remplacer le contenu de la scne principale par celui que vous chargez. Vous perdez alors votre animation racine. Cela peut savrer pratique pour passer dune animation lautre sans quil y ait de superposition de chier SWF. linverse, vous ntes pas limit un chargement danimations, vous pouvez en imbriquer plusieurs. Dans ce cas, vous devez vous assurer que les animations se chevauchent correctement lorsquelles sont charges dans une animation commune.
156
Travailler avec les coordonnes de la souris

Imaginez un jeu de morpion, o chaque clic, une croix ou un rond doit tre pos sur la scne : les coordonnes de la souris doivent tre utilises pour placer chaque nouvelle occurrence. Nous avons voulu vous proposer volontairement une animation extrmement simplie pour vous montrer le strict minimum.
Rappel
Il est important de noter que les proprits _xmouse et _ymouse semploient avec _root, mais pas obligatoirement. Les coordonnes obtenues avec ces deux proprits ne sont pas toujours relatives au coin suprieur de la scne, mais peuvent ltre par rapport au point dalignement dune occurrence. Dans ce cas, vous devez remplacer _root par le nom dune occurrence.
Chemin daccs : Interface/ ConstructionDynamique /DynCoordonnesSouris.a Pour cette animation, nous navons rien dispos sur la scne. Seul un symbole dont le nom de liaison est puce se trouve dans la bibliothque. Le script suivant se trouve ensuite sur limage-cl 1 de la timeline principale de lanimation.
Script
1 var exemplaires = 0; 2 _root.onMouseDown = function() { 3 exemplaires++; 4 tempo = _root.attachMovie("puce", "puce"+exemplaires, exemplaires); 5 tempo._x = _root._xmouse; 6 tempo._y = _root._ymouse; 7 };
Analyse
Ligne 1 : dans une variable, nous stockons une valeur qui va nous servir de compteur pour le niveau des occurrences qui vont tres places sur la scne. Cela va servir galement dnir un nom doccurrence par concatnation (ligne 4). Ligne 2 : nous dnissons un gestionnaire qui va permettre dexcuter les lignes dinstructions quil contient, ds que lutilisateur va cliquer sur la scne.
157
Linterface Partie I
Ligne 3 : nous commenons par incrmenter la variable an dobtenir un niveau et un sufxe diffrent pour chaque occurrence place sur la scne. Ligne 4 : nous plaons une occurrence sur la scne. Lignes 5 et 6 : loccurrence est place des coordonnes qui sont celles de la souris au moment du clic.
Remarque
Nous aurions pu retenir la syntaxe ci-dessous an de ne pas avoir utiliser les lignes 5 et 6.
_root.attachMovie("puce", "puce"+exemplaires, exemplaires,{_x:_root._xmouse,_y :_root._ymouse});
Voil, la dmonstration est faite, il est donc trs simple de placer une occurrence sur la scne au moment dun clic. Petite piste dans le cas o vous devriez faire un morpion ou une application de ce genre qui ncessite un changement de symboles chaque clic. Utilisez une valeur boolenne avec un tableau. Voici le code :
nomsDeLiaisonsSymboles = ["croix", "rond"]; numeroForme = true; var exemplaires = 0; _root.onMouseDown = function() { numeroForme = !numeroForme; symboleAplacer = nomsDeLiaisonsSymboles[Number(numeroForme)]; exemplaires++; tempo = _root.attachMovie(symboleAplacer, "piece"+exemplaires, exemplaires); tempo._x = _root._xmouse; tempo._y = _root._ymouse; };
Deux symboles dans la bibliothque ont pour noms de liaisons croix et rond. Le point dexclamation de la ligne 5 permet dinverser la valeur boolenne stocke dans la variable numeroForme. La fonction Number() permet quant elle de transformer les valeurs true et false respectivement en 1 et 0.
Cration dune palette de couleur avec getPixel()

Lorsque la rdaction de ce livre a dmarr en juillet 2005, Flash 8 ntait pas encore sorti. Nous avions dj cr une animation (encore disponible dans le dossier ConstructionDynamique) qui sintitule DynPalCouleurs.fla. Elle na plus vraiment de sens car la classe
158
BitmapData() de Flash 8 propose une mthode plus simple pour connatre la couleur dun pixel.
Figure 9-7
Lutilisateur doit cliquer sur une couleur an de lappliquer au rectangle plac ct du nuancier.
Chemin daccs : Interface/ ConstructionDynamique /DynPaletteBitmapData.a Pour cette animation, nous avons effectu la copie dcran dun nuancier extrait dun logiciel de traitement graphique, et nous lavons colle sur la scne de Flash. Nous avons ensuite cr un symbole partir de cette image.
Attention
Vous devez choisir un point dalignement sur le coin suprieur gauche pour la cration du symbole qui contient le nuancier.
Nous avons ensuite plac sur la scne, deux occurrences intitules nuancier_inst et temoin_inst.
Script
1 import flash.display.BitmapData; 2 // 3 zoneDeClic = new flash.display.BitmapData(nuancier_inst._width, nuancier_inst._height, true); 4 zoneDeClic.draw(nuancier_inst); 5 paletteCouleur = new Color(temoin_inst); 6 // 7 nuancier_inst.onPress = function() {
159
Linterface Partie I
8 9 10 11
12 13 14 }; 15 nuancier_inst.onRelease = nuancier_inst.onReleaseOutside=function () { 16 delete this.onMouseMove; 17 };
couleurPipette = zoneDeClic.getPixel(nuancier_inst._xmouse, nuancier_inst._ymouse); if(couleurPipette!=0) paletteCouleur.setRGB(couleurPipette); this.onMouseMove = function() { couleurPipette = zoneDeClic.getPixel(nuancier_inst._xmouse, nuancier_inst._ymouse); if(couleurPipette!=0) paletteCouleur.setRGB(couleurPipette); };
Analyse
Ligne 1 : dans lanimation, nous importons la classe BitmapData qui va nous permettre dutiliser ses mthodes draw() et getPixel(). Ligne 3 : nous instanons ensuite cette classe an dobtenir zoneDeClic. Les paramtres dnissent la largeur et la hauteur de linstance. Comme nous souhaitons associer cette instance nuancier_inst, nous utilisons donc ses dimensions. Ligne 4 : nous associons zoneDeClic nuancier_inst. Pour tre plus prcis, linstance de la classe bitmapData vient se placer derrire le paramtre prcis dans la mthode draw(). Ligne 5 : nous instanons la classe Color() an de contrler la couleur de loccurrence
temoin_inst.
Ligne 7 : nous dnissons un gestionnaire onPress pour loccurrence nuancier_inst an quelle ragisse au clic, lorsque lutilisateur slectionnera une couleur. Ligne 8 : nous stockons dans une variable intitule couleurPipette, une valeur correspondant au code couleur rcupr grce la mthode getPixel() qui pointe le pixel se trouvant sous le curseur. Ligne 9 : nous procdons prsent un test nous permettant de vrier si lutilisateur na pas cliqu entre deux cases de couleur. Si tel est le cas, la valeur renvoye sera celle du noir. Si nous voulions rellement choisir du noir, il faudrait ajouter une condition qui permettrait de vrier ce qui se passe si lutilisateur ne clique pas dans une zone prcise. Ligne 10 : ce gestionnaire nest pas indispensable si lon imagine que lutilisateur va uniquement cliquer sur les cases de couleurs. En revanche, sil commence dplacer son curseur alors que le bouton de la souris est encore enfonc, il faut pouvoir lire la valeur de la couleur qui se trouve sous le curseur (lignes 11 et 12). Ligne 15 : lorsque lutilisateur relche le bouton de sa souris, il faut dtruire le gestionnaire onMouseMove.
160
Nous aurions pu changer lapparence du curseur au survol du nuancier, voici dans ce cas ce quil aurait fallu ajouter : Loccurrence dun symbole reprsentant une pipette avec un point dalignement situ sur son extrmit. Le script ci-aprs la suite de celui que nous venons danalyser.
nuancier_inst.onRollOver = function() { Mouse.hide(); pipette_inst.startDrag(1); }; nuancier_inst.onRollOut = function() { stopDrag(); Mouse.show(); pipette_inst._x = 900; };
Bogue ventuel
Attention, ninversez pas les noms dinstances la ligne 4.
Utilisation dune palette de couleur utilisant getPixel()

Voyons maintenant un deuxime exemple semblable celui que nous venons danalyser. Il prsente un script lgrement plus complet dans le cas o vous souhaiteriez appliquer la couleur slectionne un texte. Nous allons analyser uniquement les nouvelles lignes dinstructions.
Chemin daccs : Interface/ ConstructionDynamique /DynPaletteBitmapData2.a Identique au chier DynPaletteBitmapData (lanimation prcdente). Un texte dynamique supplmentaire a simplement t ajout. Son nom dinstance est paragrapheDroite.
1 2 3 4 5 6 7 Script import flash.display.BitmapData; // zoneDeClic = new flash.display.BitmapData(400, 300, true); zoneDeClic.draw(nuancier_inst); // paletteCouleur = new Color(selecteurDeCoulleur_inst);
161
Linterface Partie I
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
style1 = new TextFormat(); // nuancier_inst.onPress = function() { controleCouleur(); this.onMouseMove = function() { controleCouleur(); }; }; nuancier_inst.onRelease = nuancier_inst.onReleaseOutside=function () { delete this.onMouseMove; }; // controleCouleur = function () { couleurPipette = zoneDeClic.getPixel(nuancier_inst._xmouse, nuancier_inst._ymouse); paletteCouleur.setRGB(couleurPipette); style1.color = couleurPipette; paragrapheDroite.setTextFormat(style1); };
Analyse
Ligne 7 : nous crons une instance de la classe TextFormat() an de contrler le style du texte de loccurrence paragrapheDroite, et plus particulirement sa couleur (ligne 22). Ligne 23 : nous utilisons la mthode setTextFormat() de la classe TextField() an dappliquer style1 loccurrence paragrapheDroite.
162
10
Contrle et afchage du temps
Lorsque vous programmez, les bases de lalgorithme sont primordiales, mais lorsque vous les matrisez, vous constatez que cela ne suft pas. Vous allez devoir tre capable de temporiser le dclenchement dactions dans une animation. Dans les tudes de cas qui vont suivre, nous nallons pas vous prsenter les gestionnaires que vous tes censs connatre pour la lecture de ce livre , mais plutt des techniques de contrle du temps. Retarder le dclenchement dune action, rpter toutes les 7 secondes une action, excuter plusieurs fois par seconde une ligne dinstruction, ce sont autant de techniques que vous devez apprendre matriser. Lune des particularits des blogs est dafcher tous les jours dun mois sur la page daccueil. Est-il difcile de raliser un calendrier ou dafcher la date et lheure sur la scne ?
Raliser une horloge

Cette tude de cas va vous dmontrer que lafchage de lheure sur la scne se fait assez simplement. En revanche, celle de la date ncessite lutilisation de deux tableaux. En effet, lorsque vous cherchez connatre le mois et le jour de la date, vous obtenez des valeurs comprises entre 0 et 6 pour les jours (0 correspondant au dimanche) et entre 0 et 11 pour les mois.
Linterface Partie I
Figure 10-1
Les occurrences rglent leurs angles de rotation sur les valeurs renvoyes par les mthodes de la classe Date().
Rappel
La premire entre dun tableau porte lindex 0.
Chemin daccs : Interface/ControleAfchageTemps/TempsHorloge.a Nous avons dispos sur la scne, trois occurrences intitules aiguilleHeures, aiguilleMinutes, aiguilleSecondes, ainsi que deux textes dynamiques dont les noms de variables sont affichageHorloge et affichageDeLaDate. Le script de cette animation comporte trois parties : Le traitement de lheure et de son afchage. Le traitement de la date et de son afchage. Lanimation des aiguilles de lhorloge analogique.
Script
1 afficherHeure = function () { 2 nouvelInstant = new Date(); 3 heures = nouvelInstant.getHours(); 4 minutes = (nouvelInstant.getMinutes()<10 ? "0"+nouvelInstant.getMinutes() : nouvelInstant.getMinutes());
164
Contrle et affichage du temps Chapitre 10
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
secondes = (nouvelInstant.getSeconds()<10 ? "0"+nouvelInstant.getSeconds() : nouvelInstant.getSeconds()); affichageHorloge = heures+":"+minutes+":"+secondes; }; afficherHeure(); //Alignement de l'heure gauche sinon affichage bouge. // setInterval(afficherHeure, 1000); // // joursDuneSemaine = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; mois_annee = ["Janvier", "Fvrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Dcembre"]; dateAujourdhui = new Date(); jourDeLaSemaine = joursDuneSemaine[dateAujourdhui.getDay()]; date_jour = dateAujourdhui.getDate(); mois = mois_annee[dateAujourdhui.getMonth()]; annee = dateAujourdhui.getFullYear(); affichageDeLaDate = jourDeLaSemaine+" "+date_jour+" "+mois+" "+annee; // // orienterAiguilles = function () { nouvelInstant = new Date(); heures = nouvelInstant.getHours(); minutes = nouvelInstant.getMinutes(); secondes = nouvelInstant.getSeconds(); if(heures >=13) heures-=12 aiguilleHeures._rotation = heures*5*6 aiguilleMinutes._rotation = minutes*6 aiguilleSecondes._rotation = secondes*6 }; orienterAiguilles() setInterval(orienterAiguilles, 1000);
Analyse
Ligne 1 : cette fonction va permettre dobtenir trois variables (lignes 3, 4 et 5) qui vont tre utilises comme paramtres de concatnation pour lafchage de lheure dans un texte dynamique sur la scne (ligne 6). Nous aurions pu faire de mme pour lafchage de lheure. Nous avons souhait simplier ce script en retirant cette ligne de traitement de lafchage de lheure. Ligne 2 : nous sommes obligs dinstancier la classe Date() dans la fonction, car nous lutilisons dans le but dobtenir lheure ainsi que les secondes. Cette fonction va en effet tre appele toutes les secondes grce la ligne 11. Une nouvelle instance sera recre continuellement. Si vous instanciez cette classe uniquement au dbut de lanimation, vous nobtiendrez sur la premire ligne du script quune seule instance date de la seconde et du jour auxquels sest excute cette ligne dinstruction. Ligne 3 : nous stockons lheure dans une variable.
165
Linterface Partie I
Remarque
Pourquoi cette syntaxe aux lignes 4 et 5 ? Lafchage de lheure se fait toujours sous le format 9:03:08 (9 heures 3 minutes et 8 secondes). Lorsque vous demandez Flash de vous renvoyer les minutes et les secondes dune instance de la classe Date(), il vous donne 3 et 8 si nous nous basons sur lexemple ci-dessus. Au moment de la concatnation, nous obtiendrions 9:3:8 au lieu de 9:03:08. Nous devons donc procder une conversion avant lafchage la ligne 6. Nous avons utilis un oprateur ternaire pour effectuer le test ci-dessous, an de limiter le nombre de lignes. Voil ce que vous connaissez srement si vous ne connaissez pas loprateur ternaire.
if (nouvelInstant.getMinutes()<10) { minutes ="0"+nouvelInstant.getMinutes(); } else { minutes=nouvelInstant.getMinutes(); }
Ligne 4 : nous stockons les minutes dans une variable intitule minutes, tout en faisant un test sur la valeur que nous renvoie nouvelInstant.getMinutes(). Ligne 5 : traitement identique pour les secondes. Ligne 6 : nous concatnons les variables obtenues avec les chanes de caractres : an dobtenir un format dafchage conventionnel de lheure. Ligne 8 : nous appelons la fonction que nous venons de crer, an dafcher lheure sur la scne ds le lancement de lanimation. Ligne 11 : la fonction setInterval() va nous permettre de rafrachir lafchage de lheure toutes les 1 000 millisecondes, cest--dire toutes les secondes car cest le paramtre que nous lui avons prcis (orienterAiguilles, 1000). Lignes 14 et 15 : nous crons deux tableaux qui contiennent les jours et mois que nous allons lire dans quelques instants. Ligne 16 : nous instancions la classe Date() dans le but de pouvoir utiliser les mthodes getDate(), getMonth() et getFullYear(). Ligne 17 : la valeur renvoye par la mthode getDay() peut aller de 0 6. Nous pouvons donc lutiliser pour aller rechercher lentre correspondante dans le tableau joursDuneSemaine. La valeur 0 correspond dimanche, cest pourquoi ce jour a t plac en dbut de tableau la ligne 14. Ligne 18 : nous stockons la date dans la variable date_jour. Ligne 19 : nous ritrons lopration de la ligne 17 avec les mois. Ligne 20 : dans la variable annee, nous stockons lanne sous la forme 2006 grce la mthode getFullYear() qui est diffrente de getYear(). Ligne 21 : nous terminons lopration par une concatnation des variables obtenues spares par des espaces.
166
Ligne 24 : nous crons une fonction comparable la premire de ce script car nous allons nouveau utiliser lheure pour agir sur les aiguilles dune horloge analogique. Les lignes 26 28 sont comparables aux lignes 3 5, la diffrence prs que nous ne convertissons pas les valeur obtenues, car elles ne vont pas tre afches. Ligne 29 : si lhorloge de votre ordinateur vous renvoie une heure comprise entre 13 et 23, nous soustrayons 12 pour ne conserver quune valeur allant de 0 12. Lignes 30 32 : nous utilisons les valeurs des variables des lignes 26 29 an de rgler langle de rotation des aiguilles de notre horloge analogique. Ligne 34 : nous excutons la fonction que nous venons danalyser ds le lancement de lanimation. Dans le cas contraire, il faudrait attendre 1 seconde aprs le dmarrage de lanimation pour voir les aiguilles se caler la bonne heure. Ligne 35 : la fonction setInterval() va nous permettre de rafrachir lafchage des aiguilles de lhorloge toutes les 1 000 millisecondes, cest--dire toutes les secondes, car cest le paramtre que nous lui avons prcis (orienterAiguilles, 1000). Nous avons souhait faire deux fonctions pour le traitement et lafchage de lheure, an que vous puissiez utiliser lune ou lautre sans avoir modier la moindre ligne de code dune fonction globale que nous aurions pu crer.
Bogues ventuels
Le texte dynamique qui contient lafchage de lheure doit imprativement avoir un alignement gauche, dans le cas contraire, vous noterez des petits dcalages avec changements de certaines secondes. Si un utilisateur se connecte sur un site qui contient cette animation, et quil reste en ligne jusquau lendemain de son arrive sur le site, le changement de date ne se fera pas. Nous pourrions donc placer toutes les lignes qui vont suivre, y compris et surtout la 16e, dans une fonction an de lutiliser dans un setInterval() comme nous lavons fait pour lafchage de lheure. Lorsque vous allez crer vos aiguilles, conservez-les la verticale avec un point dalignement la base. Nen crez pas lhorizontale car la position 0 dune aiguille est celle quelle doit indiquer lorsquil est 0 heure ou minuit.
Raliser un compte rebours

Que ce soit dans le domaine du jeu ou du e-learning, la notion de temps limit est importante, car elle fait partie des conditions de droulement du jeu ou de lexercice pdagogique. Cest pourquoi nous avons souhait inclure une telle animation dans ce livre.
167
Linterface Partie I
Figure 10-2
Dterminez le nombre dheures, de minutes et de secondes dcompter, et cliquez sur le bouton Dpart. (La copie dcran propose le bouton Arrt car le compte rebours est en marche).
Rappel
La fonction getTimer() permet de connatre le nombre de secondes coules entre le moment o vous excutez cette fonction et le lancement de lanimation.
Chemin daccs : Interface/ControleAfchageTemps/TempsCompteRebours.a Nous avons plac sur la scne des textes dynamiques et un seul clip. Le nom doccurrence de ce dernier est tout simplement btDepart. Les noms de variables des textes dynamiques sont vHeures, vMinutes, vSecondes et affichageCompteRebours. Leurs noms doccurrences sont respectivement vHeures_inst, vMinutes_inst, vSecondes_inst. Nous navons pas de nom doccurrence pour le texte dynamique dont le nom de variable est affichageCompteRebours.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 // var tempsAtteindre = 0; var vHeures = 0; var vMinutes = 5; var vSecondes = 0; // btDepart.onPress = function() { if (etiquetteDepartPause == "Dpart") { tempsAtteindre = 0; tempsAtteindre += vHeures*60*60*1000; tempsAtteindre += vMinutes*60*1000; tempsAtteindre += vSecondes*1000; etiquetteDepartPause = "Arrt";
168
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
tempsAtteindre += getTimer(); lancerCompteRebours(); lancerRebours = setInterval(lancerCompteRebours, 1000); } else { etiquetteDepartPause = "Dpart"; clearInterval(lancerRebours); } }; // lancerCompteRebours = function () { difference = Math.round((tempsAtteindre-getTimer())/1000); heures = Math.floor(difference/3600); minutes = Math.floor(difference/60)-(heures*60); secondes = Math.floor(difference-(heures*3600)-(minutes*60)); // heures = heures<=9 ? heures="0"+heures : heures; minutes = minutes<=9 ? minutes="0"+minutes : minutes; secondes = secondes<=9 ? secondes="0"+secondes : secondes; affichageCompteRebours = heures+":"+minutes+":"+secondes; if (difference == 0) { clearInterval(lancerRebours); // Action excuter quand temps est termin } }; //pas round mais floor vHeures_inst.restrict = "0-9"; vMinutes_inst.restrict = "0-9"; vSecondes_inst.restrict = "0-9"; vHeures_inst.maxChars = 2; vMinutes_inst.maxChars = 2; vSecondes_inst.maxChars = 2;
Analyse
Avant danalyser le script, commenons par vous prsenter la mthode de calcul du dcompte. Au moment o lutilisateur va cliquer sur le bouton Dpart, nous pouvons dj savoir le nombre de millisecondes coules depuis le lancement de lanimation grce la fonction getTimer(). Pour calculer le temps atteindre au bout de notre dcompte (ligne 14), nous faisons le calcul suivant : temps actuel au moment du clic sur le bouton dpart + temps de dcompte demand. Nous allons ensuite soustraire de faon continue, la valeur renvoye par getTimer() celle qui correspond notre dcompte atteindre (ligne 24). Ligne 2 : nous initialisons cette variable primordiale pour lanimation, qui est charge dadditionner les heures, minutes et secondes dcompter.
169
Linterface Partie I
Lignes 3 5 : nous initialisons les variables an dafcher 0 et 5 dans les textes dynamiques qui se trouvent sur la scne. Ligne 7 : ce gestionnaire va sexcuter lorsque lutilisateur cliquera sur le bouton qui lance le compte rebours. Ligne 8 : cest la mme occurrence qui lance et qui arrte le compte rebours. Nous devons donc valuer le contenu de la variable etiquetteDepartPause pour savoir si nous devons dmarrer ou interrompre le dcompte. Ligne 9 : nous initialisons nouveau la variable de la ligne 2, car elle pourrait dj contenir une valeur (surtout si vous avez cliqu sur cette occurrence pour la troisime fois). Lignes 10 12 : nous calculons le nombre de millisecondes dcompter. Ligne 13 : nous afchons Arrt sur la scne an que lutilisateur sache que pour arrter le dcompte, il doit cliquer sur le mme bouton que celui du dpart. Ligne 14 : nous ajoutons notre somme de millisecondes dcompter, le temps dj coul depuis le lancement de lanimation. Ligne 15 : nous excutons la fonction charge de calculer et dafcher le rsultat du dcompte partir du clic sur le bouton Dpart. Ligne 16 : la fonction setInterval() va nous permettre de rafrachir lafchage du compte rebours toutes les 1 000 millisecondes, cest--dire toutes les secondes car cest le paramtre que nous lui avons prcis (lancerCompteRebours, 1000). Ligne 18 : au cas o le dcompte serait dj en cours, nous larrtons (ligne 19) et nous changeons le contenu de ltiquette du bouton. Ligne 23 : nous crons une fonction qui va tre excute toutes les secondes grce la ligne 15. Ligne 24 : dans une variable, nous stockons le temps restant dcompter. Lignes 25 27 : nous calculons les temps afcher dans les textes dynamiques qui se trouvent sur la scne. Lignes 29 31 : nous convertissons les afchages des heures, minutes et secondes pour viter dobtenir un temps restant sous la forme 1:3:5 au lieu de 01:03:05 (1 heure 3 minutes et 5 secondes). Rfrez-vous la remarque de lanimation prcdente an de mieux comprendre la raison pour laquelle nous avons utilis un oprateur ternaire la place dune structure de type if(). Ligne 32 : nous concatnons les variables spares par des ponctuations de deux points. Lignes 33 36 : ce test va interrompre le dcompte, par consquent lexcution de la fonction, au cas o la variable diffrence arriverait 0. Lignes 39 44 : nous contraignons le contenu des textes de saisie an que lutilisateur ne puisse pas saisir plus de 2 chiffres (lignes 42 44) et uniquement des chiffres, pas de caractres (lignes 39 41).
170
Bogues ventuels
Attention ne pas arrondir les lignes 25 26 avec la mthode Math.round() mais bien avec Math.floor(). Par ailleurs, les lignes 39 44 vous garantissent que lutilisateur ne peut pas saisir de valeurs errones.
Raliser un chronomtre
Dans le mme esprit que lanimation prcdente, nous allons calculer une dure coule entre deux temps. Nous allons aussi dcouvrir quil est possible dutiliser la classe Date() au lieu de la fonction getTimer().
Figure 10-3
Lutilisateur doit cliquer sur le bouton Dpart, il peut alors mmoriser des temps intermdiaires, arrter le chronomtre ou le remettre zro.
Remarque
Nous navons pas prvu de bouton pour effacer la liste des temps mmoriss, il suft dajouter un bouton charg de vider le texte dynamique sans oublier de rinitialiser la variable numeroMemoire.
Chemin daccs : Interface/ControleAfchageTemps/TempsChronometre.a Nous avons plac sur la scne, trois textes dynamiques dont les noms de variables sont : affichageChronometre, etiquetteDepartPause et tempsMemorises. Trois occurrences intitules btDepart, btRemiseZero et btMemoire issues du mme symbole vont nous servir contrler le chronomtre.
171
Linterface Partie I
Script
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 // btMemoire.enabled = false; btMemoire._alpha = 50; // btDepart.onPress = function() { if (etiquetteDepartPause == "Dpart") { etiquetteDepartPause = "Arrt"; tempsInitial = new Date(); lancerChrono = setInterval(afficherTemps, 100); btMemoire.enabled = true; btMemoire._alpha = 100; } else { etiquetteDepartPause = "Dpart"; clearInterval(lancerChrono); btMemoire.enabled = false; btMemoire._alpha = 50; } }; // btRemiseZero.onPress = function() { tempsInitial = new Date(); affichageChronometre = "00:00:00:00"; }; // afficherTemps = function () { difference = ((new Date()-tempsInitial)/1000); heures = Math.floor(difference/3600); minutes = Math.floor(difference/60); secondes = Math.floor(difference-Math.floor(minutes*60)); milliSecondes = (difference%Math.floor(difference)); traitementMilliSecondes = String(milliSecondes); milli = traitementMilliSecondes.substr(2, 2); // heures = heures<=9 ? heures="0"+heures : heures; minutes = minutes<=9 ? minutes="0"+minutes : minutes; secondes = secondes<=9 ? secondes="0"+secondes : secondes; affichageChronometre = heures+":"+minutes+":"+secondes+":"+milli; }; // pas round mais floor // var tempsMemorises = ""; var numeroMemoire = 0; btMemoire.onPress = function() { numeroMemoire++; tempsMemorises += numeroMemoire+" : "+affichageChronometre+newline; };
172
Analyse
Lignes 2 et 3 : tant que le dpart du chronomtre na pas t demand, nous interdisons le clic sur le bouton permettant de mmoriser un temps. Ligne 5 : ce gestionnaire va lancer ou arrter le chronomtre. Ligne 6 : vous constaterez que le bouton servant lancer le chronomtre est aussi celui qui permet de larrter. chaque clic sur cette occurrence, le texte plac gauche du bouton change de contenu pour afcher Dpart ou Arrt. Nous devons donc effectuer un test pour savoir ce que nous devons faire. Il suft simplement de vrier le contenu de la variable etiquetteDepartPause. Ligne 7 : si le test ci-dessus renvoie true, on sait alors quil faut lancer le son en commenant par changer le contenu du texte dynamique sur la scne dont le nom de variable est etiquetteDepartPause. Ligne 8 : ensuite, nous stockons dans une variable, lheure laquelle lutilisateur a cliqu sur le bouton Dpart. Elle comprend les secondes et les millisecondes. Ligne 9 : nous demandons lexcution dune fonction tous les centimes de secondes. Nous reviendrons sur cette fonction la ligne 25. Lignes 10 et 11 : nous rendons cliquable le bouton Mmoriser. Ligne 13 : si le test de la ligne 6 renvoie false, nous devons alors arrter le chronomtre (ligne 14), rafcher Dpart dans le texte dynamique dont le nom de variable est etiquetteDepartPause (ligne 13), et ne plus rendre cliquable le bouton Mmoriser (lignes 15 et 16). Ligne 20 : ce gestionnaire permet de remettre le chronomtre 0 (ligne 22), mais surtout de rednir un nouveau temps pour le calcul du chronomtre (ligne 21). Ligne 25 : cette fonction est celle qui est appele en continu tous les centimes de secondes, grce la fonction que nous avons excute ligne 9. Ligne 26 : nous calculons le temps qui scoule entre linstant o lutilisateur a cliqu sur le bouton Dpart et linstant o la fonction sexcute. Cet cart de temps croissant est stock dans une variable intitule difference. Lignes 27 30 : nous stockons dans quatre variables, les millisecondes, secondes, minutes et heures qui scoulent depuis le clic sur le bouton Dpart . Lignes 31 et 32 : la ligne 30 nous renvoie la valeur des millisecondes sous la forme
0,2345679. Nous ne souhaitons conserver que les deux premires valeurs aprs la virgule, cest pourquoi nous extrayons ces chiffres au moyen de la mthode substr().
Lignes 34 36 : nous convertissons les valeurs des secondes, minutes et heures an de ne pas obtenir un afchage sous la forme 1:4:5:30, mais plutt 01:04:05:30. En effet, le calcul des variables des lignes 27 30 renverra toujours des chiffres allant de 0 9 et non de 00 09.
173
Linterface Partie I
Ligne 37 : nous nissons par concatner ces variables spares par deux points, an dafcher le rsultat sur la scne dans le texte dynamique dont le nom de variable est affichageChronometre. Lignes 41 et 42 : nous aurions pu placer ces deux lignes au dbut du script, car elles vont sinitialiser au lancement de lanimation. Ces deux variables vont nous servir mmoriser les temps intermdiaires demands par lutilisateur lorsquil cliquera sur le bouton Mmoriser. La variable tempsMemorises est celle du texte dynamique qui se trouve droite sur la scne. La variable numeroMemoire est celle qui va nous permettre dafcher lnumration gauche des temps mmoriss (gure 10-3). Ligne 43 : ce gestionnaire est donc charg de placer un temps dans le texte dynamique situ droite sur la scne.
Calculer une date

Pour cette tude de cas, nous avons dcoup les explications en deux parties. Une premire animation va vous prsenter un script qui permet de trouver un jour de la semaine partir dune date. Une deuxime animation rutilisera le rsultat de la premire pour dvelopper un programme capable dafcher un calendrier. Les composants de Flash proposent dj un calendrier, dans ce cas pourquoi en refaire un ? Ce nest pas la nalit qui nous a intress dans cette animation, mais plutt le calcul dune date. Puisque nous avions rdig un premier script, nous nous sommes dit que nous navions plus qu aller jusquau bout. De plus, en ayant ce code, il sera plus facile pour vous de personnaliser votre propre calendrier.
Figure 10-4
Cette gure vous montre les deux animations cte cte. Dans la premire, choisissez une date et cliquez sur la che noire qui afche le jour correspondant. Dans la deuxime, choisissez le mois et lanne, les jours sadapteront.
174
Description de chier
Interface/ControleAfchageTemps/TempsCalendrier.a Pour cette premire animation, nous avons plac sur la scne, trois textes dynamiques dont les noms de variables sont leJour, lAnnee et quelJourSemaine. Nous avons galement plac un composant de type comboBox dont le nom doccurrence est menu_mois. Le script est compos de quatre parties : Linitialisation des variables et tableaux ncessaires pour le calcul de la date. La cration de deux fonctions charges de vrier si une anne est bissextile et de calculer le jour de la date recherche. Lassignation dun gestionnaire loccurrence qui demandera lexcution du calcul de la date. La programmation du menu droulant qui afche les mois.
Script
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 //------ Formule de Gauss var leJour = 1 var leMois = 1 var lAnnee = 2005 var codeDuMois = [1, 4, 4, 0, 2, 5, 0, 3, 6, 1, 4, 6]; // siecles [18, 19, 20, 21,22];//18 pour 1800 var codesDuSiecle = [2, 0, 6, 4, 2]; var codeDuJourSemaine = ["Samedi", "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi"]; // estCeAnneeBissextile = function (annee) { if (annee%4 == 0) { if (annee%100 == 0) { if (annee%400 == 0) { return true; } return false; } return true; } else { return false; } }; // calculJour = function (jour, mois, annee) { jour = Number(jour); mois = Number(mois); annee = Number(annee); //
175
Linterface Partie I
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
if (estCeAnneeBissextile(annee)) { codeDuMois[0] = 0; codeDuMois[1] = 3; } var mois = codeDuMois[mois-1]; var traitementAnnee = new String(annee); var derChiffresAnnee = traitementAnnee.substr(2, 2); var premChiffresAnnee = traitementAnnee.substr(0, 2); var numeroSiecle = codesDuSiecle[premChiffresAnnee-18]; var div4 = Math.floor(derChiffresAnnee/4); var addition = jour+mois+numeroSiecle+Number(derChiffresAnnee)+div4; var jourNumerique = addition%7; return codeDuJourSemaine[jourNumerique]; }; // bt_calcul.onPress = function() { quelJourSemaine = calculJour(leJour, leMois, lAnnee); }; // //Si anne bissextile : Janvier 0 fvrier 3 // //1er fvrier 1996 // 1 + 3 + 0 + 96 + 24 = 124 // 1 (1er) + 3 (fvrier en anne bissextile) + 0 de 1900 +96 de 1996 + 24 est arrondi de 96/4 // 124%7 = 5 // 5 donc jeudi // var listeMois = ["Janvier", "Fvrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aot", "Septembre", "Octobre", "Novembre", "Dcembre"]; for (i=0; i<listeMois.length; i++) { menu_mois.addItem(listeMois[i]); } menu_mois.rowCount = listeMois.length; menu_mois.setStyle("themeColor", "haloOrange"); menu_mois.setStyle("color", 0x5E685B); menu_mois.setStyle("backGroungColor", 0x00FFff); // gestionListeDeroulante = new Object(); gestionListeDeroulante.change = function(resultat) { leMois = resultat.target.selectedIndex+1; }; menu_mois.addEventListener("change", gestionListeDeroulante);
Analyse
Avant dentrer dans les explications de cette animation, prcisons que nous avons cherch une formule sur Internet qui puisse nous aider calculer une date. La formule de Gauss est celle qui est le plus souvent propose sur les diffrents sites traitant de ce sujet.
176
Le principe est daffecter un code chaque mois, un code chaque sicle, et de vrier si une anne est bissextile. Lignes 1 4 : nous initialisons trois variables qui vont nous servir pour un premier calcul de date, si lutilisateur clique directement sur le bouton de calcul (la che noire sur la scne) sans avoir propos de mois, danne et de jour. Ligne 5 : ce tableau contient les 12 codes (les valeurs) associs chaque mois de lanne pour effectuer le calcul de date. Ligne 7 : ce tableau contient les cinq codes (les valeurs) associs chaque sicle allant de 1800 2200 pour effectuer le calcul de date. Ligne 8 : enn, un dernier tableau contient les jours de la semaine dans un ordre prcis. Ligne 10 : nous crons une premire fonction qui va nous permettre de savoir si lanne calculer est une anne bissextile. Ligne 11 : ce test value si le calcul de lanne divise par quatre est un entier ou renvoie un chiffre avec des virgules. Ligne 12 : nous faisons la mme vrication avec une division par 100. Ligne 13 : nous faisons nouveau le mme calcul avec une division par 400. Ligne 14 : si toutes ces divisions renvoient un entier, la fonction renverra true. Ligne 16 : la valeur false sera renvoye si seuls les deux premiers tests savrent. Ligne 18 : la valeur false sera renvoye si seul le premier test savre. Ligne 20 : la valeur false sera renvoye si aucun des tests ne savre. Ligne 24 : cette deuxime fonction va procder au calcul. Lignes 25 27 : comme nous navons pas typ nos variables, nous les convertissons en nombre grce la fonction Number(). Lignes 29 32 : si lanne recherche est une anne bissextile, nous changeons les valeurs des entres 0 et 1 du tableau codeMois. Ligne 33 : pour le calcul de la ligne 39, nous allons chercher le code du mois. Ligne 34 : lutilisateur va saisir une anne sur la scne. Celle-ci est compose de 2 parties (par exemple : lanne 67 du sicle 1800 pour 1867). Nous allons avoir besoin de connatre le code du sicle et celui de lanne (de ce sicle). Nous prparons donc une instance de la classe String() an dutiliser la mthode substr() aux lignes 35 et 36. Ligne 35 : nous stockons dans une variable intitule derChiffresAnnee les deux derniers chiffres de lanne propose par lutilisateur. Ligne 36 : nous stockons dans une deuxime variable intitule premChiffresAnnee les deux premiers chiffres de lanne propose par lutilisateur. Ligne 37 : comme nous lavons fait la ligne 33, nous allons rechercher le code ncessaire au calcul dans le tableau codeDuSiecle. Comme le chiffre 18 correspond lindex 0 de ce
177
Linterface Partie I
tableau, cela explique la raison pour laquelle nous retirons cette valeur. Si notre tableau contenait 23 chiffres de 0 22, nous naurions pas eu besoin de faire cette soustraction. Ligne 38 : nous avons besoin dun dernier paramtre avant de faire le calcul de la date. Calculer la valeur de la division de lanne par 4. Ligne 39 : nous procdons au calcul de la somme de toutes les valeurs que nous avons obtenues jusqu prsent, et nous stockons le rsultat dans une variable intitule addition. Ligne 40 : dans une dernire variable, nous calculons le reste de la division de la variable addition par 7. Pour tre plus prcis, nous utilisons modulo.
Rappel
Loprateur Modulo permet de calculer le reste dune division de la faon suivante : 1. 17 3 renvoie 5,666. 2. Nous multiplions larrondi du rsultat par 3. On obtient 3 x 5 qui renvoie 15. 3. On soustrait 15 17, on obtient alors 2.
Ligne 41 : nous demandons la fonction de renvoyer le rsultat. Lignes 44 46 : nous assignons un gestionnaire onPress loccurrence bt_calcul (la che noire sur la scne), pour excuter le calcul du jour. Ligne 56 : nous crons un tableau qui va servir de contenu pour le menu droulant. Lignes 57 59 : nous remplissons le menu droulant avec le tableau cr la ligne 56. Lignes 60 63 : nous dnissons lapparence du menu droulant. Lignes 65 69 : nous programmons le menu droulant an quil stocke dans la variable intitule leMois, lindex du jour slectionn. Nous ajoutons 1 au rsultat car lindex du mois de fvrier est 1, alors quil sagit du deuxime mois de lanne. Au cas o vous lauriez oubli, rappelons que la premire entre dun tableau porte lindex 0.
Prcision
Si vous ntes pas familiaris avec les composants, consultez le chapitre 6 de ce livre qui traite des composants.
Bogue ventuel
Noubliez pas la ligne 69 qui permet dactiver la surveillance lie au menu droulant. Comme nous lvoquions en introduction cette tude de cas, voici la deuxime animation qui va vous permettre dafcher un calendrier sur la scne. Il ne propose aucune interactivit au clic sur une date, nous vous indiquerons nanmoins lemplacement des lignes dinstructions ajouter pour tendre les possibilits de notre calendrier.
178
Dvelopper un calendrier
Chemin daccs : Interface/ControleAfchageTemps/TempsCalendrier2.a Pour cette deuxime animation, nous avons construit sur la scne, un symbole qui contient les lments suivants :
Figure 10-5
Le calendrier est contenu dans un symbole an quil puisse tre mobile sur la scne. De ce fait, les variables et boutons qui le contrlent se trouvent dans ce symbole. Voici les noms de variables et doccurrences.
Script
Nous nallons analyser que les lignes 1 16, 27 et 28, 69 125. Le reste du script a dj t expliqu dans lanalyse prcdente.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var enX = 0; var enY = 19; for (i=0; i<=41; i++) { calendrier.attachMovie("unite", "cel"+i, i); calendrier["cel"+i]._x = enX; calendrier["cel"+i]._y = enY; calendrier["cel"+i].onPress = function() { calendrier.selectionCase._x = this._x; calendrier.selectionCase._y = this._y; }; enX += 18; if (enX>=126) { enX = 0; enY += 18; } }
179
Linterface Partie I
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
// //Formule de Gauss (1777-1855) Mathmaticien, astronome et physicien allemand var leJour = 1; var leMois = 1; var lAnnee = 2005; var codeDuMois = [1, 4, 4, 0, 2, 5, 0, 3, 6, 1, 4, 6]; // siecles [18, 19, 20, 21,22];//18 pour 1800 var codesDuSiecle = [2, 0, 6, 4, 2]; var codeDuJourSemaine = ["Samedi", "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi"]; // var nbrJoursMois = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var limiteJoursMois; // estCeAnneeBissextile = function (annee) { if (annee%4 == 0) { if (annee%100 == 0) { if (annee%400 == 0) { return true; } return false; } return true; } else { return false; } }; // calculJour = function (jour, mois, annee) { jour = Number(jour); mois = Number(mois); annee = Number(annee); // if (estCeAnneeBissextile(annee)) { codeDuMois[0] = 0; codeDuMois[1] = 3; limiteJoursMois = 29; } else { codeDuMois[0] = 1; codeDuMois[1] = 4; limiteJoursMois = 28; } var mois = codeDuMois[mois-1]; var traitementAnnee = new String(annee); var derChiffresAnnee = traitementAnnee.substr(2, 2); var premChiffresAnnee = traitementAnnee.substr(0, 2); var numeroSiecle = codesDuSiecle[premChiffresAnnee-18]; var div4 = Math.floor(derChiffresAnnee/4); var addition = jour+mois+numeroSiecle+Number(derChiffresAnnee)+div4; var jourNumerique = addition%7; return codeDuJourSemaine[jourNumerique]; };
180
68 // 69 var semaine = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"]; 70 var listeMois = ["Janvier", "Fvrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aot", "Septembre", "Octobre", "Novembre", "Dcembre"]; 71 // 72 remplirCalendrier = function (jour, mois, annee) { 73 calendrier.aff_mois = listeMois[mois-1]; 74 calendrier.aff_annee = annee; 75 var premierJour = calculJour(jour, mois, annee); 76 limiteJoursMois = nbrJoursMois[mois-1]; 77 if (estCeAnneeBissextile(annee) && mois == 2) { 78 limiteJoursMois = 29; 79 } 80 // Pas inverser ces 2 lignes 81 for (i=0; i<=6; i++) { 82 calendrier["cel"+i].numeroJour = ""; 83 if (semaine[i] == premierJour) { 84 calendrier["cel"+i].numeroJour = "1"; 85 debutMois = i; 86 } 87 } 88 for (i=debutMois, j=1; j<=limiteJoursMois; i++, j++) { 89 calendrier["cel"+i].numeroJour = j; 90 } 91 for (i=limiteJoursMois+debutMois; i<=41; i++) { 92 calendrier["cel"+i].numeroJour = ""; 93 } 94 }; 95 // 96 var dateActuelle = new Date(); 97 quelMois = dateActuelle.getMonth()+1; 98 quelleAnnee = dateActuelle.getFullYear(); 99 remplirCalendrier(1, quelMois, quelleAnnee); 100 // 101 calendrier._alpha = 60; 102 // 103 calendrier.ajout_mois.onPress = function() { 104 quelMois++; 105 if (quelMois>=13) { 106 quelMois = 1; 107 } 108 remplirCalendrier(1, quelMois, quelleAnnee); 109 }; 110 calendrier.supp_mois.onPress = function() { 111 quelMois--; 112 if (quelMois<=0) { 113 quelMois = 12; 114 } 115 remplirCalendrier(1, quelMois, quelleAnnee); 116 }; 117 // 118 calendrier.ajout_annee.onPress = function() {
181
Linterface Partie I
119 quelleAnnee++; 120 remplirCalendrier(1, quelMois, quelleAnnee); 121 }; 122 calendrier.supp_annee.onPress = function() { 123 quelleAnnee--; 124 remplirCalendrier(1, quelMois, quelleAnnee); 125 };
Analyse
Pour raliser ce calendrier, nous avons eu besoin de plusieurs lments : Des occurrences (triangles noirs) qui vont nous permettre de slectionner un mois et une anne. Un symbole qui contient un texte dynamique intitul numeroJour et qui va tre plac 30 ou 31 fois dans le calendrier (sauf en fvrier). Lorsque lutilisateur cliquera sur un jour du mois, une petite case jaune (une occurrence carr et jaune) viendra se placer au mme endroit que la souris. Il sagit dune occurrence de forme carre et jaune. Comme vous le montre la gure 10-6, nous partons dun symbole qui ne contient que les boutons de slection des mois et annes, ainsi que les variables ncessaires lafchage de ces informations. Nous avons un symbole dont le nom de liaison est unite. Il va tre plac dans le calendrier et nous remplirons alors les valeurs du mois et de lanne correspondants.
Figure 10-6
Les numros de jours sont obtenus par la cration en boucle de plusieurs occurrences issues du symbole reprsent entre les deux premiers calendriers ce cette gure.
Si vous observez bien le calendrier, il y a 6 lignes de 7 jours, ce qui nous fait un total de 42 cellules. Nous allons donc utiliser une boucle for() pour construire ce quadrillage . La largeur du symbole qui contient pour linstant le chiffre 23 est de 18 pixels, sa hauteur est de 19 pixels. Nous allons placer la premire occurrence 0 pixel du bord gauche du calendrier et 19 pixels du haut du calendrier. Ligne 1 : nous initialisons cette variable dont la valeur va sincrmenter chaque nouvelle occurrence place dans le calendrier. Elle va dnir la position horizontale des occurrences.
182
Ligne 2 : cette deuxime variable va dnir les positions verticales. Lignes 3 6 : nous procdons au placement du symbole an dobtenir 42 occurrences.
Remarque
Nous aurions pu utiliser la syntaxe suivante an de ne pas utiliser les lignes 5 et 6 :
calendrier.attachMovie("unite", "cel"+i, i, {_x:enX, _y:enY});
Ligne 7 : nous assignons un gestionnaire chaque occurrence place sur la scne. Dans ltat actuel de cette animation, un clic sur une date se contente donc uniquement de dplacer un cadre jaune. Cest donc partir de la ligne 10 quil faudrait ajouter les lignes dinstructions rendant ce calendrier interactif. Ligne 11 : nous nutilisons pas i pour dcaler la position horizontale des occurrences, mais la variable que nous avons prsente la ligne 1. Ligne 12 : si la valeur de la variable enX dpasse 126, cest que les 7 jours dune ligne ont t cres. Nous devons donc rinitialiser cette variable an de dmarrer une nouvelle srie de 7 jours. Ligne 14 : nous devons dcaler le placement vertical de cette nouvelle ligne. Ligne 27 : nous allons avoir besoin de connatre quel est le dernier jour du mois afcher dans le calendrier : ce tableau contient donc cette information. Ligne 28 : cette variable contiendra la valeurs dune des entres de ce tableau. Ligne 69 : nous crons un tableau qui contient les jours dune semaine en commenant par Lundi et non Dimanche. Ligne 72 : nous crons une fonction charge de remplir le texte dynamique contenu dans les occurrences que nous venons de crer aux lignes 3 6. Lignes 73 et 74 : nous commenons par afcher le mois et lanne dans les deux textes dynamiques intituls aff_mois et aff_annee. Ligne 75 : nous calculons le premier jour du mois recherch. Ligne 76 : nous mmorisons le nombre de jours contenus dans le mois. Lignes 77 79 : nous rednissons le nombre de jours du mois de fvrier sil sagit dune anne bissextile. Lignes 81 et 82 : nous vidons la premire ligne du calendrier. Lignes 83 86: nous cherchons savoir si le premier jour du mois correspond lune des 7 premires cellules de notre calendrier. Si tel est le cas, on stocke dans une variable intitule debutMois la valeur de i. Lignes 88 90 : nous remplissons le calendrier avec les numros des jours. Lignes 91 93 : nous effaons les numros qui dpassent le dernier jour du mois. Si nous nexcutons pas ces lignes dinstructions, le calendrier ne sarrtera pas 30 ou 31 jours, mais afchera des valeurs suprieures jusqu la 42e cellule.
183
Linterface Partie I
Lignes 96 99 : ces lignes permettent seulement de remplir le tableau avec la date laquelle cette animation est excute. Ligne 101 : nous rendons le calendrier lgrement transparent an quil laisse apparatre ce qui se trouve sur la scne. Lignes 103 125 : nous programmons les boutons contenus dans le calendrier an de pouvoir incrmenter ou diminuer les valeurs des mois et annes. Dans chaque gestionnaire, on gre donc le dpassement des valeurs et lon excute la fonction de remplissage du calendrier.
Remarque
Le calendrier est mobile car il contient deux gestionnaires sur la premire image-cl de sa timeline.
Cette animation dmontre quil est relativement simple de crer son propre calendrier. Vous pouvez changer les valeurs des variables enX et enY pour espacer davantage les dates (dans ce cas pensez recalculer la valeur 126 de la ligne 12). Vous pouvez disposer les lments du calendrier dans lordre que vous souhaitez, etc.
Bogues ventuels
Les tests des gestionnaires des lignes 103 125 sont indispensables pour viter des erreurs de calculs dues aux dpassements de ces valeurs.
Temporiser une action

Pour commencer notre analyse, mettons en avant un paradoxe. Normalement, la fonction setInterval() sert en excuter une autre un intervalle rgulier. Dans cette animation, vous allez constater quelle permet de retarder le dclenchement dune fonction.
Remarque
La fonction setTimeout() ne gure pas encore dans laide ofcielle de Macromedia lheure o nous crivons ce livre. Sera-t-elle implmente dans une future mise jour ou dans la prochaine version, nous ne le savons pas encore. Ce qui est sr, cest que vous pouvez lutiliser partir de Flash 8. En voici un exemple :
function afficherMessage(messageTxt) { trace(messageTxt); } setTimeout(afficherMessage, 3000, "Hello tout le monde !");
184
Plus simplement, vous pouvez aussi vous passer du paramtre :

function afficherMessage() { trace("Hello tout le monde !"); } setTimeout(afficherMessage, 3000);
Cette fonction permet dexcuter une fonction une seule fois. Dans cette animation, nous ne lavons pas utilise, car elle ne fonctionne pas avec Flash MX 2004 et elle nest pas ofcielle. Nous allons dmontrer comment il est possible de retarder avec la fonction setInterval() le dclenchement dune fonction, cest pourquoi lanalyse ne portera exceptionnellement que sur certaines lignes.
Figure 10-7
Au lancement de lanimation, les formes de la copie dcran de gauche sont intactes, 5 secondes plus tard, elles sont mlanges.
Description de chier
Interface/ControleAfchageTemps/TempsTemporiserAction.a Cette animation contient deux textes dynamiques dont les noms de variables explicites sont affichageScore et tempsRestant. Loccurrence dun clip intitule barre va peu peu diminuer de taille pour illustrer graphiquement le temps restant avant la n de la partie.
Script
1 2 3 4 5 6 7 barre._xscale = 0; var score = 0; annonce_inst._visible = false; // ecartsH = [5.34999999999999, 24.7, 20.9, 23.75, 16.75, 14.9, 2.69999999999999, 3.14999999999998]; ecartsV = [6.94999999999999, 1.90000000000001, 0, 1.04999999999998, 0, 0, 20.6, 19.05]; //
185
Linterface Partie I
8 programmerFormes = function () { 9 annonce_inst._visible = true; 10 annonceInro_inst._visible = false; 11 for (i=4, j=0; i<=19; i += 2, j++) { 12 aleaX = random(540)+30; 13 aleaY = random(130)+30; 14 _root["instance"+i]._alpha = 50; 15 _root["instance"+i]._x = aleaX; 16 _root["instance"+i]._y = aleaY; 17 _root["instance"+i].numPaire = i+1; 18 _root["instance"+i].ecartH = ecartsH[j]; 19 _root["instance"+i].ecartV = ecartsV[j]; 20 _root["instance"+i].onPress = function() { 21 this.startDrag(0); 22 memoX = this._x; 23 memoY = this._y; 24 }; 25 _root["instance"+i].onRelease = _root["instance"+i]. onReleaseOutside=function () { 26 stopDrag(); 27 paireInst = _root["instance"+this.numPaire]; 28 conditionX = Math.abs(this._x-paireInst._x)<this.ecartH+2; 29 conditionY = Math.abs(this._y-paireInst._y)<this.ecartV+2; 30 if (conditionX && conditionY) { 31 score++; 32 affichageScore=score+"/8" 33 this.enabled = false; 34 if (score == 8) { 35 delete barre.onEnterFrame; 36 } 37 } else { 38 this._x = memoX; 39 this._y = memoY; 40 } 41 }; 42 } 43 // 44 barre.onEnterFrame = function() { 45 this._xscale += 0.1; 46 tempsRestant = 100-Math.round(this._xscale); 47 if (tempsRestant<=0) { 48 delete this.onEnterFrame; 49 for (i=4; i<=19; i++) { 50 _root["instance"+i].enabled = false; 51 } 52 } 53 }; 54 // 55 clearInterval(lancer); 56 }; 57 lancer = setInterval(programmerFormes, 5000);
186
Analyse
La structure du script doit tre trs prcise : Vous devez crer une fonction qui contient un clearInterval() ayant pour paramtre un identiant que vous devez utiliser pour excuter la fonction setInterval(). Excutez une ligne dinstruction contenant la fonction setInterval() associe un identiant que vous allez utiliser avec la fonction clearInterval(). Nous arrivons ainsi au script de cette animation que nous allons simplier pour loccasion :
programmerFormes = function () { //excution de lignes d'instructions //excution de lignes d'instructions clearInterval(lancer); }; lancer = setInterval(programmerFormes, 5000);
Cette technique est donc trs pratique pour retarder le dclenchement dune fonction. Dans cet exemple, la fonction programmerFormes ne sexcutera quau bout de 5 secondes. Si nous regardons de plus prs le script dorigine, nous constatons que les lignes 44 53 contiennent un gestionnaire onEnterFrame. Nous avons en effet demand quau bout des 5 secondes dattente, une autre action sexcute en continu. Nous aurions pu excuter une autre fonction setInterval() cet endroit l.
Rpter une action intervalles rguliers

Le titre est reprsentatif de lanalyse que nous allons faire de cette tude de cas, mais nous aurions tout autant pu choisir le mme que la prcdente. En effet, la notion de contrle du temps et de sa vitesse est primordiale en programmation, mais elle peut surtout se faire de diffrentes manires. Nous avons regroup dans cette animation, les trois techniques de rptition dune action. La boucle for() : on ne peut temporiser lintervalle qui spare deux itrations. Le gestionnaire onEnterFrame : la cadence de rptition se base sur celle de lanimation. La fonction setInterval() : sa vitesse peut tre dnie indpendamment de la cadence de lanimation. La range doccurrences qui se trouve en haut de la scne (puces noires) est dj visible sur la scne au moment o vous lancez lanimation. Une boucle for() a dj t charge
187
Linterface Partie I
de placer ces occurrences lors du chargement de la premire image de la timeline. Pour les deux autres mouvements, nous allons utiliser les deux autres techniques.
Figure 10-8
Nous allons pouvoir contrler dans cette animation, le dclenchement et larrt dune action qui va sexcuter en continu.
Chemin daccs : Interface/ControleAfchageTemps/TempsRepeterAction.a La scne contient cinq occurrences qui vont nous servir lancer les rotations des deux objets (le satellite et le balancier) : btVitesse0, betVitesse1, btVitesse2, btLancerLune et btArreterLune. Les deux occurrences que nous allons contrler sintitulent balancier et lune_inst. Le script de lanimation est compos dautant de parties quil y a dactions contrler : La cration dune fonction qui va tre appele par un setInterval(). La cration dune fonction qui va tre associe au gestionnaire onEnterFrame. La programmation des occurrences qui vont contrler le mouvement de celles qui tournent (le balancier et le satellite). La construction de la srie de puces qui se trouve en haut de la scne, avec lutilisation dune boucle for().
Script
1 2 3 4 5 6 7 8 9 10 11 tourner = function () { balancier._rotation += 3; }; lancer = setInterval(tourner, 10); // btVitesse0.onPress = function() { clearInterval(lancer); }; btVitesse1.onPress = function() { clearInterval(lancer); lancer = setInterval(tourner, 50);
188
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
}; btVitesse2.onPress = function() { clearInterval(lancer); lancer = setInterval(tourner, 10); }; // var coef = 0; luneQuiTourne = function () { coef += 0.1; this._x = 470+Math.cos(coef)*80; this._y = 280+Math.sin(coef)*20; this._xscale = this._yscale=this._y-200; if (this._y<280) { terre_inst.swapDepths(2); lune_inst.swapDepths(1); } else { terre_inst.swapDepths(1); lune_inst.swapDepths(2); } }; // lune_inst.onEnterFrame = luneQuiTourne; // btLancerLune.onPress = function() { lune_inst.onEnterFrame = luneQuiTourne; }; // btArreterLune.onPress = function() { delete lune_inst.onEnterFrame; }; // for (i=0; i<=50; i++) { _root.attachMovie("lune", "lune"+i, i); _root["lune"+i]._x = 50+i*10; _root["lune"+i]._y = 15; _root["lune"+i]._xscale = 20; _root["lune"+i]._yscale = 20; }
Analyse
Lignes 2 4 : cette fonction est appele la ligne 5. Elle est charge dassurer la rotation de loccurrence intitule balancier. Ligne 5 : la fonction setInterval() va excuter en continu, raison de 100 fois par seconde (dans le meilleur des cas), la demande de rotation de 3 degrs de la ligne 3. Ligne 7 : nous programmons loccurrence btVitesse0 an quelle arrte lexcution de la fonction tourner() qui a t demande la ligne 5.
189
Linterface Partie I
Lignes 10 17 : nous programmons deux autres occurrences charges de lancer lexcution de la fonction tourner() au moyen dun setInterval() des vitesse de rptitions diffrentes. Lignes 19 32 : nous crons une fonction charge dassurer le mouvement de rotation de loccurrence intitule lune_inst. Ligne 34 : nous assignons cette fonction au gestionnaire onEnterFrame an que la rotation dmarre au lancement de lanimation. Lignes 36 38 : ce gestionnaire relance la rotation du satellite lorsquelle a t arrte au moyen du gestionnaire de la ligne 40. Lignes 44 50 : nous plaons, sans contrle de temps, 51 occurrences dans le haut de la scne.
Bogue ventuel
Il est indispensable dajouter les instructions des lignes 11 et 15. Dans le cas contraire, les lignes 12 et 16 acclreraient un peu plus chaque clic, la rotation du balancier.
Raliser un planning
Dans la srie des applications grant le temps, il est intressant de pouvoir reprsenter sous forme de planning le droulement des activits sur un mois ou dune priode donne. Nous avons donc ralis cette animation en partant dun chier XML. Prcisons que le code couleur de chaque case est gr partir du chier XML et de lanimation.
Figure 10-9
Un chier XML et une simple animation Flash sufsent pour crer ce planning.
190
Chemin daccs : Interface/ControleAfchageTemps/Planning.a Nous aurions pu partir dun chier vierge pour raliser cette animation, mais nous avons tout de mme plac un texte dynamique sur la scne dont le nom de variable est vMois. Deux lignes de code supplmentaires aurait suf remplacer ce texte dynamique.
Script
1 2 3 4 5 6 // // Initialisation des variables, tableaux et fonctions // var listeDesJours:Array = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; var listeDesMois:Array = ["Septembre", "Octobre", "Novembre", "Dcembre", "Janvier", "Fvrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aot"]; var listeCouleurs:Array = ["0XFFFFFF", "0xE7EDAB", "0xD5E06B", "0xC5D435", "0xAEBD28", "0xEDBFAB", "0xE0906B", "0xD46735", "0xBD5628", "0xC5EDAB", "0x9AE06B", "0x76D435", "0x64BD28", "0xABEDDF", "0x6BE0C8", "0x6BD3B4", "0x28BD9F", "0xABD7ED", "0x6BB9E0", "0x359FD4", "0x288BBD"]; var racine; // function creerCalendrierMois(nbrJours:Number, mois:Number):Void { vMois = listeDesMois[mois]; for (i=0, j=0; i<=nbrJours; i += 2, j++) { _root.attachMovie("barreJour","jour"+(j+1),j,{_y:22+(j*17), _x:3}); _root["jour"+j].jourNom = racine.childNodes[mois].childNodes[i-2].attributes.nomJour; _root["jour"+j].jourNumero = j; _root["jour"+j].matin.vContenu = racine.childNodes[mois].childNodes[i-2] .attributes.matiere; _root["jour"+j].matin.vContenu += " - "+racine.childNodes[mois].childNodes[i-2] .attributes.nom; _root["jour"+j].apMidi.vContenu = racine.childNodes[mois].childNodes[i-1] .attributes.matiere; _root["jour"+j].apMidi.vContenu += " - "+racine.childNodes[mois].childNodes[i-1] .attributes.nom; // _root["jour"+j].matin.couleur = new Color(_root["jour"+j].matin.fond); _root["jour"+j].matin.couleur.setRGB(listeCouleurs[racine.childNodes[mois].childNodes[i-2] .attributes.couleur]); _root["jour"+j].apMidi.couleur = new Color(_root["jour"+j].apMidi.fond); _root["jour"+j].apMidi.couleur.setRGB(listeCouleurs[racine.childNodes[mois].childNodes[i-1] .attributes.couleur]); } _root["jour"+j].removeMovieClip(); }
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
191
Linterface Partie I
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
// function dessinerCalendrier(mois) { // Ajout des attributs nomJour var nbrNoeuds:Number = racine.childNodes[mois].childNodes.length; var premierJour:Number = racine.childNodes[mois].attributes.premierJour; for (i=0; i<nbrNoeuds; i += 2) { racine.childNodes[mois].childNodes[i].attributes.nomJour = listeDesJours[premierJour]; racine.childNodes[mois].childNodes[i+1].attributes.nomJour = listeDesJours[premierJour]; premierJour++; if (premierJour>=7) { premierJour = 0; } } creerCalendrierMois(nbrNoeuds,mois); } // // Charger planning.xml // var chargeplanning:XML = new XML(); chargeplanning.load("planning.xml"); chargeplanning.ignoreWhite = true; chargeplanning.onLoad = function() { racine = this.firstChild; dessinerCalendrier(0); };
Le chier XML fourni avec lanimation est bien plus long que celui que nous vous prsentons ci-dessous : nous lavons raccourci an de ne pas remplir btement plusieurs pages de ce livre. Seule la structure nous intresse et cest pourquoi nous vous prsentons le planning minimum de 3 mois (avec quelques jours uniquement) an de mieux comprendre lorganisation des nuds parents et des nuds enfants.
Script
1 <planning> 2 3 <mois nom="Septembre" premierJour="4"> 4 5 <Jour periode="AM" matiere="Histoire de l'art" nom="Marie DUPONT" couleur="1"/> 6 <Jour periode="PM" matiere="Les grands courants du XXe" nom="Louis LEBRUN" couleur="7"/> 7 8 <Jour periode="AM" matiere="Les techniques d'criture" nom="Marie DUPONT" couleur="1"/> 9 <Jour periode="PM" matiere="Histoire de l'art" nom="Marie DUPONT" couleur="1"/> 10 11 </mois> 12 13 <mois nom="Octobre" premierJour="5"> 14 15 <Jour periode="AM" matiere="Le bleu et le vert" nom="Eva Bella" couleur="1"/>
192
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
<Jour periode="PM" matiere="Techniques anciennes" nom="Herv Jano" couleur="7"/> <Jour periode="AM" matiere="" nom="" couleur="1"/> <Jour periode="PM" matiere="" nom="" couleur="1"/> <Jour periode="AM" matiere="" nom="" couleur="1"/> <Jour periode="PM" matiere="" nom="" couleur="1"/> <Jour periode="AM" matiere="Le bleu et le vert" nom="Eva Bella" couleur="1"/> <Jour periode="PM" matiere="Les techniques d'criture" nom="Gustave SCRIB" couleur="11"/> <Jour periode="AM" matiere="Le bleu et le vert" nom="Eva Bella" couleur="1"/> <Jour periode="PM" matiere="La couleur et la lumire" nom="Marine CLAIRE" couleur="9"/> </mois> <mois nom="Novembre" premierJour="6"> <Jour periode="AM" matiere="Les techniques d'criture" nom="Marie DUPONT" couleur="1"/> <Jour periode="PM" matiere="Techniques anciennes" nom="Herv Jano" couleur="1"/> <Jour periode="AM" matiere="Le bleu et le vert" nom="Eva Bella" couleur="1"/> <Jour periode="PM" matiere="Techniques anciennes" nom="Herv Jano" couleur="7"/> <Jour periode="AM" matiere="Le bleu et le vert" nom="Eva Bella" couleur="1"/> <Jour periode="PM" matiere="La couleur et la lumire" nom="Marine CLAIRE" couleur="9"/> </mois> </planning>
Analyse
Ligne 4 : nous crons un tableau qui contient les jours afcher dans la marge de gauche du planning. Ligne 5 : nous crons galement un tableau qui contient les mois que nous pourrons parcourir. Ce sont les lignes 4 et 5 quil faut traduire dans le cas o vous souhaiteriez grer un planning dans une autre langue. Ligne 6 : cette liste contient les couleurs qui peuvent tre utilises pour le fond des cellules du planning. Lignes 9 26 : cette fonction permet de construire le calendrier sur la scne, cest--dire de placer un mme symbole plusieurs fois pour obtenir les cellules du planning. Vous laurez peut-tre remarqu, mais la fonction que nous nous apprtons dtailler possde des variables locales intitules nbrJours et mois. Ces dernires vont nous servir construire le calendrier partir de valeurs contenues dans un chier XML.
193
Linterface Partie I
Ligne 10 : nous stockons dans la variable vMois, le nom du mois afcher en haut gauche de la scne. Ligne 11 : nous effectuons une boucle avec deux paramtres pour construire chaque ligne du planning compos de deux parties (le matin et laprs-midi). Ligne 12 : cest prcisment cette ligne qui place le symbole, dont le nom de liaison est
barreJour, sur la scne.
Lignes 13 et 14 : elles sont charges dcrire le nom du jour et la date dans les cellules de la colonne de gauche du planning. Lignes 15 et 16 : elles sont charges dcrire la matire et le nom du professeur pour les sances du matin du planning. Lignes 17 et 18 : elles sont charges dcrire la matire et le nom du professeur pour les sances de laprs-midi du planning. Lignes 20 23 : ces lignes vont changer la couleur des cellules correspondant aux sances de laprs-midi et du matin. Lignes 28 41 : la fonction dessinerCalendrier va appeler celle que nous venons danalyser aprs avoir rcupr les donnes contenues dans le chier XML. Observez bien les lignes 30 et 31. Elles sont charges de trouver le nombre de nuds contenus dans le mois afcher et le premier jour utiliser en dbut de mois. Lignes 32 39 : cette boucle for a pour fonction dajouter lattribut nomJour larborescence XML. Il tait en effet inutile de saisir manuellement cette information dans le chier XML, pour chaque jour (chaque nud). Nous nous sommes contents dindiquer le premier jour du mois et cest dans le code que nous ajoutons le nom du jour. Ligne 40 : une fois les jours ajouts, nous construisons le calendrier en appelant la fonction ddie. Ligne 45 : nous crons une instance de la classe XML() pour y stocker le contenu du chier planning.xml. Ligne 46 : nous chargeons le contenu du chier XML dans linstance. Ligne 47 : nous prcisons que les ventuelles lignes vierges (sauts de lignes) contenues dans le chier XML doivent tre ignores. Lignes 48 51 : le contenu de la fonction onLoad sera excut lorsque le chargement du contenu du chier XML dans linstance cre la ligne 45 sera termin. Ligne 49 : lorsque les donnes sont charges, nous stockons le contenu de la racine de larborescence XML dans une variable intitule racine an de faciliter la manipulation des donnes rcupres. Ligne 50 : nous crons le planning.
194
Bogues ventuels
Une fois encore, ce script est assez complexe, et les bogues peuvent tre nombreux. Cest pourquoi, il est fortement conseill de choisir des noms dinstance et de variables reprsentatifs de leur fonctions de stockage.
Planning sur plusieurs mois

Dans cette deuxime animation, nous allons vous dmontrer quen adaptant lgrement le code, vous pouvez visualiser plusieurs mois successivement.
Figure 10-10
Deux boutons situs gauche et droite du nom du mois en cours sufsent pour naviguer de mois en mois.
Chemin daccs : Interface/ControleAfchageTemps/Planning2.a la diffrence de lanimation prcdente, nous avons plac deux occurrences supplmentaires pour reprsenter les ches de navigation (mois prcdent et mois suivant). Nous les avons intitules btMoisAvant et btMoisApres.
Script
// // Initialisation des variables, tableaux et fonctions // var listeDesJours:Array = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; var listeDesMois:Array = ["Septembre", "Octobre", "Novembre", "Dcembre", "Janvier", "Fvrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aot"]; 6 var listeCouleurs:Array = ["0XFFFFFF", "0xE7EDAB", "0xD5E06B", "0xC5D435", "0xAEBD28", "0xEDBFAB", "0xE0906B", "0xD46735", "0xBD5628", "0xC5EDAB", "0x9AE06B", "0x76D435", "0x64BD28", "0xABEDDF", "0x6BE0C8", "0x6BD3B4", "0x28BD9F", "0xABD7ED", "0x6BB9E0", "0x359FD4", "0x288BBD"]; 1 2 3 4 5
195
Linterface Partie I
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 function effacerMoisEnCours() { 45 for (i=0; i<=31; i++) { 46 _root["jour"+i].removeMovieClip(); 47 } 48 }
var racine; var moisEnCours = 0; // function creerCalendrierMois(nbrJours:Number, mois:Number):Void { vMois = listeDesMois[mois]; for (i=0, j=0; i<=nbrJours; i += 2, j++) { _root.attachMovie("barreJour","jour"+(j+1),j,{_y:22+(j*17), _x:3}); _root["jour"+j].jourNom = racine.childNodes[mois].childNodes[i-2] .attributes.nomJour; _root["jour"+j].jourNumero = j; _root["jour"+j].matin.vContenu = racine.childNodes[mois].childNodes[i-2] .attributes.matiere; _root["jour"+j].matin.vContenu += " - "+racine.childNodes[mois].childNodes[i-2] .attributes.nom; _root["jour"+j].apMidi.vContenu = racine.childNodes[mois].childNodes[i-1] .attributes.matiere; _root["jour"+j].apMidi.vContenu += " - "+racine.childNodes[mois].childNodes[i-1] .attributes.nom; // _root["jour"+j].matin.couleur = new Color(_root["jour"+j].matin.fond); _root["jour"+j].matin.couleur.setRGB(listeCouleurs[racine.childNodes[mois] .childNodes[i-2].attributes.couleur]); _root["jour"+j].apMidi.couleur = new Color(_root["jour"+j].apMidi.fond); _root["jour"+j].apMidi.couleur.setRGB(listeCouleurs[racine.childNodes[mois].childNodes[i-1] .attributes.couleur]); } _root["jour"+j].removeMovieClip(); } // function dessinerCalendrier(mois) { // Ajout des attributs nomJour var nbrNoeuds:Number = racine.childNodes[mois].childNodes.length; var premierJour:Number = racine.childNodes[mois].attributes.premierJour; for (i=0; i<nbrNoeuds; i += 2) { racine.childNodes[mois].childNodes[i].attributes.nomJour = listeDesJours[premierJour]; racine.childNodes[mois].childNodes[i+1].attributes.nomJour = listeDesJours[premierJour]; premierJour++; if (premierJour>=7) { premierJour = 0; } } creerCalendrierMois(nbrNoeuds,mois); }
196
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
// // Charger planning.xml // var chargeplanning:XML = new XML(); chargeplanning.load("planning.xml"); chargeplanning.ignoreWhite = true; chargeplanning.onLoad = function() { racine = this.firstChild; dessinerCalendrier(moisEnCours); }; // btMoisApres.onPress = function() { if (moisEnCours<11) { moisEnCours++; } effacerMoisEnCours(); dessinerCalendrier(moisEnCours); }; // btMoisAvant.onPress = function() { if (moisEnCours>0) { moisEnCours--; } effacerMoisEnCours(); dessinerCalendrier(moisEnCours); };
Analyse
Si vous ne lavez pas encore fait, consultez lanalyse de lanimation prcdente car nous naborderons ici que les diffrences qui rsultent de lajout de code. Ligne 8 : nous allons avoir besoin de naviguer de mois en mois ; nous devons donc connatre le mois en cours pour pouvoir passer au prcdent ou au suivant. Lignes 43 47 : avant de construire un planning compos de plusieurs occurrences (3 par jour), nous devons tout dabord supprimer celles que nous avions pralablement places sur la scne. Lignes 60 74 : nous terminons par lajout de deux gestionnaires dvnements chargs dappeler les fonctions qui vont supprimer et construire le nouveau planning.
Bogues ventuels
Dans les deux gestionnaires des lignes 60 74, nous avons ajout deux tests an de vrier si les limites des mois sont atteintes. Sans cette vrication, nous rencontrerions un bogue.
197
11
Dplacement de personnages ou dobjets
Avec la partie consacre la construction dynamique dinterface, celle-ci est lune des plus importantes. En effet, si vous devez dvelopper un jour une application telle quun jeu, il y a de fortes chances que lune des nombreuses techniques proposes dans ces tudes de cas vous soit utile ! Rassurez-vous, les animations proposes dans cette partie ne se limitent pas lapprentissage de techniques ddies aux jeux. Drouler un menu, nest-ce pas une occurrence que vous dplacez sur la scne ?
Linterface Partie I
Dplacement par clics

Le but du jeu de cette animation est de cliquer sur les quatre cercles vert fonc et les trois croix jaunes. Vous devez parcourir le moins de kilomtres possible en un minimum de clics.
Figure 11-1
Cliquez sur les ronds et les croix de cette carte pour vous rendre dessus.
Chemin daccs : Interface/Deplacements/DeplacementClics.a En haut droite de la scne, nous avons plac trois textes dynamiques dont les noms de variables sont distance, tresors et villes. Les occurrences des ronds vert fonc et des croix jaunes sintitulent croix1 croix3 et ville1 ville4. Une dernire occurrence intitule perso va se dplacer de clic en clic, il sagit du rond vert fonc situ au centre de la scne. Le script de cette animation comporte trois parties : linitialisation des variables utilises dans cette animation ; la cration dun clip vide contenant le trac du parcours effectu par le personnage ; la gestion du dplacement au travers des lignes 10 39.
200
Dplacement de personnages ou dobjets Chapitre 11
Script
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 var destX = 0; var destY = 0; var distance = 0; var tresors = 0; var villes = 0; // _root.createEmptyMovieClip("traceTrajet", 1); traceTrajet.lineStyle(3, 0xCC0000, 20); traceTrajet.moveTo(perso._x, perso._y); this.onMouseDown = function() { destX = _root._xmouse; destY = _root._ymouse; this.onEnterFrame = function() { perso._x += (destX-perso._x)*0.1; perso._y += (destY-perso._y)*0.1; distance += 0.1; traceTrajet.lineTo(perso._x, perso._y); if (Math.abs(destX-perso._x)<1 && Math.abs(destY-perso._y)<1) { delete this.onEnterFrame; for (i=1; i<=4; i++) { if (perso.hitTest(_root["croix"+i])) { _root["croix"+i]._x = -100; _root["croix"+i]._y = -100; tresors++; } if (perso.hitTest(_root["ville"+i])) { villes++; } } if (tresors+villes>=7) { _root.attachMovie("gagne", "gagne", 2); gagne._x = 520; gagne._y = 120; distance_inst.background = true; distance_inst.backgroundColor = "0xFFFF00"; } } }; };
Analyse
Lignes 1 5 : nous initialisons les variables utilises dans lanimation. Ligne 7 : sur la scne, nous crons une occurrence de clip vide an de pouvoir lui dnir un type de trait (ligne 8).
201
Linterface Partie I
Ligne 9 : nous dnissons le point de dpart du trait aux coordonnes de loccurrence perso. Ligne 10 : ce gestionnaire va assurer la gestion du dplacement, la vrication du passage du personnage sur les trsors et dans les villes. Lignes 11 et 12 : dans deux variables, nous stockons les coordonnes du clic sur la scne. Ligne 13 : le gestionnaire onEnterFrame va permettre dexcuter en continu les lignes dinstructions quil contient. Lignes 14 et 15 : le dplacement du personnage est calcul par rapport sa position actuelle et celle du clic mmorise aux lignes 11 et 12. Ligne 16 : nous comptabilisons le nombre de kilomtres parcourus par le personnage. Ligne 17 : nous traons une droite entre chaque couple de clics sur la scne. Pour tre plus prcis, nous dnissons un trait en continu entre la nouvelle position du personnage (lorsquil se dplace entre deux clics) et son dernier emplacement sur une ville ou un trsor. Ligne 18 : nous effectuons un test pour savoir si le personnage sest immobilis sur la scne et : sil sest arrt sur un trsor (ligne 21 25) ; sil sest arrt sur une ville (lignes 26 28) ; sil sest arrt toutes les villes et a dcouvert tous les trsors. Pour comptabiliser ces passages et dcouvertes, nous incrmentons deux variables aux lignes 24 et 27. Sil est pass par les 7 tapes, nous afchons Gagn sur la scne (lignes 31 33) et nous changeons la couleur du texte dynamique qui contient le nombre de kilomtres parcourus. Allons plus loin avec la classe Tween() Ce sont les lignes 11, 12, 14 et 15 qui nous permettent dobtenir le dplacement au clic grce au gestionnaire onPress. Pour obtenir des effets diffrents, vous pourriez remplacer les lignes 11 et 12 par celles qui suivent :
new Tween(tache, "_x", Strong.easeOut, tache._x, this._xmouse, 1, true); new Tween(tache, "_y", Strong.easeOut, tache._y, this._ymouse, 1, true);
Si vous utilisez ces deux lignes dinstructions, vous devrez dans ce cas ajouter les deux suivantes au dbut de votre script.
import mx.transitions.Tween; import mx.transitions.easing.*;
202
Le tableau 11-1 prsente les diffrents types dacclrations ainsi que les mthodes qui les accompagnent.
Tableau 11-1 Acclrations et mthodes utiliser avec la classe Tween()
Types dacclrations Description
Utilis avec easeIn, loccurrence recule lgrement avant dentamer sa transition. Avec easeOut, loccurrence glisse au-del de son point de destination avant de revenir sa place. Utilis avec easeIn, loccurrence rebondit 4 fois avant dentamer sa transition. Avec easeOut, loccurrence effectue sa transition et rebondit 4 fois arrive son point de destination. Comparable lacclration de type Bounce, le rebond ne butte pas sur un point, mais dpasse le point darrive ou de dpart. Utilis avec easeOut, leffet obtenu est celui qui est trs souvent utilis dans les animations pour le placement doccurrences avec un ralentissement lastique. Effectue une transition normale entre deux points. easeIn, permet dobtenir une acclration. easeOut permet dobtenir un ralentissement comparable celui qui a t programm aux lignes 11, 12, 14 et 15 de cette animation. Utilis avec easeIn, la transition dmarre plus lentement quavec le type dacclration Regular. Cest linverse avec la mthode easeOut, loccurrence dmarre sa transition plus rapidement. Permet de ne pas prciser de type dacclration.
Back
Bounce
Elastic
Regular
Strong
None
Bogue ventuel
la ligne 19, vous noterez la prsence de loprateur delete qui annule lexcution du gestionnaire onEnterFrame. Il est en effet indispensable de prvenir le player Flash de ne plus calculer la distance qui spare le personnage de sa destination lorsque ce dernier se trouve dessus.
Dplacement par glisser-dplacer

Cette animation aurait pu se retrouver dans le chapitre consacr aux jeux. En effet, le but de cette animation est de dplacer des occurrences sur la scne. Nous avons voulu donner un sens ces dplacements en inventant la rgle suivante. Lorsquun joueur dplace un pion de la couleur quil a choisie au dbut de la partie, ct dun autre de couleur oppose, ce dernier disparat. Il faut donc essayer den supprimer plusieurs la fois tout en faisant attention ne pas se rapprocher trop prs des siens. Cela faciliterait en effet la suppression de plusieurs pions de votre couleur par le joueur adverse.
203
Linterface Partie I
Figure 11-2
Dplacez un pion de votre couleur ct ou sur un autre pion de la couleur oppose, an de le faire disparatre.
Rappel
Vous ne pouvez supprimer une occurrence de la scne, qu partir du moment o elle a t place dynamiquement dans lanimation au moyen des mthodes attachMovie() et duplicateMovieClip().
Chemin daccs : Interface/Deplacements/DeplacementGlisserDeplacer.a Cette animation ne contient pas doccurrences sur la scne car elles vont tre places dynamiquement. Seuls des textes dynamiques y ont t dposs. Les deux du haut contenant les couleurs des joueurs ont les noms doccurrences suivants : titreBlancs et titreNoirs. Pour comptabiliser les mouvements et les points de chaque joueur, nous avons plac quatre autres textes dynamiques sur la scne dont les noms de variables sont : mouvementsNoirs, mouvementsBlancs, eliminesBlancs, eliminesNoirs. Nous avons plac un script sur la scne et un autre lintrieur du seul symbole que compte cette animation. Nous aurions pu crire un script dun seul tenant, mais pour
204
faciliter la comprhension de lanimation, nous avons opt pour cette solution car cela spare le code de construction de linterface de celui de la gestion des pions et des mouvements.
Script
Script sur la premire image-cl de la timeline principale :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 var var var var // for mouvementsBlancs = 0; mouvementsNoirs = 0; eliminesBlancs = 0; eliminesNoirs = 0; (i=0, j=20; i<=10; i++, j++) { _root.attachMovie("pion", "pionnoir"+i, i); _root["pionnoir"+i]._x = random(420)+85; _root["pionnoir"+i]._y = random(270)+65; _root["pionnoir"+i].codeCouleur = 0; // _root.attachMovie("pion", "pionblanc"+i, j); _root["pionblanc"+i]._x = random(420)+85; _root["pionblanc"+i]._y = random(270)+65; _root["pionblanc"+i].codeCouleur = 1;
} // var joueur = 1; joueursTour = function (equipeOn, equipeOff) { _root[equipeOn].background = true; _root[equipeOn].backgroundColor = 0xFFFF00; _root[equipeOff].background = false; }; joueursTour("titreBlancs", "titreNoirs");
Script sur limage-cl 1 de la timeline de lunique symbole de lanimation :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 this._alpha = 80; this.couleur = new Color(this); switch (codeCouleur) { case 0 : this.couleur.setRGB(0x9EA79C); break; case 1 : this.couleur.setRGB(0xFFFFFF); break; } this.onPress = function() { if(this.codeCouleur==_root.joueur) { this.startDrag(); } };
205
Linterface Partie I
16 this.onRelease = this.onReleaseOutside=function () { 17 stopDrag(); 18 if (codeCouleur == 0) { 19 _root.joueursTour("titreBlancs", "titreNoirs"); 20 _root.joueur=1 21 _root.mouvementsNoirs++; 22 for (i=0; i<=10; i++) { 23 ecartX = Math.abs(_root["pionblanc"+i]._x-this._x); 24 ecartY = Math.abs(_root["pionblanc"+i]._y-this._y); 25 if (Math.abs(ecartX)<35 && Math.abs(ecartY)<35) { 26 _root["pionblanc"+i].removeMovieClip(); 27 _root.eliminesBlancs++; 28 } 29 if (this._name != "pionnoir"+i) { 30 ecartXNoir = Math.abs(_root["pionnoir"+i]._x-this._x); 31 ecartYNoir = Math.abs(_root["pionnoir"+i]._y-this._y); 32 if (Math.abs(ecartXNoir)<35 && Math.abs(ecartYNoir)<35) { 33 _root.eliminesNoirs++; 34 this.removeMovieClip(); 35 } 36 } 37 } 38 } 39 if (codeCouleur == 1) { 40 _root.joueursTour("titreNoirs", "titreBlancs"); 41 _root.joueur=0 42 _root.mouvementsBlancs++; 43 for (i=0; i<=10; i++) { 44 ecartX = Math.abs(_root["pionnoir"+i]._x-this._x); 45 ecartY = Math.abs(_root["pionnoir"+i]._y-this._y); 46 if (Math.abs(ecartX)<35 && Math.abs(ecartY)<35) { 47 _root["pionnoir"+i].removeMovieClip(); 48 _root.eliminesNoirs++; 49 } 50 if (this._name != "pionblanc"+i) { 51 ecartXBlanc = Math.abs(_root["pionblanc"+i]._x-this._x); 52 ecartYBlanc = Math.abs(_root["pionblanc"+i]._y-this._y); 53 if (Math.abs(ecartXBlanc)<35 && Math.abs(ecartYBlanc)<35) { 54 _root.eliminesBlancs++; 55 this.removeMovieClip(); 56 } 57 } 58 } 59 } 60 };
206
Analyse
Nous nous apprtons placer 22 occurrences sur la scne. Nous disposons dun seul symbole et pourtant, 11 des occurrences seront blanches alors que les autres seront noires (vert fonc). Pour chaque occurrence, nous allons dnir une variable qui sera alors lue par loccurrence au moment o elle sera place sur la scne, et qui rglera sa couleur. Commenons donc par analyser le code qui se trouve sur la scne de lanimation. Lignes 1 4 : nous initialisons les variables des textes dynamiques prsents sur la scne. Ligne 6 : nous allons utiliser une boucle for() pour placer 22 occurrences sur la scne. Lignes 7 9 : nous plaons 11 premires occurrences, dont les noms sont pionnoir0
pionnoir10.
Ligne 10 : nous reviendrons sur cette ligne lors de lanalyse des lignes 2 10 du script suivant. Lignes 12 15 : nous replaons 11 autres occurrences sur la scne, leurs noms seront pionblanc0 pionblanc10. Ligne 18 : nous initialisons cette variable qui va nous servir dterminer quel joueur doit bouger un pion. Lignes 19 23 : cette fonction permet de changer la couleur de fond des textes dynamiques qui contiennent les textes BLANCS et NOIRS dans le haut de la scne. Cela sert indiquer le tour du joueur qui doit bouger un pion. Ligne 24 : cette fonction est excute une premire fois. Nous allons prsent passer lanalyse du script contenu dans le symbole du pion. Il est important de rappeler cette occasion que ce script sexcutera 22 fois pour chaque occurrence. Ligne 1 : nous rendons toutes les occurrence transparentes hauteur de 80 %. Ligne 2 : nous crons une instance de la classe Color() dans chacun des pions, an de grer les couleurs de chaque occurrence. Lignes 3 10 : nous avions dni une variable intitule codeCouleur aux lignes 10 et 15 du script principal de lanimation. Nous rcuprons sa valeur an de choisir la couleur affecter chaque occurrence. Onze dentre-elles vont donc tre rgles en blanc, les 11 autres en vert fonc. Lignes 11 14 : nous rendons mobile loccurrence. Pour tre plus prcis, nous nautoriserons la mobilit de loccurrence clique qu partir du moment o la valeur de la variable codeCouleur propre chaque occurrence correspondra celle qui sintitule joueur et qui se trouve sur la scne. la ligne 18 du premier script, nous avions initialis cette variable 1, ce qui signie que les pions blancs devront dmarrer la partie.
207
Linterface Partie I
Ligne 16 : lorsque lutilisateur relchera son pion, nous procderons certaines vrifications. Lignes 18 et 39 : nous valuons la valeur de la variable codeCouleur qui nous renseigne sur le joueur qui vient de bouger un pion. partir de ce moment-l, nous pouvons vrier si certains pions de couleurs diffrentes se touchent. Nous allons valuer pour ces lignes, le mouvement des pions noirs. Ligne 19 : nous commenons par changer la couleur de fond des textes dynamiques qui contiennent les mots NOIRS et BLANCS dans le haut de la scne. Ligne 20 : nous changeons la valeur de la variable joueur an de passer la main ladversaire. Ligne 21 : nous incrmentons la variable mouvementsNoirs pour comptabiliser le nombre de dplacements de pions. Ligne 22 : la vrication des intersections de pions se fait par le biais dune boucle qui va tester si loccurrence qui vient dtre relche se trouve moins de 35 pixels des pions de ladversaire. Lignes 23 et 24 : nous calculons lcart entre loccurrence et les pices restantes de ladversaire. Ligne 25 : si lun des carts est infrieur 35 pixels, nous supprimons loccurrence concerne et nous augmentons la variable eliminesBlancs qui comptabilise le nombre de pions adverses supprims. La n de ce script est identique aux lignes 18 38, mais pour les pions blancs.
Bogue ventuel
Aux lignes 25, 32, 46 et 53, il est indispensable dvaluer la valeur absolue de lcart entre deux occurrences, car nous avons besoin de savoir si 35 ou 35 pixels sparent deux pions. Une valeur ngative renverrait false alors que 17 reprsente bien un cart plus court que 35 pixels.
Dplacement par glisser-dplacer avec perspective

En effet, lorsque lutilisateur dplacera la boule sur la scne et que loccurrence touchera lun des quatre murs, des tests serviront dterminer lchelle de lobjet en mouvement.
208
Dplacement de personnages ou dobjets Chapitre 11 Figure 11-3

Lutilisateur dplace la boule sur lensemble de ce graphique, cela a pour effet de changer lchelle de loccurrence.
Rappel
La fonction hitTest() ne sert pas uniquement tester lintersection entre deux occurrences, mais aussi celle qui peut avoir lieu entre le curseur de la souris et une occurrence.
Chemin daccs : Interface/Deplacements/DeplacementGlisserDeplacerPerspective.a Sur la scne, nous avons simplement dispos une occurrence que nous allons rendre mobile, ainsi que quatre autres intitules murGauche, murDroite, murHaut, et murBas. Le script est trs simple car il ne contient que deux gestionnaires dont lun effectue quatre tests.
Script
1 boule.onPress = function() { 2 this.startDrag(); 3 boule.onMouseMove = function() { 4 if (murGauche.hitTest(_xmouse, _ymouse, 1)) { 5 echelle = (220-this._x)+30; 6 this._xscale = echelle*0.6; 7 this._yscale = echelle*0.6; 8 } 9 if (murDroite.hitTest(_xmouse, _ymouse, 1)) { 10 echelle = (this._x-380)+30; 11 this._xscale = echelle*0.6;
209
Linterface Partie I
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
this._yscale = echelle*0.6; } if (murHaut.hitTest(_xmouse, _ymouse, 1)) { echelle = (150-this._y)+30; this._xscale = echelle; this._yscale = echelle; } if (murBas.hitTest(_xmouse, _ymouse, 1)) { echelle = (this._y-250)+30; this._xscale = echelle*0.91; this._yscale = echelle*0.91; } }; }; boule.onRelease = boule.onReleaseOutside=function () { stopDrag(); delete boule.onMouseMove; }; //0.6 = 100/170 //0.91 = 100/110
Analyse
Lignes 1 et 2 : ds que lon clique sur loccurrence boule, cette dernire devient mobile. Ligne 3 : nous ajoutons un gestionnaire onMouseMove qui sera charg dexcuter les lignes dinstructions quil contient lorsque lutilisateur bougera sa souris tout en maintenant le clic enfonc. Lignes 4 8 : un test vrie si loccurrence boule touche le mur de gauche. Si cest le cas, nous valuons sa position (ligne 5) pour changer son chelle (lignes 6 et 7). Les lignes 9 23 effectuent le mme test avec les autres murs. Lignes 26 29 : nous ajoutons un gestionnaire onRelease an de grer le relchement de la boule.
Bogue ventuel
Il est important dajouter la ligne 28 notre script, an de ne pas demander au player Flash de faire un calcul inutile des lignes 3 24.
210
Dplacement avec ralentissement

Le script de cette animation contient de nombreuses lignes de code pour une technique pourtant trs simple. Mettons donc en avant uniquement les lignes de codes qui permettent dobtenir cet effet.
nomduneoccurrence.onEnterFrame = function() { this._x += (380-this._x)*0.1; this._y += (250.destY-this._y)*0.1; }
Dans cet exemple, loccurrence doit aller se placer 380 pixels du bord gauche de la scne et 250 du haut de la scne. Nous vous conseillons galement de consulter la premire animation de ce chapitre qui prsente une autre technique avec la classe Tween().
Chemin daccs : Interface/Deplacements/DeplacementRalentissement.a Pour cette animation, nous navons rien plac sur la scne. Seul le script de lanimation disposera intervalles rguliers (toutes les deux secondes) une occurrence sur la scne, tout en la faisant glisser.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var exemplaire = 0; var placePaletX = random(1000)-200; var placePaletY = random(830)-200; placerPalet = function () { exemplaire++; _root.attachMovie("palet", "palet"+exemplaire, exemplaire); _root["palet"+exemplaire]._x = _root["palet"+(exemplaire-1)]._x; _root["palet"+exemplaire]._y = _root["palet"+(exemplaire-1)]._y; _root["palet"+exemplaire].destX = random(580)+10; _root["palet"+exemplaire].destY = random(380)+10; _root["palet"+exemplaire].onEnterFrame = function() { this._x += (this.destX-this._x)*0.1; this._y += (this.destY-this._y)*0.1; this._rotation += (this.destX-this._x)*0.1+(this.destY-this._y)*0.1; if (Math.round(this._x) == this.destX && Math.round(this._y) == this.destY) { delete this.onEnterFrame; } }; }; // lancer = setInterval(placerPalet, 2000);
211
Linterface Partie I
Analyse
Ligne 1 : lanimation consiste placer plusieurs occurrences sur la scne. Nous devons donc utiliser une variable qui va sincrmenter rgulirement chaque occurrence place sur la scne. Lignes 2 et 3 : nous initialisons deux variables qui vont servir de coordonnes de destination pour la premire occurrence qui va tre place sur la scne. Ligne 4 : nous crons une fonction qui va tre appele toutes les 2 secondes grce la ligne dinstruction 21 qui contient un setInterval(). Ligne 5 : la variable que nous incrmentons va nous servir dnir un niveau pour chaque occurrence place sur la scne. Nous allons galement pouvoir donner un nom obtenu par concatnation avec la chane de caractres "palet" et la valeur de cette variable. Lignes 6 8 : sur la scne, nous plaons le symbole dont le nom de liaison est palet. Il est positionn prcisment lemplacement de loccurrence place prcdemment sur la scne. Lignes 9 et 10 : chaque occurrence, nous affectons deux variables dont les valeurs sont dnies alatoirement. Elles vont servir de point de destination loccurrence qui vient dtre place sur la scne. Ligne 11 : comme nous vous le prsentions en introduction cette animation, cest ce gestionnaire qui assure le dplacement de loccurrence grce aux lignes 12 et 13. Ligne 14 : cette ligne permet de faire tourner loccurrence pour lui donner une impression de mouvement. Ligne 15 : ce test vrie si loccurrence est arrive destination. Si cest le cas, il faut annuler le gestionnaire onEnterFrame qui na plus de rle jouer. Ligne 21 : cette ligne dinstruction est le dclencheur de notre animation, cest grce elle que toutes les deux secondes, une occurrence est place sur la scne.
Bogue ventuel
An de raccourcir le temps de vrication de la ligne 15, il est indispensable darrondir la valeur renvoye par la position de loccurrence. Gardez toujours lesprit quune occurrence peut tre place des coordonnes en _x et _y avec des dcimales. Il serait trs intressant de refaire cette animation en dupliquant de plus en plus de palets, comme pourraient le faire des cellules.
212
Yeux qui suivent la souris

Reconnaissons que cette animation ne sert rien, et pourtant il nest pas rare de rencontrer cet effet sur Internet. Nous avons donc tout simplement voulu faire un clin dil cette animation.
Figure 11-4
Lutilisateur bouge le curseur de sa souris, les deux occurrences reprsentant les yeux le suivent alors en modiant leur rotation.
Rappel
La rotation dune occurrence se fait en ActionScript partir du point dalignement du symbole et non celui de loccurrence que vous pouvez dplacer avec loutil de transformation libre.
Chemin daccs : Interface/Deplacements/DeplacementYeuxSuiventSouris.a Sur la scne, nous avons dispos deux occurrences issues du mme symbole. Comme le dmontre la gure 11-4, laxe de lil nest pas au centre de la pupille. Cest ce dcalage qui va nous permettre dobtenir une rotation. Ces deux occurrences sont appeles respectivement oeilGauche et oeilDroit. Nous avons galement utilis deux autres occurrences de la forme des yeux an de masquer le contour de chaque il. Dans le cas contraire, nous aurions limpression quils sortent de leurs orbites.
Script
1 2 3 4 5 6 7 8 9 10 this.onEnterFrame = function() { angle = (Math.atan2(_ymouse-153, _xmouse-171)/Math.PI)*180; oeilGauche._rotation = angle; // angle2 = (Math.atan2(_ymouse-152.4, _xmouse-444.9)/Math.PI)*180; oeilDroit._rotation = angle2; }; // oeilGauche.setMask(leMasque); oeilDroit.setMask(leMasque2);
213
Linterface Partie I
Analyse
Ligne 1 : ce gestionnaire onEnterFrame va excuter en continu les lignes dinstructions quil contient, cest--dire la rotation des yeux. Ligne 2 : nous calculons langle de rotation de lil qui se fait avec la fonction atan2(). Ligne 3 : nous rglons la rotation de lil avec la valeur du calcul de la ligne prcdente. Ligne 9 : an que lil ne sorte pas de son orbite, nous appliquons un masque loccurrence oeilGauche.
Bogue ventuel
Vous ne devez pas inverser les coordonnes x et y des fonctions atan2() des lignes 2 et 5, le calcul serait alors cas fauss.
Raliser une loupe sur un plan ou une photo

Il existe plusieurs techniques de loupe, mais nous avons retenu celle qui nous semble se rapprocher le plus de la ralit. En effet, dans certains cas la loupe se trouve sur une image alors que le grossissement est visible ct.
Figure 11-5
Si lutilisateur bouge le cadre noir sur limage, une autre image dchelle plus importante est visible au travers dun masque de la taille du carr noir.
214
Chemin daccs : Interface/Deplacements/DeplacementRealiserLoupe.a Dans cette animation, le plus difcile nest pas de comprendre le script , mais la construction de la scne. Il faut en effet garder lesprit que lutilisateur va bouger une occurrence (cadre noir), et que pendant ce temps, une image deux fois plus grande que celle qui se trouve sur la scne va tre masque la mme place que le carr noir. Regardez la gure 11-6 qui vous montre les rapports.
Figure 11-6
Ce photomontage vous dmontre que limage visible au travers du masque est deux fois plus grande que celle qui se trouve sur la scne. Vous noterez galement quelle se trouve sur un calque au-dessus.
La gure 11-6 met galement en vidence le fait que la grande image va bouger vers la gauche lorsque vous dplacez votre loupe vers la droite. Le mouvement est aussi invers verticalement. Passons prsent au script. Il est trs court car il suft simplement de dplacer loccurrence qui contient la grande image.
215
Linterface Partie I
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 grandVisuel.setMask(pochoir); pochoir.onPress = function() { this.startDrag(); bordPochoir._x = pochoir._x; bordPochoir._y = pochoir._y; _root.onEnterFrame = function() { grandVisuel._x = -pochoir._x+126; //(63*2) grandVisuel._y = -pochoir._y+22; bordPochoir._x = pochoir._x; bordPochoir._y = pochoir._y; }; }; pochoir.onRelease = function() { stopDrag(); delete _root.onEnterFrame; };
Analyse
Avant de dmarrer les explications, vous devez retenir le fait que la loupe est compose de deux occurrences : bordPochoir est un simple cadre noir sans fond alors que pochoir est une occurrence avec un fond mais sans contour. Ligne 1 : nous commenons par masquer la grande image au moyen dune occurrence de la taille de notre cadre noir. Lignes 2 et 3 : nous assignons un gestionnaire loccurrence de notre loupe an quelle soit rendue mobile (ligne 3). Lignes 4 et 5 : nous calons le cadre noir qui reprsente la loupe sur loccurrence qui sert de masque. Ligne 6 : ce gestionnaire va assurer la mise jour de la position de la grande image ds que lutilisateur bouge sa souris. Ligne 7 : rappelons que limage visible sur la scne est deux fois plus petite que la grande que nous allons dplacer. Lorsque nous dplaons le masque (en mme temps que le cadre, voir les lignes 10 et 11), la grande image se dcale dautant de pixels dans le sens inverse. Cest cette ligne qui donne limpression de grossissement (avec le masque de la ligne 1). Nous avons retir 126 pixels qui correspondent deux fois la distance qui spare le bord gauche de la petite image du bord de la scne. Ligne 8 : nous procdons au mme calcul, mais sur laxe vertical. Lignes 14 16 : nous annulons la mobilit du masque lorsque lutilisateur relche le bouton de sa souris et nous arrtons galement la demande de calcul de dcalage.
216
Bogues ventuels
Le plus difcile dans cette animation reste tout de mme de trouver lalgorithme qui permet de dplacer la grande image par rapport la petite lorsque la loupe change de place. Nous vous lavons dmontr, il suft dinverser la position de la grande image par rapport la petite en relation directe avec le masque. Attention cependant ne pas oublier dajouter le dcalage des lignes 7 et 9. Vous nauriez pas besoin de procder ces ajouts si la petite image tait cale en haut gauche de la scne.
Tester la collision entre deux occurrences

Dans une animation prcdente, nous avons dj test lintersection entre une occurrence et le curseur de la souris. Dans celle-ci, nous allons tester sil existe ou non une zone de chevauchement.
Figure 11-7
Lutilisateur doit viter les trous sur la chausse en dirigeant sa voiture de haut en bas laide des touches ches de son clavier.
Rappel
Noubliez pas dutiliser addListener() an de dclencher la surveillance de votre clavier.
217
Linterface Partie I
Chemin daccs : Interface/Deplacements/DeplacementTesterCollision.a Pour cette animation, nous avons plac sur la scne, cinq occurrences intitules bordGauche, bordDroit, voiture, jauge et marquageSol, ainsi quun texte dynamique dont le nom de variable est vTempsEcoule. Les trous sur la chausse, qui vont dler de droite gauche de la scne, seront des occurrences places dynamiquement.
Script
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 voiture.swapDepths(1000); var sens = 0; _root.onKeyDown = function() { laTouche = Key.getCode(); }; Key.addListener(_root); _root.onEnterFrame = function() { if (laTouche == 40) { voiture.stop(); sens = 5; } if (laTouche == 38) { voiture.stop(); sens = -5; } if (laTouche == 32) { voiture.play(); sens = 0; } voiture._y += sens; }; var exemplaire = 0; placerTrou = function () { _root.attachMovie("trou", "trou"+exemplaire, exemplaire); _root["trou"+exemplaire]._y = random(258)+75; _root["trou"+exemplaire]._x = 650; _root["trou"+exemplaire].onEnterFrame = function() { vTempsEcoule = Math.round(getTimer()/1000)+"\'\'"; if (this.hitTest(_root.voiture)) { jauge._xscale--; } if (_root.voiture.hitTest(_root.bordGauche)) { jauge._xscale--; _root.voiture._y = 115; } if (_root.voiture.hitTest(_root.bordDroit)) { jauge._xscale--;
218
38 _root.voiture._y = 297; 39 } 40 if (jauge._xscale<=0) { 41 jauge._xscale = 0; 42 clearInterval(lancer); 43 delete marquageSol.onEnterFrame; 44 delete _root.onEnterFrame; 45 delete this.onEnterFrame; 46 _root.attachMovie("gameOver", "gameOver", 1001); 47 gameOver._x = 300; 48 gameOver._y = 215; 49 } 50 this._x -= 8; 51 }; 52 }; 53 placerTrou(); 54 lancer = setInterval(placerTrou, 4000);
Analyse
Ligne 1 : loccurrence de la voiture a t place manuellement sur la scne. Elle possde donc un niveau infrieur celui des occurrences qui vont tre places la ligne 24. Nous devons donc excuter cette ligne dinstruction an de placer la voiture au premier plan. Ligne 2 : cette variable va nous servir dnir le sens que va prendre la voiture quand nous changerons sa direction avec les touches du clavier. Lignes 3 5 : dans une variable, nous stockons la valeur correspondant au code de la touche du clavier enfonce. Ligne 6 : nous activons la surveillance du clavier. Ligne 7 : ce gestionnaire va excuter les lignes dinstructions quil contient en continu. Il assure le mouvement vertical de la voiture. Lignes 8 11 : la touche de la che du bas possde le code 40. Si lutilisateur appuie dessus, la voiture va tre dporte sur sa droite, cest--dire vers le bas de la scne. Lignes 12 19 : nous contrlons la voiture lorsquelle va vers la gauche, cest--dire vers le haut de la scne et lorsquelle reste sur son axe. Ligne 20 : en appuyant sur ces trois touches, nous avons donn une valeur la variable sens. Nous lutilisons donc pour dplacer la voiture dans lune des deux directions. Ligne 22 : nous initialisons la variable exemplaire dont la valeur nous servira composer par concatnation avec la chane de caractres "trou", les noms doccurrences. Cette valeur va galement servir dnir un niveau. Ligne 23 : la fonction que nous crons prsent, va tre appele la ligne 54 toutes les quatre secondes. Comme son nom lindique, cest elle qui placera les trous sur la route.
219
Linterface Partie I
Lignes 24 26 : le symbole dont le nom de liaison est trou est plac sur la scne. Loccurrence obtenue est place droite de la scne une hauteur alatoire. Ligne 27 : pour faire avancer cette occurrence de la droite vers la gauche de la scne, nous utilisons le gestionnaire onEnterFrame. Ligne 28 : le texte dynamique plac en bas droite de la scne et servant compter le temps coul, porte le nom de variable vTempsEcoule. Nous mesurons le temps coul partir de linstant o lutilisateur a lanc lanimation. Ligne 29 : ce test vrie que loccurrence du trou qui vient dtre place sur la scne ne touche pas la voiture. Si cest le cas, la jauge de perte dnergie diminue. Ligne 32 : un deuxime test vrie que la voiture ne sort pas de la route par la gauche. Si cest le cas, la jauge de perte dnergie diminue. Ligne 36 : un troisime test vrie la sortie de la voiture sur la droite. Ligne 40 : pour nir, un dernier test vrie si la jauge est compltement vide, au moyen dune chelle horizontale infrieure ou gale 0. Si tel est le cas, nous remettons la jauge 0. Dans lventualit o son chelle serait devenue ngative (ligne 41), nous interrompons lexcution de la fonction en continu (ligne 42), nous immobilisons la voiture (ligne 44) et arrtons le dlement des lignes discontinues sur la route (ligne 43). Nous stoppons galement le dlement du trou prsent sur la route (ligne 45). Lignes 46 48 : nous plaons sur la scne le message Game over au moyen du symbole dont le nom de liaison est gameOver. Ligne 50 : cette ligne dinstruction sexcute en continu grce la fonction setInterval(). Cette dernire fait appel une autre fonction intitule placerTrou(). Ne se trouvant pas dans lun des tests que nous venons danalyser, cette fonction sexcute donc sans condition. Ligne 53 : nous appelons la fonction placerTrou() ds le lancement de lanimation, an quun trou arrive au tout dbut du jeu. Ligne 54 : la fonction setInterval() est donc charge dindiquer au player ash que la fonction appele placerTrou() doit tre excute toutes les quatre secondes.
Bogue ventuel
Si nous avions utilis les lignes dinstructions 8 20 dans le gestionnaire onKeyDown, nous aurions pu constater une certaine lenteur. Pour viter cela, nous avons prfr les placer cet endroit-l du script. Il aurait galement t envisageable de crer une fonction appele grce un setInterval().
220
lasticit dans un mouvement

Cet effet dlasticit dans un mouvement est trs en vogue depuis quelques annes. Dans cette animation, lorsque la carte arrive sur la scne, elle ne vient pas une vitesse constante ou bien mme en acclrant ou en ralentissant, elle arrive grande vitesse et ne se stabilise quau bout de quelques secondes aprs des va-et-vient autour de son point darrt.
Figure 11-8
Cliquez sur le plan pour le faire sortir ou le remonter.
Rappel
Loprateur ternaire permet daffecter une variable une valeur qui rsulte dun test fait sur une seule ligne de code (ligne 7).
Chemin daccs : Interface/Deplacements/DeplacementElasticite.a Sur la scne, nous avons simplement plac une occurrence intitule menu1_inst. Le script est aussi court que la prparation, mais nanmoins assez compliqu comprendre.
221
Linterface Partie I
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var vitesse = 0.25; var frottement = 0.80; var placey = 0; // destY = menu1_inst._y; menu1_inst.onPress = function() { destY = destY == 200 ? -157.6 : 200; this.onEnterFrame = function() { decaly = vitesse*(destY-this._y); placey += decaly; placey *= frottement; this._y += placey; }; };
Analyse
Lignes 1 3 : nous initialisons trois variables qui vont nous servir calculer le mouvement. Ligne 5 : nous stockons dans la variable destY, la premire coordonne verticale que devra atteindre loccurrence de notre plan au moment o nous cliquerons dessus pour la descendre. Ligne 6 : ce gestionnaire est charg de lancer le mouvement. Ligne 7 : nous testons la position verticale actuelle de loccurrence de la carte, cela nous permet daffecter une nouvelle valeur la variable destY. Ligne 8 : ce gestionnaire assure le dlement et leffet dlasticit subi par la carte. Lignes 9 11 : nous calculons le dcalage exprim en pixels que doit subir loccurrence la ligne 12. Si vous souhaitez modier leffet dlasticit, vous pouvez changer de faon empirique les valeurs des variables des lignes 1 3.
lasticit dans un mouvement avec la classe Tween

Depuis Flash MX 2004, il est possible de procder des interpolations de mouvements via le code en crivant une seule ligne dinstruction. Nous allons donc vous prsenter une
222
animation qui reprend le mme principe que la prcdente, mais vous constaterez trs vite que nous avons eu besoin de plus dune ligne de code.
Chemin daccs : Interface/Deplacements/DeplacementElasticiteTween.a Sur la scne, nous avons plac le seul et unique symbole que contient la bibliothque, cest--dire un clip avec une carte gographique. Loccurrence obtenue a t nomme plan_inst. Avant de passer lanalyse du script dans sa globalit, voici le cur du code. Si lutilisateur ne risquait pas de cliquer trop vite entre les deux tats (le plan en haut et en bas), nous pourrions utiliser le script suivant :
import mx.transitions.Tween; import mx.transitions.easing.*; // plan_inst.onPress = function() { if (!ouverturePlan) { ouverturePlan = new Tween(plan_inst, "_y", Elastic.easeOut, -157.7, 200, 3, true); } else { ouverturePlan.yoyo(); } };
Si lutilisateur clique en revanche trop vite sur le plan et que celui-ci est encore en mouvement, il ne pourra plus remonter sa position dorigine, cest pourquoi nous sommes obligs de verrouiller notre script en ajoutant les lignes dinstructions que vous allez prsent dcouvrir.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 import mx.transitions.Tween; import mx.transitions.easing.*; // plan_inst.onPress = function() { if (!ouverturePlan) { plan_inst.enabled = false; ouverturePlan = new Tween(plan_inst, "_y", Elastic.easeOut, -157.7, 200, 2, true); ouverturePlan.onMotionStarted = function() { plan_inst.enabled = false; }; ouverturePlan.onMotionStopped = function() { plan_inst.enabled = true; }; } else {
223
Linterface Partie I
15 16 17 };
ouverturePlan.yoyo(); }
Analyse
Lignes 1 2 : an que nous puissions effectuer un mouvement via le code en utilisant la classe Tween, nous devons commencer par limporter. Dans le mouvement dinterpolation propos par cette classe, il est possible de donner certains effets tels que le ralentissement, lacclration, llasticit et le rebond condition dimporter galement la classe correspondante. Ligne 4 : ce gestionnaire permet donc de dclencher linterpolation lorsque lutilisateur clique sur le plan. Ligne 5 : nous testons dabord ltat du plan, pour savoir sil a dj t droul ou pas. Jusqu prsent, nous navons pas dni de valeur pour la variable ouverturePlan. Elle nexiste donc mme pas. la premire excution de la ligne 5, le test renvoie donc la valeur true et excute ainsi les lignes 6 10. Ligne 6 : nous devons dsactiver le clic sur le plan an que lutilisateur ne puisse pas en faire un autre trop rapidement, ce qui entranerait un bogue avec la mthode yoyo() de la ligne 15. Ligne 7 : nous procdons linterpolation en prcisant les paramtres suivants : plan_inst : le nom de loccurrence concerne par linterpolation ; _y : le nom de la proprit utilise pour linterpolation ; Elastic.easeOut : le nom de leffet utiliser pour linterpolation, accompagn dune proprit easeIn, easeOut ou easeInOut ; -157.7 : la valeur utilise par la proprit pour dnir la valeur de dpart de linterpolation ; 200 : la valeur utilise par la proprit pour dnir la valeur de n de linterpolation ; 2 : le nombre de secondes utilis pour raliser linterpolation ; true : ce paramtre prcise que la valeur prcdente est exprime en secondes (true) et non en images (false). Dans ce dernier cas, il faudrait tenir compte du nombre dimages par secondes, utilis pour lire lanimation. une vitesse de 30 ips (images par seconde), il faudrait remplacer le chiffre 2 par 60, et true par false. Lignes 8 10 : le gestionnaire onMotionStarted permet dexcuter les lignes quil contient lorsque linterpolation a dmarr. Dans notre cas, nous en protons pour dsactiver loccurrence en mouvement an quon ne puisse plus cliquer dessus. Lignes 11 13 : linverse, lorsque linterpolation est termine, nous rendons loccurrence nouveau cliquable an que la mthode yoyo() soit excutable sur un nouveau clic.
224
Bogue ventuel
Nous lavons voqu en introduction, si vous excutez la mthode yoyo() alors que linterpolation nest pas termine, les deux paramtres dclars pour dnir les valeurs de dpart et de n sont recalcules, et faussent dans certains cas le besoin de garder des valeurs initiales constantes entre deux interpolations.
Simuler la gravit
Cette animation prsente deux particularits : Vous allez pouvoir visualiser un type de rebond en fonction de paramtres que vous rglerez au moyen de trois variateurs. Par ailleurs, vous allez dcouvrir que nous partons du mme symbole qui contient le mme code pour obtenir des rglages diffrents propres chaque occurrence.
Figure 11-9
Lutilisateur change la position des variateurs situs sur le ct gauche de linterface, les billes ne rebondissent plus alors de la mme faon.
Remarque
Le variateur de llasticit afche un chiffre qui va loppos de son effet. Il nous aurait fallu une simple soustraction pour inverser le changement de valeur, mais nous avons prfr garder la mme progression lorsque lutilisateur fait varier la position des curseurs.
225
Linterface Partie I
Chemin daccs : Interface/Deplacements/DeplacementGravite.a Au moment de la cration de cette animation, nous navons plac sur la scne que les variateurs (carrs blancs) dont les noms doccurrences sont vitesse_inst, elasticite_ inst et gravite_inst, ainsi que trois textes dynamiques dont les noms de variables sont vitesse, elasticite, et gravite. Les billes que vous voyez sur la gure 11-9 sont en revanche des occurrences obtenues dynamiquement grce la mthode attachMovie(). Nous abordons dans ce livre la notion de composant, il sagit de symboles modles qui contiennent du code sur leur timeline. Cette technique prsente lavantage dobtenir plusieurs occurrences prprogrammes sur la scne partir dun mme symbole, et dont le comportement diffre dune instance lautre. Nous avons retenu cette mthode de dveloppement pour les variateurs et les billes, ce qui nous donne trois scripts pour cette animation.
Script
Code sur la premire image-cl de la timeline principale :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var vitesse = 2; var elasticite = 2; var gravite = 2; placerBalles = function () { for (i=1; i<=23; i++) { _root.attachMovie("balle", "balle"+i, i); _root["balle"+i]._x = 80+(i*21); _root["balle"+i]._y = 40+(i*12); _root["balle"+i].elasticite = elasticite; _root["balle"+i].vitesse = vitesse; _root["balle"+i].gravite = gravite; } }; placerBalles(); // btLancement.onPress = function() { placerBalles(); };
Code contenu sur la timeline du clip de la bille :

1 this.onEnterFrame = function() { 2 vitesse += (0.1*gravite); 3 this._y += vitesse; 4 if (this._y>395) { 5 this._y = 395; 6 vitesse -= elasticite;
226
7 8 9 };
vitesse *= -1; }
Code contenu sur la timeline du clip du variateur :

1 2 3 4 5 6 7 8 9 10 11 12 13 var positionUnderscore = this._name.indexOf("_"); var nomVariable = this._name.substr(0, positionUnderscore); trace(nomVariable); this.onPress = function() { this.startDrag(0, this._x, 150, this._x, 300); this.onMouseMove = function() { _root[nomVariable] = Math.round(10-((this._y-150)/15)); }; }; this.onRelease = function() { stopDrag(); delete this.onMouseMove; };
Analyse
Commenons par lanalyse du script qui permet de construire la srie de billes sur la scne. Lignes 1 3 : nous dnissons trois variables qui vont nous servir dnir des valeurs initiales pour le calcul de rebond de chaque occurrence. Lignes 4 13 : nous crons une fonction qui va placer les 23 billes sur la scne. Lutilisateur a la possibilit de relancer plusieurs fois lanimation des billes qui tombent, il est donc plus judicieux de faire une fonction que nous allons pourvoir appeler nimporte quel moment. Lignes 9 11 : pour chaque occurrence obtenue sur la scne, nous dnissons trois variables dont les valeurs vont tre utilises des lignes 2 7 dans le script suivant. Ligne 14 : nous appelons la fonction une premire fois an quune premire srie de 24 billes se place sur la scne, sans que lutilisateur ait besoin de cliquer sur le bouton situ en bas gauche de la scne. Lignes 16 18 : nous programmons loccurrence du bouton de manire ce que lutilisateur puisse cliquer nimporte quel moment pour relancer lanimation des billes qui tombent. Passons prsent lanalyse du script contenu dans le symbole de la bille. Ligne 1 : ce gestionnaire onEnterFrame va permettre dexcuter en continu les lignes dinstructions quil contient. Ainsi, le dplacement de chaque bille va tre valu selon le calcul suivant : Nous calculons pour commencer le dcalage vertical que doit subir (ligne 3) chaque occurrence. Plus la gravit est importante, plus la vitesse sera importante (ligne 2).
227
Linterface Partie I
Le rebond est obtenu en inversant la valeur de la variable vitesse. Il suft de procder une multiplication par -1 (ligne 7). Nous aurions pu crire : vitesse = vitesse*-1, nous avons opt pour la syntaxe prsente dans le script. An que la bille ne dpasse pas la limite que nous nous sommes xs (395e pixel du haut de la scne) et qui correspond la ligne dimpact sur laquelle doit se faire le rebond, nous ramenons chaque occurrence avant cette valeur (ligne 5). Lorsque chaque occurrence dpasse le 395e pixel, elle est renvoye dans lautre sens grce la nouvelle valeur ngative obtenue la ligne 7. Puisquune valeur positive continue de lui tre ajoute (ligne 2), elle nit par redescendre, car elle se dcale avec des valeurs ngatives de plus en plus petites avant de redevenir positives. chaque dpassement du 395e pixel, on retire la valeur correspondant llasticit (ligne 6), loccurrence remonte ainsi moins haut. Nous allons voir prsent comment le fait de changer la position verticale des variateurs sur leurs graduations peut inuer sur lanimation des billes. Revenons dabord un instant sur lintroduction de cette animation, o nous voquions la technique retenue pour la cration de ces trois occurrences (les variateurs). En changeant la position verticale de ces instances intitules vitesse_inst, elasticite_inst et gravite_ inst, nous avons besoin de changer la valeur de trois variables danimation dont les noms correspondent aux prxes de ces trois noms. Les lignes 1 et 2 du script que nous allons analyser vont nous permettre de procder une extraction de chane pour faire rfrence aux noms des variables.
Remarque
Notons quen ActionScript 2, si vous typez vos variables, ce que nous vous conseillons, cette technique nest pas valable en ltat.
Ligne 1 : nous stockons dans la variable positionUnderscore une valeur qui correspond lindex du caractre "_". Nous savons ainsi, pour chaque occurrence, o se trouve la n du prxe que nous recherchons. Ligne 2 : dans une deuxime variable, nous stockons une valeur qui correspond la chane de caractres qui contient le prxe du nom de loccurrence. Elle va tre interprte la ligne 7. Ligne 4 : nous assignons un gestionnaire onPress loccurrence an de la rendre mobile (ligne 5). Ligne 6 : lorsque lutilisateur bouge sa souris, nous interprtons la variable nomVariable et lui attribuons une valeur (ligne 7). Rfrez-vous lanimation traitant des variateurs au dbut de ce chapitre pour comprendre le calcul. Lignes 10 13 : ds que lutilisateur relche le bouton de sa souris, nous demandons au player Flash darrter de calculer la valeur de la variable (ligne 7).
228
Faire tomber de la pluie ou de la neige

Reprenons un classique , il sagit notamment dune animation quon trouve sur le site de Yazo.net ! Faire tomber de la neige pour rpondre la volont des commanditaires de dcembre !
Figure 11-10
La construction de cette scne ne peut se faire autrement que dynamiquement. Une boucle for() et la mthode attachMovie() sufsent obtenir cet effet de la neige qui tombe.
Chemin daccs : Interface/Deplacements/DeplacementPluieNeige.a Comme dans le cas de lanimation prcdente, nous avons construit le contenu de la scne partir de la mthode attachMovie(). Le script qui assure le mouvement de chaque ocon se trouve galement dans le symbole. Si vous navez pas lu lanimation prcdente, nous vous invitons le faire avant de continuer la lecture de celle-ci.
Script
Code sur la premire image-cl de la timeline principale :
1 stop(); 2 for (i=1; i<=300; i++) {
229
Linterface Partie I
3 4 5 6 }
_root.attachMovie("flocon", "flocon"+i, i); _root["flocon"+i]._x = 40+random(520) _root["flocon"+i]._y = random(430);
Code sur la premire image-cl de la timeline du symbole ocon :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 this.vitesse = random(4)+1; this.coef = random(60)+10; this._xscale = coef; this._yscale = coef; this._alpha = random(80)+10; this._rotation = random(360); // this.onEnterFrame = function() { this._y += vitesse; if (this._y>440) { this._y = -10; this.vitesse = random(4)+1; coef = random(60)+10; this._xscale = coef; this._yscale = coef; this._alpha = random(80)+10; this._rotation = random(360); } };
Analyse
Commenons par le script qui permet de placer une premire srie de 300 occurrences sur la scne. Ligne 1 : nous plaons la fonction stop() sur la premire ligne car cette animation contient deux images-cls. Prcisons quune seule suft pour raliser cet effet de neige qui tombe. Sur la deuxime image-cl, nous avons juste ajout lanimation de gouttes deau. Lignes 2 6 : nous plaons sur la scne le symbole dont le nom de liaison est flocon, chaque occurrence alors obtenue est nomme flocon1 flocon300 et positionne nimporte o sur la scne (lignes 4 et 5). Rappelons que le script qui permet de faire tomber chaque occurrence est plac dans le symbole. Lorsque vous lirez donc le mot-cl this, vous devez comprendre que nous faisons rfrence loccurrence qui contient ce script, cest dire chaque occurrence, chaque ocon de lanimation. Lignes 1 6 : ces lignes dinstructions ne se trouvent dans aucun gestionnaire, elles sexcutent donc au moment o loccurrence est place sur la scne, avant quelle ne safche. Nous initialisons des valeurs de proprits propres chaque ocon, an dobtenir des formes diffrentes. Pour dnir une vitesse de dplacement relative chaque occurrence, nous dnissons une variable du mme nom.
230
Ligne 8 : ce gestionnaire onEnterFrame permet dassurer lexcution en continu des lignes dinstructions quil contient. Ligne 9 : loccurrence se dplace vers le bas de la scne. Ligne 10 : un test permet de vrier si le ocon nest pas sorti de la scne par le bas. Si cest le cas, loccurrence est alors replace -10 pixels du haut de la scne (ligne 11) et de nouvelles valeurs et proprits lui sont dnies.
Bogue ventuel
Nous ne pouvons pas parler de bogue, mais plutt de manque de ralisme. An dobtenir une relle sensation de neige qui tombe , vous devez comprendre que chaque ocon doit tre unique, comme cest le cas dans la nature : vous devez donc utiliser des valeurs alatoires pour dnir ses proprits.
Contrle par le clavier

Le but du jeu de cette animation est de se dplacer sur les quatre cercles vert fonc et les trois croix jaunes en utilisant les touches ches de votre clavier.
Figure 11-11
Lutilisateur doit utiliser les touches ches de son clavier pour dplacer le personnage reprsent par le rond noir.
231
Linterface Partie I
Chemin daccs : Interface/Deplacements/DeplacementControleClavier.a En haut droite de la scne, nous avons plac trois textes dynamiques dont les noms de variables sont distance, tresors et villes. Les occurrences des ronds vert fonc et des croix jaunes sintitulent croix1 croix3 et ville1 ville4. Une dernire occurrence intitule perso va se dplacer lorsque lutilisateur appuiera sur les touches ches de son clavier, il sagit du rond vert fonc situ au centre de la scne. Le script de cette animation est compos de 3 parties : linitialisation des variables utilises dans cette animation ; la cration dun clip vide qui va contenir le trac du parcours effectu par le personnage ; la gestion du dplacement au travers des lignes 13 58.
Script
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 _root.createEmptyMovieClip("traceTrajet", 1); traceTrajet.lineStyle(3, 0xCC0000, 20); traceTrajet.moveTo(perso._x, perso._y); // var distance = 0; var tresors = 0; var villes = 0; // var laTouche = ""; var vitesseHorizontale = 0; var vitesseVerticale = 0; // this.onKeyDown = function() { this.onEnterFrame = function() { distance += 0.1; traceTrajet.lineTo(perso._x, perso._y); laTouche = Key.getCode(); if (laTouche == 37) { vitesseHorizontale = -5; } if (laTouche == 38) { vitesseVerticale = -5; } if (laTouche == 39) { vitesseHorizontale = 5; } if (laTouche == 40) {
232
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
vitesseVerticale = 5; } perso._x += vitesseHorizontale; perso._y += vitesseVerticale; }; }; this.onKeyUp = function() { delete this.onEnterFrame; vitesseHorizontale = 0; vitesseVerticale = 0; for (i=1; i<=4; i++) { if (perso.hitTest(_root["croix"+i])) { _root["croix"+i]._x = -100; _root["croix"+i]._y = -100; tresors++; } if (perso.hitTest(_root["ville"+i])) { villes++; _root["ville"+i]._x = -100; _root["ville"+i]._y = -100; } } if (tresors+villes>=7) { _root.attachMovie("gagne", "gagne", 2); gagne._x = 520; gagne._y = 120; distance_inst.background = true; distance_inst.backgroundColor = "0xFFFF00"; } }; Key.addListener(this);
Analyse
Ligne 1 : sur la scne, nous crons une occurrence de clip vide an de pouvoir lui dnir un type de trait (ligne 2). Ligne 3 : nous dnissons le point de dpart du trait aux coordonnes de loccurrence perso. Lignes 5 11 : nous initialisons les variables utilises dans lanimation. Ligne 13 : ce gestionnaire onKeyDown va permettre dobtenir linteractivit clavier/animation.
Remarque
Vous noterez que nous avons plac un gestionnaire onEnterFrame lintrieur dun onKeyDown an dobtenir plus de ractivit lorsque lutilisateur maintient le bouton de sa souris enfonce.
233
Linterface Partie I
Ligne 15 : nous comptabilisons le nombre de kilomtres parcourus par le personnage. Ligne 16 : nous traons une droite entre chaque couple de clics sur la scne. Pour tre plus prcis, nous dnissons un trait en continu entre la nouvelle position du personnage (lorsquil se dplace entre deux clics) et son dernier emplacement sur une ville ou un trsor. Ligne 17 : nous stockons dans une variable le code de la touche que nous allons ensuite valuer. Lignes 18 20 : si la touche de la che de gauche est enfonce, nous dnissons une valeur pour la variable vitesseHorizontale utilise la ligne 30, qui sert dplacer loccurrence du personnage horizontalement. Lignes 21 29 : nous procdons la vrication des trois autres touches (che droite : 39, che du haut : 38, che du bas : 40). Ligne 34 : le gestionnaire onKeyUp va permettre dexcuter les tests de vrication des intersections. Rappelons que le personnage a pour objectif dans notre animation de sarrter sur les croix jaunes et les cercles vert fonc. Ligne 35 : le mouvement du personnage est obtenu grce au gestionnaire de la ligne 14, nous interrompons donc cette excution en continu. Lignes 36 et 37 : nous immobilisons le personnage en rtablissant sa vitesse de dplacement 0. Ligne 38 : nous devons vrier la zone dintersection entre le personnage (loccurrence perso) et trois croix et quatre cercles. Nous utilisons donc une boucle for() avec quatre itrations (ligne 38). Nous valuons le nom des occurrences par concatnation (lignes 39 et 44) entre les chanes de caractres "croix", "ville" et la valeur de la variable locale i.
Remarque
Ces huit occurrences nont pas t places dynamiquement sur la scne avec la mthode attachMovie() ou duplicateMovieClip(). Il est donc impossible de les supprimer autrement quen les sortant de la scne en affectant des valeurs ngatives aux proprits _x et/ou _y (lignes 40, 41, 46 et 47).
Pour comptabiliser les passages et dcouvertes de notre personnage, nous incrmentons deux variables aux lignes 42 et 45. Sil est pass par les 7 tapes, nous afchons Gagn sur la scne (lignes 51 53), et nous changeons la couleur du texte dynamique qui contient le nombre de kilomtres parcourus (lignes 54 et 55).
234
Bogue ventuel
Il est indispensable dutiliser addListener() avec la classe Key(), dans le cas contraire, votre clavier enregistrera bien vos pressions sur les touches, mais il nexcutera pas les lignes dinstructions dnies dans le gestionnaire onKeyDown.
SkyScraper dynamique
Qui na jamais vu une bannire publicitaire sur Internet ? En regardant de plus prs, vous constaterez que les mouvements des lments contenus dans les bannires et autres SkyScrapers se limitent gnralement des dplacements, des variations de transparence, des rotations et des mises lchelle. Toutes ces animations peuvent tre ralises avec des scripts, ce que nous allons tudier travers la ralisation dune animation base dActionScript.
Chemin daccs : Interface/ControleAfchageTemps /SkyScraperDynamique.a Nous avons plac sur la scne 4 occurrences intitules element1, element2, element3 et element4.
Script
1 2 3 4 5 6 7 8 import mx.transitions.Tween; import mx.transitions.easing.*; var numeroElement = 1; var timings = [0, 1, 3, 3.3, 5.5];
function deplacerElement(nomElement, destinationX, destinationY, vitesse) { deplacement = new Tween(nomElement, "_x", Regular.easeOut, nomElement._x, destinationX, vitesse, true); 9 new Tween(nomElement, "_y", Regular.easeOut, nomElement._y, destinationY, vitesse, true); 10 } 11 12 _root.onEnterFrame = function() { 13 14 if (getTimer()/1000>=timings[numeroElement]) { 15 deplacerElement(_root["element"+numeroElement],_root["element"+numeroElement]._ x,60,2); 16 numeroElement++;
235
Linterface Partie I
17 } 18 if (numeroElement>=timings.length) { 19 delete this.onEnterFrame; 20 } 21 22 };
Analyse
Remarque
Nous aurions pu placer dynamiquement les 4 lments sur la scne, mais nous gardons lesprit le prol type de lutilisateur de ce genre danimation.
Lignes 1 et 2 : nous importons les classes ncessaires au bon fonctionnement de la classe Tween(). Ligne 4 : nous stockons, dans une variable une valeur qui va servir compter les diffrents lments animer. Ligne 5 : ce tableau contient les diffrents instants (valeurs exprimes en secondes) auxquels doivent se dclencher les animations. Lignes 7 10 : cette fonction est charge de dplacer loccurrence laquelle nous faisons rfrence dans les paramtres. Lignes 12 22 : de faon continue grce lvnement onEnterFrame, nous vrions si le temps coul ne dpasse pas les instants xs dans le tableau timings. Si tel est le cas, nous excutons la fonction deplacerElement() et nous incrmentons la valeur de la variable numeroElement pour pouvoir animer loccurrence suivante. Lignes 18 20 : ce test permet de vrier si la dernire valeur du tableau timings est atteinte an dinterrompre lexcution de lvnement onEnterFrame.
Bogues ventuels
Nomettez pas les lignes 1 et 2, cette animation ne fonctionnerait pas sans cela.
SkyScraper dynamique avec tableaux

Contrairement lanimation prcdente, nous ne plaons pas toutes les occurrences 60 pixels du haut de la scne ; nous rcuprons la valeur de destination verticale dans un tableau.
236
Chemin daccs : Interface/ControleAfchageTemps /SkyScraperDynamique2.a Nous avons plac sur la scne 4 occurrences intitules element1, element2, element3 et element4.
Script
1 2 3 4 5 6 7 8 9 import mx.transitions.Tween; import mx.transitions.easing.*; var numeroElement = 1; var timings = [0, 1, 3, 3.3, 5.5]; var placeY = [0, 60, 70, 60, 45];
function deplacerElement(nomElement, destinationX, destinationY, vitesse) { deplacement = new Tween(nomElement, "_x", Regular.easeOut, nomElement._x, destinationX, vitesse, true); 10 new Tween(nomElement, "_y", Regular.easeOut, nomElement._y, destinationY, vitesse, true); 11 } 12 13 _root.onEnterFrame = function() { 14 15 if (getTimer()/1000>=timings[numeroElement]) { 16 deplacerElement(_root["element"+numeroElement],_root["element"+numeroElement] ._x,placeY[numeroElement],2); 17 numeroElement++; 18 } 19 if (numeroElement>=timings.length) { 20 delete this.onEnterFrame; 21 } 22 23 };
Analyse
Remarque
Nous aurions pu placer dynamiquement les 4 lments sur la scne, mais nous gardons lesprit le prol type de lutilisateur de ce genre danimation.
Si vous navez pas encore consult lanimation prcdente, ne vous engageons le faire car nous nanalyserons ici que les lignes qui diffrent de celles de lexemple prcdent. Ligne 6 : ce tableau contient les emplacements verticaux exprims en pixels sur lesquels les occurrences devront se placer.
237
Linterface Partie I
Nous avons ensuite adapt la ligne 16 pour que les occurrences saniment jusquaux points dnis dans le tableau.
Bogues ventuels
Nomettez pas les lignes 1 et 2 car cette animation ne fonctionnerait pas sans cela.
238
12
La scne
Ce petit chapitre va vous permettre de dcouvrir quil est possible de connatre les dimensions de la scne et de contrler son alignement. Cependant, avant de vous lancer dans la lecture des explications de cette animation, nous vous invitons lancer pralablement le chier .swf correspondant et cliquer sur le quadrillage situ en haut droite de la scne.
Informations et contrle de la scne

Pour des problmes de rfrencement, il a longtemps t conseill de placer une animation Flash dans une page HTML. Ainsi, pour centrer une animation dans la fentre dun navigateur, cela ne se grait pas dans lanimation, mais du ct du HTML. Depuis toujours, il est possible de pointer partir dune page HTML ou bien mme dune animation Flash vers un chier .swf. Ce dernier safche alors dans la fentre de votre navigateur. quel endroit et quelle chelle ?
Chemin daccs : Interface/Scene/InfosControle.a La conguration de lanimation ne prsente aucun intrt, exceptionnellement nous ne nous attarderons donc pas dnir sa structure.
Linterface Partie I
En revanche, vous noterez que deux scripts se trouvent deux endroits diffrents dans lanimation. Un premier sur limage-cl 1 de la timeline principale de lanimation, lautre sur limage-cl 1 de la timeline dun symbole.
Script
1 2 3 4 5 6 7 8 9 10 11 12 messageAccueil._x = Stage.width/2; messageAccueil._y = Stage.height/2; // Stage.scaleMode = "noScale"; // surveilRedim = new Object(); surveilRedim.onResize = function() { messageAccueil._rotation += 15; }; Stage.addListener(surveilRedim); // Stage.showMenu = false
Code plac lintrieur du symbole intitul CasAlignement.

this.onPress = function() { Stage.align = this._name; }; Remarque
Sur la scne, neuf occurrences ont t places. Leurs noms sont trs prcis car ils correspondent aux valeurs dnir pour la proprit align de la classe Stage.
Analyse
Commenons par lanalyse du premier script : Lignes 1 et 2 : nous positionnons loccurrence intitule messageAccueil au milieu de la scne. Ligne 4 : lorsque lutilisateur redimensionne la fentre de son navigateur ou de son player, la scne garde sa taille dorigine. Lignes 6 9 : nous dnissons un gestionnaire onResize qui permet dexcuter une rotation de loccurrence messageAccueil lorsque la fentre du player ou du navigateur est redimensionne. Ligne 10 : nous enclenchons la surveillance relative lvnement onResize li la scne. Ligne 12 : nous masquons les menus.
240
La scne Chapitre 12
Comme nous en faisions la remarque avant le dbut de lanalyse de cette animation, nous utilisons tout simplement les noms des neuf occurrences situes en haut droite sur la scne pour dnir les valeurs de la proprit align de la classe Stage.
Tableau 12-1 Valeurs de la proprit align
Gauche Haut Milieu Bas Milieu Droite
tl l bl
t cc b
tr r br
Ainsi, dans la plupart des cas, pour obtenir un alignement centr verticalement et horizontalement, vous devez saisir la ligne dinstruction suivante :
Stage.align = cc;
Bogue ventuel
Une fois nest pas coutume, que vous saisissiez la valeur cc ci-dessus entre guillemets ou sans, cela ne change rien, les deux syntaxes sont autorises.
241
13
Enregistrement de scores et autres donnes
Arriv un certain niveau de comptence en dveloppement, vous tes amen raliser des applications qui ncessitent de mmoriser des informations, non pas temporairement comme le feraient une variable ou un tableau, mais dnitivement jusqu ce que vous effaciez vous-mme ces informations. Aujourdhui, de nombreuses solutions soffrent vous car les technologies sont trs varies. Nous avons retenu les deux solutions les plus employes, les cookies et lenregistrement dans une base MySQL.
Linterface Partie I
Utilisation des cookies
Figure 13-1
Les SharedObject vont permettre de mmoriser des informations automatiquement (au dbut de lanimation) ou la demande de lutilisateur (pour lenregistrement dinformations).
Cette animation est particulirement intressante par plusieurs aspects, car elle met en avant les techniques suivantes : La mmorisation de lidentication dune personne. Lenregistrement dinformations sur la machine de lutilisateur. Le chargement dinformations pralablement enregistres sur lordinateur. Au travers de cet exemple, nous vous proposons donc une application qui invite lutilisateur sidentier une premire fois ; la deuxime lecture de lanimation, il naura pas saisir nouveau son identiant et son mot de passe. Dans un deuxime temps, il va pouvoir dplacer des occurrences sur la scne et enregistrer ces diffrentes congurations avant de pouvoir les charger nouveau ultrieurement ou tout de suite aprs.
Chemin daccs : Interface/Enregistrements/EnregistrementCookies.a Lanimation est compose de plusieurs images-cls car elle se dcoupe en deux parties : Image 1 : deux textes de saisie dont les noms de variables sont identifiant et motDePasse, un texte dynamique au nom de variable messageErreur, une occurrence de clip intitule btValidation.
244
Enregistrement de scores et autres donnes Chapitre 13
Remarque
Le texte de saisie dont le nom de variable est identifiant a pour nom doccurrence identifiant_inst.
Image 4 : deux textes de saisie dont les noms de variables sont nomConfig et messageAccueil, cinq occurrences de clip intitules pion1, pion2, pion3, btEnregistrer et btCharger. Le script de la premire image-cl est relativement simple lexception de la rfrence au
SharedObjet si vous ne connaissez pas encore cette technique.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 stop(); // var leCookie = SharedObject.getLocal("visite"); if (leCookie.data.nom != undefined) { gotoAndStop(4); } // btValidation.onPress = function() { if (identifiant == "Marine" && motDePasse == "Marine") { leCookie.data.nom = "Marine"; gotoAndStop(4); } else { messageErreur = "Mot de passe ou identifiant incorrect(s)"; identifiant = ""; motDePasse = ""; } }; // identifiant_inst.onSetFocus = function() { messageErreur = ""; }; _root.onEnterFrame = function() { preuve = _root._currentframe; };
Script sur la quatrime image-cl de la timeline principale :

1 if (leCookie.data.visite == undefined) { 2 leCookie.data.visite = "oui"; 3 messageAccueil = "Veuillez disposer vos 3 pions dans le cadre\net enregistrez votre onfiguration"; 4 var coordX = []; 5 var coordY = []; 6 } else {
245
Linterface Partie I
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
messageAccueil = "Si vous le souhaitez, vous pouvez nouveau\ndisposer vos pions dans une nouvelle configuration"; coordX = leCookie.data.coordX; coordY = leCookie.data.coordY; for (i=1; i<=3; i++) { _root["pion"+i]._x = coordX[i-1]; _root["pion"+i]._y = coordY[i-1]; } } // //Pas de boucle for pour simplifier le code pion1.onPress = function() { startDrag(this); }; pion1.onRelease = function() { stopDrag(); entreeCoords = this._name.substr(4, 1); coordX[entreeCoords-1] = this._x; coordY[entreeCoords-1] = this._y; leCookie.data.coordX = coordX; leCookie.data.coordY = coordY; }; // pion2.onPress = function() { startDrag(this); }; pion2.onRelease = function() { stopDrag(); entreeCoords = this._name.substr(4, 1); coordX[entreeCoords-1] = this._x; coordY[entreeCoords-1] = this._y; leCookie.data.coordX = coordX; leCookie.data.coordY = coordY; }; // pion3.onPress = function() { startDrag(this); }; pion3.onRelease = function() { stopDrag(); entreeCoords = this._name.substr(4, 1); coordX[entreeCoords-1] = this._x; coordY[entreeCoords-1] = this._y; leCookie.data.coordX = coordX; leCookie.data.coordY = coordY; }; // btEnregistrer.onPress = function() { var leCookie = SharedObject.getLocal(nomConfig); leCookie.data.coordX = coordX;
246
56 leCookie.data.coordY = coordY; 57 }; 58 btCharger.onPress = function() { 59 var leCookie = SharedObject.getLocal(nomConfig); 60 coordX = leCookie.data.coordX; 61 coordY = leCookie.data.coordY; 62 for (i=1; i<=3; i++) { 63 _root["pion"+i]._x = coordX[i-1]; 64 _root["pion"+i]._y = coordY[i-1]; 65 } 66 }; Attention
Pourquoi avons-nous plac la commande gotoAndStop(1) sur la troisime image-cl de la timeline principale ? Pour viter que lutilisateur ne puisse passer la suite de lanimation Lorsque la tte de lecture est bloque sur une image, il est trs facile de la relancer en slectionnant la commande En avant du menu contextuel qui apparat au clic droit sur la scne.
Analyse
Script de limage 1 : Ligne 1 : nous bloquons la tte de lecture tant que lutilisateur na pas saisi le bon identiant et le bon mot de passe. Ligne 3 : nous associons lidentiant leCookie le chier visite qui est charg partir de la machine de lutilisateur. Si cette ligne dinstruction sexcute pour la premire fois, le chier visite est cr sur la machine. Lignes 4 6 : nous cherchons savoir si le chier visite.sol contient des informations. Si cest le cas, nous re-routons lutilisateur la quatrime image-cl de la timeline de lanimation principale, lui vitant ainsi de saisir son identiant et son mot de passe. Ligne 8 : nous programmons loccurrence du clip sur lequel devra cliquer lutilisateur pour pouvoir passer limage 4. Ligne 9 : un test vrie que les deux variables identifiant et motDePasse contiennent bien la valeur Marine. Si cest le cas, nous la stockons dans le chier visite.sol associ la variable nom (ligne 10), et nous dplaons la tte de lecture limage 4. Dans le cas contraire, nous vidons les deux textes dynamiques (lignes 14 et 15) que lutilisateur vient de remplir et nous afchons un message derreur sur la scne, dans le texte dynamique dont le nom de variable est messageErreur (ligne 13). Ligne 19 : lorsque lutilisateur clique sur le texte de saisie dont le nom doccurrence est
identifiant_inst, le contenu du texte dynamique de nom de variable messageErreur est
vid.
247
Linterface Partie I
Analysons prsent le long script qui se trouve sur limage-cl 4 : Ligne 1 : nous cherchons une fois encore savoir si la variable visiste est absente du chier visiste.sol. Si cest le cas, nous la crons en lui dnissant une valeur initiale gale oui . Nous afchons galement un message sur la scne et nous crons deux tableaux en RAM. Si cette variable existe, cest que lanimation a dj t joue au moins une fois, nous rcuprons alors les valeurs des tableaux coordX et coordY (liges 8 et 9), an de les utiliser pour replacer les occurrences pion1, pion2 et pion3 (lignes 11 et 12). Des lignes 17 51, nous programmons les occurrences des trois pions an quils puissent tre rendus mobiles. Revenons tout de mme sur les lignes 22 26. Ligne 22 : la variable entreeCoords stocke en tant que valeur, le numro utilis comme sufxe de chaque occurrence (1, 2 ou 3). Lignes 23 et 24 : nous pouvons ensuite changer la valeur de lentre correspondant au numro obtenu. Lignes 25 et 26 : nous replaons dans le chier visite.sol, les valeurs des tableaux coordX et coordY. Vous noterez que les lignes 34 38 et 47 50 possdent les mmes lignes dinstructions. Lignes 53 57 : ce gestionnaire permet de crer un chier dont le nom correspond au contenu du texte de saisie avec la variable nomConfig. Il devient alors possible dcrire lintrieur de ce chier, deux variables intitules coordX et coordY dont les valeurs correspondent aux tableaux qui portent les mmes noms. Lignes 58 66 : lorsque lutilisateur clique sur ce bouton, vous remarquerez que nous utilisons nouveau toutes les lignes dinstructions que nous avons utilises dans ce script. Nous chargeons un cookie (un chier SOL) dont le nom est spci dans la variable nomConfig ; les valeurs quil contient servent replacer les trois occurrences pion1, pion2 et pion3.
Bogues ventuels
Lorsque vous navez pas lhabitude de manipuler les cookies, noubliez pas dajouter le mot data entre le nom de votre cookie et celui de la variable qui contient la valeur que vous passez. Par ailleurs, nous vous avons prcis que le paramtre gurant entre les parenthses de la mthode getLocal() correspond un chier sur la machine de lutilisateur. Najoutez pas pour autant le nom de lextension, cest automatique, y compris sur Mac.
248
Enregistrement dans une base MySQL
Figure 13-2
Lutilisateur saisit son nom dans le champ correspondant, il peut alors cliquer sur le bouton Obtenir pour charger son dernier score enregistr, ou bien saisir une valeur avant de cliquer sur le bouton Enregistrer.
Cette animation est trs intressante car elle rsume simplement ce quil est possible de faire entre Flash et PHP, mais avant de commencer son analyse, rappelons le principe de fonctionnement du chargement de donnes dans un chier SWF. Que vous chargiez le contenu dun chier texte au format UTF-8 ou celui dune page PHP, vous devez toujours garder lesprit le besoin dobtenir des donnes sous la forme suivante :
nomdelavariable=valeur1&nomdelavariable2=valeur2&nom
Si cela ne vous semble pas vident, prcisons que nous avons toujours une variable pour laquelle on dnit une valeur spare par le signe =. Ensuite, pour placer cte cte plusieurs variables, il suft dutiliser le caractre de lesperluette. An de mettre en vidence la structure, ajoutons ces quelques espaces :
nomdelavariable=valeur1 Remarque
Vous ne devez pas ajouter despace, ni avant, ni aprs le signe =.
&
nomdelavariable2=valeur2
&
nom
249
Linterface Partie I
Lorsque vous utilisez le PHP pour gnrer lafchage dune page HTML, vous ne devez donc pas ajouter de balises HTML votre document. Vous devez rellement obtenir une structure qui sappuie sur lexemple suivant :
nom=TARDIVEAU&prenom=David&age=36&ville=Paris
Ajoutons que vous ntes pas oblig davoir plusieurs variables et/ou des valeurs si courtes, vous pourriez tout fait demander lafchage dune telle page.
actualite=Les enfants sont arrivs dans les salles de cours ce matin du 3 septembre vers les 9H00. Pour les plus petits, cela n'a pas t facile Cette anne, 3.408.450 enfants auront fait leur rentre dans plus de 35.345 coles
Chemin daccs : Interface/Enregistrements/EnregistrementMySQL.a Pour la ralisation de cette animation, il nous aura fallu deux chiers PHP en plus du script de lanimation. La construction de la scne est extrmement simple, car deux textes de saisie et deux occurrences de clips sufsent : vNom et vScore, btObtenir et btEnregistrer. Voici le contenu des deux chiers PHP. Code de la page enregistrement.php :
<? $db = mysql_connect('localhost', 'votrelogin', 'votrepassword'); mysql_select_db('rscore'); function Parse($variable,$valeur) { echo "&" . $variable . "=" . utf8_encode($valeur); } $prenom=$HTTP_POST_VARS['prenom']; $score=$HTTP_POST_VARS['score']; $sql = "INSERT INTO score_tbl (prenom,score) VALUES('$prenom','$score')"; $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); Parse('score','Enregistr'); Parse('prenom','Enregistr'); mysql_close($db); ?>
Code de la page lecture.php :

<? $db = mysql_connect('localhost', 'votrelogin', 'votrepassword'); mysql_select_db('rscore'); function Parse($variable,$valeur) { echo "&" . $variable . "=" . utf8_encode($valeur); }
250
$prenom=$HTTP_POST_VARS['prenom']; $sql = "SELECT score FROM score_tbl WHERE prenom='$prenom'"; $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); $data = mysql_fetch_array($req); Parse('score',$data[0]); mysql_close($db); ?>
Script
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 var vNom = ""; var vScore = ""; // btObtenir.onPress = function() { if (vNom.length != 0) { var envoi = new LoadVars(); var recup = new LoadVars(); envoi.prenom = vNom; recup.onLoad = function(success) { if (success) { vScore = this.score; } else { trace("PAS ok"); } }; envoi.sendAndLoad("http://www.yazo.net/lecture.php", recup, "POST"); } }; btEnregistrer.onPress = function() { if (vNom.length != 0 && vScore.length != 0) { var envoi2 = new LoadVars(); var recup2 = new LoadVars(); envoi2.prenom = vNom; envoi2.score = vScore; recup2.onLoad = function(success) { if (success) { vScore = this.score; vNom = this.prenom; } else { vScore = "Problme de chargement"; vNom = "Problme de chargement"; } }; envoi2.sendAndLoad("http://www.yazo.net/enregistrement.php", recup2, "POST"); } };
251
Linterface Partie I
Analyse
Avant danalyser la premire ligne, prcisons que nous avons opt pour lutilisation de la mthode sendAndLoad(). Elle prsente lavantage de grer en une seule fois lenvoi et la rception des donnes. send() et load() qui ncessitent un dveloppement moins concis. Pour ce premier gestionnaire de la ligne 4, nous allons envoyer lURL, le nom saisi par lutilisateur pour obtenir un score. Lignes 1 et 2 : nous initialisons vide le contenu des textes de saisie qui se trouvent sur la scne. Ligne 4 : ce gestionnaire onPress va excuter les lignes dinstructions quil contient, lorsque lutilisateur cliquera sur le bouton qui permet de charger un score aprs la saisie de son nom sur la scne, dans le champs correspondant. Ligne 5 : avant de tenter dtablir une connexion avec le serveur, nous nous assurons que lutilisateur ait bien tap son nom. Le contenu du texte de saisie ne doit pas tre vide, il doit contenir plus dun caractre. Lignes 6 et 7 : nous crons deux instances de la classe LoadVars() an de pouvoir grer lenvoi et la rception de notre requte. Ligne 8 : nous associons linstance, une variable dont la valeur correspond au texte saisi par lutilisateur. Ligne 9 : ce gestionnaire va permettre dexcuter les lignes dinstructions quil contient lorsque lenvoi de la requte sera termine. Lignes 10 14 : nous nous assurons que le chargement des donnes a russi avant de placer le score sur la scne (ligne 11). Ligne 16 : nous envoyons la variable renseigne la ligne 8 ladresse gurant entre les parenthses de la mthode sendAndLoad(). Ligne 19 : ce gestionnaire va permettre prsent denvoyer au serveur un nom accompagn dun score pour un enregistrement dans une base de donnes MySQL. Ligne 20 : nous vrions comme nous lavons fait la ligne 5, si les textes de saisie contiennent des valeurs. Si cest le cas, nous recommenons la procdure que nous avions suivi des lignes 8 16.
Bogues ventuels
Pour une telle animation, il existe de nombreuses sources derreurs, mais voici les principales ! Comme nous le prcisions en introduction cette animation, assurez-vous que le rsultat renvoy par la page PHP est bien une srie de paires nomvariable=valeur. Si vous avez un doute, tapez votre requte dans la barre dURL de votre navigateur, vous pourrez obtenir une conrmation.
252
Vous ne devez pas non plus oublier dutiliser le gestionnaire onLoad qui vrie la n du chargement avant de faire rfrence aux donnes charges. Pour nir, rappelons que la mthode sendAndLoad() possde deux paramtres supplmentaires aprs lURL spcie. Si vous omettez de prciser un nom doccurrence cible dans laquelle doit se charger les donnes retournes (recup et recup2 dans notre animation), vous ne pourrez pas les exploiter.
Obtenir un identiant unique

Il est trs souvent utile de pouvoir obtenir un numro ou un nom de chier unique servant lenregistrement dun document sur un serveur. En effet, dans le cas dun tlchargement de chier sur un serveur, il est indispensable de ne pas en craser un autre par erreur. Cette animation vous dmontre que lutilisation de la date et de lheure suft pour constituer un nom unique. Nous aurions pu galement ajouter dautres paramtres pour obtenir un mot plus long, diminuant ainsi le risque de rencontrer deux valeurs identiques.
Figure 13-3
La valeur ci-contre est tout simplement obtenue grce la classe native Date().
Chemin daccs : Interface/Enregistrements/idUnique.a Pour raliser cette animation, nous avons uniquement eu besoin dun texte dynamique, dont le nom de variable est vNumero, et dune occurrence de clip ou de bouton intitule btNouveauNumero.
253
Linterface Partie I
Script
1 btNouveauNumero.onPress = function() { 2 3 var instant:Date = new Date(); 4 // 5 var millis:Number = instant.getMilliseconds(); 6 var secondes:Number = instant.getSeconds(); 7 var mois:Number = instant.getMonth(); 8 var jour:Number = instant.getDay(); 9 var annee:Number = instant.getFullYear(); 10 // 11 var idUnique:String = "img"+annee+mois+jour+secondes+millis; 12 vNumero = idUnique; 13 14 };
Analyse
Comme vous pouvez le constater, le script est trs court car la technique est trs simple. Ligne 1 : gestionnaire onPress qui sera excut lorsque lutilisateur cliquera sur lunique occurrence de clip sur la scne. Ligne 3 : nous instancions la classe Date() pour pouvoir obtenir une valeur de la forme : Wed Jul 18 11:26:41 GMT+0200 2007. Lignes 5 9 : nous stockons dans 5 variables diffrentes des informations que nous allons concatner la ligne 11. Ligne 11 : nous formons une chane de caractres par concatnation. Ligne 12 : nous afchons sur la scne le rsultat de la concatnation.
Bogues ventuels
Pour obtenir un numro unique chaque clic, la ligne 3 doit se trouver dans le gestionnaire onPress et non lextrieur (avant ou aprs le gestionnaire).
254
Partie II
Les mdias
Le texte et les images ne sufsent plus enrichir le contenu dune page Web. Les agences de publicit, les responsables marketing et les organisateurs dvnements souhaitent tre de plus en plus percutants. Lelearning essaye de se rapprocher de lapprenant, les portails des grands mdias essayent de proposer peu peu des tlvisions en ligne Voici quelques-unes des raisons pour lesquelles la vido, et plus anciennement le son, ont russi simposer comme nouveaux mdias sur Internet. Aujourdhui (aot 2005), la France compte huit millions dabonns au haut dbit et nous pouvons enn dire que nous sommes au dbut dune nouvelle re sur Internet. La vido propose au travers de la technologie du player Flash 8 ouvre en effet de nouvelles portes, donnant ainsi aux cratifs et dveloppeurs des possibilits de cration quil tait difcile dimaginer il y a trois ans. Nous allons dcouvrir dans cette partie, des animations sur : Le contrle des mdias, cest--dire la gestion du son et de la vido dans les animations, mais galement du texte. Le mlange des mdias sera au cur de nombreuses animations. La gestion des ux RSS. Phnomne de mode ou nouveau moyen de communiquer sur Internet. Il semble plutt que ce soit un nouveau moyen dinformation et dj un standard. Veuillez vous reporter la dernire partie de ce livre, pour comprendre le fonctionnement de Flash Media Server. En effet, de nombreuses animations font appel cette technologie.
14
Contrle des mdias
Nous nallons pas nous limiter au travers des analyses de ces animations, contrler larrt et la lecture dun son ou dune vido. Avec Flash Media Server, nous allons voir comment diffuser et recevoir des ux audio et vido. Nous dcouvrirons galement les techniques de synchronisation entre les mdias (son/texte et vido/texte).
Ralisation dun diaporama dynamique

Il nexiste pas une seule technique pour raliser un diaporama dynamique, nous avons nous mme opt pour deux solutions que nous vous proposons. La premire fait simplement appel des photos qui se trouvent dans un dossier et non dans lanimation. Le nombre de photos est prcis : 6. Il a t spci dans le script de lanimation. Il serait trs facile de mettre le diaporama jour en remplaant les anciennes photos par des nouvelles. En revanche pour en ajouter ou en supprimer, il faudrait ouvrir le chier Flash et modier le script. Cela poserait galement un problme dagencement des occurrences sur la scne. La deuxime animation apporte une solution ce problme, en proposant une galerie dynamique faisant appel un chier XML quil est plus facile de mettre jour. Commenons par vous prsenter le premier diaporama qui ne contient rien sur la scne. Aucune occurrence ! Lunique script de cette animation est trs court et simple comprendre.
Les mdias Partie II
Figure 14-1
Les vignettes situes gauche de la scne ont t places dynamiquement : un clic sur lune dentre elles, et elle safche plus grande chelle.
Chemin daccs : Medias/ControleMedias/MediasDiaporama.a
Script
1 2 3 4 5 6 7 8 9 10 11 _root.createEmptyMovieClip("cadreChargementPhoto", 0); cadreChargementPhoto._x = 147; cadreChargementPhoto._y = 62; for (i=1; i<=6; i++) { _root.createEmptyMovieClip("image"+i, i); _root["image"+i]._x = 9.7; _root["image"+i]._y = (i*60)-24; //_root["image"+i].sonNumero = i Impossible car chargement annule _root["chargeur"+i] = new MovieClipLoader(); _root["chargeur"+i].sonNumero = i; _root["chargeur"+i].onLoadComplete = function() {
258
Contrle des mdias Chapitre 14
12 _root["image"+this.sonNumero].sonNumero = this.sonNumero 13 _root["image"+this.sonNumero].onPress = function() { 14 cadreChargementPhoto.loadMovie ("images/n"+this.sonNumero+".jpg"); 15 }; 16 }; 17 _root["chargeur"+i].loadClip("vignettesImages/n"+i+".jpg", _root["image"+i]); 18 }
Analyse
Lignes 1 3 : an de pouvoir charger la grande image centrale du diaporama, nous crons une occurrence vide que nous plaons 147 pixels du bord gauche de la scne et 62 pixels du haut. Ligne 4 : nous effectuons une boucle de six itrations, car cest le nombre dimages que nous avons prvu de placer verticalement gauche de la scne, comme le montre la gure 14-1. Lignes 5 7 : nous crons des occurrences vides an de pouvoir les cibler avec la mthode loadClip() de la ligne 17. Ligne 9 : les six occurrences que nous plaons dynamiquement sur la scne ne se chargent pas en une fraction de seconde. Il est donc impossible de leur affecter un gestionnaire onPress tant que le chargement nest pas termin. Pour grer ce temps dattente, nous nallons pas utiliser la mthode loadMovie(), mais la classe MovieClipLoader(). Ligne 10 : nous dnissons une variable associe chaque instance cre an dobtenir un identiant unique.
Remarque
Consultez la partie Gestion des lignes dinstructions contenues dans une boucle for() dans la partie avant-propos de cet ouvrage pour des explications complmentaires de la ligne 10.
Ligne 11 : ce gestionnaire excutera les lignes dinstructions quil contient lorsque le chargement de chaque image sera termin. Ligne 12 : chaque occurrence de clip, nous passons la variable associe chaque instance de la classe MovieClipLoader(). Ligne 13 : nous assignons un gestionnaire onPress chacune des six occurrences contenant les petites vignettes. Il demande le chargement dune grande image au centre de lanimation (ligne 14). Ligne 17 : le chargement des images se fait avec la mthode loadClip() de la classe MovieClipLoader() qui a besoin de deux paramtres. Le premier correspond ladresse de limage charger, le deuxime est le nom de loccurrence dans laquelle va venir se charger limage.
259
Les mdias Partie II
Voil, le script est simple, mais il ne permet de grer que six images avec des noms de chiers trs prcis. Avant daborder lanimation qui propose un diaporama avec un dlement de plusieurs sries, voici un deuxime script qui ressemble au premier, nous avons ajout la gestion dune instance XML qui nous permet dafcher des lgendes sous les photos.
Ralisation dun diaporama dynamique

avec un chier XML
Si vous devez raliser un diaporama susceptible dtre mis jour rgulirement, il sera alors plus intressant dutiliser un chier XML. En effet, il vous suft de changer le contenu de ce dernier pour changer le contenu du diaporama.
Chemin daccs : Medias/ControleMedias/MediasDiaporama2.a Dans cette animation, nous allons ajouter une fonctionnalit supplmentaire qui permet de placer une lgende pour chaque image. Par ailleurs, un chier XML contiendra toutes les images charger. Cette technique facilite la mise jour de ce genre de diaporama.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 _root.createEmptyMovieClip("cadreChargementPhoto", 0); cadreChargementPhoto._x = 147; cadreChargementPhoto._y = 62; for (i=1; i<=6; i++) { _root.createEmptyMovieClip("image"+i, i); _root["image"+i]._x = 9.7; _root["image"+i]._y = (i*60)-24; _root["chargeur"+i] = new MovieClipLoader(); _root["chargeur"+i].sonNumero = i; _root["chargeur"+i].onLoadComplete = function() { _root["image"+this.sonNumero].sonNumero = this.sonNumero; _root["image"+this.sonNumero].onPress = function() { cadreChargementPhoto.loadMovie("images/n"+this.sonNumero+".jpg"); vLegende = racineLegendes.childNodes[this.sonNumero].attributes.legende; }; }; _root["chargeur"+i].loadClip("vignettesImages/n"+i+".jpg", _root["image"+i]); } // var chargeLegendes = new XML();
260
21 22 23 24 25
chargeLegendes.load("legendesnuages.xml"); chargeLegendes.ignoreWhite = true; chargeLegendes.onLoad = function() { racineLegendes = this.firstChild; };
Analyse
Vous laurez remarqu, seules les lignes 14 et 20 25 changent. Ligne 14 : chaque clic sur une des six vignettes, la lgende safche sur la scne. Lignes 20 25 : nous chargeons le contenu du chier legendesnuages.xml an quil soit disponible lors des clics sur les vignettes. Passons prsent au diaporama complet qui propose de visionner plusieurs sries dimages accompagnes de leurs lgendes.
Bogue ventuel
Rappelons que si vous oubliez dutiliser la proprit ignoreWhite, cela entranera inluctablement un dysfonctionnement de votre diaporama. La lecture du chier XML ne se fera en effet pas correctement.
Ralisation dun diaporama dynamique avec

un chier XML et de nombreuses photos
Les deux animation prcdentes nous ont fait dcouvrir progressivement les techniques ncessaires pour le dveloppement dun diaporama dynamique. En revanche, nous ne savons pas encore grer plus de six photos. Nous allons donc voir quen ajoutant quelques lignes de code, il est trs simple de grer des sries de photos.
Chemin daccs : Medias/ControleMedias/MediasDiaporama3.a Nous avons plac sur la scne, deux textes dynamiques intituls affNbrSeries et vLegende, nous y afcherons lintrieur le numro de srie de la photo et la lgende de la grande image. Pour changer lafchage des sries, nous avons plac deux occurrences de clip sur la scne, intitules btSerieSuivante et btSeriePrecedente. Il sagit des deux petits triangles situs droite de la srie de six photos.
261
Les mdias Partie II
Figure 14-2
Les images de ce diaporama se chargent dynamiquement comme dans la premire animation, deux boutons permettent cependant de visualiser plusieurs sries de six images.
Script
Le chier XML que nous allons utiliser pour ce diaporama contient les donnes suivantes :
<Nuages> <Nuage/> <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage
legende legende legende legende legende legende legende legende legende legende
="Nuage de lait"/> ="Lgers et seuls"/> ="Nu qu'lait art ?"/> ="Ciel ou fond marin ?"/> ="A la queue lait lait"/> ="Ekstr d Ma gritte ?"/> ="Heu lne !"/> ="La lumire"/> ="Sur un fil"/> ="Chant-y !!!"/>
262
<Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage <Nuage </Nuages>
legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende
="Photo vole"/> ="Les profils"/> ="Loin sur le fil"/> ="Orage"/> ="Couches"/> ="Sur ex"/> ="Bleue"/> ="Loin"/> ="Trs loin"/> ="Miroir"/> ="Y'a pas de fume sans nuages"/> ="Ciel dlav"/> ="N 'Gatif'"/> ="Piti oin oin oin"/> ="No comment"/> ="De nombreux petits loin"/> ="Le jumeau"/> ="Imagination"/> ="L'oeil"/> ="La migration des nuages"/> ="Filtre/Rendu/Nuages"/>
Le script situ sur limage-cl de la timeline principale de lanimation contient les lignes dinstructions suivantes :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 _root.createEmptyMovieClip("cadreChargementPhoto", 0); cadreChargementPhoto._x = 147; cadreChargementPhoto._y = 62; // var chargeLegendes = new XML(); chargeLegendes.load("legendesnuages.xml"); chargeLegendes.ignoreWhite = true; chargeLegendes.onLoad = function() { racineLegendes = this.firstChild; nbrSeries = Math.ceil((racineLegendes.childNodes.length-1)/6); affNbrSeries = 1+"/"+nbrSeries; }; // for (i=1; i<=6; i++) { _root.createEmptyMovieClip("image"+i, i); _root["image"+i]._x = 9.7; _root["image"+i]._y = (i*60)-24; } // var premiereImageChargee = 0;
263
Les mdias Partie II
21 // 22 chargementSerie = function (imageAcharger) { 23 for (i=1; i<=6; i++) { 24 imageAcharger++; 25 _root["chargeur"+i] = new MovieClipLoader(); 26 _root["chargeur"+i].sonNumero = i; 27 _root["chargeur"+i].saGrandePhoto = imageAcharger; 28 _root["chargeur"+i].onLoadComplete = function() { 29 _root["image"+this.sonNumero].saGrandePhoto = this.saGrandePhoto; 30 _root["image"+this.sonNumero].onPress = function() { 31 cadreChargementPhoto.loadMovie("images/n"+this.saGrandePhoto+".jpg"); 32 vLegende = racineLegendes.childNodes[this.saGrandePhoto] .attributes.legende; 33 }; 34 }; 35 _root["chargeur"+i].loadClip("vignettesImages/n"+imageAcharger+" .jpg", _root["image"+i]); 36 } 37 affNbrSeries = Math.floor(imageAcharger/6)+"/"+nbrSeries; 38 }; 39 chargementSerie(premiereImageChargee); 40 // 41 btSerieSuivante.onPress = function() { 42 if (premiereImageChargee<racineLegendes.childNodes.length-7) { 43 premiereImageChargee += 6; 44 } 45 chargementSerie(premiereImageChargee); 46 }; 47 btSeriePrecedente.onPress = function() { 48 if (premiereImageChargee>=6) { 49 premiereImageChargee -= 6; 50 } 51 chargementSerie(premiereImageChargee); 52 };
Analyse
Lignes 1 3 : an de pouvoir charger la grande image centrale du diaporama, nous crons une occurrence vide que nous plaons 147 pixels du bord gauche de la scne et 62 pixels du haut. Lignes 5 7 : nous chargeons le document XML qui contient les lgendes des photos. Lignes 8 12 : lorsque les donnes XML seront charges, nous stockons dans trois variables les informations suivantes : racineLegende : un raccourci pour accder plus rapidement aux nuds enfants de linstance XML ;
264
nbrSeries : le nombre de sries de 6 images ; affNbrSeries : une chane de caractres sous la forme 1/6 6/6 qui correspond au numro de la srie afche lcran sur le nombre total de sries. Lignes 14 18 : nous effectuons une boucle de six itrations, car cest le nombre dimages que nous avons prvu de placer verticalement gauche de la scne comme le montre la gure 14-2. Ligne 20 : lorsque vous cliquerez sur les triangles prsents sur la scne, cest que vous souhaiterez visualiser la srie de photos suivante ou prcdente. Au clic sur lun de ces triangles, la fonction chargemenSerie() va excuter une boucle for() avec six itrations. La valeur initiale de cette boucle sera toujours 0, 6, 12, 18, 24 ou 30 (dans notre cas, car nous avons plus de 30 images). Nous initialisons donc la variable premiereImageChargee 0 an de charger la premire srie de photos intitule n0.jpg n5.jpg. Ligne 22 : cette fonction est charge dafcher une srie de six images gauche sur la scne, sous la forme de vignettes. Ligne 23 : cette boucle for() va permettre de : Crer six instances de la classe MovieClipLoader() (ligne 25) an de grer la n du chargement des images (ligne 28). Associer deux identiants uniques chaque instance de la classe MovieClipLoader() (lignes 26 et 27). Dnir un gestionnaire onPress chaque vignette, charg dexcuter la mthode loadMovie() qui place une grande image sur la scne. Ligne 37 : lafchage sur la scne de type 1/6 est mis jour. Ligne 39 : cette ligne dinstruction ne fait plus partie de la fonction cre la ligne 22. Elle appelle en revanche cette dernire an quelle soit excute une premire fois au lancement de lanimation. Lignes 41 46 : ce gestionnaire attribu loccurrence du triangle qui permet dafcher les six images suivantes appelle la fonction chargementSerie() aprs avoir incrment la variable premiereImageChargee. Le test des lignes 42 44 vrie quil reste encore des images afcher. Lignes 47 51 : ce gestionnaire est quant lui attribu lautre triangle pour voir les images qui prcdent et celles qui sont afches.
Bogue ventuel
Les lignes 42 44 et 48 50 vitent justement quun bogue ne vienne tenter dafcher des images qui nexistent pas.
265
Les mdias Partie II
Ralisation dun lecteur MP3

Voici une animation complte ! Nous ne nous sommes pas limits la ralisation dune application comprenant les boutons habituels de lecture, darrt et de contrle du volume sonore, nous avons souhait y ajouter une jauge cliquable, une gestion de la balance et un bouton pause.
Figure 14-3
Cette animation linterface pure possde toutes les fonctionnalits dun player audio.
Remarque
Si vous consultez cette animation dans le player Flash, vous constaterez que le bouton Lecture nest pas cliquable, car les lignes 31 34 ne se sont pas excutes (cliquez sur le bouton Pause au lancement de lanimation pour contourner ce bogue). En revanche, si vous faites glisser ce chier .swf dans la fentre dun navigateur ou si vous le lisez dans une page HTML, il ny aura plus de problme. Prcisons que ce gestionnaire onLoad ne sert rien si vous devez excuter une animation en local.
Chemin daccs : Medias/ControleMedias/LecteurMP3.a Vous numrer des noms doccurrences et de variables qui parlent delles-mmes ne nous servirait pas pour nos explications, mais avant de passer directement lanalyse du script, voici quelques conseils de dveloppement pour une application de son.
266
Lorsque vous demanderez la lecture dun son, vous aurez parfois besoin de savoir si la lecture est toujours en cours. Pour ce faire, vous disposez de plusieurs techniques, en voici deux : Utilisez une variable que vous basculez de true false en fonction de la lecture. Utilisez la proprit enabled pour rendre cliquable ou non cliquable loccurrence du bouton Lecture. Il vous suft alors de lire la valeur de cette proprit pour connatre ltat de lecture. Par ailleurs, pour lafchage du temps qui scoule, vous pouvez utiliser un gestionnaire
onEnterFrame ou une fonction setInterval(), cette dernire proposition reste la meilleure
solution. Vous devez toujours garder lesprit que la mesure du temps se fait en millisecondes, ce qui explique des divisions par 1 000 dans notre script. Si vous ntes pas familier avec la gestion du Drag & drop contraint sur un axe, nous vous invitons consulter dans le chapitre 4 les animations qui traitent de ce sujet.
Script
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 btLecture.enabled = false; pause_inst._visible = false; jauge_inst._xscale = 0; hp.setVolume(50); // afficherTempsConverti = function (temps, nomVariable) { tempsEcoule = temps; minutes = Math.floor(tempsEcoule/1000/60); secondes = Math.floor((tempsEcoule/1000)%60); minutes = minutes<=9 ? "0"+minutes : minutes; secondes = secondes<=9 ? "0"+secondes : secondes; _root[nomVariable] = minutes+":"+secondes; }; // traitementLecture = function () { jauge_inst._xscale = (hp.position/hp.duration)*100; afficherTempsConverti(hp.position, "affichageTemps"); }; lancementLecture = function () { hp.start(); btLecture.enabled = false; btLecture._alpha = 60; pause_inst._visible = false; clearInterval(lancerSon); lancerSon = setInterval(traitementLecture, 100); };
267
Les mdias Partie II
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
// hp = new Sound(); hp.loadSound("Sons/Zik1.mp3", 0); // hp.onLoad = function() { btLecture.enabled = true; afficherTempsConverti(hp.duration, "affichageDureeTotal"); }; // btLecture.onPress = function() { lancementLecture(); }; btArret.onPress = function() { btLecture.enabled = true; btLecture._alpha = 100; hp.stop(); pause_inst._visible = false; clearInterval(lancerSon); memoPause = 0; }; // btZoneProgressLecture.onPress = function() { coefficientClic = Math.floor(this._xmouse/2.78)/100; if (!btLecture.enabled) { hp.stop(); hp.start((hp.duration/1000)*coefficientClic, 1); } this.onMouseMove = function() { coefficientClic = Math.floor(this._xmouse/2.78)/100; hp.stop(); hp.start((hp.duration/1000)*coefficientClic, 1); }; }; btZoneProgressLecture.onRelease = btZoneProgressLecture.onReleaseOutside=function () { delete this.onMouseMove; }; // btPause.onPress = function() { if (btLecture.enabled == false) { pause_inst._visible = true; btLecture.enabled = true; btLecture._alpha = 100; memoPause = hp.position/1000; hp.stop(); } else { pause_inst._visible = false; hp.start(memoPause, 1); btLecture.enabled = false;
268
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
btLecture._alpha = 60; clearInterval(lancerSon); lancerSon = setInterval(traitementLecture, 100); } }; btRAZ.onPress = function() { memoPause = 0; hp.stop(); lancementLecture(); pause_inst._visible = false; }; // hp.onSoundComplete = function() { btLecture.enabled = true; btLecture._alpha = 100; jauge_inst._xscale = 0; clearInterval(lancerSon); afficherTempsConverti(0, "affichageTemps"); }; // curseurVolume.onPress = function() { this.startDrag(false, 60, 200, 60, 320); this.onMouseMove = function() { niveauSonore = 100-(this._y-200)/1.2; vVolume = Math.round(niveauSonore); hp.setVolume(niveauSonore); }; }; curseurVolume.onRelease = curseurVolume.onReleaseOutside=function () { stopDrag(); delete this.onMouseMove; }; curseurBalance.onPress = function() { this.startDrag(false, 250, 310, 370, 310); this.onMouseMove = function() { balance = (this._x-310)*1.667; vBalance = Math.round(balance); hp.setPan(balance); }; }; curseurBalance.onRelease = curseurBalance.onReleaseOutside=function () { stopDrag(); delete this.onMouseMove; };
269
Les mdias Partie II
Analyse
Il serait absurde danalyser ligne aprs ligne des instructions qui vous paratraient videntes. Nous allons donc plutt apporter des commentaires sur les diffrents gestionnaires contenus dans le script.
Remarque
Tous les noms doccurrences et de variables sont signicatifs, cependant, prcisons que pause_ inst est le nom donn licne (le mot Pause ) qui safche sous le bouton Pause lorsquil a t enfonc. Nous avons choisi le nom dinstance hp pour Haut-Parleur.
Lignes 1 4 : nous initialisons les proprits de certaines occurrences lorsque le son est larrt. Lignes 6 13 : nous crons une fonction qui va tre charge de convertir lafchage du temps au format horaire. Exemple : 01 : 34 pour 1 minute et 34 secondes. Lignes 15 18 : cette fonction sera appele pour grer lafchage du temps et de la jauge qui doit sagrandir au fur et mesure de la lecture. Lignes 19 26 : cette fonction sera appele ds que le bouton Lecture sera enfonc. Lignes 28 34 : le cur du script ! Si nous devions limiter notre script quelques lignes, celles-ci resteraient les plus indispensables. Ligne 36 38 : l o vous pensez ventuellement que le bouton Lecture se contente dexcuter la mthode start() de la classe Sound(), vous dcouvrez quil est ncessaire dexcuter de nombreuses lignes dinstructions contenues dans la fonction lancementLecture() pour grer le son dans son intgralit. Lignes 39 46 : larrt du son ne se limite pas lexcution de la mthode stop(), vous devez rinitialiser certaines variables et proprits ncessaires la gestion de la lecture du son. Lignes 48 59 : comme nous lvoquions en introduction cette animation, la jauge de progression qui indique le niveau de lecture est une occurrence cliquable sur laquelle vous pouvez aussi faire bouger votre souris. Lignes 64 79 : les lignes dinstructions parlent delles-mmes. Ajoutons tout de mme que nous mmorisons la position de la tte de lecture aprs lavoir divise par 1 000. La mthode start() de la classe Sound() a besoin de paramtres exprims en secondes et non en millisecondes. Lignes 80 85 : le bouton btRAZ est celui du Stop. Lignes 87 93 : si vous omettez ce gestionnaire, le bouton Lecture ne sera plus cliquable. Vous devez galement informer lutilisateur visuellement que le son est termin en changeant le contenu de lindicateur de temps ainsi que lapparence du bouton Lecture. Lignes 95 106 : si vous ne comprenez pas ces lignes dinstructions, consultez la premire animation du chapitre 4 qui traite des variateurs.
270
Bogues ventuels
Lors de sa phase de dveloppement, nous pouvons dire que cette animation a rencontr de nombreux bogues. Il faut en effet tout prvoir lorsque vous ralisez une animation qui gre le son. Pour ne pas laisser traner de bogues dans une telle animation, le conseil est de commencer une fois de plus par ltape du papier en listant pour chaque bouton les actions excuter.
Ralisation dun lecteur vido

Pour cette animation, nous avons essay dcrire un minimum de lignes de code an de dmontrer quil nen faut pas beaucoup pour contrler une vido.
Figure 14-4
Cette interface minimaliste dmontre quil faut peu de boutons et peu de code pour contrler une vido en Flash.
Chemin daccs : Medias/ControleMedias/LecteurVideo.a La scne contient 4 occurrences intitules btLecture, btArret, btPause et btRAZ pour contrler une vido. Nous avons galement plac sur la scne, un symbole vido que vous obtiendrez en slectionnant la commande Nelle vido du menu local de la Bibliothque. Loccurrence obtenue a t nomme ecran. Pour nir, un texte dynamique dont le nom de variable est affichageTemps a t plac sous loccurrence qui va diffuser la vido.
271
Les mdias Partie II
Script
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 leCable = new NetConnection(); leCable.connect(null); abonnement = new NetStream(leCable); ecran.attachVideo(abonnement); // btLecture.onPress = function() { abonnement.play("traveling.flv"); }; btPause.onPress = function() { abonnement.pause(); }; btRAZ.onPress = function() { abonnement.seek(0); }; btArret.onPress = function() { abonnement.play(""); }; // afficherTemps = function () { tempsEcoule = abonnement.time; minutes = Math.floor(tempsEcoule/60); secondes = Math.floor((tempsEcoule)%60); minutes = minutes<=9 ? "0"+minutes : minutes; secondes = secondes<=9 ? "0"+secondes : secondes; affichageTemps = minutes+":"+secondes; }; lancerVideo = setInterval(afficherTemps, 100);
Analyse
Lignes 1 3 : nous avons besoin de faire passer un ux entre le chier .swf et la vido au format .v. Pour cela, nous devons faire appel la classe NetStream() qui a elle-mme besoin dune instance de la classe NetConnection(). Ligne 4 : le ux passe correctement entre lanimation et la vido, maintenant il faut diriger les images vers loccurrence du symbole vido, cest le rle de cette ligne dinstruction. Les lignes 6 17 sont relativement simples comprendre, ajoutons tout de mme que la mthode seek() peut servir avancer la tte de lecture un instant prcis de la vido. La valeur attendue est exprime en secondes. Lignes 19 26 : nous convertissons lafchage du temps an dobtenir un format horaire dans le texte dynamique qui se trouve sur la scne, dont le nom de variable est affichageTemps. Ligne 27 : nous demandons ds le lancement de lanimation lafchage du temps de la vido qui scoule alors que la lecture na pas t demande. Comme nous vous lindiquions en
272
introduction de cette animation, nous avons souhait simplier le script. Si nous devions optimiser notre script, nous placerions cette ligne 27 la suite de la 7 (avant laccolade de fermeture). Il faudrait alors placer la fonction clearInterval(lancerVideo) la suite de la ligne 16.
Bogues ventuels
Attention, dans cette animation, les bogues peuvent tre nombreux, nous allons donc exceptionnellement tablir une liste des points surveiller. Respectez la casse des noms de classes NetConnection() et NetStream(). Si vous oubliez une majuscule, la vido ne safchera pas. Noubliez pas de nommer loccurrence du symbole vido que vous avez plac sur la scne. Spciez le nom du chier .v entre guillemets. Prfrez play("") close() qui narrte pas la lecture de la vido, mais ferme le ux quil faudrait alors ouvrir nouveau.
Diffuser une vido en streaming (Flash Media Server)

En ouvrant le chier .a correspondant, vous avez peut-tre t surpris de dcouvrir quil sagit de la mme animation que la prcdente ! Non, pas tout fait, deux dtails de grande importance font toute la diffrence.
Chemin daccs : Medias/ControleMedias/MediasVideoStream.a Rfrez-vous la description de lanimation prcdente pour dcouvrir le contenu de la scne de cette animation.
Script
1 2 3 4 leCable = new NetConnection(); leCable.connect("rtmp:/livre/studio1"); abonnement = new NetStream(leCable); ecran.attachVideo(abonnement);
273
Les mdias Partie II
5 // 6 btLecture.onPress = function() { 7 abonnement.play("traveling"); 8 };
Analyse
Pour commencer, lorsque vous indiquez le nom dune vido qui se trouve donc obligatoirement sur le serveur qui fait tourner Flash Media Server, vous ne devez pas spcier lextension. Nous avons crit traveling et non traveling.flv. Par ailleurs, la mthode connect() de la ligne 2 attend un paramtre qui correspond ladresse du dossier dans lequel se trouve la vido. Pour tre plus prcis, le dossier racine (livre dans notre exemple) contient un dossier intitul streams qui contient lui-mme le dossier spci aprs celui de la racine (studio1 dans notre exemple).
Remarque
Au moment o nous crivons ces lignes, Macromedia vient dannoncer Flash Media Server. Les animations de ce livre ont t dveloppes sur Flash Communication Server au courant de lt 2005. Nous ne savons pas encore sil est toujours oblig de ne pas spcier lextension.
Ralisation dun module de visioconfrence (Flash Media Server)

Deux webcams, deux ordinateurs, deux connexions Internet et le tour est jou ! Mais le code ? , nous direz-vous Il nest pas bien compliqu, mais relativement long. Il y a en effet de nombreuses lignes dinstructions, car nous grons de nombreux paramtres qui ne sont pas toujours indispensables. Prenons lexemple du tmoin lumineux vert clair de la gure 14-5 (en haut droite des images) qui indique que la diffusion/rception est en cours. Il nest pas indispensable. Comme le titre lindique, vous devez utiliser Flash Media Server ou Flash Communication Server pour dvelopper une telle application. Si vous ne connaissez pas cette technologie, nous vous invitons consulter la dernire partie de ce livre qui traite de Flash Media Server. Pour que deux utilisateurs puissent se voir, ils doivent se connecter la mme adresse, saisir leurs prnoms dans les champs prvus cet effet, et cliquer sur les boutons Envoyer et Recevoir. Attention respecter la casse des noms saisis par les deux utilisateurs.
274
Figure 14-5
La diffusion et la rception dun ux se font trs simplement grce Flash Media Server.
Chemin daccs : Medias/ControleMedias/MediasVisioConference.a Lanimation contient deux occurrences dun symbole de type vido, qui sintitulent ecran et ecranRetour. Deux textes dynamiques intituls etatReception et etatReception2 ont galement t placs dans le haut de la scne pour afcher les informations de connexion. Pour nir, deux textes de saisie intituls nomFluxDiffusion et nomFluxReception permettront aux utilisateurs de saisir leurs prnoms. Comme nous vous le disions au dbut de lanimation, nous vous encourageons consulter la partie qui traite de Flash Media Server pour apprendre dvelopper une animation faisant appel cette technologie. Nous nallons pas expliquer toutes les lignes dinstructions du script de cette animation, car les explications risqueraient de devenir trs techniques et vous ne verriez pas la logique de construction dune telle application. Nous avons tout de mme plac exceptionnellement des lignes de commentaires dans le script an de simplier sa relecture.
275
Les mdias Partie II
Script
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 //####### - 1 - ########### //Retour vido de la webCam // fluxLocal = Camera.get(); //fluxLocal.setQuality(8192, 50); fluxLocal.setMode(240, 180, 15); fluxAudioLocal = Microphone.get(); ecranRetour.attachVideo(fluxLocal); var boutonLive = true; var etatLive = "live"; // //############# - 2 - ############## //Diffusion streame de votre webcam // liaison = new NetConnection(); liaison.connect("rtmp:/livre/studio1"); //Attention, un seul slash / fluxDiffusion = new NetStream(liaison); fluxDiffusion.attachVideo(fluxLocal); fluxDiffusion.attachAudio(fluxAudioLocal); // btEnvoyerDiffusion.onPress = function() { fluxDiffusion.publish(nomFluxDiffusion, etatLive); }; btArretDiffusion.onPress = function() { fluxDiffusion.close(); }; // //######### - 3 - ########### //Reception d'un flux stream // fluxReception = new NetStream(liaison); // btRecevoirDiffusion.onPress = function() { ecran.attachVideo(fluxReception); fluxReception.play(nomFluxReception); ecoute = new Sound(); ecoute.attachAudio(fluxReception); }; btArretReception.onPress = function() { fluxReception.close(); }; // //########## - 4 - ############ //Informations sur la connexion et les flux // couleurDiffusion = new Color(temoinDiffusion); couleurDiffusion.setRGB(0x666666); //
276
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
fluxDiffusion.onStatus = function(etat) { if (etat.code == "NetStream.Publish.Start") { couleurDiffusion.setRGB(0x00FF00); } if (etat.code == "NetStream.Unpublish.Success") { couleurDiffusion.setRGB(0x666666); } }; // couleurReception = new Color(temoinReception); couleurReception.setRGB(0x666666); fluxReception.onStatus = function(etat) { etatReception = etat.code; if (etat.code == "NetStream.Play.Start" || etat.code == "NetStream.Play.PublishNotify") { couleurReception.setRGB(0x00FF00); etatReception = ""; } if (etat.code == "NetStream.Play.Stop" || etat.code == "NetStream.Play.UnpublishNotify") { couleurReception.setRGB(0x666666); etatReception = "Arrt de la rception ou de la diffusion"; } }; liaison.onStatus = function(etat) { if (etat.code == "NetConnection.Connect.Success") { etatReception2 = "Connexion tablie"; } if (etat.code == "NetConnection.Connect.Failed") { etatReception2 = "Pas de connexion"; } }; // live._alpha = 0; live.onPress = function() { boutonLive = !boutonLive; if (boutonLive) { etatLive = "record"; this._alpha = 100; } else { etatLive = "live"; this._alpha = 0; } };
Analyse
Ligne 4 : nous associons un identiant la mthode get() de la classe Camera() an de pouvoir lutiliser la ligne 19.
277
Les mdias Partie II
Ligne 6 : nous dterminons une taille et un nombre dimages au ux que nous allons diffuser. Ligne 7 : nous rptons lopration avec la source sonore. Ligne 8 : nous rattachons la scne, la source sonore provenant du micro branch lordinateur de lutilisateur. Lignes 9 et 10 : ces deux variables nous serviront dans le gestionnaire de la ligne 82, nous vous en dirons plus ce moment-l. Lignes 15 20 : nous ouvrons une connexion entre le chier .swf qui a t tlcharg sur la machine de lutilisateur et le Flash Media Server.
Remarque
Noubliez pas quau moment o un internaute se connecte sur un site qui contient une page avec un chier .swf, ce dernier est tlcharg dans les chiers temporaires de sa machine.
Lignes 22 24 : ce gestionnaire permet de publier le ux provenant de la webcam vers le serveur. Il a t associ au bouton Envoyer qui se trouve sur la scne. Lignes 25 27 : ce gestionnaire a t associ au bouton Arrter (la diffusion). Ligne 32 : nous allons prsent rcuprer le ux diffus sur le serveur. Si nous indiquons les deux mmes noms dans les textes de saisie, nous obtenons deux fois la mme image sur la scne. Lignes 34 39 : il nest pas ncessaire dtablir une nouvelle connexion avec le serveur, cest pourquoi nous ninstancions pas une nouvelle fois la classe NetConnection(). En revanche, pour recevoir un ux, nous ne pouvons pas utiliser celui que nous utilisons dj pour la diffusion, nous sommes donc obligs dinstancier nouveau la classe NetStream(). Ce gestionnaire de la ligne 34 permet de recevoir un ux provenant du serveur lorsque le bouton Recevoir est cliqu. Lignes 47 71 : an dindiquer aux utilisateurs quun ux est en cours de diffusion et/ou de rception, nous changeons la couleur des ronds qui se trouvent sur la scne au-dessus de limage des vidos. Cela simule des diodes qui sallument. Comme nous vous le disions en introduction cette animation, rappelons que les lignes 47 79 ne sont pas obligatoires pour le bon fonctionnement de cette animation. Lignes 72 79 : nous indiquons lutilisateur que la connexion et non la diffusion du ux est bien tablie. Lignes 81 91 : si vous observez bien le coin infrieur droit de la vido de rception du ux, vous dcouvrirez un pixel cliquable ! Il sagit dune fonction cache qui permet de transformer ce module de VisioConfrence en enregistreur vido. En effet, si vous cliquez sur ce pixel, il apparat ou disparat indiquant ainsi que la diffusion (lorsque vous cliquez sur le bouton Envoyer) va tre enregistre sur le serveur. Il sufra alors de saisir le nom de diffusion dans le texte de saisie proposant une rception et de cliquer sur le bouton Recevoir !
278
Ralisation dun module de confrence (Flash Media Server)

Les jeux en rseau rencontrent depuis quelques annes un succs croissant ! An que les joueurs puissent communiquer entre eux, il est trs facile dajouter un module de confrence avec Flash Media Server !
Figure 14-6
Flux vido et/ou ux audio, la technique est la mme !
Chemin daccs : Medias/ControleMedias/MediasConference.a Nous avons plac deux textes de saisie sur la scne avec quatre occurrences issues du mme clip. Une dernire intitule temoinSon se trouve droite sur la scne, il sagit initialement dun rectangle transform en clip, dont le point dalignement est situ la base. Sur la copie dcran de la gure 14-6, cette occurrence a t rgle 1 % de son chelle verticale, on aperoit donc un simple trait noir en bas du cadre qui va contenir la jauge. Le script de cette animation ne prsente pas de relle difcult partir du moment o vous connaissez le fonctionnement dune application Flash Media Server. Rfrez-vous lannexe de ce livre qui traite de cette technologie.
Script
1 2 3 4 5 fluxAudioLocal = Microphone.get(); ecoute = new Sound(); ecoute.attachAudio(Microphone.get()); // liaison = new NetConnection();
279
Les mdias Partie II
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
liaison.connect("rtmp:/livre/studio1"); fluxDiffusion = new NetStream(liaison); fluxDiffusion.attachAudio(fluxAudioLocal); // _root.onEnterFrame = function() { temoinSon._yscale = fluxAudioLocal.activityLevel; }; // btEnvoyerDiffusion.onPress = function() { fluxDiffusion.publish(nomFluxDiffusion, "record"); }; btArretDiffusion.onPress = function() { fluxDiffusion.close(); }; // fluxReception = new NetStream(liaison); // btRecevoirDiffusion.onPress = function() { fluxReception.play(nomFluxReception); ecoute = new Sound(); ecoute.attachAudio(fluxReception); }; btArretReception.onPress = function() { fluxReception.close(); }; // liaison.onStatus = function(etat) { if (etat.code == "NetConnection.Connect.Success") { etatReception2 = "Connexion tablie"; } if (etat.code == "NetConnection.Connect.Failed") { etatReception2 = "Pas de connexion"; } };
Analyse
Ligne 2 : nous dnissons un identiant lentre micro de votre ordinateur, an de pouvoir y faire rfrence plus tard dans ce script. Lignes 3 et 4 : nous instancions la classe Sound() an de pouvoir contrler le retour son. Lignes 6 et 7 : nous tablissons une connexion entre le chier .swf de lutilisateur et le serveur Flash Media Server. Lignes 8 et 9 : nous faisons passer un ux audio qui correspond linformation qui passe au travers du micro branch votre ordinateur. Lignes 11 13 : en continu, nous rglons lchelle de loccurrence qui se trouve droite sur la scne. Sa taille est relative lintensit de son qui arrive dans le micro. Lignes 15 20 : ces deux gestionnaires sont associs aux boutons Envoyer et Arrter qui grent lmission du son. Il est possible de remplacer le paramtre record par live. Dans ce
280
cas, la publication du son ne gnre quun ux qui nest pas stock sur le serveur. Dans notre exemple, le paramtre record permet de stoker le son diffus dans un chier au format .v. Il devient alors possible dcouter nouveau la confrence la n de lenregistrement. Lignes 22 31 : nous renouvelons la manipulation des lignes 6 20, lexception du gestionnaire onEnterFrame, pour pouvoir recevoir un ux diffus par une autre personne comme nous venons de le faire. Lignes 33 39 : ce gestionnaire permet de nous informer sur ltat de la connexion au serveur. Nous pouvons ainsi savoir si la connexion est tablie ou interrompue.
Contrler une squence QuickTime partir dune piste Flash

Masquer le contrleur vido standard dans une squence QuickTime et crer le sien, cest ce que nous vous proposons au travers de cette animation qui doit contenir autant dimages que la vido qui va tre contrle. Pour obtenir un contrleur dans une squence QuickTime, nous allons tout simplement importer un chier .swf dans un chier .mov, et nous rendrons transparente la couche qui le contient.
Figure 14-7
Un contrleur Flash est compos doccurrences dans un chier .swf qui est import dans une squence QuickTime.
281
Les mdias Partie II
Chemin daccs : Medias/ControleMedias/MediasControlerQuickTime.a Nous devons utiliser lActionScript qui tait utilis dans Flash 4 pour pouvoir obtenir une compatibilit entre le chier .swf et la squence QuickTime. Cela signie donc que les scripts que nous allons dcouvrir ci-aprs sont placs sur les occurrences des boutons que vous voyez sur la scne. Pour tre plus prcis, ces boutons ne sont pas directement placs sur la scne, mais dans un clip reprsent par ce rectangle blanc transparent surplomb dun onglet.
Script
Bouton qui afche et masque le panneau de contrle :
on (press) { if (this._y == 392.5) { this._y = 328; } else { this._y = 392.5; } }
Bouton Lecture :
on (press) { _root.play(); }
Bouton Pause :
on (press) { _root.stop(); }
Bouton Retour au dbut :

on (press) { _root.gotoAndPlay(1); }
Bouton Repre N1 :
on (press) { _root.gotoAndPlay(250); }
Clip qui afche les images sur la scne :

_root.menuDefil.imageActuelle = _root._currentframe;
282
Analyse
Lanalyse de ces scripts sera rapide ! Pour contrler la tte de lecture de la vido, il suft dutiliser les fonctions de navigations play(), stop() et gotoAndPlay().
Bogues ventuels
Nous prfrons le rappeler une deuxime fois, pour obtenir une compatibilit entre le chier .swf import et la squence QuickTime qui va contenir le chier .swf, vous devez utiliser des gestionnaires de type on(press). Par ailleurs, noubliez pas que votre animation doit contenir autant dimages que la vido dans laquelle elle va tre importe.
Interaction du niveau dentre du microphone et de la scne

Depuis quelques annes, de nombreuses personnes souhaitent pouvoir agir sur leur machine au travers du micro ! Non, la reconnaissance vocale nest ni pour aujourdhui, ni pour demain, cependant Flash est tout de mme capable de mesurer lintensit dun son entrant dans lordinateur au travers dun micro. Le player Flash 8 nest ce jour pas capable de mesurer lintensit dun son sortant, mais nous gardons espoir, cela fait trois ans que la communaut des asheurs attend ! Le but du jeu que nous avons dvelopp est datteindre les toiles qui dlent de droite gauche de la scne. Lorsquelles sont touches, elles disparaissent et permettent de faire gagner des points. Attention bien grer votre voix, si vous forcez trop sur vos cordes vocales, vous perdez de lnergie dans le jeu.
Remarque
Nous avons plac sur la scne des variateurs pour effectuer deux rglages que nous dtaillerons plus loin dans cette animation. Nous nexpliquerons pas le fonctionnement dun tel lment de contrle, reportez-vous au chapitre 4 qui traite de ce sujet.
Chemin daccs : Medias/ControleMedias/MediasNiveauEntreeMicro.a Pour cette animation, nous avons plac sur la scne plusieurs occurrences et textes dynamiques que nous vous proposons dnumrer :
283
Les mdias Partie II Figure 14-8

Plus le son peru dans le micro est lev, plus le vaisseau sloigne du bas de la scne, se rapprochant ainsi des toiles.
Loccurrence du vaisseau intitule vaisseau_inst. Loccurrence de la jauge intitule jaugeEnergy. Loccurrence du lancement du jeu intitule btDemarrer. Trois occurrences reprsentant les toiles toucher, intitules eclat1, eclat2 et eclat3. trois textes dynamiques intituls vPoints, vGain et vAmpli. Le script de cette animation est assez long, car nous navons pas voulu loptimiser en utilisant des lignes dinstructions trop abstraites la lecture.
Script
1 2 3 4 5 6 7 8 9 10 11 12 fluxAudio = Microphone.get(); _root.attachAudio(fluxAudio); jaugeEnergy._visible = 0; // var coefAmplification = 10; var vGain = 20; fluxAudio.setGain(vGain); var vAmpli = 10; // MovieClip.prototype.lancer = function() { this._x = 650+random(100); var pas = 2+random(10);
284
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
this.onEnterFrame = function() { this._x -= pas; if (this._x<-10) { this.lancer(); } }; }; // _root.onEnterFrame = function() { entreeSon = fluxAudio.activityLevel; vaisseau_inst._y = 280-(entreeSon*coefAmplification); }; // fluxAudio.setUseEchoSuppression(true); // partieEnCours = function () { entreeSon = fluxAudio.activityLevel; vaisseau_inst._y = 280-(entreeSon*coefAmplification); jaugeEnergy._xscale -= (entreeSon/10); if (vaisseau_inst.hitTest(eclat1)) { jaugeEnergy._xscale += 5; vPoints++; eclat1.lancer(); } if (vaisseau_inst.hitTest(eclat2)) { jaugeEnergy._xscale += 5; eclat2.lancer(); vPoints++; } if (vaisseau_inst.hitTest(eclat3)) { jaugeEnergy._xscale += 5; eclat3.lancer(); vPoints++; } if (jaugeEnergy._xscale<=0) { jaugeEnergy._xscale = 0; delete _root.onEnterFrame; btDemarrer.enabled = true; btDemarrer._alpha = 100; } if (jaugeEnergy._xscale >100) jaugeEnergy._xscale =100 }; // btNiveauEntree.onPress = function() { this.startDrag(0, 30, 200, 30, 300); this.onMouseMove = function() {
285
Les mdias Partie II
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
niveau = 300-this._y; vGain = niveau; fluxAudio.setGain(niveau); }; }; btNiveauEntree.onRelease = btNiveauEntree.onReleaseOutside=function () { stopDrag(); delete this.onMouseMove; }; // btNiveauAmpli.onPress = function() { this.startDrag(0, 80, 200, 80, 300); this.onMouseMove = function() { coefAmplification = (300-this._y)/5; vAmpli = Math.round(coefAmplification); }; }; btNiveauAmpli.onRelease = btNiveauAmpli.onReleaseOutside=function () { stopDrag(); delete this.onMouseMove; }; // btDemarrer.onPress = function() { vPoints = 0; this.enabled = 0; this._alpha = 30; jaugeEnergy._visible = true; jaugeEnergy._xscale = 100; eclat1.lancer(); eclat2.lancer(); eclat3.lancer(); _root.onEnterFrame = partieEnCours; };
Analyse
Ligne 1 : nous commenons par dnir un identiant la mthode get() de la classe Microphone(), an de pouvoir lutiliser la ligne 22. Ligne 2 : nous rattachons le son provenant du micro lanimation. Ligne 5 : cette variable nous servira amplier le saut queffectuera notre vaisseau spatial pour contrebalancer un faible niveau dentre dni par la variable vGain (ligne 6). Ligne 7 : le bruit ambiant de lendroit dans lequel vous vous trouvez est peut-tre un peu fort, nous utilisons donc la mthode setGain() pour corriger lintensit du son entrant dans le micro. Lignes 10 19 : nous aurions pu et d crer une fonction appele par une instruction setInterval(), mais nous avons prfr simplier la difcult du code en crant ce prototype qui va ajouter une mthode la classe MovieClip(). Aujourdhui, il ne faut plus
286
utiliser les prototypes car il existe dautres techniques, mais elles sont plus complexes. Prcisons simplement que la mthode lancer() va nous permettre de faire dler un clat de droite gauche sur la scne. Lignes 21 24 : nous enclenchons la surveillance du son qui provient du micro branch lordinateur de lutilisateur, et nous stockons dans une variable une valeur calcule sur le niveau sonore entrant. Vous noterez que ce gestionnaire permet dj de faire varier la position verticale du vaisseau, sans que lutilisateur nait encore cliqu sur le bouton Dmarrer.
Remarque
Avant de lancer le jeu, protez-en pour rgler les variateurs situs gauche sur la scne.
Ligne 26 : nous supprimons leffet Larsen. Lignes 28 55 : cette fonction va nous permettre de tester si une collision a lieu entre le vaisseau et un clat (lignes 32, 37 et 42). Si cest le cas, nous augmentons la variable vPoints qui comptabilise le nombre dclats limins, et nous replaons lclat touch droite de la scne. Cela donne limpression quil a t dtruit et quun nouveau arrive. Nous en protons pour agrandir la jauge dnergie obtenue au moment de la collision. Les lignes 29 31 permettent de rgler la position verticale du vaisseau en fonction de lintensit du son entrant, en mme temps, la jauge dnergie diminue. Pourquoi une telle fonction alors que le gestionnaire de la ligne 21 est dj en activit ? Lorsque lutilisateur cliquera sur le bouton Dmarrer, vous noterez que la ligne 100 rednit le gestionnaire onEnterFrame en utilisant cette fonction. Lignes 47 52 : ce test vrie si la jauge dnergie est son minimum, ce qui entrane l'arrt de la partie. Comme nous vous le prcisions en remarque au dbut de cette animation, nous ne commenterons pas les lignes 57 80, car nous vous invitons consulter le chapitre 4 de ce livre. Prcisons simplement que la variation de la position verticale de ces occurrences change la valeur des variables vGain et coefAmplification pour corriger lamplitude des sursauts du vaisseau. Il se peut quils soient trop grands ou trop petits. Ces variateurs corrigent donc lamplitude des sauts. Lignes 82 92 : ce gestionnaire associ loccurrence du bouton Dmarrer permet de lancer les toiles, de rednir la fonction associe au gestionnaire onEnterFrame et de mettre la jauge dnergie en activit. Pour que ce jeu se joue correctement, effectuez le rglage de gain du bruit et de lamplication des sauts du vaisseau. Si vous neffectuez pas ces corrections, le jeu risque de vite devenir injouable.
287
Les mdias Partie II
Sous-titrer une vido

Cette animation est particulirement intressante, car elle utilise le gestionnaire onCuePoint de la classe NetStream(). Ce dernier permet de grer avec une trs grande souplesse la synchronisation dune vido (ou dun son) avec dautres mdias ou le dclenchement dactions dans lanimation.
Figure 14-9
Les textes safchent un instant prcis grce au gestionnaire onCuePoint.
Remarque
Pour une synchronisation parfaite la milliseconde prs, utilisez un logiciel de montage vido et placez vous-mme vos propres repres plutt que dutiliser lapplication Flash Video Encoder. La version qui a t livre avec Flash 8 propose de placer des repres la milliseconde prs, mais seules les images-cls sont utilises pour la recherche de synchronisation. Esprons quune mise jour de ce logiciel arrive rapidement pour corriger cette erreur.
Chemin daccs : Medias/ControleMedias/MediasVideoSousTitres.a Sur la scne, nous avons plac un symbole de type vido et nomm loccurrence obtenue ecran. Le nom, la couleur et le prix des produits qui vont apparatre dans la vido vont
288
safcher sur la scne dans des textes dynamiques dont les noms de variables sont vNomArticle, vPrixArticle et vCouleurArticle. Nous avons ajout trois occurrences (intitules repere1, repere2 et repere3) qui serviront dplacer la tte de lecture de la vido des temps prcis. Le script de lanimation fait appel aux classes NetStream() et netConnection() pour pouvoir diffuser de la vido. Nous lavons dj dit, mais rappelons que la synchronisation va tre obtenue grce au gestionnaire onCuePoint de la classe NetStream().
Script
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 vPrixArticle = ""; vCouleurArticle = ""; // leCable = new NetConnection(); leCable.connect(null); abonnement = new NetStream(leCable); ecran.attachVideo(abonnement); abonnement.play("traveling.flv"); // effacerNomArticle = function () { vNomArticle = ""; vPrixArticle = ""; vCouleurArticle = ""; clearInterval(lancerChronoEffaceur); }; abonnement.onCuePoint = function(repere) { vNomArticle = repere.name; //trace(repere.time); vPrixArticle = repere.parameters["prix"]; vCouleurArticle = repere.parameters["couleur"]; lancerChronoEffaceur = setInterval(effacerNomArticle, 2000); }; // repere1.onPress = function() { abonnement.seek(3.515); }; repere2.onPress = function() { abonnement.seek(7.264); }; repere3.onPress = function() { abonnement.seek(17.340); };
Analyse
Lignes 1 et 2 : nous initialisons vide la valeur de ces deux variables qui sont prsentes en bas droite sur la scne.
289
Les mdias Partie II
Lignes 4 8 : nous instancions les classes NetConnection() et NetStream() pour pouvoir diffuser la vido traveling.flv. au travers de loccurrence ecran. Lignes 10 15 : nous utiliserons cette fonction pour effacer les textes aprs 2 secondes dafchage (ligne 21). Lignes 16 21 : ce gestionnaire est au cur de la synchronisation ! Le nom gurant en tte de ligne correspond linstance de la classe NetStream(), cest travers elle que nous cherchons savoir si des cuePoints (repres) sont atteints, car cest travers elle que passe la vido. Le choix du terme repere est purement arbitraire, vous pouvez donc choisir celui que vous voulez, tant que vous nutilisez pas de caractres accentus ni spciaux. La proprit name nous permet de savoir quel est le nom du repre, alors que le tableau parameters contient les attributs associs chaque cuePoint.
Conseil
Nutilisez pas les paramtres associs un repre, prfrez de simples repres que vous indexez ensuite dans un chier XML qui sera plus facile manipuler et mettre jour.
Lignes 24 32 : les trois occurrences permettent de dplacer la tte de lecture 3,515 secondes, 7,264 secondes et 17,340 secondes du dbut de la vido. Nous navons pas souhait ajouter de boutons de contrle de la vido an que le script soit extrmement simple. Les boutons qui permettent de dplacer la tte de lecture de la vido sont prsents sur la scne pour vrier la synchronisation en avanant plus rapidement.
Bogue ventuel
Vous devez tre trs vigilant sur la casse des noms de classes. NetStream() et NetConnection() contiennent deux majuscules. Ce genre domission entrane inluctablement un dysfonctionnement.
Synchroniser un son avec des textes et des images

Durant la lecture dun son, des temps prcis, des images accompagnes dun texte vont safcher sur la scne ! Vous allez dcouvrir que la synchronisation dun son avec un texte et une image se fait trs facilement grce la fonction setInterval() et au chier .xml. Nous aurions pu utiliser un tableau pour contenir les temps de synchronisation, mais la solution retenue (chier .xml) prsente lavantage dtre facile mettre jour.
290
Figure 14-10
des instants prcis, textes et images safchent sur la scne an de correspondre ce qui est entendu au travers du son.
Chemin daccs : Medias/ControleMedias/SynchroSonTextesImages.a Vous allez cliquer sur loccurrence du bouton Lecture intitul btLecture. ce moment l, la vido va dmarrer et le gestionnaire onCuePoint va se charger de remplir le contenu des textes dynamiques dont les noms de variables sont commentaire et tempsEcoule. Les images vont se charger dans loccurrence intitule cadre.
Script
Voici le contenu du chier .xml que nous avons utilis pour contenir les temps de synchronisation :
<Synchro> <Image Temps="0" Img="">...</Image> <Image Temps="0.5" Img="img1.jpg">Sre ?</Image> <Image Temps="4" Img="img2.jpg">Dooot dooot !</Image> <Image Temps="6" Img="img3.jpg">Grosse question !</Image> <Image Temps="9" Img="img4.jpg">Enfin...</Image> <Image Temps="11" Img="img5.jpg">...</Image> <Image Temps="16.5" Img="img6.jpg">Vieux potes</Image> <Image Temps="18" Img="img7.jpg">Amis de 22 ans</Image> <Image Temps="22" Img="img8.jpg">Ah merde !</Image> <Image Temps="25" Img="img9.jpg">Ae ! L, C la gaffe !!!</Image> <Image Temps="28.5" Img="img10.jpg">Elle est susceptible aussi !</Image> <Image Temps="37" Img="img11.jpg">En colre ?</Image> <Image Temps="39.5" Img="img12.jpg">Arff arff arff !</Image> <Image Temps="41" Img="img13.jpg">l gentil tu sais</Image> </Synchro>
291
Les mdias Partie II
Le script de lanimation est relativement court, il a t plac sur la premire image-cl de la timeline principale.
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 btLecture.enabled = false; var numeroCuePointAVerifier = 0; // verifierTemps = function () { if (voixOff.position/1000>charge.childNodes[0].childNodes[numeroCuePointAVerifier] .attributes.Temps) { cadre.loadMovie("SynchroAudio/img"+numeroCuePointAVerifier+".jpg"); commentaire = charge.childNodes[0].childNodes[numeroCuePointAVerifier] .firstChild; numeroCuePointAVerifier++; } tempsEcoule = voixOff.position/1000; }; // // var charge = new XML(); charge.load("SynchroAudio/Synchro.xml"); charge.ignoreWhite = true; charge.onLoad = function() { btLecture.enabled = true; }; // voixOff = new Sound(); voixOff.loadSound("SynchroAudio/VoixSynchro.mp3", 0); voixOff.onLoad = function() { btLecture.enabled = true; }; voixOff.onSoundComplete = function() { clearInterval(lancerVerifSynchro); btLecture.enabled = true; }; // btLecture.onPress = function() { numeroCuePointAVerifier = 0; lancerVerifSynchro = setInterval(verifierTemps, 100); voixOff.start(); btLecture.enabled = false; }; btArret.onPress = function() { clearInterval(lancerVerifSynchro); voixOff.stop(); btLecture.enabled = true; };
292
Analyse
Le chier .xml que nous avons cr ne prsente aucune difcult car il ne contient que des nuds de niveau 1 sans nuds enfants. Les commentaires qui vont safcher sur la scne sont les valeurs contenues dans les balises <Image> qui contiennent en attributs les temps de synchronisation et les noms dimages. Ligne 1 : nous rendons non cliquable loccurrence du bouton Lecture. Tant que le chier son nest pas charg, nous devons en effet empcher sa lecture. Ligne 2 : les temps de synchronisation se trouvent dans le chier .xml Synchro.xml. An de parcourir les diffrents nuds de linstance XML, nous avons besoin dune variable qui va sincrmenter chaque temps atteint par la tte de lecture. Lignes 4 11 : cette fonction est celle qui va tre appele tous les centimes de seconde grce la fonction setInterval() de la ligne 33. Cest elle qui va donc synchroniser le son avec les images et le texte. Ligne 5 : nous cherchons vrier si la tte de lecture du son en cours de lecture dpasse le temps indiqu au numro de nud qui correspond la valeur de la variable numeroCuePointAVerifier. Ligne 6 : si cest le cas, nous chargeons limage la place de loccurrence qui sintitule
cadre.
Ligne 8 : nous incrmentons la variable numeroCuePointAVerifier an de vrier nouveau si la tte de lecture atteint le prochain temps de synchronisation. Lignes 14 19 : nous chargeons le chier .xml spci la ligne 15. Nous avions initialement prvu de ne rendre loccurrence du bouton Lecture cliquable qu partir du moment o le chier .xml tait charg, mais nous avons prfr effectuer une vrication sur la n du chargement du son qui est srement plus long. Nous avons laiss cette ligne 18 qui peut toujours tre remplace par une autre. Ligne 21 25 : nous crons une instance de la classe Sound() an de contrler la lecture du son. Lignes 26 29 : si la n du son est atteinte, nous arrtons la synchronisation et nous rendons loccurrence du bouton Lecture nouveau cliquable. Lignes 31 36 : lorsque lutilisateur clique sur le bouton Lecture, nous le rendons inactif an quil ne soit plus cliquable. Nous lanons la synchronisation (ligne 33) et le son (ligne 34). Ligne 37 41 : ce gestionnaire dni pour loccurrence du bouton Arrt, rend cliquable celle du bouton Lecture (ligne 40), puis interrompt la synchronisation et le son.
Bogue ventuel
la ligne 10, vous devez penser diviser par 1 000 la valeur renvoye par la proprit position de la classe Sound().
293
Les mdias Partie II
Synchroniser un son au format FLV

Le format de chier FLV est gnralement utilis pour proposer lafchage de vidos dans une animation Flash. Il est assez rare de rencontrer sur Internet des squences sans son ou sans vido avec uniquement une piste audio. Et pourtant, les chiers au format FLV peuvent remplacer ceux qui sont au format MP3. Cette technique est mconnue des dveloppeurs Flash alors quelle prsente des avantages. En effet, pour synchroniser un son avec un vnement, une image ou bien mme du texte, il est prfrable dutiliser un chier sous ce format accompagn du gestionnaire onCuePoint.
Chemin daccs : Medias/ControleMedias/SynchroAudioFLV.a Dans cette animation, nous navons pas synchronis un son avec un texte et/ou une image, mais nous avons prfr placer un symbole sur la scne certains moments du son. Nous avons donc cr trois symboles dont les noms de liaisons sont Carre, Cercle et Triangle. Aucune occurrence na t place sur la scne pour la construction de linterface car les lignes 14 17 vont sen charger au moment de la synchronisation.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 maConnect = new NetConnection(); maConnect.connect(null); monFlux = new NetStream(maConnect); // monFlux.play("piano.flv"); // niveau = 0; // monFlux.onCuePoint = function(etat) { nomLiaison = etat.name; vTaille = etat.parameters["taille"]; vPLaceHorizontale = etat.parameters["placeX"]; vPLaceVerticale = etat.parameters["placeY"]; tempo = _root.attachMovie(nomLiaison, nomLiaison+"_inst", niveau++); //trace(nomLiaison); tempo._x = vPLaceHorizontale; tempo._y = vPLaceVerticale; tempo._xscale = vTaille; tempo._yscale = vTaille; };
294
Pour contrler le niveau sonore de la diffusion du son, il faudrait ajouter les deux lignes suivantes :
hautParleur = new Sound(); hautParleur.attachAudio(monFlux);
Analyse
Pour des explications sur le fonctionnement du gestionnaire onCuePoint, consultez lanalyse de lanimation prcdente Sous-titrer une vido . Avant cela, retenez que la classe NetStream() ne se limite pas la diffusion vido dun chier .v comme nous vous le prcisions en introduction cette animation. Il existe diffrents logiciels de traitement du son capables dajouter des cuePoints, cest--dire des repres, sur une piste son, mais le logiciel fourni avec Flash 8 qui sappelle Flash Video Encoder est capable de le faire galement. La gure 14-11 prsente la copie dcran de la fentre de placement des repres dans un chier .v.
Figure 14-11
Lajout de repres se fait par un simple clic sur le bouton + situ en haut gauche de la fentre.
Dans notre exemple, nous avons utilis des paramtres, il serait prfrable de navoir que de simples repres servant prciser quun temps est atteint grce au gestionnaire onCuePoint. Il serait alors plus intressant dutiliser les donnes dun chier .xml pour obtenir des informations telles que celles que nous avons places en tant que paramtres dans notre exemple.
295
15
Chat et RSS
Yahoo Messenger, ICQ, MSN, Google Talk puisquil existe de nombreuses applications permettant lchange de texte en direct, quel est lintrt de dvelopper un module de chat en Flash ? RSS, phnomne de mode ou nouveau standard ? La question ne se pose plus, cette technique de diffusion a fait ses preuves depuis plusieurs mois ! Dans ce cas, comment intgrer un ux dans une animation Flash ?
Cration dun chat avec Flash Media Server

Comme nous lnoncions en introduction ce chapitre, pourquoi dvelopper une telle application alors quil en existe dj qui grent trs bien ce type dchange de texte ? Nous nallons pas essayer de rinventer la roue, mais simplement vous dmontrer que dans le cas du dveloppement dune application Full Flash, il est trs simple et surtout trs rapide de rserver une partie de linterface un module dafchage/ change de texte en direct. Par ailleurs, nous aurions pu utiliser des sockets XML pour ce type dapplication, mais cela aurait ncessit lutilisation dune application Java ct serveur. Il aurait galement t possible de faire appel au PHP avec une base de donnes MySQL, mais nous avons rellement souhait nutiliser que de lActionScript !
Les mdias Partie II
Figure 15-1
Ce module dchange de texte prsente lavantage de pouvoir tre intgr une page HTML sans tre oblig douvrir une pop-up.
Remarque
Pour la gestion dun wiki, lutilisation de Flash Media Server peut reprsenter une solution alternative si vous la combinez avec le gestionnaire onChanged.
Chemin daccs : Medias/ChatRSS/ChatFlashCom.a Pour la ralisation de cette animation, nous avons eu besoin de placer sur la scne, trois textes de saisie dont voici respectivement les noms doccurrences et de variables : nomChatteur_inst et nomChatteur. nomRoom_inst et nomRoom. messageChatteur_inst et messageChatteur. Un dernier texte dynamique intitul affichageMessages_inst a pour nom de variable affichageMessages. An de contrler le dlement du texte contenu dans linstance affichageMessages_ inst, nous avons plac sur la scne quatre autres occurrences intitules btMonterTexteC,
298
Chat et RSS Chapitre 15
btMonterTexte, btBaisserTexteC et btBaisserTexte. Il sagit des quatre triangles situs droite sur la scne.
Lavantage de cette application est de pouvoir contrler le canal dchange avec son interlocuteur. Dans un logiciel de chat, on appelle cela une room ou salle . Un dernier bouton dont le nom doccurrence est btAllerA nous permettra dtablir la connexion au serveur sous un nom de session prcis. Nous reviendrons sur cette notion dans les explications de cette animation.
Script
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 connectionAuneRoom = function () { if (nomRoom != "" && nomChatteur != "") { connexionChat = new NetConnection(); connexionChat.connect("rtmp:/livre/"+nomRoom); // texteCommun = SharedObject.getRemote() ("leMessage", connexionChat.uri); texteCommun.connect(connexionChat); if (texteCommun.data.contenuDuTexte == undefined) { texteCommun.data.contenuDuTexte = "Welcomme on yazo's chat\n"; } affichageMessages = texteCommun.data.contenuDuTexte; // texteCommun.onSync = function() { affichageMessages = texteCommun.data.contenuDuTexte; if (affichageMessages == undefined) { affichageMessages = ""; } affichageMessages_inst.scroll = affichageMessages_inst.maxscroll; }; } }; // nomRoom = ""; nomChatteur = ""; // btAllerA.onPress = function() { connectionAuneRoom(); }; // btBaisserTexte.onPress = function() { affichageMessages_inst.scroll--; }; btMonterTexte.onPress = function() { affichageMessages_inst.scroll++; }; // nomChatteur_inst.restrict = nomRoom_inst. restrict="a-z A-Z 0-9"; nomChatteur_inst.maxChars = nomRoom_inst.maxChars=12;
299
Les mdias Partie II
39 // 40 messageChatteur_inst.onChanged = function() { 41 if (Key.getCode() == 13) { 42 recupTextCommun = texteCommun.data.contenuDuTexte; 43 if (recupTextCommun == undefined) { 44 recupTextCommun = ""; 45 } 46 texteCommun.data.contenuDuTexte = recupTextCommun+nomChatteur+" : "+messageChatteur; 47 messageChatteur = ""; 48 } 49 }; 50 // 51 btBaisserTexteC.onPress = function() { 52 this.onEnterFrame = function() { 53 affichageMessages_inst.scroll--; 54 }; 55 }; 56 btBaisserTexteC.onRelease = btBaisserTexteC.onReleaseOutside=function () { 57 delete this.onEnterFrame; 58 }; 59 btMonterTexteC.onPress = function() { 60 this.onEnterFrame = function() { 61 affichageMessages_inst.scroll++; 62 }; 63 }; 64 btMonterTexteC.onRelease = btMonterTexteC.onReleaseOutside=function () { 65 delete this.onEnterFrame; 66 };
Analyse
Si vous navez pas lu les explications relatives au fonctionnement dune application faisant appel Flash Media Server, veuillez vous reporter la dernire partie de ce livre qui traite de cette technologie. Nous nallons effectivement analyser que les grandes parties de ce script, sans expliquer les mcanismes de connexion et dchange avec le serveur. Ligne 1 : la fonction assure la connexion au Flash Media Server et se charge de dnir les lignes dinstructions excuter lors de la synchronisation de lanimation avec le .fso. Ligne 2 : nous testons le contenu des textes de saisie dans lesquels lutilisateur doit taper son nom et celui de la pice dans laquelle il souhaite se rendre. La connexion ne peut en effet se faire qu partir du moment o ces champs sont renseigns. Lignes 3 11 : nous procdons la connexion avec le serveur et afchons sur la scne (ligne 11) le contenu du cookie. Le module de chat que nous avons conu permet lutilisateur dobtenir tout ce qui a t dit dans la pice (Room) depuis le dbut de sa cration, cest--dire la premire connexion.
300
Lignes 13 19 : nous dnissons les lignes dinstructions qui doivent sexcuter au moment de la synchronisation de lanimation avec le serveur. Vous noterez que ce gestionnaire onSync prvoit ce quil faut faire lors de la premire connexion (lignes 15 17). Ligne 18 : cette instruction permet de remonter le texte automatiquement an que la dernire ligne soit toujours visible. Lignes 23 et 24 : au lancement de lanimation, nous vidons le contenu des variables nomRoom et nomChatteur an que le test de la ligne 2 fonctionne si lutilisateur ne renseigne pas ces champs. Lignes 26 28 : en haut droite sur la scne, le bouton Aller permet dtablir la connexion avec le serveur en appelant la fonction cre la ligne 1. Lignes 30 35 : ces deux gestionnaires grent le dlement du texte. Ligne 37 : an que lutilisateur ne puisse pas utiliser de caractres spciaux et accentus dans les champs Nom et Room, nous le contraignons grce la proprit restrict. Lignes 40 49 : ds que lutilisateur ajoute ou supprime un caractre dans la zone de saisie du message (en bas gauche sur la scne), le gestionnaire onChanged vrie si la touche enfonce est bien la touche Entre. Si cest le cas, les instructions suivantes sont excutes : La variable recupTexteCommun se charge daller rcuprer le contenu du cookie sur le serveur (ligne 42). Une concatnation de la variable ci-dessus et du message saisi par lutilisateur est renvoye au serveur (ligne 46). Le champ de saisie du message en bas gauche sur la scne est vid (ligne 47). Un test sassure quil ne sagit pas de la premire synchronisation. Si tel est le cas, la variable recupTexteCommun est initialise vide an que la ligne 46 ne renvoie pas derreur. Lignes 51 66 : vous avez peut-tre remarqu que notre interface prsente quatre boutons de contrle du texte. Nous avons simpli la mise en page de ces occurrences en les laissant ainsi, an de mettre en vidence le fait quil est possible de faire dler le texte par de simples clics, ou au contraire en maintenant le bouton de la souris enfonc.
Bogues ventuels
Vous ne devez pas sortir le gestionnaire onSync de la fonction connectionAuneRoom, dans le cas contraire vous auriez des problmes de synchronisation. La ligne 37 joue un rle important pour le bon fonctionnement de lapplication, car elle limite la nature des caractres susceptibles dtre saisis. Elle nest donc pas obligatoire, mais indispensable pour la stabilit du programme.
301
Les mdias Partie II
Cration dun lecteur de ux RSS

Depuis quelques mois, vous avez peut-tre constat que des icnes orange et blanches eurissent sur les pages daccueil des sites que vous consultez.
Figure 15-2
Ces icnes sont gnralement orange et blanches, mais quelques rares webmasters ne respectent pas cette charte conventionnelle.
Il sagit de ux ou ls RSS ! Ce sont gnralement les sites qui proposent des informations dont la mise jour est assez frquente, qui utilisent cette technique de diffusion en ligne. Il est intressant dessayer de comprendre le sens de ce sigle car il dmontre lintrt et la complexit du mcanisme qui se cache derrire ce nouveau standard du Web : RSS : Really Simple Syndication (Syndication vraiment simple) ; RSS : Rich Site Summary (Rsum complet dun site). Il sagit avant tout dun format de syndication dinformations habituellement consultables sur Internet. Plus prcisment, il sagit dun chier .xml qui possde une structure bien dnie, et qui est mis disposition des internautes. Le terme syndication nous vient de langlais et Wikipdia nous en donne une trs bonne dnition. La syndication consiste vendre le droit de reproduire un contenu ou de diffuser un programme plusieurs diffuseurs. Le systme de la syndication a t cr par la presse crite amricaine, les syndicates vendant leur production (cartoons, comic-strips, chroniques, etc.) plusieurs journaux locaux. Comme nous lvoquions ci-dessus, ce sont principalement les sites dactualits qui proposent des ux RSS appels aussi ls RSS. La tableau 15-1 propose quelques exemples.
Tableau 15-1 Adresses de ux RSS
Nom du site diffuseur
Google France Le Monde NouvelObs.com
Adresse
http://news.google.fr/?output=rss http://www.lemonde.fr/rss/sequence/0,2-3208,1-0,0.xml http://permanent.nouvelobs.com/rss_permanent.xml
Paradoxalement, lorsque nous prcisons que la structure du document .xml est bien dnie , elle lest, mais malheureusement en plusieurs versions . Si vous regardez nouveau les icnes ci-dessus, vous constaterez que lune dentre elles possde un numro.
302
Il correspond au numro de version de lune des trois normes disponibles pour gnrer un chier .xml selon des spcicits prcises. Un ux RSS est donc un chier .xml respectant des spcicits, mais lesquelles ?
Remarque
Ces chiers .xml sont souvent gnrs dynamiquement sur un serveur. Vous observerez que certaines URL ne proposent pas un document .xml mais une page PHP qui va gnrer lafchage de balises XML.
Accords non passs, mulation et volutions individuelles des normes dans le temps sont lorigine de la situation dans laquelle nous sommes aujourdhui. Au dpart, en 1997, Microsoft, Netscape et Dave Winner de la socit UserLand proposent chacun de leur ct au W3C un format de chier .xml. Deux ans plus tard, Netscape publie la premire recommandation RSS 0.90 par lintermdiaire de son portail, proposant aux internautes de crer leur propre chane de diffusion. Sans rentrer dans les dtails, depuis 1999, tous les protagonistes qui ont contribu lvolution des RSS nont pas russi se mettre daccord pour dnir ensemble un standard commun. Cest pourquoi aujourdhui, pour crire un chier .xml dans le but de gnrer un ux RSS, il existe trois spcicits possibles. quoi ressemblent ces spcicits ? Pour rpondre cette question, comparons ces deux exemples simplis. Rappelons tout dabord que lune des particularits du format .xml est de pouvoir nommer ses propres balises et de les ordonner dans le sens que lon veut.
<Journal> <Titre>Le journal du mercredi</Titre> <Date>Dcembre 2005</Date> </Journal>
<Journal> <Date>Dcembre 2005</Date> <Intitule>Le journal du mercredi</ Intitule > </Journal>
Votre cerveau est capable danalyser ces deux informations et il peut en restituer sans difcult le contenu. Malheureusement, en informatique, le changement de nom des balises et la diffrence dagencement des lignes posent problme. Pour ceux qui savent grer le format .xml en Flash, vous comprenez que le titre du journal ne se trouve pas au mme niveau dun exemple lautre, et vous ne pouvez pas non plus le retrouver par le nom de balise car elles sont toutes les deux diffrentes. Il est donc important davoir les mmes repres pour dnir un standard. Aujourdhui, les RSS reprsentent un standard sur Internet, mais elles sappuient sur deux spcicits. Celles de RSS 2.0 et celles dAtom. Il serait absurde de vous proposer la lecture les deux spcicits, dans la mesure o elles sont susceptibles de changer dun jour
303
Les mdias Partie II
lautre : nous publierions donc des informations trs vites obsoltes. Voici les deux adresses que nous vous proposons de consulter pour dcouvrir les dernires versions des spcicits : RSS 2.0 : http://blogs.law.harvard.edu/tech/rss Atom : http://ietfreport.isoc.org/idref/draft-ietf-atompub-format/ Pour ceux qui seraient intresss par lhistoire de cette norme , voici une adresse qui rcapitule les grandes dates de lvolution des RSS :
http://www.opikanoba.org/xml/040315/
Lanimation que nous allons maintenant analyser est trs simple si vous savez manipuler le format . xml dans Flash. Lutilisateur doit saisir une adresse de ux dans un texte de saisie sur la scne, an de le consulter.
Figure 15-3
Saisissez ladresse dun ux .xml, validez, vous dcouvrirez son contenu sur la scne.
Chemin daccs : Medias/ChatRSS/LecteurFluxRSS.a Notre scne se compose de quatre textes dynamiques, dun texte de saisie et dune occurrence de composant de type List. Nous avons ajout loccurrence dun clip sur laquelle devra cliquer lutilisateur pour charger le ux RSS dont il aura prcis ladresse dans le bas de la scne.
304
Script
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 _global.etiquette = ""; // chargerFluxRSS = function (adresse) { charge = new XML(); charge.load(adresse); charge.ignoreWhite = true; // charge.onLoad = function() { afficherFluxRSS(charge); }; }; // remplacerDoubleQuot = function (txt) { chaineAtraiter = new String(txt); etiquette = tableauTempo=chaineAtraiter.split (""").join("\""); }; remplacerSimpleQuot = function (txt) { chaineAtraiter = new String(txt); etiquette = tableauTempo=chaineAtraiter.split("'").join ("\'"); }; // afficherFluxRSS = function (nomInstXML) { titreDuFluxRSS = nomInstXML.childNodes[0].childNodes[0].childNodes[0]; descriptionDuFluxRSS = nomInstXML.childNodes[0].childNodes[0].childNodes[2]; dateduFlux = nomInstXML.childNodes[0].childNodes[0].childNodes[5]; var nbrItems = nomInstXML.childNodes[0].childNodes.length; for (i=2; i<nbrItems; i++) { etiquette = nomInstXML.childNodes[0].childNodes[i].childNodes[0].firstChild; adresse = nomInstXML.childNodes[0].childNodes[i].childNodes[2].firstChild; remplacerDoubleQuot(etiquette); remplacerSimpleQuot(etiquette); listeDesFluxRSS.addItem({label:etiquette, data:adresse}); } }; // chargerFluxRSS("http://www.afp.fr/francais/rss/stories.xml"); // btVoir.onPress = function() { chargerFluxRSS(adresseFluxRSS); }; // listeDesFluxRSS.vScrollPolicy = "off"; // _global.style.setStyle ("textSelectedColor", "0x000000"); _global.style.setStyle("color", "0x5E685B"); // surveil = new Object(); surveil.change = function(etat) { resumeArticle = etat.target.selectedItem.data; }; listeDesFluxRSS.addEventListener("change", surveil);
305
Les mdias Partie II
Analyse
Avant de commencer lanalyse de ce script, il est important de signaler que vous ne pouvez pas charger de donnes XML qui proviennent dun chier hberg sur un serveur diffrent de celui sur lequel se trouve le chier SWF qui excute la mthode load(). Les chiers XML des ls RSS sont par dnition sur des serveurs diffrents du vtre, dans ce cas, comment est-il possible dy accder ? Nuanons notre propos. Si vous excutez une animation partir dun disque dur, cette mise en garde nest pas valable car votre chier ne se trouve pas dans un domaine. En revanche, si vous hbergez un chier SWF dans un domaine prcis (par exemple : www.mondomaine.com), vous devez avoir une page PHP qui va lire le document .xml pour lanimation. Il doit se trouver ladresse www.mondomaine.com/nomduchier.php ou dans un ventuel sous-dossier. Vous pouvez utiliser le script PHP suivant dans une page que vous placez ct de votre chier SWF. Appelons ce chier newsafp.php.
<?php $URLaCharger = "http://www.afp.fr/francais/rss/stories.xml"; readfile($URLaCharger); ?>
Votre script ct Flash doit alors contenir les lignes suivantes :

charge = new XML(); charge.load("newsafp.php"); Rappel
Un domaine correspond un dossier sur un serveur, auquel est associ une URL de type www.yazo.net ou www.lexplicateur.com. Pour de plus amples informations sur la structure dun domaine, consultez ladresse suivante : http://www.commentcamarche.net/internet/ dns.php3.
Ligne 1 : nous initialisons une variable que nous utiliserons ultrieurement pour stocker des informations temporaires. Ligne 3 : nous crons une fonction qui sera appele lorsque lutilisateur cliquera sur le bouton Voir situ en bas droite sur la scne. Lignes 4 6 : nous chargeons des donnes XML qui se trouvent ladresse spcie la ligne 39. Nous reviendrons sur la variable adresseFluxRSS un peu plus tard. Lignes 8 10 : nous vrions la n du chargement des donnes XML avant dappeler la fonction charge dafcher le ux RSS sur la scne. Lignes 13 20 : si nous tentions dafcher le contenu de linstance XML dans celle du composant List qui se trouve sur la scne, nous dcouvririons que les apostrophes et guillemets safchent respectivement sous les formes " et '. Pour viter ce bogue dafchage, nous devons changer ces entits HTML par leurs correspondances.
306
Nous allons appeler ces deux fonctions (lignes 13 20) aux lignes 30 et 31 au moment de remplir loccurrence de la liste. la ligne 14, nous instancions la classe String() an de pouvoir utiliser la mthode split() qui va transformer votre texte en entres de tableaux. Si votre texte contient deux entits, vous obtiendrez trois entres dans votre tableau. Utilisez alors la mthode join() de la classe Array() pour obtenir une nouvelle chane de caractres compose de vos entres spares par le signe prcis en paramtre entre les parenthses. Ligne 22 : cette fonction est appele (ligne 9) par la premire que nous avons cre (ligne 3). Elle est charge dafcher le contenu de linstance XML. Lignes 23 25 : nous afchons sur la scne certains nuds du ux RSS tels que le titre, la description et la date. Les lignes suivantes correspondent au dbut du ux de lAFP :
<rdf:RDF> <channel rdf:about="http://www.afp.com/francais/"> <title>AFP - L'actualit</title> <link>http://www.afp.com/francais/</link> <description>L'actualit / les dpches</description> <dc:language>fr</dc:language> <dc:rights>Copyright 2005, Agence France-Presse</dc:rights> <dc:date>2005-10-31T14:45:15Z</dc:date> <dc:publisher>Agence France-Presse</dc:publisher>
Ligne 26 : nous stockons dans une variable le nombre de nuds enfants du niveau 1. Lignes 27 33 : nous utilisons une boucle for() pour remplir linstance du composant List. Vous noterez que nous faisons appel aux deux fonctions charges de convertir les entits HTML contenues dans linstance XML. Ligne 36 : nous excutons la fonction chargerFluxRSS() une premire fois au lancement de lanimation, an quil y ait dj le contenu du ux sur la scne, sans que lutilisateur nait cliquer sur le bouton Voir en bas de la scne. Lignes 38 40 : nous programmons loccurrence du bouton Voir. Ligne 42 : nous masquons la barre de dlement de loccurrence de type List. Lignes 44 et 45 : nous rglons la couleur du texte de loccurrence du composant. Lignes 47 51 : pour nir, nous devons dnir un gestionnaire associ loccurrence du composant List pour contrler le changement de slection de ligne.
Bogue ventuel
Le bogue le plus important de cette animation a t abord au dbut de lanalyse du script. Vous devez convertir les entits HTML contenues dans linstance XML, avant de les afcher dans loccurrence du composant List.
307
Les mdias Partie II
Lecteur de ux RSS avec un menu local droulant

Avant de lire cette animation, nous vous encourageons vivement consulter la prcdente, car nous allons simplement analyser dans celle-ci, le rle du menu local droulant, cest--dire les lignes 58 70.
Chemin daccs : Medias/ChatRSS/Lecteur2FluxRSS.a Comme nous venons de le prciser, cette animation est identique la prcdente, seul un menu local droulant y a t ajout. Cet lment de formulaire de type combo box possde le nom doccurrence menuListeFluxRSS.
Script
1 System.useCodepage = true; 2 chargerFluxRSS = function (adresse) { 3 charge = new XML(); 4 charge.ignoreWhite = true; 5 charge.load(adresse); 6 // 7 charge.onLoad = function() { 8 for (i=0; i<=30; i++) { 9 if (this.childNodes[0].childNodes[0].childNodes[i].nodeName.toLowerCase() == "item") { 10 premierNoeud = i; 11 break; 12 } 13 } 14 for (i=0; i<=30; i++) { 15 if (this.childNodes[0].childNodes[0].childNodes[premierNoeud].childNodes[i] .nodeName.toLowerCase() == "description") { 16 niveauNoeudDescription = i; 17 break; 18 } 19 } 20 afficherFluxRSS(charge); 21 }; 22 }; 23 // 24 afficherFluxRSS = function (nomInstXML) { 25 titreDuFluxRSS = nomInstXML.childNodes[0].childNodes[0].childNodes[0];
308
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
descriptionDuFluxRSS = nomInstXML.childNodes[0].childNodes[0].childNodes[2]; dateduFlux = nomInstXML.childNodes[0].childNodes[0].childNodes[5]; var nbrItems = nomInstXML.childNodes[0].childNodes[0].childNodes.length-(premierNoeud); nbrItems = nbrItems>10 ? nbrItems=10 : nbrItems; affichageListeDesFluxRSS = ""; effacerLienBoutonsEnPlace(); for (i=premierNoeud, j=0; i<premierNoeud+nbrItems; i++, j++) { affichageListeDesFluxRSS += nomInstXML.childNodes[0].childNodes[0] .childNodes[i].childNodes[0]+"<br>"; _root.attachMovie("zoneClic", "zoneClic"+i, i); _root["zoneClic"+i]._x = 24; _root["zoneClic"+i]._y = 86.8+((j)*17.5); _root["zoneClic"+i]._alpha = 0; _root["zoneClic"+i].sonNumero = i; _root["zoneClic"+i].onPress = function() { resumeArticle = nomInstXML.childNodes[0].childNodes[0].childNodes [this.sonNumero].childNodes[niveauNoeudDescription]; }; } }; // chargerFluxRSS("http://rss.macgeneration.com"); // effacerLienBoutonsEnPlace = function () { for (i=2; i<=12; i++) { delete _root["zoneClic"+i].onPress; } }; // btVoir.onPress = function() { chargerFluxRSS(adresseFluxRSS); resumeArticle = ""; }; // var nomsElementsMenuRSS = ["LeMonde", "MacGeneration", "ZDNet", "NouvelObs", "PDAFrance"]; var elementsMenuRSS = ["http://www.lemonde.fr/rss/sequence/0,2-3208,1-0,0.xml", "http://rss.macgeneration.com/", "http://www.zdnet.fr/feeds/rss/actualites/?l=5", "http://permanent.nouvelobs.com/rss_permanent.xml", "http://www.pdafrance.com/rss/ get_rss.php"]; for (i=0; i<nomsElementsMenuRSS.length; i++) { menuListeFluxRSS.addItem({label:nomsElementsMenuRSS[i], data:elementsMenuRSS[i]}); } surveilListeDeroulante = new Object(); surveilListeDeroulante.change = function(resultat) { adresseFluxRSS = resultat.target.value; chargerFluxRSS(adresseFluxRSS); resumeArticle = ""; }; menuListeFluxRSS.addEventListener("change", surveilListeDeroulante);
60 61 62 63 64 65 66 67 68 69
309
Les mdias Partie II
Analyse
Lignes 58 et 59 : nous crons deux tableaux qui vont servir de contenu et de liens au menu local droulant. Lignes 60 62 : cette boucle for() est charge dutiliser les deux tableaux pour remplir la combo box grce la mthode addItem(). Lignes 63 69 : nous devons crer un couteur pour surveiller la slection dune commande du menu local droulant. Pour ce faire, il faut crer une instance de la classe principale Object() que nous appelons surveilListeDeroulante. Nous dnissons un gestionnaire change qui excutera les lignes dinstructions quil contient (lignes 65 67).
Bogue ventuel
Noubliez surtout pas la ligne 69, le gestionnaire change ne fonctionnerait pas, car lcouteur ne serait pas enclench.
Lecteur de ux RSS sans composant

Dans les deux premires animations, nous avons fait appel des composants pour proposer une liste de ux et pour afcher le contenu de ces ls RSS. Nous avons souhait dvelopper une animation sans composant an de la rendre compatible avec de vieux Flash Player.
Chemin daccs : Medias/ChatRSS/LecteurFluxRSSAutre.a La scne de cette animation contient six textes dynamiques ainsi quune occurrence intitule btVoir.
Script
1 chargerFluxRSS = function (adresse) { 2 charge = new XML(); 3 charge.ignoreWhite = true; 4 charge.load(adresse); 5 // 6 charge.onLoad = function() { 7 afficherFluxRSS(charge); 8 }; 9 };
310
10 // 11 afficherFluxRSS = function (nomInstXML) { 12 titreDuFluxRSS = nomInstXML.childNodes[0].childNodes[0].childNodes[0]; 13 descriptionDuFluxRSS = nomInstXML.childNodes[0].childNodes[0].childNodes[2]; 14 dateduFlux = nomInstXML.childNodes[0].childNodes[0].childNodes[5]; 15 var nbrItems = nomInstXML.childNodes[0].childNodes.length; 16 nbrItems = nbrItems>12 ? nbrItems=12 : nbrItems; 17 listeDesFluxRSS = ""; 18 effacerLienBoutonsEnPlace(); 19 for (i=2; i<nbrItems; i++) { 20 listeDesFluxRSS += nomInstXML.childNodes[0].childNodes[i].childNodes[0]+"<br>"; 21 _root.attachMovie("zoneClic", "zoneClic"+i, i); 22 _root["zoneClic"+i]._x = 24; 23 _root["zoneClic"+i]._y = 86.8+((i-2)*17.5); 24 _root["zoneClic"+i]._alpha = 0; 25 _root["zoneClic"+i].sonNumero = i; 26 _root["zoneClic"+i].onPress = function() { 27 resumeArticle = nomInstXML.childNodes[0].childNodes[this.sonNumero].childNodes[2]; 28 resumeArticle += " "+nomInstXML.childNodes[0].childNodes[this.sonNumero].childNodes[3]; 29 }; 30 } 31 }; 32 // 33 chargerFluxRSS("http://www.afp.fr/francais/rss/stories.xml"); 34 // 35 effacerLienBoutonsEnPlace = function () { 36 for (i=2; i<=12; i++) { 37 delete _root["zoneClic"+i].onPress; 38 } 39 }; 40 // 41 btVoir.onPress = function() { 42 chargerFluxRSS(adresseFluxRSS); 43 };
Analyse
Avant danalyser ce script, prcisons que la reconnaissance du clic sur les diffrentes news se fera sur des occurrences transparentes qui vont tre places sur la scne. Il sagira dun clip dont le nom de liaison est zoneClic. Les lignes de news sont les lignes du texte dynamique dont le nom de variable est resumeArticle. Ligne 1 : nous crons une fonction qui sera appele lorsque lutilisateur cliquera sur le bouton Voir situ en bas droite sur la scne. Ligne 4 : le paramtre de la mthode load() sera prcis la ligne 42.
311
Les mdias Partie II
Lignes 6 8 : lorsque le chier XML sera charg, la fonction de la ligne 11 sera excute, afchant ainsi les valeurs et attributs des nuds contenus dans ce document. Lignes 11 31 : cette fonction assure le remplissage (lignes 12 14) des textes dynamiques contenus sur la scne et le placement des occurrences auxquelles nous faisions rfrence en introduction cette analyse. Ligne 33 : an que linterface afche un contenu dans linterface au lancement de lanimation, nous excutons la fonction chargerFluxRSS. Lignes 35 39 : comme nous le prcisions en introduction lanalyse de ce script, des occurrences sont places sur la scne, au-dessus des lignes de news pour dceler le clic. Nous devons donc supprimer toutes ces occurrences sur la scne avant den replacer une nouvelle srie. Cette fonction sera appele la ligne 18. Lignes 41 43 : lorsque lutilisateur veut voir les news dun ux RSS quil a saisies dans la zone de texte du bas, il doit cliquer sur le bouton Voir de la scne qui excute alors ce gestionnaire onPress.
Bogue ventuel
Si vous nexcutez pas la ligne 18, vous risquez de gnrer certains bogues relatifs aux clics sur les news afches dans le texte dynamique dont le nom de variable est resumeArticle.
312
Partie III
Manipulation du texte
Longtemps inconsidr dans les applications Flash, le texte regagne enn du terrain dans les dveloppements, et ce pour deux raisons. La premire est relative aux nouvelles interfaces proposes sur Internet. Pour certains sites, il nest plus question de placer une animation au milieu de textes et dimages dans une page web, mais au contraire de crer une animation Flash pleine page qui contient tous les mdias, le texte en faisant donc partie. La deuxime raison est directement lie aux possibilits du langage. Avec les diffrentes versions de Flash, lActionScript a propos de plus en plus de solutions pour le traitement et la mise en forme du texte. Nous sommes passs de quelques boutons tels que le gras et litalique dans une barre doutils la gestion des CSS avec des chiers XML ! La concurrence entre dveloppeurs Flash tant tellement grande, nous vous invitons donc vivement matriser les techniques proposes dans ces tudes de cas, les possibilits que vous allez dcouvrir sont souvent mconnues ou mal connues.
16
Mise en forme du texte
Comme nous lvoquions dans lintroduction de ce chapitre, nous allons dcouvrir que la mise en forme dun texte peut se faire en utilisant des CSS avec une simplicit rellement dconcertante. Dans un deuxime temps, nous apprendrons contrler la saisie dun texte.
Mettre du texte en forme (classe TextFormat())

La mise en forme dun texte ne se fait pas obligatoirement au moment de la construction de votre interface sur la scne, lorsque vous tes dans Flash en mode authoring. Un texte dynamique ou de saisie est par dnition susceptible de changer de contenu au cours de la lecture du chier SWF. Nous allons donc utiliser la classe TextFormat() pour obtenir une instance laquelle nous rattacherons des proprits de mise en forme du texte. Au travers de cette tude de cas, nous avons essay de pousser les possibilits de mise en forme dun texte en crant un module de traitement de texte.
Noms doccurrence et de variable
Vous devez diffrencier le nom doccurrence et le nom de variable dun texte dynamique ou de saisie. Pour nommer linstance (ou occurrence) dun texte sur la scne, la case de saisie se trouve gauche, dans la palette Proprits. On utilise la variable dun texte pour faire rfrence ou modier son contenu, alors que le nom dinstance sert didentiant pour lutilisation de mthodes et proprits.
Manipulation du texte Partie III
Figure 16-1
La mise en forme dun texte peut tre contrle partir de lActionScript et non uniquement via linterface du logiciel.
Chemin daccs : Manipulation du texte/MiseFormeTexte/TextFormat.a Pour cette tude de cas, la scne contient de nombreux lments, commencer par un texte de saisie dont le nom dinstance est message_inst et le nom de variable vMessage. Il servira contenir le texte qui va tre mis en forme.
Figure 16-2
Le nom doccurrence du texte de saisie (message_inst) va permettre dutiliser la mthode setTextFormat() pour sa mise en forme.
Dautres lments vont servir la mise en forme du texte tels que : Deux textes de saisie dont les noms dinstance sont corps_inst et interlignage_inst, et qui possdent les noms de variables correspondants corps et interlignage. Un composant de type menu droulant nomm polices_inst. Nous dnirons ses paramtres en ActionScript et non par linterface du logiciel. Il servira afcher une liste de polices disponibles pour la mise en forme du texte. Cinq boutons intituls btGras, btItalique, btAlignG, btAlignC et btAlignD. Deux clips, reprsents par deux triangles situs au-dessus du texte, pour dnir les retraits gauche et droit du texte dont les noms sont retraitGauche et retraitDroit. Pour nir, cinq occurrences issues du mme clip, dont les couleurs ont t modies via la palette Proprits, ont t places en bas droite du texte de saisie intitul message_inst.
316
Mise en forme du texte Chapitre 16
Cur du code
Avant de vous prsenter le script et son analyse, voici le cur de ce script. Il pourrait se rsumer ces trois lignes dinstructions :
var miseEnForme = new TextFormat(); miseEnForme.size = 10; message_inst.setTextFormat(miseEnForme);

En effet, il suft de crer une instance de la classe TextFormat(), de dnir ensuite des valeurs diffrentes proprits, puis dappliquer la mise en forme un texte dynamique ou de saisie en faisant rfrence son nom dinstance et en utilisant la mthode setTextFormat().
Lanimation contient deux scripts.
Script
Script sur la premire image-cl de la timeline du clip reprsent par un carr, pour la mise en couleur du texte :
1 var couleurCetteOccurrence = new Color(this); 2 this.onPress = function() { 3 _parent.miseEnForme.color = couleurCetteOccurrence.getRGB(); 4 _parent.message_inst.setTextFormat(_parent.miseEnForme); 5 };

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var miseEnForme = new TextFormat(); var surveilClavier = new Object(); var etatGras = false; var etatItalique = false; btGras._alpha = 50; btItalique._alpha = 50; // listePolices = TextField.getFontList().sort(); // for (i=0; i<listePolices.length; i++) { polices_inst.addItem({label:listePolices[i], data:listePolices[i]}); } polices_inst.rowCount = 11; polices_inst.dropdownWidth = 188; // gestionListeDeroulante = new Object(); gestionListeDeroulante.change = function(resultat) { miseEnForme.font = resultat.target.value; message_inst.setTextFormat(miseEnForme); }; polices_inst.addEventListener("change", gestionListeDeroulante); // corps_inst.onChanged = function() {
317
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
miseEnForme.size = corps; if (corps>=6 && corps != "") { message_inst.setTextFormat(miseEnForme); } }; corps_inst.onSetFocus = function() { surveilClavier.onKeyDown = function() { laTouche = Key.getCode(); if (laTouche == 38) { corps++; } if (laTouche == 40) { corps--; } miseEnForme.size = corps; if (corps>=6 && corps != "") { message_inst.setTextFormat(miseEnForme); } }; Key.addListener(surveilClavier); }; corps_inst.onKillFocus = function() { Key.removeListener(surveilClavier); }; // miseEnForme.font = "Verdana"; miseEnForme.size = 16; message_inst.setTextFormat(miseEnForme); // btGras.onPress = function() { etatGras = !etatGras; btGras._alpha = (Number(etatGras)*50)+50; miseEnForme.bold = etatGras; message_inst.setTextFormat(miseEnForme); }; btItalique.onPress = function() { etatItalique = !etatItalique; btItalique._alpha = (Number(etatItalique)*50)+50; miseEnForme.italic = etatItalique; message_inst.setTextFormat(miseEnForme); }; // btAlignG.onPress = function() { miseEnForme.align = "Left"; message_inst.setTextFormat(miseEnForme); }; btAlignC.onPress = function() { miseEnForme.align = "Center"; message_inst.setTextFormat(miseEnForme); }; btAlignD.onPress = function() { miseEnForme.align = "Right"; message_inst.setTextFormat(miseEnForme);
318
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
}; // retraitGauche.onPress = function() { this.startDrag(0, 42.2, 97.9, 120, 97.9); this.onMouseMove = function() { decalGauche = this._x-42.2; miseEnForme.leftMargin = decalGauche; message_inst.setTextFormat(miseEnForme); }; }; retraitGauche.onRelease = retraitGauche.onReleaseOutside=function () { stopDrag(); delete this.onMouseMove; }; // retraitDroite.onPress = function() { this.startDrag(0, 260, 97.9, 337.8, 97.9); this.onMouseMove = function() { decalDroite = Math.abs(this._x-337.8); miseEnForme.rightMargin = decalDroite; message_inst.setTextFormat(miseEnForme); }; }; retraitDroite.onRelease = retraitDroite.onReleaseOutside=function () { stopDrag(); delete this.onMouseMove; }; // interlignage_inst.onChanged = function() { miseEnForme.leading = interlignage; if (interlignage>=0 && interlignage != "") { message_inst.setTextFormat(miseEnForme); } }; interlignage_inst.onSetFocus = function() { surveilClavier.onKeyDown = function() { laTouche = Key.getCode(); if (laTouche == 38) { interlignage++; } if (laTouche == 40) { interlignage--; } miseEnForme.leading = interlignage; if (interlignage>=0 && interlignage != "") { message_inst.setTextFormat(miseEnForme); } }; Key.addListener(surveilClavier); }; interlignage_inst.onKillFocus = function() { Key.removeListener(surveilClavier); };
319
130 131 132 133
// miseEnForme.size = 10; message_inst.setTextFormat(miseEnForme); //
Analyse
Remarque
Lorsque nous ferons rfrence lexpression texte de la scne , il sagira du texte dynamique dont le nom dinstance est message_inst, c'est--dire celui qui contient les informations mettre en forme.
Commenons par analyser le script qui se trouve sur la premire image-cl de la timeline du clip servant la mise en couleur du texte. Ligne 1 : une instance de la classe Color() est cre dans le clip, this faisant rfrence toutes les occurrences issues de ce symbole, cest--dire les cinq carrs de couleur sur la scne. Ligne 2 5 : gestionnaire qui sexcutera au moment du clic sur un des carrs de couleur. Ligne 3 : nous le verrons plus bas dans lanalyse du script suivant, miseEnForme est une instance de la classe TextFormat() qui a t cre sur la scne. Elle est en charge de la mise en forme du texte de notre application (celui de la variable vMessage). Cette ligne attribue donc la proprit color de linstance miseEnForme, la valeur de la couleur de loccurrence dans laquelle se trouve ce script. Cest la mthode getRGB() qui permet de connatre la couleur. Ligne 4 : la mise en forme du texte qui se trouve sur la scne est applique grce la mthode setTextFormat(). Analysons prsent le script principal de lanimation. Ligne 1 : une instance de la classe TextFormat() est cre an de stocker toutes les proprits de mise en forme que nous allons appliquer au texte. Ligne 2 : un objet est cr an de surveiller toutes les actions relatives au clavier. Lignes 3 et 4 : deux variables contenant des valeurs boolennes sont cres, an de dnir des tats sur lesquels nous reviendrons ligne 53 et 60. Lignes 5 et 6 : les deux occurrences permettant de rgler le gras et litalique du texte sont rgles 50 % dopacit pour simuler ltat inactif des boutons correspondants. Ligne 8 : un tableau stocke la liste trie des polices disponibles sur lordinateur de lutilisateur. Lignes 10 12 : une boucle permet dajouter au composant de type menu droulant, le contenu du tableau prcdemment cr. Lignes 13 et 14 : les valeurs 11 et 118 correspondent respectivement au nombre de lignes afches lorsque le menu est droul et la largeur du menu (valeur exprime en pixels).
320
Lignes 16 21 : lorsque lutilisateur va slectionner une police du menu droulant, un objet va notier le changement Flash et rcuprer le nom de la police correspondante. La mthode setTextFormat() est alors utilise pour la premire fois, an de mettre en forme le texte en utilisant la police slectionne. Ligne 18 : la proprit font prend pour valeur, le nom de la police slectionne dans le menu. Ligne 21 : tant que cette ligne dinstruction nest pas excute, la surveillance relative la slection dun nom de police dans le menu ne peut se faire. Lignes 23 28 : ce gestionnaire est charg de rcuprer la valeur contenue dans le texte dynamique dont le nom de variable est corps, il lattribue ensuite la proprit size avant de lappliquer au texte de la scne. La mise en forme ne pourra se faire qu deux conditions. Le texte dynamique dont le nom de variable est corps doit contenir un chiffre suprieur 6, et ne doit pas tre vide (cest--dire au moins un chiffre). Lignes 29 44 : le gestionnaire onKeyDown est activ ds lors que lutilisateur clique sur loccurrence intitule corps_inst, il surveille lactivit lie au clavier et teste les touches enfonces. La che du haut, dont le code est 38, permet daccrotre la valeur de corps. Dans le mme temps, chaque pression sur une touche du clavier, et sous les mmes conditions que celles que nous avons vues prcdemment (corps suprieur 6 et diffrent de vide), la mise en forme du texte de la scne est effectue. Lignes 45 47 : ce gestionnaire va annuler la surveillance de lactivit du clavier ds que la zone de texte intitule corps_inst nest plus active. Lignes 49 51 : ces trois lignes dinstructions auraient pu tre places juste aprs la premire ligne de ce script, car elles dnissent deux proprits de linstance miseEnForme avant que celle-ci ne soit applique. Lignes 53 64 : ces lignes dinstructions permettent de mettre en gras et/ou en italique, le texte de la scne. Lignes 54 et 60 : nous avions voqu dans lanalyse du premier script de cette animation, ces deux variables qui contiennent des valeurs boolennes. chaque clic sur le bouton gras ou italique, la valeur boolenne sinverse, permettant ainsi de dnir la valeur des proprits bold et italic. Lignes 55 et 61 : les valeurs boolennes sont traduites en valeurs numriques, permettant ainsi de faire le calcul qui renvoie donc 50 ou 100.
Rappel
En informatique, true vaut 1 et false vaut 0. Le point dexclamation permet de basculer la valeur true false et inversement.
Lignes 66 77 : ces gestionnaires assurent lalignement du texte de la scne en utilisant la proprit align de la classe TextFormat().
321
Lignes 79 86 : ds lors que lutilisateur clique sur loccurrence intitule reraitGauche et la bouge, elle est rendue mobile sur un axe horizontal uniquement. La valeur correspondant sa position exprime en pixels est alors utilise dans un calcul. La valeur de la variable intitule decalGauche est utilise pour dnir le retrait de la marge de gauche du texte de la scne. Lignes 87 90 : ds que lutilisateur relche le bouton de la souris, loccurrence nest plus mobile et le gestionnaire onMouseMove est dtruit. Lignes 92 103 : voir les explications des lignes 79 90. Lignes 105 129 : voir les explications des lignes 23 47. Lignes 131 et 132 : dcidment, ces deux lignes dinstructions auraient galement pu tres regroupes avec les lignes 1, 49 et 50.
Bogues ventuels
Dans un tel script, ils peuvent tre nombreux, mais voici tout de mme ceux qui restent les plus probables : Ne pas oublier dajouter la mthode addListener(). Pour linterlignage et le corps, il ne fallait pas oublier de vrier le contenu des variables corps et interlignage. Lignes 67, 71 et 75, ne pas oublier de saisir les valeurs entre guillemets. Ne pas oublier de dnir les valeurs initiales des variables des lignes 3 et 4. Voil, cette tude de cas vous aura dmontr quil est trs simple de mettre en forme un texte par le biais de la classe TextFormat() et la mthode setTextFormat() de la classe TextField().
Mettre du texte en forme (classe TextFormat() et CSS)

Pour cette tude de cas, nous avons utilis deux chiers .css intituls stylesResultat1.css et stylesResultat2.css. Vous dcouvrirez leurs contenus dans la partie Script de cette tude de cas. Nous allons constater que la seule difcult dans cette animation est relative la vrication du chargement des donnes provenant des documents .css avant lapplication de la mise en forme. Cest uniquement dans un deuxime temps que les donnes seront charges.
322
Attention
Nous y reviendrons au cours des explications, mais nous devons ds prsent prciser quune CSS ne peut tre applique un texte dynamique ou de saisie qui contient dj des donnes. Vous devez associer une CSS un texte dynamique (ou de saisie), puis charger vos donnes dans un deuxime temps.
Par ailleurs, il est important de comprendre que la mise en forme ne peut se faire que sous une seule condition : les noms utiliss pour dnir les balises du document XML et les tags (ou slecteurs) du chier .css doivent tre identiques.
Nom { font-family: Verdana, Arial, Helvetica, sans-serif;
et
<Entreprises> <Entreprise> <Nom>L'eau Ral</Nom>
Figure 163
Ce photomontage prsente la mise en forme du texte obtenue partir de lapplication des deux chiers .css.
Rappel
Si la gestion du XML dans une application Flash vous pose problme, noubliez pas de consulter la premire partie de ce livre qui traite de ce sujet.
323
Chemin daccs : Manipulation du texte/MiseFormeTexte/TextFormatCSS.a Cette animation prsente lavantage de ne contenir quun texte dynamique sur la scne, et dont le nom dinstance est zoneDeTexte_inst avec un nom de variable intitul zoneDeTexte et deux instances dun symbole de type bouton, dont les noms sont btAnnee04 et btAnnee05. La structure du seul script de cette animation est la suivante : 1. Chargement du chier CSS. 2. Vrication du chargement, puis application de la mise en forme au texte dynamique. 3. Chargement du contenu du texte dynamique (un chier XML dans notre exemple). 4. Vrication du chargement, puis remplissage du texte dynamique par les donnes XML.
Script
Contenu du chier stylesResultat1.css :
1 2 3 4 5 6 7 8 9 10 11 12 Nom { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #5E685B; } Valeur { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #7C897A; font-style: italic; text-indent: 10pt; }
Contenu du chier stylesResultat2.css :

1 2 3 4 5 6 7 8 9 10 11 12 Nom { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #993300; } Valeur { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #999933; font-style: italic; text-indent: 10pt; }
324
Contenu du chier XML :

<Entreprises> <Entreprise> <Nom>L'eau Ral</Nom> <Valeur>254.5</Valeur> </Entreprise> <Entreprise> <Nom>J'y vends Tch</Nom> <Valeur>264</Valeur> </Entreprise> <Entreprise> <Nom>Seau nie</Nom> <Valeur>395</Valeur> </Entreprise> <Entreprise> <Nom>Mi Gros Soft</Nom> <Valeur>125</Valeur> </Entreprise> <Entreprise> <Nom>Apple</Nom> <Valeur>980</Valeur> </Entreprise> </Entreprises>
Le script suivant a t plac sur la premire image-cl de la timeline principale.

1 btAnnee04.onPress = function() { 2 var styleCSS1 = new TextField.StyleSheet(); 3 styleCSS1.load("stylesResultat1.css"); 4 styleCSS1.onLoad = function(etat) { 5 if (etat) { 6 zoneDeTexte_inst.styleSheet = styleCSS1; 7 var charge = new XML(); 8 charge.load("annee2004.xml"); 9 charge.ignoreWhite = true; 10 charge.onLoad = function() { 11 zoneDeTexte = this; 12 }; 13 } 14 }; 15 }; 16 btAnnee05.onPress = function() { 17 var styleCSS2 = new TextField.StyleSheet(); 18 styleCSS2.load("stylesResultat2.css"); 19 styleCSS2.onLoad = function(etat) { 20 if (etat) { 21 zoneDeTexte_inst.styleSheet = styleCSS2; 22 var charge = new XML();
325
23 24 25 26 27 28 29 30 };
charge.load("annee2005.xml"); charge.ignoreWhite = true; charge.onLoad = function() { zoneDeTexte = this; }; } };
Analyse
Les contenus des chiers .css et .xml sont trs simples comme vous pouvez le constater, et ne ncessitent aucun commentaire ni la moindre analyse. Cependant il est important de rappeler ce que nous afrmions en introduction cette tude de cas, les noms utiliss pour dnir les balises du document XML et les tags du chier .css doivent tre identiques. Cest la condition pour que la mise en forme se fasse. Concernant le script de lanimation, vous constaterez quil sagit des deux mmes gestionnaires, seul le nom du chier .css change. Nous allons donc analyser uniquement un gestionnaire onPress. Ligne 2 : une instance intitule styleCSS1 est cre. partir de ce moment-l, deux solutions soffrent vous. Utilisez la mthode setStyle() pour dnir un attribut de mise en forme ou chargez le contenu dun chier .css contenant des tags. Nous retiendrons cette deuxime possibilit.
Attention
La classe TextField.StyleSheet() nest disponible qu partir du player Flash 7.
Ligne 3 : la mthode load() permet de charger le contenu dun chier .css comme dans notre exemple stylesResultat1.css. Lignes 4 et 5 : un gestionnaire est charg de vrier la n du chargement du contenu du chier CSS. Si tel est le cas Ligne 6 : on utilise la proprit styleSheet pour appliquer la mise en forme linstance du texte intitule zoneDeTexte_inst. Lignes 7 9 : on charge le contenu du chier .xml uniquement lorsque les slecteurs (tags) CSS ont t appliqus au texte dynamique ou de saisie. Ligne 10 : une fois encore, une vrication du chargement des donnes est ncessaire avant dessayer de faire rfrence aux balises contenues dans le document XML. Ligne 11 : la feuille de style est applique, le chargement du chier XML est termin, on peut enn placer le contenu de notre instance charge dans le texte dynamique sur la scne.
326
Bogues ventuels
Le principal bogue que vous pourriez rencontrer dans cette application est relatif au nonrespect du choix strictement identique des noms de balises XML et slecteurs (tags) de votre chier CSS. Par ailleurs, oublier de vrier la n du chargement des slecteurs et des balises XML empcherait daboutir au rsultat.
Contrler la casse et la nature dun texte

Cette tude de cas trs courte, va nous dmontrer quil est possible de contrler la prsence dune majuscule en dbut de mot, de changer toute la casse dune chane de caractres et non le contenu intgral dun texte dynamique. Par ailleurs, an dviter des erreurs de format de donnes, nous allons contraindre lutilisateur ne saisir que des chiffres dans une zone de texte.
Figure 164
Le gestionnaire onChanged permet de contrler chaque ajout ou suppression de caractres dans un texte de saisie.
Rappel
Vous ntes pas obligs dinstancier la classe String() pour utiliser la mthode substr(). Par ailleurs, les paramtres spcier pour cette mthode correspondent au numro de caractre partir duquel va se faire lextraction et au nombre de caractres prendre en compte. Rappelons galement que le premier caractre dune chane porte lindex 0 et non 1. En revanche, le deuxime paramtre de la mthode substring() correspond galement un numro de caractre. Mais attention, il faut commencer compter partir de 1 pour le premier caractre. Dans lexpression Aurel, Snake et TiMopi sont gniaux , la virgule correspond au cinquime caractre. Dans ce cas, substr(7,5) revient crire substring(7,12).
Chemin daccs : Manipulation du texte/MiseFormeTexte/CasseContrainte.a Lanimation de cette tude de cas contient tout simplement cinq textes de saisie dont les noms dinstance et de variables sont respectivement :
327
1. Nom : nom_inst et vNom. 2. Prnom : prenom_inst et vPrenom. 3. Adresse e-mail : as nomm. 4. Code postal : codePostal_inst et codePostal. 5. Ville : ville_inst et vVille. Lunique script de cette tude de cas, gre la surveillance des textes de saisie nom_inst,
ville_inst, prenom_inst et codePostal_inst.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 nom_inst.onChanged = function() { vNom = vNom.toUpperCase(); }; ville_inst.onChanged = function() { vVille = vVille.toUpperCase(); }; // prenom_inst.onChanged = function() { premierCaractere = vPrenom.substr(0, 1).toUpperCase(); finDuMot = vPrenom.substr(1, vPrenom.length-1).toLowerCase(); vPrenom = premierCaractere+finDuMot; }; // codePostal_inst.restrict = "0-9"; codePostal_inst.maxChars = 5;
Analyse
Prcisons que le gestionnaire onChanged est invoqu (appel) ds que lutilisateur change le contenu dun texte de saisie par ajout ou suppression dun caractre. Lignes 1 3 et 4 6 : ds que lutilisateur saisit un texte, il est automatiquement mis en capitales quel que soit ltat de verrouillage de la touche Majuscule, grce la mthode toUpperCase(). Ligne 9 : une extraction de chane permet de connatre le premier caractre saisi, il est alors aussitt mis en majuscule et stock dans une variable. Ligne 10 : linverse, tous les caractres du texte de saisie intitul vPrenom, sont mis en minuscules lexception du premier caractre, puis sont stocks dans une variable. Ligne 11 : par concatnation des deux variables voques ci-dessus, le prnom est rcrit avec une majuscule en dbut de mot. Lignes 14 et 15 : le texte de saisie dans lequel lutilisateur indiquera son code postal nacceptera que des chiffres de cinq caractres au plus.
328
Bogues ventuels
Trs souvent, les novices oublient dajouter des parenthses la mthode toUpperCase(), pensant quil sagit dune proprit. linverse, la proprit restrict ne possde pas de parenthses car il ne sagit pas dune mthode.
Vrication de la saisie dun texte en cours de frappe

Cette animation est perfectible, mais trs intressante, car elle propose une solution de dveloppement pour supprimer tous les termes dun texte que vous souhaitez bannir. De plus, la technique est trs simple car il suft de rechercher dans un texte de saisie une chane de caractres, et de la comparer une entre dun tableau.
Rappel
Rappelons que la premire entre dun tableau porte lindex 0. De ce fait, dans la condition de rptition dune boucle for(), vous devez tester la stricte infriorit la longueur dun tableau.
Chemin daccs : Manipulation du texte/MiseFormeTexte/VerifSaisie.a Lanimation contient une occurrence de clip initialement masque, et qui sera visible lorsque lutilisateur cliquera dans la zone dun texte de saisie intitule zoneSaisie_inst. Le script contenu sur la premire image-cl de la timeline principale assure deux fonctions : 1. Le fait de slectionner et dslectionner le texte de saisie. 2. Le fait de saisir ou supprimer des caractres dans le texte de saisie.
Script
1 2 3 4 5 6 7 8 msgAlerte._visible = false; // zoneSaisie_inst.onSetFocus = function() { infosSaisie = "Message en cours de saisie..."; msgAlerte._visible = true; }; zoneSaisie_inst.onKillFocus = function() { infosSaisie = "Votre message contient "+zoneSaisie.length+" caractre(s)";
329
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
msgAlerte._visible = false; }; // listeMotsInterdits = ["con", "connard", "salope", "pute", "encul", "pd"]; rechercheMotsInterdits = function () { for (i=0; i<listeMotsInterdits.length; i++) { positionTrouvee = zoneSaisie.toLowerCase().indexOf(listeMotsInterdits[i]); if (positionTrouvee>=0) { chaineaVerifier = new String(zoneSaisie); espace = chaineaVerifier.substr(positionTrouvee+listeMotsInterdits[i] .length, 1) == " "; if (espace) { zoneSaisie = zoneSaisie.substring(0, zoneSaisie.length-listeMotsInterdits[i].length-1); } espaceApresS = chaineaVerifier.substr(positionTrouvee +listeMotsInterdits[i].length, 2) == "s "; if (espaceApresS) { zoneSaisie = zoneSaisie.substring(0, zoneSaisie.length-listeMotsInterdits[i].length-2); } } } }; // zoneSaisie_inst.onChanged = function() { rechercheMotsInterdits(); caracteresRestants = 500-zoneSaisie.length; };
Analyse
Rappel
En annexe, la section indexOf() ou recherche dune chane de ce livre vous propose un rappel sur le fonctionnement de la mthode indexOf().
Ligne 1 : loccurrence qui apparatra lorsque lutilisateur cliquera dans le texte de saisie est initialement masque. Lignes 3 5 : un gestionnaire invoqu lorsque lutilisateur cliquera dans le texte de saisie, sera charg dafcher un message temporaire dans la variable dun texte dynamique prsent sur la scne, et de rendre visible loccurrence voque ci-dessus. Lignes 7 10 : lorsque lutilisateur dslectionnera le texte de saisie intitul zoneSaisie_ inst, un message lui indiquera le nombre de caractres contenus dans son texte. Une occurrence sera galement masque.
330
Ligne 12 : ce tableau contient tous les termes surveiller. Il serait prfrable dutiliser le contenu dun chier .xml. Dans un souci de simplication des explications de cette tude de cas, nous avons opt pour le choix dun tableau. Ligne 13 : une fonction de vrication de contenu est donc cre, elle va tre appele dans un gestionnaire onChanged invoqu ds que lutilisateur saisira du texte. Ligne 14 : une boucle for() va parcourir le tableau qui contient les mots bannir. Ligne 15 : une variable stocke le rsultat de la recherche de chaque entre du tableau dans le texte de saisie. -1 sera renvoy si aucune correspondance na t trouve ; un chiffre correspondant lindex du premier caractre du mot rencontr sera renvoy dans le cas contraire. Ligne 16 : un test value le contenu de la variable voque la ligne prcdente. Lignes 17 et 18 : si le test renvoie une valeur suprieure ou gale 0, lun des mots gurant dans le tableau a t trouv dans le texte de saisie : il faut alors le supprimer. On commence alors par crer une instance de la classe String(), an dy associer le contenu du texte de saisie. Pour ne pas supprimer une chane de caractres contenue dans un mot, on sassure quune espace est bien prsente derrire le mot rencontr en effectuant un test. Le mot content contient en effet la chane de caractres con , et ce nest pourtant pas une insulte. Une variable intitule espace contient donc le rsultat du test prsent ci-dessus. Si cette variable contient la valeur true, on extrait alors du texte de saisie tout le texte, du dbut jusquau dernier caractre, qui prcde le mot supprimer. Lignes 22 25 : de la mme faon quun test sest assur de la prsence dune espace derrire chaque chane de caractres, une vrication de laccord au pluriel est effectue.
Remarque
Si lutilisateur tape sur la touche Entre, aucune espace nest alors insre derrire le dernier mot saisi : le test qui value sil sagit dun mot ne fonctionnera donc pas. Si lutilisateur revient dans le texte et tape une insulte, le nombre de caractres contenus dans ce gros mot est alors utilis pour supprimer les derniers caractres du texte de saisie. Pour optimiser ce module, il faudrait donc retenir la position du mot rencontr, puis extraire deux chanes de caractres : celle qui se trouve avant le mot recherch et celle qui est aprs. Par concatnation, on peut reconstituer le contenu du texte de saisie sans le mot banni.
Lignes 30 33 : lorsque lutilisateur saisit son texte, la vrication est faite et un message indique sur la scne le nombre de caractres restants. La limite est xe 500 caractres. Nous aurions pu dvelopper une animation plus prcise, surveillant davantage les mots saisis par lutilisateur, mais nous avons prfr la garder simple, an quil soit facile de la comprendre avec nos explications.
Bogue ventuel
La plus grande difcult rside dans la prcision des valeurs correspondant aux paramtres des mthodes substr() et substring().
331
Le composant DataGrid
Si un jour vous avez besoin de prsenter des donnes sous forme de tableau, gardez lesprit que le composant DataGrid propose cette fonctionnalit.
Chemin daccs : Manipulation du texte/MiseFormeTexte/DataGrid.a Nous avons plac sur la scne un composant de type DataGrid et nous avons nomm son occurrence tableauScores.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // Cration de colonnes pour activer le tri des donnes. tableauScores.addColumn("Nom"); tableauScores.addColumn("Score"); tableauScores.setSize(250,150); tableauScores.vScrollPolicy = "off" donnees = new Array({Nom:"Marine", Score:3135 }, {Nom:"Luna", Score:403}, {Nom:"David", Score:25}); tableauScores.dataProvider = donnees; // Cration d'un objet couteur pour DataGrid. ecouteur = new Object(); ecouteur.headerRelease = function(evt_obj:Object) { switch (evt_obj.target.columns[evt_obj.columnIndex].columnName) { case "name" : tableauScores.sortOn("name", Array.CASEINSENSITIVE); break; case "score" : tableauScores.sortOn("score", Array.NUMERIC); break; } }; // Ajout de l'couteur au DataGrid. tableauScores.addEventListener("headerRelease", ecouteur);
Analyse
Lignes 2 et 3 : nous dnissons des noms de colonnes utiliser dans le tableau. Lignes 4 et 5 : nous dnissons lapparence de loccurrence du composant de type DataGrid.
332
Lignes 6 et 7 : nous remplissons loccurrence avec les valeurs spcies sous forme de tableau. Lignes 9 21 : nous crons un couteur charg de dtecter le clic sur loccurrence et plus particulirement sur les en-ttes de colonnes an de rednir le tri des lignes.
Bogues ventuels
Respectez la casse dans la saisie des noms de colonnes entre les lignes 2, 3 et 6.
333
17
Traitement du texte et des variables
Tous les dveloppeurs Flash savent faire dler un texte dynamique ou de saisie, car la mthode est trs simple. En revanche, lui associer un ascenseur complique la tche si lon ne souhaite pas utiliser celui qui est propos en composant. Inclure un mot de passe, un module de recherche dans un texte, rendre un texte cliquable, grer les tabulations, appliquer des effets danimation, utiliser le composant List, ce sont autant de techniques quil est possible de combiner avec un texte.
Vrier la validit dune adresse e-mail

Cette tude de cas est essentielle, ds lors que vous aurez besoin de proposer un texte de saisie lutilisateur, an quil saisisse son adresse e-mail. En effet, vous devez vous assurer de sa validit.
Figure 17-1
Une adresse e-mail doit imprativement contenir une arobase ainsi quun point.
Rappel
En annexe, la section indexOf() ou recherche dune chane vous propose un rappel sur le fonctionnement de la mthode indexOf().
Chemin daccs : Manipulation du texte/TraitementTexte/VerifAdMail.a Lanimation ne contient que peu dlments : un texte de saisie dont le nom de variable est adresseMail, son nom dinstance tant adresse_inst et une occurrence de clip intitule btEnvoyer prsente sur la scne, mais qui na pas vraiment de fonction dans notre tude de cas. Elle va uniquement permettre de dmontrer lintrt du gestionnaire onChanged. Si vous deviez rellement utiliser ce bouton (loccurrence du clip), remplacez le contenu de la ligne 2 du script suivant par les instructions de votre choix. La structure du script de cette tude de cas est trs simple, car il ne faut grer que deux points : 1. Le bouton denvoi. 2. Le gestionnaire onChanged qui sassure de la validit de ladresse e-mail saisie.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 btEnvoyer.onPress = function() { commentaire = "Vous avez envoy votre adresse mail"; }; btEnvoyer.enabled = false; btEnvoyer._alpha = 30; // adresse_inst.onChanged = function() { arobas = adresseMail.indexOf("@"); pointdomaine = adresseMail.indexOf("."); if (arobas>-1 && pointdomaine>-1) { btEnvoyer.enabled = true; btEnvoyer._alpha = 100; } else { btEnvoyer.enabled = false; btEnvoyer._alpha = 30; } };
Analyse
Lignes 1 3 : lorsque lutilisateur cliquera sur le bouton, un message va safcher dans le texte dynamique dont le nom de variable est commentaire.
336
Traitement du texte et des variables Chapitre 17
Ligne 4 : ds le lancement de lanimation, le bouton Envoyer est dsactiv an que lutilisateur ne puisse pas cliquer dessus. Ce nest quaprs vrication de ladresse e-mail quil sera ractiv. Ligne 5 : pour faire comprendre lutilisateur que le bouton est dsactiv, il est rendu transparent 30 % de son opacit dorigine. Lignes 7 17 : le gestionnaire onChanged sera invoqu ds que lutilisateur cliquera sur une touche du clavier, alors que le texte de saisie intitul adresse_inst est actif. Ligne 8 : une variable stocke le rsultat de la recherche de larobase dans le texte de saisie. Si le rsultat est gal -1, cest que larobase na pas t trouve. Ligne 9 : une variable stocke galement le rsultat de la recherche dun point dans le texte de saisie. Lignes 10 16 : un test sassure que les deux variables ont des valeurs suprieures -1, ce qui dmontre la prsence dun point et du caractre arobase. Si tel est le cas, le bouton est rendu actif et opaque 100 %.
Remarque
La structure de test prvoit un else, car il se pourrait que lutilisateur saisisse correctement son adresse e-mail et la modie ensuite en supprimant larobase ou le point accidentellement.
Bogue ventuel
Comme nous lvoquions dans ltude de cas prcdente, le paramtre saisi entre les parenthses doit ltre entre guillemets, sauf sil sagit du nom dune variable.
Faire dler un texte avec ascenseur

Pour cette tude de cas, nous avons dvelopp deux animations que nous vous prsentons ici lune aprs lautre. Raliser un ascenseur relve dune technique simple, en revanche, rendre les lignes cliquables est une chose plus difcile. Nous allons donc commencer par analyser ltude de cas la plus simple, celle qui ne propose pas de clic sur les lignes, mais seulement un dlement !
Rappel
Consultez la premire partie de ce livre pour un rappel sur la gestion du XML dans Flash. Le paragraphe qui prcde la gure 17-3 vous rappellera le fonctionnement de la proprit scroll.
337
Figure 17-2
Il nest pas ncessaire dutiliser un ascenseur pour contrler le dlement du texte. Seule la proprit scroll suft.
Chemin daccs : Manipulation du texte/TraitementTexte//FaireDelerTexteAscenseur.a louverture du chier, linterface donne limpression que la scne contient un ascenseur accompagn dune liste. Il sagit simplement dun texte dynamique dont le nom doccurrence est zoneDeTexte_inst et dont le nom de variable est zoneDeTexte. Lascenseur est en fait une occurrence reprsente par un simple rectangle vert sur une barre blanche, qui nest ni plus ni moins quune forme inactive servant de dcoration. Les deux ches situes aux extrmits de lascenseur sont deux occurrences intitules bt_monter et bt_ descendre. Lanimation ne contient quun seul script, mais avec de nombreuses parties. Ces dernires sont des gestionnaires qui soccupent de grer : 1. le chargement du chier .xml lorsque lutilisateur clique sur loccurrence intitule btChargeXML ; 2. le chargement du texte du chier Pays.txt ; 3. le dlement du texte.
338
Script
Pour cette animation, nous avons propos deux mthodes de chargement du contenu du texte dynamique. Voici ce que contient le chier intitul Pays.xml :
<Monde> <pays>Afghanistan</pays> <pays>Afrique du Sud</pays> <pays>Albanie</pays> <pays>Algrie</pays> <pays>Allemagne</pays> <pays>Andorre</pays> <pays>Angola</pays> <pays>Antigua-et-Barbuda</pays> <pays>Arabie saoudite</pays> <pays>Argentine</pays> <pays>Armnie</pays> <pays>Australie</pays> </Monde> Remarque
An de ne pas remplir inutilement deux pages, nous avons rtrci la liste pour vous la prsenter. Celle qui se trouve dans le chier Pays.xml est complte, elle contient les 194 noms de pays que compte le monde. Nous avons fait la mme chose pour le chier texte.
Voici ce que contient le chier intitul Pays.txt :

zoneDeTexte=Afghanistan<br>Afrique du Sud<br>Albanie<br>Algrie<br>Allemagne<br> Andorre<br>Angola<br>
Vous noterez que les sauts de lignes sont reprsents par la balise <br> qui sera interprte dans le texte dynamique. De ce fait, noubliez pas de cocher la case Rendre le texte au format HTML qui se trouve dans la palette Proprits et qui est reprsente par une balise vide < >. Le script sur la premire image-cl de la timeline principale nest pas trop long, et contient surtout des lignes de codes rptitives. Vous noterez que certains gestionnaires contiennent deux vnements car ils prvoient que lutilisateur relche aussi le clic en dehors de loccurrence sur laquelle il a cliqu.
1 btChargeXML.onPress = function() { 2 var chargementTexte = new XML(); 3 chargementTexte.load("Pays.xml"); 4 chargementTexte.ignoreWhite = true; 5 chargementTexte.onLoad = function() { 6 zoneDeTexte = ""; 7 nbrNoeuds = chargementTexte.childNodes[0].childNodes.length; 8 for (i=0; i<nbrNoeuds; i++) { 9 zoneDeTexte += this.childNodes[0].childNodes[i]+"<br>"; 10 } 11 }; 12 };
339
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
btChargeTexte.onPress = function() { zoneDeTexte = ""; loadVariablesNum("Pays.txt", 0); ascenseur._y = 65; }; // // // bt_descendre.onPress = function() { this.onEnterFrame = function() { coefAscenseur = (zoneDeTexte_inst.scroll/zoneDeTexte_inst.maxscroll); ascenseur._y = 65+(248*coefAscenseur); zoneDeTexte_inst.scroll++; }; }; bt_descendre.onRelease = bt_descendre.onReleaseOutside=function () { delete this.onEnterFrame; }; // bt_monter.onPress = function() { this.onEnterFrame = function() { coefAscenseur = (zoneDeTexte_inst.scroll/zoneDeTexte_inst.maxscroll); ascenseur._y = 65+(248*coefAscenseur); zoneDeTexte_inst.scroll--; }; }; bt_monter.onRelease = bt_monter.onReleaseOutside=function () { delete this.onEnterFrame; }; ascenseur.onPress = function() { startDrag(this, false, 354, 65, 354, 313); this.onEnterFrame = function() { zoneDeTexte_inst.scroll = zoneDeTexte_inst.maxscroll*((this._y-65)/248); }; }; ascenseur.onRelease = ascenseur.onReleaseOutside=function () { stopDrag(); delete this.onEnterFrame; };
Analyse
Lignes 1 12 : le code contenu dans ce gestionnaire sexcutera lorsque lutilisateur cliquera sur loccurrence intitule brChargeXML. Comme son nom lindique, la fonctionnalit de ce gestionnaire est de remplir la variable intitule zoneDeTexte. Lignes 2 4 : chargement du chier XML. Lignes 5 11 : gestionnaire qui va remplir la variable zoneDeTexte de loccurrence zoneDeTexte_Inst. Lignes 13 17 : ce gestionnaire sexcutera lorsque lutilisateur cliquera sur loccurrence intitule btChargeTexte charge de placer le contenu du chier texte dans la variable
340
zoneDeTexte. Nous vous conseillons de choisir cette technique dans le seul cas o lutilisa-
tion dun chier .xml serait impossible. Au cas o lascenseur ne serait pas en haut, il est replac sa position la plus haute lors du chargement du contenu du chier texte.
Rappel
Noubliez pas que le paramtre 0 de la mthode loadVariablesNum() correspond au niveau sur lequel se trouve la variable intitule zoneDeTexte du texte dynamique zoneDeTexte_inst. Elle est sur la scne, donc au niveau 0, cest--dire le _level0.
Avant de passer lanalyse des lignes 21 27, faisons le petit rappel suivant. Lorsque vous souhaitez faire dler le contenu dun texte dynamique ou de saisie, vous utilisez la proprit scroll associe au nom dinstance dun texte de saisie ou dynamique. La gure 173 nous explique que le contenu est comparable un bloc qui remonte et descend dun cran. Lunit de mesure tant la ligne. Si vous excutez donc linstruction suivante, zoneDeTexte_inst.scroll = 3;, cela signie que la troisime ligne du bloc de lignes vient se caler en haut du texte dynamique, faisant ainsi remonter le texte. La gure 17-3 illustre la ligne dinstruction que nous venons dexpliquer. Enn, la proprit maxscroll permet de connatre le nombre de dcalages quil est possible de faire avec la proprit scroll dans la zone de texte. Elle ne renvoie donc pas le nombre de lignes contenues dans un texte dynamique, mais le nombre total de lignes moins le nombre de lignes afches dans le texte dynamique. Ainsi, la gure 17-4 vous dmontre que le contenu dun texte de saisie ou dynamique ne peut jamais remonter trop haut, afchant ainsi du vide sous les dernires lignes.
Figure 17-3
La proprit scroll nest pas obligatoirement incrmente comme cest gnralement le cas dans les exemples. Elle peut galement tre rgle une valeur prcise.
341
Manipulation du texte Partie III Figure 17-4

Il est impossible de rgler la valeur de la proprit scroll avec une plus grande valeur que celle que renvoie maxscroll. Dans cet exemple, on constate que la 11e ligne ne pourra pas remonter plus haut, sinon nous obtiendrions une ligne vide en bas.
Lignes 21 27 : ce gestionnaire va grer le dlement du texte vers le haut et celui de lascenseur vers le bas. La position de ce dernier est calcule en fonction dun rapport qui est le suivant : la ligne actuellement en haut du texte dynamique par rapport au nombre total de lignes que contient le contenu du texte dynamique (ligne 23). Ligne 24 : le chiffre 65 correspond la position verticale de lascenseur par rapport au haut de la scne (_y). Le chiffre 248 reprsente le nombre de pixels sur lesquels peut se dplacer lascenseur. Cest la hauteur de la zone blanche moins la hauteur de lascenseur.
Remarque
Nous avons imbriqu un gestionnaire onEnterFrame an que le dlement puisse se faire de faon continue lors du clic maintenu.
Ligne 25 : dans ce cas prcis, la proprit scroll remonte le texte dune ligne, nous permettant ainsi de voir les lignes du bas du texte dynamique. Lignes 28 30 : lorsque lutilisateur relchera le clic sur loccurrence bt_descendre, et comme nous avions utilis le gestionnaire onEnterFrame, ce dernier doit tre annul.
342
Les lignes 32 41, relatives loccurrence bt_monter, ont la mme fonctionnalit que les lignes 21 30. Rfrez-vous donc ces explications. Lignes 42 51 : ces deux gestionnaires grent le dplacement de lascenseur dans sa zone de dlement. Cette dernire est dnie comme paramtre de la mthode startDrag(), cest--dire sur la 354e colonne de pixels du bord gauche da la scne. Lascenseur ne peut donc pas bouger horizontalement, mais uniquement verticalement entre la 65e ligne de pixel du haut de la scne et la 313e ligne. Lorsquun clic est effectu sur lascenseur, le gestionnaire onEnterFrame assure le dlement du texte en fonction de la position verticale de loccurrence ascenseur. Ligne 45 : nous vous rappelions que maxscroll correspond au dlement possible des lignes contenues dans le texte dynamique. Il faut donc appliquer un coefcient la valeur que nous renvoie maxscroll. Le calcul est le suivant : lorsque vous faites dler lascenseur, vous le positionnez verticalement une valeur prcise renvoye par this._y. Il faut retirer les 65 pixels qui se trouvent avant lascenseur lorsquil est en haut de son emplacement, pour ramener la plus petite valeur 0. Divisez ensuite par la valeur 248 qui correspond lchelle maximale, exprime en pixels, sur laquelle lascenseur va pouvoir dler.
Bogue ventuel
Nous vous avons expliqu les calculs ncessaires pour le dlement du texte avec les boutons et lascenseur, mais une mauvaise valuation des distances des occurrences de vos applications pourrait occasionner un dysfonctionnement de votre application. En effet, les dimensions de votre ascenseur et la hauteur de votre zone de texte ne seront pas toujours les mmes que celle de notre tude de cas. Passons prsent lanalyse de la deuxime animation.
Faire dler un texte avec ascenseur avec des lignes cliquables

Remarque
Il est vrai que pour cette animation, nous aurions pu utiliser un composant spcialement ddi lafchage des listes (List), nous avons fait le choix de vous proposer cette technique pour vous dmontrer quil est possible de dvelopper ses propres listes. De plus, le contenu de la liste peut tre format plus facilement. Ltude de cas suivante vous propose tout de mme lutilisation du composant List.
343
Figure 17-5
Les lignes sont cliquables car des occurrences de clips transparentes ont t ajoutes sur le texte dynamique. Noubliez pas dencapsuler la police utilise dans le texte dynamique ou de saisie, linterlignage variant dune typo lautre.
Chemin daccs : Manipulation du texte/TraitementTexte/FaireDelerTexte-Ascenseur2.a Il contient le mme contenu que ltude de cas prcdente, seuls le bouton de chargement du texte a t retir et un texte dynamique a t ajout. Son nom de variable est temoin. Cette animation contient galement un seul script avec de nombreuses parties. Ces dernires sont galement des gestionnaires qui soccupent de grer : 1. Le chargement du chier .xml lorsque lutilisateur clique sur l'occurrence intitule btChargeXML. 2. Le dlement du texte. 3. La cration doccurrences transparentes sur le texte an de dtecter les clics. Nous nanalyserons donc pas la totalit du script, car il reprend la plupart des lignes dinstructions de ltude de cas prcdente.
344
Script
Le script de cette animation est peine plus long et plus complexe que le prcdent, mais il fait appel un chier .xml diffrent dont le contenu est le suivant. Fichier intitul PaysPopulation.xml :
<Monde> <pays rang="1" <pays rang="2" <pays rang="3" <pays rang="4" <pays rang="5" <pays rang="6" </Monde> Remarque
Nous vous prsentons uniquement les six premires balises an de ne pas remplir inutilement 2 pages de texte comme dans ltude de cas prcdente.
population="1 306 313 812">Chine</pays> population="1 080 264 388">Inde</pays> population="295 734 134">Etats-Unis</pays> population="241 973 879">Indonsie</pays> population="186 112 794">Brsil</pays> population="162 419 946">Pakistan</pays>
Le script sur la premire image-cl de la timeline principale est le suivant :

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 var Style1 = new TextFormat(); Style1.tabStops = [160]; // btChargeXML.onPress = function() { var chargementTexte = new XML(); chargementTexte.load("PaysPopulation.xml"); chargementTexte.ignoreWhite = true; chargementTexte.onLoad = function() { zoneDeTexte = ""; nbrNoeuds = chargementTexte.childNodes[0].childNodes.length; for (i=0; i<nbrNoeuds; i++) { population = this.childNodes[0].childNodes[i].attributes.population; zoneDeTexte += this.childNodes[0].childNodes[i].childNodes[0] +"\t"+population+"<br>"; } zoneDeTexte_inst.setTextFormat(Style1); }; }; // bt_descendre.onPress = function() { this.onEnterFrame = function() { coefAscenseur = (zoneDeTexte_inst.scroll/zoneDeTexte_inst.maxscroll); ascenseur._y = 65+(248*coefAscenseur); zoneDeTexte_inst.scroll++; }; }; bt_descendre.onRelease = bt_descendre.onReleaseOutside=function () { delete this.onEnterFrame; };
345
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
// bt_monter.onPress = function() { this.onEnterFrame = function() { coefAscenseur = (zoneDeTexte_inst.scroll/zoneDeTexte_inst.maxscroll); ascenseur._y = 65+(248*coefAscenseur); zoneDeTexte_inst.scroll--; if(zoneDeTexte_inst.scroll==1) ascenseur._y = 65 }; }; bt_monter.onRelease = bt_monter.onReleaseOutside=function () { delete this.onEnterFrame; }; ascenseur.onPress = function() { startDrag(this, false, 354, 65, 354, 313); this.onEnterFrame = function() { zoneDeTexte_inst.scroll = zoneDeTexte_inst.maxscroll*((this._y-65)/248); }; }; ascenseur.onRelease = ascenseur.onReleaseOutside=function () { stopDrag(); if(zoneDeTexte_inst.scroll==1) ascenseur._y = 65 delete this.onEnterFrame; }; // // for (i=0; i<=16; i++) { _root.attachMovie("zoneDeClic", "zoneDeClic"+i, i); _root["zoneDeClic"+i]._x = 75; _root["zoneDeClic"+i]._y = 49+(i*17); _root["zoneDeClic"+i].identifiant = i; _root["zoneDeClic"+i]._alpha = false; _root["zoneDeClic"+i].onPress = function() { temoin = this.identifiant+zoneDeTexte_inst.scroll; }; }
Analyse
Comme nous lvoquions dans la description du chier de cette tude de cas, reportezvous la prcdente analyse pour des explications sur le script, mais revenons sur quelques lignes. Ligne 1 : une instance de la classe TextFormat() est cre an de pouvoir dnir un taquet de tabulation qui va nous servir afcher les informations placer dans le texte dynamique sur deux colonnes. Ligne 2 : tabStops est donc la proprit de la classe TextFormat() qui permet de contenir des valeurs correspondant aux positions des taquets de tabulations placer dans un texte dynamique ou de saisie.
346
Ligne 12 : une premire variable stocke lattribut population de chaque nud du document XML. Ligne 13 : par concatnation, chaque ligne du texte dynamique est dnie en utilisant : La valeur des nuds du document XML. Lexpression "\t" qui est un code permettant dajouter un renvoi de tabulation. La valeur de la variable prcdemment voque. Lexpression <br> qui est une balise qui sera interprte par le player Flash. Il sagit dun saut de ligne en HTML. Ligne 15 : la mise en forme du texte dynamique se fait par lutilisation de la mthode setTextFormat()en utilisant les proprits de linstance Style1 de la classe TextFormat().
Ligne 35 : nous avons ajout cette ligne dinstruction, car le dlement du texte sarrtait parfois la ligne deux alors que lascenseur tait bien en haut de sa zone de dlement. Lignes 55 63 : cette boucle for() permet de placer un clip de la bibliothque dont le nom de liaison est zoneDeClic. Ligne 55 : chaque occurrence place est nomme zoneDeClic1, zoneDeClic2, zoneDeClic3, etc. Il s'agit de rectangles de la largeur du texte dynamique et de la hauteur dune ligne de texte. Lignes 56 et 57 : ces occurrences sont places 75 pixels du bord gauche de la scne et intervalles rguliers partir de 49 pixels du haut de la scne. Le chiffre 17 correspond la hauteur dune ligne de texte. Ligne 58 : comme cela est expliqu en prambule de ce livre, il y a une diffrence entre le code excut au moment o la boucle sexcute elle-mme, et celui o le code dni pour chaque occurrence sexcutera (ligne 60). Il est donc ncessaire dassocier une valeur propre chaque occurrence. Ligne 59 : les occurrences sont rendues invisibles. Ligne 60 : un gestionnaire onPress est dni pour chaque occurrence duplique an dexcuter linstruction de la ligne 61.
Rappel
Le contenu du texte dynamique contient les nuds dun document .xml, qui ont pour valeurs des noms de pays et pour attributs les populations correspondantes. Aucun tri ne se fait, les nuds contiennent dj des valeurs tries.
Ligne 61 : lobjectif de cette application est de drouler un texte et de connatre le numro de ligne cliqu, numro correspondant galement au rang du pays cliqu. Il suft de connatre le dcalage actuel du texte dynamique et de ladditionner au numro correspondant la valeur de lidentiant dnie pour loccurrence clique.
347
Bogue ventuel
Si vous navez pas encapsul la police utilise dans le texte dynamique, un dcalage entre les lignes se fera peut-tre selon la machine de lutilisateur. Vous perdrez ainsi la correspondance entre les lignes et les occurrences dupliques.
Faire dler un texte dans un composant List

Cette tude de cas est trs intressante, car elle dmontre que faire dler du texte est une technique qui ncessite peu de code, mais un code nanmoins un peu complexe.
Figure 17-6
Le composant List propose de contenir et faire drouler du texte assez rapidement, mais avec un script un peu complexe.
Remarque
Les mthodes, proprits et vnements de la classe List sont trs nombreux, mais trois dentre eux sufsent remplir une occurrence du composant et grer le clic sur une ligne.
Chemin daccs : Manipulation du texte/TraitementTexte/FaireDelerTexteList.a Lanimation contient uniquement trois lments : 1. Une occurrence du composant List. 2. Un texte dynamique dont le nom de variable est temoin. 3. Une occurrence de clip sur laquelle lutilisateur cliquera pour charger le contenu du composant partir dun chier .xml.
348
Elle contient galement un seul script qui se compose de deux parties : 1. Des lignes dinstructions qui chargent le chier .xml et utilisent son contenu pour remplir le composant. 2. Dautres lignes dinstructions qui grent laction excuter lorsque lutilisateur cliquera sur une ligne de loccurrence du composant List.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 btChargeXML.onPress = function() { var chargementTexte = new XML(); chargementTexte.load("PaysPopulation.xml"); chargementTexte.ignoreWhite = true; chargementTexte.onLoad = function() { nbrNoeuds = chargementTexte.childNodes[0].childNodes.length; for (i=0; i<nbrNoeuds; i++) { nomPays = this.childNodes[0].childNodes[i].childNodes[0]; population = this.childNodes[0].childNodes[i].attributes.population; listePays.addItem({label:i+". "+nomPays, data:population}); } }; }; // listePays.change = function(laLigne) { temoin = laLigne.target.value; }; listePays.addEventListener("change", listePays);
Analyse
Lignes 1 12 : le code contenu dans ce gestionnaire sexcutera lorsque lutilisateur cliquera sur loccurrence intitule brChargeXML. Comme son nom lindique, la fonctionnalit de ce gestionnaire est de charger le contenu dun chier .xml, dans le composant List. Lignes 2 4 : chargement du chier .xml. Lignes 5 11 : gestionnaire qui va remplir loccurrence du composant List intitule listePays.
Ligne 8 : elle stocke temporairement dans une variable intitule nomPays la valeur de chaque nud du document . xml. Ligne 9 : elle stocke temporairement dans une variable intitule population la valeur de lattribut population de chaque nud du document .xml. Ligne 10 : grce la boucle for(), nous ajoutons loccurrence du composant List, autant de lignes quil y a de nuds dans le chier .xml. Vous pourrez tout de mme observer quune concatnation a t faite an dajouter un numro devant chaque ligne.
349
Analysons la structure ncessaire pour remplir une occurrence de composant List :

{label:"Texte figurant dans la liste",data:"Valeur renvoye sur le clic du texte"}
Les mots label et data ne peuvent tre changs, ils font partie de la structure. Une virgule est ncessaire pour sparer ces deux parties. La premire sert donc dnir le contenu de la liste, la deuxime associe une valeur la premire. Chaque partie est compose de deux sous parties : label et "Texte figurant dans la liste spares par deux points. Dans notre exemple, nous avons saisi des textes entre guillemets, mais cela pourrait tre des valeurs numriques, alphanumriques ou des noms de variables comme dans notre tude de cas. Lignes 15 17 : un gestionnaire est charg de surveiller le moindre changement de slection de ligne. Si tel est le cas, la variable temoin contient la valeur (data et non label) correspondant la ligne clique. Ligne 18 : tant que cette ligne dinstruction nest pas excute, la surveillance de la ligne 15 ne peut dmarrer. Cette tude de cas dmontre quil est trs rapide de remplir et programmer une zone de texte cliquable, mais cela reste nanmoins assez complexe pour un dbutant de comprendre la structure et la syntaxe ncessaires pour grer une occurrence de composant List.
Bogues ventuels
Les bogues peuvent tre nombreux car nous nous retrouvons dans cette tude de cas, face des lignes dinstructions un peu complexes. La dernire ligne du script est donc susceptible de contenir de nombreuses erreurs.
Raliser un systme de mot de passe

En introduction cette tude de cas, nous prciserons quil est conseill de ne pas inscrire dans le script, le mot de passe et le login comparer avec ceux qui sont saisis par lutilisateur. En effet, il est trs simple de trouver sur Internet des logiciels capables de lire le contenu dun chier .swf. Donc, les informations contenues dans ces chiers ne sont pas scurises. Dans ce cas, nous vous conseillons fortement de comparer la saisie de lutilisateur avec des donnes provenant dune base de donne sur un serveur. Nous vous proposons donc dans cette tude de cas, danalyser la structure que doit avoir une animation Flash pour proposer lutilisateur de sidentier.
Rappel
Nutilisez pas les mthodes toUpperCase() et toLowerCase() si vous souhaitez que les textes de saisie soient sensibles la casse.
350
Traitement du texte et des variables Chapitre 17 Figure 17-7

Lutilisateur ne pourra cliquer sur le bouton Valider qu partir du moment o il aura saisi le bon identiant et le bon mot de passe.
Chemin daccs : Manipulation du texte/TraitementTexte/MotDePasse.a Deux textes de saisie ont t placs sur scne. Leurs noms dinstances et de variables sont respectivement identifiant_inst, identifiant, motDePasse_inst et motDePasse. Une occurrence de clip est place en bas droite des textes de saisie, son nom est btValidation. Lanimation ne contient quun seul script trs simple de comprhension.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 }; stop(); // btValidation._alpha = 25; btValidation.onPress = function() { gotoAndStop(3); }; // btValidation.enabled = false; // motDePasse_inst.onChanged = identifiant_inst.onChanged=function () { if (identifiant == "David" && motDePasse == "Tardiveau") { btValidation.enabled = true; btValidation._alpha = 100; } else { btValidation.enabled = false; btValidation._alpha = 25; }
Attention
Pourquoi avons-nous plac la commande prevFrame() sur la deuxime image-cl de la timeline principale ? Lorsque la tte de lecture est bloque sur une image, il vous suft de faire un clic droit sur lanimation et de slectionner la commande En avant. La tte de lecture continue, ne tenant ainsi pas compte de la commande stop(). Vous pouvez dire au revoir lintrt de votre mot de passe.
351
Analyse
Ligne 1 : la tte de lecture est bloque pour empcher la lecture des autres images qui composent lanimation. Ligne 3 : pour donner limpression que le seul bouton de validation que contient la scne nest pas cliquable, la transparence de cette occurrence est rgle 30 % de son opacit dorigine. Lignes 4 6 : un clic sur cette occurrence permet de passer limage 3. O et comment est gr le mot de passe si un script propose dj de dplacer la tte de lecture sur limage 3 ? La ligne 8 dsactive tout de suite le gestionnaire aprs sa dnition. Lignes 10 18 : un autre gestionnaire surveille la saisie de lutilisateur. Ds que ce dernier ajoute ou supprime un caractre dans lun des deux textes dynamiques dont les noms doccurrences sont motDePasse_inst et identifiant_inst, un test est effectu. Ligne 11 : ce test compare le contenu des variables de ces textes dynamiques. Si la saisie de lutilisateur correspond aux deux expressions attendues (David et Tardiveau), le bouton de validation, cest--dire la seule occurrence de clip disponible sur la scne, est rendue opaque et cliquable.
Raliser un module de recherche

Lune des tudes de cas de ce livre vous propose une mise en forme proche de celle que vos pourriez faire dans un logiciel de traitement de texte. Mais il lui manque une fonction, la recherche. Cest ce que nous vous proposons dans cette animation. La technique est extrmement simple et sappuie une fois encore sur la mthode indexOf().
Figure 17-8
La recherche dun mot se fait simplement, mais sa slection pour sa surbrillance est un peu plus complique.
352
Rappel
En annexe, la section indexOf() ou recherche dune chane vous propose un rappel sur le fonctionnement de la mthode indexOf().
Chemin daccs : Manipulation du texte/TraitementTexte/ModuleRecherche.a Un texte dynamique a t plac sur la scne, mais il pourrait sagir dun texte de saisie. Ses noms doccurrence et de variable sont respectivement zoneDeTexte_inst et motRecherche_inst. Loccurrence sur laquelle lutilisateur devra cliquer pour rechercher le mot de son choix sintitule btSuivant. Le script de cette animation est extrmement simple et structur : 1. Un premier gestionnaire surveille la saisie du mot recherch. 2. Un deuxime contient le cur du code charg deffectuer la recherche.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 motRecherche_inst.onChanged = motRecherche_inst.onSetFocus=function () { continuerRecherche = true; debutRecherche = 0; nbrMotsTouves = 0; }; btSuivant.onPress = function() { if (continuerRecherche) { temoin = _root.zoneDeTexte.indexOf(motRecherche, debutRecherche); if (temoin>=0) { Selection.setFocus(_root.zoneDeTexte_inst); Selection.setSelection(temoin, temoin+motRecherche.length); continuerRecherche = true; //zoneDeTexte_inst.replaceSel(motRemplace); debutRecherche = temoin+motRecherche.length; nbrMotsTouves++; } else { continuerRecherche = false; motRecherche = nbrMotsTouves+" occurrence(s) trouve(s)"; } } };
Analyse
Ligne 1 : ds que lutilisateur ajoutera ou supprimera un caractre dans le texte de saisie dont le nom doccurrence est motRecherche_inst, les lignes dinstructions dans le gestionnaire onChanged sexcuteront.
353
Lignes 2 4 : trois variables sont initialises an de conditionner le droulement de la recherche. Nous reviendrons sur elles un peu plus loin dans ces explications. Lignes 6 21 : lorsque lutilisateur cliquera donc sur loccurrence btSuivant, deux tests imbriqus vont sexcuter. Ligne 7 : ce premier test sassure que la variable intitule continuerRecherche vaut true. Elle vaut false si aucun mot na t trouv. Ligne 8 : la variable temoin stocke le rsultat de la recherche du mot saisi par lutilisateur. Pourquoi ces deux paramtres motRecherche et debutRecherche ? Commenons par rappeler que le premier correspond la chane de caractres recherche. Il sagit de la variable motRecherche de loccurrence motRecherche_inst qui se trouve sur la scne. Le deuxime paramtre est optionnel, mais indispensable dans notre application. En effet, notre application repose sur des recherches successives. Il est donc important de prciser le dbut dune nouvelle recherche lorsquun premier mot a t trouv. Cest donc le rle de la ligne 14 qui prcise que le nouveau dbut de la prochaine recherche, correspond au caractre plac derrire le mot trouv. La variable temoin contient la valeur correspondant lindex du premier caractre du mot trouv. Ligne 9 : un nouveau test permet de sassurer que le rsultat de la ligne 8 est suprieur -1, signiant quune chane de caractres a t trouve. Ligne 10 : on prcise que loccurrence sur laquelle une slection va tre applique est zoneDeTexte_inst, le texte dynamique sur lequel porte la recherche. Ligne 11 : on peut alors procder la slection en spciant un caractre de dbut et un autre de n. On utilise la valeur renvoye par la mthode indexOf() et la longueur du mot recherch.
Remarque
La mthode selection() de la classe du mme nom ncessite deux paramtres, le deuxime est un index et non une longueur de chane.
Ligne 12 : la variable continuerRecherche indique quil est possible dexcuter nouveau le gestionnaire appliqu loccurrence btSuivant au prochain clic sur cette dernire. Ligne 13 : dans lventualit dune fonction de Rechercher/Remplacer, nous avons laiss la ligne dinstruction quil serait ncessaire dutiliser pour procder au remplacement de la slection. Il faudrait juste ajouter un texte dynamique dont le nom de variable serait motRemplace. Ligne 14 : on spcie le point de dpart de la prochaine recherche en stockant dans la variable debutRecherche utilise comme paramtre de la mthode indexOf(), lindex dont le calcul correspond au dernier trouv, auquel on ajoute la longueur de la chane. Ligne 15 : une variable stocke le nombre doccurrences trouves.
354
Lignes 16 20 : si aucun mot na t trouv au moment o lutilisateur a cliqu sur loccurrence btSuivant, on interdit alors quil puisse nouveau cliquer dessus en rglant la valeur de la variable continuerRecherche sur false. On afche alors le nombre doccurrences trouves.
Remarque
Le dernier terme occurrences na rien voir avec celles de Flash, c'est--dire la reprsentation graphique dun symbole sur la scne, il sagit de nombre dexemplaires de mots trouvs.
Bogues ventuels
Les bogues relatifs cette tude de cas sont les suivants : Risque derreur ligne 11 pour le deuxime paramtre de la mthode. Il sagit dun index et non dune longueur. Vous devez penser dnir un nouvel index pour dmarrer une nouvelle recherche aprs la dernire occurrence trouve (ligne 14).
Rendre un texte cliquable

Les techniques qui permettent de rendre un texte cliquable sont nombreuses. Cest pourquoi nous avons dvelopp une simple animation qui na pas t scnarise, et qui propose uniquement de cliquer sur des liens.
Chemin daccs : Manipulation du texte/TraitementTexte/TexteCliquable.a Cette animation a la particularit de ne possder que deux textes dynamiques et un texte statique, car certains autres vont tre crs dynamiquement avec la mthode createTextField(). Le premier texte dynamique a pour nom de variable zoneTexteHTML. Le deuxime a pour nom dinstance texteCliquable_inst et texteCliquable pour nom de variable. Le seul et unique script plac sur la premire image-cl de la timeline principale se dcompose en plusieurs parties, car nous allons rendre cliquables diffrents textes selon diffrentes manires : 1. Utilisation dune balise <a hrf> dans un texte HTML. 2. Utilisation de la proprit url de la classe TextFormat(). 3. Cration dynamique dun texte sur la scne puis nouveau utilisation de la classe TextFormat().
355
Script
1 zoneTexteHTML = "Si vous cliquez sur <b><a href='http://www.yazo.net'>cette adresse</a> </b>, vous trouverez les bonnes infos."; 2 // 3 texteCliquable = "Cliquez sur ce texte"; 4 var style1 = new TextFormat(); 5 style1.url = "http://www.yazo.net"; 6 style1.font = "Verdana"; 7 style1.bold = true; 8 style1.size = 14; 9 texteCliquable_inst.setTextFormat(style1); 10 // 11 nomsDesSites = ["google", "yahoo", "apple", "voila", "lycos"]; 12 for (i=0; i<nomsDesSites.length; i++) { 13 _root.createTextField("site"+nomsDesSites[i], i, 50, 150+(i*20), 200, 25); 14 _root["site"+nomsDesSites[i]].html = true; 15 nomDuChamps = "http://www."+nomsDesSites[i]+".fr"; 16 var style2 = new TextFormat(); 17 style2.font = "Verdana"; 18 style2.size = 12; 19 style2.url = nomDuChamps; 20 _root["site"+nomsDesSites[i]].text = nomDuChamps; 21 _root["site"+nomsDesSites[i]].autoSize = true; 22 _root["site"+nomsDesSites[i]].setTextFormat(style2); 23 } 24 // 25 delete style2; 26 delete style1;
Le premier lien qui gure en haut de la scne na pas t dni en ActionScript. Il vous suft simplement de slectionner un ou plusieurs caractres dans un texte statique, saisissez alors lURL correspondante dans la palette Proprits (gure 17-9).
Figure 17-9
Il est trs simple dattribuer un lien un texte statique ou dynamique. Une zone de texte situe dans la palette Proprits est prvue cet effet.
Analyse
Ligne 1 : le premier texte dynamique est rempli de lexpression saisie entre guillemets. Cette dernire contient des balises qui vont tres interprtes par le Flash Player, car le
356
texte dynamique a la case Rendre le texte au format HTML coche. Ce bouton se trouve au milieu de la palette Proprits, il est reprsent par une balise vide < >. Ligne 3 : le deuxime texte dynamique est galement rempli de lexpression suivante, saisie entre guillemets. Ligne 4 : une instance de la classe TextFormat() est cre an que des proprits (lignes 5 8) lui soient dnies. Ligne 9 : une fois les proprits dnies, on peut alors les appliquer loccurrence
texteCliquable_inst.
Ligne 11 : les entres de ce tableau intitul nomsDesSites vont servir remplir le contenu des textes qui vont tre crs dynamiquement la ligne 13. Lignes 12 23 : une boucle va crer autant de textes dynamiques que le tableau contient dentres. Ligne 13 : sur la scne, le texte cr porte le nom construit partir de la concatnation de lexpression site et de la valeur de lune des entres du tableau. Le niveau de chaque occurrence cre quivaut la valeur de la variable locale i. Les textes crs dynamiquement sont placs 50 pixels du bord gauche de la scne. Le paramtre suivant sert positionner verticalement les occurrences. Enn, les deux derniers paramtres correspondent la largeur et la hauteur du texte. Ligne 14 : sans cette ligne dinstruction, la balise <a href> ne sera pas reconnue et les textes ne seront donc pas cliquables. Ligne 15 : le texte qui va tre plac dans le texte cr dynamiquement est temporairement stock dans la variable nomDuChamps. Nous utilisons une fois encore une concatnation pour la construction du contenu du texte. Lignes 16 19 : comparables aux lignes 4 8, elles vont permettre de mettre en forme les textes crs dynamiquement. Ligne 20 : cest cette ligne dinstruction qui place le contenu du texte dynamique. Ligne 21 : cette ligne dinstruction permet ensuite dajuster la largeur de la zone de texte la largeur de son contenu. Ligne 22 : les lignes 16 19 avaient dni le style appliquer aux textes dynamiques, la mthode setTextFormat() excute la mise en forme. Lignes 25 et 26 : ces deux dernire lignes sont facultatives, elles permettent tout simplement de supprimer les deux instances de mise en forme qui ne servent plus.
Bogue ventuel
Il arrive assez souvent quon dnisse lURL dun texte, mais quon oublie de rgler la proprit HTML sur true (ligne 14).
357
Grer les tabulations

Pour grer les tabulations dans un texte dynamique ou de saisie, vous devez avoir prpar au pralable les lignes qui vont tre insres. Elles doivent en effet contenir des renvois de tabulation. Une fois encore, deux solutions soffrent nous pour placer du texte sur la scne de Flash, nous avons retenu les deux techniques, celle des listes et celle dun chier .xml.
Figure 17-10
Le formatage dun texte en colonne se fait trs simplement, malheureusement, peu de personnes savent grer les tabulations dans un texte..
Rappel
Si la gestion du format .xml dans une application Flash vous pose problme, noubliez pas de consulter la premire partie de ce livre qui traite de ce sujet.
Chemin daccs : Manipulation du texte/TraitementTexte/Tabulations.a Cette animation ne contient que deux textes dynamiques qui auraient pu tres crs dynamiquement. Les noms doccurrences et de variables sont respectivement zoneDeTexte_inst, zoneDeText2_inst, zoneDeTexte et zoneDeTexte2. Lanimation ne contient quun seul script qui se compose de quatre parties bien distinctes : 1. Remplissage du texte dynamique zoneDeTexte_inst. 2. Mise en forme de ce texte dynamique. 3. Remplissage du texte dynamique zoneDeTexte2_inst. 4. Mise en forme de ce texte dynamique.
358
Script
Pour le remplissage du deuxime texte dynamique intitul zoneDeTexte2_inst, un chier .xml intitul villes.xml a t utilis, voici son contenu :
1 <?xml version='1.0' encoding='utf-8'?> 2 <Monde> 3 <Pays Nom="France"> 4 <Capitale>Paris</Capitale> 5 <Regime>Rpublique</Regime> 6 <Monnaie>Euro</Monnaie> 7 </Pays> 8 <Pays Nom="Angleterre"> 9 <Capitale>Londres</Capitale> 10 <Regime>Monarchie</Regime> 11 <Monnaie>Livre</Monnaie> 12 </Pays> 13 <Pays Nom="Belgique"> 14 <Capitale>Bruxelles</Capitale> 15 <Regime>Monarchie</Regime> 16 <Monnaie>Euro</Monnaie> 17 </Pays> 18 <Pays Nom="Inde"> 19 <Capitale>New Delhi</Capitale> 20 <Regime>Rpublique</Regime> 21 <Monnaie>Roupie</Monnaie> 22 </Pays> 23 <Pays Nom="Japon"> 24 <Capitale>Tokyo</Capitale> 25 <Regime>Monarchie</Regime> 26 <Monnaie>Yen</Monnaie> 27 </Pays> 28 <Pays Nom="Chine"> 29 <Capitale>Pkin</Capitale> 30 <Regime>Rpublique</Regime> 31 <Monnaie>Renminbi</Monnaie> 32 </Pays> 33 <Pays Nom="Canada"> 34 <Capitale>Ottawa</Capitale> 35 <Regime>Monarchie</Regime> 36 <Monnaie>Dollar canadien</Monnaie> 37 </Pays> 38 </Monde>
Le script sur la premire image-cl de la timeline principale est le suivant :

1 2 3 4 5 6 var pays = ["France", "Espagne", "Angleterre"]; var capitales = ["<b>Paris</b>", "Madrid", "Londres"]; var monnaies = ["Euro", "Euro", "Livre"]; zoneDeTexte = "<b>Pays\tCapitales\tMonnaies\n\n</b>"; for (i=0; i<pays.length; i++) { zoneDeTexte += pays[i]+"\t"+capitales[i]+"\t"+monnaies[i]+newline;
359
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
} styleTaquets = new TextFormat(); styleTaquets.tabStops = [100, 200]; zoneDeTexte_inst.setTextFormat(styleTaquets); // chargementXML = new XML(); chargementXML.load("villes.xml"); chargementXML.ignoreWhite = true; chargementXML.onLoad = function() { var racine = this.firstChild; var enregistrements = racine.childNodes.length; zoneDeTexte2 = "<b>Pays\tCapitales\tRgimes\tMonnaies\n\n</b>"; for (i=0; i<enregistrements; i++) { pays = racine.childNodes[i].attributes.Nom; capitale = racine.childNodes[i].childNodes[0].firstChild; regime = racine.childNodes[i].childNodes[1].firstChild; monnaie = racine.childNodes[i].childNodes[2].firstChild; zoneDeTexte2 += pays+"\t"+capitale+"\t"+regime+"\t"+monnaie+newline; } // styleTaquets2 = new TextFormat(); styleTaquets2.tabStops = [100, 220, 330]; zoneDeTexte2_inst.setTextFormat(styleTaquets2); };
Analyse
Lignes 1 3 : lorsque nous allons utiliser les premires lignes de code du seul script de cette animation, nous aurons besoin de tableaux pour remplir le premier tableau (voir la gure 17-10). Chacune de ces trois premires lignes reprsente donc le contenu des colonnes Pays, Capitales et Monnaies. Ligne 4 : rappelons que nous avons un texte dynamique sur la scne dont le nom de variable est zoneDeTexte. En excutant cette ligne dinstruction, la premire ligne du tableau est donc remplie. Elle contient des balises qui vont tres interprtes ainsi que des codes de renvois de tabulation. Il faudra attendre lexcution de la ligne 10 pour que la mise en forme se fasse. Lignes 5 7 : la boucle nous permet de parcourir toutes les entres des trois tableaux, et de les placer dans le texte dynamique. Une ligne ajoute est compose dune concatnation comprenant trois entres (issues des trois tableaux) spares par un code de renvoi de tabulation \t. Le mot-cl newline permet de prparer la prochaine insertion la ligne. Lignes 8 10 : une premire instance est cre partir de la classe TextFormat(). Cest uniquement partir de ce moment-l quil est possible de dnir des taquets de tabulation dans un texte dynamique ou de saisie. Il faut ensuite utiliser la proprit tabStops et lui associer un tableau comprenant des valeurs qui seront utilises pour placer les taquets.
360
Voil, ces premires lignes du script auront permis de remplir le premier tableau. Nous allons prsent passer au deuxime. Lignes 12 14 : le chier intitul villes.xml est charg dans la mmoire vive de lordinateur. Ligne 16 : lorsque le chargement est termin (tat indiqu par le gestionnaire de la ligne 15), une premire variable stocke la racine du chier .xml. Ligne 17 : une deuxime variable contient le nombre de nuds dans le document .xml. Ligne 18 : rappelons que nous avons un texte dynamique sur la scne, dont le nom de variable est zoneDeTexte2. En excutant cette ligne dinstruction, la premire ligne du tableau est donc remplie. Elle contient des balises qui vont tres interprtes, ainsi que des codes de renvois de tabulation. Il faudra attendre lexcution de la ligne 29 an que le formatage du texte se fasse. Lignes 19 25 : des lignes 5 7, il tait trs simple de remplir les colonnes du premier tableau. Cela ne va pas tre plus difcile pour le deuxime tableau. En revanche, si nous procdions lexcution dune seule ligne dinstruction, elle serait extrmement longue. Lignes 20 23 : nous prfrons donc utiliser quatre variables qui vont stocker temporairement les contenus des nuds. Ligne 24 : elle excute le remplissage du tableau comme la ligne 6 la fait. Lignes 27 29 : elles assurent la mme fonction de mise en forme du texte que les lignes 8 10.
Bogue ventuel
Cette animation ne prsente pas de difcults particulires, le seul risque derreur est de se tromper dans la valeur spcie pour les childNodes[]. Nous allons maintenant vous prsenter un certain nombre danimations qui vous proposent des effets sur le texte. Il ne sagit pas dtudes de cas comme les autres, car la plupart dentre elles ne contiennent aucune occurrence sur la scne. Nous vous prsenterons donc uniquement les scripts accompagns de leurs analyses avec une description rapide de la timeline de chaque chier.
Remarque
Nous navons pas inclus de copies dcrans dans cette partie du livre, car les effets ncessitent la lecture des animations.
Rappel
Si la manipulation doccurrences cres dynamiquement vous pose problme, consultez lavant-propos de ce livre.
361
Afchage en mode Telex

Chemin daccs : Manipulation du texte/TraitementTexte/Telex.a Seul un texte dynamique dont le nom de variable est zoneDaffichage, est prsent sur la scne. La bibliothque ne contient aucun symbole.
Script
1 lachaine = new String("La matrice n'a pas trouv votre identifiant,\nvous avez une chance de ne pas tre tax\nau prochain recensement."); 2 i = 0; 3 function telex() { 4 i++; 5 zoneDaffichage = lachaine.substring(0, i)+"_"; 6 if (i>=lachaine.length) { 7 clearInterval(lancer); 8 zoneDaffichage = lachaine.substring(0, lachaine.length); 9 } 10 } 11 lancer = setInterval(telex, 50);
Analyse
Ligne 1 : nous instancions la classe String() an dobtenir loccurrence intitule lachaine qui va nous servir de rservoir de caractres. Ce sont ces derniers qui vont safcher les uns aprs les autres en mode Telex. Ligne 2 : une premire variable est initialise 0. Elle va nous servir compter les caractres de linstance lachaine. Rappelons que le premier caractre dune chane porte lindex 0 et non 1. Ligne 3 : cette fonction va tre utilise la ligne dinstruction 11, cest elle qui contient le cur du script. Ligne 4 : an dafcher les caractres les uns aprs les autres, rappelons que la variable i va nous aider compter. Ligne 5 : la variable zoneDaffichage va stocker chaque itration (lorsque i change de valeur), un caractre de linstance lachaine. La concatnation avec le signe + permet simplement dobtenir le caractre underscore derrire le caractre extrait avec la mthode substring().
362
Ligne 6 : un test vrie si tout le contenu de loccurrence lachaine a t afch sur la scne, en sassurant que i a une valeur suprieure au nombre de caractres contenus dans loccurrence lachaine. Ligne 7 : il est important darrter le processus de rptition qui a permis dobtenir cet afchage squentiel. Ligne 8 : elle permet de retirer le caractre underscore la n du texte qui se trouve sur la scne. Ligne 11 : cest cette fonction qui dclenche lafchage du texte obtenu grce aux lignes 4 9.
Rappel
Le paramtre 50 de la fonction setInterval() permet de prciser le laps de temps entre deux rptitions. 1 000 quivaut 1 seconde.
Bogue ventuel
Vous devez penser annuler lexcution de la fonction setInterval(), cest le rle de la ligne 7, sinon, vous faites tourner un traitement inutilement.
Afchage en mode Aroport

La scne ne contient rien, la bibliothque ne possde quun symbole de type clip dont le nom de liaison est caractere. Ce clip contient lui-mme un texte dynamique dont le nom de variable est lettreHasard.
Chemin daccs : Manipulation du texte/TraitementTexte/Aeroport.a Prcisons que cette animation contient deux scripts. Un sur la premire image-cl de la timeline principale de lanimation, et un autre sur la premire image-cl du clip.
Script
Script de limage-cl 1 de la timeline principale :
1 _global.alphabet = new String(" ABCDEFGHIJKLMNOPQRSTUVWXYZ',."); 2 var chaineAaffcicher = String("LE NORD DE LA PLAGE EST PLUS CHAUD"); 3 for (i=0; i<chaineAaffcicher.length; i++) { 4 _root.attachMovie("caractere", "c"+i, i);
363
5 6 7 8 }
_root["c"+i]._x = 50+(i*13); _root["c"+i]._y = 50; _root["c"+i].vCaractere = chaineAaffcicher.substr(i, 1);
Script de limage-cl 1 du clip :

1 function afficherCaracteres() { 2 lettreHasard = alphabet.substr(random(alphabet.length), 1); 3 if (vCaractere.toUpperCase() == lettreHasard.toUpperCase()) { 4 clearInterval(lancerAffichage); 5 } 6 } 7 var lancerAffichage = setInterval(afficherCaracteres, 80);
Analyse
Script de limage-cl 1 de la timeline principale de lanimation
Ligne 1 : comme dans lexemple prcdent, nous instancions la classe String() an dobtenir loccurrence intitule alphabet qui va nous servir de rservoir de caractres. Ligne 2 : nous stockons dans une variable intitule chaineAafficher, une chane de caractres, celle que nous souhaitons voir safcher la n de lanimation. Lignes 3 8 : cette boucle va permettre de placer sur la scne, lunique symbole de notre animation autant de fois quil y a de caractres dans lexpression "LE NORD DE LA PLAGE EST PLUS CHAUD". Les caractres susceptibles de safcher dans les occurrences obtenues sont ceux de la liste alphabet. Ligne 4 : rappelons que le nom de liaison de notre symbole est caractere. Ce dernier est plac sur la scne grce la mthode attachMovie(). Ligne 5 : la largeur dune occurrence est de 14,8 pixels. Nous plaons donc les occurrences sur la scne, espaces de 13 pixels. Lorsque i vaut 0, le premier caractre est plac 50 pixels du bord gauche de la scne ; lorsque i vaut 1, loccurrence suivante est place 63 pixels du bord gauche de la scne, etc. Ligne 6 : toutes les occurrences sont alignes 60 pixels du haut de la scne. Ligne 7 : nous dnissons une variable pour chaque occurrence place, et nous linitialisons avec une valeur correspondant au caractre quil faut nir par afcher. La premire occurrence place sur la scne mmorise quil faut quelle nisse par afcher le premier caractre de la chane "LE NORD DE LA PLAGE EST PLUS CHAUD".
Script de limage-cl 1 de la timeline du clip

Nous aurions pu placer les quelques lignes de code ci-dessous la suite du premier script, cela aurait dailleurs t plus judicieux, mais le script complet vous aurait sembl plus complexe. L, nous obtenons deux script assez simples comprendre.
364
Lignes 1 6 : la fonction afficherCaracteres() va tre excute en continu intervalles rguliers grce la ligne 7 de ce script. Ligne 2 : rappelons que le clip dans lequel se trouve ce script, contient un texte dynamique dont le nom de variable est lettreHasard. Un caractre extrait de la chane contenue dans linstance alphabet va donc safcher alatoirement, nous allons donc obtenir leffet escompt. Ligne 3 : un test vrie si le caractre afch alatoirement correspond au caractre stock dans la variable vCaractere que nous avions dnie la ligne 7 du script prcdent. Ligne 4 : si le test prcdent savre, il faut alors arrter lafchage alatoire des caractres dans la variable lettreHasard. Ligne 7 : cest cette ligne dinstruction qui dmarre lafchage alatoire des caractres dans le clip.
Rappel
Le paramtre 80 de la fonction setInterval() permet de prciser le laps de temps entre deux rptitions. 1 000 quivaut 1 seconde.
Bogues ventuels
Le bogue ventuel est relatif la valeur que vous prciseriez comme premier paramtre de la mthode substr(). Gardez toujours lesprit que le premier caractre dune chane porte le numro dindex 0. Par ailleurs, rappelons que la comparaison entre deux caractres ou deux chanes se fait avec la mme casse, cest pourquoi nous utilisons la mthode toUpperCase() qui bascule un texte en majuscules.
Afchage de lettres glissant sur la scne

Il ny a rien sur la scne ni dans la bibliothque.
Chemin daccs : Manipulation du texte/TraitementTexte/LettresGlissent.a Lunique script suivant suft raliser cette animation.
365
Script
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 var chaineAafficher = String("LE NORD DE LA PLAGE EST PLUS CHAUD"); style1 = new TextFormat(); style1.font = "Verdana"; style1.bold = true; // for (i=0; i<chaineAafficher.length; i++) { _root.createEmptyMovieClip("lettre"+i, i); _root["lettre"+i]._x = 50+(i*13); _root["lettre"+i]._y = 50; _root["lettre"+i].createTextField("caractere", 1, 0, 0, 80, 80); _root["lettre"+i].caractere.text = chaineAafficher.substr(i, 1); _root["lettre"+i].caractere.setTextFormat(style1); _root["lettre"+i].destinationX = _root["lettre"+i]._x; _root["lettre"+i].destinationY = _root["lettre"+i]._y; _root["lettre"+i]._x = random(1000)-200; _root["lettre"+i]._y = random(830)-200; _root["lettre"+i]._xscale = random(2000)+50; _root["lettre"+i]._yscale = random(2000)+50; _root["lettre"+i].onEnterFrame = function() { distXrestante = this.destinationX-this._x; distYrestante = this.destinationY-this._y; echelleXrestante = 100-this._xscale; echelleYrestante = 100-this._yscale; this._x += (distXrestante)*0.2; this._y += (distYrestante)*0.2; this._xscale += (echelleXrestante)*0.1; this._yscale += (echelleYrestante)*0.1; bonneEchelleX = Math.abs(this._xscale) == 100; bonneEchelleY = Math.abs(this._yscale) == 100; if (Math.abs(distXrestante)<1 && Math.abs(distYrestante)<1 && bonneEchelleX && bonneEchelleY) { this._x = this.destinationX; this._y = this.destinationY; this._xscale = 100; this._yscale = 100; delete this.onEnterFrame; } }; }
Analyse
Ligne 1 : comme dans lexemple prcdent, nous stockons dans une variable intitule chaineAafficher, une chane de caractres, celle que nous souhaitons voir safcher la n de lanimation.
366
Lignes 2 4 : cration dune instance de la classe TextFormat() pour la mise en forme des caractres. Ligne 6 : cette boucle va placer autant de clips sur la scne quil y a de caractres contenus dans la chane "LE NORD DE LA PLAGE EST PLUS CHAUD". Ligne 7 : les occurrences cres sur la scne vont porter les noms lettre0, lettre1,
lettre2, etc.
Ligne 8 : nous plaons toutes les occurrences sur la scne, espaces de 13 pixels. Lorsque i vaut 0, le premier caractre est plac 50 pixels du bord gauche de la scne ; lorsque i vaut 1, loccurrence suivante est place 63 pixels du bord gauche de la scne, etc. Ligne 9 : verticalement, les occurrences sont places 50 pixels du haut de la scne. Ligne 10 : lintrieur des occurrences places sur la scne, un texte est cr dynamiquement grce la mthode createTextField(). Le nom doccurrence donn ces textes peut tre identique, car ils ne se trouvent pas sur la mme timeline. Ligne 11 : nous dnissons un contenu pour chaque texte de toutes les occurrences sur la scne. Il sagit dun caractre extrait de la chane contenue dans la variable chaineAafficher. La premire occurrence cre sur la scne va contenir le caractre L . La deuxime va contenir la lettre E , ainsi de suite, jusqu former la phrase de la premire ligne dinstruction. Ligne 12 : le style cr aux lignes 2 4 est appliqu aux textes. Lignes 13 et 14 : pour chaque occurrence, nous dnissons deux variables qui vont contenir ses coordonnes actuelles sur la scne, et qui vont galement servir de point de destination. Nous reviendrons sur ce point plus loin dans ces explications. Lignes 15 et 16 : aprs avoir mmoris leurs places, nous pouvons prsent disposer les occurrences de faon alatoire nimporte o sur la scne. Comment sommes-nous arrivs proposer ces valeurs ? Rappelons que la scne mesure 600 pixels de largeur. La valeur minimale quil est possible dobtenir avec random(1000) est 0. La valeur maximale est 999. Si nous soustrayons 200 au rsultat, la plus petite valeur devient alors -200, et la plus grande 799. Donc, les occurrences peuvent tre places 200 pixels en dehors des limites de la scne. Lignes 17 et 18 : nous procdons aux mmes rglages pour les chelles verticales et horizontales des caractres. Ligne 19 : nous dnissons un gestionnaire pour chaque caractre, an quil excute en continu le code des lignes 20 35. Ligne 20 : nous calculons la distance qui spare un caractre de sa place de destination (mmorise la ligne 13). Nous calculons 10 % de cette distance. Nous demanderons ensuite loccurrence de se dplacer horizontalement dautant de pixels que le rsultat de ce calcul. Comprenez bien que la distance parcourir va tre de plus en plus petite, le mouvement va donc se faire avec un ralenti pour les dernires distances.
367
Ligne 21 : verticalement, nous procdons au mme calcul que celui de la ligne prcdente (ligne 20). Lignes 22 et 23 : nous effectuons les mmes calculs et les mmes rglages pour les chelles du caractre. Lignes 24 et 25 : le caractre se dplace avec les valeurs calcules aux lignes 20 et 21. Lignes 26 et 27 : les chelles sont galement rduites pour atteindre la taille de 100 %. Ligne 28 : nous stockons dans une variable intitule bonneEchelleX, une valeur boolenne obtenue avec le test qui value si la taille horizontale du caractre est bien revenue 100 %. Ligne 29 : nous procdons au mme test pour lchelle verticale. Ligne 30 : le test vrie si loccurrence est arrive sa destination, et si elle est revenue son chelle. Lignes 31 34 : si le test savre, nous xons dnitivement les chelles et la place de loccurrence. Ligne 35 : il faut aussi annuler lexcution du gestionnaire qui assurait le dplacement et le changement dchelle de loccurrence.
Bogue ventuel
Le principal bogue de cette animation est li aux valeurs renvoyes par les lignes 20 et 21. En effet, la ligne 30, on essaye de savoir si les occurrences sont moins de 1 pixel de leur emplacement de destination, cest--dire entre 0 et 1 pixel. Si une occurrence provient de la gauche ou du haut de son emplacement, la valeur est ngative. La fonction Math.abs() permet donc dobtenir une valeur absolue, cest--dire une valeur positive.
Afchage dun texte clignotant avec le ltre GlowFilter

La scne ne contient quun texte dynamique dont le nom dinstance est enseigne_inst. La bibliothque ne contient aucun symbole.
Chemin daccs : Manipulation du texte/Traitement/Clignot2.a Ce script plac sur limage-cl 1 de la timeline principale de lanimation permet dobtenir leffet que nous vous invitons vivement consulter dans le .swf correspondant.
368
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import flash.filters.GlowFilter; lueurFiltre = new GlowFilter(0x0033FF, 0.8, 10, 10, 0.8, 5, false, false); listeFiltresEnseigne = [lueurFiltre]; // etatLumiere = false; couleurEnseigne = ["0x003366", "0x0033FF"]; // styleTexteEnseigne = new TextFormat(); // controleEclairageEnseigne = function () { etatLumiere = !etatLumiere; styleTexteEnseigne.color = couleurEnseigne[Number(etatLumiere)]; enseigne_inst.setTextFormat(styleTexteEnseigne); listeFiltresEnseigne = etatLumiere ? [lueurFiltre] : []; enseigne_inst.filters = listeFiltresEnseigne; }; // setInterval(controleEclairageEnseigne, 800);
Analyse
Ligne 1 : cration de la fonction permettant de faire descendre la barre de commandes. Elle contient un gestionnaire onEnterFrame. Ligne 2 : nous gnrons une nouvelle instance de la classe GlowFilter() an de pouvoir lajouter la liste de la ligne suivante. Ligne 3 : nous devons crer une liste, an de pouvoir y ajouter tous les ltres appliquer une ou plusieurs occurrences. Nous aurions tout fait pu diviser cette ligne dinstructions en deux lignes, la premire crant une liste, la deuxime utilisant la mthode push(). Ligne 5 : rappelons que le principe de cette animation est de reprsenter un clignotement. Cela se traduit donc par un tat qui se manifeste entre deux tats inverses. Nous allons donc pouvoir utiliser une valeur boolenne pour raliser ce genre dopration. Nous commenons par initialiser une variable avec la valeur false. Ligne 6 : cette liste contient deux entres, deux couleurs, nous les utiliserons comme paramtres la ligne 12. Ligne 8 : nous crons une instance de la classe TextFormat() an de changer lapparence du texte que nous allons faire clignoter. Lignes 10 16 : cette fonction va sexcuter en continu la ligne 18. Cest elle qui contient le cur du script. Ligne 11 : puisque cette fonction va sexcuter pratiquement toutes les secondes, la valeur de la variable etatLumiere va sinverser en continu. Cest grce la valeur boolenne de
369
cette variable que nous allons pouvoir obtenir cet tat alternatif dont nous avons besoin pour le clignotement. Ligne 12 : rappelons quune valeur boolenne est soit true, soit false. Dans certains langages, on peut galement utiliser 1 ou 0, cest le cas en ActionScript. La fonction Number() nous permet de convertir une chane de caractres en nombre. Nous lutilisons donc pour transformer true en 1 et false en 0. Notre tableau couleurEnseigne contient deux entres, nous allons donc pouvoir utiliser nos valeurs transformes. Ligne 13 : nous appliquons le style dont nous venons de changer la proprit color. Rappelons que enseigne_inst est le nom dinstance du texte dynamique qui se trouve sur la scne et non son nom de variable. Ligne 14 : pour dnir la valeur du tableau listeFiltresEnseigne, nous testons la valeur de la variable etatLumiere. Si cette dernire a pour valeur true, nous renvoyons un tableau avec une entre, dans le cas contraire, nous vidons le tableau. Ligne 15 : avec la proprit filters, nous pouvons appliquer notre ltre loccurrence enseigne_inst. Ligne 18 : la fonction que nous venons danalyser ensemble peut prsent tre excute en continu raison dune fois toutes les 0,8 secondes.
Bogue ventuel
Noubliez pas dimporter la classe du ltre que vous voulez exploiter. Le nom qui se trouve devant la mthode setTextFormat() est celui dune occurrence et le nom dune variable lorsquil sagit dun texte.
Afchage dun texte qui vibre

Il ny a rien sur la scne ni dans la bibliothque.
Chemin daccs : Manipulation du texte/Traitement/Vibre.a Ce script plac sur limage-cl 1 de la timeline principale de lanimation permet dobtenir leffet que nous vous invitons vivement consulter dans le .swf correspondant.
370
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 var chaineAafficher = String("LE NORD DE LA PLAGE EST PLUS CHAUD"); style1 = new TextFormat(); style1.font = "Verdana"; style1.bold = true; // for (i=0; i<chaineAafficher.length; i++) { _root.createEmptyMovieClip("lettre"+i, i); _root["lettre"+i]._x = 50+(i*13); _root["lettre"+i]._y = 50; _root["lettre"+i].createTextField("caractere", 1, 0, 0, 80, 80); _root["lettre"+i].caractere.text = chaineAafficher.substr(i, 1); _root["lettre"+i].caractere.setTextFormat(style1); _root["lettre"+i].origX = _root["lettre"+i]._x; _root["lettre"+i].origY = _root["lettre"+i]._y; // } faireVibrertexte = function () { for (i=0; i<chaineAafficher.length; i++) { _root["lettre"+i]._x = _root["lettre"+i].origX+random(4); _root["lettre"+i]._y = _root["lettre"+i].origY+random(4); } }; // setInterval(faireVibrertexte, 50);
Analyse
Ligne 1 : comme dans lexemple prcdent, nous stockons dans une variable intitule chaineAafficher, une chane de caractres, celle que nous souhaitons voir vibrer sur la scne. Lignes 2 4 : cration dune instance de la classe TextFormat() pour la mise en forme des caractres. Ligne 6 : cette boucle va placer autant de clips sur la scne quil y a de caractres contenus dans la chane "LE NORD DE LA PLAGE EST PLUS CHAUD". Ligne 7 : les occurrences cres sur la scne vont porter les noms lettre0, lettre1, lettre2, etc. Ligne 8 : nous plaons toutes les occurrences sur la scne, espaces de 13 pixels. Lorsque i vaut 0, le premier caractre est plac 50 pixels du bord gauche de la scne ; lorsque i vaut 1, loccurrence suivante est place 63 pixels du bord gauche de la scne, etc. Ligne 9 : verticalement, les occurrences sont places 50 pixels du haut de la scne. Ligne 10 : lintrieur des occurrences places sur la scne, un texte est cr dynamiquement grce la mthode createTextField(). Le nom doccurrence donn ces textes peut tre identique, car ils ne se trouvent pas sur la mme timeline.
371
Ligne 11 : nous dnissons un contenu pour chaque texte de toutes les occurrences sur la scne. Il sagit dun caractre extrait de la chane contenue dans la variable chaineAafficher. La premire occurrence cre sur la scne va contenir le caractre L . La deuxime va contenir la lettre E , et ainsi de suite, jusqu former la phrase de la premire ligne dinstruction. Ligne 12 : le style cr aux lignes 2 4 est appliqu aux textes. Lignes 13 et 14 : nous dnissons pour chaque occurrence, deux variables qui vont contenir ses coordonnes actuelles sur la scne, et qui vont galement servir de point de rfrence. Lorsque chaque occurrence vibrera, elle le fera autour de ce point, notamment aux lignes 19 et 20. Ligne 17 : nous crons une fonction qui va tre appele de faon continue la ligne 24. Lignes 18 21 : cette boucle va permettre de faire rfrence toutes les occurrences qui se trouvent sur la scne, et de les placer plus ou moins 4 pixels du point de rfrence de chaque occurrence, aussi bien sur un axe horizontal que vertical. Ligne 24 : la fonction cre la ligne 17 est excute en continu intervalles rguliers, raison de 20 fois par seconde (1000/50), tout dpend de la vitesse de la machine et de la puissance de sa carte graphique. Si cette valeur tait rgle 1 000, le changement de position du caractre se ferait une fois par seconde.
Afchage dun texte qui explose

Il existe de nombreux logiciels qui permettent de gnrer des animations qui utilisent cet effet, ici nous avons voulu vous dmontrer que la technique est extrmement simple.
Chemin daccs : Manipulation du texte/Traitement/TexteExplose.a La scne contient deux occurrences issues de deux symboles de type clips. Celles-ci ne serviront qu excuter lexplosion et remettre les occurrences en place. Leurs noms sont : btReplacer et btExplosion.
Script
1 2 3 4 var chaineAaffcicher = String("LE NORD DE LA PLAGE EST PLUS CHAUD"); style1 = new TextFormat(); style1.font = "Verdana"; style1.bold = true;
372
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
// var vitesse = []; for (i=5; i<=20; i++) { vitesse.push(i); vitesse.push(i*-1); } // placerLettres = function () { for (i=0; i<chaineAaffcicher.length; i++) { _root.createEmptyMovieClip("lettre"+i, i); _root["lettre"+i]._x = 70+(i*13); _root["lettre"+i]._y = 150; // _root["lettre"+i].createTextField("caractere", 1, -5, -5, 80, 80); _root["lettre"+i].caractere.text = chaineAaffcicher.substr(i, 1); _root["lettre"+i].caractere.setTextFormat(style1); _root["lettre"+i].pasX = vitesse[random(30)]; _root["lettre"+i].pasY = vitesse[random(30)]; } }; // placerLettres(); // btExplosion.onPress = function() { for (i=0; i<chaineAaffcicher.length; i++) { _root["lettre"+i].onEnterFrame = function() { this.coef += 0.1; this._x += this.pasX; this._y += this.pasY; }; } }; // btReplacer.onPress = function() { placerLettres(); };
Analyse
Ligne 1 : comme dans lexemple prcdent, nous stockons dans une variable intitule chaineAafficher, une chane de caractres, celle que nous souhaitons voir exploser sur la scne. Lignes 2 4 : cration dune instance de la classe TextFormat() pour la mise en forme des caractres. Lignes 6 10 : un tableau est cr an que nous stockions lintrieur des valeurs qui vont servir dnir les vitesses et directions de dplacements des occurrences. An que toutes les valeurs ne soient pas positives, pour que certaines occurrences puissent sortir
373
vers la gauche et vers le haut de la scne, nous ajoutons des entres dont la valeur a t rendue ngative par une multiplication par -1. Ligne 12 : comme nous lavons vu dans la description du chier, deux occurrences sur la scne vont nous permettre de lancer lexplosion et de remettre les occurrences en place. Comme son nom lindique, la fonction placerLettres va nous permettre de repositionner les occurrences an quelles puissent nouveau exploser. Ligne 13 : cette boucle va placer autant de clips sur la scne quil y a de caractres contenus dans la chane "LE NORD DE LA PLAGE EST PLUS CHAUD". Ligne 14 : les occurrences cres sur la scne vont porter les noms lettre0, lettre1,
lettre2, etc.
Ligne 15 : nous plaons toutes les occurrences sur la scne, espaces de 13 pixels. Lorsque
i vaut 0, le premier caractre est plac 50 pixels du bord gauche de la scne ; lorsque i vaut 1, loccurrence suivante est place 63 pixels du bord gauche de la scne, etc.
Ligne 16 : verticalement, les occurrences sont places 50 pixels du haut de la scne. Ligne 18 : lintrieur des occurrences places sur la scne, un texte est cr dynamiquement grce la mthode createTextField(). Le nom doccurrence donn ces textes peut tre identique, car ils ne se trouvent pas sur la mme timeline. Ligne 19 : nous dnissons un contenu pour chaque texte de toutes les occurrences sur la scne. Il sagit dun caractre extrait de la chane contenue dans la variable chaineAafficher. La premire occurrence cre sur la scne va contenir le caractre L . La deuxime va contenir la lettre E , et ainsi de suite, jusqu former la phrase de la premire ligne dinstruction. Ligne 20 : le style cr aux lignes 2 4 est appliqu aux textes. Lignes 21 et 22 : nous dnissons pour chaque occurrence, deux variables qui vont contenir ses coordonnes actuelles sur la scne, et qui vont galement servir de vitesse de dplacement. Ligne 26 : la fonction cre la ligne 12 est excute une premire fois an de placer la phrase sur la scne. Rappelons que ce texte est compos doccurrences contenant des textes dynamiques. Ligne 28 : ce gestionnaire sexcutera lorsque lutilisateur cliquera sur le bouton qui permet de lancer lexplosion. Ligne 29 : une boucle va permettre de sadresser toutes les occurrences de la scne (celles qui contiennent nos caractres). Ligne 30 : le gestionnaire onEnterFrame est associ chaque occurrence. Lignes 31 et 32 : le mouvement de loccurrence au moment de lexplosion est obtenu grce au dplacement horizontal (ligne 31) et vertical (ligne 32) des occurrences. Rappelons que les valeurs de dplacement de chaque occurrence ont t xes au moment de leur cration. Lignes 37 et 38 : ce gestionnaire sexcutera lorsque lutilisateur cliquera sur le bouton qui permet de remettre en place les occurrences contenant les lettres.
374
Bogue ventuel
Il tait important pour cette animation de comprendre la ncessit davoir des valeurs ngatives pour que les clats de lexplosion partent dans tous les sens. Nous aurions pu ajouter cette srie danimations proposant des effets dafchage du texte, de nombreuses autres, mais il faut bien sarrter. Nous pourrions crire un livre complet sur les diffrents modes dafchage dun texte ou dune image. Si vous souhaitez faire arriver un texte de lextrieur de la scne pour le placer au centre de lcran, utilisez le script du personnage qui se dplace par clics au chapitre 11. Pour afcher un texte avec un fondu entrant, consultez lanimation sur les transitions au chapitre 8.
375
18
Manipulation des tableaux
Nous consacrons un chapitre complet des tudes de cas faisant appel aux tableaux, car il en existe de plusieurs sortes, exploits de diffrentes faons. Ces derniers sont indispensables pour manipuler des variables en grand nombre. La gestion des entres dun tableau est une technique trs simple matriser, en revanche lutilisation qui en est faite lest moins. Il est important de prciser que le terme tableau possde selon les langages de programmation, des synonymes tels que liste et array. Ce dernier tant tout simplement la traduction de tableau en anglais. On peut donc employer indiffremment lun de ces trois termes.
Afcher un tableau (array) sous forme de liste

Cette tude de cas est trs intressante pour deux raisons. La premire est lie lafchage des entres du tableau qui va se faire sous forme de liste de courses. La deuxime raison est relative la suppression dune entre dun tableau qui est une technique moins connue.
Manipulation du texte Partie III Figure 18-1

Le contenu dun tableau safche sous forme de liste grce une boucle for() et au mot-cl newline.
Rappel
Le mot-cl newline permet dinsrer un retour la ligne dans un texte dynamique ou de saisie, mais vous pouvez aussi utiliser la balise <br> si le bouton Rendre le texte au format HTML de la palette Proprits est activ. Dans certains cas, vous pouvez galement utiliser le caractre dchappement \n. Par ailleurs, rappelons que les mthodes toLowerCase() et toUpperCase(), permettent de basculer tous les caractres dune chane en minuscules ou en majuscules. Lexcution de ces mthodes est indispensable pour la comparaison de deux chanes. On ne peut en effet comparer Samedi et samedi , il sagit de deux textes diffrents.
Chemin daccs : Manipulation du texte/ManipulationTableaux/ ManipTableauEnListe.a Cette animation prsente un contenu de scne trs rduit et simple. Un premier texte de saisie dont le nom doccurrence est nomElementAjouter_inst avec un nom de variable nomElementAjouter a t plac sur la scne. Il correspond la zone de saisie dans laquelle lutilisateur va taper les articles ajouter sa liste de courses. Un texte dynamique intitul affichageCourses se trouve galement sur la scne, il va recevoir et afcher le contenu du tableau sous forme de mots les uns sous les autres. Le script de cette animation semble un peu complexe, cela est d au fait que nous avons imbriqu trois tests, mais les lignes dinstructions excuter ne prsentent pas de relles difcults lexception de la ligne 9. Le script se dcompose en trois parties : 1. La cration dun tableau vide.
378
Manipulation des tableaux Chapitre 18
2. Un test qui vrie le contenu du texte de saisie avant dessayer de lajouter dans le tableau. 3. La cration dune fonction qui va afcher les entres du tableau les unes sous les autres dans le texte dynamique.
Script
1 var listeCourses = []; 2 // 3 _root.onKeyDown = function() { 4 laTouche = Key.getCode(); 5 if (laTouche == 13 && nomElementAjouter != "") { 6 if (nomElementAjouter.substr(nomElementAjouter.length-4, 4).toLowerCase() == "supp") { 7 for (i=0; i<listeCourses.length; i++) { 8 if (listeCourses[i].toLowerCase() == nomElementAjouter.substr (0, nomElementAjouter.length-4).toLowerCase()) { 9 listeCourses.splice(i, 1); 10 affichageEnListe(); 11 nomElementAjouter = ""; 12 } 13 } 14 } else { 15 listeCourses.push(nomElementAjouter); 16 affichageEnListe(); 17 nomElementAjouter = ""; 18 } 19 } 20 }; 21 Key.addListener(_root); 22 // 23 affichageEnListe = function () { 24 affichageCourses = ""; 25 for (i=0; i<listeCourses.length; i++) { 26 affichageCourses += listeCourses[i]+newline; 27 } 28 };
Analyse
Avant danalyser ce script, rappelons le principe de cette animation : lutilisateur a la possibilit dajouter des entres au tableau listeCourses en tapant sur la touche Entre de son clavier, aprs la saisie de son texte. Si le contenu du texte de saisie se termine par supp , il ne sera alors pas ajout, mais supprim du tableau et de la liste de courses. Ligne 1 : un tableau intitul listeCourses est cr vide, car il va contenir les entres ajoutes par lutilisateur.
379
Ligne 3 : un gestionnaire va excuter les lignes dinstructions quil contient ds que lutilisateur va taper sur une touche de son clavier, cest--dire lors de la saisie. Ligne 4 : une variable mmorise le code de la touche enfonce. Ligne 5 : un test sassure que la touche enfonce est Entre et que le contenu de la zone du texte de saisie nest pas vide. Ligne 6 : un autre test vrie si le texte saisi par lutilisateur ne se termine pas par supp . Ligne 7 13 : dans le cas o le mot saisi par lutilisateur se termine par supp , une boucle va parcourir toutes les entres du tableau et les comparer avec la chane de caractres situe avant ce sufxe. Ligne 8 : comme nous lavons prcis en rappel de cette tude de cas, il est indispensable de comparer des minuscules avec des minuscules. Si lutilisateur a saisi une premire fois Pomme , puis pommesupp , la suppression de lentre ne pourra pas se faire car pomme et Pomme sont deux chanes diffrentes. Ligne 9 : si le test de la ligne 8 savre, lentre trouve peut alors tre supprime. La boucle for() de la ligne 7 va parcourir le tableau, lorsquune entre est compare au texte saisi par lutilisateur, la variable locale i vaut alors une valeur prcise. On utilise cette dernire pour connatre lindex de lentre supprimer. Ligne 10 : il est indispensable de remettre jour lafchage du texte dynamique. Ligne 11 : la zone du texte de saisie doit tre vide. ligne 15 : si le mot saisi par lutilisateur ne contient pas le sufxe supp , il peut alors tre ajout au tableau. Lignes 16 et 17 : il faut galement remettre jour lafchage du texte dynamique et vider le contenu du texte de saisie. Ligne 21 : le gestionnaire de la ligne 3 a t dni, mais il ne sert rien tant que la surveillance du clavier na pas t enclenche. Lignes 23 28 : une boucle permet dafcher les entres du tableau listeCourses les unes sous les autres grce au mot-cl newline. La ligne 24 est trs importante et indispensable. Si vous lomettez, vous afcherez plusieurs fois votre tableau dans le texte dynamique.
Remarque
Nomettez pas la ligne 21, le dclenchement de la surveillance du clavier ne se ferait pas.
Bogues ventuels
Pour cette application, nous ne devons pas parler de bogue, mais plutt derreur de logique. Il est en effet trs important de vrier le contenu du texte de saisie avant dessayer de lajouter au tableau.
380
Par ailleurs, il ne faut surtout pas oublier dafcher le contenu du tableau. Le manipuler en ajoutant et en supprimant des entres ne met pas jour le contenu du texte dynamique. Erreur de logique ou bogue, si vous omettez la ligne 24, le rsultat sera agrant. Le texte dynamique contient plusieurs listes les unes sous les autres.
Raliser un quadrillage
Cette tude de cas est particulirement intressante, car elle va nous dmontrer quil est possible de crer un tableau partir de deux notions trs simples. Les boucles for() et la cration de textes dynamiques par le biais de la mthode createTextField(). Pour amliorer lapparence du tableau, nous avons utilis la classe TextFormat(), mais cela nest pas une obligation. Cela fonctionnerait tout autant sans cette technique de mise en forme dynamique du texte.
Figure 18-2
Ce tableau est constitu de 30 textes dynamiques disposs sous formes de lignes et de colonnes, grce deux boucles for() imbriques.
Chemin daccs : Manipulation du texte/ManipulationTableaux/TableauQuadrillage.a Cette animation a la particularit de ne contenir aucune occurrence sur la scne ni le moindre symbole dans la bibliothque. Nous avons donc utilis uniquement des lignes de codes pour gnrer ce tableau. Le script de la premire image-cl nest pas trs long pour autant, mais il se dcompose en trois parties : 1. La cration dune instance de la classe TextFormat() pour mettre en forme le contenu des cellules. 2. La cration dune liste pour remplir la premire ligne du tableau. 3. La cration des textes dynamiques au sein dune boucle for(). Notons que nous aurions tout fait pu nous passer de ltape de remplissage des cellules si nous nous tions arrts la simple cration du tableau. Vous aurez srement vous381
mme remplir un jour les tableaux que vous crerez, nous avons donc ajout cette ligne dinstruction notre script (ligne 23).
Attention
Vous tes susceptible de faire diffrents types de tableau, cest pourquoi le mode de remplissage peut varier. Il peut sagir dun tableau o lutilisateur va lui-mme saisir un contenu dans les cellules, ou bien un tableau dont le remplissage se fera partir de donnes situes dans une base ou un chier .xml ou le rsultat de calculs.
Script
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 var styleCel = new TextFormat(); styleCel.align = "center"; styleCel.font = "Arial"; var mois = ["Janvier", "Fvrier", "Mars", "Avril", "Mai", "Juin"]; // _root.createEmptyMovieClip("tableau", 100); tableau._x = 30; tableau._y = 80; var exemplaire = 0; for (i=0; i<=5; i++) { for (j=0; j<5; j++) { exemplaire++; tableau.createTextField("case"+exemplaire, exemplaire, (i*90), (j*20), 90, 20); tableau["case"+exemplaire].type = "input"; tableau["case"+exemplaire].border = true; tableau["case"+exemplaire].borderColor = 0x999999; // tableau["case"+exemplaire].onChanged = function() { this.setTextFormat(styleCel); }; // if (j == 0) { tableau["case"+exemplaire].text = mois[i]; tableau["case"+exemplaire].setTextFormat(styleCel); tableau["case"+exemplaire].background = true; tableau["case"+exemplaire].backgroundColor = 0xA3ADA2; tableau["case"+exemplaire].type = "dynamic"; tableau["case"+exemplaire].selectable = false; } } }
382
Analyse
Lignes 1 3 : une instance de la classe TextFormat() est cre et dnie, mais elle nest pas applique tout de suite, elle le sera au moment de la saisie du texte dans les cellules du tableau. Ligne 4 : ce tableau va nous permettre de dnir le contenu des cellules de la premire ligne du tableau. Ligne 6 : comme nous vous lindiquions en introduction de cette tude de cas, les cellules du tableau sont des textes crs dynamiquement. Nous dcidons de crer une occurrence vide sur la scne, an de placer tous les textes dynamiques dans cette dernire. Ainsi, pour manipuler les cellules du tableau, il sufra de faire rfrence cette occurrence intitule tableau. Lignes 7 et 8 : comme nous venons de le dire, nous pouvons contrler la position du tableau car les cellules (textes dynamiques) sont contenues dans loccurrence intitule tableau. Ligne 9 : nous prparons le travail de cration des cellules en initialisant une variable qui va servir dnir un sufxe aux noms des textes crs dynamiquement. Lignes 10 et 11 : ces deux boucles imbriques vont permettre de rpter 36 fois la cration des textes dynamiques. Ligne 13 : les cellules de notre tableau sont cres grce cette ligne dinstruction. Les paramtres (i*90) et (j*90) permettent de placer les textes dynamiques sous la formes de six colonnes de six cellules. Pour visualiser la progression de la cration du tableau, nous vous invitons marquer un point darrt sur cette ligne en effectuant un clic sur son numro, comme vous le montre la gure 18-3. Effectuez un Ctrl + Entre (PC) ou Commande + Entre (Mac) pour visualiser votre animation en mode debugger. Cliquez alors sur le triangle vert qui contrle la lecture de lanimation. Une premire cellule va se crer, cliquez alors plusieurs fois sur le bouton lecture (triangle vert) pour voir les textes dynamiques se placer progressivement.
Figure 18-3
Un point darrt dans un script permet dexcuter un script et de larrter sur la ligne qui contient ce rond rouge.
Ligne 14 : nous prcisons que les textes crs dynamiquement sont de type texte de saisie . Lignes 15 et 16 : nous appliquons un contour et une couleur de contour au texte, cela forme ainsi des cellules. Lignes 18 20 : un gestionnaire onChanged est associ chaque cellule , cela va permettre de surveiller le changement du contenu des textes de saisie. Ds que lutilisateur ajoute ou supprime donc un signe (caractre, chiffre, ponctuation, etc.) dans une cellule, il est
383
automatiquement rgl en Arial et plac au centre de la cellule. La mthode setTextFormat()et le style dni aux lignes 1 3 vont mettre le contenu des textes de saisie en forme. Lignes 23 28 : ces lignes dinstructions permettent de remplir la premire ligne du tableau en utilisant le contenu de la liste intitule mois. En effet, chaque fois que la variable locale j est rinitialise 0, lorsque la variable i sincrmente, le texte dynamique correspondant change de couleur de fond, il est rendu non slectionnable. Ce script est intressant par la diversit des techniques quil emploie, mais nous aurions pu aller encore plus loin en ajoutant des calculs prliminaires sur la dernire ligne du tableau, et une fonction de mmorisation de toutes les cellules. Ltude de cas suivante vous propose donc une analyse des lignes supplmentaires et ncessaires lajout de ces deux fonctionnalits.
Bogues ventuels
Une fois encore, nous nallons pas parler de bogue dans cette tude de cas, mais plutt derreur de logique. Une des difcults de cette animation est relative la notion de boucles imbriques. Vous devez utiliser deux variables locales, et comprendre que lune des deux (la variable j dans notre exemple) va tre sollicite davantage car elle se trouve imbrique dans une premire boucle. On notera par ailleurs que nous avons t obligs dappliquer le style styleCel au moment o lutilisateur saisit son texte, car dans le cas o il effacerait le contenu dune cellule, le style disparatrait avec.
Raliser une grille de calculs

Avec beaucoup de temps et de rexion, il serait possible de refaire un tableur avec des fonctionnalits basiques. Une cellule nest ni plus ni moins quun texte de saisie auquel il est possible dassocier des gestionnaires dvnements chargs de surveiller les changements de contenu du tableau.
Chemin daccs : Manipulation du texte/ManipulationTableaux/Tableau-Quadrillage2.a Pour comprendre cette animation, vous devez commencer par lire ltude de cas prcdente. Nous nallons en effet analyser dans celle-ci, que les lignes dinstructions qui ne se trouvent pas dans le script de lanimation prcdente.
384
Comme nous lvoquions dans ltude de cas prcdente, nous allons ajouter un calcul automatique des totaux en bas de chaque colonne, ainsi quune fonctionnalit de mmorisation du contenu du tableau.
Script
Si vous navez pas lu lintroduction de cette animation, rappelons que les lignes dinstructions suivantes sont places la suite du script de ltude de cas prcdente pour nen former quun seul.
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 var listeCellules = []; for (i=1; i<=30; i++) { listeCellules[i] = ""; } // var styleGras = new TextFormat(); styleGras.bold = true; styleGras.align = "center"; styleGras.font = "Arial"; // for (i=1; i<=30; i++) { tableau["case"+i].tabIndex = i; tableau["case"+i].sonNumero = i; tableau["case"+i].onChanged = function() { listeCellules[this.sonNumero] = this.text; memoTableau.data.contenuTableau = listeCellules; //memoTableau.flush(); for (k=5; k<=30; k += 5) { sommeTempo = 0; for (j=k-1; j>=k-3; j--) { sommeTempo += Number(tableau["case"+j].text); } tableau["case"+k].text = sommeTempo; if (tableau["case"+k].text == "NaN") { tableau["case"+k].text = ""; } listeCellules[k] = tableau["case"+k].text; memoTableau.data.contenuTableau = listeCellules; //memoTableau.flush(); tableau["case"+k].setTextFormat(styleGras); } this.setTextFormat(styleCel); }; }
385
35 36 37 38 39 40 41 42 43 44 45 46 47 48
// memoTableau = SharedObject.getLocal("memoires"); if (memoTableau.data.contenuTableau != undefined) { listeCellules = memoTableau.data.contenuTableau; for (i=1; i<=30; i++) { tableau["case"+i].text = listeCellules[i]; tableau["case"+i].setTextFormat(styleCel); if (i%5 == 0) { tableau["case"+i].setTextFormat(styleGras); } } } else { memoTableau.data.contenuTableau = listeCellules; }
Analyse
Avant de commencer, prcisons que les lignes dinstructions 18 20 de lanimation prcdente ont t retires, car la mise en forme des cellules se fait dans le traitement du calcul des sommes. Par ailleurs, il aurait t prfrable de ne pas utiliser les mmes racines de noms doccurrences pour les cellules du haut du tableau. Ligne 1 : un premier tableau vide est cr an de stocker le contenu de chaque cellule. Il sera utilis dans le processus de mmorisation avec la classe SharedObject. Lignes 2 4 : le tableau que nous venons de crer est rempli, il contient prsent trente entres dont la valeur de chacune est une chane de caractres vide. Lignes 6 9 : nous instancions la classe TextFormat() an de dnir un style de texte qui sera utilis pour la mise en forme des cellules du bas du tableau, celles qui afcheront les totaux des colonnes. Lignes 11 34 : dans cette boucle, nous allons calculer les sommes de chaque colonne et afcher le rsultat sur la dernire ligne. Ligne 12 : les cellules du tableau sont cres verticalement. La proprit tabIndex permet de dnir lordre de slection des occurrences sur la scne lorsque vous utilisez la touche Tabulation. Ligne 13 : nous associons chaque texte de saisie une variable qui sera utilise pour le remplissage automatique des cellules. Ligne 14 : ce gestionnaire va nous permettre de surveiller toutes les modications qui surviendraient dans lune des cellules du tableau. Si tel est le cas, on essaye alors de faire la somme de chaque colonne dans les cellules du bas. Ligne 15 : le tableau que nous avions cr la ligne 1 et rempli la suivante, est utilis pour placer la valeur de ses entres dans chaque texte de saisie.
386
Ligne 16 : on stocke dans un cookie intitul memoTableau, le contenu du tableau intitul listeCellules. Ligne 17 : nous lavons laisse pour vous rappeler que dans le cas o vous souhaiteriez accder des informations stockes dans un cookie (un SharedObject), vous devez toujours utiliser la mthode flush() pour forcer lcriture des donnes. La ligne 16 va rellement sexcuter lorsque vous fermerez la fentre de votre navigateur ou celle du player Flash. Ligne 18 : une boucle va excuter cinq fois les lignes dinstructions quelle contient. Rappelons que les calculs que nous allons effectuer vont se faire par colonne. Nous devons donc prendre tous les textes de saisie dune colonne, sauf le texte du bas, et additionner leurs contenus. Ligne 19 : cette variable est dans un premier temps initialise 0, car elle va contenir la somme de toutes les cellules dune colonne. Elle sera initialise cinq fois car notre tableau contient cinq colonnes. Ligne 20 : rappelons que le nom des textes de saisie est compos du prxe case et dun sufxe base dun chiffre. Dans le cas de la premire colonne, nous devons par exemple additionner le contenu des textes de saisie intituls case4, case3, et case2. Cest pourquoi la variable locale j est dnie en fonction de la variable locale k qui va avoir pour valeurs 5, 10, 15, 20, 25 et 30. Rappelons que les textes de saisie se trouvent dans une occurrence intitule tableau, qui se trouve sur la scne : do la syntaxe obtenue tableau ["case"+j].
Remarque
Nutilisez jamais case comme nom de variable, il sagit dun mot rserv et utilis avec la structure conditionnelle switch().
Ligne 21 : cest cette ligne qui effectue prcisment la somme des trois cellules qui composent une colonne. La proprit text est utilise, car nous ne faisons pas rfrence la variable dune instance, mais son contenu. Ligne 23 : la premire cellule du tableau sintitule case1. Celle qui se trouve en bas de la premire colonne sappelle case5. De faon logique et mathmatique, les cellules qui se trouvent sur la dernire ligne du tableau, cest dire en bas de chaque colonne, sintitulent case5, case10, case15, case20, case25 et case30. La variable locale k a t initialise 5 et va sincrmenter de 5 en 5. La concatnation obtenue va donc renvoyer les noms que nous venons de citer ci-dessus. Nous pouvons ainsi stocker dans ces textes de saisie le total de la ligne 21. Lignes 24 et 25 : lorsque certaines cellules du tableau seront vides, le rsultat de la somme de la colonne laquelle elles appartiennent renverra Nan qui signie Not a Number. Nous ne souhaitons donc pas afcher cette valeur, cest pourquoi nous la remplaons par une chane de caractres vide.
387
Ligne 27 : il ne faut pas oublier de remplir les entres de notre liste intitule listeCellules, qui va tre utilise pour stocker les valeurs de notre tableau (la grille de textes de saisie). Rappelons que cette liste sera stocke dans le cookie de la ligne 16. Ligne 28 : le tableau (la liste intitule listeCellules) a t mis jour la ligne prcdente, il faut prsent lenvoyer dans le cookie memoTableau. Ligne 30 : le style de texte que nous avions dni aux lignes 6 9 et qui met le texte en gras, en Arial et au centre, est appliqu aux cellules des totaux. Ligne 32 : le reste des cellules du tableau est mis en forme avec le premier style cr aux lignes 1 3. Ligne 36 : un cookie intitul memoTableau est cr et associ au chier memoires. Ligne 37 : ce test ne va savrer quune seule fois dans lexistence du chier. Lorsque vous lancerez votre chier .swf pour la premire fois sur une machine, le cookie nexistera pas encore, la variable contenuTableau nexistera donc pas non plus. Ligne 38 : on initialise donc le contenu du tableau listeCelulles. Lignes 39 et 40 : on remplit chaque texte de saisie du tableau et on le met en forme galement. Ligne 42 : le test value si la division de i par 5 renvoie 0. Si tel est le cas, cest quil sagit dune cellule de bas de colonne, on peut alors lui appliquer un style diffrent (texte en gras). Ligne 47 : si le cookie existe sur la machine, cest dire que le chier a dj t lu une premire fois, on stocke dans la variable contenuTableau du cookie, le contenu de la liste listeCellules.
Bogues ventuels
Il est difcile de parler de bogues dans une telle animation, car les risques derreurs relvent davantage de la logique de dveloppement dune telle application.
Manipuler les tableaux associatifs

Lutilisation des tableaux associatifs est une technique comparable la gestion dune double liste linaire. Elle est plus complexe manipuler pour sa syntaxe, mais moins abstraite. Il est un exemple trs dmonstratif qui combine la vido et les listes de proprits, mais nous avons voulu vous prsenter une animation simple qui nest pas vraiment une tude de cas. Veuillez consulter ltude de cas sur la vido (MediasVideoSousTitres.a) pour dcouvrir un script faisant appel aux listes de proprits.
388
Rappel
Le principe du tableau associatif est de stocker dans un tableau entre accolades, une proprit accompagne de sa valeur. Lentre dun tableau est donc une paire proprit/valeur, et on ne peut inverser lordre de la paire. Dans lexemple suivant, nous illustrons les diffrents types de valeurs quil est possible dassocier une proprit dans la liste villes.
quartiers = ["Montmartre", "Gobelins", "Opra", "Saint Germain"]; villes = {Paris:quartiers, Marseille:"Bouches du Rhne", Toulouse:33}; resultat1 = villes.Paris; resultat2 = villes.Paris[3]; resultat3 = villes.Marseille; resultat4 = villes.Toulouse;
Vous noterez que la proprit dun tableau nest jamais saisie entre guillemets, alors que sa valeur doit ltre comme dans lexemple Marseille:"Bouches du Rhne". Cependant, si la valeur dune proprit nest pas alphanumrique, cest--dire une variable ou une valeur numrique, dans ce cas, vous ne devez pas utiliser de guillemets.
Chemin daccs : Manipulation du texte/ ManipulationTableaux /ManipTableauxAssociatifs.a Lutilisateur doit taper le nom dun pays dans un texte de saisie, la capitale correspondante safche alors. Sur la scne, nous avons dispos un texte de saisie et un autre dynamique. Leurs noms doccurrences et de variables sont respectivement : nomPays_inst et vNomPays ; nomCapitale_inst et vNomCapitale. Le script de cette animation est vraiment trs court et simple, il se dcompose en deux parties : 1. La cration dune liste de proprit. 2. Un test qui value la saisie de lutilisateur.
Script
1 listePays = {France:"Paris", Allemagne:"Berlin", Angleterre:"Londres", Espagne:"Madrid", Portugal:"Lisbonne", Italie:"Rome", Suisse:"Geneve", Luxembourg:"Luxembourg", Belgique:"Bruxelles"}; 2 nomPays_inst.onChanged = function() { 3 capitale = listePays[vNomPays]; 4 if (capitale == undefined) { 5 capitale = ""; 6 } 7 vNomVille = capitale; 8 };
389
Analyse
Ligne 1 : une liste de proprits contenant neuf entres est cre. Ligne 2 : un gestionnaire est charg de surveiller la saisie du texte dans linstance intitule nomPays_inst. Ligne 3 : la variable vNomPays est celle du texte de saisie dont le nom doccurrence est nomPays_inst. En dautres termes, lorsque lutilisateur tape du texte sur la scne, sa saisie est utilise comme paramtre. Si le texte inscrit est France , la ligne dinstruction numro 3 ressemble alors celle-ci :
capitale = listePays[France];
Cela revient crire :

capitale = listePays.France;
Cette ligne permet donc de stocker temporairement dans la variable capitale, le rsultat de la ligne dinstruction ci-dessus. Lignes 4 6 : un test vrie la valeur renvoye par la ligne 3. En effet, ds que lutilisateur tape un caractre, le rsultat est automatiquement envoy dans la variable capitale. Tant que la saisie ne correspond pas lun des noms de pays de la liste linaire de la ligne 1, la valeur undefined est renvoye. Il faut donc effacer cette valeur en la remplaant par une chane vide. Ligne 7 : la valeur de la variable capitale est afche sur la scne.
Bogue ventuel
Comme nous lvoquions dans le rappel de cette animation, vous ne devez pas saisir le nom des proprits entre guillemets, cest gnralement le principal bogue li ce type de listes.
390
Partie IV
Les jeux
Crer des jeux en Flash nest pas une nouveaut. Alors pourquoi introduire un tel chapitre dans ce livre ? Pour ne plus avoir retrouver les mmes questions dans les forums et dans la bote e-mail de Yazo.net ! Non, ce message introductif nest pas un coup de gueule , mais il est vrai que tous les nouveaux dveloppeurs Flash essayent de crer des jeux comme premires applications. Ceux qui sont proposs dans ce chapitre font donc partie des standards rencontrs sur Internet, notamment dans des oprations marketing (jackpot et grattage). Les jeux les plus souvent dvelopps pour les enfants sont le memory, le puzzle et le coloriage, nous ne les avons donc pas oubli !
19
Jeux pour enfants
Jeu du Memory
Cette tude de cas est trs intressante, car elle fait appel de trs nombreuses notions de programmation lmentaires et avances. Le principe est simple, vous devez cliquer sur deux cases (carrs verts), deux photos safchent pendant quelques secondes. Sil sagit des mmes photos, elles restent retournes (photos visibles). Pour raliser cette animation, nous avions le choix entre une construction entirement dynamique et un mlange de dynamique/statique. Nous avons retenu la premire solution car cela nous a sembl plus facile.
Chemin daccs : Jeux/JeuxEnfants/JeuxMemory.a La scne ne contient que deux textes dynamiques dont les noms de variables sont nbrCoups et score. Nous aurions pu crer ces textes dynamiquement, mais nous navons pas voulu ajouter de lignes dinstructions supplmentaires. Le script nest pas trs long, mais il se dcompose tout de mme en trois 3 parties : 1. Linitialisation des variables et tableaux. 2. La construction du tableau de quatre colonnes sur trois lignes. 3. La fonction de vrication.
Les jeux Partie IV
Figure 19-1
Le jeu du Memory est plus simple raliser avec une construction dynamique.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var var var var var // for listeVignettes = []; listesVignettesMelangees = []; casesDecouvertes = 0; nbrCoups = 0; score = 0; (i=1; i<=6; i++) { listeVignettes.push(i); listeVignettes.push(i);
} // vignettesRestantes = 12; for (i=0; i<=11; i++) { listesVignettesMelangees.push(listeVignettes.splice(random(vignettesRestantes), 1)); vignettesRestantes--; } // var horizontale = 150; var verticale = 100;
394
Jeux pour enfants Chapitre 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
for (i=0; i<=11; i++) { numeroImg = listesVignettesMelangees[i]; _root.attachMovie("img"+numeroImg, "img"+i, i); leCache = _root.attachMovie("cache", "cache"+i, i+20); _root["img"+i]._x = leCache._x=horizontale; _root["img"+i]._y = leCache._y=verticale; horizontale += 100; if (horizontale>450) { horizontale = 150; verticale += 100; } // _root["cache"+i].paire = numeroImg; _root["cache"+i].onPress = function() { if (casesDecouvertes<=1) { this._visible = 0; casesDecouvertes++; if (casesDecouvertes == 1) { premiereCase = this.paire[0]; nomCache1 = this._name; } if (casesDecouvertes == 2) { nbrCoups++; deuxiemeCase = this.paire.toString(); nomCache2 = this._name; lancerVerif = setInterval(verification, 1000); } } }; } // verification = function () { if (premiereCase != deuxiemeCase) { _root[nomCache1]._visible = 1; _root[nomCache2]._visible = 1; } else { score++; if (score == 6) { score = "Gagn !"; } } clearInterval(lancerVerif); casesDecouvertes = 0; };
395
Les jeux Partie IV
Analyse
Cases, caches, photos
Nous devons ds prsent prciser que nous allons utiliser trois termes plus ou moins similaires. Le jeu reprsente dans son tat initial, des photos retournes. On voit alors le dos des photos. Ces dernires sont positionnes des emplacements que nous pourrions qualier de cases. Bien videmment, on ne peut voir le dos des photos. Nous avons donc plac les occurrences dun symbole reprsentant un carr vert sur chaque photo, faisant ainsi ofce de cache et reprsentant le dos des photos.
Ligne 1 : nous crons un premier tableau qui va contenir une srie de 12 entres : des chiffres allant de 1 6 par paire. Ligne 2 : nous crons galement un deuxime tableau qui contiendra le contenu du premier avec les entres mlanges. [1,3,2,1,4,2,3,4]. Ligne 3 : comme son nom lindique, cette variable va comptabiliser le nombre de cases dcouvertes. Nous ne pouvons en effet dcouvrir plus de deux cases la fois. Ligne 4 : cette variable comptabilise le nombre de coups, cest--dire le nombre de paires retournes. Ligne 5 : enn, une dernire variable est charge de compter le nombre de paires trouves. Lignes 7 10 : cette boucle for() va permettre de remplir le tableau cr la ligne 1. Noublions pas que le but du jeu est de retrouver des paires doccurrences, nous devons donc manipuler des paires de variables. Le fait dajouter deux fois la mme valeur va nous permettre dobtenir le tableau suivant :
[1,1,2,2,3,4,4,4,5,5,6,6].
Nous allons prsent procder au mlange du tableau. Pour ce faire, nous allons utiliser un tableau vide, dans lequel nous allons stocker alatoirement les entres de celui que nous venons de construire. Ligne 12 : nous initialisons cette variable 12 car nous avons besoin dobtenir dans un premier temps, un chiffre compris entre 0 et 11, soit 12 valeurs. Ligne 13 : la boucle for() de cette ligne dinstruction va nous permettre de rpter 12 fois lextraction dune entre du tableau listeVignettes. Lignes 14 et 15 : nous ajoutons dans le tableau vide listesVignettesMelangees, une extraction voque ci-dessus. La liste va peu peu se vider. Cest pourquoi la valeur de la variable de la ligne 15 doit diminuer. An de mieux comprendre la ligne 14, ajoutons ces explications. Nous lavons rcrite ainsi :
elementAajouter = listeVignettes.splice(random(vignettesRestantes), 1); listesVignettesMelangees.push(elementAajouter);
396
Vous pouvez constater que nous avons ajout une ligne, mais simpli la comprhension. Nous avons ajout la suite de ces deux lignes, les quatre demandes de traces suivantes :
trace("Element ajout : "+elementAajouter); trace("Liste listeVignettes : "+listeVignettes); trace("Liste listesVignettesMelangees : "+listesVignettesMelangees); trace("-----------------------------------------");
Nous obtenons alors lafchage suivant dans la fentre Sortie.

Element ajout : 4 Liste listeVignettes : 1,1,2,2,3,3,4,5,5,6,6 Liste listesVignettesMelangees : 4 ----------------------------------------Element ajout : 5 Liste listeVignettes : 1,1,2,2,3,3,4,5,6,6 Liste listesVignettesMelangees : 4,5 ----------------------------------------Element ajout : 2 Liste listeVignettes : 1,1,2,3,3,4,5,6,6 Liste listesVignettesMelangees : 4,5,2 ----------------------------------------Element ajout : 4 Liste listeVignettes : 1,1,2,3,3,5,6,6 Liste listesVignettesMelangees : 4,5,2,4 ----------------------------------------Element ajout : 1 Liste listeVignettes : 1,2,3,3,5,6,6 Liste listesVignettesMelangees : 4,5,2,4,1 ----------------------------------------Etc.
La variable elementAajouter qui correspond lextraction grce la mthode splice(), contient bien une entre du premier tableau. En observant ensuite le contenu de nos deux tableaux, on constate que lun se vide peu peu, alors que le deuxime se remplit. Nous avons court lafchage du rsultat sur cette page, mais la n de lexcution de la boucle for() de la ligne 13, voici ce que lon obtient.
Element ajout : 6 Liste listeVignettes : 3,5 Liste listesVignettesMelangees : 4,5,2,4,1,1,2,6,3,6 ----------------------------------------Element ajout : 5 Liste listeVignettes : 3 Liste listesVignettesMelangees : 4,5,2,4,1,1,2,6,3,6,5 ----------------------------------------Element ajout : 3 Liste listeVignettes : Liste listesVignettesMelangees : 4,5,2,4,1,1,2,6,3,6,5,3 -----------------------------------------
397
Les jeux Partie IV
listeVignettes.splice() retire non seulement une entre dun tableau, mais renvoie galement la valeur extraite, cest pourquoi cette mthode se trouve dans push().
Remarque
Vous pouvez extraire plus dune entre si vous changez le chiffre 1 de notre exemple (le deuxime paramtre de la mthode) par une autre valeur.
Lignes 18 et 19 : ces variables vont servir dnir les positions horizontales et verticales des occurrences qui vont tres cres dynamiquement. Ligne 20 : nous avons besoin de placer 12 cases sur la scne pour composer notre jeu, la boucle for() va donc rpter les lignes dinstructions suivantes : Ligne 21 : la variable temporaire numeroImg prend pour valeur les entres du tableau contenant les chiffres mlangs. Ligne 22 : nous plaons sur la scne, les cases du jeu. Ligne 23 : nous plaons galement une occurrence qui va reprsenter le dos de la photo retourne. Lignes 24 et 25 : les photos et dos de photos sont placs au mme endroit. Ligne 26 : cette variable sincrmente an de dcaler le positionnement des photos vers la droite. Lignes 27 30 : si quatre photos ont t places cte cte pour constituer une premire ligne, cest que la valeur de la variable horizontale dpasse 450. La valeur de cette dernire est alors rinitialise 150, ce qui correspond la position _x des photos de la colonne de gauche sur la scne. Une nouvelle ligne va galement tre cre, il faut donc incrmenter la valeur de la variable verticale qui dnit la position _y des occurrences. Ligne 32 : nous attribuons chaque cache, cest--dire loccurrence qui se trouve audessus de la photo, un numro qui permet de retrouver les paires. En dautres termes, lorsque nous allons cliquer sur deux caches lun aprs lautre, sils portent tous les deux le mme numro, cest que le joueur sest souvenu de la position des deux photos. Il a peuttre eu aussi un peu de chance. Ligne 33 : un gestionnaire est dni pour chaque occurrence reprsentant un cache. partir de maintenant, les lignes dinstructions qui vont suivre vont sexcuter au moment o le joueur va cliquer sur un cache (une photo retourne). Rappelons quil est impossible de retourner plus de deux photos la fois. Ligne 34 : un premier test sassure quil ny a pas encore de photo retourne. Ligne 35 : si aucune photo nest encore retourne, loccurrence sur laquelle le joueur vient de cliquer est rendue invisible.
398
Ligne 36 : on comptabilise le nombre de photos retournes. Lignes 37 40 : dans le cas o une photo est retourne, une premire variable intitule premiereCase prend pour valeur le numro de loccurrence sur laquelle le joueur vient de cliquer. Il est galement important de retenir le nom de loccurrence qui vient dtre masque, car il faudra la rendre nouveau visible si les deux photos retournes sont diffrentes. Cest le rle de la variable nomCache1. Lignes 41 46 : dans le cas o deux cases sont retournes, on incrmente le nombre de coups, une deuxime variable prend pour valeur le nom de loccurrence sur laquelle le joueur vient de cliquer. La ligne 45 lance lidentication des deux cartes an de les comparer. Vous noterez que la fonction na pas t simplement appele. Nous sommes passs par la fonction setInterval() qui permet de temporiser le dclenchement de la fonction quelle excute. La valeur 1 000 signie que les photos restent visibles 1 seconde. Changez donc ce paramtre si vous souhaitez afcher les photos plus longtemps lcran. Ligne 51 : cest donc le rle de cette fonction de vrier si les numros des deux occurrences qui viennent dtre cliques, sont identiques. Lignes 52 56 : ce test qui vrie si les occurrences qui viennent dtre masques portent le mme numro, va soit les rendre nouveau visibles, soit incrmenter le score. Ligne 57 : un test vrie si la variable score na pas atteint la valeur 6. Cela signierait alors que toutes les paires de photos ont t trouves. Ligne 61 : nous annulons le test qui sexcute en continu. Ligne 62 : an que le joueur puisse nouveau retourner deux autres photos, nous devons rinitialiser la variable casesDecouvertes 0. Voil, comme vous laurez remarqu, le script nest pas trop difcile, seules les lignes 38 et 43 peuvent poser des difcults de comprhension si lon na pas lhabitude de manipuler les tableaux. Retenez simplement que ces deux variables stockent les numros doccurrences qui avaient t initialement dnis.
Puzzle
Pour lanimation prcdente, nous avions opt pour un dveloppement entirement dynamique, pour celle-ci, nous prfrons retenir deux tudes de cas. Pour viter certaines confusions, nous vous invitons consulter dans un premier temps, uniquement lune des deux animations. Nous allons donc commencer par vous prsenter une animation dont les pices de puzzle se trouvent dj sur la scne et portent dj des noms.
399
Les jeux Partie IV
Figure 19-2
Les pices de ce puzzle sont dj places sur la scne, seuls le dplacement et la vrication de la position sont effectus en ActionScript.
Chemin daccs : Jeux/JeuxEnfants/JeuxPuzzle.a Comme nous lvoquions en introduction, la scne contient des occurrences au nombre de 15, toutes intitules piece1, piece2 piece15. Le script de cette animation a la particularit dtre trs simple, car le dveloppement dune telle application ne prsente pas de difcult particulire. Nous aurions pu rduire et ainsi simplier davantage le code si nous avions retir les lignes dinstructions relatives au magntisme des pices. En effet, lorsque le joueur place une pice de puzzle au bon endroit, elle est recale au pixel prs, et il nest plus possible de la bouger. Revenons sur la structure du script qui est compos de deux parties : 1. Linitialisation des variables et tableaux. 2. Lattribution de gestionnaires onPress et onRelease aux occurrences. Prcisons que cette deuxime partie contient le cur du code qui assure le glisser-deplacer des pices.
400
Script
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 var placeX = 50; var placeY = 50; listePlacesX = [0]; listePlacesY = [0]; // for (i=1; i<=15; i++) { // _root["piece"+i]._x = random(520)+40; _root["piece"+i]._y = random(350)+40; // _root["piece"+this.i].onPress = function() { this.startDrag(); this.swapDepths(50); }; _root["piece"+this.i].onRelease = _root["piece"+this.i].onReleaseOutside=function () { stopDrag(); numeroPiece = this._name.substr(5, 2); placeX = listePlacesX[numeroPiece]; placeY = listePlacesY[numeroPiece]; coordXDepose = this._x; coordYDepose = this._y; decalHoriz = Math.abs(placeX-coordXDepose); decalVertic = Math.abs(placeY-coordYDepose); if (decalHoriz<10 && decalVertic<10) { delete this.onPress; delete this.onRelease; delete this.onReleaseOutside; this._x = placeX; this._y = placeY; } }; // listePlacesX.push(placeX); listePlacesY.push(placeY); // placeX += 100; if (placeX>450) { placeX = 50; placeY += 100; } }
Analyse
Lignes 1 et 2 : ces deux variables vont dnir le premier emplacement en _x et _y de la premire pice de puzzle la plus en haut gauche. Elle vont peu peu sincrmenter entre les lignes 36 40, avant dtre utilises aux lignes 33 et 34.
401
Les jeux Partie IV
Ligne 3 et 4 : ces deux tableaux vont contenir grce aux lignes 33 et 34, les emplacements vers lesquels le joueur devra dposer les pices de puzzle. Chaque pice va possder un emplacement xe. Vous noterez tout de mme que la premire entre du tableau possde dj une valeur. Rappelons que la premire pice de puzzle va porter le nom doccurrence piece1. Nous allons utiliser les numros dindex du tableau pour tablir une corrlation avec les noms doccurrences. Loccurrence intitule piece3 va contenir deux variables dont les valeurs auront t rcupres lindex 3 des tableaux listePlaceX et listePlaceY. Reportez-vous aux explications des lignes dinstructions 33 et 34 pour voir quel sera le contenu de ces deux tableaux. Ligne 6 : nous allons prsent procder lassignation de gestionnaires de type onPress et onRelease pour chaque occurrence. Il est trs important de prciser que nous allons utiliser le chiffre qui se trouve derrire le nom de chaque occurrence comme index pour tablir une relation avec les tableaux listePlaceX et listePlaceY. Lignes 8 et 9 : nous commenons par mlanger la position des occurrences actuellement prsentes sur la scne. Lignes 11 14 : nous affectons ensuite le premier gestionnaire dont le rle est de rendre chaque pice du puzzle mobile. Vous noterez la prsence de la fonction swapDepths() qui devra placer au premier plan la pice clique. Nous aurions pu choisir nimporte quelle valeur comprise entre 16 et linni. Ligne 15 : nous allons prsent affecter chaque occurrence un gestionnaire qui va devoir excuter toutes les lignes dinstructions comprises entre 16 et 30, lorsquune pice de puzzle sera relche. Nous prfrons grer deux vnements, car si vous omettiez la ligne 13, vous risqueriez de relcher votre occurrence alors quune autre se trouve entre celle que vous avez saisie et le curseur. Ligne 16 : lorsque lutilisateur relche une pice de puzzle, il faut alors arrter son tat de mobilit. Ligne 17 : nous venons de lvoquer, nous allons exploiter le sufxe du nom de chaque occurrence, nous devons alors lextraire et le stocker dans une variable. Le mot-cl this fait rfrence au nom qui gure devant le gestionnaire dvnement. Gardez lesprit que le premier caractre dune chane exploite comme paramtre de la mthode substr() porte le numro 0. Lignes 18 et 19 : nous stockons dans deux variables intitules placeX et placeY, les valeurs rcupres des deux tableaux listePlaceX et listePlaceY qui contiennent les emplacements sur lesquels le joueur doit dposer les pices. Lignes 20 et 21 : nous stockons dans deux autres variables, la position actuelle de loccurrence relche.
402
Lignes 22 et 23 : nous calculons les carts exprims en pixels entre les coordonnes _x et _y de loccurrence relche et le point de destination sur lequel le joueur doit relcher la pice de puzzle. Lignes 24 30 : si la pice de puzzle (loccurrence) est place moins de 10 pixels de son emplacement, on supprime alors ses gestionnaires qui permettent de la rendre mobile et on cale loccurrence au pixel prs. Attention ! Le code que nous analysons depuis la ligne 15 est valable pour les occurrences au moment o le joueur relchera une pice de puzzle. Laccolade qui ferme le gestionnaire se trouve la ligne 31. Les instructions qui se trouvent donc entre les lignes 33 et 41 sont excutes au chargement de lanimation, lors de la construction dynamique de linterface, cest--dire lors du placement des images (les pices du puzzle) sur la scne. Lignes 33 et 34 : chaque occurrence vient dtre programme an quelle ragisse au glisser-dplacer. Nous avons vu quaux lignes 18 et 19, nous faisions rfrence ces listes. Mais que contiennent ces dernires ? Ces deux lignes 33 et 34 vont nous permettre dobtenir la n de lexcution de la boucle, les tableaux suivants :
0,50,150,250,350,450,50,150,250,350,450,50,150,250,350,450 0,50,50,50,50,50,150,150,150,150,150,250,250,250,250,250
Rappelons que chaque pice de puzzle va venir rcuprer dans ces tableaux des valeurs places aux index indiqus la n du nom de leur occurrence. Loccurrence intitule piece3 doit venir se placer 250 pixels du bord gauche de la scne et 50 pixels du haut de la scne. Lignes 36 40 : pour constituer les tableaux des lignes dinstructions prcdentes, dont le contenu est afch ci-dessus, nous incrmentons deux variables.
Bogue ventuel
Pour xer un emplacement prcis chaque pice relche, nous devons calculer lcart entre ses coordonnes et celles auxquelles elle doit se trouver. Le problme est que nous testons si cet cart est infrieur 10 pixels. Si une pice est relche entre 0 et -10 pixels de son emplacement de destination, le test de la ligne 24 ne peut pas fonctionner. Cest pourquoi il est indispensable de rendre absolues les valeurs des carts calculs aux lignes 22 et 23. Nous voquions en introduction cette tude de cas, que nous avions retenu deux animations. Voici la deuxime qui ne contient aucune occurrence sur la scne, lexception dun cadre noir qui dlimite lemplacement du puzzle.
403
Les jeux Partie IV
Puzzle avec chargement dynamique de photos

Pour dvelopper cette animation, nous avons t obligs de faire appel la classe MovieClipLoader(), car le placement des pices du puzzle sur la scne se fait par le chargement dimage. Si vous travaillez sur Flash MX 2004, vous devez uniquement utiliser des images .jpg non optimises. Rappelons donc que laffectation dun gestionnaire une image charge ne peut se faire tant que la n du chargement nest pas constate. Nous reviendrons sur ce dernier point dans lanalyse des lignes dinstructions. Si vous avez commenc par lire la premire tude de cas, vous constaterez que le code est trs ressemblant celui que nous allons voir, ainsi que la structure du script.
Chemin daccs : Jeux/JeuxEnfants/JeuxPuzzle2.a Cette animation a la particularit de ne rien contenir sur la scne. Le script suivant suft construire ce puzzle.
Script
var placeX = 50; var placeY = 50; listePlacesX = [0]; listePlacesY = [0]; // for (i=1; i<=15; i++) { _root.createEmptyMovieClip("piece"+i, i); _root["piece"+i]._x = random(520)+40; _root["piece"+i]._y = random(350)+40; // imageAcharger = "images/img"+i+".jpg"; // _root["chargeur"+i] = new MovieClipLoader(); _root["chargeur"+i].i = i; _root["chargeur"+i].onLoadComplete = function() { _root["piece"+this.i].onPress = function() { this.startDrag(); this.swapDepths(50); }; _root["piece"+this.i].onRelease = _root["piece"+this.i]. onReleaseOutside=function () { 21 stopDrag(); 22 numeroPiece = this._name.substr(5, 2); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
404
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 }
placeX = listePlacesX[numeroPiece]; placeY = listePlacesY[numeroPiece]; coordXDepose = this._x; coordYDepose = this._y; decalHoriz = Math.abs(placeX-coordXDepose); decalVertic = Math.abs(placeY-coordYDepose); if (decalHoriz<10 && decalVertic<10) { delete this.onPress; delete this.onRelease; delete this.onReleaseOutside; this._x = placeX; this._y = placeY; } }; }; _root["chargeur"+i].loadClip(imageAcharger, _root["piece"+i]); // listePlacesX.push(placeX); listePlacesY.push(placeY); // placeX += 100; if (placeX>450) { placeX = 50; placeY += 100; }
Analyse
Lignes 1 et 2 : ces deux variables vont dnir le premier emplacement en _x et _y de la premire pice de puzzle la plus en haut gauche. Elle vont peu peu sincrmenter entre les lignes 36 40, avant dtre utilises aux lignes 33 et 34. Lignes 3 et 4 : ces deux tableaux vont contenir grce aux lignes 33 et 34, les emplacements vers lesquels le joueur devra dposer les pices de puzzle. Chaque pice va possder un emplacement xe. Vous noterez tout de mme que la premire entre du tableau possde dj une valeur. Rappelons que la premire pice de puzzle va porter le nom doccurrence piece1. Nous allons utiliser les numros dindex du tableau pour tablir une corrlation avec les noms doccurrences : loccurrence intitule piece3 va contenir deux variables dont les valeurs auront t rcupres lindex 3 des tableaux listePlaceX et listePlaceY. Reportez-vous aux explications des lignes dinstructions 40 et 41 pour voir quel sera le contenu de ces deux tableaux. Lignes 6 9 : nous allons charger des images .jpg sur la scne pour reprsenter les pices de notre puzzle. Elles vont donc devoir tre rattaches des occurrences, la boucle for() va donc crer dans un premier temps 15 occurrences vides (ligne 7), puis les disposer de faon alatoire sur la scne (lignes 8 et 9).
405
Les jeux Partie IV
Ligne 11 : dans une variable, nous stockons le rsultat dune concatnation qui va renvoyer la valeur suivante :
images/img1.jpg
En effet, les images de notre puzzle se trouvent dans un dossier intitul images. Elles ont toutes le mme prxe : img1.jpg, img2.jpg, img3.jpg, etc. Ligne 13 : comme nous vous le prcisions en introduction cette animation, il est impossible dassigner un gestionnaire une image ( loccurrence qui la contient) qui est charge dynamiquement avec la mthode loadMovie(). Si vous tentez en effet une telle assignation alors que le chargement nest pas termin, le gestionnaire ne reste pas. Vous avez alors deux solutions. Tester la n du chargement en utilisant les mthodes getBytesLoaded() et getBytesTotal() avant dassigner des gestionnaire aux occurrences. Utiliser la classe MovieClipLoader(). Nous avons opt pour la mthode la plus simple et la plus conseille. Nous crons donc une instance de la classe MovieClipLoader(). Noubliez pas que cette ligne dinstruction se trouve dans une boucle, nous allons donc crer quinze instances. Ligne 14 : nous assignons chaque instance une variable qui prend pour valeur celle de i. Lignes 15 19 : le gestionnaire onLoadComplete va nous permettre de prciser ce qui doit tre fait lorsque limage sera totalement charge : rendre loccurrence mobile au clic sur une image (lignes 16 18). Avant daller plus loin dans lanalyse du script, il est trs important de prciser que nous allons utiliser le chiffre qui se trouve derrire le nom de chaque occurrence cre la ligne 7, comme index pour tablir une relation avec les tableaux listePlaceX et listePlaceY. Ligne 20 : nous allons prsent affecter chaque occurrence, un gestionnaire qui va devoir excuter toutes les lignes dinstructions comprises entre 16 et 30, lorsquune pice de puzzle sera relche. Nous prfrons grer deux vnements car si vous omettiez la ligne 13, vous risqueriez de relcher votre occurrence alors quune autre se trouve entre celle que vous avez saisie et le curseur. Ligne 21 : lorsque lutilisateur relche une pice de puzzle, il faut alors arrter son tat de mobilit. Ligne 22 : nous lvoquions ci-dessus, nous allons exploiter le sufxe du nom de chaque occurrence, nous devons alors lextraire et le stocker dans une variable. Le mot-cl this fait rfrence au nom qui gure devant le gestionnaire dvnement. Gardez lesprit que le premier caractre dune chane exploite comme paramtre de la mthode substr() porte le numro 0. Lignes 23 et 24 : nous stockons dans deux variables intitules placeX et placeY, les valeurs rcupres des deux tableaux listePlaceX et listePlaceY qui contiennent les emplacements sur lesquels le joueurs doit dposer les pices.
406
Lignes 25 et 26 : nous stockons dans deux autres variables, la position actuelle de loccurrence relche. Lignes 27 et 28 : nous calculons les carts exprims en pixels entre les coordonnes _x et _y de loccurrence relche, et le point de destination sur lequel le joueur doit relcher la pice de puzzle. Lignes 29 36 : si la pice de puzzle (loccurrence) est place moins de 10 pixels de son emplacement, on supprime alors ses gestionnaires qui permettent de la rendre mobile et on cale loccurrence au pixel prs. Attention ! Le code que nous analysons depuis la ligne 15 est valable pour les occurrences au moment o le joueur relchera une pice de puzzle. Laccolade qui ferme le gestionnaire se trouve la ligne 31. Les instructions qui se trouvent donc entre les lignes 33 et 41 sont excutes au chargement de lanimation, lors de la construction dynamique de linterface, cest--dire lors du placement des images (les pices du puzzle) sur la scne. Ligne 38 : nous avons cr une instance de la classe MovieClipLoader(), nous avons dni le contenu du gestionnaire onLoadComplete(), nous devons prsent lancer le chargement de limage dans une occurrence. Lignes 40 et 41 : chaque occurrence vient dtre programme an quelle ragisse au glisser-dplacer. Nous avons vu quaux lignes 18 et 19, nous faisions rfrence ces listes. Mais que contiennent ces dernires ? Ces deux lignes 33 et 34 vont nous permettre dobtenir la n de lexcution de la boucle, les tableaux suivants :
0,50,150,250,350,450,50,150,250,350,450,50,150,250,350,450 0,50,50,50,50,50,150,150,150,150,150,250,250,250,250,250
Rappelons que chaque pice de puzzle va venir rcuprer dans ces tableaux, des valeurs places aux index indiqus la n du nom de leur occurrence. Loccurrence intitule piece3 doit venir se placer 250 pixels du bord gauche de la scne et 50 pixels du haut de la scne. Lignes 43 47 : pour constituer les tableaux des lignes dinstructions prcdentes, dont le contenu est afch ci-dessus, nous incrmentons deux variables.
Bogue ventuel
Pour xer un emplacement prcis chaque pice relche, nous devons calculer lcart entre ses coordonnes et celles auxquelles elle doit se trouver. Le problme est que nous testons si cet cart est infrieur 10 pixels. Si une pice est relche entre 0 et -10 pixels de son emplacement de destination, le test de la ligne 29 ne peut pas fonctionner. Cest pourquoi il est indispensable de rendre absolues les valeurs des carts calculs aux lignes 27 et 28.
407
Les jeux Partie IV
Figure 19-3
La mise en couleur des diffrentes parties de ces caractres se fait par un simple clic aprs avoir slectionn une couleur.
Jeu de coloriage
Cette tude de cas extrmement simple ne contient que peu de code. Elle est nanmoins intressante, car elle dmontre quil est possible de ne pas nommer les occurrences lorsque vous les placez sur la scne. Pour procder la cration de nos formes, nous avons tap un texte sur la scne avant de le vectoriser. Nous avons ensuite trac des droites en traversant les caractres, il est alors trs simple de slectionner uniquement une partie du caractre par un clic avec la che noire.
Figure 19-4
Effectuez 2 sparations pour passer de ltat texte ltat formes.
408
Remarque
Pour passer de ltat texte ltat formes, vous devez appliquer deux fois le raccourci clavier Ctrl + B ou Commande + B. La premire fois, vous transformez le texte en plusieurs composs dun caractre, la deuxime fois, vous obtenez des formes.
Chemin daccs : Jeux/JeuxEnfants/JeuxColoriage.a La scne ne contient quune seule occurrence, un carr vide au contour noir (voir la gure 19-5) qui va venir se placer autour de la case de couleur slectionne. Nous aurions pu crer cette occurrence dynamiquement, nous avons prfr conomiser quelques lignes de codes.
Figure 19-5
Pour indiquer la couleur en cours de slection, ce petit carr vient se positionner aux mmes coordonnes _x et _y que la case clique.
Comme vous avez pu le constater, le script ne contient que peu de lignes dinstructions car la technique de mise en couleur est trs simple. Voici les grandes tapes de dveloppement : 1. Cration dun tableau contenant des codes couleurs. 2. Cration du nuancier de couleur (gure 19-5). 3. Affectation des gestionnaires aux pastilles du nuancier et aux formes mettre en couleur.
Remarque
Dans cette animation, vous pouvez choisir une couleur et lappliquer ensuite plusieurs occurrences ou faire linverse, cest--dire cliquer sur une occurrence et essayer plusieurs couleurs.
Script
1 var lstCouleurs = ["000000", "333333", "666666", "999999", "BBBBBB", "FFFFFF", "FF0000", "00FF00", "0000FF", "FFFF00", "FF00FF", "00FFFF"]; 2 var memoCouleur = "0xFF0000"; 3 // 4 cadreSelection._x = 109; 5 cadreSelection._y = 388; 6 // 7 for (i=0; i<lstCouleurs.length; i++) {
409
Les jeux Partie IV
8 _root.attachMovie("pastille", "pastille"+i, i); 9 _root["pastille"+i]._x = 19+(i*15); 10 _root["pastille"+i]._y = 388; 11 _root["pastille"+i].saCouleur = new Color(_root["pastille"+i]); 12 _root["pastille"+i].saCouleur.setRGB("0x"+lstCouleurs[i]); 13 _root["pastille"+i].onPress = function() { 14 _root.memoCouleur = this.saCouleur.getRGB(); 15 cadreSelection._x = this._x; 16 cadreSelection._y = this._y; 17 _root[nomOccurrenceActive].saCouleur.setRGB(_root.memoCouleur); 18 }; 19 } 20 for (i=2; i<=11; i++) { 21 _root["instance"+i].saCouleur = new Color(_root["instance"+i]); 22 _root["instance"+i].onPress = function() { 23 this.saCouleur.setRGB(_root.memoCouleur); 24 _root.nomOccurrenceActive = this._name; 25 }; 26 }
Analyse
Ligne 1 : nous crons un tableau qui contient les couleurs que nous allons pouvoir utiliser dans cette animation. Ligne 2 : une premire variable est galement initialise dans le but de mmoriser la couleur en cours de slection. Lignes 4 et 5 : lorsque lutilisateur cliquera sur une case de couleur, un cadre noir indiquera la slection en cours en venant lentourer. Ligne 7 : cette boucle for() a pour fonction de crer les cases de couleur et leur assigner un gestionnaire (voir la gure 19-5). Ligne 8 : le symbole avec le nom de liaison pastille, est plac sur la scne. Toutes les occurrences obtenues sintitulent pastille1, pastille2, etc. Lignes 9 et 10 : les occurrences prcdemment cres sont positionnes sur la scne 388 pixels du haut de la scne. Horizontalement, elles sont espaces de 3 pixels les unes des autres, car chaque occurrence mesure en effet 12 pixels de largeur. Le 19 sert indiquer la position horizontale initiale de la premire case de couleur. Ligne 11 : nous crons lintrieur de chaque case de couleur, une instance de la classe Color() intitule saCouleur. Cest grce elle quil est dj possible daffecter une couleur aux pastilles. Ligne 12 : la couleur de chaque pastille est dnie en paramtres du tableau lstCouleurs que nous avions cr sur la premire ligne du script. Lignes 13 18 : ce gestionnaire assign toutes les occurrences cres dynamiquement, va permettre de stocker dans une variable intitule memoCouleur, le code couleur de la case clique. Par ailleurs, le cadre noir vient se placer sur la case clique. la ligne 24, une
410
variable intitule nomOccurrenceActive aura pour valeur le nom de la dernire forme clique. La ligne 17 permet donc dappliquer la couleur choisie. Lignes 20 26 : nous allons assigner de nouveaux gestionnaires aux formes que nous souhaitons mettre en couleur. Nous devons donc passer par une boucle, mais il faut dabord connatre le nombre doccurrences et leurs noms. Si vous nattribuez pas de nom une occurrence, vous devez savoir quelle sappelle par dfaut instanceX (X tant un chiffre qui sincrmente automatiquement ds que vous dposez un symbole sur la scne). Pour connatre prcisment le nombre doccurrences prsentes dans une image de votre timeline, vous pouvez les compter, mais aussi consulter la fentre Debugger. Elle propose en effet dans sa partie suprieure gauche, un listing de toutes les occurrences. vitez tout de mme ce genre de choix. Nous vous conseillons toujours de nommer vos occurrences.
Figure 19-6
La fentre Debugger a plusieurs fonctionnalits, mais elle permet surtout de connatre la prsence et le nom des occurrences dune image.
Ligne 21 : nous crons une instance de la classe Color() an de pouvoir mettre en couleur les formes. Ligne 22 : ce gestionnaire sexcutera lorsque lutilisateur cliquera sur une forme. La mise en couleur de la forme sera effectue et une variable mmorisera le nom de loccurrence clique.
Bogue ventuel
Lorsque vous faites rfrence un code couleur, noubliez pas de spcier le prxe 0x qui permet dindiquer au player Flash quil sagit dun code couleur en hexadcimal.
411
Les jeux Partie IV
Jeu de mmoire sonore

Lintrt de cette animation est la temporisation de squences. En programmation, il est difcile denchaner des squences avec des temps de pause diffrents et des phases de vrication dtats et de donnes en fonction dvnements. Cest pourquoi nous avons cherch un jeu qui pourrait se prter de telles contraintes. Le jeu de mmoire convient parfaitement. Le fonctionnement du jeu est le suivant. Lorsque lutilisateur clique sur le bouton situ en haut de la scne, les 9 touches deviennent cliquables et une premire note musicale est mise. Il faut alors cliquer sur la case qui vient de sanimer et jouer le son. Aprs chaque bonne reproduction dune squence, une note est ajoute.
Figure 19-7
Vous vous souvenez de ce clbre jeu o vous deviez rpter une squence sonore sur 4 gros boutons en couleurs ? En voici la version Flash avec encore plus de boutons.
Chemin daccs : Jeux/JeuxEnfants/MemoSonore.a Nous avons commenc par placer sur la scne deux occurrences intitules btLancerJeu et btRevoir. Nous avons ensuite disposes sous forme de tableau (3 lignes de 3 cases) 9 autres occurrences intitules t0 t8.
412
Nous aurions pu placer dynamiquement ces 9 cases, mais nous avons souhait limiter le script de cette animation qui est dj trs long.
Script
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 //########################################## //######## Initialisation des variables #### //########################################## // var serieNotesAJouer = []; var serieNotesJouees = []; var numeroSonAJouer:Number = 0; var nombreSonAJouer = 1; var ecoute = new Sound(); var erreurConstatee = false; var prochainNumeroNiveauAAllumer = 1; var nbrErreurs = 0; //######################################### //##### Initialisation des occurrences #### //######################################### // btRevoir._alpha = 20; ///######################################### //###### Initialisation des 9 touches ###### //########################################## // for (i=0; i<=8; i++) { _root["t"+i]._alpha = 30; } // function initialiserTouches() { // for (i=0; i<=8; i++) { _root["t"+i].sonNumero = i; _root["t"+i]._alpha = 100; _root["t"+i].onPress = function() { serieNotesJouees.push(this.sonNumero); voirPion(this); ecoute.loadSound("sons/son"+(this.sonNumero+1)+".mp3",1); verifierErreurs(); }; } } // btLancerJeu.onPress = function() { btRevoir._alpha = 100; serieNotesJouees = [];
413
Les jeux Partie IV
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
nbrErreurs = 0; for (i=0; i<30; i++) { serieNotesAJouer.push(random(9)); _root.attachMovie("recrangleNiveau","niveau"+(i+1),i,{_x:555, _y:375-(i*12), _alpha:25}); } // initialiserTouches(); numeroSonAJouer = 0; serieNotesJouees = []; lancerLecture = setInterval(lectureSerieSonDecouvrir, 1000); // }; // function jouerUneNote() { voirPion(_root["t"+serieNotesAJouer[numeroSonAJouer]]); ecoute.loadSound("sons/son"+(serieNotesAJouer[numeroSonAJouer]+1)+".mp3",1); } // // // function verifierErreurs() { if (serieNotesJouees.length == nombreSonAJouer) { for (i=0; i<serieNotesJouees.length; i++) { if (serieNotesAJouer[i] != serieNotesJouees[i]) { erreurConstatee = true; } } if (erreurConstatee) { nbrErreurs++; numeroSonAJouer = 0; serieNotesJouees = []; lancerLecture = setInterval(lectureSerieSonDecouvrir, 1000); } else { _root["niveau"+prochainNumeroNiveauAAllumer]._alpha = 100; prochainNumeroNiveauAAllumer++; nombreSonAJouer++; numeroSonAJouer = 0; serieNotesJouees = []; lancerLecture = setInterval(lectureSerieSonDecouvrir, 1000); } erreurConstatee = false; } } // function lectureSerieSonDecouvrir() { jouerUneNote(); numeroSonAJouer++; if (numeroSonAJouer>=nombreSonAJouer) { clearInterval(lancerLecture); } }
414
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
// btRevoir.onPress = function() { numeroSonAJouer = 0; serieNotesJouees = []; lancerLecture = setInterval(lectureSerieSonDecouvrir, 1000); }; function voirPion(occurrence) { occurrence.onEnterFrame = function() { this._xscale -= 2; this._yscale -= 2; this._alpha -= 5; if (this._xscale<=80) { this._xscale = 100; this._yscale = 100; this._alpha = 100; delete this.onEnterFrame; } }; }
Analyse
Lignes 5 12 : nous initialisons des variables pour pouvoir les utiliser dans notre programme. Comme nous allons devoir en utiliser beaucoup, nous avons fait extrmement attention choisir des noms trs reprsentatifs des valeurs quelles vont contenir. Ligne 18 : nous masquons lgrement loccurrence du bouton qui permettra de rejouer une squence sonore lorsque lutilisateur naura pas bien entendu toutes les notes joues. Nous aurions pu ajouter, en ligne 19, linstruction btRevoir.enabled=false pour viter que le curseur soit reprsent sous la forme dun doigt au survol de loccurrence. Il faudrait alors rtablir la valeur de cette proprit true la ligne 44. Lignes 24 26 : nous rendons lgrement transparentes les touches pour indiquer lutilisateur quelles ne sont pas cliquables. Lignes 28 40 : nous initialisons les 9 touches du jeu pour quelles puissent mettre un son lors du clic (ligne 36). Ligne 31 : on associe un numro chaque touche. Ligne 32 : on rtablit lopacit de chaque touche. Lignes 33 38 : on dnit un gestionnaire dvnement qui sera excut lorsque lutilisateur cliquera sur lune des 9 touches. Ligne 34 : on ajoute le numro de la touche presse une liste pour pouvoir comparer les notes joues celles quil fallait jouer. Ligne 35 : on fait appel la fonction voirPion() qui permet danimer la touche clique.
415
Les jeux Partie IV
Ligne 36 : un son est jou. Il sagit dune note dont le nom de chier est obtenu par concatnation de la chane de caractres son et de la valeur de la variable sonNumero associe chaque touche (ligne 31). Ligne 37 : on fait appel la fonction verifierErreurs() (lignes 65 88) an de valider la squence joue par lutilisateur. Lignes 42 56 : ce gestionnaire dvnement est charg dinitialiser le jeu pour dmarrer une partie. Ligne 43 : le bouton servant rejouer la squence est rendu visuellement actif. Ligne 44 : on initialise et vide le tableau serieNotesJouees pour pouvoir le remplir progressivement chaque note presse. Ligne 45 : la variable nbrErreurs permettra de vrier si une diffrence est constate entre la note attendue (quil fallait jouer) et la note joue par lutilisateur. Lignes 46 49 : nous disposons les 30 rectangles ( droite sur la scne) servant indiquer le niveau atteint par le joueur. Ligne 51 : nous initialisons les touches. Ligne 52 : nous prcisons que le son jouer est le premier de la liste. Ligne 54 : nous lanons une fonction setInterval() an dexcuter la fonction lectureSerieSonDecouvrir toutes les 1 000 millisecondes (soit 1 seconde). Lignes 58 61 : cette fonction permet den excuter une autre intitule voirPion() et de jouer le son dune note. Lignes 65 88 : la fonction verifierErreurs() est appele chaque pression sur une touche. Lignes 67 72 : nous commenons par nous assurer que le nombre de notes joues est identique la valeur de la variable nombreSonAJouer pour viter un bogue sur lequel nous reviendrons plus tard. Nous effectuons ensuite une boucle an de comparer les numros des notes joues avec ceux des notes quil fallait jouer. Lignes 73 85 : nous vrions si une erreur a t constate. Lignes 74 77 : si une erreur est constate, nous rinitialisons certaines variables pour pouvoir relancer la partie. Lignes 79 84 : si aucune erreur nest constate, nous rinitialisons certains paramtres (variables et proprits) pour pouvoir poursuivre le jeu. Ligne 86 : nous rinitialisons la valeur de la variable erreurConstatee false an de pouvoir refaire dautres tests de vrication derreurs. Lignes 90 96 : la fonction lectureSerieSonDecouvrir permet de parcourir le tableau serieNotesAJouer pour jouer les sons de la squence que lutilisateur doit reproduire. Lorsque toutes les notes sont joues, on interrompt la fonction setInterval() excute aux lignes 54, 77, 84 ou 101. Lignes 98 102 : ce gestionnaire permet de rejouer la squence reproduire.
416
Lignes 104 116 : cette fonction permet de raliser une animation des touches qui deviennent de plus en plus petites et lgrement transparentes avant de revenir leur tat initial.
Bogues ventuels
Les bogues dans une telle animation peuvent tre nombreux. Nous vous conseillons donc de nommer vos variables avec des noms reprsentatifs de ce quelles contiennent ou reprsentent.
Jeu du morpion
Nous avons voulu raliser une animation trs simple, pour permettre aux personnes dbutant en programmation dutiliser les boucles et les tableaux. Le jeu du morpion se prte tout fait cela et cest pourquoi nous lavons retenu.
Figure 19-8
Le clbre jeu de morpion : le joueur doit russir aligner 3 formes identiques avant son adversaire.
Chemin daccs : Jeux/JeuxEnfants/Morpion.a Comme nous venons de lvoquer, nous avons cherch simplier la conception de cette animation. Cest pourquoi nous avons commenc par crer un symbole avec 3 imagescls. La premire est une image-cl contenant uniquement un carr, la deuxime contient ce mme carr avec le dessin dune croix et la troisime le dessin dun rond.
417
Les jeux Partie IV
Nous avons plac le symbole 9 fois sur la scne pour obtenir la disposition reprsente sur la gure 19-8. Chaque occurrence est nomme a0, a1 et a2 pour la premire ligne, b0, b1 et b2 pour la deuxime ligne, et enn c0, c1 et c2 pour la troisime et dernire ligne. Un texte dynamique dont le nom de variable est vMessage est cr sous les cases pour pouvoir afcher le mot Gagn lorsque lun des deux joueurs aura remport une manche. Dans un souci de simplication, nous navons pas prvu la possibilit de relancer une partie.
Script
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 var lignes = ["a", "b", "c"]; var lignea = [5, 5, 5]; var ligneb = [5, 5, 5]; var lignec = [5, 5, 5]; var lignesTotal = []; lignesTotal = lignea.concat(ligneb, lignec); var joueur = true; for (i=0; i<=2; i++) { for (j=0; j<=2; j++) { _root[lignes[i]+j].onPress = function() { var nomCetteOccurrence = this._name; var chiffre = nomCetteOccurrence.substr(1, 1); var lettre = nomCetteOccurrence.substr(0, 1); switch (joueur) { case true : _root["ligne"+lettre][chiffre] = 1; break; case false : _root["ligne"+lettre][chiffre] = 0; break; } joueur = !joueur; this.gotoAndStop(Number(joueur)+2); verifierLigne(); }; } } function verifierLigne() { lignesTotal = []; lignesTotal = lignea.concat(ligneb, lignec);
418
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 }
ligne0 ligne1 ligne2 ligne3 ligne4 ligne5 ligne6 ligne7
= = = = = = = =
[0, [3, [6, [0, [1, [2, [0, [6,
1, 4, 7, 3, 4, 5, 4, 4,
2]; 5]; 8]; 6]; 7]; 8]; 8]; 2];
for (i=0; i<=7; i++) { valeur1 = _root["ligne"+i][0]; valeur2 = _root["ligne"+i][1]; valeur3 = _root["ligne"+i][2]; valeur1 = lignesTotal[valeur1]; valeur2 = lignesTotal[valeur2]; valeur3 = lignesTotal[valeur3]; ligneComplete = valeur1+valeur2+valeur3; if (ligneComplete == 3 || ligneComplete == 0) { vMessage = "Gagn"; } }
Analyse
Avant toute explication sur les lignes dinstructions qui constituent notre script, voyons comment nous allons pouvoir dtecter la prsence dune ligne sur le plateau jouer. Nous pouvons dire que le tableau de 3 lignes de 3 cellules reprsente 9 cases. Nous allons crer un tableau intitul lignesTotal dans lequel nous allons concatner les 3 listes lignea, ligneb et lignec. Nous allons ensuite tester les 7 combinaisons susceptibles de contenir les mmes formes. Ligne 1 : nous initialisons un premier tableau dont les valeurs correspondent aux sufxes des noms de lignes que nous allons constituer. Lignes 3 5 : nous initialisons 3 tableaux qui contiennent des valeurs que nous xons 5 pour pouvoir vrier ultrieurement si une ligne t obtenue avec 3 formes identiques. Nous reviendrons sur les dtails quelques lignes plus loin. Ligne 7 : nous initialisons le fameux tableau qui va contenir les valeurs des 3 listes lignea, ligneb et lignec. Ligne 8 : nous remplissons le tableau par concatnation.
419
Les jeux Partie IV
Ligne 10 : la variable joueur va prendre successivement les valeurs true et false pour dnir alternativement le tour de chaque joueur. Lignes 12 31 : ces deux boucles for imbriques permettent de dnir les gestionnaires dvnements associs chacune des 3 cellules du tableau de 9 cases. Ligne 14 : cette ligne est importante comprendre car elle fait dynamiquement rfrence aux noms doccurrence. Nos 9 cases sintitulent a0, a1, a2, b0 ,b1, b2, c0, c1 et c2. Un premier tableau, intitul lignes, contient les lettres a, b et c, soit les prxes des noms doccurrences. Grce aux deux boucles for des lignes 12 et 13, et la concatnation des 3 lettres et des valeurs 0, 1 et 2, nous russissons faire rfrence aux noms des occurrences. Lignes 15 17 : nous stockons dans des variables locales intitules nomCetteOccurrence, chiffre et lettre, les valeurs ncessaires au traitement du choix de joueur. Prcisons tout de mme que la valeur this._name permet de rcuprer le nom de loccurrence clique. Lignes 18 25 : en fonction de la valeur de la variable joueur (true ou false), nous affectons la valeur 1 ou 0 dans les tableaux lignea, ligneb ou lignec. Ligne 26 : nous basculons la valeur boolenne de la variable joueur. Ligne 27 : nous afchons une croix ou un rond dans la case clique. Ligne 28 : nous vrions lventuelle prsence dune ligne. Lignes 33 61 : cette fonction est appele chaque clic sur lune des 9 cases. Ligne 34 : nous vidons le tableau an de pouvoir le remplir de nouvelles valeurs. Ligne 35 : nous le remplissons avec de nouvelles valeurs. Lignes 37 44 : nous dnissons 8 tableaux qui contiennent les diffrents numros dentres constituant des combinaisons possibles pour obtenir une droite. Lignes 46 59 : cette boucle for value si le total des valeurs contenues aux entres spcies dans les 8 tableaux est gal 0 ou 3. Rappelons que initialement, les valeurs des entres sont rgles 5. Pour obtenir 0, il faut donc additionner trois zros et pour obtenir 3, il faut additionner trois fois le chiffre 1. Sur les lignes 20 et 23, souvenez-vous que les valeurs initiales (le chiffre 5) sont changes en 0 ou 1 selon le joueur. Si le test est positif, loccurrence vMessage est alors afche.
Remarque
Nous navons pas limin la possibilit de pouvoir recliquer sur une case qui contient dj un rond ou une croix, an de pouvoir changer de forme en cas derreur. Au cas o vous souhaiteriez grer et empcher cette possibilit, il faudrait modier le contenu des boucles imbriques for comme le montre le script ci-aprs.
420
Script
for (i=0; i<=2; i++) { for (j=0; j<=2; j++) { _root[lignes[i]+j].onPress = function() { if (this._currentframe == 1) { this.enabled = 0; var nomCetteOccurrence = this._name; var chiffre = nomCetteOccurrence.substr(1, 1); var lettre = nomCetteOccurrence.substr(0, 1); switch (joueur) { case true : _root["ligne"+lettre][chiffre] = 1; break; case false : _root["ligne"+lettre][chiffre] = 0; break; } joueur = !joueur; this.gotoAndStop(Number(joueur)+2); verifierLigne(); } }; } }
Analyse
Nous avons ajout un test qui permet de vrier si limage afche du clip cliqu est bien la premire, celle qui ne contient pas de forme. Si tel est le cas, il est alors possible dexcuter le code que nous avions dj. Vous noterez que nous avons galement ajout une ligne dinstructions qui dsactive le clic sur loccurrence.
Bogues ventuels
La principale difcult dans cette animation rside dans linterprtation des noms de cases, cest pourquoi la ligne 14 est particulirement dlicate.
Jeu du serpent
Comme vous pourrez le remarquer, le code de cette animation nest pas trs compliqu.
421
Les jeux Partie IV
Le dplacement du serpent est effectu par les touches ches du clavier. Il sagit doccurrences places dynamiquement sur la scne en fonction de valeurs stockes dans un tableau.
Figure 19-9
Le dplacement du serpent se fait grce aux touches ches du clavier.
Chemin daccs : Jeux/JeuxEnfants/Serpent.a Nous avons plac sur la scne un clip dont le nom doccurrence est tete_inst. Une fois encore, nous aurions pu placer ce symbole dynamiquement sur la scne grce une ligne de code.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var directionX = 10; var directionY = 0; piecesCorps = []; placeXMemorisees = []; placeYMemorisees = []; // var surveilClavier = new Object(); surveilClavier.onKeyDown = function() { codeToucheEnfoncee = Key.getCode(); replacerPiecesCorps(); switch (codeToucheEnfoncee) { case 37 : if (directionX != 10) { directionX = -10; directionY = 0; } break; case 38 : if (directionY != 10) {
422
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
directionY = -10; directionX = 0; } break; case 39 : if (directionX directionX = directionY = } break; case 40 : if (directionY directionY = directionX = } break; } }; Key.addListener(surveilClavier); // function avancerSerpent() { tete_inst._x += directionX; tete_inst._y += directionY; replacerPiecesCorps(); if (tete_inst._x>=610) tete_inst._x if (tete_inst._x<=-10) tete_inst._x if (tete_inst._y>=440) tete_inst._y if (tete_inst._y<=-10) tete_inst._y }
!= -10) { 10; 0;
!= -10) { 10; 0;
= = = =
5; 594; 7; 396;
58 59 60 61 62 63 64 function replacerPiecesCorps() { 65 placeXMemorisees[0] = tete_inst._x; 66 placeYMemorisees[0] = tete_inst._y; 67 for (i=1; i<=9; i++) {
btLancerSerpent.onPress = function() { piecesCorps.push(tete_inst); placeXMemorisees.push(tete_inst._x); placeYMemorisees.push(tete_inst._y); for (i=1; i<=9; i++) { piecesCorps.push(_root.attachMovie("partieCorps", "partie"+i, i, {_x:tete_inst._x-(i*10), _y:tete_inst._y})); placeXMemorisees.push(piecesCorps[i]._x); placeYMemorisees.push(piecesCorps[i]._y); } lancerSerpent = setInterval(avancerSerpent, 100); };
423
Les jeux Partie IV
68 69 70 71 72 73 74 75 76 77 78 79 }
piecesCorps[i]._x = placeXMemorisees[i-1]; piecesCorps[i]._y = placeYMemorisees[i-1]; } placeXMemorisees = []; placeYMemorisees = []; placeXMemorisees.push(tete_inst._x); placeYMemorisees.push(tete_inst._y); for (i=1; i<=9; i++) { placeXMemorisees.push(piecesCorps[i]._x); placeYMemorisees.push(piecesCorps[i]._y); }
Analyse
Avant daborder toute analyse, gardez lesprit que le serpent est compos dune occurrence dont le nom est tete_inst et de 9 autres qui vont tre places dynamiquement sur la scne. Lignes 1 et 2 : nous stockons dans deux variables les valeurs correspondant aux vitesses de dplacement horizontal et vertical du serpent. Ligne 3 : nous crons un tableau vide qui va contenir les noms des diffrentes occurrences qui vont composer le serpent. Lignes 4 et 5 : nous crons deux tableaux supplmentaires qui vont contenir les coordonnes des diffrentes parties (occurrences) du serpent. Lignes 7 40 : nous crons un objet dcoute charg de changer la direction du serpent. Pour tre plus prcis, lorsque lutilisateur va cliquer sur une touche, le code saisi va tre mmoris (ligne 9) puis un switch va changer les valeurs des variables directionX et directionY, modiant ainsi le sens de dplacement de lanimal. An que le serpent ne parte pas en diagonale lorsque nous changeons de direction, nous rinitialisons toujours les deux valeurs. La fonction appele la ligne 10 sera analyse plus loin. Vous noterez galement quun test value le sens de dplacement du serpent an dinterdire un changement de direction oppos lactuel. Cest prcisment la ligne 40 qui enclenche la surveillance des touches du clavier. Lignes 42 50 : cette fonction est appele par linstruction setInterval() de la ligne 61. Elle est charge de faire avancer la tte du serpent et de faire suivre le reste du corps. Quatre tests permettent de faire revenir le serpent sur la scne lorsquil en sort. Lignes 52 62 : ce gestionnaire dvnement est charg dinitialiser le jeu en mmorisant une premire fois la position des 10 occurrences qui composent le serpent. Il lance galement le dplacement de lanimal la ligne 61. Lignes 53 55 : nous stockons dans le tableau intitul piecesCorps le nom doccurrence de la tte du serpent. Nous aurons besoin dy faire rfrence pour obtenir les coordonnes que devra prendre la premire pice du corps (aprs la tte) lors du premier dplacement.
424
Nous mmorisons, dans les deux autres tableaux, les coordonnes X et Y de loccurrence tete_inst. Lignes 56 60 : comme nous venons de le dire, nous plaons les 9 occurrences qui composent le corps, mais nous mmorisons galement leurs coordonnes X et Y an de pouvoir utiliser ces valeurs lors du dplacement du serpent. Comment va fonctionner le dplacement du serpent ? Imaginez que loccurrence de la tte du serpent se trouve 220 pixels du bord gauche de la scne. prsent, voici les coordonnes (toujours en X) des 9 autres occurrences : 200, 180, 160, 140, 120, 100, 80, 60, 40. Pour faire avancer lanimal, nous allons placer sa tte 240 pixels. Quen est-il du reste du corps ? Nous ne pouvons pas le faire avancer de 20 pixels comme nous lavons fait pour la tte car le problme nest pas si simple. Nous allons utiliser les valeurs 220 60 que nous aurons pralablement mmorises dans un tableau pour replacer les 9 occurrences horizontalement. Si nous procdons de la mme faon verticalement, nous allons donc demander chaque occurrence qui compose le serpent de prendre pour position, celle de loccurrence qui la prcde. Lignes 64 79 : comme nous venons de lexpliquer, la fonction replacerPiecesCorps() est charge de repositionner chaque occurrence du serpent avant de mmoriser la nouvelle position de chaque partie de lanimal. An de conserver un code relativement simple, nous navons pas ajout la fonctionnalit qui consiste agrandir la taille du serpent en fonction de ce quil mange, mais si vous souhaitez le faire, il faut tout simplement utiliser les dernires valeurs (quon nutilise plus) des deux tableaux placeXmemorisees et placeYMemorisees pour placer une nouvelle occurrence laide de la mthode attachMovie().
Bogues ventuels
Vous devez penser rinitialiser les tableaux placeXmemorisees et placeYmemorisees avant dutiliser la mthode push(). Par ailleurs, vous devez toujours commencer par ajouter ces deux tableaux les coordonnes de loccurrence tete_inst.
Jeu du taquin
Cette animation est un classique, aussi bien en matire de jeu que de dveloppement. Nombreuses sont les solutions qui existent, notamment avec lusage de tableaux tels que nous les avons utiliss pour la gestion du morpion, mais nous en avons retenu une qui est trs simple, la porte des nophytes en matire de programmation.
425
Les jeux Partie IV
Nous avons dcid de tester la disponibilit dun emplacement en menant un test dintersection entre la case clique et deux occurrences invisibles places sur la case vide .
Figure 19-10
Un taquin assez raliste par le dplacement des pices qui le composent.
Chemin daccs : Jeux/JeuxEnfants/Taquin.a Pour cette animation, nous sommes partis dune scne vide. Toutes les occurrences qui composent lanimation sont donc places dynamiquement avec la commande attachMovie(). Nous aurions galement pu utiliser le chargement dynamique dimages, ce qui nous aurait permis une mise jour simplie du choix des vignettes. Nous avons utilis plusieurs images, mais est aussi faisable un systme de masque ou de copie de pixels pour obtenir plusieurs segments dimage.
426
Script
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 import mx.transitions.Tween; import mx.transitions.easing.*; var nbrCases = 0; // for (i=0; i<4; i++) { for (j=0; j<4; j++) { nbrCases++; temp = _root.attachMovie("caseUnite", "case"+nbrCases, nbrCases, {_x:90+(j*78), _y:60+(i*78)}); temp.conteneur.loadMovie("imagesPuzzle/image"+nbrCases+".png"); temp.onPress = function() { if (this.hitTest(barreH) || this.hitTest(barreV)) { destinationX = barreH._x; destinationY = barreH._y; barreH._x = barreV._x=this._x; barreH._y = barreV._y=this._y; new Tween(this, "_x", Regular.easeOut, this._x, destinationX, 0.7, true); new Tween(this, "_y", Regular.easeOut, this._y, destinationY, 0.7, true); } }; } } // _root.attachMovie("barreVerticale","barreH",1000,{_x:case1._x, _y:case1._y}); _root.attachMovie("barreHorizontale","barreV",1001,{_x:case1._x, _y:case1._y}); barreH._visible = barreV._visible=false; // case1.removeMovieClip(); // // Impossible avec Masque car image fait toucher le dtecteur de cellule vide
Analyse
Remarque
Le symbole que nous plaons dynamiquement sur la scne laide de la mthode attach-
Movie() contient une occurrence intitule conteneur.
Lignes 1 et 2 : nous commenons par importer les classes qui vont nous permettre dexcuter les lignes 18 et 19.
427
Les jeux Partie IV
Ligne 4 : la variable nbrCases va simplement nous servir dnir le niveau de profondeur pour la mthode attachMovie() de la ligne 9. Lignes 6 25 : nous effectuons une boucle imbrique dans une autre an de placer 15 images sur la scne. Ligne 8 : comme nous lvoquions ci-dessus, nous avons besoin dune valeur unique chaque placement dune nouvelle occurrence (ligne 9). Ligne 10 : nous chargeons lintrieur de celle-ci, dans loccurrence imbrique qui sintitule
conteneur, une image numrote qui se trouve dans le dossier imagesPuzzle.
Ligne 11 : nous dnissons pour chacune des 15 occurrences un gestionnaire dvnement

onPress an de pouvoir faire glisser chaque cellule.
Remarque
Lemplacement vide que peut venir prendre une case adjacente est reprsent par deux occurrences transparentes intitules barreH et barreV.
Ligne 12 : un test permet de vrier si les occurrences barreH et barreV touchent la case clique an dchanger les places. Les deux occurrences viennent se placer aux coordonnes X et Y de la case clique et rciproquement. Lignes 18 et 19 : le dplacement de la case clique est effectu par glissement grce la classe Tween(). Lignes 27 et 28 : les deux occurrences barreH et barreV sont places dynamiquement avant dtre rendues invisibles (ligne 29). Ligne 31 : an de pouvoir dplacer les cases, nous supprimons la premire.
Bogues ventuels
Noubliez pas la saisie des deux premires lignes : linstanciation de la classe Tween() des lignes 18 et 19 ne fonctionnerait pas.
Jeu du pendu
Parmi les nombreux jeux classiques auxquels nous avons tous jou gure celui du pendu. La ralisation de cette animation a t motive par un souhait personnel de lauteur de ce livre et non en rponse des lecteurs ou des internautes cherchant raliser une telle application au travers des diffrents forums ddis Flash. Le script reste nanmoins
428
trs intressant analyser car il met en avant la gestion de la pression des touches du clavier et la conversion dun chier XML en tableau.
Figure 19-11
Le clbre jeu du pendu ralis en Flash
Chemin daccs : Jeux/JeuxEnfants/Pendu.a Le contenu de cette animation est trs simple car nous navons plac sur la scne que deux occurrences. Un texte dynamique dont le nom de variable est vMessageDeFin. Un clip qui contient 15 images-cls. Les 8 premires reprsentent les diffrentes tapes du dessin dun pendu (la potence, la potence avec la tte, la potence avec la tte et le corps, etc.). Sur limage 15, nous avons reprsent une personne qui a les pieds au sol, les bras en lair, pour signier quil a gagn avant de se faire pendre. Loccurrence de ce clip sintitule pendu_inst.
Script
1 2 3 4 5 6 // // Initialisation des variables // var listeDesMots; var racine;
429
Les jeux Partie IV
function construireAffichageLettres() { motATraiter = obtenirMot(); nombreCaracteresATrouver = motATraiter.length; var placePremiereLettre = (600-(nombreCaracteresATrouver*30))/2+15 for (i=0; i<nombreCaracteresATrouver; i++) { _root.attachMovie("caseLettre","lettre"+i,i,{_x:placePremiereLettre+(i*30) , _y:50}); 41 _root["lettre"+i].bonneLettre = motATraiter.substr(i, 1).toUpperCase(); 42 } 43 Key.addListener(verifSaisie); 44 45 } 46 47 //-------------------------------------------------------48 49 var verifSaisie = new Object(); 50 51 verifSaisie.onKeyDown = function() { 52 var toucheEnfoncee = Key.getAscii(); 53 toucheAComparer = String.fromCharCode(toucheEnfoncee).toUpperCase();
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
var nombreMots; var nombreCaracteresATrouver; var nombreCaracteresTrouves = 0; // // Chargement de mots // var alphabetXML:XML = new XML(); alphabetXML.ignoreWhite = true; alphabetXML.onLoad = function() { var noeudListeDesMots = this.firstChild.firstChild.firstChild; var chaineListeDesMots = new String(noeudListeDesMots); listeDesMots = chaineListeDesMots.split(","); nombreMots = listeDesMots.length; construireAffichageLettres(); }; alphabetXML.load("dictionnaire.xml"); //-------------------------------------------------------function obtenirMot() { return (listeDesMots[random(nombreMots)]); nombreCaracteresTrouves = 0; }
430
54 55 56 57 58 59 60
61 62 63 64 65 66 67 } 68 if (lettreTrouvee == false) { 69 pendu_inst.nextFrame(); 70 if (pendu_inst._currentframe == 8) { 71 vMessageDeFin = "Perdu : "+motATraiter; 72 Key.removeListener(verifSaisie); 73 } 74 } 75 };
var lettreTrouvee = false; for (i=0; i<nombreCaracteresATrouver; i++) { if (_root["lettre"+i].bonneLettre == toucheAComparer) { _root["lettre"+i].vCaracteres = _root["lettre"+i].bonneLettre; nombreCaracteresTrouves++; lettreTrouvee = true; _root["lettre"+i].bonneLettre = "Lettre Trouve";// Afin de ne pas ajouter de points lorsque plusieurs pressions sur la mme touche } } if (nombreCaracteresTrouves == nombreCaracteresATrouver) { pendu_inst.gotoAndStop(15); vMessageDeFin = "Gagn";
Le contenu du chier XML intitul dictionnaire.xml est le suivant :

<dico> <enregistrement>Rouge,Vert,Bleu,Jaune,Janvier,Fvrier,Mars,Lundi,Mardi,Voiture,Vlo,Chien, Cheval,Papier,Carton,Manger,Apprendre,Lire,Regarder,Tlvision,Ordinateur,Nature, Montagne,Mer,Campagne,Musique,Cinma</enregistrement> </dico>
Analyse
La principale difcult de cette animation aura t de trouver la logique danalyse dun mot pour le comparer un autre. Par ailleurs, nous avons cherch optimiser le stockage des donnes dans un seul nud XML an dviter de parcourir toute une arborescence ; la mthode split() nous aura permis de faciliter ce traitement. Lignes 5 9 : nous commenons par initialiser les variables auxquelles nous allons faire appel pour stocker les diffrentes informations traiter dans notre animation. Leurs noms parlent deux-mmes, mais nous reviendrons sur leurs contenus en temps voulu. Ligne 15 : nous commenons par crer une instance de la classe XML() pour y stocker le contenu du chier verbes.xml. Ligne 16 : nous prcisons que les ventuelles lignes vierges (sauts de lignes) contenues dans le chier XML doivent tre ignores.
431
Les jeux Partie IV
Lignes 18 24 : le contenu de la fonction onLoad va sexcuter lorsque le chargement du contenu du chier XML dans linstance cre la ligne 15 sera termin. Ligne 19 : nous rcuprons lensemble des mots contenus dans le premier nud de larborescence. Lignes 20 et 21 : nous crons une instance de la classe String() an de pouvoir faire appel la mthode split() dont la fonction est de convertir une liste de mots spars par des virgules en tableau. Ligne 22 : nous mmorisons dans la variable nombreMots, le nombre de mots contenus dans le tableau listeDesMots. Ligne 23 : la fonction construireAffichageLettres() va nous permettre de placer sur la scne autant de rectangles vides quil y a de lettres deviner. Ligne 26 : nous chargeons le contenu du chier XML dans linstance intitule alphabetXML. Lignes 30 33 : cette fonction est charge de retourner un mot choisi au hasard dans le tableau listeDesMots. Pour cela, un nombre alatoire compris entre 0 et le nombre de mots est gnr puis est utilis pour lire la valeur de lentre lindex spci. Ligne 32 : nous rinitialisons la variable nombreCaracteresTrouves pour pouvoir procder une autre partie (option non dveloppe dans cette animation ; consultez lanimation suivante). Lignes 35 45 : cette fonction va concrtement permettre de placer les clips correspondant aux lettres trouver sur la scne. Ligne 36 : nous stockons dans une variable le mot trouver. Ligne 37 : nous stockons le nombre de caractres contenus dans le mot trouver. Ligne 38 : la variable placePremiereLettre contient, aprs un calcul, la valeur ajouter la proprit _x de la premire occurrence quil faut placer sur la scne (la premire lettre). Cela permet de centrer lensemble des lettres. Lignes 39 42 : cette boucle place le symbole dont le nom de liaison est caseLettre, grce la mthode attachMovie(), autant de fois quil y a de lettres dans le mot trouver. Ligne 41 : nous stockons dans ce clip une variable intitule bonneLettre dont la valeur correspond la lettre trouver. Ligne 43 : nous enclenchons la surveillance du clavier. Lignes 49 75 : nous dclarons un objet intitul verifSaisie et lui associons un vnement onKeyDown pour dnir les lignes dinstructions excuter quand une touche du clavier sera enfonce. Ligne 52 : nous mmorisons le code ASCII de la touche enfonce.
432
Ligne 53 : nous stockons dans une variable, intitule toucheAComparer, le caractre obtenu par une conversion du code ASCII. Pour information, nous pouvons obtenir deux types de code lorsquune touche du clavier est enfonce, mais nous ne pouvons pas connatre le signe typographique qui a t saisi. Nous devons donc procder cette conversion grce la mthode fromCharCode(). Pour pouvoir comparer deux caractres, nous devons utiliser la mthode toUpperCase() an de ne pas faire la distinction entre les majuscules et les minuscules. Ligne 54 : avant deffectuer un test sur les lignes suivantes, nous rinitialisons la variable lettreTrouvee false. Lignes 55 62 : nous comparons la lettre saisie lensemble des caractres contenus dans le mot deviner. Lignes 63 67 : ce test, effectu chaque pression dune touche, vrie si le nombre de lettres trouves correspond au nombre de caractres contenus dans le mot deviner. Si tel est le cas, la variable intitule vMessageDeFin du texte dynamique qui se trouve sur la scne afche le message Gagn . Lignes 68 74 : ce test fait avancer la tte de lecture du clip reprsentant progressivement les diffrentes tapes du pendu sur la scne lorsquune touche du clavier est enfonce alors quelle nest pas contenue dans le mot deviner. Si la tte de lecture du clip reprsentant le pendu arrive sur limage 8, nous marquons la n de la partie aux lignes 71 et 72.
Bogues ventuels
Loubli de la ligne 32 entrane une erreur de calcul. La variable nombreCaracteresTrouves permet en effet de dnir si toutes les lettres dun mot ont t trouves. Si nous ne rinitialisons pas la valeur de cette variable, lordinateur peut estimer que vous avez trouv toutes les lettres dun mot mme si ce nest pas le cas.
Jeu du pendu avec plusieurs parties

Voici une nouvelle version du jeu du pendu dans laquelle vous allez pouvoir effectuer plusieurs parties successives sans tre oblig de relancer lanimation. Le code nest pas plus compliqu, mais lgrement plus long.
Chemin daccs : Jeux/JeuxEnfants/Pendu2.a Seule loccurrence dun clip a t ajoute sur la scne an de pouvoir cliquer dessus pour relancer une nouvelle partie. Elle sintitule btNouveauMot.
433
Les jeux Partie IV
Script
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 // // Initialisation des variables // var var var var var listeDesMots; racine; nombreMots; nombreCaracteresATrouver; nombreCaracteresTrouves = 0;
// // Chargement de mots // var alphabetXML:XML = new XML(); alphabetXML.ignoreWhite = true; alphabetXML.onLoad = function() { var noeudListeDesMots = this.firstChild.firstChild.firstChild; var chaineListeDesMots = new String(noeudListeDesMots); listeDesMots = chaineListeDesMots.split(","); nombreMots = listeDesMots.length; construireAffichageLettres(); }; alphabetXML.load("dictionnaire.xml"); // -------------------------------------------------------function obtenirMot() { return (listeDesMots[random(nombreMots)]); nombreCaracteresTrouves = 0; } function construireAffichageLettres() { motATraiter = obtenirMot(); nombreCaracteresATrouver = motATraiter.length; var placePremiereLettre = (600-(nombreCaracteresATrouver*30))/2+15 for (i=0; i<nombreCaracteresATrouver; i++) { _root.attachMovie("caseLettre","lettre"+i,i,{_x:placePremiereLettre+(i*30), _y:50}); _root["lettre"+i].bonneLettre = motATraiter.substr(i, 1).toUpperCase(); } Key.addListener(verifSaisie); }
434
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
function detruireLettres() { for (i=0; i<nombreCaracteresATrouver; i++) { _root["lettre"+i].removeMovieClip(); } } // -------------------------------------------------------var verifSaisie = new Object(); verifSaisie.onKeyDown = function() { var toucheEnfoncee = Key.getAscii(); toucheAComparer = String.fromCharCode(toucheEnfoncee).toUpperCase(); var lettreTrouvee = false; for (i=0; i<nombreCaracteresATrouver; i++) { if (_root["lettre"+i].bonneLettre == toucheAComparer) { _root["lettre"+i].vCaracteres = _root["lettre"+i].bonneLettre; nombreCaracteresTrouves++; lettreTrouvee = true; _root["lettre"+i].bonneLettre = "Lettre Trouve";// Afin de ne pas ajouter de points lorsque plusieurs pressions sur la mme touche } } if (nombreCaracteresTrouves == nombreCaracteresATrouver) { pendu_inst.gotoAndStop(15); vMessageDeFin = "Gagn"; } if (lettreTrouvee == false) { pendu_inst.nextFrame(); if (pendu_inst._currentframe == 8) { vMessageDeFin = "Perdu : "+motATraiter; Key.removeListener(verifSaisie); } } };
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 btNouveauMot.onPress = function() { 83 nombreCaracteresTrouves=0 84 vMessageDeFin = ""; 85 pendu_inst.gotoAndStop(1); 86 detruireLettres(); 87 construireAffichageLettres(); 88 };
Analyse
Lignes 47 51 : elles constituent une fonction qui est appele chaque nouvelle construction dun mot sur la scne. Prcisons, en effet, que lafchage de cellules (celles qui vont contenir un caractre lorsquil a t trouv par lutilisateur lors dune pression sur une
435
Les jeux Partie IV
touche du clavier) passe par une suppression pralable des lettres du mot deviner prcdemment. Lignes 82 88 : ce gestionnaire dvnement associ loccurrence intitule btNouveauMot, qui se trouve sur la scne, permet de relancer une nouvelle partie proposant ainsi un nouveau mot deviner. Toutes les variables auxquelles fait rfrence le programme pour la gestion de la dtection dune lettre trouve sont rinitialises.
Bogues ventuels
Si vous oubliez dappeler la fonction detruireLettres, le nombre de cases afches sera, dans certains cas, suprieur au nombre de lettres du mot deviner.
436
20
Autres jeux
Machine sous (jackpot)

Cette tude de cas est une des plus difciles de ce livre. Non pas par son degr de complexit, mais par sa longueur. Commenons donc par rappeler le fonctionnement de notre jackpot.
Remarque
Nous aurions pu obtenir leffet de ou des fruits avec le ltre BlurFilter, mais nous avons prfr dvelopper une application compatible avec le player Flash 7. Si vous ne souhaitez pas obtenir leffet de ou en passant par une deuxime image (voir la description de lanimation), vous pouvez alors utiliser le script suivant. Dans cet exemple, fruit_inst est le nom dune occurrence qui se trouve sur la scne.
import flash.filters.BlurFilter; // var flou_filtre = new BlurFilter(0, 15, 10); listeDesFiltres = [flou_filtre]; fruit_inst.filters = listeDesFiltres;
Les jeux Partie IV
Figure 20-1
Le joueur utilise les touches F, G et H de son clavier pour contrler le lancement et larrt des trois choix.
Chemin daccs : Jeux/Autres/JeuxMachineSous.a Cette animation contient de nombreuses occurrences sur la scne car il serait fastidieux de tout crer dynamiquement. Voici un inventaire de son contenu : Trois occurrences servant de boutons, intitules btValidation, btEncaisser et premierEssai. Un texte de saisie dont les noms dinstance et de variable sont respectivement mise_ inst et mise. Deux textes dynamiques dont les noms de variables sont gains et coupsRestants. Pour ce dernier, un nom dinstance a galement t attribu : affCoupsRestants_inst. Trois occurrences intitules bande1, bande2 et bande3 qui correspondent aux bandes de fruits (voir la gure 20-2). Trois occurrences intitules msk1, msk2 et msk3 qui correspondent trois carrs aux emplacements de lafchage des fruits (voir la gure 20-1). Attention, le clip qui afche une bande de fruit contient deux images cls sur sa timeline. La premire contient limage que vous voyez sur la gure 20-1, la deuxime contient la mme image oute verticalement dans Photoshop.
438
Autres jeux Chapitre 20
Figure 20-2
Les fruits sont prsents dans un mme clip sous forme dune bande verticale.
Le reste de linterface nest l que pour renseigner le joueur sur le nom des touches utiliser ainsi, et sur le montant des mises. Le joueur ne peut lancer la machine tant quune mise na pas t propose. Cette dernire doit tre suprieure 0, et ne peut excder le montant de nos gains. Il doit ensuite cliquer sur un bouton qui va lancer la machine pour la premire fois (aprs une nouvelle mise). Il arrte ensuite le dlement des bandes par une pression sur les touches F, G et H. Pour relancer les bandes, il utilise les mmes touches dans la limite de trois essais. Sil ne souhaite pas utiliser ses trois chances, il peut nimporte quel moment encaisser la somme quil a gagne. Lanimation ne contient quun seul script qui doit grer de nombreux paramtres : 1. La cration de trois masques appliqus aux bandes. 2. Linitialisation des variables et des tableaux. 3. La programmation des boutons et des trois touches de contrle du jeu. 4. La cration de deux fonctions pour vrier le dpart dune manche et pour lencaissement.
439
Les jeux Partie IV
Script
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 bande1.setMask(msk1); bande2.setMask(msk2); bande3.setMask(msk3); // var etatBande1 = false; var etatBande2 = false; var etatBande3 = false; // var positionsBandes = [393, 314, 245, 167, 90, 17]; // var nbrLancers = 0; var coupsRestants = 3; var gains = 1000; var mise = 0; // btEncaisser.enabled = 0; btEncaisser._alpha = 50; // lancerBande = function (nomBande) { nomBande._y += 20; if (nomBande._y>413) { nomBande._y = -36; } }; // _root.onKeyDown = function() { laTouche = Key.getCode(); switch (laTouche) { case 70 : etatBande1 = !etatBande1; if (etatBande1) { if (coupsRestants>=1) { coupsRestants--; bande1.gotoAndStop(2); lancer1 = setInterval(lancerBande, 10, bande1); } } else { if (lancer1 != undefined) { bande1.gotoAndStop(1); clearInterval(lancer1); delete lancer1; bande1._y = positionsBandes[random(6)]; verifierFin(); } } break; case 71 : etatBande2 = !etatBande2; if (etatBande2) {
440
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
if (coupsRestants>=1) { coupsRestants--; bande2.gotoAndStop(2); lancer2 = setInterval(lancerBande, 10, bande2); } } else { if (lancer2 != undefined) { bande2.gotoAndStop(1); clearInterval(lancer2); delete lancer2; bande2._y = positionsBandes[random(6)]; verifierFin(); } } break; case 72 : etatBande3 = !etatBande3; if (etatBande3) { if (coupsRestants>=1) { coupsRestants--; bande3.gotoAndStop(2); lancer3 = setInterval(lancerBande, 10, bande3); } } else { if (lancer3 != undefined) { bande3.gotoAndStop(1); clearInterval(lancer3); delete lancer3; bande3._y = positionsBandes[random(6)]; verifierFin(); } } break; } }; // btValidationMise.onPress = function() { possibiliteMise = gains-mise; if (possibiliteMise<0 || mise == 0) { mise = 0; } else { mise_inst.selectable = false; premierEssai._alpha = 100; premierEssai.enabled = true; } }; // premierEssai._alpha = 50; premierEssai.enabled = false; premierEssai.onPress = function() { Key.addListener(_root);
441
Les jeux Partie IV
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
premierEssai._alpha = 50; premierEssai.enabled = false; btValidationMise._alpha = 50; btValidationMise.enabled = 0; etatBande1 = true; etatBande2 = true; etatBande3 = true; bande1.gotoAndStop(2); lancer1 = setInterval(lancerBande, 10, bande1); bande2.gotoAndStop(2); lancer2 = setInterval(lancerBande, 10, bande2); bande3.gotoAndStop(2); lancer3 = setInterval(lancerBande, 10, bande3); }; // //affCoupsRestants_inst._visible = false; verifierFin = function () { if (coupsRestants<=3) { affCoupsRestants_inst._visible = true; btEncaisser.enabled = true; btEncaisser._alpha = 100; } if (coupsRestants == 0 && lancer1 == undefined && lancer2 == undefined && lancer3 == undefined) { compterGains(); // etatBande1 = false; // etatBande2 = false; // etatBande3 = false; premierEssai._alpha = 50; premierEssai.enabled = false; Key.removeListener(_root); } }; // compterGains = function () { b1 = Number(bande1._y); b2 = Number(bande2._y); b3 = Number(bande3._y); lesTrois = b1 == b2 && b2 == b3 && b1 == b3; lesDeux1 = b1 == b2; lesDeux2 = b2 == b3; lesDeux3 = b1 == b3; if (lesTrois) { gains += (mise*5); mise = 0; } else if (lesDeux1 || lesDeux2 || lesDeux3) { gains += (mise*2); mise = 0; } else { gains -= (mise); mise = 0;
442
151 } 152 coupsRestants = 3; 153 affCoupsRestants_inst._visible = false; 154 btValidationMise._alpha = 100; 155 btValidationMise.enabled = 1; 156 mise_inst.selectable = true; 157 btEncaisser.enabled = 0; 158 btEncaisser._alpha = 50; 159 }; 160 btEncaisser.onPress = function() { 161 if (lancer1 == undefined && lancer2 == undefined && lancer3 == undefined) { 162 compterGains(); 163 etatBande1 = false; 164 etatBande2 = false; 165 etatBande3 = false; 166 premierEssai._alpha = 50; 167 premierEssai.enabled = false; 168 Key.removeListener(_root); 169 btEncaisser.enabled = 0; 170 btEncaisser._alpha = 50; 171 } 172 };
Analyse
Lignes 1 3 : les bandes de fruits ne doivent tre visibles quau travers des trois occurrences de forme carre, places au centre de la scne. Lignes 5 7 : ces trois variables vont nous permettre de savoir si une bande est en cours de dlement ou larrt. Au dbut du jeu, la machine nest pas lance, les bandes sont donc larrt. Ligne 9 : les valeurs contenues dans ce tableau correspondent aux coordonnes _y qui permettent darrter une bande sur un des six fruits. Ligne 10 : ces variables vont nous permettre de : nbrLancers : connatre le nombre de lancers dj effectus. coupsRestants : connatre le nombre de coups restants. gains : grer les gains du joueur. mise : mmoriser la somme mise par le joueur. Lignes 16 et 17 : ds le lancement du jeu, il faut rendre inactif le bouton dencaissement. Il ne sera rendu actif qu partir du moment o le joueur aura lanc le jeu au moins une fois. Lignes 19 24 : cette fonction va tre appele par un setInterval(). Elle permet de faire dler une bande de haut en bas.
443
Les jeux Partie IV
Lignes 26 84 : ce gestionnaire va permettre dexcuter des instructions en fonction de la touche enfonce. Ligne 27 : le code de la touche enfonce est mmoris dans une variable intitule laTouche. Ligne 28 : cette structure va nous permettre deffectuer des choix dexcutions en fonction de la touche enfonce. Nous allons analyser les lignes 29 46, celles qui suivront de 47 83 ne le seront pas, car il sagit des mmes explications pour les deux autres touches G et H. Ligne 29 : la ligne 28 reoit comme paramtre un code de touche. Ce dernier est donc utilis et sil sagit bien de la valeur 70 (qui correspond au code de la touche F) les lignes dinstructions 30 46 sont excutes. Ligne 30 : le joueur vient de cliquer sur la touche F de son clavier, il faut changer la valeur boolenne de la variable etatBande. Ligne 31 : si cette valeur vaut true, on excute les lignes dinstruction 32 36. Ligne 32 : on teste dabord si le joueur a encore la possibilit de jouer. Rappelons quil nest possible de lancer que trois fois le jeu. Ligne 33 : il faut penser retirer 1 coup restant chaque lancement. Ligne 34 : nous vous avions prcis au dbut de lanimation que leffet de ou obtenu sur les fruits est le rsultat de lafchage de limage 2 du clip contenant la bande de fruits. Nous devons donc changer la position de la tte de lecture de la timeline du clip. Ligne 35 : lidentiant lancer1 permet de mmoriser que la fonction setInterval() a t excute. la ligne 19, nous vous avions prcis que le dlement vertical de la bande serait effectu en continu. Ligne 37 : si la bande est dj en cours de dlement, on excute alors les lignes dinstructions qui suivent. Ligne 38 : on sassure que la fonction setInterval() a bien t excute. Lignes 39 41 : on arrte alors le dlement de la bande. La tte de lecture de la timeline du clip de la bande est replace sur limage 1 qui prsente une image non oute. On dtruit lidentiant lancer1 an de pouvoir relancer la bande. Ligne 42 : on arrte au hasard la bande sur un fruit, en choisissant une des coordonnes de la liste positionBandes. Ligne 43 : nous devons vrier les gains ventuels du joueur. Ligne 46 : si la touche enfonce par le joueur est bien la touche F, la structure switch() doit sinterrompre. Nous allons prsent devoir programmer les boutons proposs dans linterface du jeu. Lignes 86 95 : nous devons rendre cliquable le bouton premierEssai qui va permettre de lancer le jeu.
444
Lignes 87 88 : nous vrions dabord que le joueur possde sufsamment dargent. Si le joueur na rien mis ou propos une mise trop grande (suprieure au montant de ses gains), le texte de saisie mise est rinitialis 0. Lignes 91 93 : si le test prcdent est positif, nous pouvons alors rendre cliquable le bouton
premierEssai et empcher une nouvelle proposition de mise.
Lignes 97 98 : ces deux lignes ont pour effet de rendre inactif le bouton premierEssai ds le lancement de lapplication. Elles sont par ailleurs comparables aux lignes 16 et 17 et auraient pu se trouver en haut du script. Ligne 99 : ce gestionnaire va lancer le jeu pour la premire fois aprs que la mise ait t vrie. Ligne 100 : le joueur vient de cliquer sur le bouton de lancement du jeu, nous pouvons dmarrer la surveillance du clavier. Lignes 101 104 : les deux boutons de lancement du jeu et de validation de la mise doivent tre rendus inactifs car ils ne prsentent plus aucun intrt ce niveau-l du jeu. Lignes 105 107 : les bandes de fruits doivent tre signales comme tant en cours de jeu. Lignes 108 113 : il faut afcher la deuxime image-cl de la timeline des trois occurrences reprsentant les fruits pour les raisons voques ci-dessus, et demander le dlement des bandes. Lignes 117 132 : nous lavons vu, cette fonction est appele chaque fois que le joueur a lanc une des bandes. Lignes 118 122 : si le joueur na plus la possibilit de relancer de bandes, le bouton btEncaisser est rendu inactif et opaque.
Lignes 123 130 : sil ne reste plus de coups jouer, le bouton premierEssai est rendu inactif et lgrement masqu. Les touches F, G et H ne servent plus rien, car plus aucune surveillance du clavier nest effectue (ligne 130). Lignes 134 159 : cette fonction va permettre dajouter ou de soustraire au texte dynamique gains, le montant de la mise avec un ventuel bonus selon le nombre de fruits identiques. Elle va aussi rendre nouveau valide le bouton de validation de la mise. Lignes 135 137 : ces variables vont stocker les coordonnes _y de chaque bande an de pouvoir tre compares. Ligne 138 : cette ligne est intressante, car il est assez rare de voir laffectation de la valeur true ou false de cette faon. Si les variables compares ont les mmes valeurs, la variable lesTrois vaut true. Lignes 139 141 : ces trois variables vont galement prendre pour valeur true ou false. Lignes 142 151 : nous valuons ensuite les valeurs de ces variables (lignes 138 141) an de dnir le montant des gains. Lignes 152 158 : nous rinitialisons tous les paramtres que nous avons dj rencontrs an de pouvoir rejouer.
445
Les jeux Partie IV
Lignes 160 172 : ce gestionnaire va permettre dencaisser les gains selon la condition spcie (les bandes ont au moins t lances une fois), tout en prcisant que les bandes ne sont pas en cours de jeu. Les boutons premierEssai et btEncaisser sont rendus inactifs. Comme vous avez pu le constater, ce jeu contient un script assez long, mais les lignes dinstructions ne prsentent pas de difcults particulires. Lorsque vous devez raliser un jeu comme celui-ci, vous devez faire un listing des fonctionnalits de chaque partie de linterface. Nous avons pu constater que des boutons activent certains boutons et en dsactivent dautres. Cest cette gestion qui est la plus difcile matriser.
Bogue ventuel
Tant que vous navez pas excut la ligne 100, la surveillance du clavier ne peut se faire.
Jeu de tir
Il existe plusieurs types de jeux de tir, mais nous avons retenu celui qui est srement le plus populaire aujourdhui. Nous ne citerons pas de noms de jeux utilisant ce systme de vise lors de parcours au travers desquels on rencontre de nombreux adversaires, mais nous vous proposons dans cette animation le mme principe.
Figure 20-3
Des objets volants identis traversent lcran, visez, tirez !
446
Pour la ralisation de cette animation, nous avons fabriqu dans Illustrator un sol reprsent par le quadrillage vert clair et noir, mais il napporte rien au jeu si ce nest la sensation de bouger en mme temps que larme. Quel que soit le dcor, le plus important du script est de faire bouger la cible et de faire voler des objets dans le ciel.
Chemin daccs : Jeux/Autres/JeuxTir.a La scne de cette animation contient le dcor (quadrillage vert et noir), il sagit dune occurrence intitule sol_inst. La cible est galement dj prsente sur la scne, son nom doccurrence est cible_inst. Par ailleurs, un texte dynamique dont le nom de variable est vScore a t plac dans le coin suprieur droit de la scne. Pour nir, nous avons plac un rectangle sur limage 1 (une occurrence intitule masqueSol_inst) un peu moins large que la largeur de la scne, et qui va nous servir de masque. Nous reviendrons dessus plus loin dans ces explications. Le script est relativement simple, il ne prsente aucune difcult particulire et se dcompose en trois parties : 1. La prparation de la scne. 2. La gestion des vaisseaux. 3. La gestion du tir.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 cible_inst.startDrag(true); Mouse.hide(); cible_inst.swapDepths(10000); // var vEnclench = false; // sol_inst.setMask(masqueSol_inst); sol_inst.onEnterFrame = function() { this._y = 370+(_root._ymouse/-10); this._x = 300+((300-_root._xmouse)/10); }; // var exemplaire = 0; // envoyerObjet = function () { placeOrigineX = [-100, 700]; placeVitesse = [5, -5]; var accelerateur = random(4)+1; var choixIndex = random(2); var vitesse = placeVitesse[choixIndex];
447
Les jeux Partie IV
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
exemplaire++; _root.attachMovie("objetVolant", "objet"+exemplaire, exemplaire); _root["objet"+exemplaire]._x = placeOrigineX[choixIndex]; _root["objet"+exemplaire]._y = 10+random(200); _root["objet"+exemplaire].onEnterFrame = function() { this._x += vitesse*accelerateur; if (Math.abs(this._x-300)) { if (this.hitTest(_root.cible_inst) && vEnclench) { this.removeMovieClip(); vScore++; } } }; }; // _root.onMouseDown = function() { vEnclench = true; }; _root.onMouseUp = function() { vEnclench = false; }; // lancerJeu = setInterval(envoyerObjet, 1000);
Analyse
Nous aurions pu ajouter des fonctionnalits cette animation (explosion des vaisseaux, canon de larme visible en bas de la scne et qui suit le viseur, bruitages, une limite dans le temps, etc.), mais nous avons au contraire voulu rendre le code de cette animation trs lisible, la porte de tous. Il ne reste donc plus que les fonctionnalits de base, le dplacement automatique de la cible et les mouvements des vaisseaux. Ligne 1 : loccurrence intitule cible_inst est rendue mobile suivant le curseur de la souris. Le paramtre true est indispensable pour que le point dalignement de loccurrence se xe sur la pointe de la che que reprsente le curseur. Ligne 2 : nous masquons le curseur. Ligne 3 : les vaisseaux vont tre placs dynamiquement sur la scne avec un niveau de plus en plus lev au cours du jeu. An de garder loccurrence de la cible devant tous les vaisseaux, rglons sa position (son plan) au niveau 1 000. Ligne 5 : pour savoir si le bouton de la souris est enfonc, nous aurions pu valuer la valeur du gestionnaire onMouseDown, qui renvoie undefined tant quune ligne comme la ligne 37 nest pas excute. Nous avons opt pour une autre solution qui consiste utiliser une variable laquelle on dnit une valeur boolenne (lignes 37 42).
448
Ligne 7 : le quadrillage que vous voyez au centre de lanimation est plus grand que la largeur de la scne, pour que nous puissions le faire glisser de gauche droite et de bas en haut. Nous masquons donc les contours de notre animation (partie vert fonc). Lignes 8 10 : ces lignes dinstructions sont facultatives, ce sont elles qui font bouger le sol. Nous calculons la distance qui spare le curseur de la souris dun point prcis de la scne, aussi bien sur laxe horizontal que vertical, puis nous dcalons le quadrillage du sol dans le sens oppos du curseur. Ligne 13 : nous allons crer de nombreuses occurrences dynamiquement sur la scne, il faut donc une variable pour dnir le nom de chacune ainsi que leurs niveaux. Ligne 15 : cette fonction qui va tre appele en continu va placer un vaisseau sur la scne et lui dnir un comportement. Lignes 16 et 17 : ces deux listes vont nous servir placer initialement les vaisseaux en dehors des limites de la scne, an que nous puissions les voir traverser lanimation de gauche droite ou inversement. La vitesse de -5 ou +5 pixels est relative la position initiale du vaisseau. Ligne 18 : nous stockons dans une variable une valeur qui servira faire varier la vitesse de dplacement des vaisseaux. Ligne 19 : nous stockons dans une autre variable intitule choixIndex, une valeur qui va servir choisir une des deux valeurs dans les tableaux placeOrigineX et placeVitesse.
Remarque
La fonction random(2) va vous renvoyer deux valeurs possibles en commenant partir de 0, soit 1 ou 0. En effet, pour obtenir 1 ou 2, il aurait fallu saisir random(2)+1. Dans notre cas, nous avons besoin de choisir une des deux entres de nos tableaux dont les numros dindex sont 0 et 1.
Ligne 20 : nous stockons dans une dernire variable, la valeur qui va tre utilise pour dplacer un vaisseau. Ligne 21 : comme nous le prcisions la ligne 13, nous incrmentons cette variable pour lutiliser avec la mthode attachMovie(). Ligne 22 : une occurrence issue du symbole qui contient un vaisseau et dont le nom de liaison est objetVolant, est place sur la scne. Ligne 23 : nous plaons cette dernire gauche ou droite de la scne. Ligne 24 : verticalement, elle est galement place de faon alatoire. Ligne 25 : lorsque loccurrence dun vaisseau est place sur la scne, nous lui dnissons un gestionnaire an de la faire avancer et de grer les tirs sur elle. Ligne 26 : nous dnissons la vitesse du vaisseau.
449
Les jeux Partie IV
Lignes 27 29 : si le vaisseau a russi traverser la scne et quil en sort plus de 100 pixels, il est automatiquement dtruit. Le joueur ne voit pas cette destruction, elle nest pas non plus comptabilise, cest uniquement une gestion des vaisseaux dans le jeu qui nirait par ralentir lanimation. Lignes 37 39 : ds que le joueur clique sur la scne, la variable intitule vEnclench prend pour valeur true. Lignes 40 42 : ds que le joueur relche le bouton de sa souris, la variable intitule vEnclench reprend pour valeur false. Avec les lignes 37 42, on peut donc savoir si le joueur clique sur le bouton de sa souris. Il ne nous reste plus qu tester sil clique alors que la cible touche un vaisseau, cest le rle des lignes 30 33. Lignes 30 33 : si loccurrence de la cible touche donc cette occurrence qui contient ce script, cest--dire toutes les occurrences qui sont places sur la scne, et que le joueur a bien le bouton de sa souris enfonc, le vaisseau disparat. Ligne 44 : cette fonction setInterval() nous permet de placer un vaisseau sur la scne toutes les secondes. Si vous souhaitez augmenter ce laps de temps, changez la valeur 1 000. 3 000 permettrait dobtenir un vaisseau toutes les trois secondes. Certains lauront peut-tre remarqu, il est trs facile de tricher ce jeu. En effet, les vaisseaux disparaissent ds quils touchent le viseur alors que le bouton de la souris est enfonc, sans mme tre oblig de faire plusieurs clics. Il faudrait donc optimiser notre script en ajoutant une variable supplmentaire que nous allons appeler vRecharge.
cible_inst.startDrag(true); Mouse.hide(); cible_inst.swapDepths(10000); // var vEnclench = false; var vRecharge = true;
et
if (this.hitTest(_root.cible_inst) && vEnclench && vRecharge) { this.removeMovieClip(); vScore++; vRecharge = false; }
et
_root.onMouseUp = function() { vEnclench = false; vRecharge = true; };
Voil, il est encore possible de tricher, mais cela relve plus du bogue. Nous nirons pas plus loin, le script commencerait devenir plus complexe.
450
Si vous souhaitez donner encore plus de ralisme ce jeu, et si vous utilisez Flash, vous pouvez alors ajouter les lignes dinstructions suivantes en haut du script :
import flash.filters.BlurFilter; flou_filtre = new BlurFilter(5, 0, 10); listeDesFiltres = [flou_filtre];
et celles-ci aprs la mthode attachMovie() avant le gestionnaire onEnterFrame.

_root["objet"+exemplaire].filters = listeDesFiltres;
Encore plus de ralisme ? Faites un vrai graphisme !
Jeu de grattage
Nous allons vous proposer pour cette tude de cas, deux animations qui font appel des techniques totalement diffrentes. La premire est plus simple car elle consiste dtruire des occurrences survoles, mais elle est moins optimise. La deuxime va utiliser la technique du masque dynamique. chaque dplacement de la souris, une occurrence est place sur la scne la position du curseur.
Figure 20-4
Limpression de grattage est obtenue partir de la suppression doccurrences qui recouvrent la totalit du texte !
Chemin daccs : Jeux/Autres/JeuxGrattage1.a Pour cette premire animation, le contenu de la scne se limite un texte statique aux coordonnes 109 en _x et 60 en _y. Le script de lanimation est extrmement simple car il se rsume une double boucle qui va placer dynamiquement un symbole sur la scne. Chaque occurrence alors obtenue reoit lassignation dun gestionnaire onRollOver.
451
Les jeux Partie IV
Script
1 var exemplaires = 0; 2 for (i=0; i<=80; i++) { 3 for (j=0; j<=20; j++) { 4 exemplaires++; 5 _root.attachMovie("tache", "tache"+exemplaires, exemplaires); 6 _root["tache"+exemplaires]._x = 40+i*6; 7 _root["tache"+exemplaires]._y = 40+j*6; 8 _root["tache"+exemplaires]._rotation = random(360); 9 _root["tache"+exemplaires].onRollOver = function() { 10 this.removeMovieClip(); 11 }; 12 } 13 }
Analyse
Ligne 2 : il nous faut un nom unique pour chaque occurrence cre. Nous devons donc composer les noms par concatnation avec une chane de texte xe et une valeur diffrente chaque excution de la boucle, cest le rle de la variable exemplaires. Ligne 3 : la premire boucle for va excuter 80 rptitions de 20 placements sur la scne. Ligne 6 : le symbole dont le nom de liaison est tache est plac sur la scne. Les noms donns aux occurrences sont tache1, tache2, tache3, etc. Nous aurions pu choisir un autre prxe, nous ntions pas oblig de prendre le mme que le nom de liaison. Lignes 7 9 : les occurrences places sur la scne sont positionnes en lignes les unes sous les autres. Pour viter dobtenir une rptition de motifs identiques, nous avons donn une orientation diffrente chaque occurrence. Lignes 10 12 : chaque survol dune occurrence par le curseur, elle est automatiquement dtruite.
Remarque
Si vous souhaitiez vous-mme placer des occurrences sur la scne, il est important de savoir quelles ne pourront pas tre dtruites, mais uniquement masques ou positionnes en dehors de la scne.
Cette technique prsente lavantage dtre trs simple, mais elle nest pas optimise, cela se ressent dans lafchage de lanimation. Toutes les occurrences ne disparaissent pas au survol du curseur lorsquil va trop vite. Nous vous proposons donc une deuxime technique un peu plus complexe, mais nanmoins plus rapide lafchage.
452
La scne a un contenu lgrement diffrent. Elle contient les lments suivants : Un texte dans un clip avec un rectangle de couleur identique celle qui doit apparatre derrire le texte au grattage. Un rectangle noir plac au mme endroit que le clip contenant le texte.
Jeu de grattage avec utilisation d'un masque

Nous avons fait une copie dcran o nous vous montrons que le texte est bien dans un clip contenant un rectangle de couleur.
Figure 20-5
La scne de couleur vert fonc contient un texte dans un clip sur un rectangle de couleur, ainsi quun rectangle noir.
Chemin daccs : Jeux/Autres/JeuxGrattage2.a Pour cette animation, nous avons utilis une occurrence intitule msk dans laquelle nous allons crer des occurrences pour donner de la matire au masque qui va alors rvler loccurrence zoneMasquee.
Script
1 2 3 4 var exemplaires = 0; // _root.createEmptyMovieClip("msk", 1); //
453
Les jeux Partie IV
5 6 7 8 9 10 11 12 13 14 15 16 17
_root.onMouseDown = function() { _root.onMouseMove = function() { exemplaires++; _root.msk.attachMovie("tache", "tache"+exemplaires, exemplaires); _root.msk["tache"+exemplaires]._x = _xmouse; _root.msk["tache"+exemplaires]._y = _ymouse; _root.msk["tache"+exemplaires]._rotation = random(360); }; }; _root.onMouseUp = function() { delete _root.onMouseMove; }; zoneMasquee.setMask(msk);
Analyse
Ligne 2 : comme dans lanimation prcdente, la valeur de cette variable va nous permettre de nommer diffremment toutes les occurrences places sur la scne. Ligne 4 : un clip vide est cr sur la scne. Il nest pas positionn un endroit prcis, de ce fait, il reste en haut gauche de la scne. Ligne 6 : ce premier gestionnaire va permettre dexcuter celui qui se trouve la ligne 7. Les lignes dinstructions 8 12 ne pourront donc sexcuter qu partir du moment o lutilisateur maintiendra le bouton de la souris enfonc, tout en la bougeant. Ligne 8 : ds que lutilisateur bouge sa souris, la variable exemplaires sincrmente donc. Ligne 9 : grce la valeur de la variable ci-dessus, nous pouvons placer une occurrence dans le clip cr la ligne 4, en la nommant tache3 (si exemplaires vaut 3). Lignes 10 11 : cette occurrence est place lendroit prcis du curseur de la souris. Ligne 12 : comme dans lanimation prcdente, an de ne pas avoir une rptition de motifs, nous orientons les occurrences des valeurs alatoires. Ligne 15 : lorsque lutilisateur relche le bouton de la souris, il faut dtruire le gestionnaire mouseMove. Ligne 18 : jusqu prsent, nous avons un texte sur la scne qui se trouve dans un clip. Son occurrence sintitule zoneMasquee. Le clip vide que nous avons cr sur la scne la ligne 4 sappelle msk. Nous appliquons donc loccurrence qui contient le texte, un masque, celui qui contient toutes vos duplications de formes. Ainsi, plus vous ajoutez doccurrences dans le clip du masque, plus vous voyez le contenu de loccurrence contenant le texte. Cette technique est donc plus complexe que la premire, mais le mouvement est plus uide.
454
Bogue ventuel
Comme vous l'aurez constat, nous ne plaons pas les occurrences sur la scne, mais dans une autre occurrence. La plupart des exemples que vous avez srement rencontrs place les occurrences sur _root, mais ce n'est pas la seule possibilit.
Jeu de dames en rseau

Dans le dossier Jeux/Autres, vous dcouvrirez quil existe plusieurs chiers JeuxDames. Celui qui porte le sufxe Intro sert dexemple dans la dernire partie de ce livre sur les Explications communes inter-applications. Celui qui porte le numro 2 contient le mme script que celui que nous allons analyser, une petite diffrence prs. Une fonction a t cre an de simplier et optimiser le script. Cela rend tout de mme les explications un peu plus complexes, nous allons donc analyser lanimation JeuxDames.fla.
Figure 20-6
Cases et pions sont placs dynamiquement, ce qui simplie le dveloppement dune telle application.
Ce jeu a la particularit dtre jouable en rseau, il faut donc disposer dun serveur Flash Communication Server ou Flash Media Server. Rfrez-vous la dernire partie de ce livre sur les Explications communes.
455
Les jeux Partie IV
Chemin daccs : Jeux/Autres/JeuxDames.a Lanimation ne contient pas le plateau de jeu que vous voyez sous les pions, car il est construit dynamiquement. Lanimation contient uniquement le bouton en haut gauche qui permet de rejouer une nouvelle partie. Cette occurrence sappelle btNellePartie. Deux textes de saisie vont permettre aux joueurs de saisir leurs noms. Il aurait tout fait t envisageable dajouter du son cette animation, an que les joueurs puissent dialoguer entre eux, ou bien mme dajouter une zone de chat, mais nous avons prfr simplier lanimation. Si vous souhaitiez toutefois ajouter une de ces deux fonctionnalits ou mme les deux, dans la partie Mdias de ce livre, vous trouverez des tudes de cas vous proposant lanalyse danimations partageant du texte et/ou du son. Lanimation ne contient quun seul script, mais il est trs long et assez complexe pour un novice. Il reste cependant trs structur car il se divise en sept parties : 1. la connexion au serveur Flash Media Server et la cration dun cookie ; 2. linitialisation dune liste et de deux variables ; 3. la construction du plateau ; 4. le placement des pions noirs ; 5. le placement des pions blancs ; 6. la synchronisation du mouvement des joueurs ; 7. la programmation du bouton permettant de rejouer une nouvelle partie.
Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 maConnect = new NetConnection(); maConnect.connect("rtmp:/livre/studio1"); coursier = SharedObject.getRemote("position", maConnect.uri, true); coursier.connect(maConnect); // var exemplaires = 0; var nomsDesCases = ["caseBlanche", "caseNoire"]; var caseActuelle = false; // for (i=1; i<=10; i++) { caseActuelle = !caseActuelle; for (j=1; j<=10; j++) { exemplaires++; caseActuelle = !caseActuelle; laCase = nomsDesCases[Number(caseActuelle)]; _root.attachMovie(laCase, "case"+exemplaires, exemplaires);
456
17 _root["case"+exemplaires]._x = 100+j*35; 18 _root["case"+exemplaires]._y = 10+i*35; 19 } 20 } 21 // 22 placerPions = function (nomSymbole, nomOccurrence, niveauDepart, decalageVertical, nomListePlacesX, nomListePlacesY) { 23 var exemplaires = 0; 24 var niveauPions = niveauDepart; 25 var decalageCase = -35; 26 _root[nomListePlacesX] = []; 27 _root[nomListePlacesY] = []; 28 _root[nomListePlacesX].push(""); 29 _root[nomListePlacesY].push(""); 30 for (i=1; i<=4; i++) { 31 decalageCase = decalageCase == -35 ? 0 : -35; 32 for (j=1; j<=5; j++) { 33 exemplaires++; 34 niveauPions++; 35 // 36 _root[nomOccurrence+exemplaires].removeMovieClip(); 37 _root.attachMovie(nomSymbole, nomOccurrence+exemplaires, niveauPions); 38 _root[nomOccurrence+exemplaires]._x = 100+(j*70)+decalageCase; 39 _root[nomOccurrence+exemplaires]._y = decalageVertical+i*35; 40 _root[nomOccurrence+exemplaires].sonNumero = exemplaires; 41 _root[nomListePlacesX].push(_root[nomOccurrence+exemplaires]._x); 42 _root[nomListePlacesY].push(_root[nomOccurrence+exemplaires]._y); 43 _root[nomOccurrence+exemplaires].onPress = function() { 44 this.swapDepths(_root.getNextHighestDepth()); 45 this.startDrag(); 46 }; 47 _root[nomOccurrence+exemplaires].onRelease = _root[nomOccurrence +exemplaires].onReleaseOutside=function () { stopDrag();}; 48 // 49 _root[nomOccurrence+exemplaires].onMouseMove = function() { 50 _root[nomListePlacesX][this.sonNumero] = this._x; 51 _root[nomListePlacesY][this.sonNumero] = this._y; 52 coursier.data.listePionsBlancsX = listePionsBlancsX; 53 coursier.data.listePionsBlancsY = listePionsBlancsY; 54 coursier.data.listePionsNoirsX = listePionsNoirsX; 55 coursier.data.listePionsNoirsY = listePionsNoirsY; 56 }; 57 } 58 } 59 // 60 coursier.data.listePionsBlancsX = listePionsBlancsX; 61 coursier.data.listePionsBlancsY = listePionsBlancsY; 62 coursier.data.listePionsNoirsX = listePionsNoirsX; 63 coursier.data.listePionsNoirsY = listePionsNoirsY; 64 // 65 };
457
Les jeux Partie IV
placerPions("pionNoir", "pionNoir", 1000, 10, "listePionsNoirsX", "listePionsNoirsY"); placerPions("pionBlanc", "pionBlanc", 1100, 220, "listePionsBlancsX", "listePionsBlancsY"); // // coursier.onSync = function() { listePionsBlancsX = coursier.data.listePionsBlancsX; listePionsBlancsY = coursier.data.listePionsBlancsY; listePionsNoirsX = coursier.data.listePionsNoirsX; listePionsNoirsY = coursier.data.listePionsNoirsY; for (i=1; i<=20; i++) { _root["pionNoir"+i]._x = listePionsNoirsX[i]; _root["pionNoir"+i]._y = listePionsNoirsY[i]; // _root["pionBlanc"+i]._x = listePionsBlancsX[i]; _root["pionBlanc"+i]._y = listePionsBlancsY[i]; } nomJoueur1 = coursier.data.nomJoueur1; nomJoueur2 = coursier.data.nomJoueur2; }; // nomJoueur1_inst.onChanged = function() { coursier.data.nomJoueur1 = this.text; }; nomJoueur2_inst.onChanged = function() { coursier.data.nomJoueur2 = this.text; }; btNellePartie.onPress = function() { placerPions("pionNoir", "pionNoir", 1000, 10, "listePionsNoirsX", "listePionsNoirsY"); placerPions("pionBlanc", "pionBlanc", 1100, 220, "listePionsBlancsX", "listePionsBlancsY"); 95 };
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
Analyse
Lignes 1 4 : nous tablissons une connexion avec le serveur en choisissant studio1 comme nom de session. Nous crons galement un cookie, appel SharedObject, qui va contenir les entres de deux tableaux que nous allons lui envoyer aux lignes 52 et 53. Ligne 6 : nous allons crer des occurrences dynamiquement. Nous devons donc utiliser une variable pour la construction du nom par concatnation. Ligne 7 : cette liste contient deux noms de liaisons de symboles qui vont tre utiliss pour la construction dynamique du plateau. Ligne 8 : la construction du plateau va se faire partir de cases blanches et noires. Nous utilisons la valeur boolenne dune variable pour obtenir une alternance.
458
Construction du plateau de jeu

Ligne 10 : nous nous apprtons rpter 10 fois Ligne 12 : la cration dune ligne de 10 cases. Ligne 11 : comme nous le prcisions ci-dessus, an de placer des cases noires et des cases blanches, nous utilisons une valeur boolenne. Comment ? Explications aux lignes 14 et 15 Ligne 13 : comme nous lvoquions la ligne 6, cette variable va permettre de nommer nos occurrences case1, case2, case3, etc., et de les positionner des niveaux diffrents. Ligne 14 : le rsultat de lexcution de cette ligne dinstruction est dinverser la valeur de la variable caseActuelle. Cela ne fonctionne bien sr quavec des valeurs boolennes. Les valeurs true et false peuvent tre converties en 1 et 0 grce la fonction Number(). Ligne 15 : en faisant rfrence notre tableau nomsDesCases qui ne contient que deux entres, nous allons pouvoir obtenir les expressions caseBlanche et caseNoire qui correspondent aux noms de liaison des symboles placer sur la scne. Ligne 16 : le symbole dont le nom de liaison correspond la valeur de la variable laCase est plac sur la scne. Lignes 17 et 18 : les occurrences sont places les unes sous les autres, colonne aprs colonne.
Placement des pions sur le plateau

Comme vous avez peut-tre pu le constater, nous avons deux fois les mmes lignes dinstructions dans deux fonctions diffrentes. Nous allons donc analyser uniquement la fonction placerPionsNoirs. Ligne 22 : cette fonction place les pions sur le plateau et programme chaque occurrence. Ligne 23 : nous allons crer des occurrences dynamiquement. Nous devons donc utiliser une variable pour la construction du nom par concatnation. Ligne 24 : cette variable va tre utilise pour dnir le niveau (le plan) de chaque occurrence. Ligne 25 : cette variable va nous aider placer les pions sur le plateau. Lignes 26 et 27 : ces deux listes vont tre celles que nous allons utiliser le plus souvent. Elles vont contenir les coordonnes _x et _y de tous les pions noirs. Ce sont elles qui vont permettre de synchroniser les plateaux de deux joueurs, car elles vont tre envoyes au serveur Flash Media aux lignes 58 et 59. Lignes 28 et 29 : la premire entre du tableau ne va pas tre exploite dans notre application, cest pourquoi nous lui dnissons une valeur quelconque. Ligne 30 : nous allons placer quatre lignes de pions, nous avons donc besoin dune boucle allant de 1 4.
459
Les jeux Partie IV
Ligne 31 : une ligne sur deux, les pions noirs doivent tre placs plus loin. Nous ajoutons donc cette ligne dinstruction pour dcaler le premier pion des lignes impaires.
Figure 20-7
Les pions doivent toujours tre placs sur les cases de mme couleur, ils sont donc placs plus ou moins loin du bord gauche de la scne, selon la ligne sur laquelle ils se trouvent.
Ligne 33 : rappelons que cette variable va tre utilise pour nommer les occurrences. Ligne 34 : cette variable va dnir le niveau (le plan) de chaque occurrence, ce sera le troisime paramtre de la mthode attachMovie(). Ligne 36 : juste avant de placer un pion, nous retirons une occurrence qui porterait ventuellement le mme nom. Ligne 37 : nous plaons sur la scne, le symbole dont le nom de liaison est pionNoir. Lignes 38 et 39 : loccurrence obtenue est alors prcisment place verticalement et horizontalement, en tenant compte du dcalage respecter une ligne sur deux (voir la gure 20-7). Ligne 40 : nous dnissons pour chaque occurrence, une variable intitule sonNumero qui correspond au sufxe de son nom. Loccurrence intitule pionNoir7 possde une variable intitule sonNumero, dont la valeur est 7. Elle servira faire rfrence au numro dindex (numro dentre) dans la liste. Lignes 41 et 42 : chaque position de pion est mmorise dans deux listes. La position _x est envoye dans la liste intitule placesXPionsNoirs. La position _y est envoye dans la liste intitule placesYPionsNoirs. Lignes 43 46 : ce gestionnaire dnit le comportement que devra avoir un pion lorsquil est cliqu. Il sera rendu mobile et viendra se placer au premier plan des autres. Lignes 49 54 : ce gestionnaire est trs important, car cest lui qui synchronise les plateaux des deux joueurs distance. En effet, loccurrence en cours de dplacement inscrit ses coordonnes dans les listes placesXPionsNoirs et placesYPionsNoirs, au numro
460
dentre correspondant au sufxe de son nom doccurrence (voir la ligne 40). Les lignes 52 et 53 envoient ensuite au cookie sur le serveur, le contenu des deux tableaux placesXPionsNoirs et placesYPionsNoirs. Lignes 58 et 59 : visiblement, ces deux lignes dinstructions effectuent le mme travail, mais elles ne se trouvent pas au mme endroit. En effet, elles ne vont pas sexcuter au mme instant. Celles des lignes 52 et 53 vont se dclencher lorsquun pion est relch. Celles des lignes 58 et 59 se dclenchent lorsque les pions sont placs sur le plateau pour la premire fois au lancement du jeu.
Synchronisation du mouvement des joueurs

La synchronisation des donnes changes entre les joueurs sappuie sur la gestion des cookies ct serveur. Souvenez-vous, les premires lignes de ce script ont tabli une connexion, nous allons pouvoir lire et crire des donnes sur le serveur. Ligne 104 : le gestionnaire onSync va recevoir du serveur tous les changements effectus par le joueur adverse. Lignes 105 108 : la rception des nouveauts, nous stockons dans quatre variables le contenu des variables stockes ct serveur. Ligne 109 : nous devons prsent exploiter ce que nous avons reu. Souvenez-vous, nous avions excut aux lignes 58, 59, 99 et 100, des lignes dinstructions dont le rle tait denvoyer au serveur le contenu de tableaux. Nous devons prsent parcourir ces tableaux pour utiliser les valeurs de ces entres. Cette boucle for() va donc nous servir repositionner tous les pions de notre animation. Lignes 110 114 : chaque occurrence est positionne en _x et en _y, aussi bien pour les pions noirs que pour les pions blancs. Lignes 116 117 : au cas o lun des joueurs changerait son nom, les textes dynamiques prsents sur la scne doivent tre mis jour. Pour tre encore plus prcis, ds que deux personnes se connectent cette application, ds quelles saisissent leurs noms, ce sont ces deux lignes dinstructions qui les afchent sur la scne. Lignes 120 122 : ct application et non serveur, ds que lutilisateur tape son nom dans le texte de saisie intitul nomJoueur1_inst, il est automatiquement envoy au serveur Flash Media. Celui-ci se charge alors de le renvoyer tous les utilisateurs connects la session studio1, notre adversaire dans le cas de notre application.
Programmation du bouton Nouvelle partie

Ligne 126 : lorsque lun des deux joueurs clique sur ce bouton, les deux principales fonctions de notre application qui sont charges de placer les pions sur le plateau sexcute.
461
Les jeux Partie IV
Bogues ventuels
Une fois encore, dans un tel programme le risque de bogue est inluctable, mais cest surtout la logique de construction du script qui est le plus difcile. Dans cette application, il faut par exemple grer la relation avec le serveur. Le dplacement dune occurrence ne pose pas vraiment de problme, cest de mmoriser sa position qui ncessite du code et donc gnre des risques derreurs.
Jeu du chemin le plus court

Depuis plusieurs annes, Yazo.net propose des animations disponibles en tlchargement (.fla et .swf). Voici une nouvelle animation qui devrait vous occuper quelques heures. Contrairement la gure 20-8 la scne prsente uniquement des points (sans les droites qui indiquent le parcours optimis). Le but de ce jeu est de tracer un chemin qui passe par tous les points avec un minimum de clics.
Figure 20-8
Effectuez de simples clics sur la scne de lanimation, une balle se dplace en faisant disparatre toutes celles quelle rencontre sur son passage.
462
Chemin daccs : Jeux/Autres/YazoLignes.a La scne de cette animation contient les lments suivants : Loccurrence dun composant de type ComboBox pour pouvoir proposer des numros de parties. Elle sintitule listeDesSeries. Deux textes dynamiques dont les noms de variables sont affichageClics et clicsMaxi. Comme leurs noms le prcisent, pour chaque partie choisie dans le menu, un nombre maximum de clics sera afch ainsi que le nombre de coups (clics) jous. Pour nir, nous avons plac une occurrence intitule balle qui va se dplacer en fonction des diffrents clics que vous effectuerez.
Script
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 var nbrClics:Number = 0; var etatClic:Boolean = false; var affichageClics:Number = 0; var noeudAouvrir:Number = 0; var racine:XML; // import mx.transitions.Tween; import mx.transitions.easing.*; // // Chargement des donnes XML // var chargeDocXML:XML = new XML(); chargeDocXML.ignoreWhite = true; chargeDocXML.onLoad = function() { racine = this.firstChild; nbrListe = this.firstChild.childNodes.length; listeDesSeries.addItem("|---|"); for (i=0; i<nbrListe; i++) { listeDesSeries.addItem(i+1); } listeDesSeries.setStyle("fontSize",10); listeDesSeries.setSize(40,20); }; chargeDocXML.load("coordonnees.xml"); // // Dplacement de la balle // _root.onMouseDown = function() { if (_ymouse>25 && etatClic) { nbrClics++; affichageClics = nbrClics; retourX = new Tween(balle, "_x", Regular.easeOut, balle._x, _xmouse, 0.5, true);
463
Les jeux Partie IV
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
retourY = new Tween(balle, "_y", Regular.easeOut, balle._y, _ymouse, 0.5, true); // a = 0; retourY.onMotionChanged = function() { for (i=0; i<20; i++) { if (balle.hitTest(_root["piece"+i])) { _root["piece"+i].removeMovieClip(); } } }; } }; // // Construction de la disposition des pices // function placerDroites(numeroSerieChoisie) { nbrClics = 0; for (i=0; i<20; i++) { pointX = racine.childNodes[numeroSerieChoisie].childNodes[0].childNodes[i] .attributes.coordx; pointY = racine.childNodes[numeroSerieChoisie].childNodes[0].childNodes[i] .attributes.coordy; this.attachMovie("piece","piece"+i,i,{_x:pointX, _y:pointY}); clicsMaxi = racine.childNodes[numeroSerieChoisie].childNodes[1].childNodes.length-1; } } // // couteur servant empcher le clic lorsque le menu est droul var surveil:Object = new Object(); surveil.open = function() { etatClic = false; }; listeDesSeries.addEventListener("open",surveil); surveil.close = function() { etatClic = true; }; listeDesSeries.addEventListener("close",surveil); surveil.change = function(recup) { noeudAouvrir = recup.target.selectedIndex-1; if (noeudAouvrir>=0) { placerDroites(noeudAouvrir); } affichageClics = 0; balle._x = 13; balle._y = 307; }; listeDesSeries.addEventListener("change",surveil); // // Fonction servant tracer le chemin optimal // function tracerChemin() {
464
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
_root.createEmptyMovieClip("chemin",1000); nombreNoeudsLigne = clicsMaxi; premierPointX = racine.childNodes[noeudAouvrir].childNodes[1].childNodes[0] .attributes.coordx; premierPointY = racine.childNodes[noeudAouvrir].childNodes[1].childNodes[0] .attributes.coordy; chemin.lineStyle(15,0xCCCCCC,50); chemin.moveTo(premierPointX,premierPointY); for (i=1; i<=nombreNoeudsLigne; i++) { pointX = racine.childNodes[noeudAouvrir].childNodes[1].childNodes[i] .attributes.coordx; pointY = racine.childNodes[noeudAouvrir].childNodes[1].childNodes[i] .attributes.coordy; chemin.lineTo(pointX,pointY); } } _root.onKeyDown = function() { if (Key.isDown(Key.SHIFT)) { tracerChemin(); } }; _root.onKeyUp = function() { chemin.removeMovieClip(); }; Key.addListener(_root);
Voici le contenu du chier XML intitul coordonnees.xml :

<seriesPoints> <serie> <points> <point coordx='209.5' coordy='246'/> <point coordx='112.55' coordy='222'/> <point coordx='43.55' coordy='167'/> <point coordx='88.55' coordy='209'/> <point coordx='155.55' coordy='161'/> <point coordx='94.55' coordy='140'/> <point coordx='64.55' coordy='106'/> <point coordx='143.55' coordy='219'/> <point coordx='179.55' coordy='228'/> <point coordx='213.5' coordy='177'/> <point coordx='201.5' coordy='57'/> <point coordx='229.5' coordy='88'/> <point coordx='40.55' coordy='46'/> <point coordx='9.55' coordy='250'/> <point coordx='187.5' coordy='273'/> <point coordx='226.5' coordy='35'/> <point coordx='197.5' coordy='103'/> <point coordx='156.55' coordy='122'/> <point coordx='224.5' coordy='310'/> <point coordx='46.55' coordy='113'/> </points>
465
Les jeux Partie IV
<ligne> <point coordx='14' coordy='299'/> <point coordx='43' coordy='56'/> <point coordx='222' coordy='303'/> <point coordx='226' coordy='43'/> <point coordx='87' coordy='234'/> </ligne> </serie> <serie> <points> <point coordx='39.55' coordy='189.7'/> <point coordx='118.55' coordy='160.8'/> <point coordx='190.5' coordy='187'/> <point coordx='98.55' coordy='190.9'/> <point coordx='173.55' coordy='138.05'/> <point coordx='132.55' coordy='194.1'/> <point coordx='145.55' coordy='254.25'/> <point coordx='71.55' coordy='153.85'/> <point coordx='105.55' coordy='144.75'/> <point coordx='141.55' coordy='160.95'/> <point coordx='21.55' coordy='66.4'/> <point coordx='155.55' coordy='234.35'/> <point coordx='70.55' coordy='124.45'/> <point coordx='49.55' coordy='213.65'/> <point coordx='18.55' coordy='218.6'/> <point coordx='99.55' coordy='106.5'/> <point coordx='127.55' coordy='226.3'/> <point coordx='139.55' coordy='116.15'/> <point coordx='35.55' coordy='266.6'/> <point coordx='170.55' coordy='105.2'/> </points> <ligne> <point coordx='18' coordy='290'/> <point coordx='33' coordy='209'/> <point coordx='161' coordy='115'/> <point coordx='167' coordy='260'/> <point coordx='24' coordy='69'/> <point coordx='225' coordy='199'/> </ligne> </serie> </seriesPoints>
Dans le chier fourni en exemple (ou dans celui que vous pourriez vous-mme raliser) il y a bien videmment davantage de lignes que dans la description ci-avant. Il nous a sembl inutile de reproduire ici un tel chier, puisque seule sa structure nous intresse.
466
Analyse
Lignes 1 5 : nous initialisons les variables avec lesquelles nous allons travailler. Lignes 7 et 8 : nous importons les classes ncessaires au bon fonctionnement de la classe Tween(). Lignes 12 14 : nous instancions la classe XML() an de pouvoir y charger le contenu du chier coordonnees.xml (ligne 24). Ligne 15 : nous mmorisons dans une variable le contenu utile du chier XML pour faciliter le traitement des donnes. Ligne 16 : nous mmorisons dans une autre variable le nombre de nuds contenus la racine du document XML. Ligne 17 : dans loccurrence du composant de type ComboBox, nous dnissons ltiquette (visible dans le menu) de la premire entre. Lignes 18 20 : nous remplissons ensuite cette occurrence de type ComboBox avec des numros. Lignes 21 et 22 : nous formatons loccurrence de type ComboBox. Lignes 28 44 : si lutilisateur clique sur la scne du jeu au-del du 25me pixel du haut de la scne, les lignes dinstructions suivantes pourront tre excutes. La valeur de la variable etatClic doit galement tre xe true (nous reviendrons sur ce paramtre plus loin dans cette analyse). Ligne 30 : nous avons besoin de mmoriser le nombre de clics effectus par lutilisateur pour le comparer aux nombre de clics optimal (pour pouvoir effacer toutes les pastilles en un minimum de clics). Nous afcherons ensuite cette valeur dans un texte dynamique qui se trouve sur la scne, dont le nom de variable est affichageClics. Lignes 32 et 33 : nous dplaons loccurrence intitule balle lemplacement du clic. Lignes 36 42 : au cours du dplacement de la balle, nous vrions si la balle touche des pastilles disposes sur la scne de jeu. Si tel est le cas, elles sont alors supprimes (ligne 39). Lignes 48 56 : la fonction placerDroites permet de disposer sur la scne les pastilles que le joueur devra faire disparatre en les survolant avec la balle. Nous commenons par mmoriser de faon rpte dans deux variables intitules pointX et pointY les valeurs extraites du chier XML an de les utiliser comme paramtres de la mthode attachMovie() de la ligne 53. Lignes 59 66 : nous voquions la ligne 29 la ncessit de xer la valeur de la variable
etatClic true. En effet, lorsque le menu est droul, le choix dune entre se fait en
cliquant au-del du 25me pixel du haut de la scne. An que ce clic ne soit pas interprt comme un clic de dplacement de la balle, nous utilisons une variable boolenne. Lorsque le menu est droul, la variable etatClic est positionne false et true lorsque le menu est ferm.
467
Les jeux Partie IV
Lignes 68 76 : lorsque lutilisateur choisit un numro dans le menu droulant (la ComboBox), la fonction placerDroite() est charge de placer les pastilles sur la scne. La balle est replace en bas gauche de la scne et nous rinitialisons la valeur du nombre de clics effectus au cours dune partie. Lignes 81 102 : cette fonction cache permet dafcher une aide lorsque lutilisateur appuie sur la touche Shift de son clavier. Les droites qui indiquent le chemin optimal sont afches.
Bogues ventuels
Noubliez pas la saisie des lignes 7 et 8 : linstanciation de la classe Tween() des lignes 32 et 33 ne fonctionnerait pas sans cela.
Modles pour le jeu du chemin le plus court

Pour pouvoir mettre jour le jeu que nous venons danalyser ensemble, voici lanimation qui nous a servi constituer les listes de donnes XML contenues dans le chier coordonnees.xml.
Chemin daccs : Jeux/Autres/YazoModeleLignes.a Nous avons tout simplement plac 20 occurrences sans les nommer, car nous faisons rfrence au nom donn par dfaut une occurrence instance1, instance2, etc. Cest lexcution de lanimation que les donnes XML sont copies dans le Presse-papiers. Vous navez alors plus qu coller le contenu de votre Presse-papiers dans le chier XML intitul coordonnees.xml.
Script
1 2 3 4 5 6 7 8 docXML = "<serie>"+newline+"<points>"+newline; for (i=1; i<=20; i++) { positionX = _root["instance"+i]._x; positionY = _root["instance"+i]._y; docXML += "<point coordx='"+positionX+"' coordy='"+positionY+"'/>"+newline; } docXML += "</points>"+newline; docXML += "<ligne>"+newline;
468
9 10 11 12 13 14 15 16 17
_root.onMouseDown = function() { docXML += "<point coordx='"+_root._xmouse+"' coordy='"+_root._ymouse+"'/>"+newline; }; _root.onKeyDown = function() { docXML += "</ligne>"+newline; docXML += "</serie>"; trace(docXML); }; Key.addListener(_root);
Analyse
Ligne 1 : nous initialisons une variable intitule docXML en lui donnant pour valeur la chane de caractres qui correspond la premire ligne dun document XML. Lignes 2 6 : nous ajoutons des nuds enfants notre arborescence XML. Ligne 7 : nous fermons un premier nud enfant. Ligne 8 : nous ouvrons un nouveau nud intitul ligne. Lignes 9 11 : nous ajoutons la n dun nud enfant les balises point et ligne pour pouvoir stocker les informations ncessaires pour tracer les droites de laide qui safche lorsque lon appuie sur la touche Shift. Lignes 12 17 : lorsque vous tapez sur une touche du clavier, le nud XML se referme et est copi dans le Presse-papiers. Il suft alors de le coller la suite des nuds du document coordonnees.xml.
Bogues ventuels
La plus grosse difcult dans cette animation est relative la construction du chier XML. Noubliez pas que toute balise ouverte doit tre ferme.
Exercice pdagogique
Lanimation que nous allons prsent aborder pourrait tre adapte de nombreuses situations, lobjectif tant de constituer des paires. Dans notre exemple il sagit dune traduction, mais nous aurions aussi bien pu placer un calcul dans la colonne de gauche et des rsultats dans celle de droite. Initialement, nous nous sommes poss un certains nombre de questions pour savoir si nous avions intrt dvelopper cette animation de faon dynamique. Gnralement, cela est toujours conseill, mais notre souci de vouloir tre compris dun plus grand nombre nous a conduit retenir la solution dun dveloppement mixte : utilisation du scnario/scne et du code.
469
Les jeux Partie IV
Figure 20-9
Exercice pdagogique classique : lapprenant doit maintenir le bouton de la souris sur lune des pastilles de gauche pour la dplacer sur lune de celles qui se trouvent droite.
Chemin daccs : Jeux/Autres/ExercicePedago.a Pour raliser cette animation, nous avons donc utilis 8 occurrences (les pastilles noires) intitules p1 p4 et r1 r4 que nous avons rparties en deux colonnes. Nous avons ensuite plac des textes statiques lextrieur de ces pastilles. Nous avons galement plac une occurrence de clip contenant le mot Gagn et lavons nomme messageFin. Pour nir, an de comptabiliser le nombre de bonnes rponses, nous avons ajout une dernire variable intitule vScore, situe en haut droite de la scne.
Script
1 2 3 4 5 6 7 8 var numeroLigne = 0; vScore = 0; messageFin._visible = false; for (i=1; i<=5; i++) { _root["p"+i].sonNumero = i; _root["p"+i].onPress = function() { pointXDepart = _xmouse;
470
9 pointYDepart = _ymouse; 10 tempo = _root.createEmptyMovieClip("ligneLien"+numeroLigne, numeroLigne); 11 this.onMouseMove = function() { 12 tempo = _root.createEmptyMovieClip("ligneLien"+numeroLigne, numeroLigne); 13 tempo.lineStyle(3,0x5E685B,100); 14 tempo.moveTo(pointXDepart,pointYDepart); 15 tempo.lineTo(_xmouse,_ymouse); 16 }; 17 }; 18 19 _root["p"+i].onReleaseOutside = function() { 20 if (_root["r"+this.sonNumero].hitTest(_xmouse, _ymouse)) { 21 delete this.onMouseMove; 22 tempo.lineTo(_xmouse,_ymouse); 23 numeroLigne++; 24 vScore++; 25 } else { 26 delete this.onMouseMove; 27 tempo.removeMovieClip(); 28 } 29 if (vScore == 5) { 30 messageFin._visible = true; 31 } 32 }; 33 }
Analyse
Ligne 1 : nous allons avoir besoin de crer des occurrences vides pour y associer une ligne (celle qui sera trace lorsque vous dplacerez une pastille de la colonne de gauche sur lune de celles qui se trouvent droite). chaque nouvelle ligne cre, nous devons lui associer un niveau (voir explication de la ligne 10). Nous stockerons donc le nombre de lignes dj cres dans la variable numeroLigne. Ce nom voque explicitement le numro de ligne utiliser pour le prochain niveau. Ligne 2 : chaque bonne rponse de lutilisateur, nous incrmenterons la valeur de cette variable. Ligne 3 : nous avons dispos sur la scne une occurrence qui safchera lorsque toutes les bonnes rponses seront trouves ; nous devons donc commencer par la masquer. Lignes 5 17 : nous effectuons une boucle pour dnir les vnements onPress et onRelease associs chaque pastille. Ligne 6 : nous dnissons une variable associe chaque occurrence pour pouvoir rcuprer sa valeur lors du clic sur chaque pastille. Lignes 8 et 9 : nous mmorisons dans deux variables les coordonnes du clic de la souris que nous utiliserons la ligne 14.
471
Les jeux Partie IV
Ligne 10 : nous crons un clip vide avec un nom obtenu par concatnation de lexpression ligneLien et de la valeur de la variable numeroLigne. Nous utilisons galement cette dernire pour dnir son niveau de plan comme nous lvoquions dans les explications concernant la ligne 1. Lignes 11 16 : nous dnissons un gestionnaire dvnement charg de tracer une droite lorsque la souris sera en mouvement (onMouseMove). Ligne 12 : chaque mouvement de la souris, nous allons devoir redessiner la ligne pralablement cre en gardant le mme niveau. Ligne 13 : nous dnissons un style de trait pour la droite. Ligne 14 : nous dnissons le point de dpart de la droite avec les valeurs mmorises aux lignes 8 et 9. Ligne 15 : nous venons de dnir le point de dpart de notre droite ; nous dnissons ici, grce la mthode lineTo(), le point darrive et traons en mme temps la droite. Ligne 19 : lorsque lutilisateur relche le bouton de sa souris aprs avoir trac une droite entre deux pastilles, nous devons valuer sa rponse. Ligne 20 : un test sassure que la pastille sur laquelle lutilisateur relche le bouton de la souris comporte le mme sufxe numrot que la pastille sur laquelle il avait pralablement cliqu pour commencer tracer la droite. Par exemple, si lutilisateur a cliqu sur loccurrence p2, il doit relcher le bouton de la souris sur loccurrence r2. La valeur 2 comparer est stocke dans la variable sonNumero associe chaque pastille. Ligne 21 : lorsque le bouton de la souris est relch, nous devons supprimer le gestionnaire dvnement onMouseMove pour interrompre le dessin de la droite. Ligne 22 : nous traons une dernire ligne. Ligne 23 : nous incrmentons la variable servant compter les numros des lignes dj traces. Ligne 24 : nous augmentons le nombre de bonnes rponses. Lignes 26 et 27 : si lutilisateur na pas relch lextrmit de la droite sur la bonne pastille (sil tablit une mauvaise relation), nous supprimons la ligne trace. Lignes 29 31 : un test est effectu pour savoir si les 5 relations ont t valides.
Bogues ventuels
Loubli des lignes 6 et 13 fait partie des erreurs classiques. Par ailleurs, le mot cl this est trs important la ligne 20. Ce dernier fait rfrence la variable associe loccurrence. Si vous oubliez les lignes 21 et 26, le trac de la droite se poursuivra, mme si vous avez relch le bouton de la souris.
472
Partie V
Autres fonctionnalits
Il est loin le temps o FutureSplash se contentait de faire de simples animations en 1995-1996 ! Aujourdhui, nous ne parlons plus uniquement de chiers lisibles sur Internet grce un player, mais danimations et dapplications qui possdent des fonctionnalits avances ! Avant daller plus loin, rappelons quil existe trois techniques de lecture dune animation ce jour. Utiliser le lecteur disponible dans le dossier Players, lui-mme rang dans le dossier parent de lapplication Flash. Il sagit dune application qui ne ncessite pas lexcution de Flash pour fonctionner. Transformer une animation en un projecteur. Faire appel au plug-in de votre navigateur. Prcisons ce sujet quil nest pas ncessaire dinclure un chier .swf dans une page HTML pour le visualiser. Un simple glisser-dplacer dans la fentre dun navigateur suft lire une animation. tendre les capacits dun chier .swf et personnaliser son interface, voil comment nous pourrions rsumer ce chapitre.
21
Impression, e-mail et fentre
Ce chapitre ne possde pas danimations associes, nous nutiliserons donc pas la mme structure de prsentation des explications.
Envoyer un e-mail partir de Flash

Prcisons ds prsent quil existe principalement deux techniques pour envoyer un e-mail partir dune animation Flash : Utiliser la fonction mail() en PHP. Ouvrir votre logiciel de messagerie. Commenons par cette dernire qui ne prsente aucune difcult. 1. Saisissez la ligne dinstruction suivante dans un script demandant lenvoi dun e-mail :
getURL("mailto:yazo@yazo.net");
Si vous excutez cette ligne dinstruction partir dune application off-line, le navigateur de votre ordinateur se lancera avant douvrir votre logiciel de messagerie. prsent, voyons la technique qui consiste faire appel une page PHP. Cette dernire doit contenir le script suivant :
<? mail($adresse,$objet,$message,"From: $dest\nReply-To: $dest\nX-Mailer: PHP/"); ?>
Autres fonctionnalits Partie V
Lorsque vous ferez appel cette page, elle sattend ce que vous lui envoyiez trois variables dont les noms sont adresse, objet et message. Revenons prsent sur lanimation qui va appeler cette page. Elle doit contenir trois textes de saisie dont les noms sont vAdresse, vObjet et vMessage. Le script de la premire image-cl de lanimation est le suivant :
btEnvoi.onPress = function() { adresse = "http://www.yazo.net/envoyermail.php?adresse="+vAdresse+"&objet=" +vObjet+"&message="+vMessage; loadVariablesNum(adresse, 0); };
Vous noterez que nous avons dabord concatn une chane de caractres qui correspond ladresse, avec les variables envoyer comme paramtres de lURL. Cest ensuite que nous faisons appel la mthode loadVariables().
Imprimer une animation

Cette animation est particulirement intressante car elle ne se limite pas un simple appel de la fentre dimpression En effet, vous allez dcouvrir quil est possible deffectuer trois types dimpression : une occurrence ; la scne ; une partie de la scne.
Figure 21-1
Lorsque vous cliquez sur le bouton dimpression, cette premire fentre vous demande de spcier quel type dimpression vous souhaitez.
476
Impression, e-mail et fentre Chapitre 21
Chemin daccs : NAVIGATEUR OS CDROM/Navigateurs/ NavigateurImprimer.a La scne de cette animation ne contient que deux occurrences. Celle dun clip dont le nom est photo_inst qui reprsente la photo imprimer. La deuxime et dernire est celle du bouton Imprimer dont le nom doccurrence est btImprimer. Un symbole dont le nom de liaison est panneauImpression va nous servir dinterface dimpression comme vous pouvez le voir sur la gure 21-1. Le script de cette tude de cas est particulirement grand, mais il est trs structur, car il contient les gestionnaires rattachs aux quatre boutons de linterface dimpression. Il faut ajouter cela : 1. La dnition dune fonction finImpression appele aprs chaque choix (gure 21-1). 2. La gestion dun systme de dessin dune zone dimpression.
Script
1 btImprimer.onPress = function() { 2 // 3 finImpression = function () { 4 _root.panneauImpression.removeMovieClip(); 5 nelleImpression.send(); 6 delete nelleImpression; 7 }; 8 // 9 _root.attachMovie("panneauImpression", "panneauImpression", 1); 10 panneauImpression._x = 300; 11 panneauImpression._y = 200; 12 // 13 panneauImpression.btDefinirZone.onPress = function() { 14 _root.panneauImpression.removeMovieClip(); 15 _root.attachMovie("curseurCroix", "curseurCroix", 1000); 16 curseurCroix.startDrag(true); 17 Mouse.hide(); 18 _root.onMouseDown = function() { 19 xOrig = _root._xmouse; 20 yOrig = _root._ymouse; 21 this.onMouseMove = function() { 22 _root.createEmptyMovieClip("boiteImpression", 1); 23 boiteImpression.lineStyle(1, 0, 75); 24 boiteImpression.moveTo(xOrig, yOrig); 25 boiteImpression.lineTo(_root._xmouse, yOrig); 26 boiteImpression.lineTo(_root._xmouse, _root._ymouse); 27 boiteImpression.lineTo(xOrig, _root._ymouse); 28 boiteImpression.lineTo(xOrig, yOrig); 29 }; 30 };
477
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
_root.onMouseUp = function() { delete onMouseMove; xRelache = _root._xmouse; yRelache = _root._ymouse; delete _root.onMouseMove; droite = Math.max(xOrig, xRelache)-30; gauche = Math.min(xOrig, xRelache)-30; bas = Math.max(yOrig, yRelache)-34; haut = Math.min(yOrig, yRelache)-34; boiteImpression.attachMovie("btAnnulation", "btAnnulation", 2); boiteImpression.btAnnulation._x = xOrig+15; boiteImpression.btAnnulation._y = yOrig+15; boiteImpression.btAnnulation.onPress = function() { boiteImpression.removeMovieClip(); curseurCroix.removeMovieClip(); Mouse.show(); delete _root.onMouseDown; }; boiteImpression.attachMovie("btValidation", "btValidation", 3); boiteImpression.btValidation._x = xOrig+40; boiteImpression.btValidation._y = yOrig+15; boiteImpression.btValidation.onPress = function() { curseurCroix.removeMovieClip(); Mouse.show(); delete _root.onMouseDown; boiteImpression.removeMovieClip(); // nelleImpression = new PrintJob(); nelleImpression.start(); nelleImpression.addPage(photo_inst, {xMin:gauche, xMax:droite, yMin:haut, yMax:bas}); finImpression(); }; }; }; // panneauImpression.btImprimerPhoto.onPress = function() { nelleImpression = new PrintJob(); nelleImpression.start(); nelleImpression.addPage(photo_inst); finImpression(); }; // panneauImpression.btImprimerScene.onPress = function() { nelleImpression = new PrintJob(); nelleImpression.start(); _root._xscale = 50; _root._yscale = 50; nelleImpression.addPage(_root);
478
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 };
finImpression(); _root._xscale = 100; _root._yscale = 100; }; panneauImpression.btImprimerCommentaire.onPress = function() { _root.createTextField("contenuAImprimer", 5, -100, -100, 200, 200); chargeXML = new XML("Ceci est un texte, un exemple."); contenuAImprimer.text = chargeXML; //contenuAImprimer.text = new Date(); nelleImpression = new PrintJob(); nelleImpression.start(); nelleImpression.addPage(contenuAImprimer); finImpression(); }; // panneauImpression.btFermeture.onPress = function() { _root.panneauImpression.removeMovieClip(); };
Analyse
Ligne 2 : ce gestionnaire contient la dnition de tous les autres. Nous aurions pu et d procder diffremment, en appelant notamment des fonctions pralablement dnies, mais nous avons souhait dmontrer que lexcution des scripts rattachs aux boutons contenus dans linterface dimpression, ne peut se faire quaprs avoir cliqu sur ce premier bouton. Lignes 4 8 : ce gestionnaire va valider la demande dimpression et envoyer les donnes mises en mmoire. Cest la mthode start() de la classe PrintJob() qui va permettre dafcher la fentre de la gure 21-2.
Figure 21-2
Avant de lancer limpression, vous avez encore la possibilit deffectuer quelques rglages.
479
Ligne 5 : linterface dimpression de la gure 21-1 doit disparatre avant de proposer la fentre dimpression de la gure 21-2. Ligne 6 : limpression est valide et afche concrtement la gure 21-2. Ligne 7 : pour dcharger la mmoire vive, nous supprimons linstance nelleImpression qui a t cre plusieurs reprises au cours de ce script (lignes 59, 68, 75, 89 et 100). Ligne 10 : chaque fois que lutilisateur va cliquer sur le bouton Imprimer qui se trouve sur la scne, une occurrence du symbole dont le nom de liaison est panneauImpression se place sur la scne. Lignes 11 12 : cette occurrence est place prcisment sur la scne. Ligne 14 : gestionnaire excut si lutilisateur demande dimprimer avec une dnition pralable de la zone dimpression. Ligne 15 : linterface dimpression de la gure 21-1 doit disparatre avant de proposer la ligne 16, la fentre dimpression de la gure 21-2. Lignes 17 et 18 : le curseur de la souris est chang en croix en masquant la che, et en plaant un symbole rendu mobile sur la scne. Lignes 19 31 : ce gestionnaire va assurer la cration dun rectangle (lignes 23 29) lorsque lutilisateur va cliquer (ligne 19) puis maintenir son clic sur la scne tout en bougeant la souris (ligne 22). Lignes 20 21 : deux variables stockent les coordonnes du clic sur la scne, qui vont servir de paramtres dorigine pour la cration du rectangle (ligne 25). Lignes 23 29 : cration du rectangle ayant pour origine le clic mmoris aux lignes 20 et 21. Ligne 32 : ce gestionnaire doit rcuprer quatre points de coordonnes pour dnir la zone dimpression. Une fois que le rectangle est trac, cela semble facile de lire quatre valeurs _x et trois autres _y. Pas si simple ! Lorsque vous tracez un rectangle avec une souris, vous maintenez votre clic de souris et vous bougez ensuite votre curseur dans quatre directions. Le clic dorigine ne reprsente donc pas systmatiquement le coin suprieur gauche du rectangle (cest le cas si vous bougez en effet votre souris vers la gauche et/ou vers le haut). Nous devons donc valuer les quatre coins du rectangle. Ligne 33 : nous devons commencer par supprimer le gestionnaire qui surveillait le mouvement de la souris. Lignes 34 35 : deux variables stockent les coordonnes _x et _y de la souris au moment o lutilisateur relche le clic. Lignes 37 40 : nous stockons prsent dans quatre variables, les coordonnes qui vont servir dnir la zone dimpression la ligne 61. Lignes 41 43 : nous afchons licne dune croix sur la scne (gure 21-3). Lutilisateur va ainsi pouvoir annuler la cration de ce rectangle.
480
Lignes 44 49 : un gestionnaire est associ cette occurrence an de supprimer le rectangle qui vient dtre trac. Le curseur de la croix est supprim et celui de la che classique est rafch.
Figure 21-3
Lorsque lutilisateur a dni un rectangle de slection, il peut alors valider ou annuler sa demande dimpression.
Lignes 50 52 : nous afchons licne dune coche de validation sur la scne (gure 21-3). Lutilisateur va ainsi pouvoir lancer limpression. Lignes 53 63 : ce gestionnaire associ cette occurrence supprime le rectangle qui vient dtre trac, et lance limpression. Le curseur de la croix est supprim, et celui de la che classique est rafch. Lignes 59 62 : nous crons une nouvelle instance de la classe PrintJob() an de pouvoir faire appel la mthode start() qui afche la fentre de la gure 21-2. Ligne 61 : nous prcisons que limpression souhaite correspond la zone dnie avec les coordonnes pralablement mmorises dans les variables utilises comme paramtres de la mthode addPage(). Ligne 62 : limpression est lance ! Lignes 67 72 : ce gestionnaire est charg de lancer limpression de loccurrence contenant la photo. Ligne 70 : la diffrence de la ligne 61, nous prcisons que limpression doit tre celle de loccurrence intitule photo_inst qui contient la photo. Lignes 74 83 : nous demandons prsent que limpression soit celle de la scne, nous spcions donc _root comme paramtre de la mthode addPage(). Avant de lancer limpression, nous changeons lchelle de la scne (lignes 77 et 78) an quelle ne soit pas coupe sur le papier.
481
Lignes 84 93 : nous imprimons un texte qui ne se trouve pas sur la scne. Il est cr dynamiquement (ligne 85), son contenu est dni aux lignes 86 et 87. Lignes 89 92 : nous lanons limpression. Lignes 95 97 : la croix situe en haut droite de linterface dimpression (gure 21-2) permet de supprimer cette occurrence, donnant ainsi limpression que la fentre a t ferme. Vous ne penserez plus prsent quil nest possible dimprimer quune scne, mais prcisment une zone de la scne ou des occurrences. Dans chacun de nos exemples, nous avons fait appel une seule fois la mthode addPage(), il serait tout fait possible davoir plusieurs lignes dinstructions utilisant cette fonction. Par ailleurs, vous ntes pas obligs de passer par le traage dune zone rectangulaire (ou carre) pour imprimer une zone prcise de la scne ou dune occurrence. Vous pouvez dnir des valeurs xes que vous auriez pralablement calcules au moment de lintgration de votre animation.
Bogues ventuels
Dans une telle animation, les bogues peuvent tre nombreux. Cependant, vous devez toujours respecter lordre dans lequel vous enchanez les instructions relatives limpression : Cration dune instance de la classe PrintJob(). Utilisation de la mthode start(). Ajout dinformations dans la mmoire tampon avec la mthode addPage(). lancement de limpression avec la mthode send().
Centrer une animation dans la fentre

Il existe deux techniques pour centrer une animation dans la fentre dun navigateur, car vous avez deux possibilits pour visualiser un chier .swf : au sein dune page HTML, ou directement dans une fentre. Dans le chapitre 12 de ce livre, ltude Informations et contrle de la scne vous prsente comment centrer la scne dune animation avec la proprit align de la classe Stage.
Stage.align = "r"
La lettre qui se trouve entre les guillemets peut tre remplace par une autre an dobtenir des alignements horizontaux et verticaux diffrents.
482
Voyons donc prsent comment aligner un chier .swf dans une page HTML. Tout dpend de la technique que vous utilisez, HTML ou CSS. Dans une page utilisant des balises HTML : 1. Crez un tableau dune cellule (une seule ligne sur une seule colonne). 2. Ajustez la largeur et la hauteur du tableau 100 %. 3. Choisissez un alignement horizontal et vertical au centre pour lunique cellule de votre tableau. 4. Placez votre chier .swf dans la cellule de votre tableau.
Remarque
Pensez supprimer les marges du haut et de gauche de votre document.
Voici quoi doit ressembler votre code :

<table width="100%" height="100%" border="0"> <tr> <td align="center" valign="middle"> Placez ici la balise de votre .swf.</td> </tr> </table>
Si vous utilisez des CSS, voici une autre mthode. 1. Saisissez le script suivant dans la balise <head> de votre document. <style type="text/css">
body { margin: 0; padding: 0; } #global { position:absolute; left: 50%; top: 50%; width: 600px; height: 400px; margin-top: -200px; margin-left: -300px; } </style> Remarque
Ce script est issu de lexcellent site www.alsacreations.com.
483
2. Dans la balise <body> de votre document, utilisez une balise <div> comme dans lexemple ci-aprs :
<div id="global"> Placez ici la balise de votre .swf. </div> Remarque
Lorsque nous vous parlons de placer votre chier .swf dans les deux exemples ci-dessus, nous voulons parler de la balise <object>.
Comme vous lavez constat, ces trois techniques sont diffrentes, mais rpondent surtout des choix technologiques diffrents.
Redimensionner la fentre
Pour raliser une telle action, nous allons avoir besoin dexcuter une fonction JavaScript. Elle doit tre place dans la mme page HTML qui contient le code permettant linsertion dun chier .swf. Voici quoi peut ressembler le script :
<script language="JavaScript" type="text/JavaScript"> function taille() { top.resizeTo(810,600); } </script>
Les valeurs 810 et 600 correspondent la largeur et la hauteur de la fentre. Ct Flash, vous devez appeler la fonction avec le script suivant :
btRedim.onPress = function() { getURL("javascript:taille()"); };
btRedim est le nom doccurrence sur laquelle lutilisateur doit cliquer pour faire appel la fonction taille() par le bais de la fonction getURL().
Si vous souhaitiez ouvrir une fentre avec les dimensions de lcran, utilisez la ligne dinstruction suivante.
top.resizeTo(screen.width,screen.height);
484
Dans le mme style, si vous souhaitez placer la fentre un point prcis de votre cran, vous pouvez utiliser la ligne dinstruction suivante en plus, ou la place de top.resize() de lexemple ci-dessus.
top.moveTo(50,50);
Ouvrir une pop-up

Comme nous venons de le voir dans lexplication prcdente, nous allons devoir faire appel du code JavaScript, mais nous nallons pas faire appel une fonction. Faisons tout simplement rfrence la ligne dinstruction suivante dans un script en ActionScript :
btOuvrirPopUp = function () { getURL("javascript:void(window.open('http://www.apple.com','', 'TOP=30,LEFT=30,HEIGHT=300,WIDTH=300'))"); }
Nous plaons directement le code qui aurait pu tre plac dans une fonction, comme paramtre de la fonction getURL().
Appeler une fonction JavaScript

Pour tendre les possibilits de Flash, vous avez la possibilit dappeler une ou plusieurs fonctions crites en JavaScript, situes dans la page HTML qui contient votre chier .swf. Une fonction peut contenir des paramtres, il sera possible de les envoyer partir de Flash. Si vous navez pas encore lu lexemple qui permet de redimensionner une fentre sur la scne au dbut de ce chapitre, nous vous invitons le consulter. Pour commencer, comme nous lavons prcis ci-dessus, vous devez crer dans la page HTML, une fonction qui contient votre chier .swf. Prenons cet exemple :
<script type="text/JavaScript"> afficherMessage = function() { var temps = new Date(); var heures=temps.getHours() var minutes=temps.getMinutes() var message = "Vous arrivez sur le site "+heures+":"+minutes; alert(message); } </script>
485
ou plus simplement celui-ci :

<script type="text/JavaScript"> afficherMessage = function() { alert("Welcome on mon site !); } </script>
Ensuite, vous devez utiliser la fonction getURL() dans un script de votre animation Flash, et passer comme paramtre le nom de la fonction.
btMessage.onPress = function() { getURL("javascript:afficherMessage()"); };
Si votre fonction sattendait ce que vous lui passiez des paramtres, il faudrait le faire dans le script en AS.
btMessage.onPress = function() { getURL("javascript:afficherMessage(vos parametres)"); };
486
22
System.capabilities
Connatre la langue de lordinateur qui consulte un chier .swf, son systme dexploitation ou OS (Mac ou PC) et la version de son player sont utiles pour personnaliser lafchage et le fonctionnement des animations. La classe System possde un objet intitul capabilities qui va nous permettre de connatre ces informations.
Connatre la langue de lordinateur

Pour dmontrer lintrt de connatre la langue de lordinateur, nous avons utilis deux chiers .xml intituls interfaceEn.xml et interfaceFr.xml dont les contenus sont respectivement les suivants :
<dataInterface> <accueil>Welcome in Montmartre</accueil> <btQuitter positionX="18">Quit</btQuitter> <Commentaires> <France> It's a country... </France> <Angleterre> Islands, boats... </Angleterre> <Suisse>
Chocolate, montains... </Suisse> <Espagne> Sun, beachs... </Espagne> <Allemagne> Rivers, Beer... </Allemagne> <Italie> Pizzas, pasta... </Italie> </Commentaires> </dataInterface>
<dataInterface> <accueil>Bienvenue Montmartre</accueil> <btQuitter positionX="527">Quitter</btQuitter> <Commentaires> <France> C'est un pays... </France> <Angleterre> Iles, bateaux... </Angleterre> <Suisse> Chocolat, montagnes... </Suisse> <Espagne> Soleil, plages... </Espagne> <Allemagne> Rivires, Bire... </Allemagne> <Italie> Pizzas, ptes... </Italie> </Commentaires> </dataInterface>
Lorsque nous connatrons la langue de lordinateur qui consulte notre chier .swf, nous chargerons lun ou lautre des chiers .xml.
488
System.capabilities Chapitre 22
Figure 22-1
Le menu gauche de cette copie dcran nous dmontre que lordinateur qui a lu ce chier .swf tait en franais.
Chemin daccs : NAVIGATEUR OS CDROM/OS/ NavigateurLangueOrdinateur.a La scne ne contient aucune occurrence de symbole, uniquement des textes dynamiques dont les noms de variables et doccurrences sont les suivants : vAccueil et accueil_inst. commentaires (pas de nom doccurrence). vQuitter et btQuitter. La bibliothque possde un seul symbole dont le nom de liaison est btPays. Il contient un texte dynamique intitul nomPays. Lanimation ne contient quun seul script, voici les trois tapes du dveloppement : 1. Crer le menu de gauche dynamiquement. 2. Vrier la langue de lordinateur de lutilisateur. 3. Charger le chier .xml correspondant la langue.
Script
1 2 3 4 5 6 7 8 9 10 11 pays = ["France", "Angleterre", "Suisse", "Espagne", "Allemagne", "Italie"]; country = ["France", "England", "Switzerland", "Spain", "Germany", "Italy"]; // langue = System.capabilities.language; // styleAccueil = new TextFormat(); // switch (langue) { case "fr" : listeBoutons = pays; docInterface = "interfaceFr.xml";
489
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
styleAccueil.color = "0x0000AA"; break; case "en" : listeBoutons = country; docInterface = "interfaceEn.xml"; styleAccueil.color = "0xAA0000"; break; } // for (i=0; i<pays.length; i++) { _root.attachMovie("btPays", "btPays"+i, i); _root["btPays"+i]._x = 80; _root["btPays"+i]._y = 60+(i*25); _root["btPays"+i].nomPays = listeBoutons[i]; _root["btPays"+i].sonNumero = i; _root["btPays"+i].onPress = function() { commentaires = chargeInterface.childNodes[0].childNodes[2].childNodes [this.sonNumero].firstChild; }; //Diffrencier le moment o i est utilis dans la boucle //et le moment o i ne vaut plus la valeur le temps de la boucle } // chargeInterface = new XML(); chargeInterface.load(docInterface); chargeInterface.ignoreWhite = true; chargeInterface.onLoad = function() { vAccueil = this.childNodes[0].childNodes[0].firstChild; vQuitter = this.childNodes[0].childNodes[1].firstChild; btQuitter._x = this.childNodes[0].childNodes[1].attributes.positionX; accueil_inst.setTextFormat(styleAccueil); };
Analyse
Lignes 1 2 : comme vous avez pu le constater sur la gure 22-1, des boutons contiennent des noms de pays. Ces deux tableaux servent donc remplir ces occurrences. Ligne 4 : dans une variable, nous stockons la langue de lordinateur qui consulte ce chier .swf. Il sagit des lettres fr ou en. Ligne 6 : nous crons une instance de la classe TextFormat() qui va nous servir mettre en forme le titre de la page (en haut droite sur la scne). Lignes 8 19 : nous procdons une valuation de la variable langue. En fonction du rsultat, nous choisissons la liste qui sera utilise pour remplir les textes dynamiques contenus dans les boutons de la barre de navigation ( gauche sur la scne). Nous initialisons galement la
490
valeur de la variable docInterface en lui attribuant comme valeur, un nom de chier .xml. Enn, nous dnissons la proprit color de linstance styleAccueil. Lignes 21 32 : sur la scne, nous plaons six occurrences du clip dont le nom de liaison est btPays. chaque occurrence, nous assignons un gestionnaire onPress qui afchera un nud du chier .xml au clic sur une occurrence. Ligne 25 : cette ligne dinstruction place chaque entre de la liste pays ou country dans les occurrences des clips places gauche sur la scne. Ligne 26 : cette ligne sert didentiant. chaque occurrence est associe une valeur, celle de i au moment o la boucle for() place les occurrences sur la scne. Lignes 34 42 : le document .xml spci aux lignes 11 ou 16 est charg. Lorsque le chargement du chier est effectif, les instructions suivantes sont effectues. Ligne 38 : en haut droite sur la scne, un texte vient se placer dans le titre. Ligne 39 : Quit ou Quitter safche dans la variable vQuitter du texte dynamique btQuitter. Ligne 40 : loccurrence btQuitter est place prcisment sur la scne. Ligne 41 : la mise en forme du titre est effectue lexcution de cette ligne dinstruction.
Bogue ventuel
la ligne 28, il est important de faire rfrence une variable associe loccurrence clique (this.sonNumero) et non la valeur i.
Connatre le systme dexploitation

Moins utile que la connaissance de la version du player, cette information reste nanmoins indispensable ds que vous devez congurer une animation en fonction de la plate-forme.
Figure 22-2
Cette barre de titre de fentre est personnalise en fonction du type dordinateur qui lit ce chier .swf.
491
Chemin daccs : NAVIGATEUR OS CDROM/OS/ NavigateurOS.a La scne contient tout simplement loccurrence dun clip qui possde deux images cls. Sur la premire, une barre de titre aux couleurs de Windows, sur la deuxime, la barre de titre de la gure 22-2.
Script
1 2 3 4 5 6 7 8 9 10 osMachine = System.capabilities.os.substr(0, 3); switch (osMachine) { case "Mac" : barreMenu.gotoAndStop(2); break; // case "Win" : barreMenu.gotoAndStop(1); break; }
Analyse
Ligne 2 : dans une variable, nous stockons trois lettres extraites dune chane de caractres obtenue grce la proprit os de lobjet capabalities de la classe System. Lignes 3 11 : un test vrie le contenu de la variable. Si cette dernire contient lexpression Mac, la tte de lecture de la seule occurrence de la scne (la barre de titre) se place sur limage 2.
Bogue ventuel
Gardez toujours lesprit que le premier caractre dune chane porte lindex 0, vous devez donc commencer compter partir de 0, ce qui explique cette premire valeur pour le paramtre de la mthode substr().
Connatre la version du Flash Player

Cette animation est trs intressante, car un jour ou lautre, vous aurez besoin de connatre le numro de version du player qui lit une animation que vous aurez conue. En effet, chaque mise jour du plug-in Flash, des fonctionnalits supplmentaires sont ajoutes.
492
Si un utilisateur ne possde donc pas le dernier player, il ne pourra peut-tre pas voir toutes les fonctionnalits des animations ncessitant le dernier plug-in.
Chemin daccs : NAVIGATEUR OS CDROM/OS/ NavigateurVersionPlayer.a Peu importe le contenu de la scne, le plus important dans cette animation rside dans le script. Les lignes 2 et 9 sont les lignes dinstructions primordiales.
Script
1 2 3 4 5 6 7 8 9 10 stop(); var playerVersion = System.capabilities.version.substr(4, 1); // btContinuer._visible = false; btContinuer.onPress = function() { gotoAndStop(3); }; // if (playerVersion<=6) { messageAccueil = "La version de votre player Flash est gale ou antrieure la 6. Si vous souhaitez consulter les vidos proposes sur notre site, tlchargez la dernire version du player Flash sur le site de Macromedia"; } else { btContinuer._visible = true; messageAccueil = "La version actuelle de votre player permet sans aucune difficult la lecture des vidos proposes sur notre site. Cliquez sur le bouton pour continuer."; }
11 12 13
14
Analyse
Ligne 1 : notre animation contient plusieurs images cls, nous avons donc besoin de bloquer la tte de lecture sur limage 1. Ligne 2 : la variable intitule playerVersion est initialise avec une valeur correspondant au numro de version du player. Pour tre plus prcis, la proprit version de lobjet capabilities de la classe System renvoie normalement lexpression suivante :
MAC 8,0,22,0
ou
WIN 8,0,22,0
493
Nous devons donc extraire le cinquime caractre de cette chane en utilisant la mthode substr().
Rappel
Le premier caractre dune chane porte le numro dindex 0. Lorsque vous comptez donc les caractres dune chane, commencez partir de 0.
Ligne 4 : le bouton qui permet de continuer lanimation (sous condition que lutilisateur possde la bonne version du player) est rendu invisible. Lignes 5 7 : nous affectons un comportement au bouton voqu la ligne prcdente. Lignes 9 14 : si lutilisateur possde une version de player suprieure ou gale 7, nous rendons le bouton btContinuer visible an de pouvoir naviguer dans lanimation. Un message daccueil accompagne le rsultat du test, quel quil soit.
Bogue ventuel
Il est trs important de connatre la valeur renvoye par la proprit version. Vous saurez donc prsent quune chane de caractres est renvoye, mais que seul le premier caractre nous intresse.
Remarque
Dans certains cas, vous aurez besoin de connatre le numro de sous-version dun player, vous changerez alors les paramtres de la mthode substr() pour extraire les valeurs situes droite du numro de version.
494
23
CD-Rom
Non, Flash ne peut pas remplacer Director ! Dans ce cas, pourquoi intituler ce chapitre ainsi ? Relativisons notre propos Lorsque vous exportez vos animations Flash en chiers .swf, ils peuvent tre lus de diffrentes faons comme nous vous lavons prcis au dbut de cette partie. Lune de ces faons propose la lecture dune animation au travers dune projection, cest--dire lexcution dune application qui contient un chier .swf. Flash propose en effet cette technique comme le propose Director, mais les projecteurs obtenus se limitent aux possibilits suivantes : quitter un projecteur ; contrler le plein cran et son chelle ; contrler lafchage des menus ; excuter des programmes qui se trouvent dans un dossier prcis ct du projecteur. Nous allons donc nous attarder sur ces quatre points, aprs avoir dcouvert avec quelle simplicit se fait la cration dun projecteur.
Crer un projecteur
Avant daller plus loin, commenons par prciser en quoi lutilisation dun projecteur prsente des avantages. Vous navez pas besoin dune connexion Internet car la lecture dun projecteur se fait off-line , cest--dire directement partir de son support (disque dur, CD-Rom, DVD-Rom ou tout autre support amovible). Vous navez besoin ni du logiciel Flash, ni du lecteur pour lire le projecteur qui nest ni un chier .a, ni un chier .swf.
Figure 23-1
Que vous soyez sur un PC ou sur un Mac, il est tout fait possible de crer deux projecteurs indpendamment pour les deux plates-formes.
Un projecteur permet donc une lecture simplie et autonome dune animation Flash. Ne cherchez pas danimation relative cette technique dans le dossier qui regroupe toutes celles de ce livre, car nous allons uniquement vous prsenter une procdure qui aboutit la cration dun projecteur, nous navons pas besoin dun script. 1. Slectionnez la commande Paramtres de publication dans le menu Fichier. 2. Cochez la case relative la cration du projecteur que vous souhaitez obtenir. 3. Cliquez sur le bouton Publier.
496
CD-Rom Chapitre 23
Remarque
Vous pouvez cocher les deux cases de projecteur, vous obtiendrez deux applications dont une seule sera lisible sur votre ordinateur. Lautre le sera uniquement sur la plate-forme Mac (si vous tes sur PC et inversement).
Voil, votre projecteur est cr dans le mme dossier que celui dans lequel se trouve le chier .a partir duquel vous venez de faire votre publication. Vous devez toujours garder le chier .a, car il sera indispensable pour des mises jour avant une nouvelle publication.
Contrles dune projection

Dans lexplication prcdente, nous avons vu quil ntait pas difcile de crer un projecteur. Les lignes dinstructions que nous allons analyser dans cette tude de cas ne prsentent pas non plus de difcults. Pour cette animation, nous avons trouv le prtexte de raliser un diaporama, mais une seule image avec une seule occurrence nous sufrait pour crer un projecteur et utiliser ces lignes de code.
Chemin daccs : NAVIGATEUR OS CDROM/CDROM/CDRomControleProjection.a La scne ne contient que deux occurrences utiles, dont les noms sont btQuit et lancerProj. Il sagit de deux boutons sur lesquels nous allons excuter des fonctions fscommand. Le script ne prsente pas de structure particulire, uniquement des instructions dont lexcution va se faire automatiquement pour certaines, et associes des gestionnaires pour dautres.
Script
1 2 3 4 5 6 7 8 fscommand("allowscale", "false"); fscommand("fullscreen", "true"); fscommand("trapallkeys", "true"); fscommand("showmenu", "flase"); // var osMachine = System.capabilities.os.substr(0, 3); btQuit.onPress = function() { _root.attachMovie("panoQuit", "panoQuit", 10000);
497
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
}; lancerProj.onPress = function() { switch (osMachine) { case "Mac" : fscommand("Exec", "Frise"); break; case "Win" : fscommand("Exec", "Frise.exe"); break; } }; // btGalerie.onPress = function() { contenu.nextFrame(); this._visible = false; };
Analyse
Ligne 1 : nous interdisons le redimensionnement de la scne. Elle doit donc conserver ses dimensions, quelle soit dans une fentre ou en plein cran. Ligne 2 : lafchage plein cran sur fond noir est excut.
Remarque
Dans une projection plein cran, la couleur autour de lanimation est relative celle de la scne. Si vous avez donc besoin dune projection sur fond noir avec une couleur de scne colore, vous devez crer un calque supplmentaire que vous placez sous tous les autres, et crer un rectangle aux dimensions de la scne avec la couleur souhaite. Vous pouvez alors choisir le noir comme couleur de scne.
Ligne 3 : normalement, cette FSCommand a pour fonction de renvoyer la gestion des touches de votre clavier un gestionnaire onClipEvent(keyDow ou keyUp), mais nous lutilisons surtout dans ce cas pour viter que lutilisateur ne bascule lafchage de son projecteur en mode fentre sil tape sur la touche Esc ou chap. de son clavier. Ligne 4 : nous masquons la barre des menus. Ligne 6 : nous stockons dans une variable intitule osMachine, une chane de caractres renvoye par la proprit os de lobjet capabilities de la classe System. Grce la mthode substr(), nous ne conservons que les trois premiers caractres de la chane. Lignes 7 9 : ce gestionnaire va placer sur la scne, un symbole dont le nom de liaison est panoQuit. La gure 23-2 vous dmontre quil faut toujours proposer un cran intermdiaire entre le bouton Quitter situ sur linterface de lanimation et le bouton qui va
498
CD-Rom Chapitre 23
rellement quitter le projecteur. Ainsi, lutilisateur peut choisir de revenir sur la scne ou de quitter rellement.
Figure 23-2
Il est indispensable de prvoir un cran proposant rellement de quitter le projecteur ou au contraire de revenir lanimation, au cas o lutilisateur cliquerait accidentellement sur le bouton Quitter.
Lignes 10 19 : ces lignes dinstructions tentent de dmontrer quil est possible de lancer (dexcuter) une application avec le paramtre Exec. Attention, il est trs important de retenir que les applications lancer doivent se trouver dans un dossier intitul fscommand situ ct du projecteur. Dans notre exemple, nous valuons la valeur de la variable dans laquelle nous avions stock le type dordinateur qui excute le projecteur. En fonction du rsultat, nous excutons le projecteur Mac ou PC. Rappelons en effet quun projecteur Mac ne peut tre lanc sur un PC et inversement. Un projecteur est avant tout une application. Lignes 21 24 : lorsque lutilisateur cliquera sur loccurrence intitule btGalerie, elle sera dans un premier temps rendue invisible (ligne 23), la tte de lecture de celle qui sintitule contenu se dplacera limage suivante. Cette dernire contient plusieurs images cls. Ces lignes de code nont aucun rapport avec le contrle dun projecteur.
Remarque
Dans notre animation, le symbole plac sur la scne et qui vrie si lutilisateur veut vraiment quitter le projecteur, contient deux images cls. Sur la premire, un message afche le contenu de la gure 23-2. Le script plac sur cette premire image-cl est le suivant.
stop(); btOui.onPress = function() { gotoAndStop(2); }; btNon.onPress = function() { _root.panoQuit.removeMovieClip(); };
499
Lutilisateur peut soit cliquer sur le bouton Non qui retire alors loccurrence de la scne et donc le message, soit cliquer sur le bouton Oui qui dplace alors la tte de lecture du clip sur la deuxime image-cl. Cette dernire contient le script suivant :
quitterProjecteur = function () { fscommand("quit", ""); }; setInterval(quitterProjecteur, 3000); _root.onMouseDown = function() { fscommand("quit", ""); };
Une premire fonction est cre, elle va tre appele par le setInterval() au bout de trois secondes.
Bogue ventuel
Il est trs important dcrire le mot System de la ligne 6 avec une majuscule, dans le cas contraire la ligne dinstruction ne pourra pas sexcuter.
500
Annexe
Notions complmentaires
Cette rubrique est consacre des explications qui se retrouvent dans de nombreuses animations. Plutt que daugmenter inutilement le volume de ce livre en rptant plusieurs fois la mme information/explication, nous avons prfr la rpertorier dans cette partie du livre.
Notions complmentaires Annexe
Flash Media Server

Flash Media Server est la version 2 de Flash Communication Server. Nous emploierons donc le nom Flash Media Server, mais tout ce que nous allons vous prsenter est valable avec les deux versions. Cette technologie propose par Macromedia est une solution payante, environ 600 euros pour une bande passante de 1 Mo ou 50 utilisateurs, mais nanmoins trs intressante car elle permet dtendre les fonctionnalits dune animation en proposant de : diffuser un ux audio ou vido en streaming ; diffuser galement un ux de texte ; grer des cookies ct serveur. Aujourdhui, de nombreuses solutions techniques et surtout moins onreuses permettent de dvelopper des applications comme celles qui se trouvent dans ce livre. Dans ce cas, pourquoi utiliser Flash Media Server ? Nous rpondrons cette question par une autre ! Nest-il pas important de gagner du temps en dveloppement ? Cette solution propritaire offre lavantage dtre trs simple, son dploiement se fait rapidement et ne ncessite pas une grande connaissance en programmation.
Comment a marche ?
Si vous devez dvelopper des applications faisant appel des changes entre utilisateurs ou avec un serveur, voici comment procder avec Flash Media Server. Vous devez suivre un certain nombre dtapes, mais surtout bien comprendre le fonctionnement des changes de donnes. Ils ne peuvent se faire quentre une machine et un serveur, mais pas entre deux machines dutilisateurs directement. Cela signie quun change entre deux machines se fera toujours par lintermdiaire dun serveur qui hberge et excute lapplication Flash Media Server. Tout ordinateur qui souhaite se connecter un serveur doit possder le player Flash.
Figure A-1
Les changes entre deux machines ne peuvent se faire quen passant par un serveur.
503
Tentons dtre plus prcis. Imaginez-vous face votre ordinateur en train de consulter des sites dans votre navigateur prfr. Vous cliquez sur un lien et tombez sur une page qui contient une animation Flash. Votre navigateur est capable de la lire parce que vous aviez pralablement charg le player Flash. Le site que vous tes en train de consulter vous propose daller voir une vido diffuse en streaming, de jouer un jeu multijoueur et de laisser un message dans un livre dor. Noubliez pas que lanimation que vous avez sous les yeux est un chier .swf qui se trouve sur votre disque dur et que cest lui qui va faire la liaison entre votre machine et le serveur.
Crer une connexion

Si nous pouvions ouvrir le chier .swf an de voir le code quil contient, nous dcouvririons les lignes suivantes :
liaison = new NetConnection(); liaison.connect("rtmp:/livre/studio");
Ces deux lignes sufsent pour tablir une connexion entre votre ordinateur et le serveur. Si vous devez vous-mme raliser un jour une application Flash Media Server, votre apprentissage commencera par ces deux lignes. La premire instancie la classe NetConnection() an de pouvoir accder aux mthodes associes. Pour les novices, nous leur avions promis dtre clair, voici une autre explication. Vous choisissez nimporte quel mot (nous avons choisi liaison, mais nous aurions pu prendre un autre mot), et vous lui donnez la valeur = new NetConnection(). Pour tre encore plus prcis, vous ne donnez pas une valeur, mais vous expliquez Flash que vous aimeriez obtenir une copie, un exemplaire de la classe. On parle alors dinstance et non de copie, cest pourquoi le verbe qui en dcline est instancier . Ainsi en prenant un exemplaire, le mot saccompagne dun vocabulaire appel mthodes et proprits.
Remarques
new scrit avec une minuscule et NetConnection() ne peut scrire quavec des majuscules. la place du paramtre rtmp:/livre/studio, null est valable lorsque vous souhaitez diffuser
une vido ou un son en tlchargement progressif. Dans ce cas vous navez plus besoin de Flash Media Server.
Maintenant que nous avons instanci notre classe, nous allons tablir une connexion avec la mthode connect(). Le paramtre qui se trouve entre les parenthses ne peut tre null. Vous devez spcier une adresse utilisant le protocole RTMP (Real-Time Messaging Protocol). Le dossier intitul livre, est un rpertoire qui se trouve sur le serveur, vous ne pouvez donc pas choisir nimporte quel mot. Pour le dernier, la chose est diffrente, il sagit dun mot que vous pouvez choisir librement. An de mieux vous faire comprendre lutilit de ce dernier, regardons cet exemple.
504
Vous arrivez sur une page qui contient une animation Flash. Il sagit dun module de chat. On vous invite saisir votre nom et celui dune pice de discussion. Si vous souhaitez changer avec une personne en priv dans la mme pice, vous devrez tous les deux indiquer le mme nom. Nous pourrions donc comparer cette partie du paramtre une session. Dans lune des animations proposes dans ce livre, vous dcouvrirez que cette adresse est indique sous forme de concatnation permettant ainsi davoir plusieurs connexions par groupes dutilisateurs. Une connexion un serveur sert donc recevoir des informations, mais galement en envoyer. Ainsi, une personne peut envoyer un texte ou un ux et plusieurs personnes le reoivent.
Figure A-2
La connexion un serveur commence toujours par une instanciation de la classe NetConnection().
Lorsque la connexion est tablie, vous avez alors le choix entre deux possibilits : Utiliser des cookies sur le serveur pour changer des donnes de type texte. Envoyer/recevoir des mdias son et/ou vido.
Gnrer un ux
Commenons par dcouvrir la technique dmission/rception dune vido et/ou un son. Votre connexion doit saccompagner dun ux, nous devons donc instancier une nouvelle classe.
fluxDiffusion = new NetStream(liaison);
quoi correspond le paramtre liaison ? Reprenons si vous avez oubli.

liaison = new NetConnection(); liaison.connect("rtmp:/livre/studio"); fluxDiffusion = new NetStream(liaison);
Vous souhaitez simplement diffuser ou recevoir par votre connexion. Voil, cette dernire est tablie, le courant passe, nous navons plus qu mettre ou rceptionner un
505
ux prcis. Avant cela, essayons de comprendre comment peut se faire une visioconfrence. Puisque lmission dun ux se fait vers un serveur, comment un autre internaute peut-il voir ma diffusion ? Vous allez diffuser un ux vido et/ou audio sous un nom prcis qui sera envoy au serveur. Ce dernier dispose donc de cette information. Si quelquun cherche recevoir un ux du serveur en prcisant le nom que vous avez utilis pour la diffusion, pourquoi le serveur ne lui dlivrerait-il pas ?
Envoyer et recevoir un ux
Si vous souhaitez diffuser limage dune webcam, la technique est trs simple. Utilisez simplement la mthode publish() de la classe NetStream(). Vous souhaitez recevoir la diffusion dun ux, l cest beaucoup plus compliqu ! Utilisez simplement la mthode play(). Rassurez-vous, nous apporterons des informations complmentaires ces mthodes quelques lignes plus loin.
Figure A-3
La diffusion peut se faire indpendamment de la rception, avec ou sans enregistrement du ux sur le serveur.
Vous laurez compris, lmission et la rception de ux audio et vido sont des techniques trs simples. Pourtant, la lecture dun script utilisant Flash Media Server pour diffuser/ recevoir un ux, cela semble compliqu car il faut prvoir un certain nombre de boutons, effectuer des vrications, afcher le ux de diffusion et non uniquement la rception, on obtient alors des scripts assez longs. Nallez pas trop vite. Progressez rellement pas-pas. Ne cherchez surtout pas raliser ds le dbut un module de visioconfrence. Essayez de commencer par lire un ux, cela sous-entend que vous disposez dun chier .v sur un serveur. Tentez enn de diffuser le ux provenant de votre webcam, cela sous-entend que vous nutiliserez plus de chier .v.
506
Comme vous le montre la gure A-3, une personne peut mettre un ux, mais elle peut dans le mme temps en recevoir un. Pourquoi lun des deux sigles FLV est-il barr ? Tout dabord, rappelons quun chier .v est un chier FLashVideo, pour rpondre ensuite cette question nous allons en poser une autre. Lorsque vous diffuserez une vido sur le serveur, un chier sera gnr pour tablir une connexion avec dautres internautes susceptibles de vouloir consulter votre ux. Est-ce que ce chier stocke une vido (celle que vous lui envoyez en continu) ou estce une simple liaison entre vous et les autres clients Flash (player) ? La mthode publish() qui permet de diffuser un ux contient deux paramtres.
fluxDiffusion.publish("david", "live");
Le premier dnit le nom du ux (et donc celui du chier cr) que vous envoyez au serveur. Le deuxime indique justement si le ux doit tre stock sur le serveur. Dans lexemple ci-dessus, il sagit dune simple diffusion. Si vous remplacez le mot live par record, le chier .v (donc le ux) sera alors disponible jusqu ce que vous leffaciez du serveur.
Astuce
Si vous navez pas accs au serveur et que vous souhaitez supprimer un chier .v, excutez la ligne dinstruction ci-dessus en mode live en enregistrant une squence trs courte, votre webcam pointant dans le vide ou dans le creux de votre main.
Grce ce paramtre record, il serait possible de crer une application en ligne qui servirait de rpondeur vocal et/ou vido. Il est un point que nous navons pas encore expliqu. Puis-je diffuser uniquement un son indpendamment de la vido et inversement ? Dans nos dernires explications, nous avons t relativement rapides. Pour savoir comment utiliser les mthodes publish() et play(). Commenons par la lecture car il suft de cinq lignes de code.
maTele = new NetConnection() maTele.connect(null) laDiffusion = new NetStream(maTele) ecran.attachVideo(laDiffusion) laDiffusion.play("http://mizo.gobelins.fr/flashcom/applications/livre/streams/studio1/ DemoLivre.flv")
Pourquoi la mthode connect() possde-t-elle le paramtre null ? Ce nest pas ce que nous avions appris. Avant de vous lancer dans la rception dun ux en streaming, commencez par vous assurer que vous tre capable de lire un chier en tlchargement progressif. Pour ceux qui savent dj lire une vido en local, vous observerez que vous connaissiez dj ces lignes dinstruction. La preuve, remplacez lURL gurant comme
507
paramtre de la mthode play() par un nom de chier vido (.v) que vous placez ct de votre chier .swf. Vous constaterez que cela fonctionne ! prsent, imaginons que vous ayez accs un serveur Flash Media Server. Remplacez simplement le paramtre null par ladresse du serveur. Cest ainsi que vous obtiendrez une URL de ce type :
liaison.connect("rtmp:/livre/studio1");
Pour la diffusion, ce nest pas tellement plus difcile, mais vous allez devoir prciser la nature des ux envoyer. Souvenez-vous que vous pouvez envoyer uniquement le son et/ ou la vido. Au dbut de votre script, vous pouvez dj commencer par saisir les lignes dinstructions suivantes.
fluxLocal = Camera.get(); fluxAudioLocal = Microphone.get();
Vous venez de stocker dans deux variables, les informations ncessaires pour les deux lignes suivantes.
fluxDiffusion.attachVideo(fluxLocal); fluxDiffusion.attachAudio(fluxAudioLocal);
Souvenez-vous encore une fois, nous avions cr un ux intitul fluxDiffusion. Nous venons tout simplement de lui rattacher les sources audio provenant de votre micro branch votre ordinateur et vido provenant de votre webcam. Vous voil n prt crer votre premire animation en visioconfrence ! Un dernier point toutefois si vous navez pas de serveur Flash Media Server. Voici une premire adresse si vous navez pas le temps de chercher dans Google.
http://fcs.media-box.net/ash_com.php
Vous pourrez retrouver le script nal de nos explications dans le chier intitul MediasVisioConference.fla.
Les SharedObject avec Flash Media Server

Votre connexion au serveur est tablie. Vous souhaitez prsent envoyer un texte quelquun an quil le reoive instantanment. Il existe dj des logiciels qui existent pour cela nous direz-vous, ce sont des Messageries instantanes. Reprenons. Vous souhaitez raliser un jeu multijoueur Quel est le rapport ? , ajouterez-vous ! Dans les deux cas, nous allons utiliser la classe SharedObject() qui permet de partager des donnes comme son nom lindique. Pour tre plus prcis, vous allez stocker des informations qui seront alors synchronises avec les utilisateurs connects un ux.
508
tablir une connexion

Prenons une nouvelle connexion que nous appellerons maConnect.
maConnect = new NetConnection(); maConnect.connect("rtmp:/livre/studio1");
Nous navons pas besoin dinstancier la classe SharedObject() avec le constructeur new, il suft simplement dindiquer trois paramtres lors de lassignation.
coursier = SharedObject.getRemote("position", maConnect.uri);
La variable coursier va tre comparable une instance, car nous allons pouvoir lui dnir des proprits et faire appel des mthodes. Revenons sur les paramtres renseigner. Le premier est le nom du cookie , cest-dire la rfrence ct serveur des informations que vous allez stocker. Si une autre personne veut se connecter sur le serveur et lire les informations que vous lui envoyez, il devra utiliser le mme nom. Le deuxime paramtre est obligatoire, lURI (Uniform Ressource Identier), et toujours identique la connexion. Il est un troisime paramtre que vous pouvez omettre, mais dans ce cas, les informations que vous enverrez au serveur nauront pour dure de vie que le temps o vous tes connect. Si vous ajoutez true, les informations stockes dans position (paramtre de getRemote()), seront crites dnitivement jusqu ce que vous supprimiez le chier gnr cette occasion. Il sagit dun chier dont lextension est .fso. Dans notre exemple, un chier position.fso est cr le temps de la connexion uniquement.
Remarque
Rappelons quil est possible dutiliser les SharedObject en local avec la mthode getLocal(). Le chier alors gnr porte lextension .sql.
Pour linstant, nous avons dni une connexion, cr une variable charge de stocker les informations que nous allons lui coner, mais nous navons pas nalis la relation connexion/ cookie. Vous devez donc ajouter la ligne dinstruction suivante.
coursier.connect(maConnect);
Voil, la connexion avec cookie ct serveur est effective, nous navons plus qu lui envoyer des donnes. Utilisez simplement la proprit data.
coursier.data.nom = vNom; coursier.data.prenom = vPrenom;
Prcisons dans notre exemple que vNom et vPrenom sont les noms de variables de textes de saisie prsents sur la scne.
509
Nous avons russi crer une connexion un cookie et envoyer des donnes, mais comment un autre utilisateur connect la mme adresse peut-il recevoir les donnes mises ? Si ce dernier modie ces donnes, comment pourrais-je en tre inform ? Cest le rle du gestionnaire onSync. Ajoutez donc les lignes dinstructions suivantes.
coursier.onSync = function() { vNom = coursier.data.nom; vPrenom = coursier.data.prenom; };
Figure A-4
La coordination des donnes entre plusieurs utilisateurs se fait par le biais du gestionnaire onSync.
Si vous souhaitez tester ce que vous venez dapprendre, rendez-vous ladresse suivante : http://mizo.gobelins.fr/ashcom/applications/livre/jeuxdamesintro.swf. Ouvrez deux fentres dans votre navigateur ou demandez un ami de se connecter la mme adresse, vous constaterez que la balle bouge dans les deux fentres.
Remarque
Si plusieurs lecteurs de ce livre se retrouvent cette mme adresse au mme moment, vous risquez de voir se dplacer les pions dans tous les sens !
Le script correspondant est le suivant :

maConnect = new NetConnection(); maConnect.connect("rtmp:/livre/studio1"); coursier = SharedObject.getRemote("position", maConnect.uri); coursier.connect(maConnect); // coursier.onSync = function() { pion._x = coursier.data.x;
510
pion._y = coursier.data.y; }; // pion.onPress = function() { this.startDrag(); }; pion.onRelease = pion.onReleaseOutside=function () { stopDrag(); }; pion.onMouseMove = function() { coursier.data.x = this._x; coursier.data.y = this._y; };
Le chier correspondant est JeuxDamesIntro.fla. La seule difcult pour raliser un jeu en rseau est donc de grer la forme de lenvoi des donnes. Il est prfrable de stocker ces donnes dans des tableaux que vous envoyez au serveur. Lors de la rception, vous navez plus qu parcourir les entres du tableau. Dans le chapitre 20 de ce livre, consultez la dernire animation qui est un jeu de dames en rseau.
indexOf() ou la recherche dune chane

Dans de nombreuses applications, cette mthode de la classe String() va nous permettre de vrier si une chane de caractres prcise est prsente dans une autre spcie. La meilleure mthode pour vous expliquer le fonctionnement de cette mthode, reste la dmonstration qui sappuie sur un visuel gure A-5. Cest pourquoi nous vous avons prpar une copie dcran ci-dessous, qui reprsente un texte avec une graduation. Pour tre plus prcis, nous devrions parler de table dindex. La lettre e de Marine porte lindex 5, celui de une porte lindex 13. Il est donc trs important de se souvenir que le premier caractre dune chane de caractres utilise avec la mthode String() porte lindex 0. Le M de Marine porte lindex 0. Si nous souhaitons donc trouver la place dune chane de caractres, voici la ligne dinstruction.
motTrouve = zoneDeTexte.indexOf("une");
La valeur stocke dans la variable intitule motTrouve est 1. Elle reprsente la valeur de lindex du premier caractre de la chane recherche, cest--dire la lettre u de une. Si la recherche navait rien donn, la valeur obtenue aurait alors t -1.
511
Figure A-5
Le premier caractre dune chane porte lindex 0.
Remarque
Dans Flash 8, vous devez dcocher la case Crnage automatique qui se situe en bas droite de la palette Proprits.
La mthode indexOf() doit contenir entre ses parenthses, un paramtre qui correspond la chane recherche. Le nom qui prcde est le nom dune variable dans laquelle doit seffectuer la recherche. Pour ceux qui prfrent utiliser la proprit text du nom doccurrence dun texte dynamique ou de saisie, vous pouvez aussi utiliser la ligne dinstruction ci-dessous.
zoneDeTexte_inst.text.indexOf("petite");
La documentation fait tat dun deuxime paramtre entre les parenthses de la mthode. Il sagit de lindex partir duquel dmarre la recherche. Ainsi la ligne dinstruction suivante ne renverra pas 5 ni 7, mais 13.
motTrouve = zoneDeTexte_inst.text.indexOf("e", 10);
La recherche de la chane dmarre partir du onzime caractre, celui qui porte lindex 10.
512
Mise en forme du texte avec la classe TextFormat()

Dans de trs nombreuses animations, nous avons utilis cette classe pour la mise en forme du texte, car cette technique est extrmement simple et rapide dployer. En effet, comme vous laurez peut-tre remarqu, peu de lignes dinstructions sufsent changer lapparence dun texte. En voici la dmonstration. 1. Vous devez toujours commencer par crer une instance de la classe TextFormat().
styleTitre1 = new TextFormat() Attention
Respectez bien les majuscules dans le nom de la classe. Un t ou un f minuscule empcherait en effet le fonctionnement du script. linverse, ne saisissez jamais New au lieu de new.
Le nom que nous avons choisi pour notre instance est trs reprsentatif du style qui sera appliqu. Faites-en de mme et ne commencez jamais le nom par une majuscule. 2. Vous devez ensuite dnir les paramtres de mise en forme. Commencez par saisir le nom de linstance, suivie dun point et dune proprit.
styleTitre1.bold = true; styleTitre1.size = 14; styleTitre1.color = 0xDD0000;
3. Terminez en prcisant le nom doccurrence du texte dynamique ou de saisie auquel vous souhaitez appliquer le style.
titreDeLaPage.setTextFormat(styleTitre1);
Le tableau suivant prsente toutes les proprits que vous pouvez dnir.
Tableau A-1 Liste des proprits de la classe TextFormat()
Proprits Valeurs Description
Alignement du texte Retrait dun bloc. Style gras Style puces Couleur du texte
align blockIndent bold bullet color
left, center ou right

Un nombre (valeur exprime en points).
true ou false true ou false

0xFF0000 (couleur exprime en hexadecimal).
513
Tableau A-1 Liste des proprits de la classe TextFormat() (suite)

Proprits Valeurs
Un nombre.
Description
Retrait gauche de la premire ligne dun paragraphe. Style italique Interlignage Marge de gauche Marge de droite Taille des caractres Liste de taquets de tabulation Nom du cadre utiliser avec la proprit URL. Style soulign Adresse dun lien.
indent italic leading leftMargin rightMargin size tabStops target underline

url
true ou false
Un nombre qui nest pas relatif la taille du texte. Un nombre (valeur exprime en points). Un nombre (valeur exprime en points). Un nombre (valeur exprime en points). [20,60,90] (Une liste de valeurs). Nom dun cadre.
true ou false
http://www.adresse.com : vous pouvez aussi utiliser dautres types dadresses.
Changer la couleur dune occurrence

Il existe deux techniques dont une qui nest plus recommande par Macromedia. Depuis des annes et des versions, de nombreuses mthodes et proprits sont peu peu dconseilles par lditeur. Que dois-je faire, ne plus les utiliser ? Penons lexemple de la fonction random(), trois versions plus tard, elle fonctionne encore alors quelle est qualie comme depreciated . Prendre la dcision dutiliser une technique dconseille par Macromedia relve dun choix personnel, mais avec lexprience, nous constatons que de nombreuses commandes existent et fonctionnent encore. Le risque est rel, si une nouvelle version de Flash ne supporte plus la proprit, mthode ou classe que vous avez utilise, votre animation ou votre programme ne marchera plus. Depuis Flash 8, la classe Color() est dconseille, mais la technique qui remplace la possibilit de mise en couleur dune occurrence est bien plus complexe. Est-ce que les novices qui ne matrisent pas bien la programmation doivent dornavant se passer dune telle possibilit de contrle sur une occurrence ? Nous allons vous prsenter les deux techniques de mise en couleur dune occurrence, retenez celle qui vous semble la plus abordable votre niveau.
514
Classe Color()
Voici un exemple de mise en couleur dune occurrence :
maPalette = new Color(nomDeMonOccurrence); maPalette.setRGB(0,255,0);
Comme vous pouvez le constater, deux lignes sufsent, la traduction des termes parle
delle-mme. La seule difcult est relative au choix de la couleur. Les valeurs sont exprimes en RVB avec une chelle allant de 0 255. Dans lexemple ci-dessus, nous rglons la couleur de loccurrence nomDeMonOccurrence en vert. Vous devez donc instancier la classe Color() en prcisant le nom de loccurrence contrler comme paramtre. Vous utilisez ensuite la mthode setRGB() pour dnir le dosage de couleur de votre occurrence. La technique est trs simple, mais elle nest plus recommande par Macromedia.
Mthode ColorTransform()
prsent, voici la mise en couleur dune occurrence avec la classe geom.ColorTransform.
import flash.geom.Transform; import flash.geom.ColorTransform; // changeCouleur = new Transform(carre); nelleCouleur = new ColorTransform(0, 1, 1, 1, 0, 255, 0, 0); changeCouleur.colorTransform = nelleCouleur;
Commencez par importer deux classes an de disposer des mthodes associes. Vous devez ensuite instancier la classe ColorTransform an de dnir une nouvelle couleur, ou plutt une nouvelle transformation. Les paramtres prciser entre les parenthses offrent effectivement un plus grand contrle de la couleur. Nous nentrerons pas dans le dtail des paramtres de la classe ColorTransform(), car cela ncessiterait un plus long dveloppement. Nous dirons simplement que vous devez modier les trois derniers paramtres pour effectuer un simple rglage de couleur. Les deuxime, troisime et quatrime paramtres, permettent de prciser le mode dapplication de votre couleur. *=,234
515
Index
Symboles ! 41, 76, 158, 268 != 76, 112 " 378 % 175 & 249 && 319 *= 222 ++ 42, 100 += 58, 77, 124, 127, 151 .v 507 .sql 509 .xml 53, 145, 302 /* */ (commentaire) 30 // (commentaire) 30 == 76, 112, 142, 151, 168 >= 165 ? 151, 169, 222 [] sort() 317 \t 347, 359 {} 183, 388 || 112 Numriques 0x 63, 93 A addEventListener 110, 111, 115, 176 addItem() 176, 349 addListener() 110, 218 addPage() 478 align 318, 385, 482 allowscale 497
animation 27 centrer 482 gravit 225 imprimer 476 optimiser 27 prise en main 27 raliser un prchargement 33 Array 138, 165, 377 arrondi ceil() 35 round() 35 ascenseur 337 attachAudio() 508 attachMovie() 139, 146, 157, 179, 230 attachVideo() 272, 276, 508 autoSize 146 B beginFill() 153 BitmapData 159, 161 draw() 159 getPixel() 160, 162 BlurFilter 437 bold 385 Boolean inverser la valeur 158 borderColor 146 bouton radio 110 break 111, 142 C Camera 276, 508 get() 276 setQuality() 276 capabilities 487, 492, 493
os 492 version 493 case cocher 110 casse 327 change 111 clearInterval() 78, 169 click 111, 114, 115 Color() 63, 87, 146, 514 0x 63 ra 87 setRGB() 515 combo box 110 Composant addEventListener() 119, 176 addItem() 111, 176, 349 data 305 dropdownWidth 317 label 349 List 305 rowCount 111, 176 selected 111 selectedItem 305 setStyle() 111, 305 target 305 composant X, 48, 150 addEventListener() 50, 111, 115 addMenuItem 50 bouton radio 110 case cocher 110 change 50, 111 click 111 combo box 110 data 119 label 50, 111, 119 List 348
menu 61 droulant 110 MenuBar 48 menuItem 50 selectedData 111 selectedIndex 111 target 111 connect() 272, 456 ContextMenu 60 caption 60 hideBuiltInItems() 60 ContextMenuItem() 61 separatorBefore 61 cookies 244, 509 cos() 189 createEmptyMovieClip() 145, 153, 201, 258 createTextField() 146, 371 css 322 curveTo() 154 D data 119, 245, 305 Date() 164 getDate() 165 getFullYear() 165 getHours() 164 getMinutes() 164 getSeconds() 165 Debugger 411 delete() 24, 30, 34, 38 diaporama, crer 257 display 159 draw() 159 dropdownWidth 317 DropShadowFilter 82 blurX 82 lters 82 quality 82 strength 82 du 492 duration 268 E easing 134 e-mail 475 enabled 79, 131, 172, 268 F faire dler un texte 337 false 41, 42
lters 369, 437 BlurFilter 437 GlowFilter 369 ash 159, 161, 437, 515 BitmapData 159 display 159 DropShadowFilter 82 lters 82, 369, 437 geom.ColorTransform 515 geom.Transform 515 mx 202 Flash Media Server 503 oor() 169 font 146, 385 for() 20, 21, 30, 42, 49, 54, 58, 100, 179, 188, 258 fscommand 497 allowscale 497 Exec 498 fullscreen 497 quit 500 showmenu 497 trapallkeys 497 fullscreen 497 Function() 30 G getBytesLoaded() 406 getBytesTotal() 406 getCode() 218, 232, 319 getDepth() 139 getFontList() 317 getHours() 164 getLocal() 247 getPixel() 160, 162 getRemote() 456, 509 getTimer() 80, 168 getURL() 30, 475, 484, 486 global 54 GlowFilter 369 gotoAndStop() 39, 54, 78 H height 240 heures 169 hitTest() 63, 103 I if() 30, 32, 76, 165, 319 == 32, 34 else 166
import 159, 161 imprimer 476 indexOf() 112, 227, 330, 511 input 146 J JavaScript 484, 485 join() 305 K Key() 218, 319 addListener 218 codes des touches 37,38,39 et 40 232 getCode() 218, 232, 319 L label 111, 119, 349 leading 319 leftMargin 319 length 93, 112, 330 _level 341 lineStyle() 153, 201 List 305, 348 selectedItem 305 target 305 vScrollPolicy 305 Liste 97, 138, 165, 377 Crer une liste vide 245 length 41, 112 push() 55, 110 sort() 317 loadClip() 131, 259, 405 loadMovie() 30, 55, 259 loadMovieNum() 133, 155 loadSound() 268 loadVariablesNum 341 LoadVars() 251 onLoad 251 sendAndLoad 251 M MAC 493 Math 35, 169 cos() 189 oor() 169 round() 86, 169 sin() 189 Math() atan2 90 Math.abs() 186
518
Index
maxChars 169, 299, 328 maxscroll 341 menu droulant 110, 316 Microphone 276, 279, 284, 508 get() 276, 279 setGain 284 mise en forme du texte 315 TextFormat() 315 mot de passe 350 Mouse() 161 show() 161 moveTo 201 moveTo() 153 MovieClip() attachMovie() 19, 31, 54, 61, 99, 139, 146, 157, 179, 230 beginFill() 153 createEmptyMovieClip() 145, 153, 258 curveTo() 154 drag & drop 102, 104 duplicateMovieClip() 20, 105 enabled 78, 268 hitTest() 103 lineStyle 153 loadMovie() 259 loadMovieNum() 155 moveTo() 153 _name 142, 227 removeMovieClip() 42, 55, 105 setMask() 216 startDrag() 103, 125, 161, 209 stopDrag() 103 swapDepths() 99, 139, 189, 218 MovieClipLoader() 130, 147, 258, 404 loadClip() 131, 259, 405 onLoadComplete 147, 258 mx 49, 202, 223 controls 49 easing 134 Menu 49 MenuBar 49 transitions 134, 223 MySQL 243 N _name 142, 227 Nan (Not a Number) 387
NetConnection() 272, 299, 456, 504, 509 connect() 272, 456, 504 NetConnection.Connect.Failed 277 NetConnection.Connect.Success 277 null 272 rtmp 273, 504 NetStream() 272, 276, 289, 506 live 507 onStatus 277 parameters 289 pause() 272 play() 272, 506 publish() 506 seek() 272 new 45, 49, 60, 61, 82, 130, 164, 251, 268, 478 newline 112, 378 nextFrame() 115 noScale 240 null 272 Number() 175 O occurrence 141 off-line 496 onChanged 300, 317, 328, 385 onCuePoints 289 name 289 parameters 289 onEnterFrame 24, 33, 38, 55, 122, 151, 189 onKeyDown 218, 232 onKeyUp 233 onKillFocus 318, 329 onLoad 251, 268 onLoadComplete 130, 147, 258, 404 onMouseDown 147 onMouseMove 38, 39, 86, 125, 209 onPress 41, 47, 79, 139, 156 onResize 240 onSetFocus 245, 318, 329 onStatus 277 onSync 299, 461 os 492 P parameters 289
_parent 142 pause() 272 play() 272 Player, version 492 plug-in 493 pop-up 485 position 267 preload getBytesLoaded() 34 getBytesTotal() 34 PrintJob() 478 addPage() 478 send() 477 start() 478 projecteur 495 projection 495 prototype 284 push() 369, 394 Q QCM 109 quit 500 R random() 139, 186, 230 removeMovieClip() 30, 55 replaceSel() 353 restrict 169, 299, 328 rightMargin 319 _root 21, 24, 50, 58, 258 round() 35 rowCount 111, 176 RSS 302, 306 rtmp 273 S scaleMode 240 scroll 299, 337, 345 seek() 272 selectable 441 selected 111 selectedData 111, 115 selectedIndex 111 selectedItem 305 Selection 353 replaceSel 353 setSelection 353 send() 477
519
sendAndLoad 251 setInterval() 78, 169, 172, 184, 189, 267 setMask() 45, 86, 122, 216 setQuality() 276 setRGB() 63 setSelection() 353 setStyle() 111, 305 setTextFormat() 146, 317, 513 setTimeout() 185 setTransform() 87 SharedObject 244, 299, 456 data 245 getLocal() 247 getRemote() 299, 456 onSync 299, 461 SharedObject() 508 .fso 509 connect 509 data 509 getLocal() 509 getRemote() 509 onSync 510 SharedObject().sql 509 show() 161 showmenu 497 sin() 189 sort() 317 Sound() 267 duration 268 loadSound() 268 onLoad 268 position 267 setVolume() 267 splice 394 split() 305 Stage 240, 482 align 482 height 240 onResize 240 scaleMode 240 tl, t, tr, l, cc, r, bl, b, br 241 width 240 start() 134, 478 startDrag() 30, 81, 86, 103, 125, 161, 209 startTransition() 134 stop() 30 stopDrag() 30
streaming 503 strength 82 String() 176, 327 indexOf() 227 substr() 176, 327 substring 142 substring() 327 StyleSheet 325 substr() 176, 327 substring() 142, 327 swapDepths() 139, 189, 218, 404 switch() 60, 115 break 60, 116 case 60, 116 symbole, crer un symbole 149 System 492, 493 capabilities 487 langue 487 systme dexploitation 491 T Tableau 110, 138, 165, 377 associatif 388 Crer un tableau vide 245 length 112 push() 110, 394 sort() 317 splice 394 tabStops 345, 360 tabulation 358 target 111, 305 text 146, 385 texte cliquable 355 Texte de saisie onChanged 317 onKillFocus 318 onSetFocus 318 TextField() 162, 325 StyleSheet 325 TextFormat() 146, 162, 315, 345, 356, 513 color 146 input 146 setTextFormat() 162 size 146 tabStops 345, 360 type 146 this 21, 24, 32, 54 toLowerCase() 112, 328
toString 93 toUpperCase() 54, 328 trace() 32, 105 TransitionManager() 129, 135 transitions 129, 134, 202, 223 easing 134 trapallkeys 497 true 54, 76 Tween Bounce 45 easeOut 45 onMotionFinished 45 onMotionStarted 45 yoyo 45 Tween() 44, 202, 223 Back 203 Bounce 203 easeOut 202 Elastic 203 None 203 Regular 203 Strong 202, 203 yoyo() 223 U undened 245 url 356 V variable 335 & 2 mot de passe 350 version 493 W while() 22, 42 width 240 WIN 493 WindowSWF 135 wki 298 X _x 127, 139 XML 2, 49, 153 attributes 8, 49, 54, 99, 153 attributs 3 charger un document 4 childNodes 17, 99 crer un document 4 rstChild 7 id 9
520
Index
idMap 9 ignoreWhite 5, 17, 49, 54, 99, 119 length 11, 49 lire un attribut 8 lire un nud 6
load() 4, 17, 49, 54, 99, 119, 153 nodeName 11 nom dun nud 11 nombre de nuds 11 onLoad 6, 17, 49 Parser 3 XMLchildNodes 6
_xmouse 106, 127, 157, 201 xmouse 61 xscale 87 Y _ymouse 61, 157
521

150 Scripts Pour Flash CS3 - Eyrolles

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

150 Scripts Pour Flash CS3 - Eyrolles

Transféré par

Droits d'auteur :

Formats disponibles

50 scripts

CHEZ LE MME DITEUR

DITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com

Pourquoi un tel ouvrage ?

Compatibilit des scripts de ce livre

Les diffrents niveaux de dveloppement en ActionScript

150 scripts pour Flash CS3

Doit-on utiliser les composants ?

150 scripts Livre Page XI Lundi, 20. ao t 2007 7:29 07

Structure dune tude de cas

150 scripts Livre Page XII Lundi, 20. ao t 2007 7:29 07

150 scripts pour Flash CS3

sen suit lanalyse

150 scripts Livre Page XIII Lundi, 20. ao t 2007 7:29 07

Lignes 7 9 : certaines lignes dinstructions sont analyses et/ou commentes globalement.

Tlchargement des animations utilises dans cet ouvrage

150 scripts Livre Page XIV Lundi, 20. ao t 2007 7:29 07

150 scripts Livre Page XV Lundi, 20. ao t 2007 7:29 07

Table des matires

Se prparer la lecture de louvrage . . . . . . . . . . . . . . . . . . . . . . . . . .

Optimisation dune animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

150 scripts Livre Page XVI Lundi, 20. ao t 2007 7:29 07

150 scripts pour Flash CS3

150 scripts Livre Page XVII Lundi, 20. ao t 2007 7:29 07

Table des matires

Variateur de couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Variateur de couleur avec la classe geom.ColorTransform . . . . . . . . . . . .

Les lments de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

109 109 114 117

121 121 123 126

129 129 132 134

Constructions dynamiques dinterfaces . . . . . . . . . . . . . . . . . . . . . . .

137 137 141 144

150 scripts Livre Page XVIII Lundi, 20. ao t 2007 7:29 07

150 scripts pour Flash CS3

149 152 155 157 158 161

Contrle et afchage du temps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dplacement de personnages ou dobjets . . . . . . . . . . . . . . . . . . . .

150 scripts Livre Page XIX Lundi, 20. ao t 2007 7:29 07

Table des matires

SkyScraper dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SkyScraper dynamique avec tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Enregistrement de scores et autres donnes . . . . . . . . . . . . . . . . .

243 244 249 253

Contrle des mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

150 scripts Livre Page XX Lundi, 20. ao t 2007 7:29 07

150 scripts pour Flash CS3

297 297 302 308 310

Mise en forme du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

315 315 322 327 329 332

Traitement du texte et des variables . . . . . . . . . . . . . . . . . . . . . . . . . .

150 scripts Livre Page XXI Lundi, 20. ao t 2007 7:29 07

Table des matires

Manipulation des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

377 377 381 384 388

Jeux pour enfants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

437 437 446 451

150 scripts Livre Page XXII Lundi, 20. ao t 2007 7:29 07

150 scripts pour Flash CS3

453 455 462 468 469

Impression, e-mail et fentre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

475 475 476 482 484 485 485

487 487 491 492

495 496 497

150 scripts Livre Page XXIII Lundi, 20. ao t 2007 7:29 07