|
Glint Effect |
|
|
|
Written by Rawpulse
|
|
Wednesday, 12 October 2005 |
|
How to make a very professional looking glint effect through your text.
The purpose of this tutorial is to show you how to make a nice shine
effect move through your text. People have been confused with tutorials
on how to do this, so I thought I would show the technique I use when I
do it in Flash. I use Flash MX 2004, but most of the menus in the
previous versions were in similar places, so if you cannot find a tool
that I am referring to, look around, or better yet, get MX 2004. This
tutorial has been made so simple that anybody can do it, even those
using Flash for the first few times. My tutorial is split into
different stages to make it easier to digest. It's always better to
have had experience, but it's not entirely necessary.
Stage One
Create a new Flash Document. First of all, colour the background black from the Properties menu, as shown below:
Next, use the Text Tool (or press "A" as a hotkey). This tool is located on the left hand tool menu, and is just a large "A".
Type your text out, for this example I have written Xonnetwork
and used the font "Laserian" which is available for free download on a
number of free font sites.
After stage one your stage should look like this:
Stage Two
Create a new layer by selecting the Insert Layer icon which is at the bottom left of the image below.
This will create a layer and automatically calls it Layer 2. Rename
Layer 1 "Text" and rename Layer 2 "Effect", by right clicking and
selecting Properties in the window. Now click where it says Effect to begin work on your effect. Draw a rectangle with the Rectangle Tool
(R) and make sure that it is two times longer than your text, otherwise
the effect won't look good. Turn off the Stroke Colour, by selecting
the red line (see below). Ensure that this rectangle is also taller
than the text. When you first draw it, it will overlap the text, but
this is not something to worry about.
Then, make sure the rectangle is selected (by clicking it with the
selection tool - the black arrow). Next click the fill colour icon and
select the grey linear gradient, see below:
This is the tricky part. Select "Linear" from the drop down list on the
right hand side in the "Color Mixer". You will have to fiddle around
with the colour settings to get it to go from grey, then to white and
then back to the same grey. Eventually you should have it something
like this:
Next, and this is where people have got confused. You need to select the Fill Transform Tool.
This tool is located on the left hand side. Hover over each one until
you find it. Then click on the white part of the linear design, and
rotate it using the handles. Aim to get it to look something like this:
Stage Three
Switch your Effect and Text layers down by dragging them on your
timeline, so that Text is the top layer and Effect is at the bottom.
Then right click the Text layer and select Mask as shown below:
The text will now show with the slanted effect behind it looking rather
cool. You could leave it at that but we're about to animate it!
Stage Four
In stage four, first you need to unlock both layers by clicking the
little padlocks in your timeline. Do this to both layers, which will
allow you to see them. Next, right click your first frame on the layer
called Effect. Select "Create Motion Tween" from the menu, as seen here:
Next, move to frame 30 of your Effect layer, right click and select Insert Keyframe.
You don't have to do this at frame 30. I found it is probably the best
speed, but you can experiment with different frame numbers. When you
have inserted a keyframe in frame 30, select frame 30 of the Text layer
above, right click and select Insert Frame. Without this, the text will simply disappear, as it has not been given any more frames after frame one.
After stage four your timeline should look like this:
Note - Your timeline will stretch to 30, not 15. When I took this screenshot I was experimenting with 15.
Stage Five
So this is the neat part. This will make the shine slide through from
one side to the other through the text. The animating of the effect, so
to speak. Click on frame one (which is a keyframe) of the Effect layer.
Drag your rectangle so the white part is to the left of the text, like
so:
Ensure that the end of the rectangle does not move past the right hand
side of the text, otherwise the effect will not work properly. Once you
have done this, click on your second keyframe, which is on frame 30,
and drag the rectangle so it is on the other side of the writing, see
below:
You then need to lock both layers by clicking the black dot where the
padlock was before, to lock them. This will initiate the mask that you
put on earlier. Play your movie by clicking on frame one and pressing
enter. If it does not work then go back to see if you have made any
mistakes. If it does work, then well done, you made yourself a nice
effect using Flash.
You can use this method to create similar effects. Try with different
colours and sizes. Experimenting in Flash is probably the best way to
learn.
Now that you have this flash file, export it, and save it. Use the following code to embed your flash file into a browser:
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
Obviously switch the code to suit your file name and size, but that's
the least amount of code you'll be needing at this stage.
Final Effect
By Joe Denison
|
|
Last Updated ( Wednesday, 12 October 2005 )
|
|
Tutorials 
