Come abbiamo visto in precedenza, per il linguaggio Actionscript sono stati creati diversi motori per la gestione della grafica poligonale, quello su cui ci siamo soffermati è Sandy 3D Engine.

Sandy 3D Engine offre la possibilità di utilizzare all’interno delle applicazioni dei modelli poligonali realizzati con applicazioni esterne. Basicamente esistono due metodi per ottenere questo risultato:

• utilizzare direttamente il formato dell’applicazione esterna
• esportare il modello poligonale in una classe AS3 che successivamente istanzieremo.

In questo tutorial prenderemo in considerazione la seconda di queste possibilità, ovvero useremo un plugin per 3D Studio Max che esporterà il modello poligonale, l’AS3 Geom Class Exporter, plugin sviluppato da Seraf aka Jerome Birembaut, che potete scaricare da questo link. Da notare che il plugin in questione è compatibile anche con Papervision e Away3D.

Installare AS3 Geom Class Exporter

Per installare lo script estraete il contenuto dell’archivio, quindi da 3DStudio selezionare la tab Utilities, selezionare il pannello maxscript e cliccare il bottone “Run Script”. Selezionate lo script estratto, quindi il pannello “AS3 geom Exporter” sarà disponibile.

Le opzioni dello script sono le seguenti

• Package : il nome del package della classe esportata, lasciatelo pure vuoto
• ClassName : il nome della classe esportata
• Engine : il 3D engine che volete usare
• Scale : per scalare l’oggetto 3D
• Export Vertex Normal
• Swap face normal : per alcuni oggetti può capitare di avere le facce invertite. Se succede utilizzare questa opzione
• Rounded Vertex coord

Utilizzare l’oggetto 3D

Una volta esportato l’oggetto potremo finalmente utilizzarlo all’interno della nostra applicazione istanziandolo. Potete scaricare qui di seguito il risultato di una esportazione di un modello di una navicella spaziale ispirata all’Arwing ( Starfox ) creata dal sottoscritto:

Download Arwing.as

A questo punto non ci resta che creare la classe Point of Entry comprensiva del codice che serve per inizializzare il motore 3D, che risulterà così:

  package
  {
    import flash.display.Sprite;
    import flash.events.*;
    import sandy.core.Scene3D;
    import sandy.core.scenegraph.*;  

    public class MainClass extends Sprite
    {
      private var player:Arwing;
      private var scene:Scene3D;
      private var camera:Camera3D;
      private var group:Group;  

      public function MainClass(){
        group = new Group("root");
        camera = new Camera3D( 550, 400 );
        scene = new Scene3D( "myScene", this, camera, group);
        player = new Arwing("player");
        scene.root.addChild(player);
        addEventListener( Event.ENTER_FRAME, enterFrameHandler );
      }

      private function enterFrameHandler( event : Event ):void {
        scene.render();
        player.rotateX -=2;
        player.rotateY -=4;
      }
    }
  }

Il risultato ottenuto sarà il seguente:

No related posts.

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

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.

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.

In questo articolo vedremo una delle cose più basilari che si possano creare con Actionscript 3.0 e Flash, ovvero muovere un oggetto ( Sprite, Movieclip ecc.. ) nello stage. Per muovere ovviamente intendiamo la modifica delle coordinate x e y.

Chiameremo MainClass.as il file contenente la classe point of entry in cui inseriremo il codice che visualizzerà uno sprite su schermo, in questo caso, un cerchio, che potremo muovere alla pressione dei tasti direzionali.

MainClass.as

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

    public class MainClass extends Sprite {
      private var pallina:Sprite; 

      public function MainClass(){
        pallina = new Sprite();
        pallina.graphics.lineStyle(1);
        pallina.graphics.beginFill(Math.floor(Math.random()*0xFFFFFF), 1);
        pallina.graphics.drawCircle(0, 0, 10);
        pallina.x = Math.floor(Math.random()*500);
        pallina.y = Math.floor(Math.random()*400);
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
        addChild(pallina);
      }

      private function keyPressed(event:KeyboardEvent):void {
        switch(event.keyCode) {
          case Keyboard.UP:
            pallina.y-=1;
          break;
          case Keyboard.DOWN:
            pallina.y+=1;
          break;
          case Keyboard.RIGHT:
            pallina.x+=1;
          break;
          case Keyboard.LEFT:
            pallina.x-=1;
          break;
        }
      }
    }
  }

Il codice contenuto nel costruttore crea il cerchio e lo aggiunge allo stage tramite il metodo addChild. Coordinate di partenza e colore sono generate a random. Per abilitare il riconoscimento della pressione dei tasti mettiamo lo stage in ascolto dell’evento KeyboardEvent.KEY_DOWN. Alla pressione dei tasti della nostra tastiera il metodo ‘keyPressed’ sarà richiamato.

All’interno di questo metodo inseriamo uno switch che filtra il keyCode, che corrisponde ad un numero rappresentante un tasto. Per comodità esistono delle costanti rappresentanti i keycode dei tasti più comuni, ad esempio Keyboard.UP corrisponde al numero 38, Keyboard.DOWN al numero 40, LEFT e RIGHT rispettivamente a 37 e 39, lo potete notare voi stessi aggiungendo un trace(event.keyCode) subito prima dello switch ( utile anche per trovare il corrispettivo keycode degli altri tasti ).

Dipendentemente dal tasto direzionale premuto, il nostro cerchio incrementerà o decrementerà di 1px la coordinata x o y.

Il risultato ottenuto è il seguente:

Si conclude qui questo tutorial, per dubbi commentate qui di seguito.

Related posts:

1. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...
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.

In questo articolo vedremo come emulare la scrittura utilizzando il puntatore del mouse. Qui di seguito potete testare subito il risultato finale che andremo ad ottenere. La penna virtuale viene inizializzata dall’evento MouseEvent.MOUSE_DOWN in ascolto sullo stage, quindi cliccate e tenete premuto il tasto snistro del mouse per iniziare a scrivere. Usate la rotellina del mouse per eliminare ciò che avete scritto.

Di seguito il codice sorgente di questa applicazone:

writer.as

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

    public class Writer extends Sprite
    {
      public function Writer () {
        stage.frameRate = 1;
        stage.addEventListener(MouseEvent.MOUSE_DOWN, write);
        stage.addEventListener(MouseEvent.MOUSE_UP, write);
        stage.addEventListener(MouseEvent.MOUSE_WHEEL, clear);
      }

      public function write( event : MouseEvent ):void {
        switch(event.type){
          case 'mouseDown':
            stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
            graphics.moveTo(stage.mouseX, stage.mouseY);
          break;
          case 'mouseUp':
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
          break;
        }
      }

      private function mouseMoveListener ( event : MouseEvent ):void
      {
        graphics.lineStyle(2, 0xFF0000);
        graphics.lineTo(event.stageX, event.stageY);
        event.updateAfterEvent();
      }

      public function clear( event : MouseEvent ):void {
        graphics.clear();
        event.updateAfterEvent();
      }
    }
  }

Come potete vedere il codice è molto breve e relativamente semplice. Il costruttore si occuperà di registrare stage in ascolto con gli eventi MouseEvent.MOUSE_DOWN, MouseEvent.MOUSE_UP e MouseEvent.MOUSE_WHEEL, i primi due richiameranno il metodo write mentre MOUSE_WHEEL richiamerà clear.

In questa occasione utilizziamo un approccio differente per la gestione degli eventi MOUSE_UP e MOUSE_DOWN rispetto a quello visto nel precedente articolo sul drag and drop. Qui due differenti eventi chiamano lo stesso metodo, il cui comportamento è differenziato in base al valore della proprietà type dell’evento passato. Questa proprietà contiene il nome stringa dell’evento. Il contenuto del metodo write è piuttosto semplice, se l’evento passato è ‘mouseDown’ registriamo stage in ascolto con l’evento MouseEvent.MOUSE_MOVE e muoviamo il cursore nella posizione attuale del mouse, in caso contrario rimuoviamo stage dall’ascolto di MOUSE_MOVE.

L’evento MouseEvent.MOUSE_MOVE a sua volta richiamerà il metodo mouseMoveListener che si occupa di disegnare la linea su schermo. Da notare anche questa volta la presenza si updateAfterEvent() che aggiorna la schermata indipendentemente dal framerate del filmato, settato programmaticamente nel costruttore ad 1 fotogramma al secondo.

Per eliminare tutto ciò che si è disegnato sullo stage ci basta muovere la rotellina del mouse. Anche in questo caso richiamiamo il metodo updateAfterEvent(), in quanto, in mancanza di esso, in contenuto dello stage sarebbe rimosso solo nel succesivo screen update, creando un ritardo nell’azione.

Si conclude qui questo tutorial, commenti e ratings sono sempre bene accetti

Related posts:

1. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...
2. Muovere uno sprite usando la tastiera con Actionscript 3.0 Muoviamo un oggetto alla pressione dei tasti. In questo articolo...

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

I modelli MD2 sono dei particolari files introdotti dalla Id Software nel gioco Quake 2 nel novembre 1997. E’ un formato di semplice comprensione contenente dei modelli poligonali e le relative animazioni frame by frame. Per chi volesse saperne di più segnalo questo link contenente tutte le spiegazioni tecniche.

Come sempre ecco qui il risultato finale:

Il nostro modello importato viene visualizzato nel filmato. I comandi attivi si limitano a richiamare le varie animazioni contenute nel file MD2, per semplicità non ho aggiunto la possibilità di muoversi nello spazio 3D. Premete i tasti numerici sulla vostra tastiera per vedere il personaggio compiere varie animazioni.

Questo invece è il codice sorgente

  package {
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    import flash.utils.*;
    import flash.ui.*;

    import sandy.util.*;
    import sandy.core.Scene3D;
    import sandy.core.data.*;
    import sandy.core.scenegraph.*;
    import sandy.materials.*;
    import sandy.materials.attributes.*;
    import sandy.primitive.*;
    import sandy.events.*;

    import caurina.transitions.Tweener;

    public class SandyMain extends Sprite {
      private var scene:Scene3D;
      private var camera:Camera3D;
      private var queue:LoaderQueue;
      private var queueSkin:LoaderQueue;
      private var player:MD2;

      public function SandyMain() {
        queue = new LoaderQueue();
        queue.add( "ogre", new URLRequest("md2/ogre.md2"), "BIN" );
        queue.add( "ogreSkin", new URLRequest("md2/Ogrobase.jpg"), "IMG" );
        queue.addEventListener(SandyEvent.QUEUE_COMPLETE, loadMD2Complete );
        queue.start();
      }

      private function loadMD2Complete(event:Event):void {
        stage.frameRate = 24;
        camera = new Camera3D( 600, 600 );
        scene = new Scene3D( "scene", this, camera, new Group() );
        player = new MD2 ( "ogre", queue.data["ogre"], 2 );
        player.appearance = new Appearance (new BitmapMaterial( queue.data["ogreSkin"].bitmapData ));
        player.x = 0;
        player.y = 0;
        player.rotateY = 270;
        scene.root.addChild(player);
        standAction();
        stage.addEventListener( Event.ENTER_FRAME, enterFrameListener );
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownListener );
        stage.addEventListener(KeyboardEvent.KEY_UP, keyUpListener );
      }

      private function keyDownListener( event : KeyboardEvent ):void {
        var char : String = String.fromCharCode(event.charCode);
        if (char == '1') {
          standAction();
        }
        if (char == '2') {
          waveAltAction();
        }
        if (char == '3') {
          attackAction();
        }
        if (char == '4') {
          deathTwoAction();
        }
        if (char == '5') {
          sniffSniffAction();
        }
        if (char == '6') {
          cWalkAction();
        }
        if (char == '7') {
          bumFlopAction();
        }
        if (char == '8') {
          flipAction();
        }
        if (char == '9') {
          saluteAction();
        }
        if (char == '0') {
          jumpAction();
        }
      }

      private function keyUpListener( event : KeyboardEvent ):void {
        var char : String = String.fromCharCode(event.charCode);
        if (event.keyCode == Keyboard.ENTER) {
          player.x = 0;
          player.y = 0;
          player.z = 100;
        }
      }

      private function enterFrameListener( event : Event ) : void {
        scene.render();
      }

      /*
      standAction()
      runAction()
      attackAction()
      painOneAction()
      painTwoAction()
      painThreeAction()
      jumpAction()
      flipAction()
      saluteAction()
      bumFlopAction()
      waveAltAction()
      sniffSniffAction
      cStandAction
      cWalkAction
      crAttachAction
      crPainAction
      crDeathAction
      deathOneAction
      deathTwoAction
      deathThreeAction()
      boomAction()
      */

      private function standAction():void {
        player.frame = 0;
        Tweener.addTween (player, { frame: 39, time: 8, onComplete: standAction });
      }

      private function runAction():void {
        player.frame = 40;
        Tweener.addTween (player, { frame: 45, time: 0.3, onComplete: runAction  });
      }

      private function attackAction():void {
        player.frame = 46;
        Tweener.addTween (player, { frame: 53, time: 1});
      }

      private function painOneAction():void {
        player.frame = 54;
        Tweener.addTween (player, { frame: 57, time: 1});
      }

      private function painTwoAction():void {
        player.frame = 58;
        Tweener.addTween (player, { frame: 61, time: 1});
      }

      private function painThreeAction():void {
        player.frame = 62;
        Tweener.addTween (player, { frame: 65, time: 1});
      }

      private function jumpAction():void {
        player.frame = 66;
        Tweener.addTween (player, { frame: 71, time: 1});
      }

      private function flipAction():void {
        player.frame = 72;
        Tweener.addTween (player, { frame: 83, time: 1});
      }

      private function saluteAction():void {
        player.frame = 84;
        Tweener.addTween (player, { frame: 94, time: 1});
      }

      private function bumFlopAction():void {
        player.frame = 95;
        Tweener.addTween (player, { frame: 111, time: 1});
      }

      private function waveAltAction():void {
        player.frame = 112;
        Tweener.addTween (player, { frame: 122, time: 1});
      }

      private function sniffSniffAction():void {
        player.frame = 123;
        Tweener.addTween (player, { frame: 134, time: 1});
      }

      private function cStandAction():void {
        player.frame = 135;
        Tweener.addTween (player, { frame: 153, time: 1});
      }

      private function cWalkAction():void {
        player.frame = 154;
        Tweener.addTween (player, { frame: 159, time: 1});
      }

      private function crAttachAction():void {
        player.frame = 160;
        Tweener.addTween (player, { frame: 168, time: 1});
      }

      private function crPainAction():void {
        player.frame = 169;
        Tweener.addTween (player, { frame: 172, time: 1});
      }

      private function crDeathAction():void {
        player.frame = 173;
        Tweener.addTween (player, { frame: 177, time: 1});
      }

      private function deathOneAction():void {
        player.frame = 178;
        Tweener.addTween (player, { frame: 183, time: 1});
      }

      private function deathTwoAction():void {
        player.frame = 184;
        Tweener.addTween (player, { frame: 189, time: 1});
      }

      private function deathThreeAction():void {
        player.frame = 190;
        Tweener.addTween (player, { frame: 197, time: 1});
      }

      private function boomAction():void {
        player.frame = 198;
      }

    }
  }

E adesso addentriamoci nelle dovute spiegazioni. Come detto nel titolo di questo articolo utilizzeremo nel nostro codice la classe Tweener della libreria caurina. Quindi il primo consiglio è scaricare le librerie necessarie, a questo scopo vi consiglio di utilizzare un client svn ed inserire la seguente url di checkuot: http://tweener.googlecode.com/svn/trunk. Scaricherete nella cartella selezionata le librerie aggiornate. Tra le varie sottodirectories che compongono il contenuto del vostro download sarà presente una directory chiamata ‘as3′, che aggiungerete alle librerie di flash ( Modifica -> Preferenze -> Actionscript -> Impostazioni Actionscript 3.0 ).

La classe Tweener

Tweener (caurina.transitions.Tweener) è una classe usata per creare tweenings e altre transizioni via codice ActionScript piuttosto che usando la timeline di flash. Questo comporta una maggiore semplicità nella gestione del codice. L’utilizzo che ne faremo in questo articolo si limita a questo genere di chiamata

      private function attackAction():void {
        player.frame = 46;
        Tweener.addTween (player, { frame: 53, time: 1});
      }

ovvero diciamo alla classe Tweener di arrivare al frame 53 dell’oggetto player ( che è il nostro MD2 che contiene, come abbiamo detto, una moltitudine di frames di animazione ). Il frame di partenza lo settiamo giusto 1 istante prima di questa chiamata in modo da ottenere la visualizzazione dell’animazione desiderata.

Viene naturale porsi una domanda, come faccio a sapere una certa animazione da quale frame parte e a quale frame arriva? La risposta a questa domanda è utilizzando un model editor. Più esattamente io ho utilizzato un programma chiamato Quake Model Editor. Questo programma è inizialmente sviluppato da Philip Martin, purtroppo il sito di riferimento è stato sostituito con altro, quindi lo metto in download da questo link.

Questo leggerissimo applicativo assomiglia vagamente a 3DStudio Max e vi da la possibilità di visualizzare i files MD2 e vedere le animazioni frame per frame.

Importazione del file MD2

Un oggetto MD2 in Sandy 3D Engine è gestito dall’omonima class, MD2 appunto. Tralasciando quindi il costruttore che utilizzeremo per caricare tutti i files necessari, arriviamo al metodo loadMD2Complete dove istanziamo un oggetto MD2, passando al costruttore il nome dell’oggetto, l’oggetto MD2 caricato e il fattore di scala. Quindi lo aggiungiamo nello stage.

I controlli

Potete controllare un oggetto MD2 come un qualsiasi altro componente di Sandy3D, quindi modificando le proprietà x, y, z ecc.. In questo tutorial tuttavia non mi addentrerò più di tanto nei controlli del personaggio nello spazio 3D, in ogni caso nel codice sono comprese tutte le animazioni del contenute nel file MD2, ognuna di esse è un metodo della classe. Il codice attuale mostra 10 delle 21 animazioni presenti ( una per tasto numerico ) per provare a vedere le altre non vi resta che modificare il codice. Se un’animazione viene visualizzata troppo velocemente o lentamente il consiglio è di modificare il valore per la proprietà ‘time’.

Cliccando su questo link potete scaricare il codice sorgente comprensivo del file MD2.

Prima di concludere voglio segnalarvi un link interessante per recuperare dei modelli MD2, polycount.com.

Si conclude qui il tutorial, comment, rate and share!

Related posts:

1. Esportare modelli poligonali con AS3 Geom Class Exporter Utilizziamo modelli poligonali realizzati con 3DStudio Max in Flash Come...
2. Muovere uno sprite usando la tastiera con Actionscript 3.0 Muoviamo un oggetto alla pressione dei tasti. In questo articolo...
3. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...

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

In questo articolo vedremo una delle possibili soluzioni per realizzare l’effetto drag & drop su un elemento. Gli elementi n questione saranno 20 sprite posizionati a random sullo stage. In ognuno di questi sprite disegneremo un rettangolo che coloreremo con un colore random. Faremo particolare attenzione ad un metodo chiamato updateAfterEvent(), determinante per la fluidità del risultato finale, che per i più impazienti, sarà questo:

Il codice in questione sarà breve. Chiameremo la classe del documento DragDrop, quindi di conseguenza creiamo il file DragDrop in cui inseriremo il seguente codice

DragDrop.as

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

    public class DragDrop extends Sprite {
      var object:Sprite;
      var offsetX:Number;
      var offsetY:Number;

      public function DragDrop():void {
        var rettangoli:Array = new Array();
        for (var i:int = 0; i < 20; i++) {
          rettangoli[i] = new Sprite();
          rettangoli[i].graphics.lineStyle(1);
          rettangoli[i].graphics.beginFill(Math.floor(Math.random()*0xFFFFFF), 1);
          rettangoli[i].graphics.drawRect(0, 0, 100, 50);
          rettangoli[i].x = Math.floor(Math.random()*500);
          rettangoli[i].y = Math.floor(Math.random()*400);
          rettangoli[i].addEventListener(MouseEvent.MOUSE_DOWN, drag);
          rettangoli[i].addEventListener(MouseEvent.MOUSE_UP, drop);
          addChild(rettangoli[i]);
        }
      } 

      function drag( event  :  MouseEvent  ):void{
        var highestDepth:uint = numChildren - 1;
        object = event.target as Sprite;
        setChildIndex(object, highestDepth);
        offsetX = mouseX - object.x;
        offsetY = mouseY - object.y;
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
      }

      function drop( event  :  MouseEvent  ):void{
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
      }

      function mouseMoveListener( event  :  MouseEvent  ):void{
        object.x = mouseX - offsetX;
        object.y = mouseY - offsetY;
        event.updateAfterEvent();
      }

    }
  }

Ma vediamolo passo per passo. Dopo aver creato il package importiamo le librerie flash.display e flash.events, le uniche di cui abbiamo bisogno per questo esempio. Creiamo quindi la classe DragDrop che essendo la point of entry estenderà Sprite. La proprietà di cui abbiamo bisogno sono 3, in quanto le uniche cose di cui abbiamo bisogno in maniera globale sono l'oggetto attualmente draggato e gli offset X e Y. Queste 2 variabili equivalgono alla differenza delle cordinate X e Y del mouse con le coordinate X e Y dell'oggetto che vogliamo draggare. Ne abbiamo bisogno per rendere verosimile lo spostamento.

Il costruttore della classe si occupa della creazione a random di 20 rettangoli, e per ognuno di esso mette in ascolto lgli eventi MOUSE_DOWN e MOUSE_UP, che rispettivamente richiameranno i metodi drag e drop.

Il metodo drag rende disponibile la variabile highestDepth, che equivale alla somma di tutti gli elementi presenti sullo sprite sottratto di 1, in quanto questo valore si calcola a partire dallo zero. Quindi attribuisce la profondità all'elemento che abbiamo cliccato ( setChildIndex equivale al settaggio dello z-index nel DOM ). Quindi calcola gli offset X e Y di cui abbiamo parlato prima ed infine registra lo stage in ascolto con l'evento MOUSE_MOVE.

D'ora in avanti, finchè avremo il tasto sinistro del mouse premuto, l'elemento si muoverà seguendo il nostro cursore: questo comportamento è dato dal metodo richiamato dall'evento MOUSE_MOVE, ovvero mouseMoveListener. Questo infatti setta le coordinate dell'elemento attualmente draggato uguali alle coordinate del mouse sottratte dei relativi offsets.

Da notare l'importante metodo updateAfterEvent(). Questo metodo, come potete vedere, appartiene all'oggetto evento, la sua funzionalità è determinante in quanto aggiorna la visualizzazione a prescindere dalla frequenza di fotogrammi al secondo impostata per il filmato. Per comprendere in fondo la sua utilità vi consiglio di commentare temporaneamente event.updateAfterEvent(); e provare a compilare il filmato.

Per finire giungiamo al metodo drop, che semplicemente rimuove lo stage dall'ascolto con l'evento MOUSE_MOVE.

Si conclude qui questo tutorial, comment, share and rate!

Related posts:

1. Muovere uno sprite usando la tastiera con Actionscript 3.0 Muoviamo un oggetto alla pressione dei tasti. In questo articolo...
2. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...
3. 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.

In questo articolo spiegheremo come creare un pulsante cliccabile con Actionscript 3.0, mettendolo in ascolto con un custom event, un evento personalizzato, introducendo inoltre alcuni concetti del linguaggio, come:

• l’event dispatch
• le funzionalità preventDefault() e isDefaultPrevented() sempre relative agli eventi
• come sovrascrivere un metodo di una classe parent
• come richiamare il costruttore di una classe parent
• disegnare programmaticamente un rettangolo

Come sempre, per i più impazienti, qui di seguito potete vedere il risultato finale:

Immaginiamo di dover creare un’applicazione dove vi sia la gestione di diversi ruoli utente, e che ogni ruolo abbia diversi permessi sulle azioni del sistema. Teniamo in memoria i ruoli utente in una classe chiamata Ruoli.as, qui di seguito il codice:

Ruolo.as

  package {
    public class Ruolo {
      public static const GUEST:int = 0;
      public static const MEMBER:int = 1;
      public static const ADMIN:int = 2;
    }
  }

Nel codice che andremo ad implementare, solo il ruolo Ruolo.ADMIN potrà effettuare lo switch del tasto e quindi eseguire l’azione ( ad esempio, l’eliminazione di un record ). Creiamo quindi la classe Tasto.as che si occuperà di disegnare lo stato ON ed OFF del tasto e di controllare se il comportamento di default dell’evento ToggleEvent.TOGGLE_ATTEMPT ( tentata chiamata all’evento TOGGLE, vedremo più avanti il codice dell’evento personalizzato ) è da eseguire o meno, qui di seguito il codice della classe Tasto.as privo dei suoi metodi, che spiegheremo successivamente, uno alla volta:

Tasto.as

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

    public class Tasto extends Sprite
    {
      private var stato:Boolean;
      private var icona:Sprite;
      private var c_x:int;
      private var c_y:int;
      private var length:int;
      public var nome:String;  

      // [..]
    }
  }

Questa classe conterrà le proprietà private stato e icona, la prima che sarà un valore booleano vero o falso rappresentante rispettivamente lo stato ON e OFF. La seconda proprietà è una istanza di sprite che si occuperà di visualizzare il tasto sullo stage.

Sono inoltre presenti le proprietà c_x, c_y, length e nome, le prime due rappresentanti le coordinate x e y, la terza rappresentante la lunghezza del lato del tasto ( essendo il tasto un quadrato va bene una sola lunghezza ), ed il nome, proprietà pubblica in quanto avremo bisogno di sapere il suo valore al di fuori della classe stessa.

Disegnare lo stato attuale dei tasti

Si occuperanno di disegnare lo stato acceso e spento due metodi, rispettivamente drawOn e drawOff. Entrambe questi metodi utilizzeranno i metodi della proprietà graphic posseduta da ogni istanza di Sprite. In particolare, il metodo drawOn non farà altro che richiamare il metodo drawOff, che disegna un rettangolo bianco, ed aggiungerne al suo interno uno più picolo di colore nero.

      private function drawOff ():void {
        icona.graphics.clear();
        icona.graphics.lineStyle(1);
        icona.graphics.beginFill(0xFF0000);
        icona.graphics.drawRect(c_x, c_y, length, length);
      }

      private function drawOn ():void {
        drawOff();
        icona.graphics.beginFill(0x000000);
        icona.graphics.drawRect(c_x+Math.round(length/4), c_y+Math.round(length/4), Math.round(length/2), Math.round(length/2));
      }

Il costruttore della classe Tasto si occuperà di inserire lo sprite del bottone nello stage, settare lo stato e visualizzarlo, inizialmente su OFF, ed inoltre registrerà la proprietà icona ( quindi il tasto ) in ascolto dell’evento MOUSE.Click. Il costruttore può accettare 4 argomenti, c_x, c_y, length e nome, spiegati in precedenza.

      public function Tasto (nome,c_x:int = 0, c_y:int = 0, length:int = 20) {
        icona = new Sprite();
        addChild(icona);
        this.nome = nome;
        this.c_x = c_x;
        this.c_y = c_y;
        this.length = length;
        stato = false;
        drawOff();
        icona.addEventListener(MouseEvent.CLICK, clickListener);
      }

Quindi il codice degli ultimi due metodi della classe tasto, toggle e clickListener. Quest’ultimo è il metodo eseguito allo scatenarsi dell’evento MOUSE.Click e, come vedremo, conterrà al suo interno il codice che scatena l’evento ToggleEvent.TOGGLE_ATTEMPT e il controllo sul medesimo ( se defaultPrevented o meno ) e nell’eventualità che il comportamento di default non sia prevenuto ( quindi il tasto premuto da un utente Ruolo.ADMIN ), viene effettuata la chiamata di toggle() e scatenato l’evento ToggleEvent.TOGGLE. Vedremo più avanti il significato degli argomenti utilizzati per creare le istanze degli eventi.

      private function clickListener ( e : MouseEvent ):void {
        var toggleEvent:ToggleEvent = new ToggleEvent(ToggleEvent.TOGGLE_ATTEMPT,true, true);
        dispatchEvent(toggleEvent);
        if (!toggleEvent.isDefaultPrevented()) {
          toggle();
        }else{
          trace('Non hai i permessi per effettuare questa azione!');
        }
      }

      public function toggle ():void {
        stato = !stato;
        if (stato) {
          drawOn();
        } else {
          drawOff();
        }
        var toggleEvent:ToggleEvent = new ToggleEvent(ToggleEvent.TOGGLE,true, false, stato);
        dispatchEvent(toggleEvent);
      }

Il metodo toggle() cambierà lo stato attuale del tasto. Da notare che il metodo è pubblico, quindi potrebbe essere richiamato programmaticamente da metodi di qualsiasi oggetto, non solo dal nostro clickListener. Ogni volta che questo metodo viene eseguito viene scatenato l’evento ToggleEvent.TOGGLE.

L’evento personalizzato

Ogni evento personalizzato in actionscript 3 deve estendere la classe Event ed inoltre devono comprendere l’override di due metodi facenti parte di Event, clone() e toString(). Il costruttore di un evento personalizzato deve richiamare il costruttore della superclasse ( il costruttore della classe parent, Event ), che a sua volta necessita di 3 argomenti, type, bubbles e cancelable. Il primo argomento è il tipo di evento, per esempio mouseEvent.CLICK o ToggleEvent.TOGGLE. Il secondo argomento, un valore boolean, indica come si propagherà l’evento tra gli oggetti dello stage. Siccome il concetto di bubbles degli eventi è molto ampio ed importante nel linguaggio actionscript 3, come del resto, in ogni linguaggio ad eventi, realizzerò al più presto un articolo a parte. Il terzo argomento indica se l’evento da la possibilità di modificare il suo comportamento di default, prevenendolo.

