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

Soyez le premier à donner votre avis sur cette source.

Vue 7 591 fois - Téléchargée 869 fois

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...

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
4
Date d'inscription
lundi 13 juillet 2009
Statut
Membre
Dernière intervention
15 juillet 2009

Encore moi
:-)

Je suis toujours sur ton code, j'ai modifié comme suit:

"
import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
import flash.events.MouseEvent;

stop();

//
// Création d'un Sprite conteneur
//
var conteneur:Sprite = new Sprite();
conteneur.name = "conteneur";
this.addChild(conteneur);
conteneur.buttonMode = true; // afin d'avoir la main et nom la flèche

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

//
// Ajout de l'éléments au Sprite conteneur
//
conteneur.addChildAt(logoFK,0);

//
// Positionnement du logos
//logoFK.x (this.stage.stageWidth-logoFK.width)/2; logoFK.y (this.stage.stageHeight-logoFK.height)/2;
trace(" taille de mon image= "+logoFK.width+" * "+logoFK.height);
trace(" taille du conteneur= "+conteneur.width+" * "+conteneur.height);
trace(" taille du document flash= "+this.stage.stageWidth+" * "+this.stage.stageHeight);

//
// Définition des variables, temporaires ou non
//
var tempX = logoFK.x; // position du point de transformation avant redimensionnement
var tempY = logoFK.y; // position du point de transformation avant redimensionnement
var tempW = logoFK.width; // largeur du sprite avant redimensionnement
var tempH = logoFK.height; // hauteur du sprite avant redimensionnement
var resultW = logoFK.width; // largeur obtenue par le redimensionnement
var resultH = logoFK.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
//
logoFK.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
function mouseDown(event:MouseEvent):void {
// application du filtre au rectangle.
var blur:BlurFilter = new BlurFilter();
blur.blurX = 10;
blur.blurY = 10;
blur.quality = BitmapFilterQuality.MEDIUM;
logoFK.filters = [blur];

}

logoFK.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
function mouseReleased(event:MouseEvent):void {
var cartoonSmartURL:URLRequest = new URLRequest("http://www.cartoonsmart.com");
navigateToURL( cartoonSmartURL , "_blank");
}

logoFK.addEventListener(MouseEvent.MOUSE_WHEEL, zoomCentre);
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
{
logoFK.width /= ratio;
logoFK.height /= ratio;
}
else //delta < 0 lorsque la molette va vers l'arrière : agrandissement
{
logoFK.width *= ratio;
logoFK.height *= ratio;
}
logoFK.x += (tempW-logoFK.width)/2;
logoFK.y += (tempH-logoFK.height)/2;
tempX = logoFK.x;
tempY = logoFK.y;
tempW = logoFK.width;
tempH = logoFK.height;
}
"

ça fonctionne bien, cad le sprite apparaît centré puis est zoomable/dézoomable, a condition que
1) l'utilisateur clique sur une partie vide du document flash
2) l'utilisateur actionne la molette de la souris au dessus du sprite
??????
Qui plus est, les traces me renvoient des valeurs de 0 pour logoFK.width, logoFK.height, conteneur.width, conteneur.height
??????

J'veux bien un peu d'aide là svp, je sèche
Messages postés
4
Date d'inscription
lundi 13 juillet 2009
Statut
Membre
Dernière intervention
15 juillet 2009

Salut nextdrOp
Je suis complètement novice en action script.
Ton script va (peut-être) me permettre de zoomer/dézoomer un sprite au passage de la souris, en as3.
Par contre j'ai remarqué que ton script ne démarre QUE si l'utilisateur effectue un CLIQUE sur la fenêtre/le document flash. Le changement de taille au départ pas accessible, est-ce que tu sais pourquoi?

nCha
Messages postés
576
Date d'inscription
mercredi 5 janvier 2005
Statut
Membre
Dernière intervention
12 mai 2009

Salut,

l'évenement MOUSE_WHEEL ne marche pas sous MAC.
Il faut donc lui fournir une alternative, par exemple en utilisant les touches up & down.

Stef.
Messages postés
2
Date d'inscription
mercredi 8 mars 2006
Statut
Membre
Dernière intervention
15 mai 2009

Sachant que le seul intérêt de ce bout de code réside dans la formule de math afin de faire un zoom par rapport à la position du curseur. Est-ce que sa place est ici ou sur le forum ? Je ne sais répondre à cette question.
Messages postés
2
Date d'inscription
mercredi 8 mars 2006
Statut
Membre
Dernière intervention
15 mai 2009

Pas de soucis Peg.

Fais comme bon te semble. Comme j'ai utilisé d'autres sources qui répondait à la recherche "zoom molette", et que cela m'avait permis de m'aiguiller, je pensais que cela était sympa de partager en retour.

Maintenant, je n'ai pas fait ce bout de code pour le plaisir, mais pour mon travail, qui ne consiste absolument à toucher au flash d'habitude. J'ai commencé la rédaction des fichiers épurée des noms en rapport avec notre client, mais le temps me manque. Je travaille dans l'événementiel. Notre rythme est... rapide. Voir trop.

Pour vous faire patientez jusqu'à ce week end : http://www.dparchi.com/salons/64eCOEC/64eCOEC.swf

Merci pour ta compréhension.
Afficher les 8 commentaires

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.