Wednesday, November 5, 2008

Adobe Flash Tutorials - Rollover Effect

This is my first ever tutorial on Adobe Flash! Hope you'll like it. I assume you've already use Flash before follow my steps. Even if you're not, I made it simple to follow. Do try!

We're going to learn how to make interactive flash file which is known as "Rollover Effect". To compare 2 different photos (before and after). Sample below.






First of all download these 2 photos. We going to use these photos in the tutorial.

Before - http://www.ramesstudio.com/adobetuts/flash/AFTER.jpg

After - http://www.ramesstudio.com/adobetuts/flash/BEFORE.jpg

Step 1

Open new flash document and click on the "Settings" on the properties bar. If you can't find it, go to Windows> Properties> Properties.

Step 2

On the popup, set the width, height and frame rate like above.

Step 3

Go to File> Import> Import to Stage and place the "After" photo right in the middle of the document. Next click on the photo, and go to Modify> Convert to Symbol. On the popup, add name and select the type. Click OK once you've done that.

Step 4

Now, click on that same photo again and go to Modify> Convert to Symbol again. We need to convert it to "Movie Clip" type and give it a name "movie". Click OK.

Step 5

Make sure the photo is still selected and then go to properties box and type "movie" just like above.

Step 6

On the timeline, add a new layer. Right click the first frame and select "Actions".

Step 7

On the Action popup, add the action "stop();"

Step 8

Add a new layer in between these 2 layers. Go to the "Rectangle Tool" on the toolbar and make a box on the photo (any color will do). This is done to create the button map.

Step 9

Select the box and go to Modify> Convert to Symbol. Choose type "button" and give it a name "button".

Step 10

Double click on the box and you'll see a small mini timeline (indicator no.1). Move the black box on the timeline from "Up" to "Hit". This is to make the box look invisible. Once you've done that, click on the "Scene 1"(shown above with the indicator no.2)

Step 11

You should see the document is now look just like above.

Step 12

Click on the middle button layer. We need to hide it, temporarily. How to hide it? Click on the small black dot on the "eye icon" row, see above. After that, double click on the photo layer.

Step 13

On the first layer, create 3 keyframes. How to do this? very easy! Click on the "15" frame and press "F6" on your keyboard. Another one at frame "30", press "F6". Your timeline now should look like above.

Step 14

Right click on the first frame and the "15" to add "Create Motion Tween". After that, stay at frame "15" and click on the main photo.

Step 15

On the properties bar, choose "Alpha" at the color bar and set the Opacity slider to "0%"

Step 16

Now go to the timeline and create a layer below the photo. Then go to File> Import> Import to Stage and locate the "Before" photo. Place it in the middle of the document.

Step 17

Add one more layer at the top most. We need to add some codes. Make 3 keyframes like above. Follow exactly like Step 13.

Step 18

Right click on the frame 1, 15, 30 and add the actions above. Next, click on the "Scene 1" tab. We're almost done! Just 1 more step!

Step 19

Unhide the button layer (Just click back on the black dot to unhide the layer). Click on the button, right click and add the code just like above. Now, go to Control> Test Movie (ctrl + ENTER) to test out the movie!

Can you see now? There you have a very cool interactive comparison file!

Download the source file here : http://www.ramesstudio.com/adobetuts/flash/template.fla

If you want to add the file into your blog or site, upload it first to any server. Copy the embed code below and change the path of the "swf". That's it!

Click here for embed code : http://www.ramesstudio.com/adobetuts/flash/embed.txt

Do let me know what do you think of my first tutorial on Flash. Hope its very useful for you guys :)

Thanks,

9 comments:

KOKahKOK said...

i will learn n try this! looks interesting.... :)

Anonymous said...

thanks for sharing... LOVE UR tutorials so much.. THANKS..

Will u share 3D MAX at this blog?

Peter.

Anonymous said...

hey there rames!

just a passerby of your blog for a few months now. you take really good pictures and your PP skills are phenomenal!

thanks for sharing so much and teaching ppl like us who may just be starting photography and post processing for fun and as a hobby!

keep up the good work and hope there is more to come. God bless!

daniel

Rames said...

kohahkok>> ok :)

Peter>> thanks, 3D max? Can if Adobe create any tools to handle 3D stuff :D

Daniel>> thank you so much for ur comment :). Will share as much as I can :).

Adlan said...

i love this one. never tried using the script like that.. hehe

Anonymous said...

This Is COOOOOLL.. i must learn it after exam ..xD

Mansur said...

wow... u r powerful.. U expert in most in adobe software...

this tutorial is cool.. I think we also can do this with javascript rollover effect also....

TQ for tutorial..

my request, please make a tutorial about the animated glitter images. That will useful to my site for designing cards... TQ Rames...
http://www.fleedy.com

Mansur said...

Rames Wrote:
-----------
kohahkok>> ok :)

Peter>> thanks, 3D max? Can if Adobe create any tools to handle 3D stuff :D

Daniel>> thank you so much for ur comment :). Will share as much as I can :).
----------
ya... Adobe After Effects CS4 now support 3D stuff.. U can import from either 3D max or create 3D graphics in photoshop CS4 extended and import....

Anonymous said...

there is a mistake in roll over effect in this tutorial.

even lighting wrong in position. may be the whole image is different. fake tutorial.