The frame rate is the speed at which an animation is played. It is measured in the number of frames displayed per second. In ActionScript 3 we are now able to dynamically change the frame rate directly from our actions panel. In this tutorial I’ll show you how to change the frame rate directly in your AS panel with a very simple example.

Note: You can change the FPS setting in the Document Properties dialog box or at the bottom of the Timeline using the hot text next to fps.

Step 1: Create a new Flash movie with the ActionScript version set to 3.0. The background color, frame rate and the stage size do not matter for this tutorial.

Step 2: Create one new layer, so you will have two layers. Then name the one at the bottom FPS and the one on top Actions.

Step 3: Now, select the FPS layer and and draw a rectangle using Rectangle Tool (R).

Step 4: Use the Select Tool (V) and select the rectangle. Now Press F8 on your keyword to convert it to a symbol. Set the name of  the symbol to Rectangle and the symbol type to Movie Clip.

Step 5: We need to set an Instance Name for our symbol so we can easily refer to it using ActionScript. Use the Select Tool (V) and select the symbol, access the Properties Inspector and set MyRec as the instance name of your symbol.

Step 6: Now we need two buttons on the stage so we can increase or decrease the frame rate. As for the buttons we will use simple rectangles, so use the Rectangle Tool (R) and draw two rectangles on the stage.

Step 7: Use the Text Tool (T) to add simple static text boxes and write ”+” and “-” on the rectangles.

Step 8: Use the Select Tool (V) and select the left rectangle and the text box on it, press F8 on your keyword to convert it to a symbol. Set the name of the symbol to Button1 and the symbol type to Movie Clip. Do exactly the same for the right rectangle and the text box on it just set the name of the symbol to Button2.

Step 9: We need to set an Instance Name for our new symbols so we can easily refer to it using ActionScript. Use the Select Tool (V) and select the left symbol, button1, access the Properties Inspector and set LButton as the instance name of the symbol. Do exactly the same for right symbol, button2, and set RButton as the instance name.

Step 10: Click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open Actions panel.

Step 11: Copy and paste this code to your Actions panel.

stage.addEventListener(Event.ENTER_FRAME, RotateMyRec);
LButton.addEventListener(MouseEvent.CLICK, decrease);
RButton.addEventListener(MouseEvent.CLICK, increase);

function RotateMyRec(event:Event):void {
 MyRec.rotation++;
}
function increase(event:MouseEvent):void {
 stage.frameRate++;
}
function decrease(event:MouseEvent):void {
 stage.frameRate–;
}

Note: We have used stage.frameRate to increase or decrease the frame rate.

That’s it, We are done. You can now test your movie (Ctrl+Enter) !

Downloads:

Flash CS3: Frame Rate :: AS3

Flash CS4: Frame Rate :: AS3

3 Responses to “AS3: How to change the Frame rate”

1. Polprav says:

   October 16, 2009 at 3:15 pm

   Hello from Russia!
   Can I quote a post in your blog with the link to you?
2. admin says:

   October 16, 2009 at 4:11 pm

   Hi !
   Sure, why not .
3. Freeman says:

   June 16, 2010 at 1:18 pm

   Добрый день! thomas@sotkashop.ru” rel=”nofollow”>……

   С уважением,…