Generate random numbers in Actionscript 3

In this tutorial you will learn how to generate random numbers in Actionscript 3. The random numbers are generated using the Math.random function. There are many ways of achieving the random number effect, but I will show you the most common method. Some knowledge of basic buttons is needed for this tutorial.


Generate random numbers in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the text tool with dynamic text and drag out a text box like below. I have checked the ‘show border around text’ button as well.



I have also included the message “random numbers” above the dynamic text box using a doubled knocked out text effect. Now give your dynamic text box the instance name: showRandom_txt.


Step 2

Create your basic button on the stage. I have used a default button which can be found at Windows > Components, but you can alternatively create your own button on the stage. For more information on buttons checkout the basic buttons tutorial.




Step 3

Give your button the instance name: generate_btn. If you have created your own button then you should first convert it into a symbol.




Step 4

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:

//1.
function randomNumbers(min:Number,max:Number) {
   var Results:Number=Math.floor(Math.random()*max)+min;
   return Results;
}

//2.
generate_btn.addEventListener(MouseEvent.CLICK, showRandomnumber);

//3.
function showRandomnumber(event:MouseEvent):void{
   showRandom_txt.text = randomNumbers(1,100);
}

Code:

1. This is a function for generating the random numbers using the Math.Random function.
2. This add an event listener to the generate button with the mouse click event.
3. This is a function which displays the random numbers. Currently the random numbers range from 1 – 100, but you can change this to whatever you want by changing the numbers inside the parenthesis. The first number in the parenthesis refers to the minimum number and the second number refers to the maximum number.

Step 5

Test your random numbers Ctrl + Enter. Now click the generate button and you should get a random number between 1 and 100.




You should now be able to generate random numbers in Actionscript 3.0.

Attach movie clip dynamically in Actionscript 3

In this tutorial you will learn how to attach a movie clip dynamically using Actionscript 3.0. I will be using a default Flash button to attach movie clips randomly on to the stage. This tutorial uses the same attachMovie method from the AttachMovie in Actionscript article.


Attach movie clip dynamically in Actionscript 3

Step 1

Open a Flash AS3 file and set the stage size to whatever size you wish.
Select Insert > New Symboland give your symbol an appropriate name select movie clip as the type and click ok.



Select any of the shape tools and create your object on the stage. I have created a simple circle shape with #FF0000 colour and a 2pt stroke, but you can create whatever kind of shape you wish.


Step 2

In the library right click on your movie clip and select ‘Properties’ then check the ‘Export for Actionscript’ checkbox like below. Make sure you have given an appropriate class name as this will be needed later on. Then click ok, if you receive a Actionscript class warning click ok.




Step 3

Select Window > Components and drag the button component onto the stage. Alternatively you can create your own button on the stage at this point.


Then give your button the instance name: attachMovie_btn


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:

attachMovie_btn.addEventListener(MouseEvent.CLICK, attachMovieclip);

function attachMovieclip(event:MouseEvent):void {
var addCircle:Circle = new Circle();
addCircle.x= Math.random()* stage.width;
addCircle.y= Math.random()* stage.height;
addChild(addCircle);

}

Code:
1. This adds an event listener to the ‘attachMovie_btn’ button with the click event.
2. This function creates a new instance of Circle class which is the object created in step 1. The position of the circle object is placed randomly on the stage and will be added when the user clicks on the button.


Step 5

Test your movie clip Ctrl + Enter. Now click the button and you should see random circles on the stage.




You should now be able to attach Movie clip dynamically in Actionscript 3.0.

Horizontal sliding menu in Actionscript 3

I previously created a vertical sliding menu in AS3. This time I will create the horizontal version of the sliding menu. Most of the content from the previous tutorial should look familiar only the code will be different. You will still need to use tweening, so checkout the Tweens in Actionscript 3 for more information.

UPDATE:Horizontal sliding menu part 2 now available.

Horizontal sliding menu in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the rectangle tool and create the horizontal shape for the background of your sliding menu. I have used #FFFE65 colour, but you can use whatever colour you wish.




Step 2

On the timeline insert a new layer called “button”, and then select the text tool with static text and create your menu items like below. Again I have used a knocked out text effect for the menu items.




Step 3

