De BitmapUtils har en enkel statisk metode som tar et øyeblikksbilde av en IBitmapDrawable eksempel

Her er koden:.
pakke tooltip.utils {import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.IBitmapDrawable; import flash.display.PixelSnapping; import flash.geom.Matrix; offentlige endelige klasse BitmapUtils {offentlig funksjon BitmapUtils () {kaste nytt Feil ("BitmapUtils må ikke startes"); } /** * Lag et øyeblikksbilde av en IBitmapDrawable eksempel *param kilde IBitmapDrawable eksempel skal brukes som kilde *param width Endelig bredde *param høyde slutthøyde *param matrise Matrix eksempel å manipulere den delen av kilde som vil være tegnet *param glatting Glatt resultatet *param cacheAsBitmap Lagrer bitmap i minnet *return Den snapshot * /public static funksjon stillbilde (kilde: IBitmapDrawable, bredde: int, høyde: int, matrise: Matrix = null, glatting: Boolean = false, cacheAsBitmap: Boolean = false): Bitmap {var b: Bitmap; Var bd: BitmapData = new BitmapData (bredde, høyde, sant, 0x000000); bd.draw (kilde, matrise, null, null, null, glatting); b = new Bitmap (bd, PixelSnapping.ALWAYS, glatting); b.cacheAsBitmap = cacheAsBitmap; returnere b; }}}

Denne klassen legger en Sprite til visningsliste:
pakke tooltip.utils {import flash.display.DisplayObjectContainer; import flash.display.Sprite; offentlige endelige klasse SpriteUtils {offentlig funksjon SpriteUtils () {kaste nytt Feil ("SpriteUtils må ikke startes"); } /** * Fest en Sprite eksempel i en Display eksempel *param kobling Koblingen av Sprite som skal festes *param forelder forelder til Sprite som skal festes *return * /public static funksjon attachSprite (linkage: String , forelder: Display): Sprite {var s: Object = parent.loaderInfo.applicationDomain.getDefinition (kobling); returnere parent.addChild (nye s ()) som Sprite; }}}

Denne klassen skaper lett en Textfield eksempel

Jeg anbefaler å lese den Textfield klassen beskrivelse å forstå alle de egenskaper som brukes <.. br> pakke 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; offentlige endelige klasse TextFieldUtils {offentlig funksjon TextFieldUtils () {kaste nytt Feil ("TextFieldUtils må ikke startes"); } /** * Lag en tekstfeltet eksempel *param forelder forelder tekstfeltet *param tekst Tekst av tekstfeltet (htmlText) *param font Font navn som skal brukes i tekstfeltet *param embed *param størrelse *param farge * param width *param høyde *param autoSize *param linjer *param wordwrap *param cacheAsBitmap *param sluttar *param ledende *param bokstav *param type *param valgbar *param skarphet *param border *return * /public static funksjon tekstfeltet (forelder: Display, tekst: String, font: *, embed: Boolean = true, størrelse: Number = NaN, farge: Number = 0xFFFFFF, bredde: Number = NaN, høyde: Antall = NaN, autoSize: String = "ingen", multiline: Boolean = false, wordwrap: Boolean = false, cacheAsBitmap: Boolean = false, justerer: String = "left", fører: Number = NaN, bokstav: Number = NaN, type : String = "dynamisk", valgbar: Boolean = false, skarphet: Number = NaN, border: Boolean = false): Textfield {var t: Textfield = new Textfield (); Var tf: tekstformat = new tekstformat (); parent.addChild (t); tf.align = TextFormatAlign.LEFT; tf.font = skrifttype; if (størrelse) tf.size = størrelse; tf.color = farge; tf.leading = ledende; if (bokstav) tf.letterSpacing = bokstav; bryteren (align.toLowerCase ()) {case "venstre": tf.align = TextFormatAlign.LEFT; gå i stykker; case "senter": tf.align = TextFormatAlign.CENTER; gå i stykker; case "riktig": tf.align = TextFormatAlign.RIGHT; gå i stykker; case "rettferdiggjøre": tf.align = TextFormatAlign.JUSTIFY; gå i stykker; standard: tf.align = TextFormatAlign.LEFT; gå i stykker; } T.antiAliasType = AntiAliasType.ADVANCED; t.type = (type == "dynamisk")? TextFieldType.DYNAMIC: TextFieldType.INPUT; t.defaultTextFormat = tf; t.embedFonts = embed; t.cacheAsBitmap = cacheAsBitmap; t.mouseEnabled = valgbar; t.selectable = valgbar; t.multiline = linjer; t.border = grensen; t.wordWrap = wordwrap; if (skarphet) t.sharpness = skarphet; t.htmlText = tekst; t.width = (bredde)? bredde: t.textWidth + 5; t.height = (høyde)? høyde: t.textHeight + 5; bryteren (autoSize.toLowerCase ()) {case "venstre": t.autoSize = TextFieldAutoSize.LEFT; gå i stykker; case "senter": t.autoSize = TextFieldAutoSize.CENTER; gå i stykker; case "riktig": t.autoSize = TextFieldAutoSize.RIGHT; gå i stykker; } Tilbake t; }}}

For å opprette en skalerbar bakgrunn, vi skal bruke begrepet 9-slice, lik den 9-slice skalering innebygd i Flash. Dessverre gjør de innfødte 9-skive innen Flash ikke tilfredsstiller våre behov.

Ideen er å skjære kilden (Sprite) i 9 deler (se bildet :)

Når bredden av bakgrunn endres, delene 2, 5 og 8 er strukket horisontalt, mens de øvrige deler forblir de samme.

På samme måte, når høyden av bakgrunnen blir endret, deler 4, 5 og 6 er strukket vertikalt, mens de andre ikke endrer

The Matrix klassen skaper et poeng kart som skal brukes i mange former. For mer informasjon, kan du lese dokumentasjonen av Matrix klasse fra Adobes nettsted.

Vi vil bruke Matrix klassen til å oversette kilden til bakgrunnen og så, tegne delene. Faktisk har matrisen klassen ikke påvirke bevegelsen av translasjon i objektet automatisk, er det bare lagrer verdiene at gjenstanden ville ha hvis bevegelsen er gjennomført. Dette gjør at du kan bruke en forekomst av Matrix på forskjellige måter uten å bli låst inn i en Displayobject.

For eksempel, for å trekke det andre bildet, må vi ta hensyn til posisjon (x = 0 y = 0) og størrelse (10 x 10px) av bildet 1. Det vil anvende oversettelsen (uten å påvirke kilden), og bare etter det å trekke den andre delen. Eksempel:
Var kilde: Sprite = new Sprite (); Var m: Matrix = new Matrix (); m.translate (-10, 0); Var bd: BitmapData = new BitmapData (source.width, source.height, sant, 0x000000); bd.draw (kilde, m);

identitet () metoden kan brukes til å tilbakestille matrisen. Hvis vi ikke blir tilbakestilt, vil det utføre nye beregninger basert på verdier tidligere lagrede

For å opprette CustomBg klassen, lage en ny pakke som heter < em> bg
inne displayet pakken. Opprett ny klasse i denne mappen som heter CustomBg. Denne klassen må utvide Sprite

Her er klassen.
Pakke tooltip.display.bg {import flash.display.Sprite; offentlig siste klasse CustomBg strekker Sprite {offentlig funksjon CustomBg () {}}}

La oss nå forholde seg til konstruktøren parametre, klasseegenskaper og import. Vi må importere alle klassene under for å fullføre vår klasse:
import flash.display.Bitmap, import flash.display.DisplayObjectContainer, import flash.display.Sprite, import flash.geom.Matrix; import flash.utils.getDefinitionByName; import tooltip.utils.BitmapUtils;

Nå oppretter to egenskaper:
private Var _parts: Vector < Bitmap >; private Var _boundaries: Int.,

Konstruktøren må inneholde følgende parametere:
/** * Lag en skalerbar Bakgrunn *param kobling Kobling av en Sprite å bli tegnet *param forelder forelder Bakgrunn *param width Initial bredde *param høyde Initial høyde *param grenser Grenser å skjære bildet * @ param glatting Glatt Bakgrunn *param cacheAsBitmap Lagrer Bakgrunn i minnet * /public funksjon CustomBg (linkage: String, forelder: Display, bredde: Number = NaN, høyde: Number = NaN, grenser: int = 10, glatting: Boolean = sant, cacheAsBitmap. Boolean = false) {}

I konstruktøren, vil vi skjære bildet

Først erklærer vi variablene. Med "Forekomst" og "Source" vars, legger vi vår bakgrunn (Sprite) til CustomBg klassen. I "deler" variable, lagrer vi de trukne deler av bakgrunnen. Til slutt, med "m" variable, får vi omregningsverdier og bruke dem til å trekke deler av vår CustomBg

Her er koden:.
Var Instance: Class = getDefinitionByName (kobling) som klasse; Var kilde: Sprite = new Instance () som Sprite; Var deler:. Vector < Bitmap > = New Vector <. Bitmap > (); Var m: Matrix = source.transform.matrix; deler [0] = BitmapUtils.snapShot (kilde, grenser, grenser, null, utjevning); m.translate (-boundaries, 0); deler [1] = BitmapUtils .snapShot (kilde, source.width - grenser * 2, grenser, m, glatting), m.identity (); m.translate (-source.width + grenser, 0); deler [2] = BitmapUtils.snapShot (kilde , grenser, grenser, m, glatting), m.identity (); m.translate (0, -boundaries); deler [3] = BitmapUtils.snapShot (kilde, grenser, source.height - grenser * 2, m, utjevnende ); m.identity (); m.translate (-boundaries, -boundaries); deler [4] = BitmapUtils.snapShot (kilde, source.width - grenser * 2, source.height - grenser * 2, m, glatting); m.identity (); m.translate (-source.width + grenser, -boundaries), deler [5] = BitmapUtils.snapShot (kilde, grenser, source.height - grenser * 2, m, glatting); m. identitet (); m.translate (0, -source.height + grenser), deler [6] = BitmapUtils.snapShot (kilde, grenser, grenser, m, glatting); m.identity (); m.translate (-boundaries, -source.height + grenser), deler [7] = BitmapUtils.snapShot (kilde, source.width - grenser * 2, grenser, m, glatting); m.identity (); m.translate (-source.width + grenser, -source.height + grenser), deler [8] = BitmapUtils.snapShot (kilde, grenser, grenser, m, smoothing);this.addChild(parts[0]);this.addChild(parts[1]);this.addChild(parts[2]);this.addChild(parts[3]);this.addChild(parts[4]);this.addChild(parts[5]);this.addChild(parts[6]);this.addChild(parts[7]);this.addChild(parts[8]);this._parts = Deler; this._boundaries = grenser, this.width = (isNaN (bredde)) source.width: bredde; this.height = (isNaN (høyde)) source.height: høyde; parent.addChild (denne);

Hver gang bakgrunnen er endret, plasseringen av delene må oppdateres La oss skape ordne () metoden, for å oppdatere posisjonen til alle. de delene av bakgrunnen:
privat funksjon ordne (): void {var deler: Vector < Bitmap > = this._parts; Var grenser. int = this._boundaries; deler [0] .x = 0; deler [ ,,,0],0] .Y = 0; deler [1] .x = grenser, deler [1] .Y = 0; deler [2] .x = deler [0] .width + deler [1] .width; deler [2] .Y = 0; deler [3] .x = 0; deler [3] .Y = grenser, deler [4] .x = grenser, deler [4] .Y = grenser, deler [5] .x = deler [ ,,,0],3] .width + deler [4] .width; deler [5] .Y = grenser, deler [6] .x = 0; deler [6] .Y = parts [0] .height + deler [3] .height; deler [7] .x = grenser, deler [7] .Y = deler [6] .Y; deler [8] .x = deler [6] .width + deler [7] .width; deler [8] .Y = deler [6] .Y;}

Til slutt, vi overstyre bredde og høyde metoder for Sprite klasse, for å endre størrelsen og oppdatering posisjonene til de deler:
offentlige styringsfunksjon sett bredde (v: Number): void {var deler: Vector < Bitmap >. = This._parts; Var grenser: int = this._boundaries; deler [1] .width = v - grenser * 2; deler [4] .width = v - grenser * 2; deler [7] .width = v - grenser * 2; this.arrange (); } Public override funksjonen satt høyde (v: Number): void {var deler. Vector < Bitmap > = This._parts; Var grenser: int = this._boundaries; deler [3] .height = v - grenser * 2; deler [4] .height = v - grenser * 2; deler [5] .height = v - grenser * 2; this.arrange (); }

Nå har vi en skalerbar bakgrunn som ikke lider forvrengning når det er endret. Se forhåndsvisning:

Design mønstre programmerer metoder som tilbyr løsninger på felles problemer i software design

Vi vil skape et verktøytips klasse under aspekter av Singleton design mønsteret, noe som gir oss en klasse som har bare én global eksempel på tvers av hele prosjektet. Tenk: du vil bruke verktøytips i en meny med flere knapper. Det ville være unødvendig og upraktisk å opprette en forekomst av ToolTip klasse for hvert menyknappen, siden vi bare kan vise én ToolTip gangen. Den beste tilnærmingen i dette tilfellet ville skape en global eksempel for hele prosjektet og bruke metoder viser () og hide () for å kontrollere visningen

The Singleton design mønsteret vil hindre kalle klassen konstruktør.; det skaper en forekomst av klassen i seg selv, og alltid returnerer via en bestemt metode. Vær oppmerksom på vår Singleton gjennomføring:
pakke tooltip.display {import flash.display.Sprite; public class ToolTip strekker Sprite {private static Var _instance: ToolTip; public static funksjon getInstance (): (! ToolTip._instance) ToolTip {if ToolTip._instance = new ToolTip (ny Singleton ()); returnere ToolTip._instance; } Offentlig funksjon Tooltip (s: Singleton) {}}} intern klasse Singleton {}

I eksempelet ovenfor, kan vi se erklæringen av en statisk instans. Det vil alltid bli returnert av getInstance () -metoden.

I konstruktøren, krever vi en parameter som bare kan erklæres innen denne klassen, siden denne parameteren er av typen Singleton og denne datatypen kun eksisterer inne i klasse. Dermed, hvis vi prøver på å bruke klassen gjennom konstruktør, oppstår det en feil

getInstance () metoden sjekker om variabelen ble erklært.; hvis det ikke har blitt erklært, metoden getInstance () erklærer forekomsten og returnerer den. Dersom forekomsten er allerede erklært, den getInstance () returnerer bare forekomsten.
Var tooltip: ToolTip = new ToolTip (); //Errorvar tooltip: ToolTip = ToolTip.getInstance (); //Ok

Jack Doyles TweenMax er en tween motor som nevnes ofte på Activetuts +. Den lar deg gjøre Tween animasjon enkelt.

TweenMax bibliotek og dokumentasjonen kan bli funnet på GreenSock.com.

I vårt tilfelle, vil vi bruke TweenMax klassen til å legge skygge, og også til vise og skjule vår ToolTip. Her er et kort eksempel på syntaksen i klassen TweenMax:
TweenMax.to (displayObjectInstance, varighet, {eiendom: verdi);

Nå ser på en enkel bruk av klassen TweenMax:

Se eksempelet koden som brukes for å oppnå dette:
import com.greensock.TweenMax; bt.label = "ROLL OVER TO ADD SHADOW"; bt.addEventListener (MouseEvent.MOUSE_OVER, onOver); bt.addEventListener (MouseEvent.MOUSE_OUT, onOut ), funksjon onOver (e: MouseEvent): void {bt.label = "ROLL ut for å fjerne SHADOW"; TweenMax.to (bt, 0.5, {dropShadowFilter: {color: 0x000000, alpha: 0,7, blurX: 4, Blury: 4, vinkel: 45, avstand: 7}});} funksjon onOut (e: MouseEvent): void { bt.label = "ROLL OVER TO ADD SHADOW"; TweenMax.to (bt, 0.5, {dropShadowFilter: {color: 0x000000, alpha: 0, blurX: 0, Blury: 0, vinkel: 0, avstand: 0}});}

Vi vil legge objektene på scenen ved hjelp av våre tidligere opprettede klasser og to metoder. Vi må legge en lytter for hendelsen Event.ADDED_TO_STAGE å unngå null referanser til scenen

Oppdater konstruktøren og legge de to metodene nedenfor:.
Offentlig funksjon ToolTip (s: Singleton) {this.addEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage);} private funksjon onAddedToStage (e: Hendelses): void {this.removeEventListener (Event.ADDED_TO_STAGE, this.onAddedToStage); this.draw ();} private funksjon draw (): void {this.alpha = 0; this._bg = new CustomBg ("ToolTipBg", dette); this._tail = SpriteUtils.attachSprite ("ToolTipTail", dette); this._tipField = TextFieldUtils.textField (dette, "", "Arial", falsk, 13, 0x000000); TweenMax.to (dette, 0, {dropShadowFilter: {color: 0x000000, alpha: 0,7, blurX: 4, Blury: 4, vinkel: 45, avstand: 7}}); this.removeChild (this._bg); this.removeChild (this._tail); this.removeChild (this._tipField);}

Vår ToolTip vil alltid vises nær musepekeren

For å vite hvilke. aspektet ToolTip skal vises, delte jeg på scenen i et rutenett av ni ruter (ved hjelp av beregninger, jeg har ikke brukt DisplayObjects). Bare seks rutene ville være nok, men jeg har laget ni ruter, slik at du kan endre oppførselen til torget 3, 4 og 5. I dette tilfellet teller er null-basert.

Musepekeren vil alltid være i berøring med en av disse rutene. Basert på dette, jeg vet hvordan jeg skal trekke verktøytips. Rull muse i rutene nedenfor:

I onFrame () -metoden, sjekker jeg som firkantet musepekeren er i og deretter ringe for å avtale (stil: int), passerer som parameter nummeret på imaginære torget, slik at den trekker verktøytips som jeg skulle ønske det til. Jeg brukte én linje uttalelser fordi de er raskere
privat funksjon onFrame (e: Hendelses): void {var SverIGe. 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 min: 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 & & mY < 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); annet this.arrange (8);}

ordne () -metoden oppdaterer alle elementene i verktøytips basert på mottatt i parameterverdien
privat funksjon ordne (stil: int): void {var b: CustomBg = this._bg; Var t: Sprite = this._tail; Var tF: Textfield = this._tipField; t.scaleY = 1; t.x = 0; hets = 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 min: Number = this.stage.mouseY; if (style == 0) {t.scaleY = 1; t.x = mX; hets = mY + 40; b.x = mx - 10; b.y = mY + t.height + b.height - 5; } Else if (style == 1) {t.scaleY = 1; t.x = mX; hets = mY + 40; b.x = mX - b.width * 0,5 + t.width * 0,5; b.y = mY + t.height + b.height - 5; } Else if (stil == 2) {t.scaleY = 1; t.x = mX; hets = mY + 40; b.x = mX - b.width + t.width + 10; b.y = mY + t.height + b.height - 5; } Else if (stil == 3 || stil == 6) {t.x = mX; hets = My - t.height; b.x = t.x - 10; b.y = hets - b.height + 2; } Else if (stil == 4 || stil == 7) {t.x = mX; hets = My - t.height; b.x = t.x - b.width * 0,5 + t.width * 0,5; b.y = hets - b.height + 2; } Else if (style == 5 || stil == 8) {t.x = mX; hets = My - t.height; b.x = t.x - b.width + t.width + 10; b.y = hets - b.height + 2; } TF.x = b.x + 5; tF.y = b.y + 5;}

Metoden nedenfor trenger ikke mye forklaring; det er selvforklarende
offentlig funksjon showet (message: String):. void {this._tipField.htmlText = melding; this.parent.setChildIndex (dette, this.parent.numChildren - 1); this.addChild (this._bg); this.addChild (this._tail); this.addChild (this._tipField); TweenMax.to (dette, 0,25, {alfa: 1}); this.addEventListener (Event.ENTER_FRAME, this.onFrame);}

Jeg opprettet onCompleteHide () metode som vil bli utført etter utgangen av undervisningen TweenMax (dette er gjort gjennom følgende uttalelse: onComplete: this.onCompleteHide). Det vil fjerne alle elementer fra scenen
offentlig funksjon hide (). Void {this.removeEventListener (Event.ENTER_FRAME, this.onFrame); TweenMax.to (dette, 0,25, {alfa: 0, onComplete: this.onCompleteHide});} private funksjon onCompleteHide (): void {this.removeChild (this._bg); this.removeChild (this._tail); this.removeChild (this._tipField);}

For å bruke vår ToolTip, foreslår jeg at du legger det til Displayobject som er på det høyeste nivået (f.eks document ). Etter å ha gjort dette, rett og slett kaller metodene viser () og hide () når det trengs. Her er to enkle eksempler på bruk av verktøytips:
Var t: ToolTip = ToolTip.getInstance (); this.addChild (t), t.show ("Noen tips");

Alternativt:
dette .addChild (ToolTip.getInstance ()); ToolTip.getInstance () viser ("Noen tips");.

Jeg håper du likte denne; Jeg laget dette verktøyet bruker beste objektorienterte programmeringsmetoder med sikte på behandling hastighet, gjenbruk klasser og lavt system forbruk. Se deg i neste tutorial! Takk!