change the Properties of a movie-clip in relation to the cursor position

[color green]Just to let you know that I'm relocating my server as of today, and for a period of three to four weeks, none of the links to my files on this site will work.

If you need a file from me which is linked from this site then please just email me details of the relevant link and I will send the relevant file(s) to you.

After I've relocated the server and all the files within it I shall endeavour to update all links in Tek-Tips.[/color]


Hi again.

This tutorial offers a simple step-by-step method of changing the Alpha setting of a movie-clip in relation to the position of the mouse-cursor. The following links provide other possibilites which utilise this method:



Step 1---[color green]Create the movie-clip[/color]
Nice n easy. Just create your movie-clip by hitting Ctrl+F8 and drag a copy of it onto the main stage (frame1), note the dimensions of the clip and it's position on-screen, you'll need these values for the scripting. Give the clip an Instance name (in my fla the instance name is "drag") by selecting the clip and pressing Ctrl+i, and use the instance panel.


Step 2---[color green]Create the drag-controller[/color]
Press Ctrl+F8 to create another movie-clip. This time, don't put ANYTHING in the movie-clip. Come back to the main stage and drag a copy of this clip onto the main stage (frame1). Give it an instance name (in my fla the instance name is "clip") . It doesn't matter where you position the clip in the movie.

Step 3---[color green]Insert the scripting[/color]
It's best to always put your main actions on a separate layer. In this case the actions need to be on the same level as the two movie-clips. So just insert a layer in the main timeline and give the layer the name Actions. Insert the following actions into the first frame:[color red]
[color blue]// ACTIONS TO CHANGE THE ALPHA VALUE OF A MOVIE-CLIP
// IN RELATION TO THE CURSOR POSITION ON THE SCREEN
// made for Dazron at Tek-Tips by davdesign@pinkzeppelin.com
// F5 version
//
// start dragging the control clip and determine the mouse position[/color]
startDrag ("_root.drag", true);
/osx = getproperty(_root.drag, _X);
/osy = getproperty(_root.drag, _y);
[color blue]// define the centre of the movie-clip undergoing alpha changes
// (from here on referred to as the alpha-clip)[/color]
/:xcent = "300";
/:ycent = "300";
[color blue]// determine the horixontal and vertical distances of the
// mouse from the centre of the alpha-clip[/color]
/:xx = /osx-/:xcent;
/:yy = /osy-/:ycent;
[color blue]// calculate the square of the horizontal and vertical
// sides of pythagoras triangle[/color]
/:xx2 = /:xx * /:xx;
/:yy2 = /:yy * /:yy;
[color blue]// calculate the hypoteneuse side of the triangle
// the exact distance from the centre of the alpha-clip to the mouse[/color]
/:zz = Math.sqrt (/:xx2+/:yy2);
[color blue]// Determine whether the mouse is over the alpha-clip or not.
// NOTE: if you make your alpha-clip a button then you could set
// actions on the button such that 'On Rollover' a variable is set to '1'
// and on rollout a variable is set to '0'
// The following 'If' statement would then simplify to (if (variable=1))........[/color]
if ((/osx>200) and (/osx<300) and (/osy>200) and (/osy<300)) {
setProperty ("_root.clip", _alpha, "100");
} else {
[color blue]// set the alpha value of the alpha-clip dependent on the
// length of the hypoteneuse calculated previously.
// You would change the value '5' to suit the dimensions of your movie.[/color]
setProperty ("_root.clip", _alpha, 100-((/:zz)/5));
}
[/color]

Step 4---[color green]Inserting blank frames[/color]
Finally, 'insert frames' into frame 2 on all layers. Do this by right-clicking on the first frame of each layer and selecting 'insert frame' from the pop-up menu.

OK, you've done it. Just hit Ctrl+<Enter> to test.

FLASH 4 USERS
Because Flash 4 does not have an inherent Square Root function, you have to do the calculation long-windedly. This is done by re-jigging the main scripting to reference a 'square root calculator' in the frame labelled 'root' which is 'called' to perform the calculation with each loop of the movie. The value returned from the 'calculator' replaces the variable /:zz in the Flash5 version.


enjoy
dave

ps: If you do find this tutorial helpful in any way, please let me know by Rating the tutorial or e-mailing me with comments. Tutorials take longer to create than your average post and it would inspire me to create more tutorials if I knew that they were being put to use rather than being a waste of my time. Cheers peeps!