How to make a planet animation in Flash with a circular motion guide

In this entry-level Flash tutorial, I will show you how to create and animate a planet that is revolving around the Sun. You will learn how to:

• Import different image formats into Flash and turn them into Movie clip symbols,
• Create a guided motion tween animation,
• Make the guide visible - so that your site visitors can see the paths of the planet,
• Align objects on stage, and more.

The techniques shown here can be achieved in Flash MX or any newer version. Below is the example showing what you are going to learn to create with this easy tutorial.

Preparing your document

1. Open a new Flash document. Before starting to work on the actual animation, you need to adjust a few settings and import some graphics. Select Modify > Document (or press Ctrl+J) to open the Document Properties dialog box.

Set the document's width and height to 300 pixels (they can be found under the Dimensions section - check out 1 in the image below).

Set the background color for your movie to black (2).

To have a smooth animation, you need to increase the Frame rate of your movie. Set it to 30 fps (3). Click OK.

NOTE Fps means frames per second, or how many frames of your movie the playhead passes in the time span of one second.

2. You will animate bitmap pictures of the planets in this tutorial. I have prepared the pictures for you, so just download the zipped images.

REMEMBER The Library in Flash stores all the images, symbols (Movie clips, buttons, graphical symbols) and sounds that you import into Flash or create while working. You are not obligated to use a Library item inside your movie. In fact, it can just sit there without doing anything. If it isn't used in your movie, it won't add to your final SWF file size.

Placing a Library item on stage and adjusting its position using the Align panel

5. Above the stage is the timeline with the layers. Double-click on the Layer 1 name to change it. Call it sun and hit Enter to confirm the change.

6. Go to the Library (keep the Library open, you'll need it often). Click on sun.gif, hold your mouse button and drag it over to the stage.

Once you're over the stage with your mouse, release the mouse button. The image sun.gif will appear on the scene.

7. Open the Align panel (Window > Align). Using the Selection tool (V) click on the sun image on the stage once to select it. When a bitmap picture is selected in Flash, you can see a gray border around it, like the one shown in the image above.

8. In the Align panel, turn the Align/Distribute to Stage button on (see 1 in the image below). When this option is turned on, any (s) that you are aligning will do so in relation with the dimensions and edges of the stage.

Next, click on the second button in the first row (see 2 above) to center the image of the Sun horizontally on the stage. Finally, click the Align vertical center button (3) to center the image vertically. Your image should now be perfectly centered on the stage.

9. At the right of the sun layer label, click on the small dot below the padlock icon to lock this layer.

REMEMBER Locking a layer prevents you from accidentally drawing or putting something inside it. If you do not need a layer at the moment because you either finished working inside it or are doing something in some other layer, it is best to lock it. Make this a habit.

Converting a bitmap image into a Movie clip symbol

10. In the layers area, click on the Insert Layer icon to make a new layer.

The new layer will automatically be created on top of all exisitng layers. Call this new layer venus.

11. Go to the Library, click on venus.png and drag it over to the stage.

12. With the image on the stage still selected, press F8 to convert it to a symbol. You must do this, because only symbols can be animated in Flash. Images alone cannot.

In the dialog that appears, select Movie clip as type (see 1 in the image below). Name it Venus revolution (2). A small note: the rotation of a planet around the Sun is called revolution.

The last thing you need to adjust is the symbol's registration point. This option defines the point around which all the transformations will be made and also any mofifications that will be done programatically via ActionScript. Select the middle central point as I did (see 3 above). Click OK.

The bitmap image is now converted into a movie clip symbol, which is represented on the stage with a thin blue border and a small target (the circle with the cross inside it) at the center of it. This small target is the symbol's registration point.

The movie clip is on the stage, but in the Library also. Every time you convert a bitmap image or vector graphic into a symbol, this symbol is automatically stored in the Library.

13. Using the Selection tool (V), double click on the Venus revolution movie clip in the Library to enter inside it.

Let me clarify this point for you: when editing a symbol, you can either double-click on it on the stage or inside the Library. The difference is that when you edit it directly on the stage, you can see all the other elements that are present on the stage (like the Sun image in the first layer). These other elements of your movie are faded out a little bit, to make it easier for you to see the contents of the symbol. This first option is good when you must make some changes or additions inside your movie clip that are visually related to the rest of the stage.

On the other hand, when you're editing a symbol by double-clicking on it inside the Library, like you just did in this step, you see only its contents. All the other elements on the stage are hidden. This is a good option to use when the symbol in question isn't that closely related to other elements, or when you need to clearly see the symbol, without the other graphical content of your movie distracting you.

Symbols in Flash have their own timeline, which is independent from the main timeline (the timeline of the stage). How can you tell if you are working on the stage or inside a symbol? Easily. Just take a look above the layers and Flash tells you nicely where you are curently working.

Making a circular guided motion tween animation

14. Now that you are inside the Venus revolution (sounds feminist, doesn't it? :) movie clip, you'll see the venus.png bitmap sitting there. Click on it with the Selection tool (V) to select it.

15. Press F8 to convert the image (once again) to a movie clip. Why again? I'll explain this in a moment.

Select Movie clip as type like you did before, leave the Registration point in central position, call it planet Venus and click OK.

You will be making an animation inside the Venus revolution movie clip symbol. This is perfectly normal and a technique that is often used in Flash. Since movie clips have their own timeline, you can create all sorts of animations inside them. The advantage of having an animation inside a movie clip is that you are creating an independent animation, which can be easily reused, moved around the stage and so on.

Each of the planets will have a different path and more importantly, its own unique speed at which it revolves around the Sun. Imagine for a moment that you are making all the animations on the main timeline (the stage). It would be difficult to synchronize all those movements so that the planets' revolutions seem natural. Every time something is out of sync, or when you'd have to change the duration of the animation, you would have to rework and modify big parts of the timeline.

Moreover, should you decide to enlarge the stage and put some additional information near the Solar system animation, you would have to move ALL the s - the movie clips, the motion guides, the graphics and so on. This is time-consuming and can become a real annoyance if you have to make changes more than once. To avoid all of this, it is best to make each planet animation inside its own movie clip.

And since only symbols can be animated, you have to have a movie clip inside a movie clip. So once you finish the animation, and say, you wish to place it on a different part of the stage, all you have to do is move the movie clip that hosts the animation (Venus revolution in this case). When you do that, all the animations and movie clips inside it will move along with it.

16. You are still inside the Venus revolution movie clip. Right-click on frame 75 of the first (and only) layer present so far in the movie clip and select Insert Keyframe from the menu that appears.

17. The frames between the first keyframe and the one you just added are greyed out. Right-click anywhere on this area and select Create Motion Tween.

A continuous arrow will appear between the two keyframes, and the gray area will turn into a blue-magenta hue. This is the indication that you have made a proper motion tween animation.

But there is no animation yet. The planet Venus is not moving. Wait a moment - you have to make the guide first, and then you will animate the planet.

17. Lock this layer and name it venus.

18. Create a new layer and click on its first keyframe (empty at the moment) to select it for work.

Finally, select hairline as type of line (3).

20. Hold Shift, click with your mouse on the stage and start dragging. By holding Shift you will create a circle instead of an ellipse. Draw a circle of any size anywhere on the stage.

21. Choose the Selection tool (V) and select the circle by clicking on it once. Go to the left part of the Properties panel and there you'll find the W and H fields which stand for width and height. Enter 184 in both fields (this is a pixel value). This is much easier then trying to get the right size of the shape when you're drawing it.

22. Just like you did with the Sun back in step 8 of this tutorial, center the circle horizontally and vertically with the aid of the Align panel. Just a small note: inside a movie clip, the center for aligning is the movie clip's registration point and not the center of the stage. The registration point is, as you recall, the small cross - you can see it in the image below.

23. Click once outside the cricle with the Selection tool (V) to unselect it. I say once, because clicking twice would return you to the main scene, and you don't want to do that right now, because there are still a few more steps to be done to finish this animation inside the movie clip.

24. Select the Eraser tool (E). Go to the Options portion of the Tools panel. Select either Erase Normal or Erase Lines as the behavior of the eraser (1) and select the smallest possible circular brush (2).

25. Erase the smallest possible portion of the circle's top - see how it's done by looking at the image below, which displays the circle's top before and after the erasing action.

Why did you have to do this? The answer is simple. You want the planet to rotate around the Sun, so it has to follow this circular guide path. If you didn't erase this small portion of the guide, this wouldn't have been possible.

A motion tween animation in Flash always moves along the shortest possible trajectory. Thus, had you not broken the circular guide path by erasing it, the planet would be moving between two points on the circle - the longest possible trajectory being half of the circle. To better understand what I mean, just look at the figures below.

The figure A shows the longest possible path an animation can perform when following a circular motion guide. The green is the starting point of the animation, an the red one the ending. Say you wanted to make a full circle animation, so you moved the ending animation point near the starting one. Flash won't make a full circle animation, because it will look for the shortest possible way between the starting and the ending point, as you can clearly see in figure B. Hence the necessary use of the eraser.

You will now see how the circular animation will be easily done.

26. Lock the current layer. Right-click on its label (its name) and select Guide from the menu.

A small ruler icon will appear in front of the layer's label indicating that this layer is a guide layer.

27. Click on the venus layer an drag it towards the guide layer. At one point, you will see a bold gray line appear, which indicates that the layer is ready to snap into place (see the image on the left below). Release the mouse button and voila! The venus layer has become a guided layer. Its icon is a little bit indented and the icon of the guide layer above it represents a miniature trajectory path.

Ok, the planet Venus movie clip is now ready to be placed properly on the guide, to be able to follow it.

28. Unlock the venus layer and click on its first keyframe to select it.

29. Choose the Selection tool (V). In the Options portion of the Tools panel, make sure that the Snap to s (the little magnet icon) is turned on.

30. No matter where the planet (Planet Venus movie clip) is situated now, click on its registration point and drag it to the top of the guide path. Place it somewhere close to the rift you made earlier. Even if you release your mouse button while the pointer isn't over the guide path, the planet will become attached to the guide, which is great. Flash makes everything easy!

31. Click on the second keyframe of the animation (the ending point) to select it.

32. In this keyframe, click on the Planet Venus movie clip's registration point, and drag it to the top of the circular motion guide. If you move your mouse close to the rift, you will see a bigger white circle appear (see image below). This means that the movie clip is ready to snap into place.

33. Test your movie by either pressing Ctrl+Enter or selecting Control > Test Movie. You will certainly notice that there is an abrupt "jump" when the animation comes full circle, near the end, before the beginning of another cycle. This can be seen in the Flash example below.

Let me show you now how to fix this - it is really easy.

34. Close the testing window and go back to your .FLA document. You should still be inside the Venus revolution movie clip. Click on frame 1 of the Venus layer. It is here that you must do corrections - bring the planet closer to the top of the guide path.

Click on the planet Venus movie clip to select it (click just once, not twice). You can do the adjustement easily - you don't even have to use your mouse. Press the right arrow key on your keyboard and start moving the planet Venus movie clip.

You will notice that the movie clip won't come off the motion guide. It will move to the right, but it will stay on the guide all the time.

When you think you've moved it enough, test your movie again (Ctrl+Enter) and see how the animation works now. Do this as many times as necessary - test the movie, go back to the working space, do some additional adjustements and test it again until it comes out right.

If the movie clip has reached the beginning of the motion guide, the one just before the "crack" (the erased part), go the second keyframe (frame 75) and do some adjusting there.

The only difference is that here you must move the movie clip with your mouse, making sure that it doesn't go off the motion guide. Why you can't do this with arrow keys here too, I don't know. Flash just works this way.

35. Once you got the animation right - the planet is moving smoothly along its circular path, you must still make it rotate around the Sun. Because you have certainly seen that it is misplaced now. To do that, you must go to the main scene - the main timeline.

Returning to the main scene is really easy. Just click on the Scene 1 link above the layers to accomplish that.

Once on the main scene, the Venus revolution movie clip should be selected by default. That's because when you work inside a movie clip, when you go back to the main scene, this same movie clip is selected. It's name appears in the Properties panel.

37. Use the arrow keys on your keyboard to move the movie clip to its proper position. By pressing (or holding down) an arrow key, you move an object in Flash by 1 pixel at a time. If you hold down Shift and press one of the arrow keys simultaneously, you will move the selected object by 10 pixels.

Move the movie clip until its registration point is precisely over the center of the Sun. You can see this in the image below - the registration point being the small circle with the little plus sign inside it.

Don't worry about the planet - if it isn't aligned with the Sun - it is its registration point which is important, if you wish for it to make a proper circular animation around the Sun.

Congratulations! You have just learned how to make a smooth animation that follows a circular motion guide. All you have to do now is make the guide visible - a planet's movement path looks nice on a Solar system map, so why not add it?

Making the motion guide visible

38. Double-click on the planet Venus movie clip on the main scene to enter inside it.

39. Lock the venus layer.

40. Make a new layer and call it visible path.

41. The new layer will be created between the Venus layer and its guide. Also, it will automatically be guided by the guide layer, although it is completely empty. This is clear if you look at the first image below - the new layer's icon is indented.

To pull the visible path layer outside the influence of the motion guide layer, click on it and start dragging it below. You must move your mouse in front of the layer's label to achieve this.

Once the layer is below the venus layer, a gray bolded line will appear indicating that the layer is ready to snap into place. If you look carefully at the second image, you'll see thet near the arrow cursor, a bolded gray area has appeared. This means that this layer won't be a guided one, which is exactly what you want.

42. Unlock the guide layer.

43. Select the motion guide (the incomplete thin green circle) inside it with the Selection tool (V).

44. Copy this shape by pressing Ctrl+C.

45. Lock the guide layer.

46. Click on the visible path layer's first frame to select it for working.

47. Press Ctrl+Shift+V to paste the circle shape in place here.

48. While the shape is still selected (this happens automatically when you paste an object), change its color.

Since this is an outline shape, all you have to do is select a diffeent stroke color near the little pencil icon in the Colors portion of the Tools panel.

Grey works fine against a black background. Fine for the color, but this isn't a real circle. It has a little hole on its top. To correct this, first hide the guide layer and the venus layer to work more easily and to better see the visible path.

49. Zoom in to work more easily. To close this shape, use the Selection tool (V). Move the cursor to either end of the shape (see the image sequence below), click and start dragging.

When you get to the other side of the rift, you will see a small white circle appear. This means that the ends are going to snap together - they will connect. Release your mouse and here's your final visible circular path.

The reason why you had to pull this layer below the animation layer is simple - it wouldn't look good if the planet's path were positioned over the planet. By placing it below, the planet is more visible and looks better.

And that's it! You can expand this by adding more planets now that you know how easy it is to do it! Just look at the example below!

Below you can download the source file containing the animation that was explained in this lesson, as well as the expanded example shown above. Note: both source files are Flash MX 2004 files.