Creare una descrizione AS3 ridimensionabile con OOP

In questo tutorial creeremo una descrizione che si ridimensionerà automaticamente. Il nostro ToolTip aggiornerà i suoi contenuti in base alla sua posizione sul palco, in modo che siano sempre visibili. Come parte di questa attività, creeremo anche il nostro codice per gestire il ridimensionamento a 9 sezioni.


Anteprima

Diamo prima un'occhiata al nostro tooltip in azione:


Passaggio 1: imposta il file FLA

Iniziamo creando una nuova cartella chiamata "ToolTip". All'interno della cartella ToolTip, creare un FLA ActionScript 3.0.


Passaggio 2: creazione di DisplayOjects (sprite):

Ora crea un quadrato arrotondato di 150x77 px con le seguenti proprietà:

Seleziona il quadrato arrotondato e premi il tasto F8 per convertire il quadrato in uno Sprite. Applica la configurazione di seguito:

Disegna un'immagine (17x17px) simile alla figura seguente:

Selezionare il secondo disegno, premere il tasto F8 e applicare la configurazione di seguito:

Salva il tuo file FLA.


Passaggio 3: impostare FlashDevelop

FlashDevelop è un editor ActionScript con molte risorse. È possibile scaricare FlashDevelop all'indirizzo http://www.flashdevelop.org/community/viewforum.php?f=11.

La documentazione di FlashDevelop è disponibile all'indirizzo: http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page

Apri FlashDevelop, quindi seleziona: Progetto> Nuovo progetto, per creare un nuovo progetto.

Nella finestra di dialogo, imposta le opzioni come nell'immagine successiva.


Passaggio 4: creazione della classe ToolTip

Innanzitutto, seleziona la scheda Progetto (se la scheda Progetto non è visibile, seleziona: visualizza> Project Manager).

In questa scheda puoi vedere tutti i file e le cartelle del progetto. Fare clic con il pulsante destro del mouse sulla cartella ToolTip, quindi selezionare: Aggiungi> Nuova cartella e creare una cartella denominata tooltip (in minuscolo).

Ora, fare clic con il pulsante destro del mouse sulla cartella del suggerimento e scegliere: Aggiungi> Nuova cartella e creare una cartella chiamata display. Fare clic con il tasto destro del mouse sulla cartella di visualizzazione e selezionare: Aggiungi> Nuova classe.

Nella finestra di dialogo, inserire ToolTip come il nome della classe e cercare flash.display.Sprite nel Classe base campo.

Ora, il nostro progetto ha la seguente struttura:

E questa è la nostra classe ToolTip (generata automaticamente):

 pacchetto tooltip.display import flash.display.Sprite; ToolTip di classe pubblica estende Sprite ToolTip di funzione pubblica () 

Passaggio 5: creazione del pacchetto Utils

Il pacchetto utils ci aiuterà nelle funzionalità relative a Bitmap, Sprite e TextField. L'idea è seguire le pratiche OOP, rendendo questo pacchetto riutilizzabile.

Quindi, creiamo il pacchetto utils. Fare clic con il tasto destro sulla cartella tooltip, quindi selezionare: Aggiungi> Nuova cartella e creare una cartella chiamata utils.

Crea il BitmapUtils classe all'interno di questa cartella:

 pacchetto tooltip.utils public final class BitmapUtils public function BitmapUtils () throw new Error ("BitmapUtils non deve essere istanziato"); 

Crea anche, il SpriteUtils classe:

 pacchetto tooltip.utils public final class SpriteUtils public function SpriteUtils () throw new Error ("SpriteUtils non deve essere istanziato"); 

Infine, crea il TextFieldUtils classe:

 pacchetto tooltip.utils public final class TextFieldUtils public function TextFieldUtils () throw new Error ("TextFieldUtils non deve essere istanziato"); 

Passaggio 6: Classe BitmapUtils

Il BitmapUtils disporre di un singolo metodo statico che acquisisce un'istantanea di un'istanza IBitmapDrawable.

Ecco il codice:

 package tooltip.utils import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.IBitmapDrawable; import flash.display.PixelSnapping; import flash.geom.Matrix; public final class BitmapUtils public function BitmapUtils () throw new Error ("BitmapUtils non deve essere istanziato");  / ** * Crea un'istantanea di un'istanza IBitmapDrawable * @param source IBitmapDrawable istanza da utilizzare come sorgente * @param width Larghezza finale * @param height Altezza finale * @param matrix Istanza Matrix per manipolare la parte di origine che sarà drawed * @param smoothing Smooth il risultato * @param cacheAsBitmap Memorizza la bitmap in memoria * @return L'istantanea * / public static function snapShot (fonte: IBitmapDrawable, width: int, height: int, matrice: Matrix = null, smoothing: Boolean = false, cacheAsBitmap: Boolean = false): Bitmap var b: Bitmap; var bd: BitmapData = new BitmapData (larghezza, altezza, vero, 0x000000); bd.draw (source, matrix, null, null, null, smoothing); b = new Bitmap (bd, PixelSnapping.ALWAYS, smoothing); b.cacheAsBitmap = cacheAsBitmap; ritorno b; 

Passaggio 7: Classe SpriteUtils

Questa classe aggiunge uno Sprite all'elenco di visualizzazione:

 package tooltip.utils import flash.display.DisplayObjectContainer; import flash.display.Sprite; public final class SpriteUtils public function SpriteUtils () throw new Error ("SpriteUtils non deve essere istanziato");  / ** * Allegare un'istanza Sprite in un'istanza DisplayObjectContainer * @param linkage Il collegamento di Sprite che verrà allegato * @param parent Il genitore di Sprite che verrà allegato * @return * / public static function attachSprite (linkage: String , parent: DisplayObjectContainer): Sprite var s: Object = parent.loaderInfo.applicationDomain.getDefinition (linkage); restituire parent.addChild (new s ()) come Sprite; 

Passaggio 8: Classe TextFieldUtils

Questa classe crea facilmente a Campo di testo esempio.

Consiglio vivamente di leggere la descrizione della classe TextField per comprendere tutte le proprietà utilizzate.

 package tooltip.utils import flash.display.DisplayObjectContainer; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFieldType; import flash.text.TextFormat; import flash.text.TextFormatAlign; public final class TextFieldUtils public function TextFieldUtils () throw new Error ("TextFieldUtils non deve essere istanziato");  / ** * Crea un'istanza textField * @param parent Genitore di textField * @param text Testo di textField (htmlText) * @param font Nome del font da utilizzare in textField * @param embed * @param size * @param color * @param width * @param height * @param autoSize * @param multiline * @param wordWrap * @param cacheAsBitmap * @param align * @param leading * @param letterSpacing * @param type * @param selezionabile * @param sharpness * @param border * @return * / public static function textField (parent: DisplayObjectContainer, text: String, font: *, embed: Boolean = true, dimensione: Number = NaN, color: Number = 0xFFFFFF, width: Number = NaN, height: Number = NaN, autoSize: String = "none", multilinea: Boolean = false, wordWrap: Boolean = false, cacheAsBitmap: Boolean = false, align: String = "left", che conduce: Number = NaN, letterSpacing: Number = NaN, type : String = "dynamic", selezionabile: Boolean = false, nitidezza: Number = NaN, border: Boolean = false): TextField var t: TextField = new TextField (); var tf: TextFormat = new TextFormat (); parent.addChild (t); tf.align = TextFormatAlign.LEFT; tf.font = font; if (size) tf.size = size; tf.color = color; tf.leading = leading; if (letterSpacing) tf.letterSpacing = letterSpacing; switch (align.toLowerCase ()) case "left": tf.align = TextFormatAlign.LEFT; rompere; case "center": tf.align = TextFormatAlign.CENTER; rompere; caso "right": tf.align = TextFormatAlign.RIGHT; rompere; caso "justify": tf.align = TextFormatAlign.JUSTIFY; rompere; default: tf.align = TextFormatAlign.LEFT; rompere;  t.antiAliasType = AntiAliasType.ADVANCED; t.type = (type == "dynamic")? TextFieldType.DYNAMIC: TextFieldType.INPUT; t.defaultTextFormat = tf; t.embedFonts = embed; t.cacheAsBitmap = cacheAsBitmap; t.mouseEnabled = selezionabile; t.selectable = selezionabile; t.multiline = multilinea; t.border = border; t.wordWrap = wordWrap; se (nitidezza) t.sharpness = nitidezza; t.htmlText = testo; t.width = (larghezza)? larghezza: t.textWidth + 5; t.height = (altezza)? altezza: t.textHeight + 5; switch (autoSize.toLowerCase ()) case "left": t.autoSize = TextFieldAutoSize.LEFT; rompere; case "center": t.autoSize = TextFieldAutoSize.CENTER; rompere; case "right": t.autoSize = TextFieldAutoSize.RIGHT; rompere;  return t; 

