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.