Share
Lorsque vous travaillez avec une typographie, comme pour la conception de logos, il est crucial de choisir la bonne police. Le processus de sélection peut être un peu lent si vous testez chaque police dans une application de conception. Ce didacticiel vous aidera à créer votre propre application de test de polices à l'aide de Flash et ActionScript 3.0..
Nous allons créer une interface à l'aide de Composants et des outils Flash. Vous pourrez choisir n'importe quelle police installée sur votre système à l'aide du composant Liste et modifier la couleur de l'arrière-plan ou de la police à l'aide du composant Sélecteur de couleurs. L'interface comporte également des tweens gérés par la classe Tween intégrée, mais vous pouvez utiliser ce que vous préférez, comme TweenLite..
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène à vos dimensions souhaitées. J'ai utilisé 600 x 300px.
Sélectionnez l'outil Rectangle et dessinez 2 rectangles, les tailles sont 600 x 40px et 600 x 20px et la couleur est # 202020. Aligner le premier en haut au centre et l’autre en bas au centre.
Créez un autre rectangle à utiliser comme couleur d'arrière-plan, vous pourrez modifier cette couleur à l'aide du composant Sélecteur de couleurs au moment de l'exécution. Ceci est 600 x 240px et la couleur est #EFEFEF.
Convertissez-le en MovieClip et définissez son nom d'occurrence sur "bg".
L'élément suivant contiendra le ou les mots que l'utilisateur pourra modifier.
Créez un InputText de 580 x 80px, choisissez une taille et une police commune à afficher par défaut, comme Arial 50px. Nommez le "txt" TextField et centrez-le sur la scène.
Pour changer la couleur de l'arrière-plan et du InputText, nous allons utiliser le composant Color Picker. Ouvrez le panneau Composants (Fenêtre> Composants) et faites glisser un composant ColorPicker sur la scène. Dupliquez-le (Cmd + D) et positionnez-les. Ajoutez du texte pour indiquer lequel est celui de l’arrière-plan et celui de la police..
Pour afficher les polices installées, nous utiliserons un composant de liste. Ce composant obtiendra ses données d'un tableau que nous créerons plus tard.
Nous allons afficher le composant Liste dans un panneau en utilisant un Tween, commençons donc par faire en sorte que ce panneau.
Créez un rectangle de 300 x 150 pixels et remplissez-le avec #DFDFDF. Faites glisser un composant de la liste à partir du panneau des composants, redimensionnez-le à 280 x 120 pixels et centrez-le..
Nous aurons également besoin d’un bouton pour masquer cette fenêtre. Commencez donc par sélectionner l’outil ovale et en traçant un cercle de 20 x 20 pixels. Remplissez-le en blanc et allez dans Edition> Dupliquer. Redimensionnez la seconde en 16 x 16 pixels et utilisez un remplissage noir. Ensuite, dessinez un petit "x" au centre pour dire à l'utilisateur qu'il va fermer le panneau..
Nommez le bouton "closeBtn", le composant "fontsList", convertissez le tout en MovieClip, nommez-le "fontsMenu" et positionnez le panneau à x: -160, y: 115..
Nous allons utiliser un bouton sur la scène pour afficher le menu.
Créez un bouton, nommez-le "infobutton" et placez-le en bas à droite de la scène..
Dans cette application, nous allons utiliser une seule classe qui s'occupera de tous les éléments de la scène, des animations et des couleurs..
Créez un nouveau fichier ActionScript et enregistrez-le sous le nom Main.as dans votre dossier de classes..
Créez un nouveau fichier ActionScript et importez les classes nécessaires:
package import flash.display.Sprite; import flash.text.TextFormat; import fl.transitions.Tween; import fl.transitions.easing.Elastic; import flash.text.Font; importer 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 étend Sprite
Bien que nous utilisions MovieClips, nous étendons la classe à l'aide de Sprite car les MovieClips sur scène n'utilisent pas de scénario; donc ils sont traités comme des sprites.
private var systemFonts: Array = new Array (); // stockera toutes les polices système private var fontNames: Array = new Array (); // stockera toutes les polices système sous la forme de Strings private var fmt: TextFormat = new TextFormat (); // Format de texte de la variable privée TextInput tw tween: Tween; // objet Tween
Ce sont toutes les variables que nous allons utiliser.
fonction publique Main () showColorPicker (false); loadFonts (); addListeners ();
C'est la fonction constructeur, elle appelle les fonctions de départ.
fonction privée showColorPicker (val: Boolean): void bgColorText.visible = val; fontColorText.visible = val; bgColorPicker.visible = val; fontColorPicker.visible = val;
Avec cette fonction, il suffit de spécifier un paramètre pour afficher ou masquer le texte et les composants du sélecteur de couleur..
Accentsconagua
fonction privée loadFonts (): void systemFonts = Font.enumerateFonts (true); // Retourne un tableau des polices installées systemFonts.sortOn ("fontName"); // Trie la police par nom / * Convertit les objets de polices en chaînes * / pour (var i: int = 0; i < systemFonts.length; i++) fontNames.push(systemFonts[i].fontName); /* Set List data */ fontsMenu.fontsList.dataProvider = new DataProvider(fontNames); À la fin de cette fonction, un composant de liste contenant toutes les polices installées sera rempli.!
Rappelez-vous le bouton d'information? C'est le bouton que nous avons créé pour afficher le menu des polices, ce code prendra soin de cela.
fonction privée showFonts (e: MouseEvent): void / * Animer le panneau des polices et le textInput * / tween = new Tween (fontsMenu, "x", Elastic.easeOut, - fontsMenu.width, stage.stageWidth / 2,1, vrai); tween = new Tween (txt, "y", Elastic.easeOut, txt.y, txt.y + 85,1, true); e.target.visible = false; // Masquer le bouton d'information showColorPicker (true); // Afficher les sélecteurs de couleurs
Lorsque vous cliquez sur un nom de police dans le composant List, TextInput changera automatiquement la police à celle sélectionnée..
fonction privée onChange (e: Event): void fmt.font = new String (e.target.selectedItem.data); txt.setTextFormat (fmt);
Lorsque vous êtes sûr de la police que vous souhaitez utiliser, vous pouvez double-cliquer dessus ou utiliser le bouton de fermeture. Ceci cachera le menu de choix de la police et réduira la position du TextInput..
fonction privée choisie (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, vrai); showColorPicker (false); / * Cancel function * / private function cancel (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, vrai); showColorPicker (false);
Ces fonctions géreront les sélecteurs de couleurs pour l’arrière-plan et le texte..
fonction privée changeFontColor (e: ColorPickerEvent): void fmt.color = "0x" + fontColorPicker.hexValue; txt.setTextFormat (fmt); fonction privée changeBgColor (e: ColorPickerEvent): void var colorTransform: ColorTransform = new ColorTransform (); colorTransform.color = int ("0x" + bgColorPicker.hexValue); bg.transform.colorTransform = colorTransform; Créez une fonction pour ajouter tous les écouteurs en même temps. Cette fonction a été appelée dans le constructeur.
fonction privée addListeners (): void infoButton.addEventListener (MouseEvent.MOUSE_UP, showFonts); fontsMenu.fontsList.addEventListener (Event.CHANGE, onChange); fontsMenu.fontsList.addEventListener (ListEvent.ITEM_DOUBLE_CLICK, choisi); fontColorPicker.addEventListener (ColorPickerEvent.CHANGE, changeFontColor); bgColorPicker.addEventListener (ColorPickerEvent.CHANGE, changeBgColor); fontsMenu.closeBtn.addEventListener (MouseEvent.MOUSE_UP, cancel);
Retournez au document Fla, ouvrez le panneau de propriétés et dans le champ de texte "class", écrivez "Main" pour le lier en tant que Document Class..
Testez le film et voyez votre application s'exécuter.!
Ceci est une application très utile pour tester les polices. En utilisant ce tutoriel, vous pouvez créer votre propre application pour répondre à vos besoins spécifiques..
Merci de votre lecture et n'oubliez pas de nettoyer votre bibliothèque de polices!
