TheTAZZone - Internet Chaos

Tutorial – Find the Mouse Location in Flash (5 & MX)

ORIGINALLY POSTED BY NOKIA FOR THETAZZONE/TAZFORUM HERE

Do not use, republish, in whole or in part, without the consent of the Author. TheTAZZone policy is that Authors retain the rights to the work they submit and/or post…we do not sell, publish, transmit, or have the right to give permission for such…TheTAZZone merely retains the right to use, retain, and publish submitted work within it’s Network

Code: Select all
With kind permission from Valhallen we are glad to be able to host this tutorial of his on The TAZ.

Ok this tut will use the old Flash 5 way of coding (may work in earlier versions to tho not sure) simply for the fact I taught myself in Flash 5 and have still not completly transfered to Flash MX coding

Ok basically what this will allow you to do is have a cross hair follow the mouse around the screen – in the example I have used it to find locations on a map but really is just to show you a little of how to use flash’s ability to move movieclips (mc) depending on mouse postion.

In the example you can see there are 5 main elements

Crosshair

Vertical bar

Horiz bar

Map

I know I said 5 and there are only 4 there but the crosshair is actiualy made of tewo parts the inner circle and the lines.

ok lets set up our movie –
your gonna need 8 layers :::

Map

Border

Horiz bar

Vert bar

circle

lines

Buttons

actions

ok the first 2 are self explanitary as is the two bars (just make sure they are long enough) also as we will be applying actionscript to the bars please make sure they are movieclips

the circle and lines mc’s will contain the animation for when you mouse over an active area

the first frame in each mc should be when it is at rest make sure to also add a

Code: Select all
stop();

function on the first frame
now animate it when you rollover and rollout making sure to add another stop at the end of the rollover animation (not following me – take a look at the .fla while reading this tutorial for a better idea)

ok once you have your mc made add them to the main timeline on the correct layers (by giving everything its own labeled layer and mc now it makes editing one element at a later time alot easier and is good practice for when you try more advanced flash projects)

right now we got to add our buttons – i drew roughly round the different areas on the map but if you want (and are better at geography than me) you could add lil dots for actual places etc

once you have your buttons made set their alpha to 0 (unless you want them to be seen)

ok time to add our code :::

click once on the horiz bar mc and add this code

Code: Select all
onClipEvent (enterFrame) {
_y += (_parent._ymouse-_y);
}

This tells flash to move the mc along with the mouse along the Y axis

ok now the vert bar :::

Code: Select all
onClipEvent (enterFrame) {
_x += (_parent._xmouse-_x);

}

exactly same thing but now is getting postion along X axis

ok adding the code to our circle and lines mc is just the same except we need it to get both the X & Y postions – the code for both movies is the same

Code: Select all
onClipEvent (enterFrame) {
_x += (_parent._xmouse-_x);
_y += (_parent._ymouse-_y);
}

dont forget to give your mc’s instance names (i just used circle & lines) as we will be refering to them in our code a little later

now we have got to tell the flash movie what to do when you move over one of our buttons

the code is the same for all the buttons :::

Code: Select all
on(rollover){
_root.circle.gotoAndPlay(2);
_root.lines.gotoAndPlay(2);
}
on(rollout){
_root.circle.gotoAndPlay(6);
_root.lines.gotoAndPlay(8);
}

now the frame numbers are just waht i used in my .fla and these will need to be changed depending upon the set up og your own mc’s

a quick break down of the code :::

on(rollout){ – tells flash to perform the following function when the mouse is placed over the button

_root.circle.gotoAndPlay(6); – this means that flash is to look for the mc (instance) name circle and go to the 6 frame and play

simple

***Flash Mx only***
I’m not sure as I have not tested but if you wanted to code it in flash MX i think instead of placing the rollover & rollout code on each button you could use

Code: Select all
display = function () {

and then define the function before using

Code: Select all
display.apply(button);

to attach the function to each button?

****End of Flash MX only****

Ok if you test it now you should see that the horiz line, vert line and both mc’s follow the cursor but lets get rid of the cursour as well

in your actions layer place the following code

Code: Select all
Mouse.hide();
stop();

so there you go thats it now there are other things that could be done with this – add a mc at the bottom to display different flags depending what country you are over etc – it could even be used as the basis of a lash shooting game!!

v_Ln

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertise

If you'd like to advertise on The Mutt ( aka TheTAZZone.com ) feel free to contact us at: administration[at]thetazzone.com

TheTAZZone is a non-commercial entity. We do not sell any products or services ourselves. Our revenue comes from advertising and donations only.

We appreciate your support! Your advertising revenue ( or donations ) helps us to continue to upgrade, improve, and offset the costs of maintaining this site.

Donations can be made through the page ' Donate '.