Thursday, 30 October 2008

Shiny text effect

This Flash tutorial will teach you how to create a shiny text effect using layer masks. This effect is very common and can be seen on many websites and in flash games. For more information on layer masks checkout the layer mask tutorial.

**UPDATE: A few people are having problems with step 6, so i have rewritten it and added images for that step.

Shiny text effect

Step 1

Open a new flash document with an appropriate stage size.
Select the text tool (t) and type your message on the stage. I used impact font type, but you can use whatever font type you wish.

Step 2

On the timeline insert a new layer called “shiny effect” and drag it below layer 1 like below:

Step 3

Select the rectangle tool and drag a large rectangle to the right of your message. Make sure your rectangle is slightly wider and longer than your message.

Step 4

Using the selection tool select your rectangle and click the colour panel at the right of the then the colour tab. Now change the type to linear and the slider should look like below:

**Make sure you have selected your rectangle or your change will not change on your rectangle.

Step 5

Select the gradient transform tool (F) and move the gradient, so it is at a slant like below:

Step 6

On the timeline select “layer 1” and select F6 to insert a key frame at frame 20.
Select the first frame on the “shiny effect layer" and move your rectangle created from step 3, so that the right side of the rectangle is directly on top of the right side of the text message like below:

Select the 15th frame on the "shiny effect layer" and insert a key frame (F6). This time move your rectangle, so that the left side of the rectangle is directly on top of the left side of the text message like below:

Select the 20th frame on the "shiny effect layer" and insert a frame (F5). And now right click anywhere in between the 1st and 15th frame and select Create Motion Tween.

On the timeline right click on layer 1 and select Mask and your timeline should look like below:

Step 7

Test your movie clip Ctrl + enter.

You should now have a shiny text effect. Feel free to contact me for any questions or comments.


matt 9 January 2009 08:20  

followed your instruction to the letter 3 times, however the text disappears after the shine effect has gone through it

iliketo 9 January 2009 11:00  


In step 6 make sure your “Layer 1” has 20 frames and the “shiny effect layer” has 20 frames.

I think you have more frames in the Shiny effect layer than in layer 1 thats why the text disappeared.

CSwan 2 February 2009 21:21  

I too had the same thing happen, but I solved it. I think the problem is that a step was left out. 3 layers in total are needed for this effect. I created a 3rd layer called it "bkgrd" & moved it directly underneath the "shiny effect" layer, keeping it nested in the "Layer 1" mask. I made a rectangle that was slightly larger than the text, filled it with black and voila. The effect worked!

Without the "bkgrd" layer the text disappears as the mask tweens beyond the text, rendering it invisible. Hope this helps, & btw, a shape tween is called for instead of a motion tween for the gradient rectangle.

iliketo 3 February 2009 03:39  

@Cswan Basically to make this effect work, you need to have more frames in the text layer than the shine layer. This means the text won't disappear as when the movieclip plays the shiny layer appears first followed by the text. I will upload a image of my timeline if it helps.

Jebin 20 February 2009 01:18  

Hey its really simple and nice

sun 13 March 2009 00:09  

i had followed but the text doesn't appears back of the effect

iliketo 13 March 2009 05:38  

@sun make sure you have selected static text.

Ibrahim nadir 5 September 2009 00:05  

i'm using macromedia flash mx. I've prob with coloring the box. The shiny effect is not the way i want. Is it because its not possible in flash mx version or i'm not able to find it? because i dont get the same options that u gave in the picture-that of coloring the rectangle. i just get a gradient that i cant edit.

iliketo 5 September 2009 04:08  

@Ibrahim nadir

I've created this tutorial in Flash 8,so i'm not sure if it will work in Flash MX.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP