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.

Présentation au sujet: "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."— Transcription de la présentation:

1 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 linteractivité 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 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 dextension.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 3 Comment associer une classe AS3.0 à une animation ou à un MovieClip (Clip) éditer

4 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 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 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 loccurrence playButton dun bouton : playButton.addEventListener(MouseEvent.CLICK,startGame); function startGame(event:MouseEvent) { gotoAndStop("playgame"); } –loccurrence flipBackTimer dun 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 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);

8 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 9 Gérer lempilement 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 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 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 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 lhorloge de lordinateur 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 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 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 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 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 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 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 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 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 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 22 le constructeur de la classe MatchingGame10

23 23 Utiliser la technique "du symbole unique" les 18 cartes de MatchingGame sont réunies dans un clip unique nommé Card10, cest 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 lanimation lors du retournement des cartes

24 24 Comment écrire une classe ActionScript3.0 Card10.as