Home Flash & Swish Flash Tutorials Target Paths

Added: Sep 26, 2005 Rating:   Level: Beginner Software:  

The aim of the tutorial is to:

Show you how one instance of a symbol communicates with another. A fundamental part of flash movie is to place symbols within symbols (see previous tutorial: Tweens within Tweens). When movies get complex the structure of one symbol inside another inside another may also become complex. When you place one symbol inside another it is called: Nesting

The aim of this tutorial is to give you an idea of how these symbols communicate with one another. This tutorial is designed to give you some practical experience of how this is done.

Nesting

In Flash when you place one object inside another they are nested one inside another. The following is an explanation of the nesting used in the example flash movie above:

Main Stage

(Click to enlarge)

This is the main stage of the movie. I know it is the main stage because of the tab:

When you open a Flash movie it will always display the main stage. This is your work area where you place all the objects that make up your movie.

All the symbols you create are in the Library.

On the stage above is an instance of the symbol webwasp. It is an instance of the symbol which is highlighted. I know this because of the blue rectangle and the centre point in the middle of the webwasp on stage.

•  All symbols are stored in the Library: Window > Library
•  In the Library you can see the symbol name: webwasp MC
•  All symbols must have a unique name.
•  An instance is a symbol which is on the stage.
•  An instance does not have to have a name.
•  The instance name is not the same as the symbol name.
•  In the ActionScript you only use instance names, never symbol names.
•  webwasp is the instance name not name of the symbol - webwasp MC is the symbol name.
•  In the Property inspector you can see the symbol name referred to as - Instance of: webwasp MC
•  In the Property inspector you can also see the instance name: webwasp

   Get use to looking in the Property inspector to find the instance name.

Name: Main Stage
Action Script path: _root

Above the word webwasp you will see a tab: .
Scene 1 is the main stage of the movie referred to in the ActionScript as: _root
All scenes have a _root directory.

First Nesting: main stage > Webwasp MC

Instance Name: webwasp
Symbol Name: webwasp MC
Action Script path: _root.webwasp

This is a symbol which is on the main stage. The symbol is called webwasp MC. You can see the symbol name in tab above the word: webwasp

• The tabs above the word webwasp: Scene1 is the main stage and webwasp MC is the name of the symbol not the name of the instance.
  
  Note: You cannot see the instance name in the tabs.

Second Nesting: main stage > webwasp MC > web MC

Instance Name: web
Symbol Name: web MC
Action Script path: _root.webwasp.web

Look at the tabs to see the nesting.

Third Nesting: main stage > webwasp MC > web MC > web graphic

Instance Name: There is no instance name.
Symbol Name: web Graphic

There is no Instance name for web graphic because graphics cannot have instance names only symbol names.

Action Script path: There is no Path.

Note: Because a graphic cannot have an instance name it cannot be referred to in the actionscript.

To refer to a graphic (or button) you need to nest it inside a movie clip or convert it to a movie clip.

Note: Look at the little icons in the tabs above the word web: You can tell that the symbol is a graphic because the icon is different to that of a movie clip.

Main Stage or Scene Icon

Movie Clip Icon

Graphic Icon

Button Icon

Note: The same icons are used in the Library. See picture of main stage above.

Creating a Movie with Nested Symbols

Creating the symbols

For the buttons to be able to control the rotating web in the example above they have to be able to find the path to this object.

When you are creating symbols which are nested (inside) others you must always start furthest away from the main stage and work backwards. In the above example you must create the symbols in the following order:

1st: web graphic: Static graphic: web

2nd: web MC: Animation of the static graphic: web

3rd: webwasp MC: Combination of the animated graphic web and the word wasp

Think of it like cooking: First get your ingredient, then cook them, last of all put them on the table. Your main stage is the dinning table!

Step one: static graphic: web

Note: If have done the previous tutorial: Tween within Tween and you are confident with creating tweens, use the Flash movie that you created there and go straight to: Step five

The first symbol you need to create is: web graphic

1. Go to: Insert > New Symbol
   name: web graphic
   Behavior: Graphic
   Click: ok
   
   
   

   You should now see these tabs at the top of the work area.
   
   
2. Type a word on stage or draw something. I typed: web
   
   

When you have finished click on the tab to go back to the main stage.
Your symbol is in the Library. The main stage is still empty.

We now need to create the symbol which web graphic will be nested in.

Step two: web MC: Animation of the static graphic: web

1. Go to: Insert > New Symbol
   Name: web MC
   Behavior: Movie Clip
   Click: ok
2. Click on: Window > Library. Your graphic symbol web graphic should be in the library.
3. Drag the symbol web graphic from the Library into the new symbol: web MC
   You have now done you first bit of nesting one symbol inside another!
