Old 07-16-2006   #1 (permalink)
Be Unique. Be Heard.
 
Jacorre's Avatar
 
Join Date: Jul 2006
Location: USA
Posts: 469

Thumbs up [FLASH] Animated Shine

Cars look so shiny and new after a nice wash and polish. How about we keep it that way! With this tutorial, you'll learn how to add an animated shine using a gradient and mask technique.

STEP ONE

Find a nice image you want to work with. I am using a picture of my car, a 2001 Mercury Cougar C2:



STEP TWO

Open a new document in Flash. I set my canvas size at 300 pixels wide and 200 pixels high. Go to File > Import > Import To Stage and choose your image. I named the layer CAR.

STEP THREE

Create a new layer and call it GRADIENT. Using the Rectangle Tool draw a rectangle to the left of your image making sure it is taller than your image. Make sure it has no border. The fill should be a linear white gradient with a left fill of 0% alpha, a middle fill of 100% alpha and right fill of 0% alpha. That basically means it's going from transparent to white to transparent. You should have the following so far:





STEP FOUR

Now let's create the areas where we want the shine to animate. Create a new layer and call it SHINE AREAS. Using the Pen Tool I defined some areas. Make sure there is no border. The fill can be any color but I used red because it's easier to see on my image. Here are my results:



STEP FIVE

On your timeline, insert keyframes at frame 30 for each of the 3 layers as seen below:



STEP SIX

We want the gradient to move from left to right. It's position on the first keyframe is to the left. For the keyframe at 30 we want it's position to be all the way to the right. So click on the keyframe at 30 for the GRADIENT layer. Holding down the Shift key, move the gradient all the way over to the right.



STEP SEVEN

Now click on any frame between 1 and 30 on the GRADIENT layer. On the Properties panel at the bottom of your screen, there is an option for Tween. Set it to Shape. This will animate your gradient shape, making it move from left to right. You should see the following in your timeline to signify the tween is in place:



STEP EIGHT

If you were to hit the enter key at this point, you should see that the white gradient will move from left to right. Cool huh, but not exactly what we were looking for yet. Here's the final step to finish it off. Right click on your SHINE AREAS layer and choose Mask:



So now, instead of the white gradient displaying fully across the image, it will only display within the shine areas that were created! Here is my final result. Enjoy!
__________________

Jacorre Studios Blog

Last edited by Jacorre; 07-16-2006 at 03:17 AM.
Jacorre is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Old 07-16-2006   #2 (permalink)
Just unleashed!
 
unleash's Avatar
 
Join Date: Jul 2005
Location: Inbetween
Posts: 2,140
Blog Entries: 9

nice, great effect very usefull.
im just starting to learn flash, after photoshop and maya(still learning both but just want to know flash)
__________________
"I haven't failed, I've just found out
10.000 ways that don't work."

~Thomas Edison~
unleash is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Old 07-16-2006   #3 (permalink)
Sheep Worrier
 
Man1c M0g's Avatar
 
Join Date: Sep 2003
Location: Portsmouth, UK.
Posts: 4,061
Blog Entries: 14

Send a message via ICQ to Man1c M0g Send a message via MSN to Man1c M0g Send a message via Skype™ to Man1c M0g
OoOoH! Excellent flash tutorials are EXACTLY what we need. I'll have this on the main tutorial pages soonish!
__________________
Man1c M0g is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Old 07-16-2006   #4 (permalink)
Sheep Worrier
 
Man1c M0g's Avatar
 
Join Date: Sep 2003
Location: Portsmouth, UK.
Posts: 4,061
Blog Entries: 14

Send a message via ICQ to Man1c M0g Send a message via MSN to Man1c M0g Send a message via Skype™ to Man1c M0g
...And this tutorial is now online over @ http://www.biorust.com/tutorials/bro.../added/desc/1/ . Any chance of a 120*75px animated gif of the shine? That's make it stand out better in the listings.
__________________
Man1c M0g is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Old 07-16-2006   #5 (permalink)
Be Unique. Be Heard.
 
Jacorre's Avatar
 
Join Date: Jul 2006
Location: USA
Posts: 469

I'll see what I can do! Thanks!
__________________

Jacorre Studios Blog
Jacorre is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Old 07-19-2006   #6 (permalink)
Be Unique. Be Heard.
 
Jacorre's Avatar
 
Join Date: Jul 2006
Location: USA
Posts: 469

Attached is the 120x75 file that's animated.
Attached Files
File Type: zip small_mercury_cougar.zip (9.4 KB, 27 views)
__________________

Jacorre Studios Blog
Jacorre is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Old 07-19-2006   #7 (permalink)
Be Unique. Be Heard.
 
Jacorre's Avatar
 
Join Date: Jul 2006
Location: USA
Posts: 469

Here's the animated gif as requested. The quality isn't as great unfortunately.
Attached Thumbnails
flash-animated-shine-small_mercury_cougar.gif  
__________________

Jacorre Studios Blog
Jacorre is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Closed Thread

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Animated Shine - NEED HELP switchrocks BioRUST Specific Threads 2 04-23-2006 03:56 AM
Sweat & Grease Shine Tutorial Man1c M0g Announcements 2 12-29-2005 07:09 PM
Ideas for my very short animated short Milkdrop 3D Modelling 13 06-23-2004 06:40 PM


All times are GMT +1. The time now is 04:40 AM.
Content Relevant URLs by vBSEO 3.2.0 RC7

Design & Content © BioRUST 2007 :: PRIVACY STATEMENT :: LEGAL INFORMATION :: ADVERTISING MEDIA KIT