Create en passelig Tooltip i Actionscript 3.0
en
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
En Tooltip er et grafisk brukergrensesnitt element. Den aktiverer ved å holde eller rulle over et element, viser en boks med tekst som viser informasjon om dette elementet.
I denne tut, vil jeg vise deg hvordan du oppretter en lett tilpasses tooltip bruker klasser i Actionscript 3.0. Ta en titt
Trinn 1: Kort oversikt
En Tooltip klassen vil bli opprettet for å håndtere tegning av verktøytips, en hoved klasse vil håndtere de tilsvarende hendelser, og det vil bli vist ved å rulle over en knapp eller MovieClip på scenen
Trinn 2:. Starte
Åpne Flash og opprette en ny Flash-fil (Actionscript . 3)
Sett scenen størrelsen til 600x300 og skape en grå radial bakgrunn (# F9FAF5, # E3E5E0)
Trinn 3:. knappen
Velg rektangel Primitive Tool og skape en 140x40px blå (# 7B90A5) avrundet rektangel. Sett 10 som hjørneradius og legg til litt tekst for å gjøre det virke mer som en knapp.
Konverter den til en MovieClip eller knapp og gi den navnet "knapp". Åpne egenskaper panel og legge til følgende filter:
Du vil ende opp med noe sånt som dette:
Trinn 4: Action
Lagre arbeidet og være klar for . noen koding
Opprett en ny Actionscript-fil og lagre den som Tooltip.as
Trinn 5: må Classes
Dette er de klassene vi trenger. For utvidet informasjon om hver klasse kan du se i flash hjelp
pakke klasser {import flash.display.Sprite.; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFormatAlign; import flash.filters.BitmapFilter; import flash.filters.DropShadowFilter; import fl.transitions.Tween; import fl.transitions.easing.Strong;
Trinn 6:. Utvide Class
Vi utvider med Sprite klasse for å få tilgang til Displayobject relaterte funksjoner
public class Tooltip strekker Sprite {
Trinn 7: variabler
Dette er de variablene vi vil bruke, forklarte i kommentarfeltet
Var tween. Tween; //En tween objekt å animere verktøytipset på startvar tooltip: Sprite = new Sprite (); //Den Sprite inneholder verktøytipset graphicsvar bmpFilter: BitmapFilter; //Dette vil håndtere skygge filtervar tekstfeltet: Textfield = new Textfield (); //Tekstfeltet inne i tooltipvar tekstformat: tekstformat = ny tekstformat (); //Formatet for textfieldvar skrift: Harmony = new Harmony (); En innebygd font
Trinn 8: Constructor Funksjon
Denne funksjonen utføres når klassen er lastet, parametrene er nesten alle beskrivende. Den useArrow paramenter vil trekke en liten pil i verktøytips, men det vil bare fungere hvis den retningen er opp eller ned. Vi får se mer om det senere i koden
offentlig funksjon Tooltip (w: int, h: int, cornerRadius: int, txt: String, farge: uint, txtColor: uint, alfa. Antall, useArrow: Boolean , dir: String, dist: int): void {
Trinn 9:. Tekstegenskaper egenskaper~~POS=HEADCOMP
Disse linjene vil sette tekstfeltet og tekstformat egenskaper
textfield.selectable = false; //Du kan ikke velge tekst i tooltiptextformat.align = TextFormatAlign.CENTER; //Senter alignmenttextformat.font = font.fontName; //Bruk den innebygde fonttextformat.size = 8; //Størrelse på skriften textformat.color = txtColor; //Fargen på teksten, hentet fra parameterstextfield = new Textfield (); //En ny Textfield objecttextfield.embedFonts = true; //Angi innebygging av fontstextfield.width = w; textfield.height = h; textfield.defaultTextFormat = tekstformat; //Påfør formattextfield.text = txt; //Innholdet i Textfield, tatt fra parametrene
Trinn 10:. Opprette Tooltip
Denne koden vil trekke verktøytips i henhold til verdiene av parametrene
tooltip = new Sprite (); tooltip.graphics.beginFill (farge, alfa), tooltip.graphics.drawRoundRect (0, 0, w, h, cornerRadius, cornerRadius);
Trinn 11: Arrow parameter
useArrow parameter vil trekke en trekant i midten-top eller midt nederst på verktøytips, legge merke til at dette fungerer bare hvis "dir" parameteren settes til opp eller ned
if (useArrow &. & dir == "opp" ) {tooltip.graphics.moveTo (tooltip.width /2 - 6, tooltip.height); tooltip.graphics.lineTo (tooltip.width /2, tooltip.height + 4,5); tooltip.graphics.lineTo (tooltip.width /2 + 6, tooltip.height - 4,5);} if (useArrow & & dir == "ned") {tooltip.graphics.moveTo (tooltip.width /2-6 , 0); tooltip.graphics.lineTo (tooltip.width /2, -4,5); tooltip.graphics.lineTo (tooltip.width /2 + 6, 0);} tooltip.graphics.endFill (); //Denne linjen vil fullføre tegningen uansett om pilen er brukt eller ikke
Trinn 12:.. Drop Shadow Filter
Denne koden gjelder en Drop Shadow Filter basert på fargen på verktøytips
bmpFilter = new DropShadowFilter (1,90, farge, 1,2,2,1,15); tooltip.filters = [bmpFilter];
Trinn 13: Legg Tooltip til Stage
tooltip.addChild (tekstfeltet); //Legger til Textfield til Tooltip SpriteaddChild (verktøytips); //Legger Tooltip til Stage
Trinn 14:. Animere
Denne linjen vil skape en kort tween animasjon ved hjelp av alfa eiendom tipset
tween = new Tween (verktøytips, "alpha", Strong.easeOut, 0, tooltip.alpha, 1, true);
Trinn 15: Main Class
Lagre Tooltip klasse og opprette en ny Actionscript-fil, denne filen vil være den viktigste klassen som vil håndtere Hendelser å vise Tooltip når du ruller over knappen
Lagre denne klassen som Main.as
Trinn 16:. Nødvendig klasser
de nødvendige klasser for denne filen:
pakke klasser {import classes.Tooltip; //Husk å importere Tooltip klasse! import flash.display.Sprite; import flash.utils.Timer; import flash.events.MouseEvent; import flash.events.TimerEvent;
Trinn 17:. Utvide Class
Utvid bruker Sprite klasse for å få tilgang til Displayobject relaterte funksjoner
public class Hoved strekker Sprite {
Trinn 18: variabler
variablene vi vil bruke i denne klassen
Var timer. timer = ny timer (500, 1); //En Timer som vil henrette 500 millisekunder etter roll over, bare en timevar tooltip: Tooltip; //En Tooltip objekt Var dir: String = "opp"; //Retningen av tooltipvar dist: int = 10; //Avstand fra verktøytipset i piksler
Trinn 19: Main Funksjon
Denne funksjonen er konstruktøren, det vil bli kjørt så snart klassen kalles
offentlig funksjon main ().: void {addListeners (); //Denne funksjonen legger alle necesary lyttere, vil bli opprettet senere}
Trinn 20: Tooltip Nedtelling
Denne funksjonen vil kjøre når brukeren ruller over knappen, vil den starte tidtakeren å telle 500 millisecons før du ringer funksjonen som vil vise Tooltip
privat funksjon startTooltipCounter (e: Mouseevent):. void {timer.addEventListener (TimerEvent.TIMER_COMPLETE, showTooltip); timer.start ();}
Trinn 21: Vis Tooltip Funksjon
Oppretter Tooltip henhold til parametre og plasserer det i den valgte retningen. Den legger også verktøytipset til scenen og skaper en mus Move lytteren
privat funksjon showTooltip (e: Timerevent):. Void {timer.removeEventListener (TimerEvent.TIMER_COMPLETE, showTooltip); tooltip = ny Tooltip (80, 20, 10, "FlashTuts +", 0x222222, 0xFFFFFF, 0.5, sant, regi, dist); //Bruke Tooltip Klasse /* startposisjon, basert på dir parameter * /bryter (dir) {case "opp": tooltip.x = mouseX - tooltip.width /2; tooltip.y = Mousey - (tooltip.height + dist); gå i stykker; case "down": tooltip.x = mouseX - tooltip.width /2; tooltip.y = Mousey + (tooltip.height + dist); gå i stykker; case "venstre": tooltip.x = mouseX - tooltip.width - dist; tooltip.y = Mousey - (tooltip.height /2); gå i stykker; case "riktig": tooltip.x = mouseX + dist; tooltip.y = Mousey - (tooltip.height /2); gå i stykker; } /* Legg tooltip å iscenesette og legge flytte lytteren * /addChild (verktøytips); button.addEventListener (MouseEvent.MOUSE_MOVE, moveTooltip); }
Trinn 22: Tooltip Movement
Denne koden vil flytte verktøytips basert på dist paramenter og musen posisjon
privat funksjon moveTooltip (e: Mouseevent):. Void {switch (dir) { case "up": tooltip.x = mouseX - tooltip.width /2; tooltip.y = Mousey - (tooltip.height + dist); gå i stykker; case "down": tooltip.x = mouseX - tooltip.width /2; tooltip.y = Mousey + (tooltip.height + dist); gå i stykker; case "venstre": tooltip.x = mouseX - tooltip.width - dist; tooltip.y = Mousey - (tooltip.height /2); gå i stykker; case "riktig": tooltip.x = mouseX + dist; tooltip.y = Mousey - (tooltip.height /2); gå i stykker; }}
Trinn 23:. Hide Tooltip
Dette er en funksjon som vil fjerne Tooltip når musepekeren er ikke lenger innenfor målet, i dette tilfellet på knappen
privat funksjon hideTooltip (e : Mouseevent): void {/* sjekker om tidsuret er allerede utført, hvis ikke, betyr det at musen nettopp passert gjennom knappen, men gjorde ikke bodd * /if (timer.currentCount == 1) {removeChild (verktøytips); } Timer.reset (); //Tilbake timeren}
Trinn 24: Lyttere
Dette er en funksjon for å legge til lytterne om gangen, henrettet i den viktigste funksjonen
privat funksjon addListeners ():. Void {/* "knapp" er navnet på forekomsten av vårt mål * /button.addEventListener (MouseEvent.MOUSE_OVER, startTooltipCounter); button.addEventListener (MouseEvent.MOUSE_OUT, hideTooltip);}
Trinn 25: Dokument Class
Gå tilbake til Fla og i egenskapsvinduet, klasse tekstfeltet legge til "classes.Main". Dette vil knytte hovedklassen som Document Class.
Test Tooltip!
Konklusjon
Du har opprettet en meget tilpass Tooltip i Actionscript 3 klasser, nå er det på tide å se tilpasning del. Følgende er bare noen få eksempler på hvor mange muligheter du har:
Takk for lesing
!