1 Flash Actionscript Animation

2 Introduction to Sprites We will now look at implementing Sprites in Flash. We should know enough after this to create our own games. Sprites in Flash are screen-based objects whose behaviour and actions are controlled by dedicated code that is integral to itself. In other words, the sprite is responsible for looking after itself.

3 Introduction to Sprites The sprite should be able to do three basic things of its own accord: 1. Move - move around in an intelligent way and know if it’s moving into areas where it shouldn’t be. We will handle all of this by altering movie clip properties. 2. Detect Collisions - there is a method associated with movie clips which can detect collisions for us. 3. Act Independently - Sprite should take care of its own behaviour without interference from the main program.

4 Controlling Movement There are a number of issues we need to consider when dealing with sprites. Start with control. This implies simulating intelligence and giving the impression that the sprite is aware of what’s going on around it. We do this by attaching behaviours to the sprite. This means that the sprite has characteristics associated with it that govern its behaviour. So for example the behaviour associated with the ball in Pong might simply be ‘keep moving in associated direction’.

5 Controlling Movement We would need to make this a little more complex in order to handle bouncing off walls. The important point is that the sprite controls its own behaviour. It is NOT the case that the game controls the sprite.

6 Controlling Movement The basic mode of operation of a sprite is something like this: 1. Set my movement as per my behaviour. 2. Check whether I’m breaking any rules. 3. If I’m breaking a rule, modify my behaviour as per the rules of my environment, otherwise move me as per my behaviour. 4. Go back to 1.

7 Controlling Movement In the case of the ball in Pong then breaking a rule might involve hitting the side wall in which case the consequent modification of behaviour would be to change the direction of the sprite. Let’s have a go at implementing something like this:

