This thread is a response to the question asked by freak4lf. In this topic :
orb - BioRUST.com :: User Gallery
The question was to make the whole more interactive. Now Im still not completely sure what should be doing what. But this is what I made out of it(see attachement).
The tutorial:
Step 1 to 5 have images (they are attached to this post)
Step 1.
First thing to do is set the Background. Just make a layer, call it BG (background) and paste you BG image into that one. Than lock the layer so that it can't be changed.
Step 2.
Than you need to paste the image that should be cloaked, so that it can only be seen when the mouse is on it. This image should be pasted into a new layer, lets call it "masked". Do not lock this layer yet.
Step 3.
Make a layer on top of the "masked" layer, and call it mask. On this layer paste the mask. The circle that should be the window to the other image. Than right click on this layer ( in the timeline) and press mask.
Step 4.
Now you need to press the mask object and press "F8", or right click and press "make symbol". In the pop up menu, select Movie Clip and press "ok". Then select the mask in you scene, and change the instance name to "mask".
Step 5.
Make a new layer on top of the others, and call it something nice. Paste the image of the magnifying glass in this layer, and make it a symbol > movieclip. Change its instance name to "vf"(or something else, but than you have to use that name in the AS).
Step 6.
Now this is the more vital step. Make a new layer and cal it AS(ActionsScript). This will be the layer containing the code. Open up the actionscript window, and type in this code
Code:
this.onEnterFrame = function() {
startDrag("mask", true);
Mouse.hide();
locate();
};
function locate() {
mask_x = mask._x;
mask_y = mask._y;
vg_x = (mask_x+85.5);
vg_y = (mask_y+89.5);
vg._x = vg_x;
vg._y = vg_y;
}
Now to explain the code:
Code:
this.onEnterFrame = function() {
startDrag("mask", true);
Mouse.hide();
locate();
};
The "this.onEnterFrame" part determines that this function will start up everytime flash enters this frame. As flash repeats, this function will loop!
The "startDrag("mask", true)" is the part that states that something will follow the mouse. It is used to replace the mousepointer but also functions in this case. It is made up of 2 elemetents. The "mask" part and the "true" part. Part one tells flash that "mask" will follow the mouse. We called our masking object "mask" and therefor that object will follow. The second element, "true", makes flash to hide the original mouse pointer.
To be sure that the mouse pointer remains hidden, I also called the "Mouse.hide():".
Than the "locate();" part. what it does is pretty simple. It cals for a function called locate. And executes it, if that function does not excist than that will be an error, and your movie won't run smoothly.
Code:
function locate() {
mask_x = mask._x;
mask_y = mask._y;
vg_x = (mask_x+85.5);
vg_y = (mask_y+89.5);
vg._x = vg_x;
vg._y = vg_y;
}
This part of code is pretty simple. This is the locate function, and will be called when the frame is entered. What this function does is making sure that the magnifying glass is where it should be(at the mousepoint). But because the glass has a stick, and therefore isn't sqauer, it must be placed a bit different than the mask, so that the circle fits around the mask.
To do this I simply, took the place of the mask (first two rows) and put them into variables. The variables "mask_x, mask_y" can then be used in the code. Then I declared 2 more variables "vg_y, vg_x" these two will function as storage, as the place where the glass shoud be are stored in them. I just looked at the original placing, and took the difference between the x and y values of the mask and the glass to see what numbers I should use.
Than finnally I put the correct number in the x and y slots of the glass.
This is how I made the attached movie
I had to zip the movie, because it doesn't work otherwise, so I also took the librty of uploading it to biorust. It can be found here:
http://forums.biorust.com/photopost/...hp?photo=13944