Free Flash Tutorials

HomeTutorialsForumWebwasp MembersTemplatesMatesFoodContact

 


Flash Tutorials

   

Flash Tutorial - Tweens within Tweens

008 Beginners
Flash Compatibility: MX
         For Flash MX 2004 click here

Written by: Phil

Length: 1200 words

Assumed Knowledge : Tweening on stage, attaching simple actions to buttons and the time line.

 

This tutorial is designed for people who have limited experience of using Flash. If you do not know how to create a tween on stage and how to attach a action to a button and the time line you should do the previous tutorials first:

  1. Animation - Tweening

The aim of the tutorial is to:

Show you how symbols are placed within symbols. This is a fundamental concept in Flash.

My Example: Download the Flash file  Beg 008a

 

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.

Step one: Creating the first symbol

 

In the example above my first symbol was the word web.

  1. Type a word on stage or draw something.
  2. Select the text/drawing with the arrow tool.
  3. Go to: Insert > Convert to Symbol.
  4. In the dialog box type a name: Web
  5. Select Graphic.
  6. Click: OK
  7. Delete the text/drawing from the main stage. Don't worry it is still in the Library.

Step two: Animating the first symbol

  1. Click on: Insert > New Symbol.
  2. In the dialog box type a name: Web MC
  3. Select Movie Clip.
  4. Click OK.
  5. Go to: Window > Library.
  6. Drag your first Symbol onto the stage.

Step three: Creating a tween within a symbol

  1. Go to frame 10 on the time line and right click. Select: Insert Keyframe. This copy and pastes whatever is in frame 1 into frame 10.
  2. Move the copied symbol on frame 10 to a new position on the stage. This will not move the symbol on frame 1.
  3. Right click in the time line in-between the two Keyframes (The frame with the black dots in them). Select Create Motion tween.

  4. Your time line should look like this.

  5. Continue tweening until you are happy with your animation. To do this:
    • Go to a new frame, lets say 20, right click, select Insert Keyframe.
    • Move the copied symbol on frame 20 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.
  6. When you have finished click on the tab above the stage that says . This will take you back to the stage. remember your animation is not on the stage but in the Library.

Step four: Test your movie

  1. Drag both your symbols onto the main stage from the Library.
  2. Save your Flash movie.
  3. Go to: Control > Test Movie. One of your symbols should be static and the other animated.
  4. Close the test movie window. You do this by clicking on the lower of the two at the top right corner of your screen. If your test window is not maximised it maybe lower down.
  5. Delete both symbols from the stage. Remember they are still in the Library.

Step five: Create a new symbol

  1. Type a word on stage or draw something. I typed the word wasp.
  2. Select the text/drawing with the arrow tool.
  3. Go to: Insert > Convert to Symbol.
  4. In the dialog box type a name: Wasp
  5. Select Graphic.
  6. Click OK.
  7. Delete the text/drawing from the main stage. Don't worry it is still in the Library.

Step six: Combining the symbols into another symbol

  1. Go to: Insert > New Symbol.
  2. In the dialog box type a name: webwasp
  3. Select Graphic.
  4. Click OK.
  5. Go to: Window > Library.
  6. Drag your second animated Symbol onto the stage. Mine was the web Movie Clip.
    Note: You can tell a movie clip from a graphic by the icon neat to it in the Library.

    Movie Clip

    Graphic
    Make sure you select the Movie Clip.
  7. Drag your third non animated symbol onto stage. Mine was the wasp Graphic.
  8. Position them on stage as you think looks appropriate.
  9. When you have finished click on the tab above the stage that says . This will take you back to the main stage. At this point the main stage should sill be empty!

Step seven: Animating the main stage.

  1. Place the symbol that you just created, in Step Six, onto the main stage by dragging it out of the Library.
  2. Animate it as you would any other tween. You do this by:
    • Going to a new frame, lets say 10, right click, select Insert Keyframe.
    • Move the copied symbol on frame 10 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.

Step eight: 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.

  1. Click on the Insert Layer button. You will fine this to the left of the time line just under the words Layer 1.
  2. Find the last frame of your animation in the time line and right click in your new layer just above this frame.
  3. Select: Insert Blank Keyframe.
  4. Go to: Window > Common Libraries > Buttons.
  5. Open one of the button folders by double clicking on it.
  6. Select a button and drag it onto the stage.

    Note: If you take a button from the Common Button Library avoid Knobs, Faders and Component buttons as they work differently.

  7. Right click on the button and select: Actions.
  8. Click on the: Plus sign > Actions > Movie Control > Goto.
  9. Your action script should look like this:

    on (release) {
            gotoAndPlay(1);
    }

  10. Close the Actions panel. Click on the in the corner of the panel and select: close panel.

Step nine: Stopping the movie from looping

  1. Right click on either of the last key frames at the end of the time line. Select Actions
  2. Click on the: Plus sign > Actions > Movie Control > Stop.

Step ten: Test your movie

It is time to see if your movie works. Good Luck!

  1. Save your Flash movie.
  2. Go to: Control > Test Movie.

Your movie as it should now be finished. I hope you enjoy having fun with animation.


Webwasp Community: Webwasp Mates & Dates

Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates

60545 visitors to this page since Jan 04

Phil Schulz's Facebook profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page Home Food Mates Members Tutorials Forum Buy Templates Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.