Select each menu item in turn and convert them into a symbol (F8). Give your symbols appropriate names, check button and select the bottom middle registration point as shown below:



You can change the button states for your symbol if you wish. For more information checkout the basic button tutorial.


Step 4

Give your menu the following instance names: home_btn, tutorials_btn, subscribe_btn and contact_btn.


Step 5

On the timeline insert a new layer called “follower”, and then create your object on the stage which will follow the menu items. I have created a simple rectangle shape like below.



Convert your follower object into a movie clip (F8) and give it the instance name: follower_mc. Then place your follower movie clip beside the first menu item like below.


Step 6

On the timeline create a new layer called ‘Actions’. Open up the actions panel F9 and enter the following code. Most of the code is the same from the vertical sliding menu.

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

//2.
var buttonsArr:Array=new Array(home_btn,tutorials_btn,subscribe_btn,contact_btn);

//3.
for (var i:uint = 0; i < buttonsArr.length; i++) {
buttonsArr[i].addEventListener(MouseEvent.ROLL_OVER, moveFollow);
}  

//4. function moveFollow(event:MouseEvent):void {
new Tween(follower_mc,"x",Strong.easeOut,follower_mc.x,event.currentTarget.x, 1,true);
} 

Code:

1. This imports the tween and transition classes which are needed to move the follower object.
2. Add all the buttons into an array called buttonsArr.
3. Loops through all the buttons in the array and adds an event listener with a mouse roll event and the moveFollow function.
4. This is the moveFollow function which creates a new tween and goes to the corresponding menu item when moused over. For more information on tween checkout the Tween in Actionscript 3 tutorial.

Step 7

Test your horizontal sliding menu Ctrl + Enter. Move your mouse over the menu items and you should notice the follower object move as well.




You should now have a horizontal sliding menu. The source files can be downloaded here.

Play external sound file in Actionscript 3

In this Flash tutorial you will learn how to play an external sound file in Actionscript 3.0. This is an update from the previous tutorial in Actionscript 2.0. The AS3 version is very similar to the play sound file in AS3 tutorial, only one additional line of code is needed.

You need to make sure your sound file is in the same directory as your .fla or the sound file will not play. I have used free stock music from: sounddogs.com.


Play external sound file in Actionscript 3

Step 1

Open a new Flash AS3 file and create two buttons on the stage. I have used two buttons from the built in button library, but you can alternatively create your buttons using the shape tools from the tool box.




Step 2

Give your buttons the instance names: play_btn and stop_btn respectively. If you have created your own buttons make sure you convert them into a symbol first.




Step 3

On the timeline insert a new layer called “Actions”. Then select the first frame and press F9 on the keyboard to open up the Actions panel and enter the following code. Most of the code below should look familiar only one line of code is new.

//1.
var my_sound:Sound = new Sound();
my_sound.load(new URLRequest("yoursoundfile.mp3"));
var my_channel:SoundChannel = new SoundChannel();

//2.
play_btn.addEventListener(MouseEvent.CLICK, playSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound);

//3.
function playSound(event:MouseEvent):void{
my_channel = my_sound.play();
}

//4.
function stopSound(event:MouseEvent):void{
my_channel.stop();
}

Code:
1. This creates a new instance of the Sound Class. The load method is then used to load the external sound file. A new instance of the Sound channel is also created.
2. This creates two event listeners for the buttons with the mouse click event.
3. This function plays the external sound file when clicked.
4. This function stop the external sound file when clicked.


Step 4

Test your external sound Ctrl + Enter.




You should now be able play external sound files in Actionscript 3.0. To play external wav file, take a look at this post.

Playing sound files in Actionscript 3

In this tutorial you will learn how to play internal sound files in Actionscript 3.0. This is an update from the previous ‘Create a sound button’ in Actionscript 2.0. The steps in AS3 are very similar to the AS2 version, only the code will look different. Below is a comparison of the two versions.

AS2

var my_sound:Sound = new Sound();
my_sound.attachSound("sound_id");
my_sound.start();

AS3

var my_sound:SoundId = new SoundId();
var channel:SoundChannel = my_sound.play();

As you can see above the Actionscript 3.0 version uses the sound and soundChannel classes to play sounds. This is different to the previous versions of Actionscript, but will give you more control when manipulating sounds.

