3 zooms differents d'un sprite avec la molette [as3]

Télécharger le projet
Commenter

Description

MAJ :
Vu les premiers commentaires, j'ai hésité à retirer mon message... qui n'avait pas vraiment été lu.
Bref, afin de proposer un truc plus complet, voici une petite mise à jour qui ne correspond plus à ma problématique, mais qui donne une petite présentation de 3 fonctions de zoom à la molette sur un sprite
- zoom classique avec la propriété scaleX et scaleY
- zoom à partir du centre du sprite
- zoom par rapport à la position du curseur par rapport au sprite, point intéressant puisque il faut bien faire attention à être dans le même système de coordonnées !

Ne faisant pas de flash, il doit certainement me manquer des éléments faisant partie de la "philosophie Flash" (utilisation de stage à la place ? pas trop regarder à quoi cela servait, par exemple).

ps: j'étais parti sur l'utilisation de addChildAt afin de pouvoir importer un SWF contenant des boutons et de le mettre sous le SWF principal, tout en accordant la propagation des événements souris à ce SWF avec "conteneur.mouseChildren = true;"

edit: le but étant d'obtenir un zoom sur le curseur comme la plupart des outils de CAO

MESSAGE DE DEPART :
Ma problématique de départ :
Avoir un plan sous Illustrator où certaines formes devaient pouvoir être cliquable, et accessoirement, pouvoir se déplacer de manière intuitive dans le plan.

C'est ce second point que je présente ici.
La solution mise en place consiste à utiliser 3 fichiers SWF, de dimensions identiques :
- un conteneur
- le fichier SWF de l'exportation pour le web à partir d'Illustrator, moins les formes devant être cliquables
- le fichier SWF sous Flash réalisé avec un copier/coller (sur place, pour conserver le positionnement) des zones devant être cliquables. Ces formes ont été converties en bouton, avec un Listener à base de switch sur le nom des instances de boutons.

Bref, je ne présente que la source du conteneur pour le moment (par manque de temps).

Source / Exemple : 


import flash.display.Sprite;
import flash.events.MouseEvent;

stop();

//
//	Création d'un Sprite conteneur
//	Création d'un Sprite rectangle afin de pouvoir tout le temps déplacé le sprite conteneur
//
var conteneur:Sprite = new Sprite();
conteneur.name = "conteneur";
this.addChild(conteneur);

var rect:Sprite = new Sprite();
rect.graphics.beginFill(0xF0F0F0);
rect.graphics.drawRect(0,0,842,595);
rect.buttonMode = false;	// afin de garder le curseur de la souris et non la main

//
//	Chargement des logos
//
var request_FK:URLRequest = new URLRequest("logoflash.png");
var logoFK:Loader = new Loader();
logoFK.load(request_FK);

var request_CS:URLRequest = new URLRequest("logocs.png");
var logoCS:Loader = new Loader();
logoCS.load(request_CS);

var request_VB:URLRequest = new URLRequest("logovb.png");
var logoVB:Loader = new Loader();
logoVB.load(request_VB);

var request_ASP:URLRequest = new URLRequest("logoasp.png");
var logoASP:Loader = new Loader();
logoASP.load(request_ASP);

var request_CPP:URLRequest = new URLRequest("logocpp.png");
var logoCPP:Loader = new Loader();
logoCPP.load(request_CPP);

var request_CFM:URLRequest = new URLRequest("logoCFM.png");
var logoCFM:Loader = new Loader();
logoCFM.load(request_CFM);

//
//	Ajout des éléments au Sprite conteneur
//
conteneur.addChildAt(rect,0);
conteneur.addChildAt(logoFK,1);
conteneur.addChildAt(logoCS,2);
conteneur.addChildAt(logoVB,3);
conteneur.addChildAt(logoASP,4);
conteneur.addChildAt(logoCPP,5);
conteneur.addChildAt(logoCFM,6);

//
//	Positionnement des logos
//
logoCS.x = 240; logoCS.y = 0;
logoVB.x = 480; logoVB.y = 0;
logoASP.x = 0; logoASP.y = 90;
logoCPP.x = 240; logoCPP.y = 90;
logoCFM.x = 480; logoCFM.y = 90;

//
//	Cacher le menu de base afin de ne pas avoir la possibilité de zoomer sur le flash lui-même !
//
var menu:ContextMenu = new ContextMenu();
menu.hideBuiltInItems();
conteneur.contextMenu = menu;

//
//	Définition des variables, temporaires ou non
//
var tempX = conteneur.x;		// position du point de transformation avant redimensionnement
var tempY = conteneur.y;		// position du point de transformation avant redimensionnement
var tempW = conteneur.width;	// largeur du conteneur avant redimensionnement
var tempH = conteneur.height;	// hauteur du conteneur avant redimensionnement
var resultW = conteneur.width;	// largeur obtenue par le redimensionnement
var resultH = conteneur.height;	// hauteur obtenue par le redimensionnement
var ratio = 1.1;				// définition du ratio fixe pour le zoom
								// Attention : il est valable sur les dimensions d'origine du sprite conteneur

//
//	Gestion des événements souris afin de déplacer/zoomer le conteneur
//
conteneur.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
function mouseDown(event:MouseEvent):void {
	conteneur.startDrag();
}

conteneur.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
function mouseReleased(event:MouseEvent):void {
    conteneur.stopDrag();
	// Puisque l'utilisateur a déplacé le conteneur, il faut redéfinir la position du point de transformation (l'angle supérieur gauche)
	tempX = conteneur.x;
	tempY = conteneur.y;
}

conteneur.addEventListener(MouseEvent.MOUSE_WHEEL, zoomCentre);
function zoom(e:MouseEvent):void
{
	if (e.delta > 0) //delta > 0 lorsque la molette va vers l'avant : réduction
	{
		conteneur.scaleX *= 1.1;
		conteneur.scaleY *= 1.1;
	}
	else //delta < 0 lorsque la molette va vers l'arrière : agrandissement
	{
		conteneur.scaleX /= 1.1;
		conteneur.scaleY /= 1.1;
	}
}
function zoomCentre(e:MouseEvent):void // Zoom sur le centre du conteneur, quelque soit sa position
{
	if (e.delta > 0) //delta > 0 lorsque la molette va vers l'avant : réduction
	{
		conteneur.width /= ratio;
		conteneur.height /= ratio;
	}
	else //delta < 0 lorsque la molette va vers l'arrière : agrandissement
	{
		conteneur.width *= ratio;
		conteneur.height *= ratio;
	}
	conteneur.x += (tempW-conteneur.width)/2;
	conteneur.y += (tempH-conteneur.height)/2;
	tempX = conteneur.x;
	tempY = conteneur.y;
	tempW = conteneur.width;
	tempH = conteneur.height;
}

function zoomCurseur(e:MouseEvent):void // Zoom sur la position du curseur, quelque soit la position du conteneur
{
	if (e.delta > 0) //delta > 0 lorsque la molette va vers l'avant : réduction
	{
		conteneur.width /= ratio;
		conteneur.height /= ratio;
	}
	else //delta < 0 lorsque la molette va vers l'arriere : agrandissement
	{
		conteneur.width *= ratio;
		conteneur.height *= ratio;
	}
	conteneur.x += (tempW-conteneur.width)/(tempW/(conteneur.parent.mouseX-tempX));
	conteneur.y += (tempH-conteneur.height)/(tempH/(conteneur.parent.mouseY-tempY));
	tempX = conteneur.x;
	tempY = conteneur.y;
	tempW = conteneur.width;
	tempH = conteneur.height;
}

Conclusion :


A faire :
- définir des limites
- définir des niveaux de zoom (si besoin)
- réaliser une autre fonction zoomExtraSoft qui aura des transitions fluides sur les étapes de MouseEvent.MOUSE_WHEEL

A comprendre :
- pourquoi sous MacOS X.5 avec Safari ou Firefox et une mighty mouse, cela ne fonctionne pas de tout...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.