Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this easy tutorial made for Flash MX, Flash MX 2004 or Flash 8, you will learn to create a shiny animated effect which will appear once a user rolls his mouse over a button. Many visitors to my site have asked me to explain how to make this kind of effect once they have seen it in my tutorial in which I explain how to make a tabbed website menu in Flash. To all of you who have requested this - here it is! In particular, you will see how to:
You can see an example of what you are going to learn in this detailed lesson below. Move your mouse over the button to see the glittery shining rollover effect!
1. Open a new Flash document.
2. Select the Rectangle tool (R).
3. In the Properties panel, select the following options for the Rectangle tool:
4. Go back to the Tools panel, to tweak some more options for this tool. In the Options portion of this panel, do the following:
5. Click on the stage and start dragging your mouse. Make a rectangle similar to the one shown below.
Ok, but what if you wish to have specific dimensions for your button? This is really easy to accomplish.
6. Using the Selection tool (V), double-click on the fill area of the rectangle - this way, you will select both the fill and the outline.
7. Go to the leftmost part of the Properties panel. You will find the input fields for the shape's dimensions there. They are marked as W for width and H for height. Enter 103 pixels for width and 37 pixels for height.
Save your document at this point. Let me show you now how to make the button look more realistic - you will add depth to it by creating a nice glossy effect.
8. Select the shape on the stage again - both the fill and the outline! This is necessary, because once you have used the fields in the Properties panel, the focus isn't on your object any more. That's why you have to select it again.
9. Select Modify > Convert to Symbol (shortcut: F8) to make a movie clip out of your shape. In the dialog that appears, do the following:
Your newly made movie clip has a thin blue line around itself, and also a little white circle in the middle, with a cross inside it - this is the movie clip's registration point. It is around that point that all the manipulations are made. For example, if you wish to move your movie clip around with ActionScript, the registration point is the reference point for determining and setting the movie clip's position on the stage.
Let me teach you know how you can easily give your button a more plastic, glossy look.
10. Double-click on the movie clip on stage with the Selection tool (V).
You should now be inside the movie clip. How can you know that you are inside the movie clip - working on its timeline and not the main one? Well, just look above the stage and the layers - all the pertinent information is nicely displayed there.
11. Call the first layer base shape.
12. Make a new layer and call it gloss.
13. With the Selection tool (V), click once on the fill to select it. Do not click twice, because you don't need to select the outline now. Just the fill!
14. Press Ctrl+C to copy the selection.
15. Lock the base shape layer.
16. Click on the gloss layer's first frame to select it for working.
17. Press Ctrl+Shift+V to paste in place here the shape you copied three steps before. Pasting an object in place in Flash places it exactly on the same position where the original was. This is very useful - thanks to this simple but great feature, you don't have to adjust an object's position manually.
18. Don't click anywhere now, so that the just pasted shape stays selected. Select the Free Transform Tool (Q). Handles will appear around the selected shape. I have zoomed in on my shape to be able to work more easily and be more precise.
19. Hold down Alt, bring your mouse over a corner of the shape (any one will do). A small diagonal arrow will appear. Click and start dragging. You will now modify your shape symetrically thanks to the Alt key.
When you have made the shape just a little bit smaller than the one inside the base shape layer, just release your mouse. And leave the shape still selected.
20. Go to the Color Mixer panel by selecting Window > Color Mixer. Make sure that the fill option is selected. If it isn't, just click on the little bucket icon (see 1 in the image below). Then select Linear as type of gradient (2).
21. Still in the Color Mixer panel, go to its lower part and there you will find the gradient color strip. For a nice glossy effect, you need at least three colors. To add a third color, just bring your cursor between the two existing colors and a plus sign will appear (see the animation in the image below), meaning that Flash is ready to add another colored square here. Click to do just that.
22. You must adjust the placement, color and transparency of each small square. Just clicking on a square brings up its alpha property (transparency) and hexadecimal color code in the area above the color strip. The image shows the colors and alphas you should assign to each square:
So, all the three colors which compose your linear gradient are pure white (#FFFFFF), and their alphas are as follows, from left to right: 90%, 14% and 0%.
Once you've got that right, place the squares so that they are positioned as the image clearly shows. To move a color square, click on it and start dragging it to the left or right. Just do not drag it down, because you will delete it in this way.
23. Using the Selection tool (V), click anywhere outside the button to unselect it. Do this once, because if you double-click on an empty area of the stage, you will return to the main timeline. And you don't want to do that now, because there is still work to do inside the movie clip. Your button should look close to this one:
That's fine, but the linear gradient (gloss) is placed horizontally, instead of vertically. Correcting this is easy, just follow my next step.
24. Select the Gradient Transform tool (F). Click on the gradient shape to select it with this tool. Some interesting handles will appear :)
25. Move your mouse over the little white circle (see image on the left below) and the cursor will turn into four arrows that are forming a circle. Fine - that means that your gradient is ready to be rotated. Do just that - click and start dragging your mouse clockwise. Stop dragging once you've made a 90 degree turn (see image on right) and release the mouse button. If during the rotation the gradient won't snap to a 90°angle, just check if the Snap to Objects option is turned on (the little magnet icon on the bottom part of the Tool panel).
26. You've got your gradient where you want it, but it is too wide. To adjust its width (or height, as you like it), place your mouse over the little white rectangle that is placed in the middle of the blue line (see first picture on left below). Click and start dragging it upwards. Once you have reached the lower border of the button, you can release the mouse (see middle picture below).
As you can see, the gloss is nicely visible now. But I am personally not satisifed with its position - there is too much of the blue area being visible on the top part of the button. If you have the same result and are not satisfied with it, just use the Selection tool (V) to select the gradient and move it upwards by pressing the up arrow key on your keyboard.
To see how to add the effect this tutorial is about, please proceed to the next page.
