Comment programmer les animations Flash en ActionScript3.0 (ou AS3.0)
description
Transcript of 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 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