Cours 2

Flash : Action Script 2.0 Cours 2 : Action Script avancée

Licence CCIN : Communication,  Création et Intégration Numérique 

Cours de CARTEAU Nicolas

Sommaire 1. 2. 3. 4. 5. 6.

Envoi de variable par l’HTML Les clips et leurs profondeurs Couleurs des clips en AS Dessiner sur des clips Les évènements du clavier Les collisions

Envoi de variable par l’HMTL

Envoi de variable par l’HMTL Envoi de variable :  Créer une nouvelle animation flash contenant un clip nommé « mon_clip » à  l’intérieur. Publier votre animation. Ceci créera une page HTML <meta http‐equiv="Content‐Type" content="text/html; charset=UTF‐8" />

Coder de préférence la page HTML en UTF‐8

Envoi de variable par l’HMTL Envoi de variable :  Pour transmettre une variable d’un fichier HTML dans un fichier SWF, il suffit de  rajouter : 

Si on a plusieurs variables à envoyer, il faut utiliser le séparateur & entre les  variables.

Envoi de variable par l’HMTL Réception de variables :  Chaque variable envoyée par un fichier HTML est réceptionnée sur la scène  (_root) de votre animation Flash. Exemple 1 : 

Dans Flash :  Créer un champ texte dans votre fichier Flash et nommer le « variable_html » variable_html.text = _root.ma_variable;

Sauvegarder et testé l’animation Ouvrir votre fichier HTML

Envoi de variable par l’HMTL Réception de variables :  Exercice :  ‐ Créer une nouvelle animation Flash et publier la ‐ Créer 2 variables dans la page HTML (« rot » et « trans ») ‐ Récupérer ces valeurs ‐ Affecter ces valeurs à un clip dans la scène  

Envoi de variable par l’HMTL Réception de variables :  Réponse : 

variable_html.text = " Rotation = "+_root.rot+" Transparence = "+_root.trans; //créer un clip avec l’occurrence « monclip » monclip._rotation = _root.rot; monclip._alpha = _root.trans;

Attention aux caractères spéciaux.   Exemple   :  & => %20%26%20      é => %C3%A9     l’espace => %20 C’est pourquoi il est conseillé de travailler en UTF‐8

Les clips et les profondeurs

Les clips et les profondeurs A savoir :  Pour commencer, Il faut savoir qu'il existe deux types de Clips : ‐ les clips statiques, créés dans Flash avant la compilation ‐ les clips dynamiques, créés pendant l'exécution par Action Script. Chaque clip comprend : ‐ 1 nom : occurrence du clip  ‐ 1 profondeur : comprise entre ‐16 383 et 1 048 575 2 clips ne peuvent pas avoir la même profondeur. Les clips statiques ont une profondeur négative par défaut par contre c’est vous qui  attribué la profondeur des clips dynamiques 

Les clips et les profondeurs Les profondeurs :  Pour renvoyer la profondeur d’un clip il faut utiliser la méthode getDepth()  Pour assigner une profondeur à un clip il faut utiliser la méthode swapDepths() Exemple 1 :  Créer 2 clips nommés : « mon_clip_1 » et « mon_clip_2 » sur la scène  trace("profondeur de mon_clip_1 ="+mon_clip_1.getDepth());      // renvoie : profondeur de monclip1 = ‐16383 

Exemple 2 :  trace("profondeur de mon_clip_1 :"+mon_clip_1.getDepth());  trace("profondeur de mon_clip_2 :"+mon_clip_2.getDepth());  mon_clip_1.swapDepths(mon_clip_2);  trace("ECHANGE DE PROFONDEUR"); t race("profondeur de mon_clip_1 :"+mon_clip_1.getDepth());  trace("profondeur de mon_clip_2 :"+mon_clip_2.getDepth());

Les clips et les profondeurs Les profondeurs :  Les profondeurs des clips agissent comme les calques dans Photoshop. Le clip ayant la profondeur la plus élevée passe devant les autres Exemple 3 :  mon_clip_1.onRelease = function() { this.swapDepths(mon_clip_2); }; mon_clip_2.onRelease = function() { this.swapDepths(mon_clip_1); };

Les clips et les profondeurs Créer un clip dynamique (vide) :  Afin de créer un clip dynamique, il faut utiliser la méthode : createEmptyMovieClip(name:String, depth:Number); name : il s’agit de donner un nom au clip afin de pouvoir l’appeler ultérieurement. depth : il s’agit de donner un nombre afin de préciser la profondeur. Si l’on attribue à un clip la même profondeur qu’à un autre clip, le clip qui se  trouvait précédemment sur cette profondeur sera détruit. Afin d’éviter ce problème, on peut utiliser la méthode : getNextHighestDepth() Cette méthode permet de deplacer le clip juste au dessus des autres.

Les clips et les profondeurs Créer un clip dynamique (vide) :  Exemple 1 : _root.createEmptyMovieClip(« mon_clip_1 »,1); this.createEmptyMovieClip(« mon_clip_2 », this.getNextHighestDepth()); 

Exemple 2 :  this.createEmptyMovieClip("mon_clip_2", this.getNextHighestDepth());  mon_clip_2._x=0; mon_clip_2._y=0; mon_clip_2.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif");

Les clips et les profondeurs Dupliquer un clip:  Afin de dupliquer un clip dynamique, il faut utiliser la méthode : duplicateMovieClip(target:String, newname:String, depth:Number); target : le nom du clip à dupliquer newname : le nouveau nom du clip depth : profondeur du clip Exemple 1 :  this.createEmptyMovieClip("img_mc", this.getNextHighestDepth()); img_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); duplicateMovieClip(img_mc, "newImg_mc", this.getNextHighestDepth()); newImg_mc._y = 200; newImg_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif");

Les clips et les profondeurs Dupliquer un clip:  Exercice : Créez un clip vide Insérez lui une image Dupliquez le clip  Faite le suivre le nouveau clip au mouvement de la souris

Les clips et les profondeurs Dupliquer un clip:  Réponse :  this.createEmptyMovieClip("img_mc", this.getNextHighestDepth()); img_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); duplicateMovieClip(img_mc, "newImg_mc", this.getNextHighestDepth()); newImg_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); _root.onEnterFrame = function() { newImg_mc._x = _root._xmouse; newImg_mc._y = _root._ymouse; }

Les clips et les profondeurs Dupliquer un clip:  Exemple 2 :  Duplique un clip 5 fois avec 120 pixels d’ espacement sur l’axe vertical  this.createEmptyMovieClip("img_mc", this.getNextHighestDepth()); img_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); for (i=0;i<5;i++) { duplicateMovieClip(img_mc, "newImg_mc"+i, this.getNextHighestDepth()); this["newImg_mc"+i].loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); this["newImg_mc"+i]._y = i*120; }

Les clips et les profondeurs Attacher un clip:  Cette fonction va dupliquer un clip contenu dans la bibliothèque. Le clip qui va être attaché à partir de la bibliothèque doit impérativement posséder un  identifiant (il ne s’agit pas du nom) Pour cela, faites un clic droit sur le clip souhaité dans la bibliothèque et cliquez sur  liaison.

