Anne Tasso Apprendre à programmer en ActionScript 3 2 e édition Groupe Eyrolles, 2007, 2009, ISBN : 978-2-212-12550-4
134 Apprendre à programmer en ActionScript 3 Les techniques de programmation incontournables Tout bouton ou élément constituant l interface graphique d une application possède un comportement spécifique que nous devons traduire sous la forme de programmes ActionScript 3. Ainsi, décrire les actions à réaliser lors d un clic de souris constitue le cœur d un programme basé sur la programmation événementielle. Ces actions sont décrites par des instructions qui font appel le plus souvent à des techniques de base qu il est indispensable de connaître. Parmi celles-ci, examinons l incrémentation qui est un procédé très utilisé en informatique. Dans l environnement Flash, l incrémentation est très utile, en particulier pour déplacer un objet sur la scène. Aussi, nous nous proposons de réaliser un petit jeu simple qui va nous permettre de saisir tout l intérêt de cette technique associée à la gestion des événements.
Communiquer ou interagir CHAPITRE 3 135 Ce jeu nous permettra également d examiner des techniques plus spécifiques à Flash, comme changer la couleur d un objet en cours d animation ou déplacer un objet à l aide de la souris. Cahier des charges Le jeu consiste à faire éclater des bulles de savon à l aide d un curseur. Ce dernier ne se déplace qu horizontalement et se situe vers le bas de la scène. Au lancement de l animation, la scène se présente comme le montre la figure 3-10. Figure 3-10 Le jeu a pour objectif de faire éclater les bulles à l aide du curseur triangulaire. Lorsque le curseur de la souris se trouve sur le curseur triangulaire, le terme «Cliquer» remplace le terme «Jouer» afin d inviter l utilisateur à démarrer le jeu. Lorsque l utilisateur clique sur le curseur Jouer, celui-ci change de couleur et une bulle de savon apparaît puis descend à la verticale. Le curseur se déplace de gauche à droite et inversement, en fonction de la position de la souris. L utilisateur doit déplacer le curseur de façon à se placer sous la bulle et faire éclater la bulle. Comme pour la calculatrice, la mise en place de ce jeu s effectue en plusieurs étapes : la définition des objets nécessaires à l application ; le positionnement des objets à l écran ; la description des comportements de chaque objet en fonction des actions de l utilisateur.
136 Apprendre à programmer en ActionScript 3 Toutes les fonctionnalités du jeu ne pourront être réalisées dans ce chapitre. Elles le seront au cours des chapitres à venir, lorsque les techniques (test, boucle ) nécessaires à leur mise en œuvre auront été étudiées en détail. Définition des objets La bulle La bulle est un simple objet défini comme un symbole de type Clip. Le symbole est nommé BulleClp. Elle représente une bulle de savon, comme le montre la figure 3-11 : Figure 3-11 Le symbole BulleClp (Flash CS3) Le curseur Le curseur représenté par la figure 3-12 est un symbole de type Clip nommé BoutonClp. Il est composé de deux calques nommés Texte et Forme. Sur le premier calque se trouve une zone de texte dynamique contenant le terme «Cliquer». La zone de texte est nommée labelout dans le panneau Propriétés associé (voir figure 3-12- ). Elle permet la modification de texte placé sur le bouton, en cours d exécution du jeu. Pour modifier la couleur du fond du bouton lorsque le curseur de la souris se trouve dessus, nous plaçons sur le second calque deux objets : 1. Le contour du triangle, tracé en noir et placé en dehors du symbole (voir figure 3-12- ).
Communiquer ou interagir CHAPITRE 3 137 2. La couleur de fond du bouton (triangle sans bord), placée à l intérieur d un symbole (voir figure 3-12- ). Le symbole représentant le fond est nommé FondClp. La copie de ce symbole (l instance), placée dans le clip BoutonClp est nommée fond, dans le panneau Propriétés associé (voir figure 3-12- ). Figure 3-12 Le symbole BoutonClp (Flash CS4) Remarque Le contour du triangle ( ) ne varie ni de forme, ni de couleur. Il n est pas nécessaire de l enregistrer sous forme de symbole.
138 Apprendre à programmer en ActionScript 3 Les zones de texte Les deux zones de texte sont utilisées pour afficher le nombre de bulles éclatées par le curseur, ainsi que le score réalisé. Ces deux zones d affichage sont issues du même symbole nommé AfficherClp. Le symbole AfficherClp est un symbole de type Clip. Il est constitué de deux zones de texte dynamique et d un rectangle permettant de colorer le fond de la zone d affichage. Les deux zones de texte sont placées sur un calque nommé Texte, le rectangle sur un second calque nommé Fond. Le calque Texte est placé au-dessus du calque Fond. Chaque zone de texte porte un nom dans le panneau Propriétés qui les distingue l une de l autre. Celle située au-dessus du rectangle est nommée titreout, celle située au centre a pour nom labelout (voir figure 3-13). Figure 3-13 Le symbole BulleClp (Flash CS3)
Communiquer ou interagir CHAPITRE 3 139 Positionnement des objets à l écran Comme le montre la figure 3-10, nous devons placer les objets de façon à ce que : la bulle se situe au centre de l écran ; le curseur soit centré horizontalement, vers le bas de la scène ; un écart de 5 % de la largeur de la fenêtre sépare les deux zones de texte du bord gauche de la fenêtre. La zone de texte correspondant à l affichage du score se situe au premier tiers de la hauteur, tandis que la zone de texte affichant le nombre de bulles éclatées se trouve dans le second tiers. Ces contraintes sont réalisées grâce aux instructions suivantes : // Stocker la hauteur et la largeur de la scène var largeur:uint = stage.stagewidth; var hauteur:uint = stage.stageheight; // Calculer un écart de 5 % de la largeur de la fenêtre var ecart:number = 5 * largeur / 100 ; // Déclarer et initialiser la variable vitesse var vitesse:uint = 10; // Créer une instance de BoutonClp var btnjouer:boutonclp = new BoutonClp(); // Le curseur de la souris prend la forme d'une main au survol du bouton btnjouer.buttonmode = true; // Placer le curseur au centre sur l axe des X et vers le bas btnjouer.x = largeur / 2; btnjouer.y = hauteur - btnjouer.height; addchild(btnjouer); // Créer une instance de BulleClp var bsavon:bulleclp = new BulleClp(); // Placer la bulle au centre de la scène bsavon.x = (largeur ) / 2; bsavon.y = (hauteur) / 2 ; addchild(bsavon); // Créer les deux zones de texte var score:afficherclp = new AfficherClp(); var eclats:afficherclp = new AfficherClp();
140 Apprendre à programmer en ActionScript 3 // Placer les zones de texte sur le bord gauche de la scène score.x = ecart; score.y = (hauteur - score.height) / 3; eclats.x = ecart; eclats.y = 2*(hauteur - eclats.height) /3; addchild(score); addchild(eclats); // Donner un titre aux deux zones de texte score.titreout.text = "Score"; eclats.titreout.text = "Eclat / Total"; Remarque Observez l instruction : btnjouer.buttonmode = true; Elle a pour rôle d afficher le curseur de la souris non plus comme une flèche mais sous la forme d une main lorsque le curseur survole l objet btnjouer. De cette façon, l utilisateur s attend à voir l objet btnjouer se comporter comme un bouton et non comme un clip. La bulle se déplace vers le bas à chaque clic Pour déplacer un objet sur la scène, il suffit de modifier ses coordonnées en X et en Y. Déplacer un objet vers la droite ou vers la gauche s effectue en modifiant les coordonnées en X, alors que déplacer un objet vers le haut ou le bas, s accomplit en modifiant les coordonnées en Y. Ici, la bulle doit être déplacée vers le bas lorsque l utilisateur clique sur le curseur. En supposant que la bulle soit placée en 150 sur l axe des Y, pour voir descendre la bulle au moment du clic, il suffit de la déplacer en 151 au premier clic, puis en 152 au clic suivant, puis en 153 Pour en savoir plus Le système de coordonnées qui permet de placer des objets sur la scène est décrit au chapitre introductif de cet ouvrage, à la section «Qu est-ce qu un programme en Flash?». La propriété y de l objet à déplacer prend les valeurs 150, 151, 152, Elle augmente de 1 à chaque clic. Pour augmenter (dans le jargon informatique on dit «incrémenter») une valeur de 1, la solution consiste à utiliser l instruction suivante : a = a + 1
Communiquer ou interagir CHAPITRE 3 141 En effet, comme nous avons pu le remarquer au cours du chapitre 1, «Traiter les données», à la section «Quelques confusions à éviter», cette instruction ajoute 1 à la valeur de a située à droite du signe = et enregistre la valeur augmentée de 1 dans la même variable a grâce au signe d affectation. L enregistrement efface la valeur précédemment enregistrée. Pour réaliser l incrémentation sur la bulle de savon, il suffit de remplacer la variable a par la position de l objet sur l axe des Y, à savoir bsavon.y. Cette instruction s insère dans le gestionnaire d événement MouseEvent.MOUSE_DOWN, comme suit : btnjouer.addeventlistener(mouseevent.mouse_up, onappuie); function onappuie(e:event){ bsavon.y = bsavon.y +1; } De cette façon, à chaque fois que l utilisateur clique sur le curseur, la position de la bulle (bsavon.y) est incrémentée de 1, ce qui a pour résultat de la déplacer de 1 pixel vers le bas de la scène (voir figure 3-14). Figure 3-14 Le centre de la bulle se déplace de 1 pixel à chaque clic.