Develop en Nyttig Font Picker App med Actionscript 3.0
Del
Del
Del
Del

Denne Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Når du arbeider med typografi, som å designe logoer, velge riktig skrift er avgjørende. Utvelgelsesprosessen kan være litt treg hvis du tester hver skrift i en designsøknad. Denne opplæringen vil hjelpe deg å lage din egen font-testing app ved hjelp av Flash og Actionscript 3.0

Trinn 1:. Kort oversikt

Vi kommer til å lage et grensesnitt ved hjelp av komponenter og Flash verktøy. Du vil kunne velge hvilken som helst font installert i systemet ved hjelp av List Component og endre bakgrunns eller skriftfarge ved hjelp av fargevelgeren Component. Grensesnittet har også noen tweens som håndteres av den innebygde Tween klasse, men du kan bruke hva du foretrekker, som TweenLite

Trinn 2:. Fla Properties

Åpne Flash og skape en ny Flash-fil (Actionscript 3).

Sett scenen størrelsen på dine ønskede dimensjoner. Jeg har brukt 600 x 300px

Trinn 3:. Opprette bakgrunner

Velg rektangelverktøyet og trekker 2 rektangler, størrelsene er 600 x 40px og 600 x 20px og fargen er # 202 020. Juster den første i øverste midtre og den andre i bunnen-senteret.

Lag en firkant for å bruke som bakgrunnsfarge, vil du være i stand til å endre dette farge med fargevelgeren Component på runtime. Dette er 600 x 240px og fargen er #EFEFEF

Konverter det til MovieClip og sette eksempel navn til "bg"

Trinn 4:.. Legge Input Text

Det neste elementet inneholder ordet eller ordene at brukeren vil kunne endre.

Opprett en InputText på 580 x 80px, velge en størrelse og en felles skrift vise som standard, som Arial 50 piksler. Navngi Textfield "txt" og sentrer det til scenen

Trinn 5:. Farge Pickers

For å endre fargen på bakgrunnen og InputText vi vil bruke fargevelgeren komponent. Åpne Components Panel (Vindu > Components) og dra en ColorPicker komponent til scenen. Kopiere det (Cmd + D) og plassere dem. Legg til litt tekst for å indikere hvilken som er for Bakgrunn og som er for skriften

Trinn 6:. Opprette en Fonts Meny

For å vise de installerte fonter vi skal bruke en liste Komponent. Denne komponenten vil få sine data fra en matrise som vi vil lage senere.

Vi vil vise listen Component i et panel ved hjelp av en Tween, så la oss starte med å lage dette panelet.

Opprett en 300 x 150 piksler rektangel og fyll den med #DFDFDF. Dra en liste Component fra Components Panel, endre størrelsen til 280 x 120 piksler og sentrere den.

Vi trenger også en knapp for å skjule det vinduet, så begynner ved å velge Oval Tool og tegne en 20 x 20px sirkel. Fyll den hvite og gå til Edit > Kopiere. Endre størrelsen på andre til 16 x 16px og bruke en svart fyll. Deretter trekke en liten "x" i sentrum for å fortelle brukeren at det vil stenge selve panelet.

navn på knappen "closeBtn", komponenten "fontsList", konvertere alle til en MovieClip, name it " fontsMenu "og plassere panel på x: -160, y: 115.

Trinn 7: Viser Fonts Meny

Vi vil bruke en knapp på scenen for å vise menyen <. br>

Lag en knapp, you name it "infobutton" og plassere den nederst til høyre på scenen

Trinn 8:. Hoved Class

I dette programmet skal vi å bruke en enkelt klasse som vil ta seg av alle elementene i den fasen, animasjoner og farge.

Opprett en ny Actionscript-fil og lagre den som Main.as i klasser mappe.

Trinn 9: Importere nødvendige Classes

Opprett en ny Actionscript-fil og importerer de nødvendige klasser:
pakke {import flash.display.Sprite; import flash.text.TextFormat; import fl.transitions.Tween; import fl.transitions.easing.Elastic; import flash.text.Font; import fl.data.DataProvider; import flash.events.MouseEvent; import flash.events.Event; import fl.events.ListEvent; import fl.events.ColorPickerEvent; import flash.geom.ColorTransform;
Trinn 10: Utvide Class
public class Hoved strekker Sprite {

Alt vi bruker movieclips, utvider vi klassen bruker Sprite fordi movieclips på scenen ikke bruker en Tidslinje; derfor de er behandlet som Sprites

Trinn 11: Variabler
private Var systemFonts:. Array = new Array (); //Vil lagre alle system fontsprivate Var fontNames: Array = new Array (); //Vil lagre alle systemfontene som Stringsprivate Var FMT: tekstformat = new tekstformat (); //Tekstformat av TextInputprivate Var tween: Tween; //Tween objekt

Dette er alle variablene vi vil bruke

Trinn 12:. Constructor
offentlig funksjon main () {showColorPicker (false); loadFonts (); addListeners ();}

Dette er konstruktøren funksjon, det kaller start funksjoner

Trinn 13:. Hide Elements
privat funksjon showColorPicker (val: Boolean): void {bgColorText.visible = val; fontColorText.visible = val; bgColorPicker.visible = val; fontColorPicker.visible = val;}

Med denne funksjonen trenger vi bare å angi en parameter for å vise eller skjule fargevelgeren tekst og komponenter

Trinn 14: Fylle System Fonts
private funksjons loadFonts (. ): void {systemFonts = Font.enumerateFonts (true); //Returna en rekke av de installerte fonter systemFonts.sortOn ("skriftnavn"); //Sorterer skriften etter navn /* Konverter Fonts Objects å Strings * /for (var i: int = 0, jeg < systemFonts.length; i ++) {fontNames.push (systemFonts [i] .fontName); } /* Sett List data * /fontsMenu.fontsList.dataProvider = ny dataprovider (fontNames);}

På slutten av denne funksjonen vil vi ha en liste Component fylt med alle installerte fonter

! Trinn 15: Info Knappehandlinger

Husk på info-knappen? Det er den knappen vi opprettet for å vise skrifter menyen, denne koden vil ta seg av det
private funksjons showFonts (e: MouseEvent):. Void {/* Forandre fonter panel og textInput * /tween = new Tween (fontsMenu , "x", Elastic.easeOut, - fontsMenu.width, stage.stageWidth /2,1, true); tween = new Tween (txt, "y", Elastic.easeOut, txt.y, txt.y + 85,1, true); e.target.visible = false; //Skjul på info-knappen showColorPicker (true); //Vis de fargevelgere}
Step. 16: Browsing Fonts

Når du klikker et skriftnavn i listen komponenten TextInput vil automatisk endre skriften til den valgte en
privat funksjon onChange ( e: Hendelses): void {fmt.font = new String (e.target.selectedItem.data); txt.setTextFormat (FMT);}
Trinn 17: Velge en Font

Når du er sikker på skriften du vil bruke, kan du dobbeltklikke på den eller bruke lukkeknappen. Dette vil skjule skriften velge menyen og satt tilbake posisjonen til TextInput
privat funksjon choosed (e: ListEvent):. Void {infoButton.visible = true; tween = new Tween (fontsMenu, "x", Elastic.easeOut, stage.stageWidth /2, stage.stageWidth + fontsMenu.width, 2, true); tween = new Tween (txt, "y", Elastic.easeOut, txt.y, txt.y - 85,1, true); showColorPicker (false);} /* Avbryt funksjon * /private funksjon avbryte (e: MouseEvent): void {infoButton.visible = true; tween = new Tween (fontsMenu, "x", Elastic.easeOut, stage.stageWidth /2, stage.stageWidth + fontsMenu.width, 2, true); tween = new Tween (txt, "y", Elastic.easeOut, txt.y, txt.y - 85,1, true); showColorPicker (false);}
Trinn 18:. fargevelgeren Handlinger

Disse funksjonene vil håndtere fargevelgere for bakgrunnen og teksten
privat funksjon changeFontColor (e: ColorPickerEvent): void {FMT Color = "0x" + fontColorPicker.hexValue; txt.setTextFormat (FMT);} private funksjon changeBgColor (e: ColorPickerEvent): void {var colorTransform: ColorTransform = new ColorTransform (); colorTransform.color = int ("0x" + bgColorPicker.hexValue); bg.transform.colorTransform = colorTransform;}
Trinn 19: Legge til Lyttere

Lag en funksjon for å legge til alle lytterne på samme tid. Denne funksjonen ble kalt i konstruktøren
private funksjons addListeners (): void {infoButton.addEventListener (MouseEvent.MOUSE_UP, showFonts);. fontsMenu.fontsList.addEventListener (Event.CHANGE, onChange); fontsMenu.fontsList.addEventListener (ListEvent.ITEM_DOUBLE_CLICK, choosed); fontColorPicker.addEventListener (ColorPickerEvent.CHANGE, changeFontColor); bgColorPicker.addEventListener (ColorPickerEvent.CHANGE, changeBgColor); fontsMenu.closeBtn.addEventListener (MouseEvent.MOUSE_UP, avbryt);}
Trinn 20: Knytte klasse

Gå tilbake til Fla dokumentet, åpner du egenskapene panelet og i "klassen" tekstfeltet skrive "Hoved "å knytte dette som dokument Class.

Test filmen og se dine Font Picker søknad kjøre!

Konklusjon

Dette er en svært nyttig app for testing fonter, ved hjelp dette tut du kan lage din egen app for å tilfredsstille dine behov.

Takk for lesing, og husk å rense font bibliotek! Anmeldelser