Рисование в FLASH

Блокировка заливки (Lock Fill)

Блокировка заливки (Lock Fill)

Вместе с инструментом заливки можно использовать режим

CheckBox (Флажок)

CheckBox (Флажок)

Параметры флажка:

Label — текстовая метка, надпись рядом с флажком. По умолчанию ее значение — CheckBox;

Initial Value — начальное состояние флажка. Значение true означает, что флажок установлен, false — флажок снят (сброшен);

Label Placement — определяет расположение текстовой метки относительно квадратика флажка (right — справа, left — слева);

Change Handler (Изменить обработчик) — задает имя функции (например, onClick), которая вызывается при изменении состояния флажка. Функция должна быть определена в сценарии, связанном с той же временной шкалой, к которой относится флажок.

Черный объект нарисованный на

Рисунок 479. Черный объект, нарисованный на сером круге, после перемещения оставляет на своем месте «отверстие». Находясь на круге, он вытеснил покрываемую собой область круга

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

Четырехугольная стрелка Перемещая маркеры в углах стрелки можно придать ей требуемую форму

Рисунок 519. Четырехугольная стрелка. Перемещая маркеры в углах стрелки, можно придать ей требуемую форму

Чтобы нарисовать следующий сегмент

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

Чтобы отредактировать сегмент кривой (изменить его форму), выберите инструмент «Субвыделение» (белая стрелка) и выделите сегмент. Появится касательная. Далее вы можете выполнить одно из двух действий:

скорректировать положение маркеров на кривой;

скорректировать положение маркеров касательной, изменяя тем самым ее длину и наклон, от которых зависит форма кривой.

После того как вы нарисовали ломаную прямую или кривую линию, замкнутую или нет, можно воспользоваться палитрами Stroke (Штрих) и Fill (Заливка), чтобы изменить параметры линии и внутреннего заполнения (в случае замкнутого контура). Об этих палитрах мы уже говорили, когда рассматривали другие инструменты рисования.

ComboBox (Комбинированный список)

ComboBox (Комбинированный список)

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

Editable — редактируемый. Если значение этого параметра true, то элементы списка можно редактировать;

Labels — метки, перечень наименований элементов списка;

Data — перечень значений, соответствующих элементам списка;

Row Count — количество элементов списка, показываемых при его раскрытии. Если оно меньше общего количества элементов в списке, то список снабжается полосой прокрутки.

Деформации прямоугольника с помощью инструмента выделения (черной стрелки)

Рисунок 445. Деформации прямоугольника с помощью инструмента выделения (черной стрелки)

Делаем кирпичную стену

Делаем кирпичную стену

Нередко возникает задача заполнения некоторой области каким-нибудь регулярным узором. Допустим, надо нарисовать кирпичную стену. В этом случае, аналогично предыдущему, все начинается с создания элементарного рисунка — кирпича.
Нарисуем кирпич. Очевидно, что это делается с помощью инструмента «Прямоугольник» (Rectangle). Если сам кирпич темный, то его контур следует сделать более светлым, чтобы в общей кладке кирпичи не сливались друге другом (и чтобы имитировался слой цемента между ними). Далее возможны несколько способов создания кирпичной кладки.

Диск для колеса

Рисунок 529. Диск для колеса

Теперь осталось наложить диск на шину. Убедитесь, что оба слоя видимы. Выберите инструмент «Выделение» (черная стрелка) и дважды щелкните на диске. Убедитесь, что и контур, и внутренняя область диска выделены. Перетащите изображение диска на изображение шины. Если окажется, что диск слишком велик, то либо уменьшите его, либо увеличьте шину. Для изменения масштаба фигуры следует выделить ее, а затем щелкнуть правой кнопкой мыши, чтобы в раскрывшемся контекстном меню выбрать команду Scale (Масштабировать). Остается перетащить какой-нибудь из угловых маркеров.

Домик в деревне

Домик в деревне

Теперь мы готовы к тому, чтобы построить дом. Наш проект более чем скромен: кирпичные стены с обветшалой штукатуркой, деревянные оконные рамы, черепичная крыша и пара колонн для солидности. Внутри дома у окна мы посадим его обитателей. Все это мы нарисуем на отдельных слоях. Как нарисовать кирпичи, вы уже знаете из предыдущего урока. Черепица делается совершенно аналогичным способом. Колонны изготавливаются из прямоугольников, залитых градиентом. Чтобы сколотить оконную раму, мы сначала сделали маленькую дощечку. Затем ее копии соединили друг с другом так, чтобы получилась рама. Стекла в раму были вставлены с помощью полупрозрачной заливки. Для удобства перемещения и установки рамы вместе со стеклами мы сгруппировали эти объекты. Обитатели нашего дома были импортированы из файла растрового формата. Размер этого изображения мы подогнали под габариты окна, а затем расположили под слоем окна, но над слоем стены. Пятна и царапины на стене мы нарисовали карандашом. Дальше мы не стали рисовать. Все, что у нас получилось, домом не назовешь, но зато вполне понятно, как его сделать.

Две грозди сирени уже образуют

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

Если конечная точка линии находится недалеко от начальной то щелчок на ней замкнет линию

Рисунок 451. Если конечная точка линии находится недалеко от начальной, то щелчок на ней замкнет линию

Чтобы отредактировать сегмент ломаной линии, выберите инструмент «Субвыделение» (белая стрелка) и выделите сегмент. Затем переместите маркер сегмента в нужное положение.
С помощью «Пера» можно рисовать не только прямые, но и кривые сегменты. Выполните следующие действия:

Убедитесь что выбран инструмент «Перо» (Реn).

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

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

Отпустите кнопку мыши. Длина и наклон касательной определяют форму сегмента кривой.

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

Формирование списка

Рисунок 510. Формирование списка

РИСОВАНИЕ В FLASH

ГЛАВА 8. РИСОВАНИЕ В FLASH

Рисование во FLASH

Овалы

Прямоугольники

Линии

Инструмент «Карандаш» (Pencil)

Инструмент «Линия» (Line)

Инструмент «Перо» (Реn)

Оптимизация формы кривых

Инструменты «Кисть» (Brush) и «Ластик» (Eraser)

Инструменты «Чернильница» (Ink Bottle) и «Ковш с краской» (Paint Bucket)

Размер зазора (Gap Size)

Преобразование заливки (Transform Fill)

Блокировка заливки (Lock Fill)

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

Преобразование линий в заливку

Пипетка

Масштабирование, вращение и искажение объектов

Пересечение фигур

Текст

Средства повышения точности рисования

Линейки

Направляющие

Сетка

Привязка к объектам

Слои

Группирование объектов

Использование библиотеки для графики

Компоненты интерфейса

CheckBox (Флажок)

RadioButton (Переключатель)

PushButton (Кнопка)

ListBox (Список)

ComboBox (Комбинированный список)

ScrollPane (Прокручиваемая область)

ScrollBar (Полоса прокрутки)

Импорт файлов

Трассировка

Экспорт изображений

Сохранение и публикация изображений

Уроки рисования

Стрелки на линиях

Кнопка

Колесо

Лошадь

Ветка сирени

Делаем кирпичную стену

Домик в деревне

Рисунок 430. Главное окно Flash

Рисунок 430. Главное окно Flash 5.0

Главное окно Flash MX несколько отличается от главного окна Flash 5.0, но построено на тех же основных принципах. Мы небудем подробно рассматривать все его особенности. Остановимся лишь на основных моментах. В Flash MX сокращено количество палитр. В меню Window (Окно) нет подменю Panels (Панели), в котором можно выбрать панель (палитру), чтобы открыть или закрыть ее. Палитры в Flash MX открываются и закрываются непосредственно с помощью меню Window. Обратим внимание, что все свойства текущего (т. е. выделенного) элемента на рабочем поле отображаются на одной палитре Properties (Свойства), которая по умолчанию расположена внизу. Ее еще называют инспектором свойств (properties inspector). Содержание этой палитры зависит от текущего объекта (т. е. выделенного в данный момент). Иначе говоря, содержание палитры свойств контекстно зависимо. Это очень удобно. А в Flash 5.0 свойства объекта рассредоточены по нескольким палитрам или по нескольким вкладкам одной палитры. По умолчанию в Flash MX открывается палитра действий (Actions), предназначенная для работы со сценариями на языке Action Script. Сценарии используются при создании анимаций (мультфильмов). Поэтому в случае работы над обычной графикой эту палитру можно закрыть, чтобы освободить место.
В левой части главного окна Flash находится панель инструментов Tools. Именно она содержит инструменты, используемые при рисовании и редактировании изображений. Упомянутые выше палитры предназначены для настройки параметров инструментов. Итак, есть инструменты и есть палитры настройки параметров. Следует также помнить, что щелчок правой кнопкой мыши на нарисованном объекте раскрывает контекстное меню, в котором можно выбрать команды (пункты, опции), относящиеся к этому объекту.

Главное окно Flash MX

Рисунок 431. Главное окно Flash MX

Границы редактирования около фигур залитых градиентом

Рисунок 463. Границы редактирования около фигур, залитых, градиентом

Группирование объектов

Группирование объектов

Графический объект может состоять из множества контуров, областей заливки, элементов растровой графики. Чтобы, например, переместить такой составной объект, его надо сначала выделить. Как это делается, неоднократно говорилось. Однако при этом существует риск упустить какой-нибудь элемент, оставить его невыделенным. Для исключения подобных ситуаций служит операция группирование объектов. Кроме того, эта операция обеспечивает сохранение целостности составляющих объектов. Если помните, наложение двух объектов может привести к их слиянию и/или замещению одним объектом перекрываемой части другого. Обычно средством против этого является размещение объектов на различных слоях. Группировка тоже может быть таким средством.
Итак, мы выделяем группу объектов и выполняем операцию группирования. После этого всю группу можно выделить одним щелчком на любом из ее элементов. Перемещение какого-нибудь одного элемента группы приводит к перемещению всей группы.
Чтобы сгруппировать объекты, выделите их, а затем выполните команду Modify>Group (Модифицировать>Группировать). Можно нажать клавиши +. Сгруппированные объекты всегда можно разгруппировать. Для этого воспользуйтесь командой Modify>Ungroup (Модифицировать>Разгруппировать) или комбинацией клавиш ++.
Редактировать элементы группы можно и без разгруппирования. Для этого выберите инструмент «Выделение» (черная стрелка) и дважды щелкните на группе элементов, либо сначала выделите группу, а затем выполните команду Edit>Edit Selected (Редактировать>Редактировать выделенное). Все невыделенные объекты будут отображены на рабочем столе тусклым цветом, а над списком слоев появится надпись Group (Группа). После этого внесите нужные изменения в любой элемент группы.
Чтобы вернуться в обычный режим редактирования, выполните команду Edit>Edit All (Редактировать>Редактировать все). Можно также выбрать черную стрелку и дважды щелкнуть где-нибудь на свободном месте рабочего поля.

Импорт файлов

Импорт файлов

Файлы других, не являющихся специфичными только для Flash, графических и мультимедийных, форматов могут быть импортированы в Flash. Так, вы можете вставить в создаваемую в Flash графическую композицию объекты из файлов, созданных другими приложениями. Например, можно импортировать файл растрового изображения, созданный в Adobe Photoshop.
Ниже перечислены типы и расширения файлов, которые можно импортировать в Flash 5.0 для Windows:

Adobe Illustrator (eps, ai)

JPEG (jpgjpeg)

AutoCAD DXF(dxf), только 2D

PNG (png)

BMP(bmp) a Shoke Wave File или Flash Player (swf)

Enhanced Metafile (emf)

Windows Metafile (wmf)

FutureSplash Player (spl)

QuickTime Movie (mov)

В Flash для Mac OS нельзя импортировать BMP (bmp). Enhanced Metafile (emf) и Windows Metafile (wmf), но зато можно импортировать файлы PICT (pet, pic).
Чтобы импортировать файл, следует выполнить команду File>Import (Файл> Импорт) и в раскрывшемся диалоговом окне выбрать нужный файл. Для открытия нужного файла выполните команду Open (Открыть).
При выборе импортируемых файлов Flash может предложить вам интеллектуальную услугу. Так, если имя выбранного файла оканчивается числом, и в этой же папке находятся файлы с похожими именами, то Flash решит, что имеется некая последовательность файлов, и предложит вам ее импортировать. Вот пример имен файлов, образующих такую последовательность: pict01, pict02, pict03 и т. д.
Кроме перечисленного выше, вы можете копировать изображения в буфер обмена, а затем вставлять из него. Чтобы вставить изображение из буфера обмена в рабочее поле Flash, выполните команду Edit>Paste (Редактировать>Вставить) или нажмите клавиши +. Чтобы скопировать изображение в буфер обмена, выполните команду Edit>Сору(РедактироватьЖопировать) или нажмите клавиши +. Так можно загружать в Flash изображения из Photoshop и других приложений.
Проще всего импортировать в Flash векторную графику, например, файлы формата WMF. В этом случае импортированное изображение представляет собой сгруппированный объект. Вы можете разобрать его по частям, кое-что изменить или заменить, добавить новые элементы.
Растровая графика, импортированная из других приложений, обычно используется в Flash просто как единый объект. Его можно установить в нужное место, масштабировать, вращать и наклонять. Однако в зависимости от характера содержимого растрового объекта, можно попробовать предпринять следующие действия:

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

Разгруппировать изображение. Разгруппируйте импортированную картинку на отдельные объекты, чтобы получить возможность работать с каждым из них. Для этого выделите нужную картинку, а затем выполните команду Modify>Ungroup (Модифицировать>Разгруппировать). Может статься, что и этот способ не сработает;

Разделить изображение. Выделите картинку и выполните команду Modify >Break Apart (Модифицировать> Разделить). При этом растровое изображение преобразуется в заливку, а текст — в контуры. Кроме того, разрываются связи между объектами OLE и приложениями, в которых они были созданы;

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

Для последующего редактирования в Flash растровых изображений во многих случаях достаточно применения операции разделения (Modify>Break Apart). Выполнив разделение, снимите выделение, щелкнув где-нибудь на свободном месте рабочего поля. Затем выберите инструмент «Лассо» (Lasso) и выделите им какую-нибудь область растрового изображения. Теперь можете переместить, деформировать или залить ее выбранным цветом.
Как только вы импортируете растровое изображение, оно сразу же появится в библиотеке текущего Flash-файла. Если вы откроете окно библиотеки командой Window>Library (Окно>Библиотека) или нажатием клавиш +, то найдете в нем соответствующий графический символ. Выделите имя растрового файла и в меню Options окна библиотеки выберите пункт Properties (Свойства). В результате откроется окно свойств данного файла.

Инструмент «Чернильница»

Инструменты «Чернильница» (Ink Bottle) и «Ковш с краской» (Paint Bucket) Инструмент «Чернильница» (Ink Bottle) служит для создания внешнего контура уже существующей фигуры, а также для изменения существующей линии (штриха). Выберите этот инструмент и задайте параметры линии в палитре Stroke (Штрих). Затем щелкните на любой части фигуры. Если фигура не имела внешнего контура, то он будет создан, а если контур уже был, то его параметры изменятся в соответствии с установками палитры Stroke.

Инструмент Free Transform u кнопки выбора его режимов в Flash MX

Рисунок 471. Инструмент Free Transform u кнопки выбора его режимов в Flash MX


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

Инструмент «Карандаш» (Pencil)

Инструмент «Карандаш» (Pencil)

Рассмотрим инструмент, с помощью которого можно рисовать произвольные линии и фигуры. Этот инструмент называется «Карандаш» (Pencil). Выберите его на панели инструментов и нарисуйте на рабочем поле произвольную линию. Чтобы нарисовать линию, нажмите левую кнопку мыши в точке начала линии и, не отпуская ее, переместите указатель. Линия на рабочем полеТговторит трассу перемещения указателя мыши. Отпустите кнопку мыши в конечной точке линии.
Чтобы изменить параметры линии, выберите сначала инструмент «Стрелка» (Arrow). Затем дважды щелкните на линии, чтобы она оказалась выделенной. Теперь можно воспользоваться палитрой Sroke (Штрих), чтобы задать параметры линии, если их текущие значения вас не устраивают: стиль, толщину и цвет.

Инструмент «Линия» (Line)

Инструмент «Линия» (Line)

Для рисования абсолютно прямых линий применяется инструмент,

Инструмент «Перо» (Реn)

Инструмент «Перо» (Реn)

Инструмент

Инструменты «Чернильница» и «Ковш с краской»

Рисунок 460. Инструменты «Чернильница» и «Ковш с краской»


Инструмент «Ковш с краской» (Paint Bucket) позволяет залить фигуру цветом. Он используется когда, например, требуется залить цветом фигуру, нарисованную с помощью инструментов «Карандаш» (Pencil) или «Линия» (Line). Также можно заполнить цветом замкнутые фигуры, созданные инструментами «Перо» (Реn) или «Кисть» (Brush).

Инструменты «Кисть» (Brush) и «Ластик» (Eraser)

Инструменты «Кисть» (Brush) и «Ластик» (Eraser)

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

Исходная фигура (левый объект)

Рисунок 459. Исходная фигура (левый объект) и результат применения «Ластика» с параметром Faucet к самой темной области заливки (правый объект)

Использование библиотеки для графики

Использование библиотеки для графики

Все, что вы создали на рабочем поле, можно сохранить в библиотеке. Объекты из библиотеки можно снова вернуть на рабочее поле в любом количестве экземпляров и внести в них нужные изменения. Однако при этом исходный библиотечный объект останется нетронутым. Можно отредактировать и библиотечный объект, что сразу же отразится на всех его экземплярах, расположенных на рабочем поле. Все это очень удобно при работе. Кроме того, применение библиотеки способствует сокращению объема файла.
Чтобы занести объект из рабочего поля в библиотеку, необходимо преобразовать его в так называемый символ (symbol). В Flash предусмотрено три типа символов: Graphic (Графика), Button (Кнопка) и Movie Clip (Мультфильм, или клип). Для рисунков без анимаиии и звука обычно используется тип Graphic. Более подробно мы рассмотрим библиотеку символов в следующей главе, а здесь остановимся лишь на основных вопросах ее применения для обычных графических объектов.

Итоговый рисунок (оба слоя видимы)

Рисунок 535. Итоговый рисунок (оба слоя видимы)

Что можно еще сделать с рисунком? Допустим, мы хотим наклонить голову лошади. Для этого выберем, например, инструмент «Лассо» (Lasso) и обведем контуром выделения голову и небольшой участок шеи лошади. Убедитесь в том, что выделено все, что нужно. В противном случае повторите операцию выделения. Теперь можно применить масштабирование. Для этого щелкаем правой кнопкой мыши на выделенном участке и в раскрывшемся контекстном меню выбираем команду Rotate (Вращать). Вокруг выделенного участка, как и следовало ожидать, возникает прямоугольник с маркерами. Повернем изображение головы на нужный угол. При этом, возможно, появятся незакрашенные области, нестыковки линий и т. п. Чтобы согласовать новое положение головы с туловищем, придется сделать дорисовки карандашом и кистью, возможно, в разных слоях рисунка. В самом деле, после пересадки частей тела не обойтись без косметических операций!

Изменение формы прямоугольника с помощью инструмента «Субвыделение»

Рисунок 444. Изменение формы прямоугольника с помощью инструмента «Субвыделение»


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

Изображение кирпича

Рисунок 540. Изображение кирпича

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

Изображение кнопки залитое линейным градиентом

Рисунок 524. Изображение кнопки, залитое линейным градиентом

