Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

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

Stats

Views
23,946 (1 today)
Favourites
410 (who?)
Comments
104
Downloads
627
×
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 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 Nov 30, 2013  Professional Photographer
Brilliant!
Reply
:iconilldiamond:
iLLDiAMOND 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 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 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 May 15, 2013  Student Interface Designer
fixed that too haha
Reply
:iconreasondinn:
Reasondinn Feb 12, 2013  Student Artist
I try but i can't make a flash :S , any other explanation please??
Reply
:iconjekopiano:
Jekopiano Jan 11, 2013  Professional Digital Artist
thanks for a great tutorial :D
Reply
:iconeggtart911:
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
:iconkatherinemurdoch:
Oh man. This means I need to get flash...
Thanks for the tute!!
Reply
Add a Comment: