Уроки Macromedia Flash 4. Анимация

По вопросам размещения информации
обращайтесь к Савченко Игорю Викторовичу

www: http://homepages.atnet.ru/dolphin2/

mailto: dolphin2@atnet.ru

pinok-pod-sad@yandex.ru


Created using
htm2chm 3.0

Download it NOW!


Уроки Flash 4. Интерактивность

This page uses frames, but your browser doesn't support them.


Уроки Macromedia Flash 4. Интерактивность

Вступление

Объект типа кнопка
шаг 1.1
шаг 1.2
шаг 1.3
шаг 1.4
шаг 1.5
шаг 1.6
шаг 1.7

Усложняем кнопку
шаг 2.1
шаг 2.2
шаг 2.3
шаг 2.4
шаг 2.5
шаг 2.6
шаг 2.7
шаг 2.8
шаг 2.9
шаг 2.10

Организация переходов
шаг 3.1
шаг 3.2
шаг 3.3
шаг 3.4
шаг 3.5
шаг 3.6
шаг 3.7
шаг 3.8


Объект типа кнопка

Для начала следует понять, что собой представляет объект типа кнопка (button).

Кнопка обладает областью активности (Hit) и может пребывать в трех состояниях, зависящих от действий пользователя:

  1. Обычное состояние (Up). Никаких действий по отношению к кнопке не производится.
  2. Курсор находится в зоне активности кнопки, но левая кнопка мыши не нажата (Over).
  3. Курсор находится в зоне активности кнопки, и левая кнопка мыши нажата (Down).


Объект типа кнопка
Шаг 1.1

Итак, создадим кнопку.

Откройте новый документ File>New (CTRL+N) и создайте символ Insert>New Symbol… (CTRL+F8). В раскрывшемся окне установите радиокнопку в позицию Button и задайте в поле Name уникальное имя button1.


Объект типа кнопка
Шаг 1.2

Обратите внимание на закладки Up, Over, Down, Hit в верхней части раскрывшегося окна редактирования кнопки. При выборе очередной закладки вы получите доступ к редактированию очередного состояния кнопки.

Убедитесь, что в настоящий момент активна закладка Up и нарисуйте с помощью инструмента Rectangle (R) прямоугольник, образующий кнопку. Кнопку дополните текстом "Кнопка 1".


Объект типа кнопка
Шаг 1.3

Выберите закладку Over. Чтобы скопировать состояние, из кадра Up выберите Insert>Keyframe (F6) и преобразуйте объект так, чтобы он соответствовал состоянию наведенной на него мыши. Например, можно залить поле прямоугольника с помощью инструмента Paint Bucket (U) более светлым цветом.


Объект типа кнопка
Шаг 1.4

Выберите закладку Down, вставьте предыдущий кадр через Insert>Keyframe (F6), и не снимая выделения, сдвиньте кнопку при помощи клавиш управления курсором на одну позицию вправо и вниз. Это создаст эффект западания кнопки во время нажатия.


Объект типа кнопка
Шаг 1.5

Для того чтобы задать область активности кнопки, следует в окне Hit поместить объект соответствующей формы. Остальные атрибуты объекта не имеют значения. Чтобы сделать область соответствующей кнопке, ставьте в окне Hit пустой кадр Insert>Blank Keyframe (F7) и скопируйте саму кнопку из окна Up в окно Hit через Edit>Paste in Place (CTRL+SHIFT+V).


Объект типа кнопка
Шаг 1.6

Вернитесь в основную сцену, вызовите палитру Library через Window>Library (CTRL+L) и перетащите объект button1 в середину рабочего поля.


Объект типа кнопка
Шаг 1.7

Посмотрим, что получилось. Сделать это можно двумя способами:

  1. Обсчитайте ролик (CTRL+ENTER)
  2. Включите опцию Control>Enable Buttons (CTRL+ALT+B), которая позволяет включать или отключать реакцию кнопок во время редактирования.

Не забудьте сверить результат с прилагаемым примером (example1.fla).


Усложняем кнопку

На самом деле кнопка представляет собой Movie Clip и кадрами Up, Over и Down следует оперировать как обычными кадрами на Timeline. Таким образом, базируясь на 3-х состояниях, мы можем присвоить кнопке любые анимированные эффекты.

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


Усложняем кнопку
Шаг 2.1

Создайте новый символ Insert>New Symbol… (CTRL+F8). В раскрывшемся окне установите радиокнопку в позицию Graphic и задайте в поле Name уникальное имя balloon1.


Усложняем кнопку
Шаг 2.2

Нарисуйте объект, который будет представлять собой всплывающую подсказку. Дополните подсказку текстом. Вы можете воспользоваться готовым объектом из файла balloon.fla


Усложняем кнопку
Шаг 2.3

Еще раз создайте новый символ. Кстати, эту операцию можно совершить, щелкнув в нижней части палитры Library на символе [image]. Но на этот раз в раскрывшемся окне установите радиокнопку в позицию Movie Clip и задайте в поле Name уникальное имя balloon_help1.


Усложняем кнопку
Шаг 2.4

Поместите из палитры Library объект ballon в первый кадр клипа balloon_help. Сделайте ключевыми кадры 10 и 20 (F6).


Усложняем кнопку
Шаг 2.5

Дважды щелкнув мышью между 10-м и 20-м кадром, выберите в раскрывшемся окне закладку Tweening и установите Motion.


Усложняем кнопку
Шаг 2.6

Дважды щелкните по 20-му кадру на Timeline. В раскрывшемся меню выберите закладку Actions. Нажмите кнопку [image] и выберите оператор Stop. Таким образом, мы остановим проигрывание клипа на последнем кадре.


Усложняем кнопку
Шаг 2.7

Выберите 10-й кадр и дважды щелкните по объекту balloon1. В раскрывшемся меню выберите закладку Color Effect. Выберите параметр Alpha и установите движок в крайнее левое положение, чтобы числовое значение в процентах стало равным 0.

Теперь — маленькая хитрость. По нашей задумке, первый кадр данного клипа нам не нужен, но не спешите его удалять: он нам скоро очень пригодится.


Усложняем кнопку
Шаг 2.8

Для того чтобы использовать всплывающую подсказку в кнопке, в палитре Library выберите объект button1 и, щелкнув правой кнопкой мыши, войдите в меню Edit.


Усложняем кнопку
Шаг 2.9

Активизируйте кадр Over и перетащите из палитры Library объект balloon_help и позиционируйте его справа от кнопки.

Вот здесь нам и пригодится та хитрость, о которой мы упоминали в шаге 2.7. Дело в том, что Macromedia Flash во время редактирования отображает на месте клипа содержимое его первого кадра. Если этот кадр пустой, то на месте клипа отображается точка, и точно его позиционировать не представляется возможным. Отредактируйте символ balloon_help так, как мы это сделали в шаге 2.8 с объектом button1, и удалите объект balloon из первого кадра с помощью клавиши DEL.


Усложняем кнопку
Шаг 2.10

Обсчитайте ролик (CTRL+ENTER) и сравните полученный результат с прилагаемым примером (example2.fla).


Организация переходов

Наиболее важным этапом разработки интерактивного сайта является организация связей и переходов между кадрами или сценами.

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


Организация переходов
Шаг 3.1

Следуя шагам 2.1 - 2.9 создайте еще две кнопки. Чтобы они различались, модифицируйте тексты на кнопках и всплывающих меню. Новые объекты следует назвать button2, button3, balloon2, balloon3, balloon_help2, balloon_help3 соответственно.

Сравните полученный результат с готовым файлом example3.fla.


Организация переходов
Шаг 3.2

Поместите объекты button1, button2 и button3 в левой части рабочего поля и выровняйте их положение с помощью палитры Object Window>Inspectors>Object (CTRL+ALT+I), задав координаты х и y.


Организация переходов
Шаг 3.3

Сделайте ключевым 4-й кадр Insert>Keyframe (F6) и примените к нему команду Insert>Clear Keyframe (SHIFT+F6). Таким образом, кнопки будут доступны на протяжении первых четырех кадров.


Организация переходов
Шаг 3.4

Создайте новый слой на Timeline через Insert>Layer.


Организация переходов
Шаг 3.5

Выделите на Timeline 2-й кадр нового слоя (у нас Layer 2) и сделайте его пустым Insert>Blank Keyframe (F7). С помощью инструмента Text Tool (T) создайте текстовый комментарий, представляющий собой 1-е событие. Например: "Событие 1". Повторите эти операции для 3-го и 4-го кадров, поместив в комментарий текст "Событие 2" и "Событие 3" соответственно.


Организация переходов
Шаг 3.6

Дважды кликните на Timeline мышью 1-ый кадр нового слоя (у нас Layer 2) и выберите в раскрывшемся окне закладку Action. Нажмите на кнопку [image] и, в раскрывшемся меню, выберите команду Stop. Эта команда необходима для того, чтобы ролик после запуска остановился на первом кадре.


Организация переходов
Шаг 3.7

Теперь перейдем непосредственно к организации ссылок от кнопок к созданным в кадрах 2, 3 и 4 событиям.

В сцене дважды щелкните мышью по объекту button1. В раскрывшемся окне выберите закладку Action и, нажав кнопку [image] , выберите команду On MouseEvent. Данная команда отслеживает событие, произведенное мышью по отношению к объекту, к которому она приписана. Справа отображен список возможных действий. Выберите Press (отслеживает нажатие левой клавиши мыши).

Теперь таким же образом вставьте команду GoTo. Установите радиокнопку в позицию Frame: Number и задайте значение 2.

Повторите действия, описанные в этом шаге, для объектов button2 и button3, указав соответственно для Frame: Number значения 3 и 4.


Организация переходов
Шаг 3.8

Обсчитайте ролик (CTRL+ENTER) и сравните результат с прилагаемым примером (example4.fla).


Интерактивность

Программа Macromedia Flash обладает достаточно скромным, но всемогущим набором средств для построения интерактивных роликов — начиная от встроенного редактора кнопок и заканчивая интуитивно понятным объектно-ориентированным языком программирования (action), который позволяет управлять всеми доступными атрибутами объектов, задавать алгоритм их поведения и взаимодействия.

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


Untitled Document

Уроки Macromedia Flash 5 - Интерактивность.