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. 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 :
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 :
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>
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
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
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
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 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());
mon_clip_1.swapDepths(mon_clip_2);
trace("ECHANGE DE PROFONDEUR"); t
race("profondeur de mon_clip_1 :"+mon_clip_1.getDepth());
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);
};
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.
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");
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");
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
Dupliquer un clip:
Réponse :
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;
}
Dupliquer un clip:
Exemple 2 :
Duplique un clip 5 fois avec 120 pixels d’ espacement sur l’axe vertical
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;
}
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.
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;
Attacher un clip:
Exemple 2 : Duplique un clip à l’infini
var i:Number=0;
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
}
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
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();
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();
}
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
var i:Number=0;
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
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
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
var ma_couleur:ColorTransform = new ColorTransform();

ma_couleur.rgb = 0xFFFF00; //Couleur Jaune
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
//défini une couleur
ma_couleur.rgb = 0xFF0000;
// Transforme la couleur du clip
var ma_transformation:Transform = new Transform(mon_clip);
ma_transformation.colorTransform = ma_couleur;
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

Colorer un clip :
Réponse :
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
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
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)
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)
Exemple pour créer un carré
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
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
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();
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
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.endFill(); // applique le remplissage entre le 1er et le dernier point
Exercice :
‐ Dessiner une maison
‐ façade => carré
‐ toit => triangle
‐ soleil => rond
‐ ciel => courbe
‐ terre => courbe
Réponse : fichier=> maison.swf
Exemple pour dessiner avec la souris :
dessin.lineStyle(4, 0x000000, 100);
dessin.moveTo(0,0);
dessin.lineTo(_xmouse, _ymouse);
}
Exercice :
‐ Dessiner un trait au clic gauche sur la souris
‐ Arrêter de dessiner au relâchement du bouton de la souris
Réponse :
_root.createEmptyMovieClip('dessin', 1);
_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
dessin.lineTo(_xmouse, _ymouse); // Dessine à chaque image un trait
};
};
_root.onMouseUp = function() { // Au relâchement du bouton
_root.onEnterFrame = null; // Arrête le « onEnterFrame »
};
Exercice :
‐ Remplir le dessin au relâchement de la souris
Exemple pour dessiner et remplir le dessin quand on clique sur la souris :
_root.createEmptyMovieClip('dessin', 1);
_root.onMouseDown = function() {
dessin.moveTo(_xmouse, _ymouse);
dessin.beginFill(0xff0000,100);
dessin.lineTo(_xmouse, _ymouse);
};
};
_root.onMouseUp = function() {
dessin.endFill();
_root.onEnterFrame = null;
};
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.
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 é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.
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);
Maintenant avec 2 écouteurs :

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_bis);
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 :
trace("\t Code : "+Key.getCode());
trace("\t ASCII: "+Key.getAscii());
};
il faut penser à désactiver les raccourcis clavier pendant l’exportation
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
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
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
}
}
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
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 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
Voici maintenant 2 méthodes permettant de détecter l’appui sur la barre d’espace

if (Key.getAscii() == Key.SPACE) {
trace("Barre d'espace appuyée");
}
}

if (Key.isDown(Key.SPACE)) {
trace("Barre d'espace appuyée");
}
}
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
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();
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;
}
}
}
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
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
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
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
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
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
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
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
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
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
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
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
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
Maintenant, en utilisant la méthode précédente, adaptez le code pour qu’il s’effectue
sur les 4 points.
Les collisions
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;
}
}

Cours 2

Transféré par

Informations du document

Titre original

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

Cours 2

Transféré par

Droits d'auteur :

Formats disponibles

Flash : Action Script 2.

Créer une nouvelle animation flash contenant un clip nommé « mon_clip » à

variable_html.text = " Rotation = "+_root.rot+" Transparence = "+_root.trans;

_root.createEmptyMovieClip(« mon_clip_1 »,1);

//créer un fonction aléatoire

Afin utiliser les classes colortransform et transform incrustées dans le logiciel Flash, il

var ma_couleur:ColorTransform = new ColorTransform();

‐ Créer un clip nommé « mon_clip » et placé le sur la scène.

‐ Transformer la couleur de « mon_clip » en cliquant sur les boutons

var trans:Transform = new Transform(mon_clip); // affecte la transformation à « mon_clip »

Afin de remplir une forme, les méthodes « beginFill » et « endFill » doivent être

La méthode servant à créer les formes arrondies esr : « curveTo ». Elle se définit de la

var ecouteur_clavier:Object = new Object();

_root.balle.onEnterFrame = function() {

var ecouteur_clavier:Object = new Object();

var ecouteur_clavier:Object = new Object();

‐ Créez un clip nommé « barre » en bas de votre scène.

Maintenant, vous allez créer un cercle que vous nommerez « obstacle_cercle » et vous

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

var un_point:Object = new Object();

for (i=1; i<=4; i++) { // Boucle de 1 à 4 compris

Vous aimerez peut-être aussi