Creating the the Shine Effect
       by Sharif aka the Reefster : 13 July 2004

Since we don't have too many tutorials on how to create some cool effects for animation, here's one that I've seen sites use. The effect look amazing when you use it on a website with lots of Photoshop graphics. Here is an example, watch the shine in the beginning.



[ press play and watch the shine ]


Here Is How:
  1. Start a new flash document and use a background color that's nice and simple. I used a nice touch of blue, the hexadecimal code is #A5BCC9 to be exact.
  2. Now let's create a basic shape to shine. I prefer a rounded rectangle mostly for navigation bars. Make sure you turn off or delete the stroke once the shape is made. Also have the fill as white.  
    The Rounded Rectangle

  3. Create a new layer, and drag this layer under the shape one. This will be the shine layer.  

    Layer Order

  4. Now create a rectangle about 1.5 to 2 times bigger than the shape you have, once again turn off or delete the stroke. Open up the color mixer by going to window > color mixer or by pressing shift + F9. Use the drop-down menu to set it to linear.

    Set the linear so it goes from white to white to white. 3 color tabs. Then set the left tab alpha to 0% and the right tab alpha to 0% and align the middle tab to the middle.  

    Color Mixer

    Make sure you do this while having the rectangle selected. Here is what the rectangle should look like.  

    Rectangle

  5. Create a motion tween of about 10 - 15 frames and have this rectangle move quickly from left to right so that it passes the shape and stops on the other side of it.
  6. Now you can tweak your motion tween and play around to make it go faster.
  7. Select the Shape layer convert it to a mask by right-clicking on the Shape Layer and selecting Mask.  

    Masked Layers

  8. Test the movie.
And voila! You have an amazing shine effect now. If you do about 10 of these together on a site that flows well, it will look great, especially if you have good colors on your site. I used the shine effect by making the shape of the Afri bottle and shining that to make it seem like the bottle was shiny. Notice how I made the shape a little bigger than the image.

I hope I helped you learn a new cool effect. As always, I have provided the Flash MX file for you to compare your stuff to mine and learn exactly how it is done.
 

Download Flash MX Source File

If you have any questions, comments or would like to show your work, feel free to post on the forums.

Sharif
the Reefster
 



SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.