arrowTarget Path Icon

H  32  32.1  33  34  35  36 

Hands-On: Flash MX 2004 ActionScripting

Exercise 36: ActionScript for the Movie Clip vs. Animated Graphic

Reopen the file you saved as LCVmcVsGfx.fla to complete this project.

This file has three separate graphic files, one MovieClip version, one Animated Graphic version and one Animated Rollover Button. Each has been labeled as such and now it’s time to add Stop and Play buttons to the Stage.

Stop and Play buttons for Animated Graphics are pretty straight forward and rather simple; MovieClip Stop and Play buttons require different ActionScripts. Essentially, Movie Clips live on their own timelines, and the main movie timeline needs special information on how to Start or Stop the MovieClip Timeline. Follow these directions and you’ll see it’s not too hard to do.

  1. The first step is to add a new layer at the top of your document, and name it actions.

    2. The Timeline

  2. Click in the first frame of the new actions layer and then from the Actions panel [F9] select Global Functions > Timeline Control > Stop.
  3. Click in the last frame of the same actions layer of the timeline, insert a Blank Key Frame [F7], and then from the Actions panel [F9] select Global Functions > Timeline Control > Go to and Play then type 2 for the Frame number. This will create a loop, but more importantly, it will open the page with all the animations stopped.

    4. The Actions Panel

  4. Create a new layer and drag below the other layers, name this layer Buttons.
  5. Choose Window > Other Panels > Common Libraries > Buttons double-click on the Playback folder icon and select Play and Stop buttons for your page.
  6. Drag a Play and Stop button for both the animated Graphic Symbol and the Movie Clip Symbol images on the page. Your Animated ButtonSymbol will not respond to these playback buttons, nor does it need to respond. Use the Align panel to line the playback buttons on the page.

    7. Screen shot of the Stage and panels

  7. Double-click on the Movie Clip Symbol on the Stage; this will open its Timeline. Insert a new layer at the top of the layer stack and name it actions.
  8. Click in the first frame of the new actions layer and then from the Actions panel [F9] select Global Functions > Timeline Control > Stop.
  9. Click in the last frame of the same actions layer of the timeline, insert a Blank Key Frame [F7], and then from the Actions panel [F9] select Global Functions > Timeline Control > Go to and Play then type 2 for the Frame number.
  10. Click on the Scene 1 link to close the Movie Clip Timeline and return to the main movie. (These steps will not be necessary for the Animated Graphic symbol.)
  11. On the Stage, click on the Stop button for the Animated Graphic Symbol and from the Actions panel [F9] select Global Functions > Movie Clip Control > On > choose Release, click to the right side of the curly brace { and then select Global Functions > Timeline Control > Stop. Your finished code will look the following 2 examples:

    12. on (release) {
           lcvmovieclip.stop();
    }

  12. Next, click on the Play button for the Animated Graphic Symbol and from the Actions panel [F9] select Global Functions > Movie Clip Control > On > choose Release, click to the right side of the curly brace {and then, select Global Functions > Timeline Control > Play.

    13. on (release) {
          lcvmovieclip.play();
    }

  13. Test your movie and you’ll be able to start and stop the Animated Graphic Symbol only.
  14. On the Stage, click once on the Movie Clip Symbol and then in the Properties panel type lcvmovieclip as the Instance name. This will be called up in the ActionScript below.

    15. The Properties Inspector for Movie Clips

  15. On the Stage, click on the Stop button for the Movie Clip Symbol and from the Actions panel [F9] select Global Functions > Movie Clip Control > On > choose Release, click to the right side of the curly brace { and then select the target icon and double-click on the instance name lcvmovieclip you provided in the Properties Inspector. Next select
    16. The ActionScript code

    Insert Target Path box.

    Global Functions > Timeline Control > Stop . This script is now complete and looks like the following:

    on (release) {
                this.lcvmovieclip.stop();
    }

  16. On the Stage, click on the Play button for the Movie Clip Symbol and from the Actions panel [F9] select Global Functions > Movie Clip Control > On > choose Release, click to the right side of the curly brace { and then select the target icon and double-click on the instance name lcvmovieclip you provided in the Properties Inspector. Next select
    Global Functions > Timeline Control > Stop. This script is now complete and looks like the following:

    17. on (release) {
                this.lcvmovieclip.play();
    }

    Once you get the hang of this you can type your own code as long as it follows the syntax. Don’t be afraid to try stuff, if it fails, try again and again… nobody ever said you have to save your failures! You won’t believe how many I had just trying to convert this exercise!
  17. Test your Movie once again and you should be able to Start and Stop both the MovieClip and the Animated Graphic versions with these buttons.
  18. Save and close the file.

What you have learned in these exercises can be used in many of your future Flash MX movies. You now know how to make an Animated Graphic Symbol, and then you learned how to turn a many layered and framed Animated Graphic turn into a single framed Movie Clip. Then you took that Movie Clip and turned it into an Over State for an Animated Button. Just think of all the possibilities!

Appended: I hate to say this, but it took hours to convert this exercise into Flash MX 2004; in the previous version, it took only a couple of minutes to make these buttons work! And it was intuitive as well. Sometimes companies fix things that aren’t broken just to make more money! OK, I’m through ranting, you can go on to another learning exercise.

 

Back to Top