Flash Tutorials

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.

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.

1. Return to the Selection tool:
2. Right click (Mac: Ctrl click) on the ellipse and select: Convert to Symbol
3. For Name type: Electron Ring
4. For Behavior select: Movie Clip
5. For Registration select top centre:
6. Click: OK
7. 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

1. Create 2 extra layers by clicking on the Insert Layer button in the Timeline: (or Insert > Timeline > Layer)
2. Name the Layers as follows:

Names of Layers inside the symbol: Electron Ring

1. Right click (Mac: Ctrl click) on the guide layer label select: Guide

Note the Guide Layer Icon changes:

1. 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

1. Select the: Ellipse
2. Go to: Edit - Copy (Ctrl C)
3. Select Frame 1 of the: Guide Layer
4. Go to: Edit - Place in Place (Ctrl Shift V)

You should now see a black Keyframe (dot) in frame 1 of the Guide Layer.

1. In the Timeline urn off the visibility of the Guide Layer:

Visibility of the Guide Layer has been turned off.

1. Select the Ellipse on the: Ring Layer
2. In the Properties Inspector change the line to: Solid
3. Set the thickness to: 3 pixels
4. With the Ellipse still selected go to: Modify - Shape - Convert Lines to Fills
5. Open the Color Mixer Panel: Window - Design Panels - Color Mixer(Shift F9)
6. 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%

  1. Select the Fill Transform Tool:
  2. Click on the: Ellipse
  3. 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.

1. 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
   1. Right Click (Mac: Ctrl click) on select: Convert to Symbol
   2. For Name type: Circle
   3. For Behaviour select: Movie Clip
   4. For Registration select centre:
   5. 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.

1. In the Property Inspector click the Options Button:
2. Set the Options similar to this:

PolyStar tool options.

1. Return to the Main Stage by clicking: OK
2. Near the circle draw a: Pentagon
3. Select the centre of the pentagon and: Delete the Centre
4. Make the stroke: Green
5. In the Property Inspector set the size to: 25.6 x 24.4 (width x height)

Your pentagon should look similar to this:

1. Right click on the pentagon and select: Convert to Symbol
   1. For Name type: Pentagon
   2. For Behaviour select: Movie Clip
   3. For Registration select: Centre
   4. 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. Right click and select: Convert to Symbol
3. Select both the shapes: Circle and Pentagon
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.

1. Right click in one of the blue Frames and select:Insert Frame

*The Layer now run all the way to frame 70.

1. Right click on Frame 1 of the Electron Layer and select: Create Motion Tween
2. Right click on Frame 35 of the Electron Layer and select: Insert Keyframe
3. Do the same for Frame 70 of the Electron Layer and select: Insert Keyframe

Your Timeline should look similar to this.

1. If visibility on the Guide Layer is off turn it on: Show Layer
2. Turn off the visibility of the Ring Layer:
3. Lock the Guide Layer:

Visibility of the Ring Layer is off and the other are visible. Guide Layer is locked.

1. Select Frame 1 of the: Electron Layer
2. 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

1. Open the Transform Panel: Window - Design Panels - Transform
2. Change the size of the Electron MC to: 15%

After typing the size you need to press Enter to activate the new size.

1. In the Property Inspector set the transparency level to: Color - Alpha - 20%
2. Select Frame 35 of the: Electron Layer
3. Snap the Electron MC onto the ellipse guide at the: Bottom Centre

In Frame 21 the MC is snapped to the bottom centre.

1. Rotate the Electron MC: 180°

1. Select Frame 70 of the: Electron Layer
2. Snap your Electron MC just to the: Right of the gap.
3. In the Property Inspector set the transparency level to: Color - Alpha - 20%
4. Change the size of the Electron MC to: 15%
5. Turn the Visibility of your guide Layer off:
6. Turn the visibility of your Ring Layer: On
7. 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.

1. Return to the Main Stage by clicking on the Scene 1 Tab:
2. Save the Flash Movie.
3. 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
   1. Drag another copy of the MC Electron Ring onto the stage and name it: myRing2
   2. Drag another copy of the MC Electron Ring onto the stage and name it: myRing2
   3. 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!

1. Use the Insert Layer button in the Timeline to create another: Layer
2. Name the New Layer: Nucleus Spinners
3. Create another:Layer
4. Name the New Layer: Nucleus
5. Drag your Layers so that the order is like this:

Ring Layer is on the top.

1. On the Nucleus Layer draw a: Circle19. Position and size it so that it fits neatly inside of the the rings: Resize and Move Circle
2. 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

  1. 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

1. Right click on the Circle and select:Convert to Symbol
2. For Name type: Spinner
3. For Behavior select:Movie Clip
4. For Registration select: Bottom Left
5. Click:OK
6. Copy and Paste the Movie Clip twice so that you have a total of: Three Instances
7. 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.

1. If the Transform Panel is closed, open it: Window - Design Panel - Transform (Ctrl T)
2. Select the: Top Left Spinner
3. In the Transform Panel for Rotation type:-120

Top let spinner rotated around.

1. Select the: Bottom Right Spinner
2. In the Transform Panel for Rotation type: 120

You should end up with something similar to this.

1. Select the:Top Right Spinner
2. Right Click and select: Edit
3. Select the circle that you drew earlier: Select Circle
4. Right click and select: Convert to Symbol
5. For Name type: Inner Glow
6. For Behavior select: Movie Clip
7. For Registration select: Bottom Left
8. Click: OK
9. Select the Free Transform Tool:
10. Move the Rotation Point from the centre to the bottom left:

To here

Move the rotation point from the Centre to the bottom left.

1. Return to the Selection tool:
2. In the Timeline select: Frame 1
3. In the Property Inspector select:Tween -Motion
4. Select Ease: 100
5. For Rotate select: CW x 2

Timeline properties for Frame 1.

1. In the Timeline right click on Frame 100 and select:Insert keyframe
2. In the Property Inspector select Ease: -50
3. For Rotate select: CW x 2

Timeline Properties for Frame 100.

1. In the Timeline right click on Frame 200 and select: Insert keyframe
2. On Frame 200 select the: Inner Glow MC
3. If the Transform Panel is closed, open it: Window - Design Panels - Transform (Ctrl T)
4. Set the size for both the width and height to: 5%
5. In the Property Inspector set the color to: Alpha 0%
6. Go back to: Frame 100
7. Set the color to: Alpha 90%
8. Return to: Frame 1
9. Select the: Inner Glow MC
10. Set the size for both the width and height to: 5%
11. In the Property Inspector set the color to: Alpha 0%
12. On your Keyboard press: Enter

You should see something similar to the above

You should see something similar to the above animation.

1. Return to the Main Stage by clicking on the Scene 1 Tab:
2. Go to: Modify - Document
3. Set the background to: Black
4. If the Library is closed, open it: Window Library (F11)
5. Drag the Atom Altogether on the: Stage
6. 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.

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.

As always, thank you for your time!

Source: http://www.webwasp.co.uk/tutorials/b33-ani-atom/index.php