Adobe Flash Professional

Обзор


Содержание сайта
Разное
Мультипликация
Flash
Обзор л.2
Adobe Flash

Содержание

Введение
Основные шаги
Виды файлов Flash

Интерфейс

Рисование

Создание мультипликации

Импорт файлов
Ссылки
ActionScript
Звук
Видео
Кнопки и навигация
Сайт

Предварительный просмотр и публикация

Кнопки и навигация

Введение
Шаблоны кнопок
Создание навигации
Создание кнопки с несколькими состояниями
Добавление текста к кнопке
Дублирование и изменение кнопок
Тестирование кнопок на стадии
Создание основанных на тексте кнопок
Метки
Уровень примечаний
Добавление ActionScript
Соединение кнопок с определенными кадрами
Добавление addEventListener ()
Соединение кнопок с вебсайтом

Дополнительные справочные материалы


Создание навигации

Допустим, что Вы создали мини-сайт формата Flash, посвященный  розничной продаже товаров.
Для того, чтобы посетители сайта могли быстро перейти в нужный раздел сайта, нужно создать навигационные кнопки, затем связать эти кнопки с  ключевыми пунктами в пределах flash-сайта.

Работу по созданию навигации начнем с создания навигационных кнопок.


Создание кнопки с несколькими состояниями


Кнопки - один из трех типов символов во Flash.

Кнопки должны обладать интерактивностью, т.е. реагировать на действия мыши и клавиатуры пользователя.

Такая кнопка на графике времени может выглядеть так, как показано на рисунке ниже



На рисунке видно, что у символа кнопки есть собственная временная шкала, показывающий четыре главных кадра в каждом слое (уровне) - Up, Over, Down и Hit.

Соcтояния кнопки:

Up
  - появление кнопки без любого пользовательского взаимодействия. По умолчанию, когда Вы преобразовываете графические символы  в символ кнопки, они автоматически размещены в кадре на Временной шкале.

Over
-   Вид при наведении курсора на кнопку. Этот вид кнопки должен сказать пользователю, что кнопка может выполнять действие.

Down
- вид кнопки при нажатии, остается неизменным, пока посетитель не выпустит кнопку мыши.

Hit 
- область Hit определяет горячую точку, где кнопка становится активной после щелчка. Это состояние кнопки посетитель не увидит, и область Hit определяет только активную область (область, по которой можно щелкнуть мышью).


На первом слое мультипликации (Layer 1) Временной шкалы вставим кнопку. Кнопку можно создать, используя инструменты рисования, или взять готовую из Библиотеки (см. Шаблоны кнопок).

Самостоятельно создадим простую кнопку, используя инструмент прямоугольника.

Настроим размеры и цвета кнопки в Инспекторе свойств. Саму кнопку и нанесенный на нее текст нужно сгруппировать (используйте меню Modify > Group) и установить по месту.
Допустим, что созданная кнопка имеет вид, показанный на рисунке слева.

Выделите кнопку на сцене, в меню Modify (Модификация) выберите Преобразовать в символ (Convert to Symbol). Введите свое название символа (например - "Products Button" или просто "Кнопка 1").

Установите тип символа в строке типа - Кнопка (Button). Нажмите ОК.


Символ кнопки будет помещен в Библиотеку (Library).

При двойном щелчке по кнопке она открывается для редактирования. При этом можно заметить, что окно редактирования кнопки отличается от обычного вида сцены, потому что это окно редактирования символов (см. Редактирование символов).

Одновременно на Временной шкале появляются кадры состояний кнопки. При редактировании символа кнопки открывается своя временная шкала.



Следующий шаг - нужно добавить кнопке состояния - Over, Down, Hit.

Выберите кадр Over на Временной шкале - щелкните на уровне Layer 1 ниже  Over.
Вставьте ключевой кадр в области Over - используйте быструю клавишу F6 или выберите  меню Вставка (Insert) > Временная шкала (Timeline) >  Ключевой кадр (Keyframe).



Графика кнопки будет дублирована в новом ключевом кадре, но ее нужно изменить для нового состояния кнопки. Если кнопка сгруппирована с текстом, для ее изменения нужно разгруппировать кнопку, используя меню Modify (Модификация) > Ungroup (Разгруппировать).

Например, изменим цвет кнопки, используя Инспектор свойств так, что кнопка будет иметь вид, показанный на рисунке слева.

Затем выберите кадр Down на Временной шкале, добавьте ключевой кадр, измените оформление кнопки для состояния Down.



Наконец, выберите кадр Hit, создайте ключевой кадр  (keyframe) здесь.
Кадр Hit не видим, но определяет ту область в пределах кнопки, которая активируется при щелчке по кнопке (область активации).

Поэтому Вы можете выбрать область кнопки любого цвета, по размеру не менее созданной ранее кнопки (можно даже незначительно увеличить эту область).


Таким образом, создана кнопка с различными состояниями.

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



В меню Control (Управление)  выберите Test Movie > in Flash Professional, чтобы протестировать кнопку.

В нашем случае должна получиться кнопка, показанная ниже (цвет кнопки изменяется при щелчке по кнопке):



Примечание: Созданная в Adobe Flash Pro анимация Flash преобразована в GIF-анимацию.
В данном примере создана простая кнопка. Но обычно на Flash-сайтах стремятся создавать кнопки с различными эффектами - пример.


Добавление звука к кнопке

Подберите и импортируйте в Библиотеку звуковой файл поддерживаемого формата (см. Звук).

Примечание: Adobe Flash Professional идет со своим запасом звуков - в меню Окно (Window) выберите Общие библиотеки (Common Libraries) > Звуки (Sounds).

Дважды щелкаем по кнопке, чтобы перевести ее в режим редактирования символа.
Открывается окно редактирования кнопки со своим Графиком времени.

Добавляем новый слой - "Звук".
Допустим, что звук должен раздаваться, когда посетитель щелкает по кнопке.



Щелкаем по кадру Down.
Заходим в Библиотеку и щелкаем по выбранному нами звуковому файлу.

Возвращаемся к главной Временной шкале (Графику времени).

В меню Control (Управление)  выберите Test Movie > in Flash Professional, чтобы протестировать кнопку.

Примечание: Созданная в Adobe Flash Pro анимация Flash преобразована в GIF-анимацию. Поэтому пропал звук при нажатии кнопки.



См. также: Звук


Последнее обновление - ноябрь 2020 г.

О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru