Анімація в Flash cs4

Создание пустого символа

1. 
   Выполните одно из следующих действий.
   
   • 
     Выберите меню "Вставка" > "Новый символ".
     
   • 
     Нажмите кнопку "Новый символ" в нижней левой части панели "Библиотека".
     
   • 
     Выберите команду "Новый символ" из меню "Панель" в правом верхнем углу панели "Библиотека".
     
2. 
   Введите имя символа и выберите поведение в диалоговом окне "Создать новый символ".
   
3. 
   Нажмите кнопку "ОК".
   

4. 
   Создание содержимого символа производится при использовании временной шкалы, инструментов рисования, путем импорта мультимедийных данных и создания экземпляров других символов.
   
5. 
   Чтобы вернуться в режим редактирования документа, выполните одно из следующих действий.
   
   • 
     Нажмите кнопку "Назад".
     
   • 
     Выберите меню "Редактирование" > "Редактировать документ".
     
   • 
     Щелкните имя сцены на панели редактирования.
     

2. Использование анимации

1. О слоях в анимации

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

2. Создание ключевых кадров

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

3. О представлении анимации на временной шкале

• 
  Черная точка в начальном ключевом кадре означает анимацию движения, черная стрелка на светло-голубом фоне означает промежуточные tween-кадры.
  

• 
  Черная точка в начальном ключевом кадре означает анимацию формы, черная стрелка на светло-зеленом фоне означает промежуточные кадры.
  

• 
  Пунктирная линия означает, что tween-анимация прервана или неполна, например пропущен последний ключевой кадр.
  

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

• 
  Маленькая a означает, что кадру назначено действие на панели "Действия".
  

• 
  Красный флажок означает, что кадр содержит метку.
  

• 
  Зеленая двойная косая черта означает, что кадр содержит комментарий.
  

• 
  Золотая узловая точка показывает, что кадр является именованной меткой.
  

4. Tween-анимация

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

Tween-анимация является эффективным способом создания движения и изменений с течением времени при одновременной минимизации размера файла. В tween-анимации хранятся только значения изменений между кадрами.

Распределите объекты по слоям, чтобы быстро подготовить элементы документа для tween-анимации.

Чтобы создать динамическую маску, примените tween-анимацию к объекту на маскирующем слое.

См. следующие видеоучебники по анимации (англ).

• 
  Создание анимации формы: www.adobe.com/go/vid0124_ru
  
• 
  Создание анимации движения: www.adobe.com/go/vid0125_ru
  
• 
  Копирование и вставка ActionScript из анимации: www.adobe.com/go/vid0126_ru
  
• 
  Создание и анимация масок: www.adobe.com/go/vid0127_ru
  

5. Распределение объектов по слоям для tween-анимации

Команду "Распределить по слоям" можно применить к любому типу элементов в рабочей области, в том числе к графическим объектам, экземплярам, растровым изображениям, видеоклипам и разбитым блокам текста.

1. 
   Выберите объекты, которые следует распределить по слоям. Объекты могут находиться на одном слое или на нескольких слоях, включая несмежные слои.
   
2. 
   Выполните одно из следующих действий.
   
   • 
     Выберите "Изменение" > "Временная шкала" > "Распределить по слоям".
     
   • 
     Выберите один из выбранных объектов, щелкнув правой кнопкой мыши, и выберите "Распределить по слоям".
     

3. Анимация движения

1. Добавление анимации движения к экземплярам, группам или шрифту

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

1. Создание анимации движения с помощью параметра "Анимация движения"

1. 
   Щелкните имя слоя, чтобы сделать его активным, и выберите пустой ключевой кадр слоя, с которого должна начинаться анимация.
   
2. 
   Чтобы создать первый кадр анимации движения, выполните одно из следующих действий.
   
   • 
     Создайте графический объект с помощью инструментов "Перо", "Овал", "Прямоугольник", "Карандаш" или "Кисть", а затем преобразуйте его в символ.
     
   • 
     Создайте экземпляр, группу или текстовый блок в рабочей области.
     
   • 
     Перетащите экземпляр символа с панели "Библиотека".
     
3. 
   Создайте второй ключевой кадр, на котором должна заканчиваться анимация, и оставьте новый ключевой кадр выбранным.
   
4. 
   Чтобы изменить элемент в конечном кадре, выполните одно из следующих действий. Чтобы создать промежуточные кадры для цвета элементов, которые не являются экземплярами или текстовыми блоками, используйте анимацию формы.
   
   • 
     Переместите элемент в новую позицию.
     
   • 
     Измените размер, поворот и наклон элемента.
     
   • 
     Измените цвет элемента (только экземпляра или текстового блока).
     
