Countdown Timer in Actionscript 3

In this tutorial you will learn how to create a countdown timer in Actionscript 3.0. This is an update from the previous countdown in timer in AS2. The AS2 version used the setInterval function, but this has now been removed and been replaced with the Timer Class in AS3. I have used a Flash CS4 for this tutorial and start the countdown at 60 seconds, but this can easily be changed.

Countdown Timer in Actionscript 3

Step 1

Create a new Flash AS3 file.
Select the static text tool and type a message on the stage. I have used impact font type, but you can use whatever font you wish.




Step 2

Select the dynamic text tool and drag a rectangle shape like below:




Step 3

Select your dynamic text and give the instance name “myText_txt” like below:




Step 4

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

//1.
var count:Number = 60;

//2.
var myTimer:Timer = new Timer(1000,count);

//3.
myTimer.addEventListener(TimerEvent.TIMER, countdown);

//4.
myTimer.start();

//5.
function countdown(event:TimerEvent):void {
myText_txt.text = String((count)-myTimer.currentCount);
}

Code:
1. This is the starting number of the countdown. I have used 60, but you can change this number to whatever you wish.
2. This creates a new timer with the instance name “myTimer”. The first parameter is the interval value in milliseconds, so an interval of 1000 would be equally to a one second interval. The second parameter is the count, which is the number of times, the timer will countdown before it stops.
3. This is an event listener for the timer. The “Timer.event.Timer” is the event and countdown is the function which is called every time for the event.
4. This is needed to starts the timer.
5. This is the countdown function which converts a number into a string and subtracts the count from the “currentCount”. The “currentCount” actually counts from 1 – 60, but subtracting the count allows you to go from 60 – 0.


Step 5

Test your countdown timer Ctrl + Enter.



You should now have a countdown timer in Actionscript 3.0. If you wish to trigger an action after the countdown has reached zero. You need to add the following code inside the countdown function.

if(myText_txt.text == "0"){
      gotoAndStop(2)
}

The code above will stop at frame 2 when the countdown timer has reached zero. You can change this line of code to whatever you wish.

Dynamic masks using sprites in Actionscript 3.0

In this Flash tutorial you will learn how to create dynamic masks using sprites in Actionscript 3.0. This means you will use code to create the masks, instead of creating the masks using the shapes tools. This tutorial uses Sprite objects which are similar to move clips, but do not require a timeline.

For more information on the Sprite class checkout the ActionScript 3.0 Sprite components reference.

Dynamic masks using sprites in Actionscript 3.0

Step 1

Open a new Flash Actionscript 3.0 file.
Import an image you wish to use as your masked background by selecting File > Import > Import to Stage. Adjust the size of your image to the same as your stage.




Step 2

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




Step 3

On the timeline insert a new layer called “Actions” then right click and select Actions and add the following code. Most of the code below should look familiar from the Dynamic masks in AS3 tutorial, but the first section is different.

//1.
var mask_mc:Sprite = new Sprite();
mask_mc.graphics.beginFill(0x000000);
mask_mc.graphics.drawEllipse(0, 0, 70, 60);
mask_mc.graphics.endFill();
addChild(mask_mc);

//2.
maskbg_mc.mask=mask_mc;
maskbg_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMask);
maskbg_mc.addEventListener(MouseEvent.MOUSE_UP, noMask);

//3.
function dragMask(event:MouseEvent):void {
mask_mc.startDrag();
}

function noMask(event:MouseEvent):void {
mask_mc.stopDrag();
}

Code:
1. This creates a new sprite called “mask_mc” and draws an ellipse with the position at (0, 0), the width = 70, height = 60 and adds the shape onto the stage. You can change these values accordingly if you wish. The other shapes you can use as mask are:

* drawCircle(x:Number, y:Number, radius:Number)
* drawRect(x:Number, y:Number, width:Number, height:Number)
* drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number = NaN)
* drawTriangles(vertices:Vector, indices:Vector = null, uvtData:Vector = null, culling:String = "none")

(Checkout the Actionscript 3.0 graphics component reference for more details)

2. This sets the masked objects to the background image. And also contains two event listener with mouse up and down events with the dragMask and noMask parameters.

3. This is two functions which drags and drops the mask_mc sprite using the stopDrag() and startDrag() methods.


Step 4

Test your dynamic mask Ctrl + Enter. Now use your mouse to click and drag and mask.



You should now have a dynamic mask using sprites in Actionscript 3.0.

Create an image rollover effect

In this tutorial you will learn how to create an image mouse rollover effect in Flash CS4. The results of this effect will show different images blending into each other when the mouse is over the image. For this tutorial I have used Actionscript 3.0 you will, of course, need images. I have used various free stock images which are available from: www.sxc.hu

Image rollover effect

Step 1

Open a new Flash Actionscript 3.0 file.
Import your images into the library by selecting File > Import > Import to Library.
On the timeline rename the “Layer 1” name to “image 1”.




Step 2

Drag your first image onto the stage from the library and convert it into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok. Select your movie clip and give it the instance name: image1_mc.




Step 3

On the timeline select the 30th frame and hit F5 to insert a frame. Then right click anywhere in between the 1st and 30th frame and select Create Motion tween.

Now select the 30th frame then select the image on the stage and change the Alpha style to 0%. Your image on the stage should now disappear.




Step 4

On the timeline lock the “image 1” layer then insert a new layer called “image 2”. Select the 55th frame and hit F5 to insert a frame, and then select the 25th frame and hit F6 to insert a key frame.

Now drag your second image onto the stage. Convert it into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok. Select your movie clip and give it the instance name: image2_mc.


Step 5

Right click anywhere in between the 25th and 55th frame and select Create Motion tween.

1. Select the 25th frame then the image on the stage and change the Alpha style to 0%.
2. Next select the 30th frame then the image on the stage and change the Alpha style to 100%.
3. Finally, select the 55th frame then the image on the stage and change the Alpha style to 0%.

Your timeline should look like below:



If you want to add more images simply repeat the steps 2 -5 above, but remember to change the instance names and the key frame numbers.


Step 6

On the timeline insert a new layer called “Actions”. Insert key frames (F6) on the 30th and 55th frames.Now right click on the 1st frame and select Actions and enter the following code:

stop();
image1_mc.addEventListener(MouseEvent.MOUSE_OVER,imageOver);
function imageOver(event:MouseEvent):void {
play();
}

Select the 30th frame and select Actions and enter the following code:

stop();
image2_mc.addEventListener(MouseEvent.MOUSE_OVER,imageOver2);
function imageOver2(event:MouseEvent):void {
play();
}

**The code above plays the motion tween on the timeline with the alpha effect, when the mouse is over the image and stops at the next image. Be sure to add a stop() at your last frame.


Step 7

Test your movie Ctrl + Enter. Now mouse over the image and it should fade into the next one.



You should now have an image mouse rollover effect.

onEnterFrame in Actionscript 3

The onEnterFrame in Actionscript 3.0 is different to the Actionscript 2.0 version. In the AS3 version you need to add an event listener to the onEnterFrame method. Below I have shown a comparison of the two onEnterFrame versions.

AS2

onEnterFrame = function(){
//Your actions here
}


AS3

addEventListener(Event.ENTER_FRAME,myEnterFrame);
function myEnterFrame(event:Event) {
//Your actions here
}


As you can see above both the Actionscript versions are very similar. In AS3 you need to add an additional line of code which is the event listener method. Apart from this extra event listener code the way you of implement the onEnterFrame is exactly the same.

The onEnterFrame is called repeatedly at the same frame rate as the SWF file. For example, if you add following code into the actionpanel. Then the “onEnterFrame called” message will be called repeatedly and you will see a long list of these messages.

addEventListener(Event.ENTER_FRAME,myEnterFrame);
function myEnterFrame(event:Event) {
trace ("onEnterFrame called");
}

Dynamic mask in Actionscript 3

This is an update tutorial from the previous draggable dynamic mask tutorial in Actionscript 2.0. In this Flash tutorial you will learn how to create a dynamic draggable mask in Actionscript 3.0. This allows you to drag a masked object on the stage using the mouse, to reveal the layer below.

In AS2 the “setMask()” method was used to create the object mask, but now in AS3 the mask property is used, which looks like “myObject.mask = myMask”. The “myObject” is the object which gets masked, and the “myMask” is the actual mask itself.

Dynamic mask in Actionscript 3

Step 1

Open an Actionscript 3.0 file.
Import the image you wish to use as your masked background by selecting File > Import > Import to Stage. I have used a free stock image of a golfer, but you can use whatever image you wish.
Set the stage size to the same size as your image.




Step 2

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


Step 3

On the timeline insert a new layer called “Mask”. Then on the stage create your object for the mask. I have created a simple circle shape using the oval tool, but you can create whatever kind of shape you wish. The colour of the shape does not matter, as you will not be able to see the mask colour.




Step 4

Select your shape and convert it into a symbol by pressing F8. Give your shape an appropriate name, check movie clip and click ok. Then select your shaped movie clip and give it the instance name: mask_mc.




Step 5

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

//1.
maskedbg_mc.mask = mask_mc;

//2.
maskedbg_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMask);
maskedbg_mc.addEventListener(MouseEvent.MOUSE_UP, noMask);

//3.
function dragMask(event:MouseEvent):void {
mask_mc.startDrag();
}

function noMask(event:MouseEvent):void {
mask_mc.stopDrag();
}

Code:
1. This sets the background image as the masked object and the shape as the mask.
2. This is two event listeners with the mouse down and up events with the dragMask and noMask parameters.
3. This is two functions which basically drags and drops the mask_mc (shape) using the stopDrag() and startDrag() methods.


**Alternative step 5

You can also use the mouse to control mask object like in the dynamic mask tutorial in AS2. The code below sets the mask to the mouse controls, so you can control the mask using the mouse.

Mouse.hide();
stage.addEventListener(Event.ENTER_FRAME, eventHandler);
maskedbg_mc.addEventListener(MouseEvent.MOUSE_MOVE, eventHandler);

function eventHandler(event:Event):void {
mask_mc.x = mouseX;
mask_mc.y = mouseY;
}


Step 6

Test your dynamic mask Ctrl + Enter. Now use your mouse to click and drag and mask.



You should now have a dynamic mask in Actionscript 3.0. You can download the source files here.

Disappearing text effect

In this tutorial you will learn how to create a simple disappearing text effect in Flash. The results of this text effect will show each individual letter in the sequence disappear in order. You need to use the alpha property for this effect. I have used an Actionscript 2.0 file for this tutorial, but an Actionscript 3.0 file should also work fine.

Disappearing text effect

Step 1 – Type text

Open a new Flash document.
Select your text tool and type your message on the stage. I have used Impact font type with #FF0000 colour, but you can use whatever colour or font type you wish.




Step 2 – Convert to symbol

Select your text message with the selection tool (V) then right click and select Break apart. Convert each letter of your text message into a symbol by pressing F8. Give your letter an appropriate name, check movie clip and click ok.


Step 3 – Add drop shadow filter

Select all your letters on the stage then add a drop shadow filter at the bottom of the screen. Then add the following settings:



You can experiment with the various settings if you wish. I have added 130 % for the strength and 6 pixels for the distance.


Step 4 – Timeline

Select all your letters on the stage again and right click then select Distribute to Layers. This splits all your letters onto separate layers.

On the timeline select the layer of your first letter and insert a key frame (F6) at the 15th frame. Then select your second letter and insert a key frame (F6) at the 30th frame. Now repeat this for all your letters, each letter should have a 15 frame interval from the previous letter. Your timeline should look something like below:




Step 5

On the timeline for all your letters, right click in between the two key frames and select Motion tween. If you are using Flash CS4 then select Classic tween.

Select the second key frame for your first letter on the timeline, then the click the letter on the stage and change the Alpha properties to 0%. Repeat this for all your letters.




Step 6 – Test movie

Test your movie clip Ctrl + Enter.



You should now have a disappearing text effect. Feel free to contact me for any questions or comments and remember to subscribe. You can download the source files here.

Using scenes in Actionscript 3

Moving between two different scenes in Actionscript 3.0 is a little different to the Actionscript 2.0 version. In AS3 you need to use an event listener, but apart from that everything else is the same as the previous AS2 version.

Below is basic code for moving between two scenes using a button:

stop();
button1_mc.addEventListener(MouseEvent.MOUSE_DOWN,goNext);

function goNext (event:MouseEvent):void {
nextScene();
}

The code above assumes you have two scenes, and a button with the instance name ‘button1_mc’. You will also need a ‘stop();’ function in the second scene. If you want to move back to the previous scene you will need to use the ‘prevScene()’ function.


If you want to move to a particular frame within a scene then you can use the following code below:

stop();
button1_mc.addEventListener(MouseEvent.MOUSE_DOWN,goNext);

function goNext (event:MouseEvent):void {
gotoAndStop(10, “Scene 2”);
}

The code above stops at frame 10 within ‘Scene 2’. You could also use the ‘gotoAndPlay’ which would play from the frame instead of stopping.

Feel free to contact me for any questions or comments and remember to subscribe.

Simple hit test in Actionscript 3

This Flash tutorial will teach you how to create a simple hit test in Actionscript 3.0. The AS3 hit test method is slightly different to the AS2 hit test method. In AS3, the hit test method has now been changed to ‘hitTestObject()’. This method basically evaluates if two different objects have intersected or overlapped with each other, which is exactly the same as Actionscript 2.0 version.

Simple hit test in Actionscript 3

Step 1 – Create shapes

Open a new Flash document with the stage size 400 x 200px.
Take the Rectangle tool and Oval tool and draw two shapes like below. I have used #0098FF colour for the circle and #CC6600 colour for the rectangle. Both of these shapes have 4pt for the stroke.



The rectangle shape is the hit test object which tests whether the circle shape has been intersected or overlapped.


Step 2 – Create message

Select the static text tool and type the message “Objects hit”. Place the message at the top of the stage like below. This message will be displayed when the two objects have hit.




Step 3 – Convert to symbols

Convert the shapes and the message into symbols by pressing F8.
Give both shapes and the message appropriate name, check movie clip and click ok.
Now give the objects the instances name: circle_mc, rectangle_mc and text_mc respectively.




Step 4 – Add code

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.
circle_mc.addEventListener(Event.ENTER_FRAME, circleHit);

//2.
function circleHit(event:Event):void {
if (circle_mc.hitTestObject(rectangle_mc)) {
text_mc.visible = true;
} else {
circle_mc.x+=5;
text_mc.visible = false;
}
}

Code:
1. This contains an event listener with an ‘enter_frame’ event and the parameter circleHit. The enter_frame event evaluates repeatedly as soon as the movie is played.
2. This is the circleHit function which displays a message when the circle object has intersected/overlapped with the rectangle object. The circle object will move 5 pixels in the right direction until the object have hit. Also the message will stay invisible until the objects have hit.


Step 5 – Test movie

Test your hit test Ctrl + Enter. You should see a message appear when the two shapes have hit.



You should now be able to use a simple hit test in Actionscript 3.0.
Feel free to contact me for any questions or comments and remember to subscribe.



Multiple object hit test

The same hitTestObject method can also be used to detect multiple objects. In the example above only one object was detected. I will show you a quick example of how to detect multiple objects.

Firstly, you need to place all the objects into an array. Then create a new function with the parameter multiObjec passed. The final part involves creating a ‘For loop’ to cycle through all the object instances from the array.

var hitObjArray:Array=new Array(circle1_mc,circle2_mc,circle3_mc,circle4_mc);

function multiHitObjects(mulitObj:MovieClip):void {
 hitObjArray[i].addEventListener(Event.ENTER_FRAME,circleHit);

 function circleHit(event:Event):void {
  if (mulitObj.hitTestObject(rectangle_mc)) {
   text_mc.visible=true;
  } else {
   mulitObj.x+=5;
   text_mc.visible=false;
  }
 }

}

for (var i:uint=0; i< hitObjArray.length; i++) {
 multiHitObjects(hitObjArray[i]);
}

Mailto in AS3

This is an update from the previous Mailto button tutorial in Actionscript 2.0. In this tutorial I will show you the Actionscript 3.0 version of the mailto button. The mailto button will open up your email application to send emails to the selected email address. I have used a free stock image of a mail icon which is available from: www.sxu.hu

Mailto in AS3

Step 1

Open a Flash document.
Create an object for button on the stage, or alternatively you can use an image as a button like I have by selecting File > Import > Import to Stage.




Step 2

Convert your object/image into a symbol by selecting F8.
Give your symbol an appropriate name, check button and click ok.
Give your button an appropriate instance name e.g. mailto_btn.




Step 3

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

//1.Button event listener
mailto_btn.addEventListener(MouseEvent.CLICK, mailto);

//2.The mailto function open up email application to send email.
function mailto(event:MouseEvent):void {
var email:URLRequest = new URLRequest("mailto:example@yourdomain.com");
navigateToURL(email, "_blank");
}

Code:
1. This is an event listener for the button instance, ‘mailto_btn’, which contains a mouse click as the mouse event, and passes the mailto function.
2. This is a function which opens up your email application to send emails. You can change the email address to whatever you wish.


Step 4

