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

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

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

 
II МОДУЛЬ

III МОДУЛЬ

I МОДУЛЬ

 

 

 

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

Анимация во Flash

Анимация в Macromedia Flash - это последовательность изображений (кадров), при последовательном просмотре которых возникает иллюзия движения или изменения свойств объекта.

Виды анимации во Flash

Покадровая и расчётная Flash-анимация
Расчётная анимация может быть реализована двумя способами:
        Анимация формы — Tween Shape
        Анимация движения — Tween Motion
Принципиальное отличие между этими способами состоит в том, что в первом способе Flash работает с графикой как с набором графических примитивов (линий, дуг, окружностей, прямоугольников, заливок и т.д.), а во втором случае Flash будет работать только со сгруппированными объектами или символами.

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

К элементарным преобразованиям, которыми мы с вами можем манипулировать при создании расчётной анимации, относятся:

  • изменение координат,
  • размеров,
  • масштаба,
  • угла поворота,
  • формы,
  • цветовых атрибутов контура и заливки объекта.

Существует два принципиально разных способа анимации:

  1. Первый - прорисовывать или импортировать растровую графику в каждый кадр, и используя Flash в качестве средства, позволяющего быстро пролистывать изображения, просмотреть фильм. Это покадровая анимация.
  2. Второй - заставить Flash автоматически просчитывать промежуточные кадры между ключевыми кадрами (keyframes) с основным содержимым, и отстоящими друг от друга на любое количество кадров. Это твининг (tweening) - анимация движения, свойств или шэйпинг (shaping) - трансформация формы или свойств объекта, таких, как цвет, прозрачность, яркость и т.д.

Саму анимацию во Flash условно можно разделить на несколько типов:

  1. Покадровая анимация
  2. Расчетная анимация движения
    • по прямой
    • по траектории
  3. Расчетная анимация свойств объекта (цвета, прозрачности, яркости)
  4. Расчетная анимация-трансформация формы.

Для того, чтобы создавать анимацию нужно уметь работать со шкалой времени (timeline), слоями (layers), кадрами (frames) и символами (symbols).

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

Покадровая анимация

Начнем с самого простого, с покадровой анимации.

Примеры

 

Давайте попробуем сделать простенькую покадровую анимацию.

  1. Создайте новый файл.
  2. Выберите в главном меню Modify - Document (Модифицировать - Документ). Или дважды посередине информационного поля, где указана частота фильма .
  3. В открывшемся окне Document Properties в строке Dimensions (Размеры) в полях Width (Ширина) и Height (Высота) задайте необходимые размеры рабочего поля и частоту кадров (Frame Rate) - 5.
  4. В панели инструментов Tools (Инструменты) выберите инструмент Text (Текст), нажав на него левой клавишей мыши.
  5. Установите в панели Properties в поле Font (Шрифт) любой шрифт содержащий кириллицу.
  6. Задайте параметры шрифта: размер шрифта, цвет, полужирный и т.д.
  7. Кликните на рабочем поле левой клавишей мыши и в возникшей пустой текстовой метке наберите текст, например, букву "П".
  8. Создайте следующий ключевой кадр. Для этого:
    • выделите следующий пустой кадр в слое, щелкнув по нему левой клавишей мыши (он окрасится в синий цвет),
    • нажмите на клавиатуре клавишу F6 или нажмите правую клавишу мыши, появится контекстное меню, выберите пункт Insert Keyframe. Содержимое предыдущего кадра полностью скопируется в следующий кадр.
  9. Теперь в этом же текстовом поле добавьте букву "Р". Для этого:
    • дважды щелкните по букве "П",
    • поставьте курсор после буквы "П"
    • напечатайте букву "Р"
  10. И так далее, пока не получится слово "Привет", добавляйте последовательно ключевой кадр и новую букву к существующим.
  11. вот так выглядит временная шкала - кадры, при выборе отображения с предпросмотром содержимого (Preview in Context).
  12. Протестируйте анимацию (сочетание клавиш Ctrl-Enter или через главное меню Control-Test Movie)
  13. Сохраниете свою первую анимацию (File-Save).

 

Достоинства:

  1. Покадровая анимация дает, в некотором смысле, больший контроль над анимацией. Она позволяет более точно воспроизводить любое изменение.
  2. Это единственный способ организовать смену абсолютно независимых изображений - слайд шоу (например, создавая обычный баннер средствами Flash).
  3. И все остальное, для чего возникает необходимость прорисовывать каждый кадр вручную.

Недостатки:

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

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

Задание

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

Принцип построения анимации:

Сначала рисуем стебелек, он растет, появляются листики, потом бутон, а потом цветок распускается. Ваша анимация займет, кадров 10.

 

 




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

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

Робототехника в центретехнического творчества http://shush-ctt.ru.