My Flash Resource – New Ideas and News for Applying Flash to Complex Gaming Apps

Latest News and Developments

April 17, 2008

Glowing Text Effect

by @ 2:32 pm. Filed under Flash Tutorials

In this Flash tutorial you will learn how to make text glow (this effect will also work for anything drawn in Flash). The glowing edges around the text will ease in and ease out in this animations. Topics include: soften fill edges, alpha control, and basic tweening. No actionscript involved and source file is included.

The source file for this tutorial is here.

This Flash tutorial is presented in a step-by-step format. Feel free to use your own settings when it comes to background and text colour. I will only show what I used.

1. Open a new Flash document (shortcut key: CTRL+N). Name you first layer ‘text’.

2. Change the background colour to black.

3. Type in some text, use a fairly large font (I used 38px), and change the colour to white.

4. Break apart the text. Do this by selecting the text, right-click and select Break Apart… (shortcut key: CTRL+B). Do this twice until the text has turned into pixels.

5. Create a new layer below the current layer and name it ‘Glowing Text’. Copy your text and paste it in place on the new layer. Paste in place means that you paste it in the exact same spot as the one you copied. The shortcut key for this is CTRL+SHIFT+V.

6. Lock the ‘text’ layer and select the text in the ‘Glowing Text’ layer.

Flash Tutorial

7. With the text selected, goto Modify>Shape>Soften Fill Edges… Use the following settings: Distance: 10px, Number of Steps: 15, Direction: Expand.

Flash Tutorial

8. Now you should be able to see the glowing part around the text. Select all of the text again and convert it to a movieclip symbol. Goto Modify>Convert to Symbol… (shortcut key: F8).

9. Insert keyframes in the following places in the ‘Glowing Text’ layer: frame 10, frame 15, and frame 25. Use shortcut key F6 to insert these keyframes.

10. Insert the following alpha levels for your movieclip into the corresponding keyframes of the ‘Glowing Text’ layer: frame 1 (alpha=0%); frame 10 (alpha=65%); frame 15 (alpha=65%); frame 25 (alpha=0%). The alpha proporties is located in the properties panel (also the movieclip must be selected).

Flash tutorial

11. Insert motion tweens between the frame 1 and 10 and between 15 and 25. To insert a motion tween click anywhere between the two frames that you want the tween and select ‘Motion Tween’ in the Properties panel at the bottom of the screen.

12. Insert a frame on the ‘text’ layer at frame 25. Right-click on frame 25 and select New Frame. Your timeline should look like the following:

Flash Tutorial

Run your movie and check out the results and you should have glowing text. This effect can be used on anything drawn in Flash, just use the soften edges technique and this method. It could make a good button rollover effect if you set it up properly. Anyways I hope you enjoyed this My Flash Resource tutorial.

Comments are closed.

My Flash Resource - A continually growing collection of tutorials, thoughts and interests of a Flash Animator and/or Developer.

categories:

other:

New Feedburner Feed!


Feel free to syndicate.

Learning Material

Flash Resources:


Listed on BlogShares
  • Resources