2.3 Continuous Events

The main objective of this exercise it to learn how to use continuous events in Flash, so that we can create actions that repeat in time – for example, to create an animation by code.

1. First, some thought on continuous events. There are two main methods of creating continuous events in Flash – using Event.ENTER_FRAME and using the Timer class. Timer is more powerful, as you can control its frequency very precisely in milliseconds. It also provides methods to start and stop the timer, or only run it a certain number of times.

However, for simple tasks, Event.ENTER_FRAME might be useful, since it requires less code to set up. Event.ENTER_FRAME uses Flash built-in frame rate logic. Frame rate, expressed in frames per second (or fps), specifies the frequency per second something occurs (such as the speed of an animation). The default value in Flash is 15. For reference, in cinema it is usually 24, and in the PAL/SECAM system used in Europe it is 25. In Flash, we can change this in the Properties inspector or by code (which we will do).

2. Let’s now set up our exercise. First, let’s create a background, then we will create our main animation “character”. Let’s say that “character” is an UFO shaped object, which is very easy to draw – simply an ellipse and a circle together:

var myBackground:Shape = new Shape();
stage.addChild(myBackground);
myBackground.graphics.beginFill(0x00008B);
myBackground.graphics.drawRect(0,0, 550, 400);

var ufo:Shape = new Shape();
stage.addChild(ufo);
ufo.x=200;
ufo.y=150;
ufo.graphics.beginFill(0xCCCCCC);
ufo.graphics.drawCircle(0,5,25)
ufo.graphics.beginFill(0xBBBBBB);
ufo.graphics.drawEllipse(-50, 0, 100, 30)

3. Now, let’s add an event listener that will keep executing a function (which will animate our UFO). As we saw, we can use Event.ENTER_FRAME for that. The listener will trigger a function called “moveUFO”.

stage.addEventListener(Event.ENTER_FRAME, moveUFO);

4. We will now build out moveUFO function. To continuously move the ufo, let’s say in the horizontal axis, we simply need to keep adding or subtracting pixels to its x property. Let’s use +=5, that way, on frame rate, the ufo will move 5 pixels to the right. Frame rate right now is 15 fps, which means that, 15 times per second, the ufo will move 5 pixels to the right:

function moveUFO(e:Event):void{
ufo.x+=5;
}

5. However, we have a problem – the UFO disappears when it reaches the right edge of the screen. I’d like that it would keep moving as if in a loop, reappearing on the left edge after disappearing on the right. For that, I need a conditional, to check when the ufo’s x exceeds the right edge of the screen.

As we are using the default stage size, we know that this value is 550. But we might decide to resize the stage later, and the value would be outdated. Therefore, it would be wiser from now on to use properties that traces the present size of the stage: stage.stageWidth and stage.stageHeight. When ufo.x is bigger than stage.stageWidth, we’d reset ufo.x to 0. Let’s include that conditional in the moveUFO function, which would now look like this:

stage.addEventListener(Event.ENTER_FRAME, moveUFO);
function moveUFO(e:Event):void{
ufo.x+=5;
if(ufo.x>stage.stageWidth){
ufo.x=0;
}
}

6. One last touch: the animation is not moving as smoothly as I’d like. That’s because the default frame rate is quite low. We can bump it up by code, using the stage.frameRate property. Let’s set it to 60 fps:

stage.frameRate = 60;

7. The whole code now:

var myBackground:Shape = new Shape();
stage.addChild(myBackground);
myBackground.graphics.beginFill(0x00008B);
myBackground.graphics.drawRect(0,0, 550, 400);
var ufo:Shape = new Shape();
stage.addChild(ufo);
ufo.x=200;
ufo.y=150;
ufo.graphics.beginFill(0xCCCCCC);
ufo.graphics.drawCircle(0,5,25)
ufo.graphics.beginFill(0xBBBBBB);
ufo.graphics.drawEllipse(-50, 0, 100, 30)

stage.addEventListener(Event.ENTER_FRAME, moveUFO);
function moveUFO(e:Event):void{
ufo.x+=5;
if(ufo.x>stage.stageWidth){
ufo.x=0;
}
}
stage.frameRate = 60;

And the exercise should look like this:

Download files: ex9-continuous_event.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 2. Controlling Audiovisual Objects and tagged . Bookmark the permalink.

2 Responses to 2.3 Continuous Events

  1. Pingback: Teaching Designing Interaction with Electronics course | nuno correia .com

  2. Pingback: Flash and ActionScript | Software Studies for Media Designers

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s