21/02/2008

DisplayObjectZoom AS3 zooming class.

La problématique: “En réponse a un clic souris sur une image, l’image doit être agrandie, a la manière d’un zoom” (tout ça se passe bien entendu dans flash).

Sur le coup ça m’a semblé assez simple… en pratique ça n’a pas été aussi simple que ça (pour moi…).

Premier soucis, l’aspect mathématique du problème (je ne m’étalerais pas dessus…). Deuxième soucis, comment faire quelque chose de simple et facilement réutilisable (avec des Objets)…

Dans un premier temps j’ai pensé créer un “module” de zoom, a qui l’on pourrait transmettre les images sur lesquelles on voudrait effectuer un zoom. Je n’ai pas retenus cette option car elle ne m’est pas apparut assez souple. En effet, il aurait fallut instancier un module de zoom, le placer sur la scène, ajuster ça taille, définir ce qu’il se passe quand il n’y a pas d’image…

La deuxième solution (celle retenue) est la suivante : développer une fonctionnalité, offrir a une image la possibilité d’être agrandie au lieu de créer une « machine a zoom ». Au début j’ai bien pensé a étendre les classes « Loader », « Sprite »… je me suis vite repris (très mauvaise idée…). La solution : un objet qui effectue les opérations d’agrandissement sur un « DisplayObject » passé en paramètre, pas plus pas moins. Nous avons donc une image (« DisplayObject ») avec une taille donnée de départ, puis une fois transmise à notre objet gérant le zoom, celui-ci l’agrandi tout en conservant ses dimensions d’affichage grâce a un masque (finalement cette solution est un peut comme la première… ???).

Bref, quelques heures plus tard voila le résultat : DisplayObjectZoom !

Son utilisation est très simple, voici un exemple :

//création instance DisplayObjectZoom.
var z:DisplayObjectZoom=new DisplayObjectZoom(stage,8,0.2);
//stage: il faut transmetre en parametre une référence au stage
//afin de prendre en compte le redimensionnement de la scene.
//8: le facteur ZOOM, dans ce cas zoom X8 (par defaut 2).
//0.2: le facteur "Easing" (par defaut 0.6).
//ensuite on suppose que vous avez un objet DisplayObject somewhere...
//il suffit de passer cet objet au parametre 'target' du 'DOZoom'
//pour que l'objet puisse etre agrandi sur un clic de souris.
z.target=monDisplayObject

Voila les sources: ici (la classe n’est pas finalisée a 100%…).