Flash Explained

Learn Flash easily.

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

October 11th, 2008 | Author: Luka | Category: Animation Basics


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

Adjusting the document properties.

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

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.

Unzip them. You should have two images: sun.gif and venus.png. Place these images somewhere where you’ll quickly find them.

3 In Flash, select File > Import > Import to Library. In the dialog that will open up, select both images, by clicking once on the first one, then holding Ctrl and selecting the second. Click Open.

4 Select Window > Library to open the Library. You should both the GIF and the PNG sitting nicely in the Library.

The Library panel inside Flash.

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.

Top of page

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.

Modifying the name of a layer.

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.

Selecting an item inside the Library.

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

The image of the sun on the stage.

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 object(s) that you are aligning will do so in relation with the dimensions and edges of the stage.

Using the Align panel in Flash.

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.

The image of the sun placed in the exact center of the stage.

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

Locking a layer.

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.

Top of page

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.

Making a new layer.

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

The new layer has been renamed.

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.

Selecting the options for the new symbol.

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 on the stage.

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.

Information about the current timeline.

Top of page

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 objects – 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.

Adding a keyframe to a layer inside a movie clip symbol.

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.

Making a Motion tween animation.

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.

18 Lock this layer and name it venus.

Locking a layer and changing its label.

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

Making a new layer and selecting its first keyframe.

You have probably noticed that the empty keyframe in this layer lasts within the timeline as long as the layer beneath it. This is normal Flash behaviour.

20 Select the Oval tool (O). Go to the Properties panel below the stage. Select a stroke (outline) color that is clearly visible on the movie’s black background (see 1 below). This line won’t be visible in your final Flash movie, but selecting a clearly visible color makes your work easier.

Block the fill color (2). Just click on the little rectangle next to the paint bucket icon and the pallete will open up. In its top right corner you will find the white rectangle with the red diagonal line which prevents the Oval tool from filling the shape with a color.

Selecting the properties of the Oval tool.

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

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

A circle with outline only is drawn on the stage.

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

Adjusting the dimensions of the circle by entering numbers in appropriate fields.

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

The circle is now centered inside the movie clip symbol.

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

25 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).

Selecting the options of the Eraser tool.

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

The outline circle before and after a small part of it has been erased.

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.

This diagram explains the way guided animations are being played in Flash.

The figure A shows the longest possible path an animation can perform when following a circular motion guide. The green object 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.

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

Turning the current layer into a guide layer.

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

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

Making the bottom layer a guided one.

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

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

The guided layer is now unlocked.

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

The snap to objects option is active now.

31 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!

Placing the planet movie clip on the motion guide.

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

Selecting the ending keyframe of the animation.

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

Placing the movie clip in the second keyframe on the motion guide.

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

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

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

Going back to the main scene in Flash.

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.

Bringing the planet movie clip registration point at the center of the Sun.

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?

Top of page

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.

Moving a simple layer away from a motion guide layer.

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.

Selecting the first keyframe of the visible path layer.

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.

Selecting a shade of gray for the stroke color.

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.

Hiding all the layers except one.

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.

Closing the outline with the Selection tool.

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!

Download the zipped source FLA file for this lesson.

Download the source .FLA for the example with more planets.

Be Sociable, Share!

Comments

Submit a comment

  • Edin Dec 6, 2008 at 8:05 pm

    Excellent, excellent, excellent.
    Step by step, clearly, educationaly perfect.
    Once more: Excellent!
    Give us more and more tuts like that, pls.

  • Edin Dec 9, 2008 at 5:28 am

    Give us the same tutorial for Flash cs4, pls. It is much different and I’m confused. Thanks!

  • hussain ghanchi Feb 12, 2009 at 2:46 am

    this is a complete & detail tutoria i seen in this website

    great GOD bless u

  • cleverbrain Mar 7, 2009 at 5:24 pm

    It’s wonderfull!!

  • Max Apr 7, 2009 at 9:55 pm

    Great! Exactly what I was looking for! Thanks

  • great May 17, 2009 at 2:49 pm

    How do you make the moon go around the earth and go in a revolution?

  • abdo Jun 5, 2009 at 6:16 am

    its so amazig u r perfect !

  • Alim Mahdi Aug 26, 2009 at 12:46 pm

    Wow… a wonderfull animation and tutorial… i like it

  • Jan Nov 11, 2009 at 9:06 pm

    really good tutorial
    I’m new to Flash but I couldfollow quite easy.
    thanks

  • Cheryl Nov 13, 2009 at 5:10 am

    I guess I am just stupid. I have tried twice and can’t get anything to work properly. :(
    Maybe you really can’t teach and OLD dog new tricks. But I will try again tomorrow.
    Thank you for your tutorial.

  • Gaurav Gupta Nov 16, 2009 at 10:10 am

    really an awsom tutorial 4 beginners … thanxx a lott..

  • vanmiganathan Jan 28, 2010 at 12:15 pm

    good to see the animation made in this page. very good

  • Bill Feb 3, 2010 at 9:11 pm

    Wow! This was awesome. Great job explaining the small details. You’re a great teacher! We are ready for more of these keep it up.

  • amina Feb 8, 2010 at 3:16 pm

    this is really a good tutorial..but if you could please help me how to control the speed of rotating planets…

  • Afeefa Feb 28, 2010 at 6:56 pm

    this assignment is exceelent superve

  • Reham Hobus Mar 27, 2010 at 3:36 am

    This is exactly what I am looking for, THANK YOU, you made my life easy, and open my eyes for lots of other thing I can do. THANK YOU again… GREAT JOB.

    Can I control the speed of the rotation of (planet Venus) either faster and/or slower in ActionScript 3. I’ll be most thankfull for you if you tell me the command.

    Thank you, thank you, and thank you…..

    Reham

  • tycheona Apr 7, 2010 at 3:47 pm

    this is so cool

  • joe Jul 7, 2010 at 6:06 am

    ya its really very nice , i am new to this though its clear

  • Red Aug 19, 2010 at 8:09 pm

    Is there a way to make the planets “clickable” and have drop down information?

  • John Oct 4, 2010 at 1:11 pm

    im confused -.- i can only put 1 Sun and Rotating Venus thats all i dunno whats next Q.Q

  • davide scalzo Oct 19, 2010 at 10:16 pm

    thanks very useful tutorial

  • kent Nov 21, 2010 at 11:07 am

    nice very helpfull

  • Samithree Nov 28, 2010 at 1:28 pm

    Wow…. Great work.. Very helpfull

  • lose weight Dec 3, 2010 at 4:48 am

    Thanks mate. Nice submissions you got here. Got some extra websites to direct to with a bit more information?

  • Meenu Jan 21, 2011 at 2:33 pm

    Good but very lengthy process

  • krishna Mar 29, 2011 at 5:57 pm

    very very usefull tutorial for students keep it up i really thankfull to you for this tutorial thankyou.

  • aditya Apr 28, 2011 at 1:27 pm

    i can’t download the file :(

  • Simon Booton-Mander Aug 19, 2011 at 10:26 am

    Hi,
    it was all going well until the bit where you drag the Venus layer over the Layer2, it did not change the way it should. I am using Flash CS5.5, could this make the difference please?

  • [...] Make a Solar system animation with a planet that is rotating … Oct 11, 2008 … The Library in Flash stores all the images, …. Making a circular guided motion tween animation … [...]

  • gayatri Sep 14, 2011 at 6:12 am

    ley bhari

  • sanjana ravindran Sep 14, 2011 at 6:14 am

    mast hai boss..!!!

  • Monami Saikia Oct 22, 2011 at 12:28 pm

    Best tutorial…i like it !!!

  • mallikarjun Oct 30, 2011 at 6:38 am

    very fine

  • Mohd Javed Nov 1, 2011 at 8:19 am

    This is very helpful i am very very thanks for this tutorial

  • Shama Nov 3, 2011 at 6:46 am

    Hi,

    Its a great tutorial about motion guide.Just have one doubt like I want to know how to make the revolution of planets very slow using motion guide.

  • Divya Nov 27, 2011 at 4:51 pm

    hey!!
    Thnx for the tutorial but my symbol takes the shortest path even after breaking the oval. plzz can you help??

  • bhavin savaliya Jan 28, 2012 at 12:10 pm

    tnx u so much

  • Vinita May 18, 2012 at 11:42 am

    hey the tut is cool… but i m hvng prob while saving it…wht m i suppose to do if i want to use it in a ppt?

  • Varun Biwanl Sep 18, 2012 at 3:58 am

    its good for the learners but we have to put some prespective view which is more better tuts for them. Lke, it should also have masking with d effect showing planets going back to the sun….
    if u have sumthin like this plz send me too.

  • Arun Oct 10, 2012 at 4:59 pm

    Excellent tutorial….

Leave a comment