В первом уроке базового мини-курса «Основы анимации в 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, чтобы увидеть комментарии.

Лабораторная работа № 2

Информация

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

При создании анимации необходимо учитывать и время. Для учета времени используется шкала времени. Каждая клеточка шкалы соответствует одной абстрактной единице времени. Это не минута и не секунда – это кадры (frames). Это момент времени, которому соответствует моментальный снимок состояния объектов.

Если шкала времени отсутствует на экране, то необходимо выполнить команду W indow → Tim eline (Окно → Монтажный стол)

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

Flash поддерживает следующие типы анимации:

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

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

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

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

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

Идентификация анимаций на временной шкале

Flash отличает tween-анимацию от покадровой анимации на временной шкале путем показа различных индикаторов в каждом кадре с содержимым.

На временной шкале появляются следующие индикаторы содержимого кадра:

ü Диапазон кадров с синим фоном указывает на анимацию движения. Черная точка в первом кадре означает, что диапазону анимации присвоен целевой объект. Черные ромбы указывают последний кадр и другие ключевые кадры свойств. Ключевые кадры свойств - это кадры, содержащие изменения, явно определенные пользователем. Можно выбрать тип отображаемых ключевых кадров свойств, щелкнув диапазон анимации правой кнопкой мыши и выбрав из контекстного меню пункт «Показывать ключевые кадры» → тип. По умолчанию Flash отображает все типы ключевых кадров свойств. Все остальные кадры диапазона содержат интерполированные значения, относящиеся к свойствам анимации целевого объекта.

ü Диапазон кадров с зеленым фоном указывает на использование слоя позы обратной кинематики (IK). Слои позы содержат каркасы IK и позы. Все позы отмечены на временной шкале черными ромбами. Flash интерполирует положения каркаса в кадрах между позами.

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

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

Пример 1. Анимация перемещения объекта

1. Нарисовать в углу кадра какой-нибудь объект, например, прямоугольник.

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

2. Щелкнуть правой кнопкой мыши по этому кадру и в открывшемся контекстном меню выбрать команду Create Classic Tween (Создать классическую анимацию движение) .

3. Вокруг объекта появилась голубая рамка, в его центре – окружность с крестом.

4. Рисованный объект превратился в так называемый символ.

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

6. В последнем ключевом кадре (он должен быть выделен – подсвечен черным цветом) инструментом Selection Tool (Указатель) переместить объект в новое положение, например, в другой угол кадра.

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

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

Чтобы передвинуть ключевой кадр необходимо выполнить следующие действия:

ü выделить слой, на котором находится объект;

ü навести курсор мыши на ключевой кадр и зажать клавишу Ctrl (курсор превратится в двунаправленную стрелку);

ü нажать левую кнопку мыши и, не отпуская ее, передвинуть кадр.

Пример 2. Анимация изменения размера объекта

1. Нарисовать объект, например, прямоугольник и применить к нему изложенные выше правила анимации:

ü в первом ключевом кадре создать анимацию – Create Motion Tween (Создать анимацию движения) ;

ü в последнем ключевом кадре анимации – Insert Key frame →Zoom (Вставить ключевой кадр→Изменить масштаб) .

2. Выделить последний ключевой кадр и изменить размер объекта в 1,5 – 2 раза с помощью инструмента Free Transform Tool (Свободная трансформация)

3. Нажать клавишу Enter.

Пример 3. Анимация изменения цвета объекта

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

2. Находясь в конечном ключевом кадре, выделить объект, т.е. щелкнуть по нему левой кнопкой мыши при активном инструменте Selection Tool (Указатель)

В панели Properties (Свойства) появится поле Color Effect (Цветовой эффект).

Пример 4. Анимация изменения прозрачности объекта

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

2. Находясь в конечном ключевом кадре, выделить объект.

В панели Свойства появится поле Color Effect (Цветовой эффект).

Если в раскрывающемся списке остановиться на варианте Alpha (Прозрачность), появится дополнительное поле, в котором можно задать значение прозрачности в процентах (100% - абсолютно непрозрачный цвет; 0% - полная прозрачность).

Способы создания движения во Flash.

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

Анимация движения – в ключевых кадрах рисуется начало и окончание движения, в простых кадрах делается постепенный переход от одной ключевой фазы к другой. По умолчанию соответствующей командой автоматически создается прямолинейное и равномерное движение того, что содержится в слое между двумя ключевыми кадрами. В старых версиях, Macromedia Flash, использовалась командаСоздать анимацию движения (Create Motion Tween) . В новых версиях, Adobe Flash, надо использовать команду Создать классическую анимацию движения .

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

Но есть и другие, специальные виды движения.

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

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

2. Движение с ускорением/замедлением. Для создания неравномерного движения на вкладкеСвойства есть движок Замедление (Easing) . Этот параметр может меняться от -100 до +100. Отрицательному значению соответствует увеличение скорости к концу движения, положительному – замедление к концу движения.

Для оформления начала и конца движения надо во временном интервале создать еще 1 или 2 ключевых кадра и сделать в начале ускорение, а в конце замедление. Лучше поставить предельные значения: ±100, промежуточные обычно малоэффективны. А для высоких скоростей и ускорений требуется покадровая анимация.

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

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

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

Анимация формы – происходит постепенный переход фигуры одной формы в фигуру другой формы. Одновременно могут изменяться размеры, местоположение, цвет.

Но на анимацию формы имеется много ограничений. Она не работает:

· с растровой графикой;

· с текстом;

· с группами объектов – нельзя деформировать сгруппированные объекты;

· с клипами – деформировать можно только статичный объект.

Анимация формы реализуется так же, как и анимация движения, только в окошке Properties → Tween надо выбрать не Motions , аShape (в новых версиях – Создать анимацию формы) . Цвет кадров с анимацией формы – зеленый.

В анимации формы важную роль играют точки подсказки. Их ставят в начальном и конечном ключевых кадрах. Они обозначаются буквами латинского алфавита: a, b, c, d и так далее. Всего может быть 26 точек подсказки, вплоть до z . Буквы ставят по часовой стрелке.

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

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

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

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

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

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

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

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

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

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

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

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

Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов. Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность. Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert > Convert to Symbol (Вставка > Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.

Создать анимацию движения можно двумя способами:

• Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).
• Создать начальный ключевой кадр, затем выполнить команду Insert > Create Motion Tween (Вставка > Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.

Рис. 4.10. Результат расчета промежуточных кадров анимации

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

Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):

1. Выделяем имя слоя, чтобы сделать его текущим, и выделяем один из ключевых кадров слоя, где должна начаться анимация.
2. Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.
3. Создаем завершающий ключевой кадр, определяющий длину последовательности кадров.
4. Чтобы изменить экземпляр, группу или текстовый блок в последнем кадре, можно выполнить следующее: переместить их в новую позицию, изменить размер, угол поворота или скоса, изменить цвет экземпляра или текста.
5. Выполняем команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).
6. При изменении размера объекта следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
8. Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.
9. Флажок Orient to Path
10. Флажок Synchronize
11. Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Рис. 4.11. Выбор параметров анимации движения

Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):

1. Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.
2. Выполняем команду Insert > Create Motion Tween (Вставка > Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tweenl. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.
3. Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert > Frame (Вставка > Кадр).
4. Перемещаем объект, экземпляр или блок текста в желаемую позицию. Изменяем его размер и угол поворота, если это требуется. После всех изменений снимаем с объекта выделение. В конце последовательности кадров автоматически появляется ключевой кадр.
5. Выделяем конечный ключевой кадр последовательности и выполняем команду Window > Panels > Frame (Окно > Панели > Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).
6. Если был изменен размер, то следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
8. Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.
9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.
10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.
11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.