Главная   Разработки   Галерея   Портфолио   Обо мне    

  Методические разработки

Flash технологии (Macromedia Flash 8)
Основной курс по ИКТ
 

 
II МОДУЛЬ

III МОДУЛЬ

I МОДУЛЬ

 

 

 

  Красноярский край  
     
  Карта Красноярского края  
 
Flash-технологии - 2 модуль
I МОДУЛЬ II МОДУЛЬ III МОДУЛЬ
  Главная Понятие и виды анимации Шкала времени -  Time Line Работа со слоями Покадровая анимация Анимация Motion Tweening Анимация по траектории Символы Анимация - трансформация Слой-маска Эффекты Timeline
 

Расчетная анимация

При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами.

Вы рисуете объект, потом в другом ключевом кадре производите изменения и Flash рассчитает те кадры, которые лежат между этими двумя ключевыми кадрами и вы получаете плавную анимацию.

Существуют два вида расчетных анимаций: твининг (Tweening - движение) и шейпинг (Shaping - форма ).

Под изменением объекта в твининге (Tweening) понимается его:

  • перемещение,
  • масштабирование,
  • поворот,
  • искажение.

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

Под изменением в трансформации (шейпинге, Shaping) понимается принципиальное изменение системы контуров.

Скорость и плавность анимации зависят:

  • от количества расчетных кадров между ключевыми кадрами, которые вы отводите под изменение,
  • скорости вашего Flash фильма (movie).

Анимация Motion Tweening

Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:

  • размер (как пропорционально, так и непропорционально - отдельно высоту и ширину),
  • наклон,
  • расположение,
  • угол поворота,
  • цветовые эффекты,
  • можно использовать направляющие слои для задания траектории движения объекта.

Включить Motion Tweening можно несколькими способами.

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

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

Это же можно сделать, выбрав в главном меню Insert - Timeline - Create Motion Tween (Создать расчетную анимацию).

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

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

  1. Нарисуйте в первом кадре окружность.
  2. Сделайте активным первый кадр, затем, нажав правую клавишу мыши, в контекстном меню выберите пункт Create motion tween (Создать расчетную анимацию). Это же можно сделать, выбрав в главном меню Insert - Timeline - Create Motion Tween. Следует заметить, что нарисованный нами рисунок в этом слое автоматически будет преобразован в символ и вокруг него появится синяя рамка.
  3. Затем выделите кадр, например, 25.
  4. Сделайте его ключевым, нажав клавишу F6 или нажмите правую клавишу мыши и в контекстном меню выберите пункт - Insert Keyframe (Вставить ключевой кадр), выбранный кадр станет черного цвета с белым кружочком, т.е. он станет ключевым (кадром в котором задаются параметры изменения анимации), а между предыдущим и созданным кадром будет нарисована стрелочка на сиреневом фоне символизирующая анимацию.
  5. Далее, обратите внимание, вы должны оставаться в 25 кадре, переместите окружность в другое место.
  6. Протестируйте анимацию (сочетание клавиш Ctrl-Enter или через главное меню Control - Test Movie).

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

А теперь, немного усложним анимацию.

Находясь в последнем кадре, измените размеры объекта, а при желании и его наклон. И больше от вас ничего не требуется, все преобразования между кадрами Flash выполнит автоматически.

Давайте подробнее рассмотрим панель Properties для расчетной анимации.

 

  • Frame - имя кадра, комментарии ...
  • Label Type - тип кадра (имя, комментарий ...)
  • Tween - тип анимации
  • Ease-скорость
  • Scale-плавное изменение масштаба
  • Rotate-поворот по или против часовой стрелки
  • Orient to Path-ориентировать по пути
  • Sync-привязка к объекту
  • Snap-привязка к объекту

Пример "Отскакивающий мяч"

  1. Создайте новый файл (Ctrl-N). 

