Customise the Tools panel in Flash CS4

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

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

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

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

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

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 input_txt text field, so only the
//numbers 0 - 9 can be entered.
input_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. Checkout part 2. You can download the source files here.

Display date in Actionscript 3

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

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

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.

Emmurate through loaded swfs in AS3

I received a question from the load external swf tutorial about how to enumerate or loop through an array of external swfs in Actionscript 3. Below is my solution. I have used the shorten if-else statement in the both the forward and back functions to increment and decrement the array index. When the index has reached the end of the array, the index gets reset to zero. And when index has reached the beginning of the array, index get set to the end of the array.

var clips:Array = ["box.swf", "content1.swf", "white.swf"];
var index:int = 0;

var myLoader:Loader=new Loader();
myLoader.load(new URLRequest(clips[index]));
myLoader.x=300;
myLoader.y=150;
addChild(myLoader);


advance_btn.addEventListener(MouseEvent.CLICK, forward);
back_btn.addEventListener(MouseEvent.CLICK, back);

function forward(event:MouseEvent):void {

index == arr.length-1 ? index = 0 : index++;
myLoader.load(new URLRequest(clips[index]));

trace(clips[index]);
}

function back(event:MouseEvent):void {

index == 0 ? index = arr.length-1 : index--; 
myLoader.load( new URLRequest(clips[index]) );

trace(clips[index]);
}

Display 24 hour time in Actionscript 3

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

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.