You are here:
Home Actionscript 3
Hello! It looks like you don't have a recent version of Flash Player installed, please download the latest version from http://get.adobe.com/flashplayer/

AS3 Tutorials

AS3 Comments

Written by Philip

This Actionscript 3 tutorial is on AS3 Comments. AS3 Comments are placed within actionscript 3 using // for single line AS3 comments or /** or /* for multiline AS3 comments with */ to end them. Actionscript 3 is used to program Flex, Flash, and AIR.

Using /** in most editors gives you a more beautiful colour!

AS3 Comment examples

Double slash

//this is an as3 comment about the variable below
var hello:String = "hello";

AS3 Block Line comments

/* this is a block as3 comment 
 on multiply lines.*/
 
/** This is also a block as3 comment,
but it should appear in a different color within 
your editor **/

ASDocs

If you're using ActionScript 3 heavily it is worth reading the ASdoc guidelines and following these to comment your ActionScript code, even if your not using Flex. Please do read this!!!

http://livedocs.adobe.com/flex/3/html/help.html?content=asdoc_1.html

*Add how you document code

Comment Shortcuts

Commenting in Eclipse

Ctrl + Shift + C

Commenting in Flash Develop

Ctrl + D

Related Articles Link
ASDoc
 http://livedocs.adobe.com/flex/3/html/help.html?content=asdoc_1.html
 

AS3 Trace

Written by Philip

AS3 Trace statement is used to output actionscript 3 to the console. This can be very handy in debugging, when writing code, an example could be to check whether something is being parsed.

AS3 Trace Example

var output:Number = 4 + 3;
trace( "This number is seven : " + output );

//Should output 
//This number is seven : 7

AS3 Trace Loop Example

if( var i:int = 0; i < 10; i++)
{
 trace(i);
}
//This should output the numbers 1 to 10

Related Articles Link
Republicofcode AS3 Trace
 http://www.republicofcode.com/tutorials/flash/as3trace/
 

AS3 Output

Written by Philip

AS3 Output, I'm guessing you wish to output a string, integer etc. From your actionscript code to the output window, in your IDE, be it Eclipse, Flash Develop or Flash Builder. To do this use trace(); from within your actionscript 3 code.

AS3 Trace Example

var output:Number = 4 + 3;
trace( "This number is seven : " + output );

//Should output 
//This number is seven : 7

Related Articles Link
How-To-Code AS3 Trace
 http://www.how-to-code.com/as3-actionscript3/as3-debugging/as3-trace.html
Republicofcode AS3 Trace
 http://www.republicofcode.com/tutorials/flash/as3trace/
   

AS3 Button

Written by Philip

AS3 Button Tutorial Coverage

AS3 Buttons are buttons that are created in ActionScript 3. Actionscript 3 is of course the coding language used to program the Adobe Flash Platform, which Flex and AIR are part of.

If you are using Flex you may want to create a Flex button, which I do not cover below, but is covered here http://livedocs.adobe.com/flex/3/html/help.html?content=controls_04.html

This tutorial covers the creation of an AS3 button purely with actionscript.

It will cover:

i. The creation of the graphic for the button using pure actionscript code,

ii. Setting this graphic to have the user experience of a button and,

iii. Firing an event from the AS3 button.

Note : We will not cover creating a button within the Flash IDE.

What is an IDE? - Integrated Development Environment

New to Actionscript 3, Flash, Flex or AIR?

If you are new to Actionscript, Flex, or AIR and you do not have enough cash to purchase the full license for Flash Builder, FDT or IntelliJ, like me! it's worth looking at

http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page

Which is an open source development environment for Flash, Flex and AIR.

Ok now lets get this show on the road.

AS3 Button creation using Actionscript 3

First step is to create your graphic that you will use as a button. You can do this using the flash graphics class.

Let's import the flash graphics class.

import flash.display.Graphics;

Now you need to draw a shape for your button, for this example I've drawn a simple yellow box, beautiful!

I've used a Sprite because I don't need a movieclip as "Sprite is an appropriate base class for objects that do not require timelines" and for what I'm currently writing I do not require a timeline.


//Create a new instance of a Sprite to act as the button graphic.
button = new Sprite();
 
//Set the color of the button graphic
button.graphics.beginFill(0xFFCC00);
 
//Set the X,Y, Width, and Height of the button graphic
button.graphics.drawRect(0, 0, 200, 200);
 
//Apply the fill
button.graphics.endFill();

and add 

private var button:Sprite;

as an instance variable. This is so that we can refer to the button later on, ie. To change it's look.

At this point if you run it you will see nothing on your stage.

Therefore we need to add the graphic you have just created to the stage,
we do this with the following line;


//Add Button Sprite to stage
this.addChild(button);

Congratulations : Now you should have a yellow box in the top left hand corner of your stage. You've just drawn your AS3 Button using code!

