Macromedia flash 8 уроки программирование. Движение по заданной траектории. Основные элементы рабочей среды Flash

В целом организация пользовательского интерфейса редактора является достаточно стандартным для Windows-приложений. Та же полоса меню, те же кнопки основной панели инструментов, на которую вынесены наиболее часто используемые команды. Достаточно своеобразной является панель временной диаграммы, но опять-таки только для тех, кто пока не знаком с Dreamweaver.

При первом запуске редактора на экран выводится поверх основного окна дополнительное диалоговое окно - Welcome (Добро пожаловать), предлагающее настроить конфигурацию рабочей среды в соответствии с вашими интересами. Это действительно полезная функция, но вопросам настройки интерфейса посвящен отдельный раздел главы «Средства поддержки пользователя». Поэтому закройте пока окно Welcome (впоследствии оно может быть вызвано на экран с помощью одноименной команды из меню Help). Прежде поговорим о том, из чего же, собственно, предлагается выбирать.

Наиболее важные элементы основного окна Flash MX показаны на рис. 1.1.

Рис. 1.1. Структура основного окна flash MX

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

Для удобства работы панель инструментов разделена на четыре части (рис. 1.2):

Tools (Инструменты), в которой собраны кнопки выбора конкретного инструмента; эти инструменты разделяются на два вида: инструменты выбора и инструменты рисования; подробнее работа с ними будет рассмотрена в двух следующих главах книги;
View (Вид), содержащая средства управления просмотром изображения, имеющегося на столе; в этом поле расположены две кнопки:
- Hand Tool (Рука) - щелчок на кнопке включает режим, при котором рабочую область можно перемещать в любом направлении с помощью мыши, не пользуясь полосами прокрутки;
- Zoom Tool (Масштаб) - щелчок на кнопке включает режим быстрого масштабирования изображения в рабочей области; при включении этого режима в поле Options появляются две дополнительные кнопки, позволяющие выбирать направление масштабирования (увеличение или уменьшение);
Colors (Цвета), кнопки которой обеспечивают раздельный выбор цвета контура и заливки объектов; подробнее их предназначение рассмотрено в разделе «Работа с цветом»;
Options (Параметры), на которой представлены элементы установки дополнительных параметров выбранного инструмента; для инструментов, не имеющих дополнительных параметров, поле Options остается пустым.

Замечание

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

Рис. 1.2. Панель инструментов редактирования

При необходимости панель инструментов может быть «отстыкована» от границы и окна и превращена в «плавающую».

Рабочая область

Рабочая область занимает всю центральную часть окна. В рабочей области можно выполнять любые операции редактирования объектов, однако в «кадр» попадут только те объекты (или их фрагменты), которые расположены в пределах монтажного стола. В связи с этим может возникнуть вопрос: зачем же нужна остальная часть рабочей области? Ответов два:

для выполнения «черновых» работ;
для реализации эффекта постепенного входа объекта в кадр (или наоборот, выхода из него); подробнее этот аспект использования рабочей области будет рассмотрен в главе «Создание анимации».

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

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

Рис. 1.3. Панель инструментов рабочей области

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

Рис. 1.4. Панель Scene

С ее помощью вы можете:

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

Монтажный стол

В центре рабочей области находится так называемый монтажный стол (Stage), который мы в дальнейшем для краткости будем называть просто «стол». Размер стола и его цвет определяют соответственно размер и цвет «экрана» при просмотре фильма. Как было отмечено выше, при воспроизведении фильма на «экран» попадут только те объекты, которые расположены в пределах стола.

В каждый момент времени на столе может располагаться только одна сцена, относящаяся к данному фильму. В то же время сам стол принадлежит определенному фильму. Как только вы открываете для редактирования какой-либо фильм (то есть файл с расширением .fla ), или создаете новый файл, в окне Flash появляется стол и связанная с ним временная диаграмма. Если же редактируемых файлов нет, то и стол не отображается (рис. 1.5).

Рис. 1.5. Нет фильма - нет и стола

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

Объясняется это тем, что во Flash используется так называемый многодокументный интерфейс - MDI (Multi Document Interface). Такая модель работы приложения означает, что внутри одного родительского окна (именно оно показано на рис. 1.5) может быть открыто несколько редактируемых файлов - дочерних окон. Например, на рис. 1.6 показан случай, когда в родительском окне Flash открыто два файла, то есть два различных фильма. Кстати, обратите внимание, что при минимизации окон фильмов некоторые кнопки стали как бы собственностью конкретного фильма, а панель инструментов редактирования осталась общей.

Рис. 1.6. Работа с двумя фильмами одновременно

MDI обеспечивает целый ряд преимуществ, одно из которых - возможность копирования или перемещения элементов из одного фильма в другой путем перетаскивания с помощью мыши (то есть применение техники drag-and-drop - «перетащи и оставь»). При копировании или перемещении объектов в другой фильм для него сохраняется не только визуальное представление, но и остальные свойства. Например, при копировании кнопки сохраняются и связанные с ней действия.

Совет

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

Чтобы скопировать объект в другой фильм, описанные выше действия выполняются при нажатой клавише .

Временная диаграмма

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

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

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

Итак, в общем случае на панели временной диаграммы могут быть представлены следующие элементы (рис. 1.7):

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

Рис. 1.7. Панель временной диаграммы

Рассмотрим подробнее элементы временной диаграммы.

Начнем со шкалы кадров. Шкала является общей для всех слоев сцены. На ней отображена нумерация кадров в возрастающем порядке. Шаг нумерации равен 5 (он остается неизменным при любом формате кадров).

Считывающая головка (Play head) является своеобразным индикатором, указывающим текущий (активный) кадр анимации. При создании очередного кадра и при воспроизведении фильма считывающая головка перемещается вдоль временной диаграммы автоматически. Вручную (с помощью мыши) ее можно перемещать только после того, как анимированный фильм будет создан. Причем перемещать ее можно в обоих направлениях; при этом будет изменяться и состояние анимированных объектов.

Временная диаграмма отдельного слоя представляет собой графическое изображение последовательности кадров. Ниже видно, что само по себе изображение кадров на временной диаграмме весьма информативно. В частности, по изображению кадров можно определить, какой способ анимирования использован для данного слоя. Ниже приведена краткая характеристика различных форматов временной диаграммы слоя (точнее, расположенного в нем объекта).

Форматы изображения кадров на временной диаграмме . Изображение временной диаграммы. Пояснения.

Ключевые кадры для tweened-анимации перемещения обозначаются как черные точки, соединенные линией со стрелкой, на светло-синем фоне (линия со стрелкой заменяет все промежуточные кадры)

Ключевые кадры для tweened-анимации трансформации обозначаются как черные точки, соединенные линией со стрелкой, на светло-зеленом фоне (линия со стрелкой заменяет все промежуточные кадры)

Пунктирная линия указывает, что конечный (заключительный) ключевой кадр отсутствует

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

Маленькая буква а указывает, что данному кадру с помощью панели Actions (Действия) было назначено некоторое действие

Красный флажок указывает, что кадр содержит метку или комментарий

Непрерывная последовательность ключевых кадров , обозначенных черными точками, означает покадровую анимацию

Желтый якорек говорит о том, что данный кадр содержит именованную метку, используемую для навигации между кадрами фильма; если позволяет место на диаграмме, рядом с якорем выводится имя метки

Внешний вид временной диаграммы также существенно зависит от выбранного формата кадров. Выбор, как уже было сказано, выполняется с помощью выпадающего меню Frame View. Действие команд меню распространяется на все строки (слои) временной диаграммы. Пункты меню разделены на четыре подгруппы (рис. 1.8).

Рис. 1.8. Выпадающее меню формата кадров

Команды из первой позволяют установить размер ячейки кадра по горизонтали; возможны следующие варианты:

Tiny (Крошечный);
Small (Мелкий);
Normal (Обычный);
Medium (Средний);
Large (Крупный).

Формат Large целесообразно использовать для просмотра параметров звукового сопровождения.

Во вторую группу входит единственная команда - Short (Короткий), которая обеспечивает уменьшение размера ячейки кадра по вертикали. Такое изменение влияет и на формат левой части временной диаграммы (где расположено описание слоев), как показано на рис. 1.9.

В третью группу также включена только одна команда - - Tinted Frames (Окрашенные кадры). При выборе данного пункта используется цветовая индикация кадров для различных видов анимации (см. табл. 1.1). По умолчанию цветовая индикация кадров включена.

Рис. 1.9. Изменение формата временной диаграммы по команде Short (сравн. с рис. 1.7)

Последняя, четвертая, группа состоит из двух команд:

Preview (Предварительный просмотр) - команда позволяет поместить непосредственно во временную диаграмму в уменьшенном виде содержимое ключевых кадров анимации (рис. 1.10, вверху);
Preview In Context (Предварительный просмотр в контексте) -данную команду целесообразно использовать в том случае, если в каждом ключевом кадре изменяются два или более объектов, поскольку она позволяет вставить в ячейку кадра на временной диаграмме все пространство сцены; однако в этом случае изображение кадра уменьшается еще в большей степени, чем при использовании команды Preview (рис. 1.10, внизу).

Инспектор свойств

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

На рис. 1.11 показан формат инспектора свойств для документа (фильма) в целом.

В этом случае панель инспектора содержит следующие элементы:

текстовое поле Document (Документ), в котором отображается имя редактируемого файла;

Рис. 1.10. Результаты применения команд Preview (вверху) и Preview In Context (внизу)

Рис. 1.11. Формат инспектора свойства документа

