A Magnifying Glass
(7 votes, average: 4.86 out of 5)
Loading ...This SWiSH Max2 project demonstrates how to make a magnifying glass effect that allows a section of an image (or movie clip) to be shown in ‘magnified’ detail. Try it by dragging the “magnifying glass” to the area that you wish to view in more detail.
The project demonstrates a number of useful concepts including:
- use of a pre-loader
- startDrag and stopDrag
- masking
- use of the library (sorry, the content library is not available in SWiSH miniMax2)
The project .swi can be downloaded from here: magnify_snowgums.zip
As shown from the capture of the Outline panel below, the source file is not complicated.
The sharedImage objects are links to the library item that contains the detailed image. As the image could be large in size I have split the movie into two scenes and made the 1st scene a pre-loader. This means that both scenes must have their ‘Stop playing at end’ property set.
Scene_1
The loader object is the LoaderBar_silver component from the Component | Progress group. The When Loaded parameter is set to “Play Next Scene”. All other settings are the default parameters.
Scene_2
Background sharedImage
The background sharedImage object (at the bottom of the Outline panel) is an instance of the movie clip sharedImage that is stored in the library.
It is resized in the Transform panel to match the desired size of the movie. In this case, 400×300. Its Reference and Transform points are changed to the top left hand corner and it is positioned at 0,0.
Scripting within the magnify movie clip expects that this object is named “sharedImage” and that it is aligned with the top left hand corner as described above.
magnify object
The magnify film clip contains all of the scripting for the effect. It has Reference and Transform points set to the center and its initial position is set to 0,0. These settings are used by the script and should not be changed.
The film clip consists of the following objects:
- lens is a 200 pixel circle with a white radial gradient that goes from white 0% alpha to white 50% alpha. This gives the glass-like look. To create a circle using the ellipse tool, press the shift key while dragging.
- sharedImage is an instance of the library object sharedImage. Note that the instance must be named sharedImage. The image is uniformly scaled in the transform panel to be 150%. The object is hidden from the layout view as its expanded size exceeds the movie size. The Reference and Transform points are set to the top left hand corner and its x,y position is set to 0, 0.
- bgnd is another circular shape. 200 pixels, white solid fill. This provides the background color should the magnifier be moved past the edge of the image.
- moviclip_mask is the mask that defines the viewable boundary of the magnify movie clip. This is also a 200 pixel circle with a solid color (any solid color will do). Note that the ‘Use bottom object as mask’ property of the magnify movie clip must be checked.
The script for the movie clip is shown below:
function SetImagePosition() {
// as magnifier is moved need to move the large magnified image a scaled amount in the opposite
// direction.
sharedImage._x = -_x * magscalex;
sharedImage._y = -_y * magscaley;
}
onSelfEvent (press) {
this.startDrag(false);
dragging = true;
}
onSelfEvent (release) {
this.stopDrag();
dragging = false;
}
onSelfEvent (load) {
dragging = false;
magscalex = sharedImage._xscale / _parent.sharedImage._xscale;
magscaley = sharedImage._yscale / _parent.sharedImage._yscale;
// move away from corner
_x = 270;
_y = 27;
SetImagePosition();
}
onSelfEvent (enterFrame) {
if (dragging) {
// reposition image within magnifier
SetImagePosition();
}
}
Script Description
The function SetImagePositon() repositions the magnified image under the lens at the appropriate position. The calculations all assume that the lens center, and the sharedImages are aligned at 0,0 i.e. the top left hand corner.
magscalex, magscaley is the calculated magnification of the lens. For each pixel the lens moves left, the underlying magnified drawing must be moved magscalex pixels to the right. Similar calcuations are applied for up / down via magscaley.
The onSelfEvent (load) sets up initial conditions. It sets the assumed drag state to false, calculates the magnification scale between magnify.sharedImage and _root.sharedImage (referred to in the script as sharedImage and _parent.sharedImage as this is with respect to the movie clip magnify), sets the initial position of the magnifier (270, 27) and then calls the function SetImagePositon().
The functions onSelfEvent (press) and onSelfEvent (release) detect mouse button press events and set the drag state of the magnify movie clip accordingly.
The onSelfEvent (enterFrame) function simply keeps the position of the magnified image correctly set via the SetImagePosition() function that was described above.
Modifications
If you wish to modify the displayed picture, edit the sharedImage movie clip by double clicking on it in the Content panel. Once it has been opened in the editor, switch to the Outline panel and import your own image. Once the image is imported, set its Reference points to top left hand corner and change its positon to 0,0. The other items in the sharedImage move clip, poem, max_logo_shape and myImage can be deleted.
Notes
If it does not work, please check the following things:
- Both scenes have the property stop playing at end checked.
- The instances of the sharedImage are both named sharedImage and have their Transform and Reference points set to top left hand corner and have an initial positon of 0,0.
- The magnify movie clip has its Transform and Reference points set to center and its initial positon is 0,0.
- The magnify movie clip has the property ‘Use bottom object as mask’ checked.