Your class should look something like this :

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
import flash.display.Graphics;
 /**
 * ...
 * @author how-to-code.com
 */
 public class Main extends Sprite 
 {
 private var button:Sprite;
 
 public function Main():void 
 {
 //Create a new instance of a Sprite to act as the button graphic.
 button = new Sprite();
 
 //Set the color of the button graphic
 button.graphics.beginFill(0xFFCC00);
 
 //Set the X,Y, Width, and Height of the button graphic
 button.graphics.drawRect(0, 0, 200, 200);
 
 //Apply the fill
 button.graphics.endFill();
 
 //Add Button Sprite to stage
 this.addChild(button);
 }
 }
}

Adding a Hand Cursor

Now you have a yellow box on the stage you need to communicate to the user that they are infact over the AS3 Button when they hover their mouse above the yellow box. We do this by adding the following code

//Add Handcursor,buttonMode, and mouseChildren
buttonMc.buttonMode = true;
buttonMc.useHandCursor = true;
buttonMc.mouseChildren = false;

For exactly what buttonMode, useHandCursor and mouseChildren do it is worth checking out the Adobe Livedoc references which can be found at the bottom of this page.

Your code should now look like the following :

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.display.Graphics;
 /**
 * ...
 * @author how-to-code.com
 */
 public class Main extends Sprite
 {
 private var button:Sprite;
 
 public function Main():void
 {
 //Create a new instance of a Sprite to act as the button graphic.
 button = new Sprite();
 
 //Set the color of the button graphic
 button.graphics.beginFill(0xFFCC00);
 
 //Set the X,Y, Width, and Height of the button graphic
 button.graphics.drawRect(0, 0, 200, 200);
 
 //Apply the fill
 button.graphics.endFill();
 
 //Add useHandCursor, buttonMode, and mouseChildren if required
 button.useHandCursor = true;
 button.buttonMode = true;
 button.mouseChildren = false;
 
 //Add Button Sprite to stage
 this.addChild(button);
 }
 }
}

Adding Event Listeners

What use is the AS3 button if it does nothing when you press it!

We therefore need to make the button do 'something' when pressed on, but we can also get the AS3 button to do something when the user rolls over it, rolls off it, and more, as specified by MouseEvents.

To do this we need to add Event Listeners to our button.

Firstly lets add an Event Listener to listen to when are button is clicked upon. We add an Event Listener to a component by calling addEventListener on that component and telling it what exactly to listen out for.

So we add the following:

button.addEventListener(MouseEvent.CLICK, buttonClickHandler);

The above Event Listener listens for a click mouse event on the button Sprite. AND when the user clicks the button Sprite it calls the function buttonClickHandler.

Now we need a method to be created called buttonClickHandler so that when the user clicks the button Sprite something happens!

Lets create the method to link to by adding a new method buttonClickHandler, and within this lets output "Button Clicked!" to the console using a trace statement.

So lets add the the buttonClickHandler method to our code

private function buttonClickHandler(event:MouseEvent):void
{
 trace("Button clicked!");
}

Whoa! Check out the event:MouseEvent parameter that is passed to this
method. Let's not worry about this for now, but remember to include it.

Also make it return :void as this method will not be returning anything.

Your code will now look like

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.display.Graphics;
 import flash.events.MouseEvent;
 /**
 * ...
 * @author how-to-code.com
 */
 public class Main extends Sprite
 {
 private var button:Sprite;
 
 public function Main():void
 {
 //Create a new instance of a Sprite to act as the button graphic.
 button = new Sprite();
 
 //Set the color of the button graphic
 button.graphics.beginFill(0xFFCC00);
 
 //Set the X,Y, Width, and Height of the button graphic
 button.graphics.drawRect(0, 0, 200, 200);
 
 //Apply the fill
 button.graphics.endFill();
 
 //Add useHandCursor, buttonMode, and mouseChildren if required
 button.useHandCursor = true;
 button.buttonMode = true;
 button.mouseChildren = false;
 
 button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
 
 //Add Button Sprite to stage
 this.addChild(button);
 }
 
 private function buttonClickHandler(event:MouseEvent):void
 {
 trace("Button clicked!");
 }
 }
}

Congratulations you've created a button purely from ActionScript 3!

You can stop now with the tutorial!

Or continue to implement a rollover and rollout and then implement the button changing color on the different states of rollover and rollout.

AS3 Button Rollover and Rollout

Now have a go at creating a roll over and roll out for your button.

Here's a tip : You will need to use MouseEvent.ROLL_OVER, and MouseEvent.ROLL_OUT

Below is the code implementation for rollover and rollout of the AS3 Button.

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.display.Graphics;
 import flash.events.MouseEvent;
 /**
 * ...
 * @author how-to-code.com
 */
 public class Main extends Sprite
 {
 private var button:Sprite;
 
 public function Main():void
 {
 //Create a new instance of a Sprite to act as the button graphic.
 button = new Sprite();
 
 //Set the color of the button graphic
 button.graphics.beginFill(0xFFCC00);
 
 //Set the X,Y, Width, and Height of the button graphic
 button.graphics.drawRect(0, 0, 200, 200);
 
 //Apply the fill
 button.graphics.endFill();
 
 //Add useHandCursor, buttonMode, and mouseChildren if required
 button.useHandCursor = true;
 button.buttonMode = true;
 button.mouseChildren = false;
 
 button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
 button.addEventListener(MouseEvent.ROLL_OVER, buttonRollOverHandler);
 button.addEventListener(MouseEvent.ROLL_OUT, buttonRollOutHandler);
 
 //Add Button Sprite to stage
 this.addChild(button);
 }
 
 private function buttonClickHandler(event:MouseEvent):void
 {
 trace("Button clicked!");
 }
 
 private function buttonRollOverHandler(event:MouseEvent):void
 {
 trace("Button roll over!");
 }
 
 private function buttonRollOutHandler(event:MouseEvent):void
 {
 trace("Button roll out!");
 }
 }
}

