Thursday, September 24, 2009

10 Killer Flash Tips For Beginners

flash tips for beginners

This article will come in handy for those of you who are interested in Flash, or perhaps have a basic idea and would like to learn more about Adobe Flash.

Before we get started:
The list below provides you valuable and useful short tips including sample FLA source files to help you understand better and apply faster in your Flash projects. You need to have Adobe Flash CS3 or CS4 Professional software installed in your computer to open the source files.

1. Understanding Object Names

Usually some Flash beginners think that object names in the library are same as instance names. In fact, they ARE NOT. Please make sure that you do not get confused with instance names, class names, and object names in the library. They have totally different meanings in Flash. Below example shows that gray_box_01 is the instance name, graybox is the class name without spacing (which is used to create instances by ActionScripts), gray box is the movieclip (or object) name with spacing in the library.

Moreover, gray_box_01 is just an instance of gray box movieclip in the library, there can be gray_box_02, gray_box_03, gray_box_04, etc and they are just instances of the same gray box movieclip.

Instance Name

2. How to make URL buttons in ActionScript 3.0

  1. Create a button in the library.
  2. Drag it onto stage 2 times and position them.
  3. Give the instance names button_01 and button_02.
  4. Add Event Listeners as show in below screenshot and code below:
  1. button_01.addEventListener( MouseEvent.CLICK, goto_hongkiat );
  2. button_02.addEventListener( MouseEvent.CLICK, goto_koflash );
  3. function goto_hongkiat(e:MouseEvent):void
  4. {
  5. navigateToURL( new URLRequest( "http://www.hongkiat.com" ), "_blank" );
  6. }
  7. function goto_koflash(e:MouseEvent):void
  8. {
  9. navigateToURL( new URLRequest( "http://www.koflash.com" ), "_blank" );
  10. }

URL Buttons AS3

Download Source

3. How to duplicate MovieClips in ActionScript 3.0

  1. Create a movieclip "box" in the library.
  2. Right-click on it and click on Linkage…
  3. Set the class as box as show in below screenshot.
  4. var b:MovieClip = new box(); duplicates a movieclip.
  5. Line no. 4 and 5 set the X and Y positions of a dupliated movieclip.
  6. addChild() function adds that dupliated movieclip onto stage.

Duplicate MovieClips AS3

Download Source

4. How to add Right-Click menu in Flash ActionScript 3.0

  1. Create custom menu items.
  2. Add Event Listeners to those items.
  3. Hide built-in items.
  4. Apply the custom menu items.

Right-Click Menu AS3

Download Source

5. Using Tweener class or tween engine for motion tweening

There are a number of open source tween engines on the web. Tweener is one of the most popular tween engines for motion tweening.

  1. Download Tweener Class (AS3).
  2. Import Tweener class by unzipping it and put caurina folder into the folder that your flash file exists.
  3. Create a movieclip "gray box" in the library.
  4. Drag it 2 times and give them instance names gray_box_01 and gray_box_02.
  5. Apply Tweener to them.
  6. Download Tweener Documentations to understand and apply it better.

Using Tweener Engine

6. General Structural Guidelines for Flash

It is really important to keep your flash timeline structure and library clean and reusable. This way you can save a lot of time for future projects.

  1. Create and apply layer folders when you have more than 10 layers on timeline.
  2. Avoid using default layer names (examples: Layer 1, Layer 2, etc.) and give them meaningful names.
  3. Put all actionscripts in one layer (named "actions") and put it on top of all layers.
  4. Give the meaningful names for every object in the library and use folders to group related objects.
  5. Remove unused objects from the library by clicking the small drop down arrow, then "Select Unused Items" and press delete button.
  6. Download FLA file from Flashmo.

7. How to create a simple preloader

  1. Add new scene preloader using the scene panel click on plus icon . (Window > Other panels > Scene or press Shift + F2)
  2. Move the preloader scene above content scene as show in below screenshot.
  3. Create a movieclip "preloader bar" drawing a rectangle using width 200px, height 4px, and color: #CCCCCC.
  4. Create another movieclip "preloader bar bg" drawing a rectangle using width 400px, height 4px, and color: #666666.
  5. Put them on stage giving instance names bar and bar_bg and align them centered as show in the screenshot.
  6. Put a dynamic textfield loader_info and put it below the bar and centered.
  7. Add an event listener with a function to calculate the percentage loaded as show in the screenshot.

Simple Preloader AS3

Download Source

8. How to use Bandwidth Profiler and Simulate Download in Flash

You can simulate download in Flash. This is really a very useful tool in Flash, especially to check how flash movies are loaded for slow network speed users.

  1. Run your flash file, go to main menu Control > Test Movie (or press Ctrl + Enter).
  2. Click on View > Bandwidth Profiler (or press Ctrl + B) in Test Movie window.
  3. Click on View> Simulate Download (or press Ctrl + Enter) in Test Movie window.
  4. You can adjust the download speed by View > Download Settings > (different speed options).

Flash Bandwidth Profiler

Download Source

9. How to play timeline frames in reverse

  1. Declare a boolean variable reverse which can be only 2 values, either true or false.
  2. Add event listeners for mouse over, mouse out and enter frame events to the button instance box_01.
  3. When mouse pointer is on the button, reverse value is set to true.
  4. When mouse pointer is NOT on the button, reverse value is set to false.
  5. Event.ENTER_FRAME executes run function continuously. It executes the run function 30 times per second if the frame rate is 30 fps.
  6. run function continuously checks if the reverse value is true or false.
  7. It goes to previous frame when reverse is true and it goes to next frame when reverse is false.
  8. You may see how the timeline pointer goes in bandwidth profiler while testing this movie.

Play Reverse Frames

Download Source

10. How to use a Timer class in Flash

  1. Create a new timer variable timer_01 as in this example.
  2. Add an event listener function play_timer.
  3. Copy box movieclip from the FLA file of TIP number 3 into the library.
  4. Add play_timer function.

Additional: You may download and see how Timer is used with play/pause buttons in Flash XML photo rotator

AS3 Timer Class

Download Source

To make things easier for you, we’ve got all tutorials’ source files compressed in one single download file so you don’t have to download them one by one. Download All Source Files

0 comments:

Post a Comment