Программа Flash "Создание мультика"

"Исчезающий круг"

1.        Нарисуем круг.

1. Выбираем инструмент Oval Tool
2. Выбираем цвет контура в поле Stroke Color и  цвет внутренней части круга в поле Fill Color.
3. На рабочем  поле в любом месте рисуем круг.

2.        Займемся анимацией.

2.1. На линии времени (Timeline) выделяем 10-й кадр, затем (находясь на 10-м кадре) в пункте меню Insert выбираем пункт Frame (F5).. Теперь мультфильм состоит из десяти кадров, на каждом из которых находится наш круг.

2. В пункте меню Insert выбираем пункт Create Motion Tween (пока это можно понимать как "создать движение между"), после чего область с 1-го по 10-й кадр станет синего цвета со штриховой линией. Можно выбрать этот пункт и в выпадающем меню (для этого надо щелкнуть правой клавишей мыши по 10-му кадру).
3. Сделаем 10-й кадр ключевым. Ключевой кадр создается посредством выбора пункта KeyFrame в меню Insert (F6).
4. Теперь определим для этого кадра эффект. В пункте меню Window выбираем подпункты Panels || Effect.

Данное окно позволяет выбрать эффект анимации и задать его параметры.

5. В выпадающем меню выбираем эффект Alpha и задаем значение "0%", после чего круг должен стать невидимым на рабочей области.
6. Далее берем инструмент Arrow Tool, в его надстройках в левом нижнем углу выбираем Scale и уменьшаем круг.
7. С помощью Arrow Tool перетаскиваем круг в другое место. Готово!

Хамелеон, или Фигура, плавно меняющая цвет.

Рассмотрим эффекты Tint и Advanced. Посредством Tint можно менять цвет объекта, a Advanced фактически представляет собой комбинацию Alpha и Tint. Начнем с эффекта Tint.

1. Нарисуем прямоугольник со скругленными углами.

1.1. Выберем инструмент Rectangle Tool. У инструмента Rectangle Tool есть только одна настройка — Round Rectangle Radius.

1.2. В настройках инструмента Rectangle Tool выберем Round Rectangle Radius. В поле Corner Radius открывшегося окна введем значение «5».

1.3. В поле Fill Color выберем синий цвет и нарисуем прямо угольник или квадрат с закругленными углами.

1.4. Создадим Motion Tween из 15 кадров. Выберем 15-й кадр и создадим бланк (последовательность кадров), выбрав в меню Insert || Frame. Далее выделим бланк (для этого нужно "ухватить" линию на Timeline и протянуть ее с 1 -го по 15-й кадр или выбрать пункт Select All Frames в выпадающем меню) и выберем пункт меню Insert || Create Motion Tween. Выделим последний, 15-й кадр и вставим в него "ключевой кадр" (Insert || KeyFrame).

2. Введем эффект.

2.1. Выберем последний, 15-й кадр анимации. Там же, где в первом уроке мы выбирали эффект Alpha, выберем эффект Tint. Для эффекта Alpha мы задавали уровень прозрачности (в процентах), для Tint можно задать цвет (на палитре RGB) и уровень яркости в процентах. Выберем красный цвет.

Мультик с эффектом Tint готов. Протестируйте мультик (Control || Test Movie), чтобы посмотреть, как изменяется цвет.

Для того чтобы одновременно использовать эффект прозрачности Alpha и изменения тона Tint, есть специальный, более сложный эффект Advanced.

3. Добавим анимацию с эффектом Advanced.

3.1. Выделим 31-й кадр и вставим в него "ключевой кадр" (Insert || KeyFrame). Затем выделим 16-й кадр и удалим его содержимое (для этого надо выбрать пункт Clear Frames (Cut) в выпадающем меню или в пункте меню Edit).

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

3.2. Определим эффект анимации. Выделим 31-й кадр и зададим для него эффект Advanced. Как мы уже отмечали, этот эффект, по сути, представляет собой композицию эффектов Alpha и Tint. Зададим параметры, показанные на рис.

Вот и все. Мультик с эффектами Tint и Advanced готов.

Выстрел из пушки, или Движение круга по криволинейной

траектории

1. Создадим анимацию движения круга из 15 кадров.

1.1. Нарисуем круг синего цвета с помощью Oval Tool.

1.2. Сделаем Motion Tween из 15 кадров. Повторим, как это делается. Выбираем 15-й кадр, создаем бланк (последовательность кадров), выбрав в меню Insert || Frame. Далее выделяем бланк и выбираем пункт меню Insert || Create Motion Tween. В 15-й кадр вставляем "ключевой кадр" (Insert || KeyFrame).

2. Теперь займемся траекторией. Для этого потребуется создать два слоя с движением и слой траектории (Guide-слой). Guide можно перевести примерно так: "путеводитель; направляющий".

Сделаем активным слой с анимацией движения (в данном случае, правда, он и так активный, поскольку единственный).

Выберем в меню Insert || Motion Guide. Активируем новый получившийся слой.

Возьмем инструмент Pencil Tool. Инструмент Pencil Tool ("карандаш") рисует линии. У него есть настройки—Pencil Mode (режим карандаша): Straighten ("выпрямлять"), Smooth ("сглаживать") и Ink ("чернила").

Выберем значение Smooth в настройке Pencil Mode и нарисуем траекторию полета ядра из пушки (строго говоря, это, конечно, должен быть участок параболы, так что попробуйте изобразить что-то похожее). Как только мы ее нарисуем, круг сразу же примагнитится к ней — и переместить его с траектории вы уже не сможете.

Выделите начальный кадр и переместите круг на один из концов кривой. Выделите конечный кадр и переместите круг на другой конец кривой.

Посмотрите получившийся мультик (Control || Test Movie или Ctrl+Enter).

Морфинг

На этом уроке мы рассмотрим анимацию Shape Tween на примере превращения круга в текст.

1. Нарисуем круг или овал с помощью инструмента Oval Tool.

2. Создадим анимацию Shape Tween.

2.1. Выберем, например, 10-й кадр и сделаем бланк из десяти кадров (Insert || Frame).

2.2. Откроем окно Frame, выбрав в меню Window || Panels || Frame.

2.3. Выделим созданный бланк и в выпадающем меню Tweening  выберем Shape, после чего бланк на Timeline станет зеленоватого цвета (рис. 4.1).

В поле Easing (в MX — Ease) введите значение "—100". Если в поле Easing указывать отрицательные значения —1..—100, то анимация будет ускоряться; если положительные — 1..100, то замедляться; если же указать "0", то анимация будет идти с одинаковой скоростью. На самом деле эти значения не влияют на скорость воспроизведения мультика, создается лишь эффект ускорения путем интенсивного изменения формы (или цвета) в начале (замедление) или в конце (ускорение).

На десятом кадре создадим "ключевой кадр" (Insert || Key Frame).

Выделим круг и удалим его из 10-го кадра.

3. Введем текст.

Возьмем инструмент для создания текста Text Tool, щелкнем мышкой по рабочей области и напечатаем произвольный текст (рис. 4.2)

С помощью Arrow Tool выделим текст.

j.j. откроем окно Character, выбрав в меню Window || Panels || Characters (в MX соответствующие настройки находятся на панели

настройки находятся на панели

Properties). Это окно позволяет настраивать такие параметры текста, как размер, интервал между символами, полужирный или курсив, цвет, надстрочный, подстрочный или обычный. В поле URL можно указать и ссылку (рис. 4.3).

В поле Font Height поставим достаточно большой размер текста, чтобы текст был хорошо виден.

Применим к тексту преобразование Modify || Break Apart. Мы не будем сейчас останавливаться на смысле этого преобразования. Скажем лишь, что оно превращает текст в графический объект. После применения данного преобразования синяя рамка вокруг текста должна исчезнуть.

Вот и все. Задуманное сделано. Можете посмотреть ваш мультик (Control || test Movie).

Посредством Motion Shape можно изменять не только форму, но и параметры цвета и прозрачности. Попробуйте изменить соответствующие параметры 10-го кадра в окне Mixer (Window || Panels || Mixer).

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

Интерактивные эффекты в фильме создаются на основе процедур — наборов инструкций, написанных на языке ActionScript, которые запускаются при наступлении определенного события. В дальнейшем мы будем применять для них общепринятое название — "скрипты".

События, которые могут активизировать процеду-I  ру, — это либо достижение определенного кадра, I;  либо какое-то действие пользователя: нажатие |   кнопки мыши или клавиши на клавиатуре и др. Да-|  вайте сделаем так, чтобы мультик в конце останавливался и не начинал воспроизведения сначала. Для этого нам потребуется поставить на 10-й кадр скрипт остановки.

4. Поставим на 10-й кадр скрипт остановки..

Откроем окно скриптов. В Macromedia Flash 5 для этого можно дважды кликнуть по 10-му кадру, в MX надо выбрать пункт Action в выпадающем меню 10-го кадра. В принципе, особенно на первом этапе, вполне можно ничего не писать самостоятельно, поскольку Flash предлагает развитую систему помощи. Надо лишь выбрать нужную процедуру и, если необходимо, проставить в ней требуемые параметры.

Меню скриптов незначительно отличается в Macromedia Flash 5 (рис. 4.4) и MX (рис. 4.5).

