How to make a polished shiny orb in Flash using the filters and blend modes — part 2

Creating the inner bevel effect

21. Make a new layer and call it inner bevel.

22. Following the exact same procedure as you did on the previous page in steps 9 through 12, now copy the inner glow movie clip from the inner glow layer and lock it. Paste in place the movie clip in the inner bevel layer and break it apart. You should be left with a plain white vector circle in this layer.

23. Select the circle and go over to the Color Mixer panel. Change the fill color's Alpha factor to 47%.

24. Convert the white circle into a movie clip symbol (hit F8) and call it inner bevel, then click OK.

25. Once the movie clip is made and selected, click the Filters tab in the Property inspector. Select these options:

1. Select the Bevel filter.
2. Set the Blur X and Y options to 31.
3. Set the Strength option to 600%.
4. Select High from the Quality menu.
5. Set the Angle to 48.
6. Set the Distance to 10.
7. Select Inner as Type of bevel.
8. Leave the Shadow and Highlight options at their default values (which are black and white, respectively).
9. Leave the Knockout option unchecked.

Don't be puzzled by the look of the Bevel filter options in the screenshot below. I have just pushed all the options more closely together in Photoshop to make the image smaller, thus saving on page real estate and making the file size smaller :-).

The result of applying the bevel filter is shown below.

It looks cool will all those different shades and stark contrasts, doesn't it? Still, it needs to have its blending mode changed for the content below it to show through properly.

26. Click the Properties tab in Property inspector and go over to the Blend menu. Select the Multiply option. You can leave the transparency (Alpha) setting for this movie clip alone, meaning that the movie clip will be completely opaque. The Multiply blending effect will be enough.

And here's how your orb should appear:

The orb has a real 3D appearance now. All that remains to be done is to add a little shine to it, so that the effect is complete.

Top of page

Creating the shining effect

27. Lock the inner bevel layer and make a new one above it. Call it shine.

28. There will be no copy-paste-in-place operation made here. You will just draw a circle with a specific type of fill. Select the Oval tool (O). Draw a 50 by 50 pixel borderless circle (the stroke color should have stayed blocked out from before). I have drawn it over the blue area seen from the layers beneath it, just to be able to work more easily, since a fill with various degrees of transparency will be applied to it.

29. Select the circle and go over to the Color Mixer panel. Make these selections:

1. Select Radial in the Type menu.
2. Add a third color to the gradient by clicking anywhere between the two squares sitauted immediately below the gradient bar. Then click and drag it to the left, so that it is positioned like you see it in the screenshot below.
3. Set all the three squares' colors to pure white (#FFFFFF).
4. Set the Alpha property of the two squares on the left to 100%.
5. Set the Alpha property of the square on the right to 0%.

And here's how the circle looks after the radial gradient fill was applied to it:

You had to add two completely opaque pure white squares to the gradient bar to be able to have a shine with an area that is completely white in the middle. Had that not been done so, you would have the transition from pure white to complete transparency right from the middle of the circle to its outer perimeter. And by having created a gradient like I showed you above, you have a more realistic shine for your orb.

30. Select the circle and convert it to a movie clip symbol. Call it shine.

31. Select the Free Transform tool (Q) and make the following modifications on the shine movie clip:

1. Click on either the left or right middle handle and start moving your mouse inwards, towards the circle's centre (see the first two images in the sequence below). Your movie clip containing the circle should now be about 36 pixels wide.
2. Bring your cursor near the movie clip's upper right handle.
3. Click and start rotating clockwise. Make a 45° rotation. You can accomplish that by holding Shift while rotating — the cursor will automatically snap at each 45°-interval.

32. Use the Selection tool (V) to move the shine movie clip over the orb's upper left part. It should be placed like this:

33. Select the shine movie clip and click the Filters tab in the Property inspector. Select these options:

1. Select the Glow filter.
2. Set the Blur X and Y options to 27.
3. Enter 380% for Strength.
4. Select High in the Quality menu.
5. The color should be set to white.
6. Leave the remaining options (Knockout and Inner glow) unchecked.

And here's the result...

The shining orb in all its glory! Now it looks really cool, doesn't it? And all this was made in just a few easy steps, with copying, pasting and applying different filters and blending modes. Flash rules — it makes creating cool visual effects so easy!

Top of page

Conclusion

The orb that you have just created can be made in many different ways — I encourage you to explore the possibilities that the filters and blending modes in Flash offer you. Play around with them and you will be surprised with the many cool visual effects that you can achieve!

For example, try adding a stroke to your orb and see how it changes its overall aspect — it will look more precisely defined with respect to the document's background. You could try choosing a different color for the whole document: make it black, for example. You will instantly notice that the orb has lost some of its depth, the 3D effect. One reason for this is the lack of the black shadow that will merge with the black background. For the orb to look as real as before the background color change took place, you would add a stroke or maybe apply a shadow with white set as its color, etc. Try different things and remember to have fun :-)!

Also, it is important to keep in mind that these effects must be applied differently when the objects you are applying them to undergo some sort of transformation. The change of size, to be more precise, scaling, is one such example: suppose that you want to make small buttons starting from the orb that you made in this tutorial. It sounds straightforward — all you have to make is scale down the orb using any of the available tools and commands that Flash has in store for you.

Well, reality is a little bit different: Just have a look at the two orbs that are shown below. The one on the right looks like a scaled-down version of the original orb, right? Wrong! The one on the left is a scaled down version of the big orb. I had to make drastical changes to the intensity of the filters applied to be able to obtain the same look for the small orb shown on the right. I had them turned down significantly to allow the colors to show through, so that the little orb could mimic the looks of its bigger counterpart.

There is one more point that you should keep in mind: if you scale an object with filters applied to it, it won't look as the original creation. On the other hand, if you scale the whole Flash document by way of HTML resizing, you will obtain the same effect. The Flash example that you can see below is the exact same document that you saw at the beginning of this tutorial, the only difference being its width and height attributes changed in the HTML code of this page.

This lesson's source file can be downloaded below. If you liked this tutorial, I encourage you to browse through many others that will show you how to design in Flash the cool way. See you in the next tutorial! :-)

Download the source .fla file

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!