You will need an audio file for this tutorial. I have used a free stock sound which is available from sounddog.com. Some knowledge of creating basic buttons is also needed for this tutorial.


Playing sound files in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import your audio file in the library by selecting File > Import > Import to Stage. Choose your file and then click ok.



In the library right click on your audio file and select ‘Properties’. Then select the advanced button and add the name “SoundId” for the class value, and also check Export to Actionscript and Export in frame 1. If a warning message appears click ok.


Step 2

Create a basic button on the stage which will be used to trigger the sound file. I have used two buttons from the built in button library. You can alternatively create your own buttons using the shape tools.



Give your buttons the instance names: play_btn and stop_btn respectively. If you are creating your own buttons make sure your convert them into a symbol (F8).


Step 3

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.
var my_sound:SoundId = new SoundId();
var my_channel:SoundChannel = new SoundChannel();

//2.
play_btn.addEventListener(MouseEvent.CLICK, playSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound);

//3.
function playSound(event:MouseEvent):void{
my_channel = my_sound.play();
}

//4.
function stopSound(event:MouseEvent):void{
my_channel.stop();
}

Code:
1. This creates a new instance of the sound class which is needed to use sounds. A new instance of the soundChannel class is also created. This is needed to stop the sound as there are no methods for stopping sounds using the Sound Class.
2. This is two event listeners for the buttons with the click mouse event.
3. This function plays the sound file when the play button is clicked
4. This function stops the sound file when the stop button is clicked.


Step 4

Test your movie clip Ctrl + Enter.



You should now be able play sound files in Actionscript 3.0.

Collision Detection in Actionscript 3

In Actionscript 3.0 there are two methods to detect collisions which are: the hitTestObject and the hitTestPoint. Firstly, the hitTestObject detects whether two display objects have collided or overlapped. I have previously made a tutorial on the hitTestObject which can be found here. The hitTestPoint detects whether a display object has intersected with a specified x & y point.

This tutorial will show you how to detect collisions using the hitTestPoint method which will detect whether the mouse’s x and y position has collide with an object. I have used a simple circle for the object in this tutorial, but any object can be created.


Collision Detection in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the oval tool and draw a simple circle shape on the stage like below. I have used #0000FF colour, but you can use whatever colour you wish.




Step 2

Select your circle shape and convert it into movie clip (F8). Then give it the instance name: ‘ball_mc’ as shown below.




Step 3

Select the text tool with dynamic text and drag a textbox below your circle like below:



Now give the dynamic text box the instance name: “hitText_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.
stage.addEventListener(Event.ENTER_FRAME, detectCollision);

//2.
function detectCollision(event:Event) {
if (ball_mc.hitTestPoint(mouseX,mouseY,true)) {
hitText_txt.text="Ball hit";
} else {
hitText_txt.text="No hit";
}
}

Code:
1. This adds an event listener to the stage with the enter frame event and the detectCollision parameter.
2. This function checks whether the mouse’s x & y position has collide with the ball object. The third parameter for the hitTestPoint method is the shapeflag which checks for the actual pixel of an object (true) or the bounding box (false).


Step 5

Test your collision detection Ctrl + Enter. Now move your mouse over the ball and you should see a different message.



You should now be able to perform collision detection in Actionscript 3.0.

Drawing lines in Actionscript 3

In this tutorial you will learn how to create a simple line drawing app in Actionscript 3 using the graphics class. This will let you to draw lines when you move your mouse. This tutorial contains mostly code and the creation of a simple button to clear the lines you have drawn. Some knowledge of basic buttons are needed for this tutorial.


Drawing lines in Actionscript 3 – part 1

Steps 1

Open a new Flash AS3 file.
Set an appropriate stage size for your drawing line app.


Step 2

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

//1.
var drawingLine:MovieClip = new MovieClip();
addChildAt(drawingLine,0);

//2.
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

//3.
function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

//4.
function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
}

//5.
function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

Code:
1. This creates a new instance of a move clip with the name ‘drawingLine’ and adds the movie clip to the stage.
2. This adds two event listeners to the stage with the mouse down and mouse up events, and the ‘MouseDown’ and ‘MouseUp’.
3. This is the MouseDown function which has the linestyle method. This method has the parameter of three which defines the thickness of the line. More information on this method can be found at AS3 graphics component reference. The moveTo method moves the currents drawing position to the mouse x and mouse y position.
4. This is the MouseMove function which creates a line when the mouse is moving the left mouse button is depressed.
5. This is the MouseUp function which removes the mouse move event from the stage. This stops any lines from drawing when the left mouse button is up.


