Основы анимации. Анимация движения по заданной траектории

Делать flash-ролики с анимацией движения , но это движение было по прямой. Теперь пора разобраться, как делать движение по заданной траектории. Для задания траектории нам понадобится дополнительный слой.

Откройте программу Macromedia Flash Professional 8 , и создайте в ней новый документ. Слои создаются на временной ленте с помощью нажатия иконки Insert Layer (вставить слой). Для создания нового слоя можно также выбрать в меню Insert — Timeline — Layer . Так создается обычный слой. Возможно, Вы это уже делали, когда создавали без траектории.

Но теперь Вам понадобится направляющий слой. Он создается с помощью иконки Add Motion Guide (добавить направляющую движения), или с помощью меню Insert — Timeline — Add Motion Guide . Создайте его, он у Вас появится на временной ленте выше основного слоя. Если направляющий слой будет ниже — он не будет работать. В таком случае его нужно перетащить мышкой вверх.

Выделяете в основном слое первый кадр, с которого начнется анимация движения, и если он не ключевой, делаете его ключевым с помощью меню Insert - Timeline - Keyframe (или с помощью нажатия на него правой клавишей мыши и выбора Insert Keyframe ). Размещаете на этом кадре объект. Это может быть импортированная картинка, группа объектов, или текст. Если Вы импортируете картинку, сначала подготовьте ее в графическом редакторе, и затем в программе Macromedia Flash выберите в меню File — Import — Import to Stage . Если объект рисованный, то сгруппируйте его с помощью меню Modify — Convert into Symbol .

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

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

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

Чтобы в программе Macromedia Flash Professional 8 объект притянулся, в меню View — Snapping должны быть включены пункты Snap to Guides (захват по направляющим) и Snap to Objects (захват по объектам). Также проверьте, включен ли пункт Snap Align (захват по выравниванию). Хотя последний пункт на притяжение объекта к траектории не влияет, все же его лучше тоже включить.

Теперь перейдите программе Macromedia Flash на конечный кадр. Выделите его в направляющем слое, и выберите в меню Insert — Timeline — Frame . Добавится обыкновенный кадр, не ключевой (для добавления можете также нажать правой клавишей мыши на кадр, и выбрать Insert Frame ). Таким образом, у Вас будет на конечном кадре в основном слое ключевой кадр, а в направляющем слое простой кадр.

После этого в последнем кадре притяните объект к конечной точке траектории. Далее делаете в программе Macromedia Flash анимацию движения: выделяете какой-нибудь промежуточный кадр между начальным и конечным, и в панели Properties выбираете в списке Tween (заполнение кадров) пункт Motion (движение). Если Вы хотите, чтобы объект поворачивался по направлению траектории, а не просто перемещался, включаете в панели свойств пункт Orient to Path (если этого свойства Вы не видите, нажмите на белый треугольник в правом нижнем углу панели свойств).

Также в панели свойств в программе Macromedia Flash Professional 8 Вы можете добавить следующие свойства для Вашей анимации движения:

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

Ease (замедление): используется, если нужно ускорить, или замедлить движение. Для применения опции передвиньте бегунок вверх или вниз, или впишите в окошко цифры от −100 до 100.

Rotate (вращение): объекты при движении вращаются по или против часовой стрелки, Количество оборотов объекта во время анимации движения прописывается в окошке.

Задание: сделать flash-ролик с анимацией движения по траектории. Вот, что получилось у меня:

В этом flash-ролике я использовал, кроме анимации движения (кораблик) также (слова) и (волны).

Видео о том, как сделать анимацию движения по траектории в программе Macromedia Flash Professional 8

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

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

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

Что важно знать

Когда художник работает над персонажем, который оказался в определенной ситуации, ему/ей важно в первую очередь создать действие. Любая сцена, в которую вы помещаете свой персонаж, должна помочь зрителю увидеть намерение, побуждающее его к действию. Увидеть мотивы, чувства, навыки (или их отсутствие) и личность в целом. Этой цели необходимо достичь даже при полном отсутствии диалога. И здесь у рисунков есть преимущество: мы можем поиграть с языком тела и раздуть эмоции до предела. Вам не придется раскошеливаться на актеров, студию и прочие расходы. Достаточно бумаги и карандаша. Воображению нет предела!

Чтобы достичь этих результатов в анимации, нужно нацелиться на две вещи:

• Простота;
• Ритм.

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

1. Кривая движения

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

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

Обратите внимание, как странно выглядит дизайн, основанный на сложных кривых движения.

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

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

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

2. 12 базовых принципов анимации

В 1981 году два величайших аниматора киностудии Дисней (Франк Томас и Олли Джонсон) написали книгу "Иллюзия жизни". Они представили публике "12 базовых концепций анимации", которые применяются студией с 1930-х годов в попытке создавать максимально реалистичную анимацию. Хотя эти концепции были разработаны для использования в традиционной анимации, они остаются неизменными и сегодня - даже в цифровых проектах.

Базовые концепции состоят в следующем:

• Сжатие и растяжение (Squash and stretch)
• Подготовка или упреждение (Anticipation)
• Постановка (Staging)
• Сквозное действие и Поза к позе (Straight ahead action and pose to pose)
• Инерция и оверлэпинг (Follow through and overlapping action)
• Медленный вход и медленный выход (Slow in and slow out)
• Арка (Arcs)
• Второстепенное действие (Secondary aciton)
• Тайминг (Timing)
• Преувеличение (Exaggeration)
• Конечная прорисовка (Solid drawing)
• Влечение (Appeal)

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

Сжатие и растяжение

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

Обратите внимание на физические аспекты отскакивающего мяча: когда он летит вниз с ускорением, его форма растягивается. Когда мяч ударяется о землю, он вытягивается по горизонтали (что подчеркивает силу гравитационного притяжения).

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

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


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

Потрясающе, правда? Эта техника подводит нас к следующей теме:

Преувеличение

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

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

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

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

Подготовка или упреждение

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

Классический пример подготовки: персонаж вот-вот побежит и покинет сцену!

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

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

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

Нацеливание и акцент

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

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

Давайте проследим, как работает этот алгоритм.

Шаг 1

Начинаем с рисунка персонажа с радостным или естественным выражением лица:

Шаг 2

Персонаж видит нечто удивительное и, в предвкушении момента, опускает голову вниз и зажмуривается. Это движение увеличивает впечатление того, что он видит нечто невероятное!

Шаг 3

Шаг 4

Персонаж успокаивается и возвращается в исходное состояние.

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

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

Чуть позже мы еще вернемся к "таймингу".

Медленный вход и медленный выход

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

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

Совет: если вы веб-дизайнер и работаете с переходами в создании анимации на страницах сайтов, вы наверняка сталкивались с концепцией "тайминга", для которой применяется функция Transition (Переход) в CSS3. В этой функции, помимо прочих параметров, используются "Плавный вход" и "Плавный выход", чтобы описать кривую скорости в анимации. Аналогично тому, если вы работаете в After Effects, вы наверняка заметили в меню Keyframe Assistant команды "Плавно плавно", "Плавный вход" и "Плавный выход". В том или ином случае, если вы пользовались этими опциями, - значит, что вы уже применяете знаменитый принцип анимации в своих проектах!

Влечение

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

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

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

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

Постановка

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

Я добавил машину в кадр, чтобы подчеркнуть смысл происходящего. Теперь у нас есть четкий контекст, и все становится понятным!

Сквозное действие и Поза к позе

"Сквозное действие" означает подробную раскадровку анимационной сцены с начала до конца. "Поза к позе" относится только к прорисовке ключевых кадров, промежутки между которыми позже дополнятся фазами. Интересно то, что первая техника используется только в анимации 2D. Но техника "Поза к позе" все еще применяется в раскадровке фильмов и анимации 3D.

Инерция и Оверлэпинг

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

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

Арка

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

Фоновое действие

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

Тайминг

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

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

Конечная прорисовка

Конечная прорисовка отностися к точности рисунков на бумаге. Рисунки должны иметь вес и объем, чтобы их правильно видели и трактовали. При этом здесь не идет речь о детальной прорисовке, чтобы сделать рисунок реалистичным. Мы говорим о том, как вы представите публике свое теоретическое знание рисунка. Художник, освоивший основы дизайна, может создать иллюзию объема в своих рисунках даже на эскизе 2D. В этом состоит искуство иллюзии правдоподобности.

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

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

3. Последовательные движения и циклы ходьбы

Со слов Кена Харриса, аниматора студии "Уорнер Бразерс" "Ходьба - самое первое, что нужно изучить". Научиться заставить мультяшного персонажа ходить именно так, как это нужно вам - самая сложная задача в анимации. Есть несколько способов, и они отличаются в зависимости от объема, сложности, контекста и насыщенности сцены.

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

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

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

Проанализируем упрощенный процесс на рисунке внизу:

Пример простого цикла ходьбы: тело слегка поднимается вверх в стадии переноса .

Обратите внимание, что руки движутся противоположно ногам; а, когда тело поднимается вверх в стадии переноса, одна нога прямая.

Теперь заполняем промежутки дополнительными фазами и завершаем основной цикл ходьбы в анимации:

Разные виды ходьбы и бега

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

Знаменитые шаблоны анимации: они были созданы на основе книги Престона Блэйра "Мультипликационная анимация". Уверен, вам знакомы эти картинки по разным мультфильмам.

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

Отличия в ходьбе четвероногих животных

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

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

Посмотрите вверху, как ведут себя передние и задние лапы в стадии переноса тела: голова слегка опускается вниз, когда задняя нога переносится вперед. Обратное происходит во время переноса передней лапы.

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

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

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

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

Рисование ходьбы и бега - довольно сложная тема, которая заслуживает отдельного курса, посвященного только ей. Анатомия некоторых животных, таких как лошади, имеет свои отличия, из-за которых их ноги движутся по-другому. Ознакомьтесь с разделом "Копытные животные" в моем , там будет больше подробностей. Если вы хотите глубже изучить движения лошади, посмотрите , написанный Моникой Загробельной.

Соединяем все вместе

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

Конец!

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

Carlos Gomes Cabral

I"m a product from the madness of the 80"s, living in the city of Rio de Janeiro (Brazil). I"ve been fond of arts, comics and music since I was a child, I dedicate myself to several projects at the same time and I hate sitting still. With a Bachelor"s degree in IT, I"m currently working for a technology mobility company. I"m also in love with motion graphics, HTML5, web design and UX trends. You can find me on Twitter (@cgcabral).

Вся работа по созданию фильма происходит с помощью панели Timeline (Шкала времени), изображение которой приводится ниже. Панель Timeline разделена на две части вертикальной линией, которую можно перемещать мышкой. Правая часть панели представляет собой так называемую "линейку кадров" — линейку, на которой располагаются символы кадров, имеющие вид небольших прямоугольников. Содержанием кадров являются сменяемые во времени статические картинки, появляющиеся на рабочем поле. Нумерация кадров представлена в верхней части линейки. Под линейкой кадров располагается "строка состояния".

Ключевые кадры — это кадры, в которых размещаются статические картинки, "оживающие" при анимации. Нажатие клавиши приводит к созданию нового кючевого кадра. Нажатие клавиши приводит к появлению справа от ключевого кадра дублирующего кадра. Дублирующий кадр — это кадр, не имеющий собственного содержания, а заключающий в себе лишь ссылку на содержание стоящего слева от него ключевого кадра. Создание дублирующего кадра облегчает работу над анимацией, избавляя от необходимости рисования одного и того же сюжета в соседних кадрах. На линейке кадров пустой ключевой кадр обозначается полым кружочком, если он содержит графический объект, то обозначается чёрным кружочком. Последний кадр в цепочке дублирующих кадров обозначается белым прямоугольником.

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

Основные возможности временной шкалы:

1. Чтобы сделать слой активным, его надо выделить. Рисовать и редактировать можно только на активном слое. Активный слой подсвечивается на Монтажной линейке, и значок с изображением карандаша показывает, что его можно редактировать (Layer 3).
2. Содержимое слоёв, которые находятся сверху на Монтажной линейке, отображается поверх содержимого слоёв, находящихся под ними. Для обмена слоёв местами надо перетащить название слоя на нужное место на Монтажной линейке.
3. Для создания нового слоя надо выбрать позицию на Монтажной линейке для нового слоя и нажать кнопку "Добавить слой".
4. Для удаления слоя достаточно перетащить его в корзину.
5. Для переименования слоя дважды щелкните мышью по нему на Монтажной линейке.
6. При создании многослойного изображения используйте элементы управления слоями. Щелчок в колонке под изображением замка заблокирует любое редактирование, а в колонке под изображением глаза сделает слой невидимы.

Ниже приводится пример анимационного ролика, в котором в разных слоях со сдвигом в 25 кадров, помещён разный фон (пейзаж) с соответствующим текстовым блоком. Пейзаж получен заливкой фона растровым изображением Color Mixer->Bitmap с последующей обработкой инструментом Трансформатор заливок.

Шкала кадров — поле, где можно добавлять и удалять простые и ключевые кадры. Если вызвать контекстное меню (правая клавиша мыши) на каком-либо кадре, вы увидите перечень действий, которые можно совершить. На шкале отображается информация о кадрах, которые являются ключевыми (такие кадры помечаются черными кружочками), содержат действия (буковка "а" над кружочком) или метку (красный флажок, после которого идет название метки). Цвет тоже говорит о типе кадров. Серый цвет — это кадры, которые в точности повторяют ключевой кадр (keyframe). Синеватая или зеленоватая подсветка говорит о том, что кадры сгенерированы Flash. И, наконец, белое или "пустое" полосатое пространство говорят о том, что на этих кадрах ничего нет.

Кнопки управления тенями — это кнопки, позволяющие отображать соседние кадры как бы через кальку, чтобы видеть разницу между предыдущими и последующими кадрами. Можно задавать глубину такого отображения по обе стороны от маркера. Анимация состоит из последовательности кадров. Кадр может быть как составленным вручную, так и сгенерированным Flash. Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то итоговые "многослойные" кадры, могут содержать, как сгенерированные, так и "самодельные" слои. В компьютерной анимации существует понятие — ключевые кадры (keyframes). Их название говорит само за себя. Это кадры, которые Flash не вправе изменять в процессе создания анимации. Вы задаете эти ключевые кадры, а промежуточные кадры между ними выстраивает Flash. Существует два типа промежуточных кадров — кадры, построенные на основе изменения геометрии (shape tweening) или кадры, построенные на изменении символов (motion tweening). И, конечно же, кадры могут быть пустыми, т.е. ничего не содержать.

Символы — одно из ключевых понятий во Flash. Символом может быть, как простейший геометрический примитив или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций во Flash. Существует три вида символов: анимация (movie clip) , кнопка (button) и изображение (graphic) :

1. Изображение (graphic) , представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).
2. Кнопка (button) . Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:
   • Hit — обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.
3. Анимация (movie clip) . Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (встроенный язык Flash).

Символы можно создавать как "с нуля" (Insert->New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert->Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первый, т.к. уже не надо символ позиционировать и изменять под нужный размер.

В Macromedia Flash существуют два принципиально разных способа анимировать что-либо:

1. Прорисовать каждый кадр самому, используя Flash только для пролистывания кадров.
2. Заставить Flash автоматически просчитывать промежуточные кадры.

Пошаговая (покадровая) анимация

Это анимация, полностью составленная из ключевых кадров. Т.е. Вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение). Перед тем как нарисовать очередной кадр надо вставить пустой ключевой кадр (), если Вы хотите получить копию ключевого кадра, то нажимайте , а затем редактируйте полученную копию. Когда Вы хотите использовать готовые изображения в качестве основы, то это можно сделать следующим образом — File, Import… На временной шкале покадровая анимация выглядит таким образом:

К достоинствам этого способа можно отнести:

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

К недостаткам можно отнести следующее:

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

Элементарные операции с кадрами:

• Вставить пустой ключевой кадр — Insert -> Blank keyframe, .
• Ключевой кадр, повторяющий содержание предыдущего — Insert -> Keyframe, .
• Очистить ключевой кадр — Insert -> Clear keyframe, +.
• Вставить обычный кадр — Insert Frame, .
• Удалить кадр — Insert -> Remove Frames, +.

Элементарные операции с роликом:

• Просмотр ролика — Control, Test movie.
• Изменение высоты и ширины ролика — Modify, Movie.
• Преобразование Flash-ролика в HTML-документ File, Publish Setting, вкладка HTML.
• Просмотр HTML-документа — File, Publish Preview.

Создадим многослойный фильм с пошаговой анимацией «Жизнь цветка». 1-й слой — рамка, 2-й слой — горшок, 3-й слой — цветок. Можно 3-й слой представить тремя слоями: лист, стебель, соцветие.

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

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

Второе задание попробуйте выполнить самостоятельно, используя ниже приведённый алгоритм. Это будет создание анимации «Движущийся автомобиль»:

• создаим слой «Пейзаж»;
• выполним команду File/Import и импортируем картинку с изображением пейзажа или создадим фон "асфальт";
• выделим на линейке 30-й кадр и нажмём F5. создадим цепочку дублирующих кадров для пейзажа;
• создадим новый слой «Авто»;
• нарисуем в первом ключевом кадре автомобиль без колёс;
• сгруппируем нарисованный автомобиль и нажав F8 создадим библиотечный образец — клип automobile;
• сдвинем автомобиль, выделим второй кадр и нажмём F6;
• будем перемещать автомобиль и создавать новые ключевые кадры до тех пор, пока, автомобиль не скроется за пределами рабочего поля;
• создадим новый слой и назовём его «Колесо1»;
• нарисуем в первом кадре колесо и создадим из него библиотечный образец wheel;
• создадим новый ключевой кадр и передвинем в нём колесо за передвинутым автомобилем и т.д. во всех остальных кадрах, поворачивая колесо при этом на небольшой угол;
• заблокируем слой «Колесо1» и скопируем в буфер всю полученную последовательность кадров;
• создадим новый слой и назовём его «Колесо2»;
• выделим первый кадр и скопируем из буфера всю последовательность кадров;
• для зацикливания просмотра нажмём +.

В качестве ещё одного самостоятельного задания можно предложить создать пошаговую анимацию "Горение спички":

Во Flash существует два варианта построения промежуточных изображений — motion tweening (построение анимации на основе модификации символов) shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне.

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

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

Скорость и плавность анимации зависят от количества кадров, которые отведены под движение и скорости Flash фильма (movie). Скорость фильма можно изменить следующим образом: Modify->Movie…, + — там параметр Frame Rate задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду. Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент).

Рассмотрим анимацию с построением промежуточных кадров (tweened motion). Это наиболее часто используемая техника анимации во Flash. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ. Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.

При использовании Motion Tweening модифицируются следующие параметры:

1. размер (как пропорционально, так и непропорционально — отдельно высоту и ширину);
2. наклон;
3. расположение;
4. угол поворота;
5. цветовые эффекты;
6. можно использовать направляющие слои для задания траектории движения объекта.

Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening — с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:

• Easing — обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.
• Rotate позволяет управлять вращением. Auto — Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise — против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.
• Orient to path — поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей.

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

Слои, которые содержат кривую, по которой должен двигаться объект называются направляющими слоями (guide layers) (т.е. они содержат траекторию движения объекта). Для того, чтобы добавить направляющий слой, нужно Выбрать слой, на котором находится ваш символ; затем Нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.

Далее, нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки. Всё! Управляющий слой готов. Вы можете его запретить для редактирования, чтобы было удобней работать, а в дальнейшем и вовсе сделать его невидимым.

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

Далее все по знакомому сценарию — ключевые кадры, включаем motion tweening… Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней, то на панели Frame нужно включить флажок Orient to path.

Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening. Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows ->Panels ->Effects), выбрать нужный эффект, установив яркость, цветовое смещение, оттенок.

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

• нарисуем в первом кадре круг и зальём его радиальной градиентной заливкой;
• сгруппируем рисунок;
• выделим его инструментом Трансформатор и перенесём центр вращения на некоторое расстояние;
• перейдём в 30 кадр, нажмём , т.е. сделаем его копией первого кадра;
• вернёмся в первый кадр и откроем панель Properties и в списке Tween выберем Motion;
• в дополнительном списке Rotate выберем принудительное вращение по часовой стрелке (CW) или против часовой стрелки (CCW).

Следующий пример несколько сложнее — это создание анимации движения букв текста:

• с помощью инструмента Текст создадим текстовый блок;
• выделим написанное слово и разобьём его на отдельные буквы (Modifi/Break Apart);
• разведём буквы по отдельным слоям Modify/Distribute to Layers;
• преобразуем каждую букву в каждом слое в рисунок, повторим команду Modifi/Break Apart. Выдели каждую букву и сгруппируем её;
• на линейке кадров на некотором удалении создадим копии первого кадра, для этого нажмём ;
• по очереди будем выделять первые кадры для каждой буквы, выносить её за пределы рабочей области, изменяя пропорции буквы, центр вращения и т.д.;
• в панели Properties в списке Tween выберем Motion. В дополнительном списке Rotate выберем один поворот по часовой стрелке;
• просмотрим анимацию в окне просмотра + .

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

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

Как обычно, Вы задаете два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов). После того как есть два ключевых кадра, надо сделать активным первый из них (просто переходите на него), и выбирать на панели Frame (Windows->Panels->Frame, +) в списке Tweening строку Shape. Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка. В результате получается ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй.

При использовании shape tweening необходимо задать два параметра:

• Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться. И наоборот, если easing будет положительным, анимация будет замедляться;
• Параметр Blend, определяет алгоритм перехода:
  • Distributive — сглаживает переход от одной фигуры к другой.
  • Angular (угловатый) — пытается сохранить пропорции углов.

Последний инструмент в анимации shape tweening — контрольные точки (shape hints, дословно — подсказки для форм). Это точки, с помощью которых Вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм. Пользоваться ими очень легко. На первом ключевом кадре (с которого начинается анимация) Вы добавляете контрольную точку (Modify->Transform->Add shape hint,

Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint. Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27.

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

Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None.

При использовании shape tweening могут модифицироваться следующие параметры фигуры:

• форма;
• расположение;
• размер (любые пропорции);
• цвет;
• угол поворота.

Ниже приводится на этот способ анимации пример «превращения» слона в овцу и обратно.

Попробуйте самостоятельно создать анимацию формы "превращения" змеи в орла и обратно:

Направляющий слой и слой траекторий

Часто в процессе анимации необходимо, чтобы объект двигался не по прямой, а по заданной траектории. Анимация в этом случае создаётся обычным образом, а траектория рисуется в отдельном слое. Слой траекторий может обслуживать несколько разных анимаций, каждая из которых размещена в отдельном слое, но все эти слои с анимацией должны располагаться под слоем траекторий. Для рисования траектории можно использовать различные инструменты: Карандаш, Кисть, Перо, Эллипс, или Прямоугольник. Чтобы привязать движущийся объект к этой траектории нужно в начальном и конечном ключевых кадрах анимации просто перенести этот элемент на траекторию. При этом в панели Properties следует подкорректировать параметры анимации таким образом, чтобы был включён флажок Snap (привязать). Для этого нужно предварительно выделить первый ключевой кадр анимации, полезно также выбрать команду View/Snap to Objects.

Для примера, создадим ролик «Полёт бабочки над цветком», по ниже приведённому алгоритму:

• импортируем рисунок цветка в первый слой;
• в первом ключевом кадре второго слоя нарисуем бабочку (можно получить бабочку путём векторизации её растровой фотографии Modify/Trace Bitmap);
• выделим бабочку, нажмём , создав её библиотечный образец;
• оставаясь во втором слое, перейдём, например, в 48 кадр и нажмём , создав завершающий анимацию ключевой кадр;
• в нём перенесём бабочку на другую сторону рабочего поля;
• выделим 60-й кадр и нажмём , создав цепочку дублирующих кадров;
• выделим первый кадр и в панели Properties в списке Tween выберем Motion;
• выделим слой с анимацией и выбирем в контекстном меню команду Add Motion Guide;
• нарисуем на рабочем поле этого слоя кривую для движения бабочки, начало и конец которой расположены рядом;
• выделим первый ключевой кадр анимации, посадим бабочку на один конец траектории;
• затем выделим другой ключевой кадр анимации, посадим бабочку на другой конец траектории;
• выделим первый ключевой кадр анимации, откроем панель Properties и вкючим флажок Orient to Path;
• создадим эффект взмахивания крылышек бабочки при полёте. Откроем библиотечный образец + ;
• дважды щёлкнем мышкой по изображению бабочки в окне просмотра;
• создадим новый ключевой кадр, например, третий, чтобы движение крылышек бабочки было естественным;
• в новом ключевом кадре приподнимим сначало одно крылышко бабочки, а затем второе;
• вернёмся в основную сцену и запустим просмотр.

Маскируемый слой и слой-маска

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

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

• в первом кадре слоя вставим статический текстовый блок и напишем какое-нибудь слово;
• выделим 40-й кадр и нажмём , определяя тем самым длину будущей анимации;
• создадим новый слой и сделаем его слоем-маской (выделим слой и из контекстного меню выберем пункт Mask) и снимим с него блокировку;
• в первом кадре слева от слова нарисуем небольшой прямоугольник и сгруппируем его;
• оставаясь в слое-маске, выделим 40-й кадр и нажмём ;
• оставаясь в 40-м кадре, с помощью инструмента Трансформатор растянем нарисованный прямоугольник так, чтобы он закрывал всё слово;
• выделим 1-й кадр и открыв панель Properties, выберем Motion;
• запустим анимацию.

Ниже приводится gif-анимированный файл, в котором используется анимация формы букв текста "С Новым Годом", а затем появившийся текст "стирается", с использованием слоя-маски, прямоугольника с градиентной заливкой, поэтому получается эффект "переливчатости" букв. Фоном является фрагмент растровой графики.

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

Создание кнопок

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

• Up — обычное состояние кнопки;
• Over — когда курсор мышки находится над кнопкой;
• Down — когда курсор находится над кнопкой и нажата клавиша мыши;
• Hit — обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал;

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

Основные типы действий:

1. Go to — переход к заданной сцене или кадру;
2. Play — запуск остановленного фильма;
3. Stop — остановка фильма;
4. Toggle High Quality — переключатель качества отображения фильма (режим сглаживания);
5. Spot All Sounds — выключение звука;
6. Get URL — переход по указанному адресу;
7. FC Command — передача проигрывания фильма другим приложениям;
8. Load/Unload Movie — простейший вариант использования данной команды, это загрузка фильма с указанного адреса;
9. Tell Target — выбор фильма для дальнейшего управления (задание цели);
10. If Frame Is Loaded — выполнение команды в случае загрузки указанного кадра;
11. If — проверка на истинность;
12. Loop — цикл;
13. Call — вызов;
14. Set Property — задание свойств фильма;
15. Set Variable — значение переменной;
16. Duplicate/Remove Movie Clip — создание или удаление экземпляра клипа;
17. Drag Movie Clip — включает режим перетаскивания клипа;
18. Trace — вывод сообщений при выполнении действий;
19. Comment — комментарии;

Алгоритм создания кнопки (алг1):

• создайте заготовку для кнопки;
• выделите кнопку с помощью инструмента и преобразуйте её в символ (Insert\Convert to Symbol…). Укажите название (например, but), выбрав тип Button;
• перейдите в режим редактирования символа, выполнив двойной щелчок по изображению символа «Кнопка»;
• перейдите в кадр Over на Монтажной линейке, вставьте пустой кадр Insert\Keyframe, отредактируйте кнопку, поменяв её цвет;
• перейдите в кадр Down, вставьте пустой кадр Insert\Keyframe, отредактируйте кнопку, изменив её цвет;
• перейдите в кадр Hit, вставьте пустой кадр Insert\Keyframe, отредактируйте кнопку;
• выйдите из режима редактирования символа (в левом верхнем углу фильма перейти к Scene1).

Алгоритм создания кнопки для перехода на указанную Web-страницу:

• создайте кнопку (алг1);
• задайте действие, для этого выберите Window\Actions. В выпадающем меню Basic Actions выберите действие Get URL, дважды щёлкнув по нему в левом окне панели. Щёлкнув в правом окне по выбранному действию, укажите его параметры (например, URL: http:\\www.ya.ru);
• протестируйте получившийся клип Control\Test Movie.

Алгоритм создания кнопки для остановки клипа:

• создайте кнопку (алг1);
• добавьте новый слой;
• создайте в нём анимацию;
• постройте в нём изображение (например, круг);
• изображение преобразуйте в символ (Insert\Convert to Symbol…);
• выделите в обоих слоях 30 кадр и вставьте ключевой кадр Insert\Keyframe;
• перенесите изображение символа в 30 кадре на другое место;
• вернитесь на 1 кадр и выберите Insert\Create Motion Tween;
• выделите слой с изображением кнопки и задайте для неё действие Window\Actions. Выберите действие Stop;
• просмотрите получившийся клип Control\Play.

В качестве примера создадим кнопку со встроенной анимацией по ниже приведённому алгоритму:

• нажмём сочетание клавиш + , создадим новый образец типа Button и зададим имя knopka;
• нажмём OK и попадём в редактор образцов;
• в первом кадре (Up) на рабочем поле нарисуем овал и зальём его радиальной градиентной заливкой;
• три раза нажмём клавишу , это скопирует содержимое первого кадра во все остальные;
• выделим второй кадр (Over) и немного увеличим в нём изображение кнопки, обведём его жёлтым контуром;
• импортируем из библиотеки файл с анимацией (например, бег человека или любой другой клип);
• наложим этот клип на изображение кнопки, приведём все масштабы в соответствие;
• выделим третий кадр (Down) и немного уменьшим в нём изображение кнопки;
• вернёмся на основную сцену, откроем библиотеку + , если она закрыта, извлечём созданную кнопку.

Публикация данного объекта выполнена в режиме HTML с указанием на соответствующий swf-файл.

Создание сценариев с помощью языка ActionScript

Создадим кнопки, управляющие работой слайд-шоу:

• подготовим несколько растровых картинок (слайдов);
• импортируем их вновый фильм;
• на основе каждого из них создадим библиотечные образцы () типа Button (кнопка), создавая образец будем удалять изображение с рабочего поля;
• первый слой фильма назовём Buttons, выделим первый кадр и в нём расположим созданные кнопки, так, чтобы они не мешали просмотру;
• создадим слой для размещения слайдов Images;
• в нём с помощью клавиши создадим пустые ключевые кадры, столько, сколько слайдов;
• выделим первый пустой ключевой кадр и поместим в него библиотечный слайд (+ — открытие библиотеки);
• привяжем к этому кадру сценарий. Для этого, оставаясь в первом кадре, откроем панель Actions и двойным щелчком мыши выведем из папки Actions/Movie Control сценарий Stop (), который останавливает просмотр слайдов в ожидании команды пользователя;
• два последних пункта алгоритма повторим для остальных пустых ключевых кадров;
• кадр с первым вставленным слайдом назовём begin, а с последним end (имена задаются в панели Properties, как метка кадра);
• вернёмся в слой с кнопками, где располагаются миниатюры наших слайдов;
• привяжем к каждой кнопке сценарий, отсылающий программу в тот кадр, где располагается соответствующий слайд;
• для этого кнопку надо выделить и с помощью панели Actions ввести следующий сценарий:

On (release) {

GotoAndStop(k); — цифра в скобках указывает на номер соответствующего кадра.

• в первом кадре слоя с кнопками можно разместить и кнопки альтернативного выбора слайдов. В нашем примере это "Начало", "Вперёд", "Назад" и "Конец";
• выделим первую альтернативную кнопку начало (Begin) и привяжем к ней сценарий:

On (press) {

GotoAndStop("begin)";

• к кнопке назад (Previous} привяжем такой сценарий:

On (press) {

Root.prevFrame ();

• к кнопке вперёд (Next} привяжем такой сценарий:

On (press) {

Root.nextFrame ();

• к кнопке конец (End}, задающей переход к последнему кадру, привяжем такой сценарий:

On (press) {

GotoAndStop("end");

Ниже приводится результат нашей работы:

При создании анимаций с использованием языка ActionScript часто используется трёхкадровый цикл. В первом кадре (подготовка) записываются начальные данные, во втором кадре размешаются элементы тела цикла, а втретьем кадре пишется команда вернуться во второй кадр gotoAndPlay (2);. Работа трёхкадрового цикла заключается в попеременном просмотре кадров, участвующих в цикле, до тех пор пока не будет выполнено условие выхода из цикла.

Рассмотрим использование трёхкадрового цикла на примере создания движения маски. Наш фильм будет состоять из трёх слоёв:

• Импортируем в первый слой, который назовём Masked, растровую картинку. На основе её создадим библиотечный образец типа "клип". Удалим его с рабочего поля и вынесем экземпляр этого клипа на рабочее поле.
• В панели Properties назовём его Masked.
• Во втором слое расположим экземпляр клипа, представляющий собой маску оригинальной формы. Имя второго слоя и имя этого экземпляра будут Mask.
• В третьем слое, который назовём Actions, создадим трёхкадровый цикл.
• В первом кадре используем метод setMask объекта MovieClip, который позволяет маскировать любой клип другим клипом, находящимся на другом слое. Формат метода:

<маскируемый клип>.setMask (<клип-маска>)

• Откроем панель Actions и к первому кадру третьего слоя привяжем однострочный сценарий Masked.setMask (mask);.
• Используя свойства (Priperties) объекта MovieClip, ко второму пустому ключевому кадру добавим вращение маски Mask._rotation += 2;. Можно также добавить изменение размеров и координат маски. Например, mask._x -= 1; mask._y += 1; mask._height -= 1; mask._width += 1;
• К третьему кадру привяжем обычный сценарий gotoAndPlay (2);

При каждом обращении ко второму кадру клип Mask будет поворачиваться на 2°. Перед глазами пользователя вращается окно, имеющее форму клипа Mask, сквозь которое видна часть клипа Masked.

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

Экземпляр объекта Color создаётся с помощью конструктора в среде ActionScript и имеет следующий формат:

<имя экземпляра объекта Color> = new Color (<имя экземпляра клипа>)

• Выделим первый ключевой кадр и импортируем в него растровое изображение восходящего солнца.
• Соэдадим второй слой и в первом кадре нарисуем три произвольных звёздочки.
• Будем выделять их по очереди и создавать клипы под именами Star, Star1, Star2.
• Экземпляру первого клипа присвоим имя St, второго St1, а третьего St2.
• Привяжем к каждому образцу свой сценарий. Отличие в сценариях состоит в том, что каждому экземпляру клипа присваивается разный начальный цвет, разный угол поворота, а также разные условия изменения текущего цвета в операторах if.
• Передача цвета экземпляру клипа, например для Star1, осуществляется с помощью такой строки в сценарии Star1Color.setTransform(colorTransform);.
• Будем выделять поочерёдно клипы со сценарием, нажимать и создавать новые клипы, например, с именами ClipStar, ClipStar1, ClipStar2.
• Можно вывести на рабочее поле несколько образцов каждого клипа.
• Пример сценария для Star1 приводится ниже:

OnClipEvent (load) {

Star1Color = new Color(this);

ColorTransform = {rb:0, gb:255, bb:255};

G = 255;

B = 255;

Step = 5;

OnClipEvent (enterFrame) {

G -= step;

ColorTransform.gb = g;

If (r >=0 && b == 255 && g == 0) {

R += step;

ColorTransform.rb = r;

If (g == 0 && r == 255 && b

B -= step;

ColorTransform.bb = b;

If (b == 0 && r == 255 && g >=0) {

G += step ;

ColorTransform.gb = g;

If (g == 255 && b == 0 && r

R -= step;

ColorTransform.rb = r;

If (r == 0 && g == 255 && b>=0) {

B += step;

ColorTransform.bb = b;

Star1Color.setTransform(colorTransform);

This._rotation -= 3;

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

• Нарисуем кнопку с названием "Примеры".
• Нажмём клавишу и создадим библиотечный образец типа Button с именем primery.
• Перейдём в режим редактирования и изменим заливку кнопки и цвет текста для состояний Over и Down, в каждый из этих кадров попадаем нажимая клавишу .
• В кадре Hit, который не будет отражаться в режиме анимации, удалим изображение кнопки и нарисуем закрашенный прямоугольник несколько большего размера, чем кнопка.
• Преобразуем текст "Примеры" в библиотечный символ типа Graphic. Для этого перейдём в состояние кнопки Up выделим текст и нажмём клавишу . Библиотечный образец назовём "примеры". Таким образом мы осуществили вложение в символ Button символ другого типа — Graphic.
• Повторим выше изложенную процедуру для состояний кнопки Over и Down, создавая библиотечные образцы "примеры1" и "примеры2" типа Graphic.
• Щёлкнем правой кнопкой мыши по библиотечному образцу primery и выберем пункт дублирование. Сохраним копию под именем news. Это будет библиотечный образец для будущей кнопки "Новости".
• Аналогично получим дубли образцов "примеры", "примеры1" и "примеры2". Назовём их соответственно "новости", "новости1" и "новости2".
• Отредактируем содержимое полученных образцов, изменив текст "примеры" на текст "новости" соответствующих цветов.
• Войдём в режим редактирования библиотечного образца news. Выделим состояние кнопки Up, а в библиотеке образец "примеры".
• Посмотрим на паналь Properties. Нажмём копку Swap (заменить) и в открывшемся диалоговом окне выберем образец "новости", нажмём OK. Таким путём мы поменяем для состояния кнопки Up название "Примеры" на название "Новости".
• Повторим подобные действия для двух других состояний кнопки библиотечного образца news. При этом заменим "примеры1" на "новости1", а "примеры2" на "новости2". Подобные манипуляции приводят к получению совершенно одинаковых кнопок, но с разным названием.
• Вынесем из библиотеки экземпряр кнопки "Новости" на рабочее поле.
• Подобным образом получим третью кнопку — "Контакты".
• Включим панель Align (выравнивание). Выделим все три кнопки и выберем нужное для них расположение, например, на одном уровне с одинаковыми расстояниями друг от друга.
• Откроем панель Actions и привяжем к каждой кнопке скрипт, указывающий какая веб-страница будет загружаться при щелчке на ней мышью. Можно также указать в какое окно будет загружаться выбранная страница, например, в текушее окно браузера (_self), в новое окно (_blank) и т.д. К первой кнопке привяжем такой сценарий:

on (release) {getURL ("1.html", "_self");}

• К остальным кнопкам привяжем сценарии, указывающие на соответствующие веб-страницы. В ниже приведённом Flash-меню привязка веб-страниц не реализована из соображений удобства просмотра страницы.

Как создать анимацию движения в Фотошопе?

В данном уроке мы научимся создавать простую анимацию движения объекта в Фотошопе .

Создадим новый документ размером 200 на 200 пикселей с прозрачным фоном. Для того, чтобы создать новый документ, выберем пункты меню «Файл» - «Новый», зададим ему ширину и высоту, и прозрачный фон. На панели инструментов выберем инструмент «Кисть», зададим ей главный диаметр – 15 пикселей и любой цвет. Теперь при помощи данного инструмента нарисуем траекторию, по которой будет двигаться наш объект.

Затем создадим новый слой.

При помощи инструмента «Кисть» аналогичным образом нарисуем насекомое, уменьшив немного размер кисти и изменив её цвет.

Теперь следует изменить положение насекомого таким образом, чтобы оно соответствовало направлению его движения. Для этого выберем пункты меню «Редактировать» - «Трансформирование» - «Поворот».

Создадим дубликат слоя с насекомым. Для этого щёлкнем по слою правой кнопкой мыши и выберем «Создать дубликат слоя». Зададим полученному слою произвольное имя. Далее немного изменим положение насекомого, снова применив к полученному слою «Трансформирование» - «Поворот».

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

Когда вся траектория будет «заполнена», перейдём к созданию анимации. Для этого выберем «Окно» - «Анимация».

В появившемся окне «Animation» на данный момент находится один кадр.

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

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

Теперь выберем все имеющиеся кадры, зажав предварительно клавишу «Ctrl». Зададим время задержки для каждого кадра 0,2 секунды и сделаем слой с траекторией невидимым.

Анимация движения готова. Теперь сохраним полученное анимированное изображение. Для этого выберем пункты меню «Файл» - «Сохранить для web» и зададим файлу любое имя.

(0)

	1.	Простая текстовая анимация	1:48	1	4206
	2.	Переливающийся текст	2:44	0	5831
	3.	Мигание картинки	1:51	0	2509
	4.	Сверкающие фары	2:26	0	4255
	5.	Анимация дождя	2:12	0	2107
	6.	Падающий Снег	2:33	0	5344

Лабораторная работа № 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% - полная прозрачность).