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

In this easy lesson made for Flash 8 pro, I will teach you how to make a cool shiny orb using many of the available filters and blend modes that Flash 8 pro makes available. You will learn:

• How to combine various effects stacked one upon another on different layers,
• How to use the many Flash filters on movie clips,
• How to apply blend modes to movie clip symbols to achieve particular results,
• How to use radial gradient fills for background color and shiny light creation and much more!

Below is the live Flash example of the orb that you are going to make in this tutorial. You will also see some variations that can be applied to the orb once the basic form is finished.

NOTE: The SWF file containing the orb shown below has a size of only 503 bytes!!! Had this nice graphic been created in Photoshop, it would weigh at least 8 KB (in JPEG format) to look nice. Flash rules! Not that I don't like Photoshop, quite the contrary :-).

Creating the base movie clip symbol and the drop shadow effect

1. Open a new Flash document by selecting File > New > Flash document and clicking OK. The standard document size and speed will be just fine for this lesson.

2. Select the Oval tool (O). Block the Stroke color () to be able to draw a borderless circle and make sure that Object Drawing is switched off (). Select black for the Fill color. Now, draw a 200 by 200 pixel circle on the stage.

You can draw a circle with those exact measures by selecting it once it has been drawn and going over to the Property inspector below the scene. On its left side, you will find the W and H fields. Make sure that the padlock icon is locked (see it on the screenshot below), then type 200 in any one of the two fields and hit Enter — both dimensions will automatically be the same.

3. Select the circle with the Selection tool (V) and then choose Modify > Convert to Symbol. In the dialog that appears, do the following:

1. Select Movie clip as Type.
2. Name it orb.
3. Select the middle central little square as the Registration point (it is marked with red on the screenshot below).
4. Click OK.

This particular registration point is important, because it will enable you to easily align everything inside the orb movie clip. Instead of moving objects manually if the need arises, you will be able to do it in a snap via the Align panel.

4. Double-click on the newly made orb movie clip on the stage to enter inside it. If you take a look above the layers, you will see an indication that you are working inside the orb movie clip symbol now.

You will be working on the orb timeline until the end of this tutorial — everything will be created inside it.

5. Select the black vector circle once again and select Modify > Convert to Symbol. Leave the Type and Registration options as they are from the previous conversion, just enter the name drop shadow and click OK. You need to have a movie clip here because filters and blend modes can be applied to them only (and also text fields). You cannot apply any effects to a simple vector shape.

6. While the new movie clip is still selected, click the Filters tab in Property inspector.

7. To apply a filter to the movie clip, do the following:

1. Click the Add filter icon and select the Drop Shadow filter from the menu.
2. Put both Blur X and Y options to 10.
3. Put Strength to 74%.
4. Select High Quality.
5. Pick black for the color.
6. Angle should be set to 90.
7. Set the Distance to 5.
8. Switch on the Knockout option.

You should obtain the following result:

You could have also made a white circle and then obtain a similar result by turning the Knockout option off. I just wanted you to make the shadow like this, to show you one of the many ways in which a filter can be applies. Also, don't make the little cross inside the circle confuse you. It is just an indication that this is a movie clip symbol.

Top of page

Creating the blue radial gradient fill

8. Call this layer drop shadow. Make a new layer above it and call it radial blue fill.

9. Click once on the drop shadow movie clip that you have just created before to select it. Press Ctrl+C on your keyboard to copy it.

10. Lock the drop shadow layer and click on the first frame of the radial blue fill layer to select it.

11. Select Edit > Paste in place to paste the drop shadow movie clip on the same exact position as the one in the layer below it.

12. With the pasted movie clip selected, choose Modify > Break Apart. This action will break the movie clip down to the basic vector shape (the circle). You must do this, because you need to color this shape differently. If you had entered inside the pasted movie clip and changed the colors of the circle, the movie clip in the drop shadow layer would be affected too. This is the way Flash works: if you change the contents of a movie clip symbol, all the instances of it on the stage change accordingly.

13. Select the circle shape in the current layer and go to the Color Mixer panel (Window > Color Mixer). Make the following selections:

1. Click the paint bucket icon to have the fill color selected.
2. In the Type menu, select the Radial option.
3. Click on the inner color of the radial fill (the square on the left side of the gradient bar).
4. Enter its hexadecimal color code in the appropriate field: #01AED4.
5. Repeat steps 3 and 4 for the outer color (square on the right): select it and enter #0480B2 as its color code.

Your circle in the radial blue fill layer should look like this:

Top of page

Creating the inner glow effect

14. Create the third layer and call it inner glow.

15. Copy the gradient-filled circle that you created a moment ago, and lock the radial blue fill layer. Select the first frame of the inner glow layer and Paste in place the circle here (Edit > Paste in Place).

16. With the circle still selected, go over to the Tools panel and click the color square next to the paint bucket icon. Choose white for the fill. The circle will instantly become white.

17. Select Modify > Convert to Symbol (or hit F8) to convert the circle into a movie clip symbol. Call it inner glow and click OK.

18. Select the Filters tab in the Property inspector and apply the following to your movie clip:

1. Select the Glow filter.
2. Set the Blur X and Y options to 44.
3. Set the Strength to 210%.
4. Set the Quality to High.
5. Select black as color.
6. Turn on the Inner glow option.
7. The Knockout option should be left unchecked.

Here's how your glow effect should look like:

However, as you can see, the blue circle below it cannot be seen. But thanks to the great blending modes available in Flash 8 pro, you will be able to achieve visibility.

19. While the movie clip is still selected, click the Properties tab in the Property inspector.

20. Find the Blend menu on the right and select the Multiply option. Above it, in the Color menu, select the Alpha option and turn it down to 42%.

Here's the result:

The Multiply blend mode takes the base color — the one on the layer below — and multiplies it with the color of the movie clip which has the multiply blending applied to it, resulting in a darker color. I have also told you to lower the Alpha (transparency) property of the movie clip symbol down to 42% to reduce the dark effect a little bit. These two options combined will add more depth, and subsequently more realism to your orb.

Go over to the next page to see how to add a beveling effect and a shine to your orb and make it complete.