кнопка Size (Размер), которая одновременно используется для отображения текущего размера стола (то есть размера «экрана» для просмотра Flash-фильма ; щелчок на кнопке открывает дополнительное диалоговое окно Document Properties (Свойства документа), которое позволяет изменить размеры стола, а также скорректировать значения других параметров документа (рис. 1.12);
кнопка Publish (Публикация), щелчок на которой позволяет выполнить публикацию фильма с установленными ранее (или используемыми по умолчанию) параметрами; публикация заключается в конвертировании исходного файла Flash-фильма (в формате FLA ) в формат SWF ; кроме того, по умолчанию создается Web-страница (HTML-файл), содержащая фильм; непосредственно на кнопке отображается один из основных параметров публикации - версия Flash-плеера , для которой выполняется конвертирование;
кнопка Background (Фон), щелчок на которой открывает окно палитры для выбора фона фильма (то есть цвета стола);
текстовое поле Frame Rate (Скорость кадров), которое позволяет задать частоту смены кадров анимации (частота измеряется числом кадров в секунду - frame per second, fps);
кнопка с изображением вопросительного знака, которая обеспечивает вызов контекстной справки в формате HTML-документа;
кнопка с изображением звездочки, щелчок на которой открывает панель Accessibility (Доступность); эта панель позволяет установить для всех элементов фильма дополнительное свойство - доступность для восприятия людьми с ограниченными физическими возможностями; в простейшем случае это свойство реализуется посредством использования альтернативных форм представления информации; например, звуковое сопровождение может заменяться соответствующим текстом, выводимым на экране.

Замечание

Следует отметить, что как инспектор свойств, так и другие панели являются контекстно-зависимыми. То есть для того, чтобы получить с их помощью данные о другом объекте, не требуется открывать их повторно - достаточно просто выбрать в окне редактора интересующий вас объект.

Рис. 1.12. Диалоговое окно Document Properties

Movie Explorer - обозреватель фильма

Movie Explorer - это специальная компонента Flash 5, которая обеспечивает возможность просмотра структуры фильма и быстрый выбор любого элемента фильма для модификации. Использование Movie Explorer позволяет существенно повысить производительность труда разработчика фильма. С помощью Movie Explorer могут быть, в частности, выполнены следующие операции:

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

Чтобы открыть Movie Explorer, требуется выбрать в меню Window команду Movie Explorer. Формат окна Movie Explorer показан на рис. 1.13.

Рис. 1.13. Формат окна Movie Explorer

Структура фильма отображается в окне обозревателя в виде дерева, уровень детализации которого можно изменять, сворачивая и разворачивая «ветви» дерева. С целью облегчения визуального восприятия структуры фильма для представления каждого типа элемента используется свой значок. Если фильм большой, и дерево структуры не умещается в окне стандартного размера, пользователь может увеличить размер окна, переместив его границы с помощью

Следует отметить, что дерево фильма состоит как бы из двух частей. Первая из них описывает структуру конкретной сцены, соответственно корневым элементом этой части является элемент с именем сцены, например, Scene1, как показано на рис. 1.13. Если в фильме несколько сцен, то описание каждой из них «растет» из своего корня. Вторая часть является общей для всего фильма (для всех сцен) и называется Symbol Definition(s). Она описывает состав и структуру всех символов, используемых в фильме (рис. 1.14).

Рис. 1.14. Раздел описания символов фильма

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

Существует и еще одна важная особенность работы с обозревателем. Если в фильме используется сценарий на языке ActionScript, то щелчок на соответствующем значке в дереве фильма позволяет «развернуть» сценарий (рис. 1.15). Двойной щелчок на корневом элементе или на любой строке сценария приводит к вызову редактора ActionScript с загруженным в него сценарием.

Наряду с областью просмотра структуры фильма, в окне Movie Explorer имеются следующие элементы интерфейса.

Рис. 1.15. Просмотр сценария в окне обозревателя

Группа топок Show (Показать), которые позволяют выбирать категории элементов фильма, подлежащие отображению в дереве структуры; кнопки используются по аналогии с флажками, то есть одновременно может быть выбрано (нажато) несколько кнопок.

Варианты отбора элементов распределены между кнопками следующим образом:

Show Text (Показать текст) - в дереве отображаются текстовые элементы фильма;
Show Buttons, Movie Clips and Graphics (Показать кнопки, клипы и графику) - в дереве отображаются символы соответствующих типов (то есть в дереве будет представлена часть Symbol Definition); если кнопка отжата, то в дереве отображается только корневой элемент;
Show Action Scripts (Показать сценарии) - в дереве отображаются тексты сценариев на языке ActionScript, описывающих поведение интерактивных элементов фильма; текст сценария отображается с подсветкой синтаксиса и с учетом форматирования (см. рис. 1.15);
Show Video, Sounds and Bitmaps (Показать видео, звуки и растровые рисунки) -- в дереве отображаются соответствующие элементы фильма;
Show Frames and Layers (Показать кадры и слои) - в дереве отображаются слои и ключевые кадры анимации; обратите внимание, что слой является элементом более высокого уровня, чем кадр;
Customize which items to show (Выбор отображаемых элементов) - щелчок на этой кнопке открывает дополнительное диалоговое окно, которое позволяет выбрать сочетание отображаемых в дереве элементов, и это сочетание будет использоваться по умолчанию для всех фильмов (рис. 1.16).

Рис. 1.16. Диалоговое окно для выбора отображаемых в дереве элементов

Поле ввода запроса Find (Найти) предназначено для ввода имени элемента фильма, который требуется найти. По мере ввода имени визуальное представление дерева изменяется таким образом, чтобы искомый элемент был виден в окне Movie Explorer.

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

В меню также содержатся команды управления форматом дерева структуры. В частности, можно запретить отображение ветви Symbol Definition. Меню является контекстно-зависимым: перечень доступных команд зависит от того, элемент какого типа выбран в данный момент.

Рис. 1.17.

С остальными элементами окна Flash MX , а также с командами, входящими в различные разделы меню, вы познакомитесь при изучении соответствующих этапов создания фильма

Все возможные поводы для гуляний позади, пятый семестр моей зачетной книжки полностью заполнен, за окном -25 градусов - у меня просто нет причин откладывать выполнение своего обещания, данного вам перед Новым годом в "КВ" № 50 . Итак, продолжим беседу о технологии Flash и популярном пакете для создания интерактивных приложений Macromedia Flash Professional 8. Сегодня заострим наше внимание на хитрых приемах рисования.

Должен сразу предупредить, что нудного перечисления инструментов Flash с описанием свойств и методов каждого вы тут не встретите. Эту информацию легко можно найти в самоучителях, электронных справочниках и help"у по Flash. Я же попытался собрать самые интересные технические приемы, которые используются продвинутыми пользователями и которые будут интересны как начинающим user"ам, так и Flash-дизайнерам со стажем. Ну-с, за дело!

Кнопки-модификаторы

Предположим, что вам необходимо создать на монтажном столе Flash 8 прямоугольник со скругленными углами. Данная геометрическая фигура рисуется при помощи инструмента Rectangle Tool (R), для которого с помощью появившейся в нижней части панели инструментов (в разделе "Options") кнопки-модификатора "Set Corner Radius" установлен радиус сопряжения. Этот метод может успешно применяться для быстрого написания несложных кнопок.

При активизации любого инструмента во Flash следует обращать внимание на его кнопки-модификаторы, которые могут в корне изменить принцип действия выбранного средства рисования. Например, карандаш (Pencil Tool) может работать в одном из трех режимов: выпрямление линий (Straighten), сглаживание острых углов (Smooth) и рисунок чернилами (Ink). Каждый из перечисленных режимов задается при помощи кнопки-модификатора и может быть полезен при излишнем дрожании мышки в руке во время рисования. У инструмента Eraser (ластик) также есть несколько режимов работы, которые позволяют настроить его на уничтожение линий (режим "Erase Lines"), областей, заполненных цветом (режим "Erase Fills"), и др. Обычно из названия кнопки-модификатора прямо следует ее назначение.

Блокировка заливки

Если использовать инструмент Paint Basket ("Заливка") для раскраски нескольких объектов с параметром, отвечающим за блокировку заливки (кнопка-модификатор "Fill Lock"), то текстура или градиент, используемый для заполнения фигуры, будет повторяться в каждом последующем объекте. Другими словами, блокировка заливки позволяет создать ощущение того, что раскрашиваемые фигуры вырезаны из одного цветного листа бумаги. Этим свойством также обладает и инструмент "кисть" - Brush Tool (B).

Блокировку заливки удобно использовать в тех случаях, когда через некоторые объекты должны быть видны другие. Этим способом легко создается вид из окна на ночное небо в полнолуние.

Грубо говоря, в каждой створке окна (и в форточке тоже) наблюдатель должен видеть части одной и той же картины - ночное небо и лунный диск, свечение которого ослабевает с расстоянием. Этот эффект и обеспечивает блокировка заливки. Начнем по порядку. Само окно я рисовал при помощи полых прямоугольников (инструмент Rectangle Tool) и карандашных линий (Pencil Tool) с переменной толщиной и градиентной заливкой (необходимые цвета были подобраны на панели Window -> Color Mixer). Все элементы окна расположены на одном слое. Затем я выделил правую часть окна и заполнил ее (инструмент Paint Basket) радиальным градиентом "черный-синий-черный", включив режим блокировки заливки (кнопка-модификатор "Fill Lock"). Воспользовавшись средством Gradient Transform Tool ("Настройка градиента"), подобрал оптимальный способ наложения градиента. Форточка и вторая половина окна были закрашены все тем же содержимым Paint Basket. И последний штрих - луна. Для этого берем Oval Tool ("Эллипс"), убираем контур, зажимаем shift и рисуем правильный круг в самой яркой точке неба. Звезды добавьте по вкусу. :)

То же самое можно было сделать и при помощи маскирующего слоя, на котором расположены прямоугольники, обеспечивающие видимость неба в створках окна. Но в этом случае, согласитесь, больше возни. А так мы обошлись только одним слоем.

Заливка растровым изображением

Вернемся к результатам предыдущего урока и нарисуем зимние узоры на стекле.

Для этого подберем текстуру, выбрав в окне "Color Mixer" в списке "Type" пункт "Bitmap". Зальем все окна и инструментом Gradient Transform Tool откорректируем положение, размер и наклон текстуры. Видно, крепчает мороз! :)

Пусть некто пытался посмотреть в окно и расчистил некоторую область от инея, как мы с вами часто поступаем зимою в транспорте. Возьмем кисть (Brush Tool), загрузим для нее растровое изображение (вид из окна) и нанесем несколько мазков, включив режим "Fill Lock". Вот так "волшебная палочка"! В тех местах, где поработала кисть, открылся зимний пейзаж. Однако увлекаться растровыми текстурами все же не стоит - размер выходного файла при этом растет как на дрожжах. :)

Тень у движущегося объекта

Рассмотренные ранее способы (фильтр и эффект временной шкалы Drop Shadow) заставляют предмет отбрасывать тень только в вертикальной плоскости. Т.е., если мы возьмем наш клип или графическое изображение и поднесем его к стене, освещаемой произвольно расположенным источником света, то тень будет располагаться на вертикальной поверхности (стене) за предметом. Однако довольно часто необходимо расположить тень в любой другой плоскости (на полу, наклонной поверхности и т.д.). И здесь стандартные средства уже бессильны.

Давайте рассуждать логически. С объектом любого типа (Graphic, Button и MovieClip) можно выполнять следующие операции: изменение размера, поворот на угол, наклон и т.д. (меню Modify -> Transform). Это же векторная графика! Допустим, имеется ролик (возьмем стандартный с обезьяной, раскачивающейся на ветке, из папки "Samples And Tutorials"). В библиотеке данного клипа находится символ клипа, а на монтажном столе - его представление (образ). Кто нам мешает перетянуть на рабочую область еще одно представление этого клипа, залить черным цветом и разместить в нужной плоскости при помощи процедуры "Rotate And Skew" меню Modify -> Transform? Никто! И при этом тень будет полностью соответствовать своему объекту - вращающимся обезьяне и ветке, в нашем случае. Так и поступим.

Чтобы весь клип залить черным цветом, можно пойти двумя путями: перекрасить каждую деталь ролика, на что, конечно же, уйдет уйма времени, или на панели свойств клипа (Window -> Properties -> Properties или "Ctrl+F3") в списке Color выбрать Tint ("Окрашивать") с 100% черным цветом. Последнее явно предпочтительнее. :) В результате весь клип окрасится в черный цвет. Однако тень не имеет четких очертаний, поэтому полученный ролик необходимо размыть. Для этого выберем фильтр Blur и выставим размытие по горизонтали BlurX=50, по вертикали BlurY=4, а качество установим низкое (Quality=Low), чтобы при проигрывании всего клипа нагрузка на аппаратную часть ПК была меньше. Теперь тень необходимо расположить в требуемой плоскости (плоскости земли). Сложная анимация, в которой движущиеся предметы отбрасывают тень по законам физики, создается описанным выше способом.

Взаимодействие объектов

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

Оформление надписей

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

Итак, будем считать, что у нас в рабочей области имеется текстовая надпись, из которой необходимо смастерить логотип или шапку для web-сайта. А Flash, как любой полноценный редактор векторной графики, легко позволит это сделать. Разобьем командой Modify -> Break Apart фразу на буквы (для этих целей также можно использовать сочетание "Ctrl+B"). В результате исходный текстовый блок раскололся на несколько частей, число которых равно количеству символов в исходном текстовом фрагменте. Чтобы преобразовать каждый символ в графику, проделаем эту процедуру еще раз. Теперь буквы представлены областями заливки, и с ними можно проделывать те же действия, что и с графическими объектами. Например, обводить по контуру. Для этого нужно активировать инструмент Ink Bottle Tool ("Чернильница"), подобрать толщину и цвет линии, а затем кликнуть им на каждой букве. Контурный текст (полые буквы) создается путем удаления областей заливки. Кроме того, каждую букву или слово целиком можно подвергнуть деформации и т.д. Все символы собираются в один графический блок при помощи команды Modify -> Convert To Symbol или клавиши "F8".

Оптимизация графики

Во Flash существует несколько способов уменьшения размера выходного файла (применительно к форматам FLA, SWF и MOV). Во-первых, при публикации ролика можно выбрать степень сжатия растровых изображений, а также включить дополнительную компрессию документа (меню File -> Publish Settings). Этот вариант, естественно, не подходит для FLA - внутреннего типа файлов Flash. Во-вторых, пользователь может удалить ненужные фигуры и лишние линии со сцены, а также свести число используемых символов к минимуму, заранее продумав структуру каждого объекта и удалив лишние символы из библиотеки. В-третьих, можно воспользоваться встроенным оптимизатором линий, который позволит обойтись минимальным числом линий, уменьшив тем самым объем необходимых для запоминания данных. Для этого выделяем весь документ ("Ctrl+A") и отправляемся в меню Modify -> Shape -> Optimize. В появившемся диалоговом окне можно установить требуемые параметры оптимизации. Я запустил мастера для картинки с видом на луну. В исходном файле содержалась информация о 91 кривой, а после оптимизации число кривых линий уменьшилось до 43. Т.е. размер выходного SWF-файла уменьшился вдвое. Эти действия, конечно же, никоим образом не повлияли на качество картинки, потому что в данном случае оптимизируется формульное описание изображения. Если в векторной графике заменить составные линии сплошной, а кривые немного выпрямить, потребуется меньше информации для описания всего рисунка.

Вместо заключения

На сегодня все. Когда я трудился над данным опусом, я исходил из того, что читатель уже знаком с предыдущими статьями о Flash, опубликованными в "КВ" №№ - /2005. Поэтому сегодня я не приводил никаких ссылок на прошлый материал. Однако если вам что-то было непонятно, то, возможно, ключик спрятан в прошлых номерах.

Aspera Symfonia

Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:

Анимационные эффекты — программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;

Покадровая анимация — пользователь создает каждый кадр будущей анимации;

Автоматическая tweened-анимация, или анимация трансформации, — пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.

Анимационные эффекты

Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:

Графические объекты, включая формы, сгруппированные объекты и графические символы;

Растровые изображения;

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

В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode .

Рис. 1. Выделенный текстовый объект

В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.

Рис. 2. Панель Explode

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

Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur ролик .

Рис. 3. Растровое изображение, импортированное на сцену

Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) — в результате появится панель Blur .

Рис. 4. Кнопка Edit находится внизу на панели Properties

В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).

Рис. 5. Панель Blur позволяет поменять настройки эффекта

Покадровая анимация

Рассмотрим простейший пример — листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.

Рис. 6. Первый ключевой кадр анимации

Нарисуем кленовый листочек, например такой, как показано на рис. 6, — соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр — это кадр, в котором происходит помещение содержимого или его изменение.

Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого

Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe . В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).

Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).

Рис. 8. Последний кадр анимации

Обратите внимание на панель Properties (рис. 8) — в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.

Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie . В результате получим следующий фильм leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie . Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.

Рис. 9. Просмотр фильма в режиме Bandwidth Profiler

Для того чтобы оценить, много это или мало, рассмотрим, как аналогичный фильм можно сделать с помощью автоматической анимации, или анимации трансформации движения.

Автоматическая анимация

Рис. 10. Объект автоматически превращается в графический символ

Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Arrow и выполним команду Insert => Timeline => Create Motion Tween , в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic (рис. 10). Это означает, что анимируемый объект автоматически преобразован в графический символ. Теперь его уже невозможно произвольно редактировать инструментом Arrow как объект типа Shape. Использование символов является важным понятием во Flash. Однажды создав символ, его можно использовать несколько раз в фильме, не увеличивая размер результирующего файла. Символы делятся на графические (graphic), символы-кнопки (button) и символы-мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа (рис. 11).

Рис. 11. Каждый новый символ становится частью библиотеки

Если выполнить команду Window => Library , то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe ). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform ), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween .

Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween

Выполнив команду Control => Test Movie , получим информацию, представленную на рис. 13.

Рис. 13. Просмотр фильма в режиме Bandwidth Profiler

Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше — всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.

Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм .

Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal ) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties . Положительные значения параметра Ease приводят к замедлению движения, а отрицательные — к ускорению. Выберем максимальное ускорение объекта.

Рис. 14. Выберем максимальное ускорение объекта Ease = -100

Для этого выставим значение параметра Ease равным -100 (рис. 14). В результате получим фильм . Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.

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

Движение по заданной траектории

Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide .

В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1 .

Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15).

Рис. 15. Пример задания траектории движения

Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) — рис. 16.

Рис. 16. Параметр Snap задает режим привязки к траектории движения

После того как вы поставите флажок Snap , центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17).

Рис. 17. Объект как бы прилипает к траектории движения своим центром

Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal , — в результате получим фильм .

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

Очевидно, что если мы хотим анимировать полет самолета или птицы, то нам нужно, чтобы они все время двигались носом вперед. Во Flash такой характер движения задать очень просто (рис. 18).

Рис. 18. Если поставить флажок Orient to Path , птица будет лететь головой вперед

Необходимо поставить флажок Orient to Path , и движение птицы изменится на вполне привычное (исходник к данному ролику — полет птицы.fla).

Рис. 19. Добавление одноцветного фона

Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.

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

Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20).

Рис. 20. На новом слое создадим неподвижный фоновый объект

Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз.

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

Рис. 21. Для анимации облака создадим отдельный слой

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

Не смотря на то, что большинство обучающих ресурсов рассчитано именно на англоязычную версию, мы будем рассматривать русскоязычную версию, так как для облегчения работы в пакете Macromedia Flash 8 существует русификатор.

Рисунок 1.3.1 - Окно редактора Macromedia Flash 8 с неоткрытым документом

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

Рисунок 1.3.2 - Окно редактора Macromedia Flash 8 с неоткрытым документом

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

Слои

Подобно другим графическим редакторам мощнее MS Paint, Macromedia Flash работает со слоями. Слои можно создавать, упорядочивать (в т.ч. сознавать папки, организуя таким образом иерархию), удалять, переключать видимость и изменять порядок наложения в левой области панели Timeline с помощью соответствующих кнопок. Верхние в списке слои перекрывают нижние и на картинке. В одном слое может создаваться только одна анимация.

Анимация

Во flash разделяют два вида анимации: движение и трансформация.

При трансформации фигуры можно управлять самой трансформацией и изменением цвета. Не работает с символами и группами

При движении можно менять оттенок, прозрачность и размер. Требуется, чтобы в ключевых кадрах был символ или группа.

Специальные слои

В Flash 8 выделяют слои-направляющие, слои-маски и слои-траектории.

Самая простая разновидность специальных слоев в программе Flash - это так называемые направляющие слои (guide layers). Единственное их предназначение - помочь при рисовании разных объектов и размещении флэш-символов.

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

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

Символы

Во Flash различают три типа символов: Movie Clip, Button, Graphic. Это не совсем символы в привычном понимании. Первый и самый распространенный из них - это ролик (Movie clip). Обратите внимание, что в основном ролике может содержаться сколько угодно других роликов! Этот тип флэш-символа в среде разработчиков обычно называют "клип". Это слово стало довольно часто употребляемым. Настолько, что многие считают его перешедшим из жаргонных слов в число устоявшихся терминов. Клип может содержать любые элементы, которые может содержать основной ролик. В общем, он представляет собой отдельный фильм, живущий своей жизнью. Например, остановка проигрывания основного ролика никак не влияет на воспроизведение клипов. Второй тип флэш-символа, также широко применяемый, - это кнопка (Button). Кнопка представляет собой специальный объект, ориентированный на интерактивность: обычно предполагается, что пользователь эту кнопку "нажимает" щелчком мыши и при этом что-нибудь происходит. При наведении пользователем указателя мыши на кнопку он изменяет свою форму на "лапку", так же, как это традиционно происходит при наведении мыши на гиперссылку в браузере. Правда, из этого еще не следует, что при нажатии на кнопку в ролике что-нибудь произойдет. Чтобы кнопка стала "живой", необходимо запрограммировать те действия, которые совершаются при ее нажатии (а также отпускании и пр.). И, наконец, третий тип флэш-символа называется графическим объектом, или просто графикой (Graphic). Не следует думать, что такие объекты содержат только статическую графику. Они тоже могут содержать анимацию, но в отличие от мувиков они всегда синхронизированы с основным роликом (или "родительским" клипом, если графика расположена внутри него). Если, к примеру, проигрывание основного ролика останавливается; останавливается и анимация во всех графических объектах, расположенных в нем.

Кнопки отличаются ранее рассмотренных символов своей временной шкалой. В ней 4 кадра - up, over, down, hit. Содержимому каждого из этих кадров соответствует состояние кнопки при событиях соответственно: 1 - курсор мыши находится вне кнопки, 2 - курсор мыши находится над кнопкой и кнопки мышки не нажимаются, 3 - курсов мышки наведен на кнопку, левая кнопка нажата, 4 - выбор фигуры, при присутствии курсора над которой будет работать кнопка (может не совпадать с изображением кнопки ни по форме, ни по положению). macromedia flash action script

Все имеющиеся в ролике символы помещаются в библиотеку символов ролика. Символ, содержащийся в библиотеке, называют образцом. Помещенный в рабочую область документа образец называется экземпляром. Применение экземпляров выгодно, в случае если необходимо много копий символа. Правда, при изменении образца автоматически сменятся на обновленный и все экземпляры. Экземпляры настраиваются очень ограниченно. У них можно менять яркость, оттенок, прозрачность. Можно так же назначить поведение экземпляру как клип, кнопке или графике независимо от того к какому типу он фактически относится. Библиотека позволяет каталогизировать образцы (допускаются папки), создавать, импортировать, удалять и даже подменять один образец другим. Перейдем теперь к Action Script.

Назначение и структура программы Flash

В последнее время программа Flash стала модной. Многие полагают, что Flash - это новый продукт, однако это не так. Еще в 1995 году появилась небольшая программа Future Splash Animator для векторной анимации Web-графики, а два года спустя, в 1997 году, компания Macromedia приобрела ее и начала развивать продукт под новым названием Flash.

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

Основные элементы рабочей среды Flash

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

При первом запуске программы вы увидите примерно такую картинку, как показано на рис. 1.

Рис. 1. Основные элементы интерфейса программы Flash 5.0

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

Для рисования на рабочем столе предназначены инструменты рисования (см. панель инструментов на рис. 1). Именно о них мы и поговорим прежде всего.

Создание любой анимации начинается с отрисовки статических изображений. Быстрая смена одного изображения другим, в результате которой создается впечатление движения изображения, и есть анимация. Для контроля длительности показа изображений (управления анимацией) служит временная шкала, или монтажная линейка (Timeline).

На рис. 1 представлены также плавающие панели (floating, dockable panels) панели, предназначенные для настройки рабочей среды Flash. Итак, рассмотрим основные инструменты рисования во Flash.

Рисование

Контур, обводка, заливка

Прежде чем вы начнете работать с инструментами рисования, следует ввести понятия контура, обводки и заливки. Рассмотрим их на простом примере.

Выберите инструмент редактирования Oval (Овал) на панели инструментов (рис. 2) и нарисуйте овал. Фигура автоматически будет залита цветом. (Если при рисовании овала удерживать клавишу Shift, то рисуемая фигура будет иметь форму окружности.)

Рис. 2. Рисунок состоит из контура, обводки контура и заливки

Рисунок состоит из контура, обводки контура и заливки (рис. 2). Для того чтобы выделить контур фигуры, щелкните мышью по кнопке, показанной на рис. 3 красной стрелкой. В результате линия обводки и заливка пропадут, останется только контур - (рис. 4).

Рис. 3. Кнопка удаления заливки и обводки

Рис. 4. Удалив заливку и обводку, получаем контурную линию

служебная линия (не отображающаяся при печати). Повторное нажатие кнопки, показанной на рис. 3, возвращает удаленные элементы. Цвет обводки контура и заливки легко поменять. Цвет заливки меняется с помощью кнопки выбора цвета заливки Fill color (рис. 5). После того как вы выберете в палитре (рис. 5) новый цвет, нарисованная фигура не изменится, но при рисовании нового эллипса, контур будет заливаться только что выбранным цветом.

Рис. 5. Инструменты выбора цвета для заливки и линии обводки

Для того чтобы изменить цвет заливки в текущей фигуре, необходимо выбрать новый цвет и воспользоваться инструментом Paint Bucket (Ковш заливки) - он выделен на рис. 6.

Рис. 6. Цвет заливки в нарисованной фигуре можно изменить с помощью инструмента Paint Bucket

Цвет обводки тоже можно поменять. Для этого необходимо выбрать инструмент Stroke color (Изменение цвета обводки) - на рис. 7 на него указывает красная стрелка. После этого откроется палитра, в которой можно выбрать необходимый цвет, затем нужно выбрать инструмент Ink Bottle Tool (он выделен на рис. 7) и щелкнуть им по линии обводки. В результате она зальется выбранным цветом.

Рис. 7. Изменение цвета линии обводки

На рис. 6 нарисованный нами овал показан в большем масштабе. Изменение масштаба, кстати, задается так же, как и в Photoshop, путем использования комбинации клавиш Ctrl и «+» или Ctrl и «-».

Толщину и стиль линий обводки также можно менять. Для этого необходимо по команде Window > Panels > Stroke вызвать панель Stroke. В ней можно настроить стиль линии обводки, ее толщину и цвет (рис. 8).

Рис. 8. Из меню панели Stroke можно изменить параметры линии обводки

Если выбрать стиль линии Hardline (рис. 8) и применить инструмент Ink Bottle Tool, то получим линию в один пиксел. Линия Hardline не имеет толщины, поэтому в окошке толщины линий значение не появляется. Толщину других линий, например пунктирной линии, можно изменять (рис. 9).

Рис. 9. Пример изменения типа и толщины линии обводки

Более тонкая настройка параметров линии производится на панели Line Style (Стиль линии). Вызвать ее можно нажав на кнопку, указанную красной стрелкой на рис. 10. В панели Line Style можно, например, изменить длину штриха и расстояние между штрихами пунктирной линии. Если на рис. 8 были приняты значения по умолчанию - 6 пунктов для штриха и расстояния между штрихами, то, выбрав соответственно значения 10 и 12 пунктов и вновь применив инструмент Ink Bottle Tool, можно получить обводку, как на рис. 10.

Рис. 10. Тонкая настройка параметров линии

Итак, мы рассмотрели основные понятия - контур, заливка и линия обводки - на примере рисования овала. Теперь поговорим непосредственно об инструментах рисования.

Инструмент Rectangle

Инструмент Rectangle (Прямоугольник) расположен рядом с инструментом Oval (рис. 11).

Помимо традиционного прямоугольника можно рисовать прямоугольники со скругленными краями. Для того чтобы задать такой режим, выберите иконку, на которую на рис. 11 указывает красная стрелка. В результате появится панель Rectangle Settings, где вы определяете радиус скругления, после чего при рисовании прямоугольника углы будут скругляться. Редактирование заливки и обводки контура прямоугольника производится так же, как и в случае с овалом.

Рис. 11. Работа с инструментом Rectangle

Инструмент Line

Инструмент Line (Линия) позволяет проводить прямые линии (рис. 12). При удерживании клавиши Shift можно проводить вертикальные, горизонтальные линии или линии под углом 45°.

Рис. 12. Работа с инструментом Line

