Effet de loupe

 

On se propose de montrer un effet de loupe sur une image.

Animations :

⇒ un déplacement de loupe contrôlé par le mouvement de la souris

⇒ un déplacement de loupe aléatoire

⇒ un déplacement de loupe suivant une courbe mathématique

Principe

Les dimensions de la scène sont égales aux dimensions de l'image agrandie.
On va créer une loupe qui servira de masque à l'image agrandie. Ainsi, on ne verra à l'écran que l'image normale et la loupe. Cette dernière sera associée au mouvement de la souris.

Tout d'abord, téléchargez une image

Cet exemple ne peut pas être testé dans Swishmax, seulement dans le Player ou un Navigateur !

Les différentes étapes vont être décrites maintenant.

A - Déplacement de loupe contrôlé par le mouvement de la souris

Création des Objets

1 - Définissez les dimensions générales 640x480. Couleur de fond blanc. Frame rate = 30.

2 - Importez l'image compteur.jpg (400x300) que vous centrerez à l'écran. C'est l'image de base.

Convertissez la en sprite que vous nommerez fond.

3 - Vous allez dessiner le contour circulaire de la loupe. Tracez un cercle centré dans la scène comme indiqué.

   

Convertissez en sprite que vous nommerez loupeC.
Cliquez sur loupeC, puis entrez le script suivant :

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

Celà signifie que le contour circulaire de la loupe va suivre le mouvement de la souris.

4 - Vous allez tracer le même contour circulaire, cette fois-ci rempli. Nommez le loupe

5 - Importez à nouveau l'image compteur.jpg, centrée à l'écran mais de taille 160%. Nommez la fondX.

6 - Sélectionnez loupe et fondX. Groupez les en sprite que vous nommerez masque.

Ne pas oublier de cocher la case !

7 - Pour l'objet loupe de masque, entrez le script suivant :

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

Celà permet de bien positionner cet objet par rapport au contour circulaire.

8 - Pour le sprite nommé masque, entrez le script suivant :

onLoad () { startDrag(true); }

Le masque va pouvoir ainsi se déplacer comme la souris.

Script SwishMax

Voici le script général de Scene_1. Il a pour but d'amener la loupe au niveau du pointage de l'image de base alors que le masquage s'effectue au niveau de l'image agrandie.
On voit ainsi que l'on n'effectue pas réellement un agrandissement local mais seulement un effet basé sur l'image déjà agrandie qui est masquée par une zone circulaire que l'on déplace avec la souris.

onLoad ()
{
   // calcule le rapport des images
   zoom = masque.fondX._xscale / fond._xscale;
   // coeff de réduction à appliquer pour la position du masque
   shrink = zoom * 0.4;
   Mouse.hide(); // cache le curseur souris
}
// on déplace le masque au niveau de la zone à grossir, sinon le résultat est minable!
function position()
{
   masque._x = fond._X - shrink*(_root._xmouse - fond._X);
   masque._y = fond._Y - shrink*(_root._ymouse - fond._Y);
}
onEnterFrame() { position(); }

Et voilà, à vous d'adapter en fonction du grossissement souhaité.

B - Déplacement de loupe aléatoire

Je n'indiquerais que les modifications à apporter aux scripts. Prenez d'abord Frame rate = 80.
Voici le script général modifié de Scene_1.

onLoad ()
{
   // calcule le rapport des images
   zoom = masque.fondX._xscale / fond._xscale;
   // coeff de réduction à appliquer pour la position du masque
   shrink = zoom * 0.4;
    //Mouse.hide();
    // récupère les dimensions de la scène
    H = Stage.height;
    W = Stage.width;
    // calcule les distances entre l'img et les bords de scène.
    deltaX = (W - fond._width) / 2;
    deltaY = (H - fond._height) / 2;
    // pt de départ initial.
    _Xpos = W-deltaX;
    _Ypos = int(Math.randomRange(deltaY,H-deltaY) );
    // drapeau pour revenir en arrière
    reverse = false;
}
function goOn()
{
    // on part trop à gauche ⇒ revient en arrière
   if (_root._Xpos <= deltaX)
   {
       _root._Xpos = deltaX;
       _root._Ypos = int(Math.randomRange(deltaY,H-deltaY) );
       reverse = true;
   }
   else
    // on part trop à droite ⇒ revient en arrière
   if (_root._Xpos >= W-deltaX )
   {
       _root._Xpos = W-deltaX;
       _root._Ypos = int(Math.randomRange(deltaY,H-deltaY) );
       reverse = false;
}
   position();
}
// on déplace le masque au niveau de la zone à grossir
function position()
{
   // test du sens de parcours
   (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 ); // toutes les ms
    goOn();
}

Supprimez le script du sprite masque défini en §8
Voici le script modifié de l'objet loupe de masque défini en §7.

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

Voici le script modifié du sprite loupeC défini en §3.

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

C - Déplacement de loupe suivant une courbe mathématique

La courbe mathématique est :
x = a tan( t/2 )
y = a cos( t )
Elle a été ramenée à un systême de coordonnées lié à l'image ( voir plus loin x(i) et y(i) )
Je n'indiquerais que les modifications à apporter aux scripts de B. Prenez d'abord Frame rate = 80.
Seul le script de Scene_1 est modifié.

onLoad ()
{
    // calcule le rapport des images
    zoom = masque.fondX._xscale / fond._xscale;
    // coeff de réduction à appliquer pour la position du masque
    shrink = zoom * 0.4;
    // récupère les dimensions de la scène
    H = Stage.height;
    W = Stage.width;
    a = fond._width / 2;
    n = 100;
    dt = Math.PI / n; // incrément PI/n
    // on va partir du coin bas gauche de l'image
    xxx = 0;
    _Ypos = y(xxx);
    _Xpos = x(xxx);
    // drapeau pour revenir en arrière
    reverse = false;
}
/*------------------------------------------------------
    i = 0 ⇒ coin bas gauche
    i = n ⇒ coin bas droite
-------------------------------------------------------*/
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()
{
    // on part trop à droite ⇒ revient en arrière
    if ( xxx >= n ) reverse = true;
    else
    if ( xxx <= 0 ) reverse = false;
    position();
}
// on déplace le masque au niveau de la zone à grossir
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();
}
Les autres scripts ne sont pas modifiés.

 


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.

vers Google