Les clips et les profondeurs Attacher un clip:  La méthode à utiliser pour attacher le clip sur la scène est la suivante :  attachMovie( id:String, name:String, depth:Number); id : le nom avec lequel vous l’avez identifié dans la bibliothèque name : le nom que vous allez donner au clip depth : la profondeur du clip Exemple 1 :  _root.attachMovie(‘clip_attache','nouveau_clip',1); nouveau_clip._x = 100; nouveau_clip._y = 100;

Les clips et les profondeurs Attacher un clip:  Exemple 2 : Duplique un clip à l’infini var i:Number=0; _root.onEnterFrame = function() { i++; // incrémente de 1 // attache le clip mon_clip et le nomme : nouveau_clip1; 2; 3; avec une profondeur égale a 1; 2…          _root.attachMovie('mon_clip','nouveau_clip'+i,i); this["nouveau_clip"+i]._x = 0;      // positionne chacque nouveau clip a x=0 this["nouveau_clip"+i]._y = 0 // positionne chacque nouveau clip a y=0 }

Les clips et les profondeurs Attacher un clip:  Exemple 3 : Rajoute une fonction Math.random //créer un fonction aléatoire function aleatoire(min:Number, max:Number):Number { var aleatoireNum:Number = Math.floor(Math.random() * (max ‐ min + 1)) + min; return aleatoireNum; }

Math.floor : Renvoi la valeur entière du nombre Math.random : Renvoi une valeur aléatoire entre 0 et 1

Les clips et les profondeurs Supprimer un clip :  La méthode pour supprimer un clip est simple, il suffit d’utiliser la méthode :  removeMovieClip(target:Object) target : nom du clip Exemple 1 : removeMovieClip(nouveau_clip); nouveau_clip.removeMovieClip();

Les clips et les profondeurs Supprimer un clip :  On peut également utiliser la méthode : getInstanceAtDepth(profondeur) Exemple 2 : _root.attachMovie("mon_clip","nouveau_clip2",100); btn.onRelease = function (){ _root.getInstanceAtDepth(100).removeMovieClip(); }

Les clips et les profondeurs Exercice:  ‐ Créer un clip dans votre bibliothèque et donné lui un nom de liaison. ‐ Dupliquer ce clip à l’infini ‐ Créer une fonction aléatoire () qui retourne un nombre entre 0 et 500 ‐ Déplacer le clip de 5px sur l’axe y à l’infini ‐ Supprimer le clip s’il sort de la scène

‐‐‐‐‐‐‐‐=>  Simuler une chute de pluie

Les clips et les profondeurs var i:Number=0; _root.onEnterFrame = function() { i++; var n:Number = aleatoire(0, 500);               // créé un nombre aléatoire entre 0 et 500 _root.attachMovie('mon_clip','nouveau_clip'+i,i); this["nouveau_clip"+i]._x = n; this["nouveau_clip"+i]._y = 0 this["nouveau_clip"+i].onEnterFrame = function() { this._y+=5; // déplace le clip de 5px vers le bas  if (this._y >=400) { this.removeMovieClip();      // supprime les clip s’ils dépacent les 400 px } } }

function aleatoire(min:Number, max:Number):Number { var aleatoireNum:Number = Math.floor(Math.random() * (max ‐ min + 1)) + min; return aleatoireNum; }

Couleurs des clips en AS

Couleurs des clips en AS Colorer un clip :  Pour colorer un clip, il faut utiliser certaines classes incorporées à Flash. En ce qui  concerne les couleurs, il s’agit des classes colortransform et transform. L'une permet  de créer la transformation de la couleur, et l'autre de l'appliquer au clip. Afin utiliser les classes colortransform et transform incrustées dans le logiciel Flash, il  faut se servir de « l’import » : import flash.geom.ColorTransform;  import flash.geom.Transform;

L’écriture des couleurs en Action Script se fait en hexadécimale (comme en  HTML). La seule différence en Flash, c’est que le caractère qui précède les chiffres  hexadécimaux est 0x au lieu de # en HTML

Couleurs des clips en AS Colorer un clip :  L’écriture d’une couleur en flash se fait donc de la manière suivante :  0x      Rouge      Vert       Bleu  Rouge : 0x       FF             00          00 Vert     : 0x      00             FF          00 Bleu     : 0x      00             00 FF

Maintenant voila le code pour enregistrer une couleur dans une variable import flash.geom.ColorTransform;  var ma_couleur:ColorTransform = new ColorTransform(); ma_couleur.rgb = 0xFFFF00; //Couleur Jaune

Couleurs des clips en AS Colorer un clip :  Afin d’appliquer la transformation, il faut créer une variable de transformation var ma_transformation:Transform = new Transform(mon_clip);

Enfin, pour changer la couleur d’un clip il faut utiliser la méthode colorTransform qui  se trouve dans le class : Transform import flash.geom.ColorTransform;  import flash.geom.Transform;  //défini une couleur var ma_couleur:ColorTransform = new ColorTransform();  ma_couleur.rgb = 0xFF0000; // Transforme la couleur du clip var ma_transformation:Transform = new Transform(mon_clip); ma_transformation.colorTransform = ma_couleur;

Couleurs des clips en AS Colorer un clip :  Exercice :  ‐ Créer un clip nommé « mon_clip » et placé le sur la scène. ‐ Créer 4 boutons nommés : ‐ btn_bleu ‐ btn_vert ‐ btn_noir ‐ btn_rouge ‐ Transformer la couleur de « mon_clip » en cliquant sur les boutons

Couleurs des clips en AS Colorer un clip :  Réponse :  import flash.geom.ColorTransform; import flash.geom.Transform; var ma_couleur:ColorTransform = new ColorTransform(); var trans:Transform = new Transform(mon_clip);    // affecte la transformation à « mon_clip » blue_btn.onRelease = function() { ma_couleur.rgb = 0x333399;                        // bleu trans.colorTransform = ma_couleur; }; red_btn.onRelease = function() { ma_couleur.rgb = 0xFF0000;                       // rouge trans.colorTransform = ma_couleur; }; ……

Dessiner sur des clips

Dessiner sur des clips Apprendre à dessiner:  Afin de dessiner sur un clip, il faut commencer par créer un clip vide Rappel :  _root.createEmptyMovieClip('dessin',1);

Ensuite on utilise les méthodes : LineStyle : apparence du trait moveTo : point de départ du trait lineTo : dessine un trait curveTo : dessine une courbe

Dessiner sur des clips Apprendre à dessiner:  La méthode lineStyle :  lineStyle(thickness: Number, rgb: Number, alpha: Number, pixelHinting: Boolean, noScale: String,  capsStyle: String, jointStyle: String, miterLimit: Number)

Cette méthode définit l’apparence du trait : ‐ thickness : épaisseur du trait => entre 0 et 255 ‐ rgb : couleur => Ex : 0xFF0000 ‐ alpha : transparence => entre 0 et 100 ‐ pixelHinting : permet de lisser le trait ‐ noScale : permet de redimensionner ‐ capsStyle : modifie l’extrémité du trait => round ; square ; none  ‐ jointStyle : modifie la liaison entre 2 traits => round ; mister ; level ‐ misterLimit : modifie la pointe dans un angle => entre 1 et 8 (environ)

Dessiner sur des clips Apprendre à dessiner:  Cette méthode étant plutôt compliqué, on peut la simplifier car certaines valeurs sont  très peu utilisées :  lineStyle(thickness: Number, rgb: Number, alpha: Number)

La méthode moveTo : moveTo(x: Number, y: Number)

La méthode lineTo :  lineTo(x: Number, y: Number)

Dessiner sur des clips Apprendre à dessiner:  Exemple pour créer un carré _root.createEmptyMovieClip('dessin',1);  dessin.lineStyle(4, 0x000000, 100); //définit l’apparence du trait  dessin.moveTo(10,10); // On se place au coin en haut à gauche  dessin.lineTo(300, 10); // Coin en haut à droite  dessin.lineTo(300, 300); // Coin en bas à droite  dessin.lineTo(10, 300); // Coin en bas à gauche  dessin.lineTo(10, 10);// Et on retourne en haut à gauche

Dessiner sur des clips Apprendre à dessiner:  Afin de remplir une forme, les méthodes « beginFill » et « endFill » doivent être  rajoutées beginFill(rgb: Number, alpha: Number) // début du remplissage endFill(); //fin de remplissage _root.createEmptyMovieClip('dessin',1);  dessin.beginFill(0xFF0000, 50); // définit l’apparence de l’intérieur de forme  dessin.lineStyle(4, 0x000000, 100); //définit l’apparence du trait  dessin.moveTo(10,10); // On se place au coin en haut à gauche  dessin.lineTo(300, 10); // Coin en haut à droite  dessin.lineTo(300, 300); // Coin en bas à droite  dessin.lineTo(10, 300); // Coin en bas à gauche  dessin.lineTo(10, 10);// Et on retourne en haut à gauche dessin.endFill();

Dessiner sur des clips Apprendre à dessiner:  La méthode servant à créer les formes arrondies esr : « curveTo ». Elle se définit de la  façon suivante : curveTo(controlX: Number, controlY: Number, anchorX: Number, anchorY: Number)

controlX : point de control horizontal controlY : point de control vertical anchorX : position en x du point suivant anchorY : position en y du point suivant

Dessiner sur des clips Apprendre à dessiner:  Comment faire un rond : 

this.createEmptyMovieClip("circle_mc", 1);          // créer un clip vide circle_mc.lineStyle(3, 0x0000FF, 100);                // définit l’apparence du trait circle_mc.beginFill(0xFF0000, 20);                      // indique le début d’un dessin circle_mc.moveTo(0, 100);                                    // place le point de départ circle_mc.curveTo(0,200,100,200);                    //point de transition (0,200) point final (100,200) circle_mc.curveTo(200,200,200,100); circle_mc.curveTo(200,0,100,0); circle_mc.curveTo(0,0,0,100); circle_mc.endFill(); // applique le remplissage entre le 1er et le dernier point 

Dessiner sur des clips Apprendre à dessiner:  Exercice :  ‐ Dessiner une maison ‐ façade      => carré ‐ toit            => triangle ‐ soleil         => rond ‐ ciel            => courbe ‐ terre         => courbe

Dessiner sur des clips Apprendre à dessiner:  Réponse : fichier=> maison.swf

Dessiner sur des clips Apprendre à dessiner:  Exemple pour dessiner avec la souris : _root.createEmptyMovieClip('dessin',1); dessin.lineStyle(4, 0x000000, 100); dessin.moveTo(0,0); _root.onEnterFrame = function() { dessin.lineTo(_xmouse, _ymouse); }

Dessiner sur des clips Apprendre à dessiner:  Exercice : ‐ Dessiner un trait au clic gauche sur la souris ‐ Arrêter de dessiner au relâchement du bouton de la souris 

Dessiner sur des clips Apprendre à dessiner:  Réponse : _root.createEmptyMovieClip('dessin', 1); dessin.lineStyle(4, 0x000000, 100); _root.onMouseDown = function() {                      // Quand on appuie sur le bouton de la souris dessin.moveTo(_xmouse, _ymouse);            // Place le début du dessin par rapport à souris _root.onEnterFrame = function() { dessin.lineTo(_xmouse, _ymouse);        // Dessine à chaque image un trait }; }; _root.onMouseUp = function() {                            // Au relâchement du bouton _root.onEnterFrame = null;                             // Arrête le « onEnterFrame » };

Dessiner sur des clips Apprendre à dessiner:  Exercice : ‐ Remplir le dessin au relâchement de la souris

Dessiner sur des clips Apprendre à dessiner:  Exemple pour dessiner et remplir le dessin quand on clique sur la souris : _root.createEmptyMovieClip('dessin', 1); dessin.lineStyle(4, 0x000000, 100); _root.onMouseDown = function() { dessin.moveTo(_xmouse, _ymouse); dessin.beginFill(0xff0000,100); _root.onEnterFrame = function() { dessin.lineTo(_xmouse, _ymouse); }; }; _root.onMouseUp = function() { dessin.endFill(); _root.onEnterFrame = null; };

Dessiner sur des clips Apprendre à gommer:  Il existe 2 façons pour gommer. La plus simple est de créer un bouton et d’utiliser la  méthode clear(). La 2eme est de supprimer le clip  Exemple 1 :  effaceur.onRelease = function() { _root.dessin.clear(); }

Exemple 2 :  effaceur.onRelease = function() { // Quand on clique sur ’effaceur ’ _root.dessin.removeMovieClip(); // On supprime le clip ’dessin’  }

Vous remarquerez qu’avec la 2eme méthode, on ne peut plus redessiner.

Dessiner sur des clips Apprendre à gommer:  Voici la solution pour gommer et redessiner juste après ………………………… effaceur.onRelease = function() {     _root.dessin.removeMovieClip();    // supprime le clip dessin _root.creer_espace_de_dessin();    // appele la fonciton espace_de_dessin()  } creer_espace_de_dessin = function() {  // fonction : espace_de_dessin() _root.createEmptyMovieClip('dessin', 1);  // créer un nouveau clip vide _root.dessin.lineStyle(4, 0x000000, 100);   // définit l’apparence du trait } _root.creer_espace_de_dessin(); // lance la fonction : espace_de_dessin() au demarage de l’anim

Les évènements du clavier

Les évènements du clavier Les écouteurs de key :  Afin d’utiliser les touches du clavier, il faut utiliser la classe Key.  L'objet Key ne possède pas d'évènement comme les MovieClip, mais des écouteurs.  La différence primordiale, c'est que là où un clip ne peut avoir qu'un seul et unique  évènement, l'objet Key peut avoir un nombre infini d'écouteurs, qui seront tous  appelés lors d'une action sur le clavier.

Les évènements du clavier Les écouteurs de key :  Voici comment créer un écouteur en utilisant les touches du clavier : Exemple 1 :  var ecouteur_clavier:Object = new Object(); // On crée un objet quelconque pour l'instant  ecouteur_clavier.onKeyDown = function() {      // On écrit une fonction onKeyDown trace("Hello World");  };  Key.addListener(ecouteur_clavier); // On indique que cet objet est un écouteur clavier !

Exemple 2 : var ecouteur_clavier:Object = new Object();  ecouteur_clavier.onKeyUp = function() { trace('Touche relevée');  }; Key.addListener(ecouteur_clavier);

Les évènements du clavier Les écouteurs de key :  Maintenant avec 2 écouteurs :  var ecouteur_clavier:Object = new Object(); var ecouteur_clavier_bis:Object = new Object(); ecouteur_clavier.onKeyDown = function() { trace("Hello World");  }; ecouteur_clavier_bis.onKeyDown = function() { trace("Hello World (bis)");  }; Key.addListener(ecouteur_clavier); Key.addListener(ecouteur_clavier_bis);

Les évènements du clavier Les écouteurs de key :  Maintenant, il s’agit de savoir quelle touche a été enfoncée. Pour cela, il existe :   ‐ getAscii() qui renvoie le code ASCII de la touche ‐ getCode() qui renvoie le code de la touche propre à Flash.   La méthode getAscii() ne prend pas en compte les touches « ctrl, alt, shift, … » Voici le code qui permet d’afficher les valeurs des touches en Ascii et en code flash : var ecouteur_clavier:Object = new Object();  ecouteur_clavier.onKeyDown = function() {  trace("\t Code : "+Key.getCode());  trace("\t ASCII: "+Key.getAscii());  };  Key.addListener(ecouteur_clavier);

il faut penser à désactiver les raccourcis clavier pendant l’exportation

Les évènements du clavier Les écouteurs de key :  Exercice :  ‐ Créez un clip balle en bas de votre scène.  ‐ Faire sauter la balle de 200 pixels vers le haut quand on appuie sur la barre d’espace ‐ Faire redescendre la balle à sa position d’origine lentement   ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐ Faire redescendre la balle de plus en plus vite

Les évènements du clavier Réponse 1 :  var y_de_depart:Number = _root.balle._y; var ecouteur_clavier:Object = new Object(); ecouteur_clavier.onKeyDown = function() { if (Key.getAscii() == 32) { _root.balle._y ‐= 100; }  } Key.addListener(ecouteur_clavier); 

// Récupère la position de départ // Créer l'écouteur

// 32 est le code de la barre d'espace // Déplace la balle de 100 pixels vers le haut 

// Appel l’écouteur

_root.balle.onEnterFrame = function() {               if (this._y <_root.y_de_depart) this._y += 2;                                              // Descend la balle de 2 px à chaque image }  }

Les évènements du clavier Réponse 2 :  var y_de_depart:Number = _root.balle._y; // Récupère la position de départ var vitesse:Number = 2;                                         // Créer un variable vitesse var ecouteur_clavier:Object = new Object(); // Créer l'écouteur ecouteur_clavier.onKeyDown = function() { if (Key.getAscii() == 32) { // 32 est le code de la barre d'espace _root.vitesse = 2;                                    // On redéfinit la vitesse _root.balle._y ‐= 100; // Déplace la balle de 100 pixels vers le haut  }  } Key.addListener(ecouteur_clavier);  // Appel l’écouteur _root.balle.onEnterFrame = function() { if (this._y<_root.y_de_depart) { this._y += _root.vitesse;                          // Descend la balle selon la vitesse _root.vitesse += 1;                                    // Augmente la vitesse de 1 à chaque image } }

Les évènements du clavier Les raccourcis clavier : Afin d’éviter de toujours rechercher le code des touches, le logiciel Flash a intégré des  raccourcis plus les touches les plus importantes

Les évènements du clavier Les raccourcis clavier : Voici maintenant 2 méthodes permettant de détecter l’appui sur la barre d’espace var ecouteur_clavier:Object = new Object();  ecouteur_clavier.onKeyDown = function() { if (Key.getAscii() == Key.SPACE) { trace("Barre d'espace appuyée");  } } Key.addListener(ecouteur_clavier); var ecouteur_clavier:Object = new Object(); ecouteur_clavier.onKeyDown = function() { if (Key.isDown(Key.SPACE)) { trace("Barre d'espace appuyée");  } } Key.addListener(ecouteur_clavier);

Les évènements du clavier Les raccourcis clavier : L’avantage d’utiliser Key.isDown, est qu’il effectue les actions seulement si la  touche est actuellement enfoncée.  

Rappel : ‐ L’utilisation d’écouteur sert à appeler une fonction s’il détecte la pression :  l’utilisation d’une touche du clavier. ‐ Les méthodes Key.getAscii et Key.getCode renvoient le code de la dernière touche  pressée On peut donc appeler l’action de la touche 10 secondes après avoir appuyé dessus Ainsi, on peut se passer des écouteurs et utiliser la fonction en continu si on le  souhaite

Les évènements du clavier Exercice :  ‐ Créez un clip nommé « barre » en bas de votre scène.  ‐ Déplacer cet objet en continu vers la gauche quand on appuie sur la flèche gauche ‐ idem pour la flèche droite ‐ Ne pas faire sortir l’objet de l’écran ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ Exercice 2 :  ‐ déplacer l’objet de manière fluide  => setInterval() et updateAfterEvent(); 

Les évènements du clavier Réponse 1 :  stop() barre.onEnterFrame = function() { if (Key.isDown(Key.LEFT)) {             // si la touche « flèche gauche » est enfoncée if(this._x >20){                         // si la barre se situe au delà de 20 pixels sur l’axe horizontal this._x ‐= 10;                 // la barre avance de 10 pixels vers la gauche } } if (Key.isDown(Key.RIGHT)) { if( this._x <530){ this._x += 10; } } }

Les évènements du clavier

SetInterval

:  appelle une fonction à des intervalles périodiques (en milli  seconde) updateAfterEvent()    :  met à jour l’affichage indépendamment du nombre d’image  de l’animation

Les évènements du clavier Réponse 2 :  function bouger() { if (Key.isDown(Key.LEFT)) { if(barre._x >20){ barre._x ‐= 3; } } if (Key.isDown(Key.RIGHT)) { if( barre._x <530){ barre._x += 3; } } updateAfterEvent(); // met à jour l’affichage } var deplacement = setInterval(bouger,1);           // Appel la fonction toute les 1 milli seconde 

Les collisions

Les collisions Collision rectangulaire : Afin d’apprendre à utiliser les collisions, il faut commencer par utiliser la méthode  ‘hitTest()’. Exemple :  mon_clip_1.hitTest(mon_clip_2)

Maintenant, vous allez créer un clip carré nommée « boite »  ‐ qui se déplace à l’évènement « onPress »  ‐ qui s’arrête à l’évènement « onRelease » ‐ ensuite vous créez un cercle ‐ pendant l’évènement « onRelease » si les 2 objets se touchent, afficher un message  d’erreur.

Les collisions Collision rectangulaire : Réponse :  boite.onPress = function() {                   this.startDrag();                  // permet à la boite de bouger }; boite.onRelease = function() { this.stopDrag();                   // stop la boite if (this.hitTest(cercle)) {     // si la boite touche le cercle trace("vous avez touché le cercle"); } };

Les collisions Collision rectangulaire : Maintenant, nous allons voir comment créer un obstacle. Pour utiliser les collisions avec le clavier, il est souvent nécessaire de center les formes des  clips. En gros, un carré de 20 pixels sur 20 pixels doit se placer aux coordonnées (‐10, ‐10). Exercice : ‐ créer un carré nommé « boite »  ‐ faites le se déplacer dans toutes les directions à l’aide des flèches du clavier ‐ ne le faites pas sortir de la scène

Les collisions Collision rectangulaire : Réponse :  var vitesse:Number = 10; boite.onEnterFrame = function() {        if (Key.isDown(Key.UP)) {                 // On déplace la clip avec le clavier this._y ‐= vitesse; } ………………………. if (this._y<0) {                                    // On définit des limites this._y = 0 } ………………………… }

Les collisions Collision rectangulaire : Suite de l’exercice :  ‐ Maintenant, placer un obstacle rectangulaire nommé « obstacle_rect ». ‐ Modifier le code afin de ne pas déplacer la boite si celle‐ci  entre en collision avec  l’obstacle.

Les collisions Collision rectangulaire : var vitesse:Number = 10; boite.onEnterFrame = function() {        posx = this._x;                                   // Enregistre la position  en X avant de bouger l’objet posy = this._y;                                   // Enregistre la position  en Y avant de bouger l’objet if (Key.isDown(Key.UP)) {                 // Déplace la clip avec le clavier this._y ‐= vitesse; } ………………………. if (this._y<0) {                                    // Définit des limites this._y = 0 } ………………………… if (this.hitTest(obstacle_rect)) { this._x = posx; // Replace la boite si elle touche l’obstacle this._y = posy; } }

Les collisions Collision circulaire : Maintenant, vous allez créer un cercle que vous nommerez « obstacle_cercle » et vous  ajoutez ce code juste après le hitTest du rectangle.

if (this.hitTest(obstacle_cercle)) { this._x = posx; this._y = posy; }

Les collisions Collision circulaire :

Vous remarquerez que cela fonctionne mais que la boite se bloque sans avoir touché  le cercle.  Malheureusement, ceux sont les limites du hitTest(). Il ne peut pas prendre en compte  les formes autres que rectangulaire.  En faite il considère qu’il y a collision à partir du moment ou la boite rentre dans le  clip. (on le voit très simplement en cliquant sur ce clip)

Les collisions Collision circulaire : Voici une astuce permettant de remédier à ce problème (en partie) distance = Math.sqrt(Math.pow(this._x‐_root.obstacle_cercle._x,2)+Math.pow(this._y‐ _root.obstacle_cercle._y,2)); if (distance<47.5) { this._x = posx; this._y = posy;  }

Math.sqrt => racine carré Math.pow => exposant  => dans l’exemple il s’agit de « 2 » 47,5 => rayon de « boite » + rayon de « cercle » distance => racine carré [(distance des centres en x)²+(distance des centres en y)²] On utilise Pythagore

Les collisions Collision circulaire : Copier maintenant ce code à la place de l’ancien distance = Math.sqrt(Math.pow(this._x‐_root.obstacle_cercle._x,2)+Math.pow(this._y‐ _root.obstacle_cercle._y,2)); if (distance<47.5) { this._x = posx; this._y = posy;  } /*if (this.hitTest(obstacle_cercle)) { this._x = posx; this._y = posy; }*/

Les collisions Collision ponctuelle : Voici maintenant une autre sorte de collision qui est beaucoup plus simple à  comprendre. On utilise toujours la méthode hitTest(), cependant, on lui indique les  coordonnées du clip plutôt que le clip lui‐même.  Exemple : Remplacer ce code par l’ancien if (_root.obstacle_cercle.hitTest(this._x,this._y,true)) { this._x = posx; this._y = posy; }

Déformer votre « obstacle_rect » et faites les modifications dans votre code.

Les collisions Collision complexe : Et enfin, on va voir la collision avec plusieurs points.  ‐ Rajouter à notre boite 4 clips situés aux angles de la boite  ‐ Nommer ces clips : point_1, point_2, point_3 point_4  Reprendre notre code précédent en le remplaçant par celui‐ci : if (_root.obstacle_cercle.hitTest(this.point_1._x,this.point_1._y,true)) { this._x = posx; this._y = posy;  }

Tester l’animation => …

Les collisions Collision complexe : Pourquoi ça ne fonctionne pas ? Étant donné que le point_1 est dans le clip boite, ses coordonnées ne changent pas. Il faut donc lui attribuer des coordonnées par rapport à la scène.

Les collisions Collision complexe : Le code sera donc : vrai_x = this.point_1._x+this._x; vrai_y = this.point_1._y+this._y;  if (_root.obstacle_circulaire.hitTest(vrai_x,vrai_y,true)) { this._x = posx; this._y = posy;  }

Les collisions Collision complexe : Autre solution : avec la méthode localToGlobal() plutôt que  vrai_x = this.point_1._x+this._x; var un_point:Object = new Object();  un_point.x = this.point_1._x;       // Donne à cet objet des propriétés x un_point.y = this.point_1._y;       // Donne à cet objet des propriétés y this.localToGlobal(un_point);      // Convertit l'objet à partir des coordonnées de scène (globales)  vers les coordonnées du clip (locales). if (_root.obstacle_circulaire.hitTest(un_point.x,un_point.y,true)) { this._x = posx;  this._y = posy;  }

Cette méthode permet d’éviter de calculer les coordonnées dans des situations  complexes. Par exemple : quand il s’agit de plusieurs clip imbriqués les uns dans les  autres.

Les collisions Collision complexe : Maintenant, en utilisant la méthode précédente, adaptez le code pour qu’il s’effectue  sur les 4 points.

Les collisions Collision complexe : Réponse :  for (i=1; i<=4; i++) { // Boucle de 1 à 4 compris var un_point:Object = new Object(); un_point.x = this['point_'+i]._x; un_point.y = this['point_'+i]._y; this.localToGlobal(un_point); if (_root.obstacle_circulaire.hitTest(un_point.x,un_point.y,true)) { this._x = posx; this._y = posy; } }