Пример 2. "Плавающая рыбка"

Пример 2. "Плавающая рыбка"

Создайте новый файл: выберите в главном меню File - New (Файл - Новый) или нажмите на клавиатуре Ctrl-N. Будет создан новый файл, в котором по умолчанию один слой Layer 1 и один пустой кадр (первый), которому соответствует пустая рабочая область или сцена.

Создадим в первом слое анимацию, имитирующую поведение рыбки.

Переименование слоя

Назовем первый слой Рыба 1. Для этого:

1. Кликните два раза левой клавишей мыши в шкале времени на Layer 1.

2. Наберите на клавиатуре Рыба 1.

3. Кликните левой клавишей мыши вне слоя. Слой поменяет название. Рекомендуем обязательно именовать слои, так как в многослойных фильмах всегда хочется сразу знать в каком слое что находится. Так работать гораздо быстрее и вам будет удобнее.

Так как пока существует только один кадр, рабочая область, в которой мы будем рисовать, соответствует этому ключевому кадру.

Создание объекта в сцене

Объект можно:

o  нарисовать, а можно

o  импортировать файл растровой графики (File - Import (Файл - Импорт)).

Сначала нарисуем объект.

1.  Выберите инструмент Pencil (Карандаш).

2.  Задайте его параметры в панели Stroke (Штрих).

3.  В рабочей области нарисуйте рыбу, например:

4.  Выберите инструмент Paint Bucket (Заливка, Ведро).

5.  В панели Fill (Заливка) создайте нужный градиент и залейте контуры рыбы.

6.  Кликните правой клавишей мыши по ключевому кадру (жирной черной точке) в кадре 1 слоя
Рыба 1 и в появившемся меню выберите

Create Motion Tween (Создать расчетную анимацию)

Кадр окрасится в светло-фиолетовый цвет.

7.  Кликните левой клавишей мыши, через несколько пустых кадров, (в первом случае, например, в 20 кадре. Создавая второй и последующие твининги выделяйте любой кадр через несколько пустых). Кадр в шкале времени потемнеет.

8.  На клавиатуре нажмите клавишу F6. (Или в главном меню выберите Insert - Keyframe (Вставить - Ключевой кадр)). С первого по двадцатый кадр шкала времени закрасится в светло-фиолетовый цвет и на этом фоне появится черная стрелка. В двадцатом кадре появится черная точка (второй ключевой кадр). В рабочей области рыбка (или любой другой объект) станет символом. Признаком этого является синяя рамка вокруг объекта.

Расчетная анимация создана, но для того, чтобы с объектом происходили какие-либо изменения, нужно изменить состояние объекта (положение, размеры и пр.)

9.  Для изменения положения и размеров объекта анимации выберите инструмент Arrow (Стрелка).

В шкале времени: выделите первый ключевой кадр (левой клавишей мыши нажмите на жирную точку).

В рабочей области (сцене): переместите объект, например в правый нижний угол. Для этого нажмите левой клавишей мыши на изображение рыбки и не отпуская клавишу, перетащите рыбку в нужное место. Отпустите левую клавишу мыши. Это простое перемещение без изменения размеров.

Для изменения размеров и ракурса рыбки воспользуйтесь модификаторами инструмента Arrow (Стрелка):

с помощью модификатора Rotate (Поворот) - поверните рыбку;

с помощью модификатора Scale (Масштаб) - пропорционально и непропорционально увеличьте или уменьшите ее или отобразите справа-налево.

8 и 9 пункты данной технологии являются принципиально важными: в 8 п. создается новый твининг за счет создания завершающего второго ключевого кадра, а в п. 9 - меняется местоположение и размеры объекта. Здесь же можно менять прозрачность и цвет объекта (об этом чуть ниже).

10.  Протестируйте анимацию (Ctrl-Enter).

11.  Для создания последующих расчетных анимаций движения - твинингов (tweenings) в этом же слое выполните пункты 7, 8 и 9 несколько раз:

o  Кликните левой клавишей мыши, например, уже в 40 кадре шкалы времени.

o  На клавиатуре нажмите клавишу F6. Между 20 и 40 кадром появится идентификация расчетной анимации (стрелка на сиреневом фоне).

o  Измените состояние объекта в рабочей области в 40 кадре.

o  Это может быть перемещение объекта (с помощью инструмента Стрелка), а может быть изменение его свойств: цвет, яркость, прозрачность, масштаб, поворот. и т. д., измененные в панели Effect (Эффект).

12.  Протестируйте анимацию (Ctrl-Enter).

Во Flash, если в конце всех твинингов в слое не стоит оператор Stop (Останов), проигрыватель Flash непрерывно воспроизводит анимацию с первого ключевого кадра. И для того, чтобы не было рывков при зацикливании анимации первый и последний ключевые кадры в длинной последовательности твинингов должны быть одинаковыми, т. е. графические объекты в этих ключевых кадрах должны быть с абсолютно одинаковыми параметрами. Для этого используется

прием "Выравнивание анимации":

o  Кликните правой клавишей мыши по первому ключевому кадру, находящемуся в первом кадре слоя Рыба 1.

o  В выпадающем меню выберите команду Copy Frames (Копировать кадры).

o  Кликните правой клавишей мыши по самому последнему ключевому кадру всей анимации.

o  В выпадающем меню выберите команду Paste Frames (Вставить кадры).

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

13.  Чтобы отредактировать сценарий поведения рыбки, воспользуйтесь в шкале времени кнопкой - Edit Multiple Frames (Редактирование нескольких кадров). Не забудьте изменить диапазон отражения кадров! Нажимая на нее левой клавишей мыши вы сможете включать и выключать режим одновременного редактирования нескольких кадров. Это удобно, так как сразу видны графические состояния всех ключевых кадров и вы можете сразу с помощью модификатора Rotate (Поворот) и с помощью модификатора Scale (Масштаб) инструмента Arrow (Стрелка) поворачивать и искажать, а также пропорционально и непропорционально увеличивать или уменьшать, перемещать рыбку, создавая иллюзию приближения и удаления.

14. Протестируйте анимацию (Ctrl-Enter).

15. Скорость поведения объекта зависит от:

o  параметра в поле Frame Rate окна окне Movie Properties (Ctrl-M) - количество кадров в секунду

o  и от количества кадров между ключевыми кадрами анимации.

Сравним сценарии поведения рыбки:

a) Спокойное поведение - все твининги (черные стрелки на сиреневом фоне) примерно одинаковой длины (Между ключевыми кадрами примерно одинаковое количество кадров, т. е. временных интервалов

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

Таким образом вы сможете добиваться необходимого вам сценария поведения любого объекта.

16. Сохраните флэш-файл.

17. Опубликуйте анимацию для Web.

Пример, что должно получиться – в файле fish.swf