Hello World:

Usando la classe Custom Mouse Pointer

Per le nostre applicazioni web create con Flash, possiamo avere la necessità di dover modificare il puntatore del mouse con qualcosa che più si adatti alle nostre esigenze. A maggior ragione se la nostra applicazione è un gioco.

In questo articolo vedremo come creare una classe per la gestione della personalizzazione del puntatore del mouse, puntatore che può essere un movie clip salvato nella nostra libreria o un movie clip generato programmaticamente. In questo articolo utilizzeremo un movieclip della libreria.

Qui di seguito potete osservare il risultato finale:

Come potete notare siamo stati molto attenti nella sua realizzazione, infatti, puntando col mouse all’esterno dello stage il puntatore scompare proprio da esso.

Custom Mouse Pointer

Per iniziare creiamo un nuovo documento di flash, chiamatelo con un nome a vostra scelta. Quindi, nella medesima directory, creiamo il file che conterrà la nostra classe: questo deve chiamarsi CustomMousePointer.as.

Inoltre avremo bisogno della solita classe point of entry, chiamiamola MainClass.as. Vi ricordo che i nomi dei file sono CaSeSeNsItIvE, quindi fate attenzione. Inoltre per creare un file di actionscript basta creare un comune file di testo quindi modificarne l’estensione.

Aprite il nuovo documento di flash, collegate il documento alla MainClass ( linguetta proprietà -> Classe Documento, inserite MainClass).

Create un movieClip rappresentante il vostro futuro cursore, per esempio un mirino. Inseritelo nella libreria, chiamatelo ‘cursor’. Fatto ciò, aprite la libreria, cliccate col destro del mouse su cursor, selezionate la voce ‘Concatenamento’, alla voce ‘Classe’ inserite ‘Cursor’ ( mi raccomando, CaSeSeNsItIvE ), date OK. Da questo momento in poi potremo usare il movieClip creato come oggetto AS3.

La classe point of entry, MainClass, si occuperà semplicemente di istanziare la classe CustomMousePointer ed aggiungerla allo stage.

MainClass.as

  package
  {
    import flash.display.Sprite;

    public class MainClass extends Sprite
    {
      private var pointer:CustomMousePointer;

      public function MainClass(){
        pointer = new CustomMousePointer();
        addChild(pointer);
      }
    }
  }

La classe CustomMousePointer sarà formata da 5 metodi, costruttore incluso. Ecco qui di seguito il listato che la compone:

CustomMousePointer.as

  package
  {
    import flash.display.*;
    import flash.ui.*;
    import flash.events.*;
    import flash.geom.*;

    public class CustomMousePointer extends Sprite
    {
      var cursor:MovieClip;

      public function CustomMousePointer ()
      {
        cursor = new Cursor;
        addChild(cursor);
        this.addEventListener(Event.ADDED_TO_STAGE, addedToStageListener);
        this.addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageListener);
      }

      private function addedToStageListener (e:Event):void
      {
        Mouse.hide();
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
        stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveListener);
      }

      private function removedFromStageListener (e:Event):void
      {
        Mouse.show();
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
        stage.removeEventListener(Event.MOUSE_LEAVE, mouseLeaveListener);
      }

      private function mouseLeaveListener (e:Event):void
      {
        visible = false;
      }

      private function mouseMoveListener (e:MouseEvent):void
      {
        var pointInParent:Point = parent.globalToLocal(new Point(e.stageX,e.stageY));
        cursor.x = pointInParent.x;
        cursor.y = pointInParent.y;
        e.updateAfterEvent();
        if (!visible)
          visible = true;
      }
    }
  }

Il costruttore si occupa di istanziare Cursor, ovvero il MovieClip che abbiamo precedentemente creato nella libreria e concatenato, quindi lo aggiunge alla display list. L’oggetto viene quindi messo in ascolto con gli eventi ADDED_TO_STAGE e REMOVED_FROM_STAGE: questi eventi rilevano quando l’oggetto viene aggiunto o rimosso dalla display list. Siccome nel costruttore della MainClass, aggiungiamo ‘pointer’ che è una istanza di CustomMousePointer nella display list, l’evento ADDED_TO_STAGE sarà subito richiamato.

Il metodo addedToStageListener si occupa di nascondere il cursore di default del mouse e di mettere in ascolto lo stage con gli eventi MOUSE_MOVE e MOUSE_LEAVE, viene richiamato allo scatenarsi dell’evento ADDED_TO_STAGE ( subito all’esecuzione del filmato ).

Il metodo removedFromStageListener si occupa di ripristinare il normale puntatore del mouse e deregistrare gli eventi MOUSE_MOVE e MOUSE_LEAVE sullo stage. Viene richiamato quando Cursor non è più nello stage.

Il metodo mouseLeaveListener si occupa di settare a false la proprietà visible del displayObject: infatti, quando il puntatore del mouse non è più sullo stage questo scompare del tutto.

Il metodo mouseMoveListener è quello che fa la maggior parte del lavoro, per cominciare converte le coordinate globali e.stageX ed e.stageY in coordinate locali in modo tale da settare correttamente le nuove coordinate per l’oggetto cursor: questo è un metodo di lavorare decisamente più elegante di quello che abbiamo già visto precedentemente in questo articolo, in quanto ci risparmiamo di utilizzare le proprietà offsetX e offsetY.

Per chi volesse saperne di più riguardo a questo metodo consiglio di leggere la documentazione ufficiale

.

Per un test rapido invece consiglio di modificare il costruttore in questo modo, paragonare le coordinate attribuite con quelle restituite dal trace e ‘meditare’ sulle differenze:

      public function CustomMousePointer ()
      {
        cursor = new Cursor;
        cursor.x = 200;
        cursor.y = 100;
        addChild(cursor);
        this.addEventListener(Event.ADDED_TO_STAGE, addedToStageListener);
        this.addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageListener);
        trace(cursor.globalToLocal(new Point(0, 0)));
      }

Il metodo updateAfterEvent() applicato all’evento l’abbiamo già visto diverse volte, per chi ancora non avesse avuto modo di leggere gli altri articoli basti sapere che serve per aggiornare immediatamente il filmato subito dopo lo scatenarsi dell’evento a prescindere dal framerate, attribuendo al filmato una maggiore fluidità.

Infine, in caso il displayObject fosse settato su invisibile ( il puntatore era stato messo fuori dallo stage ), lo risettiamo su visibile.

Termina qui questo articolo, i commenti sono sempre graditi.

(No Ratings Yet)
 Loading ...

Related posts:

1. Muovere uno sprite usando la tastiera con Actionscript 3.0 Muoviamo un oggetto alla pressione dei tasti. In questo articolo...
2. Esportare modelli poligonali con AS3 Geom Class Exporter Utilizziamo modelli poligonali realizzati con 3DStudio Max in Flash Come...

Related posts brought to you by Yet Another Related Posts Plugin.