The Magic of MovieClips (Flash 4)

By the end of this tutorial, you should know how the three main symbols in Flash work. This tutorial will extend your knowledge about MovieClips, and enable you to make simple use of them. You will also learn how to use the most basic ActionScript commands in Flash.

28. AUGUST 2000, Jens Chr. Brynildsen Observe: this tutorial teaches Flash 4 style actionscript. It will be rewritten to Flash 5/MX style when time allows

What is so magical about MovieClips? Well, think of your average web page. If you want anything to happen based on user input, you would most likely have to load another web page just to reflect the users actions. With Flash and ActionScript, your imagination and the machine playing back the Flash-file is your only limitation.

Why are MovieClips so powerful?
MovieClips have some unique features compared to Graphics, and these have been extended even further in Flash 5. What separates the MovieClips from the two other symbol types in Flash is the ability to send commands to the MovieClip and then make it do something. Almost every aspect of a MovieClip can be programmed or controlled with ActionScript. Scaling, rotation, duplicate, drag, transparency (alpha), position, visibility, sounds. All these things can be changed based on the users input either via mouse, a timed event or keyboard. If you want any of these things to apply to a Button or a Graphic, you will have to put the button inside a MovieClip, and then apply the changes to it, and not the button.

MovieClips can be nested inside each other and will then share values from each other. You simply make a MovieClip, and insert it into another MovieClip. This effect has been used by many Flash users with great success.

To see this in an easy example, go to the next page. Try playing with my little excavator and try to get to grips with the controls. With a little practice, you should be able to drive the excavator in a convincing manner.

The excavator is entirely built with MovieClips, and three simple ActionScript Commands.

These commands are "Play", "Stop" and "Tell target". When you know these three commands, you know the basic programming necessary to create advanced effects in Flash.

Click here to download the excavator to your machine

How it works
Let us examine how the excavator works. Open the "Instance"-panel. Click the excavator once. Notice that the instance of this MovieClip is called "0". Double-click the excavator. The first movie-clip will open. Examine the timeline by clicking and dragging above the timeline (where the numbers 1 - 5 -10 and so on appears). This MovieClip controls the left to right animation of the excavator.

Now click once on the excavator's arm. If you look at the "Instance"-panel, you will see that the MovieClip instance is called "1". Double-click the symbol to enter it, and once again examine it by dragging the mouse above the time-line. As you can see, this is the animation of the "arm". This MovieClip contains the other two parts of the arm. These have an instance name of "2". Continue all the way into the hierarchy of MovieClips until you reach the MovieClip named "Arm 03".

If you look above the timeline, you can see that you are now inside the "Arm 03"- MovieClip, that resides inside "Arm 02", "Arm 01", and "Excavator" that resides on the main stage called "Scene 1". What makes this work smoothly is smart placement of the center-point in the MovieClips.

All the MovieClips have a stop-action in the first keyframe. If we don't insert it, the clip will start playing uncontrolled until we move across a button that tells it to stop.

The levers below the excavator control the MovieClips. The buttons themselves are also placed inside MovieClips, and they contain "tellTarget"-actions.

Names and instances
What is an instance, and why do we use them? It might seem obvious that since all MovieClips already have a name, why should you give them an instance names? The reason is that one of the keys to making small Flash-files is using the same symbol many times for many purposes. Look at the excavator example.

Below the levers, there are symbols showing what that lever will do if you move it. These are the same symbols used to build the excavator, but these are new "instances" of them. Remember: any drawing that might be used more than once should be a symbol.

Telling Targets
The tellTarget-actions is what enables you to control MovieClips. The idea is that you "tell a target" for all commands executed in between the tellTarget statement:

tellTarget ("test") {
 play ();
 }

The command above will start playing the timeline within the MovieClip with an instance name of "test". To stop it, simply replace the "Play"-command with a "Stop"-command. Try this for yourself. Create a new movie, and open the standard MovieClip library that came with your Flash-program. Drag and drop the Fish onto the stage.

Open the standard button-library and drag and drop two buttons onto the stage. Type some text below the buttons. Name one button "Start Fish" and the other "Stop Fish". Test the movie (preview) and observe the fish swimming around, while the buttons work but do nothing.

Now we are ready to begin. Close the preview, right-click the "play"-button and bring up the Actions panel
(shortcut: CTRL ALT A). Click the "Basic Actions", and scroll down to the tellTarget command. When you double-click it, Flash will add some ActionScript for you. You can now choose the target for your button if it's clicked.

Click the small "Aim" (in the lower part of the Actions Panel). In the open window, you can see a MovieClip called "this", but there's no fish around. Why? We have not yet given a name to our Fish-MovieClip. Right-click the Fish to bring up the "Instance" panel (if necessary). Type "Fish" in the name-field and click the "play"-button again. In the Actions panel, click the line with the tellTarget command and then click the "Aim".

Expert or Normal mode?
The Action panel can be set to either Expert or Normal mode. Make sure you don't use the Expert setting until you are certain about what you do. The Normal mode will aid you to write scripts with correct syntax, and should usually be used by all, but the most advanced users. All commands are available to you with the Normal mode on, setting the panel to Expert mode will only increase the time you spend searching for typo's.

In the "Insert target path"-window notice that the fish is displayed as if it's linked on the level below the MovieClip with the name "this". The "this"-MC is a representation of the timeline on the stage, which the "Fish" MC resides on. Click the Fish MC and press "OK". The target is now filled into the tellTarget command. Now it's time to tell the button which command to send to the timeline inside the Fish MC. Since this is the "Play"-button, we'll add the "Play"-command. Your script should now look like this:

on (release) {
 tellTarget ("Fish") {
 play ();
 }
 }

Do the same for the "stop"-button, but replace the Play-command with a stop-command. Test the movie, and check the results.

If you want to control a MovieClip inside the Fish MC (i.e. the moving fish-fins with an instance name "fins"), you use tellTarget this way:

tellTarget ("fish/fins") {
 play ();
 }

Now the script targets the MovieClip "fins" that resides inside the Clip "fish". Confusing? It will all be explained in the next lesson about advanced targeting.

Things to remember:
1. The tellTarget command tells us which timeline we want to work with. All symbols in Flash have their own timelines, but only the timeline of MovieClips can be targeted.
2. Any command executed inside a tellTarget command will happen to the targeted MovieClip.
3. To be able to target a MovieClip, we must first give it an instance name.

Take some time to visit http://www.globz.com and check out the famous "Dancer". This cute little program is based on "The Magic of MovieClips" and smart placement of center-points as in the excavator example. See if you can understand how it's done, and while you are there, enjoy all the other stuff that you will find there. The Globz-game is unique!

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register