Share
In deze tutorial zullen we een tooltip maken die zichzelf automatisch aanpast. Onze tooltip zal de inhoud bijwerken op basis van zijn positie op het podium, zodat deze altijd zichtbaar is. Als onderdeel van deze taak zullen we ook onze eigen code maken om 9-delige schaling te verwerken.
Laten we eerst even onze tooltip in actie bekijken:
Laten we beginnen met het maken van een nieuwe map genaamd "ToolTip". Maak in de ToolTip-map een ActionScript 3.0-FLA.
Maak nu een afgerond vierkant van 150x77px met de volgende eigenschappen:
Selecteer het afgeronde vierkant en druk op F8 om het vierkant om te zetten in een Sprite. Pas de onderstaande config toe:
Teken een afbeelding (17x17px) vergelijkbaar met de onderstaande afbeelding:
Selecteer de tweede tekening, druk op de F8-toets en pas de onderstaande configuratie toe:
Sla uw FLA-bestand op.
FlashDevelop is een ActionScript-editor met veel bronnen. Je kunt FlashDevelop downloaden op http://www.flashdevelop.org/community/viewforum.php?f=11.
FlashDevelop documentatie is te vinden op: http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page
Open FlashDevelop en selecteer vervolgens: Project> Nieuw project, om een nieuw project te maken.
Stel de opties in het dialoogvenster in zoals in de volgende afbeelding.
Selecteer eerst het tabblad Project (als het tabblad Project niet zichtbaar is, selecteert u: view> Project Manager).
Op dit tabblad ziet u alle bestanden en mappen van het project. Klik met de rechtermuisknop op de ToolTip-map en selecteer vervolgens: Toevoegen> Nieuwe map en maak een map met de naam tooltip (kleine letters).
Klik nu met de rechtermuisknop op de knopinfo en kies: Toevoegen> Nieuwe map en maak een map met de naam tonen. Klik met de rechtermuisknop op de weergavemap en selecteer: Toevoegen> Nieuwe klas.
In het dialoogvenster invoegen ToolTip als de klassenaam en blader naar flash.display.Sprite in Basisklasse veld-.
Ons project heeft nu de volgende structuur:
En dit is onze ToolTip-klasse (automatisch gegenereerd):
package tooltip.display import flash.display.Sprite; openbare klasse ToolTip breidt openbare functie ToolTip () uit
Het utils-pakket zal ons helpen in functies gerelateerd aan Bitmap, Sprite en TextField. Het idee is om OOP-werkwijzen te volgen, waardoor dit pakket opnieuw bruikbaar is.
Laten we het utils-pakket maken. Klik met de rechtermuisknop op de knopinfo en selecteer vervolgens: Toevoegen> Nieuwe map en maak een map met de naam utils.
Maak het BitmapUtils klasse in deze map:
Accentsconagua
package tooltip.utils openbare slotklasse BitmapUtils openbare functie BitmapUtils () gooi nieuwe fout weg ("BitmapUtils mag niet worden geïnstantieerd"); Maak ook, de SpriteUtils klasse:
package tooltip.utils public final class SpriteUtils public function SpriteUtils () throw new Error ("SpriteUtils mag niet worden geïnstantieerd"); Maak ten slotte de TextFieldUtils klasse:
package tooltip.utils public final class TextFieldUtils public function TextFieldUtils () throw new Error ("TextFieldUtils mag niet worden geïnstantieerd"); De BitmapUtils een enkele statische methode hebben die een momentopname maakt van een IBitmapDrawable-instantie.
Hier is de code:
package tooltip.utils import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.IBitmapDrawable; import flash.display.PixelSnapping; import flash.geom.Matrix; openbare slotklasse BitmapUtils openbare functie BitmapUtils () nieuwe fout toevoegen ("BitmapUtils mag niet worden geïnstantieerd"); / ** * Maak een momentopname van een IBitmapDrawable-instantie * @param-bron IBitmapDrawable-exemplaar dat als bron wordt gebruikt * @param width Finale breedte * @param height Final height * @param matrix Matrix-instantie om het deel van de bron te manipuleren dat wordt getekend * @param smoothing Glad het resultaat * @param cacheAsBitmap Slaat de bitmap op in het geheugen * @return De momentopname * / public static function snapShot (bron: IBitmapDrawable, width: int, height: int, matrix: Matrix = null, smoothing: Boolean = false, cacheAsBitmap: Boolean = false): Bitmap var b: Bitmap; var bd: BitmapData = nieuwe BitmapData (breedte, hoogte, waar, 0x000000); bd.draw (source, matrix, null, null, null, smoothing); b = nieuwe Bitmap (bd, PixelSnapping.ALWAYS, smoothing); b.cacheAsBitmap = cacheAsBitmap; terugkeer b; Deze klasse voegt een Sprite toe aan de weergavelijst:
package tooltip.utils import flash.display.DisplayObjectContainer; import flash.display.Sprite; openbare eindklasse SpriteUtils public function SpriteUtils () gooi nieuwe fout ("SpriteUtils mag niet worden geïnstantieerd"); / ** * Voeg een Sprite-instantie toe aan een DisplayObjectContainer-instantie * @param-koppeling De koppeling van Sprite die wordt bijgevoegd * @param-bovenliggend item Het bovenliggende element van Sprite dat wordt bijgevoegd * @return * / public static-functie attachSprite (linkage: String , parent: DisplayObjectContainer): Sprite var s: Object = parent.loaderInfo.applicationDomain.getDefinition (linkage); return parent.addChild (new s ()) als Sprite; Deze klasse maakt eenvoudig een TextField aanleg.
Ik raad ten zeerste aan om de TextField-klassenbeschrijving te lezen om alle gebruikte eigenschappen te begrijpen.
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; openbare eindklasse TextFieldUtils openbare functie TextFieldUtils () gooi nieuwe fout ("TextFieldUtils mag niet worden geïnstantieerd"); / ** * Maak een instantie textField * @param parent Parent of textField * @param text Tekst van textField (htmlText) * @param font Naam van het lettertype dat moet worden gebruikt 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 selecteerbaar * @param sharpness * @param border * @return * / public static function textField (parent: DisplayObjectContainer, text: String, font: *, embed: Boolean = true, size: Number = NaN, color: Number = 0xFFFFFF, width: Number = NaN, height: Number = NaN, autoSize: String = "none", multiline: Boolean = false, wordWrap: Boolean = false, cacheAsBitmap: Boolean = false, align: String = "left", leading: Number = NaN, letterSpacing: Number = NaN, type : String = "dynamic", selecteerbaar: Boolean = false, sharpness: 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 = kleur; tf.leading = leading; if (letterSpacing) tf.letterSpacing = letterSpacing; switch (align.toLowerCase ()) case "left": tf.align = TextFormatAlign.LEFT; breken; case "center": tf.align = TextFormatAlign.CENTER; breken; case "right": tf.align = TextFormatAlign.RIGHT; breken; case "rechtvaardigen": tf.align = TextFormatAlign.JUSTIFY; breken; standaard: tf.align = TextFormatAlign.LEFT; breken; t.antiAliasType = AntiAliasType.ADVANCED; t.type = (type == "dynamisch")? TextFieldType.DYNAMIC: TextFieldType.INPUT; t.defaultTextFormat = tf; t.embedFonts = embed; t.cacheAsBitmap = cacheAsBitmap; t.mouseEnabled = selecteerbaar; t.selectable = selecteerbaar; t.multiline = multiline; t.border = border; t.wordWrap = wordWrap; als (scherpte) t.sharpness = scherpte; t.htmlText = tekst; t.width = (breedte)? width: t.textWidth + 5; t.height = (hoogte)? hoogte: t.textHeight + 5; switch (autoSize.toLowerCase ()) case "left": t.autoSize = TextFieldAutoSize.LEFT; breken; case "center": t.autoSize = TextFieldAutoSize.CENTER; breken; case "right": t.autoSize = TextFieldAutoSize.RIGHT; breken; retourneer t; Om een aanpasbare achtergrond te maken, zullen we het concept van 9-slice gebruiken, vergelijkbaar met de schaal van 9-slice die in Flash is ingebouwd. Helaas voldoet de standaard 9-slice in Flash niet aan onze behoeften.
Het idee is om de bron (Sprite) in 9 delen te snijden (zie de afbeelding :)
Wanneer de breedte van de achtergrond wordt gewijzigd, worden de delen 2, 5 en 8 horizontaal uitgerekt, terwijl de andere delen hetzelfde blijven.
Evenzo, wanneer de hoogte van de achtergrond wordt gewijzigd, worden delen 4, 5 en 6 verticaal uitgerekt, terwijl de andere niet veranderen.
De klasse Matrix maakt een puntenkaart die in vele vormen kan worden gebruikt. Lees de documentatie van de Matrix-klasse van de website van Adobe voor meer informatie.
We zullen de Matrix-klasse gebruiken om de bron van de achtergrond te vertalen en zo de delen te tekenen. In feite heeft de klasse Matrix geen automatische invloed op de translatiebeweging in het object, maar slaat alleen de waarden op die het object zou hebben als de beweging werd uitgevoerd. Hiermee kunt u een exemplaar van Matrix op verschillende manieren gebruiken zonder te worden vergrendeld in een DisplayObject.
Als u bijvoorbeeld de tweede afbeelding wilt tekenen, moeten we rekening houden met de positie (x = 0 y = 0) en de grootte (10 x 10 px) van afbeelding 1. Hiermee wordt de vertaling toegepast (zonder de bron aan te tasten) en pas na die het tweede deel tekenen. Voorbeeld:
var source: Sprite = new Sprite (); var m: Matrix = nieuwe matrix (); m.translate (-10, 0); var bd: BitmapData = nieuwe BitmapData (source.width, source.height, true, 0x000000); bd.draw (bron, m);
De identiteit() methode kan worden gebruikt om de Matrix opnieuw in te stellen. Als we niet resetten, voert het nieuwe berekeningen uit op basis van eerder opgeslagen waarden.
Om de te maken CustomBg klasse, maak een nieuw pakket aan genaamd bg in het display-pakket. Maak een nieuwe klasse in deze map genaamd CustomBg. Deze klasse moet worden verlengd sprite.
Hier is de klas:
pakket tooltip.display.bg import flash.display.Sprite; openbare eindklasse CustomBg breidt uit openbare functie CustomBg ()
Laten we nu omgaan met de Constructor-parameters, klasse-eigenschappen en import. We moeten alle onderstaande klassen importeren om onze klas te voltooien:
import flash.display.Bitmap; import flash.display.DisplayObjectContainer; import flash.display.Sprite; import flash.geom.Matrix; import flash.utils.getDefinitionByName; import tooltip.utils.BitmapUtils;
Maak nu twee eigenschappen:
privé var _parts: Vector.; private var _boundaries: int;
De constructor moet de volgende parameters bevatten:
/ ** * Een aanpasbare achtergrond maken * @param-koppeling Koppeling van een te tekenen sprite * @param-bovenliggende bovenliggende achtergrond * @param-breedte Beginbreedte * @param-hoogte Oorspronkelijke hoogte * @param-begrenzingen Grenzen om de afbeelding te splitsen * @param smoothing Smooth the Background * @param cacheAsBitmap Slaat de achtergrond op in het geheugen * / public function CustomBg (linkage: String, parent: DisplayObjectContainer, width: Number = NaN, height: Number = NaN, boundaries: int = 10, smoothing: Boolean = true , cacheAsBitmap: Boolean = false)
In de constructor snijden we de afbeelding.
Eerst verklaren we de variabelen. Met de "Exemplaar" en "bron" vars, voegen we onze achtergrond (Sprite) toe aan de CustomBg klasse. In de variabele "parts" slaan we de getekende delen van de achtergrond op. Tenslotte krijgen we met de variabele "m" de vertaalwaarden en gebruiken deze om de delen van ons te tekenen CustomBg.
Hier is de code:
var Instance: Class = getDefinitionByName (linkage) als Class; var source: Sprite = new Instance () als Sprite; var parts: Vector.= nieuwe Vector. (); var m: Matrix = source.transform.matrix; parts [0] = BitmapUtils.snapShot (source, boundaries, boundaries, null, smoothing); m.translate (-grenzen, 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 (source, boundaries, boundaries, m, smoothing); m.identity (); m.translate (0, -grenzen); parts [3] = BitmapUtils.snapShot (source, boundaries, source.height - boundaries * 2, m, smoothing); m.identity (); m.translate (-grenzen, -grenzen); 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, -bron.hoogte + grenzen); parts [6] = BitmapUtils.snapShot (bron, grenzen, grenzen, m, vloeiend maken); m.identity (); m.translate (-grenzen, -bron.hoogte + grenzen); 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 (delen [0]); this.addChild (onderdelen [1]); this.addChild (delen [2]); this.addChild (delen [3]); this.addChild (delen [4]); this.addChild (delen [5]); this.addChild (delen [6]); this.addChild (delen [7]); this.addChild (delen [8]); this._parts = parts; this._boundaries = grenzen; this.width = (isNaN (width))? source.width: width; this.height = (isNaN (height))? bronhoogte: hoogte; parent.addChild (deze);
Telkens wanneer de achtergrond wordt gewijzigd, moet de positie van de onderdelen worden bijgewerkt. Laten we het maken regelen() methode om de positie van alle delen van de achtergrond bij te werken:
private function arrangement (): void var parts: Vector.= this._parts; var-grenzen: int = this._boundaries; delen [0] .x = 0; delen [0] .y = 0; delen [1] .x = grenzen; onderdelen [1] .y = 0; parts [2] .x = parts [0] .width + parts [1] .width; onderdelen [2] .y = 0; onderdelen [3] .x = 0; delen [3] .y = grenzen; delen [4] .x = grenzen; delen [4] .y = grenzen; onderdelen [5] .x = delen [3] .breedte + delen [4]. breedte; onderdelen [5] .y = grenzen; onderdelen [6] .x = 0; onderdelen [6] .y = onderdelen [0] .hoogte + onderdelen [3] .hoogte; onderdelen [7] .x = grenzen; onderdelen [7] .y = onderdelen [6] .y; onderdelen [8] .x = parts [6] .width + parts [7] .width; onderdelen [8] .y = parts [6] .y;
Ten slotte vervangen we de breedte en hoogte methoden van de Sprite-klasse, om de posities van de onderdelen te wijzigen en de grootte bij te werken:
public override-functie set width (v: Number): void var parts: Vector.= this._parts; var-grenzen: 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-grenzen: int = this._boundaries; onderdelen [3] .hoogte = v - grenzen * 2; onderdelen [4] .hoogte = v - grenzen * 2; delen [5] .hoogte = v - grenzen * 2; this.arrange ();
Nu hebben we een aanpasbare achtergrond die niet vervormd is als de grootte wordt gewijzigd. Bekijk de preview:
Ontwerppatronen zijn programmeermethoden die oplossingen bieden voor veel voorkomende problemen bij het ontwerpen van software.
We zullen een ToolTip-klasse maken onder de aspecten van het Singleton-ontwerppatroon, wat ons een klasse geeft die slechts één algemene instance heeft voor het hele project. Denk: u wilt de ToolTip gebruiken in een menu met verschillende knoppen. Het zou niet nodig en onpraktisch zijn om voor elke menuknop een instantie van de ToolTip-klasse te maken, omdat we maar één ToolTip tegelijk kunnen weergeven. De beste aanpak in dit geval zou een globale instantie voor het hele project en de gebruiksmethoden creëren laten zien() en verbergen() om het display te bedienen.
Het Singleton-ontwerppatroon voorkomt dat de constructeur van de klasse wordt gebeld; het creëert een instantie van de klasse in zichzelf en keert altijd terug via een specifieke methode. Let op onze Singleton-implementatie:
package tooltip.display import flash.display.Sprite; openbare klasse ToolTip breidt Sprite uit private static var _instance: ToolTip; openbare statische functie getInstance (): ToolTip if (! ToolTip._instance) ToolTip._instance = nieuwe ToolTip (nieuwe Singleton ()); return ToolTip._instance; openbare functie ToolTip (s: Singleton) interne klasse Singleton
In het bovenstaande voorbeeld kunnen we de verklaring van een statische instantie zien. Het wordt altijd geretourneerd door de getInstance () methode.
In de constructor hebben we een parameter nodig die alleen binnen deze klasse kan worden gedeclareerd, omdat deze parameter van het type is eenling en dit gegevenstype bestaat alleen in de klas. Dus als we proberen de klasse door de constructor te instantiëren, wordt er een fout gegenereerd.
De getInstance () methode controleert of de variabele is gedeclareerd; als het niet is aangegeven, de methode getInstance () verklaart het exemplaar en geeft het vervolgens terug. Als het exemplaar al is gedeclareerd, is het getInstance () geeft gewoon het exemplaar terug.
var toolTip: ToolTip = new ToolTip (); // Fout var toolTip: ToolTip = ToolTip.getInstance (); // Ok
TweenMax van Jack Doyle is een tween-engine die vaak wordt vermeld op Activetuts +. Hiermee kun je gemakkelijk een tween-animatie maken.
De bibliotheek en de documentatie van TweenMax zijn te vinden op GreenSock.com.
In ons geval zullen we de klasse TweenMax gebruiken om schaduw toe te voegen en ook om onze ToolTip weer te geven en te verbergen. Hier is een kort voorbeeld van de syntaxis van de klasse TweenMax:
TweenMax.to (displayObjectInstance, duration, property: value);
Kijk nu eens naar een eenvoudig gebruik van de klasse TweenMax:
Zie de voorbeeldcode die wordt gebruikt om dit te bereiken:
import com.greensock.TweenMax; bt.label = "ROLL OVER OM SCHADUW TOE TE VOEGEN"; bt.addEventListener (MouseEvent.MOUSE_OVER, onOver); bt.addEventListener (MouseEvent.MOUSE_OUT, onOut); function onOver (e: MouseEvent): void bt.label = "ROLL OUT OM SCHADUW TE VERWIJDEREN"; 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 = "ROLL OVER TO SHADOW"; TweenMax.to (bt, 0,5, dropShadowFilter: color: 0x000000, alpha: 0, blurX: 0, blurY: 0, angle: 0, distance: 0);
We zullen de objecten op het podium toevoegen met behulp van onze eerder gemaakte klassen en twee methoden. We moeten een luisteraar toevoegen voor het evenement Event.ADDED_TO_STAGE om nulverwijzingen naar het podium te vermijden.
Werk de constructor bij en voeg de twee onderstaande methoden toe:
openbare functie ToolTip (s: Singleton) this.addEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage); private function onAddedToStage (e: Event): void this.removeEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage); this.draw (); private function draw (): void this.alpha = 0; this._bg = nieuwe CustomBg ("ToolTipBg", this); this._tail = SpriteUtils.attachSprite ("ToolTipTail", dit); this._tipField = TextFieldUtils.textField (this, "", "Arial", false, 13, 0x000000); TweenMax.to (dit, 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); Onze tooltip verschijnt altijd in de buurt van de muiscursor.
Om te weten welk aspect de knop moet verschijnen, heb ik de fase opgedeeld in een raster van negen vierkanten (met berekeningen, ik heb geen gebruik gemaakt van DisplayObjects). Slechts zes vierkanten zou genoeg zijn, maar ik heb negen vierkanten gemaakt, zodat je het gedrag van vierkant 3, 4 en 5 kunt veranderen. In dit geval is de telling gebaseerd op nul.
De muiscursor heeft altijd contact met een van deze vierkanten. Op basis hiervan weet ik hoe ik de tooltip moet tekenen. Rol de muis in de onderstaande vierkanten:
In de onFrame () methode, controleer ik in welk vak je muiscursor staat en bel dan naar regelen (style: int), doorgeven als parameter het nummer van het denkbeeldige vierkant, zodat het de knopinfo trekt zoals ik het wil. Ik gebruikte uitspraken in één regel omdat ze sneller zijn.
private function 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; if (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 && MJ < rH * 2) this.arrange(5); else if (mX < rW && mY > rH * 2) this.arrange (6); else if (mX> rW && mX < rW * 2 && mY > rH * 2) this.arrange (7); anders this.arrange (8);
De regelen() methode werkt alle elementen van de update bij ToolTip gebaseerd op de waarde ontvangen in de parameter.
private functie regelen (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.hoogte = tF.hoogte + 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.hoogte + b.hoogte - 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.hoogte + b.hoogte - 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.hoogte + b.hoogte - 5; else if (style == 3 || style == 6) t.x = mX; t.y = mY - t.hoogte; 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.hoogte; 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.hoogte; 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;
De onderstaande methode behoeft niet veel uitleg; het spreekt voor zich.
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 (dit, 0.25, alpha: 1); this.addEventListener (Event.ENTER_FRAME, this.onFrame);
Ik heb de onCompleteHide () methode die zal worden uitgevoerd na het einde van de instructie TweenMax (dit gebeurt via de volgende verklaring: onComplete: this.onCompleteHide). Het verwijdert alle elementen van het podium.
openbare functie verbergen (): void this.removeEventListener (Event.ENTER_FRAME, this.onFrame); TweenMax.to (dit, 0.25, alpha: 0, onComplete: this.onCompleteHide); private function onCompleteHide (): void this.removeChild (this._bg); this.removeChild (this._tail); this.removeChild (this._tipField);
Om onze ToolTip te gebruiken, raad ik aan om deze aan het DisplayObject toe te voegen dat zich op het hoogste niveau bevindt (bijv. DocumentClass). Nadat je dit hebt gedaan, kun je gewoon de methoden noemen laten zien() en verbergen() wanneer nodig. Hier zijn twee eenvoudige voorbeelden van het gebruik van de tooltip:
var t: ToolTip = ToolTip.getInstance (); this.addChild (t); t.show ("Een tip"); Alternatief:
this.addChild (ToolTip.getInstance ()); ToolTip.getInstance (). Show ("Een tip"); Ik hoop dat je dit leuk vond; Ik heb deze tool gemaakt met behulp van de beste objectgeoriënteerde programmeermethoden met als doel snelheid te verwerken, klassen te hergebruiken en een laag energieverbruik te realiseren. Tot ziens in de volgende tutorial! Bedankt!
