Flash Tutorials, Education & Training	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Free Flash Tutorial - Atomic Animation

Free Tutorial

Learn sophisticated animation techniques including how to duplicate Movie Clips such that you can create realistic animated trails that diminish in size and fade away as the electron revolves about an atom's nucleus.

Background: I saw the animation shown below a loooong time ago and was instantly smitten with it, despite having no idea how it was made. Now, 18 months after learning Flash, I happened upon it again and decided to see if I could make my own version. My apologies to whomever I got this from originally; I can't seem to find the animation again on the sites that the links lead-to. Anyway, I happened to zoom in very closely to the "electrons" of the original version of the atom, and saw that there were smaller duplicates of the "electron" coming out of the original "electron". Eureka! I had the answer: They were duplicating movie clips!

Their version:

My version:

Example: Download the Flash file  Int 133a

Keep in mind you will have to use your judgment and creative prowess to set the sizes of your clips. Keep looking at the animations to check yourself.

Step One: Setting up the Movie

1. Open a new Movie: File > New
2. Open the Property Inspector: Window > Properties (Ctrl F3)
3. In the Property Inspector set the Size: 550 x 400
4. Set the Frame Rate to: 48fps

   Note: Do not set the background to black yet as I personally think it is easier to work on white and set the background to black at the end.

Step Two: Creating the Electron Movie Clip and the Rings

The Ellipse

1. Select the ellipse tool from the toolbar:
2. On the Main Stage draw an: Ellipse
3. Single click in the centre of the ellipse: Delete Fill
4. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
5. Click on the stroke (outline) of the ellipse and resize: 192 wide x 61 high
6. For Width select: Hairline
7. Select the Eraser tool
8. Make a very small gap at the top:
   
   
   Note the small gap at the top of the ellipse.
   
   
9. Return to the Selection tool:
10. Right click (Mac: Ctrl click) on the ellipse and select: Convert to Symbol
11. For Name type: Electron Ring
12. For Behavior select: Movie Clip
13. For Registration select top centre:
14. Click: OK
15. Right Click on you new Movie Clip and select: Edit

Note: This will take you inside the Movie Clip you just created. If the Edit Bar is closed, open it (Window> Toolbars > Edit Bar) and you will see the name of the new Movie Clip: Electron Ring



16. Create 2 extra layers by clicking on the Insert Layer button in the Timeline: (or Insert > Timeline > Layer)
17. Name the Layers as follows:
    
    
    Names of Layers inside the symbol: Electron Ring
    
    
18. Right click (Mac: Ctrl click) on the guide layer label select: Guide
    
    
    Note the Guide Layer Icon changes:
    
    
19. Attach the Electron Layer to the Guide Layer by dragging the Electron Layer just under the guide layer.
    
    
    The Guide Layer Icon has changed again:

Note: If you have not done this before it can be very tricky. You barley need to move the electron Layer at all. Just move it slightly up and to the left. The Electron Layer will attach itself to the Guide Layer. When you release the mouse after dragging the Electron layer, if the Guide icon has changed and a dashed line appears beneath guide Layer and Electron Layer is indented, then everything worked!

Now the ellipse that you drew needs a copy in the: Guide Layer

20. Select the: Ellipse
21. Go to: Edit > Copy (Ctrl C)
22. Select Frame 1 of the: Guide Layer
23. Go to: Edit > Place in Place (Ctrl Shift V)
    
    
    You should now see a black Keyframe (dot) in frame 1 of the Guide Layer.
    
    
24. In the Timeline urn off the visibility of the Guide Layer:
    
    
    Visibility of the Guide Layer has been turned off.
    
    
25. Select the Ellipse on the: Ring Layer
26. In the Properties Inspector change the line to: Solid
27. Set the thickness to: 3 pixels
28. With the Ellipse still selected go to: Modify > Shape > Convert Lines to Fills
29. Open the Color Mixer Panel: Window > Design Panels > Color Mixer (Shift F9)
30. Select a Green to Black transparent to Black transparent: Radial Gradient Fill
    
    
    A radial fill with three colours.
    
    • 1st colour is Green 90% Solid:     R = 0,   G = 255,   B = 0,   Alpha = 90%
    • 2nd colour is: Black Transparent: R = 0,   G = 0,       B = 0,   Alpha = 0%
    • 2nd colour is: Black Transparent: R = 0,   G = 0,       B = 0,   Alpha = 0%
      
      
      
31. Select the Fill Transform Tool:
32. Click on the: Ellipse
33. Drag the small circle in the centre so that it aligns front edge of the Ellipse:
    
    
    Central circle is in line with the front edge of the Ellipse.
    
    
34. Pull the Square right out to the left side:
    
    
    Square pulled right out to the left side.
    
    
    
    
    Your Ellipse should end up looking similar to this.

Step Three: Making the Electron MC - The Circle

You should still be inside the Electron Ring Movie Clip and not on the Main Stage.

Edit Bar shows that you are editing inside the Electron Ring MC.

Note: If you are not inside the Movie Clip Open the Library (F11) and right click on the Electron Ring MC and select: Edit

1. Select Frame 1 of the: Electron Layer
2. Select the Ellipse tool:
3. Draw a: Circle
4. Select the Selection tool:
5. In the Property Inspector change its size to: 15 x 15 pixels
6. Set the width of the Stroke (outline) to: 3 pixels
7. Change the stroke to: Yellow
8. Change the fill to Green so that it looks something similar to this:
9. Double click in the centre of the circle to select both the fill and stroke: Select Circle
10. Right Click (Mac: Ctrl click) on select: Convert to Symbol
11. For Name type: Circle
12. For Behaviour select: Movie Clip
13. For Registration select centre:
14. Click: OK Making the Electron: The Polygon

Step Four: Making the Electron MC - The Polygon

You should still be inside the Electron Ring Movie Clip with Frame 1 of the Electron layer selected.

1. Select the PolyStar tool:

Note: The PolyStar tool can be found if you click and hold the mouse button on the Rectangle tool and drag to select the PolyStar tool from the pop-up menu.

2. In the Property Inspector click the Options Button:
3. Set the Options similar to this:
   
   
   PolyStar tool options.
   
   
4. Return to the Main Stage by clicking: OK
5. Near the circle draw a: Pentagon
6. Select the centre of the pentagon and: Delete the Centre
7. Make the stroke: Green
8. In the Property Inspector set the size to: 25.6 x 24.4 (width x height)
   
   Your pentagon should look similar to this:
   
   
9. Right click on the pentagon and select: Convert to Symbol
10. For Name type: Pentagon
11. For Behaviour select: Movie Clip
12. For Registration select: Centre
13. Click: OK

Step Five: Making the Electron MC - Combining the Circle and the Pentagon

You should still be inside the Electron Ring Movie Clip with Frame 1 of the Electron layer selected.

1. Drag the circle on top of the Pentagon like this:
2. Select both the shapes: Circle and Pentagon
3. Right click and select: Convert to Symbol
4. For Name type: Electron
5. For Behaviour select: Movie Clip
6. For Registration select Centre
7. Click: OK
8. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
9. Give the new Electron MC an Instance Name: myElectron
   
   
   Instance Name: myElectron

Step Six: Making the Electron MC - Animating the Electron

You should still be inside the Electron Ring Movie Clip.

1. On Frame 70 Shift click to highlight all: Three layers
   
   
   All three Layers are selected on frame 70.
   
   
2. Right click in one of the blue Frames and select: Insert Frame
   
   
   The Layer now run all the way to frame 70.
   
   
3. Right click on Frame 1 of the Electron Layer and select: Create Motion Tween
4. Right click on Frame 35 of the Electron Layer and select: Insert Keyframe
5. Do the same for Frame 70 of the Electron Layer and select: Insert Keyframe
   
   
   Your Timeline should look similar to this.
   
   
6. If visibility on the Guide Layer is off turn it on: Show Layer
7. Turn off the visibility of the Ring Layer:
8. Lock the Guide Layer:
   
   
   Visibility of the Ring Layer is off and the other are visible. Guide Layer is locked.
   
   
9. Select Frame 1 of the: Electron Layer
10. Grab the Centre of your Electron MC and snap in it on to the Guide Ellipse just to the: Left of the gap
    
    
    Electron MC snapped onto the left of the ellipse gap.

Note: As long as you drag he Electron MC from its centre point you should see it jump or snap onto the elliptical guide line as get close. If this does not happen make sure you are dragging the Electron MC from the cross right in the centre of the Movie Clip. If you still have problems try changing your Snap Options: View > Snapping

11. Open the Transform Panel: Window > Design Panels > Transform
12. Change the size of the Electron MC to: 15%
    
    
    Note: After typing the size you need to press Enter to activate the new size.
    
    
13. In the Property Inspector set the transparency level to: Color > Alpha > 20%
14. Select Frame 35 of the: Electron Layer
15. Snap the Electron MC onto the ellipse guide at the: Bottom Centre
    
    
    In Frame 21 the MC is snapped to the bottom centre.
    
    
16. Rotate the Electron MC: 180°
    
    
    
    
17. Select Frame 70 of the: Electron Layer
18. Snap your Electron MC just to the: Right of the gap.
19. In the Property Inspector set the transparency level to: Color > Alpha > 20%
20. Change the size of the Electron MC to: 15%
21. Turn the Visibility of your guide Layer off:
22. Turn the visibility of your Ring Layer: On
23. Press Enter on your Keyboard to see the animation: Enter
    
    
    Your animation should look like this.

Note: If it does not like this it is probably because the Electron is not snapped to the guide correctly or is not snapped to the correct position of the guide.

24. Return to the Main Stage by clicking on the Scene 1 Tab:
25. Save the Flash Movie.
26. Select the Electron Ring MC and press: Delete

    Note: the Electronic Ring will still be in the Library.

Step Seven: Creating the Atom

1. Go to: Insert > New Symbol
2. For name type: Atom Altogether
3. For Behavior select: Movie Clip
4. Click: OK
5. Rename your only layer to: Rings
6. If the Library is closed, open it: Window > Library (F11)
7. Drag on to Stage the Movie Clip: Electron Ring
8. Centre the Electron Ring MC on the Stage: Centre
9. In the Property Inspector give the Electron Ring MC an Instance Name: myRing1
10. Drag another copy of the MC Electron Ring onto the stage and name it: myRing2
11. Drag another copy of the MC Electron Ring onto the stage and name it: myRing2
12. Rotate and Centre myRing2 and myRing3 until they look like this:
    
    
    Position of Rings on Stage.

Note: Do not type myRing1 etc on Stage (as above) type the Instance Names in the Property Inspector!

13. Use the Insert Layer button in the Timeline to create another: Layer
14. Name the New Layer: Nucleus Spinners
15. Create another: Layer
16. Name the New Layer: Nucleus
17. Drag your Layers so that the order is like this:
    
    
    Ring Layer is on the top.
    
    
18. On the Nucleus Layer draw a: Circle
19. Position and size it so that it fits neatly inside of the the rings: Resize and Move Circle
20. Fill the circle with the following gradient fill:
    
    

    From left to right, for the Paint Buckets:

    1: #00FF00 at 100% alpha
    2: #000400 at 100% alpha
    3: #36FE36 at 100% alpha
    4: #025801 at 100% alpha
    5: #012501 at 0% alpha
    6: #000000 at 0% alpha

21. In the Timeline turn the Visibility of the Nucleus Layer off:

Step Eight: The Nucleus Spinners

You should still be inside the Atom Altogether MC.

1. Lock the Rings Layer:
2. On the Nucleus Spinners Layer draw a: Circle
3. Select the Stroke (outline) and press: Delete
4. Reselect the centre fill and size the circle: 40 x 40
5. Make a circular radial fill with the following properties:



From left to right, for the paint buckets:

1: #00FF00 at 100% alpha
2: #00E800 at 0% alpha
3: #00C000 at 0% alpha
4: #00E000 at 100% alpha
5: #007000 at 0% alpha
6: #000000 at 0% alpha

6. Right click on the Circle and select: Convert to Symbol
7. For Name type: Spinner
8. For Behavior select: Movie Clip
9. For Registration select: Bottom Left
10. Click: OK
11. Copy and Paste the Movie Clip twice so that you have a total of: Three Instances
12. Move the Movie clips so that they are in a similar position as below:
    
    
    Nuclear Spinners in place.
    
    Now we need to make them Spin !! To make sure they do not spin in parallel we will need to rotate two of the spinners around.
    
    
13. If the Transform Panel is closed, open it: Window > Design Panel > Transform (Ctrl T)
14. Select the: Top Left Spinner
15. In the Transform Panel for Rotation type: -120
    
    
    Top let spinner rotated around.
    
    
16. Select the: Bottom Right Spinner
17. In the Transform Panel for Rotation type: 120
    
    
    You should end up with something similar to this.
    
    
18. Select the: Top Right Spinner
19. Right Click and select: Edit
20. Select the circle that you drew earlier: Select Circle
21. Right click and select: Convert to Symbol
22. For Name type: Inner Glow
23. For Behavior select: Movie Clip
24. For Registration select: Bottom Left
25. Click: OK
26. Select the Free Transform Tool:
27. Move the Rotation Point from the centre to the bottom left:
    
         To here  ->   
    
    Move the rotation point from the Centre to the bottom left.
    
    
28. Return to the Selection tool:
29. In the Timeline select: Frame 1
30. In the Property Inspector select: Tween >Motion
31. Select Ease: 100
32. For Rotate select: CW x 2
    
    
    Timeline properties for Frame 1.
    
    
    
33. In the Timeline right click on Frame 100 and select: Insert keyframe
34. In the Property Inspector select Ease: -50
35. For Rotate select: CW x 2
    
    
    Timeline Properties for Frame 100.
    
    
36. In the Timeline right click on Frame 200 and select: Insert keyframe
37. On Frame 200 select the: Inner Glow MC
38. If the Transform Panel is closed, open it: Window > Design Panels > Transform (Ctrl T)
39. Set the size for both the width and height to: 5%
40. In the Property Inspector set the color to: Alpha 0%
41. Go back to: Frame 100
42. Set the color to: Alpha 90%
43. Return to: Frame 1
44. Select the: Inner Glow MC
45. Set the size for both the width and height to: 5%
46. In the Property Inspector set the color to: Alpha 0%
47. On your Keyboard press: Enter
    
    
    
    You should see something similar to the above animation.
    
    
48. Return to the Main Stage by clicking on the Scene 1 Tab:
49. Go to: Modify > Document
50. Set the background to: Black
51. If the Library is closed, open it: Window Library (F11)
52. Drag the Atom Altogether on the: Stage
53. Test you Movie: Control > Test Movie (Ctrl Enter)
    
    You should see something similar to this:
    
    
    

Step Nine: The ActionScript

The ActionScript achieves two things.

1. It rotates the Atom.
2. It creates the trails on the electrons.

We are almost done! Now we need to add the Actionscript to the movie to make the electron trails!

Note: This ActionScript will not work in Flash 5. See Details