Однако кнопка выглядела бы лучше, если бы светлая полоса (блик) располагалась горизонтально, а не вертикально. Для этого следует просто повернуть заливку на 90 градусов. Выберите инструмент «Ковш с краской» и в разделе Options панели инструментов щелкните на кнопке Transform Fill (Преобразовать заливку). Затем щелкните на изображении кнопки. В результате около него появятся две синие линии, на одной из которых расположены два маркера. В центре изображения будет круглый маркер. Переместите круглый маркер на синей линии. Вы увидите, что параллельные линии начнут поворачиваться по кругу относительно центрального маркера. Если отпустить кнопку мыши, то станет видно, что заливка повернулась на некоторый угол. Напомним, что нужно повернуть заливку на 90 градусов. После поворота заливки подкорректируйте параметры градиента. Это можно сделать путем перемещения квадратного маркера на синей линии, а также с помощью палитры Fill. Если щелкнуть где-нибудь вне изображения кнопки, синие линии с маркерами исчезнут.

Эффект перспективы созданный с помощью инструмента Free Transform в режиме Distort

Рисунок 473. Эффект перспективы, созданный с помощью инструмента Free Transform в режиме Distort

Экспорт изображений

Экспорт изображений

Изображения, созданные в Flash, можно экспортировать в файлы для использования в других приложениях. Заметьте, что здесь речь идет не о сохранении изображения в родном для Flash векторном формате, а о преобразовании в широко распространенные форматы, которые воспринимаются одной или несколькими графическими программами. Например, мы создали рисунок в Flash, который хотим поместить на Web-страницу как растровое изображение. Тогда необходимо экспортировать рисунок из Flash в файл формата GIF, PNG или JPEG, поскольку именно эти форматы растровой графики воспринимаются Web-браузерами. Отметим также, что для публикации в Web можно использовать и векторный формат SWF. Файлы этого формата создаются в Flash с помощью специальной операции публикации, которую мы рассмотрим в следующем разделе. SWF-файлы можно просматривать, но не редактировать в специальной программе Flash Player (проигрыватель Flash-фильмов), которая поставляется вместе с пакетом Macromedia Flash. Кроме того, Flash Player встроен в браузер Internet Explorer 6.0.
Ниже приведен список основных форматов и расширений имен файлов, в которые можно экспортировать изображения из Flash:

Adobe Illustrator (ai)

AutoCAD DXF (dxf)

BMP(bmp)

Enhanced Metafile (emf)

FutureSplash Player (spl)

GlF(gif) JPEG(jpg,Jpeg)

PNG (png)

Windows Metafile (wmf)

Чтобы экспортировать изображение, следует выполнить команду File>Export Image (Файл>Экспортировать изображение). В открывшемся диалоговом окне введите или выберите имя файла, его тип и щелкните на кнопке Save (Сохранить). Откроется диалоговое окно, в котором следует ввести параметры создаваемого экспортного файла. Более подробно эти параметры будут рассмотрены в следующей главе в разделе, посвященном публикации фильмов.

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

Рисунок 542. Элемент заливки растровым изображением

Эскиз домика в деревне Справа

Рисунок 545. Эскиз домика в деревне. Справа показаны фрагменты черепицы и кирпичной кладки, которыми закрашивались крыша и стена

Эта фигура получена из овала

Рисунок 442. Эта фигура получена из овала

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

Этот рисунок создан «Пером» с использованием градиентной заливки

Рисунок 453. Этот рисунок создан «Пером» с использованием градиентной заливки

Кнопка

Кнопка

В мультфильмах Flash кнопка является особой конструкцией, специальным символом типа Button (Кнопка). Мы рассмотрим этот символ в следующей главе, а здесь займемся просто рисованием изображения кнопки. Это изображение может понадобиться нам и при создании символа типа Button, и просто в каких-нибудь графических композициях.
Кнопки, как известно, могут иметь самые разные формы. Во встроенной в Flash общей библиотеке (Window>Common Library) можно найти несколько вариантов анимационных кнопок. Мы же рассмотрим создание довольно простой прямоугольной кнопки. В данном случае технология для нас важнее внешнего вида конечного результата.
Выберите инструмент «Прямоугольник» (Rectangle). В разделе Options в нижней части панели инструментов щелкните на кнопке Round Rectangle Radius (Радиус скругления углов). В открывшемся диалоговом окне введите значение радиуса, например, 20. Нарисуйте прямоугольник на рабочем столе. Залейте его линейным градиентом, чтобы придать изображению кнопки объемный вид. Для этого выберите инструмент «Ковш с краской» (Paint Bucket), а на палитре Fill (Заливка) задайте параметры градиента — цвет и форму. Сделайте так, чтобы градиент в центре был светлым, а по краям темным. Для этого на палитре придется создать третий ползунок. Каждому ползунку можно задать свой цвет. Настроив параметры градиента, щелкните на изображении прямоугольника.

Колесо в сборе

Рисунок 530. Колесо в сборе

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

Колесо

Колесо

Нарисуем автомобильное колесо. Без сомнения, основная фигура, которую следует использовать для этой цели, — круг. На панели инструментов имеется соответствующая кнопка. Но прежде чем наносить на рабочее поле круги, представим себе общую схему рисунка. Во-первых, колесо содержит резиновую шину. Во-вторых, в нем есть металлический диск, на который надевается шина. Таким образом, нам потребуется два круга. Шине нужно придать объемность и мягкость, а на диск поместить детали (например, отверстия) и придать ему жесткость.
Опытный художник быстро справится с этой нехитрой задачей. Однако наша цель состоит не в получении высокохудожественного конечного результата, а в рассмотрении технологии рисования. Так, мы могли бы нарисовать шину и диск колеса в одном и том же слое, но в разных местах рабочего поля, а потом совместить их. Но вдруг мы раскрасим эти две детали так, что при совмещении они намертво соединятся в одну фигуру, и мы потом не сможем без лишних хлопот скорректировать неточность совмещения? Поэтому расположим детали колеса в отдельных слоях, которые назовем Шина и Диск. Слой Диск должен находиться над слоем Шина: мы будем накладывать фигуру диска на фигуру шины. Еще одно напутствие: при рисовании не стоит мельчить, поскольку нужный размер изображения можно задать на завершающем этапе. Итак, общий план ясен, можно приступить к его реализации.
Активизируйте слой Шина. Если в списке слоев имеется единственный слой Layer 1, то переименуйте его. Выберите инструмент «Овал» (Oval). Выберите цвет контура, например, черный. Нарисуйте круге помощью инструмента «Овал». Чтобы получился идеальный круг (а не эллипс), при рисовании удерживайте нажатой клавишу .
Теперь залейте круг градиентом. Мы выбрали на палитре Fill (Заливка) радиальный градиент. При этом нам понадобились три ползунка, чтобы шина была темной в центре и на внешнем крае, а ее средняя область — более светлой. Чтобы создать ползунок на палитре Fill, щелкните на полосе цветов, а чтобы убрать — перетащите его мышью за пределы цветовой полосы. Подробно о выборе цвета (в том числе и градиентного) рассказывается в Главе 1. Обратите внимание, что результат заливки существенно зависит от точки ее применения. В данном случае нужно применить заливку точно в центре круга.

Компоненты интерфейса

Компоненты интерфейса

При создании интерактивных мультфильмов, особенно при создании Web-страниц средствами Flash, возникает задача разработки элементов пользовательского интерфейса, таких как раскрывающиеся списки, переключатели, полосы прокрутки с ползунками и т. п. Обычно они сопрягаются со сценариями на языке АctionScript, которые обрабатывают действия пользователя, например, выбор из списка, щелчок на кнопке и т. п. О сценариях речь пойдет в следующей главе.
Элементы пользовательского интерфейса можно сделать обычными средства и Flash, как говорят, вручную. Однако в пакете Flash кое-что в этом направлении ке заранее заготовлено. В Flash 5.0 некоторые элементы пользовательского интерфейса собраны в библиотеке, открываемой командой Window>Common Libraries>Smart Clips.
От жителей Тверской области мы часто слышали словцо «шукавый», то есть «ловкий, сообразительный, шустрый». На наш взгляд, «smart» лучше всего переводится как «шукавый». По существу, это специальные символы типа Movie Clip. В Flash MX эта библиотека существенно развилась и стала удобнее в использовании. Более того, компоненты пользовательского интерфейса в Flash MX сгруппированы в отдельной палитре Components (Компоненты). По умолчанию она сразу открывается при запуске Flash и расположена слева. Во всяком случае, ее можно открыть командой Window>Components (Окно Компоненты).

Компоненты пользовательского интерфейса

Рисунок 505. Компоненты пользовательского интерфейса

С точки зрения языка сценариев ActionScript, компоненты интерфейса — это подклассы объектов типа Movie Clip. Они не являются чем-то застывшим, а имеют параметры, с помошью которых можно их приспособить к своим задачам. Параметры компонентов в сценарии могут устанавливаться как на этапе разработки мультфильма, так и в процессе его воспроизведения. Методы компонентов собраны в разделе Flash UI Components (Компоненты пользовательского интерфейса Flash) палитры Actions (Действия).

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

Рисунок 536. Конечный результат изменения положения головы лошади и сопутствующих косметических операций

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

Линейки и направляющие линии

Рисунок 493. Линейки и направляющие линии

Для привязки объектов к направляющим установите флажок Snap to Guides (Привязать к Направляющим). В раскрывающемся списке Snap accuracy (Точность привязки) можно выбрать значение для более точной привязки. Чтобы направляющие не перемещались во время работы, установите флажок Lock Guides (Заблокировать направляющие).
Направляющие отображаются только на экране, при публикации изображения они не видны.

Линейки

Линейки

Чтобы показать линейки по краям рабочего поля, выполните команду View>Rulers (Вид>Линейки). По умолчанию единицей измерения являются пикселы. Это особенно удобно при создании графики для Web, поскольку браузеры Web-страниц работают именно с этими единицами измерения. Однако размер пиксела зависит от разрешающей способности монитора. Можно также установить в качестве единиц измерения сантиметры, миллиметры и дюймы. Чтобы настроить линейку, а также задать другие параметры рабочего поля, выполните в Flash 5.0 команду Modify>Movie (Модифицировать>Фильм), а в Flash MX — команду Modify>Document (Модифицировать>Документ). В результате откроется диалоговое окно, которое в Flash 5.0 имеет заголовок Movie Properties (Свойства фильма), а в Flash MX — Document Properties (Свойства документа). Содержание этих окон почти одинаково. В них можно задать единицы измерения (Ruler Units), цвет фона рабочего поля (Background Color) и некоторые другие параметры.

Линии

Линии

Линии можно рисовать с помощью нескольких инструментов: «Карандаш» (Pencil), «Линия» (Line) и «Перо» (Реn). Для каждого из них найдется ситуация, в которой он наиболее эффективен. Способность различать ситуации и выбирать наиболее подходящие для них инструменты приходит, как известно, с опытом. Рассмотрим перечисленные инструменты по порядку.

Линия до (слева) и после (справа) заливки радиальным градиентом

Рисунок 469. Линия до (слева) и после (справа) заливки радиальным градиентом

Линия нарисованная карандашом и пересекающая объект разбивает его на отдельные объекты

Рисунок 477. Линия, нарисованная карандашом и пересекающая объект, разбивает его на отдельные объекты

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

ListBox (Список)

ListBox (Список)

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

Labels — метки, перечень наименований элементов списка;

Data — перечень значений, соответствующих элементам списка;

Select Multiple — множественный выбор. Если этот параметр имеет значение true, то в списке можно выбрать несколько элементов. В случае значения false выбрать можно только какой-нибудь один элемент;

Change Handler — изменить обработчик. Назначение такое же, как и для других компонентов (см. CheckBox).

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

Лошадь

Лошадь

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

Масштабирование и поворот рисунка

Рисунок 470. Масштабирование и поворот рисунка

Указанные преобразования применимы не только к объектам, созданным с помощью инструментов рисования Flash, но и к импортированным в Flash объектам. В частности, вы можете изменять масштаб и угол наклона импортированных растровых изображений.
Например, в различного рода схемах и чертежах используются стрелки. Они могут иметь различную форму, ориентацию и размер. Вы можете создать стрелку, ориентированную, например, слева направо. Эта стрелка копируется в буфер обмена и затем из буфера вставляется в нужные места вашей схемы, а нужные ориентация и размер стрелок на схеме обеспечиваются с помощью операций преобразования Scale и Rotate. Таким образом, вам нужно нарисовать вручную только одну стрелку.
В Flash MX возможностей трансформирования объектов больше, чем в Flash 5.0.
На панели инструментов появилась кнопка

Масштабирование вращение и искажение объектов

Масштабирование, вращение и искажение объектов

Объекты можно увеличить или уменьшить, а также повернуть на некоторый угол. Для этого предназначена команда Modify>Transform (Модифицировать Преобразовать). При выполнении этой команды появляется меню, в котором можно выбрать команды Scale (Масштабировать), Rotate (Вращать) и Flip (Зеркально отразить). Можно также щелкнуть правой кнопкой мыши на объекте и выбрать в контекстном меню команду Scale или Rotate. Параметры преобразования можно задать и в палитре Transform (Преобразование).
Если применить команду преобразования к объекту, то около него появятся маркеры, которые можно перемещать мышью. При наведении указателя мыши на маркер последний изменяет свою форму.

На кнопку можно поместить текст Character

Рисунок 527. На кнопку можно поместить текст Character

Наконец, вы можете изменить размеры кнопки. Для этого сначала выделите кнопку. Если на ней находится текст, то убедитесь, что он также выделен (он должен быть охвачен синим прямоугольником). Для этого лучше воспользоваться инструментом «Выделение» (черная стрелка), обведя кнопку прямоугольной областью охвата. Затем щелкните правой кнопкой мыши и в контекстном меню выберите команду Scale (Масштабировать). Затем, как обычно, переместите квадратные маркеры.
Если вы собираетесь использовать созданное изображение кнопки в других проектах, то сохраните его в библиотеке как символ типа Graphic (Графический). Для этого сначала выделите кнопку, а затем выполните команду Inser>Convert to Symbol (Вставить>Преобразовать и символ). В открывшемся диалоговом окне введите имя кнопки, например Прямоугольная кнопка с градиентом, и выберите тип символа Graphic. Если вы откроете окно библиотеки с помошью команды Window>Library (Окно>Библиотека), то найдете в нем только что созданный графический символ.

На нижнем слое нарисован контур лошади и произведено заливка градиентом

Рисунок 533. На нижнем слое нарисован контур лошади и произведено заливка градиентом

На втором слое, который мы назвали Мазки, использовался инструмент «Кисть» (Brush). Гриву и хвост лошади, а также другие элементы раскрашивали именно кистью. Затем мы вернулись к первому слою и кое-что подредактировали: дорисовали карандашом некоторые детали и удалили некоторые фрагменты контура.
Конечно, наш рисунок далек от идеала, но лошадь в нем узнаваема. Главная наша цель состояла не в создании шедевра компьютерной живописи, а лишь в иллюстрации одного из возможных вариантов технологии.

Наложение стрелок из библиотеки на линии структурной схемы

Рисунок 523. Наложение стрелок из библиотеки на линии структурной схемы

Направляющие

Направляющие

Для более точного расположения объектов на рабочем поле служат так называемые направляющие. Эти вспомогательные линии могут быть горизонтальными и вертикальными. Чтобы отобразить направляющие, выполните команду View>Guides>Show (Вид>Направляющие>Показать). Однако направляющие сразу не появятся на экране. Чтобы они стали видны, их следует перетащить с линеек. Для этого надо нажать кнопку мыши на линейке и, удерживая ее нажатой, переместить указатель в нужное место рабочего поля.
Для настройки направляющих выполните команду View> Guides > Edit Guides (Вид>Направляющие>Редактировать направляющие). В диалоговом окне Guides (Направляющие) можно задать цвет направляющих (по умолчанию он зеленый).

Невыделенный (слева) и выделенный (справа) графические объекты

Рисунок 433. Невыделенный (слева) и выделенный (справа) графические объекты

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

Одинаково окрашенные круг и овал (без контуров) при пересечении образуют единый объект

Рисунок 478. Одинаково окрашенные круг и овал (без контуров) при пересечении образуют единый объект

Одна из простейших фигур — овал Он состоит из внешнего контура и внутренней области

Рисунок 436. Одна из простейших фигур — овал. Он состоит из внешнего контура и внутренней области

Окно библиотеки

Рисунок 502. Окно библиотеки

Элемент библиотеки можно просто перетащить на рабочее поле из ее окна. Для этого нужно захватить мышью либо название символа в списке, либо его изображение в верхней части окна библиотеки. Изображение, оказавшееся на рабочем поле, представляет собой экземпляр (instance) символа — его копию. Если вы повернете его, измените размер или переместите, то это не отразится на родительском символе. Чтобы изменить цвет и некоторые другие параметры экземпляра, откройте палитру Instance (Экземпляр) или Effect (Эффект). Обычно эти две палитры являются вкладками одной панели. Они открываются выбором команды Window>Panels (Окно>Палитры) и, далее, Instance или Effect. Можно также воспользоваться клавишами +.
Перечисленное выше относится к Flash 5.O. В Flash MX параметры экземпляра символа отображаются в палитре Properties (Свойства).

Окно для ввода параметров оптимизации формы кривых

Рисунок 454. Окно для ввода параметров оптимизации формы кривых

Внимательно отнеситесь к результатам оптимизации: не пропали ли из вашего рисунка какие-нибудь детали? Если результат вас не устраивает, выполните команду Edit>Undo (Редактировать>Отменить).

Окно Document Properties в Flash MX

Рисунок 491. Окно Document Properties в Flash MX

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

Окно Layer Properties и Flash MX

Рисунок 500. Окно Layer Properties и Flash MX

Окно Movie Proper ties в Flash

Рисунок 490. Окно Movie Proper ties в Flash 5.0, в котором можно задать единицы измерения линеек, цвет фона рабочего поля и другие параметры

Окно настройки направляющих

Рисунок 492. Окно настройки направляющих

Рисунок 447. Окно настройки параметров

Рисунок 447. Окно настройки параметров сглаживания линий и распознавания фигур в Flash 5.0

Окно настройки параметров трассировки

Рисунок 513. Окно настройки параметров трассировки

Color Threshold (Цветовой порог). Чем больше это число, тем меньше цветов окажется в результирующем векторном изображении.

Minimum Area (Минимальная область). Количество прилежащих пикселов, которые учитываются при назначении цвета данному пикселу. Если требуется большая точность, то установите значение 1.

Curve Fit (Соответствие кривой). Определяет, насколько сглаженно будет отображаться контур. Если требуется большая точность, то установите значение Pixels (Попиксельно).

Corner Threshold (Угловой порог). Определяет способ обработки углов. Для большой точности установите значение Many corners (Много углов).

Оптимальные значения параметров трассировки существенно зависят от исходного изображения и обычно подбираются экспериментальным путем. На следующем рисунке показан не оченьудачный результат трассировки растрового изображения с двумя таблицами. Это связано с неудачным выбором параметров трассировки. Однако в случае выбора значений параметров Minimum Area = 1, Curve Fit= Pixels, Corner Threshold = Normal векторное изображение внешне ничем не будет отличаться от своего растрового оригинала. Возможность удачной трассировки (при правильном выборе параметров) в значительной степени была предопределена характером растрового изображения (прямые четкие линии, отсутствие плавных переходов цветов).

Окно настройки сетки

Рисунок 495. Окно настройки сетки

Например, если вы хотите, чтобы конец нарисованной линии был привязан к линии сетки, только если он находится рядом с ней, выберите значение Must be Close (Должен быть рядом).

Окно параметров публикации изображения

Рисунок 516. Окно параметров публикации изображения

Окно проигрывателя Flash Player с загруженным файлом изображения в формате SWF

Рисунок 517. Окно проигрывателя Flash Player с загруженным файлом изображения в формате SWF

Параметры публикации можно предварительно настроить. Для этого служит команда Publish Settings (Настройки публикации). В диалоговом окне можно ввести необходимые значения параметров. В этом же окне можно выполнить и собственно публикацию. Подробности настройки этих параметров мы рассмотрим в следующей главе.

Окно свойств растрового графического изображения

Рисунок 512. Окно свойств растрового графического изображения

Окно свойств символа

Рисунок 501. Окно свойств символа

Для преобразования объекта в символ сначала выделите его, а затем выполните команду Insert>Convert to Symbol (Вставить>Преобразовать в символ). В открывшемся диалоговом окне Symbol Properties (Свойства символа) введите имя и выберите тип символа Graphic. В окне свойств символа группа переключателей для выбора типа символа называется Behavior (Поведение).
Если вы откроете окно библиотеки командой Window>Library (Окно>Библиотека) или нажав клавиши +, то найдете в нем только что созданный графический символ.
Окно библиотеки устроено следующим образом. В верхней его части расположена область просмотра символов, а в нижней — список папок и собственно символов с значками, вид которых зависит от типа символа. Все создаваемые символы вы можете разместить в папках, как вам это будет удобно. В самом низу окна библиотеки расположены кнопки для создания и удаления папок и символов. Размер окна библиотеки, атакже сортировка символов в списке регулируются кнопками на правой границе окна. В верхнем правом углу расположена кнопка меню библиотеки.

Рисунок 498. Окно свойств слоя

Рисунок 498. Окно свойств слоя в Flash 5.0

Name — имя слоя;

Show — показать (сделать видимым);

Lock — заблокировать;

Туре — тип слоя. Возможные значения: Normal (обычный), Guide (направляющий), Guided (направляемый), Mask (слой-маска), Masked (маскируемый);

Outline Color — цвет контура (используется в режиме контурного отображения фигур);

View layer as outlines — отображать объекты в режиме контуров;

Layer Height — высота представления слоя в списке (используется, например, при графическом представлении звука).

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

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

Для создания папки достаточно щелкнуть на кнопке

Оптимизация формы кривых

Оптимизация формы кривых

Оптимизация формы кривых позволяет снизить число отдельных элементов, составляющих кривую, что в конечном счете способствует сокращению объема файла. Оптимизацию можно производить неоднократно. Визуально эффект оптимизации похож на сглаживание. Для проведения оптимизации выделите объект или группу объектов и выполните команду Modify>Optimize (Модифицировать >Оптимизировать). В результате откроется диалоговое окно для ввода параметров оптимизации. Ползунок Smoothing (Сглаживание) позволяет установить степень сглаживания от None (Нет) до Maximum (Максимально). Если требуется задать режим многократной оптимизации, то установите флажок Use multiple passes (slower). Для вывода сообщения об итогах оптимизации установите флажок Show totals message.

Оснащаем шину рельефным протектором

Рисунок 531. Оснащаем шину рельефным протектором

Во-вторых, наше колесо получилось слишком симметричным. Предстаньте себе, что оно вращается (при создании анимации мы можем заставить его крутиться с помошью программы). При этом может получиться так, что вы просто не заметите эффекта вращения. Возможно также, что вращение, заданное по часовой стрелке, будет наблюдаться в противоположном направлении. Хуже того, может даже статься, что диск колеса будет вращаться по часовой стрелке, а протектор на шине — против. Все эти несуразности обусловлены так называемым строб-эффектом, возникающем при определенном соотношении частоты вращения объекта и частоты смены кадров. Подробнее об этом мы расскажем в следующей главе.
Если мы планируем в дальнейшем использовать колесо в качестве элемента мультфильма (например, в движущемся автомобиле), то желательно, чтобы эффект вращения был отчетливо выражен. Для этого нужно внести в изображение колеса элементы дисимметрии. Например, можно залить диск колеса не радиальным, а линейным градиентом. Кроме того, на шину и диск можно нанести несколько коротких штрихов или пятен.
Чтобы внести изменения в тот или иной элемент рисунка, сначала выделите его. Для этого дважды щелкните на нем. В нашем примере мы выделяем сначала диск. Будьте внимательны, не щелкните на черных пятнах, изображающих отверстия в диске. После этого обратитесь к палитре Fill, выберите линейный градиент и с помощью ползунков добейтесь нужного соотношения между светлыми и темными частями. Для усиления эффекта добавьте еще несколько коротких штрихов на шину и диск. Теперь эффект вращения колеса, если это потребуется в анимационном проекте, будет наверняка заметен.

Отдельный цветок для создания грозди сирени

Рисунок 537. Отдельный цветок для создания грозди сирени

Далее можно копировать изображение отдельного цветка в буфер обмена (Edit>Copy или +), а затем вставлять его на рабочее поле (Edit>Paste или +). Нам потребуется много таких копий, в зависимости от объема грозди сирени. Каждую копию модифицируем, чтобы внести разнообразие: масштабировать, врашать, изменять цвет. Во-вторых, отредактированные копии цветков следует объединить в единую гроздь. Здесь нам потребуются, по меньшей мере, два слоя, чтобы цветки могли надлежащим образом перекрывать друг друга. Перед вставкой цветка в общий рисунок переключаемся на нужный слой.
Наконец, на одном из имеющихся или на отдельном слое мы нарисуем черенок грозди и лист. Таким образом, у нас должна получиться гроздь из множества цветков сирени, с черенком и листом.

Овалы

Овалы

В основе многих графических конструкций лежат простейшие элементы. Типичным примером такого элемента является овал (эллипс и круг). В этом разделе вы не только научитесь рисовать овалы, но и познакомитесь с некоторыми важными панелями инструментов, которые имеют общее значение, не только для овалов. Поэтому в порядке изучения Flash не следует пренебрегать этим разделом: именно здесь мы рассмотрим основы рисования в этом редакторе. Хотя далеко не все, что важно знать и уметь в векторной графике, рассматривается на примере овалов.
Для создания овала на панели инструментов предусмотрен специальный инструмент Oval (Овал). Прежде всего, вы можете назначить цвета для внешнего контура и внутренней области овала. Для этого воспользуйтесь цветными квадратами выбора цвета на панели инструментов. С этим можно и не торопиться, поскольку цвет можно изменить в любой момент.
Чтобы нарисовать овал, выберите щелчком на панели инструментов «Овал». Затем нажмите кнопку мыши в какой-нибудь точке на рабочем поле и, удерживая ее в нажатом состоянии, перетащите указатель в другое место и отпустите кнопку. Если вам требуется не овал, а круг, то выполните те же действия при нажатой клавише .
После выбора инструмента «Овал» вы можете определить цвет штриха (линии обводки), его толщину и стиль, а также цвет заливки. Цвета штриха и заливки можно установить с помощью квадратов выбора цвета на панели инструментов, а можно воспользоваться палитрами Stroke (Штрих) и Fill (Заливка). В Flash MX свойства фигуры (в данном случае — овала) отображаются и доступны для изменения в палитре Properties (Свойства).
Штрих может быть сплошным (solid), прерывистым, в виде пунктира и т. д. Все перечисленное называется стилями линий. Заливка (заполнение фигуры) может быть однотонной, градиентной (с применением до 8 цветов), а также с использованием растрового изображения (bitmap). Указанные палитры используются при рисовании не только овалов, но и других фигур. Поэтому имеет смысл их хорошо освоить. Самый надежный способ — эксперимент.
На палитре Stroke имеется меню (кнопка со стрелкой в правом верхнем углу), в котором можно выбрать пункт Custom (Пользовательский), чтобы задать свой стиль штриха.

Палитра Character с параметрами текста

Рисунок 481. Палитра Character с параметрами текста

Трекинг — расстояние между знаками текста. Кернинг — уменьшение расстояния между некоторыми парами знаков, например, имеющими наклонные элементы, как А и V.
Список различных шрифтов довольно велик. Однако при разработке Web-страниц следует иметь в виду, что на компьютере пользователя выбранный вами шрифт может отсутствовать. В этом случае браузер может заменить его наиболее похожим. В результате текст на компьютере пользователя будет выглядеть иначе, чем на вашем. Поэтому не рекомендуется использовать слишком экзотические шрифты.
В Flash имеются три встроенных векторных шрифта, призванных решить отмеченную выше проблему, — _sans, _serif и _typewriter. Однако они, к сожалению, не поддерживают кириллицу.
Чтобы проверить, может ли Flash встроить выбранный вами шрифт в рисунок или фильм, выполните команду View>Antialias Text (Вид>Сглаживание текста). Если контуры текста при этом стали мягче, то все в порядке, в противном случае лучше отказаться от этого шрифта. Другой способ состоит в том, чтобы преобразовать текстовый объект в графический, но об этом чуть позже.
На палитре Character есть поле для ввода адреса гиперссылки (URL). Введите адрес какой-нибудь Web-страницы. Когда вы опубликуете свой фильм на Web-сайте, щелчок на тексте с заданным URL-адресом приведет к открытию в браузере соответствующей Web-страницы.
Настройка форматировании абзаца производится с помощью палитры Paragraph (Абзац). Обычно она представлена в качестве вкладки на одной панели с палитрой Character. Текст можно выровнять внутри текстовой области по левому или по правому краю, по ширине области, а также расположить по центру. Кроме того, можно установить значения полей, отступа и межстрочного интервала. Поле — это расстояние между границей текстовой области и текстом. Отступ — это расстояние первой («красной») строки от границы текстовой области. Отступы и поля задаются в пикселах (рх). Величина межстрочного интервала указывается в пунктах (1 пт = 1/72 дюйма), как и высота шрифта.

Палитра Components e Flash MX

Рисунок 504. Палитра Components e Flash MX

В палитре Components Flash MX находятся семь типов компонентов интерфейса:

CheckBox — флажок;

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

ListBox — список;

PushButton — обычная кнопка;

RadioButton — переключатель; в отличие от флажков, в наборе из нескольких переключателей выбрать можно только один;

ScrollBar — полоса прокрутки;

ScrollPanel — прокручиваемая область (прокручиваемое окно).

Палитра Components с элементами управления

Рисунок 488. Палитра Components с элементами управления

Палитра Paragraph

Рисунок 482. Палитра Paragraph

Обратите внимание, что установки параметров на палитре Paragraph сохраняются от одного вашего проекта к другому.
Цвет текстового объекта можно задать как в палитре Character, так и в палитре Mixer (Смеситель), которую мы рассматривали в главе 1. К текстовому объекту нельзя применить градиентную заливку, но зато его можно сделать полупрозрачным. Для этого служит параметр Alpha.
На палитре Text Options (Параметры текста) имеются дополнительные параметры. В частности, вы можете задать текстовый объект как изменяемый с помощью клавиатуры (поле ввода) или как динамический (изменяемый программно с помощью ActionScript); значением по умолчанию является Static (Статический).
Текстовые объекты можно трансформировать подобно графическим: их можно масштабировать, поворачивать, наклонять и т. п. Многие параметры этих действий приведены на палитре Tansform (Преобразование), которая вызывается командой Window>Panels>Transform (Окно>Палитры>Преобразовать). Поэкспериментируйте с различными значениями параметров преобразования. Кроме того, у вас есть контекстное меню, раскрываемое щелчком правой кнопки мыши, а также команда Modify>Transform(Модифицировать> Преобразовать).
Текстовый объект можно преобразовать в графический объект (картинку). Для этого его надо выделить и затем выполнить команду Modify>Break Apart (Модифицировать>Разделить). С этого момента текст уже нельзя редактировать как текстовый объект, но к нему можно применять инструменты, предназначенные для рисунков. В частности, вы можете применять заливку, производить трансформации отдельных знаков и всех букв одновременно.

Палитра Properties Flash MX в случае когда выделенным элементом является штрих (линия)

Рисунок 438. Палитра Properties Flash MX в случае, когда выделенным элементом является штрих (линия)

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

Палитра Stroke в которой задаются параметры линий

Рисунок 437. Палитра Stroke, в которой задаются параметры линий

Палитра Transform

Рисунок 475. Палитра Transform

Рисунок 503. Палитры параметров экземпляр

Рисунок 503. Палитры параметров экземпляр символа в Flash 5.0

Общие библитеки поставляются с программой Flash. Их можно выбрать в меню, скрываемом командой Window>Common Libraries. Кроме них, вы можете исполь-овать библиотеки из других файлов Flash с расширением fla. Для этого в Flash 5.0 служат команды FiIe>Open as Library (Файл>Открыть как библиотеку) и FiIe>Open аs Shared Library (Файл>Открыть как разделяемую библиотеку). В Flash MX есть только команда File>Open as Library. Подробнее о библиотеках см. главу 9.

Панель инструментов Flash

Рисунок 432.

Панель инструментов Flash 5,0 с указанными основными инструментами рисования На панели инструментов, в числе прочих, находятся три наиболее важных и часто используемых инструмента:

Параметры инструмента «Кисть»

Рисунок 455. Параметры инструмента «Кисть»

Пересечение фигур

Пересечение фигур

Что происходит, когда две или более фигур соприкасаются или пересекаются между собой? В этом случае действуют два правила.

Во-первых, инструменты «Карандаш» (Pencil) и «Линия» (Line) действуют как нож, когда создаваемые ими линии пересекают другую фигуру. При этом нарисованная вами линия также распадается на отдельные отрезки. Это незаметно, пока вы не выделите или не переместите один из объектов. Так что, нанося линии на фигуры, помните, что они при этом разбиваются на объекты, каждый из которых можно редактировать отдельно.

Пипетка

Пипетка

Инструмент «Пипетка» (Dropper) предназначен для копирования свойств контура и заливки одного объекта и применения их к другому объекту. Чтобы передать свойства одного объекта другому, выполните следующее:

1. Выберите инструмент «Пипетка».

2. Выделите контур или внутреннюю область объекта. Если выделен контур, то активизируется инструмент «Чернильница» (Ink Bottle). Если выделена внутренняя область, то активизируется инструмент «Ковш с краской» (Paint Bucket) с включенной блокировкой заливки.

3. Щелкните на другом контуре или заливке, чтобы придать им свойства исходного объекта.

После масштабирования кирпич укладывается в нужное место на стене

Рисунок 541. После масштабирования кирпич укладывается в нужное место на стене

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

После трассировки растрового изображения диалогового окна Save As его можно разобрать на части

Рисунок 515. После трассировки растрового изображения диалогового окна Save As его можно разобрать на части

Преобразование градиентной заливки

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

Итак, у нас получилась кнопка в обычном (ненажатом) состоянии. Чтобы нарисовать кнопку в нажатом состоянии, можно, например, сделать центральный блик более тусклым. Для этого следует выделить заливку и воспользоваться палитрой Fill.
На кнопку можно поместить надпись. Для этого воспользуйтесь инструментом «Текст» (Text) и палитрой Character (Знак).

Преобразование линий в заливку

Преобразование линий в заливку

Линия, нарисованная с помощью инструментов «Карандаш» (Pencil) или «Линия» (Line), а также внешние контуры других объектов могут быть залиты цветом или растровым изображением. Конечно, если линия очень тонкая, то эффект заливки не будет заметен.
Нарисуйте достаточно широкую линию. Для этого в палитре Stroke (Штрих) установите значение ширины линии, равное 10. Далее, преобразуйте линию в объект заливки: выполните команду Modify>Shape>Convert Lines to Fills (Модифицировать>Форма>Конвертировать Линии в Заливки). Выберите инструмент «Ковш с краской» (Paint Bucket) и щелкните на линии. В результате она будет заполнена тем, что вы предварительно выбрали.

Преобразование заливки (Transform Fill)

Преобразование заливки (Transform Fill)

Режим

При выполнении команды Modify>Break

Рисунок 485. При выполнении команды Modify>Break Apart к текстовому объекту каждая буква преобразуется в отдельный графический объект

Применение команды Free Transform в режиме Distort для создания эффекта перспективы

Рисунок 486. Применение команды Free Transform в режиме Distort для создания эффекта перспективы


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

1. Выберите инструмент Text и с помощью мыши очертите границы текстовой области.

2. На палитре Properties в раскрывающемся списке Text Type (Тип текста) выберите значение Dynamic Text (Динамический текст); в раскрывающемся списке Line Type (Тип строки) выберите режим расположения динамического текста в текстовой области:

Single Line (Одна строка) — для области с только горизонтальной прокруткой;

Mutiline (Несколько строк) или Multiline no wrap (Несколько строк без перетекания) — для области с вертикальной прокруткой;

Multiline no wrap — для области с вертикальной и горизонтальной прокрутками.

3. При выбранном инструменте Text щелкните за пределами текстовой области. При этом курсор внутри текстовой области исчезнет, а вокруг нее появится штриховая рамка.
4. Переместите указатель мыши внутрь текстовой области и щелкните правой кнопкой мыши, чтобы открыть контекстное меню и выбрать в нем команду Scrollable (Прокручиваемый).
5. В палитре Components (Компоненты), содержащей множество элементов управления, найдите ScrollBar и перетащите его в текстовую область. Вертикальную полосу прокрутки устанавливайте вдоль вертикальной границы текстовой области. Чтобы установить горизонтальную полосу прокрутки, установите элемент ScrollBar так, чтобы он пересекал горизонтальную границу текстовой области.

Применение субвыделения к контуру

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

Пример текстовой области с прокруткой

Рисунок 489. Пример текстовой области с прокруткой

Другие компоненты интерфейса мы рассмотрим ниже, в специальном разделе этой главы.

Пример трансформации с помощью инструмента Free Transform в режиме Distort

Рисунок 472. Пример трансформации с помощью инструмента Free Transform в режиме Distort




Рисунок 474. Пример трансформации с помощью инструмента Free Transform в режиме Envelope

Для задания параметров поворота и наклона можно воспользоваться палитрой Transform, которая открывается в Flash 5.0 командой Window>Panels>Transform (Окно>Палитры>Преобразовать), а в Flash MX — командой Window>Transform (Окно>Преобразовать). В этой палитре можно задать углы поворота и наклона объекта. Справа внизу расположена кнопка Copy and apply transform (Копировать и трансформировать), позволяющая сохранять копию исходного изображения. Рядом находится кнопка Reset (Сброс) для восстановления исходных параметров объекта.

Пример трехкратного применения

Рисунок 476. Пример трехкратного применения режима Copy and apply transform при повороте объекта на некоторый угол

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

Примеры различных линий нарисованных с помощью инструмента «Линия»

Рисунок 449. Примеры различных линий, нарисованных с помощью инструмента «Линия»

Привязка к объектам

Привязка к объектам

Для установки или снятия режима привязки к объектам выберите инструмент
«Выделение» (черная стрелка) и щелкните на кнопке Snap to Objects (Привязать к объектам), которая расположена на панели инструментов в разделе Options. Это же действие выполняет команда View>Snap to Objects (Вид>Привязать к объектам).

Прямоугольник охватывает область

Рисунок 440. Прямоугольник охватывает область выделения и виден в процессе выделения. В данном случае будет выделен овал

Выберите инструмент

Прямоугольники

Прямоугольники

