Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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:
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.
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.
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.
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.
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 object(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.
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.
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.
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.
Please proceed to the next page of this lesson.
