Magnifying Glass Effect
February 6, 2009 by: smonteThis tutorial will teach you how to create a magnifying glass effect with ActionScript 3.
1. Create a new document (size should be the same as the image’s size you’ll be using).
2. Import your image to the stage.
3. Convert the image into a movie clip called “backgroundImage”.
4. Give the movie clip an instance name of “backgroundImage”.
5. Duplicate the movie clip (backgroundImage), give the duplicate a name of “maskedImage”.
6. Create a new layer called “masked image”
7. Drag the maskedImage onto the new layer. Give it an instance name of “maskedImage”. Make sure the maskedImage is exactly on top of the backgroundImage.
8. Now hide the “masked image” layer.
9. Blur the backgroundImage to value 10.
10. You can now view the maskedImage layer again. We’ll soon move to ActionScript, but before that, let’s create the actual magnifying glass.
11. Create a new layer called “mask circle” and draw a circle of the height you want. I chose a radius of 50px.
12. Convert the circle into a movie clip “maskCircle”(registration point in the center). Give it an instance name of “maskCircle”.
13. Now let’s move over to ActionScript. Create an actions layer and type the following.
//This set's the mask to the image. maskedImage.mask = maskCircle; //Let's hide the mouse Mouse.hide(); addEventListener(Event.ENTER_FRAME, enterFrameHandler); //In each frame, we want to move the circle to the place of the mouse function enterFrameHandler(e:Event):void { maskCircle.x = mouseX; maskCircle.y = mouseY; }
Now test your movie. You should have a same looking effect as seen in the first page. Remember, you can do all sorts of masks, not just the magnifying effect. For example, you could make the background completely black as I’ve done in the movie below. Play with this, and create something new!
Click the movie to see what happens. To create an effect like that, type the following.
stage.addEventListener(MouseEvent.CLICK, clickHandler); //If the user click the mouse, expand the mask so that it reveals the whole image function clickHandler(e:Event):void { //Let's remove the old enterFrameHandler removeEventListener(Event.ENTER_FRAME, enterFrameHandler); //Add another ENTER_FRAME listener addEventListener(Event.ENTER_FRAME, scaleMask); //Show the mouse Mouse.show(); } //In each frame, increase the scale of the circle function scaleMask(e:Event):void { maskCircle.scaleX += 0.2; maskCircle.scaleY += 0.2; }
Final code
//This set's the mask to the image. maskedImage.mask = maskCircle; //Let's hide the mouse Mouse.hide(); addEventListener(Event.ENTER_FRAME, enterFrameHandler); //In each frame, we want to move the circle to the place of the mouse function enterFrameHandler(e:Event):void { maskCircle.x = mouseX; maskCircle.y = mouseY; } stage.addEventListener(MouseEvent.CLICK, clickHandler); //If the user click the mouse, expand the mask so that it reveals the whole image function clickHandler(e:Event):void { //Let's remove the old enterFrameHandler removeEventListener(Event.ENTER_FRAME, enterFrameHandler); //Add another ENTER_FRAME listener addEventListener(Event.ENTER_FRAME, scaleMask); //Show the mouse Mouse.show(); } //In each frame, increase the scale of the circle function scaleMask(e:Event):void { maskCircle.scaleX += 0.2; maskCircle.scaleY += 0.2; }
Related tutorials:
Leave a Reply
You must be logged in to post a comment.
