Sunday, 19 May 2013

ActionScript 3.0 Pause Timeline

The Code below can be used to pause the Timeline on a Flash Keyframe. This can come in handy if you need to pause the timeline for a certain time duration.


Say for example you are creating an Image Gallery. Apart from the usual next, previous buttons and other navigational elements you would also want the slideshow to auto play. You can make use of the below code to achieve this.

// function to pause timeline

function pauseClips(secs:int, myClip:MovieClip):void 

var interval:int = secs; 
var myTimer:Timer = new Timer(interval*1000,0); myTimer.addEventListener(TimerEvent.TIMER, goNextFrm); 
myTimer.start(); 
function goNextFrm(evt:TimerEvent):void 

myClip.nextFrame(); 
myTimer.removeEventListener(TimerEvent.TIMER, goNextFrm); } 
}

Explanation of the above function

function pauseClips(secs:int, myClip:MovieClip):void 

}

A function by the name of pauseClips is being defined with secs and myClip as its parameters. The first parameter is the number of seconds in integers and the second one with datatype MovieClip. This can be a reference to the main timeline or the timeline of any movieclip symbol.

var interval:int = secs;

A variable is defined by the name of interval and the parameter value of secs is passed on to the variable.

var myTimer:Timer = new Timer(interval*1000,0); myTimer.addEventListener(TimerEvent.EVENT, goNextFrm); 
myTimer.start();

A Timer variable is created and given an interval of interval*1000 which means for example if the user has specified a value of 2 the pause will be for 2 secs. The second parameter 0 says that the interval will run just once.  You can change this as per your requirement.
A TimerEvent Listener is added with the goNextFrm function executed. A Timer start event is executed in the next line.               

function goNextFrm(evt:TimerEvent):void 

myClip.nextFrame(); myTimer.removeEventListener(TimerEvent.TIMER,goNextFrm); 
}

This function is executed after a certain time duration specified by the user. For example, if the user specifies 2 secs this function is executed after 2 secs. The script in the function tells the timeline to go to the nextFrame() after 2 secs. You can write any action to be executed. For example, after a certain time frame you can ask a certain url to be loaded. After the action is executed removeEventListener function is called to remove the goNextFrm function.
How to use this function
Write this function in the 1st keyframe of the timeline. Calling this function is very easy. This is how it is done:
If you want to pause the timeline in 5th keyframe for 2 secs call the function as below

pauseClips(2, this);

If you want to pause the timeline on a particular movieclip’s timeline call the function as follows:

Movieclip.pauseClips(5,this);

The pauseTimeline function can also be modified to make it move to a particular keyframe. Below is the code for the same. Code changes are shown in bold.
// function to pause timeline on a particular label
function pauseClipsLabel(secs:int, myClip:MovieClip, myLabel:String):void
{
                var interval:int = secs;
                var myTimer:Timer = new Timer(interval*1000,0);
                myTimer.addEventListener(TimerEvent.TIMER, goNextFrm);
                myTimer.start();
                function goNextFrm(evt:TimerEvent):void
                {
                               myClip.gotoAndStop(myLabel);
                              myTimer.removeEventListener(TimerEvent.TIMER, goNextFrm);      
                }
}

You can also create a class file with the same script. Create a new Actionscript file. Name it as PauseFrame.as. Copy the below code in it.

package
{
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.utils.Timer;
   
    /**
     * ...
     * @author shrikant
     */
    public class PauseFrame extends MovieClip
    {
        private var _interval:int;
        private var _myTimer:Timer;
        public var secs:int;
        public var myClip:MovieClip;
        public function PauseFrame()
        {
            // constructor code
            addEventListener(Event.ADDED_TO_STAGE, addedToStage);
        }
       
        public function addedToStage(evt:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
        }
       
public function pauseClips(secs, myClip):void
        {
            myClip.stop();
            _interval = secs;
            _myTimer = new Timer(_interval * 1000, 0);
            _myTimer.addEventListener(TimerEvent.TIMER, goNextFrm);
            _myTimer.start();
           
            function goNextFrm(evt:TimerEvent):void
            {
                myClip.nextFrame();
                                _myTimer.removeEventListener(TimerEvent.TIMER, goNextFrm);
            }
        }
    }
}

To use this script in Flash file first link the flash file to the class file. Say for example if this class file is saved in classes folder. Your link in the flash file would be ./classes. Do this in ActionScript settings. Screenshot is shown below.
 

 

Once done to use this script type the below code on the timeline in which you want to pause.

import PauseFrame;

stop();

var pauThis:PauseFrame = new PauseFrame();
addChild(pauThis);

pauThis.pauseClips(5, this);

This will pause the timeline for 5 seconds and move to the next keyframe.

No comments:

Post a Comment