пособие-Flash

 Создайте символ-мувиклип.

1.Выполним команду Insert > New Symbol (Вставка > Новый сим-

вол), в результате чего появится панель.

2.Выберем тип символа Movie Clip (мувиклип). По умолчанию его имя будет Symbol 2.

3.Нажав кнопку ОК, перейдем в режим редактирования символа.

4.В первом кадре поместим окружность, нарисованную инструментом

Oval (Овал).

5.В панели Properties (Параметры) выберите Tween > Shape (Пара >

Форма).

6.В 50-й кадр вставьте ключевой кадр, используя контекстное меню правой кнопки мыши > Insert Keyframe (Вставить ключевой кадр).

7.Увеличьте масштаб .

8.Перейдем на сцену Scene 1 (Сцена 1).

9.Выполним команду Window > Library (Окно > Библиотека) – на экране появится панель библиотеки.

10.Щелкнув по имени Symbol 2, получим его изображение в окне библиотеки.

11.Вставим новый слой с помощью кнопки Insert Layer (Вставить

слой).

12.Перетащим 2-3 символа из окна библиотеки на рабочее поле сцены.

13.Просмотрите анимацию Control > Test Movie (Контроль > Тест фильма).

 Создайте фильм «Жуки».

1.Для примера просмотрите файл Практика6\жук.swf.

2.Создайте на столе заготовку для будущего клипа ( Oval (Овал) с радиальной красно-черной заливкой) (рис.136).

Рис. 136. Заготовка с радиальной заливкой.

3. Выделите заготовку правой кнопкой мыши и выберите Convert to Symbol (Преобразовать в символ) создайте Movie Clip (Мувиклип).

81

4.Войдите в режим редактирования символа .

5.В режиме редактирования символа нарисуйте жука (рис.137).

Усы и лапы нарисуйте в отдельных слоях.

Рис. 137. Жук в режиме редактирования символа.

6. Установите частоту кадров 8 fps (8 кадров в секунду) (рис.138) и в восьми кадрах создайте покадровую анимацию шевеления лапками и усами (не забывайте для каждого движения создавать ключевые кадры).

Рис. 138. Задание частоты кадров.

7.Выйдите из режима редактирования символа .

8.Для примера просмотрите файл Практика6\2-жука.swf.

9.Создайте для объекта направляющий слой кнопкой Add Motion Guide (Добавить направляющую движения).

10.Во вновь созданном слое инструментом Pencil (Карандаш) начертите направляющую.

11.Выделив объект, примените к нему команду Insert > Timeline > Motion Guide (Вставка > Временная шкала > Создать двойное движение). В

результате объект автоматически займѐт положение в начале направляющей.

12.Выделив последние кадры анимационной сцены, щелкните правой кнопкой мыши и выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр).

13.В последнем кадре, отменив выделение, перенесите объект в конец

пути.

14.С помощью библиотеки Window > Library (Окно > Библиотека) символов вставьте в фильм ещѐ жуков и анимируйте их движение по собственным траекториям (рис.139).

82

Рис. 139. Жуки анимированные по траекториям.

15. Готовое изображение сохраните в своей папке в формате swf.

 Просмотрите файл Практика 6\окно.swf. Самостоятельно создайте фильм «Дерево за окном».

27. Создание кнопок

Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:

•Up-состояние – это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой;

•Over-состояние – кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата;

•Down-состояние – данный кадр показывает вид кнопки при нажатии;

•Hit-состояние – определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно.

 Создайте простую кнопку.

1. Чтобы создать кнопку, выполните команду Insert > New Symbol

(Вставка > Новый символ).

83

2.В появившемся диалоговом окне Create New Symbol (Создание символа) введите имя символа-кнопки (например, but1) и выберите тип символа

Button (Кнопка).

3.Flash переключится в режим редактирования символа (рис.140),

предоставив кадры Up (Вверх), Over (Над), Down (Вниз) и Hit (Нажатие).

Рис. 140. Режим редактирования символа.

Первый кадр, Up (Вверх), становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки.

Рис. 141. Ненажатый вид кнопки.

4. Выделим второй кадр, помеченный как Over (Над) и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой кадр Insert > Keyframe (Вставка > Ключевой кадр), в результате чего появится ключевой кадр, полностью повторяющий содержание Upкадра. Изменим цвет лицевой стороны кнопки (рис.142).

Рис. 142. Курсор занесен над кнопкой.

84

5. Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис.143).

Рис. 143. Нажатое состояние кнопки.

6. В Hit-кадре оставим кнопку без рамки (рис.144).

Рис. 144. Hit-кадр кнопки.

7.Перейдем к основной сцене, вызовем библиотеку по команде Window

>Library (Окно > Библиотека) (рис.145) и создадим экземпляр символа кнопки путем перетаскивания его на сцену.

Рис.145. Библиотека символов.

8. Сохраните фильм.

85

 Создайте символ-кнопку с появлением текста.

1. Создайте заготовку для будущей кнопки (рис.146).

Рис. 146. Заготовка кнопки.

2. Выделите заготовку кнопки и, щелкнув правой кнопкой мыши выберите команду Convert to Symbol (Конвертировать в символ), создайте сим- вол-кнопку (рис.147).

Рис. 147. Панель конвертирования символов.

3.Войдите в режим редактирования символа, щелкнув на нѐм дважды.

4.В кадре Up (Вверх) изобразите кнопку в нормальном состоянии

(рис.148).

Рис. 148. Ненажатый вид кнопки.

5. В кадре Over (Над) изобразите кнопку в том виде, который она будет принимать при наведении на неѐ указателя мыши (рис.149), на кнопке будет появляться надпись Push!!!.

Рис. 149. Курсор занесен над кнопкой.

86

6. В кадре Down (Вниз) изобразите кнопку в состоянии, когда на неѐ нажали (рис.150).

Рис. 150. Нажатое состояние кнопки.

7. В кадре Hit (Нажатие) с помощью заливки создайте активную область. Активная область – это пространство, щелчок внутри которого воспринимается Flash как щелчок на кнопке.

Рис. 151. Hit-кадр кнопки.

8.Готовое изображение сохраните в своей папке.

9.Просмотрите готовый фильм.

28. Использование слоя маски

Использование слоя маски (mask layer) позволяет закрывать часть слоя (или слоев), который находится под слоем маски. Объекты, помещенные в слое маски, позволяют видеть сквозь них непрозрачные объекты слоев, расположенных под слоем маски. Слои под слоем маски называются маскированными. Маска может быть анимированной, при этом следует отметить, что для перемещения слоя-маски нельзя применять траектории.

 Простая маска.

1.Переименуем слой (назовем его фон), импортируем любой графиче-

ский файл File > Import (Файл > Импорт).

2.Создадим новый слой с помощью кнопки Insert Layer (Вставить слой). Назовем вновь добавленный слой mask.

3.Напечатаем текст «Пример маски».

4.Щелкнем правой кнопкой мыши по названию слоя mask и выберем пункт Mask (Маска).

87

 Неподвижная маска и анимированный фон.

1.Создадим новую сцену.

2.Назовем слой Текст. Напечатаем любой текст.

3.Добавим темный фон (чтобы усилить эффект подсветки), для чего выберем инструментом Arrow (стрелка), в панели Properties (Параметры) щелкнем по пункту Background (Задний фон) и выберем темно-синий фон.

4.Создадим еще один слой, назовѐм gradient.

5.Создадим прямоугольник, закрывающий надпись (рис.152).

Рис. 152. Основные объекты сцены.

6. На панели Color (Цвет) настроим режим с линейной градиентной заливкой в форме вертикальной бело-сиреневой полосы (рис.153).

Рис. 153. Создание линейной градиентной заливки.

7.Теперь зададим анимацию движения в первом кадре слоя gradient

(щелчок правой кнопкой мыши на 1-м кадре > Create Motion Tween (Создать двойное движение).

8.Вставим ключевой кадр в 60-м кадре – между первым и 60 кадром будет задана анимация Motion Tween (Двойное движение).

9.Поменяем слои text и gradient местами и вставим ключевой кадр в слое text в 60-м кадре, в результате последовательность кадров с первого до 60-го заполнится текстом (рис.154).

88

Рис. 154. Создание анимации движения.

10. Теперь передвинем прямоугольник в 60-м кадре вправо так, чтобы белая вертикальная линия оказалась за текстом (рис.155).

Рис.155. Вид сцены в 60-м кадре.

11.Щелкнем по названию слоя text, выберем в этом меню пункт Mask

(Маска).

12.Просмотрите готовый фильм.

 Неподвижная маска и анимированный растровый фон.

1. Создадим новую сцену.

2. Повторите все шаги из предыдущего примера, с одной лишь разницей

– в прямоугольник поместите растровое изображение.

 Анимированная маска и неподвижный фон.

1.Создадим новую сцену.

2.Переименуем слой (назовем его фон), импортируем любой графический файл (лучше «ночной город»).

3.Создадим новый слой снег. Нарисуем прямоугольник без заливки с большой высотой.

4.Нарисуем снежинку и конвертируем ее в символ (правая кнопка

мыши > Convert to Symbol > Graphic (Конвертировать в символ > Графический).

5.Достанем из библиотеки несколько снежинок и заполним прямоугольник. Удалите контур у прямоугольника.

89

6.Выделите всѐ (прямоугольник и снежинки) и конвертируем в символ

(правая кнопка мыши > Convert to Symbol > Graphic (Конвертировать в символ > Графический).

7.Создадим ключевой кадр в 100-м кадре на слое снег. Опустим прямоугольник со снежинками в самый низ.

8.Перейдем на 1-й кадр и создадим движение (щелчок правой кноп-

кой мыши на 1-м кадре > Create Motion Tween (Создать двойное движение).

9.Создадим еще один слой. Вытащим из библиотеки символ прямоугольник со снежинками.

10.Зададим ему движение от 1-го до 100-го кадра, только переместим прямоугольник по диагонали (из левого верхнего угла и правый нижний угол).

11.Создадим еще один слой. Вытащим из библиотеки символ прямоугольник со снежинками.

12.Зададим ему движение от 1-го до 100-го кадра, только переместим прямоугольник по диагонали (из правого верхнего угла и левый нижний угол).

13.На слое фон создадим ключевой кадр в 100 кадре.

14.Сохраните фильм.

 Анимированная маска и неподвижный фон.

1.Создадим новую сцену.

2.Нарисуем круг размером 10х10, и разместим его в центре.

Рис.156. Задание размеров на панели Параметры.

3.В 10-м кадре создадим ключевой кадр.

4.Увеличим окружность до размера 400х400.

5.Перейдем в 1-й кадр и создадим анимацию (щелчок правой кнопкой мыши на 1-м кадре > Create Shape Tween (Создать двойную форму).

6.В 20-м кадре создадим ключевой кадр.

7.В 30-м кадре создадим ключевой кадр. Уменьшим окружность до размеров 10х10.

8.Перейдем в 20-й кадр и создадим анимацию (щелчок правой кноп-

кой мыши на 20-м кадре > Create Shape Tween (Создать двойную форму).

9.Создадим новый слой и импортируем в него любую картинку.

90