Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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.
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.
19. 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.
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 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.
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 Objects (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?
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!
Download the zipped source FLA file for this lesson.
Download the source .FLA for the example with more planets.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
