Esempio di oggetto di visualizzazione: SpriteArranger

Flash Player 9 e versioni successive, Adobe AIR 1.0 e versioni successive

L'applicazione di esempio SpriteArranger si basa sull'applicazione di esempio Geometric Shapes descritta a parte in Apprendimento di ActionScript 3.0.

L'applicazione SpriteArranger di esempio illustra una serie di concetti relativi all'uso degli oggetti di visualizzazione, quali:

  • Estensione delle classi degli oggetti di visualizzazione

  • Aggiunta di oggetti all'elenco di visualizzazione

  • Ordinamento su livelli degli oggetti di visualizzazione e uso dei contenitori degli oggetti di visualizzazione

  • Risposta a eventi di oggetti di visualizzazione

  • Uso di proprietà e metodi degli oggetti di visualizzazione

Per ottenere i file dell'applicazione per questo esempio, visitate la pagina www.adobe.com/go/learn_programmingAS3samples_flash_it. I file dell'applicazione SpriteArranger si trovano nella cartella Examples/SpriteArranger. L'applicazione è composta dai seguenti file:

File

Descrizione

SpriteArranger.mxml

o

SpriteArranger.fla

Il file principale dell'applicazione in Flash (FLA) o Flex (MXML)

com/example/programmingas3/SpriteArranger/CircleSprite.as

Classe che definisce un tipo di oggetto Sprite in grado di eseguire il rendering di un cerchio sullo schermo.

com/example/programmingas3/SpriteArranger/DrawingCanvas.as

Classe che definisce l'area di lavoro, ovvero un contenitore di oggetti di visualizzazione contenente oggetti GeometricSprite.

com/example/programmingas3/SpriteArranger/SquareSprite.as

Classe che definisce un tipo di oggetto Sprite in grado di eseguire il rendering di un quadrato sullo schermo.

com/example/programmingas3/SpriteArranger/TriangleSprite.as

Classe che definisce un tipo di oggetto Sprite in grado di eseguire il rendering di un triangolo sullo schermo.

com/example/programmingas3/SpriteArranger/GeometricSprite.as

Classe che estende l'oggetto Sprite, utilizzata per definire una figura geometrica sullo schermo. Anche CircleSprite, SquareSprite e TriangleSprite estendono questa classe.

com/example/programmingas3/geometricshapes/IGeometricShape.as

Metodi di definizione interfaccia di base da implementare in tutte le classi delle figure geometriche.

com/example/programmingas3/geometricshapes/IPolygon.as

Metodo di definizione di interfaccia da implementare nelle classi delle figure geometriche che presentano più lati.

com/example/programmingas3/geometricshapes/RegularPolygon.as

Tipo di figura geometrica che presenta lati di uguale lunghezza posizionati simmetricamente attorno al centro della figura.

com/example/programmingas3/geometricshapes/Circle.as

Tipo di figura geometrica che definisce un cerchio.

com/example/programmingas3/geometricshapes/EquilateralTriangle.as

Sottoclasse di RegularPolygon che definisce un triangolo con lati di pari lunghezza.

com/example/programmingas3/geometricshapes/IPolygon.as

Sottoclasse di RegularPolygon che definisce un rettangolo con quattro lati di pari lunghezza.

com/example/programmingas3/geometricshapes/GeometricShapeFactory.as

Classe contenente un metodo factory per la creazione di figure geometriche a partire da una forma e da una dimensione specificate.

Definizione delle classi SpriteArranger

L'applicazione SpriteArranger consente di aggiungere una varietà di oggetti di visualizzazione all'area di lavoro visualizzata sullo schermo.

La classe DrawingCanvas definisce un'area di disegno, un tipo di contenitore di oggetti di visualizzazione al quale è possibile aggiungere figure geometriche visualizzate sullo schermo. Tali forme sono istanze di una delle sottoclassi della classe GeometricSprite.

Classe DrawingCanvas

In Flex, tutti gli oggetti di visualizzazione secondari aggiunti a un oggetto Container devono appartenere a una classe discendente dalla classe mx.core.UIComponent. Questa applicazione aggiunge un'istanza della classe DrawingCanvas come oggetto secondario di un oggetto mx.containers.VBox, come definito nel codice MXML presente nel file SpriteArranger.mxml. Questa ereditarietà è definita nella dichiarazione della classe DrawingCanvas nel modo seguente:

public class DrawingCanvas extends UIComponent

La classe UIComponent eredita dalle classi DisplayObject, DisplayObjectContainer e Sprite e il codice presente nella classe DrawingCanvas utilizza i metodi e le proprietà di queste classi.

La classe DrawingCanvas estende la classe Sprite e questa ereditarietà è definita nella dichiarazione della classe DrawingCanvas nel modo seguente:

public class DrawingCanvas extends Sprite

La classe Sprite è una sottoclasse delle classi DisplayObjectContainer e DisplayObject e la classe DrawingCanvas utilizza i metodi e le proprietà di queste classi.

Il metodo di costruzione DrawingCanvas() consente di impostare un oggetto rettangolo denominato bounds che verrà utilizzato successivamente per tracciare i contorni dell'area di lavoro. Il metodo di costruzione chiama quindi il metodo initCanvas(), come indicato di seguito:

this.bounds = new Rectangle(0, 0, w, h); 
initCanvas(fillColor, lineColor);

Come indica l'esempio seguente, il metodo initCanvas() definisce varie proprietà dell'oggetto DrawingCanvas che sono state trasmesse come argomenti alla funzione di costruzione:

this.lineColor = lineColor; 
this.fillColor = fillColor; 
this.width = 500; 
this.height = 200;

Il metodo initCanvas() chiama quindi il metodo drawBounds(), che disegna l'area di lavoro utilizzando la proprietà graphics della classe DrawingCanvas. La proprietà graphics viene ereditata dalla classe Shape.

this.graphics.clear();         
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
this.graphics.drawRect(bounds.left - 1,  
                        bounds.top - 1,  
                        bounds.width + 2, 
                        bounds.height + 2); 
this.graphics.endFill();

I seguenti metodi aggiuntivi della classe DrawingCanvas vengono chiamati in base alle interazioni dell'utente con l'applicazione:

Classe GeometricSprite e relative sottoclassi

Ogni oggetto di visualizzazione che l'utente può inserire nell'area di lavoro è un'istanza di una delle seguenti sottoclassi di GeometricSprite:

  • CircleSprite

  • SquareSprite

  • TriangleSprite

La classe GeometricSprite estende la classe flash.display.Sprite:

public class GeometricSprite extends Sprite

La classe GeometricSprite include varie proprietà comuni a tutti gli oggetti GeometricSprite. Tali proprietà vengono impostate nella funzione di costruzione, in base a una serie di parametri trasmessi alla funzione. Ad esempio:

this.size = size; 
this.lineColor = lColor; 
this.fillColor = fColor;

La proprietà geometricShape della classe GeometricSprite definisce un'interfaccia IGeometricShape che definisce una serie di proprietà matematiche, ma non le proprietà visive, della figura. Le classi che implementano l'interfaccia IGeometricShape sono definite nell'applicazione di esempio GeometricShapes in Apprendimento di ActionScript 3.0.

La classe GeometricSprite definisce il metodo drawShape(), che viene ulteriormente perfezionato dalle definizioni di sostituzione di ciascuna sottoclasse di GeometricSprite. Per ulteriori informazioni, vedete la sezione “Aggiunta di oggetti di visualizzazione all'area di lavoro” seguente.

La classe GeometricSprite fornisce inoltre i seguenti metodi:

Aggiunta di oggetti di visualizzazione all'area di lavoro

Quando l'utente fa clic sul pulsante Aggiungi forma, l'applicazione chiama il metodo addShape() della classe DrawingCanvas. Tale metodo crea una nuova istanza di GeometricSprite chiamando la funzione di costruzione appropriata di una delle sottoclassi di GeometricSprite, come illustrato dal seguente esempio:

public function addShape(shapeName:String, len:Number):void 
{ 
    var newShape:GeometricSprite; 
    switch (shapeName) 
    { 
        case "Triangle": 
            newShape = new TriangleSprite(len); 
            break; 
 
        case "Square": 
            newShape = new SquareSprite(len); 
            break; 
 
        case "Circle": 
            newShape = new CircleSprite(len); 
            break; 
    } 
    newShape.alpha = 0.8; 
    this.addChild(newShape); 
}

Ciascun metodo della funzione di costruzione chiama il metodo drawShape(), che impiega la proprietà graphics della classe (ereditata dalla classe Sprite) per disegnare la grafica vettoriale appropriata. Il metodo drawShape() della classe CircleSprite, ad esempio, include il seguente codice:

this.graphics.clear(); 
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
var radius:Number = this.size / 2; 
this.graphics.drawCircle(radius, radius, radius);

La penultima riga della funzione addShape() imposta la proprietà alpha dell'oggetto di visualizzazione (ereditata dalla classe DisplayObject); in questo modo ogni oggetto di visualizzazione aggiunto all'area di lavoro risulta leggermente trasparente, affinché sia possibile vedere gli oggetti sotto di esso.

L'ultima riga del metodo addChild() aggiunge il nuovo oggetto di visualizzazione all'elenco secondario dell'istanza della classe DrawingCanvas, che si trova già nell'elenco di visualizzazione. In tal modo, il nuovo oggetto di visualizzazione viene visualizzato nello stage.

L'interfaccia dell'applicazione include due campi di testo, selectedSpriteTxt e outputTxt. Le proprietà di testo di tali campi vengono aggiornate con informazioni relative agli oggetti GeometricSprite che sono stati aggiunti all'area di lavoro oppure selezionati dall'utente. La classe GeometricSprite gestisce questa attività di informazione sostituendo il metodo toString(), come segue:

public override function toString():String 
{ 
    return this.shapeType + " of size " + this.size + " at " + this.x + ", " + this.y; 
}

La proprietà shapeType viene impostata sul valore appropriato nel metodo della funzione di costruzione di ogni sottoclasse di GeometricSprite. Ad esempio, il metodo toString() potrebbe restituire il seguente valore per un'istanza di CircleSprite recentemente aggiunta all'istanza DrawingCanvas:

Circle of size 50 at 0, 0

Il metodo describeChildren() della classe DrawingCanvas esegue un ciclo all'interno dell'elenco secondario dell'area di lavoro mediante la proprietà numChildren (ereditata dalla classe DisplayObjectContainer) al fine di impostare il limite del ciclo for. Viene generata una stringa che elenca ogni elemento secondario, come indicato di seguito:

var desc:String = ""; 
var child:DisplayObject; 
for (var i:int=0; i < this.numChildren; i++) 
{ 
child = this.getChildAt(i); 
desc += i + ": " + child + '\n'; 
}

La stringa risultante viene utilizzata per impostare la proprietà text del campo di testo outputTxt.

Selezione e trascinamento di oggetti di visualizzazione

Se l'utente fa clic su un'istanza di GeometricSprite, l'applicazione chiama il gestore di eventi onMouseDown(). Come illustrato nell'esempio seguente, questo gestore di eventi è impostato per intercettare eventi di pressione mouse nella funzione di costruzione della classe GeometricSprite:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

Il metodo onMouseDown() chiama quindi il metodo showSelected() dell'oggetto GeometricSprite. Se si tratta della prima chiamata di tale metodo per l'oggetto, il metodo crea un nuovo oggetto Shape denominato selectionIndicator e impiega la proprietà graphics dell'oggetto Shape per disegnare un rettangolo di evidenziazione rosso, come indicato di seguito:

this.selectionIndicator = new Shape(); 
this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0); 
this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, this.size + 1); 
this.addChild(this.selectionIndicator);

Se non si tratta della prima chiamata del metodo onMouseDown(), il metodo si limita a impostare la proprietà visible della forma selectionIndicator (ereditata dalla classe DisplayObject) come segue:

this.selectionIndicator.visible = true;

Il metodo hideSelected() nasconde la forma selectionIndicator dell'oggetto precedentemente selezionato impostando la sua proprietà visible su false.

Il metodo del gestore di eventi onMouseDown() chiama anche il metodo startDrag() (ereditato dalla classe Sprite), che include il codice seguente:

var boundsRect:Rectangle = this.parent.getRect(this.parent); 
boundsRect.width -= this.size; 
boundsRect.height -= this.size; 
this.startDrag(false, boundsRect);

Questo codice consente all'utente di trascinare l'oggetto selezionato nell'area di lavoro, entro i limiti impostati dal rettangolo boundsRect.

Quando il pulsante del mouse viene rilasciato, viene trasmesso l'evento mouseUp. Il metodo della funzione di costruzione di DrawingCanvas imposta il seguente listener di eventi:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Questo listener di eventi è configurato per l'oggetto DrawingCanvas, anziché per i singoli oggetti di GeometricSprite, perché se l'oggetto GeometricSprite viene trascinato, potrebbe finire dietro un altro oggetto di visualizzazione (un altro oggetto GeometricSprite) quando il mouse viene rilasciato. L'oggetto di visualizzazione in primo piano riceverebbe l'evento di rilascio del mouse al posto dell'oggetto trascinato dall'utente. L'aggiunta del listener all'oggetto DrawingCanvas garantisce che l'evento venga sempre gestito.

Il metodo onMouseUp() chiama il metodo onMouseUp() dell'oggetto GeometricSprite che, a sua volta, chiama il metodo stopDrag() dell'oggetto GeometricSprite.

Modifica della disposizione dei livelli degli oggetti di visualizzazione

L'interfaccia utente dell'applicazione include una serie di pulsanti chiamati Porta sullo sfondo, Sposta in basso, Sposta in alto e In primo piano. Quando l'utente fa clic su uno di questi pulsanti, l'applicazione chiama il metodo corrispondente della classe DrawingCanvas: moveToBack(), moveDown(), moveUp() o moveToFront(). Il metodo moveToBack(), ad esempio, include il seguente codice:

public function moveToBack(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, 0); 
    } 
}

Il metodo impiega il metodo setChildIndex() (ereditato dalla classe DisplayObjectContainer) per posizionare l'oggetto di visualizzazione nella posizione di indice 0 dell'elenco secondario dell'istanza di DrawingCanvas (this).

Il metodo moveDown() funziona in modo simile, tranne che decrementa la posizione di indice dell'oggetto di visualizzazione di 1 nell'elenco secondario dell'istanza DrawingCanvas:

public function moveDown(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, index - 1); 
    } 
}

I metodi moveUp() e moveToFront() funzionano in modo simile ai metodi moveToBack() e moveDown().