008 Beginners Flash Compatibility: MX For Flash MX 2004click
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:
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.
Type a word on stage or draw something.
Select the text/drawing with the arrow tool.
Go to: Insert > Convert to Symbol.
In the dialog box type a name: Web
Select Graphic.
Click: OK
Delete the text/drawing from the main stage. Don't worry it is still in the Library.
Step two: Animating the first symbol
Click on: Insert > New Symbol.
In the dialog box type a name: Web MC
Select Movie Clip.
Click OK.
Go to: Window > Library.
Drag your first Symbol onto the stage.
Step three: Creating a tween within a symbol
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.
Move the copied symbol on frame 10 to a new position on the stage. This will not move the symbol on frame 1.
Right click in the time line in-between the two Keyframes (The frame with the black dots in them). Select Create Motion tween.
Your time line should look like this.
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.
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
Drag both your symbols onto the main stage from the Library.
Save your Flash movie.
Go to: Control > Test Movie. One of your symbols should be static and the other animated.
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.
Delete both symbols from the stage. Remember they are still in the Library.
Step five: Create a new symbol
Type a word on stage or draw something. I typed the word wasp.
Select the text/drawing with the arrow tool.
Go to: Insert > Convert to Symbol.
In the dialog box type a name: Wasp
Select Graphic.
Click OK.
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
Go to: Insert > New Symbol.
In the dialog box type a name: webwasp
Select Graphic.
Click OK.
Go to: Window > Library.
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.
Drag your third non animated symbol onto stage. Mine was the wasp Graphic.
Position them on stage as you think looks appropriate.
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.
Place the symbol that you just created, in Step Six, onto the main stage by dragging it out of the Library.
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.
Click on the Insert Layer button. You will fine this to the left of the time line just under the words Layer 1.
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 > Common Libraries > Buttons.
Open one of the button folders by double clicking on it.
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.
Right click on the button and select: Actions.
Click on the: Plus sign > Actions > Movie Control > Goto.
Your action script should look like this:
on (release) {
gotoAndPlay(1);
}
Close the Actions panel. Click on the in the corner of the panel and select: close panel.
Step nine: Stopping the movie from looping
Right click on either of the last key frames at the end of the time line. Select Actions
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!
Save your Flash movie.
Go to: Control > Test Movie.
Your movie as it should now be finished. I hope you enjoy having fun with animation.