Информатизация инженерного образования (выпуск 1)

П Р И Л О Ж Е Н И Я

Единица измерения задается в раскрывающемся списке Ruler Units. Здесь Вы можете выбрать одну из единиц измерения: inches — дюймы, inches (decimal) — десятичные дюймы, points — пункты, centimeters — сантиметры, millimeters — миллиметры, pixels — пиксели.

Для подтверждения заданных значений необходимо нажать кнопку OK, чтобы отменить — кнопку Cancel. Возврат к значениям параметров по умолчанию осуществляется кнопкой Make Default.

Есть и другой способ задания параметров фильма с использованием редактора свойств. Для этого щелкните мышью на окне документа (белый прямоугольник) в главном окне Flash (рис. П.12.1.2). В нижней части главного окна интегрированной среды разработки появится панель свойств документа (рис. П.12.1.4), на которой имеется селектор цвета фона Background и поле ввода Frame Rate для задания частоты кадров. При нажатии кнопки Size будет вызвано уже знакомое диалоговое окно Document Properties, в котором задаются параметры изображения.

При создании нового документа воспользуйтесь шаблонами — заготовками приложений. Для создания документа по шаблону выберите пункт New меню File и перейдите на вкладку Templates (Шаблоны) диалогового окна New Document (рис. П.12.1.5). Шаблоны сгруппированы по категориям. Шаблон можно выбрать, предварительно просмотрев его в окне Preview (Предварительный просмотр).

Рассмотрим основные объекты Macromedia Flash. Фильм — приложение Flash представляет собой последовательность кадров. Последовательное воспроизведение кадров дает эффект непрерывного движения — анимации.

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

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

Рис. П.12.1.4. Панель свойств документа

794

П р и л о ж е н и е 12.1

Рис. П.12.1.5. Диалоговое окно New Document

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

Итак, фильм состоит из кадров, включающих в себя изображения. В верхней части окна (рис. П.12.1.2) находится временная шкала (Timeline), с ее помощью и создается фильм. Кадры можно объединять в сцены (Scene). По умолчанию при создании документа фильм включает в себя одну сцену с именем Scene1. Можно добавить сцены к ролику, которые соответственно будут иметь имена Scene1, Scene2 и т.п. Имя текущей сцены отображается слева над временной шкалой. Переход к нужной сцене осуществляется с помощью селектора, отображаемого в виде хлопушки — коробки с приоткрытой крышкой над временной шкалой. При воспроизведении фильма сначала проигрывается сцена 1, затем сцена 2 и т.д.

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

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

795

П Р И Л О Ж Е Н И Я

Если имеется подготовленный в других программах рисунок, то его можно импортировать, выбрав пункт меню File | Import | Import to Stage (Файл | Импорт | Импортировать в сцену). При этом рисунок будет вставлен в текущий кадр, выбранный на временной шкале. Поддерживается импорт изображений наиболее распространенных графических форматов. Кроме того, пользуясь этой командой можно загрузить звуковые файлы.

Все импортированные рисунки хранятся в библиотеке Flash. Для просмотра содержимого библиотеки необходимо отобразить ее панель, выбрав в меню Window | Library (Окно | Библиотека). В библиотеке можно хранить часто используемые изображения, кнопки и другие объекты Flash. В кадры фильма можно вставлять любое число экземпляров объектов библиотеки. Это не приводит к увеличению размера фильма, поскольку в кадре располагается не сам элемент, а ссылка на него. Более подробно о библиотеке и работе с ней будет сказано в разделах, посвященных анимации и программированию на Flash.

Рисунки можно импортировать не только в кадр фильма, но и в библиотеку, выбрав в меню File | Import | Import to Library (Файл | Импорт | Импортировать в библиотеку).

Можно также воспользоваться изображением из библиотеки другого документа Flash, выбрав в меню File | Import | Open External Library (Файл | Импорт | Открыть внешнюю библиотеку). Далее в появившемся диалоговом окне Open as Library (Открыть как библиотеку) необходимо указать имя документа, библиотека которого будет использована.

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

Перейдем к созданию статической графики для нашего примера.

Статическая графика

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

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

Операции со слоями выполняются с помощью контекстного меню — вызываемого позиционированием курсора мыши на названии слоя с последующим нажатием правой кнопки. На появившейся панели приводится доступный список операций для выбранного слоя/папки (рис. П.12.1.6).

796

П р и л о ж е н и е 12.1

Рис. П.12.1.7. Диалоговое окно Layer Properties

Рис. П.12.1.6. Контекстное меню работы со слоями/папками

Пользуясь меню, можно добавить/удалить слои/папки с помощью команд: Insert Layer (Вставить слой), Delete Layer (Удалить слой), Insert Folder (Вставить папку), Delete Folder (Удалить папку). При создании папок им присваиваются имена FolderN соответственно слоям — LayerN с добавлением к имени номера N. Для присвоения уникальных имен слоям и папкам следует воспользоваться командой Properties (Свойства) и в появившемся диалоговом окне Layer/Folder Properties (Свойства слоя/папки) (рис. П.12.1.7) ввести имя в поле Name (Имя).

Можно также создать, удалить, переименовать, переместить папки/слои, воспользовавшись кнопками-пиктограммами, расположенными под списком слоев.

В качестве примера создадим два слоя для размещения стенки и мяча с именами Мяч и Стенка. Слой Мяч создадим переименованием слоя Layer1, а слой Стенка — добавлением нового слоя. Слой Мяч поместим над слоем Стенка (рис. П.12.1.8).

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

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

ния (рис. П.12.1.9).

797

П Р И Л О Ж Е Н И Я

Рис. П.12.1.8. Слои примера

Рис. П.12.1.10. Окно выбора цвета

Рис. П.12.1.9. Панель рисования

Элементы этой панели можно подразделить на четыре группы: Tools (Инструменты) — включает в себя инструменты рисования и средства работы с ними; View (Обзор) — инструменты для работы с окном документа; Colors (Цвета) — содержит кнопки, позволяющие работать со цветом; Options (Опции)— дает дополнительные возможности при работе с текущем выбранным инструментом.

Разместим в первом кадре стенку. Стенку изобразим в виде серого прямоугольника. Для графических элементов, в том числе и для прямоугольника, задаются цвета границы и заливки. Начнем с цвета границы. Нажмем селектор цвета границы — верхнюю кнопку группы Colors (слева от нее изображен карандаш). На экране появится окно, в котором можно выбрать цвет, позиционируя курсор мыши в виде пипетки на требуемый цвет в палитре цветов, в верхнем поле окна палитры отображается его шестнадцатеричный код. Можно задать цвет, указав его шестнадцатеричный код в этом поле (рис. П.12.1.10).

С помощью пипетки можно выбрать цвет любого объекта в документе Flash.

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

798

П р и л о ж е н и е 12.1

Рис. П.12.1.11. Окно настройки цвета

цветовых моделей HSB (от английских Hue, Saturation, Brightness — цвет, насыщенность, яркость) или RGB (от английских Red, Green, Blue — красный синий, зеленый). В первом случае цвет описывается оттенком, контрастом и яркостью, для второй модели значениями красной, зеленой и синей компонент. Значения вводятся в десятичном формате и находятся в диапазоне от 0 до 255. Например, для желтого цвета в модели RGB красная и зеленая компоненты принимают значения 255, а синяя равна 0. Перемещая указатели в правой части окна, можно подобрать значения компонента. Текущий цвет отображается в окне Цвет/Заливка.

Выбранный цвет поместим в набор дополнительных цветов, отображаемых в этом же окне, нажав кнопку Добавить в набор. Для подтверждения выбора нужно нажать кнопку OK. Перейдем к заданию цвета заливки, для чего нажмем кнопку селектора заливки — вторая кнопка сверху группы Colors (слева от нее нарисована банка с краской). Окно выбора параметров заливки (рис. П.12.1.12) отличается от окна выбора цвета границы дополнительной линейкой, на которой отображаются различные типы заливок.

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

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

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

799

П Р И Л О Ж Е Н И Я

