Flash Tutorial: Animation	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash Tutorial: Animation - Lithium Atom

Free Flash Tutorial

Intro

The aim of the tutorial is to learn how to create an animation which uses Masks to make objects disappear behind other objects and how to attach Movie Clips to Motion Guides.

Example: Download the Flash file  Int 109a

It's cool to see the atom's electrons revolve around the nucleus of the atom and disappear behind it.

Step One: Setting up the Flash File

1. Open a new: Flash Movie
2. Go to: Modify> Document (Ctrl+J)
3. If you wish change the: Background Colour
4. Set the size to: 250 x 250 pixels
5. Click: OK

Step Two: Creating the Nucleus

1. Select the Oval tool:
2. Draw a: Perfect circle

Note: To draw a perfect circle hold the Shift Key down when drawing the circle.

3. Go back to the Selection Tool:
   
4. Delete the: Stroke (outside border of the circle)
5. Select the: Circle
6. Open the Colour Swatches: Windows > Design Panel > Color Swatches (Ctrl+F9)
7. Select a Radial Gradient from the bottom of the Color Swatches for the circle:
   
   
   Selecting the Radial Gradient.
   
   
8. Right click (Mac Ctrl Click) and Select: Convert to Symbol
9. Name the Convert the circle to a Movie Clip named: mc_nucleus
10. Select a centred registration point:
11. Click: OK
    
    
    
    The Movie Clip: mc_nucleus

Step Three : Creating the Electron

1. Select the Oval tool:
2. Draw a small: Perfect circle
3. Go back to the Selection Tool:
4. Delete the: Stroke (outside border of the circle)
5. Select the: Circle
6. Select a light colour or Gradient Fill:
   
   
7. Right click and Select: Convert to Symbol
8. Name the Convert the circle to a Movie Clip named: mc_electron
9. Select a centred registration point:
10. Click: OK
    
    
    The Movie clip: mc_electron

Step Four : Creating the Revolving Electron

1. Go to: Insert > New Symbol
2. Name the Symbol: mc_revolving_electron
3. Select: Movie Clip

Note: Registration point isn't important.

4. Click: OK
   
   
5. If the Library is closed Open it: Window > Library (F11)
6. Drag onto the centre of the stage a copy of the Symbol: mc_nucleus
7. Use the Ellipse tool to draw an ellipse that is slightly large then the Nucleus: Draw Ellipse
8. Select the Ellipse Fill (centre) and press: Delete
   
   
   The black ellipse will become the electrons orbital path.
   
   
9. Select the Symbol mc_nucleus and press: Delete
10. Select a colour for your electrons orbital path. I selected: Red
    
    
    My red ellipse will become the electrons orbital path.
    
    
11. Right Click in Frame 22 and select: Insert Frame

Note: The exact frame number doesn't matter. The higher the frame number, the longer the electron takes to animate around the nucleus.

12. In the Timeline rename Layer 1 to: Ring
13. Create a new Layer by clicking the Insert Layer button:
14. Rename the new layer: Ball1
15. Right Click (Mac: Ctrl click) on the Ball 1 Label and select: Add Motion Guide
    
    
    
    The new Guide Layer is at the top.
    
    
16. Select the ellipse and go to: Edit >Copy (Ctrl+V)
    
17. Select Frame 1 of the Guide Layer and go to: Edit > Paste in Place (Ctrl+Shift+V)
    
18. On Frame 1 of the Ball 1 layer, place an instance of the clip: mc_electron
    
19. In the last Frame of the Ball 1 Layer, right click and select: Insert keyframe
    
20. Select Frame 1 of the Ball 1 Layer, right click and select: Create Motion Tween
    
21. In the Property Inspector select: Orient to Path
    
    
    Check the Orient to Path check box.
    
    
22. Turn off Visibility in all the Layers except the: Guide Layer
    
    
    Guide Layer is visible.
    
    
23. Select the Eraser tool:
24. Zoom in really closely to any point on the ellipse in the Guide Layer and erase a small fraction of the ellipse. See below:
    
    
    Zoom right up to the ellipse and erase a small section.
    
    
25. Lock the Guide layer:
26. In the Ball 1 Layer turn on the: Visibility
27. Select the frame 1 of the: Ball1 Layer
    
    
    The Guide Layer is locked.
    
    
28. Make sure Snap to Objects is ON: View > Snapping > Snap to Objects
    
    
    Snap to Objects is selected.
    
    
29. Move the Symbol mc_electron so its registration point is snaps to the left ellipse endpoint :
    
    
    Drag the electrons registration point ( the small circle ) until it snaps to the end point of the guide line.

Note: You should see a definite snap movement when the symbol latches onto the guideline.

30. In the Ball 1 Layer select the: End Keyframe (Frame 22)
31. In Frame 22 snap mc_electron to the other end of the: Guideline (the right side of the gap)
    
32. Move the play head to Frame 1 (any Layer) and press: Enter
    
    You will see the animation.
    
    
    When done, the Movie Clip mc_revolving_electron should animate like this.
    

Step Five : Creating the Atom Movie Clip

1. Go to: Insert > New Symbol (Ctrl F8)
2. Mane the new symbol: mc_atom
3. For Behavior select: Movie Clip
4. Click: OK
   
5. Create the following layers:
   
   
   Your Layers should be look like this.
   
   
6. In Frame 1 of the Nucleus layer, place an instance of the clip: mc_nucleus
7. Open the Align Panel: Window > Design Panels > Align (Ctrl K)
8. Center the mc_nucleus to the Stage: Centre
   
9. In Frame 1 of the Ball1 layer, place an instance of the clip: mc_revolving_electron
10. Center the mc_revolving_electron to the Stage: Centre
    
    
    Electron centred and Nucleus centred.
    
    
11. In the Property Inspector give it an Instance Name it: ball1
    
    
    The symbol mc_revolving_electron has the Instance name: ball1
    
    
12. In Frame 1 of the Nucleus Layer select: mc_nucleus
13. Go to: Edit > Copy
    
    
14. Select Frame 1 of the Mask1 Layer
15. Draw a circle about twice the size of the nucleus: Draw a Circle
16. Delete the circles: Stroke (outline)
17. Select a: Plain Fill Colour
18. Centre the circle around the: Nucleus
    
    
19. Still in Frame 1 of the Mask1 Layer and go to : Edit > Paste in Place (Ctrl+Shift+V)

Note: You should still have the mc_nucleus symbol in the computers memory.

20. Go to: Modify > Break Apart
21. Delete the: Nucleus

Note: You should be left with a donut that fits visually exactly around the nucleus clip shown on the nucleus layer.


The blue is my circle on the Mask 1 layer. With the hole cut in it you can see the nucleus below.


22. Select the paint Brush:
23. Select any new: Fill Colour

Note: I selected a Pink:

24. Use your brush tool to roughly paint over the path the electron takes as it passes over the nucleus. Make sure the width of the blob you paint is a little thicker than the diameter of the electron:
    
    
    
    I have painted the pink along the electrons path
    
    
25. Right click on the Mask 1 Layer Name and Select: Mask
    
    
26. Select the Layer: Ball 2
27. Drag out of the Library another copy of: mc_revolving_electron
28. In the Property Inspector give it an Instance Name: ball2
29. Using the Align Panel centre the Symbol to the Stage: Centre
30. Open the Transform Panel: Window > Design Panels > Transform
31. Rotate the mc_revolving_electron by: 60°
    
    
32. Select the Layer: Ball 3
33. Drag out of the Library another copy of: mc_revolving_electron
34. In the Property Inspector give it an Instance Name: ball3
35. Using the Align Panel centre the Symbol to the Stage: Centre
36. Open the Transform Panel: Window > Design Panels > Transform
37. Rotate the mc_revolving_electron by: -60°
    
    The idea is to get three electrons aligned like this
    
    
    Three electrons rotated, one by 60° and one by -60°.
    
    
38. Unlock the Layer: Mask 1
39. Lock all other Layers:
40. Go to: Edit > Select All (Ctrl + A)

Note: This should select the Mask in Layer 1.

41. Go to: Edit > Copy (Ctrl + C)
42. Unlock the Layer: Mask 2
43. Go to Frame 1 in Layer: Mask 2
44. Go to: Edit > Paste in Place (Crt + Shift + V)
45. Using the Transform Panel rotate the Mask by: 60°
46. Right click on the Mask 2 Layer Name and select: Mask
    
    
47. Unlock the Layer: Mask 3
48. Go to Frame 1 in Layer: Mask 3
49. Go to: Edit > Paste in Place (Ctrl + Shift + V)
50. Using the Transform Panel rotate the Mask by: -60°
51. Right click on the Mask 3 Layer Name and select: Mask
    
    
    
    The Layers should be stacked like this after masking.
    
    
52. In Frame 1 of the Actions layer, place the following code:

    ball1.gotoAndPlay(1);
    ball2.gotoAndPlay(8);
    ball3.gotoAndPlay(15);

    Note: This will stagger the beginning frames and positions of the electrons so that the electrons do not run in the same position.

Step Six: The Main Stage - Nearly There!!

1. Return to the Main Stage:
   
2. Delete everything <gasp> from the: Main Stage
   
3. Drag from the Library: mc_atom
   
4. Select Frame 1 in the Timeline and from the Property Inspector select: Motion Tween
   
5. Still in the Property Inspector select: 1 CW Rotation (or CCW)
   
   
   Property Inspector settings.
   
6. On frame 180 right click and select: Insert Keyframe
   
7. Test your movie: Control > Test Movie (Enter + Ctrl)
   
   If all has been done correctly, you will have 3 rings with 1 electron apiece revolving around the nucleus as the nucleus rotates about its own center.
   
   The final Movie should look more or less like this:
   
   
   Yeah!!
   

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