В рабочей области:

  1. Нарисуйте окружность в верхней части рабочего поля, по центру и залейте ее радиальным градиентом.
  2. В главном меню выберите Insert - Create Motion Tween (или правой кнопкой мыши - контекстное меню ...). Теперь кадр имеет светло-фиолетовый цвет.

В шкале времени:

  1. Создадим ключевые кадры в 30-м и в 60-м кадрах ( Для этого нужно выделить в шкале времени в рабочем слое нужный кадр и выбрать в главном меню Insert - Timeline - Keyframe (Вставить ключевой кадр) или нажать на клавиатуре F6 или правой кнопкой мыши и в контекстном меню - Insert Keyframe...).
  2. Выделим 30-й ключевой кадр, затем выделим мячик и с помощью панели Properties, задав координаты по оси Y на 200 больше, переместим наш объект на 200 пикселей вниз.
  3. Перейдем в 60-й кадр и вернем наш объект с помощью панели Properties на прежнее место, задав Y на 200 пикселей меньше.
  4. Перейдем в 1-ый кадр и сделаем нашу анимацию более реалистичной. Шарик должен двигаться быстрее при движении вниз и медленнее при движении вверх.
  5. В панели Properties в поле Ease выберите значение -100. Это означает, что анимация будет медленнее в начале и быстрее в конце. Также установим вращение по часовой стрелке нашего шарика. Для этого выберем в поле Rotate значение CW и введем в поле times значение 1.
  6. Теперь перейдем в 30-й кадр. В этом кадре шарик находится в нижней части - в конце своего падения. В панели Properties в поле Ease выберите значение +100. Это означает, что анимация будет быстрее в начале и медленнее в конце. Также установите вращение по часовой стрелке нашего шарика.
  7. Протестируйте свою анимацию, при желании сохраните.

Задание

Сделайте движение мячика более реалистичным. При движении вниз мяч должен двигаться быстрее, а в вверх медленнее и немного деформироваться, при отскакивании.

Редактор плавности движения

Сразу замечу, что редактируется только скорость движения и положение объекта строго между пунктом а и б. Итак, рядом с (параметром кейфрэйма) Ease кнопочка (Edit..,), расширяющая возможности Ease:

шкала X - последующие кадры до следующего ключевого кадра, шкала Y - процент пути

для каждого параметра (Position, Rotation, Scale, Color, Filters) можно задавать свои кривые

получается такой мультик (обратите внимание, в нем всего два (!) keyframe'а анимации - в пункте а и в пункте б - остальные повороты отрегулированы в редакторе Custom Ease In / Ease Oute)

Анимирование нескольких объектов

Самое важное. Если в вашем фильме используется несколько движущихся объектов, то вам необходимо использовать для каждого объекта свой слой.

Попробуем на примере.

Нарисуйте на одном слое 2 облака, попробуйте анимировать их самостоятельно, так, чтобы они двигались друг к другу. Хм, не получилось ... Оба облака объединились и двигаются в одну и ту же сторону. И никак их не разделить.

Мы с вами рисовали воздушные шарики, когда учились работать с шкалой времени и слоями. Давайте воспользуемся этой заготовкой. Откройте документ с воздушными шариками. Создадим эффект полета шариков. У нас есть оформление (лес, травка, облака, земля). И два шарика, на разных слоях.

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

Если при рисовнии случайно нарисовали несколько объектов в одном слое, а потом оказалось, что их нужно было разделить на нескольких, то воспользуйтесь командой Distribute To Layers. (Выделите объект, нажав на нем правую кнопку мыши в контекстном меню выберите пункт Distribute To Layers. Запомните эту возможность распределять объекты по слоям).

Если вам необходимо анимировать несколько объектов, каждый из этих объектов должен располагаться на отдельном слое!

 

 




   Главная   Разработки   Галерея   Портфолио   Обо мне    

Красноярский краевой Дворец пионеров и Школьников ©2005-2008