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

Для начала необходимо запустить 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
Обсудить урок по созданию флеш кнопок
NVIDIA GeForce NOW теперь будет показывать рекламу…
Сегодня компания NVIDIA официально объявила, что бесплатный уровень подписки GeForce NOW начнёт показыват…
WhatsApp будет автоматически отправлять HD-фотографии…
Разработчики WhatsApp ещё в августе ввели функцию, которая позволяет отправлять фотографии в более высоко…
Для Apple Vision Pro запустили собственный магазин приложени…
Сегодня был официально запущен специальный App Store для AR-гарнитуры Apple Vision Pro, в котором в будущ…
China Mobile запустила первый в мире 6G-спутник…
Сотовая связь 6G находится очень далеко от коммерческого запуска, но это не мешает крупным странам провод…
Освоение Браузера Morelogin для Повышенной Онлайн-Безопаснос…
В эпоху, когда цифровые следы подвергаются тщательному анализу, …
Reddit продала данные для обучения ИИ от Google…
Сегодня появилась официальная информация о том, что компания Google будет использовать контент, доступный…
OpenAI разрабатывает поисковую систему на базе ИИ…
На текущий момент можно смело заявить, что компания OpenAI делает значительные успехи в области искусстве…
Safari больше не будет браузером по умолчанию на iOS…
Вчера компания Apple выпустила операционную систему iOS 17.4 для разработчиков и теперь компания предоста…
МегаОбзор
ЭЛ № ФС 77 - 68301. Выходные данные СМИ МегаОбзор
Яндекс.Метрика
2006-2024
© MegaObzor