Прямоугольник является еще одной простой фигурой, которая, как и овал, часто используется в качестве элемента при создании более сложных рисунков. Какая структурная схема или чертеж обойдутся без прямоугольников?
Чтобы нарисовать прямоугольник, воспользуйтесь инструментом Rectangle («Прямоугольник»). Прямоугольник в общем случае состоит из двух объектов — внешнего контура и внутренней области. Прежде чем рисовать прямоугольник, вы можете назначить цвета для внешнего контура и внутренней области (заливки). Для этого воспользуйтесь цветными квадратами выбора цвета на панели инструментов. С этим можно и не торопиться, поскольку цвет можно изменить в любой момент.
Итак, выберите на панели инструментов Rectangle («Прямоугольник»). Это делается щелчком на кнопке с изображением квадрата. Нажмите кнопку мыши в том месте рабочего поля, где будет располагаться верхняя левая вершина вашего прямоугольника. Затем перетащите указатель в точку, где должна быть нижняя
правая вершина прямоугольника. В результате на рабочем поле появится прямоугольник. Если вам требуется идеальный квадрат, то выполните те же действия при нажатой клавише .
Чтобы изменить параметры внешнего контура и внутренней области прямоугольника, воспользуйтесь палитрами Stroke (Штрих) и Fill (Заливка). Перед этим не забудьте выделить объект — контур или внутреннюю область. Порядок действий такой же, как и в случае овала (см. предыдущий раздел). Напомним, что в Flash MX параметры сосредоточены в одной палитре Properties (Свойства).
На панели инструментов есть кнопка Round Rectangle Radius (Радиус скругления углов), щелкнув на которой можно открыть окно Rectangle Settings для ввода величины радиуса, который измеряется в пунктах (1 пункт = 1/72 дюйма).

Простейшая стрелка

Рисунок 518. Простейшая стрелка

PushButton (Кнопка)

PushButton (Кнопка)

Кнопки-компоненты не отличаются принципиально от кнопок-символов, которые были рассмотрены выше. Особенностью кнопок-компонентов является то, что для них определены лишь два визуальных образа — исходное состояние и состояние «нажата». Поэтому кнопка-компонент не реагирует на перемещение указателя мыши. Например, такая кнопка не чувствительна к событию «указатель мыши на кнопке». Единственное воспринимаемое ею событие — щелчок на кнопке (Click). Для кнопки-компонента предусмотрен метод setClickHandler, который дает возможность назначить кнопке функцию, обрабатывающую щелчок. Например, если в мультфильме имеется кнопка с именем mybutton, то в сценарии можно написать: mybutton.setClickHandler(«onClick»), где onClick — имя функции-обработчика, которая должна быть определена для той же временной шкалы, к которой относится кнопка mybutton.
На палитре свойств для кнопки можно задать два параметра:

Label — текстовая метка, надпись на кнопке. По умолчанию ее значением
является Push Button;

Click Handler — имя функции-обработчика. Это имя является значением метода setClickHandler.

RadioButton (Переключатель)

RadioButton (Переключатель)

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

Group Name — имя группы, в которую входит данный переключатель;

Data — данные, которые следует передать на сервер или обработать с помощью сценария.

Рисунок 461. Расположение инструментов для

Рисунок 461. Расположение инструментов для преобразования и кнопок выбора режимов заливки в Flash 5.0



Рисунок 462. Расположение инструментов для преобразования и кнопок выбора режимов заливки в Flash MX

Допустим, у нас есть некоторая фигура, которая залита градиентом. Выберите инструмент «Ковш с краской», и затем Transform Fill (Преобразование заливки) и щелкните на фигуре. В результате вокруг фигуры появится так называемая граница редактировании с маркерами. Если градиент радиальный, то граница редактирования будет круглой, а в случае линейного градиента — прямоугольной. Форма указателя мыши будет изменяться в зависимости оттого, на какой маркер он наведен. Каждый маркер редактирования имеет свое назначение. Пробуйте перемещать их, чтобы увидеть, как изменяются параметры градиентной заливки
Если фигура заполнена не градиентом, а растровым изображением, то вы также можете редактировать заполнение — изменять его масштаб и вращать. О заполнении растровым изображением мы еще расскажем позже.

Растровое изображение после применения

Рисунок 511. Растровое изображение после применения операции разделения (Modify >Break Apart) можно редактировать в Flash

Растровое изображение (слева)

Рисунок 514. Растровое изображение (слева) и результат его трассировки (справа) при Minimum Area = 10, Curve Fit = Normal, Corner Threshold = Normal

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

Раздел Flash UI Components палитры Actions e Flash MX

Рисунок 506. Раздел Flash UI Components палитры Actions e Flash MX

Вставить компонент в мультфильм можно путем простого перетаскивания шшью из окна компонентов в рабочую область, аналогично тому, как это делается с элементами библиотеки символов. В этой главе мы уже рассматривали вставку полосы прокрутки в текстовую область. Для установки исходных параметров кземпляра компонента можно воспользоваться палитрой Properties (Свойства). )собенность этой палитры для компонента заключается в том, что она имеет две кладки: Properties (Свойства) и Parameters (Параметры). Вкладка Properties одинакова для всех компонентов. В ней устанавливаются свойства компонента как экземпляра символа типа Movie Clip. На вкладке Parameters устанавливаются свойства, специфичные для данного элемента интерфейса. Мы предлагаем вам самостоятельно поэкспериментировать с параметрами для различных компонентов.
Экземпляры компонента, вставленные в ваш мультфильм, можно редактировать. Таким образом, палитра компонентов является источником шаблонов для конкретных компонентов интерфейса. При вставке в мультфильм экземпляра компонента в библиотеку вашего мультфильма добавляются как соответствующий символ, так и все его составные части (Component Scins — оболочки компонента), все это помещается в отдельную папку с соответствующим именем. Например, составные части компонента CheckBox помещаются в папку FCCheckBox. Чтобы зменитьту или иную часть компонента, откройте в окне библиотеки мультфильма нужную папку, например, FCheckBox Scins. Выберите в этой папке нужную часть и перетащите ее в рабочую область. Перейдите в режим редактирования символов (все составные части компонента являются символами типа Movie Clip) и измените внешний вид или поведение этой части компонента. Например, вы можете изменить внешний вид «галочки» в компоненте CheckBox (Флажок).
Чтобы проверить работу компонентов, необходимо протестировать мультфильм или сцену. Это делается с помощью команд Control>Test Movie или Control>Test Scene.

Раздел Options панели инструментов при выбранном инструменте «Лассо»

Рисунок 434. Раздел Options панели инструментов при выбранном инструменте «Лассо»

Если выбран «Режим многоугольника» (Polygon Mode), то создать область выделения чуть сложнее. Сначала щелкните в начальной точке контура выделения, затем переместите указатель в какую-нибудь другую точку и снова щелкните. Появится отрезок прямой линии. Теперь переместите указатель в новое место и снова щелкните. Появится второй отрезок прямой, примыкающий к первому. Чтобы завершить построение контура выделения, сделайте двойной щелчок. Все объекты, охваченные созданным контуром, будут выделены, а сам контур исчезнет.
Чтобы выделить все объекты, нажмите клавиши + или выполните команду Edit>Select All (Редактировать>Выделить все). Чтобы отменить выделение, нажмите клавиши ++ или выполните команду Edit>Deselect Аll (Редактировать>Отменить выделение всего).
Прежде чем начать рисовать, следует приобрести твердые навыки выделения объектов или их частей, а также привыкнуть контролировать текущее выделение.

Размер зазора (Gap Size)

Размер зазора (Gap Size)

Можно заполнить цветом участки, обведенные незамкнутыми линиями, т. е. имеющие зазоры. Режим Gap Size (Размер зазора) позволяет задать величину допустимого промежутка, чтобы можно было произвести заливку. Вы можете установить малый, средний и большой зазор, а также указать Flash использовать заливку только при условии отсутствия зазоров.

Редактирование заливки фигуры растровым изображением

Рисунок 468. Редактирование заливки фигуры растровым изображением

Режим кисти (Brush Mode)

Рисунок 456.

Режим кисти (Brush Mode) определяет соотношение инструмента «Кисть» с уже готовыми изображениями на рабочем поле:

Paint Normal (Нормальное закрашивание). Используется, когда не нужно заботиться о других объектах. Это — обычный режим использования кисти.

Paint Fill (Окрашивание заливок). Позволяет окрашивать пустые участки рабочего поля, а также уже существующие заливки.

Paint Behind (Окрашивание позади объекта). Позволяет окрашивать пустые участки рабочего поля. Даже если мазки идут через объект, он остается незакрашенным.

Paint Selection (Окрашивание выделенной заливки). Окрашивается только та заливка, которая была ./U предварительно выделена.

Paint Inside (Закрашивание внутри контура). Окрашивается только область заливки, в которой вы начали окрашивание. Можно окрашивать и пустые участки рабочего поля.

Размер кисти (Brush Size) выбирается в раскрывающемся списке, в котором показаны кружки различных размеров.

Форма кисти (Brush Shape) выбирается в раскрывающемся списке, где содержатся различные профили кисти. Эффект применения кисти той или иной формы проявляется при рисовании под углом.

Давление (Pressure). Этот параметр появляется на панели инструментов только при подключении к компьютеру специального планшета с ручкой. При этом ширину кисти можно регулировать нажимом ручки.

Инструмент «Ластик» (Eraser) предназначен для стирания (удаления) элементов фигур. Если говорить точнее, то он закрашивает их цветом рабочего поля. По умолчанию этот цвет белый. Однако его можно изменить. Для этого выполните команду Modify>Movie (Модифицировать>Мультфильм) и в диалоговом окне выберите цвет в поле Background Color (Цвет фона).
В разделе Options на панели инструментов можно выбрать форму и размер пятна ластика, атакже режим (Eraser Mode) и параметр Faucet (Водопроводный кран).

Рассмотрим сначала режимы инструмента «Ластик» (Eraser):

Erase Normal. Нормальный (обычный) режим, при котором мазок ластиком удаляет пересекаемые линии и области заливки.

Erase Fills. Удаление только области заливки, не затрагивая линий.

Erase Lines. Удаление линий, не затрагивая областей заливки.

Erase Selected Fills. Удаление выделенных областей заливки.

Erase Inside. Удаление внутри. Начните применение ластика внутри фигуры. Мазки вне фигуры не будут видны.

Параметр Faucet (Водопроводный кран) позволяет удалить область заливки, к которой применен «Ластик». Выберите инструмент «Ластик» и щелкните на кнопке с изображением водопроводного крана, чтобы она оказалась в нажатом состоянии. Затем щелкните на какой-нибудь области заливки. В результате эта область будет удалена (точнее, окрашена в цвет фона). Название рассмотренного параметра обусловлено видимо метафорой, что капля из крана растекается и заливает ту область фигуры, на которую упала.

Результат работы кистью при использовании растрового изображения в качестве цвета заливки

Рисунок 544. Результат работы кистью при использовании растрового изображения в качестве цвета заливки

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

Выполнить команду File>Import (Файл>Импорт) и выбрать файл с растровым изображением, которое будет использоваться как цвет заливки.

Выполнить команду Modify>Break Apart (Модифицировать>Разделить). Растровое изображение появится на рабочем поле.

Выбрать инструмент «Пипетка» (Dropper) и щелкнуть на растровом изображении.

Выбрать нужный инструмент — «Ковш с краской» (Paint Bucket) для заливки или «Кисть» (Brush) для закраски.

Применить выбранный инструмент к графическому объекту.

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

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

Третий способ состоит в использовании кисти, для которой в качестве цвета заливки выбрано растровое изображение. Эффект в большой степени зависит от соотношения размеров кисти и растровой картинки. Желательно, чтобы размер кисти был побольше, а растровое изображение было как можно меньше. При закрашивании кистью мы выбрали размер фрагмента кирпичной кладки 45x25 пикселов.

Рисование линии и палитра Stroke настройки ее параметров

Рисунок 446. Рисование линии и палитра Stroke настройки ее параметров

При выборе инструмента «Карандаш» (Pencil) в разделе Options на панели инструментов появляется кнопка с отображением текущего режима рисования линии. Щелчок на ней открывает меню для выбора нужного режима:

Sraighten (Выпрямить). Выпрямляетлинии. Применяется к геометрическим фигурам, таким как прямоугольники, треугольники, окружности;

Smooth (Сгладить). Убирает неровности в линиях, вызванные обычно дрожанием руки при рисовании;

Ink (Чернила). Слегка смягчает и распрямляет линии.

Вы можете указать Flash, как вам требуется обрабатывать линии. Для этого выполните команду Edit > Preferences (Редактировать>Настройки) и перейдите в открывшемся окне на вкладку Editing (Редактирование). На этой вкладке сейчас нас интересует группа параметров Drawing Settings (Параметры рисования).

Рисование линии с помощью «Пера» В данном случае линия состоит из прямых сегментов

Рисунок 450. Рисование линии с помощью «Пера». В данном случае линия состоит из прямых сегментов

Если завершить рисование ломаной линии недалеко от начальной точки, а затем щелкнуть на этой точке, то линия замкнется. При этом внутренняя область будет заполнена текущим цветом заливки.

Рисование во FLASH В этой главе

Рисование во FLASH В этой главе мы рассмотрим основные способы создания рисунков в векторном редакторе Flash. Главная наша цель — ознакомиться с инструментами рисования. Инструменты выбора цвета были описаны в главе 1, поэтому здесь мы не будем рассматривать их подробно. Вся мощь Flash направлена на создание анимации (видеоклипов, фильмов), и большинство инструментов ориентировано именно на это. Однако анимацию в Flash мы рассмотрим в следующей главе, а здесь остановимся на использовании лишь тех инструментов, которые нужны для создания и редактирования статических изображений.

Таким образом, в этой главе мы рассматриваем Flash просто как векторный редактор для создания и изменения векторных изображений. Техника работы с векторными изображениями отличается от способов работы с растровыми картинками. Вместе с тем, в Flash вы имеете возможность импортировать в свою векторную графическую композицию растровые изображения. При этом их можно масштабировать, осуществлять геометрические преобразования как целого объекта, но нельзя корректировать цвет пикселов. Иначе говоря, растровое изображение в векторном редакторе представляется как некий единый объект, хотя средствами Flash можно попытаться разделить его на отдельные части. Анализ изображения с целью коррекции цвета, контрастности, выделения фрагментов и т. п. производится совсем другими средствами — растровыми редакторами, например, Photoshop. При работе в векторном редакторе вы должны уяснить прежде всего, что все изображения или их фрагменты представляют собой объекты графической композиции. Каждый объект можно модифицировать, т. е. изменить. Если объекты были соединены в один групповой объект, то редактировать исходные объекты уже нельзя: с точки зрения программы Flash они перестали быть автономными объектами композиции, хотя мы из эстетических, логических и других соображений все еще продолжаем воспринимать их как отдельные части целой картины.
Flash — это компьютерная программа, в которой все элементы являются объектами (с точки зрения объектно-ориентированного программирования). Объекты характеризуются свойствами. Мало знать имя (название) объекта, хотя нередко в имени видна попытка отразить его сущность. Только изучив свойства объекта, мы можем понять, чем является тот или иной объект. Например, в математической теории множеств не дается определение понятия «множество» с математической точки зрения. Конечно, там есть слова, призванные направить нашу интуицию » должное русло, но все они в совокупности не являются математическим определением. Добавим: многие, даже профессора, продолжают считать, что задача какой-либо теории состоит в том, чтобы дать определение предмета исследования. Поэтому они предпринимают неимоверные усилия, скорее в лингвистической, чем в предметной области, чтобы дать исчерпывающее, на все времена, словесное определение. На наш взгляд, все эти труды напрасны, поскольку не ведут к цели: уяснению того, что с чем связано. Названия могут быть удачными или нет, но не они формируют наши понятия в конечном счете. Впрочем, главная задача математики — не в создании строгих определений, а в построении моделей действительности. Так, например, мы постигаем идею множества, изучив его математические свойства, выраженные в виде теорем, а не житейские метафоры. Все сказанное выше является лишь преамбулой к последующему изложению, понимание которой желательно, но совсем необязательно для дальнейшего чтения.
Произведения статической графики, созданные в Flash, можно потом использовать в более грандиозных проектах, таких как мультфильмы. Кроме того, их можно экспортировать в файлы других форматов векторной и растровой графики. Часто бывает удобно нарисовать что-нибудь от руки именно в векторном редакторе, а затем экспортировать результат в файл растрового формата, чтобы открыть его потом, например, в Photoshop для окончательной редакции. Например, подготовку обложки книги часто делают в векторном редакторе (заливки цветом определенных участков, тексты, авторские дорисовки). При этом живописные элементы (репродукции картин, фотографии и т. п.) предварительно обрабатывают в растровом редакторе, а затем импортируют в векторный редактор, чтобы составить общую и окончательную композицию. Изображения в векторном формате 5WF, созданные в Flash, можно публиковать на Web-страницах. Пока это един-ггвенный векторный формат, пригодный для публикации в Web.
В главном окне Flash нас будут интересовать в основном панель инструментов, политры настройки параметров и список слоев. Такой специфический инструмент, как временная шкала, расположенный на видном месте, нужен при создании анимационной графики. Мы отложим его рассмотрение до следующей главы. Так что пока забудьте о нем.
Внимание! При описании инструментов Flash, если специально не оговорено, имеется в виду версия 5.0. Особенности Flash MX мы будем оговаривать особо.
В верхней части главного окна Flash 5.0 находится, как и у всех графических реакторов и других прикладных программ, строка меню. Ниже меню располагается горизонтальная панель с инструментами; вдоль левой стороны окна — панель инструментов рисования (Tools). Чтобы скрыть или показать их, следует воспользоваться командами Window>Toolbars>Main (Окно>Панели инструментов>Главная) Window>Tools (Окно>Инструменты). В правой части окна находятся так называемые плавающие палитры (панели) параметров, которые можно перемещать. Первоначально открыто лишь несколько палитр из довольно большого множества палитр, имеющихся в Flash. Чтобы открыть недостающую палитру, выполните команду Window>Panels (Окно> Панели) и выберите нужную палитру в меню. Чтобы убрать с экрана палитру, выполните аналогичные действия (команды меню Window>Panels являются триггерами, т. е. находятся в одном из двух возможных состояний: включена/отключена). Панели параметров мы называем палитрами, как это принято в Photoshop. Вы можете называть их, как хотите. Палитры можно удалять с экрана, чтобы освободить место для рисования и просмотра изображений, и возвращать, когда они понадобятся.
В центре окна Flash находится рабочее поле, на котором и происходит рисование. Это поле находится в отдельном окне главного окна. Стандартное имя этого окна — Movie (кино, фильм, мультфильм). Дело в том, что все, что создается в Flash, рисунки или анимация, имеет общее название — фильм или мультфильм (по-английски, movie). Если быть точнее, на рабочем поле расположен так называемый монтажный стол или область видимого документа Flash. Все, что выходит за рамки монтажного стола, не будет видно при демонстрации конечного результата, но будет в нем содержаться.

Рисунок 457.

Рисунок 457.

Рисунок 458.

Рисунок 458.

ScrollBar (Полоса прокрутки)

ScrollBar (Полоса прокрутки)

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

ScrollPane (Прокручиваемая область)

ScrollPane (Прокручиваемая область)

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

Scroll Content — прокручиваемое содержимое. Это — имя экземпляра символа типа Movie Clip (клипа), который должен отображаться в данной области;

Horizontal Scroll — горизонтальная прокрутка. Определяет один из трех вариантов использования горизонтальной полосы прокрутки: Auto (при необходимости), False (никогда), True (всегда);

Vertical Scroll — вертикальная прокрутка. Определяет один из трех вариантов использования вертикальной полосы прокрутки, как и для горизонтальной прокрутки.

Сетка

Сетка

Кроме направляющих, рассмотренных выше, на рабочем столе можно отобразить сетку. Для этого следует выполнить команду View>Grid>Show Grid (Вид>Сетка>Показать Сетку). Если сетка видна на экране, то выполнение этой команды скроет ее. Сетка, как и направляющие, не является элементом изображения и служит лишь для удобства рисования.
Параметры сетки можно задать в диалоговом окне Grid (Сетка), которое открывается командой View>Grid>Edit Grid (Вид>Сетка>Редактировать Сетку).
В частности, вы можете указать размеры ячеек сетки и цвет ее линий. Установите флажок Show Grid (Показать Сетку), чтобы сетка была видна, или снимите его, чтобы скрыть сетку. Для привязки объектов к сетке установите флажок Snap to Grid (Привязать к Сетке). В случае привязки указатель мыши будет притягиваться к точкам сетки. В раскрывающемся списке Snap accuracy (Точность привязки) выберите значение, указывающее точность привязки объектов к сетке.

Рисунок 494. Сетка

Шину для колеса получаем залив круг радиальным градиентом

Рисунок 528. Шину для колеса получаем, залив круг радиальным градиентом

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

Слои

Слои

Создавать графические композиции из нескольких объектов удобно с использованием слоев. Напомним, что наложение двух рисунков, расположенных в одном слое, приводит либо к их слиянию в один объект, либо к замещению верхним объектом соответствующего участка нижнего объекта. Чтобы этого не происходило, объекты следует размещать на отдельных слоях, даже если по замыслу автора они должны частично перекрываться. Слои — важный инструмент создания анимационной графики. Кроме того, их можно использовать для размещения других объектов, например звука, направлящих перемещения объектов при анимации, а также программ (сценариев) на языке ActionScript.
Список слоев находится над рабочим полем левее временной шкалы. При создании нового фильма Flash этот список содержит всего один слой с именем Layer 1 (Слой 1). Впрочем, вы всегда можете изменить это имя на более подходящее вашим целям или своему содержанию. Чтобы сделать это, достаточно дважды щелкнуть леиой кнопкой мыши на существующем имени слоя и в открывшееся поле ввести нужную последовательность знаков с клавиатуры.
Вы можете добавить новый слой. Для этого щелкните на кнопке с знаком «+» внизу списка. Имя созданного таким образом слоя появится наверху списка. Порядок слоев имеет важное значения. Слой, чье имя находится выше в списке, располагается над слоем (ближе к зрителю), имя которого стоит ниже. Однако относительное расположение слоев можно изменить. Для этого достаточно просто перетащить мышью имя слоя в нужное место списка. Чтобы удалить слой, щелкните на этом слое в списке (строка с именем слоя будет выделена цветом), а затем щелкните на кнопке с изображением мусорной корзины внизу списка.
Слой, содержимое которого можно редактировать в данный момент, называется активным. Чтобы активизировать слой, щелкните на его имени, которое сразу же выделится черным цветом.
Слой со всеми объектами на нем можно сделать невидимым. Для этого щелкните на точке в строке этого слоя, расположенной в столбце под изображением глаза. Чтобы вернуть видимость слоя, щелкните еще раз на том же месте. Если щелкнуть на изображении глаза, то все слои станут невидимыми, а повторный щелчок вернет их видимость.
Слой можно заблокировать, т. е. запретить редактирование расположенных на нем объектов. Это удобно сделать из соображений предосторожности, например, когда вы не хотите нечаянно поместить на нем вновь создаваемые объекты, а также испортить уже существующие. Бывает, что при рисовании на нескольких сдоях забываешь вовремя переключаться между ними. Чтобы заблокировать или разблокировать слой, действуйте аналогично переключению видимости, только используйте для этого точки, расположенные в столбце под изображением замка.
Цветные квадратики позволяют представить объекты на слое как контурные рисунки соответствующего цвета. Это удобно, когда требуется бегло оценить, как объекты распределены по слоям.

Слой Фон невидим и заблокирован

Рисунок 497. Слой Фон невидим и заблокирован

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

Выделите копируемый слой (щелкните на его имени).

Выполните команду Edit>Copy Frames (Редактировать>Копировать кадры).

Добавьте новый слой (щелкните на кнопке

Содержимое верхнего слоя в котором

Рисунок 534. Содержимое верхнего слоя, в котором использовалась кисть. Нижний слой с контуром картинки сделан невидимым

Сохранение и публикация изображений

Сохранение и публикация изображений

Промежуточные результаты работы над графическим объектом сохраняются в файлах с расширением fla. Это так называемые исходные или авторские файлы. Для сохранения вашего произведения следует выполнить команду FiIe>Save (Файл>Сохранить) или File>Save As (Файл>Сохранить как), если требуется выбрать или ввести имя файла. По умолчанию имя файла имеет вид Movie<номер>. Впоследствии вы можете открыть сохраненный ранее файл с расширением fla с помощью команды File>Open (Файл>Открыть) и продолжить работу.
Если изображение готово, то вы можете поступить одним из двух способов. Во-первых, можно просто экспортировать изображение в один из широко распространенных форматов графических файлов. Этот вопрос мы рассматривали в предыдущем разделе главы. Во-вторых, вы можете создать выходные файлы Flash, т. е. выполнить публикацию. В этом случае создается SWF-файл, который можно просмотреть в проигрывателе Flash-фильмов Flash Player, также создается дополнительный HTML-файл, чтобы показать SWF-файл в Web-браузере.
Для публикации изображения служит команда File>PubIish (Файл>Опубликовать). Чтобы сделать предварительный просмотр в Web-браузере или проигрывателе Flash Player, следует выполнить команду File>Publish Preview (Файл>Предварительный просмотр публикации) и в меню выбрать команду HTML или Flash в зависимости оттого, где вы хотите просмотреть изображение — в Web-браузере или в Flash Player.

Список слоев в Flush MX

Рисунок 499. Список слоев в Flush MX

Список слоев

Рисунок 496. Список слоев

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

Средства повышения точности рисования

Средства повышения точности рисования

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

Стрелка с округлыми краями

Рисунок 521. Стрелка с округлыми краями

Стрелка залитая градиентом

Рисунок 522. Стрелка, залитая градиентом

Сохраните созданную стрелку в библиотеке как символ типа Graphic (Графический). Для этого сначала выделите рисунок, а затем выполните команду Insert>Convert to Symbol (Вставить>Преобразовать в символ). В открывшемся диалоговом окне введите имя стрелки, например Стрелка 1, и выберите тип символа Graphic. Если вы откроете окно библиотеки командой Window>Library (Окно>Библиотека), то найдете в нем только что созданный графический символ.
Очистите рабочее поле и нарисуйте на нем несколько прямоугольников, соединенных линиями. Допустим, что это некая структурная схема, которую необходимо снабдить стрелками. Из окна библиотеки перетащите на рабочее поле изображение стрелки (точнее говоря, экземпляр символа стрелки). Сделайте это столько раз, сколько стрелок понадобится в структурной схеме. Примените к каждой стрелке на рабочем поле операции масштабирования и вращения, а затем перетащите их в нужные места на схеме. Вот и все!

Стрелки на линиях

Стрелки на линиях

При создании различного рода схем и чертежей часто приходится рисовать стрелки на концах линий. Можно заранее нарисовать несколько стрелок различных стилей и сохранить их в библиотеке. Затем эту библиотеку удобно использовать при создании конкретной схемы. При этом вам нужно будет только переместить подходящую стрелку из библиотеки на рабочее поле, изменить ее масштаб и ориентацию и установить в нужном месте создаваемого рисунка. Обратите внимание, что под стилем стрелки мы понимаем все, что не связано с размером и ориентацией ее острия.
Для удобства рисования покажем на рабочем поле сетку. Для этого выполните команду View>Grid>Show Grid (Вид>Сетка> Показать сетку). Неплохо задать размер ячейки сетки 10x10 пикселов. Чтобы задать размеры ячеек, выполните команду View>Grid>Edit Grid (Вид>Сетка>Редактировать сетку) и в открывшемся диалоговом окне введите нужные значения.
Прежде всего, следует заметить, что черенок («хвост») стрелки рисовать не нужно, поскольку она будет накладываться на линию с уже заданными размерами, а подгонять толщину линии под толщину черенка стрелки очень нетехнологично.
Начнем с рисования самой простой стрелки. По существу, это — две линии, образующие угол. Чтобы нарисовать такую фигуру, выберите инструмент «Линия» (Line) и проведите на рабочем поле две линии. При этом удерживайте нажатой клавишу , чтобы углы наклона линий были кратны 45 градусам.
Усложним стрелку, придав ей форму четырехугольника так, чтобы она приобрела некоторый объем. Для этого следует нарисовать еще две линии. Выберите инструмент «Субвыделение» (белая стрелка) и щелкните на контуре стрелки. В результате ее контур окрасится в синий цвет, а на углах контура появятся прямоугольные маркеры. Перемещая эти маркеры, можно придать стрелке требуемую форму. Например, можно сделать ее более острой или, наоборот, тупой. Можно даже изменить размеры и сделать стрелку несимметричной.
Выделите нарисованную стрелку. Для этого выполните команду Edit>Select All (Редактировать>Выделить все). В меню Modify>lransform (Модифицировать>Преобразовать) выберите команду Scale (Масштабировать) или Rotate (Вращать). В результате вокруг стрелки появятся маркеры. Перемещая их, можно изменить масштаб стрелки или ее ориентацию в зависимости от того, какую команду вы выбрали.

Свойства компонента CheckBox в палитре Properties

Рисунок 508. Свойства компонента CheckBox в палитре Properties

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

Свойства компонента Pushbutton в палитре Properties

Рисунок 509. Свойства компонента Pushbutton в палитре Properties

Текст преобразованный в набор графических объектов

Рисунок 484. Текст, преобразованный в набор графических объектов

В Flash MX с текстом стало удобнее работать, появились новые возможности. Рассмотрим некоторые из них. Прежде всего, напомним, что свойства выделенного текстового объекта (как и всех других) отображаются в палитре Properties (Свойства).
Чтобы выполнить трансформации текста, необходимо применить к нему команду Modify>Break Apart (Модифицировать>Разделить). В результате каждая буква преобразуется в отдельный графический объект, который можно перемещать, трансформировать, перекрашивать. Однако режимы Distort (Искажение) и Envelope (Изгиб) команды Free Transform (Произвольное преобразование) остаются недоступными. Чтобы их можно было применить, выполните команду Modify>Break Apart (Модифицировать>Разделить) еще раз. Режим Distort (Искажение), который теперь станет доступным, можно использовать, например, для создания эффекта перспективы.

Текст

Текст

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

1. Щелкните на инструменте

Трансформация текстового объекта

Рисунок 483. Трансформация текстового объекта

Трассировка

Трассировка

Рассмотрим трассировку импортированных в Flash растровых изображений более подробно. Прежде всего отметим, что она далеко не всегда оправдывает наши надежды. Наилучшие результаты получаются на таких растровых картинках, которые очень похожи на векторные рисунки. Типичный пример — отсканированное изображение схемы или чертежа. Хуже всего трассировка работает на изображениях с плавными переходами цветов и нечеткими границами между элементами. Типичным примером таких изображений является фотография (портрет или пейзаж).
Зачем нужна трассировка? Есть, по крайней мере, две причины ее применения. Во-первых, трассировка приводит растровое изображение к виду, удобному для последующего редактирования средствами векторного редактора, а иногда даже улучшает качество изображения. Например, нарисовать график функции непосредственно в редакторе довольно сложно, особенно если нужно отобразить точный, а не приблизительный ход кривой. В этом случае можно нарисовать график на бумаге, отсканировать и импортировать его растровое изображение в векторный редактор. После этого можно применить трассировку и окончательно отредактировать изображение (добавить или изменить текстовые элементы и т. п.). Во-вторых, изображения типа схем и чертежей в векторном формате обычно занимают существенно меньше места на диске, чем в растровом. Картинки типа схем и чертежей мы называем «костлявыми». Вся информация в этих рисунках сосредоточена преимущественно в линиях. Множество пикселов этих линий составляет обычно ничтожно малую долю всего рисунка, заполненного, в основном, белыми пикселами фона. При векторизации «костлявых» растровых изображений мы избавляемся от пиксельного фона, а линии представляем математическими выражениями, более компактными, чем их пиксельные оригиналы. Однако если растровое изображение относится к типу фотографий обычной натуры, то алгоритм трассировки будет долго мучиться, выделяя огромное количество элементов. В конце концов, он завершит свою работу, представив нам бледную, дискретную, геометрически искаженную, но зато расчлененную копию оригинала. Объем такого векторного изображения может даже значительно превосходить объем исходного растрового файла.
Для трассировки растрового изображения выполните следующее:

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

Выполните команду Modify>Trace Bitmap (Модифицировать>Трассировка растрового изображения). Откроется диалоговое окно Trace Bitmap, в котором можно задать параметры трассировки.

Щелкните на кнопке ОК, чтобы закрыть окно параметров, а затем отмените выделение рисунка на рабочем поле. Теперь можно посмотреть результат трассировки.

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

Углы прямоугольника можно скруглить задав радиус

Рисунок 443. Углы прямоугольника можно скруглить, задав радиус

Как и в случае овала, к прямоугольнику можно применить инструмент

Уроки рисования

Уроки рисования

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

Ветка сирени

Ветка сирени

Художники создают натюрморты не только потому, что ими можно украсить кухню или прихожую. Натюрморт даже в большей степени, чем портрет, позволяет живописцу проявить свой талант владения кистью. Создать реалистичную композицию из цветов или фруктов — довольно сложное дело. Мы не беремся в этом уроке показать свое искусство в жанре натюрморта. Как и прежде, наша задача состоит лишь в том, чтобы показать некоторые простые технологические приемы рисования в векторном редакторе с ограниченными живописными средствами. Попробуйте начать вместе с нами. В дальнейшем вы придумаете дополнительные способы или даже совсем новые, чтобы удивить всех своим произведением.
Итак, сейчас мы хотим создать ветку сирени. Как известно, ветка сирени состоит из одной или нескольких гроздей мелких цветков. Большинство цветков имеет четыре лепестка, иногда встречаются пятилепестковые цветки. Цвет изменяется от белого к сиреневому и лиловому.
С точки зрения обучения компьютерному рисованию, эта задача состоит из двух частей. Во-первых, сначала надо нарисовать один цветок. Здесь придется как следует повозиться над геометрией лепестков, заливкой, пестиком и тычинками.

Внесение дисимметрии в изображение

Рисунок 532. Внесение дисимметрии в изображение колеса с помощью линейной градиентной заливки диска и добавления штрихов

В следующей главе мы используем рисунок колеса в качестве элемента мультфильма с автомобилем. Поэтому сохраните это колесо в библиотеке как символ типа Graphic (Графический). Для этого сначала выделите рисунок, а затем выполните команду Insert>Convert to Symbol (Вставить>Преобразовать в символ).
Осталось только навести порядок на рабочем поле (просто удалить с него изображение колеса) и сохранить файл на диске под каким-нибудь именем, например, колесо.fla.

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

Рисунок 439. Внутренняя область овала выделена и перемещена относительно внешнего контура

Чтобы выделить овал целиком (и контур, и внутреннюю область), можно поступить одним из следующих трех способов:

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

Вставка компонента в рабочую область

Рисунок 507.

Вставка компонента в рабочую область и две вкладки палитры свойств — Properties и Parameters Теперь рассмотрим некоторые параметры компонентов, устанавливаемые на палитре Properties.

Выделение графических объектов с помощью инструмента «Лассо»

Рисунок 435. Выделение графических объектов с помощью инструмента «Лассо»

Инструмент «Субвыделение» (Subselect) имеет специальное назначение. Обычно его используют при изменении уже нарисованных линий. Более подробно мы рассмотрим этот инструмент в следующих разделах.

Заливка фигур радиальным градиентом с блокировкой заливки

Рисунок 464. Заливка фигур радиальным градиентом с блокировкой заливки

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

Рисунок 465. Заливка фигур растровым изображением с блокировкой заливки

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

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

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

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

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

2. Выполните команду File>Import (Файл>Импорт). В результате откроется диалоговое окно Import (Импорт).

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

Здесь изображена композиция похожая как нам кажется на гроздь сирени

Рисунок 538. Здесь изображена композиция, похожая, как нам кажется, на гроздь сирени

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

Рисование в FLASH

Анимация с ускорением (Easing < 0)

Рисунок 569. Анимация с ускорением (Easing < 0)

Анимация с замедлением (fusing > 0)

Рисунок 570. Анимация с замедлением (fusing > 0)

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

Последний инструмент в анимации типа shape tweening — контрольные точки (shape hints), с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись при работе со сложными формами. Пользоваться контрольными точками очень легко. В первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (команда Modify>lransform>Add shape hint или клавиши ++). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр и прикрепляете эту же точку к части, в которую должна перейти помеченная часть в начальном кадре. Эта точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Таким образом, вы можете отличать начальные и конечные контрольные точки (на одном кадре могут присутствовать и те, и другие). Удалить все точки можно с помощью команды ModifyTransform>Remove All Hints. Удалить же единственную точку можно, щелкнув на ней правой кнопкой мыши и в появившемся контекстном меню выбрав команду Remove Hint. Поскольку контрольные точки обозначаются буквами латинского алфавита, их может быть не больше 27.
На следующих двух рисунках вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и кадрами, созданными с использованием таковых.

Анимация во Flash

Анимация во Flash

В предыдущей главе мы рассматривали программу Flash только как графический векторный редактор. Однако главное назначение Flash состоит в создании анимационной графики, т. е. мультфильмов. Анимация в Flash может содержать звуковое сопровождение и интерактивные элементы. Таким образом, речь идет не просто о графике, а о создании мультимедийных продуктов. С помощью Flash можно создавать интересные приложения, в частности, Web-страницы.
Результаты работы Flash (файлы, анимации, Web-страницы) принято называть мультфильмами, клипами, видеофрагментами, роликами и анимациями (общий термин — movie). Обычно клипами называют мультфильмы, входящие в состав других мультфильмов. Процесс создания мультфильма состоит в следующем. Сначала создается исходный или так называемый авторский файл с расширением fla. Этот файл можно редактировать и просматривать в среде программы Flash. Затем он преобразуется в SWF-файл, который уже можно просмотреть в Flash-проигрывателе и Web-браузере. Кроме того, можно экспортировать результаты вашей работы в файлы других широко распространенных форматов: MOV, анимационный GIF, JPEG и ряд других.
Внимание! При описании инструментов Flash, если специально не оговорено, имеется в виду версия 5.0. Особенности Flash MX мы будем оговаривать особо.
В предыдущей главе мы уже отмечали основные отличия Flash 5.0 от Flash MX. Напомним лишь одно из них, являющееся важнейшим. В Flash 5.0 свойства объекта рассредоточены по нескольким палитрам или по нескольким вкладкам одной палитры. Открыть или закрыть эти палитры можно с помощью меню Window>Panels (Окно>Палитры). В Flash MX сокращено количество палитр. В меню Window нет подменю Panels, в котором можно выбрать панель (палитру), чтобы открыть или закрыть ее. Палитры в Flash MX открываются и закрываются непосредственно с помощью меню Window. Обратите внимание на то, что все свойства текущего (т. е. выделенного) элемента на рабочем поле в Flash MX отображаются на одной палитре Properties (Свойства), которая по умолчанию расположена внизу. Содержание этой палитры зависит от текущего объекта (т. е. выделенного в данный момент). Иначе говоря, содержание палитры свойств контекстно зависимо.

Библиотеки символов

Библиотеки символов

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

Библиотека мультфильма (Library)

Обшая библиотека (Common Library)

Постоянная библиотека (Permanent Library)

Разделяемая библиотека (Shared Library)

В Flash MX, в отличие от Flash 5.0, разделяемые библиотеки бывают двух видов:

Run-time — разделяемая библиотека времени выполнения;

Author-time — разделяемая библиотека времени разработки.

В Flash 5.0 единственный тип разделяемой библиотеки есть библиотека Run-time.
С точки зрения пользовательского интерфейса работа с библиотеками различного типа организована одинаково, ее содержимое можно просмотреть в специальном диалоговом окне.
Библиотека мультфильма — библиотека символов, связанная с конкретным мультфильмом. Она создается автоматически, как только вы создадите первый символ. Этот символ сразу же попадет в библиотеку. Пустую библиотеку можно создать, выполнив команду Window>Library (Окно>Библиотека). Библиотека, коль скоро она создана, существует столько времени, сколько существует мультфильм. Можно удалить все ее содержимое, но удалить собственно библиотеку нельзя. В заголовке окна библиотеки выводится название мультфильма (имя файла). Символы билиотеки могут быть использованы в любом другом мультфильме. Для этого достаточно открыть новый файл, не закрывая файл, библиотекой которого вы хотите воспользоваться. При этом окно библиотеки файла-источника должно быть открыто.
Общая библиотека — встроенная библиотека Flash. В отличие от библиотеки мультфильма, ее содержимое нельзя изменить. Общая библиотека состоит из нескольких библиотек, таких как Buttons (Кнопки), Learning Interactions (Интерактивное обучение) и др. Общая библиотека Flash MX включает, кроме прочего, еще и раздел Developer Assets (Ресурсы разработчика), который содержит компоненты пользовательского интерфейса (см. главу 8).
Элементы общей библиотеки можно использовать в своих мультфильмах и в имеющемся виде, и в качестве начальных заготовок для последующей модификации.
Постоянная библиотека — библиотека, создаваемая пользователем и доступная из любого мультфильма. Для создания постоянной библиотеки выполните следующее:

1. Создайте Flash-файл (новый мультфильм, т. е. файл с расширением fla) с библиотекой, содержащей символы, которые вы хотите включить в постоянную библиотеку.

2. Сохраните созданный Flash-файл в папке Libraries, которая находится среди других папок пакета Flash.

После создания новая библиотека появится в меню Window>Common Libraries (Окно>Общие библиотеки).
Разделяемая библиотека позволяет использовать содержащиеся в ней символы в нескольких мультфильмах без копирования этих символов в частные библиотеки мультфильмов. Элементы разделяемой библиотеки называются ресурсами (asset). Разделяемая библиотека используется как внешний файл и не содержится внутри мультфильма.
Применение разделяемых библиотек полезно в следующих случаях:

при совместном использовании символов шрифтов на различных страницах сайта;

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

при использовании различных элементов, которые должны отвечать некоторому единому стилю дизайна.

Чтобы создать библиотеку разделяемой, следует определить ее ресурсы (входящие в нее символы), разрешить экспорт разделяемых символов, указать URL-адрес сайта, на котором будет размещена библиотека, экспортировать Flash-файл в SWF-формат и разместить его на Web-сайте.
После создания разделяемой библиотеки необходимо указать, какие из ее символов могут быть экспортированы в другие мультфильмы. Для этого в окне библиотеки выберите нужный символ и щелкните на нем правой кнопкой мыши. В контекстном меню выберите команду Linkage (Связывание). В результате откроется окно, которое в Flash 5.0 называется Symbol Linkage Properties (Свойства связывания символа), а в Flash MX — просто Linkage Properties (Свойства связывания). В разных версиях Flash эти окна несколько отличаются, но суть одна.
В поле Identifier (Идентификатор) вводится имя символа (без пробелов), с которым он будет экспортирован в фильм-совладелец.
В Flash 5.0 вы можете выбрать экспорт символа или импорт его. В последнем случае требуется указать URL-адрес мультфильма-источника, т. е. SWF-файла с разделемой библиотекой. Это же можно сделать и в Flash MX, но там есть и дополнительные возможности. В частности, чтобы экспортируемый символ мог использоваться сразу же с первого кадра мультфильма-совладельца, установите флажок Export in first frame. Если экспортируемый символ следует сделать доступным в сценарии на языке ActionScript, то установите флажок Export for ActionScript.

Bсплывающие тексты на кнопках

Bсплывающие тексты на кнопках

В следующем примере мы сделаем мультфильм с тремя кнопками. При щелчке кнопкой мыши на любой кнопке плавно появляется некоторый текст. Если щелкнуть на другой кнопке, то этот текст постепенно исчезает и на его месте появляется другой текст.
Особенность состоит в том, что у нас три кнопки, и поведение каждой из них зависит от того, с какой именно кнопкой мы работали ранее. Эта задача решается с использованием переменных для хранения предшествующих состояний.
В мультфильме будут фигурировать кнопки и тексты. Тексты обладают собственным поведением, хотя и зависящим от действий с кнопками. Создадим три слоя. Первый слой назовем action (действие), второй — buttons (кнопки) и третий — texts (тексты). В слой buttons поместим три кнопки с именами bul1, but2 и but3 (выбор имен может быть произвольным). Точнее говоря, создадим три символа типа Button. Это можно сделать вручную или воспользоваться встроенной библиотекой (Window> Common Libraries > Buttons). Затем создадим три символа типа Movie Clip с именами text1, text2 и texts и поместим в них наши тексты, например «Один», «Два» и «Три». К каждому тексту применим анимацию motion tweening так, чтобы он плавно появлялся и так же плавно исчезал (выберите подходящие значения параметра alpha). При этом ключевые кадры расположим так, как показано на рисунке.

Частота кадров

Частота кадров

Общеизвестно, что плавность анимации достигается большим количеством кадров, появляющихся в одну секунду (fps, frames per second —кадров/с). Следовательно, мы стремимся указывать большую скорость (частоту кадров) в свойствах Flash-мультфильма. По умолчанию Flash использует значение 12 fps, а для высококачественной анимации обычно требуется 25-30 fps.
Однако увеличение частоты кадров требует большей производительности компьютера, на котором выполняется анимация. Если ее недостаточно, Flash уменьшает частоту кадров. Поэтому даже если мы установим частоту кадров равной 100 fps, Flash все равно будет исходить из имеющихся технических возможностей.

Четыре последовательных кадра из мультфильма в котором вырастает цветок

Рисунок 566. Четыре последовательных кадра из мультфильма, в котором вырастает цветок

Однако покадровую анимацию сложно модифицировать. Если эта анимация является связанной, то приходится модифицировать практически все кадры. Кроме того, покадровая анимация занимает достаточно большой объем, так как нужно хранить информацию о каждом кадре.
Заметим, что анимационные GIF-файлы, широко применяемые в Web-дизайне, создаются в Flash методом покадровой анимации. Вы можете создать несколько ключевых кадров (если необходимо, то используйте несколько слоев), а затем преобразуйте свое произведение в GIF-файл с параметром Animated с помощью операции публикации. Более подробно об этом рассказано в последнем разделе данной главы.

Действия для кнопки

Действия для кнопки

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

press —кнопка мыши нажата, когда курсор находится в пределах кнопки;

release — кнопка мыши отжата, когда курсор находится в пределах кнопки;

releaseOutside — кнопка мыши отжата, когда курсор находится вне пределов кнопки;

rollover — указатель мыши входит в пределы кнопки;

rollout — указатель мыши выходит за пределы кнопки;

dragOver — указатель мыши входит в пределы кнопки, при этом она была
нажата, и нажата кнопка мыши;

dragOut — указатель выходит за пределы кнопки, при этом она была нажата, и нажата кнопка мыши;

keyPress ("клавиша") — была нажата <клавиша>. Список клавиш можно посмотреть в справке по Flash (объект Key) или воспользоваться панелью параметров для ввода нужной клавиши.

К сожалению, Flash воспринимает только левую кнопку мыши. Правая кнопка используется для вызова контекстного меню (щелкните правой кнопкой на названии какого-нибудь Flash-мультфильма).
Перехватываются события с помощью функции оn(). Синтаксис ее таков:
on (событие)
{
...II код, обрабатывающий событие
}
Очень часто используемый пример — переход по ссылке при нажатии кнопки:
on(release)
{
getURL("http://zonaS.al.ru") ;
}
Чтобы проверить этот сценарий, выделите кнопку, нажмите ++ и введите этот текст сценария.
Аналогичным образом можно перехватить все события, связанные с кнопкой. Как их использовать — дело исключительно вашего воображения.

Диалоговое окно Insert Target Path

Рисунок 604. Диалоговое окно Insert Target Path

Действие If Frame Is Loaded
Действие If Frame Is Loaded (Если кадр загружен) проверяет, загружается ли в память указанный кадр. Оно обычно используется при создании заставки — небольшого клипа, предваряющего воспроизведение основного мультфильма. При этом его комбинируют с действием Go To and Play (Перейти и воспроизвести).
Для действия If Frame Is Loaded можно задать параметры:

Scene (Сцена). Укажите сцену, содержащую нужный кадр;

Туре (Тип). Укажите, каким способом задается нужный кадр: Frame Number (Номер кадра), Frame Label (Метка кадра) или Expression (Выражение ActionScript, вычисляющее номер кадра);

Frame (Кадр). Введите номер кадра, метку или выражение.

Диалоговое окно в котором указываются имя и тип создаваемого символа

Рисунок 555. Диалоговое окно, в котором указываются имя и тип создаваемого символа

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

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

Up — указатель мыши не находится над кнопкой;

Over — указатель мышки находится над кнопкой;

Down — указатель мыши находится над кнопкой и при этом нажата кнопка
мыши;

Hit — кадр для определения активной области кнопки, реагирующей на щелчок; его содержимое невидимо и может быть как меньше, так и больше видимого изображения кнопки. Если вы не опишете этот кадр, для него будет использоваться изображение кнопки из кадра Up.

Заметим, что в предыдущей главе мы рисовали изображение кнопки, но не создавали символ кнопки.
Чтобы создать кнопку, выполните команду Insert>New Symbol или нажмите клавиши +. В раскрывшемся диалоговом окне введите имя символа и выберите его тип (Behavior (поведение)) Button. Flash переключится в режим редактирования символа. При этом на временной шкале отобразятся четыре кадра: Up, Over, Down и Hit.
Первый кадр — Up. Теперь надо создать изображение для кнопки, используя инструменты для рисования, импорт графики или вставку экземпляра другого символа. При этом можно применять символы типа Graphic (Графический) и Movie Clip (Анимация), но не Button (Кнопка). Используйте Movie Clip, если хотите, чтобы кнопка была анимированной. Созданное изображение для кнопки будет вставлено в кадр Up, который автоматически станет ключевым.
Далее, щелкните на временной шкале кадра Over и сделайте его ключевым (Insert>Keyframe или клавиша ). Содержимое предыдущего кадра (Up) будет автоматически скопировано в кадр Over. Повторите это для кадров Down и Hit. Теперь вы можете отредактировать изображение кнопки для каждого из четырех кадров. Например, можно изменить цвет и/или надпись на кнопке, что придаст динамичность кнопке: она будет менять внешний вид в зависимости от положения указателя и состояния кнопки мыши. На рисунках, как пример, показаны изображения кнопки для различных кадров.
Если необходимо воспроизводить звук, зависящий от состояний кнопки, выделите соответствующий кадр на временной шкале и выполните команду Modify>Frame (Модифицировать>Кадр), чтобы раскрылась панель Frame, на которой есть вкладка Sound (Звук). В этой вкладке можно установить необходимые параметры.
Завершив создание символа кнопки, перейдите в режим редактирования мультфильма (команда Edit>Edit Movie) и перетащите символ кнопки из окна библиотеки в рабочую область, чтобы создать экземпляр этого символа в вашем мультфильме (сцене).

Движение автомобиля с вращающимися колесами

Рисунок 626. Движение автомобиля с вращающимися колесами

Чтобы автомобиль остановился у левого края сцены, в последнем кадре мультфильма определите сценарий из одной инструкции: stop().
Итак, мы создали мультфильм с движущимся автомобилем, у которого вращаются колеса. Однако должны предупредить вас о возможной неприятности. Дело в том, что скорость вращения колес и скорость поступательного движения автомобиля могут оказаться не согласованными. При согласованности скоростей за время полного оборота колеса автомобиль должен переместиться на расстояние, равное длине внешней окружности колеса. Напомним, что длина окружности диаметра D равна приблизительно 3,14D. Если вы не хотите заниматься расчетами и измерениями, то придется поэкспериментировать. С учетом необходимости согласования частоты пятен (или спиц, если колесо велосипедное) на колесе с частотой кадров, о чем мы писали выше, получается, что анимация простого колеса является не совсем тривиальной задачей.
Теперь несколько усложним наш мультфильм, используя простые средства. А именно: добавим еще один экземпляр автомобиля. Мы хотим, чтобы второй автомобиль «ехал» слева направо. Для этого сначала создадим еше один слой в главном мультфильме (на сцене) и перетащим Автомобиль из библиотеки. Разместим его где-нибудь в левой части сцены и немного ниже первого автомобиля, который «ездит» в первом слое. Второй автомобиль должен ехать слева направо, а его экземпляр на сцене сейчас ориентирован, как первый (наоборот). Положение можно исправить с помощью инструментов масштабирования и вращения. Чтобы получить доступ к этим инструментам, выделите автомобиль и щелкните правой кнопкой мыши для раскрытия контекстного меню. Поэкспериментируйте, чтобы получить нужный эффект. Стремитесь к тому, чтобы перевернуть изображение. Мы не будем далее об этом рассказывать, поскольку слова в данном случае малоэффективны по сравнению с опытом, который вы можете получить самостоятельно за пару минут. Как только ваш второй автомобиль приобретет нужные размеры и ориентацию, можете создать анимацию для него (Motion Tweening) так же, как это делалось для первого автомобиля. Обратим внимание, что если мы специально занимались переориентацией экземпляра символа Автомобиль, то изменять направление вращения колес нам не потребовалось: все совершилось, как надо, само собой.

Движение объекта с его ориентацией вдоль траектории

Рисунок 577. Движение объекта с его ориентацией вдоль траектории

Чтобы траектория движения была невидимой, достаточно сделать невидимым направляющий слой. Если вы хотите, чтобы объект ориентировался вдоль траектории, установите для первого кадра слоя с объектом свойство Orient to Path. Ускорение или замедление движения по траектории определяется параметром Easing.
Если направляющий слой уже существует, то любой слой можно сделать направляемым. Для этого достаточно либо просто перетащить его имя в списке слоев непосредственно под имя направляющего слоя, либо создать новый слой, расположенный ниже направляющего, и установить тип этого слоя Normal.
Слои-маски
Содержимое слоя можно рассматривать через отверстие, скрыв все остальное. Для этого служит так называемый слой-маска — особый тип слоя, содержащий собственно маску. Маска (отверстие или окно просмотра) может быть создана на основе объектов различных типов: области заливки, текстового поля, экземпляра графического символа и даже мультфильма. Маску можно заставить изменять свою форму или перемещаться. Однако нельзя применять слои-маски внутри кнопок.
Маска представляет собой слой, в котором любая область заливки интерпретируется как отверстие, через которое виден нижележащий слой. При этом цвет заливки, градиент и контур игнорируются. По умолчанию слой-маска закрывает (маскирует) только тот слой, который лежит непосредственно под ним.
Рассмотрим создание простой маски на основе области заливки. Создадим сначала маскируемый слой. Назовем его Фон. Мы импортировали в него растровую картинку из пакета Photoshop 7.O. Далее, создадим слой-маску. Для этого достаточно щелкнуть на кнопке со знаком «+» внизу списка слоев. Назовем его Маска. В этом слое нарисуем какую-нибудь фигуру и зальем ее каким-нибудь цветом, т. е. создадим область заливки. Мы нарисовали овал, а затем трансформировали его с помощью инструмента Subselect (белая стрелка). Теперь укажем, что данный слой является слоем-маской. Для этого достаточно щелкнуть правой кнопкой мыши на его имени и в контекстном меню выбрать команду Mask (Маска). При этом слева от имени слоя-маски и маскируемого слоя появятся характерные значки, и оба слоя будут заблокированы (справа от их имен появятся изображения замков). Маскирование вступит в силу, ивы увидите на рабочей области лишь участок фона, который накрывается фигурой слоя-маски.
Чтобы перейти в режим редактирования маски и увидеть как фон, так и просмотровое окно маски, разблокируйте слой-маску (щелкните на соответствующем изображении замка) В режиме редактирования можно изменить форму, расположение и даже количество просмотровых окон маски.
В общем случае можно маскировать несколько слоев, а не только тот, который находится непосредственно под слоем-маской. Если необходимо сделать какой-либо слой маскируемым, то его прежде всего следует расположить ниже слоя-маски, а затем в свойствах этого слоя установить переключатель Masked (Маскируемый). Наоборот, чтобы вывести слой из-под маски, установите этот переключатель Normal.
Итак, мы рассмотрели простейший способ создания маски. Зачем нужны маски? Маска в статическом виде является инструментом для создания коллажей.
Здесь мы не будем останавливаться на том, в каких случаях и зачем может потребоваться скрывать что-то из уже имеющегося, чтобы оставшееся предстало в интересном или нужном нам виде.

Фигуру в виде пятна можно перетаскивать

Рисунок 612. Фигуру в виде пятна можно перетаскивать по экрану мышью. Прозрачность этой фигуры установлена равной 50, чтобы было виден текст, который они перекрывает.

Генератор случайных чисел

Генератор случайных чисел

Функция random (n) создает случайное число в интервале от 0 до n—1. Например, random (101) возвращает случайное число в диапазоне от 0 до 100.

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

Следующий простой сценарий перемещает экземпляр мультфильма с именем My_clip в пределах квадрата со стороной 300 пикселов:
My_clip._x = random(300);
My_clip._y = random(300);
Броуновское движение объекта My_clip можно задать, если циклически выполнять следующий сценарий:
dx = random(5);
dy = random(5);
My_clip._x = My_clip._x + dx;
My_clip._y = My_clip._y +dy;

Гистограмма построенная на основе

Рисунок 622. Гистограмма, построенная на основе введенных пользователем данных

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

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

Гистограмма

Гистограмма

Для наглядного представления числовых данных часто используют гистограммы — диаграммы в виде ряда столбиков, высота которых пропорциональна соответствующим числам. Здесь мы рассмотрим пример построения небольшой гистограммы из пяти столбиков. Данные будут вводиться в текстовые поля, а перерисовка гистограммы будет происходить при щелчке на кнопке.
Создадим новый мультфильм, в котором разместим четыре слоя с именами: Столбики, Тексты, Кнопка и Фон. В слое Фон нарисуем прямоугольник, занимающий нею рабочую область, и зальем его серым цветом. Затем в слое Тексты создадим пять текстовых полей, задав для них имена Т1, Т2.....Т5 (палитра Text Options, поле Variables). Эти поля следует расположить в один ряд на линии с значением координаты у равным 310 (пикселов).
Выделим на временной шкале слой Столбики и создадим новый символ типа Movie Clip с именем bar (столбик). Для этого надо выполнить команду Insert>Ne\v Symbol.
Нарисуем прямоугольник шириной 40 и высотой 1 пиксел. Внешне такой прямоугольник похож на горизонтальный отрезок прямой. Для точного задания этих параметров следует воспользоваться палитрой Info. Щелкнув на кнопке Scene 1 в верхнем левом углу главного окна Flash, переходим к работе с главным мультфильмом. Теперь перетащим мышью 5 экземпляров только что созданного символа из окна библиотеки в рабочую область. Расположим их в один ряд немного выше текстовых полей, как показано на следующем рисунке.

АНИМАЦИЯ ВО FLASH

ГЛАВА 9. АНИМАЦИЯ ВО FLASH

Анимация во Flash

Пробная анимация

Основные понятия анимации

Временная шкала

Кадры

Символы (Symbols)

Библиотеки символов

Создание анимации

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

Интерполяционная анимация

Примеры анимации

Звук в мультфильмах

Композиция мультфильма — сцены и клипы

Сценарии (ActionScript)

Термины

Палитра действий

Основные действия с мультфильмами

Свойства мультфильма

Имена объектов

Пути к объектам

Отладка сценариев ActionScript

Действия для кнопки

Раскрывающееся меню

Перетаскивание элементов мышью

Текстовое поле

Прокрутка текста

Загрузка переменных из текстового файла

Всплывающие тексты на кнопках

Генератор случайных чисел

Гистограмма

Вращающееся колесо

Вызов JScript из ActionScript

Передача данных из JScript в ActionScript

Управление звуком

Загрузка мультфильмов

Сценарии ActionScript во внешних файлах

Оптимизация

Частота кадров

Размеры видимой области и объем анимации

Уровень качества

Потоковое воспроизведение и предварительная загрузка

Синхронизация потокового звука

Размер swf-файлов

Публикация мультфильмов

Публикация в формате SWF

Публикация в формате HTML

Публикация самовоспроизводящихся мультфильмов

Публикация в формате Animated GIF472

Публикация в других форматах

Имена объектов

Имена объектов

Для того чтобы обращаться к мультфильмам, требуется задать имя объекта (instance name) и путь до объекта (target path). Договоримся, что мультфильм (Movie Clip) и объект — для нас одинаковые вещи.
Имя объекта — это имя конкретного экземпляра символа. Например, у нас может быть символ «Автомобиль», а экземпляры этого символа называются «Жигули», «Волга», «Audi», «Ока» и т. д.
Чтобы дать имя объекту, нужно выделить объект и в палитре Instance (открываемой командой Window>Panels>Instance или нажатием клавиш +) ввести имя объекта в поле Name. Имена могут состоять только из букв, цифр и знака подчеркивания, причем имя не должно начинаться с цифры. В поле Behavior этой панели задается тип объекта, в нашем случае — это Movie Clip.

Интерполяционная анимация

Интерполяционная анимация

При таком способе анимации Flash автоматически создает промежуточные кадры, которые встраиваются между ключевыми кадрами, заданными вами. Это означает, что вы в одном кадре рисуете объект, потом в другом кадре производите его изменения. Созданные кадры являются ключевыми. Затем вы просите Flash рассчитать кадры, которые должны занять место между двумя ключевыми кадрами. В результате вы получаете анимацию.
Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение, а также от скорости прокрутки вашего Flash-мультфильма (movie). Скорость прокрутки мультфильма можно установить в Flash 5.0 командой Modify>Movie или клавишами +, а в Flash MX — командой Modify>Document. Параметр Frame Rate задает количество кадров, показываемых в секунду. Для высококачественной анимации скорость должна быть не меньше 25-30 кадров/с. По умолчанию скорость равна 12 кадров/с. При создании мультфильмов она обычно подбирается экспериментально, в зависимости от динамичности вашего произведения, требуемого качества, ограничений на объем файла и т. п.
Плавность и длительность задаются количеством кадров, отведенных на всю анимацию (ее фрагмент). Например, если скорость вашего мультфильма составляет 30 кадров/с, и вам нужно, чтобы совершалось перемещение объекта из одного угла картинки в другой за 2,5 с, то на движение потребуется отвести 75 кадров. В Flash есть два варианта построения промежуточных изображений:

Shape tweening — построение анимации на основе изменения формы;

Motion tweening — построение анимации на основе изменения символов.

Первый вариант используется в случаях, когда нужно обеспечить лишь плавное изменение формы объекта. Второй используется чаше всего из-за своей универсальности.
Анимация на основе изменения формы (Shape tweening)
Допустим, нужно, чтобы квадрат плавно превратился в круг, или изображение кошки плавно превратилось в изображение собаки. В таких случаях используется shape tweening (изменение формы, трансформация). При этом вы задаете два ключевых кадра на некотором расстоянии друг от друга. В рассматриваемом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов). После того как вы создали два ключевых кадра, сделайте активным первый из них (просто перейдите на него щелчком кнопкой мыши) и выберите в палитре Frame (вызываемой командой Windows>Panels>Frame или нажатием клавиш + ) в списке Tweening строку Shape (Форма), как показано на рисунке.

