ilike2Flash

Flash CS4 Easter eggs

2010-01-03T09:42:00.001-08:00

In Flash CS4 there are some Easter eggs which I will reveal you. Easter eggs are basically hidden messages or features purposefully left by the developers as some kind of funny prank.

To find the Easter eggs you need to open up Flash CS4. Choose an AS3 Flash file then from the menu bar select Help > About Adobe Flash CS4. The following window should appear.

You will notice the credits of the Flash developers appearing from the bottom of the window. Now click on the following three places shown below and “Easter eggs” will be revealed. The first EE will reverse the credits from appearing; the second EE will speed up the credits and the third EE will show a slideshow of the developers.

If you know any more Easter egg, feel free to leave any comments below.

Customise the Tools panel in Flash CS4

2009-12-31T07:13:00.000-08:00

I previously wrote a post on the tools panel in Flash CS4. In this post I will show you how to customise the tools panel in Flash CS4. Customising the tools panel can involve rearranging the tools to different locations, or removing the tools you don’t use.

To customise the tools panel, you need to go to Edit > Customise Tool panel from the menu bar. The following window should appear.

You now select the tool you want to modify on the left side of the window. The selected tool will appear in a red outline. If you want to add another tool to the current selection, simply choose the tool and hit the ‘Add’ button. You can add as many other tools to the selection as you wish. If you want to remove a tool from the tools panel, you select the tool and hit the ‘Remove’ button. This will leave an empty space on the tools panel as shown below.

To return the tools panel back to the default settings. You can select the ‘Restore Default’ button which will revert back to the default.

The tools panel in Flash CS4

2009-12-29T15:24:00.000-08:00

This is an update from the tools panel in detail post. The tools panel is Flash CS4 has been updated with six new tools since I’ve written the previous post. Most of the twenty three tools should be familiar if you have used Flash 8 or Flash CS3 before.

In Flash CS4 there are many more tools available, so some of the tools share the same space. If you see a black triangle at the lower right of a tool, you can click it to access the other tools which share the same space. The tools panel can be displayed as one long column or a combination of two. It can also be collapsed or hidden from view. Below is an example of the tools panel. Note the names which have asterisks contain multiple tools.

1. Selection – Selecting and moving objects.
2. Subselection – Picking points on a path.
3. Free transform – Resizing, rotating and skewing objects.
Gradient transform - Applying gradient fills to an object.
4. 3D Rotation – Rotating the X, Y and Z positions of an object. (New tool)
3D Translation – Moving an object in the X, Y, and Z direction. (New tool)
5. Lasso – Selecting objects like a lasso.
6. Pen – Adding and deleting paths.
7. Text – Adding text to a fla file.
8. Line – Drawing straight lines.
9. Rectangle/Oval/Polystar – Drawing various primitive shapes.
10. Pencil – Drawing freehand lines.
11. Brush – Similar to the pen tool, you can draw brush strokes.
SprayBrush – Create graffiti style sprays to a fla file. (New tool)
12. Deco – Create various flowering vine and leaf patterns. (New tool)
13. Bone – This is for adding bones to animate an object using inverse kinematic (IK) animations. (New tool)
Bind – This is to be used in conjunction with the bone tool where you bind points from the bone tool. (New tool)
14. Paint bucket – Filling objects with colours.
15. Eye dropper – Selecting a sample colour.
16. Eraser – Erasing parts of objects.
17. Hand – Moving to different part of the document.
18. Zoom – Zooming in and out of a document.
19. Stroke colour – This is for changing the outline of an object.
20. Fill colour – This is fill the inside of an object.
21. No colour – Removing the current colour.
22. Swap Colour – Switching the fill and stroke colours around.

Free Flash page flip effect

2009-12-23T04:42:00.000-08:00

A Flash page flip effect gives the illusion of a realistic page turn of a book. This effect mimics the real way of browsing an actual document, so you would have to drag the mouse to turn over a page, or you could click a link to jump to a certain page. Many websites charge money for this effect, but I will provide three websites which offer this effect of free. You have to be aware that these free versions contain no advanced functionalities. However, for most people the basic version will work just fine.

1. Pageflip – Apparently the most professional and realistic free Flash book. Some of the features include: update via XML, page flip sounds, hard cover and many more.

2. Pixelwit – A powerful page flip which include the following features: adding page, resizing page, multiple page flip, and many more.

3. Flashpageflip – Another free Flash page flip with similar features to the above two links.

If you know any free Flash page flip effects, feel free to leave any comments below

Limit stage boundaries in AS3

2009-12-20T05:56:00.000-08:00

I previously wrote a post called limit movements on the stage in Actionscript 2 where an object was limited to the edges of the stage boundaries. In this tutorial I will provide the code for the Actionscript 3 version. Before attempting this tutorial make sure you have completed the Key controls in AS3 as code will be added to this tutorial.

Limit stage boundaries in AS3

Step 1

Open up the Keyboard control AS3 tutorial.

Step 2

On the timeline select the Actions layer and then open up the Actions panel and enter the following code:

function limitStageBorder(object:MovieClip) {
   //1.
   var objectHalfWidth:uint=object.width/2;
   var objectHalfHeight:uint=object.height/2;
 
   //2.
   if (object.x+objectHalfWidth>stage.stageWidth) {
       object.x=stage.stageWidth-objectHalfWidth;
   }
   else if (object.x -  objectHalfWidth <0) {        
       object.x=0+objectHalfWidth;    
   }     

   //3.    
   if (object.y-objectHalfHeight<0) {        
       object.y=0+objectHalfHeight;    
   }    
   else if (object.y + objectHalfHeight > stage.stageHeight) {
       object.y=stage.stageHeight-objectHalfHeight;
   }
}

Code:
1.This creates two local variables which store half the objects width and height.
2.If the object moves over the stage width then the objects get pushed back by adding or subtracting the height/width of the object.
3.If the object moves over the stage height then the objects get pushed back by adding or subtracting the height/width of the object.

Step 3

You now need to add the limitStageBorder() function to enable the limiting of the stage boundaries. Place the following line of code inside moveObect() function.

limitStageBorder(lemon_mc);

Step 4

Test your movie clip Ctrl + Enter. You should now notice the object cannot move outside of the stage area.

Flash CS5 preview

2009-12-18T09:56:00.000-08:00

Lee Brimelow from gotoandlearn.com has posted a video showing all the new features of the new Flash CS5. You can watch the video here. The video is over 20 minutes long with the new features and improvements all being mentioned.

Some of the new features of Flash CS5 include:
• Some of the new features include:
• iphone packager which will allow you to publish iphone applications.
• Faster start up window that will not be displayed on top of every program.
• New video player skins.
• New text engine with improved character embedding panel, text control, styling, advanced text options etc.
• New XFL format which will replace the FLA format. The XFL format is a XML representation of the data in your project.
• New code snippets panel for faster Actionscript coding. You will now be able to generate many lines of code with a single click which should help with the learning of Actionscript 3.
• Actionscript custom class recognition with code hinting and completion.
• Redesigned Compiles Error panel.
• Integration with Flash builder.
• New brushes in the Deco tool.

(Checkout the video to find out the other features of the new Flash CS5).

Unfortunately there will not be a public beta as Adobe has decided not to release it. This is because Adobe have changed there plans from all the positive feedback they have received, so are instead trying to provide an earlier release date for the final CS5 software. The full post from Adobe can be found here.

Number guessing game in AS3

2009-12-14T15:03:00.000-08:00

In this Flash tutorial you will learn how to create a number guessing game in Actionscript 3.0. A number guessing game is where you have to guess a randomly selected number. If you guess the number wrong you will be prompted to select another number and if you guess the correct number, an appropriate message will appear.

I will be creating this game in two parts. The first part will create the game interface which will consist of creating the buttons and text fields, as well as adding the main Actionscript code for the game. The second part of the game will deal with adding additional features to the game such as limiting the amount of guesses and displaying the number of guesses.

Some knowledge of basic buttons will be needed for this tutorial.

Number guessing game in AS3

Step 1 – Game title

Open a new Flash AS3 file. Then select the Text tool (T) with static text and type the following message shown below. I have also given my message a double knocked out effect which is optional.

Step 2 – Create dynamic text fields

Select the Text tool (T) with dynamic text and drag a rectangular text field below your message. Then choose the format option ‘Align Center’ and give your dynamic text the instance name: message_txt. If your dynamic text characters look uneven, you may need to embed the following character glyphs: Uppercase, lowercase, numerals and punctuation.

Step 3 – Create input text fields

This time select the Text tool (T) with input text and drag an input text field below the dynamic text field. Make sure your input text field has enough room for three characters. I have selected the option ‘Show border around text’ which displays a black border around the input text field as shown below. I have also set the paragraph behavior to 'single line' and changed the 'Max Char' to 3 which will stop the more than three characters appearing.

Now give your input text field the instance name: input_txt.

Step 4 – Create buttons

Create two buttons on the stage below the input text field. If you don’t know how to create buttons checkout the basic buttons tutorial. You can alternatively use two button components, or the built in button library. One of the buttons should have the name “Guess” and the other with the name “Play Again” like below.

Give the buttons the following instance name respectively: guess_btn and playagain_btn.

So, the game interface should now look like below:

Step 5 – Add code

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

//Declares variables.
var beginMessage:String;
var randomNumber:uint;
var my_guess:uint;

function init():void {
 //Initally disables the play again button, and enables the guess button.
 playagain_btn.enabled =false;
 guess_btn.enabled = true;

 //Display a begining message in the message_txt dynamic text field.
 beginMessage="Choose a number between 1 - 100.";
 message_txt.text=beginMessage;

 //Restrict the characters in the message_txt text field, so only the
 //numbers 0 - 9 can be entered.
 message_txt.restrict="0-9";

 //Clears the input text field.
 input_txt.text="";

 //This stores a random number between 1 - 100 to the variable randomNumber.
 randomNumber = Math.floor(Math.random() * 100 + 1);

 //Adds an event listener to the guess button.
 guess_btn.addEventListener(MouseEvent.CLICK, yourGuess);
}

function yourGuess(event:MouseEvent):void {
 //This stores data from the input text field to the variable my_guess.
 my_guess=uint(input_txt.text);

 //This checks if the guessed number is greater than the random number.
 if (my_guess > randomNumber) {
     message_txt.text = "Your guess, " +  my_guess + " is too high.";
 }
 //This checks if the guessed number is lower than the random number.
 else if (my_guess < randomNumber) {                   
     message_txt.text = "Your guess, " +  my_guess + " is too low.";         
 }   
 //This displays a message when the correct number is guessed.  
 else{     
    message_txt.text = "Well done, the number is " + randomNumber + ".";                    
    winGame();        
 }
} 

