Have you seen the Stanley Kubrick masterpiece movie, 2001: A Space Odyssey? Well, if you haven’t, you should consider viewing it. It’s a great piece of art.
Also, there’s an interesting character in this film: the AI computer HAL 9000. And it has a cool-looking eye. You’ll learn to make a similar graphic by using the great blending modes in Flash 8 pro, without having to start Photoshop or Fireworks.
You can see what you will create by looking at the flash example below.
Creating the beveled silver ring
1 Open a new Flash document.
2 Select the Oval tool (O). Go to the Colors section of the Tool panel.
To suppress the outline color for the oval tool, click on the little pencil icon (see 1 below), and then on the little middle icon in the bottom row (see 2 below).
The fill color isn't important, choose any you like, because you'll change it in a few steps to a linear graident.
3 Hold Shift, click and start dragging to draw a circle on stage. Make it any size you like.
4 Select the circle by clicking on it with the Selection tool (V).
5 Go to the bottom left corner of the Properties panel. In the W (width) and H (height) fields, enter 200 as value. Your circle will then be 200 pixels high and wide, which would be very hard to achieve manually, just by drawing.
Whenever you need precise dimensions for your objects in Flash, enter them manually.
6 While the circle is still selected, open up the Align panel (Window > Align).
First, turn on the "Align/Distribute to Stage" button (see 1 in the image below this paragraph). Then click the button for horizontal alignment (2), and then vertical (3).
Fine. Your circle is now perfectly centered on stage.
7 Open the Color mixer panel (Window > Color Mixer). In the Type menu (top right corner of this panel), select Linear.
Click on the small square on the left side of the gradient stripe found on the bottom of this panel, and select pure white (#FFFFFF) as color. You can enter this value in the little field above the gradient stripe.
Click on the right square, and enter a shade of gray here: #B3B3B3.
8 Select the Paint bucket tool (K). While holding Shift, click on the left side of the circle and start dragging your mouse to the right, to create a perfectly horizontal gradient.
9 Select the Oval tool (O) again. Block the outline color once more and choose a solid color for the fill (select a color that will be in good contrast with the existing gradient circle).
Draw a circle that is situated away from the first one.
10 Select the circle. Again, go to the Properties panel and make the dimensions of this circle 190 by 190 pixels.
11 With the aid of the Align panel, center the circle vertically on stage.
12 Now, center it horizontally, again by using the Align panel. It should sit precisely in the center, and on top, of the first circle.
13 Click anywhere outside the circles, on a blank portion of the stage, to unselect everything.
14 Click on the inner (red) circle and press Delete. If you have followed everything exactly as I said up to this point, you should have a fine gradient ring in the center of the stage.
15 Select the ring. You can easily do it by pressing Ctrl+A (Cmd+A on a Mac). This selects everything on the stage, but since there is only the ring currently present, only it will be selected.
16 Select Modify > Convert to Symbol. In the window that appears, select Movie clip as type, call it ring and click OK.
17 Go to the Properties panel, click the Filters tab. Then click the Add filter button (the little bluish plus sign).
18 Select the Bevel option. Input the following options: Blur X and Blur Y can stay at 5, Strength at 100%. Put Quality to medium. Shadow should stay black, and highlight white. Angle can be 45. Put Distance at the value of 8. Leave the Knockout option unchecked, and Type set to inner.
Your result should look like the one on the image below.
Making the holder movie clip
You will now convert this movie clip to a new one. Why, you may wonder?
Because when you do it again, you are creating a new movie clip, which has the ring movie clip inside it. In that way, you can apply different filters and blending effects to other graphic elements.
For example, if you filled the ring with a solid color and then put a shine over it, the bevel effect that you applied to the ring would be applied to all the other elements also.
So, if you wanted each part to have its own effect, each part should be made into a separate movie clip. And in turn, each of these different parts would be contained into the main movie clip. This is made so that you can move it around and place it on the stage wherever you like, resize it, etc, instead of moving around each part every time you wanted to make a change to your movie's layout.
19 So, with the ring movie clip still selected, press F8 to make a new movie clip. Call it eye and click OK.
20 Double-click this movie clip on stage to enter inside it. Above the timeline, you will see the indication that you are inside the eye movie clip.
You have to double-click click on the ring graphic. Although the movie clip is delineated by the blue square line, if you double-click inside this zone, but on an empty place, where there are no graphic elements, you won't enter inside it.
21 Call the first layer ring.
22 Make a new layer and call it red fill. Drag this layer under the ring layer.
23 Select the ring movie clip by clicking on it once. Copy it (Ctrl+C on a PC, Cmd+C on a Mac).
Lock the ring layer and hide it by clicking on the small dot beneath the eye icon.
Click on the red fill layer's keyframe to select it.
24 Select Edit > Paste in Place to put the copy of the ring you copied exactly on the same position on the stage as teh original.
25 Select Modify > Break Apart to turn the movie clip into a basic vector shape.
26 Click anywhere on stage to unselect the ring shape. Select the Paint Bucket tool (K).
Choose any solid color in good contrast with the ring and click inside it to fill this internal area with color.
27 Click on the ring and hit Delete. You should be left only with the circle.
28 Go to the Color mixer panel (Window > Color Mixer). Select Radial as fill type. Click on the small square on the left and make its color pure red - #FF0000. Set the color of the right little square to #650101 (a dark red hue).
29 Click the circle on the stage to select it. Back in the Color Mixer panel, select Solid fill and than Radial fill type. Ypur circle will be nicely filled with the radial fill now.
30 Lock this (red fill) layer. Make the ring layer visible again.
Creating the shiny glass/plastic effect
31 Make a new layer between the two existing ones and call it white shine.
32 Draw a borderless circle here, the same size of the previous one (190 by 190 pixels). You can either copy it from the red fill layer or draw a new one and manually adjust its width and height.
33 Unselect this circle by clicking anywhere outside it. Go again to the Color Mixer panel.
Select Linear as fill type. Make both squares white, but with different transparency factors. Make the one on the left have its alpha set to 67%, and the other one to 0%.
34 Select the Paint Bucket tool (K). Hold Shift, click on the top of the circle and start dragging. Release the mouse when you have reached a point just a little bit above from the circle center.
35 With the circle still selected, choose the Free Transform tool (Q). Turn off the Snap to objects option - the little magnet icon at the bottom of the Tools panel.
36 Click on the upper middle handle of the circle and start dragging your mouse downwards. Squash your circle just a little bit. If you do it like that, it will look more natural - the shine beginning just a little below the ring's top.
37 Next, hold down Alt, click on the circle's middle right handle and start dragging your mouse inwards, towards the circle's center.
38 Choose the Selection tool (V) and press F8 to convert your oval shape into a movie clip. Call it shine and click OK.
You can now play around with the blending effects to achieve different kinds of looks for your shiny orb. The first example on the left in the image below is the shine with no effects applied. It looks crisp and clean, but maybe not so realistic. It all depends what you want to achieve.
If you click the Filters tab (with the shine movie clip still selected), you can click on the little plus icon and add a blur filter. Set its quality to high. You will get a similar result to the second orb from the left.
I also applied the glow blending effect, set to high quality (the third orb), and then selected white as the color of the glow (the last example).
Some of these orbs look like they're made of glass, while the third one looks more like plastic. Choose whatever you like and need for your flash site.
The important thing to remember is that you turned this shine shape into a movie clip so that you can control its blending options independently from the other graphical elements.
Making the yellow gradient light
39 Lock the current layer. Make a new layer between the red fill and white shine layer.
You are making this new layer below the white shine layer so that the shining effect will overlap the graphic that you are going to draw. This is how you make it look more realistic. In reality, the shine of a metallic/glass/plastic object is always reflected from its surface. So anything beneath the glass or some other transparent material can't be above the shine.
40 Select the Oval tool (O) and drew a borderless circle filled with a solid color. Make its dimensions about 80 by 80 pixels.
41 Select the circle. In the Color Mixer panel, select radial as type of fill. Arrange the colors for the gradient in the following manner:
Put the alpha (transparency) factor at 100% for all colors, except for the rightmost one, which should be set to 0%. To add new colors, simply place your mouse cursor between the existing little squares. You will see a little plus sign appear near your cursor arrow. Then click and a new little colored square will appear.
And that's it! You can go back to the main scene if you wish (by clicking the "Scene 1" link above the timeline),
and add a shadow effect to the whole eye movie clip.
You can even animate any effect you like. You just have to make a simple motion tween animation with any of the movie clips inside the eye main clip. That's simple to do, really. You can download the second source file for this kind of example at the bottom of this page.
Add a dark, deep droning sound to it and you have a nice piece of design for your website.
Some concluding words on Flash 8 filter effects
You have just seen how easy it is to implement the blending effects Flash 8 has to offer. The advantages of using them, besides creating great designs, is the small filesize they generate. The shiny orb you made with this tutorial has a filesize smaller than 1 KB! It is around 630 bytes and that's great!
Also, you don't need Photoshop or Fireworks to create these and other kinds of effects. You sure need such programs when you want to put a great photo or a complicated photographiy composition into your Flash web site. But interface elements like shiny buttons, menu bars and so on can be made directly within Flash, which wasn't the case with its previous versions.
Explore and experiment with these possibilites and drop me a mail, I would love to see what wonderful designs you will come up with! 🙂
Download the zipped source FLA file for this lesson.
Download the source for the animated example.
What a fantastic tutorial! Many Thanks!
You’re welcome Scott 🙂
Great tutorial, giving the minutest details to do the job…
I was really looking for a tutorial that would help me making some glossy buttons for my website.. Thanx a lot Luka
Glad to hear Puneet. Spread the word about the website! Thanks!
absolutely amazing……(no words)
Thank you for sharing this, you are, and have been a great help in building my bandsite that I can not thank you enough.
awsome tutorial…
Great tutorial. Thank you.
This is a great tutorial!!!! keep up great work!!!
Thanks.. This phrase was something I’m looking for
great job keep up the good work thanks
Hi there this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get guidance from someone with experience. Any help would be enormously appreciated!