Rollover ефект на бутон с Fireworks 8

SolidSoul трудност:

видян: 2625

Урока е разделен на няколко части.

1. Подготовка
2. Създаване на първи фрейм (frame)
3. Създаване на втори фрейм(frame)
4. Създаване на Behavior
5. Експорт на бутона

Можете да видите резултата от тази връзка

Подготовка

Преди да започнем с Fireworks трябва да направите една нова папка, където ще сложим готовите файлове в края на урока.
Аз направих папка с име buttons.

Отворете Fireworks и направете нов документ от File>New с настройките показани долу на картинката.

Нов документ

До тук трябва да имате това.

Новия документ

Файла е готов следва да направим 1-вия фрейм :)

Създаване на първи фрейм (frame)

Нашия бутон ще има две състояния.Първото състояние, което ще направим е когато няма мишка върху бутона.
Ще направим един обикновен правоъгълник с някакъв текст в него това ще е нормалното състояние на бутона.

Вземете Rectangle Tool и направете правоъгълник с него.Rectangle Tool се намира отляво на програмата при векторните инструменти.Иконата на инструмента е тази:

Rectangle Tool

Вземете Pointer Tool и отидете в properties панела и направете тези настройки:

Широчина (W) - 200px
Височина (H) - 50px
Позиция от ляво (X) - 50
Позиция от горе (Y) - 24
Цвят - червен (#FF0000)

Настройки в Properties панела

Следва да напишем нещо на бутона. Вземeте Text Tool (иконата му е със буквата А) кликнете върху шаблона, където направихме правоъгълника и напишете нещо например "Начало".Отидете в Properties и направете тези настройки, които са показани на картинката:

Настройки на Text Tool

Създаване на втори фрейм(frame)

Направихме първото състояние на бутона сега следва второто, когато върху бутона има мишка.Има много ефекти, които могат да се приложат върху този бутон за да стане той красив и уникален,но ние ще използваме най лесния начин, като сменим цвета на бутона. Трябва ни нов фрейм за да направи бутона с нов цвят.Отворете панела frames and history (обикновено той стои от дясната страна на пограмата).От бутона за опции, който е показан на картинката изберете Duplicate Frame.

Duplicate Frame

Сега трябва да имате два фрейма в панела, както е показано долу.

Сега ще сменим цвета на правоъгълника от втория фрейм (вижте дали е избран фрейм 2 в панела с фреймове и продължете с урока).
Изберете червения правоъгълник и сменете цвета му със зелен (#00FF00)

Създаване на Behavior

За да направим малка прожекция с Fireworks трябва да имаме slices behaviors.Slice това са отделните части на документа, които могат да се разглеждат, като отделен обект, който внася някаква информация.Behavior е действието, което се прави от специален Behaviors панел.Ние ще използваме тези две функции за нашия бутон.

Сега както сме си на правоъгълника, който направихме зелен отидете в Edit>Insert>Rectangular Slice.Това трябва да сложи slice, както е показано на картинката.

Slice

Изберете slice, който направихте и отидете във Window>Behaviors трябва да ви се отвори Behaviors панел. Кликнете върху + и изберете Simple Rollover, както е показано:

Simple Rollover

Сега може да проверите дали сте направили всичко до тук, както трябва.Натиснете Preview отгоре на платното за работа и трябва да ви се появи червен бутон.Като минете над него с курсора на мишката той ще смени цвета си с зелен, както го бяхме направили.

За да направите бутона връзка (link), която да ви води към някаква страница изберете slice отидете на Properties панела и там където пише link се задава страницата към, която ще води бутона.

Експорт на бутона

Бутона във Fireworks вече е готов, но за да го сложите във HTML код ще е нужна още малко работа. Следващата стъпка е важна!
Трябва да отворите Optimize панела (ако не го виждате в пограмата отидете в менюто Window>Optimize) след това използвайте падащото меню за да изберете GIF, като формат.Под GIF има Animated GIF това не е същото на нас ни трябва първото!

Меню Optimize

Последната стъпка е File/Export, където ще ви се отвори прозорец, който ви пита къде да запазите бутона.Отидете в папката buttons, която направихме в началото и там запазете вашия бутон с някакво име.

Export

Можете също да запазите файла във PNG формат за да можете да променяте бутона по късно.За да направите това отидете във File>Save и избирате PNG формата.Можете да проверите бутона си в папката Buttons.Отворете HTML файла за да видите как ще изглежда в Интернет.

Можете да направите по хубав бутон за целта сложете повече ефекти във 1-вия и 2-ия фрейм.Експериментирайте за да направите нещо хубаво. Това е края на урока надявам се да сте научили нещо от него.

Източник: www.oman3d.com

Сподели |

Rollover ефект на бутон с Fireworks 8

Регистрирайте се, за да добавите коментар