function winGame():void{        
//Disables the guess button and enables the play again button.       
   guess_btn.enabled = false;       
   playagain_btn.enabled = true;        

  //Removes the listener from the guess button, and adds a listener to the        
  //play again button.       
  guess_btn.removeEventListener(MouseEvent.CLICK, yourGuess);        
  playagain_btn.addEventListener(MouseEvent.CLICK, guessAgain);
}   

function guessAgain(event:MouseEvent):void{        
  //Runs the init() method.        
  init();
}  

//Runs the init() method.
init();

Step 6 – Test

Test your number guessing game Ctrl + Enter.

You should now have number guessing game in Actionscript 3.0. Remember to subscribe for part 2 where I will be limiting the number of guesses in the game.

Display date in Actionscript 3

2009-12-09T08:53:00.000-08:00

In this tutorial you will learn how to display the date in Actionscript 3. This is an update from the display date tutorial in AS2. To display the date you need to use the Date class which will retrieve all date details such as the months, the years and the days. If you have completed the AS2 tutorial all the code below should look familiar to you.

Display date in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Text tool (T) with dynamic text and create a small rectangle shape on the stage like below.

You may need to embed the following glyphs by selecting the ‘Character Embedding’ button: Uppercase, Lowercase, Numerals and Punctuation.

Step 2

Give your dynamic text field the following instance name shown below:

Step 3

On the timeline create a new layer called ‘Actions’, and open up actions panel (F9) and enter the following code.

//Array to hold a list of the weekdays.
var weekdays:Array = new Array ("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday");

//Array to hold a list of the months.
var months:Array = new Array ("Jan","Feb","Mar","Apr","May","Jun","Jul",
"Aug", "Sep", "Oct","Nov","Dec");

//Adds an event listener to the dymanic text field.
the_date.addEventListener(Event.ENTER_FRAME,showDate);

function showDate(event:Event):void {
//Create a new instance of the date class.
var myDate:Date = new Date();

//Retrieve the day, month and year from the date class.
var theDay=weekdays[myDate.getDay()];
var theMonth=months[myDate.getMonth()];
var theDate=myDate.getDate();
var theYear=myDate.getFullYear();

//Display the date in the dynamic text field.
the_date.text=theDay+", "+theMonth+" "+theDate+", "+theYear;
}

Step 4

Test your movie clip Ctrl + Enter.

You should now be able to display the date in Actionscript 3.0.

Good programming practices for AS3

2009-12-08T14:43:00.000-08:00

When you are coding Actionscript code it’s always good to use some coding practises to make your life simpler. Below is a list of some good coding practices that people should be aware of. If you have any suggestions leave a comment below.

• Naming conventions – When you are naming a function or variable you should make sure you use a name that describes what the function or variable does.

• Formatting – The layout of the code should be consistent with the whole AS file, as a badly formatted layout can be difficult to read.

• Comments – Add comments to your code so it is clear exactly what your code does. If you need to return to your code after many years, you should be easily able to identity your code. Good comments also allow other users to figure out what your code does.

• Reused code – Always think of ways you can reuse code. For example, a function that can be used in more than one place.

• Program modular – Separate large pieces of code into smaller pieces to help with reusability. This will also help if you need to modify your code later on.

• Simplify – Don’t over complicate your code. Always find ways of minimising coding. For example, if a coding activity can be accomplished with ten lines of code. Don’t write code which takes up 20 lines of code.

Actionscript 3 - 1120 error

2009-12-07T04:39:00.000-08:00

An error 1120 is ‘Access of undefined property’ which can means two things. Firstly, you are trying to access an undefined variable, and secondly you have not given a correct instance name to a movie clip or button.

To solve this problem you need to make sure the instance name field is not empty and contains a valid instance name with correct spelling.

You also need to make sure you make the correct reference to the instance name as shown below.

myMovieClip.addEventListener(MouseEvent.CLICK, test);

This should solve an 1120 AS3 error.

Display 24 hour time in Actionscript 3

2009-12-02T08:22:00.000-08:00

In this tutorial I will show you how to display a 24 hour time in Actionscript 3.0. This method is similar to the display time in AS3 tutorial as only some small modifications are needed. The time is displayed using the Date class which gets the time and date information from the users computer. The following steps should be very familiar if you have completed the display time in AS3 tutorial.

Display 24 hour time in Actionscript 3

Step 1

Open a new Flash AS3 file. Then select the Text tool and create a dynamic text field on the stage like below:

After you have created a dynamic text field, select the ‘Character Embedding’ button and add the following glyphs: Numerals and Punctuation. You need to hold down the Ctrl key on the keyboard to select more than one glyph.

Step 2

Select your Dynamic text field and give it the following instance name as shown below:

Step 3

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

//Add an event listener to the dynamic text field.
the24Time.addEventListener(Event.ENTER_FRAME,show24Time);

function show24Time(event:Event):void {
 //Creates a new instances of the date class
 var myTime:Date = new Date();
 //This returns the hour, minutes, and seconds.
 var theSeconds=myTime.getSeconds();
 var theMinutes=myTime.getMinutes();
 var theHours=myTime.getHours();

 //This adds '0' to the hours if there is only one digit.
 if (String(theHours).length == 1) {
     theHours="0"+theHours;
 }
 //This adds '0' to the minutes if there is only one digit.
 if (String(theMinutes).length == 1) {
    theMinutes="0"+theMinutes;
 }
 //This adds '0' to the seconds if there is only one digit.
 if (String(theSeconds).length == 1) {
    theSeconds="0"+theSeconds;
  }
 //Display the 24 time in the dynamic text field.
 the24Time.text =theHours+":"+theMinutes+":"+theSeconds;
}

**The 24 hour Actionsript code has basically remove nine lines of code from the display time in AS3 tutorial, so should look very similar.

Step 4

Test your 24 hour time Ctrl + Enter.

You should now have a 24 hour time in Actionscript 3.0. If you want a 12 hour time take a look at this.

Creative movieFX V2 – review

2009-12-01T07:13:00.000-08:00

I mentioned in a previous post that I had been given a copy of the Creative textFX component to review, but I had also been given a copy of the Creative movieFX, so in this post I will be reviewing this component. Creative movieFX is a Flash component that gives you over 280 movie clip effects which are available in three different kinds of transitions. The three transitions are fully customisable from the user interface, or from using Actionscript code.

The installation of this component is similar to the Creative TextFX component. If you are unsure of how to install this component then take a look at the post on installing extensions. When you have installed the component, create a movie clip on the stage and give it the instance name: movieFxExample_mc. I have converted the following free stock image into a movie clip.

After select Window > Components then drag an instance of the Creative MovieFX onto the stage.

Now open up the MovieFx panel by selecting Windows > Other Panels > MovieFx V2 Panel. At the bottom of this panel you should see the ‘Other options’ menu which displays your movie clips instance as the target name automatically. This means your movie clip instance is the target object to receive the movie clip effects.

The movieFx panel as shown below is similar to the TextFx Panel. There are three different types of transition effects you can choose from which are: wait effects, in effects and out effects. These transition effects can easily be created from the intuitive and easy to use interface. An addition benefit is that every effect is fully customisable, so you can change the duration, easing type, fade, angle, rotations and many more effects without using any Actionscript code. There is also a filters effect panel for you to add visual enhancements to move clips, and an actions panel for adding custom behaviours.

To sum up, Creative MovieFX is very easy to use, a unique movie clip effects can be created literally within minutes without using Actionscript code. The intuitive interface makes customising an effect very simple as you can select the option parameters from drop down menu. Below are some examples of movie clip effects using the Creative MovieFX.

For more information checkout the Creative MovieFX component at extendstudio.com.

Creative TextFX V2 – review

2009-11-28T07:57:00.000-08:00

The kind people over at extendstudio.com have given me copy of the Creative TextFX V2 to review. Firstly, Creative TextFX V2 is a Flash component that gives you access to over 300 text effects. These text effects are fully customisable from the user interface and also from using Actionscript code.

The installation of the Creative TextFX is very straight forward. If you don’t know how to install components then checkout the post on installing extensions. After you have installed the component, you go to Window > Components then drag an instance of the Creative TextFX on the stage.

You now need to open up the TextFx panel by going to Window > Other Panel > TextFX panel making sure you have selected the component on the stage. The following panel should appear.

The numbers of different text effects you can create are practically limitless only your imagination can hold you back. There are three main types of text effects you can created which are: in effects, wait effects, and out effects. The ‘in/out’ effects create transitions in and from the stage, while the ‘wait’ effects create the transitions in one place. You can also add filters and custom actions to the text effects.

Overall, Creative TextFX is very simple and intuitive to use. The interface is easy to understand and you have the ability to fully customise every aspect of a text effect without using any Actionscript code. However, for those users who are Actionscript geeks, you can also use Actionscript code to dynamically create text effects. Below are some examples I created using the Creative TextFX component.

For more information checkout the Creative TextFX component at extendstudio.com.

Remove an event listener in Actionscript 3

2009-11-24T05:42:00.000-08:00

If you want to remove or delete an event listener from an event in Actionscript 3, you need to use the removeEventListener() method. Removing an event is similar to adding an event as you need to include the type and listener for the parameters. So, the method would look something like below:

eventTargetInstance.removeEventListener(type,listener);

The example of this method below removes the mouse click event from the stage instance.

stage.removeEventListener(MouseEvent.CLICK, clickingExample);

Removing an event listener reduces memory and processor usage, so it’s good coding practice to remove an eventListener when it is no longer needed in a program. You need to again include the event type and the listener parameters.

Numericstepper component in Actionscript 3

2009-11-22T08:22:00.000-08:00

In this tutorial you will learn how to use the Numericstepper component in Actionscript 3. The Numericstepper component displays a series of numbers which step up and down incrementally. This component contains an input text field and two arrow buttons that step through the values. When the arrow buttons are selected the numbered value can either increase or decrease incrementally, until the minimum or maximum value is reached. The Numeric stepper uses the change event to detect when a change has occurred. For more information checkout the AS3 NumericStepper component reference.

I will be showing a brief overview of the stepper components properties, and then I will show a practical example of this component.

Brief overview

1. Open up a Flash AS3 file.

2. Select Window > Components and drag a NumericStepper component onto the stage. After select the text tool and drag a dynamic text field above the component as show below.

3. Give the following instance names for the component and text field accordingly: my_ns and my_text.

4. On timeline create a new layer called Action then open up the Actions panel (F9) and enter the following code:

This code basically increases and decreases the number value on the stepper and text
field using the ‘value’ property.

my_ns.addEventListener(Event.CHANGE, updateText);

function updateText(event:Event):void{
my_text.text = "The NumericStepper value is " +  my_ns.value;
}

You can set the maximum and minimum value on the stepper by using the
‘maximum’ and ‘minimum’ properties.

my_ns.minimum = 5;
my_ns.maximum = 50;

my_ns.addEventListener(Event.CHANGE, updateText);

function updateText(event:Event):void{
my_text.text = "The NumericStepper value is " +  my_ns.value;
}

You can set the next unit change of the stepper using the ‘stepSize’ property.

my_ns.minimum = 5;
my_ns.maximum = 45;
my_ns.stepSize = 15;

my_ns.addEventListener(Event.CHANGE, updateText);

function updateText(event:Event):void{
my_text.text = "The NumericStepper value is " +  my_ns.value;
}

Checkout the AS3 NumericStepper component reference for a list of the other properties.

Practical example

Step 1

Open a new Flash AS3 file.
Select the Oval tool with any colour and drag an oval shape on the stage like below.

Step 2

Convert your oval shape into movie clip (F8) with the registration point at the top left and give the instance name: my_oval.

Step 3

On the timeline insert a new layer called “Components” then select Windows > Components and drag three stepper components on the stage. Now select the Text tool with static text and type the following message above the components.

Step 4

Give each of the components the following instance names accordingly: my_x and my_y.

Step 5

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

//Sets the minimum (x) and maximum (x) values of the stepper,
//then sets the ovals position to the stepper.
my_x.minimum=0;
my_x.maximum=stage.stageWidth - my_oval.width;
my_x.value=my_oval.x;

//Sets the minium (y) and maximum (y) values of the stepper,
//then sets the ovals position to the stepper.
my_y.minimum=0;
my_y.maximum=stage.stageHeight - my_oval.height;
my_y.value=my_oval.y;

//Event listeners to for the steppers.
my_x.addEventListener(Event.CHANGE, moveXOval);
my_y.addEventListener(Event.CHANGE, moveYOval);

//This moves the oval in the x direction according to the stepper.
function moveXOval(event:Event):void{
my_oval.x=event.target.value;
}

//This moves the oval in the y direction according to the stepper.
function moveYOval(event:Event):void{
my_oval.y=event.target.value;
}

Step 6

Test your steppers Ctrl + Enter. Now change the values of the steppers and you should notice the oval shape move.

You should now be able to use the Numericstepper component in Actionscript 3

Glow button menu in Actionscript 3

2009-11-20T09:39:00.000-08:00

In this tutorial you will learn how to create a glow button menu effect in Actionscript 3. The menu buttons will show a glow effect when the mouse is over the menu items, and the glow effect will disappear when the mouse is off the menu items. You will need the tweenMax plug-in for this tutorial which can be downloaded from blog.greensock.com/tweenmaxas3. If you down know how to install tweenMax checkout this tutorial.

Glow button menu in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Rectangle tool (R) and create your buttons on the stage. I have used # #99FF32 colour for my buttons, but you can use whatever colour you wish. When you have created one button, simply duplicate the number of buttons you want. I have placed my buttons horizontally you can place them vertically if you wish.

Step 2

Select the Text tool (T) and enter the name of the menu item you want inside the rectangle. I have used Tahoma bold font with #0000FF colour.

Step 3

Convert each of your menu items in movie clips (F8). The select each item in turn and give them the following instance names accordingly: menu1_mc, menu2_mc and menu3_mc.

Step 4

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

//Import the packages needed.
import gs.*;
import gs.easing.*;

//Array to hold all the button instances.
var buttonArr:Array = new Array(menu1_mc,menu2_mc,menu3_mc);

//Loop through all the button instance using the ‘for loop’.
for (var i =0; i < buttonArr.length; i++) {
    buttonArr[i].addEventListener(MouseEvent.MOUSE_OVER, glow);
    buttonArr[i].addEventListener(MouseEvent.MOUSE_OUT, noGlow);
    buttonArr[i].buttonMode = true;
}

//Function to create glow effect.
function glow(event:MouseEvent):void {
TweenMax.to(event.currentTarget, 1, {glowFilter:{color:0x0000ff, alpha:1, blurX:30, blurY:30,strength:1}});
}

//Function to remove glow effect.
function noGlow(event:MouseEvent):void {
TweenMax.to(event.currentTarget, 1, {glowFilter:{alpha:0}});;
}

Step 5

Test your glow button menu Ctrl + Enter. Now move your mouse over the menu items and you should see a glow effect around the button.

You should now have a glow button menu in Actionscript 3.

Change text direction in Flash CS4

2009-11-17T03:43:00.000-08:00

Everyone knows you can type horizontal text in Flash CS4, but did you know you can change the direction of the text to vertical. You can change the direction of the text without using the transform tool, or repeatedly pressing the enter key to form a vertical line.

Firstly, you need to select the Text tool (T) then locate the ‘Paragraph’ section on the properties panel. If you can see the properties panel, select Window > Properties (Ctrl + F3).