Рис. П.12.1.13. Инструмент трансформации

Рис. П.12.1.12. Панель настройки цветов заливки

Рис. П.12.1.14. Изменение размеров прямоугольника

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

Для точного позиционирования используем вертикальную и горизонтальную линейки, отобразить которые можно, выбрав в меню View | Rulers (Вид | Линейки). Окно с сеткой и линейками приведено на рис. П.12.1.15.

Координаты точки в рабочем поле отсчитывается от верхнего левого угла.

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

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

800

П р и л о ж е н и е 12.1

Рис. П.12.1.15 Окно документа с сеткой и линейками

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

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

Обратимся к инструменту заливки, выбрав в меню Window | Design Panels | Color Mixer (Окно | Панели оформления | Смеситель цветов), изображенному на рис. П.12.1.16. Выберем в раскрывающемся списке пункт Radial (Радиальный градиент). Ниже списка находятся управляющие элементы в виде двух указателей, перемещая и задавая цвета которых можно добиться желаемого эффекта. При этом свои действия контролируйте в окне предварительного просмотра, расположенном ниже и слева от линейки настройки градиента заливки.

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

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

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

801

П Р И Л О Ж Е Н И Я

Рис. П.12.1.17. Кнопка трансформатора заливки

Перетащим кружок маркера в центре круга в левую верхнюю часть мяча, получив то, что нам нужно.

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

Анимация в Flash

Начнем с создания покадровой анимации как наиболее простой, а заодно и ближе познакомимся с возможностями временной шкалы Macromedia Flash.

Предварительно продумаем план действий по созданию анимации. Выделим следующие фазы движения мяча:

•до столкновения со стенкой;

•столкновение со стенкой и деформация мяча;

•отскок мяча.

Далее определим продолжительность каждой из фаз. Ранее была выбрана скорость воспроизведения пяти кадров в секунду. Выполним анимацию фазы движения до столкновения, предполагая ее длительность равной 10 кадрам. Нам предстоит изготовить девять кадров — первый кадр уже есть, в нем нарисован мяч. Понятно, что кадры будут отличаться только положением мяча. Сделать промежуточные кадры достаточно просто. Надо выбрать слой Мяч в первом кадре, выделить мяч, скопировать его во второй кадр и переместить в нужное положение. Проделаем многократно эту операцию для других кадров, копируя мяч из предыдущего кадра в последующий со смещением относительно предыдущего. Именно так и поступают при создании мультипликации.

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

802

П р и л о ж е н и е 12.1

что в покадровой анимации каждый кадр является ключевым. Первый ключевой кадр у нас уже есть. Остается создать остальные ключевые кадры. При создании ключевого кадра во Flash в него копируется содержание предыдущего ключевого кадра. Остается только подредактировать изображение созданного кадра. Вставка ключевого кадра осуществляется следующим образом. Необходимо выбрать кадр на временной шкале, вызвать команду Keyframe пункта Timeline меню Insert. Проделаем эту операцию для девяти последовательных кадров. Впрочем, ключевые кадры можно было бы задавать не подряд, а через один — два, но тогда движение мяча не будет плавным. Теперь сделаем так, чтобы с первого по десятый кадр на изображении присутствовала стенка. В принципе это можно сделать созданием одинаковых ключевых кадров. Это не очень хороший путь, поскольку размер ролика при этом возрастает. Здесь Flash предлагает решение на базе растянутого кадра, который получается растягиванием ключевого кадра на несколько делений временной шкалы. Очевидно в этом случае размер ролика не увеличивается, поскольку растянутый кадр содержит только одно изображение — ключевой кадр. Для создания растянутого кадра выберем в слое Стенка десятый кадр и воспользуемся контекстным меню, выбрав в нем команду Insert Frame (Вставить кадр) (рис. П.12.1.19).

То же самое можно сделать, выбрав в меню Insert | Frame (Вставить | Кадр). Окончательно временная шкала для ролика, описывающего движение мяча, будет иметь вид (рис. П.12.1.20).

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

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

Рис. П.12.1.19. Контекстное меню кадра

803