Learning to use the blending filters in Flash 8 by making a
glassy orb inside a metal ring
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, 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.
NOTE 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! :)
You can download the source files for both the simple shiny glass orb and the
one with animated effects below.
