Effet de loupe.
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.
Téléchargez d'abord l'image de base.
Les différentes étapes vont être décrites maintenant.
A - Déplacement de loupe contrôlé par le mouvement de la souris
Partie 1 : Création des Objets.
1 - Définissez les dimensions générales 640x480. Couleur de fond blanc.
vitesse = 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 :
- Code:
-
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 :
- Code:
-
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 :
- Code:
-
onLoad ()
{ startDrag(true); }
Le masque va pouvoir ainsi se déplacer comme la souris.
Partie 2 : 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.
- Code:
-
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é.
voici le resultat :