Преглед на урок
Приложение за избиране на шрифт
29 Декември 2014, 18:15 | 9722 преглеждания | 1 коментар
Категория: Програмиране » ActionScript
Оценка:
(1 гласувал)
2 добавяния към любими
Ще направим интерфейс, с който ще можете да избирате шрифтове инсталирани на компютара ви, използвайки 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
Здравей
как мога да се свържа с теб
Добави коментар
Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.
