Tutorial: Flash Animation - Nuclear Atom	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Free Flash Tutorial - Atomic Animation

Free Tutorial

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!