InfoProGraphie Simple > Tutoriels > Graphisme > Animation > E-anim > Loupe au passage de la souris

Eanim - Loupe au passage de la souris

Information du tutoriel

http://infoprographiesimple.free.fr/forums/img/avatars/2.png Auteur: DrNaBl


Le but de ce tutoriel est d'avoir un zoom sur une image quand on passe le pointeur de souris dessus. Le zoom suivra la position de la souris;).

Pas à pas

1)Créons un nouveau groupe

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_1.png

2)Dans ce groupe, créons un bouton complexe (Objet>Ajouter...>Un bouton complexe)

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_2.png

3)Dans ce bouton complexe à l'état "Normal", ajoutons un groupe.

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_3.png

4)Dans ce groupe on ajoute notre image, puis on sort du groupe et on retourne dans le bouton complexe toujours à l'état "Normal".

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_4.png

5) Modifions ensuite 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, il faut cliquer deux fois sur les coordonnées de l'objet situées à côté de la barre des temps cf. image :D)

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_min_5.png

Mettons lui une action,le bouton orange doit indiquer:"L'objet déclenche l'action immédiatement au temps indiqué", ensuite cliquons 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_animation_Eanim/effet_loupe_5b.png

6)Maintenant on va à l'état "Survolé", au temps 10, et on met les dimensions du groupe contenant l'image à: 100% pour le x et y. Puis on met un stop à ce temps.

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_min_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)Ajoutons (toujours au temps 10 et à l'état "Survolé") un groupe dans lequel on ajoute un rectangle transparent.

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_7.png

Mettons une action à ce rectangle, et vérifions que le bouton orange indique:"L'objet déclenche l'action immédiatement au temps indiqué", ensuite cliquons sur le bouton "programmer", et mettons 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_animation_Eanim/effet_loupe_8.png

Ensuite cliquons sur le temps 1 pour ajouter un temps au groupe.

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_9.png

8)Ensuite on retourne à l'écranDeBase, puis on nomme le premier groupe que l'on a créé (contenant le bouton complexe): "objet1".

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_10.png

On lui met 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 on clique sur le bouton "programmer", et on 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_animation_Eanim/effet_loupe_8b.png

9)Créons dans l'écran de base un groupe dans lequel on va ajouter un rectangle plein de la taille de l'image rétrécie (avec 50% de largeur et longueur) que l'on a ajouté auparavant.

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_11.png

http://infoprographiesimple.free.fr/tutos_animation_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.
Mettons lui une action au temps 0 qui sera un programme, de même vérifions 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_animation_Eanim/effet_loupe_13.png

10)Retournons à l'écran de base et nommons ce groupe:"masque".

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_14.png

11)Enfin superposons le groupe masque sur le groupe objet1;).

http://infoprographiesimple.free.fr/tutos_animation_Eanim/effet_loupe_15.png

Voilà c'est fini, enregistrons le fichier .phi, ainsi que le fichier.html et testons :D.


Les cours sont la propriété de leurs auteurs respectifs.
Toute reproduction totale ou partielle sans l'accord des auteurs est interdite.