Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this detailed tutorial made for Flash 8, you will see how easy it is to create a preloading system that is gradually displaying an image as your site loads. I will show you the following:
You can see the example of what you will learn with this lesson below. This is only an animation showing what the preloader will look like at the end, it is not the actual preloader that you will be building in this tutorial.
1. Open a new Flash document.
2. Select Modify > Document. In the window that opens, find the Frame rate field and enter 30 inside it. This means that your SWF movie will have a speed of 30 fps, or frames per second. This is a good frame rate for any self-respecting Flash movie :). Actually, I will explain you later why this had to be done.
3. Download the image I made for this tutorial. Right-click on the image below, select "Save picture as..." and save it somewhere on your hard disk where you'll quickly find it.
4. Select File > Import > Import to Stage. In the Import dialog that appears, find the image you just saved a moment ago, select it and click Open. The image will appear on your document's stage.
5. Using the Selection tool (V), click on the image to select it.
6. Open the Align panel by selecting Window > Align. To nicely center the image on the stage, click the button for aligning objects in relation to the stage (see 1 below). Now click the button for horizontal centering (2) and after that the one for vertical centering (3).
7. Call the current layer bottle and lock it.
8. Create a new layer and call it rectangle mask.
In the section that follows, you will proceed to make a rectangle, convert it into a movie clip symbol and make a mask out of it. Onwards!
9. Select the Rectangle tool (R). You will draw a rectangle without the outline colors. To do this, go to the Colors area of the Tool panel. Click on the small pencil icon to select the Stroke color (see 1 in the image below). Next, click on the middle icon in the last row (2) to block the selected color. There. It is now possible to draw a rectangle without its surrounding frame.
10. Click somewhere above and to the left or right of the bottle image and start dragging your mouse. Make a small rectangle, regardless of the proportions. You will fix that soon.
11. Unlock the bottle layer.
12. With the Selection tool (V), click on the rectangle to select it. Now hold Shift and click on the bottle to select it too. As you can see, selecting multiple objects on different layers is perfectly possible.
13. You will need the Align panel again (shortcut key: Ctrl+K). Now, turn off the Align/Distribute to stage button. It is shown turned off in the image below (1).
Next, click the Match width and height button (2). This will instantly make the rectangle's dimensions the same as those of the image.
14. Lock the bottle layer again, because you won't be needing it anymore.
15. With the rectangle still selected, use the Align panel once more. You need to center the rectangle on the stage - do this like you did it with the image in step 6:
There! Everything is in its proper place now.
16. Your rectangle should still be selected. Select Modify > Convert to Symbol (shortcut key: F8). You will make a movie clip out of this shape, so be sure to select the right option (1).
Now, this is important for good functioning of your preloader: Make sure to select the middle rectangle in the bottom row of the Registration point schema (see 2 above). This is necessary in order to be able to stretch the rectangle movie clip from the bottom up, so that the image of the bottle "fills" properly.
REMEMBER Every visual transformation made to a movie clip via ActionScript is done in relation to its registration point. Don't get confused with the presence of the other point of rotation and transformation, which is used by the Free Transform Tool (Q), when you are rotating and transforming your symbols manually with it. The image below (with black background to see more clearly the difference between the two) shows both points: the point marked with number 1 is used by ActionScript - this is the registration point. The other one, marked with number 2, is the center of all rotations and transformations made with design tools. It is easy to see the difference: the first one has the shape of a small cross, while the second one is a hollow circle.
Lastly, name your new symbol: call it rectangle and click OK.
17. Now that you have created the movie clip that will act as a mask for the image below it, keep it selected and go to the Properties inspector below the stage. On its left side, you will find the Instance name field. Enter the name for your movie clip here: rectMask_mc.
NOTE Without the Instance name, you wouldn't be able to control this movie clip via ActionScript. The movie clip's Library name, rectangle, isn't important at all when programming with ActionScript. It exists to differentiate between the symbols in the Library.
18. Lock the rectangle mask layer. Right-click on it and select Mask from the menu that shows up. You should see the icons of the layers change: the rectangle mask layer has become the masking one, and the bottle layer beneath it the masked one.
Also, you should see the image of the bottle appear, meaning that the masking was done successfully. Please continue to the next page of this tutorial to finish the design part of the work and to start ActionScripting.
