Stopping the timeline in Actionscript 3

In this post I will show you different scenarios of stopping the timeline in Actionscript 3. Lets suppose you want to stop the timeline in the last frame, you can simply use the stop() method in the last frame. Alternatively, if you want to keep all your code in the first frame then you can use the code below. The code uses the enter frame event to detect when the current frame on the timeline has reached the total number of frames, and stops the timeline.

//Stops at the last frame
stage.addEventListener(Event.ENTER_FRAME, stopLastFrame);

function stopLastFrame(event:Event):void{
    if(this.currentFrame == this.totalFrames){
        stop();
    }    
}

When you’re creating a banner ad, you sometimes need to stop the timeline after a certain number of iterations. The code below will stop the play head when three iterations of the timeline have played.

//Stops after three timeline iterations.
var counter:uint;

stage.addEventListener(Event.ENTER_FRAME, stopLastFrame);

function stopLastFrame(event:Event):void{
    if(this.currentFrame == this.totalFrames){
        if(counter >= 3){
            stop();
        }else{
            counter++;
        }
    }    
}

You might need to start the timeline again after a certain number of iteration, so the code below stops the timeline after three iterations then starts again after three seconds.

stage.addEventListener(Event.ENTER_FRAME, stopLastFrame);

function stopLastFrame(event:Event):void{
    if(this.currentFrame == this.totalFrames){
        if(counter >= 3){
            stop();
            setTimeout(startAgain,3000);
        }else{
            counter++;
        }
    }    
}


function startAgain():void{
    play();
}

You may wish to stop the timeline after a certain number of seconds. You can use the getTimer() method to tell when you have reached a particular time. Simply, use the code below to stop the timeline after 30 seconds. If you want to stop at a particular frame you can place the code in that frame.

if(getTimer() > 30000){
    stop();
}

This is the same code as above but you can assign the frame you want to stop at.

function stopFrameTime(_milliseconds:Number,frame:uint):void{
    if(getTimer() > _milliseconds){
        gotoAndStop(frame);
    }    
}

stopFrameTime(30000,10);

Links in text in Actionscript 3

This is a quick tip where I will show you three methods of adding links to text.

Method 1 – Static text

This is probably the easiest and fastest method of adding links to text. Firstly, select the Text tool (t) with static text and type a message. Then go to the options sections on the properties panel, and enter the link you want to use in the links box. If you are not using Flash CS4, try looking in the properties panel for a link box like below. 

 
Method 2 – html text

This method uses the htmlText property in the Text class to add a URL to text. Select the Text tool (T) with dynamic text. Give the instance name “myText_txt” and select the ‘Render text as Html’ button. Now open up the Actions panel and enter the following code:

myText_txt.htmlText = "testing "+"<a href = 'http://www.ilike2flash.com'>ilike2flash</a>";

If you wish to highlight the link text in a different colour, you can use the font tag like below.

myText_txt.htmlText = "testing "+"<font color = '#FF0000'><a href = 'http://www.ilike2flash.com'>ilike2flash</a></font>";

Method 3 – TextFormat

The last method uses the URL property in the TextFormat class to assign a URL link to text. Again select the Text tool (T) with dynamic text, and give the instance name “myText_txt”. Then add the following code in the Actions panel.

myText_txt.text = "ilike2flash";
var textFormat:TextFormat = new TextFormat();
textFormat.url = "http://www. ilike2flash.com";
textFormat.target = "_blank";
myText_txt.setTextFormat(textFormat);

Sound visualisation effect in Actionscript 3

In this tutorial you will learn how to create a sound bar visualisation effect commonly seen in many audio players on the internet. The bars will move randomly up and down one after another by changing the height property. You will need the Tweenlite plug-in for this tutorial which can be downloaded here.


Sound visualisation in Actionscript 3


Step 1

Open a new AS3 file. Select the Rectangle tool and create five rectangles with 80px height and 10px width.

Step 2

Convert each of the rectangles into movie clips and set the registration point to the bottom left corner. Then give each of the movie clips the following instance names accordingly: mc1, mc2, mc3, mc4 and mc5.



Step 3

On timeline insert a new layer called ‘as’ then open up the Actions panel and enter the following code:

//Imports the tweenlite plugin.
import com.greensock.*;

//Counter to hold position of the array index.
var counter:int=0;

//Array to hold all the movie clip instances. 
var mcArray:Array=[mc1,mc2,mc3,mc4,mc5];

//Sets the starting height of the movie clips to 5 pixels.
mc1.height=mc2.height=mc3.height=mc4.height=mc5.height=5;

//This function is used to generate random numbers.
function randomNumbers(min:Number,max:Number) {
    var Results:Number=Math.floor(Math.random()*max)+min;
    return Results;
}

stage.addEventListener(Event.ENTER_FRAME, moveBar);

//This function tweens the bars to random heights.
function moveBar(event:Event):void {   
    if(counter==mcArray.length){
        counter = 0;
    }else{
    TweenLite.to(mcArray[counter], 0.5, {height: randomNumbers(10,50)});
    counter++;
    }
}

Step 4

Test your movie Ctrl + Enter. You should now have sound visualisation effect in Actionscript 3.

ClickTag in Actionscript 3

The clickTag in Actionscript 3 has changed from Actionscript 2. You can no longer use the _root property and the getURL. In AS3 you have to access the clicktag from the loaderInfo parameters and use the navigateToURL. Here are examples of the two types.

AS2 ClickTag

on(release){
 getURL(_root.clickTag, '_blank'); 
}

AS3 ClickTag

ctag.addEventListener(MouseEvent.CLICK, clicked);

function clicked(e:MouseEvent):void{
 navigateToURL(new URLRequest(loaderInfo.parameters.clickTag), "_blank");
}

The HTML for embedding the swf with the AS3 clickTag is exactly the same as the AS2 version. It should look something like below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
 
 <title>Click Tag example</title>
 
 <script type="text/javascript" src="swfobject.js"></script> 


 <script type="text/javascript">
    
  var flashvars ={ clickTag:"http://www.google.com"};
  var params = {};
  var attributes = {};
  swfobject.embedSWF("clicktag.swf?rnd="+Math.random(), "flashContent", "300", "250", "8", false, flashvars, params, attributes);

 </script>
 
</head> 
<body> 
 <div id="flashContent"></div>
</body> 
</html>

Banner slider in Actionscript 3 part 2

This tutorial is slight modification of the Banner slider in Actionscript 3 tutorial where one of the bigger images will remain on the banner instead of moving in and out. You will again need four images and four thumbnails for this banner.


Step 1

Repeat steps 1 – 5 in Banner slider in Actionscript 3 tutorial, but for step 2 only have one large image on the stage and the other three images off the stage.


Step 2

Open up the Actions panel and add the following code:

//Imports the tweenlite packages.
import com.greensock.*;

//Array to hold all movie clip instances and all the button instances. 
var mcArray:Array=[image1_mc, image2_mc, image3_mc, image4_mc];
var btnArray:Array=[thumb1_btn, thumb2_btn, thumb3_btn, thumb4_btn];

//This is a temporary movie clip to hold the selected target movie clip.
var tempMC:MovieClip;

//The start position is the x position of the first image and the 
//the end position is the x positions of the other three images.
var startPos:Number = 0;
var endPos:Number = -300;


//This loops through all the buttons adding mouse events to each of the button. 
for (var j:int = 0; j< btnArray.length; j++) {
 btnArray[j].addEventListener(MouseEvent.CLICK, moveImage);
}


//This function moves the images to the right of the stage to the 0 x position when
//the thumbnail is selected. If the thumbnail is not selected it remains in the same
//position.
function moveImage(event:MouseEvent):void {
 for (var i:int = 0; i< btnArray.length; i++) {
  if (event.target==btnArray[i] && mcArray[i].x !=0) {
  tempMC=mcArray[i];
  setChildIndex(mcArray[i], numChildren - 1);
  TweenLite.to(mcArray[i], 1, {x:startPos, onComplete:moveBack});
  }
 }
}

//This function moves back all the images apart from the one selected.
function moveBack():void {
 for (var ii:uint = 0; ii < mcArray.length; ii++) {
  if (mcArray[ii]!=tempMC) {
   mcArray[ii].x=endPos;
  }
 }
}

Step 3

Test your movie Ctrl + Enter.