This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Breadcrumbs: Timed Functions

Breadcrumbs: Timed Functions

In the days of Flash 5 timing calls to functions required complicated tweaks using the onClipEvent. Flash MX has improved on this by providing a method that calls your function on a set interval.

In this tutorial I'll explain the required and optional parameters for the setInterval function. I'll also develop a quick slideshow that combines Flash MX's dynamic JPEG loading abilities (see Dynamically Loading Images with Flash MX) with the setInterval method.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player



The setInterval method creates an event listener. Event listeners allow your code to respond to events by calling a specified function whenever the event occurs. In the case of our setInterval listener the event it listens for is a specific amount of milliseconds to elapse, once this happens it calls a user defined call back function.

 

setInterval( callBackFunctionName, interval [, param1, param2, ... paramn])



The setInterval method has two required parameters and unlimited optional parameters:
1. Call back function This required parameter is the function that will be called when the event occurs.
2. Interval A required parameter with the number of milliseconds to wait between calls.
3. Call back function parameters An unlimited set of parameters for the designated call back function.

Setting an Interval
In Flash MX create a new Flash file with three layers named actions and image. Now open the Action Script panel for the 1st frame of the actions layer.

//initialize slide show
if( init==null )
{
   var init = true; //sets the app as initilized
   var num = 0;  //The current image displayed
   var imageArray = new Array("http://www.jasonmperry.com/images/screenshot_building_a_ticker.jpg", "http://www.jasonmperry.com/images/screenshot_building_a_ticker2.jpg", "http://www.jasonmperry.com/images/screenshot_webservice.jpg", "http://www.jasonmperry.com/images/image_jason_headshot.jpg");
   stop();
}



On the actions layer we need to initialize our application. This code block will insure this operation is run only one time throughout the entire lifetime of our Flash application. Inside this block we need to create a holder for the current image being shown and an array of the images to show. Also, add a stop method to make sure our Flash app stays on Frame 1.

We now need to create a movie clip to hold our dynamic image. This will allow us to better position our image in regards to the slide show's frame. To do this create a movie clip object named mcImage and place it on the root.

//Shows the next image in array
function RotateImage()
{
   if( num >= imageArray.length )
   {
      num=0;
   }
   loadMovie( imageArray[ num ], "mcImage" );
   num++;
}



Next, we need to create a callback function named RotateImage to flip through our image array. This function will be called when an interval elapsed event occurs to check the current image being shown and determine if the next image exists in the imageArray. If an image exists it dynamically pulls that image into the mcImage movie clip and increments to the next image. If an image doesn't exist it sets the image to the first image in our array, 0.

Last, we need to add our setInterval method. This method should go within the init code block right before our stop method.

//Makes the initial call to the RotateImage function
RotateImage();
//creates a listner that calls event on this interval
setInterval( RotateImage, 5*1000 );



In this block we load our slideshow's first image by making an initial call to the RoateImage function. We also create our setInterval event listener to call our call back function every 5 seconds (1 second = 1000 milliseconds).

Test your movie and you'll see something similar to the above example. Also, feel free to download the example Flash file.

Conclusion
This example is the raw skeleton of a slideshow built with the setInterval method. With a little elbow grease this could allow the user to adjust the interval speed or add text that corresponds with each image.

More articles by Jason Michael Perry are available at his web site www.jasonmperry.com and the breadcrumbs archive. If you questions or comments you can also e-mail him at Jason@jasonmperry.com.

 

About Jason Michael Perry

Jason Michael Perry is a freelance instructor, developer, and writer. Please check out his new book Breadcrumbs: ActionScript 3 by Smart Ameba Publishing. If you have questions, a topic you would like covered, or more feel free to email him at jason@smartameba.com.

Get new stories first

Click to follow us on Twitter!

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register