Passaggio 9: Concetto di sfondo ridimensionabile

Per creare uno sfondo ridimensionabile, utilizzeremo il concetto di 9 sezioni, simile al ridimensionamento a 9 sezioni incorporato in Flash. Purtroppo, il 9-slice nativo all'interno di Flash non soddisfa le nostre esigenze.

L'idea è di dividere il sorgente (Sprite) in 9 parti (vedi l'immagine :)

Quando la larghezza dello sfondo è alterata, le parti 2, 5 e 8 sono allungate orizzontalmente, mentre le altre parti rimangono le stesse.

Allo stesso modo, quando l'altezza dello sfondo è alterata, le parti 4, 5 e 6 sono allungate verticalmente, mentre le altre non cambiano.


Step 10: The Matrix Class

La classe Matrix crea una mappa punti da utilizzare in molte forme. Per maggiori informazioni, si prega di leggere la documentazione della classe Matrix dal sito di Adobe.

Useremo la classe Matrix per tradurre la fonte dello sfondo e quindi, disegnare le parti. Infatti, la classe Matrix non influenza automaticamente il movimento di traduzione nell'oggetto, ma memorizza solo i valori che l'oggetto avrebbe se il movimento fosse eseguito. Ciò consente di utilizzare un'istanza di Matrix in vari modi senza essere bloccati in un DisplayObject.

Ad esempio, per disegnare la seconda immagine, dobbiamo prendere in considerazione la posizione (x = 0 y = 0) e la dimensione (10 x 10 px) dell'immagine 1. Applicherà la traduzione (senza influire sulla sorgente) e solo dopo che disegna la seconda parte. Esempio:

 var source: Sprite = new Sprite (); var m: Matrix = new Matrix (); m.translate (-10, 0); var bd: BitmapData = new BitmapData (source.width, source.height, true, 0x000000); bd.draw (source, m);

Il identità() il metodo può essere utilizzato per ripristinare la matrice. Se non ripristiniamo, eseguirà nuovi calcoli basati su valori precedentemente memorizzati.


Passaggio 11: la classe CustomBg

Per creare il CustomBg classe, creare un nuovo pacchetto chiamato bg all'interno del pacchetto del display. Crea nuova classe all'interno di questa cartella chiamata CustomBg. Questa classe deve estendersi folletto.

Ecco la classe:

 pacchetto tooltip.display.bg import flash.display.Sprite; public final class CustomBg estende Sprite public function CustomBg () 

Step 12: The Constructor

Passiamo ora ai parametri del costruttore, alle proprietà della classe e alle importazioni. Abbiamo bisogno di importare tutte le classi sottostanti per completare la nostra classe:

 import flash.display.Bitmap; import flash.display.DisplayObjectContainer; import flash.display.Sprite; import flash.geom.Matrix; import flash.utils.getDefinitionByName; import tooltip.utils.BitmapUtils;

Adesso crea due proprietà:

 private var _parts: Vector.; private var _boundaries: int;

Il costruttore deve contenere i seguenti parametri:

 / ** * Crea uno sfondo ridimensionabile * @ linkam Linkage di uno Sprite da disegnare * @param parent Genitore di sfondo * @param width Larghezza iniziale * @param height Altezza iniziale * @param boundaries Confini per tagliare l'immagine * @param smoothing Smooth the Background * @param cacheAsBitmap Memorizza lo sfondo in memoria * / public function CustomBg (linkage: String, parent: DisplayObjectContainer, width: Number = NaN, height: Number = NaN, boundaries: int = 10, smoothing: Boolean = true , cacheAsBitmap: Boolean = false) 

Nel costruttore, suddivideremo l'immagine.

Innanzitutto, dichiariamo le variabili. Con i vars "Istanza" e "fonte", alleghiamo il nostro background (Sprite) al CustomBg classe. Nella variabile "parti", memorizziamo le parti disegnate dello sfondo. Infine, con la variabile "m", otteniamo i valori di traduzione e li usiamo per disegnare le parti del nostro CustomBg.

Ecco il codice:

 var Instance: Class = getDefinitionByName (linkage) come classe; var source: Sprite = new Instance () come Sprite; parti di var: Vector. = nuovo vettore. (); var m: Matrix = source.transform.matrix; parts [0] = BitmapUtils.snapShot (source, boundaries, boundaries, null, smoothing); m.translate (-boundaries, 0); parts [1] = BitmapUtils.snapShot (source, source.width - boundaries * 2, boundaries, m, smoothing); m.identity (); m.translate (-source.width + boundaries, 0); parts [2] = BitmapUtils.snapShot (origine, limiti, limiti, m, smoothing); m.identity (); m.translate (0, -boundaries); parts [3] = BitmapUtils.snapShot (source, boundaries, source.height - boundaries * 2, m, smoothing); m.identity (); m.translate (-boundaries, -boundaries); parts [4] = BitmapUtils.snapShot (source, source.width - boundaries * 2, source.height - boundaries * 2, m, smoothing); m.identity (); m.translate (-source.width + boundaries, -boundaries); parts [5] = BitmapUtils.snapShot (source, boundaries, source.height - boundaries * 2, m, smoothing); m.identity (); m.translate (0, -source.height + boundaries); parts [6] = BitmapUtils.snapShot (source, boundaries, boundaries, m, smoothing); m.identity (); m.translate (-boundaries, -source.height + boundaries); parts [7] = BitmapUtils.snapShot (source, source.width - boundaries * 2, boundaries, m, smoothing); m.identity (); m.translate (-source.width + boundaries, -source.height + boundaries); parts [8] = BitmapUtils.snapShot (source, boundaries, boundaries, m, smoothing); this.addChild (parti [0]); this.addChild (parti [1]); this.addChild (parti [2]); this.addChild (parti [3]); this.addChild (parti [4]); this.addChild (parti [5]); this.addChild (parti [6]); this.addChild (parti [7]); this.addChild (parti [8]); this._parts = parti; this._boundaries = boundaries; this.width = (isNaN (larghezza))? source.width: width; this.height = (isNaN (height))? source.height: height; parent.addChild (questo);

Passaggio 13: aggiorna le posizioni delle parti

Ogni volta che lo sfondo viene ridimensionato, la posizione delle parti deve essere aggiornata. Creiamo il organizzare() metodo, per aggiornare la posizione di tutte le parti dello sfondo:

 organizzare la funzione privata (): void var parts: Vector. = this._parts; var limiti: int = this._boundaries; parti [0] .x = 0; parti [0] .y = 0; parti [1] .x = confini; parti [1] .y = 0; parts [2] .x = parts [0] .width + parts [1] .width; parti [2] .y = 0; parti [3] .x = 0; parti [3] .y = confini; parti [4] .x = confini; parti [4] .y = confini; parti [5] .x = parti [3] .width + parti [4] .width; parti [5] .y = confini; parti [6] .x = 0; parti [6] .y = parti [0] altezza + parti [3] altezza; parti [7] .x = confini; parti [7] .y = parti [6] .y; parts [8] .x = parts [6] .width + parts [7] .width; parti [8] .y = parti [6] .y; 

Passaggio 14: larghezza e altezza

Infine, sostituiamo il larghezza e altezza metodi della classe Sprite, per ridimensionare e aggiornare le posizioni delle parti:

 funzione pubblica di override set width (v: Number): void var parts: Vector. = this._parts; var limiti: int = this._boundaries; parts [1] .width = v - boundaries * 2; parts [4] .width = v - boundaries * 2; parts [7] .width = v - boundaries * 2; this.arrange ();  public override function set height (v: Number): void var parts: Vector. = this._parts; var limiti: int = this._boundaries; parti [3] .height = v - boundaries * 2; parti [4] .height = v - boundaries * 2; parti [5] .height = v - boundaries * 2; this.arrange (); 

Ora, abbiamo uno sfondo ridimensionabile che non subisce distorsioni quando viene ridimensionato. Vedi l'anteprima:


Passaggio 15: il modello di progettazione Singleton

I modelli di progettazione sono metodologie di programmazione che offrono soluzioni a problemi comuni nella progettazione del software.

Creeremo una classe ToolTip sotto gli aspetti del modello di progettazione Singleton, che ci fornisce una classe che ha solo un'istanza globale nell'intero progetto. Pensa: vuoi usare la descrizione in un menu con diversi pulsanti. Sarebbe inutile e poco pratico creare un'istanza della classe ToolTip per ciascun pulsante di menu, poiché è possibile visualizzare solo una descrizione alla volta. L'approccio migliore in questo caso creerebbe un'istanza globale per l'intero progetto e utilizzerà i metodi mostrare() e nascondere() per controllare il display.

Il modello di progettazione di Singleton impedirà di chiamare il costruttore della classe; crea un'istanza della classe dentro di sé e restituisce sempre tramite un metodo specifico. Si prega di notare la nostra implementazione Singleton:

 pacchetto tooltip.display import flash.display.Sprite; ToolTip di classe pubblica estende Sprite private static var _instance: ToolTip; funzione statica pubblica getInstance (): ToolTip if (! ToolTip._instance) ToolTip._instance = new ToolTip (new Singleton ()); restituire ToolTip._instance;  funzione pubblica ToolTip (s: Singleton)  classe interna Singleton 

Nell'esempio sopra, possiamo vedere la dichiarazione di un'istanza statica. Sarà sempre restituito dal getInstance () metodo.

Nel costruttore, richiediamo un parametro che possa essere dichiarato solo all'interno di questa classe, poiché questo parametro è di tipo Singleton e questo tipo di dati esiste solo all'interno della classe. Pertanto, se proviamo a creare un'istanza della classe tramite il costruttore, viene generato un errore.

Il getInstance () metodo controlla se la variabile è stata dichiarata; se non è stato dichiarato, il metodo getInstance () dichiara l'istanza e quindi la restituisce. Se l'istanza è già stata dichiarata, il getInstance () restituisce solo l'istanza.

 var toolTip: ToolTip = new ToolTip (); // Errore var toolTip: ToolTip = ToolTip.getInstance (); // Ok

Passaggio 16: Classe TweenMax

TweenMax di Jack Doyle è un motore interpolato che viene spesso citato su Activetuts +. Ti permette di realizzare facilmente l'animazione tween.

La libreria TweenMax e la relativa documentazione sono disponibili su GreenSock.com.

Nel nostro caso, useremo la classe TweenMax per aggiungere ombra e anche per visualizzare e nascondere la nostra descrizione comandi. Ecco un breve esempio della sintassi della classe TweenMax:

 TweenMax.to (displayObjectInstance, duration, property: value);

Ora guarda un semplice uso della classe TweenMax:

Vedere il codice di esempio utilizzato per ottenere questo:

 import com.greensock.TweenMax; bt.label = "ROLL SOPRA PER AGGIUNGERE OMBRA"; bt.addEventListener (MouseEvent.MOUSE_OVER, onOver); bt.addEventListener (MouseEvent.MOUSE_OUT, onOut); function onOver (e: MouseEvent): void bt.label = "ROLL OUT TO REMOVE SHADOW"; TweenMax.to (bt, 0.5, dropShadowFilter: color: 0x000000, alpha: 0.7, blurX: 4, blurY: 4, angle: 45, distance: 7);  function onOut (e: MouseEvent): void bt.label = "ROLLA SOPRA PER AGGIUNGERE SHADOW"; TweenMax.to (bt, 0.5, dropShadowFilter: color: 0x000000, alpha: 0, blurX: 0, blurY: 0, angolo: 0, distanza: 0); 

Passaggio 17: aggiunta di istanze allo stage

Aggiungeremo gli oggetti sul palco con l'aiuto delle nostre classi create in precedenza e di due metodi. Dobbiamo aggiungere un listener per l'evento Event.ADDED_TO_STAGE per evitare riferimenti nulli allo stage.

Aggiorna il costruttore e aggiungi i due metodi seguenti:

 funzione pubblica ToolTip (s: Singleton) this.addEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage);  funzione privata onAddedToStage (e: Event): void this.removeEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage); This.Draw ();  private function draw (): void this.alpha = 0; this._bg = new CustomBg ("ToolTipBg", this); this._tail = SpriteUtils.attachSprite ("ToolTipTail", questo); this._tipField = TextFieldUtils.textField (this, "", "Arial", false, 13, 0x000000); TweenMax.to (questo, 0, dropShadowFilter: color: 0x000000, alpha: 0.7, blurX: 4, blurY: 4, angle: 45, distance: 7); this.removeChild (this._bg); this.removeChild (this._tail); this.removeChild (this._tipField); 

Passaggio 18: Event.ENTER_FRAME listener

La nostra descrizione apparirà sempre vicino al cursore del mouse.

Per sapere quale aspetto dovrebbe apparire la descrizione, ho diviso lo stage in una griglia di nove quadrati (usando i calcoli, non ho usato DisplayObjects). Sarebbero bastati solo sei quadrati, ma ho creato nove quadrati in modo da poter cambiare il comportamento dei quadrati 3, 4 e 5. In questo caso il conteggio è a base zero.

Il cursore del mouse sarà sempre in contatto con uno di questi quadrati. Sulla base di questo, so come dovrei disegnare il ToolTip. Rovescia il mouse nei riquadri seguenti:

Nel onFrame () metodo, controllo su quale quadrato è posizionato il cursore del mouse e quindi effettuo una chiamata organizzare (stile: int), passando come parametro il numero del quadrato immaginario, in modo che disegna la descrizione come lo desidero. Ho usato istruzioni a una riga perché sono più veloci.

 funzione privata onFrame (e: Event): void var sW: Number = this.stage.stageWidth; var sH: Number = this.stage.stageHeight; var rW: Number = sW / 3; var rH: Number = sH / 3; var mX: Number = this.stage.mouseX; var mY: Number = this.stage.mouseY; se (mX < rW && mY < rH) this.arrange(0); else if (mX > rW && mX < rW * 2 && mY < rH) this.arrange(1); else if (mX > rW * 2 && mY < rH) this.arrange(2); else if (mX < rW && mY > rH && mY < rH * 2) this.arrange(3); else if (mX > rW && mX < rW * 2 && mY > rH && mY < rH * 2) this.arrange(4); else if (mX > rW * 2 && mY> rH && mY < rH * 2) this.arrange(5); else if (mX < rW && mY > rH * 2) this.arrange (6); altrimenti se (mX> rW && mX < rW * 2 && mY > rH * 2) this.arrange (7); altrimenti this.arrange (8); 

Passaggio 19: Disporre la funzione

Il organizzare() metodo aggiorna tutti gli elementi del ToolTip in base al valore ricevuto nel parametro.

 organizzare la funzione privata (style: int): void var b: CustomBg = this._bg; var t: Sprite = this._tail; var tF: TextField = this._tipField; t.scaleY = 1; t.x = 0; t.y = 0; tF.width = tF.textWidth + 5; tF.height = tF.textHeight + 5; tF.x = 0; tF.y = 0; b.width = tF.width + 10; b.height = tF.height + 10; b.x = 0; b.y = 0; var mX: Number = this.stage.mouseX; var mY: Number = this.stage.mouseY; if (style == 0) t.scaleY = -1; t.x = mX; t.y = mY + 40; b.x = mX - 10; b.y = mY + t.height + b.height - 5;  else if (style == 1) t.scaleY = -1; t.x = mX; t.y = mY + 40; b.x = mX - b.width * 0.5 + t.width * 0.5; b.y = mY + t.height + b.height - 5;  else if (style == 2) t.scaleY = -1; t.x = mX; t.y = mY + 40; b.x = mX - b.width + t.width + 10; b.y = mY + t.height + b.height - 5;  else if (style == 3 || style == 6) t.x = mX; t.y = mY - t.height; b.x = t.x - 10; b.y = t.y - b.height + 2;  else if (style == 4 || style == 7) t.x = mX; t.y = mY - t.height; b.x = t.x - b.width * 0.5 + t.width * 0.5; b.y = t.y - b.height + 2;  else if (style == 5 || style == 8) t.x = mX; t.y = mY - t.height; b.x = t.x - b.width + t.width + 10; b.y = t.y - b.height + 2;  tF.x = b.x + 5; tF.y = b.y + 5; 

Passaggio 20: Mostra funzione

Il metodo qui sotto non ha bisogno di molte spiegazioni; è auto esplicativo.

 public function show (message: String): void this._tipField.htmlText = message; this.parent.setChildIndex (this, this.parent.numChildren - 1); this.addChild (this._bg); this.addChild (this._tail); this.addChild (this._tipField); TweenMax.to (questo, 0.25, alpha: 1); this.addEventListener (Event.ENTER_FRAME, this.onFrame); 

Passaggio 21: Nascondi funzione

Ho creato il onCompleteHide () metodo che verrà eseguito dopo la fine dell'istruzione TweenMax (questo viene fatto attraverso la seguente dichiarazione: onComplete: this.onCompleteHide). Rimuoverà tutti gli elementi dallo stage.

 public function hide (): void this.removeEventListener (Event.ENTER_FRAME, this.onFrame); TweenMax.to (questo, 0.25, alpha: 0, onComplete: this.onCompleteHide);  funzione privata onCompleteHide (): void this.removeChild (this._bg); this.removeChild (this._tail); this.removeChild (this._tipField); 

Step 22: Istanziazione e uso

Per utilizzare la nostra descrizione comandi, suggerisco di aggiungerla a DisplayObject che si trova al livello più alto (ad es. DocumentClass). Fatto ciò, chiama semplicemente i metodi mostrare() e nascondere() quando ce n'è bisogno. Ecco due semplici esempi di utilizzo di ToolTip:

 var t: ToolTip = ToolTip.getInstance (); this.addChild (t); t.show ("Some tip");

In alternativa:

 this.addChild (ToolTip.getInstance ()); ToolTip.getInstance (). Show ("Some tip");

Conclusione

Spero che ti sia piaciuto; Ho creato questo strumento utilizzando le migliori pratiche di programmazione orientate agli oggetti con l'obiettivo di velocità di elaborazione, classi di riutilizzo e basso consumo di sistema. Ci vediamo nel prossimo tutorial! Grazie!