В ряде случаев, если вам, например, необходимо нарисовать равнобедренный треугольник, полезно воспользоваться сеткой. Сделать видимыми линии сетки можно по команде View > Grid > Show Grid (рис. 13).

Рис. 13. При рисовании правильных геометрических фигур можно воспользоваться сеткой

Инструмент Pencil

Рис. 14. Результат работы с инструментом Pencil при различных настройках (верхний ряд треугольников - режим Straighten, нижний - Ink)

Инструмент Pencil (Карандаш) расположен под инструментом Oval. На рис. 14 показан результат работы с карандашом при разных вариантах его настройки, которых всего предлагается три. При варианте настройки Straighten инструмент превращает дрожащие линии контура, проведенного от руки, в прямые, при варианте настройки Smooth - сглаживает линии, а в режиме Ink - практически не меняет исходный контур.

Редактирование линий, инструменты Arrow и Subselect

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

Проведем линию с помощью инструмента Pencil, как показано на рис. 15. Она состоит из контура и обводки линии.

Рис. 15. С помощью инструмента Subselect можно выделить опорные точки и сегменты контурной линии

Рис. 16. Пример перемещения угловой точки

Рис. 17. Пример изменения кривизны контура

Рис. 18. Линия обводки следует за линией контура

До сих пор, говоря о контуре, мы не упоминали о его структуре. Для того чтобы пояснить структуру контурной линии, воспользуемся инструментом Subselect (Частичное выделение), активизированном на рис. 15, и щелкнем им по контуру линии. В результате мы увидим, что контурная линия состоит из сегментов и опорных точек (рис. 15). При использовании инструмента Pencil сегменты и опорные точки создаются автоматически. Когда мы редактируем линию контура, автоматически меняется линия обводки. Покажем, как можно редактировать линию контура с помощью инструмента Arrow (Стрелка) - он выделен на рис. 16.

Опорные точки бывают угловые и гладкие. Когда мы подводим инструмент Arrow к линии, его вид меняется. При приближении его к угловой точке рядом с изображением стрелочки появится угол - в этом режиме можно перемещать угловые точки (рис. 16), а при приближении к сегменту или к гладкой точке - изображение дуги - в этом режиме можно менять кривизну контура (рис. 17). При изменении контурной линии линия обводки следует за линией контура (рис. 18).

Нарисуйте эллипс и с помощью инструмента Arrow выделите его заливку одним щелчком мыши (цвет выделенной заливки будет осветлен белыми точками) и переместите ее в режиме drag-and-drop, как показано на рис. 19. Если вы используете двойной щелчок, то будет выделяться также прилегающая к заливке линия обводки. Двойной щелчок позволяет также выделять пересекающиеся линии.

Рис. 19. Пример перемещения выделенного объекта инструментом Arrow

Рис. 20. Исходное изображение

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

На панели Options выберите кнопку Smooth и щелкните на ней несколько раз - контур листка приобретет более плавные очертания (рис. 21а).

Рис. 21. Использование модификаторов с панели Options: а) Smooth позволяет сгладить контуры изображения; б) Strighten дает возможность спрямить контуры изображения

Изменения контура после нескольких щелчков по кнопке Strighten показаны на рис. 21б.

Используя инструмент Lasso, можно выделить область произвольной формы (рис. 22).

Рис. 22. Пример выделения с помощью инструмента Lasso

Инструмент Brush

Рис. 23. Пример работы с инструментом Brush

Инструмент Brush (Кисть) создает векторный контур и его заливку выбранным цветом, но, в отличие рассмотренных ранее инструментов, не образует линию обводки (рис. 23). Для того чтобы понять, какой контур создает инструмент Brush, посмотрите на рис. 24, где использован инструмент Subselect.

Рис. 24. Пример контурной линии, созданной инструментом Brush

Рис. 25. Варианты настройки инструмента Brush

На панели Options предусмотрены три варианта настройки инструмента Brush: режимы (верхняя кнопка), размеры кисти (средняя кнопка) и форма кисти (нижняя кнопка) (рис. 25).

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

Paint Normal закрашиваются пространство кадра линия обводки и заливка закрашиваемого объекта;

Paint Fills закрашивается пространство кадра и заливка закрашиваемого объекта. Линия обводки не закрашивается;

Paint Behind закрашивается только свободное пространство кадра;

Paint Selection закрашивается только выделенная область;

Paint Inside закрашивается только заливка, с которой было начато закрашивание.

Рис. 26. Разные режимы взаимодействия мазков кисти с нарисованным ранее объектом

Следует пояснить действие параметра Lock Fill (Блокировка заливки) - соответствующая данной команде кнопка с пиктограммой замка показана нажатой на рис. 27.

Рис. 27. Пример действия параметра Lock Fill

Когда параметр Lock Fill активизирован (кнопка нажата), градиент относится ко всему рабочему полю (рис. 27), а когда не активизирован - переход от одного цвета к другому осуществляется на базе мазка кисти (рис. 28).

Рис. 28. Параметр Lock Fill не активизирован

Ластик

Ластик позволяет стирать линии и заливку и имеет ряд различных настроек. В панели Options можно настроить размер и форму ластика, а также выбрать режим стирания (рис. 29):

Erase Normal стирается линия обводки и заливка объекта;

Erase Fills стирается заливка объекта (линия обводки не стирается);

Erase Lines стираются только линии;

Erase Selected Fills стирается только выделенная область.

Erase Inside стирается только заливка, причем при проведении ластиком линии стирание производится только внутри контура, в котором была начата линия.

Модификатор Faucet (Кран) позволяет удалять полностью заливку или линию.

Рис. 29. Разные режимы действия ластика

Инструмент Pen

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

Линейная опорная точка

Выберите инструмент Pen, щелкните мышью (вы поставили первую опорную точку), переместите курсор, щелкните мышью (это вторая опорная точка). В результате получится ломаная, как на рис. 30. Опорные точки, показанные на рис. 30, называются линейными, так как сходящиеся в них сегменты - линейные. Линейная точка не имеет направляющих.

Рис. 30. Пример построения ломаной линии с помощью инструмента Pen

Гладкая опорная точка

Рис. 31. Пример построения гладкой кривой с помощью инструмента Pen

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

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

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

Если в точке соединяются два независимых сегмента, то она является угловой. Например, если соединить прямолинейный и криволинейный сегменты, то на их пересечении появится угловая точка (рис. 32).

Рис. 32. На пересечении прямолинейного и криволинейного сегментов образуется угловая точка

Узловые точки можно преобразовывать, перемещать и удалять.