1. Make sure you are on the Main Stage and not inside one of the Movie Clips. If you are not sure click on the Scene 1 Tab to return to the Main Stage:
2. Select the Movie Clip of the: Atom Altogether
3. In the Property Inspector give it an Instance Name: atom
4. In the Timeline select: Frame 1
5. If the Actions Panel is closed, open it: Window > Actions (F9)
6. Place the following code in Frame 1.
   
   //  If you wish leave out the gray comments.
   /*  Always stop the action unless there is a reason to allow the playhead to continue to subsequent frames. */
   stop();
   
   //  This function will cause the entire animation clip, named "atom" to rotate by one degree each frame.
   _root.atom.onEnterFrame=function() {
       this._rotation += 1;
   }
   
   /*  We need to stagger the initial starting frame of ring2 and ring3 to make sure no collisions of any electrons occur! Since the total approx. number of frames in the Electron Ring Movie Clip is 70, and I wish to stagger the 3 named clips ring1, ring2 and ring3 equally, I set ring2 to start at 1/3rd of its total animation loop, and ring3 to start at 2/3rd of its total animation loop. */
   _root.atom.myRing2.gotoAndPlay(Math.floor(70/3));
   _root.atom.myRing3.gotoAndPlay(Math.floor(2*70/3));
   
   // using a 'for' loop that will execute 3 times, we...
   for (i=1; i<4; i++) {
   
   /*  ... setup a dummy variable to be named _root.atom.ring1, then _root.atom.ring2 and then _root.atom.ring3 so we may later add an onEnterFrame function and then duplicate movie clips within each ring1 ring2 and ring3 clip. */
   sploosh = eval("_root.atom.myRing" + i);
   
   /*  ... setup an onEnterFrame function to duplicate the electron movie clip within each ring movie clip. I.e., due to the dummy variable, "sploosh", we will form 3 onEnterFrame functions, _root.atom.ring1.onEnterFrame, _root.atom.ring2.onEnterFrame and _root.atom.ring3.onEnterFrame. */
   sploosh.onEnterFrame = function() {
   
   /*  Here, "this" refers to _root.atom.ring1, _root.atom.ring2 or _root.atom.ring3 depending on which iteration of "i" we are on currently. We duplicate the movie clip "myElectron" via the this.myElectron statement, name each duplicated copy pent1, pent2, pent3, pent4, pent5, etc. as "j" increments every frame. */
   duplicateMovieClip(this.myElectron,"pent" + j, j);
   
   /*  Again, to deal with movie clip names programmatically we use a dummy variable, "foosh". Here "this" refers to _root.atom.ringX.pentY, where X is 1, 2 or 3, and Y is 0, 1, 2, 3... In other words, each ring will inherit duplicate copies of "pent". Meaning ring1 will have pent0, pent1 to pent? and ring2 & 3 will have pent0, pent1 to pent?. */
   foosh = eval(this+".pent" + j);
   
   /*  For each pent?, we define its own "onEnterFrame" function, to make each pent do something as they animate alongside of the movie clip "electron" within ring1, ring2 and ring3. */
   foosh.onEnterFrame = function() {
   
   /*  Each pent? will reduce in scale in the x and y directions by 10%, every frame. */
   this._xscale = this._yscale -= 10;
   
   //  Each pent? will reduce in alpha by 5%, every frame.
   this._alpha -= 5;
   
   /*  If the alpha of any given pent? duplicate drops below 36%, remove the clip to:
   a) Remove it from the stage and ...
   b) Simultaneously remove each pent?'s onEnterFrame function.
   To free up processing cycles, as we don't need the pent?'s anymore. */
   if (this._alpha < 36) {
       removeMovieClip(this);
   }
   
   //  End foosh.onEnterFrame function
   }
   
   /*  Finally, every frame, increment j by 1 so that we can make more pent?'s and place them each on different levels within the main movie. */
   j += 1;
   
   //  End sploosh.onEnterFrame function
   }
   
   //  End 'for' loop
   }

That's it!

Play with the scalar values that you decrease the scale and alpha of each pent? clip, as well as when any given pent? clip is removed. Or change the main movie's frame rate. Changing any of these values will affect how the final Flash Movie looks.

Note: If you must include this clip in a Movie that is run at 12 or 24 frames-per-second, rather than using onEnterFrame to duplicate movie clips and to decrease their scale and alpha properties, consider using setinterval functions in tandem with the updateAfterEvent() command. You can therefore gain a smoother animation despite the slower frame rate. I haven't tried this out yet, but I shall sometime soon.

Cross Ref: There is a tutorial for: setInterval

Experiment with it, and let me know what you have learned. As always, thank you for your time!

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