Magnifying Glass
| Category | : Flash | Views | : 38098 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : magnifying-glass.zip | ||
| Result | : See the result | ||||
Code Explanation
loadMovie('image.jpg', imgHolder);
Load "image.jpg" to the "imgHolder" Movie Clip.
this.createEmptyMovieClip("zoomImg", 33);
Create empty Movie Clip for the zoomed image.
//Set a mask inside the Movie Clip so the zoomed image is rounded
zoomImg.setMask(imgMask);
Set a mask in the "zoomImg" using the Movie Clip "imgMask" so that the zoomed image doesnç¨ overlap the magnifying glass.The parameters for the function used are:
setMask(Mask_MC);
var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);
Create a new BitmapData with height and width of 155px no transparency and background color "0xEAEAEA".
new BitmapData(width, height, transparency, color);
Transparency and color are optional parameters.
zoomImg.attachBitmap(zoomBitmap, 5);
Attach "zoomBitmap" on the "zoomImg Movie Clip":
attachBitmap(bitmapData, depth);
var magPower = 2;
Zoom power.
var zoomMtx = new flash.geom.Matrix();
A Matrix object to scale and draw the zoomed image.
zoomMtx.scale(magPower, magPower);
Set the scale parameters inside the matrix to "magPower"; the image will not be scaled yet, we still need to draw using this matrix.
scale(_x scale, _y scale);
magGlass.swapDepths(_root.getNextHighestDepth());
Bring the magnifying glass to the top.
_root.onEnterFrame = function()
{
Mouse.hide();
magGlass._x = _xmouse - 70;
magGlass._y = _ymouse - 70;
Hide the mouse and set the position of the magGlass to be equal to the mouse.
zoomImg._x = magGlass._x;
zoomImg._y = magGlass._y;
imgMask._x = magGlass._x;
imgMask._y = magGlass._y;
Set the position for the rest of the Movie Clips.
zoomMtx.tx = -_xmouse * magPower;
zoomMtx.ty = -_ymouse * magPower;
The variables "tx" and "ty" inside a matrix represent the drawing location of the image; we set these two variables to make the zoomed image centered in the magnifying glass.
zoomBitmap.draw(imgHolder, zoomMtx);
}
Draw the zoomed image into the zoomBitmap using the draw() function:
draw(source, matrix)
That's the end of this tutorial. Check out other tutorials to get more knowledge about Flash!
More cool tech articles from other blogs.
