Unsmiley face in Actionscript 3

I found an interesting tutorial here that draws a smiley face using the Actionscript 3 drawing API. The face shape is created using only Actionscript code to draw the eyes, mouth and face using the drawCirle() and curveTo() methods. In this post I have modified the code to draw an unsmiley face which is basically an unhappy face.


Unsmiley face in Actionscript 3

Step 1

Open a new AS3 file. Then on the timeline rename ‘layer 1’ to ‘Actions’ and open up the actions panel (F9) and enter the following code.

//Creates a new instance of the shape class adds it onto the stage.
var my_shape:Shape= new Shape();
addChild(my_shape);

//This draws the circle for the face with the black line thickness
//at 3px, red(#FF3603) face colour, the width of circle at 195 and the
//height at 190.
my_shape.graphics.lineStyle(3);
my_shape.graphics.beginFill(0xFF3603);
my_shape.graphics.drawEllipse(0, 0, 195, 190);


//This draws the two eyes for the unsmiley face.
my_shape.graphics.beginFill(0x000000);
my_shape.graphics.drawEllipse(45,47,24,37);
my_shape.graphics.drawEllipse(124,47,24,37);
my_shape.graphics.endFill();

//This draws the upside down smile by moving to the drawing location
//to (39, 150) then using the curveTo() method to draw the unsmiley
//face
my_shape.graphics.moveTo(39,150);
my_shape.graphics.curveTo(110,120,161,150);

Step 2 – optional

The unsmiley face is currently positioned at (0, 0) on the stage. If you wish to position the face in the centre of the stage, checkout this tutorial.


Step 3

Test your movie clip Ctrl + Enter.



You should now have an umsmiley face. Now that you have created one unsmiley face, why not put the code into a ‘For loop’ and create multiple instances of unsmiley faces. To reduce the size of the original face I have used the scaleX and scaleY properties.

Rain effect in Actionscript 3

I previously created a rain effect in Actionscript 2 where rain drops fell vertically from the top of the stage area. In this tutorial I will provide code for the Actionscript 3 version. The steps in the AS3 version are very similar to the AS2 one.


Rain effect in Actionscript 3

Step 1

Open a new Flash AS3 file with any stage size.


Step 2

Select the Oval tool (O) and create your rain drop on the stage. I have used #00CCFF colour for my rain, but you can use whatever colour you wish.




Step 3

Convert your rain drop in a movie clip (F8). Give you movie clip an appropriate name, choose the top left registration point then check the export for Actionscript box. Then give the name 'rain' for the class.




Step 4

Select your rain drop movie clip and hit the delete key to remove it from the stage area. The rain drop will be added dynamically onto the stage using Actionscript, so will not be needed on the stage.


Step 5

On the timeline select the first layer then open up the Actions panel (F9) and enter the following code.

//Declares the number of rain drops and the speed of the rain. If you want more or
//faster rain drops you can increase the following numbers accordingly.
var rain_density:uint=20;
var rain_speed:uint = 20;

//An Array to hold the Rain drops.
var rainArray:Array = new Array();

//This creates 20 rain drops on the stage.
for (var i = 0; i< = rain_density; i++) {           

    //This creates a new instance of the rain drop and adds it onto the stage.
    var myRain:rain = new rain();         
    addChild(myRain);

    //Set a random x & y location on the stage.   
    myRain.x=Math.random()*stage.stageWidth;        
    myRain.y=Math.random()*stage.stageHeight;            

    //Set a random alpha value between 0.5 - 1.         
    myRain.alpha = Math.random() * 0.5  + 0.5;     
      
    //Puts the Rain drop into the rainArray.         
    rainArray.push(myRain);  

}    

//Adds the enter frame event to make the rain effect move.  
stage.addEventListener(Event.ENTER_FRAME, makeRain);   

function makeRain(event:Event):void {          

   //This loops through the array to create the rain drop effect.          
  for (var i = 0; i < rainArray.length; i++) {                    

      //This sets the direction and speed of rain drop.                  
     rainArray[i].y += rain_speed;                  

     //If the rain drop goes pass the stage height then it get returned back to 
     //the top of the stage.                 
     if(rainArray[i].y > stage.stageHeight){
           rainArray[i].y =0;
     }
  }
}

Step 6

Test your movie clip Ctrl + Enter.




You should now have a rain drop effect in Actionscript 3.

Limit drag and drop in AS3

I previously created a drag and drop tutorial in Actionscript 3 where you could freely drag the object around the stage area. However, this means the object can also get dragged beyond the stage boundaries. In this tutorial you will learn how to limit the draggable object within the stage boundaries which will stop the object once it has reached the stage edges. You will need to have completed the previous tutorial before attempting this one as there are some minor additions to the startDrag() method.

In Actionscript 2 the startDrag() method contains five parameters, and now in Actionscript 3 there are only two parameters. The first parameter locks the centre value and the second parameter is the bounding area where you have to pass an instance of the Rectangle class to the method. The rectangle bounding area has to have four parameters which are: x, y, width, and height. For more information, checkout the AS3 startDrag() reference here.


Limit drag and drop in Actionscript 3

Step 1

Open up the drag and drop tutorial in Actionscript 3.


Step 2

On the timeline select the Actions layer then open the actions panel (F9) and make the following adjustments.

//The x & y coordinates of the top-left corner of the rectangle.
var my_x:int=stage.stageWidth-sheep_mc.width;
var my_y:int=stage.stageHeight-sheep_mc.height;

//The height and width of the rectangle.
var myWidth:int=0-my_x;
var myHeight:int=0-my_y;

//Create a new instance of the rectangle class with the coordinates above.
var boundArea:Rectangle=new Rectangle(my_x, my_y, myWidth ,myHeight);

//Adds the mouse down and up event listeners to the sheep movie clip.
sheep_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
sheep_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

//This function drags the sheep but limits to the stage boundaries.
function drag(event:MouseEvent):void {
  sheep_mc.startDrag(false,boundArea);
}

//This function releases the sheep object.
function drop(event:MouseEvent):void {
  sheep_mc.stopDrag();
}

Step 3

Test your movie clip Ctrl + Enter. Try moving the object around and you should notice it will not go over the stage boundaries.

Custom cursor in AS3 part 2

I previously created the custom cursor in AS3 tutorial where the cursor object was initially placed on the stage. In this tutorial I will be dynamically adding the cursor object onto the stage from the library. For more information on dynamically adding objects on the stage, checkout the AttachMovie in Actionscript 3 tutorial.


Custom cursor in AS3 part 2

Step 1

Open a new Flash AS3 file. Then create your custom cursor on the stage. I will be creating the exact same cursor from the previous tutorial. You can create whatever you wish.




Step 2

Convert your object into a movie clip (F8). Give an appropriate name and select the centre registration point. Then check the ‘Export for Actionscript’ tab and click ok. If you receive an Actionscript class warning message, click ok.



**Depending on the style of your custom cursor you may need to change the registration point.


Step 3

Select your cursor movie clip on the stage and delete it. This will leave you with nothing on the stage.


Step 4

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

//This creates a new instance of the cursor movie clip and adds it onto
//the stage using the addChild method.
var mycursor_mc:cursor = new cursor();
addChild(mycursor_mc);

//Hides the default cursor on the stage so it will not be shown.
Mouse.hide();

//Adds an event listener onto the stage with the enter frame event which
//repeatedly executes the moveCursor function.
stage.addEventListener(Event.ENTER_FRAME, moveCursor);

//This function set the x & y positions of the custom cursor to the x & y positions
//of the default cursor.
function moveCursor(event:Event) {
  mycursor_mc.x=mouseX;
  mycursor_mc.y=mouseY;
}

Step 5

Test your movie clip Ctrl + Enter.



You should now be able to dynamically add a custom cursor onto the stage.

Banner resizer effect in Actionscript 3

In this Flash tutorial you will learn how to create a banner resizer effect in Actionscript 3. This effect will increase the size of the image when your mouse is over the image and restore to the original size when your mouse is not on the image. You will need to use the tweenlite plugin for this tutorial which can be downloaded here. I have used four free stock images for my banner resizer effect, but you can use six images if you wish. Higher quality images will work best for this effect.


Banner resizer effect in Actionscript 3 – part 1

Step 1

Open a new Flash AS3 file.
Import all the images you wish to use by selecting File > Import > Import to library. Make sure your images are all the same size. Then on the timeline rename ‘layer 1’ to ‘Images’.