5. 
   Щелкните мышью любой кадр из промежуточных кадров и в инспекторе свойств ("Окно" > "Свойства" > "Свойства") во всплывающем меню "Tween-анимация" выберите "Движение".
   
6. 
   Если на шаге 4 был изменен размер элемента, выберите "Масштаб", чтобы создать промежуточные кадры для размера выбранного элемента.
   
7. 
   Чтобы обеспечить более реалистичное ощущение движения, примените замедление/ускорение к анимации движения. Чтобы применить замедление/ускорение к анимации движения, воспользуйтесь ползунком "Замедлить", чтобы указать значение ускорения для каждой созданной анимации движения, либо используйте диалоговое окно "Заказное замедление/ускорение", чтобы более точно управлять скоростью анимации движения.
   

• 
  Чтобы начать движение медленно и ускорить по направлению к конечному кадру анимации, перетащите ползунок вверх или введите отрицательное значение между 1 и 100.
  
• 
  Чтобы начать движение быстро и замедлить по направлению к конечному кадру анимации, перетащите ползунок вниз или введите положительное значение между 1 и 100.
  
• 
  Чтобы обеспечить более сложное изменение скорости между промежуточными кадрами, используйте диалоговое окно "Заказное замедление/ускорение".
  

8. 
   Чтобы выполнить поворот выбранного элемента при tween-анимации, выберите параметр в меню "Повернуть".
   
   • 
     Чтобы запретить поворот, выберите "Нет" (параметр по умолчанию).
     
   • 
     Чтобы повернуть объект один раз в направлении, требующем наименьшего движения, выберите "Авто".
     
   • 
     Чтобы повернуть объект как указано, а затем ввести число поворотов, выберите "По часовой стрелке" или "Против часовой стрелки".
     

9. 
   При использовании пути движения выберите параметр "Ориентация по контуру", чтобы сориентировать базовую линию анимируемого элемента по отношению к контуру движения.
   
10. 
    Чтобы синхронизировать анимацию экземпляров графических символов с основной временной шкалой, выберите параметр "Синхр." в инспекторе свойств.
    

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

Создание анимации движения с помощью команды "Создать анимацию движения"

1. 
   Выберите пустой ключевой кадр и нарисуйте объект в рабочей области или перетащите экземпляр символа с панели "Библиотека".
   

Примечание: Для создания tween-анимации необходимо, чтобы на слое находился только один элемент.

2. 
   Выберите "Вставить" > "Временная шкала" > "Создать анимацию движения" Если на шаге 1 был нарисован объект, Flash автоматически преобразует объект в символ и присвоит ему имя tween1.
   
3. 
   Щелкните мышью область внутри кадра, где должна заканчиваться анимация, и выберите "Вставить" > "Временная шкала" > "Кадр".
   
4. 
   Переместите элемент в рабочей области в нужную позицию. Настройте размер элемента, чтобы создать промежуточные кадры размера. Чтобы создать промежуточные кадры поворота, настройте поворот элемента. После завершения настроек снимите выделение с объекта.
   

Ключевой кадр автоматически добавляется в конец диапазона кадров.

5. 
   Перетащите стрелку к значению "Ускорение" или введите значение, чтобы настроить скорость изменений между промежуточными кадрами:
   
   1. 
      Чтобы начать движение медленно и ускорить по направлению к конечному кадру анимации, перетащите ползунок вверх или введите значение между -1 и -100.
      
   2. 
      Чтобы начать движение быстро и замедлить по направлению к конечному кадру анимации, перетащите ползунок вниз или введите положительное значение между 1 и 100. По умолчанию скорость изменений между промежуточными кадрами постоянна. Ускорение дает более естественный вид ускорения или замедления за счет постепенного изменения скорости изменений.
      
   3. 
      Чтобы обеспечить более сложное изменение скорости между промежуточными кадрами, используйте диалоговое окно "Заказное замедление/ускорение".
      
6. 
   Чтобы выполнить поворот выбранного элемента при tween-анимации, выберите параметр в меню "Повернуть".
   
   1. 
      Чтобы повернуть объект один раз в направлении, требующем наименьшего движения, выберите "Авто".
      
   2. 
      Чтобы повернуть объект как указано, а затем ввести число поворотов, выберите "По часовой стрелке" или "Против часовой стрелки".
      

