1

Comment programmer les animations Flash en ActionScript3.0 (ou AS3.0)

Jean-Paul StromboniSI4, 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

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)

3

Comment associer une classe AS3.0 à une animation ou à un MovieClip (Clip)

éditer

éditer

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

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 …

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é

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 clipc.stop(); // stop on first framec.x = x*cardHorizontalSpacing+boardOffsetX; // set positionc.y = ……addChild(c);

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 scoregameScoreField = new TextField();addChild (gameScoreField);gameScore = 0;showGameScore();

// et il faut définirpublic 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().

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 …

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 0container.addChildAt(disque2, 0);

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’

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

13

Détecter les collisions (CollisionDetection.fla)

addEventListener(Event.ENTER_FRAME, checkCollision);function checkCollision(event:Event) {

// check the cursor location against the crescentif (crescent.hitTestPoint(mouseX, mouseY, true)) { messageText1.text = "hitTestPoint: YES";} else {

messageText1.text = "hitTestPoint: NO";}// move star with mousestar.x = mouseX;star.y = mouseY;// test star versus crescentif (star.hitTestObject(crescent)) { messageText2.text = "hitTestObject: YES";} else { messageText2.text = "hitTestObject: NO";}

}

14

Utiliser la souris (MouseInput.fla)

// create a text field to show mouse locationvar mouseLocText:TextField = new TextField();mouseLocText.selectable = false;addChild(mouseLocText);

// update mouse locationaddEventListener(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 rollovermySprite.addEventListener(MouseEvent.ROLL_OVER, rolloverSprite);function rolloverSprite(event:MouseEvent) { mySprite.alpha = 1;}

// change alpha to .5 on rolloutmySprite.addEventListener(MouseEvent.ROLL_OUT, rolloutSprite);function rolloutSprite(event:MouseEvent) { mySprite.alpha = .5;}

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 listenersstage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressedDown);stage.addEventListener(KeyboardEvent.KEY_UP, keyPressedUp);stage.addEventListener(Event.ENTER_FRAME, moveMascot);// set arrow variables to truefunction 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 falsefunction 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 framefunction 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;}

}

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();

17

Jouer des sons (PlayingSounds.fla)// set up buttonsbutton1.addEventListener(MouseEvent.CLICK, playLibrarySound);button2.addEventListener(MouseEvent.CLICK, playExternalSound);

// load external sound so it is readyvar 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();

}

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);

}

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 ?

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

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; //variablesprivate var flipBackTimer:Timer; // timer to return cards to face-downvar theFirstCardSound:FirstCardSound = new FirstCardSound(); // set up sounds…// initialization functionpublic function MatchingGameObject10():void { // constructeur de la classe… }

public function playSound(soundObject:Object) {var channel:SoundChannel = soundObject.play(); }

}}

22

le constructeur de la classe MatchingGame10

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

24

Comment écrire une classe ActionScript3.0

• Card10.as