8 Controlling Movement 1. Open a new movie. Create a graphic symbol called circle. Create a new movie clip symbol called bouncing and drag an instance of circle into it (use the info panel to make sure that this is centered at (0,0). 2. Insert a new layer to the movie clip called actions. This should contain three key frames which have the following pieces of ActionScript associated with them. Frame 1: var xMove:Number=Math.floor((Math.random()*20)-10); var yMove:Number=Math.floor((Math.random()*20)-10); Frame 2: this.x += xMove; this.y += yMove; if(this.x<0) { xMove = 0 - xMove; this.x=0; } else if (this.x >= 550) { xMove = 0 - xMove; this.x = 550; }

9 Controlling Movement else if(this.y<0) { yMove = 0 - yMove; this.y=0; } else if (this.y >= 400) { yMove = 0 - yMove; this.y = 400; } Frame 3 gotoAndPlay(2); 3. Drag one or more instances of this onto the stage and test it.

10 Controlling Movement What’s happening here? The first frame sets up two variables xMove and yMove and sets them both to a random value between -10 and +10. Math.floor() rounds our number down to the closest integer. Math.random() retrieves a random float between 0 and 0.999…

11 Controlling Movement The second frame does two things. It adds xMove and yMove to the position of the ball. So suppose xMove was -5 and yMove was 10. Then it moves the ball 5 units to the left and 10 units down. It then checks the position of the ball to see if it has moved off the screen. If it has done so it changes the sign of xMove or yMove as appropriate. Where do the figures 400 and 550 come from => default size for the movie. Can change this.

12 Controlling Movement We could also get the main movie to generate the instances with a loop. Go to the main timeline, delete all instances of the movie clip except for one. Give it the instance name ball. Right click on the bouncing symbol in the Library and choose Linkage. Check ‘Export for Actionscript’. Then insert the following code into frame one of the main timeline.

13 Controlling Movement var counter:int = 10 while (counter>0) { var newBouncing = new bouncing(); addChild(newBouncing); newBouncing.x = ball.x; newBouncing.y = ball.y; counter--; } stop();

14 Controlling Movement What if we want to have a bat which the user controls and can use to bounce balls back up the screen? Well the first thing to do is to fix things so that when a ball falls off the bottom of the screen it doesn’t bounce back up.

15 Controlling Movement We already have a segment of code which detects if the ball hits the bottom (this is attached to the second frame of the bouncing symbol). This just reverses its direction. We want to take it out of the game. So replace it with the following code... else if(this.y>400) { ymove = 0 - ymove; this.y=400; }

16 Controlling Movement Now the next step might be to make a bat. This will simply be a movie symbol which will follow the mouse horizontally across the stage. (We have done one of these already). else if (this.y>400){ this.y=450; stop(); }

17 Controlling Movement Do this by creating a graphic symbol (called e.g. bat) then creating a new movie clip symbol (called e.g. movingBat), dragging an instance of bat onto the movie clip stage (positioning at 0,0). Then click onto Scene 1 and drag an instance of the movie clip movingBat into an appropriate position. Call the instance myBat. Then add some ActionScript to move myBat...

18 Controlling Movement Attach this to the first frame of the movie clip symbol movingBat. Add a keyframe at frame 2 and put this code in it this.x = root.mouseX; gotoAndPlay(1);

19 Controlling Movement We now need to get the balls to bounce off the bat. In order to do this we are going to use the hitTestObject() method. This is a method attached to all movie clips where we can test if the movieClip has hit another movieClip. We want to get each ball to test if it has hit the bat.

20 Controlling Movement So as it stands the ball tests if it has hit the top wall, the left wall, the right wall, the bottom. We simply add another else if to test if it has hit the bat as follows: else if (this.hitTestObject(MovieClip(parent).myBat)) { ymove=0-ymove; }

21 Exercise 1. Make it so the balls speed up as the game progresses. 2. Change it so that we have four bats on each side of the screen (all controlled by the mouse position). We can only keep balls in play by hitting them with the bats.

22 Firing Bullets What if we want to have a spaceship which fires bullets up the screen? We are going to need two movieclip objects 1. A ship symbol 2. A bullet symbol We can set up the ship symbol in much the same way as the bat in the previous example i.e. it moves horizontally. In this case we will set it so that it moves horizontally using the arrow keys. Suppose we have created an instance of a movieclip symbol which contains a graphic of a ship and placed it on the stage. We create three keyframes and attach the following ActionScript to the movie clip symbol.

23 Firing Bullets Frame 1 Position of Spaceship Set Speed this.x = 235; this.y = 320; var speed:int = 10;

24 Firing Bullets Frame 2 function moveShip(event:KeyboardEvent):void { if ((event.keyCode == Keyboard.LEFT) && (this.x > 0)) { this.x -= speed; } if ((event.keyCode == Keyboard.RIGHT) && (this.x < 520)){ this.x += speed; } stage.addEventListener(KeyboardEvent.KEY_DOWN, moveShip);

25 Firing Bullets This creates a function moveShip to respond to any key being pressed. Each key has a code associated with it. This can be a constant (LEFT, RIGHT…) or a number. If we hit the left arrow key and we are still on the screen we decrease the x coordinate by some fixed amount. If we hit the right arrow key and we are still on the screen we increase the x coordinate by some fixed amount. In the third frame just place some code to jump back to the second one.

26 Firing Bullets So how do we do the bullet? Create a graphic symbol called bullet. Create a movieClip symbol called movingBullet and place bullet at (0,0). When the user presses the spacebar we position movingBullet on the screen at the ship and start it moving upwards. When the bullet has reached the top of the screen we can just position it off the screen somewhere so it is not visible.

27 Firing Bullets This is done when the user presses the spacebar. We attach this action to the ship. So the ship’s code looks like: if (user presses left key) move ship left; if (user presses right key) move ship right; if (user presses space bar) create the bullet; position the bullet on the screen;

28 Firing Bullets So we get: function moveShip(event:KeyboardEvent):void { if ((event.keyCode == Keyboard.LEFT) && (this.x > 0)) { this.x -= speed; } if ((event.keyCode == Keyboard.RIGHT) && (this.x < 520)){ this.x += speed; } if (event.keyCode == Keyboard.SPACE){ var newBullet:MovieClip = new movingBullet(); parent.addChild(newBullet); newBullet.x=this.x; newBullet.y=this.y; }

29 Firing Bullets Remember to set your Linkage Property for movingBullet to Export for Actionscript. Every time the user hits the spacebar Flash creates a new instance of movingBullet and places it on the screen at the same place as the Ship. Now we need to get the bullet moving…

30 Firing Bullets Frame 1 Frame 2 Position off the screen if it’s at < 0 this.y -= 10; if(this.y < 0) { this.y = -100; } gotoAndPlay(1); Move the bullet up 10 pixels

31 Exercises Add another movie clip/sprite to this. This sprite should be some sort of object which moves horizontally across the top of the screen, back and forth. Use the hitTestObject() method to figure out if the bullet hits it. If so get it to disappear or make a sound or jump to another frame and stop or something !