Для преобразования угловой точки в гладкую выберите инструмент Subselection. Щелкните мышью по угловой точке и, удерживая клавишу Alt, перетащите точку - она станет гладкой, и появится направляющая линия, позволяющая менять кривизну сегментов, соединяющихся в данной гладкой точке (рис. 33).

Рис. 33. Пример преобразования угловой точки в гладкую

По умолчанию выделенные гладкие точки кривой отображаются как полые точки, а выделенные угловые точки - как полые квадраты.

Использование инструментов Pen и Subselection для работы с опорными точками

Аналогично можно создавать точки на линиях, проведенных другими инструментами рисования Flash: Pencil, Brush, Line, Oval, Rectangle, и регулировать эти линии.

В частности, на рис. 34 показан контур, полученный с помощью инструмента Oval путем превращения одной гладкой точки в угловую (с помощью инструмента Pen) и перетаскивания угловой точки посредством инструмента Subselection.

Рис. 34. Контур, полученный с помощью инструмента Oval путем превращения одной гладких точек в угловую и перетаскивания ее

Инструмент Dropper

Инструмент Dropper (Пипетка) служит для копирования цвета и стиля карандашных линий, режима кисти и заливок. Когда вы подводите пипетку к линии, вид курсора меняется - под пипеткой появляется мини-пиктограмма карандаша. При щелчке пипеткой по линии копируются все параметры линии (цвет, толщина, стиль) и пипетка заменяется на инструмент Ink Bottle, который позволяет применить все эти настройки для другой линии.

Аналогично, когда курсор находится над заливкой, под пипеткой появляется изображение ковша, а когда курсор находится над мазком кисти - под пипеткой появляется изображение кисти. Данные пиктограммы показывают, какие атрибуты вы копируете инструментом Dropper.

Инструмент Paint Bucket

Мы уже упоминали инструмент Paint Bucket (Ковш заливки) - он выделен на рис. 35, теперь рассмотрим его возможности подробнее. Этот инструмент применяется для заливки замкнутых (и не полностью замкнутых) областей цветом, градиентной и растровой заливкой.

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

Возможны четыре варианта настройки этого инструмента:

Don’t Close Gaps не закрывать промежутки;

Close Small Gaps закрывать маленькие промежутки;

Close Medium Gaps закрывать средние промежутки;

Close Large Gaps закрывать большие промежутки.

Выберите инструмент Pencil и нарисуйте незамкнутый контур (рис. 35). Выберите режим Close Large Gaps и залейте контур. Как видно из рис. 35, заливка остается внутри контура, даже несмотря на то, что изначальный контур был незамкнутым.

Рис. 35. Пример замыкания контура в режиме Close Large Gaps

А теперь рассмотрим градиентную заливку и операции с ней. В панели Fill выберите во вкладке Fill вариант заполнения - Linear Gradient (Линейный градиент). Затем нарисуйте прямоугольник, заполните его линейной заливкой с линейным градиентом, а внутри большого прямоугольника нарисуйте прямоугольник поменьше (рис. 36). Как видно на этом рисунке, в малом прямоугольнике переход от белого к синему реализуется на меньшем градиенте. Если же применить функцию Lock Fill и выполнить заливку обоих прямоугольников, то получится картинка, как на рис. 37. То есть градиент во внутреннем и внешнем прямоугольнике будет одинаковым.

Рис. 36. Градиентная заливка в режиме, когда параметр Lock Fill не активизирован

Рис. 37. Градиентная заливка в режиме, когда параметр Lock Fill активизирован

Для того чтобы поменять направление градиента заливки, необходимо в панели Options щелкнуть на кнопке Transform Fill (она нажата на рис. 38), а после этого - на заливке, в результате появятся маркеры (рис. 38).

Рис. 38. Пример модификации градиентной заливки

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

Инструмент Paint Bucket позволяет также заливать замкнутый контур и растровым изображением. Продемонстрируем, как выполняется данная процедура на простом примере. Нарисуйте при помощи инструмента Rectangle изображение монитора, в экран которого будет вставляться растровое изображение (рис. 39).

Рис. 39. Векторное изображение монитора, в которое будет помещаться растровое изображение фотографии

Затем импортируйте растровое изображение, которым и будет заливаться экран. Можно импортировать растровое изображение, выполнив команду File > Import и выбрав необходимый файл. Далее перейдите в панель Fill (Заливка) и поменяйте способ заливки на растровый - Bitmap (рис. 40).

Рис. 40. Панель Fill, вкладка Fill

Таким образом, если заливать замкнутый контур внутри нарисованного экрана монитора, то будет выполнена заливка растром, как показано на рис. 41.

Рис. 41. Пример заливки растром

Для того чтобы редактировать растровую заливку, необходимо в панели Options щелкнуть на кнопке Transform Fill (она нажата на рис. 42), а после этого - на растровой заливке, в результате появится рамка с маркерами (рис. 42).

Пользуясь центральным маркером, растровое изображение можно перетащить так, чтобы на нарисованном мониторе отображалась нужная часть фотографии (рис. 43).

Рис. 42. Рамка модификации растровой заливки

Рис. 43. Перемещая центральный маркер, можно кадрировать растровое изображение

Другие маркеры позволяют масштабировать растровое изображение, поворачивать его и деформировать (рис. 44).

Рис. 44. Пример деформации растровой заливки

Импортировав несколько фотографий, вы можете настроить палитру, из которой можно выбирать растр для заливки (рис. 45), так же, как и цветовую палитру.

Рис. 45. Пример палитры с несколькими растровыми изображениями

Сложение и вычитание фигур

Когда две фигуры накладываются одна на другую, Flash либо объединяет, либо сегментирует их. Нарисуйте две одноцветные фигуры - круг и прямоугольник (рис. 46), выделите прямоугольник (щелкнув по нему инструментом Arrow), а затем наложите прямоугольник на круг и уберите с него выделение (щелкнув повторно по нему инструментом Arrow).

Рис. 46. Исходные фигуры

В результате произойдет объединение двух фигур в одну. Щелкнув по контуру полученной фигуры инструментом Subselect, можно убедиться, что внутренний контур исчез (рис. 47).

Рис. 47. Пример объединения двух одноцветных фигур

Теперь проделайте ту же процедуру с фигурами разного цвета. В этом случае внутренняя граница не исчезнет (рис. 48).

Рис. 48. При наложении фигур разного цвета внутренний контур не исчезает

Теперь если выделить прямоугольник и переместить его с помощью инструмента Arrow, то из круга будет вырезана часть, как показано на рис. 49.

Рис. 49. Часть круга вырезана прямоугольником

Иногда для получения сложного контура полезно использовать объединение и вычитание контуров фигур.