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

Урок информатики

Дата: 02.03.2017 г.

Тема: « Анимация движения »

Класс: 9 «А»

Тип урока: изучение и первичное закрепление новых знаний

Цели урока:

Образовательная:

формирование умений создавать анимацию движения по траектории;

Воспитательная:

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

Развивающая:

развитие познавательного интереса, логического и алгоритмического мышления.

Программное и методическое обеспечение урока: редактор Flash , учебное пособие «Информатика. 9 класс», § 16

Структура урока:

Организационный момент (2 мин)

Проверка домашнего задания (5 мин).

Усвоение новых знаний и способов действий (до 15 мин)

Физкультпауза (2 мин)

(до 16 мин)

Домашнее задание (1 мин)

Подведение итогов занятия (3 мин)

Этап рефлексии (1 мин)

Ход урока .

Организационный момент:

Здравствуйте! Садитесь. Кто сегодня отсутствует?

Сегодня на уроке мы продолжим изучение графического редактора Macromedia Flash . Освоим анимацию движения.

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

И прежде всего мы с вами вспомним и освежим в памяти прошлые уроки.

Что такое покадровая анимация?

(Покадровая анимация – это анимация, полностью составленная из ключевых кадров )

Назовите достоинства и недостатки покадровой анимации?

(Недостатки: Покадровую анимацию сложно модифицировать. Приходится модифицировать все кадры .

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

Как создать ключевой кадр? (F6 )

Как занести объект в библиотеку? (F8 )

Объяснение нового материала.

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

Для вставки промежуточного кадра нажать F 5

Для удаления промежуточного кадра нажать Shift + F 5

N = f * t

N -необходимое число кадров

Демонстрация выполнения примеров 1-4.

Пример 1 . Создать анимацию движения шара на фоне деревьев (рис. 3.39).

B кадре 1 этого слоя, нарисуем шар, выбрав заливку радиальным градиентом. Преобразуем его в символ типа графика (Graphic), присвоив имя «шар»

Созданный символ попадет в библиотеку (вызывается клавишами Ctrl + L), a на слое «шap», теперь находится его экземпляр.

Поместим экземпляр символа «шap» слева перед деревьями.

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

На самом деле изображения находятся только в ключевых кадрах 1 и 12, а промежуточные кадры 2-11 содержат ссылки на кадр 1. Поэтому Flash-фильм (файл.swf) имеет очень маленький размер.

Кадры слоя «лес» оставим без изменения, поскольку фон неподвижен.

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

Произведем автозаполнение промежуточных кадров. Для этого выделим первый или любой промежуточный кадр этого слоя (например, кадр 7). С помощью меню Вставка -› Создать анимацию движения правой кнопки мыши или панели Свойства сгенерируем промежуточные кадры. Сиреневая окраска и стрелка от 1-го кадра к 12-му указывает на то, что промежуточные кадры сгенерированы (рис. 3.41).(B случае ошибки стрелка рисуется пунктиром.)

Просмотрим последовательность фаз движения перемещая указатель кадров вдоль шкалы времени.

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

Протестируем анимацию.

Анимация движения применима только для экземпляров библиотечных образцов (символов) или сгруппированных объектов.

Пример 2. Увеличить длительность созданной в примере 1 анимации до 3 c. Исследовать влияние количества и частоты кадров на длительность и плавность анимации.

Увеличим число кадров до N = 12 - 3 = 36, вставив промежуточные кадры клавишей F5 или протаскиванием выделенных концевых ключевых кадров с нажатой левой кнопкой мыши. Протестируем анимацию. Ее длительность 3 с.

На панели Свойства увеличим частоту до 30 кадров B секунду. Протестируем анимацию. Ее длительность стала 36: 30: 1,2 с.

Восстановим частоту 12 кадров в секунду.

Анимация движения, состоящего из нескольких этапов, реализуется заданием ключевых кадров в моменты начала и окончания этих этапов и коррекцией свойств объектов (их положения, размеров, цвета, прозрачности) в этих кадрах. Изменение скорости движения задается на панели Свойства параметром Замедление (Ease). По умолчанию движение равномерное (параметр=0), при установке положительного значения движение

замедленное, отрицательного - ускоренное.

Пример 3. Отредактировать созданную анимацию так, чтобы 1,5 с шар двигался c замедлением вправо и уменьшался, останавливался, а затем

1,5 с двигался с ускорением влево и увеличивался.

Выделим 18-й кадр слоя «шap» и преобразуем его в ключевой.

Установим шар в крайнее правое положение и уменьшим его инструментом Трансформация.

Выделим последний 36-й кадр и установим шар в крайнее левое положение. Восстановим его размер.

Зададим на первом этапе параметр Замедление (Ease) равным 80, а на втором- равным -80.

Протестируем анимацию.

Пример 4. Создать анимацию: пропеллер вентилятора совершает 1 оборот за 1 с.

(рис. 3.43, а).

С помощью инструментов выделения трансформируем его в пропеллер (рис. 3.43, 6) и превратим в символ типа Графика.

Центр вращения полученного объекта должен совпадать c центром пропеллера. При необходимости откорректируем положение

центра инструментом Трансформация (рис. 3.43, в).

Превратим 12-й кадр в ключевой.

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

Выделим любой промежуточный кадр и на панели Свойства установим: (Поворот по чс), 1 оборот (рис. 3.44).

Просмотрим последовательность фаз в режиме калькирования

(рис. 3.45).

Протестируем анимацию.

4. Физкультминутка

Движения глазными яблоками: вправо-вверх; влево-вверх, вправо-вниз, влево-вниз. Повторить 3,4 раза.
-Глаза закрыть, отдых 10-15 секунд.

5. Закрепление изученного материала на практике

Выполнение примеров 1-4 самостоятельно

6. Домашнее задание:

Изучить материал § 16

7. Подведение итогов:

Ответы на вопросы учеников (при возникновении таковых).

Звенит звонок. Урок окончен. Всем спасибо. Можете быть свободны.

Рефлексия.

Сегодня нового я узнал на _______________ %

Разобрался с данной темой на ____________%

Конспект ученика

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

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

F 5- вставка промежуточного кадра

Shift + F 5- удалить промежуточный кадр

N = f * t

N -необходимое число кадров

f -частота кадров(12 по умолчанию);

t-длительность анимации (в секундах);

Оформление классной доски

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

N = f * t

F 5-

Shift + F 5 -

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

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

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

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

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

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

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

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

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

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

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

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

Вся работа по созданию фильма происходит с помощью панели 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-меню привязка веб-страниц не реализована из соображений удобства просмотра страницы.

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

Персонаж состоит из следующих объектов, находящихся на разных слоях:

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

Теперь хвост. На первом кадре у нас находится первая позиция хвоста, на 10 сделаем вторую позицию. Я просто отразила хвост слева направо – Модификация – Преобразовать – Отразить слева направо.

На слое «Хвост» на 5 кадре создайте пустой ключевой кадр. Для этого щелкните по нему левой клавишей мыши и нажмите F6. Далее нажмите Delete, чтобы удалить все содержимое. Здесь у нас будут располагаться линии скорости. Для удобства включите под временной шкалой функцию «Многослойная структура » или как по-другому ее называют «луковая шелуха», настройте ее диапазон между двумя состояниями нашего хвоста.

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

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

Теперь сделаем тоже самое для второго состояния хвоста. На 13 кадре создайте ключевой кадр (F6). Перейдите на 10 кадр, немного измените хвост, и наклоните влево. Затем для 10 кадра создайте анимацию формы.

Теперь немного отредактируем кадры. Удалим лишние. Чтобы сделать движение более естественным. И повторим кадры в обратном порядке.