Now select the ‘orientation’ button as shown above. You can either select the vertical left to right, or the vertical right to left. Both of these options set the text vertical, but change the reading point of view as shown below. As you can see below the ‘vertical left to right’ expands the text field to the right. While the ‘vertical right to left’ expand the text field to the left. This is a great feature for people using different languages because you can easily change the character flow from left to right.

The orientation button also lets you switch between horizontal and vertical text which avoids you having to manually edit the text. You can change the default text setting to vertical in the Flash preferences by choosing Edit > Preferences > Text then checking the ‘Default text orientation’ box. You also have the option of change the text work flow and disabling the kerning.

Freebies

2009-11-15T05:01:00.000-08:00

This freebies section contains a collection of free Flash related goodies. Everything available on this page can be downloaded for free. Remember to subscribe to keep updated with the latest freebies. If you have any suggestions for any freebies, feel free to leave any comments below.

Freebies at Flabell - Flash component freebies for both AS2 and AS3.
Free Flash templates - 6 Free Flash template websites.
Free Flash page flip effect – Three places where you can find a free page flip effect.

Free Flash templates

2009-11-14T16:33:00.001-08:00

Flash websites are becoming more popular, so I have compiled a small list of websites which provides free Flash templates. If you have any suggestions for more websites, feel free to leave a comment below.

1. flashvillage – All of the templates on this website are completely free. There is a tutorial section on the website which teaches you to modify the Flash templates.

2. flashmo – A popular website with many styles of templates. There is also a premium section where you can purchase templates.

3. flash-templates-today – Unique template designs that can be downloaded for free. There are currently 34 templates that can be downloaded.

4. flashtemplatesdesign – Many different categories of Flash templates.

5. massivetemplates- Massive amounts of free templates.

6. templatesbox- Contains a large collection of free Flash templates.

Stretch menu effect in Actionscript 3

2009-11-13T10:24:00.000-08:00

In this tutorial you will learn how to create a stretch menu effect in Actionscript 3.0.
The menu effect will stretch horizontally when the mouse is over the menu items, and will shrink when the mouse is off the menus items. This stretching effect is created using motion tweens in the timeline. I have created this tutorial in Flash CS4, but it should still work for CS3.

Stretch menu effect in Actionscript 3.0

Step 1

Open a new Flash AS3 file.
Select the Rectangle tool (R) and drag a small rectangle shape on the stage like below. I have placed the rectangle shape at the left most edge of the stage. The dimensions for my rectangle shape are 35 width & 35 height.

Step 2

Convert your rectangle shape into a move clip (F8). Then double click on the movie clip to enters its timeline and replicate the following layers. The first layer will hold the Actions and has a stop() method in the 1st and 20th frames. The second layer will hold the text and the third layer will hold the menu items.

Step 3

Right click on the rectangle shape and select ‘Create Motion Tween’ from the drop down menu. If a warning message appears click OK. This will convert the rectangle shape into a movie clip.

On the timeline select the 13th frame. Then select the free transform tool and change the width to 130 from the properties panel. Your rectangle shape should look like below.

Step 4

On the timeline, lock the ‘Menu Item’ layer and then select the ‘Text’ layer and insert a key frame (F6) on the 12th frame.

Type some text on the menu items as show below. I have used Arial font with 15pt size.

Right click on your text message and select ‘Convert to Motion tween’ from the drop down menu. On the timeline select the 18th frame and then move your text message slightly to the right. This will create a moving effect for the text when the menu item is stretching.

Select the 11th frame, then click the message on the stage and change the alpha to 0% on the colour effect panel. Your timeline should eventually look like below.

Step 5

Return to the main timeline. From the library panel duplicate as many menu items as you wish by right clicking on the item and selecting ‘Duplicate’. Remember to change the text message movie clips for each menu item, or the text will remain the same. After you have finished duplicating the menu items drag them onto the stage.

Step 6

Give each of your menu items the following instance names: menu1, menu2, menu3 and menu4 accordingly.

Step 7

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

//Array to hold all the button instances.
var menuArr:Array=new Array(menu1,menu2,menu3,menu4);

//This loops through all the buttons and adds event listeners to each button.
for (var i = 0; i < menuArr.length; i++) {    
menuArr[i].addEventListener(MouseEvent.MOUSE_OVER, stretchOut);   
menuArr[i].addEventListener(MouseEvent.MOUSE_OUT, stretchIn);    
menuArr[i].buttonMode = true; }  

//This function plays the stretch effect.
function stretchOut (event:MouseEvent):void {    
event.currentTarget.gotoAndPlay("2");
}  

//This function returns the menu to its original position.
function stretchIn(event:MouseEvent):void {    
event.currentTarget.gotoAndStop("1");
}

Step 8

Test your stretch menu effect Ctrl + Enter. Now move your mouse over each menu item and you should see it stretch.

You should now have a stretch menu effect. Remember to subscribe or follow me to keep updated with the latest tutorials.

Magic 8 ball tutorial in AS3

2009-11-10T14:58:00.000-08:00

In this tutorial you will learn how create a magic 8 ball game in Actionscript 3.0. A magic 8 ball is a classic toy used for telling the future by answering your questions. You would normally ask a question to the 8 ball, shake it and turn it over to reveal the predicted answer. The standard magic 8 ball has twenty predicted answers: ten positives, five negatives and five maybes. I will be reducing the number of answers to ten in this tutorial.