Использование маски для создания эффекта перемещения луча от фонарика

Рисунок 583. Использование маски для создания эффекта перемещения луча от фонарика

Заметим, что управлять движением просмотрового окна маски можно с помощью сценариев, написанных на языке ActionScript. Без сценариев не обойтись при создании, например, раскрывающихся меню.
Другой способ создания анимаций на основе масок состоит в том, что окно маски остается неподвижным, а элементы маскируемого слоя перемещаются. Таким образом можно создать, например, эффект изменения пейзажа за окном движущегося поезда, или бегущие титры. Если, скажем, создать группу из нескольких просмотровых окон (несколько областей заливки, сгруппированных в один объект), то при соответствующем выборе маскируемого изображения и фона можно создать иллюзию движущихся и изменяющихся по форме облаков или морских волн. Наконец, можно перемещать одновременно как объекты маскируемого слоя, так и просмотровые окна.
Рассмотрим пример, в котором маска неподвижна, а картинка в маскируемом слое перемещается. На исходной картинке, которая является фоном всей композиции, изображены дюна и облачное небо. Мы хотим, чтобы облака перемещались. С этой целью мы поместили в маскируемый слой растянутое по ширине исходное изображение, а просмотровое окно маски сделали так, чтобы оно совпадало с участком неба на исходной картинке. Растянутое изображение в маскируемом слое перемещается по горизонтали. При этом в окно маски попадает только небо, а дюна маскируется. Ширина растянутого изображения должна быть такой, чтобы к окончанию движения его левый край совпадал елевым краем фоновой картинки. Конечно, в качестве перемещающегося изображения можно было бы взять только полосу с облаками, но наш способ оказался в данном случае более быстрым: мы просто скопировали исходную картинку в маскируемый слой и применили к ней команду Scale.

Изображение автомобиля с вращающимися колесами конвертируем в символ типа Movie Clip

Рисунок 625. Изображение автомобиля с вращающимися колесами конвертируем в символ типа Movie Clip

Очистим сцену и перетащим на нее экземпляр символа Автомобиль. Поскольку наш автомобиль ориентирован капотом влево, то расположить его нужно где-нибудь в правой части сцены. Далее делаем анимацию. Выделим какой-нибудь кадр, например, 40-й и сделаем его ключевым. Переместим автомобиль в левую часть сцены. Затем вернемся в 1-й кадр и выполним команду Insert>Create Motion Tween. На следующем рисунке показано, что должно получиться. Чтобы передать эффект движения, мы включили режим отбражения тени (Onion Scin).

Экземпляр символа из библиотеки можно модифицировать

Рисунок 590. Экземпляр символа из библиотеки можно модифицировать

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

Кадр мультфильма созданного путем композиции фрагментов растровой графики

Рисунок 592. Кадр мультфильма, созданного путем композиции фрагментов растровой графики

Вращение планет вокруг Солнца
Рассмотрим теперь вращение трех планет — Меркурия, Венеры и Земли — вокруг Солнца. Этот весьма поучительный и красивый пример описан Александром Рыбниковым на сайте http://zona5.al.ru. Подробно, шаг за шагом, опишем процесс создания мультфильма.
Шаг 1. Создадим новый файл. Выполним команду Modify>Movie и в открывшемся диалоговом окне укажем физические размеры области в пикселах. Не будем себя ограничивать, Flash-мультфильмы хорошо смотрятся в полноэкранном варианте, поэтому зададим размеры кадра 800x600. По умолчанию скорость смены кадров мультфильма устанавливается 12 кадров/с. В данном случае разумно это число увеличить до 16, так как иначе изображение заметно «дергается».
Шаг 2. Нарисуем сначала Космос. Для этого просто очертим рабочую область прямоугольником и зальем его черным цветом.
ШагЗ. Теперь в центре нашей Вселенной необходимо поместить Солнце. Постарайтесь изобразить его более или менее правдоподобно, то есть нарисовать не просто некий красный круг, а еще и нанести на него слегка несимметричный градиент, что должно придать вашему произведению некоторую объемность, а затем окружить Солнце светящимся ореолом, что прибавит правдоподобности. Всего вышеперечисленного можно достичь как средствами самого редактора Flash, так и импортировать уже готовую картинку из любого растрового графического редактора. Но второй способ в нашем случае крайне нецелесообразен, поскольку Солнце является достаточно крупным объектом , и если оно будет представлено в виде растрового изображения, то значительно увеличится объем выходного файла. Рассмотрим, как нарисовать Солнце средствами Flash.
Нарисуем круг, для заливки в раскрывающемся списке с образцами цветов выберем любой градиент. С помощью команды Window>Panels>Fill (Окно>Па-литры>3аливка) откроем диалоговое окно, которое позволит задать значения цветов градиента. Пусть Солнце будет залито ярко-желтым цветом, плавно переходящим в ярко-красный. Ореол сделаем аналогичным образом, подложив круг большего размера, окрашенный градиентом из красного цвета в черный. Важно, чтобы Солнце находилось точно в центре, т. е. координаты центра должны быть (400,300).
Шаг 4. Настало время рисовать три планеты. Важно заметить, что они достаточно маленькие, поэтому в данном случае можно импортировать растровое изображение в формате прозрачного GIF (точнее, рисунок с прозрачным фоном). Такое изображение должно занимать не более 500 байт дискового пространства. Импортирование осуществляется следующим образом.
Сначала надо создать новый слой командой Insert>Layer (Вставить>Слой). Для каждой из планет потребуется отдельный слой, поэтому слои имеет смысл назвать именами планет. Далее в этом слое необходимо создать новый символ (команда Insert>Symbol (Вставить>Символ)). В меню File выберем команду Import и импортируем нужное GIF-изображение.
Шаг 5. После этого созданный символ требуется поместить в соответствующий слой. Для этого откроем библиотеку символов (команда Window>Library (Окно> Библиотека)) и перетащим оттуда символ с изображением планеты в рабочую область (сцену).
Шаг 6. Отметим, что планеты должны впоследствии вращаться вокруг Солнца.— центра сцены. Поэтому надо вновь вернуться к редактированию символа (2 раза щелкнуть на планете) и указать в диалоговом окне Info (команда Window>Info) удаленность его от центра. Выбрана удаленность по горизонтальной оси (все эти значения отрицательные, т. е. изначально планеты располагаются слева от Солнца):

для Земли: — 250 пикселов;

для Венеры:— 180 пикселов;

для Меркурия: — 120 пикселов.

Стационарная картинка готова! Она должна быть как можно более похожа на следующий рисунок:

Анимация состоит из последовательности кадров.

Кадры

Анимация состоит из последовательности кадров. Кадр может быть как создан вручную, так и сгенерирован Flash. Это относится к кадрам одного слоя. Так как сцены Flash (что это такое, описано ниже в этой главе) состоят обычно из нескольких слоев, то итоговые «многослойные» кадры могут содержать как сгенерированные, так и «самодельные» кадры.
В компьютерной анимации существует понятие ключевые кадры (keyframes) — это кадры, которые Flash не изменяет в процессе создания анимации, но использует в качестве опорных при генерации промежуточных кадров.
Существует два типа промежуточных кадров:

Кадры, построенные на основе изменения формы (shape tweening).

Кадры, построенные на основе изменения символов (motion tweening). Наиболее часто они используются при создании анимации движения по рабочему полю.

Следует упомянуть и о пустых кадрах, которые ничего не содержат.

Картинки в разных слоях должны быть совмещены так чтобы более светлая накрывала темную

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

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

Композиция мультфильма — сцены и клипы

Композиция мультфильма — сцены и клипы

Мультфильм может иметь сложную структуру (композицию). Так, отдельные элементы одного мультфильма сами могут быть мультфильмами. В рассмотренном выше примере с аквариумом рыбы представляли собой различные экземпляры символа типа Movie Clip, т. е. были мультфильмами. Каждый мультфильм имеет собственную временную шкалу, которая управляет его воспроизведением. Если мультфильм входит составной частью в другой мультфильм, то чтобы подчеркнуть это обстоятельство, его называют клипом. В свою очередь, клип может содержать другие клипы.
Для управления множеством элементов клипа их обычно распределяют по слоям. Многослойную структуру используют при создании практически любого более или менее сложного объекта, будь то просто рисунок или целая анимация.
Кроме декомпозиции мультфильма (клипа) на слои, можно разделить его на временные отрезки, т. е. на сцены. Затем эти сцены можно располагать в произвольном порядке. Основания для разбиения мультфильма на сцены могут быть следующие:

количество кадров мультфильма слишком велико. Например, временная шкала не видна на экране;

в некоторый момент времени изменяется состав графических изображений (смена декораций и персонажей);

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

При создании нового мультфильма (File>New) по умолчанию создается только одна сцена с именем Scene 1. При этом любая разрабатываемая анимация становится частью этой сцены. Чтобы добавить сцену, выполните команду Insert>Scene (Вставить>Сцена). При этом рабочее поле очистится и над временной шкалой слева появится другое название — Scene 2.

Круг плавно переходит в полумесяц

Рисунок 568. Круг плавно переходит в полумесяц. Здесь первый ключевой кадр содержит круг, а последний, 10-й кадр, — полумесяц. На рисунке показаны все кадры мультфильма

Рассмотрим параметры преобразования shape tweening. При выборе этого варианта в палитре Frame появились параметры Easing и Blend и поле ввода метки кадра Label.

Параметр Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от -100 до +100. Это означает, что если вы зададите отрицательную величину в поле Easing, то движение будет происходить с положительным ускорением (скорость будет увеличиваться). И наоборот, если значение Easing положительное, анимация замедляется.

Маска в режиме редактирования Чтобы увидеть действие маски установите блокировку слоямаски (замок)

Рисунок 578. Маска в режиме редактирования. Чтобы увидеть действие маски, установите блокировку слоя-маски (замок)

Масштабирование колеса для его встраивания в изображение автомобиля

Рисунок 624. Масштабирование колеса для его встраивания в изображение автомобиля

Выделим изображение автомобиля вместе с двумя экземплярами колеса и конвертируем в символ типа Movie Clip. Назовем этот новый символ Автомобиль.

Мультфильм после загрузки переменных в текстовые поля

Рисунок 619. Мультфильм после загрузки переменных в текстовые поля

В рассмотренном примере загрузка переменных производилась посредством сценария кнопки. Однако это можно делать и другими способами. Например, можно сценарии загрузки привязывать к кадрам. Следует заметить, что для корректной работы мультфильма желательно включать в мультфильм кадры, в которых проверяется успешность загрузки переменных. Например, если вы хотите загрузить переменную с именем mytext, то следует создать кадр, в котором будет выполняться такой сценарий:
mytext = String (mytext );
if (mytext . length == 0) {
( gotoAndPlay (1)
}
Этот сценарий циклически воспроизводит кадры мультфильма, пока значение указанной переменной (точнее, длина значения) не станет отличным от нуля.

Мультфильм с прокручиваемым текстовым полем в окне браузера

Рисунок 616. Мультфильм с прокручиваемым текстовым полем в окне браузера

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

Мультфильм с текстовым полем ввода и кнопкой для его очистки

Рисунок 614. Мультфильм с текстовым полем ввода и кнопкой для его очистки

Мультфильм с текстовыми полями и кнопкой на стадии разработки

Рисунок 618. Мультфильм с текстовыми полями и кнопкой на стадии разработки

На вкладке Movie Explorer отображается иерархическая структура мультфильма

Рисунок 599. На вкладке Movie Explorer отображается иерархическая структура мультфильма

В правом конце заголовка палитры Actions имеется значок, щелчок на котором вызывает меню. В этом меню, в частности, можно выбрать режим работы с палитрой (нормальный или экспертный).
Кнопка Script Pin (Закрепить сценарий) позволяет оставить содержимое палитры Actions без изменений, даже если вы выберете другой объект.
Среди элементов иерархического списка действий отметим группы Flash UI Components (Компоненты пользовательского интерфейса) и Deprecated (He рекомендуемые).

Объект в виде стрелки который должен двигаться

Рисунок 574. Объект в виде стрелки, который должен двигаться

Далее, щелкнем правой кнопкой мыши на имени слоя Стрелка и в контекстном меню выберем команду Add Motion Guide (Добавить направляющую движения). В результате в списке слоев появится новый слой Guide: Стрелка с характерным значком слева от его имени. Это и есть направляющий слой (guide layer). Слой, находящийся в списке непосредственно под ним, является направляемым (guided). В направляющем слое нарисуем траекторию движения. Для этого можно использовать любой инструмент рисования линий, например, «Карандаш» (Pencil). Главное, чтобы траектория была линией (контуром), а не областью заливки.
Выделим наш объект в виде стрелки и переместим его на начало траектории. При перемещении в центре изображения объекта появится кружок, который должен попасть на линию траектории и как бы зацепиться за нее. Этим мы привязываем объект к траектории.
На временной шкале выберем кадр, соответствующий окончанию движения по траектории (в нашем примере это 30-й кадр). Сделаем его ключевым. Это нужно сделать сначала в направляющем слое, а затем — в направляемом.
Убедимся, что активным является направляемый слой (в нашем примере это слой Стрелка). Перетащим объект на конец траектории, а затем вернемся к первому кадру в этом же слое. Создадим анимацию (команда Insert Motion Tween). В общих чертах организация движения по направляющей траектории завершена.

Окно Create New Symbol в Flash MX

Рисунок 564. Окно Create New Symbol в Flash MX

Выше мы рассмотрели работу с разделяемыми библиотеками вида Run-time. Напомним, что в Flash 5.0 это единственный вид разделяемой библиотеки. В Flash MX, кроме того, есть еще один вид разделяемых библиотек — Author-time. Здесь мы не будем подробно его рассматривать. Отметим лишь, что применение библиотек Author-time позволяет заменять содержимое символов в редактируемом Flash-файле.

Окно Debugger отладчика сценариев

Рисунок 609. Окно Debugger отладчика сценариев

В одной части окна Debugger находится иерархический список объектов, используемых в мультфильме. Выбрав объект, можно просматривать его свойства (вкладка Properties).
На вкладке Variables находятся все переменные. Преимущество вкладки Variables состоит в том, что вы можете модифицировать значения любых переменных «на лету» и тут же получать отражение этого изменения в мультфильме.
Наконец, можно добавить любые переменные в список просмотра (Watch list) и наблюдать за их значениями (вкладка Watch).

Окно Edit Envelope

Рисунок 595. Окно Edit Envelope

Следует иметь в виду, что добавление звука может существенно увеличить объем файла мультфильма. Поэтому следует принять меры для сжатия звуковой информации. Если уменьшить частоту дискретизации, то это может ухудшить качество звука. Можно использовать не двухканальный, а одноканальный звук. Для задания свойств звука в Flash предусмотрены два способа:
Можно назначить звуки различным состояниям символа-кнопки. Звуки со

Для определения свойств всех звуковых файлов мультфильма используйте вкладку Flash диалогового окна Publish Settings (Параметры публикации), открываемого командой File>Publish (Файл>Публикация). Этот способ хорош, если мультфильм содержит один или несколько похожих звуков.

Для задания свойств отдельных звуковых файлов используйте диалоговое окно Sound Properties (Свойства звука). Для этого сначала откройте библиотеку мультфильма (Window>Library) и дважды щелкните на значке звукового файла, свойства которого хотите изменить. В верхней части диалогового окна отображаются сведения о звуковом файле. Новые значения параметров можно выбрать в раскрывающихся списках группы Export Settings (Параметры экспорта). При этом в нижней части диалогового окна отображается новый размер файла в килобайтах и процентах от исходного размера. Вы можете использовать формат сжатия (compression) MP3 как наилучший из имеющихся в Flash.

Можно назначить звуки различным состоянием символа-кнопки. Звуки сохраняются внутри этого символа и поэтому воспроизводятся во всех его экземплярах. Чтобы добавить звук к кнопке, нужно выполнить следующее:

1. На временной диаграмме кнопки добавить слой, в котором вы будете размещать звуки.

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

3. Выделите этот ключевой кадр и установите параметры звука.

Окно Flashпроигрывателя (Flash Player)

Рисунок 641. Окно Flash-проигрывателя (Flash Player)

Окно с параметрами загрузки SWFфайла

Рисунок 634. Окно с параметрами загрузки SWF-файла

Параметры загрузки мультфильма можно протестировать. Для этого выполни-те команду Control>Test Movie, а затем — View>Bandwidth Profiler (Профилировщик полосы пропускания). Далее выполните команду Debug> 14.4 (1.2 Kbs), чтобы моделировать низкую скорость передачи данных по модемному соединению. На следующем рисунке показано окно с параметрами загрузки файла свеча.swf.
Среди параметров в левой части окна можно видеть, в частности, размеры кадра в пикселах (Dim), скорость прокрутки кадров (Fr Rate), размер мультфильма в килобайтах (Size), длительность в секундах и количестве кадров (Duration).

Загрузчик мультфильма
Если мультфильм содержит большие, долго загружаемые компоненты (например, графику большого объема), то следует предусмотреть организацию его загрузки. Прежде чем начать воспроизведение, необходимо произвести загрузку всего мультфильма или хотя бы некоторой его части. Вы должны решить, какая часть мультфильма должна быть загружена прежде, чем можно начать воспроизведение следующей части. Дело в том, что время загрузки по модемному подключению к Интернету может оказаться в 10—100 раз большим, чем при использовании выделенных каналов или кабельного модема. Мы не хотим,-чтобы пользователь томился в ожидании появления на экране хотя бы какой-нибудь реакции на его действия, а также нарушения логики воспроизведения мультфильма. Эта задача решается с помощью сценариев, которые называются загрузчиками (preloader). Сценарий, который проверяет факт завершения загрузки, в простейшем виде должен ориентироваться на факт передачи последнего кадра мультфильма или того кадра, получение которого вы сочтете достаточным для начала воспроизведения. Такой сценарий основан на использовании функции ifFrameLoaded().
Загрузчик выполняет две основные функции. Во-первых, он используется для загрузки так называемых «тяжелых материалов», таких как как графическая и звуковая информация. Во-вторых, он сообщает пользователю о том, что загрузка еше не завершена.
На следующем рисунке изображен начальный экран некоторого мультфильма. В этом мультфильме два слоя: Scripts, в котором расположены сценарии, и Основной, в котором размещены три кадра с «тяжелым материалом», например, графикой и звуком. Начальный экран у нас прост: он содержит только текст «Загружаюсь...». Некоторые дизайнеры вместо надписи вставляют индикатор прогресса, т. е. элемент, наглядно показывающий процесс загрузки в виде процентов или линейки.
Рассмотрим содержимое слоя Scripts, в котором реализуется собственно загрузчик. В первом кадре этого слоя расположен следующий сценарий:

ifFrameLoaded (10)
{ gotoAndStop("RollEm");

Рисунок 562. Окно свойств связывания

Рисунок 562. Окно свойств связывания символа в Flash 5.0

Окно свойств связывания в Flash MX

Рисунок 563. Окно свойств связывания в Flash MX

Чтобы использовать символы из разделяемой библиотеки в мультфильме-совладельце, откройте библиотеку этого мультфильма и в раскрывающемся меню библиотеки выберите команду New Symbol (Новый символ). В результате откроется окно Create New Symbol (Создание нового символа). В Flash 5.0 в этом окне можно задать только имя и тип символа. Поэтому после появления нового символа в билиотеке требуется открыть окно Symbol Linkage Properties, рассмотренное выше. В Flash MX окно Create New Symbol сразу содержит все параметры символа.

Окно Symbol Linkage Properties

Рисунок 631. Окно Symbol Linkage Properties. Ввод имени 'вука (Identifier) и установки типа связи (Linkage)

Теперь при просмотре мультфильма можно услышать звук.
На данном этапе осталось только организовать управление нашим звуком. Для решения этой задачи существует множество способов. Мы реализуем самый распространенный: метод ползунка.

Создадим новый символ-кнопку и назовем её polzunok_volume. Она будет выполнять роль регулятора громкости. Далее, создадим ещё один символ типа Movie Clip с названием Polzunok_MC_volume. Поместим в него из библиотеки символ polzunok_volume и зададим ему такое действие:

on (press) {
startDrag (this, false, 0, 7, 100, 7);}
on (release) {
stopDrag ();

Затем создадим символ типа Movie Ciip и назовем его shkala_volume. В этом символе нарисуем прямоугольник, по которому будет передвигаться ползунок. Для правильной работы зададим для него координаты в палитре Info, как показано на рисунке:

Оптимизация

Оптимизация

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

Основные действия с мультфильмами

Основные действия с мультфильмами

Большая часть работы в Flash приходится на манипулирование символами. На нем основаны практически все базовые приемы, трюки и эффекты. С помощью сценариев на языке ActionScript символы могут выполнять практически любые действия. Надо только помнить, что делать это нужно только либо в ответ на действие пользователя, либо при появлении кадра на временной шкале. Ниже перечислены некоторые основные инструменты. Описание остальных вы найдете, например, в электронной справке Macromedia Flamnshi и приложении 5 этой книги. Перечислим события, используемые при определении действий в мультфильмах, с указанием, когда они происходят:

Load (Загрузка) — при загрузке мультфильма в память;

EnterFrame (Ввод кадра) — при вводе каждого кадра мультфильма;

Unload (Выгрузка) — в первом кадре после выгрузки мультфильма из памяти;

Mouse Down (Нажата кнопка мыши) — при нажатии (щелчке) левой кнопки мыши;

Mouse Up (Отпущена кнопка мыши) — когда отпускается левая кнопка мыши;

Mouse Move (Перемещение мыши) — при перемещении указателя мыши;

Key down (Нажатие клавиши) — при нажатии любой клавиши;

Key Up (Отпускание клавиши) — при отпускании любой клавиши;

Data (Данные) — при получении данных из действий loadVariables и load Movie.

Далее мы опишем основные действия, т. е. действия из списка Basic Actions.
Действие Go To
Действие Go To (Перейти к) предписывает мультфильму перейти к указанному кадру, который можно задать несколькими способами. На палитре действий способ задания кадра перехода выбирается в раскрывающемся списке Туре. Возможны следующие значения:

Frame Number (Номер кадра). Число, указывающее позицию кадра на временной шкале;

Frame Label (Метка кадра). Кадру можно присвоить метку и затем обращаться к нему через нее. Это очень полезно, если вы перемещаете кадры по временной шкале, изменяя тем самым их номера;

Expression (Выражение). Номер кадра можно вычислять с помощью выражения на языке ActionScript;

Next Frame (Следующий кадр);

Previous Frame (Предыдущий кадр).

После того как мультфильм перейдет к указанному вами кадру, могут быть выполнены следующие два действия:

Go to and Play (Перейти и воспроизвести). Используется для перехода к другому фрагменту мультфильма, а также для организации циклического воcпроизведения. Во втором случае к последнему кадру добавляется действие, предписывающее переход к первому кадру;

Go to and Stop (Перейти и остановить воспроизведение). Используется, например, для ожидания реакции пользователя (щелчка на кнопке и т. п.).

Основные понятия анимации

Основные понятия анимации

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

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

Интерполяционная анимация. Этот способ заключается в том, чтобы создать несколько опорных (ключевых) кадров, а затем на их основе «вычислить» промежуточные кадры (tweening animation). Данный способ аналогичен рисованию гладкой линии, проходящей через указанные точки. Например, допустим, что требуется переместить какую-нибудь фигуру из левой части экрана в правую с помощью 25 кадров. В случае первого, покадрового, способа анимации нам придется нарисовать все двадцать пять кадров, и в каждом последующем кадре чуть-чуть сдвигать фигуру вправо. А если нужно сделать так, чтобы фигура, двигаясь вправо, постепенно исчезала или меняла форму? Очевидно, делать вручную каждый кадр в этом случае будет слишком утомительным занятием. Вот для таких ситуаций и предусмотрен второй способ анимации. В простейшем случае вам понадобится задать только два ключевых кадра: начальный и конечный. По умолчанию Flash рассчитывает промежуточные кадры по линейному закону, но можно задать и экспоненциальный закон.

Сначала рассмотрим основные элементы, используемые при работе с Flash: временную шкалу (timeline), кадры (frames), символы (symbols) и слои (layers).

Отладка сценариев ActionScript

Отладка сценариев ActionScript

Рассмотрим инструменты, служащие для отладки сценариев ActionScript, окна Output (Вывод) и Debugger (Отладчик).
Есть функция trace(), которая выводит сообщения в окно Output. Туда же выводятся сообщения об ошибках. Использовать функцию trace() очень просто:
trace ("280-й кадр");
или, например,
trace (xpos + k);
Flash 4 окно Output было единственным средством отладки. В Flash 5 появился специальный инструмент — окно Debugger. Чтобы им пользоваться, нужно проверять мультфильмы не как обычно (команда Test Movie или клавиши + ), а с помощью команды Debug Movie (или клавиш ++). Окно Debugger можно скрыть/показать с помощью команды Window> Debugger.

Палитра Actions в Flash MX

Рисунок 600. Палитра Actions в Flash MX

Палитра действий (Actions) вкладка

Рисунок 598. Палитра действий (Actions), вкладка действий объекта (Object Actions) в Flash 5.0. В меню можно выбрать нормальный или экспертный режим работы. Если выделенное действие имеет параметры, то внизу палитры располагаются поля ввода их значений

На палитре действий указываются либо действия объекта (Object Actions), либо кадра (Frame Actions), выбранного в данный момент. Это отражается в заголовке палитры. Действия объекта это действия кнопки или клипа. Заметим, что действия клипа задаются на его собственной временной шкале, а не на основной временной шкале. Впрочем, если ваш мультфильм состоит из единственного клипа, то их нет надобности различать.
На вкладке Movie Explorer (Проводник мультфильма) палитры действий можно увидеть структуру мультфильма.
В Flash MX палитра действий несколько усовершенствована и, кроме того, сам язык ActionScript получил развитие. Рассмотрим лишь основные особенности палитры Actions.
Вызвать палитру Actions можно различными способами. Самым эффективным, пожалуй, является следующий. Если требуется создать или редактировать сценарий кадра, то щелкните правой кнопкой мыши на нужном кадре на временной шкале и в контекстном меню выберите команду Actions. В случае кнопки или мультфильма выделите объект на рабочем поле и на палитре Properties (Свойства) щелкните кнопке Edit the action script (Редактировать сценарий действий), расположенной у правой границы палитры. Убедитесь, что сценарий связан именно с интересующим вас объектом. Для этого посмотрите на заголовок палитры действий и расположенный ниже раскрывающийся список.

Палитра действий при выборе параметров действия Go To

Рисунок 601. Палитра действий при выборе параметров действия Go To

Действие Play
Действие Play (Воспроизвести) воспроизводит мультфильм. Обычно оно добавляется к специальной кнопке, щелчок на которой начинает воспроизведение. Для корректного выполнения действия Play необходимо, чтобы указанный мультфильм присутствовал на временной шкале и имел имя. Чтобы указать, что именно следует воспроизвести, используется действие Tell Target (Указать цель), которое мы опишем ниже.
Действие Stop
Действие Stop (Остановить) прекращает воспроизведение мультфильма. Обычно его добавляют в последний кадр, чтобы предотвратить циклическое воспроизведение. Иногда действие Stop используют в специальной кнопке, щелкнув на которой, пользователь может прекратить демонстрацию фрагмента или всего мультфильма.
Действие Toggle High Quality
Действие Toggle High Quality (Установить высокое качество) служит для управления качеством графического изображения мультфильма. Обычно его добавляют к кнопке для переключений между высоким и низким качеством отображения.
Действие Stop All Sounds
Действие Stop All Sounds (Остановить все звуки) прекращает воспроизведение всех звуковых файлов.
Действие Get URL
Действие Get URL (Связать с URL) является эквивалентом гиперссылки в языке HTML. Обычно используется при создании Web-страниц. Добавив это действие к кнопке, можно сделать так, чтобы при щелчке на ней открывалось приложение (например, Web-страница) неуказанному URL-адресу.

Рисунок 602. Палитра действий при выборе параметров действия Get URL

На палитре действий можно задать параметры действия Get URL. В поле URL следует ввести URL-адрес. В раскрывающемся списке Window (Окно) можно выбрать следующие значения:

_self (в том же). Открывает Web-страницу в текущем (том же) окне;

_blank (в новом). Открывает Web-страницу в новом окне;

_parent (в родительском). Если мультфильм находится внутри кадра на Web-странице, то новая Web-страница будет расположена в родительском окне, содержащем этот кадр;

_top (поверх). Если мультфильм находится в кадре внутри окна, то все кадры будут удалены и замещены новой Web-страницей.

Вы можете использовать разработанные ранее сценарии на языках ActionScript, JavaScript и других, которые сохраняют данные в переменных. При этом вы можете определить, что делать с значениями этих переменных. Для этого нужно выбрать значение в раскрывающемся списке Variables (Переменные):

Don't send (He отправлять) (значение по умолчанию). Если у вас нет программных заготовок, вычисляющих значения переменных, то оставьте этот параметр;

Get. Отправляет значения переменных как часть строки, содержащей URL.
Можно использовать не более 1024 символов для значений переменных.

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

Действие FS Command
Действие FS Command (Команда FS) предназначено для управления приложениями, такими как Flash Player, Web-браузер и другие. Например, это действие позволяет выполнить сценарий на языке JavaScript, написанный для конкретной Web-страницы. На палитре действий предусмотрены два поля для ввода названия команды JavaScript и ее аргументов.
Выполнение сценариев на языке JavaScript из ActionScript более подробно будет рассмотрено ниже в соответствующем разделе данной главы.
Действие Load Movie

Действие Load Movie (Загрузить мультфильм) предназначено для загрузки SWF-файла с мультфильмом. Оно предпочтительнее, чем действие Get URL, используемое обычно для загрузки Web-страниц.

Рисунок 605. Палитра действий при выборе параметров действия If Frame Is Loaded

Действие On Mouse Event
Действие On Mouse Event (По событию мыши) используется только для кнопок. При добавлении какого либо действия к кнопке Flash автоматически добавляет и действие On Mouse Event. Это действие имеет параметр — событие.


Рисунок 606. Палитра действий при выборе параметров действия On Mouse Event

Палитра действий

Палитра действий

Палитра действий (Actions) служит для отображения и ввода ActionScript-npoграмм. Существует два режима работы с палитрой действий: нормальный (для «чайников») и экспертный. В экспертном режиме вы можете задать команду (инструкцию) прямо в поле ввода с помощью клавиатуры, а в нормальном режиме так делать нельзя, но для уточнения действий используется панель параметров внизу. Выбрать нормальный или экспертный режим можно в меню палитры действий (кнопка со стрелкой в правом верхнем углу).
Добавить инструкцию можно, нажав кнопку «+» или выбрав соответствующую инструкцию в списке элементов языка. Кроме того, для всех действий в Flash имеются комбинации клавиш, с помощью которых это можно сделать гораздо быстрее. Они приведены справа от каждого действия в меню кнопки «+». Удалить инструкцию можно, выбрав ее и нажав клавишу .
Ели у вас нет опыта программирования на языках типа C++, Java или JavaScript, то начните работу в нормальном режиме. Нормальный режим обладает достоинством, делающим его незаменимым для новичков: при его использовании гораздо меньше шансов ошибиться в синтаксисе языка. Новичкам это поможет быстрее понять тонкости ActionScript. Почаще смотрите на выражения в правой части палитры.

Палитра Scene В нижней части палитры

Рисунок 597. Палитра Scene. В нижней части палитры расположены три кнопки для дублирования, добавления и удаления сцены

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

Панель создания и редактирования действий связанных с объектом

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

Подробнее о панели действий и, в частности, о функциональности кнопок будет рассказано ниже в этой главе.
Обратите внимание на то, что действия следует назначать экземпляру символа Button в мультфильме, а не кадрам кнопки на временной шкале. Другими словами, вы размещаете экземпляр кнопки на рабочей области и затем назначаете ему действия.
В общей библиотеке символов Flash, открываемой командой Window>Common Libraries, имеются уже готовые кнопки. Вы можете открыть эту библиотеку и перетащить из нее в рабочую область понравившийся символ столько раз, сколько его экземпляров потребуется в мультфильме. При этом символ сразу же попадете частную библиотеку вашего мультфильма. Вы можете модифицировать как символ, так и его экземпляры. Например, если нужно создать ряд кнопок в одинаковом стиле, но с различными надписями, то следует модифицировать экземпляры, для чего выделите на рабочей области экземпляр кнопки и выполните команду Modify>Instance (Модифицировать>Экземпляр).
В Flash MX модификация кадров, экземпляров символов и самих символов производится с помощью палитры Properties (Свойства).
Если вам нужна простая прямоугольная кнопка без особых художественных изысков, то в Flash MX можно воспользоваться уже готовым компонентом PushButton (Кнопка) из палитры Components (Компоненты). Экземпляры этого компонента можно редактировать. Об этом мы рассказывали в предыдущей главе.

Панель задания свойств экземпляра символа (объекта)

Рисунок 607. Панель задания свойств экземпляра символа (объекта)

Передача данных из JScript в ActionScript

Передача данных из JScript в ActionScript

Рассмотрим передачу данных из HTML-документа во встроенный в него Flash-мультфильм (SWF-файл). Это позволит, например, управлять мультфильмом средствами HTML и JScript. Данная задача противоположна той, которую мы рассмотрели в предыдущем разделе. Там мы из сценариев на ActionScript вызывали фуниии. написанные на JSscript. Здесь же, наоборот, вся основная работа выполняется сценариями на ActionScript, а сценарий на JScript лишь передает в мультфильм какие-то данные. Эти данные могут просто отображаться каким-то образом в мультфильме, а могут и управлять им.
Напомним, что внедрение Flash-мультфильма в HTML-документ производится с помощью тэгов