Flash. Урок 1 - Кнопочки

2007-03-03, Автор - Noct2; Продукт - 1 -; [8814]
Для начала необходимо запустить Macromedia Flash и создать новый флеш документ [File -> New -> Flash Document]

Настраиваем наш документ. Это можно сделать непосредственно в окне программы, если активирована необходимая панелька (по умолчанию она есть), или же через меню [Modify -> Document]. Далее видим такое окошко.



Устанавливаем частоту кадров [Frame rate] на 25 кадров в секунду[FPS - frame per second]. Устанавливать такую частоту кадров необходимо для плавности анимации, если делаете простой баннер можно остановиться на выборе в 12-15 fps, если ролик - 25-30, но делать частоту кадров более тридцати Герц не имеет смысла т.к. это не даст "более плавной" анимации, а лишь нагрузит процессор. Даю справку для тех , кто не в ладах с физикой: человеческий глаз инерциален, что позволяет нам смотря на лампочку, мигающую с частотой уже в 20 Герц, видеть ее как просто горящую. Так же и здесь, быстрая смена кадров кажется нам плавным движением.

Устанавливаем ширину нашего документа на 200px, высоту - на 300px.

Начальная настройка закончена.

Далее нам необходимо где-нибудь раздобыть кнопки. Ну, это дело уже Вашей фантазии: можно нарисовать в Photoshop'е, можно "одолжить" у других программ. Я воспользовался программой Crystal Button, официальный сайт http://www.CrystalButton.com, в сети можно найти русификатор, по совместительству являющийся ломалкой.

Каждая кнопка имеет четыре состояния: обычная, при наведении указателя мыши, нажатая и посещенная, если речь идет об интернет ссылки. В последней я не вижу необходимости, так что использовать я ее не буду.

Теперь все кнопки необходимо переместить во внутреннюю библиотеку будущей флешки [File -> Import -> Import to Library]. Находим наши заготовленные кнопки, выделяем их и переносим в библиотеку. Результат своей работы можно видеть на боковой панели.Если таковая отсутствует, то ее необходимо активировать [Window -> Library] или комбинацией клавиш Ctrl+L.



Далее необходимо настроить изображения наших кнопок. Дважды щелкаем на первом изображении кнопки в окне библиотеке или щелкаем правой и выбираем в выпавшем меню Properties.

Видим следующее окошко. Метку Allow smoothing (размытие) убираем, если она присутствует. Выбираем тип компрессии Lossles(PNG/Gif), нажав на кнопку Test можно увидеть результат сжатия, а в зоне предпросмотра - результат. Проделываем эту операцию над всеми изображениями кнопок.




Далее, для наведения порядка, все изображения кнопок можно сложить в одну папку. Количество папок и их имена не имеет значения т.к. при публикации этого всего в конечном ролике не будет.

Затем необходимо перевести все изображения в графические символы (Graphic Symbol). Символ(Symbol) - это основная единица проектирования в среде Macromedia Flash. Символом может быть, как простейшая геометрия или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций во Flash.
Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):
- Изображение (graphic), представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).
- Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:
• Up - обычное состояние кнопки.
• Over - когда курсор мышки находится над кнопкой.
• Down - когда курсор находится над кнопкой и нажата клавиша мыши.
• Hit - обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.
- Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript .

По идее можно напрямую использовать и изображения, но это может вызвать неудобства при работе.

Итак, сделать символы можно двумя способами;
1) Через основное меню добавляем новый символ [Insert -> New Symbol] (комбинация клавиш Ctrl+F8). В появившемся окошке вводим имя символа и выбираем тип, в нашем случае Graphic, дополнительные опции не трогаем - не нужны. В библиотеке появляется новый элемент, щелкаем по нему дважды и переходим к окно редактирования символа (ничем не отличается от окна редактирования главного клипа). Переносим в символ первое изображение и центрируем его по осям x и y равными (0,0). Проделываем эту операцию со всеми изображениями, полученные результаты кидаем в новую папку.

2) Переносим первое изображение на главный клип. Щелкаете правой кнопкой по изображению, в выпавшем меню выбираете Convert to Symbol. Видим до боли знакомое окно, дальнейшие операции описаны в пункте 1.

Естественно для кнопок необходимо сделать надписи. Останавливаться подробно на этом не стану (если Вы на столько одарены, что не знаете, как это делать, то смотрите урок 0). Вкратце: создаете новый графический символ; выбираете инструмент Text Tool(горячая клавиша T); размечаете текст; впечатываете текст; настраиваете дополнительные опции (если Вам посчастливилось заиметь Flash 8, то можете выбрать эффекты и тип сглаживания); вот и все, символ с текстом готов.

Далее создаем новый символ, даем ему имя "Button1" (или другое), ставим тип Button. Переходим в окно настройки символа и на временной линии видим четыре кадра, если вы относитесь к одаренным личностям, то Вы догадались, что это те самые четыре состояния кнопки (одно из них, последнее, мы не используем). "Что же дальше делать?» - спросите Вы. Да все просто! Перетаскиваете в каждый кадр (если отсутствуют, сами создайте ключевые кадры клавишей F6) необходимый символ кнопки и текст. Главное, не забывайте центрировать все символы относительно какой-либо точки, иначе Ваша кнопка будет "прыгать". Проще всего это сделать во вкладке Properties, там вручную вбить необходимые позиции по осям x и y.