Step 3

Create a simple button on the stage. I have created a black button with white text, but you can create whatever kind of button you wish. If you don’t know how to create buttons checkout the basic buttons tutorial.



Convert your button into a symbol (F8). Then give it the instance name: “clear_btn”.




Open up your actions panel (F9) and add the remaining code below:

//1.
clear_btn.addEventListener(MouseEvent.CLICK, clearScreen);

//2.
function clearScreen(event:MouseEvent):void{
drawingLine.graphics.clear();
}

Code:
1. This adds an event listener to the clear button.
2. This function clears all the lines that were drawn from the graphics object.



Step 4

Test your drawing line app Ctrl + Enter. Now have some fun drawing lines, you can also clear the lines by selecting the clear button.




You should now be able to draw lines in Actionscript 3.0. Checkout Drawing lines part 2 where you will learn how to change the colour of the lines. The source files can be downloaded here.

Reversing a string in Actionscript 3

In this tutorial you will learn how to reverse a string in Actionscript 3.0. You need to use the following three methods to reverse a string: split(), reverse() and join(). Some knowledge of basic buttons is also needed for this tutorial. I have created a simple Flash app where you enter your message you wish to reverse, and the result get displayed in an output textbox.


Reversing a string in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the text tool with input text and drag a textbox like below. I have also checked the ‘show border around text’ button, and included the message “Enter message” above the static textbox.




Step 2

Drag another textbox but this time select dynamic text. Again I have also checked the ‘show border around text’ button, and included the message “Reversed Message” above the dynamic textbox.




Step 3

Give your textboxes the following instance names accordingly: input_txt and output_txt. The ‘input_txt’ is for the input textbox, and the ‘output_txt’ is for the dynamic textbox.


Step 4

Create a button on the stage if you don’t know how to create checkout the basic buttons tutorials. I have basic black button with the text ‘reverse’ in the centre of the button.


Convert your button a symbol (F8) and give it the instance name: “change_btn”.


Step 5

On the timeline create a new layer called “Actions”. Select the first frame then hit F9 and enter the following code:

//1.
change_btn.addEventListener(MouseEvent.CLICK, reverseMessage);

//2.
function reverseMessage(event:MouseEvent):void {

var textInput:String = input_txt.text;

var inputArr:Array=textInput.split("");
inputArr.reverse();

var reverseStr:String=inputArr.join("");
output_txt.text = reverseStr;

}

Code:
1. This is an event listener to the ‘change_btn’ with the mouse click event and the reverseMessage parameter.
2. This is the reverseMessage function. The first line creates a new variable called ‘textInput’ which holds the data from when the user inputs text from the input box. The data from the input is then split into an array with an empty string as the delimiter. The reverse then is then called which reverses the order of the array. A new variable called ‘reverseStr’ is created which joins the reversed string together. Finally the reversed string is display in the output text box.


Step 6

Test your movie clip Ctrl + Enter. Now type some text and hit the reverse button and you should notice your text is reversed. Try reversing the following message: “enoyreve olleh” and leave a comment with the answer.



You should now be able to reverse a string in Actionscript 3.0.

Find mouse position in Actionscript 3

This is an update from the previous mouse position tutorial in Actionscript 2.0. In this tutorial you will learn how to find the mouse position of the stage, and the position of a movie clip in Actionscript 3.0. This means that when you move the mouse you will see the x and y positions of the stage, and of the movie clip. The AS3 version is only a little different to the AS2 one. I have created this tutorial in Flash CS4.


Find mouse position in Actionscript 3

Step 1

Open a new Flash AS3 File.
Set an appropriate stage size and whatever background colour you wish. I have used #65FF98 colour, but you can use whatever colour you wish.
Select the text tool with dynamic text and drag four text boxes near the bottom left of the stage like below:



**Make sure your dynamic text boxes are of a reasonable size.


Step 2

Select each dynamic text box in turn and give them the following instance names: xstage_txt, ystage_txt, xmovie_txt and ymovie_txt.



If you are using Flash CS4 you will need to embed the following for each dynamic text box: Uppercase, Lowercase, Numerals and Punctuation.


Step 3

Select the rectangle tool and drag a rectangle shape at the centre of the stage area like below. You can use whatever colour of rectangle you wish.



Convert your rectangle into a movie clip by selecting F8. Make sure you select the top left registration point. Then give the movie clip the following instance name: ‘box_mc’.


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.
stage.addEventListener(MouseEvent.MOUSE_MOVE, mousePosition);

//2.
function mousePosition(event:MouseEvent) {
xstage_txt.text= "X Stage: " + String(mouseX);
ystage_txt.text= "Y Stage: " + String(mouseY);

xmovie_txt.text= "X MovieClip: " + String(box_mc.mouseX);
ymovie_txt.text= "Y MovieClip: " + String(box_mc.mouseY);

}

Code:
1. This adds an event listener to the stage with the mouse move event and the parameter mousePosition.
2. This is the mousePosition function which displays the x and y position on the stage using the mouseX and mouseY properties. The movie clips position is also displayed using the mouseX and mouseY properties of the movie clip.


Step 5

Test your mouse position Ctrl + Enter. Now move your mouse and you should see the relative x and y positions, as well the positions of the move clip. So, the top left position should be (0, 0), and the top left the movie clip should also be (0, 0). If the messages on the dynamic text boxes are flashing or not showing up, try increasing the size of the text box.



You should now be able to find the mouse position in Actionscript 3.0. The source files can be downloaded here.

Follow object with mouse in Actionscript 3

In this tutorial you will learn how to follow an object with the mouse in Actionscript 3.0. This means that when you move the mouse the object will follow. I have created two different variations in this tutorial for the ‘follow object’. The first variation follows the mouse’s x and y position which will means the object moves when the mouse moves. The second variation follows the mouse’s position with a slight delay, so when you move the mouse the object will follow with a small pause.


Follow object with mouse in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select Oval tool (O) and create a simply circle shape on the stage like below. You can alternatively create a different shape or import an image if you wish.





Step 2

Convert your circle shape into a symbol by selecting F8. Give your symbol appropriate name, check movie clip, choose the centre registration point and click ok.

Select your movie clip and give it the instance name “ball_mc”.




Step 3 (first variation)

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.
stage.addEventListener(MouseEvent.MOUSE_MOVE,followBall);

//2.
function followBall(event:MouseEvent):void {
ball_mc.x=mouseX;
ball_mc.y=mouseY;
}

Code:
1. This adds an event listener to the stage with the mouse move event and a followBall parameter.
2. This is the followBall function which set the ball’s x and y position to the mouse’s x and y position.


You should get the following:




Step 3 (Second variation)

This is an alternative step to the one above. Be sure to remove all the code from the above step before attempting this step.

//1.
stage.addEventListener(Event.ENTER_FRAME,followBall);

//2.
function followBall(event:Event):void {
var dx:int = ball_mc.x - mouseX;
var dy:int = ball_mc.y - mouseY;
ball_mc.x -= dx / 5;
ball_mc.y -= dy /5;
}


Code:

1. This adds an event listener to the stage with the enter frame event and the followBall parameter. The enter frame event repeatedly executes the followBall function at runtime.
2. This creates two new variables called ‘dx’ and ‘dy’ which subtracts the ball’s x and y position from the mouse’s x and y position. This allows us to work out the distance of the ball from the mouse.

You should get the following:

Random password generator

I have created a random password generator in Actionscript 3.0. This generator creates four different kinds of passwords which are:

• Combinations of uppercase, lowercase and numbers (0-9).
• Uppercase characters.
• Lowercase characters.
• Numbers (0-9)

There is also the option of changing the length of the passwords in the generator. The default password length is seven characters. You can have up to 99 characters in your password if you wish. The password characters are automatically copied to the clipboard when you click generate or click on the characters. So, there is no need to copy and paste the passwords. Below is a preview of the random password generator.





The tutorial for this random password generator will be coming shortly, so be sure to subscribe or check back later.

Vertical sliding menu in Actionscript 3

