Главнаястр.1<Гл.3. Web-графикач1ч2>Слои (layer) похожи на стопку стеклянных листов, с расположенными на них объектами. Слои объединяют различные элементы в единое изображение. Размещение объектов в нескольких слоях не увеличивает размер выходного SWF-файла. Создание и редактирование объектов в одном слое, не затрагивает объекты других слоев. При редактировании можно скрывать слои, блокировать или показывать только контуры (outlines) содержимого слоя, менять порядок расположения слоев относительно друг друга. Удобно использовать отдельные слои для звуковых эффектов, программирования (actions), создания меток (labels) и комментариев (comments).
Монтажная линейка организует и управляет содержимым клипа в слоях и кадрах. Она показывает каждый кадр в клипе. Основные компоненты линейки – слои, кадры (frames) и ползунок (воспроизводящая головка - playhead).
Слои клипа показаны в колонке в левой части линейки. Кадры каждого слоя отображены в ряд справа от названия слоя. Линейка в верхней части, показывает номера кадра. Ползунок показывает текущий кадр, отображенный на Сцене. Статусная строка в нижней части линейки, показывает текущий номер кадра и время, с начала клипа до текущего кадра.
Кнопкой Frame View в правом верхнем углу можно изменить режим отображения Монтажной линейки.
Чтобы создать слой, воспользуйтесь кнопкой Add Layer внизу монтажной линейки или выберите Insert > Layer в главном меню. После создания новый слой появляется над текущим слоем и становится активным.
Щелкнув мышью на столбце Глаз (Eye) можно скрыть или показать слой. Крест напротив названия слоя в столбце Глаз указывает, что слой скрыт. Скрытые слои сохраняются в SWF-файле, но не редактируются при импорте SWF-файла во Flash.
Чтобы различить, какие объекты лежат в каком слое, можно показывать только их контуры, щелкнув мышью на квадрате напротив названия слоя в столбце Контур (Outline), для каждого слоя можно выбрать индивидуальный цвет контура.
Чтобы рисовать на слое или изменять его параметры, он должен быть активным (появляется значок-карандаш, справа от названия слоя). Одновременно активным может быть только один слой. Слои можно переименовывать, копировать, удалять, защищать от изменений (щелкнув мышкой на колонке Lock-блокировка-замок) и менять их порядок.
Облегчить рисование и редактирование объектов позволяют специальные опорные слои (guide layers). Любой слой можно сделать опорным (guide layers) указав его название правой кнопкой мыши и выбрав Guide в ниспадающем меню. Опорные слои имеют специальный значок слева от названия слоя и не включаются в результирующий SWF-файл.
В дальнейшем для контролирования анимации движения (motion tweening) мы будем применять направляющие слои (motion guide layer), которые можно создать, выбрав пункт Add Motion Guide в контекстном меню для слоя. Если перетащить обычный слой на опорный слой (guide layer), то последний превратится в направляющий слой. Чтобы предотвратить случайную конвертацию опорных слоев, их размещают в самом верху.
Маскирующие слои (mask layers) используют для создания эффекта частичной видимости. Маскировочный слой с расположенным на нем объектом (залитой формой) показывает только ту часть содержимого прицепленных к нему снизу слоев, которая находится под формой, скрывая остальное. Под одним маскирующим слоем можно сгруппировать несколько слоев (перетаскивая их). Объект в маскировочном слое можно анимировать, чтобы маска двигалась и изменялась, показывая разные объекты. Кнопки не могут быть маской.
Чтобы создать маску:
Flash игнорирует растровую графику, градиенты, цвета и стили линий в маскировочном слое. Любая залитая область будет создавать «дыру» в маске. Щелкните правой кнопкой мыши по названию слоя и в выпавшем меню отметьте пункт Mask. Слой-маска отмечается значком со стрелочкой вниз. Слой ниже него «прицепляется» к нему (если нет, нажмите Modify > Layer и отметьте флажок – Masked в окне свойств слоя) и его содержимое становится видно только через залитые области слоя-маски (на сцене этого не видно, нужно просматривать в режиме тестирования Control > Test Movie или в готовом SWF-файле).
Символы – это элементы, которые многократно используются в клипе. Символ может быть графическим (graphic), кнопкой (button), мувиклипом (movie clips), звуковым файлом (sound files) или шрифтом (fonts). Любой созданный символ автоматически помещается в библиотеку. Экземпляр (instance) – это копия символа, расположенная на сцене или вложенная в другой символ. Экземпляр может отличаться от символа цветом, размером и назначением. Можно менять свойства экземпляра, не изменяя основной символ, или редактировать основной символ, но тогда вносимые изменения коснутся всех используемых экземпляров. Использование символов сокращает размер файла, т.к. независимо от количества используемых экземпляров, Flash хранит символ только в одном месте файла. Поэтому удобно использовать символы, для элементов, которые появятся в клипе более одного раза.
Чтобы создать новый символ из существующих элементов
выделите элементы на сцене и выберите Insert > Convert to Symbol. В диалоговом окне Symbol Properties (свойства символа) укажите имя символа и его назначение – Графика, Кнопка или Мувиклип (Graphic, Button, or Movie Clip). Flash добавит символ в библиотеку. Выделенные элементы на сцене станут экземпляром символа.
Чтобы создать пустой символ
выберите Insert > New Symbol (или нажмите кнопку New Symbol, расположенную слева внизу окна Library). В меню Symbol Properties напишите имя символа и выберите его назначение – Графика, Кнопка или Мувиклип. Flash добавит символ в библиотеку и переключится в режим редактирования символа. В этом режиме название символа находится над верхним левым углом окна, над линейкой, а крестик показывает точку отсчета символа. После создания содержимого символа, чтобы вернуться в режим редактирования клипа выберите из меню Edit > Edit Movie или нажмите на кнопку Scene в верхнем левом углу окна сцены.
Чтобы редактировать символ
дважды щелкните по экземпляру на Сцене или используйте команду контекстного меню Edit in Place. Для редактирования символа на Сцене в отдельном окне используйте команду контекстного меню Edit in New Window или дважды щелкните на значке символа в окне библиотеки.
Каждый символ имеет собственные линейку (Timeline) и сцену (Stage). Тип символа определяют при его создании, в зависимости от того, какую роль в клипе он будет выполнять.
Символы Graphic используются для неподвижных картинок, часто используемых частей анимации, связанных с линейкой основного мувиклипа. Символы Graphic синхронизированы с линейкой основного клипа и в них не работают интерактивные элементы и звуки.
Символы Button используют для создания интерактивных кнопок, реагирующих на действия мыши. Определяются различные состояния кнопки, а потом назначаются действия для ее экземпляра.
Мувиклипы – Movie Clip используют для создания частей анимации. Мувиклипы имеют свою собственную линейку (Timeline), не зависящую от линейки основного клипа.
Библиотеку, входящую в Flash ролик, можно вызвать из меню Window > Library. Она хранит символы, которые были созданы в ролике или импортированы. В окне библиотеки отображают название объекта, его тип, количество раз использования его в ролике, способ включения объекта в библиотеку (если объект ассоциирован с подключенной библиотекой), и дата последней модификации. В верхней части окна библиотеки есть предварительный просмотр выбранного элемента. Окно библиотеки также содержит меню Options, позволяющее модифицировать объекты библиотеки.
Можно создавать постоянные библиотеки во Flash и открывать библиотеку в любом FLA-файле, чтобы сделать объекты библиотеки доступными для текущего ролика. Flash имеет несколько готовых библиотек (кнопки, картинки, клипы и звуки), которые открываются из меню Window > Common Libraries.
Для использования объектов библиотеки в текущем ролике перетащите объект из окна библиотеки на сцену. Для открытия библиотеки из другого файла Flash выберите File > Open as Library. Для редактирования объектов библиотеки выберите объект в окне библиотеки и из меню Library > Options выберите Edit. Для уменьшения размера FLA файла можно удалить неиспользуемые объекты библиотеки, щелкнув на значке мусорной корзины в нижней части окна библиотеки.
Чтобы создать новый экземпляр символа выберите ключевой кадр в слое на монтажной линейке и перетащите символ из библиотеки на сцену. Если создан экземпляр символа-Graphic, выберите Insert > Frame чтобы добавить нужное количество кадров, в котором символ будет содержаться.
Свойства экземпляров изменяют на панели Instance (Windows > Panels > Instance) и Effect (Windows > Panels > Effect). Можно менять тон, прозрачность и яркость экземпляров, тип поведения экземпляра (например, изменить Graphic на Move Clip) и вид анимации экземпляров для Graphic-символа. Экземпляр можно наклонять, вращать или масштабировать. Свойства экземпляра хранятся вместе с ним. Можно дать название экземпляру Мувиклипа, чтобы использовать его в скриптах ActionScript. Чтобы разорвать связь между экземпляром и символом, превратив экземпляр в набор форм и линий, нужно разбить экземпляр командой Modify > Break Apart.
Анимация создается изменением содержимого ключевых кадров. Flash позволяет создавать два вида анимации: покадровую и автоматическую (tweened). При создании покадровой анимации прорисовывается каждый кадр. При создании автоматической анимации, задаются начальный и конечный кадры, а Flash создает кадры между ними. При автоматической анимации размер файла получается меньше, чем в покадровой.
Ключевые кадры (keyframe) – это кадры, которые определяют изменения в анимации. В автоматической анимации задаются ключевые кадры, а Flash создает кадры между ними. Редактировать можно только ключевые кадры анимации. Чтобы редактировать промежуточные кадры анимации, нужно вставить новые ключевые кадры между старыми.
Чтобы создать ключевой кадр выделите кадр на Монтажной линейке, щелкните правой кнопкой мыши, и в появившемся меню выберите Insert Keyframe. На Монтажной линейке ключевой кадр, содержащий объект, обозначается закрашенным кружочком, а пустой кадр отделяется вертикальной линией перед кадром. Кадры, которые добавляются в тот же слой, будут иметь то же содержание, что и ключевой кадр перед ними. Для удаления кадров выделите их и выберите Remove из контекстного меню.
Для идентификации кадра на Монтажной линейке (и для обращения к кадрам в командах) ему можно присвоить метку. Для этого выделите кадр, выберите Window > Panels > Frame и введите текст метки кадра в поле Label.
Чтобы сделать текст комментарием, поставьте двойной слэш (//) в начале строки текста. Комментарии (пояснения) к кадру не включаются в конечный файл, так что их можно делать сколь угодно длинными.
Метка перемещается вместе с кадром, которому она назначена, какой бы номер не приобретал этот кадр.
Flash показывает различные виды кадров на монтажной линейке следующим образом:
Ключевые кадры показываются как черные точки, промежуточные кадры имеют стрелочку слева направо и подсвечиваются синим в случае анимации движения (Motion-tweened) или зеленым для анимации формы (Shape-tweened).
Пунктирная линия означает отсутствие конечного ключевого кадра.
Одиночный ключевой кадр показывается черной точкой. Светло-серые кадры после одиночного ключевого кадра имеют то же содержание без изменений и заканчиваются маленьким квадратиком в последнем кадре.
Маленькая буква "a" показывает, что в данном кадре вписаны команды ActionScript.
Красный флажок означает метку (label) кадра или комментарий.
В покадровой анимации содержание сцены меняется в каждом кадре (т.е. каждый кадр ключевой). Она подходит для анимации, в которой кадры меняются значительно, а не просто содержат перемещающиеся объекты. Чтобы создать покадровую анимацию создайте изображение в первом ключевом кадре. Затем справа от первого кадра вставьте ключевой кадр, который будет содержать то же, что и предыдущий. Измените содержание второго кадра. При необходимости вставляйте третий и т.д. ключевые кадры, изменяя в них содержимое.
В процессе создания анимации удобно использовать разные слои для размещения компонентов анимации так, чтобы они не перекрывались, не соединялись и не обрезали друг друга. Как правило, на заднем (нижнем) слое рисуют статичный фон, а в остальные слои помещают анимированные объекты.
При создании фона для анимации, бывает необходимо «растянуть» его на определенное количество кадров. Добавление новых кадров (не ключевых!) в слой «удлиняет» во времени картинку ключевого кадра. Чтобы «растянуть» изображение ключевого кадра во времени отметьте кадр справа от ключевого, в том месте, до которого изображение должно «удлиниться». Нажмите Insert > Frame (или с нажатой клавишей Alt перетащите мышкой ключевой кадр вправо) и Flash создаст последовательность кадров без ключевого кадра в конце.
Частота кадров (Frame Rate) всего клипа, воспроизводимых каждую секунду (frames per second - кадров в секунду) задается в меню Modify > Movie. Маленькая частота кадров дает медленную анимацию, большая – размазывает объекты. 12 кадров в секунду обычно наилучшая установка для Интернет-публикаций.
Flash может создавать два типа автоматической анимации: 1) Анимация движения (motion tweening) позволяет изменять во времени размеры, местоположение, угол наклона и т.д. только у экземпляра, группы или текстового блока. 2) Анимация формы (shape-tweening) меняет те же характеристики для не сгруппированных форм (линий, заливок).
Анимация движения
может быть создана двумя путями:
1) Создайте в начальном ключевом кадре анимации объект или перетащите его из библиотеки. Затем создайте конечный ключевой кадр, измените объект в конечном ключевом кадре и выберите на панели Window > Panels > Frame в поле Tweening тип анимации – Motion.
2) Поместите объект в начальном ключевом кадре. Нажмите Insert > Create Motion Tween. Объект будет автоматически сконвертирован в символ и назван tween1. Укажите кадр, которым должна заканчиваться анимация, нажмите Insert > Frame, внесите изменения в объект в этом кадре и снимите выделение с объекта. Flash автоматически создаст второй ключевой кадр и выставит тип анимации Motion в поле Tweening.
Для изменения длительности анимации, перетащите первый или последний кадры.
При выборе в панели Window > Panels > Frame в поле Tweening типа анимации – Motion можно настроить: Scale – возможность изменения размеров объекта; Easing – ускорение анимации (при отрицательных значениях движение ускоряется, при положительных замедляется); Rotate – поворот объекта в анимации (Auto – автоматически, CW – по часовой стрелке, CCW – против часовой стрелки); Orient to Path – перемещение объекта по нарисованному вручную пути; Synchronize – синхронизация клипов, вставленных на сцену.
Перемещение объекта по пути
Для перемещения автоматической анимации движения по определенному вами пути необходимо установить флажок Orient to Path в панели Window > Panels > Frame установите флажок Snap, чтобы центр объекта «прицепился» к пути. Для создания пути, по которому будут двигаться объекты в процессе анимации, необходим направляющий слой (Motion Guide). Для его создания выделите название слоя, с анимированным объектом и выберите Add Motion Guide из контекстного меню слоя. Flash создаст направляющий слой над выбранным слоем со значком «motion guide» слева от названия слоя. Нарисуйте в этом слое необходимый путь. "Прицепите" объект за центр к началу пути в первом кадре анимации и к концу пути в конце анимации. К направляющему слою можно подключить несколько слоев, чтобы несколько объектов двигались по одному и тому же пути, перетащив нужный слой под направляющий слой. Чтобы отсоединить слой от направляющего слоя перетащите его выше направляющего слоя.
Анимация формы
Для анимации формы в пустом ключевом кадре нарисуйте объект (или перетащите его из библиотеки и примените операцию Break Apart). Создайте второй ключевой кадр и измените в нем форму, размер или положение рисунка, созданного в первом ключевом кадре. Перейдите в первый ключевой кадр, выберите панель Window > Panels > Frame и в поле Tweening выберите тип анимации – Shape.
Хинты
Чтобы контролировать изменения контуров формы, используют хинты (shape hints), расставляя их в точки, которые должны соответствовать друг другу в начальной и конечной формах. Хинты представляют собой цветные кружки с буквами от a до z (т.е. можно использовать до 26 точек). Красным цветом отображаются хинты не поставленные на кривую, желтым – в точках начального ключевого кадра и зеленым в конечном. Хинты лучше расставлять против часовой стрелки, начиная с верхнего левого угла контура, а в сложных превращениях желательно рисовать промежуточные ключевые кадры.
Для расстановки хинтов нажмите Modify > Transform > Add Shape Hint в первом ключевом кадре анимации. Появившийся хинт с буквой "а" переместите в узловую точку, которую надо маркировать. Такой же хинт с буквой "a" появится в конечном ключевом кадре. Перетащите его в место, соответствующее точке, маркированной в начальном кадре. Добавьте еще хинты (с буквами b, c, d и т. д.) при необходимости. Чтобы увидеть все хинты, нажмите View > Show Shape Hints. Пользуясь контекстным меню, которое появляется при нажатии правой кнопки мыши на хинт можно убрать (добавить) один хинт и убрать все хинты.
На монтажной линейке находятся кнопки помогающие редактировать анимацию:
Onion Skin – позволяет просматривать и редактировать более одного кадра анимации. Текущий кадр показывается в полном цвете, а соседние приглушены, как сквозь полупрозрачную бумагу. Закрытые (с замочком) слои не будут видны.
Onion Skin Outlines – позволяет показать приглушенные кадры как контуры.
показывает все кадры между маркерами (появляется при включении Onion Skin). Можно сменить область охвата кадров, перетащив маркеры.
Edit Multiple Frames – включает режим редактирования нескольких ключевых кадров.
Для перемещения всей анимации
по сцене разблокируйте все слои (заблокируйте или выключите то, что должно остаться на месте), включите режим редактирования множества кадров (Edit Multiple Frames). Растяните маркеры Onion Skin на необходимые кадры, нажмите Edit > Select All и перетащите всю анимацию в нужное место на монтажной линейке.
Чтобы сконвертировать анимацию на сцене в мувиклип
выделите все кадры всех слоев анимации на линейке Timeline. Скопируйте кадры Edit > Copy Frames (или с помощью контекстного меню). Снимите выделение и, выберите Insert > New Symbol, назовите символ и в качестве поведения укажите Movie Clip. Flash откроет окно редактирования нового символа. На линейке нажмите правой кнопкой мышки на первом кадре первого слоя и вставьте скопированные кадры, нажав Edit > Paste Frames. Выйдите из режима редактирования символа – Edit > Edit Movie. Теперь можете удалить анимацию из основного клипа.
Кнопки – это на самом деле интерактивные 4-х кадровые клипы. Когда вы выбираете тип символа – кнопка, Flash создает отдельную Монтажную линейку кнопки из 4-х кадров. Первые три кадра отражают три состояния кнопки: Up - при наведении курсора, Over - когда курсор находится над кнопкой, Down - состояние нажатой кнопки. Четвертый кадр определяет область реакции на мышь и не отражается в клипе.
Чтобы создать кнопку
выберите Insert > New Symbol (или нажмите Control+F8). В окне Symbol Properties, введите имя новой кнопки и тип ее поведения – Button (кнопка). Flash переключится в режим редактирования кнопки. Заголовок линейки изменится – будет отражать четыре последовательных кадра Up, Over, Down и Hit. Первый кадр Up - пустой ключевой. Нарисуйте объект для кадра Up или импортируйте из библиотеки экземпляр символа. В кнопке можно использовать анимированные экземпляры Graphic или Movie Clip. Нажмите второй кадр - Over и выберите Insert > Keyframe (или нажмите F6). Flash вставит ключевой кадр, скопировав содержимое предыдущего кадра - Up. Измените содержимое кадра Over по вашему желанию. Аналогичные действия выполните в кадрах - Down и Hit. Если оставить пустым кадр Hit, то его роль сыграет кадр Up. Поместив кадр Hit вдали от других кадров можно создать разделенные области реакции на мышь.
Закончив редактировать кнопку, выберите Edit > Edit Movie. Чтобы кнопка стала интерактивной надо расположить ее экземпляр на сцене и назначить ему определенные команды. Они должны быть назначены экземпляру кнопки, а не кадру на линейке самой кнопки.
По умолчанию в основном клипе нажатие на кнопку выделяет ее. Командой Control > Enable Simple Buttons включается режим, когда кнопка реагирует на события, так, как будто клип воспроизводится (этой возможностью желательно пользоваться осторожно).
Flash предлагает разные способы озвучивания клипов. Можно прикрепить звуки к кнопкам, использовать звуки, которые проигрываются, синхронно с анимацией или независимо. Нужна только одна копия звукового файла, чтобы использовать этот звук несколько раз в клипе. Flash сохраняет звуки в библиотеке наряду с растровыми рисунками и символами. Для вставки звуковых файлов в библиотеку используется команда File > Import. Чтобы сжать звуковой файл укажите звук в окне библиотеки правой клавишей мыши и в появившемся контекстном меню выберите Properties, а затем тип сжатия Compression – MP3.
Чтобы добавить звук во Flash-клип, выберите слой, куда он будет помещен, и перетащите звук из библиотеки на сцену. Рекомендуется размещать каждый звук в отдельный слой. При воспроизведении клипа звуки на всех слоях будут объединены. С помощью панели Window > Panels > Sound можно настроить опции воспроизведения выбранного звукового файла:
Чтобы синхронизировать звук с анимацией на сцене, добавьте звук в начальный ключевой кадр, соответствующий началу анимации (с любой опцией синхронизации). Создайте ключевой кадр в звуковом слое на Монтажной линейке, там, где звук должен заканчиваться. Для этого кадра в панели Window > Panels > Sound выберите Stop в окне синхронизации. Воспроизведение звука прекратиться, при достижении ключевого Stop-кадра.
Добавление звуков к кнопкам
Можно связать звуки с различными состояниями кнопки. Войдите в режим редактирования кнопки из библиотеки. На Монтажной линейке кнопки, создайте слой для звука. В этом слое создайте ключевой кадр, соответствующий состоянию кнопки, которое надо озвучить (например, Down). Перетащите звук из библиотеки в кадр, который Вы только что создали. В панели Window > Panels > Sound выберите синхронизацию - Event (событие). Аналогично создается звук и для других состояний кнопки.
Звуки из библиотеки одного клипа можно использовать в других Flash-клипах. Для извлечения звуков из Flash-клипа в Wav-файлы используется команда File > Export Movie.
Сцены
Для тематической организации роликов можно использовать различные сцены для заставки, сообщения о загрузке и прочего. В клипе (SWF-файле) с несколькими сценами, они воспроизводятся в том порядке, в котором они представлены в панели Scene (вызывается через Window > Panels > Scene) в FLA-файле. Кадры в SWF файле имеют сквозную нумерацию через все сцены. Для изменения порядка следования сцен в ролике перетащите нужную сцену в нужное место в панели Scene. Для остановки или паузы в конце сцены или для обеспечения навигации по клипу используются скрипты. Чтобы добавить (или удалить) Сцену используются кнопки в панели Scene.
Movie Explorer
представляет собой средство для просмотра и упорядочивания содержимого клипа и выбора элементов для редактирования. Movie Explorer содержит список содержимого клипа, составленный в виде иерархического дерева. Для вызова Movie Explorer выберите Window > Movie Explorer.
Для выбора элемента в Movie Explorer щелкните по элементу в дереве навигации. Полный путь к выбранному элементу будет отображен в нижней части Movie Explorer.
В верхней части Movie Explorer, правее надписи Show, находятся кнопки, позволяющие отфильтровать содержимое – скрыть или показать определенные виды элементов (текст, символы, скрипты, импортированные файлы, кадры, слои). Для поиска видимых элементов используется поле Find. Для вызова основного меню Movie Explorer используется треугольник правом верхнем углу; можно вызвать меню, щелкнув правой кнопкой мыши на элементе в навигационном дереве Movie Explorer.
Меню позволяет:
– перейти на определенный слой, сцену или кадр в клипе – Goto Location;
– просмотреть описания символов – Goto Symbol Definition;
– найти выбранный символ в библиотеке клипа – Find in Library;
– редактировать выбранный символ на Сцене – Edit in Place, или в новом окне – Edit in New Window;
– распечатывать иерархическое дерево элементов клипа – Print;
– копировать – Copy, вставлять – Paste и удалять – Clear элементы клипа.
Обновлено 20.05.2004