Come abbiamo già visto nel codice precedente, la classe ToggleEvent conterrà due eventi, TOGGLE e TOGGLE_ATTEMPT, il seguente è il codice:

  package
  {
    import flash.events.*;

    public class ToggleEvent extends Event
    {
      public static const TOGGLE:String = "toggle";
      public static const TOGGLE_ATTEMPT:String = "toggleAttempt";
      public var stato:Boolean;

      public function ToggleEvent (type:String,bubbles:Boolean = false,cancelable:Boolean = false,stato:Boolean = false) {
        super(type, bubbles, cancelable);
        this.stato = stato;
      }

      public override function clone():Event {
        return new ToggleEvent(type, bubbles, cancelable, stato);
      }

      public override function toString():String {
        return formatToString("ToggleEvent", "type", "bubbles","cancelable", "eventPhase", "stato");
      }
    }
  }

Da notare che il nostro evento personalizzato aggiunge un quarto parametro, stato, alla lista dei parametri obbligatori. La proprietà pubblica stato all’interno dell’evento terrà in memoria lo stato attuale del tasto messo in ascolto con l’evento. Il suo valore, un booleano, sarà attribuito all’interno del metodo toggle.

La classe point of entry

Infine non ci rimane che testare il tutto con una classe che utilizzeremo come poin of entry, ovvero la classe direttamente legata al documento flash. Chiameremo questa classe, ad esempio, Application.

  package
  {
    import flash.display.*;

    public class Application extends Sprite
    {
      private var userRole:int = Ruolo.GUEST;

      public function Application() {
        var tastoUno:Tasto = new Tasto('tastoUno');
        var tastoDue:Tasto = new Tasto('tastoDue',30,0,40);

        tastoUno.addEventListener(ToggleEvent.TOGGLE_ATTEMPT,toggleAttemptListener);
        tastoUno.addEventListener(ToggleEvent.TOGGLE,toggleListener);
        tastoDue.addEventListener(ToggleEvent.TOGGLE_ATTEMPT,toggleAttemptListener);
        tastoDue.addEventListener(ToggleEvent.TOGGLE,toggleListener);

        addChild(tastoUno);
        addChild(tastoDue);
      }

      private function toggleAttemptListener ( e : ToggleEvent ):void {
        if (userRole != Ruolo.ADMIN && e.target.nome == 'tastoUno') {
          e.preventDefault();
        }
      }

      private function toggleListener ( e:ToggleEvent ):void {
        if (e.stato) {
          trace("Il tasto "+e.target.nome+" è su ON");
        }else {
          trace("Il tasto "+e.target.nome+" è su OFF");
        }
      }
    }
  }

Nella nostra class Application avremo una proprietà privata, userRole, che stabilirà il nostro ruolo utente. Nel suo costruttore istanzieremo due volte la classe tasto, ogni istanza in ascolto degli eventi ToggleEvent.TOGGLE e ToggleEvent.TOGGLE_ATTEMPT. Il comportamento di default sarà prevenuto o meno da un controllo presente nel metodo toggleAttemptListener. In questo caso, il controllo è solo sul tasto ‘tastoUno’, cliccabile solo da un utente Ruolo.ADMIN. L’altro tasto lo lasciamo cliccabile da chiunque. Il metodo toggleListener effettuerà un trace che indicherà lo stato attuale del tasto appena premuto, stato di cui potremo avere comunque un riscontro visivo.

Esperimento consigliato: modificate il ruolo utente della classe Application.

Con questo si conclude questo articolo/tutorial sulla creazione di eventi personalizzati in Actionscript 3.0. Per eventuali richieste o incomprensioni postate pure un commento, risponderò il prima possibile.

Related posts:

1. Muovere uno sprite usando la tastiera con Actionscript 3.0 Muoviamo un oggetto alla pressione dei tasti. In questo articolo...
2. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...

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

BulkLoader è una libreria minimale scritta in Actionscript 3.0 da Arthur Debert, potete scaricarla qui.

Questa libreria ci permette di caricare files esterni all’interno dei nostri swf ed avere un gran numero di informazioni su questi, come per esempio il totale complessivo di files e di bytes, il totale in bytes del file attualmente in fase di caricamento, il loro nome e così via. Inoltre è possibile utilizzare un file xml per definire i file da caricare utilizzando la classe LazyXMLLoader.

Ed è proprio questa classe che tratteremo in questo tutorial, con la quale realizzeremo un preload NON formattato graficamente ma in cui ricaveremo e visualizzeremo tutte le informazioni che ci servono per arrivare al nostro scopo: creare 2 barre di scorrimento, una rappresentante il totale complessivo dei bytes scaricati, ed una rappresentante il totale dei bytes scaricati per il file attualmente in fase di scaricamento.

Una note prima di procedere con la spiegazione riguardante il codice: ricordatevi di importare le librerie in flash come ho spiegato qui altrimenti potrete ricevere diversi errori.

Il seguente è il file xml in cui diremo a BulkLoader dove andare a prendere i dati necessari. In questo caso tutti i file da caricare sono nella directory assets\files.

lazyloader.xml

<?xml version="1.0" encoding="UTF-8"?>
<BulkLoader>
	<name>BulkLoader</name>
	<stringSubstitutions>
		<base_path>assets/files/</base_path>
	</stringSubstitutions>

	<files>
		<file>
			<url>{base_path}movie.flv</url>
      <id>moviee</id>
			<pausedAtStart>true</pausedAtStart>
			<checkPolicyFile>true</checkPolicyFile>
			<maxTries>5</maxTries>
      <priority>90</priority>
		</file>
		<file>
			<url>{base_path}sound-short.mp3</url>
			<id>the-sound</id>
      <priority>80</priority>
		</file>
		<file>
			<url>{base_path}duskclear2.jpg</url>
			<id>duskclear2</id>
      <priority>70</priority>
		</file>
		<file>
			<url>{base_path}testo.txt</url>
			<id>testo</id>
      <priority>50</priority>
		</file>
		<file>
			<url>{base_path}samplexml.xml</url>
			<id>samxml</id>
			<headers>
				<header1>value1</header1>
				<header2>value2</header2>
			</headers>
      <priority>40</priority>
		</file>
	</files>
</BulkLoader>

Ogni file è contenuto all’interno del tag file, questo deve includere quanto meno la url del file. Pur esistendo la possibilità di creare un id univoco per il ogni file senza bisogno di specificarlo, ho preferito inserire il tag id manualmente per ogni file. Questo campo è importante in quanto identifica in modo univoco il nostro file. Possono essere incluse diverse altre informazioni per i file e nell’intestazione del XML, ma per questo vi rimando alla documentazione ufficiale.

BulkLoaderMain

  package{
    import br.com.stimuli.loading.lazyloaders.LazyXMLLoader;
    import br.com.stimuli.loading.lazyloaders.LazyBulkLoader;
    import br.com.stimuli.loading.*;
    import br.com.stimuli.loading.loadingtypes.*;
    import br.com.stimuli.loading.BulkProgressEvent;

    import flash.events.*;
    import flash.display.*;
    import flash.media.Sound;
    import flash.media.Video;
    import flash.net.NetStream;
    import flash.text.*;
    import flash.events.MouseEvent;

    public class BulkLoaderMain extends Sprite {
      public var lazyTotal:LazyXMLLoader;
      public var lazy:LazyXMLLoader;

      public var inizio:TextField;
      public var bytesLoaded:TextField;
      public var percentuale:TextField;
      public var itemsLoaded:TextField;
      public var currentLoaded:TextField;
      public var totalItems:TextField;
      public var fine:TextField;

      public var barTotal:TextField;
      public var barItem:TextField;

      public var bytesTotali:Number = 0;
      public var filesTotali:Number = 0;
      public var bytesCaricati:Number = 0;

      public var hide:Boolean = false;

      public function BulkLoaderMain():void {
        addTextFields();
        inizio.text = "Clicca qui per iniziare il preload!";
        inizio.addEventListener(MouseEvent.CLICK,start);
      }

      public function start( e : MouseEvent ):void {
        inizio.removeEventListener(MouseEvent.CLICK,start);
        /*
        bytesTotal = Se il numero delle connessioni è minore del numero dei files sarà uguale a 0
        bytesTotalCurrent	= Se il numero delle connessioni è maggiore del numero dei files sarà = a bytesTotal
        */
        lazyTotal  = new LazyXMLLoader("assets/files/lazyloader.xml", "getTotalLazyLoader", 10, 10);
        lazyTotal.addEventListener(ProgressEvent.PROGRESS, onAllProgressTotal);
        lazyTotal.addEventListener(Event.COMPLETE, onAllLoadedTotal);
        lazyTotal.start();
      }

      private function onAllProgressTotal( e : BulkProgressEvent ):void {
        if(e.bytesTotal > bytesTotali){
          bytesTotali = e.bytesTotal;
          filesTotali = e.itemsTotal;
          bytesLoaded.text = "Bytes Totali "+bytesTotali;
          percentuale.text = "Files Totali "+filesTotali;
          /*var evn:BulkProgressEvent;
          for each(var item : LoadingItem in lazyTotal.items){
            evn = lazyTotal.getProgressForItems([item.id]);
            totalItems.appendText(item+"\n");
            totalItems.appendText(item.id+" Caricati "+evn.bytesLoaded+" su "+evn.bytesTotal+"\n");
          }*/
          lazyTotal.removeAll();
          lazyTotal.clear();
          lazyTotal = null;
        }
      }

      private function addTextFields():void{
        inizio = createTextField(10, 10, 400, 100);
        bytesLoaded = createTextField(10, 30, 400, 100);
        percentuale = createTextField(10, 50, 400, 100);
        itemsLoaded = createTextField(10, 70, 400, 100);
        currentLoaded = createTextField(10, 90, 400, 100);

        totalItems = createTextField(10, 170, 400, 300);
        totalItems.wordWrap = true;
        totalItems.background = true;
        totalItems.backgroundColor = 0xF3C9F8;

        barItem = createTextField(10, 110, 0, 20);
        barItem.background = true;
        barItem.backgroundColor = 0x4EF580;

        barTotal = createTextField(10, 140, 0, 20);
        barTotal.background = true;
        barTotal.backgroundColor = 0x4EF580;

        fine = createTextField(10, 510, 400, 100);
      }

      function onAllLoadedTotal(evt : Event) : void{
        lazy  = new LazyXMLLoader("assets/files/lazyloader.xml", "theLazyLoader", 1, 10);
        lazy.addEventListener(LazyBulkLoader.LAZY_COMPLETE, onLazyInfoLoaded );
        lazy.addEventListener(Event.COMPLETE, onAllLoaded);
        lazy.addEventListener(ProgressEvent.PROGRESS, onAllProgress);
        lazy.start();
      }

      private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField {
        var result:TextField = new TextField();
        result.x = x;
        result.y = y;
        result.width = width;
        result.height = height;
        addChild(result);
        return result;
      }

      public function onLazyInfoLoaded( e : Event ):void {
        inizio.text = "File XML letto con successo!";
      }

      public function onAllProgress( e : BulkProgressEvent ):void {
        bytesCaricati = 0;
        var evn:BulkProgressEvent;
        totalItems.text = "Oggetti totali "+lazy.totalWeight+" \n";
        for each(var item : LoadingItem in lazy.items){
          evn = lazy.getProgressForItems([item.id]);
          totalItems.appendText(item+"\n");
          totalItems.appendText(item.status+"\n");
          totalItems.appendText(item.id+" Caricati "+evn.bytesLoaded+" su "+evn.bytesTotal+"\n");
          bytesCaricati+= item.status == 'started' ? evn.bytesLoaded : evn.bytesTotal;
          if(evn.bytesLoaded >= 0 && evn.bytesLoaded != evn.bytesTotal){
            itemsLoaded.text = "Percentuale "+item.id+" "+evn.bytesLoaded*100/evn.bytesTotal;
            barItem.width = Math.round(evn.bytesLoaded*100/evn.bytesTotal)*3;
            barItem.text = hide === false ? "Currently Loading "+item.url.url : "";
          }
        }
        bytesLoaded.text = "Totale Caricati "+bytesCaricati+" su "+bytesTotali;
        percentuale.text = "Totale Percentuale "+bytesCaricati*100/bytesTotali;
        barTotal.width = Math.round(bytesCaricati*100/bytesTotali)*3;
        barTotal.text = hide === false ? "Total Loading" : "";
        hide = !hide;
      }

      function onAllLoaded(evt : Event) : void{
        barTotal.width = 300;
        barItem.width = 300;
        fine.text = "Caricamento Terminato! \n";
        fine.appendText("Clicca QUI per visualizzare il contenuto");
        fine.addEventListener(MouseEvent.CLICK,clickListener);
      }

      function clickListener( e : MouseEvent ):void {
        var xPos : int = 450;
        var yPos : int = 0;
        for each (var item : LoadingItem in lazy.items){
          if (item.isImage()){
            var b : Bitmap = lazy.getBitmap(item.id);
            addChild(b);
            if (b.width > 300){
              b.width = 300;
              b.scaleY = b.scaleX;
              b.x = xPos;
              b.y = yPos;
              xPos += b.width + 10;
              if(xPos > 800){
                xPos = 200;
                yPos += 200;
              }
            }
          }else if (item.isSound()){
            var sound : Sound = lazy.getSound(item.id);
            sound.play();
          }else if(item.isStreamable()){
            var video : Video = new Video();
            var theNetStream : NetStream = lazy.getNetStream(item.id);
            addChild(video);
            video.attachNetStream(theNetStream);
            theNetStream.resume();
            video.y = 300;
            video.x = 450;
          }
        }
        fine.removeEventListener(MouseEvent.CLICK,clickListener);
      }
    }
  }

Il contenuto di questo file è piuttosto lungo, occhio a non perdervi! I vari import importano all’interno della classe tutte le librerie built in di flash e le librerie di bulLloader che saranno utilizzate nel corso dello script.

Quindi inizializzeremo tutte le proprietà che utilizzeremo globalmente all’interno della classe, ovvero le due istanze di LazyXMLLoader ( più avanti spiegherò il perchè di 2 istanze ), tutti i TextField atti a visualizzare tutte le informazioni che ci servono, tra cui, gli ultimi 2, che saranno le nostre barre di caricamento, 3 proprietà numeriche: bytesTotali, filesTotali e bytesCaricati, che terranno in memoria il totale complessivo degli omonimi valori e una variabile booleana hide, utilizzata per un semplice effetto visivo.

Il costruttore

Il costruttore aggiunge i vari textfield posizionati ed un minimo formattati tramite il metodo addTextFields(). Quindi mette in ascolto l’evento click con il textfield in modo che il caricamento abbia inizio una volta cliccato il testo.

Ready? GO!

Effettuato il click sul textfield inizia il caricamento vero e proprio. Il metodo start() istanzia lazyTotal, la prima delle due istanze di LazyXMLLoader. Perchè due istanze? Cercando di arrivare allo scopo delle 2 barre ho incontrato 1 problema strettamente legato al numero delle connessioni e alla disponibilità di alcuni dati, ovvero:

• bytesTotal = Se il numero delle connessioni è minore del numero dei files sarà uguale a 0
• bytesTotalCurrent = Se il numero delle connessioni è maggiore del numero dei files sarà = a bytesTotal

Che cosa è il numero delle connessioni? Il numero delle connessioni, ovvero il terzo argomento del costruttore di LazyXMLLoader, in parole molto semplici, definisce quanti file possono essere scaricati in contemporanea.

Il problema

Mettendo un numero di connessioni maggiore del numero dei files abbiamo il numero dei bytes totali ma non possiamo scaricare i files uno alla volta e vedere nel dettaglio il loro andamento. Con un numero di connessioni uguale ad 1 possiamo vedere procedere il caricamento dei files uno alla volta, ma così facendo non abbiamo il numero totale dei bytes che ci serve per creare la barra sul totale.

La possibile soluzione

Una possibile soluzione che mi è venuta in mente è stata la creazione di una istanza di LazyXMLLoader con un numero di connessioni maggiore del numero dei files. Una volta che questa è in grado di darci le informazioni sul totale bytes e totale files, viene subito chiusa e rimossa e viene fatta partire la seconda istanza in cui specificheremo 1 come numero di connessioni, che effettuerà il caricamento vero e proprio. I dati sul totale bytes ci vengono restituiti dalla prima istanza praticamente subito, testato con la simulazione di scaricamento a 56 kbps non sono occorsi più di 5 o 6 secondi, il tempo di scaricare il file lazyloader.xml. Il metodo incaricato di recuperare i bytes totali e bloccare il primo loader è onAllProgressTotal.

Quindi, avvenuto il dispatch dell’evento LAZY_COMPLETE viene richiamato il metodo onAllLoadedTotal che istanzia il secondo loader. Il grosso del lavoro sarà adesso eseguito dal metodo onAllProgress, che ci aggiornerà sul progresso del file attualmente caricato e sull’andamento globale.

Terminato il caricamento dei dati, questi potranno essere visualizzati tramite il click sul testo che avverte del termine del caricamento. Cliccate qui per visualizzare il risultato ( il download dei file potrebbe richiedere molto tempo dipendentemente dalla vostra connessione):

Si conclude qui questo tutorial, siete invitati a testare il codice postato e lasciare i vostri commenti.

Related posts:

1. Muovere uno sprite usando la tastiera con Actionscript 3.0 Muoviamo un oggetto alla pressione dei tasti. In questo articolo...
2. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...

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

Uno skybox è una sorta i contenitore formato da 6 piani che ha la funzione di far da fondale per una applicazione 3D. Il framework Sandy 3D Engine ha un omonimo oggetto che gestisce in maniera molto semplice tutto ciò e, in questo tutorial, vedremo come utilizzarlo e come eventualmente effettuare uno switch delle texture per ognuna delle sue faccie. Inoltre, utilizzeremo un diverso sistema rispetto a quello usato in questo tutorial per caricare i file esterni all’interno del nostro programma, l’oggetto LoaderQueue.

Per la creazione delle texture possiamo utilizzare il software Terragen o cercare sul solito motore di ricerca.

SandyMain.as

  package {
    import flash.display.Sprite;
    import flash.events.*;
    import flash.ui.*;
    import flash.display.Bitmap;
    import flash.net.URLRequest;

    import sandy.core.Scene3D;
    import sandy.core.scenegraph.*;
    import sandy.primitive.*;
    import sandy.materials.*;
    import sandy.materials.attributes.*;
    import sandy.events.*;
    import sandy.util.*;

    public class SandyMain extends Sprite {
      private static const TOP = 'top';
      private static const LEFT = 'left';
      private static const BOTTOM = 'bottom';
      private static const RIGHT = 'right';
      private static const BACK = 'back';
      private static const FRONT = 'front';

      private var scene:Scene3D;
      private var camera:Camera3D;
      private var group:Group;
      private var queue:LoaderQueue;
      private var skyBox:SkyBox;    

      public function SandyMain():void {
        group = new Group("root");
        camera = new Camera3D( 1024, 768);
        camera.setPosition(0,0,0);
        scene = new Scene3D( "myScene", this, camera, group);
        skyBox  = new SkyBox( "container", 1000, 9, 9 );
        loadSkyTextures();
        group.addChild( skyBox );
      }

      private function loadSkyTextures(type:String = 'default'):void {
        queue = new LoaderQueue();
        queue.add( TOP, new URLRequest("assets/skybox/"+type+"/top.jpg") );
        queue.add( LEFT, new URLRequest("assets/skybox/"+type+"/left.jpg") );
        queue.add( BOTTOM, new URLRequest("assets/skybox/"+type+"/bottom.jpg") );
        queue.add( RIGHT, new URLRequest("assets/skybox/"+type+"/right.jpg") );
        queue.add( BACK, new URLRequest("assets/skybox/"+type+"/back.jpg") );
        queue.add( FRONT, new URLRequest("assets/skybox/"+type+"/front.jpg") );
        queue.addEventListener(SandyEvent.QUEUE_COMPLETE, loadComplete );
        queue.start();
      }

      private function setAppearance():void {
        var mTop = new BitmapMaterial( queue.data[TOP].bitmapData, null );
        var mLeft = new BitmapMaterial( queue.data[LEFT].bitmapData );
        var mBottom = new BitmapMaterial( queue.data[BOTTOM].bitmapData );
        var mRight = new BitmapMaterial( queue.data[RIGHT].bitmapData );
        var mBack = new BitmapMaterial( queue.data[BACK].bitmapData );
        var mFront = new BitmapMaterial( queue.data[FRONT].bitmapData );
        skyBox.top.appearance = new Appearance( mTop );
        skyBox.left.appearance = new Appearance( mLeft );
        skyBox.bottom.appearance = new Appearance( mBottom );
        skyBox.right.appearance = new Appearance( mRight );
        skyBox.back.appearance = new Appearance( mBack );
        skyBox.front.appearance = new Appearance( mFront );
      }

      private function loadComplete( event : QueueEvent ):void {
        setAppearance();
        addEventListener( Event.ENTER_FRAME, enterFrameHandler );
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
      } 

      private function enterFrameHandler( event : Event ):void {
        scene.render();
      } 

      private function keyPressed(event:KeyboardEvent):void {
        switch(event.keyCode) {
          case Keyboard.UP:
            camera.tilt +=2;
            //camera.rotateX -=2;
            break;
          case Keyboard.DOWN:
            camera.tilt -=2;
            //camera.rotateX +=2;
            break;
          case Keyboard.RIGHT:
            //camera.pan +=2;
            camera.rotateY -=2;
            break;
          case Keyboard.LEFT:
            //camera.pan -=2;
            camera.rotateY +=2;
            break;
          case Keyboard.CONTROL:
            camera.roll +=2;
          break;
          case 48:
            loadSkyTextures();
          break;
          case 49:
            loadSkyTextures('skybox');
          break;
        }
      }
    }
  }

Nel costruttore creaimo tutto ciò di cui necessita Sandy 3D engine con in aggiunta l’oggetto skybox. Attribuiremo una diversa texture per ogni faccia tramite la chiamata del metodo loadSkyTextures(), al quale sarà possibile passare un argomento: il nome della subdirectory dove andare a cercare i files da caricare. Da notare il codice che compone questo metodo, dove facciamo uso dell’oggetto LoaderQueue.

LoaderQueue si occupa di caricare i file specificati tramite il metodo add(), è una volta terminato esegue il dispatch dell’evento SandyEvent.QUEUE_COMPLETE che richiama il metodo setAppearance() che si occupa di rivestire ogni singola faccia con la relativa immagine.

Con questa impostazione eseguire una switch delle texture di ogni faccia è molto semplice. Alla pressione di un tasto ( in questo caso sono stati utilizzati i tasti numerici 0 e 1 ) effettuiamo una chiamata al metodo loadSkyTextures(); in cui passeremo un argomento diverso dipendentemente da quale rivestimento vogliamo far visualizzare alla pressione di quel tasto.

Qui di seguito il risultato finale:

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...
3. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...

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

L’esempio che tratterò in questo articolo sarà quanto di più semplice è possibile realizzare utilizzando questo framework, una sfera texture-mappata rappresentante il pianeta Terra, con in più qualche comando tipo la rotazione negli assi X,Y,Z ed alcuni movimenti della telecamera virtuale.
Se siete pronti non vi resta che scaricare Sandy 3D Engine.

Lo potete trovare in download su http://www.flashsandy.org/download.

Per i più impazienti, qui sotto potete vedere il risultato finale. Niente male per poche righe di codice, che ne dite?

Usate i tasti 1,2,3,4,5,6 per muovere rispettivamente la Terra nel suo asse X ( 1 e 2 ), Y ( 3 e 4 ) e Z ( 5 e 6 ), inoltre i tasti PAG UP e PAG DOWN per avvicinare ed allontanare la camera virtuale e i tasti direzionali per muovere sempre la camera direzionale nelle relative direzioni.

Prima di cominciare bisogna ‘dire’ a Flash dove andare a prendere le librerie di Sandy 3D engine in modo tale che quando le richiameremo nell’applicazione non ci venga restituito un bell’errore. Quindi, dopo aver scaricato Sandy 3D engine, apriamo flash, nel menu in alto selezioniamo Modifica -> Preferenze ( CTRL+U ), dopodichè selezioniamo Actionscript, clicchiamo su Impostazioni Actionscript 3.0 e selezioniamo la directory in cui abbiamo i file di flash Sandy 3D Engine. Attenzione in questo passaggio, in quanto la directory da selezionare dev’essere quella che contiene al suo interno la directory Sandy ( es. il_mio_percorso/src/ dove src conterrà Sandy ).

Ogni applicazione che utilizza Sandy 3D engine è composta principalmente da questi oggetti:

• Una scena 3D, ovvero il mondo 3D
• Un gruppo, ovvero un oggetto che conterrà tutti gli altri oggetti
• Una camera 3D

Il seguente è il codice completo di questa applicazione, ovvero della sfera texture-mappata, del loop dell’applicazione e dell’interazione dei comandi della tastiera:

package {
    import flash.display.Sprite;
    import flash.events.*;
    import sandy.core.Scene3D;
    import sandy.core.scenegraph.*;
    import sandy.primitive.*;
    import sandy.materials.*;
    import flash.ui.*;

    public class Sfera extends Sprite {
      private var sfera:Sphere;
      private var scene:Scene3D;
      private var camera:Camera3D;
      private var group:Group;

      public function Sfera():void {
        group = new Group("root");
        camera = new Camera3D( 550, 400 );
        scene = new Scene3D( "myScene", this, camera, group);
        sfera = new Sphere( "mySphere",100,24,18 );
        sfera.appearance = new Appearance(  new BitmapMaterial( new Texture(0,0) ) );
        scene.root.addChild(sfera);
        addEventListener( Event.ENTER_FRAME, enterFrameHandler );
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
      }

      private function enterFrameHandler( event : Event ):void {
        scene.render();
      } 

      private function keyPressed(event:KeyboardEvent):void {
        switch(event.keyCode) {
          case Keyboard.UP:
            camera.tilt +=2;
            break;
          case Keyboard.DOWN:
            camera.tilt -=2;
            break;
          case Keyboard.RIGHT:

            camera.pan -=2;
            break;
          case Keyboard.LEFT:
            camera.pan +=2;
            break;
          case Keyboard.CONTROL:
            camera.roll +=2;
            break;
          case Keyboard.PAGE_DOWN:
            camera.z -=5;
            break;
          case Keyboard.PAGE_UP:
            camera.z +=5;
          break;
          case 49:
            sfera.rotateX+=1;
          break;
          case 50:
            sfera.rotateX-=1;
          break;
          case 51:
            sfera.rotateY+=1;
          break;
          case 52:
            sfera.rotateY-=1;
          break;
          case 53:
            sfera.rotateZ+=1;
          break;
          case 54:
            sfera.rotateZ-=1;
          break;
        }
        trace(event.keyCode);
      }
    }
  }

Dalla riga 2 alla riga 8 importiamo tutte le librerie di cui abbiamo bisogno.

Dalla riga 11 alla 14 creaiamo le proprietà private che conterranno gli oggetti fondamentali con in aggiunta la sfera.

La funzione enterFrameHandler è quella che viene richiamata in ogni singolo frame, e non a caso renderizza la scena.

La funzione keyPressed viene richiamata ogni qual volta un tasto della tastiera è premuto. Se il keycode della tastiera corrisponde ad uno dei casi, l’azione relativa viene eseguita.

All’interno della funzione keyPressed ho aggiunto trace(event.keyCode); che ci permette di visualizzare il keycode del tasto premuto ( un numero intero ).

L’unico punto su cui dobbiamo soffermarci riguarda l’inserimento della texture all’interno dell’applicazione. Questa, una volta scelta ( qui ne trovate a volontà ), deve essere importata nella libreria ( File -> apri … vi ricordo CTRL+L per visulizzare la libreria ) e concatenata ad una classe.

Per eseguire questa operazione, selezioniamo il file dalla libreria, destro del mouse e selezioniamo la voce concatenamento. Fatto cio attribuiamo un nome classe alla texture, nel nostro caso il nome sarà proprio Texture ( la maiuscola è FONDAMENTALE ). Se visualizzate il codice alla riga 21, è proprio una istanza di Texture ( quindi di questa immagine ) che passiamo come argomento all’istanza di BitmapMaterial. Inoltre devono essere spuntati ‘Esporta per Actionscript’ ed ‘Esporta nel primo fotogramma’.

Per compilare questa applicazione vi ricordo che dovete creare un nuovo documento flash ( linguaggio AS3 ), creare un file chiamato col medesimo nome della classe, Sfera nel nostro caso, con estensione .as e legarlo al documento inserendo il nome della classe, Sfera all’interno del campo input di testo in proprietà -> classe documento.

Termina qui questo tutorial di base per il framework Flash Sandy 3D engine. I feedback sono sempre ben accetti quindi se avete domande e/o commenti potete scrivere qui sotto.

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...
3. Personalizzare il puntatore del mouse con Actionscript 3.0 Usando la classe Custom Mouse Pointer Per le nostre applicazioni...

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