Далее работаете в зависимости развития вашего творческого потенциала. Если он низкий, можете ограничиться парой бледных кнопок с тупыми надписями ("Ацкий сайт" или "ВООООО!!!"). Если Вы ушли в развитии дальше динозавров, то можете комбинировать различные цвета кнопок и надписей, прикольно выглядят кнопки креном при наведении и т.д.

Вот у Вас в библиотеке есть уже парочка прикольных кнопок (или больше), но, как блин они работают? Спокойно! Для начала перейдите к главной сцене клипа. Перетащите туда необходимую кнопку и настройте ее местоположение. Уже можно опубликовать этот клип и посмотреть на свое безобразие. Если оно работает, примите мои поздравления, Вам вручается медаль "Почетный динозавр флеша"; если нет, ударьтесь парой раз головой об стену, но не сильно, уважайте труд строителей. Теперь нашей кнопке необходимо прописать действие. Все действия в среде пишутся на языке Ation Script; переходите на панельку Action, после в главном окне клипа выбираете кнопку, в результате этого заголовок панельки изменится на Action – Button. Далее в области редактирования скрипта вводите:

on (release) {
getURL("//megaobzor.com", target="_blank");
}


Описание отдельных функций читайте в "Flash MX 2004 ActionScript Language Reference на русском".




Ну, вот и все, кнопка готова, можете опубликовать клип [File -> Publish] или Shift + F12.

Изображения кнопок
Исходник для FlashMX
Исходник для Flash8
Обсудить урок по созданию флеш кнопок

Комментарии:
Обзор Digma S-20. Лучшая беспроводная ко...
Обзор Digma S-20. Лучшая беспроводная коТестируемая сегодня беспроводная колонка Digma S-20 занимает младшую позицию в модельной линейки акустики...
Обзор MARVO K328. Бюджетная игровая клав...
Обзор MARVO K328. Бюджетная игровая клавУ вас нет возможности приобрести флагманские игровые решения? Кажется пришло время обратить внимание на п...
Смартфон Vivo Nex получит безрамочный ди...
Смартфон Vivo Nex получит безрамочный диКомпания Vivo готовит очередной безрамочный флагман под названием Nex на Snapdragon 845. Аппарат Vivo Nex...
Предварительный обзор Xiaomi Funsnap iDo...
Предварительный обзор Xiaomi Funsnap iDoНужно понимать, что сейчас индустрия квадрокоптеров очень развита. Если еще пару лет назад такие устройст...
Бюджетный смартфон Meizu M6T засветился ...
Бюджетный смартфон Meizu M6T засветился Китайские источники опубликовали живые фото смартфона Meizu M6T, который еще не был представлен официальн...
Европейские LG G6 начали обновлять до An...
Европейские LG G6 начали обновлять до AnЕвропейские пользователи смартфона LG G6 начали получать обновления прошивки со свежей версией операционн...
Поделиться в социальных сетях:


Предварительный обзор ELEPHONE A4. Сочна...
Предварительный обзор ELEPHONE A4. СочнаСовременный рынок смартфонов сильно изменился — теперь пользователи не готовы отдавать по тысяче долларов...
Candy Group провела встречу с CEO Беппе ...
Candy Group провела встречу с CEO Беппе 23 мая в Москве состоялась пресс-конференция компании Candy Group. Главным спикером стал внук основателя...
Предварительный обзор Panasonic Lumix DM...
Предварительный обзор Panasonic Lumix DMНесмотря н всю популярность зеркальных фотоаппаратов, у них есть громадное количество недостатков. Наприм...
Обзор Pocket Troops. Условный шутер...
Обзор Pocket Troops. Условный шутерСтоит понимать, что абсолютно любой современный шутер для смартфона имеет свои яркие недостатки. У каких-...
Huawei MediaPad M5 официально представле...
Huawei MediaPad M5 официально представле22 мая в Москве состоялась прзеентация Huawei, на которой показали планшеты премиум сегмента Huawei Media...
Предварительный обзор Vivo X21i. Шикарна...
Предварительный обзор Vivo X21i. ШикарнаВ последнее время производители мобильных телефонов перестали делать уникальные модели, но это сыграло ли...
Обзор Dragon Storm. Простая и классная и...
Обзор Dragon Storm. Простая и классная иВ последнее время мне стали нравиться мобильные игры, в которых можно с удовольствием проводить время и п...
Корпуса нового поколения Thermaltake LEV...
Корпуса нового поколения Thermaltake LEVВ Москве 18 мая прошла презентация компании Thermaltake, которая занимается изготовлением компьютерных ко...
Предварительный обзор HP Curved AiO 34. ...
Предварительный обзор HP Curved AiO 34. В последнее время пользователи стали все больше внимания обращать на моноблоки, так как это решение наибо...
Обзор PirateCode. Война в море...
Обзор PirateCode. Война в мореВ последнее время пользователи стали больше играть в соревновательные игры, а разработчики мобильных прое...
Sony представила новую линейку телевизор...
Sony представила новую линейку телевизор17 мая в Москве состоялась презентация Sony, на которой показали новые телевизоры BRAVIA. В линейку вошли...
Предварительный обзор Xiaomi Mi TV 4S. Т...
Предварительный обзор Xiaomi Mi TV 4S. ТВ последнее время телевизоры стали заметно умнее, но производители все еще пытаются продавать их по грома...

МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor