The Mousewheel in Actionscript 3

The mouse wheel event in AS2 is now slightly different in AS3. The two versions are almost exactly the same there are only a few differences. Below is a comparison of the two versions.

AS2

var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
trace("The delta value is: " +delta);
}

Mouse.addListener(mouseListener);


AS3

import flash.events.MouseEvent;

public function mouseWheel(event:MouseEvent){
trace("The delta value is: " + event.delta);
}

addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheel);


The ‘delta’ properties in both of the above versions refer to the amount of up and down mouse movements. A positive delta means the mouse wheel has moved up, and a negative delta means the mouse wheel has moved down. I received a delta of + and - 3 on my mouse, but your values may be different depending on your mouse configuration.

Below is a simple example of using the mouse wheel. The rectangle shape will move upwards when the mouse wheel is up, and down when the mouse wheel is down.


The Mousewheel in Actionscript 3

Step 1

Open a Flash AS3 file.
Select the rectangle tool and create a basic rectangle shape like below:




Step 2

Convert your rectangle shape into a movie clip by pressing F8. Then give it the instance name: rec_mc.




Step 3

On the timeline create a new layer called “Actions”. Then select the first frame and hit F9 to open up the actions panel, and enter the following code:



Code:

1. Imports the mouse event.
2. This is a function which creates the mousewheel event. The rectangle shape is then checked to ensure it does not go over the screen. The event.delta determines what direction the mouse wheel has moved. If the delta is less than 0 the rectangle will go downwards, and if the delta is greater than 0 the rectangle will go upwards.
3. This add the event listener with the mouse wheel event.


Step 4

Test your mouse wheel example Ctrl + Enter. Now move your mouse wheel up and down and you should see the shape move as well.



You should now be able to use the mouse wheel in Actionscript 3.0.

Create reflection with Actionscript 3

I found an article over at Adobe.com which shows you how to add reflections to movie clips using a custom class. Reflections are quite a common effect that can be seen in various websites, adverts and galleries. It is possible to manually create reflections by duplicating the movie clip, flipping the y-axis and lowering the alpha property. However, if you have lots of movie clips on the stage this would take a long time especially if you need to make any changes afterwards. This problem can be solved by using a custom reflection class to dynamically applied reflections to a movie clips.

The reflection class can be downloaded for free at the same website. To fully understand each part of the code you can read the articles at Adobe.com, which describes the code in detail.

Below I will briefly discuss how to use and install the reflection class.


Create reflection with Actionscript 3.0

Step 1

Firstly, download the reflection class from Adobe.com. Then unzip the ‘com’ folder into a directory of your choice. Open up a Flash AS3 file and save the file in the same directory as the ‘com’ folder.


Step 2

Select any shape rectangle tool and create a basically shape on the stage. Convert the shape in a symbol then give your symbol an appropriate name, check movie clip, select the top left registration point and click ok.

Give your symbol the instance name ‘reflection_mc’.


Step 3

On timeline create a new layer called ‘Actions’ then hit F9 to open up the actions panel and enter the following code:

//1.
import com.pixelfumes.reflect.*;

//2
var r1:Reflect=new Reflect({mc:reflection_mc,alpha:50,ratio:50,distance:0,updateTime:0,reflectionDropoff:1});

Code:
1. This defines the package path for the Reflect class.
2. This creates a new instance of the Reflect class the parameters are described below:

* Alpha – This is the transparency of the reflection. If the alpha is 100 then the reflection will be completely opaque, and if the alpha is 0 it will be invisible.
* Ratio – This is the gradient mask ratio, increasing this number will show more of the reflection.
* Distance – This is the distance of the reflection from the original movie clip.
* Update Time – This is for animations or video clips.


Step 4

Test your reflection Ctrl + Enter.




You should now have a reflection on your rectangle shape. Why not try the reflection effect on text or images? Below I have listed a few reasons why the reflection is not visible.


Why can’t a see any reflections?

* Make sure you have saved you .fla file and it is in the same directory the reflection class.
* Make sure you have selected the top left registration point when you created a symbol.
* Make sure the alpha is not set to 0.

