Vous êtes sur la page 1sur 82

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. Envoi de variable par l’HTML
2. Les clips et leurs profondeurs
3. Couleurs des clips en AS
4. Dessiner sur des clips
5. Les évènements du clavier
6. 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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http‐equiv="Content‐Type" content="text/html; charset=UTF‐8" />
<title>page 1</title>
</head>
<body>
<object type="application/x‐shockwave‐flash" data="test1.swf " width="550" height="400">
<param name="movie" value="test1.swf" />
</object>
</body>
</html>

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 : 
<object type="application/x‐shockwave‐flash" data="test1.swf?variable=valeur_variable " width="550" height="400">
<param name="movie" value="test1.swf?variable=valeur_variable " />
</object>

Si on a plusieurs variables à envoyer, il faut utiliser le séparateur & entre les 
variables.
<object type="application/x‐shockwave‐flash" data="test1.swf ?variable=valeur_variable&variable2=valeur_variable2 " 
width="550" height="400">
<param name="movie" value="test1.swf?variable=valeur_variable&variable2=valeur_variable2 " />
</object>
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 : 
<object type="application/x‐shockwave‐flash" data="test1.swf?ma_variable=src " width="550" height="400">
<param name="movie" value="test1.swf?ma_variable=src" />
</object>

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 : 
<object type="application/x‐shockwave‐flash" data="test1.swf?rot=30&trans=50 " width="550" height="400">
<param name="movie" value="test1.swf?rot=30&trans=50" />
</object>

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; // Récupère la position de départ
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.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 += 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;
}
}