Примечание: Поворот на шаге 6 добавляется к любому повороту, который был применен к конечному кадру на шаге 4.

7. 
   При использовании пути движения выберите параметр "Ориентация по контуру", чтобы сориентировать базовую линию анимируемого элемента по отношению к контуру движения.
   
8. 
   Выберите "Синхронизировать", чтобы гарантировать, что экземпляр правильно воспроизводится в цикле в основном документе.
   

Используйте команду "Синхронизировать", если число кадров в последовательности анимации внутри символа не кратно числу кадров, которое занимает в документе графический экземпляр.

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

3. Tween-анимация вдоль контура

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

В этом примере два объекта на отдельных слоях прикрепляются к одному и тому же контуру движения.

Видеоучебник по анимации движения см. по адресу: www.adobe.com/go/vid0125_ru.

Создание контуров движения для tween-анимации

1. 
   Создание последовательности tween-анимации движения При выборе параметра "Ориентировать по контуру" базовая линия промежуточных элементов ориентируется по контуру движения. При выборе параметра "Привязать" точка регистрации промежуточного элемента привязывается к пути движения.
   
2. 
   Выполните одно из следующих действий.
   
   • 
     Выберите слой, содержащий анимацию, и выберите "Вставить" > "Временная шкала" > "Путеводитель".
     
   • 
     Выберите слой, содержащий анимацию, щелкнув правой кнопкой мыши (Windows) или удерживая нажатой клавишу "Control" (Macintosh), и выберите команду "Добавить путеводитель".
     

Flash создает новый слой над выбранным слоем со значком путеводителя слева от имени слоя.

Ведущий слой над выбранным слоем

3. 
   Чтобы нарисовать нужный контур, используйте инструменты "Перо", "Карандаш", "Линия", "Окружность", "Прямоугольник" или "Кисть".
   

4. 
   Привяжите центр к началу линии в первом кадре или к концу линии в последнем кадре.
   

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

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

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

Привязка слоев к ведущему слою

  Выполните одно из следующих действий.

• 
  Перетащите существующий слой под ведущий слой. Слой под ведущим слоем располагается с отступом. Все объекты на этом слое автоматически привязываются к контуру движения.
  
• 
  Создайте новый слой под ведущим слоем. Объекты на этом слое, для которых применяется tween-анимация, автоматически двигаются вдоль контура движения.
  
• 
  Выберите слой под ведущим слоем. Выберите "Изменение" > "Временная шкала" > "Свойства слоя" и выберите "Направляющая".
  

Отсоединение слоев от ведущего слоя

  Выделите слой для отмены связи и выполните одно из следующих действий.

• 
  Перетащите слой в положение над ведущим слоем.
  
• 
  Выберите "Изменение" > "Временная шкала" > "Параметры слоя" и выберите "Обычный" для типа слоя.
  

4. Применение заказного ускорения/замедления к анимации движения

Диалоговое окно "Заказное замедление/ускорение" выводит диаграмму, в которой дается графическое представление о скорости движения во времени. На горизонтальной оси показаны кадры, а на вертикальной – процент изменений. Первый ключевой кадр представлен как 0%, а последний ключевой кадр – как 100%.

Наклон кривой диаграммы показывает скорость изменений объекта. Если кривая горизонтальна (без наклона), то скорость равна нулю; если кривая вертикальна, то изменение происходит мгновенно.

Диаграмма "Заказное замедление/ускорение", на которой отображена постоянная скорость.

Дополнительные элементы управления для диалогового окна "Заказное замедление/ускорение"

Использование флажка "Одна настройка для всех свойств"

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

Всплывающее меню "Свойства"

Включено только в том случае, если флажок "Использовать один параметр для всех свойств" не установлен. Если включено, то для каждого из пяти свойств, появляющихся в меню, имеется отдельная кривая. При выборе свойства в меню отображается кривая для этого свойства. Существуют следующие свойства.

Позиция

Указывает заказные настройки замедления для положения анимированного объекта в рабочей области.

Поворот

Задает заказные настройки замедления для поворота анимированного объекта. Например, можно настроить, насколько быстро или медленно анимированный символ вращается в рабочей области, прежде чем повернется к пользователю.

Масштаб

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

Цвет

Задает заказные настройки замедления скорости изменения цвета, применяемых к анимированному объекту.

Фильтры

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

Кнопки воспроизведения и остановки

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

Кнопка сброса

Позволяет сбросить кривую скорости к линейному состоянию, которое является состоянием по умолчанию.

Положение выбранной опорной точки

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

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

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

По умолчанию опорная точка привязана к сетке. Привязку можно отключить, нажав клавишу X во время перетаскивания опорной точки.

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

Использование диалогового окна "Заказное замедление/ускорение"

1. 
   Выберите на временной шкале слой, к которому применена анимация движения.
   
2. 
   В инспекторе свойств нажмите кнопку "Изменить" рядом с ползунком "Замедление".
   
3. 
   (При необходимости) Чтобы отобразить кривую для свойства, снимите флажок "Использовать один параметр для всех свойств" и выберите свойство в меню.
   
4. 
   Чтобы добавить опорную точку, щелкните мышью диагональную линию, удерживая нажатой клавишу "Ctrl).
   
5. 
   Чтобы увеличить скорость объекта, перетащите опорную точку наверх, чтобы уменьшить скорость объекта, перетащите управляющую точку вниз.
   
6. 
   Для дальнейшей настройки кривой замедления и настройки значения ускорения tween-анимации перетащите маркеры вершин.
   
7. 
   Чтобы просмотреть анимацию в рабочей области, нажмите кнопку воспроизведения в левом нижнем углу.
   
8. 
   Выполняйте настройку до тех пор, пока не будет достигнут нужный эффект.
   

4. Анимация формы. Управление изменениями формы с помощью контрольных точек

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

Контрольные точки содержат буквы (от a до z), которые определяют точки, соответствующие начальной и конечной форме. Можно использовать до 26 контрольных точек.

В начальном ключевом кадре контрольные точки желтые, в конечном ключевом кадре они зеленые, а вне кривой они красные.

При создании tween-анимации формы для получения наилучших результатов следуйте следующим правилам.

• 
  В сложной анимации формы создавайте промежуточные формы и делайте для них tween-анимацию, вместо того, чтобы определять только начальную и конечную форму.
  
• 
  Убедитесь в логичной расстановке контрольных точек. Например, если в треугольнике используется три контрольных точки, они должны быть расставлены в одинаковом порядке как для исходного треугольника, так и для промежуточного. Если порядок в первом кадре abc , то порядок acb во втором кадре невозможен.
  
• 
  Контрольные точки лучше всего размещать против часовой стрелки, начиная с верхнего левого угла фигуры.
  

Видеоучебник по анимации формы см. по адресу: www.adobe.com/go/vid0124_ru.

Использование контрольных точек

1. 
   Выберите первый кадр в последовательности tween-анимации формы.
   
2. 
   Выберите "Изменение" > "Фигура" > "Добавить контрольную точку" Начальная контрольная точка выглядит как красная окружность с буквой a, расположенной на фигуре.
   
3. 
   Переместите контрольную точку в нужную точку.
   
4. 
   Выберите последний ключевой кадр в последовательности анимации. Конечная контрольная точка выглядит как зеленая окружность на фигуре с буквой a.
   
5. 
   Переместите контрольную точку в положение на конечной форме, соответствующее первой помеченной точке.
   
6. 
   Воспроизведите анимацию снова, чтобы просмотреть, как контрольные точки изменяют анимацию формы. Чтобы настроить tween-анимацию, переместите контрольные точки.
   
7. 
   Чтобы добавить дополнительные контрольные точки, повторите этот процесс. Новые точки появляются со следующими буквами (b, c и т.д.).
   

Просмотр всех контрольных точек

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

Удаление контрольной точки

 Перетащите контрольную точку с рабочей области.

Удаление всех контрольных точек

 Выберите "Изменение" > "Фигура" > "Удалить все контрольные точки".

Завдання на лабораторну роботу №2

Продемонструвати вміння створювати анімацію в Flash CS4:

1. 
   Покадрова анімація: вміти використовувати інструменти Onion skin…, Onion Markers, Edit Mltiple objects.
   
2. 
   Анімація форми: вміти створювати контрольні точки.
   
3. 
   Анімація руху:
   
   1. 
      Вміти працювати з символами
      
   2. 
      Створювати рух по контуру
      
   3. 
      Застосовувати зміну швидкості руху
      

Необхідно створити щось на кшталт банеру або мультфільму (на вибір).

Допоміжна література

1. 
   К. Поляков.Уроки по Adobe Flash CS3
   

(настоятельно рекомендуется для начального знакомства)

2. 
   Создание анимации – Раздел официальной справки от Adobe: http://help.adobe.com/flash/9.0_ru/UsingFlash/
   

жүктеу/скачать 267.5 Kb.

Достарыңызбен бөлісу: