Урока е разделен на няколко части.
1. Подготовка
2. Създаване на първи фрейм (frame)
3. Създаване на втори фрейм(frame)
4. Създаване на Behavior
5. Експорт на бутона
Можете да видите резултата от тази връзка
Подготовка
Преди да започнем с Fireworks трябва да направите една нова папка, където ще сложим готовите файлове в края на урока.
Аз направих папка с име buttons.
Отворете Fireworks и направете нов документ от File>New с настройките показани долу на картинката.
До тук трябва да имате това.
Файла е готов следва да направим 1-вия фрейм :)
Създаване на първи фрейм (frame)
Нашия бутон ще има две състояния.Първото състояние, което ще направим е когато няма мишка върху бутона.
Ще направим един обикновен правоъгълник с някакъв текст в него това ще е нормалното състояние на бутона.
Вземете Rectangle Tool и направете правоъгълник с него.Rectangle Tool се намира отляво на програмата при векторните инструменти.Иконата на инструмента е тази:
Вземете Pointer Tool и отидете в properties панела и направете тези настройки:
Широчина (W) - 200px
Височина (H) - 50px
Позиция от ляво (X) - 50
Позиция от горе (Y) - 24
Цвят - червен (#FF0000)
Следва да напишем нещо на бутона. Вземeте Text Tool (иконата му е със буквата А) кликнете върху шаблона, където направихме правоъгълника и напишете нещо например "Начало".Отидете в Properties и направете тези настройки, които са показани на картинката:
Създаване на втори фрейм(frame)
Направихме първото състояние на бутона сега следва второто, когато върху бутона има мишка.Има много ефекти, които могат да се приложат върху този бутон за да стане той красив и уникален,но ние ще използваме най лесния начин, като сменим цвета на бутона. Трябва ни нов фрейм за да направи бутона с нов цвят.Отворете панела frames and history (обикновено той стои от дясната страна на пограмата).От бутона за опции, който е показан на картинката изберете Duplicate Frame.
Сега трябва да имате два фрейма в панела, както е показано долу.
Сега ще сменим цвета на правоъгълника от втория фрейм (вижте дали е избран фрейм 2 в панела с фреймове и продължете с урока).
Изберете червения правоъгълник и сменете цвета му със зелен (#00FF00)
Създаване на Behavior
За да направим малка прожекция с Fireworks трябва да имаме slices behaviors.Slice това са отделните части на документа, които могат да се разглеждат, като отделен обект, който внася някаква информация.Behavior е действието, което се прави от специален Behaviors панел.Ние ще използваме тези две функции за нашия бутон.
Сега както сме си на правоъгълника, който направихме зелен отидете в Edit>Insert>Rectangular Slice.Това трябва да сложи slice, както е показано на картинката.
Изберете slice, който направихте и отидете във Window>Behaviors трябва да ви се отвори Behaviors панел. Кликнете върху + и изберете Simple Rollover, както е показано:
Сега може да проверите дали сте направили всичко до тук, както трябва.Натиснете Preview отгоре на платното за работа и трябва да ви се появи червен бутон.Като минете над него с курсора на мишката той ще смени цвета си с зелен, както го бяхме направили.
За да направите бутона връзка (link), която да ви води към някаква страница изберете slice отидете на Properties панела и там където пише link се задава страницата към, която ще води бутона.
Експорт на бутона
Бутона във Fireworks вече е готов, но за да го сложите във HTML код ще е нужна още малко работа. Следващата стъпка е важна!
Трябва да отворите Optimize панела (ако не го виждате в пограмата
отидете в менюто Window>Optimize) след това използвайте падащото меню
за да изберете GIF, като формат.Под GIF има Animated GIF това не е
същото на нас ни трябва първото!
Последната стъпка е File/Export, където ще ви се отвори прозорец, който ви пита къде да запазите бутона.Отидете в папката buttons, която направихме в началото и там запазете вашия бутон с някакво име.
Можете също да запазите файла във PNG формат за да можете да променяте бутона по късно.За да направите това отидете във File>Save и избирате PNG формата.Можете да проверите бутона си в папката Buttons.Отворете HTML файла за да видите как ще изглежда в Интернет.
Можете да направите по хубав бутон за целта сложете повече ефекти във 1-вия и 2-ия фрейм.Експериментирайте за да направите нещо хубаво. Това е края на урока надявам се да сте научили нещо от него.
Източник: www.oman3d.com