Magnifying glass effect

 

The purpose is to show a magnifying effect over an image.

Animations :

⇒ animation controlled with mouse.

⇒ animation ramdomly controlled.

⇒ animation mathematically controlled.

Principe

The sizes of the scene 'll be the same as the enlarged image. We create a magnifying glass as a mask of this image. Thus, you 'll see only the normal image and the magnifying glass. This last 'll move as the mouse move.

First, download the image file.

You can run this example only in Player or Browser!

We gonna describe the differents stages right away.

A - Animation controlled with mouse

Creating Objects

1 - Set up 640x480. White background color. Frame rate = 30.

2 - Import image compteur.jpg (400x300) centered in scene. This is the basic image.

Convert to sprite named fond.

3 - Now you 'll draw the outline of the magnifying glass : a circle centered in scene as shown.

   

Convert to sprite named loupeC.
Click upon loupeC in the Outline tree, and enter the following script :

onEnterFrame()
{
   this._x = _root._xmouse;
   this._y = _root._ymouse;
}

This means the circular outline 'll follow mouse.

4 - Now, draw the same circular outline but filled. Name it loupe

5 - Import again the image compteur.jpg, centered at screen but 160%. Name it fondX.

6 - Select both loupe and fondX. Group as sprite name masque.

Don't forget to toggle !

7 - For loupe in masque, enter the following script :

onEnterFrame()
{ // origin = center !!!
   // _parent ⇒ masque (X= 320 Y=240 )
   this._x = _root._xmouse - _parent._X;
   this._y = _root._ymouse - _parent._Y;
}

This allows this objet to be well positioned relative to the circular outline.

8 - For the sprite named masque, enter the following script :

onLoad () { startDrag(true); }

masque 'll move as mouse.

SwishMaxv Script

Here is general script for Scene_1. The magnifying glass 'll move at the real point whereas mask was made with the enlarged image. So you could see we don't really make a local enlargement but only an effect based upon an enlarged masked image!

onLoad ()
{
   // work out ratio images
   zoom = masque.fondX._xscale / fond._xscale;
   // for real position
   shrink = zoom * 0.4;
   Mouse.hide(); // hide mouse cursor
}
// we move masque at the real place, either we get a poor result !
function position()
{
   masque._x = fond._X - shrink*(_root._xmouse - fond._X);
   masque._y = fond._Y - shrink*(_root._ymouse - fond._Y);
}
onEnterFrame() { position(); }

That's it ! It's up to you to fit according to your needs (magnification).

B - Animation ramdomly controlled

I only 'll show you changes I made to the scripts. First set Frame rate = 80.

onLoad ()
{
   // images ratio
   zoom = masque.fondX._xscale / fond._xscale;
   // apply a shrink
   shrink = zoom * 0.4;
    //Mouse.hide();
    // get Stage sizes
    H = Stage.height;
    W = Stage.width;
    // work out distances between img and edges.
    deltaX = (W - fond._width) / 2;
    deltaY = (H - fond._height) / 2;
    // init coordinates.
    _Xpos = W-deltaX;
    _Ypos = int(Math.randomRange(deltaY,H-deltaY) );
    // flag to reverse motion
    reverse = false;
}
function goOn()
{
    // beyond left limit ⇒ back off
   if (_root._Xpos <= deltaX)
   {
       _root._Xpos = deltaX;
       _root._Ypos = int(Math.randomRange(deltaY,H-deltaY) );
       reverse = true;
   }
   else
    // beyond right limit ⇒ back off
   if (_root._Xpos >= W-deltaX )
   {
       _root._Xpos = W-deltaX;
       _root._Ypos = int(Math.randomRange(deltaY,H-deltaY) );
       reverse = false;
}
   position();
}
// move the mask towards zone
function position()
{
   // which direction ?
   (reverse==true) ? _root._Xpos++ : _root._Xpos--;
   masque._x = fond._X - shrink*(_root._Xpos - fond._X);
   masque._y = fond._Y - shrink*(_root._Ypos - fond._Y);
}
onFrame(1)
{
    timer = setInterval( goOn, 1 ); // every ms
    goOn();
}

Delete script of sprite masque defined in §8. Here is a script for object loupe in masque defined in §7.

onEnterFrame()
{ // origine = centre
   // _parent ⇒ masque (X= 320 Y=240 )
   this._x = _root._Xpos - _parent._X;
   this._y = _root._Ypos - _parent._Y;
}

Here is script for sprite loupeC defined in §3.

onEnterFrame() {    this._x = _root._Xpos;
   this._y = _root._Ypos;
}

C - animation mathematically controlled

The mathematical curve has for coordinates :
x = a tan( t/2 )
y = a cos( t )
It has been set to fit the image coordinates ( see x(i) et y(i) further )
I only 'll show you changes I made to the scripts written in B.
Only script of Scene_1 has been modified.

onLoad ()
{
    // images ratio
    zoom = masque.fondX._xscale / fond._xscale;
    // apply a shrink
    shrink = zoom * 0.4;
    // get Stage sizes
    H = Stage.height;
    W = Stage.width;
    a = fond._width / 2;
    n = 100;
    dt = Math.PI / n; // increment PI/n
    // we start from left bottom corner
    xxx = 0;
    _Ypos = y(xxx);
    _Xpos = x(xxx);
    // flag to back off
    reverse = false;
}
/*------------------------------------------------------
    i = 0 ⇒ Left bottom corner
    i = n ⇒ Right bottom corner
-------------------------------------------------------*/
function x(i)
{
    t = -Math.PI / 2 + i * dt;
    return ( (W / 2) + a * Math.tan(t/2) );
}
function y(i)
{
    t = -Math.PI / 2 + i * dt;
    return ( ((H+fond._height)/2) - a * Math.cos(t) );
}
function goOn()
{
    // right limt reached ⇒ back off
    if ( xxx >= n ) reverse = true;
    else
    if ( xxx <= 0 ) reverse = false;
    position();
}
// move the mask towards zone
function position()
{
    (reverse==true) ? _root.xxx-- : _root.xxx++;
    _Ypos = y(xxx); _Xpos = x(xxx);
    masque._x = fond._X - shrink*(_root._Xpos - fond._X);
    masque._y = fond._Y - shrink*(_root._Ypos - fond._Y);
}
onFrame(1)
{
    timer = setInterval( goOn, 1 ); // toutes les ms
    goOn();
}
The other scripts remain unchanged.

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.004 sec.

Dernière Modification : Mer 25 Janvier 2017 8:56
Copyright © 1999-2017 Jean-Paul Molina Tous droits réservés.

to Google