Вы узнаете:
- Как открыть и закрыть и настроить панель анимации.
- Как добавлять, удалять и редактировать ключевые и кадры анимации.
- Для чего нужна кнопка Tween (Создание промежуточных кадров).
- Как сделать простую анимацию рисования звезды.
- Как настроить интервалы времени для каждого кадра анимации.
- Как оптимизировать анимацию для уменьшения размера Gif файла.
- Как импортировать Gif файлы в программу.
- Как переключаться с покадровой анимации на временную шкалу.
Урок состоит из следующих разделов:
1. Обучающее видео.
2. Что такое анимация.
3. Часть 1. Покадровая анимация.
4. Настройка интервалов.
5. Настройка периодичности повторов.7. Оптимизация анимации.
8. Сохранение анимации.10. Открытие GIF-файлов.
11. Кнопки унификации слоев анимации.
12. Закрытие панели анимации.
13. Вопросы.
14. Домашнее задание.
Что такое анимация
Анимация – это последовательная смена изображений, в результате которой нам кажется что объект движется, изменяет форму, появляется и исчезает, а так же с ним могут происходить другие динамичные действия.
При помощи анимации в программе Photoshop можно создавать слайд-шоу из фотографий или картинок, делать аватарки, баннеры, заставки для веб-страниц, динамичные открытки и различные презентации. Следует иметь в виду, что Photoshop все-таки графический редактор, и не рассчитан на сложные анимационные процессы. В программе есть два способа создания анимации – это покадровая анимация и анимация в режиме временной шкалы. Мы последовательно рассмотрим оба вида анимации. Весь 36 урок мы посвятим изучению покадровой анимации. А в 37 уроке займемся временной шкалой. Некоторые простые задачи удобнее выполнять именно в режиме покадровой анимации. Даже если вы умеете работать с временной шкалой из других программ, все равно, я вам советую попробовать выполнить задания из этого урока. Исходя из полученных знаний вы сможете принять решение о том какой метод вы будете использовать в каждом конкретном случае.
Часть 1. Покадровая анимация
Панель Frames (Покадровая) появилась уже давно. Рассмотрим ее настройки на примере анимации рисования звездочки.
Создайте новый документ размером 800 на 800 пикселей, разрешение 72, цветовой режим RGB. Создайте новый слой, щелкнув по значку внизу палитры Layers (Слои). Или нажмите Shift +Ctrl +N.
На панели инструментов выберите инструмент кисть 
черного цвета, диаметром 35 пикселей с размытыми краями. Нарисуйте первую наклонную линию (поставьте точку, нажмите Shift и поставьте следующую точку - линия получится прямой).
Создайте второй слой. Начертите следующую линию . Затем третий слой
и еще одну линию и т. д. У вас должно получиться шесть слоев, включая фоновый слой.
Чтобы открыть панель Animation (Анимация), щелкните в меню Window (Окно) по пункту Animation (Анимация). Или в меню Window (Окно) установите Workspace (Рабочая среда) на Video and Film/Video (Видео). Убедитесь, что панель находится в режиме именно покадровой анимации.
В противном случае щелкните по значку
в правой нижней части панели анимации.
Отключите видимость всех слоев кроме фонового слоя в палитре Layers (Слои), нажав на значок слева от миниатюры слоя. Это будет первый кадр нашей анимации.
Нажмите значок внизу панели Animation (Анимация). Появится второй кадр (копия первого кадра). Чтобы его изменить включите видимость первого слоя в палитре Layers (Слои). Снова нажмите на значок и включите видимость второго слоя.
Продолжайте создавать новые кадры и включать видимость следующих слоев до тех пор, пока в последнем кадре не появится вся звездочка.
В нижней части панели Animation (Анимация) находятся инструменты добавления, удаления и просмотра анимации.
- преобразование в анимацию по временной шкале.
- Tween (Создание промежуточных кадров).
- Duplicate сurrent frame (Создание копии выделенных кадров).
- Кнопки воспроизведения (Как на любом магнитофоне).
Selects First Frame (Выбрать первый кадр ); Selects Previews Frame (Выбрать предыдущий кадр );
Play (Запуск анимации);
Selects Next Frame (Выбрать следующий кадр).
- Удаление выделенных кадров. Следует иметь в виду, что клавиша Del на клавиатуре не удаляет выделенный кадр, а удаляет выделенный слой с палитры Layers (Слои).
Настройка интервалов.
Теперь настроим интервалы времени, в течении которых будут видны кадры анимации.
Под каждым кадром внизу написано 0 с. и стоит стрелка. Нажмите на стрелку и выберите частоту смены кадров. Выберите значение 0,5 для всех кадров (это значит, что через половину секунды произойдет смена кадров).
Настройка периодичности повторов.
Следующим этапом будет настройка периодичности повторов анимации. Щелкните по стрелочке в нижней части панели анимации. Появится меню выбора периодичности.
Если выбрать Forever (Навсегда/Постоянно), то анимация будет повторяться снова и снова. Этот процесс называется зацикливание.
Если выбрать Once (Однократно), то анимация проиграется один раз и остановится на последнем кадре.
При выборе пункта Other (Другое) можно задать другое количество повторов в пределах (от 1 до 999).
Теперь давайте проиграем созданную анимацию. Для этого нажмите кнопку Play (Запуск анимации). Если вам все нравится, переходите к следующему этапу, если нет, то подкорректируйте анимацию по своему усмотрению.
Перейдите в панель анимации. Нажмите на значок Duplicate сurrent frame (Создание копии выделенных кадров). Выделите все слои, кроме фонового слоя. 
Отключите видимость фонового слоя. Нажмите Ctrl + Shift + Alt + E. Появится новый слой, на котором будут отпечатаны все выбранные слои.
На миниатюре слоя будет изображена звезда на прозрачном фоне. Назовите этот слой Звезда.
Дважды щелкните по слою для перехода в настройки стиля. Задайте тень и наложение цвета. Цвет выберите по своему желанию.
Вернитесь к первому кадру анимации
и снимите видимость слоя со звездой
в палитре Layers (Слои).
Выделите последний кадр. В палитре Layers (Слои) оставьте видимыми только слой Звезда и фоновый слой.
Скопируйте этот слой и измените настройки стиля: Поменяйте цвет, задайте тиснение или обводку. Перейдите в панель анимации. Нажмите значок Duplicate сurrent frame (Создание копии выделенных кадров). Вернитесь к первому кадру в панели анимация и снимите видимость этого слоя в палитре.
Еще раз скопируйте слой и поменяйте стиль. Выберите инструмент Move (Перемещение) или нажмите Ctrl +T , для перехода к инструменту Свободное трансформирование. Измените масштаб. Перейдите в панель анимации. Нажмите значок. Вернитесь к первому кадру и снимите видимость этого слоя.
Снова скопируйте слой и еще немного увеличьте масштаб, а также поменяйте стиль. И добавьте кадр анимации. У вас должна получиться примерно такая раскадровка: 
Нажмите кнопку Play (Запуск анимации) и посмотрите на результат проделанной работы.
Оптимизация анимации.
Нажмите на значок в правой верхней части панели анимации. Появится дополнительное меню.
После завершения работы следует оптимизировать анимацию для уменьшения размера Gif файла и лучшей загрузки веб-браузером. Уменьшение происходит за счет исключения областей, не изменяющихся при переходе от кадра к кадру.
Выберите Optimize Animation…(Оптимизировать анимацию)
. Отметьте галочками оба пункта.
Bounding
Box
(Ограничительная рамка)
- обрезает кадры по измененной области по сравнению с предыдущим кадром.
Redundant Pixel Removal (Удаление лишних пикселов). Если пиксель не изменился по сравнению с предыдущим кадром, он становится прозрачным.
Чтобы PhotoShop сохранял кадры, включающие прозрачность, выберите параметр 
«Автоматически». Для этого выберите один или несколько кадров. Щелкните правой кнопкой мыши по миниатюре кадра. Выберите один из трех параметров:
Automatic (Автоматически) — текущий кадр отбрасывается, если следующий кадр содержит прозрачность слоя.,
Do not dispose (Не располагать) -Текущий кадр виден через прозрачные участки следующего кадра.,
Dispose (Располагать) — текущий кадр не виден через прозрачные участки следующего кадра.
Сохранение анимации.
Теперь пришло время сохранить анимацию. Конечно, в процессе работы нужно было сохранять файл в формате PSD, чтобы не попасть в ситуацию с внезапным отключением электроэнергии или неожиданной перезагрузкой компьютера. Но сейчас я имею в виду другое сохранение. Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды Save for Web (Сохранить для Web и устройств).
Выберите в меню File (Файл) пункт Save for Web (Сохранить для Web и устройств). Установите в настройках формат Gif. Обратите внимание на размер будущего файла. По возможности уменьшите его размер. Как это сделать мы подробно разбирали в уроке Image Size (Размер изображения). При оптимизации используйте модель редукции цвета Адаптивная, Перцепционная или Селективная, чтобы обеспечить согласованность цветов во всех кадрах. Нажмите Save (Сохранить), введите имя, путь и еще раз нажмите Save (Сохранить).
Раньше, чтобы записать анимацию мы переходили в приложение ImageReady.
В Photoshop CS2 появилась панель Анимации. Но, чтобы сохранить анимированный файл, все равно приходилось переходить в ImageReady. Для перехода служила кнопка внизу панели инструментов или меню File (Файл)- Edit in ImageReady (Перейти в ImageReady).
Начиная с Photoshop CS3 и выше, для записи анимации не нужны дополнительные программы. Для редактирования теперь служит панель Анимации, а для записи приспособили в меню File(Файл) пункт Save for Web (Сохранить для Web ) .
Рассмотрим еще один маленький пример создания покадровой анимации, в котором разберем для чего нужна кнопка Tween (Создание промежуточных кадров) .
Создайте новый документ размером 500 на 250 пикселей. Выберите инструмент Type (Текст), шрифт Impact, размер 150 пт. и напишите любое слово. Задайте непрозрачность 100 %. Добавьте стили слоя: тень, градиент и тиснение. Можете выбрать другой стиль, не обязательно делать как у меня. Деформацию текста также можно анимировать. В панели анимации задайте интервал 0,2 сек. Нажмите кнопку , чтобы скопировать первый кадр. Перейдите в палитру Layers (Слои) и уменьшите непрозрачность до 0. Поменяйте стиль слоя (например, вместо наложения градиента добавьте наложение цвета). Переключаясь между кадрами, вы сможете наблюдать, как меняется изображение.
Добавим перемещение. Выберите инструмент Move (Перемещение) и передвиньте текст вниз, за пределы листа. Перейдите в панель анимация и нажмите кнопку
В появившемся окне можно настроить количество добавляемых кадров. Чем их больше, тем равномернее будет переход. В графе Tween With (Промежуточные кадры) можно выбрать из списка, куда будут вставлены кадры:
Last (Последний кадр); Selection (Выделение); Previous Frame (Предыдущий кадр); First Frame (Первый кадр); Next Frame (Следующий кадр). Список меняется в зависимости от выделенного кадра.
Оставьте все настройки по умолчанию. Нажмите ОК.
Нажмите на Play (Запуск анимации). Если все устраивает, то переходите к сохранению анимации.
Открытие GIF-файлов.
В Photoshop CS3 и CS44 видео и GIF-файлы анимации не открываются через меню File (Файл) – Open (Открыть). При попытке открыть появляется окно:
Обязательно установите QuickTime Pro 7.1 или выше.
В Photoshop CS5 этой проблемы нет. Файлы легко открываются обычным способом.
Выберите в меню File (Файл) –Import (Импортировать) - Video Frames to Layers (Кадры видео
в слои…). У Вас будет недоступен выбор GIF файлов в поле тип файла. Однако этот недочет можно легко обойти, если предварительно скопировать название файла.gif и вставить его в поле имя файла или вручную набрать наименование в этом поле. Или введите * в поле Имя файла и нажмите Load (Загрузить), тогда 
наименование gif файла станет видимым и его можно открыть (Видимыми станут и другие файлы, даже те которые нельзя открыть в программе).
Настройки в появившемся окне оставьте по умолчанию. Отмеченными должны быть пункты From Beginning To End (От начала до конца) и Make Frame Animation (Создать покадровую анимацию). К сожалению, файлы, открытые таким способом, не будут содержать прозрачного фона – вместо него будет белый цвет. При открытии такого файла в CS5 прозрачный фон сохранится.
Кнопки унификации слоев анимации.
Посмотрите внимательно, как изменилась палитра Layers (Слои) при работе с покадровой анимацией. Появились кнопки позволяющие применять изменения в текущем кадре ко всем остальным кадрам. Отметьте галочкой пункт Propagate Frame 1 (Распространить кадр 1).
Посмотрим как они действуют… Откройте файл с анимацией рисования звезды. Выберите любой кадр и отключите видимость фонового слоя. Нажмите Play (Запуск анимации). Прозрачным стал только выбранный кадр. Нажмите кнопку Unify layer visibility (Унифицировать видимость слоя). Появится окно: .
Нажмите Match
(Синхронизировать)
и снова запустите анимацию . Рисование звездочки будет проходить на прозрачном фоне на протяжении всей анимации. Прозрачность первого кадра теперь присвоена всем кадрам анимации. Аналогичным образом вы можете управлять положением и стилем слоя.
В палитре Layers (Слои) выберите пункт Animation Options (Параметры анимации). По умолчанию кнопки унификации слоев появляются Automatic (Автоматически) при включении покадровой панели анимации. Вы можете изменить это правило, выбрав пункт Always Show (Всегда показывать) или Always Hide (Всегда скрывать).
Закрытие панели анимации.
Закрыть панель анимации можно разными способами:
Вы можете свернуть или закрыть панель анимации, а также перейти в Preferences (Установки), щелкнув по User Interface Preferences (Параметры интерфейса).
Вопросы:
- Что произойдет, если в покадровой анимации выделить кадр и нажать на клавиатуре Del?
Выделенный кадр будет удален.
Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации.
Слой, выделенный в палитре Layers (Слои) будет удален только для выделенного кадра анимации.
Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации кроме фонового слоя.
- У Вас есть три кадра. Анимация будет непрерывная. Что нужно сделать, чтобы добавить
5 промежуточных кадров между последним и первым кадрами?
Выбрать первый кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Next Frame (Следующий кадр).
Выбрать последний кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Previous Frame (Предыдущий кадр).
Выбрать последний кадр. Нажать кнопку Tween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать First Frame (Первый кадр).
- Для чего нужна оптимизация анимации?
Для преобразования в анимацию по временной шкале.
Для уменьшения размера Gif файла за счет исключения областей, не изменяющихся при переходе от кадра к кадру.
Для настройки периодичности повторов анимации.
Домашнее задание:
1)Выполнить покадровую анимацию рисования звезды (по уроку).
2) Выполнить покадровую анимацию текста.
Слой (Layer) - это часть сцены фильма, для которой могут быть установлены некоторые индивидуальные атрибуты. Каждый слой может содержать произвольное число различных объектов (с учетом ограничений на создание tweened-анимации, указанных в предыдущей главе).
Применение механизма слоев позволяет автономно работать с различными объектами, подлежащими включению в фильм, и за счет этого создавать сложные многоплановые сцены. Например, один из слоев может использоваться в качестве фона, на котором разворачиваются события фильма, другой - собственно анимированные объекты, а третий - элементы звукового сопровождения фильма. Кроме того, с помощью слоев могут быть получены специальные эффекты, такие как перемещение объекта по произвольной траектории, маскирование объектов и некоторые другие.
Свойства слоев
В обычном режиме все слои абсолютно прозрачны, в том смысле, что объекты, расположенные на различных слоях, визуально воспринимаются как элементы единой сцены. Вместе с тем, объект, находящийся на верхнем слое, заслоняет объекты, находящиеся в той же позиции на нижних слоях (рис. 7.1).
Вы всегда можете изменить порядок расположения слоев, а также редактировать объекты одного слоя независимо от элементов других слоев. Однако при необходимости можно выбрать одновременно объекты из разных слоев и работать с ними как с единым целым. Например, можно изменить их цвет или сгруппировать.
Рис. 7.1. Визуальное представление объектов, относящихся к разным слоям
Число слоев, которые вы можете создать, ограничено только объемом оперативной памяти вашего компьютера, и не влияет на размер файла публикуемого фильма. Для удобства работы со слоями в Flash MX реализована возможность хранения каждого набора взаимосвязанных слоев в отдельной папке слоев (Layer Folder).
Создание и удаление слоев
Для создания нового слоя требуется выполнить одно из следующих действий:
- в списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на том слое, над которым вы хотите поместить новый; в контекстном меню выбрать команду Insert Layer (Вставить слой);
- в списке слоев на панели временной диаграммы выбрать слой, над которым вы хотите поместить новый, щелкнув на нем левой кнопкой мыши; щелкнуть кнопку Insert Layer, расположенную ниже списка слоев, слева (рис. 7.2).
Когда вы создаете новый слой, он появляется на столе над выбранным слоем; в списке слоев его имя также помещается над именем выбранного слоя. Добавленный слой автоматически становится активным слоем. Это означает, что создаваемый на столе объект будет принадлежать данному слою; при этом видимость нового объекта будет зависеть от расположения ранее созданных объектов других слоев (см. рис. 7.2).
Рис. 7.2. Добавление нового слоя
По умолчанию новому слою присваивается имя Layer с указанием порядкового номера внутри сцены. Впоследствии это имя может быть заменено любым другим, поясняющим его предназначение (в том числе и с использованием кириллицы).
Для удаления слоя следует выполнить одно из следующих действий:
- в списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на том слое, который вы хотите удалить; в контекстном меню выбрать команду Delete Layer (Удалить слой);
После удаления слоя активным становится слой, расположенный под ним.
Операции создания и удаления слоя можно отменить (как и многие другие), щелкнув на кнопке Undo (Отмена).
Создание и удаление папок слоев
Для создания папки слоев требуется выполнить одно из следующих действий:
- в списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на любом слое; в контекстном меню выбрать команду Insert Folder (Вставить папку);
- в списке слоев на панели временной диаграммы выбрать любой слой, щелкнув на нем левой кнопкой мыши; щелкнуть кнопку Insert Layer Folder, расположенную, ниже списка слоев (см. рис. 7.2).
По умолчанию новой папке присваивается имя Folder с указанием порядкового номера внутри сцены. Впоследствии это имя может быть заменено любым другим, поясняющим ее предназначение (в том числе и с использованием кириллицы).
В отличие от слоев, для папки на временной диаграмме не отображается последовательность кадров (рис. 7.3).
Рис. 7.3. Создание папки слоев
Новая папка не содержит ни одного слоя. Чтобы поместить в папку какой-либо из существующих слоев, достаточно перетащить с помощью мыши строку с именем слоя на строку с именем папки. Все слои, включенные в папку, расположены в списке ниже ее. Кроме того, имена слоев папки смещаются вправо относительно имени папки. Например, на рис. 7.4 таким слоем является Layer 1.
Чтобы «вынуть» слой из папки, достаточно перетащить его в списке слоев выше строки с именем папки.
Рис. 7.4. Включение слоя в папку
При работе с папками следует учитывать, что они имеют чисто организаторские функции, и непосредственно не влияют на другие свойства слоев, в частности, на видимость объектов в разных слоях. Например, поместив в папку Folder 1 слой Layer 4, вы тем самым измените видимость объекта, расположенного на этом слое, только потому, что изменится его расположение в списке относительно других слоев (рис. 7.5).
Тем не менее, закрывая и открывая папку, вы можете управлять отображением входящих в нее слоев в списке временной диаграммы. При этом на столе объекты слоев остаются видимыми. Например, на рис. 7.6 показан вид окна Flash при закрытой папке Folder 1.
Еще одно достоинство в применении папок слоев состоит в том, что они позволяют быстро установить одни и те же значения атрибутов для всех включенных в папку слоев.
Разрешается создавать вложенные папки с неограниченным числом уровней вложенности.
Чтобы создать вложенную папку, необходимо:
- В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на любом слое, входящем в папку более высокого уровня; в контекстном меню выбрать команду Insert Folder.
Рис. 7.5. Изменение содержимого папки
Рис. 7.6. Вид окна Flash при закрытой папке Folder 1
- При необходимости переместить строку с именем созданной папки в новую позицию в пределах родительской папки.
При удалении папки удаляются также и входящие в нее слои, поэтому при попытке удаления папки Flash выводит на экран предупреждающее сообщение.
Для удаления папки следует выполнить одно из следующих действий:
- в списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на имени папки, которую вы хотите удалить; в контекстном меню выбрать команду Delete Folder (Удалить папку);
- в списке слоев на панели временной диаграммы выбрать удаляемый слой, щелкнув на нем левой кнопкой мыши; щелкнуть кнопку Delete Layer, расположенную ниже списка слоев, справа (см. рис. 7.2).
Установка атрибутов слоя
Каждому слою может быть назначена некоторая совокупность атрибутов. Значения этих атрибутов отображаются в списке слоев в виде специальных значков (рис. 7.7).
Рис. 7.7. Представление атрибутов слоев
Атрибутами слоя являются:
- уровень слоя - объекты самого верхнего слоя при воспроизведении фильма находятся как бы на переднем плане сцены и не заслоняются объектами нижележащих слоев; имя верхнего слоя является верхним и в списке;
- активность -на активном слое можно редактировать или создавать объекты, если для него не установлены атрибуты «скрыт» или «заблокирован»; активный слой отображается в списке инверсным цветом и помечается значком карандаша;
- видимость (Show/Hide - Показать/Скрыть) - объекты скрытого слоя (Hide) не видны на столе; такой слой помечается в списке красным крестом; на скрытом слое нельзя редактировать или создавать объекты, даже если он активен;
- блокировка (Locked/Unlocked - Заблокирован/Открыт) - на заблокированном слое нельзя редактировать или создавать объекты, даже если он активен; такой слой помечается в списке значком замка;
- контурность (Outlines) - объекты на контурном слое заменяются их контурами; включение такого режима позволяет видеть объекты, заслоненные объектами данного слоя (см. рис. 7.7); для контурного слоя можно дополнительно выбирать цвет контура его объектов, поскольку данный атрибут может быть установлен для нескольких слоев;
- ведущий/ведомый (Guide/Guided) - ведущий слой может использоваться в качестве шаблона при создании других слоев, а также для описания траектории движения объекта (подробнее этот вопрос будет рассмотрен ниже); ведущий слой не виден при воспроизведении фильма;
- маска/маскированный (Mask/masked) - использование слоя-маски позволяет динамически изменять видимость маскированных слоев, что обеспечивает интересные визуальные эффекты; (подробнее этот вопрос будет рассмотрен ниже).
Назначение слою требуемых атрибутов-может быть выполнено одним из следующих способов:
- с помощью команд контекстного меню, вызываемого щелчком правой кнопки мыши на имени слоя;
- с помощью трех кнопок установки атрибутов, расположенных выше списка слоев, справа (см. рис. 7.7); щелчок на любой из них приводит к установке соответствующего атрибута для всех слоев сцены;
- с помощью панели свойств слоя; чтобы ее открыть, следует дважды щелкнуть мышью на значке, расположенном левее имени слоя, либо выбрать в контекстном меню слоя пункт Properties.
В связи с последним вариантом следует отметить, что слой - это один из немногих объектов, для которого в Flash MX отсутствует собственный инспектор свойств. Поэтому установка атрибутов слоя выполняется с помощью диалогового окна Layer Properties. Оно имеет формат, достаточно традиционный для большинства Windows-приложений. В этом окне имеются следующие элементы управления (рис. 7.8):
- текстовое поле Name (Имя), предназначенное для ввода и/или редактирования имени слоя; по умолчанию создаваемым слоям присваиваются имена Layer I, Layer 2 и так далее; с целью повышения удобства работы вы можете назначить слою произвольное имя; Flash не препятствует использованию кириллицы в названиях слоев, что делает структуру фильма более понятной;
Рис. 7.8. Диалоговое окно Properties установки атрибутов слоя
- флажок Show (Показать), состояние которого определяет видимость слоя;
- флажок Lock (Блокировать), с помощью которого устанавливается соответствующее состояние слоя;
- группа переключателей Туре (Тип), позволяющих указать тип слоя:
- Normal - обычный;
- Guide - ведущий;
- Guided - ведомый;
- Mask -- маска;
- Masked - маскированный;
- Folder - папка;
- кнопка Outline Color (Цвет контура), щелчок на которой открывает окно палитры для выбора цвета контуров объектов слоя, если для него установлен вид «контурный»;
- флажок View layer as outlines (Отображать слой как контурный), с помощью которого можно установить/снять соответствующее свойство слоя;
- раскрывающийся список Layer Height (Высота слоя), предназначенный для указания высоты строки слоя на панели временной диаграммы (в том числе и высоты ячеек кадров); такая возможность может оказаться полезной для слоев, кадры которых содержат специальные значки (например, значок звукового символа); список содержит всего три варианта (100%, 200% и 300%).
Использование слоев в анимации
В данном подразделе рассмотрены четыре варианта применения механизма слоев при создании фильма:
- использование слоев для создания фонового изображения;
- использование ведущего слоя для управления движением объекта;
- использование слоя-маски для управления видимостью маскированных слоев;
- включение в сцену нескольких анимированных объектов.
Более сложные варианты применения слоев будут описаны в главе «Создание интерактивных фильмов».
Создание фона
Под фоном мы в данном случае понимаем статичные изображения, «декорации», которые не изменяются в процессе фильма. Фон может быть расположен как позади (с точки зрения наблюдателя), так и перед анимированным объектом. Простейший пример - использование в качестве фона циферблата часов, поверх которого перемещаются стрелки (на рис. 7.9 это слой Layer 2 (Циферблат)).
Процедуру создания фона рассмотрим на примере несколько подзабытого нами шарика. Предположим, что, прежде чем упасть, он прокатывается по столу (не по столу Flash , а по кухонному), на котором находятся какие-либо предметы. Шар прокатывается между ними таким образом, что одни оказываются с точки зрения наблюдателя за шаром, другие -- перед ним. На рис. 7.10 показаны кадры фильма, который нам предстоит создать.
Рис. 7.9. Пример использования фонового слоя
Рис. 7.10. Кадры фильма, использующего фон
В качестве основы для построения фильма используем «мультик», завершающий кадр которого был приведен на рис. 6.18. Чтобы добавить к нему требуемый фон, следует выполнить следующие действия:
- Щелкните правой кнопкой мыши на имени слоя Layer 1 и выберите в контекстном меню команду Insert Layer; в результате в список будет добавлен слой с именем Layer 2, расположенный над слоем Layer 1 и в списке, и на столе Flash .
- Нарисуйте в новом слое изображение стола и стоящего на нем предмета; чтобы шар перемещался точно по поверхности стола, воспользуйтесь кнопкой Onion Skin; обратите внимание, что после того, как вы что-нибудь нарисуете в слое Layer 2, на его временной диаграмме появится последовательность простых кадров, равная по длине созданной ранее анимации.
- Чтобы стоящий на столе предмет оказался за катящимся шаром, а правая ножка стола - за его осколком (см. рис. 7.10), необходимо поменять местами в списке слои Layer 2 и Layer 1; для этого достаточно перетащить мышью любой из них на место другого.
- Чтобы добавить еще один слой, на котором будет изображен предмет, заслоняющий шар, повторите шаги 1 и 2.
Окончательный вид временной диаграммы созданного фильма показан на рис. 7.11.
Рис. 7.11. Временная диаграмма фильма с двумя фоновыми слоями
Совет
Поскольку изображение, созданное на фоновом слое, должно быть видимым на всем протяжении анимации, удобнее сначала создать анимацию, а затем добавить в фильм фоновый слой. Если вы хотите предварительно «набросать» фон, то сделайте это на другом столе (например, создав дополнительный FLA-файл), а затем скопируйте нужный кадр в основной филь м.
Разумеется, «фоновый» слой ничем не отличается от любого другого, и если, например, вы захотите сделать фон подвижным, то вполне можете анимировать тот или иной объект фонового слоя. О том, как это лучше сделать, рассказано в подразделе «Включение в сцену нескольких анимированных объектов» данной главы.
Управление движением объекта
Во Flash существует понятие «ведущего слоя» - Guide Layer. При выборе этого термина разработчики Flash воспользовались своеобразной игрой слов английского языка. Дело в том, что ведущий слой имеет два предназначения:
- во-первых, вы можете поместить на него какие-либо комментарии (даже с иллюстрациями), которые видны только в режиме редактирования фильма, но не экспортируются в формат SWF; в этом смысле слово Guide можно перевести как «руководство», «инструкция»;
- во-вторых, с помощью ведущего слоя можно управлять траекторией перемещения объекта, анимированного с помощью tweened-анимации движения.
Чтобы создать слой-инструкцию, необходимо:
- В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на любом слое и в контекстном меню выбрать команду Insert Layer.
- Щелкнуть правой кнопкой мыши на вновь созданном слое и в контекстном меню выбрать пункт Guide.
В результате в списке слоев возле имени слоя появится значок в виде молоточка. Он говорит о том, что содержимое данного слоя предназначено исключительно для разработчиков, но не для конечных пользователей («зрителей»). На рис. 9.12 показан пример слоя-инструкции, содержащего единственный элемент - текстовый блок.
Рис. 7.12. Пример слоя-инструкции
Как было сказано выше, второй тип ведущего слоя - это слой, описывающий траекторию, по которой движется объект. Особенность такого применения ведущего слоя состоит в том, что предварительно требуется создать tweened-анимацию прямолинейного движения объекта.
Чтобы заставить двигаться объект по произвольной траектории, необходимо выполнить следующие действия:
- Щелкнуть правой кнопкой на имени слоя, содержащего анимированный объект.
- Выбрать в контекстном меню команду Add Motion Guide (Добавить слой, управляющий движением); в результате в списке слоев появится ведущий слой, помеченный специальным значком, а имя слоя с анимацией сдвинется вправо - это признак того, что он является ведомым слоем (рис. 7.13).
Рис. 7.13. Применение ведущего слоя для управления движением объекта
- Щелкните на имени ведущего слоя, чтобы сделать его активным.
- С помощью любого инструмента рисования (Pen, Pencil, Oval, Brush, Rectangle) изобразите траекторию движения объекта.
- Щелкните левой кнопкой мыши в ячейке первого кадра анимации и в панели инспектора свойств кадра установите один из двух флажков:
- Orient to Path (Ориентировать по маршруту), если вы хотите, чтобы по нарисованному вами маршруту была сориентирована ось симметрии объекта;
- Snap (Привязать), если требуется привязать к траектории, точку трансформации или точку регистрации объекта. После установки любого из флажков Flash автоматически позиционирует объект в кадре требуемым образом.
- Щелкните левой кнопкой мыши в ячейке последнего кадра анимации и в панели инспектора свойств кадра установите тот же флажок, что и для первого кадра.
Снимите выделение с анимированного объекта и воспроизведите фильм.
Замечание
Если вы построите траекторию, которая содержит пересекающиеся или соприкасающиеся участки, то объект будет двигаться по кратчайшему маршруту, соединяющему начальную и конечную точки траектории (рис. 7.14).
Рис. 7.14. Самовольное изменение маршрута Flash
После того, как траектория будет создана, вы можете сделать ее невидимой. Для этого требуется сделать невидимым ведущий слой. Изменение видимости слоя выполняется щелчком мыши на соответствующем значке в списке слоев временной диаграммы.
Маскирование слоев
Слой-маска позволяет создавать эффект отверстия, через которое «просвечивает» содержание одного или большего числа нижележащих слоев.
Маска может быть создана на основе следующих типов объектов слоя:
- заливки;
- текстового поля (любого типа - Static, Dynamic либо Insert);
- экземпляра графического символа;
- клипа (понятие клипа - Movie Clip - будет подробно рассмотрено в следующей главе).
На рис. 7.15 и 7.16 приведены примеры всех перечисленных выше вариантов масок (за исключением клипа). На рис. 7.15 показано, как выглядит маска в режиме редактирования, а на рис. 7.16 - в режиме просмотра (то есть «в действии»).
Рис. 7.15. Примеры объектов, на основе которых может быть создана маска (режим редактирования)
Рис. 7.16. Вид маскированного слоя при включенном режиме маскирования
Замечание
Оба приведенных выше рисунка представляют собой своеобразный коллаж, поскольку на маскирующем слое одновременно можно помещать объекты только одного типа (либо только заливки, либо только текст, либо графические символы). Причем «обычных» заливок может быть сколько угодно, а вот текстовое поле или графический символ не любят конкурентов.
Маску можно заставить перемещаться, используя любой тип анимации: как покадровую, так и tweened-анимацию.
С помощью tweened-анимации движения можно «оживить» маску, созданную на основе текстового поля, заливки, графического символа или клипа. Причем для клипа можно с помощью ведущего слоя задать произвольную траекторию движения.
С помощью tweened-анимации трансформации можно «оживить» маску, созданную на основе заливки.
Кроме того, для анимирования масок можно применять сценарии на ActionScript.
Нельзя маскировать слои внутри кнопок.
Создание маски
Маска представляет собой обычный слой, за исключением того, что любая заливка на нем интерпретируется Flash как отверстие, через которое виден нижележащий слой. При этом цвет заливки (в том числе растровой), наличие градиента, контур заливки и его тип полностью игнорируются Flash .
Слой-маска закрывает (маскирует) по умолчанию только тот слой, который расположен непосредственно под ним.
Чтобы маскировать слой, необходимо выполнить следующие действия:
- Щелкните правой кнопкой мыши на имени слоя, который вы хотите маскировать (закрыть маской), и в контекстном меню выберите команду Insert Layer (этот новый слой впоследствии будет служить маской).
- Поместите на слой-маску заливку (или заливки), которые вы хотите использовать в качестве «смотровых окон»; если вы предполагаете анимировать маску, то на ней должна присутствовать только одна заливка.
- Щелкните правой кнопкой мыши на имени слоя-маски и в контекстном меню выберите пункт Mask (Маска); с этого момента новый слой становится маской, при этом в списке слоев произойдут следующие изменения (рис. 7.17):
- слева от имени слоя-маски появится соответствующий значок;
- имя маскируемого слоя сдвинется вправо, и возле него также появится новый значок;
- оба слоя будут автоматически заблокированы (о чем свидетельствуют значки замков справа от имени слоя).
Кроме того, в результате выполнения указанных действий включается режим маскирования, вследствие чего и на столе произойдут изменения: через маску будут видны только не закрытые участки маскированного слоя.
Вы всегда можете изменить расположение, форму и количество «смотровых окон» маски. Чтобы сделать ее доступной для редактирования, достаточно снять с нее блокировку, щелкнув на значке замка (маскируемый слой можно не разблокировать). При этом автоматически снимается и режим маскирования (рис. 7.18).
Переход между режимами редактирования и просмотра маски может также выполняться с помощью команд контекстного меню слоя.
Чтобы включить режим редактирования, необходимо щелкнуть правой кнопкой мыши либо на имени слоя-маски, либо на имени маcкированного слоя и в контекстном меню выбрать команду Show All (Показать все).
Рис. 7.17. Видвременной диаграммы и сцены после включения режима маскирования
Рис. 7.18. Включение режима редактирования маски
Чтобы включить режим просмотра маски, необходимо щелкнуть правой кнопкой мыши либо на имени слоя-маски, либо на имени маскированного слоя и в контекстном меню выбрать команду Show Masking (Показать маскирование).
Анимирование маски
Как уже было сказано, «смотровые окна» маски могут быть анимированы одним из способов, рассмотренных ранее. Если вы хотите использовать автоматическую анимацию движения или трансформации, маска должна содержать только одно «смотровое окно».
При анимировании «смотрового окна» маскированный слой играет роль фона.
В качестве примера рассмотрим процедуру создания «смотрового окна», перемещающегося вдоль маскированного слоя. Чтобы пока не отвлекаться на детали, используем в качестве маски круг, созданный с помощью инструмента Oval, и заставим его пересечь пространство сцены слева направо, как показано на рис. 7.19 (для наглядности при создании рисунка использовался режим Onion Skin).
Рис. 7.19. Пример движущейся маски
Процедура создания такой маски состоит из следующих шагов:
- Поместите на слой, который вы хотите маскировать, какой-либо рисунок (например, с помощью операции импорта).
- Щелкните правой кнопкой мыши на имени маскируемого слоя и в контекстном меню выберите команду Insert Layer.
- На новом слое нарисуйте «смотровое окно» требуемой формы.
- Создайте для него tweened-анимацию движения (см. подраздел «Автоматическая анимация движения объекта»).
- Щелкните правой кнопкой мыши на имени слоя-маски, и в контекстном меню выберите команду Mask.
- В строке маскированного слоя щелкните правой кнопкой мыши в ячейке того кадра с номером, равным номеру последнего кадра анимации слоя-маски, и в контекстном меню выберите команду Insert"Frame; промежуток между первым и последним кадрами будет заполнен простыми кадрами.
После выполнения описанной процедуры временная диаграмма фильма с анимированной маской будет выглядеть примерно так, как показано на рис. 9.20.
Рис. 7.20. Вид временной диаграммы для анимированной маски
В качестве несколько более сложного примера рассмотрим маску, созданную на основе текстового поля. Эта маска не только перемещается вдоль сцены, но переворачивается во время движения (рис. 7.21).
Такой эффект можно обеспечить за счет использования двух дополнительных механизмов:
- зеркального отражения исходной последовательности символов;
- установкой параметров вращения на панели инспектора свойств первого кадра tweened-анимации.
Рис. 7.21. Пример маски на основе текстового поля
Чтобы получить маску с изменяющейся формой, необходимо выполнить процедуру, аналогичную рассмотренной выше. Разница состоит лишь в том, что для «оживления» маски должна применяться tweened-анимация трансформации. Простейший пример такой трансформации показан на рис. 7.22.
Более интересный эффект можно получить, если использовать при создании маски не один, а два фоновых слоя. Чтобы лучше представить, о чем идет речь, взгляните на рис. 7.23. Как видите, в данном случае маска перемещается не по белому полю, а по изображению.
Прежде чем мы перейдем к описанию процедуры создания такого эффекта, взгляните (рис. 7.24), как выглядят слой-маска и маскированный слой этого фильма в «разобранном» виде (то есть в режиме редактирования маски).
Рис. 7.22. Пример маски с изменяющейся формой
Рис. 7.23. Маска с дополнительным фоновым слоем
Рис. 7.24. Вид маски с дополнительным фоновым слоем в режиме редактирования
Чтобы построить такую «декорацию», необходимо:
- Создать слой-маску и маскированный слой, как это было описано в подразделе «Создание маски»; при необходимости - анимировать маску.
- Щелкнуть правой кнопкой мыши на имени слоя-маски и в контекстном меню выбрать команду Insert Layer, чтобы создать еще один слой.
- Перетащить новый слой в списке под маскированный слой (то есть сделать его самым нижним); при этом новый слой автоматически станет также маскированным.
- Щелкнуть правой кнопкой мыши на имени добавленного слоя и в контекстном меню выбрать команду Properties, чтобы открыть окно параметров слоя.
- В диалоговом окне Properties установить переключатель Туре в положение Normal, чтобы вернуть добавленный слой в «обычное» состояние.
В связи с включением в фильм дополнительного фонового слоя необходимо сделать два важных замечания:
- Маска (то есть создаваемое с ее помощью «смотровое окно») действует как своеобразный «волшебный луч», способный просвечивать любое количество слоев. Поэтому, если вы создадите, например, 5 маскированных слоев, связанных с одной и той же маской, то через «смотровое окно» будут видны все эти 5 слоев. В качестве иллюстрации на рис. 7.25 показан фильм, в котором использованы три фоновых слоя (они представлены в левой части рисунка).
- Поместив в сцену несколько слоев и изменяя их положение относительно маски и относительно друг друга, вы можете получить весьма большое количество различных вариантов компоновки сцены. Например, на рис. 7.26 показан случай, когда добавленный после создания маски фоновый слой был оставлен верхним в списке.
Рис. 7.25. Пример «просвечивания» через маску нескольких слоев
Рис. 7.26. Один из вариантов размещения дополнительного фонового слоя
Совет
Если вы решили создать несколько маскированных слоев, связанных с одной и той же маской, то для создания очередного маскированного слоя целесообразно щелкнуть правой кнопкой мыши на одном из уже созданных, и в его контекстном меню выбрать команду Insert Layer. В результате новому слою автоматически будет присвоен тип Masked.
Включение в сцену нескольких анимированных объектов
Во всех рассмотренных выше примерах анимации на сцене перемещался или изменял форму только один объект. Очевидно, что для привлечения интереса зрителей и повышения «реалистичности» многих фильмов одного персонажа недостаточно.
При описании общих принципов применения слоев было отмечено, что одно из их достоинств - возможность анимации нескольких объектов сцены. Чтобы правильно использовать такую возможность, необходимо учитывать ряд факторов, к описанию которых мы и переходим.
Для начала рассмотрим простейший случай, когда требуется включить в сцену всего два анимированных объекта.
Если они «по сюжету» фильма никак не взаимодействуют друг с другом, то все достаточно очевидно -- требуется разместить каждый объект в отдельном слое и анимировать его. И хотя при этом один из них, возможно, будут периодически заслонять другой, никаких дополнительных манипуляций с временной диаграммой слоев не требуется.
Итак, для анимирования двух объектов, которые начинают и заканчивают двигаться одновременно, необходимо выполнить следующие действия (предполагается, что применяется tweened-анимация):
- Постройте в первом слое (Layer 7) анимационную последовательность для первого объекта (см. подраздел «Автоматическая анимация движения объекта»).
- Добавьте второй слой, например, с именем Layer 2 (см. подраздел «Создание и удаление слоев») и создайте на нем объект, подлежащий анимированию; при этом Flash автоматически построит для этого слоя последовательность простых кадров, равную по длине первой анимированной последовательности (рис. 7.27 а), как при создании фонового изображения.
- Щелкните правой кнопкой мыши в ячейке первого кадра слоя Layer 2 и выберите в контекстном меню команду Create Motion Tween; при этом между первым и последним кадром появится пунктирная линия (рис. 7.27 б).
- Щелкните правой кнопкой мыши в ячейке последнего кадра слоя Layer 2 и выберите в контекстном меню команду Insert Keyframe; в результате пунктирная линия будет преобразована в линию со стрелкой (рис. 7.27 в).
- Переместите объект в позицию, соответствующую последнему кадру анимации.
Рис. 7.27. Вид временной диаграммы при анимировании двух независимых объектов
Замечание
По умолчанию Flash пытается «выровнять» моменты окончания анимации для всех слоев. Кроме того, требуется решить, какой из объектов должен располагаться на переднем плане, если в некоторый момент времени они окажутся в одной позиции на столе.
Если поведение одного объекта должно зависеть от поведения другого (по крайней мере, визуально), дело обстоит несколько по-иному. В этом случае недостаточно просто анимировать каждый объект в отдельности. Необходимо согласовать между собой их временные диаграммы (точнее, временные диаграммы соответствующих слоев).
Процедуру согласования временных диаграмм рассмотрим на примере.
Предположим, что один из объектов начинает двигаться только после того, как в него «врежется» другой. Соответствующая сцена показана на рис. 9.28 (в верхней части рисунка приведены временная диаграмма фильма и исходное положение объектов, в нижней - дальнейшее развитие событий).
Вероятно, на основе уже приобретенных к этому моменту знаний и навыков читатель смог бы и самостоятельно догадаться, каким образом можно получить требуемый результат, тем не менее ниже приведены краткие пояснения.
Рис. 7.28. Сцена с двумя взаимодействующими объектами
Если требуется сместить по времени движение второго объекта относительно движения первого, необходимо выполнить следующие действия:
- Установите указатель в любой точке анимированной последовательности слоя Layer 2, нажмите левую кнопку мыши и, не отпуская ее, сместите всю последовательность по временной диаграмме на требуемое количество кадров (рис. 7.29).
Рис. 7.29. Смещение движения второго объекта во времени
"пустые" кадры на временной диаграмме
заполнение"пустых"кадров
Рис. 7.30. Восстановление видимости объектов
- В результате смещения образуются «пустые» кадры, на которых второй объект не виден до начала движения; в свою очередь, первый объект становится невидим после окончания движения (рис. 7.30 а); чтобы оба объекта были видны на всех кадрах, следует размножить первый кадр анимированной последовательности для второго объекта и последний кадр - для первого объекта (рис. 7.30 б); для размножения кадров может быть использована как команда Insert Frame, так и команда Insert Keyframe.
Повторив описанную выше процедуру, вы сможете увеличить число взаимодействующих объектов до необходимого количества.
Добавление второго символа или текстового поля в диапазон анимации движения приведет к замене исходного символа в анимации движения. Изменить целевой объект анимации движения можно любым из следующих способов:
- перетащите другой символ из библиотеки в диапазон анимации на временной шкале;
- используйте команду Изменить > Символ > Заменить символ .
Символ можно удалить из слоя анимации, не удаляя и не разделяя саму анимацию. Позже в анимацию можно будет добавить другой экземпляр символа. Также можно в любое время изменить символ или его тип.
См. также
Компоненты анимации движения
- Это последовательность кадров на временной шкале, в которой одно или несколько свойств объекта на временной шкале меняются со временем.
- Диапазон анимации движения выглядит на временной шкале как группа кадров на одном слое с фоновым цветом.
- Эти диапазоны анимации можно выделять как один объект, перетащить из одного места на временной шкале в другое и даже в другой слой.
- В каждом диапазоне анимации может быть анимирован только один объект в рабочей области. Этот объект называется целевым объектом диапазона анимации.
- это кадр в диапазоне анимации движения, где явно определены одно или несколько значений свойств для целевого анимационного объекта.
- Эти свойства могут включать положение альфа (прозрачность), оттенок цвета и т. д.
- Для каждого определенного свойства создается отдельный ключевой кадр свойства.
- Если во одном кадре задать более одного свойства, то ключевые кадры для каждого из этих свойств будут размещены в этом кадре.
- Используйте редактор движения, чтобы просмотреть каждое свойство диапазона анимации и его ключевые кадры свойств.
- Чтобы выбрать, какие типы ключевых кадров свойств отображать на временной шкале, из контекстного меню диапазона анимации, щелкните правой кнопкой мыши ключевой кадр свойства и выберите «Просмотреть ключевые кадры».
Целевой объект анимации
Анимация движения имеет один объект в диапазоне анимации, который называется ее целевым объектом. Использование одного целевого объекта в анимации обеспечивает несколько преимуществ:
- Анимацию можно сохранить как для повторного использования.
- Можно легко перемещать анимацию движения на временной шкале (перетаскивать диапазон анимации в другое место) или в рабочей области.
- Чтобы применить новый экземпляр к существующей анимации движения, выполните следующие действия:
- вставьте его в анимацию с целью замены;
- перетащите новый экземпляр из библиотеки;
- используйте команду «Заменить символ».
Объекты и свойства, для которых возможна анимация движения
В число типов объектов, к которым можно применить анимацию движения, входят фрагменты роликов, графические объекты, символы кнопок, а также текстовые поля. Эти объекты могут иметь следующие свойства:
- Положение по осям X и Y на плоскости
Положение по оси Z в трехмерном пространстве (только фрагменты роликов)
Вращение на плоскости (вокруг оси z)
Вращение вокруг осей X, Y и Z в трехмерном пространстве (только фрагменты роликов): указывает, что FLA-файл предназначен для ActionScript 3.0 и Flash Player 10 или более поздней версии в параметрах публикации. Adobe AIR также поддерживает трехмерное движение.
Наклон по осям X и Y
Масштаб по осям X и Y
Цветовые эффекты: включает в себя альфа-канал (прозрачность), яркость, тон и расширенные параметры для цветов. Цветовые эффекты можно анимировать только для символов и текста TLF. Анимируя эти свойства, можно добиться плавного появления или изменения цвета объекта. Чтобы создать анимацию движения цветового эффекта для классического текста, преобразуйте текст в символ.
Свойства фильтров (фильтры нельзя применять к графическим символам)
Создание анимации движения
Анимацию движения можно создать одним из трех способов:
- Создайте графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши кадр и выберите Создать анимацию движения .
- Выберите графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши кадр и выберите Вставка > Анимация движения .
- Создайте графический объект или экземпляр, который требуется анимировать, затем щелкните правой кнопкой мыши экземпляр в рабочей области и выберите Создать анимацию движения .
Создание анимации движения
Анимация движения других свойств с помощью инспектора свойств
Используйте команду Создать анимацию движения , чтобы анимировать большинство свойств экземпляра символа или текстового поля. К таким свойствам относятся, например, поворот, масштабирование, прозрачность или оттенок (только для символов и текста TLF). Например, можно изменить свойство альфа-прозрачности экземпляра символа, чтобы он плавно появлялся на экране. Список свойств, к которым можно применять анимацию движения, приведен в разделе Анимируемые объекты и свойства .
Выделите экземпляр символа или текстовое поле в рабочей области .
Если выделенный фрагмент содержит другие объекты или содержит несколько объектов из слоя, то Animate предлагается преобразовать его в символ фрагмента ролика.
Выберите Вставка > Анимация движения .
Если появится диалоговое окно Преобразовать выделенный фрагмент в символ для анимации , нажмите кнопку «ОК» для преобразования выделенного фрагмента в символ фрагмента ролика.
Когда анимация движения применяется к объекту, который существует только в одном кадре, точка воспроизведения перемещается в последний кадр новой анимации движения. В противном случае точка воспроизведения не перемещается.
Поместите точку воспроизведения в кадр диапазона анимации, для которого необходимо указать значение свойства.
Точку воспроизведения можно поместить в любой другой кадр диапазона анимации. Анимация движения начинается со значений свойства в первом кадре диапазона анимации, который всегда является ключевым кадром свойств.
Лабораторная работа №3
Работа со слоями
Цель работы: Научиться использовать слои для создания мультипликации.
Основные теоретические сведения
Слой (Layer) - это часть сцены фильма, для которой могут быть установлены
некоторые индивидуальные атрибуты. Каждый слой может содержать произвольное
число различных объектов, учитывая ограничения на создание tweened-анимации.
Применение механизма слоев позволяет автономно работать с различными объектами,
подлежащими включению в фильм, и за счет этого создавать сложные многоплановые
сцены. Например, один из слоев может использоваться в качестве фона, на котором
разворачиваются события фильма, другой - анимированные объекты, а третий - элементы
звукового сопровождения фильма. Кроме того, с помощью слоев могут быть получены
специальные эффекты, такие как перемещение объекта по произвольной траектории,
маскирование объектов и некоторые другие.
Свойства слоев
В обычном режиме все слои абсолютно прозрачны, в том смысле, что объекты,
расположенные на различных слоях, визуально воспринимаются как элементы единой
сцены. Вместе с тем, объект, находящийся на верхнем слое, заслоняет объекты,
находящиеся в той же позиции на нижних слоях. Всегда возможно изменить порядок
расположения слоев, а также редактировать объекты одного слоя независимо от
элементов других слоев. Однако при необходимости можно выбрать одновременно
объекты из разных слоев и работать с ними как с единым целым. Например, можно
изменить их цвет или сгруппировать. Число слоев, которые вы можете создать,
ограничено только объемом оперативной памяти компьютера, и не влияет на размер
файла публикуемого фильма. Для удобства работы со слоями во Flash реализована
возможность хранения каждого набора взаимосвязанных слоев в отдельной папке слоев
Создание и удаление слоев. Для создания нового слоя требуется выполнить одно
из следующих действий:
на том слое, над которым надо поместить новый и в контекстном меню выбрать
команду Insert Layer (Вставить слой);
В списке слоев на панели временной диаграммы выбрать слой, над которым
требуется поместить новый, щелкнув на нем левой кнопкой мыши; щелкнуть
кнопку Insert Layer, расположенную ниже списка слоев.
Когда вы создаете новый слой, он появляется на столе над выбранным слоем; в
списке слоев его имя также помещается над именем выбранного слоя. Добавленный слой
автоматически становится активным слоем. Это означает, что создаваемый на столе
объект будет принадлежать данному слою. При этом видимость нового объекта будет
зависеть от расположения ранее созданных объектов других слоев. По умолчанию
новому слою присваивается имя Layer с указанием порядкового номера внутри сцены.
Впоследствии это имя может быть заменено любым другим, поясняющим его
предназначение.
Для удаления слоя следует выполнить одно из следующих действий:
В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши
на том слое, который надо удалить и в контекстном меню выбрать команду Delete
Layer (Удалить слой);
Delete Layer, расположенную
ниже списка слоев.
После удаления слоя активным становится слой, расположенный под ним.
Операции создания и удаления слоя можно отменить (как и многие другие), щелкнув на
кнопке Undo (Отмена).
Создание и удаление папок слоев. Для создания папки слоев требуется выполнить
одно из следующих действий:
В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши
на любом слое и в контекстном меню выбрать команду Insert Folder (Вставить
В списке слоев на панели временной диаграммы выбрать любой слой, щелкнув на
нем левой кнопкой мыши и щелкнуть кнопку Insert Layer Folder, расположенную,
ниже списка слоев.
По умолчанию новой папке присваивается имя Folder с указанием порядкового
номера внутри сцены. Впоследствии это имя может быть заменено любым другим,
поясняющим ее предназначение.
В отличие от слоев, для папки на временной диаграмме не отображается
последовательность кадров. Новая папка не содержит ни одного слоя. Чтобы поместить в
папку какой-либо из существующих слоев, достаточно перетащить с помощью мыши
строку с именем слоя на строку с именем папки. Все слои, включенные в папку,
расположены в списке ниже ее. Кроме того, имена слоев папки смещаются вправо
относительно имени папки. Чтобы «вынуть» слой из папки, достаточно перетащить его в
списке слоев выше строки с именем папки. При работе с папками следует учитывать, что
они имеют чисто организаторские функции и непосредственно не влияют на другие
свойства слоев, в частности, на видимость объектов в разных слоях. Тем не менее,
закрывая и открывая папку можно управлять отображением входящих в нее слоев в
списке временной диаграммы. При этом на столе объекты слоев остаются видимыми.
Еще одно достоинство в применении папок слоев состоит в том, что они позволяют
быстро установить одни и те же значения атрибутов для всех включенных в папку слоев.
Разрешается создавать вложенные папки с неограниченным числом уровней
вложенности.
Чтобы создать вложенную папку, необходимо в списке слоев на панели временной
диаграммы щелкнуть правой кнопкой мыши на любом слое, входящем в папку более
высокого уровня и контекстном меню выбрать команду Insert Folder.
При удалении папки удаляются также и входящие в нее слои, поэтому при попытке
удаления папки Flash выводит на экран предупреждающее сообщение.
Для удаления папки следует выполнить одно из следующих действий:
В списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши
на имени папки, которую вы хотите удалить и в контекстном меню выбрать
команду Delete Folder (Удалить папку);
В списке слоев на панели временной диаграммы выбрать удаляемый слой, щелкнув
на нем левой кнопкой мыши и щелкнуть кнопку Delete Layer, расположенную
ниже списка слоев.
Установка атрибутов слоя. Каждому слою может быть назначена некоторая
совокупность атрибутов. Значения этих атрибутов отображаются в списке слоев в виде
специальных значков.
Атрибутами слоя являются:
Уровень слоя - объекты самого верхнего слоя при воспроизведении фильма
находятся как бы на переднем плане сцены и не заслоняются объектами
нижележащих слоев. Имя верхнего слоя является верхним и в списке;
Активность - на активном слое можно редактировать или создавать объекты, если
для него не установлены атрибуты «скрыт» или «заблокирован». Активный слой
отображается в списке инверсным цветом и помечается значком карандаша;
Видимость (Show/Hide - Показать/Скрыть) - объекты скрытого слоя (Hide) не
видны на столе и слой помечается в списке красным крестом. На скрытом слое
нельзя редактировать или создавать объекты, даже если он активен;
Блокировка (Locked/Unlocked - Заблокирован/Открыт) - на заблокированном слое
нельзя редактировать или создавать объекты, даже если он активен, такой слой
помечается в списке значком замка;
Контурность (Outlines) - объекты на контурном слое заменяются их контурами.
Включение такого режима позволяет видеть объекты, заслоненные объектами
данного слоя. Для контурного слоя можно дополнительно выбирать цвет контура
его объектов, поскольку данный атрибут может быть установлен для нескольких
Ведущий/ведомый (Guide/Guided) - ведущий слой может использоваться в качестве
шаблона при создании других слоев, а также для описания траектории движения,
он виден при воспроизведении фильма;
Маска/маскированный (Mask/masked) - использование слоя-маски позволяет
динамически изменять видимость маскированных слоев, что обеспечивает
интересные визуальные эффекты.
Назначение слою требуемых атрибутов может быть выполнено одним из
следующих способов:
− с помощью команд контекстного меню, вызываемого щелчком правой кнопки
мыши на имени слоя;
− с помощью трех кнопок установки атрибутов, расположенных выше списка
слоев. Щелчок на любой из них приводит к установке соответствующего
атрибута для всех слоев сцены;
− с помощью панели свойств слоя, для ее открытия следует дважды щелкнуть
мышью на значке, расположенном левее имени слоя, либо выбрать в
контекстном меню слоя пункт Properties.
Для последнего варианта следует отметить, что слой - это один из немногих
объектов, для которого в Flash отсутствует собственный инспектор свойств. Поэтому
установка атрибутов слоя выполняется с помощью диалогового окна Layer Properties ,
который имеет следующие элементы управления:
Текстовое поле Name (Имя), предназначенное для ввода и/или редактирования
имени слоя. По умолчанию создаваемым слоям присваиваются имена Layer I, Layer
произвольное имя. Flash не препятствует использованию кириллицы в названиях
слоев, что делает структуру фильма более понятной;
Флажок Show (Показать), состояние которого определяет видимость слоя;
Флажок Lock (Блокировать), с помощью которого устанавливается
соответствующее состояние слоя;
Группа переключателей Туре (Тип), позволяющих указать тип слоя: Normal -
обычный; Guide - ведущий; Guided - ведомый; Mask - маска; Masked -
маскированный; Folder - папка;
Кнопка Outline Color (Цвет контура), щелчок на которой открывает окно палитры
для выбора цвета контуров объектов слоя, если для него установлен вид
«контурный»;
Флажок View layer as outlines (Отображать слой как контурный), с помощью
которого можно установить/снять соответствующее свойство слоя;
Раскрывающийся список Layer Height (Высота слоя), предназначенный для
указания высоты строки слоя на панели временной диаграммы (в том числе и
высоты ячеек кадров). Такая возможность может оказаться полезной для слоев,
кадры которых содержат специальные значки (например, значок звукового
символа); список содержит всего три варианта (100%, 200% и 300%).
Использование слоев в анимации
Рассмотрим четыре варианта применения механизма слоев при создании фильма:
Использование слоев для создания фонового изображения;
Использование ведущего слоя для управления движением объекта;
Использование слоя-маски для управления видимостью маскированных слоев;
Включение в сцену нескольких анимированных объектов.
Создание фона. Под фоном во Flash понимаются статичные изображения,
«декорации», которые не изменяются в процессе фильма. Фон может быть расположен
как позади (с точки зрения наблюдателя), так и перед анимированным объектом.
Фоновый слой ничем не отличается от любого другого, и если, например, надо
сделать фон подвижным, то вполне можно анимировать тот или иной объект фонового
Управление движением объекта. Во Flash существует понятие «ведущего слоя»
- Guide Layer. При выборе этого термина разработчики Flash воспользовались
своеобразной игрой слов английского языка. Дело в том, что ведущий слой имеет два
предназначения:
Во-первых, вы можете поместить на него какие-либо комментарии (даже с
иллюстрациями), которые видны только в режиме редактирования фильма, но не
экспортируются в формат SWF. В этом смысле слово Guide можно перевести как
«руководство», «инструкция»;
Во-вторых, с помощью ведущего слоя можно управлять траекторией перемещения
объекта, анимированного с помощью tweened-анимации движения.
Чтобы создать слой-инструкцию, необходимо в списке слоев на панели временной
диаграммы щелкнуть правой кнопкой мыши на любом слое и в контекстном меню
выбрать команду Insert Layer. Щелкнуть правой кнопкой мыши на вновь созданном слое
и в контекстном меню выбрать пункт Guide. В результате в списке слоев возле имени
слоя появится значок в виде молоточка. Он говорит о том, что содержимое данного слоя
предназначено исключительно для разработчиков.
Второй тип ведущего слоя - это слой, описывающий траекторию, по которой
движется объект. Особенность такого применения ведущего слоя состоит в том, что
предварительно требуется создать tweened-анимацию прямолинейного движения
Чтобы заставить двигаться объект по произвольной траектории, необходимо
выполнить следующие действия:
1. Щелкнуть правой кнопкой на имени слоя, содержащего анимированный объект.
2. Выбрать в контекстном меню команду Add Motion Guide (Добавить слой,
управляющий движением). В результате в списке слоев появится ведущий слой,
помеченный специальным значком, а имя слоя с анимацией сдвинется вправо -
это признак того, что он является ведомым слоем.
3. Щелкните на имени ведущего слоя, чтобы сделать его активным.
4. С помощью любого инструмента рисования (Pen, Pencil, Oval, Brush, Rectangle)
изобразите траекторию движения объекта.
5. Щелкните левой кнопкой мыши в ячейке первого кадра анимации и в панели
инспектора свойств кадра установите один из двух флажков: Orient to Path
(Ориентировать по маршруту), если вы хотите, чтобы по нарисованному вами
маршруту была сориентирована ось симметрии объекта; Snap (Привязать), если
требуется привязать к траектории точку трансформации или точку регистрации
объекта. После установки любого из флажков Flash автоматически
позиционирует объект в кадре требуемым образом.
6. Щелкните левой кнопкой мыши в ячейке последнего кадра анимации и в панели
инспектора свойств кадра установите тот же флажок, что и для первого кадра.
7. Снимите выделение с анимированного объекта и воспроизведите фильм.
Если вы построите траекторию, которая содержит пересекающиеся или
соприкасающиеся участки, то объект будет двигаться по кратчайшему маршруту,
соединяющему начальную и конечную точки траектории.
После того, как траектория будет создана, вы можете сделать ее невидимой. Для
этого требуется сделать невидимым ведущий слой.
Маскирование слоев
Слой-маска позволяет создавать эффект отверстия, через которое видно
Маска может быть создана на основе следующих типов объектов слоя:
Заливки;
Текстового поля (любого типа - Static, Dynamic либо Insert);
Экземпляра графического символа;
Маску можно заставить перемещаться, используя любой тип анимации: покадровая
и tweened-анимация. С помощью tweened-анимации можно создать динамическую маску
на основе текстового поля, заливки, графического символа или клипа. Причем для клипа
можно с помощью ведущего слоя задать произвольную траекторию движения. С
помощью tweened-анимации трансформации можно «оживить» маску, созданную на
основе заливки. Кроме того, для анимирования масок можно применять сценарии на
ActionScript. Нельзя маскировать слои внутри кнопок.
Создание маски. Маска представляет собой обычный слой, за исключением того,
что любая заливка на нем интерпретируется Flash как отверстие, через которое виден
нижележащий слой. При этом цвет заливки (в том числе растровой), наличие градиента,
контур заливки и его тип полностью игнорируются Flash. Слой-маска закрывает
(маскирует) по умолчанию только тот слой, который расположен непосредственно под
Чтобы маскировать слой, необходимо выполнить следующие действия:
Щелкните правой кнопкой мыши на имени слоя, который вы хотите маскировать
(закрыть маской), и в контекстном меню выберите команду Insert Layer (этот
новый слой впоследствии будет служить маской).
Поместите на слой-маску заливку (или заливки), которые вы хотите использовать в
качестве «смотровых окон». При анимировании маски на ней должна
присутствовать только одна заливка.
Щелкните правой кнопкой мыши на имени слоя-маски и в контекстном меню
выберите пункт Mask (Маска), при этом в списке слоев произойдут следующие
изменения: слева от имени слоя-маски появится соответствующий значок; имя
маскируемого слоя сдвинется вправо, и возле него также появится новый значок;
оба слоя будут автоматически заблокированы.
Всегда можно изменить расположение, форму и количество «смотровых окон»
маски. Для этого ее надо сделать доступной для редактирования, достаточно снять с нее
блокировку, щелкнув на значке замка (маскируемый слой можно не разблокировать).
При этом автоматически снимается и режим маскирования.
Переход между режимами редактирования и просмотра маски может также
выполняться с помощью команд контекстного меню слоя.
Чтобы включить режим редактирования, необходимо щелкнуть правой кнопкой
мыши либо на имени слоя-маски, либо на имени маcкированного слоя и в контекстном
меню выбрать команду Show All (Показать все).
Чтобы включить режим просмотра маски, необходимо щелкнуть правой кнопкой
мыши либо на имени слоя-маски, либо на имени маскированного слоя и в контекстном
меню выбрать команду Show Masking (Показать маскирование).
Анимирование маски. Как уже было сказано, «смотровые окна» маски могут быть
анимированы одним из способов, рассмотренных ранее. При использовании
автоматической анимации движения или трансформации маска должна содержать только
одно «смотровое окно». При анимировании «смотрового окна» маскированный слой
играет роль фона.
Рассмотрим четыре варианта применения механизма слоев при создании фильма:
· использование слоев для создания фонового изображения;
· использование ведущего слоя для управления движением объекта;
· использование слоя-маски для управления видимостью маскированных слоев;
· включение в сцену нескольких анимированных объектов.
Создание фона. Под фоном во Flash понимаются статичные изображения,
«декорации», которые не изменяются в процессе фильма. Фон может быть расположен как позади (с точки зрения наблюдателя), так и перед анимированным объектом.
Фоновый слой ничем не отличается от любого другого, и если, например, надо сделать фон подвижным, то вполне можно анимировать тот или иной объект фонового слоя.
Управление движением объекта. Во Flash существует понятие «ведущего слоя»
- Guide Layer. При выборе этого термина разработчики Flash воспользовались своеобразной игрой слов английского языка. Дело в том, что ведущий слой имеет два предназначения:
· во-первых, вы можете поместить на него какие-либо комментарии (даже с иллюстрациями), которые видны только в режиме редактирования фильма, но не экспортируются в формат SWF. В этом смысле слово Guide можно перевести как
«руководство», «инструкция»;
· во-вторых, с помощью ведущего слоя можно управлять траекторией перемещения объекта, анимированного с помощью tweened-анимации движения.
Чтобы создать слой-инструкцию, необходимо в списке слоев на панели временной диаграммы щелкнуть правой кнопкой мыши на любом слое и в контекстном меню выбрать команду Insert Layer. Щелкнуть правой кнопкой мыши на вновь созданном слое и в контекстном меню выбрать пункт Guide. В результате в списке слоев возле имени слоя появится значок в виде молоточка. Он говорит о том, что содержимое данного слоя предназначено исключительно для разработчиков.
Второй тип ведущего слоя - это слой, описывающий траекторию, по которой движется объект. Особенность такого применения ведущего слоя состоит в том, что предварительно требуется создать tweened-анимацию прямолинейного движения объекта.
Чтобы заставить двигаться объект по произвольной траектории, необходимо выполнить следующие действия:
1. Щелкнуть правой кнопкой на имени слоя, содержащего анимированный объект.
2. Выбрать в контекстном меню команду Add Motion Guide (Добавить слой, управляющий движением). В результате в списке слоев появится ведущий слой, помеченный специальным значком, а имя слоя с анимацией сдвинется вправо - это признак того, что он является ведомым слоем.
3. Щелкните на имени ведущего слоя, чтобы сделать его активным.
4. С помощью любого инструмента рисования (Pen, Pencil, Oval, Brush, Rectangle)
изобразите траекторию движения объекта.
5. Щелкните левой кнопкой мыши в ячейке первого кадра анимации и в панели инспектора свойств кадра установите один из двух флажков: Orient to Path (Ориентировать по маршруту), если вы хотите, чтобы по нарисованному вами маршруту была сориентирована ось симметрии объекта; Snap (Привязать), если требуется привязать к траектории точку трансформации или точку регистрации объекта. После установки любого из флажков Flash автоматически позиционирует объект в кадре требуемым образом.
6. Щелкните левой кнопкой мыши в ячейке последнего кадра анимации и в панели инспектора свойств кадра установите тот же флажок, что и для первого кадра.
7. Снимите выделение с анимированного объекта и воспроизведите фильм.
Если вы построите траекторию, которая содержит пересекающиеся или соприкасающиеся участки, то объект будет двигаться по кратчайшему маршруту, соединяющему начальную и конечную точки траектории.
После того, как траектория будет создана, вы можете сделать ее невидимой. Для этого требуется сделать невидимым ведущий слой.
Маскирование слоев
Слой-маска позволяет создавать эффект отверстия, через которое видно содержание одного или большего числа нижележащих слоев.
Маска может быть создана на основе следующих типов объектов слоя:
· заливки;
· текстового поля (любого типа - Static, Dynamic либо Insert);
· экземпляра графического символа;
Маску можно заставить перемещаться, используя любой тип анимации: покадровая и tweened-анимация. С помощью tweened-анимации можно создать динамическую маску на основе текстового поля, заливки, графического символа или клипа. Причем для клипа можно с помощью ведущего слоя задать произвольную траекторию движения. С помощью tweened-анимации трансформации можно «оживить» маску, созданную на основе заливки. Кроме того, для анимирования масок можно применять сценарии на ActionScript. Нельзя маскировать слои внутри кнопок.
Создание маски. Маска представляет собой обычный слой, за исключением того, что любая заливка на нем интерпретируется Flash как отверстие, через которое виден нижележащий слой. При этом цвет заливки (в том числе растровой), наличие градиента, контур заливки и его тип полностью игнорируются Flash. Слой-маска закрывает (маскирует) по умолчанию только тот слой, который расположен непосредственно под ним.
Чтобы маскировать слой, необходимо выполнить следующие действия:
· Щелкните правой кнопкой мыши на имени слоя, который вы хотите маскировать (закрыть маской), и в контекстном меню выберите команду Insert Layer (этот новый слой впоследствии будет служить маской).
· Поместите на слой-маску заливку (или заливки), которые вы хотите использовать в качестве «смотровых окон». При анимировании маски на ней должна присутствовать только одна заливка.
· Щелкните правой кнопкой мыши на имени слоя-маски и в контекстном меню выберите пункт Mask (Маска), при этом в списке слоев произойдут следующие изменения: слева от имени слоя-маски появится соответствующий значок; имя маскируемого слоя сдвинется вправо, и возле него также появится новый значок; оба слоя будут автоматически заблокированы.
Всегда можно изменить расположение, форму и количество «смотровых окон» маски. Для этого ее надо сделать доступной для редактирования, достаточно снять с нее блокировку, щелкнув на значке замка (маскируемый слой можно не разблокировать). При этом автоматически снимается и режим маскирования.
Переход между режимами редактирования и просмотра маски может также выполняться с помощью команд контекстного меню слоя.
Чтобы включить режим редактирования, необходимо щелкнуть правой кнопкой мыши либо на имени слоя-маски, либо на имени маcкированного слоя и в контекстном меню выбрать команду Show All (Показать все).
Чтобы включить режим просмотра маски, необходимо щелкнуть правой кнопкой мыши либо на имени слоя-маски, либо на имени маскированного слоя и в контекстном меню выбрать команду Show Masking (Показать маскирование).
Анимирование маски. Как уже было сказано, «смотровые окна» маски могут быть анимированы одним из способов, рассмотренных ранее. При использовании автоматической анимации движения или трансформации маска должна содержать только одно «смотровое окно». При анимировании «смотрового окна» маскированный слой играет роль фона.