Simple Rotating Spheres (Flash 5) - Tutorial

by JAMES REILLY, Instructor ET34 ET84c

1. Make a sphere using a radial gradient fill / no stroke. If you make it on the main stage, be sure to "convert to symbol"-graphic, name it "sphere". Then delete it from the main stage (it will still appear in your library).

2. From the library window-Options> New Symbol, name it "rotate_spheres" and make it a Movie Clip. You will then see the blank new symbol ready to edit/build on your screen in place of the main stage. This is where you will create the pair of spheres: a little one going around the big one; not on the main stage.

3. Drag the "sphere" graphic symbol out of the library onto layer one of the "rotate_spheres" symbol, center and scale it as you want it, name that layer "big_sphere". Lock that layer.

4. Insert a new layer named "front", and again drag "sphere" out of the library onto that layer. Scale it down to about 30% the size of the one on the other layer (you can do it numerically with the transform panel), and position it to the upper left of the big/main sphere.

5. Insert frames into both layers up to about frame 20. at frame 20 on layer "front" insert a key frame. Then reposition the small sphere on that layer to the lower right of the bigger sphere. (It will move diagonally across the front of the bigger sphere after you select the frame 1 key frame, and apply "motion" tweening. You'll get the blue with the arrow in it.

6. Next to give the illusion that the smaller sphere is rotating (and we are now concerned with just the front half of the rotation), at frame 10 insert a keyframe, and on that frame scale the smaller sphere up a little to about 50% the size of the bigger sphere.

7. Next, we have to make it appear as the smaller sphere is going behind the bigger sphere for the second half of its rotation. So insert a new layer (we are still working on the "rotate_spheres" movie clip), name it "behind", and drag that layer down to the lowest place in the layer list.

8. Now, on the "behind" and "big_sphere" layers, insert frames (F5) up to frame 40, (The "front" layer can end at frame 20). Insert a keyframe into frame 40 of layer "behind" and at frame 20 also.

9. Rather than dragging another sphere from the library, select frame 20 of layer "front" and do: Edit> Copy Frames. Select frame (it's now a blank keyframe) 20 of layer "behind" and do: Edit> Past Frames; you'll see the black dot appear. Then select frame 1 of layer "front" and do the copy/paste frames thing into frame 40 of layer "behind". Of course you must select frame 20 and apply motion tweening to it now. You should notice that frames 1 through 19 are blank/white on layer behind; 20 through have the blue with the arrow.

10. The next step is to fake the perspective of the sphere on layer "behind" as we did on layer "front", but this time we insert a keyframe at frame 30, select the sphere instance there and make it smaller (about 10% the size of the big sphere). You will probably have to hide the big sphere to see and scale the "behind" sphere for a moment.

Save it.
There you have it!

Play around with the "ease-in"/"ease-out" numbers on the keyframes tweening panel to help take the square-ness off the rotation.

You have created a Movie Clip symbol with 3 layers and 40 frames that is sitting in your library as "rotate_spheres", which you can now drag onto your main scene (which is currently blank). If you "Test Movie" you will see the small sphere rotating around the big sphere even if the main movie has only 1 frame. If you want that spinning pair to fly across the stage in the main movie, just add some frames, a keyframe at the end, and reposition the Instance and apply the tweening.

----- Good Luck!

Return to ET34 Syllabus
Return to ET84c Syllabus