Step 2

Drag your images individually onto the stage like below. I have left a small gap in between each of the images. All of the images should be touching the stage boundaries. If your images are too large you can use the Free transform (Q) to resize the images.




Step 3

Starting with the top left image, convert it into a movie clip (F8) and give it an appropriate name then select the top left registration point and click ok. Now repeat this for all your images, so for the top right image you would select the top right registration point. And for the bottom left image you would select the bottom left registration point.




Step 4

Give each of your images the following instance name accordingly: image1_mc, image2_mc, image3_mc and image4_mc.




Step 5

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

//Imports the tweenlite plugin.
import com.greensock.*;

//The orginal width and height of the images.
var imageWidthOriginal:uint = 195;
var imageHeightOriginal:uint = 145;

//Array to hold the image instances.
var imageArr:Array = new Array(image1_mc,image2_mc,image3_mc,image4_mc);

//This loops through all the images in the array with mouse over and mouser out event.
for(var i:uint = 0; i < imageArr.length; i++){    
imageArr[i].addEventListener(MouseEvent.MOUSE_OVER, sizeImage);    
imageArr[i].addEventListener(MouseEvent.MOUSE_OUT, reduceImage);
} 

//This function increases the width and height of the image until it reaches
//the stage boundaries.
function sizeImage(event:MouseEvent):void {    
TweenLite.to(event.target, 1, {width:stage.stageWidth, height:stage.stageHeight});    
//This sets moused over image to the highest index position.       
setChildIndex(MovieClip(event.target), numChildren - 1 );
} 

//This function restores the images back to the original size.
function reduceImage(event:MouseEvent):void {    
TweenLite.to(event.target, 1, {width:imageWidthOriginal, height:imageHeightOriginal});
} 

Step 6

Test your movie Ctrl + Enter. Now try moving your mouse over the images below and you should see the images increase in size. Then mouse your mouse off the images and they should decrease in size.




Related tutorials
Black and white gallery
Banner selector

Banner selector in Actionscript 3 part 3

This is part 3 of the Banner selector in Actionscript 3 tutorial where I will add a fade transition effect between the images using code. The fade effect is created using the tweelite plugin which can be downloaded here. You can alternatively create the same transition effect using only the timeline, checkout this tutorial. Make sure you have completed the banner selector tutorial before attempting this one as addition code will be added.


Banner selector part 3

Step 1

Open your Banner selector tutorial then on the timeline select the ‘images’ layer then on the stage convert each of the images into movie clips (F8).




Step 2

Give each of your movie clips the following instance names accordingly: image1_mc, image2_mc, image3_mc and image4_mc.




Step 3

Select each of your images in turn then on the properties panel open up the colour effect panel and set the style to Alpha at 0%.




Step 4

On the timeline select the ‘Actions’ layer then open up the Actions panel (F9) and enter the additional code shown in red.

//This is the initial fade effect for the first image.
TweenLite.to(image1_mc, 5, {alpha:1});

// This function plays the appropriate banner.
function playBanner(event:MouseEvent):void {
switch (event.target) {
    case button1 :
        gotoAndStop(1);
        TweenLite.to(image1_mc, 2, {alpha:1});
        break;
    case button2 :
        gotoAndStop(2);
        TweenLite.to(image2_mc, 2, {alpha:1});
        break;
    case button3 :
        gotoAndStop(3);
        TweenLite.to(image3_mc, 2, {alpha:1});
        break;
    case button4 :
        gotoAndStop(4);
        TweenLite.to(image4_mc, 2, {alpha:1});
        break;
}
}

Step 5

Test your movie clip Ctrl + Enter. Now trying pressing each buttons and you should see a fade transition effect between the images.

Detect key press in Actionscript 3

I have previously created a tutorial called Keyboard controls in AS3 where you learn how to move an object around the stage using the keyboard arrow keys. In this tutorial you will learn how to detect the other keyboard keys such as the letters, spacebar, enter key, shift key etc. You will also learn how to detect multiple key presses on the keyboard. Every character on the keyboard has a unique key code number which has been mapped specifically to a location on the keyboard. For example, the letter ‘a’ is the key code number 65.


Detect key press in Actionscript 3

Step 1

Open a new Flash AS3 file.
On the timeline select the first frame then open up the Actions panel and enter the following code.