Time delay in Actionscript 3

In Actionscript 3.0 there are two ways of setting a time delay. Firstly, there is the setInterval function from AS2, or there is the Timer class in AS3. The setInterval function is not a reliable method as the results are based on the frame rate of the flash document, and also the memory of the movie clip. So, the fps of the flash document will have an effect of the accuracy of the time delay.

Below is an example of how to use the setInterval function. In Actionscript 3.0 you need to add the flash.utils package. The first parameter of the setInterval function is method that will be executed, and the second is the delay in millisecond.

import flash.utils.*;

setInterval(showMessage,3000);

function showMessage(){
trace("hello");
}

The code above calls the function ‘showMessage’, which will display the message ‘hello’ appropriately every three seconds. If you want to stop the message after one delay of three seconds you can use the ‘clearInterval’ function shown below.

import flash.utils.*;

var test = setInterval(showMessage,3000);

function showMessage(){
trace("hello");
clearInterval(test);
}

The Timer class for setting a delay in Actionscript 3.0 is more robust then using the setInterval function, but still has the accuracy issues with the frame rate the memory. Below is the code for setting a time delay:

var myDelay:Timer = new Timer(3000);
myDelay.addEventListener(TimerEvent.TIMER, showMessage);
myDelay.start();

function showMessage(event:TimerEvent):void{
trace("hello");
}

The code above adds a new instance of the Timer class with a delay of three seconds. The event listener has the TimerEvent class and the parameter showMessage which display the message ‘hello’.

Below is an example of a time delay with the Timer and TimerEvent classes. The red square moves 50 pixels to the right every two seconds.




Another technique of setting a time delay is to use the getTimer() method. This method calculates the number of milliseconds the have passed since the start of the movie playing. So by initially setting a getTimer() method at the start of a movie we can set a time delay by subtracting the current millisecond passed by the start time. Below is an example of using the getTimer() method to trace out a message after 5 seconds.

var startTime=getTimer();

stage.addEventListener(Event.ENTER_FRAME, timeDelay);

function timeDelay(event:Event):void {
 var timePassed=getTimer();
 if (timePassed-startTime >= 5000) {
  trace("Hello ilike2flash");
 }
}

Custom context menu in Actionscript 3 - part 2

This is part 2 from the previous Custom context menu in AS3. I will discuss how to add a custom menu to a sprite/movie clip object, and also how to add link functionality to the custom menu.


4. Add Custom context menu to either Sprites/Movie clip objects

You can also add a custom context menu to sprite or movie clip objects. The process it exactly the same, but you need to add a reference to the context menu.

Select any shape tool and create a basic shape on the stage. Convert your shape into a symbol and then give your shape the instance name: “my_symbol”. Open up the actions panel and enter the following code. Most of the code should be familiar only the last line is different.

var my_cMenu:ContextMenu = new ContextMenu();

my_cMenu.hideBuiltInItems();
var my_name = new ContextMenuItem("ilike2flash");
my_cMenu.customItems.push(my_name);

my_symbol.contextMenu = my_cMenu;

Now, try right clicking the shape and areas with no shape. You should notice the custom context menu when you right click on the stage.




5. Add link functionality to the context menu

Adding link functionality to the context menu involves adding an event listener method to the menu item. In the event listener you need to use the ContextMenuEvent Class and the MENU_ITEM_SELECT which will allow you to interact with the objects in the context menu.

Open up the Actions panel and enter the following code:

var my_cMenu:ContextMenu = new ContextMenu();

my_cMenu.hideBuiltInItems();
var my_name = new ContextMenuItem("ilike2flash");
my_cMenu.customItems.push(my_name);

my_name.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openName);
function openName(event:ContextMenuEvent){
navigateToURL(new URLRequest("http://www.ilike2flash.com"));
}

contextMenu = my_cMenu;

Test your movie Ctrl + Enter. Now, right click and test the link on the context menu.


Related tutorials
Open URL
Mailto button

Load external text in Actionscript 3

In this tutorial you will learn how to load external text into a dynamic text field in Flash. You will need to use the URLRequest and the URLLoader classes. The URLRequest class is used to capture all the request information, and the URLLoader is used to load up the request information. More information on these classes can be found at the AS3 component reference.


Load external text in Actionscript 3.0

Step 1

Open a Flash AS3 file.
Then open up notepad or an equivalent program and write the message: “This is externally loaded text” and save the file with the name “external_text” in the same location as the fla file.




Step 2

Select the text tool and drag and dynamic text field on the stage like below:




Step 3

Using the selection tool (V) select the dynamic text field and give the following instance name: “my_txt” as shown below:




Step 4

On the timeline insert a new layer called “Actions”. Select the first frame and hit F9 to open the Actions panel and enter the following code:

//1.
var my_req:URLRequest = new URLRequest("external_text.txt");
var my_loader:URLLoader = new URLLoader();

//2.
my_loader.addEventListener(Event.COMPLETE, loadText);
my_loader.load(my_req);

//3.
function loadText(event:Event):void{
my_txt.text = my_loader.data;
}

Code:
1. This creates new instances of the URLRequest and the URLLoader classes. Note that the URLRequest has the name of the text file inside the parenthesis. The text file also has to be in the same location as fla file.
2. This is an event listener to listen to when the text file has finished loading using the ‘Event.COMPLETE’ event. The load method receives the data from the text file.
3. This is the load text function sets the text from the text file to the dynamic text field.


Step 5

Test your loaded external text Ctrl + Enter. You should get the following message below:


You should now be able to load external text.

Custom context menu in Actionscript 3

I previously created a tutorial on disabling the context menu in AS3. This time I will be adding custom menu items to the context menu. The custom menu items are basically captions that are displayed in the context menu in Flash. You will need to use the ContextMenuItem class for this tutorial more information can be found AS3 ContextMenuItem component reference. There are some restrictions when using the ContextMenuItem class, below is a list of some of them:

* Maximum of 15 custom items in a context menu.
* Custom items must contain at least one character.
* Maximum of 100 characters.
* Each caption cannot be the same or it will be ignored.
* Certain words cannot be used. E.g. save, paste, Adobe, settings, open… (Full list can be found at the ContextMenuItem component reference)

The majority of the code below should look familiar from the disable context menu in AS3, so be sure to have looked at the code from that tutorial.


Custom context menu in Actionscript 3.0

1. Add one custom item

Open a new Flash AS3 file.
Select F9 to open up the Actions panel and add the following code:

//1.
var my_cMenu:ContextMenu = new ContextMenu();

//2.
my_cMenu.hideBuiltInItems();

//3.
var my_name = new ContextMenuItem("ilike2flash");

//4
my_cMenu.customItems.push(my_name);

//5.
contextMenu = my_cMenu;

Code:
1. Creates an instance of the ContextMenu class with the variable ‘my_cMenu’.
2. The hideBuilt items method hide the existing default items in the context menu.
3. Creates a contextMenu item with the caption ‘ilike2flash’.
4. Adds contextMenu item to the array.
5. This sets the item to the context menu which will disable the custom caption.


Test your custom context menu Ctrl + Enter and you should see the following when you right click on the stage.




2. Add multiple custom items

You can repeat the process above and add multiple customs items. Open up your actions panel and enter the following code:

var my_cMenu:ContextMenu = new ContextMenu();
my_cMenu.hideBuiltInItems();

var my_name = new ContextMenuItem("ilike2flash");
var my_tut = new ContextMenuItem("tutorials");
var my_sub= new ContextMenuItem("subscribe");
var my_con = new ContextMenuItem("contact");
my_cMenu.customItems.push(my_name,my_tut,my_sub,my_con);

contextMenu = my_cMenu;

You should get the following context menu below:




3. Change the properties of the context menu

There are three main properties you adjust in the context menu which are:

* separatorBefore – This specifies whether a separator bar should appear above a menu item. The default value is false.
* Visible – This specifies whether the context item is visible. The default value is false.
* Enabled – This specifies whether the context menu will be disabled or enabled. The default value is true.


The properties above are all Boolean values, so to use them you have to states whether they are true or false. Below is an example of the separatorBefore property. Open up your Actions panel and enter the following code:

var my_cMenu:ContextMenu = new ContextMenu();
my_cMenu.hideBuiltInItems();

var my_name = new ContextMenuItem("ilike2flash");
var my_tut = new ContextMenuItem("tutorials");
var my_sub= new ContextMenuItem("subscribe");
var my_con = new ContextMenuItem("contact");
my_cMenu.customItems.push(my_name,my_tut,my_sub,my_con);

my_tut.separatorBefore = true;
my_sub.separatorBefore = true;

contextMenu = my_cMenu;

You should get the following custom menu below. Try experimenting with the visible and enable properties.



Checkout Custom context menu part 2 for adding custom context menu to a sprite/movie clip object, and adding link functionality.

Deco tool in Flash CS4 part 2

This is the continuation of the previous Deco tool in Flash CS4. I will be discussing the Grid Fill and the Symmetry Brush.


Grid Fill

This effect lets you fill the stage with a symbol from the library into a grid structure like a tiled background or checkerboard. The default Grill fill contains black rectangles which looks like below:



You can change the black rectangles for any symbols you have in the library. Below are the properties for the Grill fill.



1. This lets you change the drawing effect. You can choose Vine Fill, Grid Fill and Symmetry Brush.
2. You can change the default colour for the rectangle shape, or you can hit the ‘Edit’ to select a symbol from the library.
3. This allows you to change the horizontal distance between the shapes in the Grid Fill.
4. This allows you to change the vertical distance between the shapes in the Grid Fill.
5. Increases/decreases the size of the shape in the Grid Fill.


Below is an example of a custom symbol using the Grid Fill. I have used a image of a hand as the custom symbol.




Symmetry Brush

This lets you move symbols around a centre point in symmetry. When the Symmetry brush is selected a set of handles appear on the stage. The handles allow you to rotate symbol, increase the distance from the centre and increase the number of symbols. The default Symmetry brush contains rectangle shapes arranged in a circle shape which is shown below:



You again can change the black rectangles for any symbols you have in the library. Below are the properties for the Symmetry brush.




1. This lets you change the drawing effect. You can choose Vine Fill, Grid Fill and Symmetry Brush.
2. You can change the default colour for the rectangle shape, or you can hit the ‘Edit’ to select a symbol from the library.
3. This contains a drop down options which includes:

* Reflect Across Line – reflects a symbol/shape from an equal distance.
* Reflect Around Point – two symbols/shapes equal distance apart.
* Rotate Around - rotates a symbol/shape in a fixed point.
* Grid Translation – creates a grid of shapes in symmetry. You can change the location by dragging the handles

4. This stops symbols/shapes from touching each other regardless of the number.

Disable context menu in Actionscript 3

In this tutorial you will learn how to disable the right click context menu when a flash movie clips is running. The context menu by default contains the following: zoom in, 100%, show all, quality and print. The default menus could affect the overall look and flow of the Flash file created by the developer, so disabling the context menu can remove any inconveniences or problems.

You will need to use the ContextMenu class for this tutorial, more information on this class can be found at the ContextMenu AS3 component reference.


Disable context menu in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select Ctrl + Enter and right click on the stage and you should see the following:



**This is the default context menu on the stage.


Step 2

Now, time to remove the default context menu. Hit F9 to open up the actions panel and enter the following code:

//1.
var my_cMenu:ContextMenu = new ContextMenu();

//2.
my_cMenu.hideBuiltInItems();

//3.
contextMenu = my_cMenu;

Code:
1. Creates an instance of the ContextMenu class with the variable name ‘my_cMenu’ which will reference the content menu.
2. The ‘hideBuiltItems’ method hides all the default items in the context menu.
3. This sets the item to the property which will hide all the menu items.


Step 3

Test the movie clip Ctrl + Enter. You should notice the default menu items have now been moved, but the items in the following image below cannot be removed.



Why not checkout the custom context menu tutorial ?

Deco tool in Flash CS4

The Deco tool is a new tool in Flash CS4, the name ‘Deco’ is shorthand for decorate. This tool is used to draw patterns and shapes on the stage. The default Deco tool produces vine and flower graphics by default, but can also use symbols from the library similar to the spraying symbols using the spray brush tool.

The Deco tool works in the same way as the paint bucket tool. You click the location where you want deco pattern to appear. Below I will discuss how to use the Deco tool in Flash CS4.


Deco tool in Flash CS4

Step 1 – Select the Deco tool

First, select the Deco tool. It can be found in the toolbar below the pencil tool shown below:



Step 2 – Experiment with tool

Click on the stage and you should see a pattern of vines and flower filling up the entire stage area like below:



You can also use the deco tool on shapes. Below I have created a rectangle shape with a 2 pixels black stroke and no fill.




Step 3 – Select the properties

Clear the stage area and take a look at the properties panel at the right of the screen. There are 3 different effects to choose from which: Vine Fill, Grid Fill and Symmetry Brush. I will be discussing each of the effects in detail.

Vine Fill

This effect lets you fill the stage with a vine pattern or a symbol. You have the option to replacement the leaf and flower with your own symbols.



1. This lets you change the drawing effect. You can choose Vine Fill, Grid Fill and Symmetry Brush.
2. You can choose a different fill colour for the leaf, or select the ‘Edit’ to replace you the leaf with a symbol from the library.
3. Similar to the above, you can choose a different fill colour for the flower, or select the ‘Edit’ to replace you the flower with a symbol from the library.
4. Changes the angles of the branch pattern.
5. Scales the pattern in the horizontally and vertically directions.
6. Changes the length of the leaf and flower nodes.
7. Every time the deco tool is used, a new frame will appear in the timeline. This allows you to create a frame by frame animation of the pattern sequence. The ‘Frame Step’ at the bottom indicates the number of frames per second the pattern will be drawn.

Note: 4 – 7, cannot be changed after you have filled a pattern with the Deco tool.

Below is a simple example of a custom symbol instead of the leaf pattern.



Checkout the Deco tool in Flash CS4 part 2 for the Grid Fill and the Symmetry Brush.

Spraying symbols in Flash CS4

The Spray Brush tool allows you to spray graffiti style airbrush effects on the stage. You can also use the spray brush tool to spray instances of symbols on the stage. This can be useful if you want to spray many symbols randomly on the stage.

Below I will discuss how to spray symbols in Flash CS4. Checkout the Spray Brush tool article, if you don’t know how to use the spray tool.


Spraying symbols in Flash CS4

Step 1

Create your symbol by selecting Insert > New Symbol. Give your symbol an appropriate name, check movie clip and click ok. Then create your symbol and return to the main stage. I have created a simple rectangle shape, but you can create whatever shape you wish.



Alternatively, you can import a graphic by selecting File > Import > Import to Library and convert it into a symbol.


Step 2

Select the Spray Brush tool.
Click the ‘Edit’ button from the symbol section of the properties panel like below:



A swap symbol dialog box should appear. Select the symbol you want from the list and click ok.


Step 3

Before you start spraying, I will discuss the properties of the spray symbol shown below.



1. This changes the width and height of the symbol by adjusting the sliders. It is recommended that you change both parameters with the same value.
2. You can give your symbol some diversity by checking the following options: random scaling, rotate symbol and random rotation.
3. You can change the width, height and brush angle of the spray symbol. The default width and height is 92 pixels.


Step 4

Have some fun spraying your symbol.



Why, not try spraying graphics? I have sprayed a graphic of a pint of beer.

Spray brush tool in Flash CS4

In Flash CS4 there is a new tool called the ‘Spray brush tool’ and like name suggest it sprays graffiti style airbrush effects. You can also load up your own symbols from the library panel, and spray the symbols on stage.

The spray brush tool works in the same way as the regular brush tool. You click and move your mouse to the get the spray effect. Below I will discuss how to use the Spray brush tool in CS4.


Spray brush tool in Flash CS4

Step 1 – Select the Spray brush tool

First, you have to select the spray brush tool. It can be found in the same location as the brush tool shown below.




Step 2 – Choose the properties

