Share
Wanneer u met typografie werkt, zoals het ontwerpen van logo's, is het kiezen van het juiste lettertype van cruciaal belang. Het selectieproces kan een beetje traag zijn als u elk lettertype in een ontwerptoepassing test. Met deze zelfstudie kunt u uw eigen app voor het testen van lettertypen maken met behulp van Flash en ActionScript 3.0.
We gaan een interface maken met behulp van componenten en de Flash-hulpmiddelen. U kunt elk lettertype dat in uw systeem is geïnstalleerd kiezen met behulp van het lijstonderdeel en de achtergrondkleur of tekstkleur wijzigen met behulp van het kleurkiezeronderdeel. De interface heeft ook enkele tweens die worden behandeld door de ingebouwde Tween Class, maar u kunt alles gebruiken wat u wilt, zoals TweenLite.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3).
Stel de werkgebiedgrootte in op de gewenste afmetingen. Ik heb 600 x 300 px gebruikt.
Selecteer het gereedschap Rechthoek en teken 2 rechthoeken, de formaten zijn 600 x 40 px en 600 x 20 px en de kleur is # 202020. Lijn de eerste uit in het midden bovenaan en de andere in het midden onderaan.
Maak een andere rechthoek om te gebruiken als achtergrondkleur. U kunt deze kleur tijdens runtime gebruiken met het onderdeel Kleurkiezer. Dit is 600 x 240 px en de kleur is #EFEFEF.
Converteer het naar MovieClip en stel de naam van het exemplaar in op "bg".
Het volgende item bevat het woord of de woorden die de gebruiker kan wijzigen.
Maak een InputText van 580 x 80px, kies een grootte en een algemeen lettertype dat standaard wordt weergegeven, zoals Arial 50px. Noem het TextField "txt" en centreer het naar het werkvlak.
Als u de kleur van de achtergrond en de invoertekst wilt wijzigen, gebruiken we de component Kleurkiezer. Open het Componentenpaneel (Venster> Componenten) en sleep een component ColorPicker naar het werkgebied. Dupliceer het (Cmd + D) en plaats ze. Voeg wat tekst toe om aan te geven welke voor de achtergrond is en welke voor het lettertype is.
Om de geïnstalleerde lettertypen weer te geven, gebruiken we een lijstcomponent. Dit onderdeel krijgt de gegevens van een array die we later zullen maken.
We zullen de lijstcomponent weergeven in een paneel met een Tween, dus laten we beginnen met het maken van dat paneel.
Maak een rechthoek van 300 x 150 px en vul deze met #DFDFDF. Sleep een lijstcomponent vanuit het componentenpaneel, verklein het formaat naar 280 x 120 px en centreer het.
We hebben ook een knop nodig om dat venster te verbergen, dus begin met het selecteren van het gereedschap Ovaal en teken een cirkel van 20 x 20 px. Vul het wit in en ga naar Bewerken> Dupliceren. Verklein de tweede tot 16 x 16 px en gebruik een zwarte vulling. Teken vervolgens een beetje "x" in het midden om de gebruiker te laten weten dat het het daadwerkelijke paneel zal sluiten.
Noem de knop "closeBtn", de component "fontsList", converteer alles naar een MovieClip, noem het "fontsMenu" en plaats het paneel op x: -160, y: 115.
We gebruiken een knop op het podium om het menu te laten zien.
Maak een knop, noem deze "infobutton" en plaats deze rechtsonder in het werkgebied.
In deze applicatie gaan we een enkele klas gebruiken die zorgt voor alle elementen in het toneel, animaties en kleuren.
Maak een nieuw ActionScript-bestand en sla het op als Main.as in uw klassenmap.
Maak een nieuw ActionScript-bestand en importeer de benodigde klassen:
pakket 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;
public class Main breidt uit
Hoewel we MovieClips gebruiken, breiden we de klasse uit met Sprite omdat de MovieClips op het podium geen tijdlijn gebruiken; daarom worden ze behandeld als Sprites.
private var systemFonts: Array = new Array (); // Bewaart alle systeemlettertypen private var fontNames: Array = new Array (); // Bewaart alle systeemlettertypen als strings private var fmt: TextFormat = new TextFormat (); // Tekstopmaak van de privé-tween TextInput: Tween; // Tween-object
Dit zijn alle variabelen die we zullen gebruiken.
public function Main () showColorPicker (false); loadFonts (); addListeners ();
Dit is de constructorfunctie, het roept de startfuncties aan.
private function showColorPicker (val: Boolean): void bgColorText.visible = val; fontColorText.visible = val; bgColorPicker.visible = val; fontColorPicker.visible = val;
Met deze functie hoeven we alleen een parameter op te geven om de kleurkiezer tekst en componenten te tonen of te verbergen.
Accentsconagua
private function loadFonts (): void systemFonts = Font.enumerateFonts (true); // Returna een array van de geïnstalleerde lettertypen systemFonts.sortOn ("fontName"); // Sorteert het lettertype op naam / * Converteert de lettertypen Objecten naar tekenreeksen * / for (var i: int = 0; i < systemFonts.length; i++) fontNames.push(systemFonts[i].fontName); /* Set List data */ fontsMenu.fontsList.dataProvider = new DataProvider(fontNames); Aan het einde van deze functie hebben we een lijstcomponent gevuld met alle geïnstalleerde lettertypen!
Weet je nog de infoknop? Dat is de knop die we hebben gemaakt om het lettertypen-menu weer te geven, deze code zorgt ervoor.
private function showFonts (e: MouseEvent): void / * Animeer het lettertypepaneel en de textInput * / tween = nieuwe Tween (fontsMenu, "x", Elastic.easeOut, - fontsMenu.width, stage.stageWidth / 2,1, true); tween = nieuwe Tween (txt, "y", Elastic.easeOut, txt.y, txt.y + 85,1, true); e.target.visible = false; // Verberg de informatieknop showColorPicker (true); // Toon de kleurkiezers
Wanneer u op een lettertypenaam klikt in het lijstonderdeel, wijzigt TextInput het lettertype automatisch in het geselecteerde lettertype.
private function onChange (e: Event): void fmt.font = new String (e.target.selectedItem.data); txt.setTextFormat (fmt);
Als u zeker weet welk lettertype u wilt gebruiken, dubbelklikt u erop of gebruikt u de knop Sluiten. Hierdoor wordt het menu voor het kiezen van het lettertype verborgen en wordt de positie van de TextInput teruggezet.
private function choosed (e: ListEvent): void infoButton.visible = true; tween = nieuwe Tween (fontsMenu, "x", Elastic.easeOut, stage.stageWidth / 2, stage.stageWidth + fontsMenu.width, 2, true); tween = nieuwe Tween (txt, "y", Elastic.easeOut, txt.y, txt.y - 85,1, true); showColorPicker (false); / * Annuleer functie * / persoonlijke functie annuleer (e: MouseEvent): void infoButton.visible = true; tween = nieuwe Tween (fontsMenu, "x", Elastic.easeOut, stage.stageWidth / 2, stage.stageWidth + fontsMenu.width, 2, true); tween = nieuwe Tween (txt, "y", Elastic.easeOut, txt.y, txt.y - 85,1, true); showColorPicker (false);
Deze functies behandelen de kleurkiezers voor de achtergrond en de tekst.
persoonlijke functie changeFontColor (e: ColorPickerEvent): void fmt.color = "0x" + fontColorPicker.hexValue; txt.setTextFormat (fmt); private functie changeBgColor (e: ColorPickerEvent): void var colorTransform: ColorTransform = new ColorTransform (); colorTransform.color = int ("0x" + bgColorPicker.hexValue); bg.transform.colorTransform = colorTransform; Maak een functie om alle luisteraars tegelijkertijd toe te voegen. Deze functie is in de constructor aangeroepen.
private function 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, cancel);
Ga terug naar het Fla-document, open het eigenschappenvenster en typ in het tekstvak "class" "Main" om dit te koppelen als de documentklasse.
Test de film en zie hoe uw Font Picker-toepassing wordt uitgevoerd!
Dit is een zeer nuttige app voor het testen van lettertypen, met behulp van deze tut kun je je eigen app maken om aan je specifieke behoeften te voldoen.
Bedankt voor het lezen en vergeet niet om uw lettertypebibliotheek schoon te maken!
