Tuesday, September 8, 2009

Create a Magnifying Glass Effect in Actionscript 3



Hit Ctrl+J to bring up the Document Properties Window and set the width and the Height to 400.

1. First we will draw the magnifying glass. HitCtrl+F8 to bring up the New Symbol window and give the name as magnifier. Click OK and draw a 100x100 cirlcle with fill color #009999 and alpha 20 and the stroke color as #663300. Set the stroke thickness as 5 pixels. Make sure you centre it.

Now with The rectangle tool selected, fill color of #663300 and no stroke color draw a rectangle. This will be your glass's handle. Now select the Free Transform Tool and rotate it through 45 degrees

now attach both the figures and your magnifying glass is done.

2. Now we need the object to be magnified. Now remember we will not be actually magnifying anything. This will be an illusion. So we need the magnified object as well. I will using a 400x400 image of the album cover of Foo Fighter's "Skin and Bones".

Go to File->Import->Import to Library.. and import the image into the library. HitCtrl+F8 to bring up the New Symbol window and type in the name as magnified. Drag the album cover from the library and centre it.
Create a new symbol again and this time the name is original. Drag the image from the library as before but this time go to the properties panel and set the width and height to 150. centre this too.

3 Now for the mask. HitCtrl+F8 again give the name as mask and draw a 100x100 circle of any color,it doesn't matter anyway.

4. In the main stage create 4 additional layers and rename them , from top to bottom, Actions, Magnifier, Mask, Magnified, Original respectively.

Except the Actions Layer you have to select the first frame and drag the respective object from the library and give the instance name as:-

Layer__________Object__________ Instance Name
=====________======_________ =============
Magnnifier
____ magnifier ____m_mc
Mask
________ mask________ mask_mc
Magnified
____ magnified ____ mag_mc
Original_____ original_______ ori_mc

Hit Ctrl+A to select all the symbols and go to the Align Panel and centre them. Now Right-Click on the mask layer and select "Mask" from the menu.

Your Stage should now look like this

5.Now select the first frame of the Actions Layer and Hit F9 to bring up the actions Layer. Copy and paste the following code

/*add a listener*/
addEventListener(Event.ENTER_FRAME,glassMove);

/*For a proper effect the magnified image must move
so as to give a believable illusion. These variables
will hold the amount to be moved along each axis*/

var moveX,moveY;

/*hide the mouse*/
Mouse.hide();


function glassMove(e:Event) {

/*make the magnifying glass and the mask move along
with the mouse*/

glass_mc.x=m_mc.x=mouseX;
glass_mc.y=m_mc.y=mouseY;

/*calculate the amount by which the magnified image has to move*/
moveX = ( ((mag_mc.width-ori_mc.width)/2) * (glass_mc.x-ori_mc.x) )/(ori_mc.width/2);
moveY = ( ((mag_mc.height-ori_mc.height)/2) * (glass_mc.y-ori_mc.x) )/(ori_mc.height/2);

/*move the magnified image by the calculated amount
(200,200) is the centre of the stage hence the centre of mag_mc and ori_mc*/

mag_mc.x=200-moveX;
mag_mc.y=200-moveY;

/*restrict the movement so that both the magnified image
and the diminished image appear at the same time when
magnifying along the edges.If the top left corner of the
two images coincide then the centre of mag_mc will be(375,375).
If the top left corner of the two images coincide then
the centre of mag_mc will be(75,75)*/

if(mag_mc.x<75)
mag_mc.x=75;
if(mag_mc.x>325)
mag_mc.x=325;
if(mag_mc.y<75)
mag_mc.y=75;
if(mag_mc.y>325)
mag_mc.y=325;}

Hit Ctrl+Enter to test your movie!!

22 comments:

  1. Hey,

    This is a great effect, but I'm having problems with the last bit of script. Basically, the edges don't line up properly. I get an 1120 error:Access of undefined property style. and a 1050 error: Cannot assign to a non-reference value.

    I'm using CS4 professional, AS3 file. Any ideas as to what's going on?

    ReplyDelete
  2. Even I use those. Give me an email address so I can send you the .fla file.

    ReplyDelete
  3. Hey buddy, do you know a way for AS2 to do this? or at least something similar? Or at least anything that can magnify at leaast x2?

    ReplyDelete
  4. What's the fix? I get the same error.

    ReplyDelete
  5. your script is totally broken because you don't stick to your own instance names my friend.

    rename m_mc to glass_mc. change

    glass_mc.x=m_mc.x=mouseX;
    glass_mc.y=m_mc.y=mouseY;

    to

    glass_mc.x = mask_mc.x = mouseX;
    glass_mc.y = mask_mc.y = mouseY;

    that will work.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. i can;t do this like this tutorial , plz can u give me the source (fla) file ?

    ReplyDelete
  8. it not working. can you pls give a link to download fla file.

    ReplyDelete
  9. Hi,

    This is great. Could you email me the fla please?
    dgimness [at] gmail [dot] com

    Thanks,

    Dan

    ReplyDelete
  10. I have put this into a web site on a subpage and it works with the corrections otomo said. (Thank you!)

    However, the // Mouse.show(); // creates a problem. The cursor disappears and works for this page, but it never comes back no matter which other pages I click on. Help???

    ReplyDelete
  11. Hi

    Iam using a file sizeof 546 px wide x 350 px deep. How do I work out the pixel dimensions in the below piece of code please?

    if(mag_mc.x<75)
    mag_mc.x=75;
    if(mag_mc.x>325)
    mag_mc.x=325;
    if(mag_mc.y<75)
    mag_mc.y=75;
    if(mag_mc.y>325)
    mag_mc.y=325;}


    Thanks Simon

    ReplyDelete
  12. Interesting tutorial, but hardwiring those values in the final block of code limits the reusability of this tutorial to images of the same size. I know it's doable with some math and figure-out, but why not include that in the tutorial as well.

    ReplyDelete
  13. I might figure this out myself, but when you say to make a new "symbol", do you mean that a movie clip, graphic or button will all work? Sorry, I'm pretty new to Flash! Awesome tutorial, by the way. =)

    ReplyDelete
  14. movieclip will work the best but here i guess anything will work

    ReplyDelete
  15. The class or interface 'Event' could not be loaded.
    function glasMove(e:Event) {

    NewBie in Flash Sorry :|

    do you still have the .fla file??
    if you. please send the .fla file to this email.."darkaztig029@gmail.com" :) tnx....

    ReplyDelete
  16. Hmm, now I have another problem! At least I'm not stuck with a ton of useless buttons anymore...
    I'm not sure what's wrong. My magnifying glass is magnifying and moving, but my "magnified" isn't moving with it. Any ideas?

    ReplyDelete
    Replies
    1. Tried it again, and I still have the same stupid problem... you're, like, a genius, so could you try and help? Pretty please?

      Delete
    2. Oh, GOSH, am I stupid! I changed the "m_mc" in the script to "glass_mc" after reading the begining of otomo's comment, but I didn't read the whole thing. Ignore the two comments above!
      This is an epic tutorial. Please keep making more! =D

      Delete
  17. This is incredible! Thank you for sharing these instructions.

    ReplyDelete
  18. What a great resources. There is obviously a lot to consider about this. But I think you made some good points in discussing the topic. Thanks for the idea!

    ReplyDelete
  19. thanx for this idea ... how it will work with drag script???

    ReplyDelete