A introduction to timers
|Flash11 (CS5) | Flash10 (CS4) <|
|Table of contents|
By the end of this page you will be able to:
Create a new Actionscript 3 file and save it as timer_example. Create a rectangular button and place this in the bottom center of the stage with the text “Push Me”, and give it the instance name of
pushme_btn. In the top right corner of the stage create an empty text box called timer_text, select the text box type as Read Only TLF Text (In Flash CS4 or earlier set the text type as Dynamic Text). Import a photo or a picture to your stage, adjusting the size so that the button and textbox are not blocked or hidden. Select the photo and press F8, and convert the photo to a movie clip giving it the name photo_mc. Give the photo_mc movie clip an instance name of
Create a new layer called actions, locking the layer. Select Frame 1 and press F9 to bring up the Actionscript window. For our first bit of code we are going to hide the photo movie clip when the flash file is run. Type the following actionscript in the actionscript window:
Next we are going to create a timer. Type the following code below the existing code already entered:
In the first part of the code (var myTimer:Timer = new Timer) we are just creating a variable called myTimer that is of the type Timer. In the brackets (1000, 4) we are creating a timer that is going to tick every 1000miliseconds (or 1 second) for 4 times before it will stop. Next we are going to create a simple countdown timer by telling the timer what to do every tick. Enter the following code below any existing code:
Now that we have to create an function called onTimerTick that will be called on every tick of the timer. Enter the code bellow to create the function:
Basically to get a countdown timer we are taking the current count of the timer away from 10 (how many times we said earlier that our timer was going to tick for), converting it to a string and displaying it in the timer_text textbox. Now that we have something happening on each tick of the timer it is time to write the function what will happen when the timer has finished. Below the first eventlistener for the timer tick enter the following code:
The TimerEvent.TIMER_COMPLETE parameter is stating that this function will be called when the timer has finished ticking. Below the onTimerTick function enter the code for the onTimerComplete function:
Basically all this function is doing is making the photo that we hid at the start visible (photo_mc.alpha = 100) and putting the text “complete” in the time_text text box.
Now lastly we are going to make the timer start when the pushme_btn that we created earlier is clicked. Below the first and second eventlisteners write the following code:
Below the other two function enter the following code which will start the timer when the pushme button is clicked by the user:
Now it is all done! your coding should look like the code below:
Now when you first test your movie (Control ->Test Movie->Text) or by pressing Ctrl + Enter you should see nothing but a blank stage and with the button. When you press the button you should see number appear in the text box, decreasing from nine. When the timer is completed the numbers in the text box will change to the text “complete” and the photo will appear.
You may notice that if you click the pushme button again nothing happens. This can be solved by inserting the following two lines of code into the onPushmebtnClick function. The line myTimer.reset(); will reset the timer back to zero as it has already reached its count of ten. The line photo_mc.alpha = 0; simply hides the photo again.
The completed movie
Your finished movie should look similar to the photos below. The first image on the left is what should show when the movie is first run. The second is after the button has been pressed, with the number for the countdown timer visible in the textbox in the upper right hand corner of the page. The image on the right shows what should happen when the timer has finished ticking.