//Adds event listener to the stage.
stage.addEventListener(KeyboardEvent.KEY_DOWN, detectKey);

//Traces the keycode, keylocation, shiftkey and altkey.
function detectKey(event:KeyboardEvent):void {
   trace("The keypress code is: " + event.keyCode);
   trace("The keyLocation is: " + event.keyLocation);
   trace("The shiftKey is: " + event.shiftKey);
   trace("The altKey is: " + event.altKey);
}

Step 2

Test your move clip Ctrl + Enter. Now if you don’t see any numbers being traced out, you need to disable the keyboard shortcuts. On the SWF menu bar click on Control > Disable Keyboard Shortcuts and then you should see the key code numbers being traced out. You will notice that the uppercase and lowercase characters produce the same key code.



You can also trace a message when certain characters on the keyboard have been pressed. In the example below only the ‘enter key’ and the ‘j’ key will display a message, the other key will display nothing.

if (event.keyCode==13) {
   trace("The enter key has been pressed");
}

if (event.keyCode==74) {
   trace("The j has been pressed");
}

The following example will display a message when the alt, control and shift key have been pressed.

if (event.shiftKey == true) {
trace("The Shift key has been pressed");
}
 
if (event.altKey== true) {
   trace("The Alt key has been pressed");
}
 
if (event.ctrlKey == true) {
   trace("The Ctrl key has been pressed");
}

You can also detect multiple key presses. This example will trace a message when the shift and ‘a’ keys have been pressed.

if (event.shiftKey== true && event.keyCode==65 ) {
   trace("The Shift key and a key has been pressed");
}

Banner selector in Actionscript 3 part 2

This is part 2 of the banner selector in Actionscript 3 tutorial where the images will transition to the next image. Make sure you have completed the previous tutorial before attempting this one as additional code and modifications are added. I have also used the tweenlite plugin for the tweening which can be downloaded here.


Banner selector in Actionscript 3- part 2

Step 1

Open up your Banner selector FLA file. On the timeline select the images layer and remove all the key frames (Shift + F6). This will leave you with an empty Images layer on the timeline and nothing on the stage. Your timeline should look like below.




Step 2

Still on the Images layer, drag your images from the library onto the stage so there horizontally next to each other. Make sure your first image is exactly matching the dimensions of the stage area, so the x and y positions are at 0.




Step 3

Select all your images on the stage and convert it into a movie clip (F8) and then give the instance name: banner_mc.


Step 4

Open the Rulers by selecting View > Rulers on the menu bar then find the horizontal starting positions for each of your images. My image starting positions are: 0, 400, 800, and 1200, but your position will be different.




Step 5

On the timeline select the Actions layer then open up the action panel (F9) and make the following modifications. I assume you have completed the previous banner selector tutorial as most of the code has been left out.

//Import the tweenlite packages.
import com.greensock.*;

//This function tweens to appropriate image on the banner. Note my image starting
//positions are negative as they are moving to the left which is backwards.
function playBanner(event:MouseEvent):void {
   switch (event.target) {
       case button1 :
           TweenLite.to(banner_mc, 2, {x:0});
           break;
       case button2 :
           TweenLite.to(banner_mc, 2, {x:-400});
           break;
       case button3 :
           TweenLite.to(banner_mc, 2, {x:-800});
           break;
       case button4 :
           TweenLite.to(banner_mc, 2, {x:-1200});
           break;
   }
}

Step 6

Test your movie Ctrl + Enter. You should notice that the images transition instead of jumping to the next image.

Flash CS4 – Timeline icon size

This is a quick Flash CS4 tip where you will learn how to increase the size of the timeline icons. By default the size of the icons are set to normal which looks like below.

The size of the icons can be easily changed by selecting the ‘Frame View options’ button on the right side of the timeline panel. There are seven sizes of icons that you can choose from which are shown below.

To change the size of the icons, you can select Tiny, Small, Medium, Large, Preview or Preview in Context option. These options will increase/decrease the width of the individual frames. If you have a fully occupied timeline from long animations then choosing a smaller option will allow the whole animation to be seen on the timeline. Whereas if you wish to select an individual frame easily then can choose a larger frame option.

The short option will decrease the height the timeline which will let more layers be visible in the same amount of space.