Mouse move opacity change function

This is actually a very simple flash function, but it explains a lot, and if you don't know much about functions and how to make them, this simple flash example might be the one to make you realize how easy it is. With just a few lines of code you will see how to make an objects opacity, also called alpha state, change relative to the mouse y axis position.

Of cause the first thing you should do it to open a new document, then draw some graphic on the stage, this graphic is what you want to apply this function to, as you can see I made a tree, you can find some vector graphics to use in one of my previous posts where you can download some free vector graphics, you just need to export them to flash from illustrator.

Now convert your graphic to a movie clip by right click and choose convert to symbol.

Go to the properties settings as shown below, and give your new movie clip symbol an instance name, I choose tree as you see.

flash tutorial alpha changing

Now hit F9 on your keyboard, this will show you the action script panel, in here you need to type in the following code. (Ignore the green text when typing in the code, this is explanation text)

mouse_do = setInterval(Achange,30) 
//declaring the alpha changing function
function Achange() { 
	//set the square shape alpha value to change to 
	//the same value as you mouse Y axis position.
	tree._alpha = Math.round(_root._ymouse/200*100);
}

Now test your movie, move the mouse up and down

Admin Bob says: 2008-03-31

hi Anon, I might make a tutorial for you later on the topic slider functions.

Anon says: 2008-03-31

How would you make this with a slider

Kryztina says: 2008-03-26

sweet! copied this and changed a few things and hid controls first time!

Admin bob says: 2008-02-15

Hi Loriane, it seems that you have written the code on the main stage. you have to select the object, then go to actionscript and type the code. (this is changed if you use actionscript 3.0, but so are the code).

Loriane says: 2008-02-14

hey, iChr(34)m getting this error Error Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Statement must appear within on/onClipEvent handler mouse_do = setInterval(Achange,30) Error Scene=Scene 1, layer=Layer 1, frame=1:Line 3: Statement must appear within on/onClipEvent handler function Achange() { Total ActionScript Errors: 2 Reported Errors: 2 CAN YOU HELP ME!

mike says: 2008-02-09

1. How do I convert it from AC2 to AC3 (and what has to be changed). 2. instead of the mc becoming fully visible when the mouse is on the bottom of the page, I want it to be fully visible when it is on the top of the page. 3. My movieclip includes buttons.. I donChr(34)t know what difference, if any, this makes. help appreciated. thanks

Admin bob says: 2008-01-27

hi divya, Yes the problem is you are using AS3, try to do it in as2. if you will do it in AS3 you will have to type in the code on the main stage in the actionscript panel, then remember to call the event at startup.

divya says: 2008-01-25

i tried this.. i am using action script 3.. i followed the instructions clearly.. but i am getting error

fitz says: 2008-01-23

I finally got it to work. Instance name...very important!

James says: 2008-01-23

is it really necessary to divide the _ymouse by 200 then multiply it by 100 It seems to work just as well if you just divide it by 2.

Kyle says: 2008-01-23

Never mind, i figured out that in AS3(or maybe both) that you shouldnChr(34)t code it into the graphic but the frame instead

Kyle says: 2008-01-23

hey, iChr(34)m getting this error :S // Error Scene=Scene 1, layer=Layer 1, frame=1:Line 2: Statement must appear within on/onClipEvent handler function Achange() { Total ActionScript Errors: 2 Reported Errors: 2 \ Can anyone explain what iChr(34)m doing wrong Or upload the .fla file so i can check it with mine. Any help would be greatly appreciated, thanks.

moni says: 2008-01-12

it works it is good, simple and useful. TNX

Ben says: 2008-01-11

@tutorial writer: I think that you should actually add the double slashes before each comment line. This would avoid a lot of confusion when people tyr to copy+paste

Rylie says: 2008-01-09

It works... all you have to do is copy and paste the given code but be sure to delete the green text just in case you copied it. These text are not necesary in your actionscript panel ("declaring the alpha changing function") and ("set the square shape alpha value to change to the same value as you mouse Y axis position."). Plus be sure to make your image to a movie clip symbol otherwise it will not work. And most importantly DO NOT FORGET TO TYPE the instance name, which is "tree". if you dont know what "instance name" is. Try to view Flash help for these. Try it its useful someday. :D Thanks for the tutorial!!!

chris says: 2007-12-19

same as the last tut. I followed instructions precisely. copied AS code from page. Does not function. thanks all the same. wish i could get it to work.

Akmal says: 2007-12-17

i done with this, its vgud tutorial should be usefull thanks

javeed says: 2007-12-16

i did this all not working like this