Test your button Ctrl + Enter. Now click on the mail icon and your email application should open up with your desired email.



You should now be able to send emails in Actionscript 3.0.
Feel free to contact me for any questions or comments and remember to subscribe. You can download the source files here.

Open URL in AS3

This is an update tutorial from the previous open URL tutorial. In this Flash tutorial I will teach you how to open a URL in Actionscript 3.0 with a button. I have used an image of ice cream as the button which can be found at: www.sxu.hu

Opening a URL is Actionscript 3.0 requires using a different method from Actionscript 2.0 version. In the AS2, the ‘getURL’ method was used, but this method has now been changed to ‘navigateToURL’ in the AS3 version.

Below is a comparison of the two versions.

Actionscript 2.0:
getURL(“http://www.example.com”, “_blank”):


Actionscript 3.0:
var url:URLRequest = new URLRequest(“http://www.example.com”);
navigateToURL(url, “_blank”);


As you can see the Actionscript 3.0 version needs an addition line of code. I have used the argument “_blank” which open the URL in a new window, but there are other arguments you can use:

* _parent: Loads the parent of the current frame.
* _self: Loads current frame in current window.
* _top: Load top – level frame in the current window.

To open an URL in AS3 you can simply use the method above, but if you are still unsure you can follow the tutorial below.


Open URL in AS3

Step 1 - Create object

Open a new Flash document.
Create an object for button on the stage, or alternatively you can use an image as a button like I have by selecting File > Import > Import to Stage.




Step 2 - Convert to symbol

Convert your object/image into a symbol by selecting F8.
Give your symbol an appropriate name, check button and click ok. You can change the button states if you wish, for more information on buttons checkout the basic button tutorial.


Step 3

Give your button an appropriate instance name e.g. icecream_btn.




Step 4 - Add code

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

//1.Button event listener
icecream_btn.addEventListener(MouseEvent.CLICK, openurl);

//2.The openurl function which opens a URL.
function openurl(event:MouseEvent):void {
var url:URLRequest = new URLRequest("http://www.ilike2flash.com");
navigateToURL(url, "_blank");
}

Code:
1. This is an event listener for the button ‘icecream_btn’ which contains a mouse click as the mouse event, and passes the openurl function.
2. This is a function which opens the URL above in a new window. You can change the URL to whatever you wish.

Alternatively you can use one line of code to open an URL.

//1.Button event listener
icecream_btn.addEventListener(MouseEvent.CLICK, openurl);

//2.The openurl function which opens a URL.
function openurl(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.ilike2flash.com"), "_blank");
}

Step 5

Test your button Ctrl + Enter. Now click on the ice cream and the URL “www.ilike2flash.com” should open.



You should now be able to open a URL in Actionscript 3.0. Feel free to contact me for any questions or comments and remember to subscribe. You can download the source files here.

Keyboard controls in AS3

This is an update from the previous key controls tutorial. In this Flash tutorial you will learn how to control an object on the stage using the keyboard controls in Actionscript 3.0. The code used is very similar to the previous tutorial. I have used an image of a lemon as the control object which is available from: www.sxc.hu. If you want to move an object together in two directions then checkout Keyboard controls in AS3 part 2.


Keyboard controls in AS3

Step 1

Open a new Flash document.
Create an object you wish to control using the keyboard on the stage. Alternatively you can use an image as object like I have, by selecting File > Import > Import to Stage.




Step 2

Convert your object into a symbol by selecting F8.
Then give your symbol an appropriate instance name. eg lemon.




Step 3

On the timeline insert a new layer called “actions” then right click on the 1st frame and select Actions and enter the following code.

//1.Event listener to detect keyboard press.
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHit);

//2. Function to move the lemon object using keyboard key 

//with the movement speed at 5 pixels.
function keyHit(event:KeyboardEvent):void {
var speed:uint=5;
switch (event.keyCode) {
case Keyboard.RIGHT :
lemon_mc.x+=speed;
break;
case Keyboard.LEFT :
lemon_mc.x-=speed;
break;
case Keyboard.UP :
lemon_mc.y-=speed;
break;
case Keyboard.DOWN :
lemon_mc.y+=speed;
break;
}
}

Code:
1. This event listener detects when a keyboard key has been pressed and triggers the “keyHit” function.
2. This function uses a switch statement which determines what happens when a keyboard key is pressed. For example, if the right key is pressed the lemon object will move in the positive x-direction (right).

If you wish to increase the speed the object moves, you can change the speed variable 5.


Step 4

Test your keyboard control Ctrl + Enter. Now use the up, down, right and left keys on your keyboard to move the lemon object.



You should now be able to use keyboard controls in Actionscript 3.0.
Checkout keyboard controls-part 2 where you will learn how to move an object simultaneously in two directions. Feel free to contact me for any questions or comments and remember to subscribe. If you wish to limit the object to the stage boundaries then checkout this tutorial.

Black & white gallery

This Flash tutorial will teach you how to create a black and white gallery effect. The results of this effect will show a black and white image changing into a colour image when the mouse is over the image. This tutorial uses Actionscript 3.0.

I have used six images in this gallery, but you can add as many images as you wish. The images in this gallery have a solid black border around the edges, checkout this tutorial to achieve this effect.


Black & white gallery - part 1

Step 1

Open a new Flash document with 450 x 300 dimensions. You can of course use whatever stage dimensions you wish.
Set the FPS to 24 frames.
In the library create a new folder called “pictures” then import all your images into this folder by selecting File > Import > Import to library.


Step 2

Drag your images from the library onto the stage and align them like below:



Notice that my images have black borders around the edges, checkout this tutorial to create this effect. My images also have a wider profile, you can use the Transform tool (Q) to decrease the height of the image.


Step 3

Select each image in turn and convert them into a symbol by pressing F8. Give your symbol an appropriate name, check button and click ok.

Now select each button in turn and convert them into a symbol again by pressing F8. Give your symbol an appropriate name, check movie clip and click ok.


Step 4

Select each movie clip in turn and give them the following instance name: pic1_mc, pic2_mc, pic3_mc etc.




Step 5

Double click on one of your images to enter the movie clips timeline.
Select the 20th frame and insert a key frame (F6).
Right click anywhere in between the 1st and 20th and insert a motion tween. If you are using CS4 then select classic tween.
Now select the first frame, then your image on the stage, then select the adjust colour property and change saturation value to -100.



On the timeline insert a new layer called “Actions”. Insert a key frame (F6) at the 20th frame. Then right click on the 1st frame and 20th frame, select Actions and add the following code:

stop();

Your timeline should look like below:



Now return to the main timeline and repeat step 5 for all your images. You should eventually have all black and white images on the stage like below:




Step 6

On the main timeline insert a new layer called “Actions”. Then right click on the 1st frame and select Actions and add the following code:

//1.Array to hold all the picture instances.
var picArr:Array=new Array(pic1_mc,pic2_mc,pic3_mc,pic4_mc,pic5_mc,
pic6_mc,pic7_mc,pic8_mc,pic9_mc);

//2.Function to control the rollover and rollout effect
function rollBW(picture:MovieClip):void {
picture.addEventListener(MouseEvent.MOUSE_OVER, over);
picture.addEventListener(MouseEvent.MOUSE_OUT, out);

function over(event:MouseEvent):void {
picture.gotoAndPlay(2);
}

function out(event:MouseEvent):void {
picture.gotoAndStop(1);
}
}

//3.For loop to call move images.
for (var i = 0; i < picArr.length; i++) {
rollBW(picArr[i]); 
} 

Code
1. Creates an array called “picArr” to hold all the pictures instances. If you have more images in your gallery then simply add the instance names into the array.
2. This is a function to control the rollover and rollout effects of each image. The parameter “picture” is passed to the event listeners as well as the over and out functions.
3. This is a For Loop which calls all the picture instances in the array to the rollBW function.


Step 7

Test your black and white gallery Ctrl + Enter.



You should now have a black and white gallery effect. The source files can be downloaded here.
Feel free to contact me for any questions or comments and remember to subscribe.

UPDATE: Black & white gallery - part 2

Flash shortcut keys

If you’re a regular user of Flash, you will be frequently using all the tools in the toolbar. It is sometimes very time consuming and annoying if you have to constantly switch between two or more different tools, or if you constantly go into the menu structure to select a function.

The shortcut keys can improve the usability by providing specific keys on the keyboard which link to the tools and functions used in Flash. It is often much faster to use the shortcut keys rather than the interacting with the mouse on the interface.

The shortcut keys I use the most in my projects are: F5 (Add frame), F6 (Add key frame), F8 (Convert to symbol) and Ctrl + Enter (Test movie). These particularly shortcuts can save you a lot of time, especially if you use them repeatedly. It is good to memorise the shortcut keys you use the most often, as it will allow you to use the Flash program much faster and easier.

A list of the all the Flash shortcuts can be found here: http://kb2.adobe.com/cps/121/tn_12105.html. These shortcuts apply to both Windows and Mac machines. You can also customise the keyboard shortcuts to your own preference by selecting Edit > Keyboard.

Bitmap to image effect

This Flash tutorial will teach you how to create a bitmap to image effect. The result gives the effect of a bitmap slowly turning into an image. This effect requires using Trace Bitmap feature. I have used a free stock image of a mouth which is available from: www.sxc.hu

Bitmap to image effect

Step 1

Create a new Flash document.
Import your image onto the stage by selecting File > Import > Import to stage, select your image and click ok.
Adjust the stage size to the same size as your image. To find out your image size you select your image with the selection tool, and take note of the width and height.




Step 2

Select your image with the selection tool then choose Modify > Bitmap > Trace Bitmap. Add the following setting:

• Colour threshold = 80.
• Minimum area = 15 pixels.
• Curve fit = Normal.
• Corner threshold = Normal.

Your image should look like below:




Step 3

Convert your bitmap into a symbol by selecting F8. Give your symbol the name “Bitmap”, choose movie clip and click ok.


Step 4

On the timeline change the layer 1 name to “Bitmap”.
Select the 35th frame and insert a key frame (F6).
Right click anywhere in between the 1st and 30th frame and select Motion tween. If you are using Flash CS4 then select Classic tween.



Now using the selection tool select the 35th frame then the bitmap on the stage. Change the alpha properties to 0%.

On the timeline lock and hide the Bitmap layer.


Step 5

On the timeline insert a new layer above the Bitmap layer called “Image”. From the library drag your original imported image on the stage, and make sure it lines up with the stage boundaries.

Convert your image in a symbol by selecting F8. Give your symbol the name “Image”, choose movie clip and click ok.


Step 6

On the Image layer from timeline select the 35th frame and insert a key frame (F6). Right click anywhere in between the 1st and 30th frame and select Motion tween. If you are using Flash CS4 then select Classic tween.



Now using the selection tool select the 1st frame then the Image on the stage. Change the alpha properties to 0%.


Step 7

On the timeline insert a new layer called “Actions”, above the image layer.
Select the 35th frame and insert a key frame (F6). Right click on the key frame and from the drop down menu select Actions. Add the following code:

Stop();


Step 8

Test your Movie Ctrl + Enter.




You should now have a bitmap to image effect.

Drag and drop in AS3 part 2

This is a continuation of the Drag and drop in AS3 tutorial. In this brief tutorial I will be modifying the existing code, so that it can be used multiple times. This is useful if you are required to drag and drop several objects without writing multiple lines of code. In this tutorial I will be using three objects to demonstrate the drag and drop functionality.

Drag and drop in AS3 part 2

Step 1

Open a new flash document.
Create your objects on the stage. I have created three primitive shapes using the basic shape tools. You can create whatever objects you wish.




Step 2

Convert your objects into symbols by pressing F8.
Give your symbols appropriate names, check movie clip and click ok.
Select your object using the selection tool (V) and give the instance name: red_mc, green, and blue_mc.


Step 3

On the timeline insert a new layer called “actions” right click on the first frame and select Actions from the drop down menu.

Add the following code:

red_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
red_mc.addEventListener(MouseEvent.MOUSE_UP, drop);
green_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
green_mc.addEventListener(MouseEvent.MOUSE_UP, drop);
blue_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
blue_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(event:MouseEvent):void {
event.target.startDrag();
}

function drop(event:MouseEvent):void {
event.target.stopDrag();
}

**The first six lines of code add events listeners for each of the objects created on the stage. The event listeners are for the mouse up and mouse down events with include the drop and drop event handlers.

This time the “event.target” was used in the drag and drop functions. The event.target refers to the objects that start the event. This would be the objects: red_mc, green_mc, and blue_mc. Using the event.target avoids creating three separate drag and drop functions which need to be specified separately.


Step 4

Test your movie Ctrl + Enter. Now use your mouse to drag and drop the various objects.



You should now be able to drag and drop multiple objects using the same code.

Drag and drop in AS3

This Flash tutorial will teach you about the basic drag and drop in Actionscript 3.0. You will learn how to drag an object around the stage. I have used an image of a sheep as the object to demonstrate the drag and drop functionality. This is an update from the previous create a draggable objects tutorial in Actionscript 2.0. The code in AS3 is slightly different from the AS2 version, but shouldn’t be too difficult to understand.

Drag and drop in AS3

Step 1 – Create the object

Open a new Flash document and create whatever object you wish.
Alternatively you could use an image as an object, like I have, by selecting File > Import > Import to stage select your file and click ok.


Step 2 – Convert object to symbol

Convert your object into a symbol by pressing F8.
Give your symbol an appropriate name, check movie clip and click ok.
Select your object using the selection tool (V) and give the instance name: sheep_mc




Step 3 - Add the code

On the timeline insert a new layer called “actions” right click on the first frame and select Actions from the drop down menu.



Add the following code:

sheep_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
sheep_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(event:MouseEvent):void {
sheep_mc.startDrag();
}

function drop(event:MouseEvent):void {
sheep_mc.stopDrag();
}

**The first and second lines of code adds event listeners for the mouse up and mouse down events with the parameters drag and drop.

The drag function starts the dragging of the object when the mouse is pressed, and the drop function stops the dragging of the object when the mouse is released.

The drag and drop functions can also be adapted to be used multiple times. An example of this can be found here. And if you wish to limit the object to the stage boundaries, checkout this tutorial.


Step 4 – Test your movie

Test your movie Ctrl + Enter. Now use your mouse to drag and drop the sheep.



You should now be able to drag and drop in Actionscript 3.0. The source files can be downloaded here.
Checkout out part 2 to drag and drop multiple objects.

Custom cursor in AS3

This is an update tutorial from the previous custom cursor tutorial in Actionscript 2.0. The custom cursor this time will be in Actionscript 3.0. The steps are similar, only the code needs to be changed. The rest of the tutorial is pretty much the same as the previous one.

Custom cursor using the timeline

Step 1

Open a new Flash document.
Create your custom cursor object on the stage. I have created a green crosshair similar to my previous tutorial, but you can create whatever object you wish.




Step 2

Convert your object into a symbol by pressing F8. Then give your symbol an appropriate name, check movie clip for the type and click ok.



**Note the registration point is where your custom cursor point will begin. I have selected the centre point for my cursor, but you will probably need to select the top left point for your cursor.


Step 3

Give your custom cursor the instance name: customcursor_mc.




Step 4

On the timeline insert a new layer called “Actions” like below:




Right click on the first frame and select Actions and add the following code:

Mouse.hide();
customcursor_mc.startDrag(true);

**The first line of code hides the default cursor. While the second line of code make the custom cursor follow the hidden default cursor.

If you run into any problems with the code above use the following code below.

stage.addEventListener(Event.ENTER_FRAME, moveCursor);

function moveCursor(event:Event) {
customcursor_mc.x=mouseX;
customcursor_mc.y=mouseY;
}

Step 5

Test your custom cursor Ctrl + Enter.



You should now have a custom cursor in Actionscript 3. If you wish to dynamically add the cursor onto the stage, take a look at this tutorial.
Feel free to contact me for any questions or comments and remember to subscribe. The source files can be downloaded here.

Gradient text effect

This Flash tutorial will teach you how to create a gradient text effect. The results will show regular text with a gradient instead of a solid colour. Gradients are basically areas of colour where one colour changes into another colour. There are two kinds of gradients: linear and radial. Linear gradients change colour along either the horizontal or vertical axis. Radial gradients change colour from an outward direction on focal point. In this tutorial I will show you both linear and radial gradient effects.

Gradient text effect

Step 1

Open a new Flash document.
Select the text tool (T) and type your message on the stage. I have used Myriad Pro bold font type, but you can choose whatever colour you wish. The colour of the text does not matter as you will be changing it later on.




Step 2

Right click on your text and select Break apart. Then select Break apart again and you should see little dots on your text message like below:




Step 3 - Linear gradient

On the right side of your screen select the Colour mixer panel. Choose Linear for the type then change the current colour swatch to your own preference. I have the following preferences below:



**Checking the Linear RGB checkbox allows you to blend the various colours into each other. While unchecking the checkbox allows you to see the distinct colours.


You should now have a linear text gradient effect.




Step 3 - Radial gradient

On the right side of your screen select the Colour mixer panel. Choose Radial for the type then change the current colour swatch to your own preference. I have the following preferences below:



You should now have a radial text gradient effect.



Feel free to contact me for any questions or comments and remember to subscribe.