I will be creating this tutorial in two parts. The first part will deal with creating the initially magic 8 ball game, and the second part will deal with adding the special effects such as the movements and sounds.

You will need the tweenLite plug-in for this tutorial which can be downloaded from: blog.greensock.com/tweenlite/.

Magic 8 ball tutorial in AS3 – part 1

Step 1

Open a new Flash AS3 file and then replicate the timeline shown below. I have created three layers on the timeline. The first layer is called ‘actions’ and is used for holding the Actionscript code. The second layer is called ‘labels’ and has two keys frames with different names. To add these names you select the appropriate key frames and change the name in the properties panel. The final layer is called ‘Magic 8 ball’ and is used display the magic 8 ball.

Step 2

On the timeline, select the ‘Magic 8 ball’ layer then the first frame.
Create the following magic 8 ball as shown below using the Oval tool. The magic 8 ball is simply two oval shapes inside each other with a letter in the centre.

Step 3

Convert your magic 8 ball into a movie clip (F8). Then give the movie clip the instance name: “magic8Front_mc”.

Step 4

Select the text tool with input text and drag an input text field below the magic 8 ball. Make sure you select the ‘check border around text’ button, and change the behaviour to “Single line”. Then select the input text box and give the instance name: “question_txt”. You may also wish to embed the uppercase, lowercase and punctuation characters into the input text field

Step 5

On the timeline, select the ‘Magic 8 ball’ layer then the tenth frame.
Create the reverse of the magic 8 ball as shown below using the Oval tools. I have added a linear gradient to the outer oval shape, and have used a solid black colour for liner oval shape with a #CCCCCC stroke.

Step 6

Convert the reverse of the magic 8 ball into a movie clip (F8), and then give the instance name: “magic8Back_mc”

Step 7

Double click on the reverse magic 8 ball to enter its timeline. Then insert a new layer and create the following triangle shape inside the inner oval. I have given the triangle a radial gradient and a #2739A9 coloured stroke.

Step 8

Convert the triangle shape into a movie clip (F8), and select the centre registration point and then give the following instance name: “output_mc”.

Step 9

Double click on the triangle to enter its timeline. Then insert a new layer and select the text tool with dynamic text, and drag a dynamic text field on top of the triangle shape like below. I have given the dynamic text field a white colour and ‘align centre’ for the format.

Select the dynamic text field and give the following instance name: “answer_txt”.

Step 10

Return to the main timeline. On the Actions layer select the first frame and then open up the Actionscript panel and enter the following code.

//Imports the tweenlite packages.
import gs.*;
import gs.easing.*;

//Stops the timeline playhead.
stop();

//Adds the click event listener to magic 8 ball.
magic8Front_mc.addEventListener(MouseEvent.CLICK, showNext);

function showNext(event:MouseEvent):void {  
   //A prompt is displayed if no question is entered.
   if (question_txt.text==""|| question_txt.text=="Enter Question") {
       question_txt.text="Enter Question";
   } else {
       gotoAndStop("Answer");
       showAnswers();
   }
}

function showAnswers() {
   //Create a new array with all the responses.
   var responseArr:Array = new Array();
   responseArr[0]="YES";
   responseArr[1]="MOST LIKELY";
   responseArr[2]="IT IS CERTAIN";
   responseArr[3]="OUTLOOK GOOD";
   responseArr[4]="NO";
   responseArr[5]="DOUBTFUL";
   responseArr[6]="REPY IS NO";
   responseArr[7]="ASK AGAIN";
   responseArr[8]="TRY AGAIN";
   responseArr[9]="BETTER NOT";
   responseArr[10]="MAYBE";

   //Chooses a random number in the array.
   var r:int=Math.floor(Math.random()*responseArr.length);

   //Display the random response in the text field.
   magic8Back_mc.output_mc.answer_txt.text=responseArr[r];
 
   //Set the answer triangle initially invisible.
   magic8Back_mc.output_mc.alpha = 0;
 
   //Displays a slight random position of the triangle shape.
   magic8Back_mc.output_mc.rotation=Math.random()*30;

   //This creates the appearing effect with tweenlite.
   TweenLite.to(magic8Back_mc.output_mc, 3, {autoAlpha:1});
}

Step 11

Test the magic 8 ball Ctrl + Enter. Now type your question in the input field and click on the magic 8 ball, a response will appear.

You should have a magic 8 ball in Actionscript 3.0. Remember to subscribe to stay tuned to part 2 where I will be adding movement and sound effects to the magic 8 ball.

Load external SWF in AS3

2009-11-08T06:14:00.000-08:00

In this Flash tutorial you will learn how to load an external SWF file using Actionscript 3.0. In Actionscript 2.0 you could use the MovieClipLoader class or the loadMovie command to load an external SWF file, but now in AS3 you have to use the Loader class. The Loader class was also used in a previous tutorial which loaded external text into a dynamic text field.

There are several advantages of loading external SWF files. Firstly, a large project can be broken into multiple movies, each of the SWF files will be smaller and therefore more memory efficient and faster. Also, multiple SWF files can be played in series without the need to refresh the html page.

You will need a SWF file for this tutorial. This file should be placed in the same directory as your fla file.

