, skabe en resizable as3 tooltip med dig,,,,, andel,,,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i denne forelæsning vil vi skabe en tooltip, der automatisk resizes selv.vores tooltip vil opdatere indholdet i henhold til sin holdning på scenen, så de altid er synlige.som en del af denne opgave, vil vi også skabe vores egen kodeks for at klare 9-slice afskalning.,,,, se, lad os tage et hurtigt kig på vores tooltip i aktion:,, trin 1: oprettede fia - fil, lad os begynde med at skabe en ny folder kaldet "tooltip".i tooltip mappe, skabe en actionscript 3,0 fla, trin 2: at skabe displayojects (ånder): nu, skabe en afrundet square i 150x77px med følgende egenskaber:,, udvælge de afrundede square og presse f8 nøgle til at konvertere square i en sprite.anvende ud under:,, udarbejde en oversigt (17x17px) svarende til nedenstående figur:,, at vælge den anden tegning, presse f8 centrale og anvende ud under:,, at redde din fia - fil.,, trin 3: oprettet flashdevelop, flashdevelop er en actionscript redaktør med mange ressourcer.du kan downloade flashdevelop på http://www.flashdevelop.org/community/viewforum.php?f = 11.,, flashdevelop dokumentation kan findes på: http://www.flashdevelop.org/wikidocs/index.php?afsnit = main_page, åben flashdevelop, så vælg: projekt > nye projekt, for at skabe et nyt projekt. i dialogen kasse, de muligheder, som i det næste billede,.,, trin 4: at skabe tooltip klasse, første, udvælger projekt regning (hvis projektet regning er ikke synlig vælg: udsigt > projektleder). i denne regning, du kan se alle filer og foldere om projektet.højre klik den tooltip mappe, så vælg: tilføje > nye mappe og skabe en folder kaldet tooltip (små).,,, right-click den tooltip mappe og vælge: tilføje > nye mappe og skabe en mappe, display.højreklik display - mappe og vælge: tilføje > nye klasse. i dialogen rubrik indsættes, tooltip, som klasse navn og kigge på, flash.display.sprite i base - klasse,.,,, vores projekt har følgende struktur:,, og det er vores tooltip klasse (genereres automatisk):, pakke tooltip.display (import flash.display.sprite; offentlige klasse tooltip udvider sprite {offentlige funktion tooltip() {}}}, løntrin 5: at skabe utils pakke, utils pakke vil hjælpe os i træk i forbindelse med bitmap, sprite og textfield.idéen er at følge oop praksis, at pakken er genanvendelige., så lad os skabe utils pakke.højre klik den tooltip mappe, så vælg: tilføje > nye mappe og skabe en mappe, utils,., skabe, bitmaputils, klasse i denne folder:, pakke tooltip.utils {offentlige endelige klasse bitmaputils {offentlige funktion bitmaputils() {kaste nye fejl ("bitmaputils må ikke være instantierede");}}} skabe, den, spriteutils, klasse:, pakke tooltip.utils {offentlige endelige klasse spriteutils {offentlige funktion spriteutils() {kaste nye fejl ("spriteutils må ikke være instantierede");}}} endelig skabe, textfieldutils, klasse:, pakke tooltip.utils {offentlige endelige klasse textfieldutils {offentligefunktion textfieldutils() {kaste nye fejl ("textfieldutils må ikke være instantierede");}}}, trin 6: bitmaputils klasse, bitmaputils, har en enkelt statiske metode at tage et billede af en ibitmapdrawable eksempel. her er den kode, 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 {offentlige funktion bitmaputils() {kaste nye fejl ("bitmaputils må ikke være instantierede");} /* * * skaber et billede af en ibitmapdrawableinstans * @ param kilde ibitmapdrawable instans anvendes som kilde * @ param bredde endelige bredde * @ param højde sluthøjde * @ param matrix matrix instans til at manipulere den del af kilde, der vil blive trukket * @ param udjævning glat resultatet * @ param cacheasbitmap opbevarer bitmap i erindring * @ returnere øjebliksbillede * /offentlig statisk funktion øjebliksbillede (kilde: ibitmapdrawable, bredde: int. højde: int matrix: matrix = nul, udjævning: boolean = falske, cacheasbitmap: boolean = falske): bitmap (var - b: bitmap; var bd: bitmapdata = nye bitmapdata (bredde, højde, sandt, 0x000000); bd.draw (kilde, -,nul, nul, nul, udjævning); b = nye bitmap (bd, pixelsnapping.always, udjævning); b.cacheasbitmap = cacheasbitmap; tilbage b}}}, trin 7: spriteutils klasse, klasse tilføjer en sprite til skærmen liste:, pakke tooltip.utils (import flash.display.displayobjectcontainer; import flash.display.sprite; offentlige endelige klasse spriteutils {offentlig funktion spriteutils() {kaste nye fejl ("spriteutils må ikke være instantierede");} /* * * lægger en sprite instans i en displayobjectcontainer instans * @ param forbindelsen forbindelsen af sprite, der vil blive knyttet * @ paramoprindelige moderselskab sprite, der vil blive knyttet * @ tilbage * /offentlige statisk funktion attachsprite (linkage: string, forældre: displayobjectcontainer): sprite (var - s: objekt = forælder. loaderinfo. applicationdomain. getdefinition (linkage); tilbage far. addchild (nye s()) som sprite.}), trin 8 - textfieldutils klasse, klasse let skaber en, textfield, f.eks. kan jeg anbefale at læse textfield klasse beskrivelse at forstå alle de egenskaber, der anvendes, 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 {offentlige funktion textfieldutils() {kaste nye fejl ("textfieldutils må ikke være instantierede");} /* * * skabe en textfield instans * @ param forælder forælder til textfield * @ param tekst tekst af textfield (htmltext) * @ param skrifttype skrifttype navn til anvendes i textfield * @ param omfatter * @ param størrelse * @ param farve * @ param bredde * @ param højde * @ param autosize * @ param multiline * @ param wordwrap * @ param cacheasbitmap* @ param tilpasse * @ param førende * @ param letterspacing * @ param type * @ param vælges * @ param skarphed * @ param grænse * @ tilbage * /offentlige statisk funktion textfield (moder: displayobjectcontainer, tekst: string, skrifttype: *, omfatter: boolean = sandt, størrelse: antal = nan, farve: antal = 0xffffff, bredde: antal = nan, højde: antal = nan, autosize: string = "ingen", multiline: boolean = falske, wordwrap: boolean = falske, cacheasbitmap: boolean = falske, tilpasse: string = "venstre", der fører: antal = nan, letterspacing: antal = nan, type: kæde = "dynamiske", der vælges: boolean = falske skarphed: antal = nan, grænse: boolean = falske): textfield (var -t: textfield = nye textfield(); var tf: textformat = nye textformat(); forældre. addchild (t); tf.align = textformatalign.left; tf.font = skrifttype, hvis (størrelse) tf.size = størrelse; tf.color = farve; tf.leading = førende; hvis (letterspacing) tf.letterspacing = letterspacing; skift (tilpasse. tolowercase()) {"venstre": tf.align = textformatalign.left; bryde; sag "center": tf.align = textformatalign.center; bryde; sag "ret": tf.align =textformatalign.right; bryde; sag "retfærdiggøre": tf.align = textformatalign.justify; bryde; default: tf.align = textformatalign.left; pause.} t.antialiastype = antialiastype.advanced; t.type = (type = "dynamiske").textfieldtype.dynamic: textfieldtype.input; t.defaulttextformat = tf; t.embedfonts = omfatter; t.cacheasbitmap = cacheasbitmap; t.mouseenabled = vælges; t.selectable = vælges; t.multiline = multiline; t.border = grænse; t.wordwrap = wordwrap; hvis (skarphed) t.sharpness = skarphed, t.htmltext = tekst; t.width = (bredde).bredde: t.textwidth + 5 t.height = (højde).højde: t.textheight + 5 skift (autosize. tolowercase()) {"venstre": t.autosize = textfieldautosize.left; bryde; sag "center": t.autosize = textfieldautosize.center; bryde; sag "ret": t.autosize = textfieldautosize.right; pause.} tilbage t;}}}, trin 9: resizable baggrund koncept, at skabe en resizable baggrund, vi vil anvende begrebet 9-slice, svarende til 9-slice afskalning bygget til flash.desværre er de indfødte 9-slice i glimt, ikke opfylder vore behov. idéen er at skære kilde (sprite) 9 dele (se billede:), når bredden af baggrund er ændret, del 2, 5 og 8 er strakt vandret, mens de øvrige dele, forbliver de samme, også. når højden af baggrunden er ændret, afsnit 4, 5 og 6 er strakt vertikalt, mens andre ikke ændre.,, trin 10: matrix - matrix klasse skaber en punkter kort, der anvendes i mange former.for yderligere oplysninger, bedes de læse dokumentation af matrix - klasse fra adobe er stedet. vi vil bruge matrix klasse til at omsætte den kilde til baggrund og så drage de dele.faktisk er den matrix, klasse, påvirker ikke den frie bevægelighed for oversættelse til formål automatisk, det kun opbevarer de værdier, som den genstand ville have, hvis det forslag blev vedtaget.dette gør det muligt for dig at bruge et tilfælde af matrix på forskellige måder, uden at være låst inde i en displayobject. for eksempel, at trække det andet, må vi tage hensyn til den holdning (x = 0 y = 0) og størrelse (10 x 10px) af billede 1.den vil anvende oversættelse (uden at påvirke kilde), og kun efter at trække anden del.eksempel:, var kilde: sprite = nye sprite(); var m: matrix = nye matrix(); m.translate (- 10, 0) var bd: bitmapdata = nye bitmapdata (source.width, source.height, sandt, 0x000000); bd.draw (kilde, m), identity(), metode kan anvendes til at nulstille matrix.hvis vi ikke gør det, vil udføre nye beregninger baseret på værdier, der tidligere var oplagret.,, trin ii: custombg klasse, til at skabe, custombg, klasse, skabe en ny pakke kaldet, bg, indenfor display - pakke.skabe nye klasse i denne folder kaldet, custombg,.denne klasse skal udvide, sprite. her er klasse:, pakke tooltip.display.bg (import flash.display.sprite; offentlige endelige klasse custombg udvider sprite {offentlige funktion custombg() {}}}, trin 12: konstruktøren, lad os nu tage sig af konstruktoeren parametre, klasse egenskaber og import.vi er nødt til at importere alle klasser under at fuldføre vores 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; nu skabe to egenskaber: private var _parts: vector. < bitmap > private var _boundaries: int., producenten skal indeholde følgende parametre: /* * * skabe en resizable baggrund * @ param sammenkædning sammenkædning af en sprite for at være trukket * @ param forælder forælder baggrund * @ param bredde oprindelige bredde * @ param højde oprindelige højde * @ param grænser grænser til at skære det image, * @ param udjævning glat baggrund * @ param cacheasbitmap -es baggrund i erindring * /offentlige funktion custombg (linkage: string, forældre: displayobjectcontainer, bredde: antal = nan, højde: antal = nan, grænser: int = 10, udjævning: boolean = sandt, cacheasbitmap: boolean = falske) {}, konstruktøren, vi skærer det image, først. vi erklærer de variabler.med "eksempel" og "kilde" vars lægger vi vores baggrund (sprite) til, custombg, klasse.i "dele" variabel, der opbevarer trukket dele af baggrunden.endelig, med "m" variabel, får vi den oversættelse, værdier og bruge dem til at drage de dele af den, custombg,., her er den kode, var bl.a.: klasse = getdefinitionbyname (linkage) som klasse var kilde: sprite = nye instance() som sprite, var dele: vector. < bitmap > = nye vektor. < bitmap > c); var m: matrix = source.transform.matrix; dele [0] = bitmaputils. øjebliksbillede (kilde, grænser, grænser, nul, udjævning); m.translate (- grænser, 0); dele [1] = bitmaputils billede (kilde. source.width - grænser * 2, grænser, m, udjævning); m. identity(); m.translate (-source.width + grænser, 0); dele [2] = bitmaputils. øjebliksbillede (kilde, grænser, grænser, m, udjævning); m. identity(); m.translate (0, - boundare); dele [3] = bitmaputils. øjebliksbillede (kilde, grænser, source.height - grænser * 2, m, udjævning); m. identity(); m.translate (- grænser - grænser); dele [4] = bitmaputils. øjebliksbillede (kilde, source.width - grænser * 2, source.height - grænser * 2, m, udjævning); m. identity(); m.translate (-source.width + grænser - grænser); dele [5] = bitmaputils. øjebliksbillede (kilde, grænser, source.height - grænser * 2, m, udjævning); m. identity(); m.translate (0, -source.height + grænser); dele [6] = bitmaputils billede (kilde, grænser., grænser, m, udjævning); m. identity(); m.translate (- grænser, -source.height + grænser); dele [7] = bitmaputils. øjebliksbillede (kilde, source.width - grænser * 2, boundaries, m, udjævning); m. identity(); m.translate (-source.width + grænser, -source.height + grænser); dele [8] = bitmaputils. øjebliksbillede (kilde, grænser, grænser, m, udjævning). addchild (dele [0]). addchild (dele [1]). addchild (dele [2]). addchild (dele [3]). addchild (dele [4]). addchild (dele [5]). addchild (dele [6]). addchild (dele [7]). addchild (dele [8.]). _parts = dele; dette. _boundaries = grænser this.width = (isnan (bredde)?source.width: bredde: this.height = (isnan (højde)?source.height: højde, far. addchild (det), trin 13: opdatere dele holdninger, hver gang den baggrund er ændret, placeringen af dele, skal ajourføres.Let's create the ,arrange(), method, to update the position of all the parts of background:, private function arrange():void { var parts:Vector.<Bitmap> = this._parts; var boundaries:int = this._boundaries; parts[0].x = 0; parts[0].y = 0; parts[1].x = boundaries; parts[1].y = 0; parts[2].x = parts[0].width + parts[1].width; parts[2].y = 0; parts[3].x = 0; parts[3].y = boundaries; parts[4].x = boundaries; parts[4].y = boundaries; parts[5].x = parts[3].width + parts[4].width; parts[5].y = boundaries; parts[6].x = 0; parts[6].y = parts[0].height + parts[3].height; parts[7].x = boundaries; parts[7].y= dele [6]. y; dele [8]. x = dele [6]. bredde + dele [7]. bredde; dele. [8] y = dele [6]. y.), punkt 14: bredde og højde, og endelig, at vi tilsidesætter, bredde og højde metoder til sprite klasse, resize og ajourføre de dele: offentlige - funktion, der er bredde (v: antal) ugyldig (var - dele: vector. < bitmap > =. _parts; var grænser: int =. _boundaries; dele [1] = v. bredde - grænser * 2; dele [4]. bredde = v - grænser * 2; dele [7]. bredde = v - grænser * 2. arrange();} offentlige tilsidesætte funktion, der er fastsat højde (v: antal) ugyldig (var - dele: vector. < bitmap > =. _parts, var boundaries: int =. _boundaries; dele [3]. højde = v - grænser * 2; dele [4]. højde = v - grænser * 2. del. [5] højde = v - grænser * 2. arrange();}, nu har vi et resizable baggrund, som ikke lider konkurrenceforvridning, når det er ændret.se pressemeddelelsen:,, trin 15: singleton design -, konstruktions - mønstre er programmering metodologier for at tilbyde løsninger på fælles problemer i programmel. vi vil skabe et tooltip klasse i aspekter af singleton bestemt mønster, som giver os en klasse, der har et globalt eksempel på tværs af hele projektet.tror du vil bruge den tooltip i en menu med flere knapper.det ville være unødvendigt og upraktisk at skabe et tilfælde af tooltip klasse for hver menu knap, for vi kan kun udvise en tooltip på et tidspunkt.den bedste tilgang i dette tilfælde ville skabe et globalt eksempel for hele projektet og anvende metoder, show(), og hide(), til at kontrollere display, singleton design mønster vil forhindre, at klasse konstruktøren. det skaber et tilfælde af klassen i sig selv, og vender altid tilbage via en særlig metode.bemærk venligst, vores singleton gennemførelse:, pakke tooltip.display (import flash.display.sprite; offentlige klasse tooltip udvider sprite {menig static var _instance: tooltip; offentlige statisk funktion getinstance(): tooltip (hvis (!tooltip. _instance) tooltip. _instance = nye tooltip (nye singleton()); tilbage tooltip. _instance;} offentlig funktion tooltip (s. singleton) {}}} indre klasse singleton {}, i ovenstående eksempel, vi kan se erklæringen af en statisk instans.det vil altid være tilbage af det, getinstance() metode. i den pågældende kræver vi en parameter, som kan kun anmeldes inden for denne klasse, da denne parameter er af typen, singleton, og disse data, som kun findes i klassen.derfor, hvis vi forsøger at instantiate klasse ved hjælp af producenten, en fejl er opstået.,, getinstance(), metode, kontrollerer, om de variable blev erklæret. hvis det ikke er blevet erklæret, at den metode, getinstance(), erklærer den instans, og derefter vender tilbage.hvis de f.eks. har allerede erklæret, getinstance(), returnerer den instans., var tooltip: tooltip = nye tooltip(); //fejl var tooltip: tooltip = tooltip. getinstance(); //- trin 16: tweenmax klasse, jack doyle er tweenmax er mellem en motor, der er ofte nævnt på activetuts +.det kan du let mellem animation, tweenmax bibliotek og dokumentation kan findes på greensock. kom. i vores sag, vi vil bruge den tweenmax klasse at tilføje skygge, og også for at vise og skjule vores tooltip.her er et kort eksempel på syntaks af klasse tweenmax:, tweenmax. - displayobjectinstance, varighed, {ejendom: værdi); nu på en simpel anvendelse af klasse tweenmax:,, se f.eks. kode, der anvendes til at opnå dette:, import com.greensock.tweenmax; bt.label = "roll - over at tilføje skygge"; bt.addeventlistener (mouseevent.mouse_over, onover); bt.addeventlistener (mouseevent.mouse_out, onout); funktion onover e: mouseevent): ugyldig (bt.label = "ved at fjerne skygge" tweenmax. (bt, 0, 5, (dropshadowfilter: (farve: 0x000000, alpha: 0,7, blurx: 4, blury: 4 vinkel afstand: 45: 7}})} funktion onout e: mouseevent): ugyldig (bt.label = "roll - over at tilføje skygge" tweenmax. (bt, 0, 5, (dropshadowfilter: (farve: 0x000000 - 0, blurx: 0, blury: 0 - 0, afstand: 0}})}, skridt 17: forøgelse af tilfælde til fase, vi vil tilføje genstande på scenen med støtte fra vores tidligere skabt klasser og to metoder.vi må tilføje en til at lytte til de tilfælde, event.added_to_stage, for at undgå for henvisninger til scenen. ajourføring af konstruktøren og tilføje to metoder under: offentlige funktion tooltip (s. singleton) (denne. addeventlistener (event.added_to_stage, det her. onaddedtostage)} privat funktion onaddedtostage e: omstændigheder ugyldig (den):. removeeventlistener (event.added_to_stage, det her. onaddedtostage). draw();} privat funktion draw(): ugyldig (this.alpha = 0. _bg = nye custombg ("tooltipbg", denne). _tail = spriteutils. attachsprite ("tooltiptail", denne). _tipfield = textfieldutils. textfield (, "," arial ", falske, 13, 0x000000); tweenmax. (, 0, (dropshadowfilter: (farve: 0x000000,- 0, 7, blurx: 4, blury: 4 vinkel: 45, afstand: 7}}). removechild (. _bg). removechild (. _tail). removechild (. _tipfield)}, gå 18: event.enter_frame efter vores tooltip vil altid være i nærheden af mus markør. med henblik på at vide, hvilken side de tooltip bør anføres, jeg delte tidspunkt i et net af ni pladser (ved hjælp af beregninger; jeg har ikke brugt displayobjects).kun seks pladser ville være nok, men jeg har skabt ni pladser, så kan du ændre adfærd. 3, 4 og 5.i dette tilfælde tæller er nulbaseret. musen markør vil altid være i kontakt med en af disse pladser.baseret på det, jeg ved, hvordan jeg skal gøre det tooltip.rul den mus i kvadratisk nedenfor, i, onframe(), metode, jeg tjekker der. din mus markør er så ringe, at foranstalte (stil: int), som parameter, antallet af fantasi square, således at det trækker tooltip, som jeg ønsker.I used one-line statements because they are faster., 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 && 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); else this.arrange(8); }, , Step 19: Arrange Function,The ,arrange(), method updates all elements of the ,ToolTip, based on the value received in the parameter., private function arrange(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: antal = this.stage.mousex, var min: antal = this.stage.mousey; hvis (stil = = 0) (t.scaley = - 1; t.x = mx; t.y = min + 40; b.x = mx - 10 b.y = min + t.height + b.height - 5} andre, hvis (stil = = 1) (t.scaley = - 1; t.x = mx; t.y = min + 40; b.x = mx - b.width * 0, 5 + t.width * 0, 5; b.y = min + t.height + b.height - 5} andre, hvis (stil. = = 2) (t.scaley = - 1; t.x = mx; t.y = min + 40; b.x = mx - b.width + t.width + 10 b.y= min + t.height + b.height - 5} andre, hvis (stil = = 3