Accueil > > > AS3 - SIMULATION DE GRILLE D'ÉDITION
AS3 - SIMULATION DE GRILLE D'ÉDITION
Information sur la source
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
- 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;
- }
- }
-
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 ...
Historique
- 30 juillet 2011 13:46:02 :
- corrections de texte ...
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Grille de mots cachés, comment faire??? [ par fred_cor ]
Salut,J'ai un petit problème... Je réalise une série de jeu en flash pour une expo (en tant que stagiaire) et on m'a confi
Jeu de lettres as3 [ par imtic ]
Bonjour à tous, Voilà, je voudrais savoir comment on créer un jeu de lettres qui consiste à assembler des lettres reparties au hasard pour en créer un
passage en as3 d'un jeu fash [ par milembar ]
Bonjours, serait-il possible que quelqu'un me modifie ce jeu flash pour qu'il puisse fonctonner avec actionscript 3 je n'y arrive pas ;-( merci d'avan
Aide jeu plateforme (AS3) [ par guibiz ]
Bonjour tout le monde, Pour un projet demandé en cours [sur flash CS4, AS3], j'essaie de faire une jeu 2D avec le personnage Samus du jeu Metroid. Apr
Passage d'AS2 à AS3, intéressant ou pas ? [ par Phogre ]
Bonjour à tous ! Il y a un an, j'ai eu envie de créer un jeu en flash. Ne trouvant aucun tutoriel pour débutant, j'ai essayé de comprendre des bouts
upload une image sur serveur en AS3 [ par fbsoft ]
je suis un debutant dans le monde de flash+as3 , je veux uploader un fichier en as3 , tout marche a merveille en localhost mais des que je charge mon
Bouton ajouter aux favoris AS3 [ par Hegy ]
Salut, C'est quoi le code pour un bouton "ajouter aux favoris" en AS3 svp ? Je trouve en AS2 mais pas en AS3, Merci! @+++
Position d'un clip chargé en AS3 [ par stevefigueras ]
Bonjour conaissant un peu le AS2 (mais juste un peu hahaha) je souhaite orienter mon apprentissage vers le AS3 pour certains besoins. J'ai adapté ce
Flash As3 bouton qui appel un swf [ par Nemrik ]
Bonjour à tous ! Je m'excuse par avance si la question que je vous pose a déja été évoquée mais je n'ai pas trop eu le temps de fouiller à fond dans
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|