Направете своята безплатна регистрация и се възползвайте от пълните възможности, които предлага iTSchool

Преглед на урок

Приложение за избиране на шрифт

Приложение за избиране на шрифт




Ще направим интерфейс, с който ще можете да избирате шрифтове инсталирани на компютара ви, използвайки List компонента и да променяте Background и Foreground цвета използвайки Color Picker компонента.

Демо

1. Пуснете Flash и направете нов Flash File (ActionScript 3). Сложете размерите на Stage-а на желаните от вас размери, авторът е използвал 600 x 300 пиксела.



2. Вземете Rectangle Tool и направете два правоъгълника с размери 600 x 40px и 600 x 20px и цвят #202020. Първия го подравнете най-горе-посредата, а втория най-долу-посредата.

Натиснете върху изображението за цял размер


Направете друг правоъгълник с размери 600 x 240 пиксела, той ще ни служи за Background цвета, и ще можете да променяте цвета когато свършем. Авторът е използвал #EFEFEF.

Натиснете върху изображението за цял размер


Превърнете го в Movie Clip (F8), и сложете Instance name н bg.

3. Следващото нещо което ще направим е текста, на който ще можете да променяти шрифта.

Създайте InputText с размери 580 x 80px, изберете шрифт и размер на шрифта, коите ще се виждат първоначлно, авторът е използвал Arial 50px. Именувайте TextField "txt" и го центрирайте посредата на Stage-а.

Натиснете върху изображението за цял размер


4. За промяна на цвета на Background и на InputText ще използваме Color Picker компонента. Отворете Components Панела (Window > Components) и завлачете ColorPicker компонента на Stage-а. Дублирайте го (Ctrl+D) и ги наместете. Сложете малко текст за да показва кой е за Background и кой за шрифта.

Натиснете върху изображението за цял размер


5. За показване на инсталираните шрифтове ще използваме List компонент. Компонента ще взима енформацията си от масив, който ще направим по-късно.

List компонента ще се показва в панел, използвайки Tween.

Направете првоъгълник с размери 300 x 150 пиксела и цвят #DFDFDF. Завлачете List компонент на Stage-а и го орзмерете на 280 x 120 пиксела и го центрирайте.



Нуждаем се и от бутон, който да скрива прозорчето. Вземете Oval Tool и направете кръг с размери 20 x 20 пиксела. Запълнете го с бяло и отидете на Edit > Duplicate. Смалете го на 16 x 16 и го запълнете с черно. След това нарисувайте малко "X" в средата на кръгчето, за да се знае, че е за затварянето на прозочето.



Именувайте бутона "closeBtn", компонента "fontList", превърнете целия прозорец в Movie Clip, именувайте го "fontsMenu" и го позиционирайте на x: -160, y: 115.

Натиснете върху изображението за цял размер


6. Ще използваме бетон на Stage-а за показване на менюто.

Направете бутон и го именувайте "infobutton", поставете го в долния десен ъгъл на Stage-а.

Натиснете върху изображението за цял размер


7. В това приложение ще използваме един class, който ще се гриже за всички елементи върху Stage, анимации и цвят.

Създайте нов ActionScript файл и го запишете като Main.as в папката ви с класове.

8. Направете нов ActionScript файл и внесете нужните класове:

Код
 package   
 {  
       
     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;  

9.
Код
 public class Main extends Sprite  
 {  

Макар че използваме MovieClips разширяваме класа със Sprite, понеже MovieClip-ете не използват Timeline, поради това те са третирани като Sprites.

10.
Код
 private var systemFonts:Array = new Array(); //Ще складира системните шрифтове  
 private var fontNames:Array = new Array(); //Ще складира системните шрифтове  като Низове  
 private var fmt:TextFormat = new TextFormat(); //Textformat на TextInput  
 private var tween:Tween; //Tween обект 

Това са всички променливи, които ще използваме.

11.
Код
 public function Main()  
 {  
     showColorPicker(false);  
     loadFonts();  
     addListeners();  
 } 

Това е функция конструктор, тя вика стартиращата функция.

12.
Код
 private function showColorPicker(val:Boolean):void  
 {  
     bgColorText.visible = val;  
     fontColorText.visible = val;  
     bgColorPicker.visible = val;  
     fontColorPicker.visible = val;  
 } 

С тази функция сме нужни само да посочем един параметър да показва или скрива текста и компонентите на Color Picker.

13.
Код
 private function loadFonts():void  
 {  
     systemFonts = Font.enumerateFonts(true); //Връща масив за инсталираните шрифтове 
     systemFonts.sortOn("fontName"); //Сортира шрифтовете по име  
   
     /* Превръща шрифтовите обекти в Низове */  
   
     for (var i:int = 0; i < systemFonts.length; i++)  
     {  
         fontNames.push(systemFonts[i].fontName);  
     }  
       
     /* Поставя List данни */  
   
     fontsMenu.fontsList.dataProvider = new DataProvider(fontNames);  
 }  

След тази функция ще имаме List компонент запълнен с инсталирани шрифтове.

14. Помните ли инфо бутона. Това е бутона, който направихме да показва менюто с шрифтове, този код ще се погрижи за това.

Код
 private function showFonts(e:MouseEvent):void  
 {  
     /* Animate the fonts panel and the 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; //Hide the info button  
               
     showColorPicker(true); //Show the color pickers  
 }  

15. Когате кликнете на име на шрифт в List компонента TextInput автоматично ще промени шрифта на избрания.

Код
 private function onChange(e:Event):void  
 {  
     fmt.font = new String(e.target.selectedItem.data);  
     txt.setTextFormat(fmt);  
 } 

16. Когато сте сигурни кой шрифт ще иползвате го кликнете двойно или да натиснете бутона за затваряне. Това ще скрие менюто за шрифтове и ще върне TextInput на старото му място.

Код
 private function 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);  
 }  
   
 /* Отменя фенкцията */  
   
 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,true);  
   
     showColorPicker(false);  
 }  

17.Тази функция ще се оправя с color picker-те на background и текста.

Код
 private function changeFontColor(e:ColorPickerEvent):void  
 {  
     fmt.color = "0x" + fontColorPicker.hexValue;  
     txt.setTextFormat(fmt);  
 }  
   
 private function changeBgColor(e:ColorPickerEvent):void  
 {  
     var colorTransform:ColorTransform = new ColorTransform();  
     colorTransform.color = int("0x" + bgColorPicker.hexValue);  
     bg.transform.colorTransform = colorTransform;  
 }  

18. Създайте функция, която да добавя всички listeners едновременно. Тази функция се извиква от конструктура.

Код
 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);  
 } 


19.Върнете се на .fla документа, отворете Properties панела и в полето "class" напишете "Main".

Тествайте, и вижте как действа вашето приложение за избиране на шрифтове.

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: nikolai_t_93
Източник: http://active.tutsplus.com/

Коментари

radoslavmilev

Здравей
как мога да се свържа с теб

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.