web
design
 flower
radford university school of communication

WebDog's basic Flash page

Tutorials

Basic Exercises in Flash (Action Scripting 2.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 of 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. Make a movie symbol
  7. Make a dropdown menu
  8. Put your work on the Web

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 (NOTE THIS ONLY WORKS WITH ACTION SCRIPTING 2.0)

      1. Note: In order to move about on the stage, from effect to effect or action to action, or to invoke other URLs (say from a fancy Flash menu) you will be using simple Action Scripting.  Here we are using 2.0 not 3.0.
      2.   Create a top layer labeled “Actions.” This will be only for action scripts and nothing else. When you create an action for a frame, make sure your cursor is on a frame inside that layer. 
      3. Pull  down the Actions pallet (window/ development panels / action).  On the left menu, open Global Functions / Timeline Control. Then scroll down to “stop.” You should be able to click and pull that command over into the command window and end up with this: 

        stop();

      4.   Import a button from Window / Other Panels / Common Libraries / buttons (OR alternately see Exercise 5 below to create your own).

      5. Open the actions menu. You need to create a mouse handler here.
        1. Select your button on the timeline and, using the Actions menu pull down to  Global Functions / Movie Clip Controls / On  
        2. Then at “on” pull over to “on release.”   It should look like this: 

          on (release) {

          }

      6. .     Now you want to tell it what to do on release, so you put your cursor between the two brackets and then go to Global Functions / Timeline Control /

      There are a number of options. You can tell it to play or to go to a certain frame and play.

      Say you want it to go to frame 2.  It should now look like this

      on (release) {

      gotoAndPlay(2); 

      }

      1.      One more thing. After the word Play, there is a bracket. Put the frame number or frame name into the bracket. (You can also name frames to help keep it all sorted out). 

    A variation on this is to create a link for an outside URL.   To do that, repeat 4e and 4f but instead of the step in 4f use Global Functions / Browser/Network and pull the getURL  

         So it should look like this in the Action Script window: 

    on (release)

    {

    getURL('http://www.radford.edu/');

    }

    1. If you want to use a target to open a new window, substitute this string for the getURL strong:

    getURL('http://www.radford.edu', 'target="blank",');

    1. Also, if you want a rollover to take you to a new position on the timeline, you would write: 

    on (rollover)

    {

    gotoAndPlay(1); 

    }

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) Make a movie symbol 

    1.  Create a motion or shape tween, then highlight all frames
    2. Right click on the highlighted frames and hold down until you get the menu.  Select "copy frames." 
    3. Next, Insert New Symbol  and make it a movie symbol 
    4. Now select "Paste Frames" 

7) Flash Dropdown menu

    1. The strategy is to create a movie that starts with one button in a "closed" state and then moves to multiple buttons in an "Open" state
    2. Each of the buttons are just ordinary "go to" buttons, but they appear in the Open state because they are triggered by the button in the first Closed state frame  
    3. So in your action layer put a stop on frame one
    4. And in your labels layer name the states on the key frames
    5. Then put the buttons on the various keyframes 
    6. One intesesting trick is to put an "invisible button" around the edges of the Open state buttons so that when the user rolls off, the timeline will return to frame 1, or the closed state. 

8) Getting 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