Flash Explained

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.

Top of page

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

Comments

Submit a comment