categories
random popular authors
Intro
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.
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
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:
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
(or Insert > Timeline > Layer)
17. Name the Layers as follows:
18. Right click (Mac: Ctrl click) on the guide layer label select: Guide
19. Attach the Electron Layer to the Guide Layer by dragging the Electron Layer just under 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)
24. In the Timeline urn off the visibility of the Guide Layer:
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
32. Click on the: Ellipse
33. Drag the small circle in the centre so that it aligns front edge of the Ellipse:
34. Pull the Square right out to the left side:
You should still be inside the Electron Ring Movie Clip and not on the Main Stage.
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
You should still be inside the Electron Ring Movie Clip with Frame 1 of the Electron layer selected.
2. In the Property Inspector click the Options Button:
3. Set the Options similar to this:
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
You should still be inside the Electron Ring Movie Clip with Frame 1 of the Electron layer selected.
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
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:[b] 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.
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: Circle19. Position and size it so that it fits neatly inside of the the rings: Resize and Move Circle20. 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:
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
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
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.
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
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%
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:[b] 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: Circle19. Position and size it so that it fits neatly inside of the the rings: Resize and Move Circle20. 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
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.
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
liammiles wow. Posted on 07/10/2009
It‘s official; you‘re God.
Thank you so much for taking the time explaining all of this!
Brilliant brilliant brilliant Posted on 05/18/2009
You are genius i tell you. Not only did i get it work in Flash 5 but it looks awesome and i learnt so much from the tutorial as to the possibilities in flash.
thanx thanx thanx
Thanks Posted on 01/28/2009
hello sir,
really i enjoyed all tutorials & complete the movie successfully.
I want more guidance from ur side.
thanks again
ajay hatekar
featured components
help
and feedback
latest
news
latest
forum entries