Unsmiley face class in Actionscript 3

I previously wrote a post called Unsmiley face in Actionscript 3 where I created an unhappy face using the drawCircle() and curveTo() methods from the AS3 graphics class. I have now created a class called unhappyFace shown below.

Update 10/06/10: If you don’t want an unsmiley face then I now have an option for a smiley face.

/**
* Unhappy face class
* Created by ILIKE2FLASH.COM
* Version 1
**/
package com.ilike2flash{

   import flash.display.Shape;
   import flash.display.MovieClip;

   public class unhappyFace extends MovieClip {

       private var my_shape:Shape=new Shape();
       private var xposition:uint;
       private var yposition:uint;
       private var colour:uint;
       private var lineThickness:uint;
       private var happyFace:Boolean;

       /*
        * @param       lThick              The line thickness of the face.
        * @param       col                 The face colour.
        * @param       xpos                The x position of the face.
        * @param       ypos                The y position of the face.
        * @param       hf                  hf set true for smiley face.
       */
       public function unhappyFace(lThick:uint, col:uint, xpos:int, ypos:int,hF:Boolean = false) {
           addChild(my_shape);
           colour=col;
           lineThickness=lThick;
           xposition=xpos;
           yposition=ypos;
           happyFace=hF;
           drawFace();
       }

       private function drawFace():void {
           my_shape.x=xposition;
           my_shape.y=yposition;

           my_shape.graphics.lineStyle(lineThickness);
           my_shape.graphics.beginFill(colour);
           my_shape.graphics.drawEllipse(0, 0, 195, 190);

           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();
          
           if (happyFace) {
                  my_shape.graphics.moveTo(39,130);
                  my_shape.graphics.curveTo(100,200,160,130);
           } else {
                  my_shape.graphics.moveTo(39,150);
                  my_shape.graphics.curveTo(110,120,161,150);
          }

       }
   }
}

To use this class you need save the class file above in a folder call ‘ilike2flash’ within a folder class ‘com’. You then need to place the com folder in the same directory as your fla file or setup a class path. Then simply add the following code inside your fla file.

//Import the unhappyface class.
import com.ilike2flash.unhappyFace

//Create a new instance of the unhappy face class and add it onto the stage.
//If you want a smiley face then change the last parameter to true instead of false. 
var myFace: unhappyFace = new unhappyFace(3, 0xFF3603, 0, 0,false);
addChild(myFace);

Horizontal sliding menu in AS3 part 2

This is the second part of the Horizontal sliding menu in Actionscript 3 tutorial where you will learn how to add a different URL to each of the buttons. Some knowledge of opening URL’s in Actionscript 3 will be useful for this tutorial. The same code in this post can be applied to the other navigation menus on this blog.


Horizontal sliding menu in AS3 part 2

Step 1

Open the Horizontal sliding menu in AS3 tutorial.


Step 2

Open up the Actions panel and add the following code in red colour to the previous tutorial.

//Array to hold the URL’s of the buttons.
var linkArr:Array = new Array();
linkArr.push("http://www.ilike2flash.com/");
linkArr.push("http://www.ilike2flash.com/2008/03/tutorials.html");
linkArr.push("http://feeds2.feedburner.com/blogspot/YLDd");
linkArr.push("http://www.ilike2flash.com/2008/06/contact_09.html");

//Add the click events to all the buttons in the array.
for (var i:uint = 0; i < buttonsArr.length; i++) {
buttonsArr[i].addEventListener(MouseEvent.ROLL_OVER, moveFollow);
buttonsArr[i].addEventListener(MouseEvent.CLICK, clickURL); 
} 

//This function goes to the appropriate URL when the button is clicked.
function clickURL(event:MouseEvent):void {
for(var j:uint =0;j < linkArr.length; j++){ 
if(event.currentTarget == buttonsArr[j]){ 
navigateToURL(new URLRequest(linkArr[j])); 
} 
} 
} 

Step 3

Test your movie Ctrl + Enter.

Banner slider in Actionscript 3

In this tutorial you will learn how to create a banner slider in Actionscript 3. This effect will slide the images from the left when the corresponding thumbnail is selected. You will need four images for this tutorial and four resized thumbnail versions of the images. I have used free stock image which can be downloaded from sxc.hu


Banner slider in Actionscript 3

Step 1

Open a new AS3 Flash file.
Import all your images into the library by selecting File > Import > Import to library. You will also need to create thumbnails of your images in Photoshop. Or you can alternatively resize the images from the library using the Free transform tool (Q). Then on the timeline insert four layers as shown below.




Step 2

Drag each of your images from library onto the corresponding layer on the timeline. Make sure you leave a small gap on the right side of the stage for the thumbnails.




Step 3

On the timeline insert a new layer called ‘Thumbnails’ then drag your thumbnails onto the stage as shown below.




Step 4

Covert each of your images into movie clips (F8) then convert your thumbnails into buttons (F8). If you don’t know how to create buttons then checkout the basic buttons tutorial.



Step 5

Give your thumbnails the following instance names respectively: thumb1_btn, thumb2_btn, thumb3_btn and thumb4_btn. And for your images: image1_mc, image2_mc, image3_mc and image4_mc.


Step 6

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

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

//Array to all movie clips instance and all the button instances. 
var mcArray:Array=[image1_mc, image2_mc, image3_mc, image4_mc];
var btnArray:Array=[thumb1_btn, thumb2_btn, thumb3_btn, thumb4_btn];

//This loops through all the buttons adding mouse events to each of the button. 
for (var j:int = 0; j < btnArray.length; j++) {
 btnArray[j].addEventListener(MouseEvent.CLICK, moveImage);
}

//This offsets the movie clip by placing it double the width and to the left of the stage.  
for(var k:int =1; k < mcArray.length; k++){
 mcArray[k].x = -mcArray[k].width*2; 
}

//This function moves the images to the right of the stage to the 0 x position when
//the thumbnail is selected. If the thumbnail is not selected it remains in the same
//position.
function moveImage(event:MouseEvent):void {
 for (var i:int = 0; i < btnArray.length; i++) {
  if (event.currentTarget==btnArray[i]) {
   TweenLite.to(mcArray[i],1, {x:0});
  } else {
   TweenLite.to(mcArray[i],1, {x:-image1_mc.width * 2});
  }
 }
}

Step 7

Test your movie clips Ctrl + Enter. Try clicking on the thumbnails and you should see the images sliding into position.

Timed random rectangles in AS3

In this tutorial you will learn how to create randomly coloured and sized rectangles on the stage at timed internals. To achieve this effect I have used the timer class to set a timer delay of 500 milliseconds which will trigger a function to create rectangles on the stage. The rectangles are created using the drawRect() method from the Graphics class.

Timed random rectangles in Actionscript 3

Step 1

Open a new Flash AS3 file then open up the Actions panel and enter the following code.

//This creates a new instance of the timer class with a delay of 500 milliseconds.
var myTimer:Timer=new Timer(500);

//Adds an event listener to the timer which will trigger the randomCircles function
//every 500 milliseconds.
myTimer.addEventListener(TimerEvent.TIMER, randomCircles);

//Starts the timer.
myTimer.start();

function randomCircles(event:TimerEvent):void {
    //The randomColour variable will give a random colour.
    var randomColour:int = Math.floor(Math.random() * 0xFFFFFF);
   
    //The randomSize will give a random size between 10 - 100.
    var randomSize:int = Math.floor(Math.random() * 100) +10;
   
    //This creates a new instance of the shape class with
    //random colour and size.
    var myRect:Shape = new Shape();
    myRect.graphics.beginFill(randomColour, 1);
    myRect.graphics.drawRect(0,0, randomSize, randomSize);
    myRect.graphics.endFill();       
   
    //This places the rectangle on the random position on the stage.
    myRect.x = Math.floor(Math.random() * stage.stageWidth);
    myRect.y = Math.floor(Math.random() * stage.stageHeight);
   
    //Add the rectangle on the stage.
    addChild(myRect);
}

Step 2

Test your movie Ctrl + Enter.

Free AS3 String util

The String class in Actionscript 3 has twenty methods for manipulating string data. I have found a free String class here that has an additional thirty one methods for manipulating strings. Some of the features include adding quotes, capitalizing and reversing strings. This class is straightforward to use, you need to firstly download the file and extract it. Then place the class file in the same directory as your FLA file or setup a source path to your file. You then can start coding with this class. The documentation for this class can be found inside the AS3 class file.

Below is an example of the String util where I have used the captialize method to capitaize the characters in the string.

import StringUtils;

var myString:String = "This is some text by ilike2flash.";
var newString:String = StringUtils.capitalize(myString);
trace(newString);

Simple particle effect in AS3

I have created the following particle system by using some code from the book Learning Actionscript 3.0 by Rich Shupe and Zevan Rosser. I slightly modified the code so that the particles emit from the mouse position instead of the centre of the stage. A particle system is basically a way of animating many objects at the same time. The animated objects can be used to replicate smoke, fire, water, explosions and many more effects.

I previously wrote a post on the flint particles which is a free open source particle effect in Actionscript 3.0, if you’re interested in particles checkout this post.