3.2. Образцы и экземпляры

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

Анимация с использованием флэш-символов
Сразу же очевидно, что, поскольку пульсирующие круги отличаются только размером и цветом, имеет смысл создать пульсирующий круг как флэш-символ. Откройте новый ролик и нарисуйте средних размеров круг синего цвета. Удалите его контур. Выделите круг и нажмите клавишу F8, чтобы преобразовать его во флэш-символ. Назначьте ему тип Movie clip (Мувик) и дайте имя, например, Ваll1. Теперь удалите получившийся мувик с основной сцены.

Откройте окно библиотеки с помощью клавиш CTRL+L. Выделите в нем единственный мувик Ball1 и дважды щелкните на его значке. Откроется окно редактирования мувика Ваll1. Выделите на шкале времени позицию 12 и нажмите клавишу F6, чтобы создать ключевой кадр, а затем сделайте то же самое в позиции 23. Вернитесь в ключевой кадр на позиции 12 и увеличьте в нем изображение круга с помощью кнопки Scale (Масштабирование). Создайте в 1 и 12 кадрах морфинг. Получился мувик, содержащий пульсирующий (увеличивающийся и уменьшающийся в размерах) круг.

Теперь перейдите в основную сцену. Перетащите мышью мувик Ваll1 на сцену и разместите его справа за границей рабочей области. Еще раз перетащите на сцену мувик Ball 1 и поместите его чуть ниже.

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

Выделите нижний экземпляр мувика Ваll1. Нажмите кнопку Scale (Масштабирование) и уменьшите его. Теперь (у нас по-прежнему выделен тот же экземпляр мувика) откройте вспомогательную панель Effect (Эффект). Если ее нет на экране, дайте команду Window/Panels/Effect (Окно/Панели/Эффект). В раскрывающемся списке этой панели выберите пункт Tint (Оттенок), чтобы изменить цвет экземпляра. Щелкните мышью на оранжевом цвете цветной шкалы, расположенной в нижней части панели Effect (Эффект). Экземпляр мувика Ball1 станет оранжевым, в то время как другой останется синим.

Чтобы "запустить" оба экземпляра по разным траекториям, разместим их в разных слоях. Выберите один из экземпляров и нажмите клавиши CTRL+X чтобы вырезать его в буфер обмена. Создайте новый слой (он получит название Layer 2) и, сделав его текущим, дайте команду Edit/Paste in Place (Правка/Вставить в то же место) или нажмите сочетание клавиш CTRL+SHIFT+V. В отличие от обычной команды Paste (Вставить) команда Paste in Place (Вставить в то же место) присваивает объекту те же координаты, которые он имел в "старом" слое.

Теперь нажмите кнопку Add Guide Layer (Добавить слой траектории), чтобы создать слой траектории. Нарисуйте на нем кривую, по которой "полетит" верхний круг. Перейдите обратно на слой, где располагается объект, и "притяните" его к концу траектории. То же самое проделайте с другим экземпляром мувика.

Перейдите в слой Layer 1 и, отметив позицию 48 на шкале времени, нажмите клавишу F6, чтобы создать ключевой кадр. Переместите в этом кадре экземпляр мувика на другой конец траектории. Затем откройте вспомогательную панель Effect (Эффект) и сделайте круг зеленым. Теперь перейдите в слой Layer 2 и проделайте тоже самое с другим экземпляром мувика. Сделайте круг в заключительном кадре желтым.

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

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

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

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

Нажмите клавиши CTRL+F8, чтобы создать пустой флэш-символ, и создайте там анимацию движения по траектории, как описывалось выше. Сделайте этот флэш-символ мувиком и назовите его ani1. Пусть анимация заканчивается в позиции 48.

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

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

Несмотря на то что в основном ролике сейчас всего один кадр, он уже готов! Нажмите клавиши CTRL+ENTER. Если все сделано правильно, вы увидите, как два пульсирующих шара, появившись с правой стороны экрана, пролетают налево с различной скоростью. Шар, закончивший путь быстрее, сразу же снова появляется с правой стороны, в то время как другой еще заканчивает предыдущий "полет".

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

Настройка экземпляров
Рассмотрим подробнее вспомогательную панель Effect (Эффект), с помощью которой можно изменять внешний вид выделенного экземпляра флэш-cимвола. Главным элементом управления в ней является раскрывающийся список. Если в нем выбран пункт None (Нет), экземпляр флэш-символа имеет тот же цвет, что и образец.

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

Пункт Tint (Оттенок) позволяет выбрать любой цвет из цветовой шкалы.

Очень интересен пункт Alpha (Альфа-канал). Он позволяет регулировать значение прозрачности. При его уменьшении (<100%) объект становится прозрачным, так что сквозь него виден фон и другие объекты. Чем меньше значение параметра, тем выше степень прозрачности. При нулевом значении параметра Alpha (Альфа-канал) объект вообще не виден.

Последний пункт раскрывающегося списка Effect (Эффект) - Advanced (расширенный). Он позволяет произвольно регулировать и цвет, и прозрачность и Вы спросите, а зачем он вообще нужен, если есть отдельная регулировка яркости, оттенка и прозрачности? Оказывается, для экземпляра флэш-символа может быть использован только один из пунктов раскрывающегося списка Effect (Эффект). То есть, если сперва настроить прозрачность, выбрав пункт Alpha (Альфа-канал), а затем выбрать для того же экземпляра пункт Tint (Оттенок), установки прозрачности сбрасываются! Поэтому и возникла необходимость во введении пункта Advanced (Расширенный), который можно рассматривать как универсальную замену трех предыдущих.

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

Кроме того, на этой панели есть еще четыре кнопки: Swap Symbol (Подменить Символ), Edit Symbol (Изменить символ), Duplicate Symbol (Дублировать символ) и Edit Actions (Изменить действия). Первая из них позволяет подставить другой образец для данного экземпляра флэш-символа и используется очень редко, так как несколько противоречит четкой логике построения ролика как иерархической структуры.

Вторая и третья кнопки служат соответственно для входа в режим редактирования и для копирования флэш-символа. Четвертая кнопка, Edit Actions (Изменить действия), служит для программирования действий, выполняемых в связи с различными событиями: это могут быть, например, нажатие пользователем кнопки мыши, получение роликом внешних данных и т. п. Действия программируются на языке ActionScript - внутреннем языке программы Flash. Как это делается, мы начнем рассматривать в следующей главе.