Before you start spraying on the stage, I must draw your attention to the spray brush properties on the right side of the workspace. If you do not see the properties you can select Window > properties (Ctrl + F3). The properties panel should look like below:



1. Don’t worry about the Symbol section this will be discussed in the spraying symbols article.
2. You can change the spray colour to whatever you wish.
3. The scale specifies how large the overall spray will be. The default is 100%, and the maximum is 40000%.
4. This is the brush section: The width and height determines how large a spray per click the tool will produce. The default values are 92 x 92 pixels. You can change this to whatever you wish. The brush angle determines the angle that the spray tool will spray.


Step 3 – Spray the tool

Have some fun experimenting with the new spray tool.

Simple stopwatch in Actionscript 3

In this Flash tutorial you will learn how to create a simple stopwatch in Actionscript 3.0. The stopwatch uses the AS3 Timer class and contains three buttons: a start, stop and reset. This tutorial is similar to the countdown timer in AS3, but counts up the seconds instead of counting down.

Simple stopwatch in Actionscript 3

Step 1

Open a new Flash AS3 File.
Create three buttons on the stage using the shape tools. Alternatively, you can use the built in buttons library like I have by selecting Window > Common Libraries > Buttons. I have used "round grey" from the buttons rounded folder.




Step 2

Select each button in turn and give them the following instance names respectively: start_btn, stop_btn and reset_btn.




Step 3

Select the dynamic text tool and drag a rectangle shape on the stage like below. Then give your dynamic text the instance name “myText_txt”.




Step 4

On the timeline create a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.
myText_txt.text = "0";
var myTimer:Timer=new Timer(1000,0);
myTimer.addEventListener(TimerEvent.TIMER, stopWatch);

//2.
function stopWatch(event:TimerEvent):void {
myText_txt.text=String(myTimer.currentCount);
}

//3.
start_btn.addEventListener(MouseEvent.CLICK, startClock);
stop_btn.addEventListener(MouseEvent.CLICK, stopClock);
reset_btn.addEventListener(MouseEvent.CLICK, resetClock);

//4.
function startClock(event:MouseEvent):void {
myTimer.start();
}

//5.
function stopClock(event:MouseEvent):void {
myTimer.stop();
}

//6.
function resetClock(event:MouseEvent):void {
myTimer.reset();
myText_txt.text="0";
}

Code:
1. This initially sets the stopwatch at zero seconds you can change this if you want to start the stopwatch from a different number. The second line of code creates a new timer with the instance name “myTimer”. The first parameter is the interval value in milliseconds which is the delay between each timer event, so 1000 would equal a one second interval. The second parameter is the repeated count. The repeated count is set to zero which means it will keep counting indefinitely. The next line is the event listener for the timer. The “Timer.event.Timer” is the event and stopwatch is the function which is called every time for the event.
2. This is the stopwatch function which converts a number into a string and displays the current timer count.
3. These are the event listeners for the buttons which have the mouse click event.
4. The startClock function starts the timer.
5. The stopClock function stops the timer.
6. The resetClock function resets the timer and sets the stopwatch number to zero.


Step 5

Test your stopwatch Ctrl + Enter.




You should now have a simple stopwatch in Actionscript 3.0. The source files can be downloaded here.

Tweens in Actionscript 3

In this Flash tutorial you will learn how to use tweens in Actionscript 3.0. Tweens are basically a way of animating a movie clip over a number of seconds with Actionscript code. A tweened movie clip can be moved, resized or faded using the Tween class. The Tween class also provides different easing methods. These methods can cause the objects to accelerate or deceleration during an animation. (EaseIn & EaseOut).

To use Tweens you will need to add the following two lines of code at the start of your code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

The first line of code imports the Tween class from the fl.transitions base class. As mentioned above the Tween class uses Actionscript code to move, fade and resize movie clips to be animated over a number of seconds. The second line of code imports the all the easing classes from fl.transitions base class. As briefly mentioned above, the easing class creates an easing effect which causes an object to accelerate or deceleration during an animation.

For more information on these classes checkout the:
‘AS3 Tween Components Reference’ and the ‘AS3 fl.transitions.easing Components Reference’.


Tweens in Actionscript 3 - part 1

Step 1

Open a new Flash AS3 file.
Select the rectangle tool and draw a rectangle shape on the stage. You can choose whatever colour you wish, I have selected #FF0000 colour. Your rectangle should looks something like below:




Step 2

Convert your rectangle into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok. Now give your rectangle the instance name: rectangle_mc




Step 3

On the timeline create a new layer called “Action”. Select the first frame and hit F9 to open up the action panel and enter the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

//1.
var myTween:Tween = new Tween(rectangle_mc, "x", Strong.easeOut, 0, 300, 5, true);

Code
1. The code above creates a new instance of the tween class with name “myTween”.

• The first parameter is object you want to animate.
• The second parameter is the property you want to affect. Some of the other properties you can affect are: y, z, width, scaleX, scaleY, scale Z, rotationX, rotationY, and rotationZ.
• The third parameter is the name of the easing function. You can also use Back, Bounce, Elastic, None, Regular, and Strong.
• The fourth parameter is the starting position of the object.
• The fifth parameter is the ending position of the object.
• The sixth parameter is the duration of the motion.
• The seventh parameter is the useSeconds. This specifies whether you want to use seconds or frames. Choose true for frames and false for seconds.

Step 4

Test your tween Ctrl + Enter. You should see your rectangle movie clip from left to right in five seconds.



>You should now be able to use Tweens in Actionscript 3.0.

Check back later for Tweens in Actionscript 3.0 part 2 where I will discuss the other Tween properties.

AttachMovie in Actionscript 3

The attachMovie method in Actionscript 2.0 has now been removed and replaced with the addchild in Actionscript 3.0. Below is a comparison of the two versions.

AS2

attachMovie("my_movie", "movie", 1);

AS3

var movie:MovieClip = new my_movie();
addChild(movie);

As you can see above the in AS2 the linkage ID is “my_movie”, whereas in AS3 the class name is “my_clip”. The process for dynamically adding a movie/button on the stage in AS3 is very similar to the previous AS2. Below I will show you how to attach a movie clip on the stage in Actionscript 3.0.


AttachMovie in Actionscript 3

Step 1

Open a new Flash AS3 file.
On the menu bar select Insert > New Symbol then give your symbol an appropriate name, select
movie clip, check Export to Actionscript and click ok.



When you check the Export to Actionscript, the class name and base class gets fills in automatically. The base class means the properties and methods get assigned to the movie clip class.


Step 2

Create an object on the stage I have created a simple rectangle shape, but you can whatever you wish. Now return to the main stage by selecting the back button.


Step 3

Select F9 to open up the actions panel and add the following code:

var rectangle:MovieClip = new my_rectangle();
addChild(rectangle);


Step 4

Test your movie clip Ctrl + Enter. The rectangle shape should now appear at the (0,0) position on the stage. The steps above assume you have no movie clips initially in the library. If you have a movie clip in the library you can right click on it and select properties. Then check the Export to Actionscript and click ok.

Full screen in Actionscript 3

Since Actionscript 2.0 your SWF files could be viewed in full screen using the stage.displayState function. In Actionscript 3.0, the exact same function is still available to use. This tutorial will teach you how to use the full screen mode using a basic button in Actionscript 3.0. For more information checkout the full screen mode on the Adobe website.

Full screen in Actionscript 3

Step 1

Create a new Flash AS3 File.
Create your button on the stage. I have created a basic rectangle shape with the message “full screen”, but you can create whatever kind of button shape you wish. Give your button the instance name “button1”. If you don’t know how to create buttons then checkout the basic buttons tutorial.





Step 2

On the timeline insert a new layer called “Actions”. Then right click on the first frame and select Actions and enter the following code:

//1.
function setFullScreen():void {
if (stage.displayState== "normal") {
stage.displayState="fullScreen";
stage.scaleMode = StageScaleMode.NO_SCALE;
} else {
stage.displayState="normal";
}
}

//2.
button1.addEventListener(MouseEvent.CLICK, goFull);

//3.
function goFull(event:MouseEvent):void {
setFullScreen();
}

Code:
1. This is a function for toggling in between full screen mode and normal mode. I have also included the “stage.scaleMode” function which maintains the size of the objects on the stage. If you comment this out, the objects on the stage will increase in size when you go into full screen mode.
2. Event listener for detecting mouse clicks with the parameter goFull. The code assumes you have the instance name “button1”.
3. This triggers the function “goFullScreen” which displays the SWF in the full screen mode.


When you embed your flash SWF into the html page you need to include the parameter “allowFullScreen” and the value “true” like below:

E.g. param name= “allowFullScreen” value= “true”

Note that when you test the full screen mode in Flash it will not work, as you will need to embed the SWF into the html. Although it will work if you publish the SWF then run it from the directory. When you are in full screen mode all keyboard inputs are disabled apart from the Escape key which ends the full screen mode.

The source files can be downloaded here.

Create a scratch card in Actionscript 3

In this tutorial you will learn how to create a scratch card effect in Actionscript 3. This effect will allow you to click and drag the mouse to reveal the image below, like a real scratch card. This tutorial uses masks to create the scratch card effect. You will also need an image to be revealed. I have used a free stock image, but you can use whatever image you wish.

In AS2 the scratch card effect would have been quite difficult, as there were no shape classes to create the masked shape. You would have to manually write lots of code to create simple shapes like a circle. This is because there were only the lineTo() and curveTo() functions which meant you would have to use complicated maths to create any advanced shapes. However, in AS3 there are new shapes classes which reduce the code you need to write, and makes the process of the creating the scratch card easier.

Scratch card in Actionscript 3

Step 1

Open a new Flash AS3 file.
Set an appropriate stage size I have selected 400 x 200 dimensions, but you can use whatever size you wish.
Select the rectangle tool (R) with any colour and drag a rectangle shape to fill the entire stage area.
Now select the text tool (T) and type the message “Have a scratch” on top of your rectangle shape. I have used impact font type with #666666 colour.




Step 2

On the timeline lock “layer 1” and insert a new layer.
Then import your image on the stage by selecting File > Import > Import to Stage. Make sure your image fits exactly on top of your rectangle. You can use the free transform tool (Q) to adjust the image size.




Step 3

Select your image on the stage and convert it into a symbol by pressing F8. Give it an appropriate name, check movie clip and click ok. Now select your movie clip and give it the instance name: maskedbg_mc.




Step 4

On the timeline insert a new layer called “Actions”. Right click on the first frame and select Actions and enter the following code:

//1.
var mouseclick:Number=0;

//2.
var mask_mc:Sprite = new Sprite();
maskedbg_mc.mask = mask_mc;
addChild(mask_mc);

//3.
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseD);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseM);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseU);

//4.
function mouseD(event:MouseEvent):void {
mouseclick = 1;
}

//5.
function mouseM(event:MouseEvent):void {
if (mouseclick == 1) {
mask_mc.graphics.beginFill(0x000000);
mask_mc.graphics.drawEllipse(mouseX, mouseY, 70, 60);
mask_mc.graphics.endFill();
}
}

//6.
function mouseU(event:MouseEvent):void {
mouseclick = 0;
}

Code:
1. Creates a variable called “mouseclick” and sets the number value to zero.
2. Creates a new sprite called “mask_mc” and sets the masked objects to the background image. Also adds the sprite onto the stage.
3. Adds three event listeners for the mouse down, move and up events. Each of the three event listeners has different functions.
4. This function gives the “mouseclick” variable a value of 1, when the mouse is depressed.
5. This function checks whether the mouse has been depressed. If the mouse has been depressed, then any mouse movements will revealed the image below. The mask_mc is an ellipse shape with the position at the mouse x and y location; the width = 70 and height = 60. (Checkout the Actionscript 3.0 graphics component reference for more details)
6. This function returns the “mouseclick” variable to 0, which stops the image being revealed below.


Step 5

Test your scratch card Ctrl + Enter. Now use your mouse to click and drag, you should see the image below.



You should now have a scratch card effect. The source files can be downloaded here.
Checkout part 2 where you can have a random background.