WebDog's basic Flash page

 


"Dont let your site be a woofer."

 

Basic Exercises in Flash (Action Scripting 3.0)

Here's what we are going to do:

  1. Motion Tween (position, rotation, tint, alpha, position etc) 
  2. Shape tween
  3. Layer mask and motion tween combinations (eg, spotlights) 
  4. Use Action Script 3.0 buttons to stop action, and then to select new portions of the timeline or URLs outside Flash. 
  5. Create your own buttons (Make a button symbol that rolls over)
  6. Put your work on the Web
  7. Tutorials for additional help

First step: When you create a new Flash animation, specify new file Action Scripting 2.0 and one of these four IAB sizes:

    • 300 x 250 IMU - (Medium Rectangle)
    • 180 x 150 IMU - (Rectangle)
    • 160 x 600 IMU - (Wide Skyscraper)
    • 728 x 90 IMU - (Leaderboard)

Next we'll try several techniques

    1)    Motion Tween -- 

        1. Insert keyframe at the end of your tween. (Highlight frame, use Insert / Timeline / Keyframe)
        2. Create a shape or import a shape and convert it into a symbol.  (Highlight using black arrow, then Modify, convert to symbol, graphic symbol).
        3. Position symbol on first and final frames in different locations. 
        4. Highlight first frame and right click (or command click) to get pop-up menu.  Select Motion Tween  (Also: you can do this on the properties pallet or in the main menu).
        5. It should be highlighted in blue with a solid arrow. If the arrow is dotted, just go back to step a. and insert another keyframe at the end of the blue section.  
        6. TEST your movie -- Top menu bar: Control / Test Movie

    2)    Shape Tween  (Morph)

        1. Same as step 1a.
        2. Donít modify into symbol. In fact, if you are using symbols, you have to break apart (Modify / Break Apart).  If you are using text, you may have to do the break apart command twice. 
        3. Position the morph on the first frame and then go to last frame and position the thing you want morphed. 
        4. Highlight the first frame and open the Properties window. You should see information about frames.  There is a window that says Tween and your choices are None, Motion and Shape.  Select Shape. 
        5. The tween should highlight in green with a solid arrow. 

    3)    Layer Mask (Spotlight) 

        1. Note: Your first layer should be the background that you will want to reveal.  Layer 2, above, will be the shape that reveals. The background and the revealing shape should both be independent symbols on two different layers.  SoÖ.
        2. Follow 1a and 1b. 
        3. Create the second layer (Timeline, bottom left, insert layer button), and again, insert a key frame at the end of the tween. This will be the mask layer. Insert a shape you will use to reveal the underlying layer(s).  It must be a symbol. 
        4. Going to the left side of the timeline, where it has the layer name, right click (command-click) and reveal the menu. Select mask. 
        5. You should see layer 1 indent under layer 2 and the layer names have a mask icon in front of them. Also you should see your mask effect on the stage. 

4) Buttons in Actionscript 3.0

First, open a Flash file in Actionscript 3.0

Find a button in the common library

The script does not attach to the button (as in 2.0) but rather, all scripts for each frame are written in a single frame in an ActionLayer.

So you need to give your button an instance name on the properties pallet. Here I use My_btn

Be sure to change the name of the button in the library as well

All have their own instance names. They also have handler names. The script for both buttons is written inside the Actions window while the cursor is on the appropriate frame of a single ActionLayer.

Write:

stop();

import flash.events.MouseEvent;
My_btn.addEventListener(MouseEvent.MOUSE_DOWN, My_btnHandler);
function My_btnHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.MyWebSite.com/"));
}


5) Make your own button

    1.  First, create the basic shape and text. You might have a red oval with the word "Next" on it.
    2. Secondly, use the black arrow tool and highlight the basic shape and text, then go to the menu command Modify / Convert to symbol
    3. This time you don't want a graphic symbol, you want a button
    4. Next, double click on the new button to open up the button editor. (If this is impossible, check your Control / enable simple buttons command. Turn it off - unchecked - to proceed)
      1. Now keyframe the Hit state and paste a shape of some kind in the hit area. It does not have to be the same exact shape -- It wont be visible.
      2. You may also keyframe the Over and Down states and then change colors of the button states.
      3. Save your work.
    5. To check your button rollover and hit state functions, go back to Control and Enable Simple Button Commands. It ought to show you the rollover.
    6. To make the button work in Action Script 2.0, follow the scripting commands in #4 above.

 

6) Inserting your animation on the web

    1. First, you have probably saved your flash file with the .fla extension -- If not, do it now. Save as you go.
    2. Flash files with layers are like Photoshop files -- they need to be saved in a different format for the web. For Flash, that format is .swf -- You can't edit a swf file once it is created.
    3. Save your .swf file somewhere in the public_html directory of your web folder
    4. You may link to an .swf file and have it come up in the browser on its own .... OR
    5. You may embed the tag in a page with other elements using one of two methods:
      1. In Dreamweaver, in the top menu: Insert / Media / Flash then find the file with the dialogue box
      2. Use the following code:

        <object>
        <embed src="yourfile.swf" height="#" width="#">
        </embed>
        </object>

        Of course, the # in the height and width tags above refers to number of pixels. Its important that this number not be smaller than the basic size of your flash. This will keep it from showing up.

        Also, in some web server systems, you may need to reset your permissions to allow new files to be seen


7) Tutorials