In this tutorial you will learn how to create a vertical sliding menu in Actionscript 3.0. A vertical sliding menu has an arrow which follows the menu items when the mouse is over a button. The sliding menu uses tweening to create the following of the menu items, checkout Tweens in Actionscript 3 for more information. I have created this menu in Flash CS4, but it should work in Flash CS3.


Vertical sliding menu in Actionscript 3

Step 1

Open a Flash AS3 file.
Select the rectangle shape tool and create the background to your sliding menu. I have used #CCCCCC for colour. Your shape should look something like below:




Step 2

On the timeline create a new layer called “buttons”. Select the text tool with static text and type the names of your menu items. I have used impact font with a knocked out text effect.




Step 3

Convert each of your menu items into symbols by pressing F8. Give your symbol an appropriate name, check buttons, select the left registration point and click ok.



Make sure you have selected the left registration point or this effect will not work. You can change the different button states if you wish. For more information checkout the basic buttons tutorial.


Step 4

Give each of your menu items appropriate instance names. I have used home_btn, tutorials_btn, subscribe_btn and contact_btn for my menu items.


Step 5

On the timeline create a new layer called “follower”. The layer will contain the movie clip that will follow the menu items.

Create your follower object on the stage I have created a simple arrow, but you can create whatever object you wish. I have used #FF0000 colour.




Step 6

Convert your follower object into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip, select the left registration point and click ok.

Give your follower object the instance name: follower_mc and then place the follower object beside your first menu item.




Step 7

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

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

//2.
var buttonsArr:Array=new Array(home_btn,tutorial_btn,subscribe_btn,contact_btn);

//3.
for (var i:uint = 0; i < buttonsArr.length; i++) { buttonsArr[i].addEventListener(MouseEvent.ROLL_OVER, moveFollow);
}

//4. function moveFollow(event:MouseEvent):void {
new Tween(follower_mc,"y",Strong.easeOut,follower_mc.y,event.currentTarget.y, 1,true); }
code:
1. Imports the tween and transition class which are needed to move the follower object.
2. Add all the buttons into an array called buttonsArr.
3. Loops through all the buttons in the array and adds an event listener with a mouse roll event and the moveFollow function.
4. This is the moveFollow function which creates a new tween and goes to the corresponding menu item when moused over. For more information on tween checkout the Tween in Actionscript 3 tutorial.


Step 8

Test your vertical sliding menu Ctrl + Enter. Move your mouse over the menu items and the follower object should move as well.



You should now have a vertical sliding menu. The source files can be downloaded here.

Flint particle system

Over at flintparticles.org I found a collection of free open source particle effect for Actionscript 3.0. The flint particle effects include fireworks, smoke, fire and many more. All the particles effects are under the MIT open source licence which means you are free to download, modify and publish the particles as you wish. Flint particles are developed by Richard Lord. The aim of the Flint is to create a system that handles common functionality for all particles systems.

A particle system is basically a graphical technique to simulate phenomenon which would be difficult to create. Examples of particles can include smoke, explosions, snow etc.

Below are some examples of the Flint particles.

Catherine wheel




Fireworks




Fire and smoke

Dynamically centre object in Actionscript 3

In this tutorial you will learn how to dynamically centre an object on the stage using Actionscript 3.0 code. This avoids you manually locating the centre of the stage which can save you time. I will demonstrate the centring of an object using a basic rectangle shape.


Dynamically centre object in Actionscript 3

Step 1

Open a Flash AS3 file.
Select the rectangle tool and drag a rectangle shape on the stage like below:




Step 2

Convert your shape into symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok.

Now give your movie clip the instance name ‘rectangle_mc’ as shown below:




Step 3

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

rectangle_mc.x=rectangle_mc.stage.stageWidth/2-rectangle_mc.width/2;
rectangle_mc.y=rectangle_mc.stage.stageHeight/2-rectangle_mc.height/2;


The code above can get quite irritating if you need to centre multiple objects. Below is the function for centring an object. This allows you to call a function rather than writing out lots of code:

function alignCentre(obj:DisplayObject):void {
obj.x=obj.stage.stageWidth/2-obj.width/2;
obj.y=obj.stage.stageHeight/2-obj.height/2;
}

Step 4

Test your object centring Ctrl + Enter. You should notice your object in the centre of the stage.



You should now be able to centre an object using Actionscript 3.0 code.