iralebedeva.ru :: зелёный коллаж с цветами
КОНТАКТЫ
E-mail: ira.alma@yandex.ru
Телефон: +7 910 317 0585
ВКонтакте:
https://vk.com/iralebedeva_vk


iralebedeva.ru :: зелёный коллаж с цветами
опубликовано 10.03.2004 (г. Алма-Ата)
Flash-мастерская зелёных страничек
Лекционные материалы, домашние задания и тесты
дистанционного курса «Электронная школа Macromedia Flash MX»

Уроки информатики (лекционные материалы и практикумы)


ЭЛЕКТРОННАЯ ШКОЛА MACROMEDIA FLASH MX
II курс: Основы создания анимации в Macromedia Flash MX
Модуль II: Символы и экземпляры, Анимация типа Motion

Экспресс-план модуля:
  • Работа с символами. Типы символов используемых в Macromedia Flash
  • Несколько способов создания символов
  • Работа с экземплярами
  • Расчётная анимация типа Motion
  • Движение по пути. Слой Guide (направляющий)

Работа с символами. Типы символов используемых в Macromedia Flash

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

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

Использование символов позволяет значительно ускорить процесс создания ролика и уменьшает размер swf-файла (передавать символ на компьютер пользователя требуется лишь один раз!).

И ещё, только на основе символов могут быть созданы интерактивные элементы ролика.

В программе Macromedia Flash предусмотрена возможность создания трёх видов символов:

  • Graphic (графика) — это статическое изображение или небольшой анимационный клип, привязанный к основной временной шкале согласно его внутренним правилам. Символы этого типа не обеспечивают интерактивное взаимодействие с пользователем и не могут содержать звуковое сопровождение.
  • Movie Clip (клип) — это независимый элемент анимации, воспроизведение которого не привязывается к основной временной шкале. Клип может включать в себя элементы интерактивного взаимодействия с пользователем, звуковое сопровождение и даже другие клипы. Клип, интегрированный во временную шкалу кнопки, позволяет создать анимированную кнопку.
  • Button (кнопка) — это интерактивный элемент ролика, способный реагировать на нажатие клавиш и на основные события, связанные с движением мыши (наведение, щелчок и прочие). Кнопка включает в себя ряд изображений, описывающих разные её состояния, и действия, определяющие реакцию на активность пользователя. Работа с кнопкой может сопровождаться звуком.

Поскольку отличительная особенность любого символа — это связь с библиотекой, то к семейству символов вполне можно отнести:

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

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

Библиотеку ролика вы можете открыть в любой момент, воспользовавшись командой Window > Library (окно > библиотека) и держать окно открытым, пока в нём есть потребность.

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

Несколько способов создания символов

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

  • Используя клавишу Shift или Ctrl, выделите в палитре Timeline все кадры, которые должны войти в символ (в последующем, когда вам нужно будет превратить в символ сложную анимацию, захватывающую несколько слоёв, необходимо будет выделять необходимые кадры, и все нужные вам слои!).
  • Затем используйте команду Edit > Copy Frames (правка > копировать кадры) или щёлкните правой кнопкой мыши и в появившемся меню выберите Copy Frames.
  • Обратитесь к меню Insert > New Symbol (вставка > новый символ), выберите тип символа Graphic.
    Новый символ: Create New Symbol
  • Итак, внешний вид рабочего поля редактора изменился. Сейчас вы находитесь «внутри» символа. Встаньте на первый кадр палитры Timeline и используйте команду Edit > Paste Frames (правка > вставить кадры) или щёлкните правой кнопкой мыши и в появившемся меню Paste Frames.
  • Вернитесь на сцену, для этого щёлкните по значку Scene 1. И удалите все кадры анимации, которую преобразовали в символ, выделив их, используйте команду Insert > Remove Frame (вставка > убрать кадр).
    Значок сцены
  • Теперь сделайте ключевым первый кадр этого слоя и разместите на нём экземпляр символа с котёнком, воспользовавшись библиотекой ролика. Затем перейдите на 15 фрейм и используйте команду Insert Frame, для того чтобы «развернуть» анимацию.
2 способ:

Ваза с осенним букетом Выделите необходимые вам элементы изображения (например, вазу с букетом из осенних листьев) и используйте команду Insert > Convert to Symbol (вставка > преобразовать в символ). Выберите тип символа Graphic. Обратите внимание на небольшой крестик в центре окна. Это точка регистрации. При вычислении координат экземпляра символа определяется именно положение точки регистрации. Общепринято располагать точку регистрации примерно в центре символа.

3 способ:
Если вы заранее знаете, что создаваемое изображение будет оформлено как символ, сразу обращайтесь к команде Insert > New Symbol (вставка > новый символ). Кстати, если окно библиотеки открыто, то тот же самый эффект даст щелчок на кнопке New Symbol (новый символ — плюсик голубого цвета) в нижней части окна библиотеки.

4 способ:

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

***

Теперь немножечко поэкспериментируем. Не закрывайте библиотеку своего ролика, в котором вы создали символ типа Graphic, содержащий анимацию с котёнком. Создайте новый документ File > New и разместите на сцене котёнка, используя открытую библиотеку ролика с домашним заданием. Обратите внимание, что символ автоматически был размещён в библиотеке нового документа. Теперь со спокойной душой закройте файл с домашней работой. Сохраните новый документ на диске и протестируйте ролик. Ваш котенок, к сожалению, не хочет шевелить ушками и махать хвостиком. Почему? И как в данной ситуации можно поправить положение?

Палитра Timeline: «Разворачивание» анимации для символа типа Graphic (Графика)

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

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

Можно переопределить поведение символа-оригинала это можно сделать, используя кнопочку Properties в нижней части окна библиотеки или, щёлкнув правой кнопкой мыши, выбрать в появившемся меню раздел Behavior (поведение) и переопределить тип символа, используя предложенные варианты.

Работа с экземплярами

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

Давайте создадим новый документ и вынесем на сцену три экземпляра анимированного символа с котёнком. Используя палитру Properties, переопределим поведение экземпляров таким образом, чтобы один из них был Graphic другой Movie Clip, а третий Button.

Обратите внимание, что на палитре Properties для каждого экземпляра будут определены свои свойства, а также предоставлены возможности манипулирования этими свойствами:

Палитра Properties: Graphic (графика), Movie Clip (клип), Button (кнопка)

Поэкспериментируйте с каждым экземпляром, используя палитры Tools и Properties. Можно изменить окраску каждого отдельного экземпляра, повернуть его, отмасштабировать… Обратите внимание, что все эти свойства «принадлежат» экземпляру, хранятся вместе с ним и никак не связаны со свойствами других экземпляров этого символа или со свойствами самого символа.

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

  • Чтобы отменить заданный ранее цветовой эффект, следует выбрать пункт None (нет). Этот пункт выбирается по умолчанию, когда экземпляр символа создается впервые.
  • Чтобы изменить яркость экземпляра, надо выбрать пункт Brightness (яркость). Цветовые тона остаются теми же, но их яркость увеличивается или уменьшается в зависимости от положения движка. При максимальной яркости (100%) экземпляр превращается в одноцветное белое пятно, при минимальной (–100%) — в чёрное.
  • Чтобы задать режим окраски экземпляра посторонним цветом, следует выбрать пункт Tint (оттенок). Нужный цвет задаётся путём указания цветовых компонентов или выбором из палитры. Плотность «подкраски» задаётся при помощи движка Tint Amount (плотность окраски). При нулевом значении экземпляр символа остаётся без изменений, при значении 100% он превращается в однотонное пятно выбранного цвета.
  • Задать степень прозрачности экземпляра можно, выбрав пункт Alpha (альфа). Степень прозрачности задаётся в процентах. При значении 100% экземпляр остаётся без изменений, при значении 0% он становится полностью прозрачным и, тем самым, невидимым.
  • Если ни один из этих вариантов вас не устраивает (например, вы хотите изменить и цветовой тон, и степень прозрачности), следует выбрать пункт Advanced (прогрессивный) при этом на панели появится кнопка Settings (установки), щелчок на которой открывает дополнительное диалоговое окно. С его помощью вы можете «за один заход» установить все перечисленные выше параметры цвета экземпляра.

Анимация типа Motion

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

Итак, создайте новый документ размером 100x300 px, назовите его ball и сохраните на диске.

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

Сделайте ключевым 50 кадр, Insert > Keyframe (F6). Затем вернитесь к первому кадру, обратитесь к палитре Properties и в разделе Tween установите значение Motion. Обратите внимание, что пространство слоя на палитре Timeline между 1 и 50 кадром залилось сиреневой краской и от 1 к 50 кадру протянулась стрелочка. Если вместо стрелочки на палитре протянулась пунктирная линия, это значит, что вы что-то сделали неправильно, например, забыли превратить мячик в символ или группу…

Продолжаем работу. Сделайте ключевым 25 кадр. В этом кадре мячик должен ударяться о поверхность. Для изменения координат мячика очень удобно использовать палитру Info. На рисунке, представленном чуть ниже, вы видите палитру Info для 1 и 25 кадра. 1 и 50 кадры совершенно одинаковы!

Палитра Info: 1 и 25 кадр

Чтобы создать иллюзию «прыгающего» — деформирующегося в момент удара о поверхность мячика сделаем ключевыми 20 и 30 кадр. В 25 кадре «деформируем» мячик — сплющим его по горизонтали — в палитре Info в разделе Height of instance измените значение на 32 px.

Палитра Timeline: Дополнительные ключевые кадры

Так же можно добавить эффект равноускоренного движения — когда мячик падает вниз, установив для первого кадра в палитре Properties в разделе Ease (замедление) значение –100. И эффект равнозамедленного движения — когда мячик движется вверх, установив для 30 кадра значение 100.

Палитра Properties: Раздел Ease (замедление)

Примечание: В данной работе частота кадров составляет 24 fps!

Движение по пути. Слой Guide (направляющий)

В предыдущей практической работе движение мячика было обусловлено изменением его координат, которыми мы манипулировали в палитре Info. Используя дополнительные ключевые кадры, можно создать сложное движение по весьма замысловатой траектории, однако Flash предлагает нам использовать для реализации этой задачи другой способ — использование слоя Guide (направляющего). Этот слой позволяет определить траекторию движения мяча, используя инструмент Pencil.

Поместите на сцену мячик, который вы создали в предыдущей работе (это должна быть либо группа, либо символ!). Сделайте ключевым 30 кадр. Вернитесь к первому кадру и в палитре Properties в разделе Tween установите значение Motion. Затем щёлкните на кнопке Add Motion Guide (добавить слой, управляющий движением) расположенной в нижней части палитры Timeline. Вооружившись инструментом Pencil, нарисуйте на этом слое траекторию движения мяча.

Add Motion Guide (добавить слой, управляющий движением)

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

Это можно сделать вручную, а можно использовать раздел Snap (привязать) в палитре Properties там, где вами был определён способ анимации — Motion.

Палитра Properties: раздел Snap (привязать)

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

Траектория движения мяча

Cкопируйте содержимое слоя Guide в буфер обмена, затем создайте для траектории дополнительный слой и вставьте в этот слой содержимое буфера, используя команду Paste in Place.

И ещё, нельзя не обратить внимания на очень важные разделы в палитре Timeline, определяющие поведение объекта в процессе движения:

  • Orient to Path (ориентировать по пути), если вы хотите, чтобы по нарисованному вами пути была сориентирована ось симметрии объекта, то вам непременно нужно поставить галочку в этом разделе (это особенно важно, когда в путь отправляется ракета, ворона, а не просто мячик, у которого нет ни носа, ни хвоста!).
  • Rotate (вращение) если вы хотите, чтобы движение объекта сопровождалось акробатическими трюками (кульбит, сальто-мортале…), непременно нужно будет обратить к этому разделу.

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

Примечание: В данной работе частота кадров составляет 24 fps!

Домашнее задание: Основы создания анимации в Macromedia Flash MX

Во-первых, вам необходимо продублировать анимационные flash-ролики, представленные в материале этой лекции.

Во-вторых, создать ролик, в котором по голубому небу поплывут, благодаря вам, «барашки» облаков. И вновь в домашней работе звучат прекрасные строки из стихотворения Сергея Александровича Есенина:

       Вяжут кружево над лесом
       В жёлтой пене облака.
       В тихой дрёме под навесом
       Слышу шёпот сосняка…

Итого: с вас три файла в формате fla (если суммарный размер файлов превысит 150 Кб, пожалуйста, упакуйте файлы в архив) и вышлите учителю.

Желаю Вам успехов в самостоятельном изучении Macromedia Flash MX!


Предыдущий модуль:
Модуль I: Основы создания анимации, Покадровая анимация
Следующий модуль:
Модуль III: Анимация типа Shape, Озвучивание анимации




ваш комментарий *
 
ваше имя

защитный код (цифры с картинки) *







statistics
Top.Mail.Ru       Яндекс.Метрика   

Распространение материалов сайта приветствуется.
Ссылка на материалы весьма желательна, но не строго обязательна ;-)
«Знание должно служить творческим целям человека. Мало накоплять знания;
нужно распространять их возможно шире и применять в жизни». Рубакин Н.А.