Nesting is a fundamental concept when building Flash Movies. For beginners it is a difficult concept to grasp but it is worth the effort as nesting enables you to create Flash Movies that are far more flexible and less linear. That is the user has more options about what is to happen next. In other words nesting enables you to create Movies which are more interactive and less predictable. It is my belief that once a beginner really understands nesting and how nested objects talk to one another (target paths) then you are well on the way to understanding the basic fundamentals of how Flash works.
Cross Ref: If you do not know how to create a Tween on stage or how to attach a ActionScript to a buttons and the timeline you should do the these previous tutorials first:
-
Simple Links
- Animation - Tweening
The aim of the tutorial is to:
Show you how symbols are placed within symbols. This is a fundamental concept in Flash.
Note: In this example the word web animates independently to the opening animation. Click the play button and watch the word web. It animates irrespective of what the word wasp does. This is little concept enables you to do so much. It means that one object - such as an animated word (or group of objects) react in ways which is not dependant on what other objects are doing. This gives you tremendous flexibility and fluidity when building your Flash Movies.
Step one: Creating the first symbol
In the example above my first symbol was the word web.
-
Go to: Modify > Document (Ctrl J)
- Set your Movie size to: 500 x 120
- Select a: Background Colour
- Click: OK
-
Select the Text tool:
-
Click on the Stage and type the word: web
- Select the text with the selection tool:
- If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
- Select the Font colour and style of your choice: web
Mine looks like this:
My Font Style for the word: web (Click to enlarge).
-
With the word web still selected go to: Modify > Convert to Symbol (F8)
-
In the dialog box type a name: Web
-
Select
Graphic.
-
Click: OK
-
On the Main Stage delete the Word: web (Don't worry it is now safely in the Library).
Note: If you open the Library you will see your symbol: Window > Library (F11)
Your first Symbol in the Library.
Step two: Animating the first symbol
Step three: Test your movie
- If your Library is closed, open it: Window > Library (F11)
- Drag both your symbols onto the main stage from the Library.
- Go to: Control > Test Movie.
Note: One of your symbols should be static and the other animated:
- Close the Test Preview by clicking on the small cross in the top right of the window:
The Nesting: The original text that you typed is in the Symbol web. This is then nested inside the Movie Clip Web MC and lastly this is all placed on the Main Stage. The nesting looks like this:
Note: If you double click on the Movie Clip you will find yourself editing inside the Web MC symbol. On your Edit bar you will see this:
If you then double click on the Symbol again you will find yourself editing inside the original Web Graphic where the text is:
(Click to enlarge)
The Edit Bar shows what symbol you are currently editing and the Property Inspector shows the attributes of the object/s (text) inside that symbol.
Important: Make sure you return to the Main Stage clicking on the Scene 1 Tab:
- Delete both symbols from the Main Stage. Remember they are still in the Library:
Library with two Symbols.
Step four: Create a New Symbol
Step six: Animating the main stage.
- Animate it as you would any other Tween. You do this by:
Going to a new frame, lets say 40, right click, select Insert Keyframe.
Move the symbol on frame 40 to a new position.
Right click in the time line in-between the two Keyframe. Select: Create Motion tween.
Repeat this as many times as you want.
The Tween that I made simply moves from off stage left to the right side of the Main Stage like this:
The Tween that I made on the Main Stage goes from left to right.
- If the Actions Panel is closed, open it: Window > Actions (F9)
- At the end of this animation I would like the animation to stop. To do this you will need to select the last Keyframe in your Timeline. In mine this is frame 40. Type the following into the Actions Panel:
stop();
If you wish to test your Movie again it should now play once and then stop.
Step seven: Adding a button
You will need a new layer for your button. If you do not do this your Tween may end up in a muddle.
- In the Timeline click on the
Insert Layer button.
- Find the last frame of your animation in the time line and right click in your new layer just above this frame.
- Select: Insert Blank Keyframe.
- Go to: Window > Other Panels > Common Libraries > Buttons.
- Open one of the button folders
by double clicking on it.
- Select a button and drag it onto the: Main Stage
Note: If you take a button from the Common Button Library avoid Knobs, Faders and Component buttons as they work differently. I selected one of the Oval Buttons.
- With the Button still selected type the following in the Actions Panel:
on (release) {
gotoAndPlay(1);
}
Step eight: Test your movie
It is time to see if your movie works. Good Luck!
- Save your Flash movie.
- Go to: Control > Test Movie.
Your movie should now be complete so I hope you enjoyed having fun with animation.