Creați o resursabilă AS3 ToolTip cu OOP

În acest tutorial vom crea un ToolTip care se redimensionează automat. ToolTip-ul nostru va actualiza conținutul în funcție de poziția sa pe scenă, astfel încât acestea să fie întotdeauna vizibile. Ca parte a acestei sarcini, vom crea, de asemenea, propriul cod pentru a trata scalarea cu 9 felii.


previzualizare

Să aruncăm o privire rapidă la sugestia noastră în acțiune:


Pasul 1: Configurați fișierul FLA

Să începem prin crearea unui nou dosar numit "ToolTip". În interiorul directorului ToolTip, creați un FLA ActionScript 3.0.


Pasul 2: Crearea funcțiilor DisplayOjects (Sprite):

Acum, creați un pătrat rotunjit de 150x77px cu următoarele proprietăți:

Selectați pătratul rotunjit și apăsați tasta F8 pentru a transforma pătratul într-un Sprite. Aplicați configurația de mai jos:

Desenați o imagine (17x17px) similară cu cea de mai jos:

Selectați al doilea desen, apăsați tasta F8 și aplicați configurația de mai jos:

Salvați fișierul FLA.


Pasul 3: Configurați FlashDevelop

FlashDevelop este un editor ActionScript cu multe resurse. Puteți descărca FlashDevelop la http://www.flashdevelop.org/community/viewforum.php?f=11.

Documentația FlashDevelop poate fi găsită la: http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page

Deschideți FlashDevelop, apoi selectați: Proiect> Proiect nou, pentru a crea un nou proiect.

În caseta de dialog, setați opțiunile ca în imaginea următoare.


Pasul 4: Crearea clasei ToolTip

Mai întâi, selectați fila Project (dacă fila Project nu este vizibilă, selectați: view> Project Manager).

În această filă puteți vedea toate fișierele și folderele proiectului. Faceți clic dreapta pe dosarul ToolTip, apoi selectați: Add> New Folder și creați un dosar numit tooltip (cu litere mici).

Acum, faceți clic dreapta pe folderul tooltip și alegeți: Add> New Folder și creați un folder numit afişa. Faceți clic dreapta pe dosarul de afișare și selectați: Adăugare> Clasă nouă.

În caseta de dialog, introduceți SfatEcran ca nume de clasă și căutați flash.display.Sprite în Clasa de bază camp.

Acum, proiectul nostru are următoarea structură:

Și aceasta este clasa ToolTip (generată automat):

 pachetul tooltip.display import flash.display.Sprite; clasa publica ToolTip extinde Sprite functia publica ToolTip () 

Pasul 5: Crearea pachetului Utils

Pachetul utils ne va ajuta în funcții legate de Bitmap, Sprite și TextField. Ideea este de a urma practicile OOP, făcând acest pachet reutilizabil.

Deci, să creăm pachetul utils. Faceți clic dreapta pe folderul tooltip, apoi selectați: Add> New Folder și creați un folder numit utils.

Creați BitmapUtils clasă în interiorul acestui dosar:

 pachetul tooltip.utils clasa publica finala BitmapUtils functie publica BitmapUtils () arunca noua eroare ("BitmapUtils nu trebuie instantiat"); 

Creați și SpriteUtils clasă:

 pachet tooltip.utils clasă publică finală SpriteUtils funcția publică SpriteUtils () arunca o nouă eroare ("SpriteUtils nu trebuie să fie instanțiată"); 

În cele din urmă, creați TextFieldUtils clasă:

 pachetul tooltip.utils clasa publica finala TextFieldUtils functie publica TextFieldUtils () arunca noua eroare ("TextFieldUtils nu trebuie instantiat"); 

Pasul 6: Clasa BitmapUtils

BitmapUtils au o singură metodă statică care ia un instantaneu al unei instanțe IBitmapDrawable.

Iată codul:

 pachetul tooltip.utils import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.IBitmapDrawable; import flash.display.PixelSnapping; import flash.geom.Matrix; clasa publica finala BitmapUtils functie publica BitmapUtils () arunca noua eroare ("BitmapUtils nu trebuie instantiat");  / ** * Creați un instantaneu al unei instanțe IBitmapDrawable * @paramă sursă IBitmapDrawable instanță pentru a fi utilizată ca sursă * @ width paramă Lățime finală * @ height paramă Înălțimea finală * @ param matrice instanță Matrix pentru a manipula o parte a sursei care va fi * @param cacheAsBitmap Stochează bitmap-ul în memorie * @return Snapshot * / funcția publică statică snapShot (sursă: IBitmapDrawable, width: int, height: int, matrice: Matrix = null, netezirea: Boolean = false, cacheAsBitmap: Boolean = false): Bitmap var b: Bitmap; var bd: BitmapData = BitmapData nou (lățime, înălțime, adevărat, 0x000000); bd.draw (sursă, matrice, null, null, null, netezirea); b = Bitmap nou (bd, PixelSnapping.ALWAYS, netezirea); b.cacheAsBitmap = cacheAsBitmap; retur b; 

Pasul 7: Clasa SpriteUtils

Această clasă adaugă un Sprite în lista de afișare:

 pachetul tooltip.utils import flash.display.DisplayObjectContainer; import flash.display.Sprite; clasa publică finală SpriteUtils funcția publică SpriteUtils () arunca o nouă eroare ("SpriteUtils nu trebuie să fie instanțiată");  / ** * Atașați o instanță Sprite într-o instanță DisplayObjectContainer * @ param link Legarea Sprite care va fi atașată * @ param părinte Parentul Sprite care va fi atașat * @return * / funcția statică publică attachSprite (link: String , părinte: DisplayObjectContainer): Sprite var s: Obiect = parent.loaderInfo.applicationDomain.getDefinition (linkage); returna parent.addChild (nou s ()) ca Sprite; 

Pasul 8: ClassFieldUtils Class

Această clasă creează cu ușurință o TextField instanță.

Vă recomandăm să citiți descrierea clasei TextField pentru a înțelege toate proprietățile utilizate.

 pachetul 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; clasă publică finală TextFieldUtils funcția publică TextFieldUtils () aruncă o nouă eroare ("TextFieldUtils nu trebuie instanțiat");  / ** * Creați o instanță textField * @ param părinte Parent of textField * @ param text Text de textField (htmlText) * @ font Parametru Font pentru a fi folosit în textField * @ param embed * @paramă dimensiune * @ param color * @ param inaltime * @param inaltime * @ param autoSize * @param multiline * @param wordWrap * @param cacheAsBitmap * @param align * @param leading * @param letterSpacing * @param type * @param selectable * @param sharpness * @param border = * retur * / funcția publică statică textField (mamă: DisplayObjectContainer, text: String, font: *, embed: Boolean = true, size: Number = NaN, color: Number = 0xFFFFFF, width: Number = NaN, = NaN, autoSize: String = "none", multiline: Boolean = false, wordWrap: Boolean = false, cacheAsBitmap: Boolean = false, align: String = "left" : String = "dinamic", selectabil: Boolean = false, claritate: Number = NaN, margine: Boolean = false): TextField var t: TextField = TextField nou; var tf: TextFormat = TextFormat nou (); parent.addChild (t); tf.align = TextFormatAlign.LEFT; tf.font = font; dacă (dimensiune) tf.size = dimensiune; tf.color = culoare; tf.leading = conducător; dacă (letterSpacing) tf.letterSpacing = letterSpacing; comutare (align.toLowerCase ()) caz "stânga": tf.align = TextFormatAlign.LEFT; pauză; caz "centru": tf.align = TextFormatAlign.CENTER; pauză; caz "dreapta": tf.align = TextFormatAlign.RIGHT; pauză; cazul justify: tf.align = TextFormatAlign.JUSTIFY; pauză; implicit: tf.align = TextFormatAlign.LEFT; pauză;  t.antiAliasType = AntiAliasType.ADVANCED; t.type = (tip == "dinamic")? TextFieldType.DYNAMIC: TextFieldType.INPUT; t.defaultTextFormat = tf; t.embedFonts = încorporat; t.cacheAsBitmap = cacheAsBitmap; t.mouseEnabled = selectabilă; t.selectable = selectabil; t.multiline = multiline; t.border = frontieră; t.wordWrap = wordWrap; dacă (claritate) t.sharpness = claritate; t.htmlText = text; t.width = (lățime)? lățime: t.textWidth + 5; t.height = (înălțime)? înălțime: t.textBeight + 5; comutare (autoSize.toLowerCase ()) caz "stânga": t.autoSize = TextFieldAutoSize.LEFT; pauză; cazul "centru": t.autoSize = TextFieldAutoSize.CENTER; pauză; caz "dreapta": t.autoSize = TextFieldAutoSize.RIGHT; pauză;  retur t; 

Pasul 9: Conceptul de fond rezonabil

Pentru a crea un fundal redimensionabil, vom folosi conceptul de 9 slice, similar cu scalarea de 9 slice încorporate în Flash. Din păcate, nativul 9-slice din Flash nu ne satisface nevoile.

Ideea este de a tăia sursa (Sprite) în 9 părți (a se vedea imaginea :)

Atunci când lățimea fundalului este modificată, părțile 2, 5 și 8 sunt întinse orizontal, în timp ce celelalte părți rămân aceleași.

De asemenea, atunci când înălțimea fundalului este modificată, părțile 4, 5 și 6 sunt întinse vertical, în timp ce altele nu se schimbă.


Pasul 10: Clasa de matrice

Clasa Matrix creează o hartă de puncte pentru a fi utilizată în mai multe forme. Pentru mai multe informații, citiți documentația din clasa Matrix de pe site-ul Adobe.

Vom folosi clasa Matrix pentru a traduce sursa fundalului și, astfel, desenați piesele. De fapt, clasa Matrix nu afectează în mod automat mișcarea traducerii în obiect, ci doar stochează valorile pe care ar avea obiectul în cazul în care mișcarea a fost efectuată. Acest lucru vă permite să utilizați o instanță a Matrix în diferite moduri, fără a fi blocată într-un DisplayObject.

De exemplu, pentru a desena cea de-a doua imagine, trebuie să luăm în considerare poziția (x = 0 y = 0) și dimensiunea (10 x 10px) a imaginii 1. Se va aplica traducerea (fără a afecta sursa) care trage a doua parte. Exemplu:

 var sursă: Sprite = Sprite nou (); var m: Matrice = Matrice nouă (); m.translat (-10, 0); var bd: BitmapData = BitmapData nou (source.width, source.height, true, 0x000000); bd.draw (sursă, m);

identitate() metoda poate fi utilizată pentru resetarea matricei. Dacă nu resetăm, va efectua noi calcule pe baza valorilor stocate anterior.


Pasul 11: Clasa CustomBg

Pentru a crea CustomBg class, creați un nou pachet numit bg în interiorul pachetului de afișare. Creați o nouă clasă în interiorul acestui dosar numit CustomBg. Această clasă trebuie să se extindă spiriduș.

Aici este clasa:

 pachet tooltip.display.bg import flash.display.Sprite; public final clasa CustomBg extinde Sprite funcția publică CustomBg () 

Pasul 12: Constructorul

Să analizăm parametrii constructorului, proprietățile clasei și importurile. Trebuie să importem toate clasele de mai jos pentru a finaliza clasa noastră:

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

Acum, creați două proprietăți:

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

Constructorul trebuie să conțină următorii parametri:

 / ** * Crearea unui fundal redimensionabil * @ param linking Legarea unui Sprite de a fi desenat * @ param părinte părinte al fundalului * @ paramă lățime Lățime inițială * @ înălțimea paramelei Înălțimea inițială * @ granițele paramentului Boundaries to slice the image * @param netezind fundalul * @param cacheAsBitmap Stochează fundalul în memorie * / funcția publică CustomBg (link: String, părinte: DisplayObjectContainer, width: Number = NaN, înălțime: Number = NaN, limite: int = 10; , cacheAsBitmap: Boolean = false) 

În constructor, vom tăia imaginea.

Mai întâi, declarăm variabilele. Cu variantele "instanță" și "sursă", atașăm fundalul nostru (Sprite) la CustomBg clasă. În variabila "piese", stocăm părțile desenate ale fundalului. În cele din urmă, cu variabila "m", obținem valorile traducerii și le folosim pentru a desena piesele noastre CustomBg.

Iată codul:

 var instanță: Class = getDefinitionByName (link) ca clasă; var sursă: Sprite = instanță nouă () ca Sprite; var părți: Vector. = Vector nou. (); var m: Matrice = source.transform.matrix; părți [0] = BitmapUtils.snapShot (sursă, limite, limite, nulă, netezirea); m.translate (-limitate, 0); părți [1] = BitmapUtils.snapShot (sursă, sursă, lățime - limite * 2, limite, m, netezire); m.identity (); m.translate (-source.width + limite, 0); părți [2] = BitmapUtils.snapShot (sursă, limite, limite, m, netezire); m.identity (); m.translate (0, -limitate); părți [3] = BitmapUtils.snapShot (sursă, limite, sursă.șurub - limite * 2, m, netezire); m.identity (); m.translate (-limitări, -limitări); părți [4] = BitmapUtils.snapShot (sursă, sursă. lățime - granițe * 2, sursă. vârf - limite * 2, m, netezire); m.identity (); m.translate (-source.width + granițe, -limitări); părți [5] = BitmapUtils.snapShot (sursă, limite, sursă.șurub - granițe * 2, m, netezirea); m.identity (); m.translate (0, -source.height + limite); părți [6] = BitmapUtils.snapShot (sursă, limite, limite, m, netezirea); m.identity (); m.translate (-limitări, -source.height + limite); părți [7] = BitmapUtils.snapShot (sursă, sursă, lățime - limite * 2, limite, m, netezire); m.identity (); m.translate (-source.width + limite, -source.height + limite); părți [8] = BitmapUtils.snapShot (sursă, limite, limite, m, netezire); this.addChild (piese [0]); this.addChild (părți [1]); this.addChild (părți) [2]; this.addChild (părți [3]); this.addChild (părțile [4]); this.addChild (părți [5]); this.addChild (părți [6]); this.addChild (piese [7]); this.addChild (părți [8]); this._parts = părți; this._boundaries = limite; this.width = (esteNaN (lățime))? source.width: width; this.height = (esteNaN (înălțime))? source.height: înălțime; parent.addChild (aceasta);

Pasul 13: Actualizați pozițiile componentelor

De fiecare dată când fundalul este redimensionat, poziția părților trebuie actualizată. Să creăm aranja() , pentru a actualiza poziția tuturor părților de fundal:

 funcția privată arrange (): void var parts: Vector. = this._parts; var limitele: int = this._boundaries; părți [0] .x = 0; părți [0] .y = 0; părți [1] .x = limite; părți [1] .y = 0; părți [2] .x = părți [0]. lățime + părți [1]. lățime; părți [2] .y = 0; părți [3] .x = 0; părți [3] .y = limite; părți [4] .x = limite; părți [4] .y = limite; părți [5] .x = părți [3]. lățime + părți [4]. lățime; părți [5] .y = limite; părți [6] .x = 0; piese [6] .y = părți [0] .super + părți [3] .petit; părți [7] .x = limite; părți [7] .y = părți [6] .y; părți [8] .x = părți [6]. lățime + părți [7]. lățime; părți [8] .y = părți [6] .y; 

Pasul 14: Lățimea și înălțimea

În cele din urmă, depășim lăţime și înălţime metode de clasă Sprite, pentru redimensionarea și actualizarea pozițiilor părților:

 funcția de depășire a setului funcției publice (v: Număr): void var parts: Vector. = this._parts; var limitele: int = this._boundaries; părți [1]. lățime = v - limite * 2; părți [4]. lățime = v - limite * 2; părți [7]. lățime = v - limite * 2; this.arrange ();  înălțimea setului funcției de suprascriere a publicului (v: Număr): void var parts: Vector. = this._parts; var limitele: int = this._boundaries; părți [3]. vârf = v - limite * 2; părți [4]. vârf = v - limite * 2; părți [5]. vârf = v - limite * 2; this.arrange (); 

Acum, avem un background redimensionabil care nu suferă distorsiuni atunci când este redimensionat. Consultați previzualizarea:


Pasul 15: Modelul de design Singleton

Modelele de proiectare sunt metodologii de programare care oferă soluții la problemele comune în designul de software.

Vom crea o clasă ToolTip sub aspectul modelului de design Singleton, care ne oferă o clasă care are doar o instanță globală în întregul proiect. Gândiți-vă: doriți să utilizați ToolTip într-un meniu cu mai multe butoane. Ar fi inutil și impractic să creați o instanță a clasei ToolTip pentru fiecare buton de meniu, deoarece putem afișa un singur ToolTip la un moment dat. Cea mai bună abordare în acest caz ar crea o instanță globală pentru întregul proiect și vor folosi metode spectacol() și ascunde() pentru a controla afișajul.

Modelul de design Singleton va împiedica apelarea constructorului de clasă; creează o instanță a clasei în sine și întoarce mereu printr-o metodă specifică. Rețineți implementarea Singleton:

 pachetul tooltip.display import flash.display.Sprite; clasa publica ToolTip extinde Sprite private static var _instance: ToolTip; funcția statică publică getInstance (): ToolTip if (! ToolTip.instance) ToolTip._instance = noul ToolTip (new Singleton ()); return ToolTip._instance;  funcția publică ToolTip (s: Singleton)  clasa internă Singleton 

În exemplul de mai sus, putem vedea declararea unei instanțe statice. Acesta va fi întotdeauna returnat de către getInstance () metodă.

În constructor, avem nevoie de un parametru care poate fi declarat numai în cadrul acestei clase, deoarece acest parametru este de tip Singleton iar acest tip de date există doar în interiorul clasei. Astfel, dacă încercăm să instanțiăm clasa prin constructor, se generează o eroare.

getInstance () metoda verifică dacă variabila a fost declarată; dacă nu a fost declarată, metoda getInstance () declară instanța și apoi o returnează. Dacă instanța a fost deja declarată, getInstance () returnează instanța.

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

Pasul 16: Clasa TweenMax

TweenMax de la Jack Doyle este un motor Tween care este adesea menționat pe Activetuts +. Acesta vă permite să faceți animație tween ușor.

Biblioteca TweenMax și documentația sa pot fi găsite pe GreenSock.com.

În cazul nostru, vom folosi clasa TweenMax pentru a adăuga umbra și, de asemenea, pentru a afișa și a ascunde ToolTip. Iată un scurt exemplu de sintaxă a clasei TweenMax:

 TweenMax.to (displayObjectInstance, durata, proprietate: valoare);

Acum uita-te la o utilizare simpla a clasei TweenMax:

Consultați exemplul de cod utilizat pentru a realiza acest lucru:

 import com.greensock.TweenMax; bt.label = "ROLUL PENTRU A ADAUGA UTILIZARE"; bt.addEventListener (MouseEvent.MOUSE_OVER, onOver); bt.addEventListener (MouseEvent.MOUSE_OUT, onOut); funcția onOver (e: MouseEvent): void bt.label = "ROLL OUT TO REMOVE SHADOW"; TweenMax.to (bt, 0.5, dropShadowFilter: culoare: 0x000000, alfa: 0.7, blurX: 4, neclar: 4, unghi: 45, distanta: 7);  funcția onOut (e: MouseEvent): void bt.label = "ROLL TOVER ADD SHADOW"; TweenMax.to (bt, 0.5, dropShadowFilter: culoare: 0x000000, alfa: 0, blurX: 0, neclar: 0, unghi: 0, distanta: 0); 

Pasul 17: Adăugarea instanțelor în scenă

Vom adăuga obiectele pe scenă cu ajutorul clasei create anterior și a două metode. Trebuie să adăugăm un ascultător pentru eveniment Event.ADDED_TO_STAGE pentru a evita trimiterile nula la scenă.

Actualizați constructorul și adăugați cele două metode de mai jos:

 funcția publică ToolTip (s: Singleton) this.addEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage);  funcția privată onAddedToStage (e: Event): void this.removeEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage); this.draw ();  funcția privată (): void this.alpha = 0; this._bg = nou CustomBg ("ToolTipBg", acest lucru); this._tail = SpriteUtils.attachSprite ("ToolTipTail", acest lucru); this._tipField = TextFieldUtils.textField (aceasta, "", "Arial", false, 13, 0x000000); TweenMax.to (aceasta, 0, dropShadowFilter: culoare: 0x000000, alfa: 0.7, blurX: 4, blurY: 4, unghi: 45, distanta: 7); this.removeChild (this._bg); this.removeChild (this._tail); this.removeChild (this._tipField); 

Pasul 18: Ascultător Event.ENTER_FRAME

ToolTip-ul nostru va apărea întotdeauna lângă cursorul mouse-ului.

Pentru a afla care aspect ar trebui să apară ToolTip, am împărțit etapa într-o grilă de nouă pătrate (folosind calcule, nu am folosit DisplayObjects). Numai șase pătrate ar fi de ajuns, dar am creat nouă pătrate, astfel încât să puteți schimba comportamentul pătratului 3, 4 și 5. În acest caz, numărul este bazat pe zero.

Cursorul mouse-ului va fi întotdeauna legat de unul dintre aceste pătrate. Pe baza acestui fapt, știu cum ar trebui să desenez ToolTip. Rulați mouse-ul în patratele de mai jos:

În onFrame () , verifică ce pătrat este cursorul mouse-ului și apoi faceți un apel aranja (stil: int), trecând ca parametru numărul de pătrat imaginar, astfel încât să atragă ToolTip așa cum îmi doresc. Am folosit declarații de o singură linie pentru că sunt mai rapide.

 funcția privată onFrame (e: Eveniment): void var sW: Number = this.stage.stageWidth; var sH: Numărul = acest stadiu. var rW: număr = sW / 3; var rH: număr = sH / 3; var mX: Numărul = this.stage.mouseX; var mY: Numărul = this.stage.mouseY; dacă (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) această ordine (6); altfel dacă (mX> rW && mX < rW * 2 && mY > rH * 2) această ordine (7); altfel acest lucru (8); 

Pasul 19: Aranjați o funcție

aranja() actualizează toate elementele SfatEcran pe baza valorii primite în parametru.

 funcția privată aranja (stil: int): void var b: CustomBg = this._bg; var t: Sprite = acest lucru; var tF: TextField = acest. t.scaleY = 1; t.x = 0; t.y = 0; tF.width = tF.textWidth + 5; tF.height = tF.textValoare + 5; tF.x = 0; tF.y = 0; b.width = tF.width + 10; b. înălțime = tF.altitudine + 10; b.x = 0; b.y = 0; var mX: Numărul = this.stage.mouseX; var mY: Numărul = this.stage.mouseY; dacă (stil == 0) t.scaleY = -1; t.x = mX; t.y = mY + 40; b.x = mX-10; b.y = mY + t.height + b.peight - 5;  altfel dacă (stil == 1) t.scaleY = -1; t.x = mX; t.y = mY + 40; b.x = mX - lățime b. * 0,5 + l. lățime * 0,5; b.y = mY + t.height + b.peight - 5;  altfel dacă (stil == 2) t.scaleY = -1; t.x = mX; t.y = mY + 40; b.x = mX - lățime b + lățime + 10; b.y = mY + t.height + b.peight - 5;  altfel dacă (stil == 3 || style == 6) t.x = mX; t.y = mY - t.hight; b.x = t.x-10; b.y = t.y - b.peal + 2;  altfel dacă (stil == 4 || style == 7) t.x = mX; t.y = mY - t.hight; b.x = t.x - lățime b. * 0,5 + t.width * 0,5; b.y = t.y - b.peal + 2;  altfel dacă (stil == 5 || style == 8) t.x = mX; t.y = mY - t.hight; b.x = t.x - lățime b + lățime + 10; b.y = t.y - b.peal + 2;  tF.x = b.x + 5; tF.y = b.y + 5; 

Pasul 20: Afișați funcția

Metoda de mai jos nu are nevoie de prea multe explicații; este auto-explicativă.

 funcția publică (mesaj: String): void this._tipField.htmlText = message; this.parent.setChildIndex (aceasta, aceasta.parent.numChildren - 1); this.addChild (this._bg); this.addChild (this._tail); this.addChild (this._tipField); TweenMax.to (aceasta, 0,25, alpha: 1); this.addEventListener (Event.ENTER_FRAME, this.onFrame); 

Pasul 21: Ascunderea funcției

Am creat onCompleteHide () care va fi executată după terminarea instrucțiunii TweenMax (aceasta se face prin următoarea declarație: onComplete: this.onCompleteHide). Acesta va elimina toate elementele de pe scenă.

 funcția publică ascunde (): void this.removeEventListener (Event.ENTER_FRAME, this.onFrame); TweenMax.to (aceasta, 0.25, alpha: 0, onComplete: this.onCompleteHide);  funcția privată onCompleteHide (): void this.removeChild (this._bg); this.removeChild (this._tail); this.removeChild (this._tipField); 

Pasul 22: Instanțierea și utilizarea

Pentru a utiliza ToolTip, vă sugerăm să o adăugați la DisplayObject care se află la cel mai înalt nivel (de exemplu, DocumentClass). După ce ați făcut acest lucru, numiți metodele spectacol() și ascunde() când e nevoie. Iată două exemple simple de utilizare a ToolTip:

 var t: ToolTip = ToolTip.getInstance (); this.addChild (t); t.show ("Un sfat");

Alternativ:

 this.addChild (ToolTip.getInstance ()); ToolTip.getInstance () show ("Un sfat");

Concluzie

Sper că ți-a plăcut acest lucru; Am creat acest instrument folosind cele mai bune practici de programare orientate pe obiect, cu scopul de a procesa viteza, reutilizarea clasei și consumul redus al sistemului. Ne vedem în tutorialul următor! Mulțumiri!

Cod