Shop Mobile More Submit  Join Login
×




Details

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

Stats

Views
24,824
Favourites
413 (who?)
Comments
106
Downloads
654
×
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:
 
:iconkhellfinte:
khellfinte Featured By Owner Jan 16, 2015  Hobbyist General Artist
Thank you so much! :)
Reply
: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  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
:iconkatherinemurdoch:
KatherineMurdoch Featured By Owner Oct 28, 2012
Oh man. This means I need to get flash...
Thanks for the tute!!
Reply
:iconrafykoby:
RafyKoby Featured By Owner Oct 10, 2012
I dont have Flash arg
Reply
:iconwreakpeace:
WreakPeace Featured By Owner Sep 1, 2012
Thank you! Going t try it in CS5...
Reply
:icondeste64:
deste64 Featured By Owner Aug 5, 2012  Hobbyist Photographer
I was getting mad in try myself to get a rollover done in Flash (never used before), then I found your tutorial that has saved me sleepless nights! You are exactly right saying "but for us non-flash savvy folks it's a pretty major milestone!"
Here is my first ever rollover [link]
Reply
:icondarknightglow:
DarkNightGlow Featured By Owner Jun 6, 2012  Professional Digital Artist
Amazing and cool work I used here [link] I also uploaded to my personal portfolio here [link]
Reply
:iconlorixlisa:
LorixLisa Featured By Owner May 24, 2012  Hobbyist Digital Artist
Use this all the time! Well recently with my passed 3 retouch photo's I have finished. :) LOVE IT!

Latest one.. [link]
Reply
:iconruairiimages:
ruairiimages Featured By Owner May 20, 2012
great tutorial, thanks for the code
Reply
:iconlorixlisa:
LorixLisa Featured By Owner May 19, 2012  Hobbyist Digital Artist
Took me a while, but I finally did it, and with YOUR HELP! tytytytytyty.

Used it here: [link]

Sorry I don't know how to make a short link name :P.


thanks again!
Reply
:iconzorkajay:
ZorkaJay Featured By Owner Apr 14, 2012
After 3.5 months I finally figured out how to use this GREAT tutorial! :) You can se it here: [link]

THANKS again, juzmenatal, U R the BEST!
Reply
:iconprething:
preThing Featured By Owner Mar 24, 2012
and thanks again!)
[link]
Reply
:iconprething:
preThing Featured By Owner Feb 26, 2012
thank you so much!
used it here [link]
Reply
:iconbobitalizuca:
bobitalizuca Featured By Owner Jan 28, 2012
how i can to put the swf on the this website? ty
Reply
:iconpanosmoesis:
PanosMoesis Featured By Owner May 15, 2012
Hello there.. it seems that in order for DA to accept your .SWF file you need to upload a preview photo. Hope this helps, if you need any more info just let me know.. :)
Reply
:iconrui198000:
rui198000 Featured By Owner Jan 26, 2012  Professional Digital Artist
thanks, great tutorial
Reply
:iconzorkajay:
ZorkaJay Featured By Owner Jan 17, 2012
Hello, ppl!

From the moment I saw this tutorial I tried *literally* everything (with Flash Professional CS5 and even CS3 as well!), but despite all that effort I didn't menage to create a rollover image - after copy/paste the script into Actions I constantly keep getting 5 Compiler Errors with the Description:

*Statement must appear within on/onClipEvent handler*

Can somebody, PLEASE, help me and point me into right direction?

Thanks in advance,

Z.
Reply
:iconkurtzan:
Kurtzan Featured By Owner Dec 17, 2011  Hobbyist Digital Artist
Great Tutorial ! Thanks !! :clap:

i used it here : [link]
Reply
:icongonzalomacagno:
GonzaloMacagno Featured By Owner Dec 3, 2011  Professional Photographer
Do you know how to do it with action script 3.0?? I need it for wix :)
Reply
:iconfake-lol:
FakE-LoL Featured By Owner Nov 13, 2011  Student Photographer
Very helpful tutorial! Thanks :) Used it here Stella Rollover
Reply
:iconmindlessangel:
MindlessAngel Featured By Owner Nov 8, 2011  Hobbyist Digital Artist
I found the trick after three times of trying was that you need to make sure your file names are exactly the same as his. Then it works perfectly!
Thank you very much!
Reply
:iconyummypa:
yummypa Featured By Owner Nov 6, 2011  Hobbyist General Artist
i used your tut for this [link]
Reply
:iconins0mnisveritas:
InS0mnisVeritas Featured By Owner Aug 21, 2011
Thank you! used it here [link]
Reply
:iconfbotezatu:
FBotezatu Featured By Owner Aug 9, 2011
Is fantastic. Thank you.
Used to: [link]
Reply
:icon4dragonsmedia:
4DragonsMedia Featured By Owner Jun 17, 2011  Professional Filmographer
HOF
Reply
:iconleuthile:
Leuthile Featured By Owner Jun 3, 2011  Student Artisan Crafter
this tutorial may well be the most useful thing on deviantart :D at least for a retoucher ;) THANK YOU!
Reply
:iconwurmy:
Wurmy Featured By Owner Jun 2, 2011   Digital Artist
Awesome tutorial! Easy to read and follow for the simplest of minds :)
Used for: [link]
Reply
:iconsanjayaisland:
sanjayaisland Featured By Owner Jun 6, 2011  Hobbyist Digital Artist
wow... i repeat the instruction carefully, but i still can,t make it..

how you do that?
is that from adobe flash pro cs 3? :spin:
Reply
:iconyummypa:
yummypa Featured By Owner Nov 8, 2011  Hobbyist General Artist
well only the design is different to cs5 than this tut.
you just need to think it a little and follow your intuition if you know how adobe usually operates.
if there is somewhere specific you don't know what to do then say what it is, cuz nobody can help you if you only say it didn't work.
Reply
:iconevesalvatore:
EveSalvatore Featured By Owner May 9, 2011
Man thank you soooo much for this useful tutorial very clear and easy to understand!
Reply
:iconwalleesgirl41507:
WalleesGirl41507 Featured By Owner May 5, 2011  Professional Digital Artist
I absolutely cannot get this to work in flash cs5.
Reply
:iconmafaldaxxx:
MafaldaxXx Featured By Owner Feb 15, 2011
hi! Do you have this one in french ?? <3
Reply
:iconduilwen:
Duilwen Featured By Owner Feb 15, 2011
thanks so much for the tutorial, [link]
Reply
:iconps-rocket:
PS-rocket Featured By Owner Jan 1, 2011
just a question; i've tried this on cs5 but dosnt seem to work so is this method compatable with cs3 only'
Reply
:icon1of7-vanity:
1of7-Vanity Featured By Owner Mar 29, 2011
I don't think so.. I just made mine in cs5 and it works perfectly, you can check it out --> [link]
Reply
:iconps-rocket:
PS-rocket Featured By Owner Apr 5, 2011
thanx'
Reply
:iconsupersweetstock:
SuperSweetStock Featured By Owner Feb 1, 2011  Professional Interface Designer
i got the same problem
Reply
:iconromanova:
romanova Featured By Owner Dec 7, 2010  Professional Photographer
Hello again!
I have a question, you know how to make rollover more than two images, ie passing the mouse over the image is to discover more images?

Thanks
Reply
:iconthenightshrew:
TheNightShrew Featured By Owner Dec 2, 2010  Professional Photographer
Thanks a lot for ur awesome tutorial, my work with ur help for rollover thing here: [link]
Reply
:iconanemites:
anemites Featured By Owner Nov 14, 2010  Professional Photographer
:( i cant make it work!!! dunno why... =(
i have Adobe Flash Professional CS5... :S

Reply
:iconcaraile:
caraile Featured By Owner Nov 4, 2010
awesome tutorial, thank you! but where do I find the align panel?
Reply
Add a Comment: