Button component countdown in AS3

I noticed an interesting button on a website form the other day which displayed a countdown time inside the button before actually turning into a clickable button. So, in this tutorial I will replicate the same effect using Flash Actionscript 3.0. Some knowledge of the button component and countdown timers are needed in this tutorial.


Button component countdown in AS3

Step 1

Open a new Flash AS3 file. Then select Window > Component and drag a button component into the library.




Step 2

On the timeline create a new layer called ‘Actions’. Then open up the Actions panel and enter the following code below.

//Imports the Button Class.
import fl.controls.Button;

//Set the count to ten seconds
var count:Number=10;
var myTimer:Timer=new Timer(1000,count);
myTimer.addEventListener(TimerEvent.TIMER, countdown);
myTimer.start();

/*This creates a new instance of a button and adds it to the display
list using the addChild() method, and sets the size of the buttons
to 120 width and 60 height*/
var my_button:Button = new Button();
my_button.setSize(120, 60);
addChild(my_button);

/*This sets the the countdown time on the button label and disables
the button which makes it unclickable.*/
my_button.label=String(count);
my_button.enabled=false;

/*This function displays the countdown the countdown timer in the
button label. When the count reach 0 the button label change to 'enter'
and the button is enabled which makes it clickable*/
function countdown(event:TimerEvent):void {
   my_button.label = String((count)-myTimer.currentCount);
   if (my_button.label=="0") {
       my_button.label="Enter";
       my_button.enabled=true;
   }
}

/*This adds the click event to the button and traces a message when
the button is enabled and the count is at 0*/
my_button.addEventListener(MouseEvent.CLICK, enterTest);
function enterTest(event:MouseEvent):void{
   trace("Button hit");  
}

Step 3

Test your button component countdown Ctrl + Enter.



You should now have a countdown timer inside your button component.

Blur image effect in Actionscript 3

I previously created a Blur image effect tutorial that used the timeline to create the blurred effect. This time I will create the same effect using only Actionscript 3.0. You will need the tweenMax plug-in for this tutorial which can be downloaded from: blog.greensock.com/tweenmax/.


Blur image effect in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import the image you wish to add the blur effect to by selecting File > Import > Import to Stage. You can alternatively create your own objects on the stage. I have used a free stock image that can be found at www.sxu.hu.




Step 2

Convert your image into a movie clip (F8) and give your movie clip an appropriate instance name. I have used the instance name: car_mc.




Step 3

Add a button component onto the stage by selecting Window > Component and drag the button component onto the stage. Then give the button the instance name: my_button. For more information on the button component take a look at this tutorial.


Step 4

On the timeline insert a new layer called Actions. Then open up the Actions panel and enter the following code.

//Imports the packages needed.
import flash.filters.BlurFilter;
import gs.*;
import gs.easing.*;

//Creates a new instance of the blur filter and adds the filter to the
//car movie clip.
var my_bf:BlurFilter=new BlurFilter(150,150,1);
car_mc.filters=[my_bf];

//Adds 'play' to the button label.
my_button.label="Play";

//Add an event listener with the mouse click event to the button.
my_button.addEventListener(MouseEvent.CLICK, blurEffect);

//Add the blur effect to the car and replay the effect.
function blurEffect(event:MouseEvent):void {
 if (my_button.label=="Play") {
     TweenMax.to(car_mc, 1, {blurFilter:{blurX:0, blurY:0, quality:1}});
     my_button.label="Replay";
 }
 else{
     car_mc.filters=[my_bf];
     my_button.label="Play";
 }
}

For more information on the blur filter checkout the AS3 blur filter Component reference.


Step 5

Test your blur image effect Ctrl + Enter.



You should now have a blur image effect in Actionscript 3.0.

Add Blur filter to movie clip in AS3

The Blur filter in Flash can be added using either the filters panel in the interface, or using Actionscript code. I will be showing you both methods of adding blur filters to movie clips. Firstly, the blur filter is used to soften the edges and details of an object so applying a blur can give an object a smoother appearance.


Blur filter using the filters panel – part 1

Step 1

Open a new Flash AS3 file and select the Rectangle tool (R) and drag a rectangle shape on the stage. You can alternatively import an image onto the stage.




Step 2

Then covert the shape into movie clip by selecting F8. You need to convert an object into a movie clip/button before any filters can be applied. This because only the properties of movie clips/buttons can be changes, a primitive shape’s properties cannot be changed.


Step 3

Select the movie clip using the Selection tool (V) and then locate the filters panel as shown below. The default location for the filters panel is normally on the right side of the workspace in Flash CS4, and on the bottom of the workspace in Flash CS3.



Select the ‘Add filter’ button and choose the Blur options. You will notice inside the filters property you and adjust the height and width of the blur in pixels, and set the quality level of the blur. There are three levels of quality which are high, medium and low.



At the bottom the filters panel you can perform the following options: save a filter preset; copy filter to the clipboard; enable or disable filter; reset filter; and delete a filter.


Blur filter using Actionscript 3.0 – part 2

**Make sure you have completed steps 1 – 3 from the above before attempting part 2.

To add a blur filter in AS3 you need to add a new instance of the BlurFilter Method. This method can apply the blur filter to any display object such as movie clip, buttons, text field etc.


Step 3

Select the rectangle on the stage and give it the instance name ‘rectangle_mc’. Then on the timeline insert a new layer called Actions. Then select the first frame and hit F9 to open up the actions panel and enter the following code.

//1.
var my_bf:BlurFilter=new BlurFilter(15,15,1);
//2.
rectangle_mc.filters=[my_bf];

Code:
1. This line of code create a new instance of the of the blur filter called my_bf. The values inside the parenthesis represent the following values shown below.

BlurFilter(blurX, blurY , quality)

BlurX – The value of the horizontal blur which can range from 0 to 255.
BlurY – The value of the vertical blur which can range from 0 to 255.
Quality – The number of time to apply the filter.


2. This applies the filter to the object ‘rectangle_mc’.

Button component in Actionscript 3 – part 2

This is a continuation of the previous post on the button component in Actionscript 3.0. In this post I will go into more detail about the button component. For each of the parts below you will need to have the button component in the library by selecting Windows > Components and dragging the component into the library.


1. Dynamically create button component instance

The first example will dynamically create a button instance on the stage. You need to have the component in the library panel.

//Imports the Button Class.
import fl.controls.Button;

//This creates a new instance of a button and adds it to the display
//list using the addChild() method.
var my_Button:Button = new Button();
addChild(my_Button);

You should now have a button in the top left corner like below.




2.Setting button position and size

The second example will move the button anywhere on the stage using the move() method. This method sets the x & y coordinates of the component. The setSize() method changes the size of the component by adjusting the width and height properties.

//Imports the Button Class.
import fl.controls.Button;

//This creates a new instance of a button.
var my_Button:Button = new Button();

//Sets the position and size of component.
my_Button.move(20, 20);
my_Button.setSize(100, 50);

//Adds the component to the display list using the addChild() method.
addChild(my_Button);

You should get the following result. The button has move to (20,20) on the stage and has a width of 100px and a height of 50px.




3.Change button label

The third example will change the text in the button component using the label property.

import fl.controls.Button;

var my_Button:Button = new Button();
my_Button.move(20, 20);
my_Button.setSize(100, 50);

my_Button.label = "ilike2flash";

addChild(my_Button);

Your button should now have the label “ilike2flash”.




4.Add actions to Buttons

The fourth example will add actions to the button by using an eventlistener method with a click event.

import fl.controls.Button;

var my_Button:Button = new Button();

my_Button.move(20, 20);
my_Button.setSize(100, 50);
my_Button.label = "ilike2flash";

//Adds the click event to the button.
my_Button.addEventListener(MouseEvent.CLICK, myClick);

addChild(my_Button);

//Function outputs the message hit when the button is clicked.
function myClick(event:MouseEvent):void {
 trace("Hit!");
}

Part 3 – Coming soon.

Limit colours in the colourPicker component

In this tutorial you will learn how to limit the amount of colour swatches in a colour picker component. This means if you only want certain colour in your component, you can set these colours. To limit the colour swatches you need to use the ‘colors’ properties from the colourPicker component. I have limited the colours to red, yellow, green, and blue in the example below.

Limit colours in the colourPicker component

Step 1

Open a new AS3 Flash file.
Select Window > Components and drag the ColorPicker component into the library.

Step 2

On the timeline insert a new layer called ‘Actions’ and enter the following code in the actions panels. To limit the colours you will need to change the hexadecimal numbers highlighted in red below. You can find the hexadecimal numbers of the colours by clicking on either the stroke or paint bucket palette on the tool box, and the hovering over the colours.

//Import the packages needed.
import fl.events.ColorPickerEvent;
import fl.controls.ColorPicker;
import flash.geom.ColorTransform;

/*Creates a new instance of the a sprite class which fills the whole stage area
in black colour, and add the display object at the bottom position (index 0).*/
var bgColour:Sprite = new Sprite();
bgColour.graphics.beginFill(0x000000);
bgColour.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
addChildAt(bgColour,0);

//Creates a new instances of the colour picker class.
var mycolorPicker:ColorPicker = new ColorPicker();

//Limit the colours to red, yellow, green, and blue.
mycolorPicker.colors = [ 0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00];

/*Moves the colour picker to (20,20) and set the size to (50,50) and add the
component on the stage.*/
mycolorPicker.move(20, 20);
mycolorPicker.setSize(50, 50);
addChild(mycolorPicker);

//Add the change event to the colour picker.
mycolorPicker.addEventListener(ColorPickerEvent.CHANGE, changeBg);

function changeBg (event:ColorPickerEvent):void {
//Creates a new instance of the ColorTrasform class.
var myColorTransform:ColorTransform = bgColour.transform.colorTransform;

//An instance of selected colour from the colour picker.
var theColor:Number=mycolorPicker.selectedColor;

//Sets the new colour from the colour picker.
myColorTransform.color=theColor;

//Apply the colour changes to the movie clip.
bgColour.transform.colorTransform=myColorTransform;
}

Step 3

Test your movie clip Ctrl + Enter. Now try clicking the colour picker and you should only see four colours in the palette.



You should be able to limit the swatches in the colourPicker component

ColourPicker component in Actionscript 3

The colour picker component displays a list of colours squares called swatches which the user can select a colour from. Initially, this component only displays a single colour on a square button. However, when this button is selected, a panel appears to display the list of colours available.

I have previously written three examples that use the colour picker component. The first one is a drawing application which changes the line colour, when another colour is selected from the picker component. This drawing application also has the option of changing the line thickness using the slider component.



The second example changes the colour of a movie clip. This examples use the colorTransform class to apply the colour to the movie clip.




The third example limits the colours in the colour picker component using the 'color' properties. You can set any amount of colours in the swatch as you wish. I have limited the colours to red, green, blue and yellow.



For more information on all the colour component properties and methods, checkout the AS3 colorPicker component reference.

Clicking game in Actionscript 3

This is an update from the previous clicking game in AS2. The steps in this tutorial are exactly the same as the previous one, only the code has been converted into Actionscript 3.0. So, be sure to checkout the previous tutorial.

//Initially set the ball invisible.
ball_mc.visible=false;

//Variables for the hits and total.
var total:uint=0;
var hits:uint=0;
var end:uint=20;

//Event listener with the click mouse event.
ball_mc.addEventListener(MouseEvent.CLICK, ballClick);

//Increases the hit count by one.
function ballClick(event:MouseEvent):void {
    hits++;
}

function seeBall() {
    //Displays the hits and the total.
    hits_txt.text=String(hits);
    total_txt.text=String(total);
   
    //If the end points is less than the total points then the ball will
    //will be display randomly on the stage, and the total count will increase.
    if (total < end) {
        ball_mc.x=Math.random()*300;
        ball_mc.y=Math.random()*300;
        ball_mc.visible=true;
        total++;
    } else {
        ball_mc.visible=false;
        gotoAndStop("1", "Scene 3");
        clearInterval(doball);
    }
}

var doball=setInterval(seeBall,800);

You should get the following game, once you have completed all the steps from the previous tutorial.



If you have any questions feel free to leave any comments below.

Zoom in/out effect in Actionscript 3

In this tutorial you will learn how to create a simple zoom in and out effect using Actionscript 3.0. I have used an image of a fish to show the zoom in and out in this tutorial, but you can use whatever image you wish. You will need the tweenLite plug-in which is available from greensocks.com.


Zoom in/out effect in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import an image you wish to add the zoom effect to by selecting File > Import > Import to Stage. You can alternatively create any object on the stage if you wish.




Step 2

Convert your image into a movie clip (F8) and make sure you select the centre registration point. Then give your movie clip the instance name: fish_mc.




Step 3

On the timeline create a new layer called 'Actions' and then add the following code into the actions panel.

//import the tweenlite packages.
import com.greensock.TweenLite;

//Add the roll over/out event listeners to the fish movie clip.
fish_mc.addEventListener(MouseEvent.ROLL_OVER, zoomIn);
fish_mc.addEventListener(MouseEvent.ROLL_OUT, zoomOut);

//This function increases the scale of the fish by a factor of two in one second.
function zoomIn(event:MouseEvent):void{
TweenLite.to(fish_mc, 1, {scaleX:2, scaleY:2});
}

//This function decreases the scale of the fish by a factor of one in one second.
function zoomOut(event:MouseEvent):void{
TweenLite.to(fish_mc, 1, {scaleX:1, scaleY:1});
}

To make the image edges less pixelated, you can right click on the image
in the libary select properties on the drop down menu and check the smoothing checkbox.

Step 4

Test your movie clip Ctrl + Enter. Now try moving your mouse over the fish below and you should see the fish increase in size.



You should now be able to zoom in and out in Actionscript 3.0.

Do not click

Stage Height and Width in Actionscript 3

The code for the stage height and stage width in Actionscript 3.0 is slightly different from the Actionscript 2.0 version. Below is a comparison of the two versions.

AS2 code

stage.height

AS3 code

stage.stageHeight

As you can see the code is very similar. However, using the wrong code can have a big impact on what you want to achieve in Actionscript 3.0. Below is a diagram showing the difference between the two variations of code.



The code ‘stage.height’ will only return the contents on the stage. For example, if your object on the stage has a height of 200px then the 'stage.Height' will be 200. While the code ‘stage.stageHeight’ will give you the actual height of the stage. So, if you stage height is 400px then the 'stage.stageHeight' will also be 400. This is exactly the same for the stage width as well.

Fading menu in Actionscript 3

In this tutorial you will learn how to create a fading navigation menu with Actionscript 3.0. This is an update from the previous AS2 navigation menu. Some knowledge of basic buttons and opening URL’s are needed for this tutorial. You will also need the tweenLite plugin from greensocks.com.


Fading menu in Actionscript 3.0

Step 1

Open a new Flash AS3 file.
Select the Rectangle tool (R) and drag and rectangle shape on the stage like below. I have used #00CBFF colour with a 3pt black stroke for my rectangle. Once, you have created one rectangle, copy and paste as many rectangles as you need for the menu items.




Step 2

Select Text tool (t) and type the names of the menu items inside the rectangles as shown below. I have used Verdana Bold font, but you can use whatever font you wish.




Step 3

Convert each of your rectangles into movie clips (F8) and give them the following instance names accordingly: home_mc, tutorials_mc, subscribe_mc and contact_mc. For more information on buttons checkout the basic button tutorials.


Step 4

On the timeline create a new layer called “Actions”. Then open up the Actions panel and enter the following code:

//Import the tweenlite package
import gs.TweenLite;

var menu_movement:int = 25;
var initial_menu_position:Number =(change this value for the x position of buttons);

//Array to hold all the button instances.
var buttonsArr:Array=new Array(home_mc, tutorials_mc, subscribe_mc,contact_mc);

//Function to control the rollover and rollout effect.
function rollMenu(menuOption:MovieClip):void {

   menuOption.addEventListener(MouseEvent.ROLL_OVER, showMenu);
   menuOption.addEventListener(MouseEvent.ROLL_OUT, hideMenu);
 
   function showMenu(event:MouseEvent):void {
       TweenLite.to(menuOption, 1, {x:menuOption.x+menu_movement,alpha:1});
   }
   function hideMenu(event:MouseEvent):void {
       TweenLite.to(menuOption, 1, {x:initial_menu_position,alpha:0.5});
   }  
}

//For loop to move the menu items as well as intial sets the transpareny to 50%.
for each(var item in buttonsArr) {
   item.alpha=0.5;
   item.buttonMode=true;
   rollMenu(item);
}

Step 5

Test your navigation menu Ctrl + Enter. Now mouse over the menu items and you should see them turn opaque and move slightly to the right.



You should now have a basic navigation menu in Actionscript 3.0.