50885

Анимация движения во FLASH MX 2004. Движение по маршруту. Программная анимация

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

Косметология, дизайн и стилистика

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

Русский

2014-02-01

4.82 MB

19 чел.

ЛАБОРАТОРНАЯ РАБОТА

Дисциплина: «Flash технологии»

Специальность: 230105(51) «Программное обеспечение вычислительной техники и автоматизированных систем»

Тема занятия:

АНИМАЦИя движения. движение по маршруту. ПРограммная анимация

Практическая часть

Задание: Ознакомьтесь с основными принципами анимации во FLASH MX 2004. Выполните последовательно шесть заданий согласно инструкциям ниже.

Во Flash MX 2004 существует четыре типа анимации:

  •  Покадровая анимация. Каждый кадр создаваемого фильма рисуется отдельно. Полностью соответствует классической анимации. Подходит для создания сложных сцен и высокохудожественных фильмов, но чрезвычайно трудоемкая.
  •  Анимация трансформации движения. Вы задаете только начальное и конечное положения объекта, его размеры, время движения и траекторию (а также, при необходимости, некоторые другие параметры), а все его промежуточные состояния система просчитывает самостоятельно. Очень простой с технической точки зрения вид анимации, но при помощи него невозможно создать сложные события.
  •  Анимация трансформации формы (морфинг). Этот вид анимации следует реализовывать тогда, когда один графический объект мультфильма должен плавно видоизмениться в другой. Вы задаете только начальную и конечную формы, а промежуточные кадры будут заполнены автоматически.
  •  Программная анимация. Поведение объекта описывается при помощи сценария ActionScript. Используется, прежде всего, в играх и интерактивных элементах, а также в мультипликациях, основой которых является случайность.

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

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

Задание 1: Используя идею покадровой анимации, создайте короткий фильм, в котором будет прыгать баскетбольный мяч, для этого:

  1.  Создайте новый документ ball1, переименуйте слой «Layer 1» в «Мяч» и создайте новый слой «Тень». Расположите второй слой ниже первого.
  2.  Перейдите на первый слой и нарисуйте мяч. Для этого создайте небольшой круг, используя инструмент Oval (Овал) при нажатой клавише Shift. Выполните радиальную заливку, которая поможет передать объем мяча. Маркеру центра поставьте в соответствие белый цвет, маркеру границы — светло-коричневый (максимально соответствующий традиционной окраске баскетбольного мяча). Чтобы переход от блика к умеренно освещенным фрагментам был максимально естественным, где-то на расстоянии в одну треть от общей длины градиента добавьте новый маркер (щелчком мыши) и определите его цвет как коричнево-красный. Чуть ближе к маркеру границы поставьте новый маркер с цветом светлее, чем у последнего.

Убрать лишние маркеры можно, протащив их мышью вниз.

  1.  

Залейте круг созданным градиентом (рис. 1 а)

  1.  Для придания шару большей естественности, при помощи инструмента Fill Transform (Трансформация заливки) переместите центр заливки ближе к краю мяча, немного увеличив ее радиус, и сожмите по оси, совпадающей по направлению с предполагаемым источником света. Итог представлен на рис. 1 б.     Рис. 1. Создание праобраза мяча
  2.  

Нарисуйте характерные для баскетбольного мяча линии. Технически это сделать несложно: в масштабе 300 % инструментом Pencil (Карандаш) в режиме Smooth (Сглаживание) проведите три кривые и придайте им более правильную форму при помощи инструмента Arrow (Стрелка). При необходимости, выделив весь объект, увеличьте толщину линий. Мяч готов. Он должен выглядеть приблизительно так, как изображено на рис. 2.

  1.  Для создания тени перейдите на слой «Тень». При помощи инструмента Oval (Овал) создайте эллипс и поворачивайте так, чтобы его главная ось совпадала с гипотетическим направлением света от источника. Так как интенсивность тени должна уменьшаться от низа мяча (почти черный цвет) к своей вершине (белый цвет), то созданный эллипс необходимо залить подходящим   Рис. 2. Готовый мяч

радиальным градиентом (центр его должен быть помещен в начало тени). Через тень виден фон, поэтому ее коэффициент прозрачности следует уменьшить до 50 % (параметр Alpha (Альфа) палитры Color Mixer (Смеситель цветов)). Результатом должно быть изображение, подобное представленному на рис. 3.

  

Рис. 3. Созданная тень

Рис. 4. Расположение тени относительно мяча

Рис. 5. Мяч с тенью

  1.  Правильно разместите друг относительно друга мяч и тень, отмасштабировав при этом последнюю. Чтобы сделать это максимально эффективно, переведите слой «Мяч» в режим контуров. При этом станет видимой вся тень, и расположить ее точно у основания мяча не составит труда. Возможно, придется немного повернуть эллипс тени так, чтобы он полностью оказался за мячом (рис. 4).
  2.  Отключите контурный режим для первого слоя. Мяч создан (рис. 5).

Объекты для анимации готовы. Определитесь с продолжительностью ролика и частотой смены кадров. Выберите две секунды — оптимальное время для периода скачка мяча. Частота 12 кадров в секунду будет вполне приемлемой для такой простой анимации. Таким образом, ваш мультфильм должен содержать около 24 кадров.

  1.  Выделите вторые кадры обоих слоев и выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). При этом скопируется содержимое предыдущего кадра.

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

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

Рис. 6. Кнопки калькирования

Три режима калькирования:

1. Onion Skin (Прозрачная калька). Объекты неактивных калькируемых кадров отображаются так, как будто они сделаны из прозрачного стекла. Степень прозрачности определяется глубиной кадра: чем дальше он от активного, тем менее он заметен. Объекты редактируемого слоя отображаются в обычном режиме (рис. 7 а).

2. Onion Skin Outlines (Прозрачная калька с контурами). В отличие от предыдущего режима отображаются контуры объектов неактивных калькируемых кадров. Степень их прозрачности также определяется глубиной соответствующего кадра. Объекты текущего слоя отображаются в обычном режиме (рис. 7 б).

3. Edit Multiply Frames (Редактировать множественные кадры). Содержимое всех кадров отображается так, как будто объекты находятся в одном кадре, но на разных слоях. Щелчок по любому из них вызывает переход к соответствующему кадру (в отличие от описанных режимов калькирования). Это самый удобный в случае небольшого количества объектов режим (рис. 7 в).

Режим Edit Multiply Frames (Редактировать множественные кадры) отображает содержимое только ключевых кадров.

Сравнение режимов калькирования отображено как движение мяча в трех кадрах (рис. 7).

Рис.7. Режимы калькирования

Кнопка 4 (см. рис. 6) отвечает за некоторые настройки режима калькирования. При ее нажатии появляется меню, содержащее следующие опции:

  •  Onion 2 (Прозрачные 2). Помимо текущего кадра, калькированы будут два соседних.
  •  Onion 5 (Прозрачные 5). Калькируется пять кадров.
  •  Onion All (Прозрачные все). Калькируются все кадры. Не очень удобный режим в случае продолжительных анимаций.
  •  

Always Show Markers (Всегда показывать маркеры). Маркеры, расположенные в заголовке временной шкалы и показывающие область калькирования (рис. 8), будут отображены даже без активизации соответствующих режимов.

Рис. 8. Маркеры калькирования

Менять область калькирования можно не только при помощи описанных команд, но и перетаскивая маркеры. Такой способ даже удобнее, так как позволяет определять для центральных кадров отображаемых «соседей» в одном направлении (команды задают их симметрично с двух сторон).

  •  Anchor Onion (Привязать прозрачные). В этом режиме калькированы будут только заданные кадры (по умолчанию калькирование относительно, и при смене активных кадров смещается и соответствующая область).

Слои, на которые «повешен» Lock (Замок), не калькируются.

  1.  

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

Наилучшим режимом калькирования в этом случае будет Onion Skin Outlines (Прозрачная калька с контурами) в сочетании с контурным режимом для слоев.

На рис. 9 показано, как будет выглядеть последовательность из трех кадров.

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

  1.  Падение мяча должно повторять его подъем в обратном порядке, поэтому кадры с 14-го по 25-й заполните соответствующими им кадрами с первого по 12й.
  2.  Протестируйте фильм, нажав сочетание Ctrl+Enter. Если вам покажется, что заданной частоты смены кадров недостаточно (или, наоборот, скорость мяча велика), то увеличьте (или уменьшите) значение параметра Frame Rate (Частота кадров) в свойствах рабочей области.

Если достаточно проиграть последовательность кадров один раз, то можно воспользоваться командой Control > Play (Контроль > Воспроизведение) или нажать Enter. При этом анимация прокрутится прямо на рабочем поле.

Анимация создана. Обратите внимание на размер фильма. Его можно узнать, если сохранить анимацию в формате SWF и затем посмотреть ее свойства. Иначе: в режиме тестирования фильма верхнюю часть экрана занимает большая панель — Bandwidth Profiler (Профайлер (или профилировщик) потока) — приложение, которое может помочь протестировать фильм в условиях, близких к реальной Сети (если у вас он не активизирован, выберите одноименную команду меню View (Вид) или нажмите Ctrl + В). Обратите внимание на один из множества имеющихся в правой части панели параметров — Size (Размер). Здесь отображается «вес» соответствующего созданному фильму файла формата SWF (в вашем случае он равен 12 Кб) — это очень много. Получается, что средней величины Flash-мультфильм занимал бы мегабайты. Реально же такие анимации гораздо «легче». Вывод — в работе допущена ошибка. Она заключается в том что, следуя принципам создания классических мультипликаций, забыта возможность Flash работать с символами. При описанном выше подходе вам приходилось несколько раз сохранять изображение мяча и тени. Конвертировав же их в символы и затем, меняя их взаимное расположение, размеры и прозрачность, вы получите анимацию такого же качества при условии, что сами изображения будут сохранены лишь единожды.

  1.  Переделайте анимацию с использованием символов (типа Graphic (Графический)). В результате вы должны получить «вес» файла всего 1 Кб! Добавьте в мультфильм еще кадры (мяч прыгает с угасанием амплитуды), но размер фала при этом практически не должен измениться!

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

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

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

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

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

Задание 2: Повторите созданную анимацию прыжков мяча при помощи трансформации движения, выполните следующую последовательность действий:

  1.  Создайте новый документ ball2. Скопируйте на его рабочее поле символы мяча и тени из созданной ранее анимации (обратите внимание, что при этом они будут автоматически помещены в библиотеку).
  2.  Для мяча и тени создайте последовательность кадров, выполнив для 13-го кадра каждого слоя команду контекстного меню Insert Keyframe (Вставить ключевой кадр) (рис. 10).

Рис. 10. Последовательность кадров

Вставлять ключевой кадр приходится очень часто. По умолчанию этой команде не присвоено «горячей» клавиши. Для задания этого выполните Edit > Keyboard Shortcuts (Правка > Клавиатурные сокращения). Среди имеющихся наборов сочетаний клавиш выберите Macromedia Standard (Стандарт Macromedia) и нажмите кнопку Duplicate Set (Создать дубликат). В специальной строке появившегося окна Duplicate (Дубликат) задайте имя создаваемого набора. Далее, в строке Commands (Команды) выберите пункт Drawing Menu Commands (Команды главного меню). В появившемся дереве откройте ветвь Insert > Timeline (Вставить > Временная шкала) и активизируйте пункт Keyframe (Ключевой кадр). Нажмите «+» около панели Shortcuts (Сокращения) и задействуйте необходимую комбинацию (например, пробел). Одной команде можно присваивать несколько клавиатурных сокращений.

  1.  

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

раза) при помощи инструмента Free Transform (Произвольное трансформирование), повысить ее прозрачность (опция Alpha (Альфа) меню Color (Цвет) свойств символа), осветлить (увеличив долю белого цвета при помощи опции Tint (Оттенок) меню Color (Цвет) свойств символа) (рис. 11).

Рис. 11. Расположение объектов в верхней точке траектории

  1.  Выделив один из кадров полученной последовательности (не ключевой), выберите среди настроек инспектора свойств в меню Tween (Последовательность) строку Motion (Движение) (рис. 12).
  2.  

В результате последовательность кадров станет фиолетовой и на ней появится стрелка, указывающая ее начало и конец (рис. 13). Повторите четвертый пункт для слоя с тенью.

Рис. 12. Меню Tween (Последовательность)

Рис. 13. Последовательность кадров с анимацией движения

Рис. 14. Расположение объектов в четвертом кадре

  1.  Щелкните по любому из промежуточных кадров (рис. 14). Вы увидите, что объекты в нем смещены точно так же, как если бы вы переместили их «вручную». Однако это изменение было просчитано программой автоматически на основании заданных вами начального и конечного положений системы. Flash просто линейно интерполировал промежуточные значения для всех изменяющихся параметров.
  2.  

Для создания анимации падения мяча (так как он должен вернуться в точку, откуда начал свое движение) скопируйте содержимое первых кадров слоев «Мяч» и «Тень» в соответствующие кадры 25-й позиции (используя команды Copy Frames (Копировать кадры) и Paste Frames (Вставить кадры) контекстного меню). Переведите полученные последовательности в анимации трансформации движения (рис. 15).

Рис. 15. Временная шкала законченной анимации

Изменяться размеры объекта будут лишь в том случае, если в окошке Scale (Масштабировать) инспектора свойств последовательности движения стоит «птичка». Иначе размеры изменятся лишь при проигрывании последнего кадра.

Прыжок мяча анимирован. Но пока ваш первый фильм, созданный при помощи банального заполнения кадров, лучше. Чтобы понять, чем обусловлена его большая естественность, калькируйте первые десять кадров автоматической анимации (рис. 16 а). Расстояние, на которое смещались объекты, во всех кадрах одинаковое. Но мяч движется неравномерно, его скорость максимальна в начальный момент времени и равна нулю в верхней точке траектории (и это было учтено, когда вы создавали анимацию «вручную»). Flash предоставляет возможность замедления или ускорения движения при создании автоматических анимаций. Реализуется она при помощи параметра Ease (Замедлить) инспектора свойств соответствующей последовательности кадров. Он изменяется от -100 (начальная скорость равна нулю, в последнем кадре она максимальна) до 100 (начальная скорость максимальна, к концу она падает до нуля). В общем случае этот параметр определяет, насколько скорость движения объекта в первом кадре будет отличаться от его скорости в последнем.

  1.  Установите параметр Ease (Замедлить) 100. Результат данной модернизации для первых десяти кадров анимации представлен на рис. 16 б.

Рис. 16. Трансформация движения без замедления (а) и с ним (б)

  1.  При падении мяч сначала должен иметь малую скорость, увеличивающуюся с пройденным расстоянием. Поэтому параметр Ease (Замедлить) для соответствующей последовательности кадров должен быть равен -100.
  2.  Протестируйте фильм, чтобы убедиться в принципиальности внесенных изменений.

По умолчанию в режиме тестирования фильм прокручивается в цикле, из-за чего создается впечатление бесконечного движения. В случае анимации с мячом это замечательно, но иногда такой режим может быть весьма неудобен. Чтобы его отключить, уберите «птичку» из строки Loop (Цикл) меню Control (Контроль) окна тестирования. Кстати, сохранять анимации также можно как «зацикленными», так и прокручивающимися только один раз.

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

Более корректно описываемый вид анимации стоило назвать не трансформацией движения, а трансформацией свойств. Cимволы (а только на их базе можно ее организовать) имеют ограниченное количество характеристик: координаты центра, ширина, высота, цвет, угол поворота по сравнению с исходным объектом в библиотеке, прозрачность (остальные свойства важны лишь в программировании). Автоматическую анимацию можно строить на основании изменения любого из этих свойств. Программе все равно, изменение какой характеристики следует просчитать для данной последовательности кадров. Каждый экземпляр символа — это лишь ссылка, в которой Flash «пишет» для проигрывателя (к примеру): «В этот кадр поместить объект № 3 со значением координат х = 150, у = 200, увеличить ширину до 56 пикселей, длину — до 34, цвет отобразить как 0xTF0000».

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

Меню предлагает следующие варианты вращения:

  •  None (Отсутствует). Объект автоматически вращаться не будет. Настройка, активная по умолчанию.

Рис. 17. Меню Rotate (Поворот)

  •  Auto (Автоматическое). Направление вращения и его частота определяются системой автоматически исходя из особенностей траектории (опция используется при создании анимаций с применением путей).
  •  CW. Вращение по часовой стрелке.
  •  CCW. Вращение против часовой стрелки.

Для параметров CW и CCW можно задать количество полных оборотов, которые должно совершить тело на протяжении анимируемой последовательности кадров. Сделать это можно в окошке times (раз) справа от рассмотренного меню.

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

  1.  

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

  1.  Выполнив двойной щелчок мышью по символу «Мяч», зайдите в режим его редактирования. Нажав клавишу Shift, инструментом Arrow (Стрелка) последовательно выделите все линии, образующие характерную для баскетбольного мяча сетку. Сделайте это при большом увеличении (500—800 %). Щелкнув правой кнопкой мыши по выделенному контуру, вырежьте его в буфер при помощи команды Cut (Вырезать) открывшегося контекстного меню.

Для облегчения дальнейшей работы, «тело» мяча стоит создать заново, так как в результате удаления сетки оно оказалось разделенным на сегменты (рис. 18).   

Рис. 18. Контур Мяча и его «тело»

  1.  Вернитесь на основную сцену и выполните команду Insert > New Symbol (Вставка > Новый символ). Тип символа определите как Graphic (Графический). Назовите его «Контур».
  2.  В окне создания символа щелкните правой кнопкой мыши по рабочей области и в появившемся контекстном меню выберите команду Paste (Вставить). Вернитесь к основной сцене. Создайте новый слой. Поместите его выше остальных (так как сетка должна закрывать заливку мяча, а не наоборот). Назовите его «Контур». Перетащите из библиотеки символ с контуром на созданный слой. При необходимости масштабируйте его под размеры мяча.
  3.  Совместите «тело» мяча с его контуром. Сделать это проще при увеличении (300 %) и включенном режиме Snap to Objects (Привязать к объектам).
  4.  Вставьте на 13-ю позицию слоя «Контур» ключевой кадр и повторите действия предыдущего пункта. Анимируйте полученную последовательность командой Motion (Движение) меню Tween (Последовательность), расположенного на палитре Properties (Свойства).
  5.  Скопируйте первый кадр слоя «Контур» и вставьте его на 25-ю позицию. Анимируя полученную последовательность, получите необходимое перемещение сетки для падения мяча. Так как сетка должна постоянно совпадать с «телом» мяча, определите для нее такое же значение замедления (100 на этапе подъема и   -100 на стадии падения).
  6.  Блик вращаться не должен — для параметра Rotate (Поворот) обоих анимационных последовательностей слоя «Мяч» определите значение None (нет).
  7.  

Задайте вращение для контура. Более эффектно будет смотреться, если в верхней части траектории оно изменит направление, поэтому для стадии подъема задайте Rotate = CW (1 times), для этапа падения — Rotate = CCW (1 times).

  1.  Сохраните (Ctrl + S) и протестируйте фильм.

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

Рис 19. Движение мяча с замедлением и вращением

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

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

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

  1.  


Использование направляющих

Задание 3: Воспроизведите полет листьев.

  1.  Создайте новый документ со слоем «Лист».
  2.  Стилизованно нарисуйте лист и переведите его в символ типа Graphic (Графический) (рис. 20).

Рис. 20. Желтый кленовый лист

  1.  

Определитесь с продолжительностью анимации. Например, три секунды, поэтому вставьте ключевой кадр на 36-ю позицию.

  1.  Создайте специальный слой для направляющих при помощи расположенной внизу временной шкалы кнопки Add Motion Guide (Добавить траекторию движения) (рис. 21).

Рис. 21. Добавление слоя для направляющей

  1.  Задайте саму траекторию. Сделать это очень просто, так как в слое типа Guide (Направляющий) любая линия является путем. Инструментом Pencil (Карандаш) в режиме Smooth (Сглаживание) проведите подходящую непрерывную линию (рис. 22). Чтобы полет листа казался более естественным, начните и закончите ее за пределами видимой области.
  2.  

Необходимо указать, по какой именно траектории следует двигаться листу. Для этого экземпляр из первого кадра переместите к началу направляющей и «прикрепите» его центр (он обозначается белым кружком) к первой точке линии (рис. 22); если включен режим Snap (Привязать) палитры свойств, то сделать это будет значительно проще, так как лист сам «притянется» к траектории. Аналогично «прикрепите» объект из последнего кадра к концу направляющей.      Рис. 22. Создание траектории

  1.  Создайте анимацию, выбрав команду Motion (Движение) из меню Tween (Последовательность) инспектора свойств заданной ранее последовательности.

Чтобы преобразовать статичные последовательности в анимации, не обязательно обращаться к палитре свойств. Гораздо быстрее это сделать при помощи команды Create Motion Tween (Создать последовательность движения) контекстного меню любого кадра соответствующего промежутка.

Движение листика по траектории задано. Правда, оно получилось не очень уж правдоподобным. Улучшите анимацию. Падая, лист должен ускоряться, хотя и не так интенсивно, как мяч. Поэтому определите параметр Ease (Замедлять) -35.

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

  1.  В меню Rotate (Поворот) палитры свойств анимационной последовательности выберите пункт Auto (Автоматическое). Поставьте «птичку» в расположенном чуть ниже окошке Orient to path (Ориентировать по траектории).
  2.  Протестируйте фильм. Вы увидите, что лист не бездумно вращается, а точно следует особенностям траектории (рис. 23). Благодаря этому его движение стало вполне реалистичным и достаточно сложным.

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

Помимо окошка Orient to path (Ориентировать по траектории), за создание анимации с движением по направляющей отвечают еще два параметра:

  •  Sync (Синхронизация). Во Flash символы имеют собственную временную шкалу. Поэтому они сами могут быть анимациями. В случае циклического воспроизведения такой анимации важно, чтобы количество ее кадров было кратно количеству кадров на основной временной шкале. Если это не так, активизируйте данный параметр, и программа за счет интерполяции недостающих или удаления лишних кадров синхронизирует две анимации.
  •  Snap (Привязать). Опция, подобная Snap to Objects (Привязать к объектам) или Snap to Grid (Привязать к сетке). При ее активизации направляющая будет как бы притягивать центр объекта, что значительно облегчает его позиционирование (что мы совсем недавно успешно использовали).

Лист не является плоским объектом и движется он в трехмерном пространстве. Следовательно, лист должен вращаться и относительно плоскости, перпендикулярной к экрану компьютера. Flash не предоставляет специальных возможностей по работе с трехмерной графикой. Но имитировать объемное движение все же возможно. Существует важный принцип: объем невозможно отобразить на компьютере, так как монитор имеет лишь две координаты, х и у. То, что вы считаете объемностью, достигается за счет перспективы (т.е. линейного искажения, определяемого расстоянием) и игры света и тени. Чтобы создать объемное изображение, необходимо описать объект на языке математики, а затем правильно спроецировать его на плоскость монитора. С формулами вам работать не придется, все проекции вы нарисуете «вручную». Достаточно сжать объект по одной оси (или по обеим), для чего удобно использовать инструмент Free Transform (Произвольное трансформирование). Например, уменьшение ширины листа вдвое создает впечатление, как будто он повернут боком (рис. 24).

Рис. 24. Имитация трехмерного вращения листа

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

Протестируете фильм. Лист движется, совсем как настоящий. А главное — созданная анимация занимает всего 1 Кб!

Рис. 25. Имитация трехмерного движения

Задание 4: Создайте более сложную анимацию прыгающего мяча.

  1.  Удалите из созданной ранее анимации все кадры, кроме первого. Для этого последовательно выполните две команды контекстного меню, выделив все 24 кадра: Remove Tween (Удалить последовательность) и Remove Frames (Удалить кадры).
  2.  Создав для каждого слоя направляющий слой, задайте траектории движения мяча и тени. Так как для «тела» мяча и его контура пути совпадают, то скопируйте нарисованную линию из одного слоя и вставьте на ту же позицию в другой слой (при помощи команды Paste in Place (Вставить на место) контекстного меню). Приблизительный вид и расположение направляющих показаны на рис. 26 (сплошная линия — путь мяча, штриховая — путь тени).

Рис. 26. Направляющие и «прикрепленные» к ним объекты

Одному направляющему слою может соответствовать только один направляемый слой.

  1.  Выделив восьмые кадры всех шести слоев, выполните команду вставки ключевого кадра контекстного меню.
  2.  Анимируйте последовательности кадров для слоев с объектами.
  3.  «Прикрепите» объекты первого кадра к началу соответствующих им направляющих. Чтобы сделать это было проще, нередактируемые в данный момент слои сделайте невидимыми. Значительно облегчить эту работу также может включенный режим Snap (Привязать).
    К направляющим символ «прикрепляется» за условный центр (белый кружок). Соответственно относительно него и происходит движение. В данном случае важно, чтобы по траекториям мяч и тень перемещались одинаково. Если у ваших объектов центры не совпадают, согласуйте их: в режиме преобразования символа активизируйте инструмент
    Free Transform (Произвольное трансформирование). По траектории скользить будет не низ мяча, а его центр.
  4.  Перейдите в конец последовательности и «привяжите» к нижней точке траектории (первой «впадине») соответствующие им объекты. Проверьте, нужным ли образом произошло автоматическое заполнение кадров (оно может быть неверным, если объект не прикрепился к направляющей, неправильно задан центр или включен режим Orient to path (Ориентировать по траектории)).
  5.  Задайте настройки:
  •  Для «тела» мяча и его контура параметр Ease (Замедлить) = - 100 (так как, падая, мяч ускоряется).
  •  Для контура задайте поворот по часовой стрелке 1 раз (Rotate= CW, times = 1).
  •  Тень в исходной точке сделайте в два раза больше, чем в конечной (инструментом Free Transform (Произвольное трансформирование)). В начале движения она должна быть прозрачнее, чем в конце (30 и 70 % соответственно для опции Alpha (Альфа) меню Color (Цвет)), а также светлее (30 % белого в настройке Tint (Оттенок)).
  1.  Протестируйте анимацию. Калькированные кадры данного отрезка движения мяча показаны на рис. 27.