AS3 Button Change of Color on Click, Rollover and Rollout.

Now you should try and make a more realistic button that changes color on Rollover and Rollout.

To do this you will need to change the color of the button on rollover and rollout, there are two ways I can think to implement this.

The way I've implemented it is below.

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.display.Graphics;
 import flash.events.MouseEvent;
 /**
 * ...
 * @author how-to-code.com
 */
 public class Main extends Sprite
 {
 private var button:Sprite;
 
 public function Main():void
 {
 //Create a new instance of a Sprite to act as the button graphic.
 button = new Sprite();
 
 //Set the color of the button graphic
 button.graphics.beginFill(0xFFCC00);
 
 //Set the X,Y, Width, and Height of the button graphic
 button.graphics.drawRect(0, 0, 200, 200);
 
 //Apply the fill
 button.graphics.endFill();
 
 //Add useHandCursor, buttonMode, and mouseChildren if required
 button.useHandCursor = true;
 button.buttonMode = true;
 button.mouseChildren = false;
 
 button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
 button.addEventListener(MouseEvent.ROLL_OVER, buttonRollOverHandler);
 button.addEventListener(MouseEvent.ROLL_OUT, buttonRollOutHandler);
 
 //Add Button Sprite to stage
 this.addChild(button);
 }
 
 private function buttonClickHandler(event:MouseEvent):void
 {
 trace("Button clicked!");
 turnButtonGreen();
 }
 
 private function buttonRollOverHandler(event:MouseEvent):void
 {
 trace("Button roll over!");
 turnButtonRed();
 }
 
 private function buttonRollOutHandler(event:MouseEvent):void
 {
 trace("Button roll out!");
 turnButtonYellow();
 }
 
 private function turnButtonRed():void
 {
 button.graphics.beginFill(0xFF0000);
 button.graphics.drawRect(0,0,200,200);
 button.graphics.endFill();
 }
 
 private function turnButtonYellow():void
 {
 button.graphics.beginFill(0xFFCC00);
 button.graphics.drawRect(0,0,200,200);
 button.graphics.endFill();
 }
 
 private function turnButtonGreen():void
 {
 button.graphics.beginFill(0x008000);
 button.graphics.drawRect(0,0,200,200);
 button.graphics.endFill();
 }
 }
}

I hope this tutorial about creating an AS3 Button has helped you in creating and playing with your very own AS3 Button.

Related Articles Link
mouseChildren on Adobe Livedocs
 http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObjectContainer.html#mouseChildren
buttonMode on Adobe Livedocs
 http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/Sprite.html#buttonMode
Flex Hand Cursor http://cookbooks.adobe.com/post_Creating_a_hand_cursor_over_a_component-1687.html
AS3 Hand Cursor at dispatchevent.org
 http://dispatchevent.org/roger/hand-me-that-cursor-would-you/
 

AS3 Singleton Class

Written by Philip

The Singleton class, coded in AS3, is designed to restrict instantiation of a class to only one object. It's good when you only want one object across the whole of your application. An example could be you load in a load of xml data and you want to store the values of the xml for use throughout the application. In AS3 we can write a Singleton Class in the following way. We use the getInstance() to return the object created.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
package com.howtocode
{
	[Bindable]
	public class Singleton
	{
 
        	/** Only one instance of the model locator **/
 
        	private static var instance:Singleton = new Singleton();
 
        	/** Bindable Data **/
 
        	public var flexData:String = "SuperApp";
		public var userScore:int = 0;
 
       	 	public function Singleton()
		{
			if(instance)
			{
				throw new Error ("We cannot create a new instance.
 Please use Singleton.getInstance()");
			}
		}
 
		public static function getInstance():Singleton
		{
			return instance;
		}
	}
}

AS3 Singleton Class Access

To access a variable from the Singleton class we use the following.

 

1
2
3
4
5
6
7
8
9
 
import com.howtocode.Singleton;
 
private var model:Singleton = Singleton.getInstance();
 
// To retrieve flexData String from Singleton Class use model.flexData
trace(model.flexData);
 
// To set flexData String in Singleton Class use the following
model.flexData = "FlexApp"

 

You can of course do something really cool which is place something like place

 

1
 
<mx:Button id="flexButton" label="{model.flexData}">

 

into you're MXML and when flexData is changed in your Singleton Class it automatically updates you're MXML as we've set the whole Singleton Class as [bindable].

   

More Articles...