4. Right click (Mac: Ctrl click) on frame 10 and choose Insert Keyframe.
5. Move the instance of web graphic to a new position.
6. Right click in-between frame 1 and 10 and select Create Motion Tween.
   
   
   

   (Click to enlarge)

• You can see the tween is correct by the arrows in the time line. There are several arrows, which means there are several tweens one after another.
• The tabs Scene 1, web MC tell me that I am creating the animation inside a symbol called web MC and not on the main stage.
• The symbol on stage is highlighted so the Property inspector tells me that the object being tweened is an Instance of: web graphic
  
  Cross Ref: For more info on Tweening see: Tutorials Tweening and Tween within Tween.

7. When you have finished click on the tab to go back to the main stage.

Step three:Combination of the animated graphic web and the word wasp

1. Go to: Insert > New Symbol
   Name: webwasp MC
   Behavior: Movie Clip
   Click: ok
2. Click on: Window > Library.
   Your animated symbol web MC should be in the library.
3. Drag the symbol web MC (not web graphic) from the Library onto the stage.
4. With the text tool type the word wasp next to it.
   
   You should now have the words web wasp sitting one next the other.
   
   
5. Select the arrow tool .
6. Click on the tab to go back to the main stage.
   

Finally you are ready to place your work on the main stage.

1. Open your Library: Window > Library
   
   
   
   

   You should have three symbols in the Library: One Graphic and two Movie Clips
   
2. Drag your newly formed symbol: webwasp MC onto the main stage. Now you have an instance on the main stage.

Step five: The Instance Name - Main stage

Before you can refer to the instance in the action script it needs a name.

1. With the Arrow tool select your instance.
2. Open the properties panel: Window > Properties.
3. Where it says <instance name> type the name: webwasp

The section of the Property Inspector where you type the Instance name.

Note: When typing Instance names:

• Never use spaces.
• Never start a name with a number.
• Never use punctuation marks in the name.
• Don't forget to type a DOT between the words
  
  BUG: Occasionally Flash loses the instance name and latter you may find that the buttons does not work. If this happens check to make sure all the instance names are still in place. To avoid this bug, when you type a name in the Property inspector finish by pressing Enter at the end of the name. This seems to resolve this bug. If you want to check that the instance name is intact do the following:
  
• Deselect the instance by clicking on a blank area of screen.
• Reselect the instance and check that the instance name is displayed in the Property inspector. If it is all is well.

Step six: The instance name

1. Right click the instance and select: Edit
   This will give you access to the objects nested inside of the instance webwasp.
   You should have two objects nested inside: web MC and the word wasp.
2. Select web MC and give it an instance name: web
3. Return to the main stage by pressing the tab.
   
   Note: The path to this instance is: _root.webwasp.web
   

Step seven: The first button

1. Place a button on the main stage. Either create a button or drag it onto the stage from the Common Library (Window > Common Libraries > Buttons).
   
   Note: If you take a button from the Common Button Library avoid Knobs, Faders and Component buttons as they work differently.
   
   
2. Right click on the button and select: Actions
3. Make sure the action panel is set to: Normal
   You do this by clicking on the panel menu button ( ) which is just under the cross on the top right hand side of the action panel.
4. Click on the: Plus sign > Actions > Movie Control > Goto
5. In the options select the radio button: Go To and Stop
   Your action script should look like this:
   
   

   on (release) {         gotoAndStop(1); }

   
   
6. Change the action panel to: Expert mode
   You do this by clicking on the panel menu button ( ).
7. Type the path to the instance that you want to stop animating in front of the gotoAndStop. Your script should now look like this:
   
   

   on (release) {    _root.webwasp.web.gotoAndStop(1); }

   
   Note: Don't forget to type the dots and never type spaces.
   
   The path works like this: _root.myInstanceName1.myInstanceName2.gotoAndStop(1);
   
   
8. Go back to normal mode. You do this as a check because if you have made an error in the ActionScript syntax Flash will not allow you to go back to normal mode and will display an error message.
9. Test your movie: Control > Test Movie
   Make sure you click on the button to see if the animation stops.

Step eight: The second button

The second button should make the animation play instead of stop. Thus do the same as for the last button but do not do point 5. Your actionscript should look like this:

Note:
• The only difference is that the script contains the word Play instead of Stop
• Test your movie as it should now be complete.

Note: In some Flash movies you may see _root referred to as _level0 (level Zero). Level 0 is similar to the root directory, but not the same. For more info on Levels see tutorial: Loading Movies into Levels

I hope you found this tutorial easy to understand. A lot of people have difficulty with target paths in Flash, but they are essential to master if you are to get to grips with Flash.