Click to See Complete Forum and Search --> : How is this super cool effect made?
Collegekid19
10-05-2008, 04:11 AM
I came across a really cool effect the other day on Diddy's website. Haha don't ask me why I was on Diddy.com
Anyways, the effect is really really cool.
I wanna know how the designer achieved the transition between each page. When you browse to different sections of the site, this really cool blue glowing light outlines a photo of diddy while the photo fades in. Its really cool and dramatic.
http://diddy.com/diddy.php
Collegekid19
10-05-2008, 04:13 AM
I imagine EFV has the answer. Haha. He usually does.
Eye for Video
10-05-2008, 11:43 AM
Well I’m flattered…or is that flabbergasted?? You really think I can do that!!???
Anyway, taking a look at the page, you can see that it’s a Flash animation (.swf), and a pretty cool one at that. To get a better visual on it, clean out your temp Internet cache, visit his site and click to one of the pages with the glowing light.
Then go to your cache and look for the .swf that was just downloaded. For example, interior_photo.swf. Try getting it off the Web page so you can analyze it. Copy it into a work folder somewhere, then play the .swf. Watch closely how it all playes out.
Since it takes a little while to download, you know that there will be a fair number of frames. There are a bunch of frames with glowing lights. Eventually the photo image shows up, along with a wall in the background. Break it down into sections.
How about something like this (kind of reverse engineering):
Put the wall background on the bottom layer. the photo image on the next layer up, and a few more layers to hold the coloring and animation parts. Convert the photo to a movie clip so you can drop the alpha while you work to trace the lines around it. With the photo_mc in position, start to draw in a few lines. Once the lines are in place, go back and drop the photo_mc alpha to 0 for the first few frames, etc. Play around with this to get the right effect. Later you will gradually fade the photo in.
For the overall blue glowing light, they may have used a gradient mask. The gradient allows a more feathered part of the image to show through.
My overall impression is that this took a little while to create, so expect to put a little effort into something like this, but hey, give it a shot!!
Best wishes,
Eye for Video
www.cidigitalmedia.com
austany
10-06-2008, 04:02 AM
or you can get a swf decompiler and see the code...
listen up, its not cool to steal others code, but its also okay to learn. so use it wise
WebJoel
10-06-2008, 10:43 PM
Be prepared though, if you decompile a *swf. You will have probably a few hundred 'components', 'constituents' or whatever they are called... Not cool and easy to get lost.. I'd opt for creating a new, similar~