4. Флэш-символы и библиотеки

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

На это есть несколько причин. Во-первых, очень часто возникает ситуация, когда нужно расположить на сцене несколько (а иногда и десятки) весьма похожих объектов. Если рисовать или копировать их обычным образом, описание каждого объекта займет довольно много места в готовом файле ролика, что сильно увеличит его размеры. Так как в большинстве случаев ролик Flash предназначается для загрузки через Интернет, это имеет критически важное значение. Если объекты различаются, например, только цветом или размером, гораздо практичнее разместить в файле описание одного эталонного объекта (образца) и далее использовать только ссылки на него. Размер файла ролика при этом уменьшится в несколько раз.

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

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

Существуют флэш-символы трех типов. Первый и самый распространенный из них - это ролик (Movie clip). Обратите внимание, что в основном ролике может содержаться сколько угодно других роликов! Этот тип флэш-символа в среде флэшеров обычно называют "мувик" (по созвучию с английским названием Movie clip).

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

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

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

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

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

И, наконец, третий тип флэш-символа называется графическим объектом, или просто графикой (Graphic). Не следует думать, что такие объекты содержат только статическую графику. Они тоже могут содержать анимацию, но в отличие от мувиков они всегда синхронизированы с основным роликом (или "родительским" мувиком, если графика расположена внутри него). Если, к примеру, проигрывание основного ролика останавливается; останавливается и анимация во всех графических объектах, расположенных в нем.

Чтобы преобразовать какой-либо объект во флэш-символ, следует его выделить и нажать клавишу F8. При этом появится диалоговое окно Symbol Properties (Свойства символа) (рис. 4.2). Здесь необходимо указать в поле Name (Имя) имя флэш-символа, используемое при его помещении в библиотеку, а также его тип с помощью переключателя Behavior (Поведение). По умолчанию создается мувик.

Рас. 4.2. Окно настройки флэш-символа

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

Работа с библиотекой

Чтобы открыть окно библиотеки (если оно еще не открыто), нажмите сочетание клавиш CTRL+L. На рис. 4.3 показано, как может выглядеть библиотека.

Рис. 4.3. Библиотека ролика

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

При щелчке мышью на названии какого-либо объекта в библиотеке он отображается на панели предварительного просмотра (в верхней части окна библиотеки). Для звука прорисовывается его волновая форма. Если объект содержит анимацию (или, опять же. является звуком), то в окошке предварительного просмотра появляются кнопки Play (Воспроизведение) и Stop (Стоп), как покачано на рис. 4.4. Таким образом, щелкнув на кнопке Воспроизведение, можно просмотреть анимацию в окне предварительного просмотра. Интересно, что, доиграв до последнего кадра, анимация приостанавливается и не "перескакивает" обратно на первый кадр до первого движения мыши.

Рис. 4.4. Кнопки воспроизведения анимации/звука в окне предварительного просмотра библиотеки

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

Рис. 4.5. Для внутренней организации библиотеки можно применять папки

Редактирование флэш-символов

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

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

Кстати, создать новый пустой флэш-символ и перейти к его редактированию можно, просто нажав сочетание клавиш CTRL+F8 или с помощью команды Options New Symbol (Параметры Создать символ) в меню окна библиотеки.

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

Рис. 4.6. У каждого флэш-символа есть своя шкала времени

Options Update Use Counts Now (Параметры Обновить счетчики использования)

Рис. 4.7. Библиотека в развернутом виде

Однако этим цифрам не стоит доверять безоговорочно. Дело в том, что команда Update Use Counts Now (Обновить счетчики использования) подсчитывает только флэш-символы, явно перенесенные в основной ролик, но не учитывает экземпляры флэш-символов, созданные программно.

Чтобы разместить флэш-символ на сцене основного ролика, достаточно просто перетащить мышью его значок из окна библиотеки в рабочую область. Можно также перетаскивать объекты в рабочую область не основного ролика, а другого флэш-символа, то есть вкладывать флэш-символы друг в друга.

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

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

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

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

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

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

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

Выделите нижний экземпляр мувика Ball1. Нажмите кнопку 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 (Добавить слой траектории), чтобы создать слой траектории. Нарисуйте на нем кривую, по которой "полетит" верхний круг. Перейдите обратно на слой, где располагается объект, и "притяните" его к концу траектории. То же самое проделайте с другим экземпляром мувика. Должно получиться что-то, похожее на рис. 4.8.

Рис. 4.8. Использование флэш-символов в анимации движения

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

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

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

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

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

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

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

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

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

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

Рассмотрим подробнее вспомогательную панель Effect (Эффект), с помощью которой можно изменять внешний вид выделенного экземпляра флэш-символа. Главным элементом управления в ней является раскрывающийся список. Если в нем выбран пункт 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. Как это делается, мы начнем рассматривать в следующей главе.

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

Итак, проведем эксперимент. Откроем новый ролик, нарисуем в рабочей области прямоугольник, например, синего цвета, выделим его и нажмем клавишу F8, чтобы преобразовать во флэш-символ. Зададим ему тип Button (Кнопка) и назовем knopka. Теперь дважды щелкнем на нашей кнопке (или на ее значке в библиотеке), чтобы перейти в режим редактирования.

Посмотрите, как выглядит шкала времени для кнопки (рис. 4.9). На ней всего четыре кадра, причем каждый из них имеет свое название: Up (Свободна), Over (Сверху), Down (Нажата) и Hit (Область наведения). В принципе, можно насоздавать дополнительные кадры, но толку от них никакого не будет.

Рис. 4.9. Шкала времени для кнопки

Четыре кадра Up (Свободна), Over (Сверху), Down (Нажата) и Hit (Область наведения) предназначены для управления видом кнопки в зависимости от действий пользователя. Как мы уже говорили, при наведении мыши на кнопку (при просмотре ролика) указатель мыши превращается в "лапку". Но, помимо этого, программа Flash ориентирована еще и на изменение вида самой кнопки.

Смысл кадров в следующем. Когда указатель мыши пользователя не наведен на кнопку, кнопка отображается так, как определено в кадре Up (Свободна). Когда пользователь наводит на кнопку указатель мыши, начинается отображение кадра Over (Сверху). Когда пользователь нажимает кнопку мыши, отображается кадр Down (Нажата). Наконец, кадр Hit (Область наведения) не отображается никогда, но очень важен, поскольку именно он определяет область действия кнопки.

Продолжим рассмотрение нашего примера. Сейчас у нас в кнопке knopka определен только кадр Up (Свободна). При этом программа ведет себя так, как будто в остальных кадрах содержится то же самое, что и в кадре Up (Свободна).

Нажмем два раза клавишу F6, чтобы создать ключевые кадры на позициях Over (Сверху) и Down (Нажата). Перейдем в кадр Over (Сверху). Зальем в нем наш прямоугольник черно-синим круговым градиентом. Теперь перейдем в кадр Down (Нажата). Зальем в нем прямоугольник тем же градиентом, затем нажмем кнопку Scale (Масштабирование) и уменьшим размер прямоугольника. Передвинем его так, чтобы центр фигуры остался на том же месте, что и у большого прямоугольника в других кадрах.

Нажмите клавиши CTRL+ENTER. Перед вами появится кнопка в виде синего прямоугольника. При наведении на нее мыши она изменит свой цвет, а при нажатии кнопки еще и уменьшится (рис. 4.10).

Рис. 4.10. Различные состояния кнопки

Просматривая результат этого эксперимента, можно заметить, что если навести указатель мыши на самый край кнопки, то ничего не происходит. Изменения начинаются, только когда указатель мыши приближается к середине кнопки. Это происходит потому, что у нас не определен кадр Hit (Область наведения). Его содержимое по умолчанию считается совпадающим с предыдущим кадром Down (Нажата), в котором кнопка изображена маленькой! Чтобы этого избежать, следует скопировать в кадр Hit (Область наведения) содержимое кадра Up (Свободна). Сделайте это и еще раз просмотрите ролик с помощью CTRL+ENTER. Убедитесь, что теперь кнопка "действует" по всей своей площади.

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

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

Если теперь нажать клавиши CTRL+ENTER, можно заметить, что указатель мыши превращается в "лапку" только непосредственно над контурами букв. А поскольку в тексте пустое пространство занимает больше места, чем контуры букв, "попасть" в такую кнопку окажется нелегко (особенно, если слово крупное). Да и вообще такая ситуация вызывает недоумение: "Я щелкаю, а оно не работает!" Однако ситуацию можно легко исправить, нарисовав в кадре Hit (Область наведения) прямоугольник, несколько превосходящий по размерам надпись. Тогда кнопка станет для пользователя вполне "нормальной".

Вообще говоря, область действия кнопки не обязана совпадать с ее изображением. Если, например, скопировать содержимое кадра Up (Свободна) в кадр Hit (Область наведения), а затем передвинуть его в кадре Hit (Область наведения) куда-нибудь в другое место, при просмотре ролика возникнет весьма интересный эффект: кнопка "срабатывает" при щелчке не на ней, а в каком-то совсем другом месте. Только не увлекайтесь этим эффектом: иногда он производит впечатление недоделки, как будто что-то работает неправильно. Ну, а какое действие можно запрограммировать как реакцию на нажатие кнопки? Очень часто это, например, остановка или пуск воспроизведения ролика, загрузка другого ролика или веб-странички и т.п. Вариантов здесь очень много. Многие из них мы рассмотрим при изучении языка сценариев ActionScript.