Load external SWF in AS3

Open up a Flash AS3 file and then select first frame on the timeline. Open up the Actions panel and enter the following code. Make sure the SWF you want to load is in the same directory as your fla file.

//This creates a new instance of the loader object and adds it to the stage.
var my_Loader:Loader = new Loader();
addChild(my_Loader);

//This creates a new instance of the URLRequest object that contains the path
//to the external swf. The load method then loads the SWF file into the loader
//object.
var my_url:URLRequest=new URLRequest("example.swf");
my_Loader.load(my_url);

The code above loads the SWF file to the default location (0, 0) on the stage. If you want to change the position of the SWF, you can adjust the x and y properties of the loader instance.
This is because the Loader class is a subclass of the DisplayObject which means you access the properties.

//This will offset the load SWF file, so be appear at (20, 20) on the stage.
my_Loader.x = 20;
my_Loader.y = 20;

The above method for loading an external SWF file is not the best as it does not wait until the file is completed loading. So, to fix this problem the code will need to be modified. An event listener will have to be attached to the loader instance to listen to when the file has completed loading. I have also added a listener to detect any errors when loading a file, so a message will be displayed if the file is not found.

//This creates a new instance of the loader object.
var my_Loader:Loader = new Loader();

//This creates a new instance of the URLRequest object that contains the
//path to the external SWF.
var my_url:URLRequest=new URLRequest("example.swf");

//These listeners detect when the file has finished loading, and if the
//correct file is loaded.
my_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoading);
my_Loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

//The load method then loads the SWF file into the loader object.
my_Loader.load(my_url);

//This function adds the external SWF to the stage.
function finishLoading(loadEvent:Event) {
addChild(loadEvent.currentTarget.content);
}

//This function displays a message if the file is not found.
function errorHandler(errorEvent:Event):void {
trace("file missing");
}

Note: The loaded SWF file will have the same fps as the parent movie. So, if the parent movie is 25fps the loaded SWF will also be 25fps.

Preloader showcase

2009-11-04T04:56:00.000-08:00

I found a showcase of preloaders from past and present websites over at prettyloaded.com. This website contains an archive of preloaders which basically load preloader after preloader. If you are a Flash designer then this website can provide you with some inspiration. There is also an option to submit a preloader, so if you spot a unique preloader then why not submit it to the website.

So what exactly is a preloader? A preloader is basically a visual cue to show information about the download of a file. The preloader can be made to look attractive to keep the user engaged while the data is being loaded in the background.

How to install tweenLite or tweenMax

2009-11-03T07:27:00.000-08:00

Many of my tutorials use the tweenLite or tweenMax plug-ins for tweening effects. A common question I get asked all the time is, how to do you install tweenLite or tweenMax? Below is a quick tutorial on how to set up tweenLite or tweenMax.

1. Go to blog.greensock.com and download the tweenLite or tweenMax zip file. Unzip the file and place the ‘gs’ folder inside the same folder as your Fla file. This means Flash will be able to find the class files from the ‘gs’ folder when you publish your swf file.

You can also set up classpath which means you can place the ‘gs’ folder anywhere on your hard drive, but you need to make sure Flash has a reference to the folder. Go to Edit > Preferences > Actionscript > Actionscript 3.0 settings and then select the ‘add new path’ button and browse to the location of your class files then click ok.

2.Before tweenLite or tweenMax will work you need to import the class files. This is so that Flash knows where to look for the files. The most common import statements are show below.

//Imports the tweenLite class
import gs.TweenLite;


//Imports all the classes in the gs folder.
import gs.*;

The tweenLite and tweenMax plug-ins come with two demo files that show exactly which statements you need to import for each property, so be sure to keep these files for reference.

Black & white gallery part 2

2009-11-02T10:23:00.000-08:00

This is a small update from the black and white gallery tutorial. In the previous tutorial you had to use the timeline to add key frames to adjust the saturation property of the movie clip which created the black and white effect. However, I discovered that this effect can be achieved purely using Actionscript code, so step 5 from the previous tutorial can be completely missed out. For this non-timeline effect to work, you will need to use a plugin called tweenMax which can be downloaded from blog.greensock.com/tweenmax. You can of course use the ColorMatrixFilter and Abjustcolor classes from Actionscript 3.0 to create the same effect, but I prefer using tweenMax because you only need five additional lines of code.

Black & white gallery - part 2

Make sure you have completed Step 1 – 4 from the Black & white gallery before you attempt this tutorial as this is a continuation from Step 4. I have removed step 5 from previous tutorial and replaced it with the following step.

Step 5

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

//Import the packages needed.
import gs.*; 
import gs.easing.*;

//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 {
    TweenMax.to(picture, 1, {colorMatrixFilter:{}});
}

function out(event:MouseEvent):void {
    TweenMax.to(picture, 1, {colorMatrixFilter:{colorize:0xFFFFFF}});
}
}

//3.For loop to call move images, and initally set the set images black and white
for (var i = 0; i < picArr.length; i++) {  
rollBW(picArr[i]);   
TweenMax.to(picArr[i], 0, {colorMatrixFilter:{colorize:0xFFFFFF}}); 
}

Step 6

Test your black and white gallery effect Ctrl + Enter. Now move your mouse over each of the images and you should notice them turning into colour images.