In this tutorial you will be converting your text to give it a glass-like effect, using filters in Flash. This technique also works on vector graphics. We will achieve it with a fairly simple method of overlaying multiple layers with different effects.

Final Result Preview

Let's take a look at the final result we will be working towards. This is a swf file and the text below is selectable, so go ahead, select the glass text to see a glass-like highlight:

Step 1: Create Your Text Field

Open your version of Flash and open a new Flash file. ActionScript version does not matter for this tutorial, as there is no code. In your file, put a text field onto the stage. To do so, click the text button (T) on Tools menu and drag a rectangle on stage as shown in the image below:

Step 2: Select a Large and Bold Font

Once drawn, you can enter your choice of text in the field and set its properties accordingly. The glass effect is more prominent on larger and bolder fonts so I have chosen Elephant here, but you may chose any font you like. Click the Selectable button to make the text selectable in final SWF. The color of the font does not matter here

Step 3: Add Some Vector Graphics

Optionally, you may want to see how the effect works on vector graphics. So I will just draw a small graphic using basic Flash drawing tool. Note that glass effect will not take into account the outlines or colors, so plain old graphics in a single color are enough for the moment. Once done with Steps 1 and 2, you will have something like this on your stage:

You may import vector graphics to Flash surface as well but take note that color differences are not detected by this effect.

Step 4: Convert Everything to a Symbol

Now we'll create our first symbol. Select your text and all vector graphics (you can do so by dragging a rectangle around everything). With all things selected, right-click and click on "Convert to Symbol" as shown below:

Name your symbol as anything you like and set its type to Movie Clip; I have named it as "gtext". So when you click on window and open the library window, you can view an item named gtext in there. From here on, I will refer to this symbol as "gtext". This will be a good point to save your work.

Step 5: Convert to Symbol Again

Once again, right-click the newly created gtext symbol and convert to symbol, this time enter the name as "glass". We do this in order to create another container movie.

Now we will have a glass symbol, within which we have a gtext symbol. Both these symbols are visible in the library.

Now double-click the glass symbol to view it in edit mode. All the remaining steps will be performed within this glass symbol.

Step 6: Add a Layer

Double-click the blue square icon next to glass symbol in library panel (Window > Library) . This will open the glass symbol in edit mode. We have one layer named Layer 1 in this window. Add a new layer by clicking the New Layer button in the lower left corner of the timeline window. Click and hold the mouse button over the new layer to start dragging it and drag this new layer to below our current Layer 1. Rename the new layer to "background" by double-clicking the layer name.

Step 7: Add a Colored Background

You may want to hide or lock Layer 1 to be able to edit the background layer easily. Click the dot below eye / lock icon in timeline to do so. Now select the background layer in the timeline and click the Rectangle tool from the tools panel; set the outline to null and color to blue in the Properties panel as shown in the image below. I have selected corner rounding as well to make my rectangle look better.

TIP: You may also use an image for the background here, instead of a plain fill.

Step 8: Create Three More Layers

While editing the glass symbol, in the timeline panel, click the New Layer button three times to create three new layers. You now have five layers: the background layer, Layer 1 and three new layers. Rename Layer 1 to bevel2 and the other new layers to shade, outline, bevel1, and bevel2 as shown below (you can rename the layers by double-clicking their names).

Step 9: Place Your Symbol on a New Layer

From the Properties panel, note the x and y coordinates of gtext already placed on stage which is now on bevel2 layer at x=75 and y=10 for my drawing.

Next lock all the layers except the one you are working on (by clicking the dot under the lock in timeline window) to make sure that you do not move things around by accident. You may hide a few layers as well by clicking the dot below the eye in timeline window. Select bevel2 layer, open the library panel, and drag gtext onto stage.

Step 10: Set Coordinates of Your Symbol

Once placed on stage, click on the new gtext symbol to select it and set its x and y position in Properties panel > position tab to be exactly the same as in the previous layer, which was at x=75 and y=10 for my movie.

Once done with positioning, lock the current layer so it's not accidentally changed.

Step 11: Place a Copy on all 4 Layers

Repeat the above two steps (Step 6 and Step 7) for the remaining two layers so at the end, each of the four layers will have the same item placed at the same coordinates. The image below shows that by specifying the coordinates exactly in the properties box, we have no overlapping edges.

Step 12: Apply Bevel Filter to Shade Layer

Lock and hide all layers (by clicking the dots below the eye and the lock in timeline) and unlock and show only the shade layer. Select the gtext symbol on this layer and open the Properties panel. In the properties, expand the "filters" tab if its minimized. At the bottom left corner, there is a an Add Filter button; click this and select the Bevel filter.

Step 13: Adjust Bevel Filter Settings

Adjust the bevel settings to Blur = 20px , Strength = 80%, Angle = 90°, Distance = 10px, and check the box against Knockout. If you want to apply the adjustment on a smaller scale, with smaller text, you can change Blur and distance Properties in proportion, but generally, Blur below 10px will not be suitable.

Step 14: Outline Layer Apply Glow Filter

Lock and hide all other layers and unlock and show only the outline layer. Select the gtext symbol on this layer, open the Filters tab in Properties panel and add a Glow filter. Set the glow filter properties to Blur = 2px, Strength = 50%; set the Color to white and check the Inner and Knockout options. This is shown in the image below and you can see the resulting outline as well.

Step 15: bevel1 Layer Apply Bevel Filter

Lock and hide all other layers and unlock and show only the outline layer. Select the gtext symbol on this layer, open the Filters tab in the Properties panel and add another Bevel filter. Set the bevel filter properties to Blur = 2px, Angle to 69°, Distance to 1px, and check the Knockout option. This is demonstrated in the image below.

Step 16: bevel2 Layer Apply Bevel Filter

Lock and hide all other layers and unlock and show only the outline layer. Select the gtext symbol on this layer, open the Filters tab in the Properties panel and add one more Bevel filter. Set the bevel filter properties to Blur = 6px, Strength=45%, Angle to 45°, Distance to 2px and once more check the Knockout option. This is shown in the image below.

Step 17: Shade Layer Add Shadow

Select the gtext symbol instance in shade layer, lock all other layers so they are not disturbed. In the Properties panel, select the Filters tab and add a Shadow filter in addition to the existing bevel. Set Blur to 0px, Strength to 150%, Angle to any value depending on where you want the sun and distance to be (try between 10px and 20px). The settings and end result are visible in the image below.

Step 18: Testing Your First Version

Reveal all the layers and test your movie in Flash, the end result will be something similar to the movie shown below.

Step 19: Tweaking Your gtext

The movie doesn't look too impressive with just that text. Let's change the text a bit; go to Window > Library and double-click the icon next to the gtext symbol to edit it in View pane. Now it's up to you to modify the items within this symbol. For example, you can add new text fields with different font sizes, add more graphics or animations. I have done a bit of playing with the gtext and added a few things including different fonts, rectangles, animated graphic with changing shape, a fat dotted line and a few graphics with alpha value at 50%. Here is what I have on the drawing board within gtext symbol.

The end result can be seen by exporting the SWF:

Step 20: Changing Reflection Amount

We can change the amount of visible reflection on the glass as we desire. Unlock the shade layer and lock all other layers. Select the gtext on this layer and click the "Color Effect" tab in the Properties panel. Select Brightness from the dropdown menu and change the amount to around -30; this will reduce the amount of reflection from the glass surface. The following image shows the before and after effect of doing so:

Step 21: Changing the Reflection Color

Ah, but sunlight is yellow, not white. We can change the reflection light's color by editing the filter settings for the shade layer. Undo the brightness change from the previous step by changing the style in Color Effect back to none. Keep the gtext on shade layer selected as in that step, then select the Filter tab, modify the Highlight color of the bevel filter to yellow and set the Alpha to 60%.

Step 22: Changing the Color of Glass

To change the color of the glass itself, start by once again selecting the Bevel filter in the shade layer as in previous step. This time instead of changing the Highlight, modify the Shadow property to select your color. For the best color effect, match the Highlight and Shadow colors closely with a good shade variation: with a yellow highlight I can choose between any shade of yellow, orange, green or even red without making my glass look unrealistic. Once again set the Alpha value as in the previous step to something close to 50% according to your color. I have chosen 50% red here.

TIP: you may also want to change the shadow color and background to match these settings.

Conclusion

So we now have two symbols in our library. One is the glass symbol and other is the gtext symbol. Glass symbol can be edited to modify the glass properties while the gtext symbol can be modified to change the content to be glassified. You can drag and drop the glass symbol in any Flash animation of your own choice to reuse this effect and change the contents of the gtext accordingly. In short you have a nice and handy glassifier component at hand. I would recommend you to play around with the settings and turn off layers or add new layers to see how you can further customize this glass.

Why not try your hand at making a JSFL script that can automatically add the Glassify effect to any of your vector symbols with a single click?