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

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

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

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

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 0 container.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 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"; } }

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

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

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

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

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