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

Создания нового документа ActionScript 3.0

Как обычно, создаем новый документ «Action Script 3.0» . На правой панели инструментов выбираем «Rectangle Tool» и размещаем его на сцене.

Полученый объект переводим в символ, выделив его инструментом «Selection tool» и нажав правую кнопку мыши.

Теперь на панели «timeline» нужно выбрать пятидесятый кадр и сделать его ключевым. Нажимаем правую кнопку мыши и вызываем контекстное меню, где выбираем «Insert Keyframe» .

Создадим направляющую, путь, по которому объект будет двигаться. Для этого нажимаем на слой правой кнопкой мышке и в появившемся контекстном меню выбираем «Add Classic Motion Guide» .

Должно получиться два таких слоя:

Теперь нужно на слое «Guide» нарисовать путь, по которому будет двигаться объект. При помощи инструмента «Pencil Tool» , который находится на правой панели, рисуем направляющую.

Если нарисованный путь получился немного неровным, то его можно сгладить при помощи инструмента «Smooth Tool» , который также как и карандаш находится на правой панели. Сначала используя инструмент «Selection Tool» дважды щелкните по направляющей, а затем нажмите «Smooth Tool» .

Размещаем объект для создания анимации движения

Теперь давайте разместим наш объект на нарисованном пути. Чтобы это сделать, встаньте на первый кадр слоя, возьмите объект при помощи «Selection Tool» и поднесите его к левому краю линии, он как бы «прилипнет» к нему, вернее присоединится опорная точка объекта к направляющей.

Тоже самое нужно проделать для пятидесятого кадра, возьмите объект и разместите его на правом крае линии.

Теперь нужно создать промежуточные кадры, чтобы программа сама разместила объект там где нужно в каждом кадре. Чтобы это сделать просто выбираем любой средний кадр на слое, где расположен объект, и нажимаем правую кнопку мыши, выбираем «Create Classic Tween» .

В итоге мы должны получить два таких слоя:

Запускаем анимацию движения объекта

Посмотрим, что получилось. Переходим в главное верхнее меню «File -> Publish Preview -> Flash» или нажимаем ctrl+enter на клавиатуре. Чтобы посмотреть прямо в программе — нажмите клавишу enter.

Давайте сделаем так, чтобы объект «поворачивал» , когда пробегает по пути. Для этого выберите первый кадр на слое, где расположен объект, и немного его поверните используя инструмент «Free Transform Tool» , который находится на правой панели.

Теперь в свойствах объекта, находясь на первом кадре, выберите «Orient to path» .

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

Чтобы посмотреть, что получилось, нажмите ctrl+enter.

Урок 4. Создание анимации

Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:

Анимационные эффекты - программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;

Покадровая анимация - пользователь создает каждый кадр будущей анимации;

Автоматическая tweened-анимация, или анимация трансформации, - пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.

Анимационные эффекты

Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:

Графические объекты, включая формы, сгруппированные объекты и графические символы;

Растровые изображения;

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

В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode .

Рис. 1. Выделенный текстовый объект

В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.

Рис. 2. Панель Explode

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

Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur ролик .

Рис. 3. Растровое изображение, импортированное на сцену

Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) - в результате появится панель Blur .

Рис. 4. Кнопка Edit находится внизу на панели Properties

В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).

Рис. 5. Панель Blur позволяет поменять настройки эффекта

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

Рассмотрим простейший пример - листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.

Рис. 6. Первый ключевой кадр анимации

Нарисуем кленовый листочек, например такой, как показано на рис. 6, - соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр - это кадр, в котором происходит помещение содержимого или его изменение.

Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого

Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe . В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).

Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).

Рис. 8. Последний кадр анимации

Обратите внимание на панель Properties (рис. 8) - в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.

Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie . В результате получим следующий фильм leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie . Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.

Рис. 9. Просмотр фильма в режиме Bandwidth Profiler

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

Автоматическая анимация

Рис. 10. Объект автоматически превращается в графический символ

Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Arrow и выполним команду Insert => Timeline => Create Motion Tween , в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic (рис. 10). Это означает, что анимируемый объект автоматически преобразован в графический символ. Теперь его уже невозможно произвольно редактировать инструментом Arrow как объект типа Shape. Использование символов является важным понятием во Flash. Однажды создав символ, его можно использовать несколько раз в фильме, не увеличивая размер результирующего файла. Символы делятся на графические (graphic), символы-кнопки (button) и символы-мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа (рис. 11).