Нам требуется найти и выбрать функцию stop (). Ключевой кадр, для которого определен скрипт, помечается на Timeline символом "а" (рис. 4.6).

Теперь eani мультик остановится в 10-м кадре.

С помощью Motion Tween и Shape Tween можно делать как анимацию с изменением цвета и прозрачности, так и анимацию движения. Но если движе-

цию движения. Но если движение не прямолинейное, то лучше использовать Motion Tween, если же необходимо изменять форму, то нужно использовать Shape Tween. Еще одна особенность анимаций Motion Tween состоит в том, что они сохраняются в библиотеке сцены (о которой мы поговорим на следующих уроках).

Урок № 5. Кнопочка

1. Нарисуем кнопочку.        ,

1.1. С помощью Репей Tool (рис. 5.1) нарисуем какую-нибудь (любой формы) замкнутую кривую.

1.2. Закрасим внутреннюю часть кривой, выбрав инструмент Paint Bucket Tool и цвет закраски Fill Color.

В настройках этого инструмента можно поставить величину разрыва —г Gap Size (если кривая не замкнута и имеет не очень большой разрыв), изменять заливку — Transform Fill и запретить изменять заливку —Lock Fill (последние два параметра используются для градиентной заливки).

2. Преобразуем нарисованную фигуру в символ. Для этого выделим ее и выберем в меню Insert || Convert To Symbol. В появившемся окне выберем флажок Button. .

206976300. Запрограммируем поведение кнопки.

3.1.        Дважды нажмем на будущую кнопку. В шкале времени появят
ся четыре поименованных кадра: Up, Over, Down, Hit (рис. 5.2).

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

2. Вставим "ключевой кадр" в кадр Over. Выберем его и изменим цвет фигуры (при наведении мышки кнопка приобретет такой цвет).

206968328. Повторим предыдущий пункт для кадра Down, только изменим цвет.
206968329. В Hit скопируем кадр Up. Для этого выберем кадр Up в меню Edit || Copy Frame, затем выберем кадр Hit и вставим кадр, выбрав в меню Edit || Paste Frames.
206968330. Вернемся на главную "сцену", выбрав ссылку Scene 1 (эта ссылка расположена где-нибудь "в районе" Timeline, в Macromedia Flash 5 и MX ее расположение различно; рис. 5.3).

4.        "Подгоним" размер мультика под размер кнопки.

4.1. Откроем окно Info; выбрав в меню Window Ц Panels || Info, выделим на рабочем поле созданную кнопку.

В окне Info можно изменять размеры объекта, его высоту и ширину (рис. 5.4),атакже координаты точки отсчета (рис. 5.5) и положение самой этой точки (рис. 5.6).

2. Выберите положение точки отсчета—верхний левый угол, после чего в поле X и Y поставьте значение "О".
3. Сделайте рабочую область под размер кнопки. Для этого нажмите правой кнопкой мышки на "рабочую область". В выпадающем меню выберите Movie Properties. В открывшемся окне нажмите на кнопку Contents и на ОК.

В этом окне (рис. 5.7) можно изменять размеры поля — Dimensions, частоту смены кадров — Frame Rate. Для качественного, без подергиваний, воспроизведения она должна быть 24—25, но при этом заметно возрастает размер конечного мультика. Цвет фона—Background Color и единицы измерения — Ruler Unite (пиксели, сантиметры, миллиметры и тл.).

Кнопка готова, осталось только добавить скрипт.

5. Добавим скрипт перехода на заданную страницу. Код скрипта в Macromedia Flash 5 и MX, разумеется, будет одинаковым, но технические действия по добавлению скриптов в этих средах незначительно различаются. В Macromedia Flash 5 надо:

5.1. Выбрать созданную кнопку и открыть окошке Actions (Window || Actions)..

. 5.2. Нажать на кнопку "+" и в выпадающем скриптовом меню выбрать Basic Actions || Get URL.

5.3. В нижней части окна в поле URL указать путь к страничке (рис. 5.8).

В Macromedia Flash MX имеются два режима работы со скриптами: Normal (в этом режиме пользователю предлагается своеобразный конструктор скриптов) и Expert (в этом режиме имеется возможность самостоятельно писать код скрипта). На рис. 5.9 и 5.10 показаны эти режимы и переключатель между ними.

Наш скрипт запустится- на выполнение при наступлении (on) события release—отпускании кнопки мыши в тот момент, когда курсор мыши находится над кнопкой.

Теперь все готово.

Чтобы фон кнопочки на HTML-гграничке был прозрачным, в параметрах опубликования (File |) Publish Settings) необходимо выбрать вкладку HTML и в выпадающем меню Window mode выбрать Transparent Windowless (рис. 5.11).