As3 - simulation de grille d'édition

Télécharger le projet
Commenter

Description

Ce bout de code permet de simuler une grille sur l'écran pour tout mode d'édition.

Dans le cas où nous aurions besoin de créer une grille de 256x128 avec interaction, beaucoup utiliseraient autant d'éléments carrés pour saisir l'interaction au clic. ce qui nous ferait nu total de 32768 éléments à l'écran. Je doute que flash apprécie.

La méthode proposée est une astuce pour simuler visuellement et logiquement ces éléments sur une zone définie.

Peg'

ps: La source est au format CS3, mais pour une obscure raison il a été impossible à CS5 d'enregistrer la source autrement qu'en CS4. Le code est cependant utilisable par un copier/coller dans une nouvelle animation.

Source / Exemple : 


import flash.display.*;
import flash.events.*;
import flash.geom.*;

/*-------------------------------------------------------------------------------*/
/*-- Code permettant de simuler une grille d'édition avec gestion de la souris --*/
/*--   Sans avoir besoin de créer une grille d'éléments réactifs à la souris   --*/
/*-------------------------------------------------------------------------------*/

/*-- Variables de base --*/

//zone définis la zone active de la grille sur l'écran (en pixels)
var zone:Rectangle = new Rectangle (19, 24, 512, 320);

//bloc définis la taille de chaque case (en pixels)
var bloc:Object = {width:16, height:16};

//cursor est un graph de la taille d'un bloc, servant à indiquer la grille visée par la souris
var cursor:Shape = new Shape();

//draw est la couleur de dessin lors du clic
var draw:int = 0x0000FF;

/*-- Dessin et mise en place des différents éléments --*/

//dessin du curseur
cursor.graphics.lineStyle(0, 0xFF0000);
cursor.graphics.drawRect(0, 0, bloc.width, bloc.height);
cursor.visible = false;
this.addChild(cursor);

//dessin de la zone active
this.graphics.beginFill(0, .1);
this.graphics.drawRect(zone.x, zone.y, zone.width, zone.height);
this.graphics.endFill();

/*-- gestion de l'interaction et des évènnements de souris --*/

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);

function mouseHandler(evt:MouseEvent):void {
	//récupération du point sous le curseur de la souris
	var pt:Point = new Point (evt.currentTarget.mouseX, evt.currentTarget.mouseY);
	//Gestion celon l'évènnement
	switch(evt.type) {
		//gestion du mouvement de la souris
		case "mouseMove" :
			if (zone.contains(pt.x, pt.y)) {
				//si la souris est dans la zone active
				stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
				moveCursor(pt); //on déplace le curseur
			} else {
				//si la souris est hors de la zone active
				stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
				stage.removeEventListener(MouseEvent.MOUSE_UP, mouseHandler);
				initCursor(); //on réinitialise le curseur
			}
			evt.updateAfterEvent(); //permet la fluidité du mouvement, même en bas FPS
			break;
		//gestion de l'appuie sur la souris
		case "mouseDown" :
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseHandler);
			//masque le curseur
			cursor.visible = false;
			//dessine un carré à l'endroit degigné
			this.graphics.beginFill(draw, 1);
			this.graphics.drawRect(cursor.x, cursor.y, bloc.width, bloc.height);
			this.graphics.endFill();
			break;
		//gestion du relaché de souris
		case "mouseUp" :
			stage.removeEventListener(MouseEvent.MOUSE_UP, mouseHandler);
			//réaffiche le curseur
			cursor.visible = true;
			break;
	}
}

/*-- fonctions de gestion du curseur --*/

//fonction déplaçant le curseur d'édition si nécessaire
function moveCursor(pt:Point):void {
	//si le curseur n'est pas déjà au même endroit
	if(cursor.x!=pt.x || cursor.y!=pt.y) {
		//calcul des coordonnées sur la grille
		var gridX = Math.floor((pt.x-zone.x)/bloc.width);
		var gridY = Math.floor((pt.y-zone.y)/bloc.height);
		//place le curseur à l'endroit désigné
		cursor.x = (gridX*bloc.width)+zone.x;
		cursor.y = (gridY*bloc.height)+zone.y;
	}
	cursor.visible = true;
}

//fonction réinitialisant le curseur
function initCursor():void {
	if (cursor.visible) {
		cursor.visible = false;
		cursor.x = cursor.y = 0;
	}
}

Conclusion :


Le code étant commenté, il ne devrait pas y avoir de soucis, mais je reste ouvert à toutes questions.

Mais je tiens à préciser que ce code à été créé spécialement pour FlashKod et donc qu'il est simplifié et accessible aux initiés/débutants-confirmés dans un but pédagogique et d'apprentissage.

Il ne retrace que la méthode et n'est donc pas utilisable "tel quel" pour un véritable éditeur.

Vous êtes au courant ...
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.

Du même auteur (pegase31)