Transcript ProgrammerenAS3.0
Slide 1
Comment programmer les animations
Flash en ActionScript3.0 (ou AS3.0)
Jean-Paul Stromboni
SI4, Infographie cours Flash n°2, mai 2011
Objectif : montrer comment on peut programmer l’interactivité
des animations Flash en ActionScript3.0 (AS3.0)
À partir des exemples tirés du chapitre Game Elements de :
ActionScript3 pour les jeux,
de Gary Rosenzweig, chez PEARSON
1
Slide 2
Où placer les scripts en AS3.0 ?
• dans les images clés du scénario,
– avec le panneau Actions (F9),
– ou depuis un fichier .as extérieur #include "toto.as"
• plus du tout dans les symboles (comme dans AS1.0)
• plus dans les occurrences (comme dans AS2.0)
• dans des classes écrites en ActionScript3.0 : placées dans des
fichiers extérieurs d’extension .as, ces classes sont construites lors
de la création du clip ou de l'animation :
– associées à l'animation (e.g. le fichier MatchingGame5.as, associé à
l'animationMatchingGame5.fla)
– associées aux symboles tels le movieClip (cf. Card10.as, associé au
Clip Card10 dans MatchingGame10.fla)
2
Slide 3
Comment associer une classe AS3.0 à une
animation ou à un MovieClip (Clip)
éditer
éditer
3
Slide 4
les types en ActionScript3.0
• vous pouvez utiliser les types de base comme suit :
– var nom:type= valeur;
•
•
•
•
Number
int, uint
Boolean
String
• vous pouvez créer des instances des symboles et classes fournis
–
–
–
–
var monClip:MovieClip=new MovieClip();
SimpleButton
TextField
Timer, Sprite, Sound …
• vous pouvez créer des instances (occurrences) des symboles que
vous avez définis sous la condition de les avoir exportés pour
ActionScript (panneaux Liaisons ou Propriétés):
– var c:Card10 = new Card10(); // cf. plus loin
4
Slide 5
Spécifier propriétés et méthodes :
• Avant AS3.0, les noms des propriétés débutaient par ‘_’ : _x, _y …
• En AS3, voici quelques propriétés et méthodes du Clip :
– Propriétés :
•
•
•
•
•
x,y
scaleX, scaleY
visibility,
height, width,
alpha, …
– Méthodes :
• addEventListener(),
• gotoAndPlay(), gotoAndStop()
• addChild(), …
• Truc utile: saisir toto_mc. liste les extensions possibles pour le Clip,
idem, avec _btn pour les boutons, _txt pour les textes, …
• sinon, utiliser l'aide sur MovieClip, TextField, SimpleButton, etc …
5
Slide 6
Détecter et traiter les évènements en AS3.0:
addEventListener(event, method)
• addEventListener (event, method) installe un listener sur :
– les évènements de la souris sur l’occurrence ‘playButton’ d’un bouton :
playButton.addEventListener(MouseEvent.CLICK,startGame);
function startGame(event:MouseEvent) {
gotoAndStop("playgame");
}
– l’occurrence ‘flipBackTimer’ d’un temporisateur (timer)
flipBackTimer = new Timer(2000,1);
flipBackTimer.addEventListener(TimerEvent.TIMER_COMPLETE,returnCards);
flipBackTimer.start();
…
function (returnCards) { … }
– …
• Ne pas oublier que ‘removeEventListener(event, method)’ efface le
listener précédemment installé
6
Slide 7
comment AS3.0 contrôle les occurrences
Deux possibilités :
1. Depuis une image clé : on utilise le nom d'occurrence fixé dans le
panneau Propriétés. Par exemple :
var gameScore:int;
var gameTime:String;
playButton.addEventListener(MouseEvent.CLICK,startGame);
function startGame(event:MouseEvent) {
gotoAndStop("playgame");
}
stop();
2.
Depuis une classe Action Script : avec le nom de variable fixé lors de la
création, par exemple dans Card10.as, pour créer et disposer la carte c
var c:Card10 = new Card10(); // copy the movie clip
c.stop(); // stop on first frame
c.x = x*cardHorizontalSpacing+boardOffsetX; // set position
c.y = …
…
addChild(c);
7
Slide 8
Créer et afficher une occurrence de texte
• exemple, création d'un champ de texte dynamique pour afficher le
score (dans MatchingGame10.as du même ouvrage) :
private var gameScoreField:TextField;
// set up the score
gameScoreField = new TextField();
addChild (gameScoreField);
gameScore = 0;
showGameScore();
// et il faut définir
public function showGameScore() {
gameScoreField.text = "Score: "+String(gameScore);
}
• C'est une nouveauté d'AS3, toute occurrence créée est ajoutée
dans la liste d'affichage (Display List) par la méthode addChild().
8
Slide 9
Gérer l’empilement des calques avec addChild()
• la méthode addChild(objet) rajoute un objet sur la pile des objets
déjà affichés, et incrémente un index :
– index=0 : racine de l'animation
– index >0 -> empilé au dessus de la racine
var disque1:Shape= new Shape();
disque1.graphics.beginFill(0xff0000,1);
disque1.graphics.drawCircle(50,50,40);
addChild(disque1);
• addChildAt(object, i), place 'object' au niveau i
• removeChild(objet) supprime l'objet de la liste
removeChild(disque1);
• chaque objet possède sa propre liste d'affichage, tel le Sprite …
9
Slide 10
Sprite est une nouvelle classe d'AS3.0, c'est un
Clip réduit à une image qui sert de container.
var container:Sprite=new Sprite();
container.graphics.beginFill(0xffcc00,1);
container.graphics.drawRect(0,0,300,200);
var disque1:Shape= new Shape();
disque1.graphics.beginFill(0xff0000,1);
disque1.graphics.drawCircle(50,50,40);
var disque2:Shape= new Shape();
disque2.graphics.beginFill(0x00ff00,1);
disque2.graphics.drawCircle(70,70,40);
var disque3:Shape= new Shape();
disque3.graphics.beginFill(0x0000ff,1);
disque3.graphics.drawCircle(90,90,40);
addChild(container);
container.addChild(disque1);
container.addChild(disque2);
container.addChild(disque3);
container.x+=50;
container.y+=75;
// si on modifie une ligne, le disque vert
// est affiché au niveau 0
container.addChildAt(disque2, 0);
10
Slide 11
Créer un moteur d'animation (MoteurAnimation.fla)
•
un moteur d'animation est une fonction exécutée à chaque
nouvelle image, par exemple pour déplacer un objet :
var hero:Hero = new Hero();
hero.x=50; hero.y=200;
addChild(hero); // affichage de hero
addEventListener(Event.ENTER_FRAME,animerHero);
function animerHero (event:Event) {
hero.x++;
hero.gotoAndStop(hero.currentFrame+1);
if (hero.currentFrame==hero.totalFrames) hero.gotoAndStop(1);
}
•
‘hero’ est une instance de la classe Hero,
mais pour cela, le Clip Hero doit avoir été
‘exporté pour ActionScript’
11
Slide 12
Utiliser le temps (TimeBasedAnimation.fla)
• parfois, l'animation nécessite de respecter précisément
l'écoulement du temps. Or, la cadence des images est
imprécise (multitâche). On utilise alors l’horloge de
l’ordinateur avec la fonction getTimer(). Par exemple :
var lastTime:int = getTimer();
addEventListener(Event.ENTER_FRAME, animateBall);
function animateBall(event:Event){
var timeDiff:int=getTimer()-lastTime;
lastTime += timeDiff;
ball.x += timeDiff*.1;
}
• voir également PhysicsBasedAnimation.fla
12
Slide 13
Détecter les collisions (CollisionDetection.fla)
addEventListener(Event.ENTER_FRAME, checkCollision);
function checkCollision(event:Event) {
// check the cursor location against the crescent
if (crescent.hitTestPoint(mouseX, mouseY, true)) {
messageText1.text = "hitTestPoint: YES";
} else {
messageText1.text = "hitTestPoint: NO";
}
// move star with mouse
star.x = mouseX;
star.y = mouseY;
// test star versus crescent
if (star.hitTestObject(crescent)) {
messageText2.text = "hitTestObject: YES";
} else {
messageText2.text = "hitTestObject: NO";
}
}
13
Slide 14
Utiliser la souris (MouseInput.fla)
// create a text field to show mouse location
var mouseLocText:TextField = new TextField();
mouseLocText.selectable = false;
addChild(mouseLocText);
// update mouse location
addEventListener(Event.ENTER_FRAME, showMouseLoc);
function showMouseLoc(event:Event) {
mouseLocText.text = "X="+mouseX+" Y="+mouseY; }
// create a new sprite mySprite with a circle drawn
…
// change alpha to 1 on rollover
mySprite.addEventListener(MouseEvent.ROLL_OVER, rolloverSprite);
function rolloverSprite(event:MouseEvent) { mySprite.alpha = 1;}
// change alpha to .5 on rollout
mySprite.addEventListener(MouseEvent.ROLL_OUT, rolloutSprite);
function rolloutSprite(event:MouseEvent) { mySprite.alpha = .5;}
14
Slide 15
Déplacer un clip avec le clavier (MoveSprite.fla)
var leftArrow:Boolean = false;
var rightArrow:Boolean = false;
var upArrow:Boolean = false;
var downArrow:Boolean = false;
// set event listeners
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressedDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyPressedUp);
stage.addEventListener(Event.ENTER_FRAME, moveMascot);
// set arrow variables to true
function keyPressedDown(event:KeyboardEvent) {
if (event.keyCode == 37) {
leftArrow = true;
} else if (event.keyCode == 39) {
rightArrow = true;
} else if (event.keyCode == 38) {
upArrow = true;
} else if (event.keyCode == 40) {
downArrow = true;
}
}
// set arrow variables to false
function keyPressedUp(event:KeyboardEvent) {
if (event.keyCode == 37) {
leftArrow = false;
} else if (event.keyCode == 39) {
rightArrow = false;
} else if (event.keyCode == 38) {
upArrow = false;
} else if (event.keyCode == 40) {
downArrow = false;
}
}
// move every frame
function moveMascot(event:Event) {
var speed:Number = 5;
if (leftArrow) {
mascot.x -= speed;
}
if (rightArrow) {
mascot.x += speed;
}
if (upArrow) {
mascot.y -= speed;
}
if (downArrow) {
mascot.y += speed;
}
}
15
Slide 16
Synchroniser un clip et un timer (UsingTimers2.fla)
• Hero est un clip qui contient 8 images
• Ce script placé dans l'image 1 fait marcher Hero à l'aide d'un Timer
var hero:Hero = new Hero();
hero.x = 100;
hero.y = 200;
addChild(hero);
var heroTimer:Timer = new Timer(80);
heroTimer.addEventListener(TimerEvent.TIMER, animateHero);
function animateHero(event:Event) {
hero.x += 7;
if (hero.currentFrame == 8) {
hero.gotoAndStop(2);
} else {
hero.gotoAndStop(hero.currentFrame+1);
}
}
heroTimer.start();
16
Slide 17
Jouer des sons (PlayingSounds.fla)
// set up buttons
button1.addEventListener(MouseEvent.CLICK, playLibrarySound);
button2.addEventListener(MouseEvent.CLICK, playExternalSound);
// load external sound so it is ready
var sound2:Sound = new Sound();
var req:URLRequest = new URLRequest("PlayingSounds.mp3");
sound2.load(req);
function playLibrarySound(event:Event) {
var sound1:Sound1 = new Sound1();
var channel:SoundChannel = sound1.play();
}
function playExternalSound(event:Event) {
sound2.play();
}
17
Slide 18
utiliser une entrée textuelle (TextInput.fla)
var myInput:TextField = new TextField();
myInput.type = TextFieldType.INPUT;
myInput.defaultTextFormat = inputFormat;
myInput.x = 10;
myInput.y = 10;
myInput.height = 18;
myInput.width = 200;
myInput.border = true;
stage.focus = myInput;
addChild(myInput);
myInput.addEventListener(KeyboardEvent.KEY_UP, checkForReturn);
function checkForReturn(event:KeyboardEvent) {
if (event.charCode == 13) {
acceptInput();
}
}
function acceptInput() {
var theInputText:String = myInput.text;
trace(theInputText);
removeChild(myInput);
}
18
Slide 19
Scruter l'entrée clavier (KeyboardInput.fla)
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownFunction);
function keyDownFunction(event:KeyboardEvent) {
keyboardText.text = "Key Pressed"+String.fromCharCode(event.charCode);
if (event.charCode == 32) {
spacebarPressed = true;
spacebarText.text = "Spacebar is DOWN.";
}
}
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpFunction);
function keyUpFunction(event:KeyboardEvent) {
if (event.charCode == 32) {
spacebarPressed = false;
spacebarText.text = "Spacebar is UP.";
}
}
sous réserve de créer spaceBarText : comment ?
19
Slide 20
'Encapsuler’ une classe ActionScript
• l'animation MatchingGame5.fla :
– tient sur une image clé unique
– et est associée au script MatchingGame5.as qui définit et la classe du
même nom MatchingGame5
– le constructeur est exécuté lors de la création de l'animation,
• l'animation MatchingGame10.fla, par contre :
– tient sur trois images clés : ‘accueil’, ‘jeu’, et ‘gameover’
– et n'est pas associée à une classe Actionscript.
– mais le clip MatchingGame10 transparent dans l'image 2 est associé
à MatchingGame10.as et encapsule la classe MatchingGame10 qui
construit le jeu lors de son apparition à la deuxième image.
• autre technique : associer MatchingGame10.as à l'animation,
mais sans constructeur et avec une fonction startGame() qui sera
exécutée à l'image 2 pour construire le panneau de jeu
20
Slide 21
Exemple de la classe MatchingGame10
package [nomOptionnel] {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import flash.utils.getTimer;
import flash.utils.Timer;
import flash.media.Sound;
import flash.media.SoundChannel;
public class MatchingGameObject10 extends MovieClip {
private static const boardWidth:uint = 6;
private var gameScoreField:TextField;
private var firstCard:Card10; //variables
private var flipBackTimer:Timer; // timer to return cards to face-down
var theFirstCardSound:FirstCardSound = new FirstCardSound();
// set up sounds
…
// initialization function
public function MatchingGameObject10():void { // constructeur de la classe
… }
public function playSound(soundObject:Object) {
var channel:SoundChannel = soundObject.play(); }
}
}
21
Slide 22
le constructeur de la classe MatchingGame10
22
Slide 23
Utiliser la technique "du symbole unique"
• les 18 cartes de MatchingGame sont réunies dans un clip unique
nommé ‘Card10’, c’est la méthode du symbole unique.
• choisir une carte 'i' revient à faire gotoAndStop(i)
• on retrouve cette technique dans d'autres jeux, par exemple pour un
personnage dans un Role Playing Game (RPG) qui doit tour à tour
marcher, courir, frapper, nager …
• on stocke alors toutes ces actions dans un même clip (symbole
unique)
• La classe suivante associée au clip Card10 réalise l’animation lors
du retournement des cartes
23
Slide 24
Comment écrire une classe ActionScript3.0
• Card10.as
24
Comment programmer les animations
Flash en ActionScript3.0 (ou AS3.0)
Jean-Paul Stromboni
SI4, Infographie cours Flash n°2, mai 2011
Objectif : montrer comment on peut programmer l’interactivité
des animations Flash en ActionScript3.0 (AS3.0)
À partir des exemples tirés du chapitre Game Elements de :
ActionScript3 pour les jeux,
de Gary Rosenzweig, chez PEARSON
1
Slide 2
Où placer les scripts en AS3.0 ?
• dans les images clés du scénario,
– avec le panneau Actions (F9),
– ou depuis un fichier .as extérieur #include "toto.as"
• plus du tout dans les symboles (comme dans AS1.0)
• plus dans les occurrences (comme dans AS2.0)
• dans des classes écrites en ActionScript3.0 : placées dans des
fichiers extérieurs d’extension .as, ces classes sont construites lors
de la création du clip ou de l'animation :
– associées à l'animation (e.g. le fichier MatchingGame5.as, associé à
l'animationMatchingGame5.fla)
– associées aux symboles tels le movieClip (cf. Card10.as, associé au
Clip Card10 dans MatchingGame10.fla)
2
Slide 3
Comment associer une classe AS3.0 à une
animation ou à un MovieClip (Clip)
éditer
éditer
3
Slide 4
les types en ActionScript3.0
• vous pouvez utiliser les types de base comme suit :
– var nom:type= valeur;
•
•
•
•
Number
int, uint
Boolean
String
• vous pouvez créer des instances des symboles et classes fournis
–
–
–
–
var monClip:MovieClip=new MovieClip();
SimpleButton
TextField
Timer, Sprite, Sound …
• vous pouvez créer des instances (occurrences) des symboles que
vous avez définis sous la condition de les avoir exportés pour
ActionScript (panneaux Liaisons ou Propriétés):
– var c:Card10 = new Card10(); // cf. plus loin
4
Slide 5
Spécifier propriétés et méthodes :
• Avant AS3.0, les noms des propriétés débutaient par ‘_’ : _x, _y …
• En AS3, voici quelques propriétés et méthodes du Clip :
– Propriétés :
•
•
•
•
•
x,y
scaleX, scaleY
visibility,
height, width,
alpha, …
– Méthodes :
• addEventListener(),
• gotoAndPlay(), gotoAndStop()
• addChild(), …
• Truc utile: saisir toto_mc. liste les extensions possibles pour le Clip,
idem, avec _btn pour les boutons, _txt pour les textes, …
• sinon, utiliser l'aide sur MovieClip, TextField, SimpleButton, etc …
5
Slide 6
Détecter et traiter les évènements en AS3.0:
addEventListener(event, method)
• addEventListener (event, method) installe un listener sur :
– les évènements de la souris sur l’occurrence ‘playButton’ d’un bouton :
playButton.addEventListener(MouseEvent.CLICK,startGame);
function startGame(event:MouseEvent) {
gotoAndStop("playgame");
}
– l’occurrence ‘flipBackTimer’ d’un temporisateur (timer)
flipBackTimer = new Timer(2000,1);
flipBackTimer.addEventListener(TimerEvent.TIMER_COMPLETE,returnCards);
flipBackTimer.start();
…
function (returnCards) { … }
– …
• Ne pas oublier que ‘removeEventListener(event, method)’ efface le
listener précédemment installé
6
Slide 7
comment AS3.0 contrôle les occurrences
Deux possibilités :
1. Depuis une image clé : on utilise le nom d'occurrence fixé dans le
panneau Propriétés. Par exemple :
var gameScore:int;
var gameTime:String;
playButton.addEventListener(MouseEvent.CLICK,startGame);
function startGame(event:MouseEvent) {
gotoAndStop("playgame");
}
stop();
2.
Depuis une classe Action Script : avec le nom de variable fixé lors de la
création, par exemple dans Card10.as, pour créer et disposer la carte c
var c:Card10 = new Card10(); // copy the movie clip
c.stop(); // stop on first frame
c.x = x*cardHorizontalSpacing+boardOffsetX; // set position
c.y = …
…
addChild(c);
7
Slide 8
Créer et afficher une occurrence de texte
• exemple, création d'un champ de texte dynamique pour afficher le
score (dans MatchingGame10.as du même ouvrage) :
private var gameScoreField:TextField;
// set up the score
gameScoreField = new TextField();
addChild (gameScoreField);
gameScore = 0;
showGameScore();
// et il faut définir
public function showGameScore() {
gameScoreField.text = "Score: "+String(gameScore);
}
• C'est une nouveauté d'AS3, toute occurrence créée est ajoutée
dans la liste d'affichage (Display List) par la méthode addChild().
8
Slide 9
Gérer l’empilement des calques avec addChild()
• la méthode addChild(objet) rajoute un objet sur la pile des objets
déjà affichés, et incrémente un index :
– index=0 : racine de l'animation
– index >0 -> empilé au dessus de la racine
var disque1:Shape= new Shape();
disque1.graphics.beginFill(0xff0000,1);
disque1.graphics.drawCircle(50,50,40);
addChild(disque1);
• addChildAt(object, i), place 'object' au niveau i
• removeChild(objet) supprime l'objet de la liste
removeChild(disque1);
• chaque objet possède sa propre liste d'affichage, tel le Sprite …
9
Slide 10
Sprite est une nouvelle classe d'AS3.0, c'est un
Clip réduit à une image qui sert de container.
var container:Sprite=new Sprite();
container.graphics.beginFill(0xffcc00,1);
container.graphics.drawRect(0,0,300,200);
var disque1:Shape= new Shape();
disque1.graphics.beginFill(0xff0000,1);
disque1.graphics.drawCircle(50,50,40);
var disque2:Shape= new Shape();
disque2.graphics.beginFill(0x00ff00,1);
disque2.graphics.drawCircle(70,70,40);
var disque3:Shape= new Shape();
disque3.graphics.beginFill(0x0000ff,1);
disque3.graphics.drawCircle(90,90,40);
addChild(container);
container.addChild(disque1);
container.addChild(disque2);
container.addChild(disque3);
container.x+=50;
container.y+=75;
// si on modifie une ligne, le disque vert
// est affiché au niveau 0
container.addChildAt(disque2, 0);
10
Slide 11
Créer un moteur d'animation (MoteurAnimation.fla)
•
un moteur d'animation est une fonction exécutée à chaque
nouvelle image, par exemple pour déplacer un objet :
var hero:Hero = new Hero();
hero.x=50; hero.y=200;
addChild(hero); // affichage de hero
addEventListener(Event.ENTER_FRAME,animerHero);
function animerHero (event:Event) {
hero.x++;
hero.gotoAndStop(hero.currentFrame+1);
if (hero.currentFrame==hero.totalFrames) hero.gotoAndStop(1);
}
•
‘hero’ est une instance de la classe Hero,
mais pour cela, le Clip Hero doit avoir été
‘exporté pour ActionScript’
11
Slide 12
Utiliser le temps (TimeBasedAnimation.fla)
• parfois, l'animation nécessite de respecter précisément
l'écoulement du temps. Or, la cadence des images est
imprécise (multitâche). On utilise alors l’horloge de
l’ordinateur avec la fonction getTimer(). Par exemple :
var lastTime:int = getTimer();
addEventListener(Event.ENTER_FRAME, animateBall);
function animateBall(event:Event){
var timeDiff:int=getTimer()-lastTime;
lastTime += timeDiff;
ball.x += timeDiff*.1;
}
• voir également PhysicsBasedAnimation.fla
12
Slide 13
Détecter les collisions (CollisionDetection.fla)
addEventListener(Event.ENTER_FRAME, checkCollision);
function checkCollision(event:Event) {
// check the cursor location against the crescent
if (crescent.hitTestPoint(mouseX, mouseY, true)) {
messageText1.text = "hitTestPoint: YES";
} else {
messageText1.text = "hitTestPoint: NO";
}
// move star with mouse
star.x = mouseX;
star.y = mouseY;
// test star versus crescent
if (star.hitTestObject(crescent)) {
messageText2.text = "hitTestObject: YES";
} else {
messageText2.text = "hitTestObject: NO";
}
}
13
Slide 14
Utiliser la souris (MouseInput.fla)
// create a text field to show mouse location
var mouseLocText:TextField = new TextField();
mouseLocText.selectable = false;
addChild(mouseLocText);
// update mouse location
addEventListener(Event.ENTER_FRAME, showMouseLoc);
function showMouseLoc(event:Event) {
mouseLocText.text = "X="+mouseX+" Y="+mouseY; }
// create a new sprite mySprite with a circle drawn
…
// change alpha to 1 on rollover
mySprite.addEventListener(MouseEvent.ROLL_OVER, rolloverSprite);
function rolloverSprite(event:MouseEvent) { mySprite.alpha = 1;}
// change alpha to .5 on rollout
mySprite.addEventListener(MouseEvent.ROLL_OUT, rolloutSprite);
function rolloutSprite(event:MouseEvent) { mySprite.alpha = .5;}
14
Slide 15
Déplacer un clip avec le clavier (MoveSprite.fla)
var leftArrow:Boolean = false;
var rightArrow:Boolean = false;
var upArrow:Boolean = false;
var downArrow:Boolean = false;
// set event listeners
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressedDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyPressedUp);
stage.addEventListener(Event.ENTER_FRAME, moveMascot);
// set arrow variables to true
function keyPressedDown(event:KeyboardEvent) {
if (event.keyCode == 37) {
leftArrow = true;
} else if (event.keyCode == 39) {
rightArrow = true;
} else if (event.keyCode == 38) {
upArrow = true;
} else if (event.keyCode == 40) {
downArrow = true;
}
}
// set arrow variables to false
function keyPressedUp(event:KeyboardEvent) {
if (event.keyCode == 37) {
leftArrow = false;
} else if (event.keyCode == 39) {
rightArrow = false;
} else if (event.keyCode == 38) {
upArrow = false;
} else if (event.keyCode == 40) {
downArrow = false;
}
}
// move every frame
function moveMascot(event:Event) {
var speed:Number = 5;
if (leftArrow) {
mascot.x -= speed;
}
if (rightArrow) {
mascot.x += speed;
}
if (upArrow) {
mascot.y -= speed;
}
if (downArrow) {
mascot.y += speed;
}
}
15
Slide 16
Synchroniser un clip et un timer (UsingTimers2.fla)
• Hero est un clip qui contient 8 images
• Ce script placé dans l'image 1 fait marcher Hero à l'aide d'un Timer
var hero:Hero = new Hero();
hero.x = 100;
hero.y = 200;
addChild(hero);
var heroTimer:Timer = new Timer(80);
heroTimer.addEventListener(TimerEvent.TIMER, animateHero);
function animateHero(event:Event) {
hero.x += 7;
if (hero.currentFrame == 8) {
hero.gotoAndStop(2);
} else {
hero.gotoAndStop(hero.currentFrame+1);
}
}
heroTimer.start();
16
Slide 17
Jouer des sons (PlayingSounds.fla)
// set up buttons
button1.addEventListener(MouseEvent.CLICK, playLibrarySound);
button2.addEventListener(MouseEvent.CLICK, playExternalSound);
// load external sound so it is ready
var sound2:Sound = new Sound();
var req:URLRequest = new URLRequest("PlayingSounds.mp3");
sound2.load(req);
function playLibrarySound(event:Event) {
var sound1:Sound1 = new Sound1();
var channel:SoundChannel = sound1.play();
}
function playExternalSound(event:Event) {
sound2.play();
}
17
Slide 18
utiliser une entrée textuelle (TextInput.fla)
var myInput:TextField = new TextField();
myInput.type = TextFieldType.INPUT;
myInput.defaultTextFormat = inputFormat;
myInput.x = 10;
myInput.y = 10;
myInput.height = 18;
myInput.width = 200;
myInput.border = true;
stage.focus = myInput;
addChild(myInput);
myInput.addEventListener(KeyboardEvent.KEY_UP, checkForReturn);
function checkForReturn(event:KeyboardEvent) {
if (event.charCode == 13) {
acceptInput();
}
}
function acceptInput() {
var theInputText:String = myInput.text;
trace(theInputText);
removeChild(myInput);
}
18
Slide 19
Scruter l'entrée clavier (KeyboardInput.fla)
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownFunction);
function keyDownFunction(event:KeyboardEvent) {
keyboardText.text = "Key Pressed"+String.fromCharCode(event.charCode);
if (event.charCode == 32) {
spacebarPressed = true;
spacebarText.text = "Spacebar is DOWN.";
}
}
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpFunction);
function keyUpFunction(event:KeyboardEvent) {
if (event.charCode == 32) {
spacebarPressed = false;
spacebarText.text = "Spacebar is UP.";
}
}
sous réserve de créer spaceBarText : comment ?
19
Slide 20
'Encapsuler’ une classe ActionScript
• l'animation MatchingGame5.fla :
– tient sur une image clé unique
– et est associée au script MatchingGame5.as qui définit et la classe du
même nom MatchingGame5
– le constructeur est exécuté lors de la création de l'animation,
• l'animation MatchingGame10.fla, par contre :
– tient sur trois images clés : ‘accueil’, ‘jeu’, et ‘gameover’
– et n'est pas associée à une classe Actionscript.
– mais le clip MatchingGame10 transparent dans l'image 2 est associé
à MatchingGame10.as et encapsule la classe MatchingGame10 qui
construit le jeu lors de son apparition à la deuxième image.
• autre technique : associer MatchingGame10.as à l'animation,
mais sans constructeur et avec une fonction startGame() qui sera
exécutée à l'image 2 pour construire le panneau de jeu
20
Slide 21
Exemple de la classe MatchingGame10
package [nomOptionnel] {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import flash.utils.getTimer;
import flash.utils.Timer;
import flash.media.Sound;
import flash.media.SoundChannel;
public class MatchingGameObject10 extends MovieClip {
private static const boardWidth:uint = 6;
private var gameScoreField:TextField;
private var firstCard:Card10; //variables
private var flipBackTimer:Timer; // timer to return cards to face-down
var theFirstCardSound:FirstCardSound = new FirstCardSound();
// set up sounds
…
// initialization function
public function MatchingGameObject10():void { // constructeur de la classe
… }
public function playSound(soundObject:Object) {
var channel:SoundChannel = soundObject.play(); }
}
}
21
Slide 22
le constructeur de la classe MatchingGame10
22
Slide 23
Utiliser la technique "du symbole unique"
• les 18 cartes de MatchingGame sont réunies dans un clip unique
nommé ‘Card10’, c’est la méthode du symbole unique.
• choisir une carte 'i' revient à faire gotoAndStop(i)
• on retrouve cette technique dans d'autres jeux, par exemple pour un
personnage dans un Role Playing Game (RPG) qui doit tour à tour
marcher, courir, frapper, nager …
• on stocke alors toutes ces actions dans un même clip (symbole
unique)
• La classe suivante associée au clip Card10 réalise l’animation lors
du retournement des cartes
23
Slide 24
Comment écrire une classe ActionScript3.0
• Card10.as
24