Рис. 11. Каждый новый символ становится частью библиотеки

Если выполнить команду Window => Library , то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe ). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform ), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween .

Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween

Выполнив команду Control => Test Movie , получим информацию, представленную на рис. 13.

Рис. 13. Просмотр фильма в режиме Bandwidth Profiler

Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше - всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.

Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм .

Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal ) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties . Положительные значения параметра Ease приводят к замедлению движения, а отрицательные - к ускорению. Выберем максимальное ускорение объекта.

Рис. 14. Выберем максимальное ускорение объекта Ease = –100

Для этого выставим значение параметра Ease равным –100 (рис. 14). В результате получим фильм . Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.

Из представленных примеров очевидно, что автоматическая анимация движения эффективна, когда трансформация объекта при его движении задается простыми функциями (поворот, масштабирование и т.п.). Если же необходимо анимировать сложные движения (например, движение руки героя мультфильма), то здесь анимация трансформации движения не применима. Каждый кадр приходится рисовать вручную, то есть применять покадровую анимацию, состоящую из набора ключевых кадров. Таким образом, покадровая анимация - это наиболее универсальный, но вместе с тем и самый трудоемкий вид анимации, кроме того, он создает наиболее «тяжелые» файлы. Всегда, когда можно заменить покадровую анимацию автоматической, - это предпочтительно. Рассмотрим ряд примеров, которые позволяют использовать автоматическую анимацию движения при имитации полета.

Движение по заданной траектории

Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide .

В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1 .

Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15).

Рис. 15. Пример задания траектории движения

Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) - рис. 16.

Рис. 16. Параметр Snap задает режим привязки к траектории движения

После того как вы поставите флажок Snap , центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17).

Рис. 17. Объект как бы прилипает к траектории движения своим центром

Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal , - в результате получим фильм .

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

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

Рис. 18. Если поставить флажок Orient to Path , птица будет лететь головой вперед

Необходимо поставить флажок Orient to Path , и движение птицы изменится на вполне привычное (исходник к данному ролику - полет птицы.fla).

Рис. 19. Добавление одноцветного фона

Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.

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

Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20).

Рис. 20. На новом слое создадим неподвижный фоновый объект

Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз.

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

Рис. 21. Для анимации облака создадим отдельный слой

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

Во флеше очень просто создать анимацию предмета по траектории. Что для этого нужно:

1.Рисуем объект для анимации – розовый мячик. Сохраняем его в символ (Выделение – F8 )

2. Нам нужно нарисовать траекторию, по которой будет двигаться мяч. Для этого кликаем по слою с мячом и добавляем новый слой-путеводитель (Add Classic Motion Guide):

На таймлайне слой Guide выглядит как дуга, нарисовання пунктиром:

3. Создаем анимацию мяча в 2 кадра, кликнув правой по первому кадру – Create Classic Tween . Во втором кадре сдвиваем мяч вправо

Без траектории (как видим, в слое Guide отсутсвует графика, он пустой) – анимация выглядит как простое перемещение объекта слева - направо

4.На слое Guide карандашом рисуем волнообразную линию. Это и будет путь для нашей анимации:

Начальное положение:

Конечное положение:

Важно: Чтобы мяч «поймал» свою траекторию, его точка трансформации (кружок в центре) должна полностью совпадать с концами линии траектории и в первом, и в конечном кадрах. Иначе объект будет игнорировать наличие траектории и двигаться по прямой слева – направо. Поэтому стоит поправить или положение объекта, или форму линии траектории.

Здравствуйте, дорогие читатели. В своей статье я рассказала о применении линий скорости, с помощью которых можно создавать иллюзию движения объекта с ускорением. Так же в статье был показан прием с использованием стандартной анимации движения и градиентной заливки во время появления объекта. Кто не помнит или не читал эти статьи, советую ознакомиться с ними. Сегодня я хочу продолжить тему анимации движения в программе Adobe Flash и показать не линейное движение объектов, как это было ранее, а движение по траектории.

Сначала продемонстрирую работу этого приема на простом примере.

Создайте новый документ размером 600 на 200 пикселей . Назовите его First_animate . Цвет фона голубой или любой другой. Кто не помнит — сначала нужно создать новый документ Action Script 3.0. (Файл — Создать Ctrl + N). А затем на панели свойств (Ctrl + F3) задать размер рабочего окна и цвет фона.

Первый слой переименуйте в «Объект «. Создайте на нем овал (O ). Не снимая выделения с объекта. нажмите на клавишу F8 и назначьте его символом. Назовите object1.

Создайте второй слой над слоем «Объект «, назовите его «Траектория «. На этом слое нарисуйте карандашом траекторию движения шара.

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

Теперь вернемся к рабочей области. Поместите наш объект в начало траектории. Создайте ключевые кадры для слоя «Объект» и слоя «Траектория» на 30 кадре. Поместите шар на конец траектории. (В демонстрационном варианте включен каркасный вид слоя «Объект» ).

Теперь щелкните правой клавишей мыши по первому кадру слоя «Объект » и выберите пункт «Создать классическую анимацию движения «. После этого можно тестировать нашу анимацию (ctrl + Enter ).

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

Создадим новый документ размером 600 на 200 px. Зальем его градиентом от синего к желтому. Для этого создадим в самом начале слой, который назовем «Фон «, нарисуем прямоугольник во весь размер рабочей области (то есть 600 на 200 пикселей) и зальем его градиентом. Как работать с градиентом, я уже писала в статье .

Нажмите «Вставка — Создать символ (ctrl + F8)». Задайте имя kite. Нарисуйте воздушного змея. Это сделать нетрудно, он похож на ромб.

Чтобы наш воздушный змей выглядел реалистично. Давайте зададим его движение еще в самом символе kite . Это будет покачивание вверх вниз змея и развивающиеся ленты. Покачивание сделаем за счет , развивающиеся ленты за счет . Сначала займемся лентами. Их анимация будет похожа на контурную анимацию формы (ленты кстати говоря нарисованы инструментом Кисть и подходят для данной манипуляции), о которой я писала в статье

В первом уроке базового мини-курса «Основы анимации в Actionscript 3.0» вы узнаете о том:

1. Что такое анимация
2. Как добиться иллюзии движения с помощью кадров
3. О возможностях покадровой анимации
4. Об особенностях и преимуществах программной анимации

Adobe Flash , по сути, является своеобразной машиной для анимации. Уже в своих самых первых версиях он создавал ее с помощью концепции Tween . Она представляет из себя следующее:

• на шкале времени создаются два ключевых кадра с разным содержанием (изменяются положения объектов, их форма, цвет и т.д.);
• все промежуточные (переходные) кадры Flash создает самостоятельно (рис. 1).

Вот как это выглядит в программе Adobe Flash CS6 .

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

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

Что же такое анимация?

Итак, чем же, по сути, является анимация? Определение этого понятия можно найти во многих словарях. Вот, например, одно из них, которое дает Wikipedia:

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

Но объект не обязательно должен менять свое положение для того чтобы считаться анимированным. Он может просто изменить свою внешнюю форму. В 90-х годах (страшно сказать, прошлого века!) были популярны компьютерные программы, которые делали морфинг .

К примеру, у вас есть две картинки: девушка и тигр. Программа создает плавный переход/анимацию между ними (морфинг).

При создании этого флеш-ролика использовалась программа Sqirlz Morph 2.1

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

Привязка анимации ко времени - это важная концепция.

Без видимого движения или изменения анимации нет, а, следовательно, отсутствует и ощущение времени у зрителя!

Вы, наверняка, много раз видели съемку камерой, на которой отсутствует всякое движение, например, пустой комнаты или городского пейзажа.

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

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

Все помнят картину Леонардо да Винчи «Мона Лиза» - шедевр живописи, одну из самых известных картин в мировой истории искусств.

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

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

Давайте на секунду вернемся к определению анимации, с которым мы познакомились выше:

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

Авторы подобных определений вынуждены вводить в них слово иллюзия . Часто происходит так, что только иллюзия движения и существует в тех видах искусства или средах-носителях, с которыми мы сталкиваемся в жизни. Поэтому здесь самое время ввести концепцию кадров.

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

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

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

Тогда почему же мы должны называть это иллюзией движения?

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

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

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

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

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

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

После проведенных исследований было установлено, что при скорости показа 24 кадра в секунду , зритель воспринимает их как единую движущуюся картинку. Если показывать медленнее, то изображение начинает раздражающе «скакать» и иллюзия движения разрушается. Если же ускориться до 50 кадров в секунду, то реализма изображению это не добавит (хотя в программной анимации при интерактивном взаимодействии зрителя с картинкой ответ будет более быстрым и движение объектов на больших скоростях более «гладким»).

Концепция кадров делает возможными три вещи:

• хранение
• передачу
• и показ

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

Настало время дать более общее определение кадру. До сего момента, говоря о нем, мы имели в виду фотографию, картинку или рисунок. Теперь давайте считать следующим образом: кадр - это запись системы в определенный момент времени .

Этой системой может быть:

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

Программирование кадров

Поскольку компьютер может считать «на лету», то у вас есть возможность обойтись без длинного списка описаний для кадров. Вы можете все упростить, описав только первый кадр и установив правила по созданию всех последующих кадров . Теперь компьютер не просто создает картинку из описания, а:

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

Только представьте себе какое количество места вы могли бы сэкономить, используя такой подход! Картинки всегда занимают приличный объем дискового пространства и пропускной способности сетей. А 24 картинки в секунду могут стать просто «неподъемными». Если вам удастся свести все к одному описанию и определению правил, у вас появляется возможность уменьшить размер файла в сотни раз.

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

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

Если вы стараетесь поддерживать определенную частоту кадров, то она порой не оставляет времени вашему процессору (миллисекунды) все это «переварить». Поэтому если компьютер не может просчитать сцену вовремя, то качество воспроизведения (частота кадров) будет страдать. С другой стороны, обычная анимация, основанная на картинке, мало заботится о том, что находится на сцене и насколько эта картинка сложна. Она просто вовремя показывает следующую картинку и все.

Преимущества программной анимации

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

Вы, наверняка, смотрели фильм «Терминатор 2: Судный день». В конце фильма, каждый раз Терминатор исчезает в плавильном котле с фразой «I’ll be back». Он делает это в кинотеатрах, по телевизору и на DVD. Даже нажимая на кнопку «Стоп» или «Пауза», вы не в состоянии его остановить. И это потому, что обычный фильм - это не более чем последовательность картинок . В конце этого фильма они (картинки) показывают исчезающего в пекле Терминатора и это все на что они способны.

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

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

Тогда подобные вещи были в новинку, поэтому и хотелось воскликнуть: «Круто!» Справедливости ради, нужно сказать, что не все из подобных сайтов были действительно крутыми. Вспоминая сегодня то, что я видел тогда, можно сказать, что только два или три из них, действительно, врезались в память.

По длительности анимация на них была не более минуты. Этого хватало только на то, чтобы я просмотрел их раза три подряд. Они что были плохими? Нет, просто после нескольких просмотров внимание слабело, потому что смотреть уже было больше нечего, как в фильме о Терминаторе. И здесь можно говорить об определенном парадоксе - в фильмах такого рода анимация не меняется, каждый кадр, от первого до последнего заранее предопределен.

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

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

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

А вот и четвертый. Во время фильма, зритель, с помощью мыши или клавиатуры, по своему желанию, мог бы изменять некоторые факторы? Это позволило бы ему взаимодействовать с объектами на сцене. Такой фильм был бы уже далеко не таким каким мы его привыкли видеть, правда? Можно было бы, даже, спасти Терминатора!

Виртуальная реальность

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

После этого вы могли бы разрешить пользователю взаимодействовать с ним:

• «взять» его мышью
• или перемещать с помощью клавиатуры.

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

Вы можете в этом убедиться сами, поиграв с красным мячом ниже.

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

Итоги

В этом вступительном уроке мы обсудили:

• основы анимации;
• отличия покадровой и программной анимации;
• основные преимущества динамической анимации.

Это концептуальные, базовые знания, на основе которых будет строиться весь последующий материал бесплатного мини-курса «Основы анимации в Actionscript 3.0 ».

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

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

А какой вид анимации вызывает больший интерес лично у Вас? Напишите об этом, оставив комментарий ниже. Также если у Вас появились вопросы во время изучения этого урока, то задавайте, не стесняйтесь, я с удовольствием на них отвечу.

До встречи в следующем уроке!

Пожалуйста, включите JavaScript, чтобы увидеть комментарии.

Декларация по УСН