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

2007-03-03, Автор - Noct2; Продукт - 1 -; [8935]
Для начала необходимо запустить 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
Обсудить урок по созданию флеш кнопок

Комментарии:
Предварительный обзор Vertu Aster P. Меч...
Предварительный обзор Vertu Aster P. МечНекоторое время назад в сети появилась информация о том, что компания Vertu планирует вернуться на рынок ...
Мощный смартфон Mate 20 Pro...
Мощный смартфон Mate 20 ProМодель Mate 20 Pro оснащена более мощными блоками: на 40 МП, 20 МП и 8 МП. Фронтальная камера имеет парам...
Флагманский смартфон Mate 20 ...
Флагманский смартфон Mate 20 Компания Huawei выпустила мощный смартфон по своим функциям. Девайс Mate 20 изготовлен в цветах «полун...
Новый полноэкранный смартфон itel A45...
Новый полноэкранный смартфон itel A45Смартфон имеет 1 Гб оперативной памяти и 8 Гб встроенной постоянной памяти с возможностью расширения поср...
Прочный смартфон от компании Oukitel U2...
Прочный смартфон от компании Oukitel  U2Компания Oukitel выпустила в этом году смартфон с привлекательными характеристиками. Тыльная сторона смар...
Защищенный смартфон Mann 8S...
Защищенный смартфон Mann 8SНовинка отличается наличием мощной батареи, чья емкость равна 6000 мАч. По заверениям производителя, одно...
Новинка от компании Lenovo смартфон K9...
 Новинка от компании Lenovo смартфон K9Телефон получил батарею, емкость которой составляет 3000 мАч. Кроме того, смартфон оснащен симметричным U...
Xiaomi Mi 8C и его функции...
Xiaomi Mi 8C и его функцииКомпания Xiaomi выпустила смартфон с отличной камерой.В основе электронной схемы устройства лежит мобиль...
Поделиться в социальных сетях:


Предварительный обзор Creative Sound Bla...
Предварительный обзор Creative Sound BlaДлительное время разработчики игровой периферии активно избегали консоли. Рынок был не очень развит, да и...
Обзор Bouncemaster. Шикарная игра...
Обзор Bouncemaster. Шикарная играНа  современном рынке казуальных игр есть большая проблема с отсутствием новых ярких идей. Большая часть ...
Предварительный обзор Thermaltake View 3...
Предварительный обзор Thermaltake View 3Компьютерные корпусы давно перестали быть чем-то обычным. Сейчас пользователи покупают настоящие произвед...
Предварительный обзор SteelSeries Rival ...
Предварительный обзор SteelSeries Rival Рынок игровой периферии давно перестал быть чем-то простеньким и недорогим. Геймеры хотят получить от пер...
Honor представила премиальный смартфон H...
Honor представила премиальный смартфон H10 октября в Москве прошла презентация смартфона Honor 8X. Модель позиционирует себя, как премиальный сма...
Предварительный обзор Alienware m15. Шик...
Предварительный обзор Alienware m15. ШикВ последнее время игровых ноутбуков стало все меньше — то производители прямо каждый день выпускали новые...
Обзор Battlerite Royale. Королевская бит...
Обзор Battlerite Royale. Королевская битКоролевские битвы пользуются бешеной популярностью среди геймеров — каждый хочет получить удовольствие от...
Предварительный обзор Nokia 7.1. Достойн...
Предварительный обзор Nokia 7.1. ДостойнБуквально вчера в сети была информация о мобильном телефоне Nokia 7.1, которую многие опровергали. Мы даж...
Обзор My Brother Rabbit. Отличная истори...
Обзор My Brother Rabbit. Отличная историЯ довольно редко играю в квесты и сюжетные игры в этом жанре мне нравятся невероятно редко. Обычно разраб...
Предварительный обзор Realme 2 Pro. Вот ...
Предварительный обзор Realme 2 Pro. Вот Весной этого года компания Oppo показала виру новый бренд Realme, который является дочерним предприятием....
Обзор Standoff 2. Шутер нового поколения...
Обзор Standoff 2. Шутер нового поколенияРазвитие мобильных шутеров идет против всех правил и аналитики. Уже несколько лет к ряду все говорят о то...
Предварительный обзор Huawei Y9 (2019). ...
Предварительный обзор Huawei Y9 (2019). Все понимают, что современным гигантам мобильного рынка довольно трудно как-то удивлять своего потенциаль...

МегаОбзорМегаОбзор
ЭЛ № ФС 77 - 68301. Выдано РоскомнадзоромМегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor