• home
  • forum
  • my
  • kt
  • download
  • Glint Effect

    Author: 2007-06-12 12:41:37 From:

    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:

    Background

    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 One Complete

    Stage Two

    Create a new layer by selecting the Insert Layer icon which is at the bottom left of the image below.

    Insert Layer

    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:

    Linear Fill

    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:

    Mixer Pallete

    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:

    Slnted

    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:

    Mask

    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:

    Motion Tween

    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:

    Stage Four

    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:

    Left Side

    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:

    Right Side

    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.

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (65)
      Drawing (18)
      Tips and Techniques (41)
      Dynamic Content (25)
      Tricks (6)
      Games (66)
      Utilities (19)
      Getting Started (71)
      Video (10)
      Interactivity (21)
      Web Design (22)

    New

    Hot