Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Related Links

Animated Shine


Cars look so shiny and new after a nice wash and polish... How about we keep them that way? With this tutorial, you'll learn how to add an animated shine to your car using a gradient and mask technique. No need to even get your hands wet!

Step 1:  Find a nice image that you want to work with - I am using a picture of my car, a 2001 Mercury Cougar C2. The resolution of the image you choose will affect the quality of the end result (but also the filesize).


Step 2:
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.

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 and that 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 3:
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 4:
On your timeline, insert keyframes at frame 30 for each of the 3 layers as seen below:




Step 5:
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 on your keyboard, move the gradient all the way over to the right.


Step 6: 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 7:
If you were to hit the ENTER key at this point, you would see that the white gradient will move from left to right. Cool... but not exactly what we were looking for yet! There's one final step to finish it off. So, 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!


- Tutorial written by Jacorre

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

User:  thebell (#51465)
Date: Thu Jul 10, 2008. 21:37:39

Post #6 of 6

you need to create a mask first

Reply to this post


User:  Malice (#51458)
Date: Thu Jul 10, 2008. 20:51:30

Post #5 of 6

excellent tutorial.love it.ima practice this some more

Reply to this post


User:  Hypnos (#37014)
Date: Thu Jan 25, 2007. 05:02:59

Post #4 of 6

Quote from Beata;30884:
Hello,

I need your help.
I did this tutorial but I thing something is omitted...
I can't get shine only on car. It goes through all image.
I took bkg on separate layer and imported transparent car on the second layer, but it didn't help.

Her is my example:
[link]

Audra from Lithuania


I'm having the same problem and I can't fix it!

Reply to this post


User:  karmen (#35507)
Date: Sat Dec 09, 2006. 02:24:04

Post #3 of 6

the tut is wonderful ..it works great !!!!!thx a lottt!!!!!:biorust:

Reply to this post


User:  Jacorre (#32140)
Date: Wed Sep 20, 2006. 22:46:02

Post #2 of 6

Quote from Beata;30884:
Hello,

I need your help.
I did this tutorial but I thing something is omitted...
I can't get shine only on car. It goes through all image.
I took bkg on separate layer and imported transparent car on the second layer, but it didn't help.

Her is my example:
shine_on_car

Audra from Lithuania


Hi Audra, did you define the areas you want the shine to show up in? These areas should be filled with any color but do not need a stroke. This is described in step 3.

Did you mask the areas with the gradient? Make sure the areas layer is above the gradient layer.

Reply to this post


--- View Entire Thread ---
Amazing Font Pack!

Featured Tutorialsmore

Segmented Rings
Segmented Rings
- Adobe Photoshop -
Micro Buttons
Micro Buttons
- Adobe Photoshop -
Ion Beams
Ion Beams
- Adobe Photoshop -
Sinedots
Sinedots
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Related Links



Special Options
Printer Friendly Version
Forum Threads

Help Please :)
Author: Roosta
Posted: Mar 25th, 5:08am
Activity: 0 replies, 345 views
thank you
Author: HypepapyHer
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 350 views
 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 1276 views
 changes....
Author: supertackyman
Posted: Sep 12th, 3:56am
Activity: 2 replies, 1557 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 4:50pm
Activity: 0 replies, 1411 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 1:58pm
Activity: 0 replies, 2449 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 3:18pm
Activity: 1 replies, 2363 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 3:33pm
Activity: 0 replies, 14972 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 4:37am
Activity: 0 replies, 3542 views
A New Designer has joined the ranks
Author: skates1
Posted: Mar 28th, 3:19pm
Activity: 2 replies, 3355 views
The hole in Photoshop
Author: Mars
Posted: Feb 13th, 9:28pm
Activity: 2 replies, 3811 views
Colour Swatch
Author: ebz7350
Posted: Jan 15th, 11:18am
Activity: 0 replies, 2630 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4673