Рис 27. Движение мяча по траектории

  1.  Аналогичным образом заполните три оставшихся участка движения мяча. Особое внимание обратите на точность совмещения «тела» мяча и его контура. Не нарушайте взаимное соответствие направляющих. Для этого все слои типа Guide (Направляющий) переведите в нередактируемый режим. Прим. показан на рис. 28.

Рис. 28. Положения мяча на всем пути

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

«Вес» анимации по-прежнему составляет 2 Кб.

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

Оптимизация вида временной шкалы.

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

  •  Наиболее простой и очевидный путь освободить немного места на экране — рассортировать слои по папкам. В данном случае этот подход не даст желаемого эффекта, так как одновременно приходится работать со всеми слоями.
  •  Попробуйте изменить высоту слоев на временной шкале. Для этого в меню временной шкалы (открывается кнопкой в ее правом верхнем углу) поставьте «птичку» около опции Short (Сжатый). При этом высота кадров уменьшится приблизительно в полтора раза. Кроме того, можно отрегулировать и ширину кадров, выбрав один из пяти параметров того же меню: Tiny (Крошечный), Small (Маленький), Normal (Обычный), Medium (Средний), Large (Большой). Если вы не хотите, чтобы кадры и их последовательности окрашивались, отключите настройку Tinted Frames (Цветные кадры) рассматриваемого меню.

На рис. 29 показан вид временной шкалы создаваемой анимации при включенных параметрах Short (Сжатый) и Small (Маленький), а также отключенной опции Tinted Frames (Цветные кадры).

Рис. 29. Экономичный вариант временной шкалы

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

Изменять особенности заливки символа, не считая совершенно бесполезных в данном случае RGB-смещений, в ходе анимации нельзя. Поэтому можно создать маскирующий «тело» мяча слой с «окном» такого же размера. Заставив его двигаться синхронно скрываемому объекту, вы сможете свободно масштабировать, искажать и поворачивать последний; а сторонний наблюдатель будет видеть все тот же круглый мяч, правда, с изменяющейся заливкой. Но слой не может быть одновременно маскирующим и направляемым! Также невозможно сочетать маскируемый слой с направляющей. Один слой может выполнять только одну функцию, т.е. быть обычным (Normal), направляющим (Guide) или направляемым (Guided), маскирующим (Mask) или маскируемым (Masked). Невозможно маскировать или направлять объекты слоев также из папок.

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

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

Анимировать маски можно так же, как обычные символы.

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

Трансформация формы — вид анимации во Flash

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

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

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

  1.  При помощи инструмента Rectangle (Прямоугольник) нарисуйте черный квадрат.
  2.  На десятую позицию текущего слоя вставьте ключевой кадр и замените в нем квадрат на красный круг (инструмент Oval (Овал)).
  3.  Выделив один из кадров полученной последовательности, в меню Tween (Последовательность) палитры свойств выберите пункт Shape (Форма).

Последовательности с изменением формы в отличие от анимаций движения заливаются не фиолетовым, а зеленым цветом.

Анимация создана. Чтобы в этом убедиться, посмотрите несколько кадров последовательности или нажмите Ctrl + Enter.

На рис. 30 показаны разные стадии преобразования квадрата в круг.

Рис. 30. Автоматическое преобразование формы

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

Можно организовывать и более сложные анимации с изменением формы. Например, преобразование буквы «Е» в букву «М».

  1.  Инструментом Text (Текст) в режиме Static Text (Статичный текст) введите букву «Е». Используя инструмент Free Transform (Произвольное трансформирование), увеличьте ее до подходящих размеров (даже наибольший кегль, равный 96, соответствует слишком мелкому для анимации изображению символа).
  2.  На десятую позицию вставьте ключевой кадр. Щелкнув по букве «Е», в режиме редактирования текста, замените ее на «М».
  3.  Оба символа переведите в обводку и заливку, выполнив для них команду Modify > Break Apart (Изменить > Разбить на части).
  4.  Для большей эффектности залейте букву «М» радиальным градиентом.
  5.  Конвертируйте последовательность в анимацию с изменением формы.

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

Рис. 31. Неудачное преобразование формы

Инспектор свойств анимированной последовательности дает возможность определиться с двумя настройками:

  1.  Blend (Переход). Опция предлагает два подхода к трансформации:

Distributive (Распределенный). Подходит для интерполяции сглаженных графических объектов.

Angular (Угловой). Предназначен для преобразования фигур, содержащих острые углы и прямые линии.

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

В случае если проводимое Flash автоматическое преобразование формы получается далеким от вашего замысла, вы можете помочь программе, указав, как его конкретно нужно сделать. Для этого следует поставить специальные метки, называемые Shape Hint (Указатель формы). Они покажут системе, какие положения должны занять данные точки в конечном объекте. Для этого:

  1.  Посчитайте необходимое количество меток. В случае преобразования букв их стоит поставить на всех углах и изломах. Очевидно, что для «Е» их понадобится около десяти.
  2.  Исходя из количества меток, выполните столько же раз команду Modify > Shape > Add Shape Hint (Изменить>Форма>Добавить указатель формы) или нажмите Ctrl + Shift + Н. При этом в центр фигуры будут добавлены маленькие красные кружки, помеченные буквами латинского алфавита.
  3.  Расставьте указатели формы на наиболее важные точки фигуры (углы, разломы и перегибы). Они должны быть размещены строго по краям объекта. Вариант распределения меток по контуру буквы «Е» показан на рис. 32, а.
  4.  Переместитесь в конечный кадр анимации и распределите автоматически введенные на объект маркеры по тем точкам, в которые должны перейти положения, помеченные соответствующими им указателями первого кадра. В данном случае буква «М» похожа на повернутую на 90 градусов по часовой стрелке букву «Е», исходя из этого и нужно расставлять маркеры. Если оба указателя из пары поставлены верно, то первый из них станет желтого цвета, второй — зеленого. Образец расположения указателей для буквы «М» представлен на рис. 32, б.

Рис. 32 а, б Расстановка указателей формы

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

Для удаления лишнего маркера щелкните по нему правой кнопкой мыши и в открывшемся меню выберите пункт Remove Hint (Удалить указатель).

Чтобы убрать все указатели формы, задействуйте команду Remove All Hints (Удалить все указатели) того же меню.

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

Рис. 33. Преобразование объекта с использованием Shape Hint (указатель формы)

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

Вернитесь к заданию №4.

Символы типов Movie Clip (Клип) и Graphic (Графический) имеют собственную, ничем не отличающуюся от главной, временную шкалу (клипы являются особыми объектами, «фильмами в фильме», и их вполне можно отождествлять с SWF-файлами). Следовательно, использующийся в анимации символ сам может быть анимацией, причем даже содержащей другие символы. Глубина подобного вложения практически не ограничена.

Подобно всему фильму, можно управлять особенностями прокрутки анимированных символов. Для этого обратитесь к нужной настройке специального списка, расположенного в инспекторе свойств около кнопки Swap (Обменять): Loop (Цикл) — клип будет прокручиваться без перерыва, Play Once (Воспроизвести один раз) — будет показан один раз. Single Frame (Единственный кадр) — воспроизведение будет остановлено на первом кадре.

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

  1.  Из библиотеки перейдите в режим редактирования символа, изображающего «тело» мяча.
  2.  Вставьте ключевой кадр на позицию, которая на главной временной шкале завершает первую анимационную последовательность.
  3.  При помощи инструмента Fill Transform (Трансформация заливки) градиенты в ключевых кадрах измените так, чтобы они соответствовали движению мяча. Например, в верхней части траектории блик может быть меньше и располагаться центральнее, чем в точке отскока (рис. 34).

Рис. 34. Изменение освещенности мяча в ходе движения

  1.  Преобразуйте последовательность в анимацию с трансформацией формы при помощи команды Shape (Форма) меню Tween (Последовательность) палитры свойств. Параметру Ease (Замедлить) присваиваем значение -100 (так как изменение эффектов освещения должно быть согласовано с особенностями движения объекта).
  2.  Возвратитесь на основную сцену и протестируйте фильм. Если заданное изменение градиента плохо подходит к общей картине, то подберите более удачные его характеристики.
  3.  Повторите описанную последовательность действий для трех оставшихся анимационных промежутков.
  4.  Анимация получилась качественная: предусмотрено ускорение мяча, особенности поведения тени, вращение и даже эффекты освещения.

Между типами символов Graphic (Графический) и
Movie Clip (Клип) существует разница:

  •  Если и тот, и другой позволяют менять одни и те же свойства, их использование при создании мультипликаций идентично, оба они сами могут являться анимациями и содержать символы.
  •  Если вы используете Flash без применения ActionScript, то разницы нет никакой (по крайней мере, видимой).
  •  Но если вы хотите создать анимацию или игру и для этого будете активно использовать программирование, то различие этих двух типов становится очевидным. Символами типа Movie Clip (Клип) можно управлять при помощи скрипта, Graphic (Графический) же кода не «слышит». Восприимчивость клипов к программным событиям требует дополнительной (зачастую «холостой») проверки на каждом шаге, что является излишней в случае создания простых анимаций нагрузкой на процессор. Поэтому если вы не собираетесь управлять объектами при помощи программирования, используйте для символов только тип Graphic (Графический).

Задание 6: Повторите при помощи ActionScript созданную анимацию прыгающего мяча.

  1.  Создайте новый документ. Чтобы не рисовать все объекты заново, их нужно перенести из созданного ранее FLA-файла. Можно просто, открыв фильм, скопировать все символы. Но можно поступить техничнее. Выполнив команду File > Import > Open External Library (Файл > Импорт > Открыть внешнюю библиотеку), выберите в открывшемся окне необходимый файл. В результате библиотека вашего старого фильма будет импортирована в новый.
  2.  Создайте три слоя и назовите их «Контур», «Мяч» и «Тень». Перетащите на них соответствующие символы.

При программном задании анимации мяча лучше обойтись вообще без слоев и вставленных на рабочее поле объектов. Данный случай решен не самым рациональным путем (не вводятся понятия глубины (depth) и метода импортирования клипов (attachMovie).

  1.  

Так как в программировании лучше использовать только клипы, то следует изменить тип символов (изначально он был задан как Graphic (Графический)). Для этого выберите строку Movie Clip (Клип) специального меню инспектора свойств клипа (рис. 35).

Рис. 35. Изменение типа символа

  1.  

Программа способна выполнять лишь четкие указания вроде: «При наступлении события Event координату у экземпляра N символа Object увеличить на 5». Следовательно, в самом начале нужно дать символам конкретные имена. Вернее, идентификаторы следует определить для экземпляров символов, так как материнские объекты были названы при их создании. Сделать это можно в строке Instance Name (Имя экземпляра) палитры свойств экземпляра (рис. 36). Именем может выступать практически любой текст (кроме некоторых служебных символов, например «/», и русских букв). Дайте объектам следующие идентификаторы: «contour», «ball», «shade».

Рис. 36. Присвоение имени экземпляру символа

  1.  Создайте новый слой, назовите его «Actions» и поместите выше остальных. Выделив его первый кадр, нажмите F9. Откроется палитра ввода кода Actions (Действия). Так как придется вводить достаточно много скрипта, расширьте ее протаскиванием за верхний край так, чтобы она закрыла всю рабочую область. Подготовительный этап закончен.
  2.  Для написания кода следует привести систему в исходное состояние, т.е. объекты должны быть помещены в точки, из которых начнется их движение. Это нельзя сделать «вручную», так как:
  •  во-первых, позиционировать символы с точностью до пикселя непросто.
  •  во-вторых, если расположить их произвольно и написать код исходя из значений в соответствующих окошках палитры свойств, то будет достаточно легкого смещения одного из объектов, чтобы все перестало работать.
  1.  Поместите экземпляр «ball» в нужную точку, для этого:
  •  напишите «адрес» объекта. Так как экземпляры находятся на той же временной шкале, что и сам код, то задавать путь необязательно;
  •  задайте имя экземпляра и поставьте точку (ball.). Это означает, что нужно обратиться к какому-то методу или свойству объекта с именем ball;
  •  задайте имя свойства, к которому следует обратиться. В данном случае это координата по оси X: ball._х. Знак подчеркивания в начале имени свойства — особенность синтаксиса ActionScript, характерная для многих свойств: _rotation, _xscale, _alpha. Если свойство было задано верно, то оно будет выделено синим цветом.

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

Точку можно понимать как переход от множества к одному из его элементов. Например, клип «ball» образован, помимо графической составляющей, множеством свойств и применимых к нему методов. Запись _root.ball._x означает, что вы обращаетесь к большому множеству _root (обозначение основной временной шкалы), переходите к его подмножеству ball (соответствующий клип) и акцентируете внимание на одном его элементе — свойстве _х (координата по горизонтали).

  •  Так как экземпляр «ball» уже присутствует на экране, то его свойство _х уже имеет конкретное значение. Вам нужно переопределить его. Сделать это можно при помощи оператора присваивания «=» (логическое равенство проверяется в ActionScript оператором «==»): ball. _x=.
  •  Координаты документа на главной временной шкале отсчитываются по-другому, чем принято в декартовой системе. Точкой (0, 0) является левый верхний угол листа. Ось Х направлена слева направо, а ось Y— сверху вниз.

(Система координат Flash берет свое начало из профессионального программирования. Изображение на экране принято описывать при помощи матриц, элементами которых являются соответствующие пиксели. Индексация же в матрицах имеет направление слева направо и сверху вниз. Представляйте рабочую область как большую матрицу) Таким образом, если вы хотите поместить объект левее видимой области, то его свойству _х должно быть присвоено некоторое отрицательное значение. Так как общая ширина листа составляет 550 пикселей, то приемлемой цифрой будет -50: ball. x=-50.

  •  Поставьте «;». Точка с запятой в ActionScript (да и во всех С-подобных языках) обозначает конец строки. Этот знак нужно ставить после любого определения или вызова метода. Если вы его пропустите, программа может выполниться некорректно или не выполниться в принципе.

Обязательно завершайте строки символом «;», согласовывайте количество открывающих и закрывающих скобок в функциях, циклах и условиях. Много ошибок связано с использованием прописной буквы (для программы «flash» и «Flash» — это разные объекты).

  •  Аналогично определите координату экземпляра по оси Y. Так как мяч должен начать движение где-то в точке, расположенной на уровне трех пятых от всей высоты рабочей области (равной 400 пикселей), а ось направлена сверху вниз, то подходящим значением будет 170.

Полный текст скрипта, позиционирующего «тело» мяча в нужной точке:

bаll._х=-50;

ball._y=170;

  1.  Поместите в ту же точку контур мяча:

contour._х=-50;

contour._у=170;

  1.  Нажмите Ctrl + Enter. Вы увидите, что первоначально расположенные отдельно объекты стали совмещены и выглядят как один предмет. Проиграв кадр при помощи команды Control > Play (Контроль > Воспроизведение) или нажав Enter, вы подобного результата не получите. Поэтому далее это не используйте.
  2.  Необходимо определить, как часто будет изменяться положение объектов, связанное с их движением. При создании анимации непрограммными методами это происходило в каждом новом кадре. В этот раз вы пойдете тем же путем (хотя возможностей сейчас у вас гораздо больше). Создайте специальный объект — функцию, которая будет запускаться в каждом новом кадре и изменять положение мяча и тени.
  •  Введите _root. onEnterFrame. Это означает, что вы заставляете объект _root (основную временную шкалу) «слушать» событие onEnterFrame (системный обработчик события наступления нового кадра). Вместо _root можно использовать любой «слушающий» системные события объект (называемый листенером (listener)), например клип «contour».

Системных обработчиков событий не так много. Они существуют для наиболее важных ситуаций: загрузки нового кадра (onEnterFrame), нажатия кнопки (onRelease), щелчка мышью (onMouseDown), нажатия определенной клавиши (onKeyDown) и некоторых других.

  •  Укажите системе, что следует выполнять в случае наступления «прослушиваемого» события. В данном случае – это будет функция, содержащая управляющий движением объекта код. Поэтому напишете _root. onEnterFrame=function () {}. Приведенная запись означает:

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

В круглых скобках задают параметры (в данном случае скобки пустые).

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

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

ball._x+=2;

contour._х+=2;

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

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

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

Координата по оси ординат ускоренно движущегося тела определяется по формуле Y = Y0 + VYo t+ 1/2 at2,

где Y0 — начальное положение,

VYo — начальная скорость вдоль соответствующей оси, а — ускорение,

t — время движения.

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

ball._y=Y0+Vy*t+a*t*t/2;

Символом «*» в ActionScript задается умножение. Через него же определен и квадрат времени, так как использовать для этого специальный метод слишком громоздко.

Движение мяча по горизонтали равномерное, поэтому и формула используется более простая: Х=Х0+Vxt, где Х0— координата по оси абсцисс начальной точки, Vx — скорость в рассматриваемом направлении, t — время движения.

В форме скрипта:

ball._x=X0+Vx*t;

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

var t=0;

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

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

var X0=-50;

var Y0=170;

var t=0;

var a=2;

var Vy=0;

var Vx=6;

  1.  Теперь нужно определиться, что будет выступать в качестве времени. Привязаться к номеру кадра нельзя — он только один. Поступите по-другому: при каждом запуске функции к переменной t прибавьте некоторую величину (ее подходящее значение подберёте потом эмпирически). Это даст тот же эффект, что и привязка к реальным «часам». Необходимый код:

t+=0.6;

Оператор «+=» служит для увеличения переменной или свойства на определенную величину. Аналогичный оператор для вычитания значения — «-=», умножения на значение — «*=», деления на значение — «/=».

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

  1.  Протестируйте фильм. Если мяч не будет двигаться по параболе, набирая скорость, проверьте верность введенного кода.
  2.  Следует описать то, что должно произойти при ударе мяча об пол. Однако, прежде нужно разобраться, как вы будете узнавать об ударе. Так как единичное перемещение объекта в данном случае невелико, то наиболее удачным признаком этого будет превышение координатой Y мяча некоторого порогового значения:

if (ball._y>350){}

где if — это логический оператор условия. Если выполняется предложение в его круглых скобках, то (подобно функциям) запускается код в фигурных скобках. Точка с запятой после if не ставится.

  1.  В фигурных скобках оператора условия следует задать необходимые действия.
  •  Изменение направления движения мяча на языке физики означает изменение знака вертикальной составляющей скорости. Но ее значение в точке, которую вы приняли за уровень пола, неизвестно. Чтобы решить эту проблему, в «теле» функции введите переменную, значение которой в каждом кадре будет фиксировать текущую величину вертикальной составляющей скорости мяча. В основу ее нахождения возьмите формулу вычисления скорости тела при ускоренном движении:

newV=Vy+a*t;

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

Vy=-newV*0.85;

  •  В результате удара должна уменьшиться и горизонтальная (ранее неизменная) составляющая скорости:

Vx=0.85*Vx;

  •  Изменение знака скорости — операция, требующая, чтобы координаты начальной точки (Х0, У0) были заменены на координаты точки отскока. Поэтому, как и для вертикальной составляющей скорости, введите «следящие» переменные в «теле» функции и для координат мяча:

newY=ball._y;

newX=ball._x;

При выполнении условия отскока их значения должны быть присвоены переменным Х0 и Y0:

X0=newX;

Y0=newY;

  •  В ActionScript явно объявлять переменные совсем необязательно. Но это стоит делать для повышения общей стройности и читабельности кода. Поэтому вне обработчика события onEnterFrame объявите переменные newV, newX и newY равными null:

var newV=null;

var newX=null;

var newY=null;

Величина null используется, если переменной при объявлении не может быть присвоено конкретное значение.

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

t=0.6;

Скрипт условного оператора должен быть помещен выше остального кода в «теле» функции.

  1.  Протестируйте фильм. Если мяч не двигается или двигается неправильно, то сравните код со следующим эталоном (приведен только текст функции):

_root . onEnterFrame=function ( ) {

if (ball._y>350) {

Vy=-newV*0.85;

Vx=0.85*Vx;

t=0.6;

X0=newX;

Y0=newY;

}

ball ._y=Y0+Vy*t+a*t*t/2;

ball._x=X0+Vx*t;

newV=Vy+a*t;

newY=ball._y;

newX=ball._x;

t+=0.6;

};

  1.  Опишите движение контура мяча. В качестве тренировки добавьте необходимый код самостоятельно. Для этого достаточно две строки скрипта.
  2.  Помимо простого перемещения, контур должен еще и вращаться. Угол поворота (в радианах) объекта определяет свойство _rotation. Оптимальная величина поворота определяется подбором:

contour ._rotation+=8;

  1.  Код для перемещения тени напишите самостоятельно. Изменять размеры тени (в процентах) можно при помощи свойств _xscale и _yscale, а прозрачность — используя свойство _alpha.

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

  •  Она физически адекватна, потому что в основу движения положены формулы механики.
  •  Можно наблюдать движение мяча при разных значениях скорости, начальной точки, упругости, ускорения (что трудно реализуемо или невозможно при использовании стандартных средств). Исходя из этого, будут получаться самые различные траектории. На рис. 37 представлены траектории движения мяча при коэффициенте упругости 96 % (а) и 85 % (б) (эти графики были получены при помощи средств программного рисования).

Рис. 37. Траектории движения мяча

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

Результат проделанной работы приведен на рис. 38.

Рис. 38. Движение мяча

PAGE  10


EMBED MSPhotoEd.3  

EMBED MSPhotoEd.3  

EMBED MSPhotoEd.3  

EMBED MSPhotoEd.3  

EMBED PBrush  

EMBED MSPhotoEd.3  

EMBED MSPhotoEd.3  

EMBED MSPhotoEd.3  


 

А также другие работы, которые могут Вас заинтересовать

23704. Линейные программы и арифметические действия 56.5 KB
  Развитие мышления фантазии памяти внимания и познавательных интересов; Оборудование урока: Компьютерный класс Интерактивная доска Ход урока: 1. Повторение материала предыдущего урока. Организационный момент Приветствие учеников Объявление темы целей и плана урока.
23705. Решение задач на сложные линейные программы 75.5 KB
  program my; var xyy1: integer; begin x:=3; y:=absxsqrsqrx; x:=3; y1:=absxsqrsqrx; writeln y; writeln y1; end. program my; var abc: integer; begin reada; b:=2012; c:=ba; writeln 'ваш примерный возраст 'c; end. program...
23706. Основы языка SQL 75.97 KB
  Баумана Кафедра САПР Основы языка SQL Федорук В.ru 2636526 АННОТАЦИЯ Данное учебное пособие предназначено для изучения основ языка SQL стандартного языка манипулирования данными в СУБД реализующих реляционную модель данных. Описывается синтаксис наиболее употребимых операторов языка SQL приводятся примеры. Учебная база данных реализована в среде СУБД mySQL средства доступа к ней встроены в учебное пособие.
23707. История Советского государства 1900-1991 3.37 MB
  Изменения и кризис в партии [4. XVII съезд партии. XVIII съезд партии. Полная трансформация партии [9.
23708. Перевод условия задачи на математический язык 51 KB
  Составьте выражения для ответа на вопрос задачи: 1 Автомобиль проходит расстояние х км за 2 ч а автобус − за 3 ч. Свой результат группы вывешивают на доску: 1 x : 2 – x : 3; 2 x : 2 – x : 3; 3 x : 2 – x : 3; 4 x : 2 – x : 3; – Что интересного вы замечаете Задачи все разные а выражения одинаковые. – Какое задание стояло перед вами Надо было составить выражение по условию задачи.
23709. Работа с математическими моделями 61 KB
  Количество в м Стоимость в руб. Шерсть d 3 420 000 Шёлк с Сначала надо найти стоимость шерсти: 3d затем стоимость шёлка: 420 000 – 3d что бы найти цену шёлка6 надо его стоимость разделить на количество купленного шёлка: 420000 – 3d : c Если d = 80 000 c = 2 420000 – 380 000 : 2 = 90 000 Ответ: цена шёлка 90 000 руб. Количество Стоимость в руб. Хлеб а 3 батона Яблоки b 2 кг Что бы найти стоимость всей покупки надо знать стоимость хлеба и стоимость яблок.
23710. Работа с математическими моделями 57.5 KB
  При решении последнего примера учащиеся вспоминают свойство 1 при умножении: а 1 = 1 а = а − Расположите полученные результаты в порядке возрастания. – Какие свойства умножения вы использовали Распределительное свойство умножения относительно сложения и вычитания: аb c = аb ac аb – c = аb – ac свойство 1 при умножении: а  1 = а. – Какое свойство умножения вы использовали Свойство 1 при умножении. – Како теперь свойство можно применить Распределительное свойство умножения относительно сложения.
23711. Математические выражения и математические модели 76.5 KB
  а Графическая модель: Не известно количество девочек x – одна часть и мальчиков но сказано что мальчиков в 3 раза больше x3 или 3x – вторая часть всего целое 48 человек. x 3x = 48 x x3 = 48 Используем свойство 1 при умножении: a1 = 1a: 1x 3x = 48 x1 x3 = 48 Используем распределительное свойство умножения: ab c = ab ac: x1 3 = 48 Найдём сумму стоящую в скобках: 4x = 48 x4 = 48 Что бы найти неизвестный множитель надо произведение разделить на известный множитель: x = 48 : 4 x = 12 x –...
23712. Степень числа 46.5 KB
  Цели урока: – сформировать понятие степени способность к чтению и записи выражений со степенями; – повторить и закрепить смысл умножения натуральных чисел понятия простого и составного числа зависимость между компонентами и результатами арифметических действий тренировать вычислительные навыки способность к анализу и решению задач Самоопределение к деятельности. – Доброе утро ребята – Что нового и интересного вы узнали на предыдущих уроках Мы научились раскладывать числа на простые множители находить НОД и НОК чисел разными...