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

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

Комментарии:
Смартфон Apple iPhone XI показали на кач...
Смартфон Apple iPhone XI показали на качАвторитетный искатель утечек OnLeaks поделился компьютерными изображениями смартфона iPhone XI, который е...
Смартфон Samsung Galaxy A90 получит 128 ...
Смартфон Samsung Galaxy A90 получит 128 Недавно стало известно о том, что в обновленную линейку смартфонов Samsung Galaxy A войдут три модели: Ga...
Anker производит кабели USB-C и Lightnin...
Anker производит кабели USB-C и LightninКомпания Anker планирует выпуск кабелей с разъемами USB-C и Lightning. ...
Новый проектор Mijia 4K...
Новый проектор Mijia 4KMijia, дочерняя компания Xiaomi, выпустила второе поколение своего широко популярного лазерного проектора...
Новые беспроводные наушники Noise Shots ...
Новые беспроводные наушники Noise Shots Компания Noise выпустила третью версию беспроводных наушников Noise Shots X3 Bass. ...
Procter&Gamble на CES 2019...
Procter&Gamble на CES 2019На выставке CES 2019 компания Procter&Gamble официально представила шесть своих новых умных устройств, ко...
Новые кроссовки от Nike со шнуровкой Ada...
Новые кроссовки от Nike со шнуровкой AdaNike официально представила свои первые баскетбольные кроссовки со шнуровкой Adapt BB. ...
Обновленная версия Fire TV Stick от Amaz...
Обновленная версия Fire TV Stick от AmazИнтернет-гигант Amazon выпустил обновленную версию базовой модели с новым Alexa Voice Remote, который бы...
Поделиться в социальных сетях:


Предварительный обзор Lenovo Legion Y27g...
Предварительный обзор Lenovo Legion Y27gИгровые мониторы пользуются невероятной популярностью среди геймеров, так как это действительно крутой пр...
Предварительный обзор Lenovo Yoga A940. ...
Предварительный обзор Lenovo Yoga A940. На выставке CES 2019 показали массу интересных решений — ноутбуков для геймеров, здоровенных мониторов ил...
Предварительный обзор ASUS ROG Zephyrus ...
Предварительный обзор ASUS ROG Zephyrus В последнее время игровых ноутбуков стало очень много, даже слишком — буквально каждый день можно писать ...
Обзор Cat Gunner. Воюем за котиков...
Обзор Cat Gunner. Воюем за котиковБольшинство казуальных игр копируют друг-друга, чтобы иметь больше шансов на успешные продажи встроенных ...
Предварительный обзор Samsung Notebook O...
Предварительный обзор Samsung Notebook OКомпания Samsung, которая когда-то очень давно была одной из лидеров на рынке ноутбуков, вдруг взяла и пр...
Обзор The Long Dark. Выжить в снегах...
Обзор The Long Dark. Выжить в снегахВ последнее время проектов про выживание стало очень много — буквально каждый третий релиз предоставляет ...
Предварительный обзор ASUS Chromebook Ta...
Предварительный обзор ASUS Chromebook TaРынок планшетных компьютеров на текущий момент находится в стадии застоя — крупные бренды перестали работ...
Обзор Pigeon POP. Атака голубей...
Обзор Pigeon POP. Атака голубейКазуальные игры это всегда крайне тонкая тема, которая требует от разработчика каких-то вложений. Не обяз...
Предварительный обзор LG UltraGear 27GL8...
Предварительный обзор LG UltraGear 27GL8На выставке CES 2019 показали много интересных железок, которые кому-то будут интересны. В частности, ком...
Обзор goodreads. Ищем книги...
Обзор goodreads. Ищем книгиВ последнее время читать стало модно – пользователи стали активнее читать электронные книги, бумажные вар...
Предварительный обзор Dell Latitude 7400...
Предварительный обзор Dell Latitude 7400Многие пользователи уверены в том, что ноутбуки нужны исключительно для развлечений, для просмотров фильм...
Обзор Horizon. Нестандартный раннер...
Обзор Horizon. Нестандартный раннерХороших казуальных игр довольно мало и они попадаются на газа довольно редко. Я уже не раз говорил о том,...

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