#1 Comment faire un effet de loupe

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Comment faire un effet de loupe

simsay86 a écrit:

Mais voilà, j'aimerais créer une animation du même type que celle à cette adresse:

http://www.hysek.com/en/nc/collections.html

et on m'a dit que c'est possible avec e-anim, mais qu'il faut faire de la programmation. Hors je ne connais strictement rien dans ce domaine. Quelqu'un pourrait-il m'aider à réaliser cette animation en me montrant comment programmer un tel code?

Le but est donc d'avoir une image et que quand on passe dessus avec la souris, cela crée un zoom. Et que quand on déplace la souris sur l'image, le zoom suive la partie montrée par le curseur de la souris. Et ce, pour n'importe quelle image (si c'est possible).

Merci infiniement à celui ou celle qui pourrait m'éclairer et me faire avant.

A bientôt!

Voilà on va faire étape par étape, si tu as besoin d'image ou autre fais moi signe wink (j'admets dans la suite que tu connais plus ou moins les bases wink):

1)Créer un nouveau groupe
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_1.png
2)Dans ce groupe créer un bouton complexe (Objet>Ajouter...>Un bouton complexe)
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_2.png
3)Dans ce bouton complexe à l'état "Normal" ajoute un groupe.
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_3.png
4)Dans ce groupe ajoute ton image, sort du groupe et retourne dans le bouton complexe toujours à l'état "Normal"
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_4.png
5) Modifie la taille du groupe contenant l'image avec comme dimension: x%:50, y%:50 dans les champs qui se trouvent en haut à droite (s'ils ne sont pas présents, clique deux fois sur les coordonnées de l'objet situées à côté de la barre des temps cf. image big_smile)
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_5.png
Met lui une action,le bouton orange doit indiquer:"L'objet déclenche l'action immédiatement au temps indiqué", ensuite clique sur le bouton "programmer", met ce code dans le champs:

Code:

_root/objet1._x=_root.initital_posx_obj1;
_root/objet1._y=_root.initital_posy_obj1;

http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_5b.png
6)Maintenant va à l'état "Survolé", au temps 10, met les dimensions du groupe contenant l'image à: 100% pour le x et y. Puis met un stop à ce temps.
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_6.png
REMARQUE IMPORTANTE: Le point origine(la petite croix) doit toujours être au centre de l'image. Pour le repositionner, cliquez-déposez le.
7)Ajoute (toujours au temps 10 et à l'état "Survolé") un groupe dans lequel tu ajoute un rectangle transparent.
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_7.png
Met une action à ce rectangle, vérifie que le bouton orange indique:"L'objet déclenche l'action immédiatement au temps indiqué", ensuite clique sur le bouton "programmer", met ce code dans le champs:

Code:

posx=_root/objet1._x;
posy=_root/objet1._y;
xmask=_root/masque._x;
ymask=_root/masque._y;
xm=_root._xmouse;
ym=_root._ymouse;
coeff=5;
cible_x=xmask-(xm-xmask);
cible_y=ymask-(ym-ymask);
coeffx=(cible_x-posx)/coeff;
coeffy=(cible_y-posy)/coeff;

if(posx!=cible_x)
{
posx=posx+coeffx;
}

if(posy!=cible_y)
{
posy=posy+coeffy;
}

_root/objet1._x=posx;
_root/objet1._y=posy;

http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_8.png
Ensuite clique sur le temps 1 pour ajouter un temps au groupe.
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_9.png
8)Retourne à l'écranDeBase, puis nomme le premier groupe que l'on a créé contenant le bouton complexe: "objet1".
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_10.png
Et met lui une action, toujours avec le bouton orange qui doit indiquer "L'objet déclenche l'action immédiatement au temps indiqué",c'est un programme donc clique sur le bouton "programmer", et met ce code dans le champs:

Code:

_root.initital_posx_obj1=_root/objet1._x;
_root.initital_posy_obj1=_root/objet1._y;

http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_8b.png
9)Crée dans l'écran de base un groupe dans lequel tu ajoute un rectangle plein de la taille de l'image rétrécie (avec 50% de largeur et longueur) que tu a ajouté.
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_11.png
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_12.png
REMARQUE IMPORTANTE: Pareil que pour le groupe qui contient l'image,le point origine(la petite croix) doit aussi être au centre du rectangle plein.
Met lui une action au temps 0 qui sera un programme, de même vérifie que le bouton orange indique:"L'objet déclenche l'action immédiatement au temps indiqué". Le programme sera le suivant:

Code:

ActionCallFunction_1("_root/objet1.setMask", _root/masque);

Ce code permet d'utiliser ce groupe comme masque.
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_13.png
10)Retourne à l'écran de base et nomme ce groupe:"masque".
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_14.png
11)Enfin superposez le groupe masque sur le groupe objet1 wink.
http://infoprographiesimple.free.fr/tutos_Eanim/effet_loupe_15.png
Voilà c'est fini, enregistre et test big_smile.



Bon ce petit tutoriel est super simplifié tongue donc si tu as besoins d'images à tel endroit, ou que tu as besoin d'éclaircissement ou encore si tu as des questions n'hésite surtout wink.


Hors ligne

Posté le 25-05-2008 17:35:07

 

Pied de page des forums

Propulsé par FluxBB
Traduction par fluxbb.fr