Shop More Submit  Join Login
×




Details

Submitted on
February 9, 2008
Image Size
963 KB
Resolution
640×6000
Link
Thumb
Embed

Stats

Views
24,496
Favourites
412 (who?)
Comments
105
Downloads
637
×
Fancy Fading Rollover Tutorial by juzmental Fancy Fading Rollover Tutorial by juzmental
Full View Required! Image is 6000 pixels high!

My brother ~InsaneShane is going through a phase where he likes to do vampire photomanips - and once he has done them, he likes to present them as a flash-rollover that when you run your mouse over the image, you see the manipulated image appear over the original.

Now the method he was using was the same as Nocturnal-Devil's tutorial: [link] which just flipped from one image to the other.

While skyping one night, my brother mentioned to me that he wanted to do one which has a nice fade from one image to the other. So that night we think-tanked and brainstormed and had only a slight bit of success (neither of us have ever done anything major with flash).

The next day I made it my goal to research it and see if I can work it all out, and this is the final result of that research! A nice (relatively) simple tutorial on how to make your own fancy fading rollover in Flash!

You can see it in action here [link]

It is a pretty simple tutorial, but it does require some code entry, so at the end of this description I have pasted the code you need. Hopefully this will save you a lot of typing!

I know this is a really simple piece of code and all you flash experts are probably going to laugh at it, but for us non-flash savvy folks it's a pretty major milestone! lol.

If you use the tutorial to make something and you submit it to DA, feel free to post a link to it in the comments!




Here's the code snippet you need to paste into the Action script panel near the end of the tutorial:

import mx.transitions.Tween;
import mx.transitions.easing.*;

var rollover_btn = this["main_rollover"];

rollover_btn.onRollOver = function() {
var alpha_level = this.overlayed_img._alpha;
var over_fade:Tween = new Tween(this.overlayed_img,

"_alpha", Strong.easeOut, alpha_level, 0, 0.5, true);
};

rollover_btn.onRollOut = function() {
var alpha_level = this.overlayed_img._alpha;
var over_fade:Tween = new Tween(this.overlayed_img,

"_alpha", Regular.easeIn, alpha_level, 100, 0.5, true);

};
Add a Comment:
 
:icontorremitsu:
Torremitsu Featured By Owner Nov 30, 2013  Professional Photographer
It doesn't work with adobe CC.  Keep your version of CS6 handy for this tutorial.  Apparently CC doesn't support AS2 anymore.
Reply
:icontorremitsu:
Torremitsu Featured By Owner Nov 30, 2013  Professional Photographer
Brilliant!
Reply
:iconilldiamond:
iLLDiAMOND Featured By Owner Jul 18, 2013  Hobbyist Digital Artist
I use this like all the time! Thank You! :D
You can see it here!
Reply
:iconother-covers:
other-covers Featured By Owner May 15, 2013  Student Interface Designer
didn't work for me? Is the file name of the images you import important?
Reply
:iconother-covers:
other-covers Featured By Owner May 15, 2013  Student Interface Designer
tried again and it works but why is the image quality a lot worse in flash than the the original file?
Reply
:iconother-covers:
other-covers Featured By Owner May 15, 2013  Student Interface Designer
fixed that too haha
Reply
:iconomabe-edit:
OmaBe-Edit Featured By Owner Aug 14, 2014  New member Professional Photographer
lol your comments made me giggle. 
I'm at the stage of your first comment.... surely will have the same progression ha ha :P 
Reply
:iconreasondinn:
Reasondinn Featured By Owner Feb 12, 2013  Student Artist
I try but i can't make a flash :S , any other explanation please??
Reply
:iconjekopiano:
Jekopiano Featured By Owner Jan 11, 2013  Professional Digital Artist
thanks for a great tutorial :D
Reply
:iconeggtart911:
eggtart911 Featured By Owner Nov 29, 2012
i can only roll it over once and it never turns back ..
im using cs5 and i did it step by step. anyway to help??
Reply
Add a Comment: