1

100 % самоучитель Macromedia Flash MX

Embed Size (px)

Citation preview

Page 1: 100 % самоучитель Macromedia Flash MX

под редакцией

Б.Г. Жадаева

примеры

m a c r o m e d i a

быстро, легко,само 1 иО%ятельно

Page 2: 100 % самоучитель Macromedia Flash MX

Под редакциейБ. Г. Жадаева

100%САМОУЧИТЕЛЬ

macromediamacromedia I ^ FF L A S H M X

«ТЕХНОЛОДЖИ - 3000»

Москва

Page 3: 100 % самоучитель Macromedia Flash MX

УДК 004.928ББК 32.973.26-018.2

С81

С81 100% самоучитель macromedia Flash MX : [учеб. пособие] /

под. ред. Б. Г. Жадаева. — М. : ТЕХНОЛОДЖИ - 3000, [2005]. — 544 с.

CD-ROM : ил. — (Серия «100%»). — ISBN 5-94472-026-3.

I. Жадаев, Борис Г., ред.

Агентство CIP РГБ

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

Большое внимание уделено новым возможностям Macromedia Flash MX 2004 -многоязыковой поддержке, встроенным эффектам, записи команд, языку ActionScript 2.0и многому другому.

На компакт-диске, прилагаемом к книге, вы найдете все необходимое: библиоте-ки, фильмы, графику и исходные файлы Flash-упражнений.

Наш Интернет-магазин «Три ступеньки®»:

www.3st.ruE-mail: [email protected]

ISBN 5-94472-026-3 © ООО «ТЕХНОЛОДЖИ - 3000», 2005© Обложка ООО «ТЕХНОЛОДЖИ - 3000», 2005© Верстка и оформление ООО «ТЕХНОЛОДЖИ - 3000», 2005

Page 4: 100 % самоучитель Macromedia Flash MX

Краткое содержание

(подробное содержание находится в конце книги)

ВведениеОсновы компьютерной графики и языка HTML; как устроена и как создаетсяFlash-анимация; как разместить анимацию на Web-страницах...

ГЛАВА 1. Macromedia Flash MX 2004:Быстрый старт 19

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

ГЛАВА 2. Рабочая среда Flash 101Подробное и обстоятельное знакомство с интерфейсом и настройкамипрограммы; работа с библиотеками, средствами привязки объектов и другимивозможностями, значительно ускоряющими процесс создания графики ианимации; импортирование видеофайлов; откат содержимого с помощьюпанели History (Предыстория)...

ГЛАВА 3. Создание и редактирование графики 176Рисование простых геометрических фигур; выделение и редактированиеобъектов, создание сложных объектов из простых фигур; редактированиеформы объектов; трансформация объектов командами Distort (Искажение) иEnvelope (Контейнер); атрибуты контуров и заливок; работа с текстом;средства многоязыковой поддержки; экспорт-импорт графики, запись командна панели History (Предыстория)...

ГЛАВА 4. Секреты анимации 312Все о создании анимации: покадровая анимация; анимация по заданнойтраектории; программная анимация; анимация множества объектов; анимацияформы и цвета; работа с панелью Actions (Команды); озвучивание анимации;применение встроенных анимационных эффектов...

ГЛАВА 5. Интерактивные элементы фильма 438Создание интерактивных элементов фильма с помощью панели Behaviors(Поведения); разработка анимационных кнопок и меню для выбора команд;управление движением объектов; детектирование столкновения движущихсяобъектов средствами ActionScript 2.0...

Page 5: 100 % самоучитель Macromedia Flash MX

Введение

В этом вводном разделе вы познакомитесь с основными положениями компьютернойграфики и возможностями, которые открывает в этой области программа MacromediaFlash MX 2004.

Основы компьютерной графики и HTML

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

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

В растровой графике, как и на экране телевизора или монитора, любое изображение со-стоит из совокупности очень мелких элементов (точек), которые называются пикселами(pixel). Слово «пиксел» - это аббревиатура от английских слов picture element (элементизображения).

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

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

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

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

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

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

Page 6: 100 % самоучитель Macromedia Flash MX

Введение

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

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

Из программ растровой графики наиболее популярны AdobePhotoshop, Corel Photo Paint, Jasc Paint Shop Pro.

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

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

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

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

и его копия, увеличеннаяв 5 раз (справа)

Рис. 2. Векторное изображение (вверху справа) и его копия,увеличенная в несколько раз (внизу)

Page 7: 100 % самоучитель Macromedia Flash MX

6 100% самоучитель Flash MX

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

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

Наиболее популярными программами векторной графики являются CorelDRAW, AdobeIllustrator, Macromedia FreeHand.

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

Основные характеристики растровых изображений

Как указано выше, каждое точечное изображение состоит из фиксированного количествапикселов. Поэтому высота и ширина такого изображения могут быть заданы в пикселах,то есть числом пикселов соответственно вдоль вертикальной и горизонтальной границизображения. Общее число пикселов определяет объем файла, то есть объем данных,содержащихся в изображении. От количества пикселов в изображении и характеристикконкретного монитора зависит, каков будет размер или формат этого изображения наэкране. В недалеком прошлом стандартный 14-дюймовый монитор VGA был способенпоказать не более 640 пикселов по горизонтали и 480 по вертикали. Современные мони-торы, как правило, допускают возможность настройки экранной матрицы от 640x480 -при этом пикселы будут достаточно большими - до 1792x1344 - в этом случае пикселыбудут очень малы.

Любое точечное изображение характеризуется двумя основными параметрами: графиче-ским разрешением и глубиной цвета.

Разрешение изображения или графическое разрешение определяет плотность пикселов визображении и измеряется в пикселах на дюйм (pixels per inch - ppi). Чем выше разрешение,тем больше пикселов содержится в изображении и тем меньше размер этих пикселов.Например, изображение размером 1x1 дюйм с разрешением 72 ppi будет содержать 5 184пикселов - 72 пиксела в ширину х 72 пиксела в высоту = 5184. То же самое изобра-жение, но с разрешением 300 ppi, будет содержать уже 90 000 значительно более мелкихпикселов. Благодаря использованию большего числа пикселов, высокое разрешение по-зволяет получать в изображении более мелкие детали и более тонкие цветовые переходы.

Объем файла, содержащего оцифрованное изображение, пропорционален его размерам играфическому разрешению и задается в байтах, килобайтах (1 Кбайт- 103 байтов) илимегабайтах (1 Мбайт- 10б байтов). Более плотное расположение пикселов, то есть болеевысокое разрешение, позволяет воспроизводить более мелкие детали изображений. В тоже время, это ведет к увеличению объема файла. Например, объем файла для изобра-жения размером 1x1 дюйм с разрешением 200 ppi будет в четыре раза больше, чем дляизображения того же размера с разрешением 100 ppi.

Page 8: 100 % самоучитель Macromedia Flash MX

Введение '_ 7_

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

Другим важным параметром точечного изображения является битовая глубина цвета илибитовое разрешение - величина, которая определяет количество битов информации наодин пиксел. Битовое разрешение характеризует объем цветовой информации, исполь-зуемой для описания каждого пиксела изображения. Чем больше глубина цвета, тем ширедиапазон доступных цветов и тем точнее их представление в оцифрованном изображе-нии. Например, пиксел с битовой глубиной, равной единице, имеет лишь два возможныхсостояния - два цвета: черный или белый. Пиксел с битовой глубиной в 8 единиц имеет28, или 256 возможных цветовых значений. Пиксел же с битовой глубиной в 24 единицыимеет 224, или 16,7 миллионов возможных значений. Считается, что изображения, содер-жащие 16,7 миллионов цветов, достаточно точно передают краски окружающего насмира. Как правило, битовое разрешение задается в диапазоне от 1 до 48 бит/пиксел.

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

Основные цветовые модели

Большинство цветов видимого спектра могут быть получены путем смешивания в раз-личных пропорциях трех основных компонентов окрашенного света. Этими компонен-тами, которые называются первичными цветами, являются красный, зеленый и синийцвета, образующие цветовую модель RGB - Red (Красный), Green (Зеленый), Blue(Синий). Например, если на каждый пиксел изображения отводится 24 бита, то цветоваямодель RGB позволяет закодировать 16,7 миллионов оттенков. Монитор вашего компь-ютера воспроизводит все цвета спектра именно на основе сложения трех перечисленныхцветов. При смешивании первичных цветов образуются вторичные цвета: голубой, пур-пурный, желтый и т.д. Чем выше интенсивность цвета, зна-чения которой определяются целыми числами от 0 (нуля)до 255, тем ближе этот цвет к чистому тону, а чем меньше,тем ближе он к черному цвету. Если сложить все три ос-новных цвета с максимальной интенсивностью, равной 255,получится чистый белый цвет. И, наоборот, если просум-мировать три цвета нулевой интенсивности, получится чис-тый черный цвет.

В отличие от цветовой модели RGB, цветовая модель HSBописывает цвет тремя составляющими - цветовым оттен-ком Н (Hue), насыщенностью S (Saturation) и яркостьюВ (Brightness). Puc- 3- Цветовой круг

Чтобы лучше понять закономерности цветовых моделей, можно представить себе, чтовсе, видимые человеческим глазом цвета спектра, располагаются на цветовом круге(Рис. 3). Каждый цвет на этом круге характеризуется тремя базовыми параметрами:цветовым тоном (Hue), насыщенностью (Saturation) и яркостью (Brightness).

Page 9: 100 % самоучитель Macromedia Flash MX

8 100% самоучитель Flash MX

Для описания цветового тона обычно используется название цвета: красный, оранжевый,желтый, зеленый и т.д. Каждый цветовой тон занимает определенное положение на цвето-вом круге и характеризуется величиной угла от 0° до 360°.

Насыщенность — это степень чистоты цвета, которая определяется соотношением серогоцвета и данного цветового тона. Насыщенность выражается в процентах от 0% для серо-го цвета до 100% для полностью насыщенного цвета. На цветовом круге насыщенностьувеличивается от центра к краю.

Яркость характеризует относительную освещенность или затемненность цвета и измеря-ется в процентах в диапазоне от 0% для черного цвета до 100% для белого цвета.

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

При создании изображений для Web, т.е. для просмотра на экране монитора, использу-ется цветовая модель RGB. Но в то же время программа Macromedia Flash позволяет за-давать параметры цвета также в модели HSB.

Еще одна цветовая модель - CMYK - определяет цвет четырьмя основными составляю-щими: голубой (Cyan), пурпурной (Magenta), желтой (Yellow) и черной (ЫасК). Эта мо-дель используется преимущественно для создания изображений, предназначенных дляполиграфического исполнения. Ее цветовой охват" значительно меньше, чем цветовойохват модели RGB.

Форматы Web-графики

Любая компьютерная информация может храниться только в определенном формате.Каждый вид информации имеет собственные форматы. Для текста используются одниформаты, для электронных таблиц - другие, для графики - третьи. Без формата инфор-мацию нельзя ни сохранить, ни передать. Формат графической информации обычноопределяется программой, в которой она создана. Для Web-графики стандартными счи-таются форматы JPEG, GIF и PNG. Все эти форматы - растровые.

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

Формат JPEG (Joint Photographic Experts Group - Объединенная группа экспертов фото-графии) - самый популярный формат для хранения фотографических изображений. JPEGявляется стандартом в Интернете и предназначен для сохранения растровых или точечныхизображений со сжатием, уменьшающим размер файла от десятых долей процента до

Page 10: 100 % самоучитель Macromedia Flash MX

Введение 9_

100 раз за счет отбрасывания избыточной информации, не влияющей на отображениедокумента. Но практически диапазон сжатия уже: от 5 до 15 раз. Хотя алгоритм сжатияизображения этого формата и ухудшает качество, он может быть легко настроен на ми-нимальные, практически незаметные для человеческого глаза, потери. Распаковка JPEG-файла происходит автоматически, во время его открытия. Между качеством изображе-ния и степенью уплотнения существует обратная зависимость: чем более высокую степеньсжатия для результирующего изображения вы зададите, тем хуже будет его качество.

Формат GIF (Graphics Interchange Format - Формат для обмена графической информацией)был разработан специалистами компьютерной сети CompuServe в 1987 году. Главнымдостоинством этого формата является малый размер файлов, и поэтому он до сих порсохраняет свое значение основного графического формата World Wide Web. Из распро-страненных графических форматов GIF однозначно уступает по степени сжатия толькоформату JPEG.

Конечно, GIF - не единственный формат, позволяющий сжимать графические данные;кое-какие способности к сжатию есть у форматов BMP, PCX, TIFF, XBM и многих других.Однако GIF - один из немногих форматов, использующих алгоритм сжатия, почти неуступающий по эффективности программам-архиваторам. Иными словами, GIF-файл ненужно архивировать, так как это редко дает ощутимый выигрыш в объеме.

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

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

Помимо прочих своих достоинств, формат GIF89a позволяет хранить в одном файлесразу несколько изображений-кадров движущегося мультипликационного изображения.И притом указывать, сколько времени задерживать на экране каждое из них, прежде чемсменить следующим. Браузеру остается лишь подчиниться этим инструкциям, чтобыпрямо в HTML-документе возникло движущееся и циклически повторяющееся изо-бражение. К сожалению, до сих пор отсутствует официальный стандарт, описывающийметод отображения анимационных GIF-файлов [1]. Поэтому во многих программах про-смотра пользователи увидят только первое изображение из многих, хранящихся в такомфайле. Однако большинство Web-браузеров работают с анимированными GIF-файламивполне успешно [1].

Формат PNG (Portable Network Graphics - Переносимая сетевая графика) поддерживает-ся поздними версиями браузеров, например, Netscape Navigator 4 (и позднейшими) иосновными программами просмотра, но только в настоящее время начинает приобретатьпопулярность [1]. Этот формат, основанный на вариации алгоритма сжатия без потерькачества, в отличие от GIF сжимает растровые изображения и по горизонтали, и по вер-тикали, что обеспечивает более высокую степень сжатия. Кроме того, он поддерживаетцветные графические изображения с глубиной цвета до 48 бит/пиксел включительно.

Page 11: 100 % самоучитель Macromedia Flash MX

10 100% самоучитель Flash MX

Формат PNG позволяет хранить полную информацию о степени прозрачности в каждойточке изображения в так называемом альфа-канале. Каждый пиксел PNG-файла, вне за-висимости от его цвета и местоположения, может иметь любую градацию прозрачности -от нулевой (полная непрозрачность) до абсолютной невидимости. В тех случаях, когдавам необходимо применить сжатие без потерь к 24-битовым изображениям, формат PNGпредпочтительнее формата JPEG [1].

Наконец, упомянем формат BMP - встроенный формат операционной системы Windows.Этот формат поддерживает изображения с глубиной цвета от 1 до 32 бит/пиксел, хотяизображения BMP с глубиной цвета 16 и 32 бит/пиксел встречаются редко. Формат BMPудобно применять для хранения изображений с крупными блоками сплошного цвета; востальных случаях сжатие изображений неэффективно. К несомненным достоинствамданного формата можно отнести то, что для него практически отсутствует проблемасовместимости, поскольку старые версии этого формата практически исчезли [1].

Читателям, желающим подробнее ознакомиться с современными форматами файловизображений Web, рекомендуем обратиться к монографии Миано [1], на которую мыссылались в этом разделе.

Основные сведения о сети Web

Как известно, основной объем информации, доступной в сети Интернет, размещается во«Всемирной паутине» - World Wide Web (WWW) - информационной системе, подобнойгигантской библиотеке. В этой библиотеке информация представлена в виде связанныхмежду собой документов, которые называются Web-страницами. Каждая Web-страницаможет содержать текст, рисунки, видео, звукозаписи, объемные миры и др. Такие страницымогут размещаться на компьютерах в любой части света. При подключении к WWW выполучаете равный доступ к сведениям, разбросанным по всему миру. Собрание страниц,объединенных некоторой общей темой и помещенных на одном компьютере, называетсяWeb-сайтом. Сайты Web подобны книгам, а Web-страницы - страницам этих книг. Компью-теры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сай-тов, называются серверами. На одном сервере может размещаться множество Web-сайтов.

Просмотреть любую Web-страницу можно с помощью специальных программ - брау-зеров, наиболее популярные из которых - Internet Explorer, Netscape Navigator и Mozilla.Как правило, на Web-страницах кроме основного текста всегда присутствуют выде-ленные другими цветами и подчеркнутые слова или фразы и активные изображения,изменяющиеся при установке на них указателя мыши; например, кнопка может статьрельефной или изменить свой цвет. Это - гипертекстовые ссылки, предназначенныедля связи с другими страницами, раскрывающими содержание ссылок. Если щелкнутьмышью на такой ссылке, произойдет переход на другую Web-страницу, имеющую от-ношение к рассматриваемой или родственной теме, даже если страница физическихранится на сервере в другой части планеты.

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

Page 12: 100 % самоучитель Macromedia Flash MX

Введение 11

Чтобы опубликовать в Интернете документ, содержащий некоторую информацию, дос-таточно поместить файл с этим документом на сервер, постоянно подключенный кИнтернету. Сервер должен «уметь» общаться с другими серверами с помощью специ-ального протокола HTTP (HyperText Transfer Protocol - Протокол передачи гипертекста).Множество таких серверов и образует «Всемирную паутину» - World Wide Web.

Краткие сведения о языке HTML

Сразу предупредим читателя, что в этой книге мы не преследуем цели научить вас языкуHTML - эта тема слишком обширна и сама по себе заслуживает книги (и не одной). Есливы хотите ознакомиться с этим языком, обратитесь к специализированным учебникам,например, [2].

Когда вы загружаете в свой браузер любой документ из Web, то его текст в окне вашегобраузера отображается в хорошо отформатированном, удобном для просмотра виде. Этозначит, что Web-страницы представляют собой не простой текст, а содержат также неко-торую вспомогательную информацию для управления представлением документа в окнебраузера. Поскольку при создании документа не известно, на компьютере какого типапользователь будет его просматривать, то Web-страницы не могут готовиться и хранитьсяв формате, разработанном для конкретной компьютерной платформы, например, в форматеMicrosoft Word ХР для операционной системы Windows XP. Для того чтобы пользователь,работающий на компьютере любого типа, видел документ, отформатированный надле-жащим образом, используется специально разработанный для этого язык HTML.

Язык HTML (HyperText Markup Language - Язык разметки гипертекста) представляет собойдовольно простой набор команд, описывающих структуру документа. Этот язык разметкипозволяет выделить в документе отдельные логические части - заголовки, абзацы, таблицы,списки-перечисления, рисунки и т.д., но не задает конкретные атрибуты форматирова-ния. Конкретный вид форматирования определяет сам браузер при чтении документа, иименно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.

Документ HTML - это текстовый документ специального формата. Имена всех файловэтого формата имеют расширение .html или .htm. В документе HTML обычный текст со-четается с элементами разметки, заключенными в угловые скобки < и >, например,<html>, <head>, < t i t l e > , < / t i t l e > . Такие элементы разметки называются тэгами.Тэги бывают одиночными, открывающими и закрывающими и состоят из следующихдруг за другом в определенном порядке элементов:

• левой угловой скобки <;

• необязательного символа слэш /, который означает, что тэг является конечным тэгом,закрывающим некоторую структуру, например, </t i t le>. В этом смысле можно чи-тать символ / как конец некоторого элемента разметки, например, строки или абзаца;

• имени тэга, например, html;

• необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться однимили несколькими атрибутами, например, align»"center 1 1;

• правой угловой скобки >.

Page 13: 100 % самоучитель Macromedia Flash MX

12 100% самоучитель Flash MX

Таким образом, открывающий тэг <html>, стоящий в начале документа HTML и озна-чающий его начало, состоит из имени html и двух угловых скобок < и >, а тэг </html>,находящийся в конце Web-документа, кроме указанных элементов содержит такжесимвол слэш /, означающий закрывающий тэг и указывающий на конец документа. Тэг<div al ign="center">, означающий разделение документа на части, содержит, кромеимени div, атрибут a l ign со значением "center", означающий выравнивание по центру.

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

Язык HTML не различает большие и малые буквы, так что тэги <HEAD>, <head> и <Head>эквивалентны. Далее мы будем использовать написание тэгов в нижнем регистре.

Большинство тэгов спарены: за открывающим тэгом следует соответствующий емузакрывающий тэг, а между ними содержится текст или другие тэги, например:

; </title>

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

Большинство тэгов могут иметь один или несколько атрибутов - параметров, дающихдополнительную информацию о том, как браузер должен обрабатывать текущий тэг.Однако атрибутов может и не быть вовсе. Атрибут тэга состоит из имени, например,a l ign, знака равенства = и значения, которое задается строкой символов, например,"center": a l ign»"center". Значения атрибутов обычно заключаются в кавычки.Однако если эти значения используют только символы латинского алфавита, цифры идефисы, то кавычки можно опустить, например: align=center.

Каждый HTML-документ имеет определенную структуру, которая выглядит следующимобразом:

<html>

<head>

</head>

<body>

</body>

</html>

В структуру HTML-документа входят следующие обязательные элементы:

i/ тэги <html> и </html>, которые отмечают начало и конец документа;

%/ заголовок документа, ограниченный тэгами <head> и </head>;

• тело документа, ограниченное тэгами <body>... </body>.

Page 14: 100 % самоучитель Macromedia Flash MX

Введение 13_

В заголовке, ограниченном тэгами <head> и </head>, с помощью тэгов < t i -t l e > . . . < / t i t l e > определяется название документа, которое должно описывать егосодержимое и обычно содержит не более 5—6 слов. Это название отображается в строкезаголовка рабочего окна браузера, а роботы, составляющие индексы для поисковыхсистем, идентифицируют документ, используя его название.

Кроме элемента < t i t l e > . . . </t i t le>, заголовок может содержать элементы<xneta>. . .</meta>, например, <meta name="GENERATOR" content= "Dmitry Koxna-rovn>, для указания информации о документе. Открывающий тэг <meta> включаетпары имя=значение, описывающие свойства документа, например, авторство, списокключевых слов и т.д. Эти данные используются также поисковыми серверами при ин-дексации документов.

Файл HTML может содержать комментарии, поясняющие HTML-код. Комментарии осо-бенно полезны в тех случаях, когда, как предполагает создатель документа, код будутпросматривать другие люди. Комментарии начинаются с четырехсимвольной последо-вательности < ! — и завершаются трехсимвольной последовательностью—>, например:<!-Главная страница —>. Комментарии игнорируются браузером и не влияют напредставление документа на экране.

Еще раз укажем, что для изучения языка HTML читателю следу-ет обратиться к специальным учебникам, например, [2]. Далее вэтой книге мы будем исходить из предположения, что читательвладеет хотя бы элементарными познаниями в этом языке.

Гипертекстовые ссылки и адреса URL

Мы уже упоминали, что аббревиатура HTML означает «Язык разметки гипертекста».А что такое гипертекст?

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

Для задания перехода по гиперссылке в языке HTML используются тэги <ах/а> с атри-бутом href, значением которого является адрес перехода. В качестве адреса можетиспользоваться имя файла другого документа или URL-адрес.

Каждый компьютер, подключенный к Интернету, имеет свой уникальный IP-адрес, ко-торый может быть представлен или в числовом виде, например 204.146.46.133, или оп-ределенным сочетанием символов, например, triumph.ru, называемым доменным именем.

Page 15: 100 % самоучитель Macromedia Flash MX

14 100% самоучитель Flash MX

Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов,то и каждая страница Web также имеет уникальный адрес, называемый URL (UniformResource Locator - Унифицированный указатель ресурсов). Как видно из названия, адресURL может указывать не только на страницы Web, но также и на другие ресурсы Интер-нета, например, FTP (File Transfer Protocol - Протокол передачи файлов) - хранилищафайлов. В самом общем виде URL включает в Себя префикс, указывающий протокол,который применяется для доступа к ресурсу - http, ftp и др., имя Web-сервера и домен-ное имя компьютера в сочетании с именем конкретного файла в структуре каталоговэтого компьютера. Например, URL-адрес http://www.chat.ru/user/faq.html состоит изуказателя на протокол http, который применяется для доступа к Web, имени Web-сервера www (могут использоваться и другие имена), доменного имени компьютераchat.ru и имени файла-документа faq.html, который находится в каталоге user.

Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Одна-ко вы можете заметить, что во многих URL-адресах отсутствует имя файла, например,http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретнаястраница. Дело в том, что администраторы Web-серверов могут указать на своих узлахнекоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явноне задано. Обычно эти файлы имеют имена index.html или index.htm.

Основы Flash-технологии

Анимация на Web-страницах

Для пользователей Интернета уже давно стали привычными появляющиеся почти накаждой Web-странице «живые» мультипликационные картинки. Именно такими, анима-ционными, в большинстве случаев являются рекламные баннеры. Это и понятно: анима-ция привлекает внимание гораздо сильнее, чем статические картинки, и, кроме того, нанебольшой площади можно поместить значительно больше информации за счет чере-дующихся кадров.

Следует, однако, предостеречь читателей от вставки избы-точных или неуместных рекламных баннеров. Нередко они не вы-зывают никаких чувств, кроме раздражения, и многие посетите-ли просто отключают их показ в своих браузерах. Множествополезных советов об оснащении сайта мультимедийными сред-ствами можно найти в книге [3].

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

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

Page 16: 100 % самоучитель Macromedia Flash MX

Введение 1£

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

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

Вопрос о размере файла становится жизненно важным для успе-ха вашей Web-страницы еще и потому, что, как показывают ис-следования, средний посетитель ждет открытия ресурса сайтане более 1 минуты [3]. Например, если посетителю, пожелав-шему запустить вашу игру, придется минут 15 сидеть в ожи-дании ее открытия, то он, вероятно, просто прервет загрузку иуйдет с сайта. Помните об этом, создавая свои анимации.

Как указано в разделе «Форматы Web-графики», в настоящее время существует несколькотехнологий создания анимации для Web: анимационный формат GIF, Flash, Java и JavaScript.Из этих технологий самой простой, является, пожалуй, создание анимационного файла GIF,который может показать практически любой современный браузер. Как мы упоминаливыше, формат GIF позволяет размещать в одном файле несколько кадров с изображе-ниями и последовательно выводить их на экран. В отличие от обычного фильма, гдедлительность анимации определяется скоростью воспроизведения, для каждого кадраGIF-анимации может быть задана длительность его показа на экране, а для всей анима-ции может быть указано количество повторений. Кроме того, в отличие от обычногофильма, изображения, содержащиеся в кадрах GIF-анимации, не обязательно должныбыть одного размера. Вы можете установить индивидуальный размер для изображения вкаждом кадре или слое анимации, и расположить его по своему усмотрению, независимоот других слоев. Анимационные GIF-файлы могут быть легко подготовлены в програм-мах Adobe ImageReady или Ulead GIF Animator. Анимации подобного рода можно встре-тить повсеместно - достаточно открыть почти любой сайт, и в самом его начале практи-чески всегда можно найти баннер с какой-либо рекламой.

В отличие от GIF-анимации, которая позволяет размещать в файле только изображения,Flash-технология предоставляет возможность объединить в одном файле анимацию,звук, текст, графику и видео. Кроме того, в фильм Flash можно добавить интерактивныеэлементы - кнопки, раскрывающиеся меню, ссылки - с помощью которых посетительсайта может в известной степени управлять Web-страницей, превращаясь из наблюдателяв активного участника шоу. Интерактивными элементами сайта могут также служитьигры, например, карты, рулетка, тир, крестики-нолики, «морской бой»; онлайновые обу-чающие программы, викторины, тесты, опросы и т.п. Примеры такой анимации вы уви-дите на сайтах http://pengart.narod.ru, http://animate.boom.ru, www.flasher.ru. Создаетсяподобная анимация с помощью программы Macromedia Flash.

Page 17: 100 % самоучитель Macromedia Flash MX

16 . 100% самоучитель Flash MX

Еще один способ создания анимации - посредством программирования на языках Java иJavaScript. Язык Java позволяет разрабатывать программы, встроенные в документы HTMLи называемые апплетами, которые выполняются браузерами на компьютерах пользова-телей. И, конечно же, возможности Java и JavaScript значительно шире, чем подготовкаанимационных картинок. Они позволяет создавать полномасштабные Интернет-приложения. Примеры Java-апплетов можно увидеть на сайтах http://reality.sgi.com/,www.bulletproof.com/, www.fgames.ru/.

Возможности Flash-технологии

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

Технология Flash полностью удовлетворяет требования Web-дизайнеров к инструмента-рию для подготовки графики, предоставляя программу создания векторной графики ианимации - Macromedia Flash. Анимационные ролики, создаваемые этой программой,называются фильмами. Причем анимационные возможности программы не ограниченытолько мультипликацией - можно анимировать все, включая также элементы навигациии меню. Flash не ограничивается созданием анимации только для Web. Вы можете такжесоздавать и, используя автономный проигрыватель FlashPlayer, распространять фильмына компакт-дисках или по электронной почте. Можно экспортировать фильмы в другиеформаты, такие, как QuickTime (MOV) или Windows AVI. Но осно'вное назначение про-граммы Macromedia Flash - разработка интерактивных Web-сайтов.

Приложение Flash начиналось с маленькой программы, предназначенной для созданиявекторной графики и анимации, которая называлась Future Splash Animator. В 1997 годукомпания Macromedia приобрела Future Splash Animator, изменила название на Flashи представила программу как инструмент подготовки графики для World Wide Web.Macromedia Flash выгодно выделяется среди программ подготовки векторной графикидля Web тем, что включает в себя все необходимые инструменты: для создания графики,для анимации подготовленных изображений, для разработки интерактивных элементов,для создания кода HTML, необходимого, чтобы поместить фильм Flash на Web-страницеи просматривать его с помощью браузера.

Но что, пожалуй, можно назвать основным преимуществом Flash-технологии, и превра-щает эту программу из заурядного графического редактора в мощный инструмент соз-дания анимаций - это язык ActionScript, благодаря которому и работают все интерактив-ные элементы фильмов. В современной версии Flash MX 2004 язык сценариев Action-Script превратился в развитую среду программирования, позволяя разработчику полно-стью контролировать Flash-фильм, заставляя «работать» кнопки, клипы, меню, ссылки,полосы прокрутки, выполнять вычисления, выводить на экран любую мыслимую ин-формацию. Возможности разработчика, работающего с Macromedia Flash, ограничива-ются лишь его фантазией и мощностью используемого компьютера.

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

Page 18: 100 % самоучитель Macromedia Flash MX

Введение Х7_

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

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

Особенности версии Flash MX 2004

В отличие от предыдущих версий Flash, версия Flash MX 2004 вышла в двух разновидно-стях: Flash MX 2004 и Flash MX 2004 Professional. Первая - Flash MX 2004 предназначенадля средних пользователей, желающих создавать несложные игры и анимации, в то вре-мя как профессиональная версия позволяет создавать полномасштабные профессио-нальные Интернет-приложения. В ней предусмотрены дополнительные средства импор-та данных, предусмотрен особый режим написания скриптов ActionScript, а с помощьюособой панели написания скриптов на языке JSFL (JavaScript Flash) вы можете создаватьсобственные авторские инструменты. Все эти средства малодоступны для начинающихпользователей, и весьма вероятно, что они вам никогда не понадобятся.

В этой книге будет описана работа с базовой версией Flash MX 2004.

Как создаются Flash-фильмы

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

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

Существуют две разновидности анимации: покадровая (Frame-by-frame Animation) ирасчетная (Tweened Animation). В покадровой анимации изображение в каждом кадресоздается «вручную» и кадры размещаются подряд, один за другим. В расчетной анима-ции создаются только начальный и конечный кадры, которые называются ключевыми, авсе промежуточные кадры программа рассчитывает автоматически. Такая анимация мо-жет быть двух видов - анимация движения (Motion Tweening) и анимация формы (ShapeTweening). В анимациях первого вида изменяются свойства, связанные с движениемобъекта - положение, размер, поворот, а второго - форма объекта. Комбинирование раз-личных типов анимации позволяет создавать очень интересные визуальные эффекты.

Page 19: 100 % самоучитель Macromedia Flash MX

Jj| 100% самоучитель Flash MX

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

Подготовленный фильм озвучивается путем импортирования звуковых файлов в форматеWAV или МРЗ. Для звукового сопровождения задаются эффекты и метод синхронизациис событиями фильма. Может быть указано также число повторений. Возможно микши-рование звуков нескольких источников.

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

Созданный программой фильм, сохраненный в файле формата FLA, должен быть подго-товлен к размещению в Интернете. Такая подготовка называется публикацией. В процессепубликации создается файл фильма в формате SWF - Shockwave Flash (произносится«свиф»), в котором данные хранятся в наиболее компактном виде. При этом из файлаудаляется вся информация, которая не требуется для воспроизведения фильма. Это по-зволяет свести до минимума размер файла и максимально сократить время его загрузкив браузер пользователя. Обычно файлы этого формата имеют объем порядка несколькодесятков килобайт.

Файл фильма в формате SWF можно открыть для просмотра в программе MacromediaFlash или же в специальном автономном проигрывателе, входящем в комплект програм-мы и устанавливаемым вместе с ней. Для воспроизведения фильма в браузере можносоздать на Web-странице ссылку на файл SWF, хранящийся на сервере, и тогда, в зави-симости от настроек, фильм откроется в этом же или новом окне. Можно также вставитьв HTML-код страницы объект, необходимый для запуска фильма, и тогда фильм Flashоткроется вместе с самой страницей. Последний метод часто используется для вставкибаннеров в формате SWF. О том, как это сделать, вы узнаете в этой книге.

Flash-ресурсы Интернета

В последнее время, в связи с ростом популярности Flash-технологии, в Интернетепоявилось множество ресурсов, посвященных Flash. Количество таких ресурсов растет скаждым днем. Вот адреса наиболее интересных из них:

• http://www.macromedia.com/support/flash/,

• http://www.legus.ru,

• http://www.flasher.ru, «

• http://pengart.narod.ru,

• http://animate.boom.ru,

• http://www.flashpro.ru.

Page 20: 100 % самоучитель Macromedia Flash MX

Г Л А В А - 1.

M a c r o m e d i a Flash M X 2 0 0 4 :

Быстрый старт

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

Рабочее окно программы Macromedia Flash

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

Приступим к работе.

> Нажмите кнопку Start (Пуск) на панели задач и в появившемся главном менюWindows выберите команду Programs • Macromedia • Macromedia Flash MX 2004(Программы • Macromedia • Macromedia Flash MX 2004). Приложение будет запущено.

Если это первый запуск программы, то на экране может появиться диалог MacromediaProduct Activation (Активация продукта Macromedia) с предложением либо ввестисерийный номер продукта или ограничиться испытательной версией (Рис. 1.1).

ili.i Pioduct Activation

macromediaFLASHMX

3004Need a Serial Number?

Buy one online using your' webbrowser,

Type your serial number Intothis screen to activate yoursoftware.

Enter your serial number

| FLD7Q

Where's mv serial number?

Go Back I Co.'itiraje

Puc. 1.1. Диалог Macromedia Product Activation (Активация продукта Macromedia)

Page 21: 100 % самоучитель Macromedia Flash MX

20 100% самоучитель Flash MX

> Введите серийный номер и щелкните мышью на кнопке Continue (Продолжить).По завершению регистрационных процедур отобразится рабочее окно программыMacromedia Flash MX 2004 (Рис. 1.2).

Значоксистемногоменю

J

. Заголовок окнаКнопкасворачиванияокна _ _ _ _ _ _

КнопкаКнопка закрытияразворачивания окнаокна

Maciomedia Cld^h MX ШЫ

Начальная страница

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

Рис. 1.2. Рабочее окно программы Macromedia Flash MX 2004

Как и у всех программ, созданных для работы в среде Windows, в первой, верхней, строкерабочего окна указано название программы - Macromedia Flash MX 2004. В центре ра-бочей области находится начальная страница с крупной надписью Macromedia Flash MX2004 на красном фоне, предлагающая вам на выбор: открыть последний документ,создать новый документ или создать документ с помощью шаблона.

Кроме того, внизу начальной страницы (на рисунке не видно) находятся три ссылки:

• Take a quick tour of Flash (Обзор Flash) - открывает в окне браузера краткий обзорFlash на Web-сайте Macromedia;

• Take a Flash lesson (Урок Flash) - открывает окно справки с уроками Flash;

• Update the Flash Help system (Обновить справку Flash) - открывает страницуWeb-сайта Macromedia, на которой вы можете обновить содержимое справки.

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

Page 22: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 21

окна, а у правого края верхней строки - кнопки: [Г] - для сворачива-ния, \&\ - для восстановления и \х\ - для закрытия окна программы.

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

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

Панель инструментов разделена на четыре секции:

• Tools (Инструменты) - содержит инструменты рисования, за-крашивания и выделения;

• View (Просмотр) - предлагает инструменты для изменения мас-штаба отображения и перемещения изображения;

• Colors (Цвета) - содержит элементы управления для выборацвета обводки и заливки;

Tools

/

йо

в

Vie

АD

«$

Colors

Optн*S

т

ons

Рис. 1.3. Панель

инструментовFlash MX 2004

• Options (Параметры) - отображает модификаторы выбранногоинструмента, которые позволяют изменить режим его функцио-

. нирования.ч

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

Инструменты секции Tools (Инструменты):

| k\- Selection Tool (V) (Выделение) - выделение объектов и их частей, перемещениеобъектов, редактирование линий и форм;

- Subselection Tool (А) (Прямое выделение) - корректировка прямолинейных икриволинейных сегментов;

\/\- Line Tool (N) (Линия) - рисование отрезков прямых;

| Р ] - Lasso Tool (L) (Лассо) - выделение объектов произвольной формы;

| ф J - Pen Tool (P) (Перо) - создание контуров, состоящих из прямолинейных и криволи-нейных сегментов;

[А] - Text Tool (T) (Текст) - создание текста;

[О] - Oval Tool (О) (Овал) - рисование овалов и кругов;

Page 23: 100 % самоучитель Macromedia Flash MX

22 100% самоучитель Flash MX

[ • j - Rectangle Tool (R) (Прямоугольник) - рисование прямоугольников и квадратов;

| ^ j - Pencil Tool (Y) (Карандаш) - рисование линий произвольной формы;

(jfj - Brush Tool (В) (Кисть) - создание форм, представляющих собой области заливки.Действует подобно кисти в программах растровой графики;

[Ш] - Free Transform Tool (Q) (Произвольная трансформация) - масштабирование,вращение и искажение объекта;

\Ш\ - Fill Transform Tool (F) (Преобразование заливки) - растяжение, перемещение иповорот градиентных заливок;

- Ink Bottle Tool (S) (Чернильница) - изменение параметров линий;

\(Ь\ - Paint Bucket Tool (К) (Заливка) - заливка области, ограниченной кривой илиформой; изменение цвета созданных заливок;

\if\ - Eyedropper Tool (I) (Пипетка) - определение цвета и стиля форм и линий; j

[с.?] - Eraser Tool (E) (Ластик) - удаление форм и линий, созданных другимиинструментами.

Кроме того, за инструментом Rectangle Tool (R) (Прямоугольник) скрыт вложенныйинструмент Polystar Tool (Многоугольник), с помощью которого можно рисовать мно-гоугольники и звезды с разным числом вершин. Чтобы увидеть этот инструмент, наве-дите указатель мыши на инструмент Rectangle Tool (R) (Прямоугольник), нажмите ле-вую кнопку мыши и подержите ее нажатой несколько секунд. Раскроется меню инстру-мента, в котором будут представлены инструменты Rectangle Tool (R) (Прямоугольник)и Polystar Tool (Многоугольник) (Qj. Чтобы выбрать любой из этих инструментов,щелкните на нем мышью.

Инструменты секции View (Просмотр):

l^llj - Hand Tool (H) (Рука) - перемещение изображения в окне;

[QJ - Zoom Tool (M, Z) (Масштаб) - изменение масштаба отображения.

Элементы управления секции Colors (Цвета):

| # \~~Z\\ — Stroke Color (Цвет контура) - открывает палитру, из которой выбирается цветдля обводки контура объекта, создаваемого инструментами рисования и закрашивания.Этот цвет отображается на кнопке Д ;

[<& О j - Fill Color (Цвет заливки) - позволяет выбрать из палитры цвет для заливкиобъектов. Выбранный цвет отображается на кнопке Ц ;

Щ - Black and White (Черный и белый) - позволяет быстро установить черный цвет дляобводки и белый цвет для заливки;

Щ - No Color (He задан) - удаляет выбранный ранее цвет обводки или заливки;

0§] - Swap Colors (Поменять цвета) - меняет местами цвета обводки и заливки.

Page 24: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 23

В секции Options (Параметры), как указывалось выше, отображаются модификаторывыбранного инструмента, которые позволяют изменить режим его работы. Набор моди-фикаторов индивидуален для каждого инструмента.

По умолчанию, у правого края рабочего окна программы располагаются четыре пла-вающих окна: Color Mixer (Смеситель цвета), Components (Компоненты), ComponentInspector (Инспектор компонентов) и Behaviors (Поведения). Окна панелей можно сво-бодно перемещать по рабочему окну: наведите указатель мыши на левый верхний уголпанели, и когда указатель мыши превратится в четырехстороннюю стрелку ф , нажмителевую кнопку мыши. Затем, не отпуская кнопку, перетащите панель в новое место иотпустите кнопку мыши.

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

Внизу рабочего окна программы находятся вкладки трех панелей (Рис. 1.2):

• Actions - Frame (Команды - Кадр) - предназначена для ввода скриптов, задающихдействия, выполняемые в текущем выделенном объекте, в данном случае - в кадре;

• Help (Справка) - отображает окно справки программы Flash MX 2004;

• Properties (Свойства) - показывает свойства текущего выделенного объекта илиактивного инструмента и пока что пусто, поскольку вы еще не создали документ.

Работу с панелями Actions - Frame (Команды - Кадр) и Properties (Свойства) мы рас-смотрим в дальнейшем, а пока что раскройте окно Help (Справка) щелчком мыши назначке треугольника Q в левом верхнем углу. Затем передвиньте окно на середину рабо-чей области и расширьте его, перетащив за любой угол (Рис. 1.4).

ШпВЗЯШШШШШЯШШШШШHelp | How Do I... |

Щ Getting Started with Flash

[ 3 Using Flash

£FJ ActionScript Reference Guide

1 j ActionScript Dictionary

fg]l Using Components

О О | t p ^ i S lupdateQ

ид шкшшшCommon TasksQ Create a document!_5 Use Timeline effectsQ Use symbols and library assetsQ Learn about the workspaceQ] Work with imported artwork

ХЬ Use drawing tools • . •

[S Create symbols

L ] Create text

[ \ Add components

Q Use behaviors .

Q Create colors with the Color Mixer.

Q Import * video . .

Q Test document performance

Q Publish a Flash document

Flash MX Professional 2004 Tasks :

В

Рис. 1.4. Окно Help (Справка) в развернутом виде

Page 25: 100 % самоучитель Macromedia Flash MX

24 100% самоучитель Flash MX

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

Ш

gj About FlashШ About the Flash Player

£ J What's new in Flash

[ Ц Guide to instructional m«... i

Щ Using the Start page

Q Installing Flash

[ 3 Getting to Know the Works...

[ j l Building Your First Appiici'rai

I I Index

£ 3 Using Flash

[HJ ActionScript Reference Guide

Ш AcMonScript DicUonary

\ j Using Components

Getting started overviewWelcome to Macromedia Flash MX 2004 andMacromedia Flash MX Professional 2004.Flash provides everything you need to createand deliver rich web content and powerfulapplications. Whether you're designingmotion graphics or building data-drivenapplications, Flash has the tools necessary toproduce great results and deliver the bestuser experience across multiple platformsand devices.This guide is designed to introduce you toFlash. The tutorial in this guide leads youthrough the process of creating a simpleFlash application.

Рис. 1.5. Окно справки с обзором'работы в программе Flash

Теперь раскройте вкладку How do I... (Каким образом...) щелчком мыши на ярлыкевкладки. Как видно из содержимого вкладки, здесь можно быстро ознакомиться с тех-никой выполнения простейших задач, например, созданием документа, эталонов и слоев,работой различных инструментов и т.д.

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

Update Щ

Рис. 1.6. Кнопки панели справки

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

• History Back (Назад) ф и History Forward (Вперед)по содержимому окон справки;

• Table of Contents (Оглавление) i p

- служат для перемещения

• открывает оглавление справки;

• Search (Поиск) JS) - открывает строку поиска темы справки по ключевому слову;

• Print (Печать) {§ | - позволяет напечатать содержимое темы справки;

»/ Download Help Content (Загрузить содержимое справки) @ - позволяет загрузитьобновленное содержимое справки с Web-узла компании Macromedia.

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

Page 26: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 25

> Закройте окна панелей Color Mixer (Смеситель цвета), Components (Компоненты),Component Inspector (Инспектор компонентов) и Behaviors (Поведения), последова-тельно нажимая кнопку [xj в правом верхнем углу каждого из них или выбирая ко-манду Close Panel (Закрыть панель) в меню панели. Рабочая область автоматическирасширится до правого края окна программы.

Теперь создадим новый документ Flash.

> На начальной странице Macromedia Flash MX 2004 щелкните мышью на словах FlashDocument (Документ Flash). Начальная страница скроется, а в рабочей областипоявится новый документ (Рис. 1.7).

Macromedia Flash MX 2004 - [Untitled-Г]File Edit View Inseit Modify Text Commands Control Window Help

_ I ? s • Untitled-Г

/ 9

6 A

О D,

Sync: [Ever,!: [*J|RepeatNo sound selected.

Рис. 1.7. Рабочее окно Flash с новым документом

Как видите, окно фильма расположено на отдельной вкладке и состоит из двух частей.Сверху расположена шкала времени (Timeline), которая служит для монтажа фильма, апод ней находится сцена (Stage) - та область, в которой рисуются и размещаются объек-ты в процессе монтажа фильма. Кроме того, слева в окне программы можно видеть ужезнакомую вам панель инструментов, а внизу- панели Actions- Frame (Команды -Кадр), Help (Справка), Actions (Команды) и Properties (Свойства).

На ярлычке окна фильма можно видеть имя, присваиваемое документу по умолчанию -Untitled 1* (Неозаглавленный 1*). Звездочка (*) справа от имени документа напоминает отом, что данный документ не сохранен. Ниже вы можете заметить надпись Scene 1(Сцена 1), указывающая, что сейчас вы работаете над сценой 1 фильма. В середине ра-бочего окна, на сцене, на сером фоне располагается пустой первый кадр фильма, пред-ставляющий собой белый прямоугольник, размеры которого соответствуют размерамкадра (т.е. отображаются в масштабе 100%).

Page 27: 100 % самоучитель Macromedia Flash MX

26 100% самоучитель Flash MX

В зависимости от настроек при запуске программы могут ото-бражаться либо начальное окно, либо новый документ, либо послед-ний открытый документ, либо пустое окно. По умолчанию призапуске программы открывается начальная страница. Однако, прижелании, вы можете изменить эту настройку. Выберите в менюкоманду Edit Ф Preferences (Правка Ф Предпочтения) и в открыв-шемся диалоге Preferences (Предпочтения) откройте щелчкоммыши на .ярлыке вкладку General (Общие). Затем в области OnLaunch (При запуске) диалога установите нужный переключатель.

При необходимости в процессе работы вы можете сами создавать новые файлы с помо-

щью команды меню File • New (Файл • Новый) или комбинации клавиш jctri | + |NJ .

Теперь настроим рабочую область так, чтобы максимально разгрузить экран.

> Сверните, если нужно, окна панелей Actions- Frame (Команды- Кадр), Help(Справка), Actions (Команды) и Properties (Свойства) щелчками мыши на значкахтреугольника Q слева от имени панели.

>• Наведите указатель мыши на нижний край шкалы времени (Timeline) и, когда онпримет форму двунаправленной стрелки =р> нажмите кнопку мыши и перетащитекрай панели вверх так, чтобы видимым остался только первый слой фильма (слойпомечен надписью Layer 1 (Слой 1)).

> Дважды щелкните мышью на инструменте Hand Tool (H) (Рука). Кадр (белый прямо-угольник) изменит размеры так, что целиком вместится на свободное место в рабо-чей области.

В результате рабочая область должна выглядеть примерно так, как на приведенном нижерисунке (Рис. 1.8).

• F lash MX 2 0 0 4 • III m u l e d - П

File Edit View Imert Modify Text Command! Control Window Help

/ 9

6 A

О q.• •И 3

•Ж•Ж

16.*.S 10 15 20 25 30 X 40 45 SO 55 toj

Рис. 1.8. Настроенная рабочая область

Page 28: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 27

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

> Выберите в меню команду Window • Save Panel Layout (Окно • Сохранить раскладкупанелей). На экране появится диалог Save Panel Layout (Сохранение раскладки па-нелей) (Рис. 1.9). ,

Save Panel Layout

Рис. 1.9. Диалог Save Panel Layout (Сохранение раскладки панелей)

> В поле ввода Name (Имя) введите имя раскладки, например, Моя раскладка, и щелк-ните мышью на кнопке ОК. Теперь вы всегда можете восстановить эту раскладку,выбрав в меню команду Window • Panel Sets • Новая раскладка (Окно • Раскладкипанелей • Новая раскладка).

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

Задание свойств ролика

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

Рис. 1.10. Движение спутника вокруг планеты

Новый фильм всегда создается с параметрами по умолчанию. Изменить эти параметрыможно в диалоге Document Properties (Свойства документа).

Page 29: 100 % самоучитель Macromedia Flash MX

28 100% самоучитель Flash MX

> Выберите команду меню Modify • Document (Модификация • Документ). На экранепоявится диалог Document Properties (Свойства документа) (Рис. 1.11).

Document Piopeities

Dimensions: | 550 рх

Match: | Printer

Background color:

Frame rate: 112 J j fps

Ruler units: pixels

Рис. 1.11. Диалог Document Properties (Свойства документа)

В поле ввода Frame Rate (Частота кадров) указывается количество кадров фильма, кото-рые проигрываются в течение одной секунды. Для большинства компьютеров, с учетомскорости загрузки фильма с Web-сайта, оптимальным является принятое по умолчаниюзначение 12 fps (12 кадров в секунду). Если фильм простой и его предполагается про-сматривать на мощном компьютере, то значение этого параметра может быть увеличенодо 25 кадров в секунду. Для сложной графики необходимо уменьшить частоту кадров до8 кадров в секунду.

В полях ввода Dimensions (Размеры) указывается ширина (width) и высота (height) кадрафильма в пикселах. По умолчанию этот размер устанавливается равным 550x400 пиксе-лов. Именно таким, если его не изменить, будет размер окна с фильмом в браузере. Ука-зать размеры кадра можно также с помощью кнопок Match (Подбор). Чтобы определитьразмер кадра по размерам изображения, содержащегося в нем, с полями равной ширины,следует щелкнуть мышью на кнопке Contents (Содержимое). Если требуется сделатьразмер кадра минимальным, удалив поля, то предварительно нужно выровнять все объ-екты по верхнему левому углу кадра. Для установки такого размера кадра, чтобы прираспечатке он полностью помещался на листе бумаги с учетом полей, следует щелкнутьна кнопке Printer (Принтер). Наконец, чтобы вернуть стандартный размер кадра, т.е.размер 550x400 пикселов, назначаемый по умолчанию, щелкните мышью на кнопкеDefault (По умолчанию).

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

С помощью открывающегося списка Ruler Units (Единицы измерения линеек) выби-раются единицы измерения для линеек, которые можно отобразить по краям сцены. Поумолчанию линейки скрыты. Показать их (или, напротив, скрыть, если линейки ужевключены) можно командой меню View • Rulers (Вид • Линейки) или с помощью

комбинации клавиш 11 c t r l 1+1! A l t l+llShift

Page 30: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 29^

По ходу работы мы будем часто пользоваться различными ком-бинациями клавиш. Чтобы просмотреть, какие комбинации кла-виш определены в программе, выберите команду меню Edit *Keyboard Shortcuts (Правка + Горячие клавиши). Откроетсядиалог Keyboard Shortcuts (Горячие клавиши), в котором можноне только узнать, какие' комбинации клавиш определены в на-стоящий момент, но также задать собственные комбинации.

Кнопка Make Default (Применять по умолчанию) позволяет сохранить установленныепараметры и назначить их параметрами по умолчанию так, чтобы все новые документысоздавались с этими установками.

> Закройте диалог Document Properties (Свойства документа) щелчком мыши накнопке ОК.

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

Эталоны и экземпляры

В Macromedia Flash фильм монтируется из готовых элементов, которые называются эта-лонами (Symbols). В русскоязычной литературе по Flash их называют также символами.Однако нам представляется, что термин «эталон» лучше передает смысл данного понятия.

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

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

Например, можно сколько угодно изменять форму экземпляра эталона инструментомFree Transform Tool (Q) (Произвольная трансформация) на сцене, но сам эталон в биб-лиотеке при этом не изменится. Но если вы перейдете в режим редактирования эталонаи попытаетесь изменить, например, форму или цвет экземпляра, то все изменения будутнемедленно и автоматически («с ходу») применяться как ко всем экземплярам на сцене,так и к самому эталону в библиотеке. Помните об этом, когда будете работать надсвоими фильмами.

Page 31: 100 % самоучитель Macromedia Flash MX

30 100% самоучитель Flash MX

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

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

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

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

Эталоны могут быть трех типов:

• Movie Clip (Клип) - может включать графику, звук, анимацию и управляться про-граммно с помощью скрипта;

• Button (Кнопка) - может содержать изображение и звук; в отличие от эталонов другихтипов имеет только четыре кадра, отображающие изменение состояния кнопки приразличных событиях мыши;

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

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

Создание эталона

Разработку анимации движения спутника по орбите вокруг планеты начнем с созданияэталона «спутника».

>• Выберите команду меню Insert • New Symbol (Вставить • Новый эталон) или на-

жмите комбинацию клавиш ll ctri|+lr*H. На экране появится диалог Create New Symbol

(Создание эталона) (Рис. 1.12), в котором обычно достаточно только задать тип эта-

лона и присвоить ему имя.

Page 32: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 31

I Create New Symbol £ 3

Name: | Symboi 1Behavior: © Movie clip

О Button

О Graphic

Cancel

Advanced |

Puc. 1.12. Диалог Create New Symbol (Создание эталона)

В некоторых случаях вам придется задавать дополнительные свойства эталона, откры-ваемые щелчком мыши на кнопке Advanced (Дополнительно), (Рис. 1.13). Установкуэтих параметров мы рассмотрим в главе 2, в разделе, посвященном определению свойствэталона, а пока что сверните диалог.

Create New Symbol

Name: | Symbol 1 J L OKBehavior: 0 Movie clip

О Button

О Graphic

Cancel

•Linkage .

Identifier; 1

AS 2.0 Class: Г

Linkage: • Export for ActionScript

• Export for runtime sharing

D Import for runtime sharing

f"| Export in first frame

URL; L

О Always update before publishing

File:

Symbol name:Symbol 2

3

3

Browse.,. 1

Symbol... |

Puc. 1.13. Дополнительные свойства эталона

> Закройте дополнительные свойства эталона щелчком мыши на кнопке Basic(Основные).

> В поле ввода Name (Имя) по умолчанию для первого эталона предлагается имяSymbol 1 (Эталон 1). Но при большом количестве эталонов такие имена очень не-удобны: в них трудно ориентироваться. Поэтому сразу дадим эталону осмысленноеимя: Спутник.

> В поле ввода Name (Имя) введите: Спутник.

Группа переключателей Behavior (Тип) позволяет определить тип создаваемого эталона:Movie Clip (Клип), Button (Кнопка), Graphic (Графический). По умолчанию в этой группеустановлен переключатель Button (Кнопка).

> Установите щелчком мыши переключатель Movie Clip (Клип).

Page 33: 100 % самоучитель Macromedia Flash MX

32 100% самоучитель Flash MX

> Закройте диалог Symbol Properties (Свойства эталона) щелчком мыши на кнопкеОК. Программа переключится в режим редактирования эталона и откроет соответст-вующее окно (Рис. 1.14).

edia Flash MX 20D4 - Unfilled-Г)

File Edit View Insect Modify Text Commands Control Window Help

Tools

/ p

U AО •„

аView

т

* | C 3 i | 5 1 0 1 5 2 0 2 5 3 0 3 E ' * * so 55 ' eoj»!

•£?••"« И1 o-o» Ihl I

. 1.14. Окно для редактирования эталона

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

Теперь мы должны нарисовать спутник в виде круга небольшого размера. Воспользуем-

ся для этого инструментом [OJ - Oval Tool (О) (Овал).

> Нажмите кнопку [Oj - Oval Tool (О) (Овал) в секции Tools (Инструменты) панелиинструментов.

Перед тем как нарисовать любой объект, в том числе и круг, для него следует выбратьцвет заливки и цвет контура. Цвет заливки выбирается с помощью элемента управления[ & Р 1 J - Fill Color (Цвет заливки) в секции Colors (Цвета) панели инструментов. Чтобыимитировать для создаваемого изображения спутника шаровидную форму, воспользуем-ся градиентной заливкой.

Градиентной называется такая заливка, в которой один цвет плавно переходит в другой.Подобные заливки часто применяются для имитации трехмерных объектов. Градиентныезаливки могут быть линейными (Linear) и круговыми (Radial). В линейном градиентеполосы разных цветов параллельны друг другу, а в круговом - имеют формуконцентрических колец.

> Нажмите кнопку Щ - Fill Color (Цвет заливки) в секции Colors (Цвета) панели инст-рументов. На экране появится палитра цветов (Рис. 1.15), в которой можно выбратьцвет для заливки объекта.

Page 34: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 33

Если подходящего цвета в палитре нет, щелкните мышью на кнопке ЩЩ\ в правом верх-нем углу палитры цветов, после чего откроется диалог Color (Цвет), предоставляющийболее широкие возможности определения цвета. Для указания отсутствия заливки нуж-но нажать кнопку [0] в правом верхнем углу палитры цветов.

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

Градиентные заливки собраны в нижней строке палитры.

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

1 llttFFFFFF |

И 1 1 i f Г

1 •"! i l l ! 1= 1*1-1 1

шш

•111Ш 1 1 1

? ШЩ 1

Рис. 1.15. Палитра цветов

> Щелкните мышью в этом месте. Палитра цветов закроется. Цвет заливки будетвыбран и появится на образце [Q] - Fill Color (Цвет заливки) секции Colors (Цвета)панели инструментов.

Контур создаваемого объекта - «спутника» - должен отсутствовать. Укажем это сле-дующим образом.

> Щелкните мышью на значке с изображением карандаша # кнопки [ ^ Ю ] - StrokeColor (Цвет контура) секции Colors (Цвета) панели инструментов. Обратите вни-мание: щелкнуть нужно именно на изображении карандаша / \ а не на образце цвета[О]. Кнопка | ^ D l j будет нажата, указывая таким образом, что определяется цветконтура.

> Нажмите кнопку Щ - No Color (He задан) в секции Colors (Цвета) панели инструментов.На образце цвета Щ - Stroke Color (Цвет контура) появится красная диагональнаячерта, указывающая на то, что цвет контура не определен.

Теперь, когда цвета контура и заливки объекта - «спутника» указаны, его можно нари-совать в виде круга. Рисование круга в Macromedia Flash, как и во всех графических про-граммах, выполняется посредством перетаскивания указателя мыши. Чтобы круг полу-чился правильным, необходимо в процессе перемещения указателя мыши удерживать

нажатой клавишу lS h i f tl.

>* Установите указатель мыши, который примет форму крестика + , несколько выше иправее центра сцены, обозначенного также крестиком.

>• Нажмите и удерживайте клавишу llShiftl.

>- Не отпуская клавишу llShiftl, нажмите и удерживайте левую кнопку мыши.

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

Отпустите левую кнопку мыши.

2 - 4724

Page 35: 100 % самоучитель Macromedia Flash MX

34 100% самоучитель Flash MX

>• Отпустите клавишу llshittl. Будет создан объект в форме круга с градиентной круговой

черно-белой заливкой без контура (Рис. 1.16).

File Edit View Intuit Modify Text Command! Control Window Help

• a D M S 10 15 20 25 30 35 40 « SO 55 60:

ж.

О D./ / I Ш 11171 Г5Ш1111Щ~Г1| 12,0 HI olTI

Рис. 1.16. Круг с градиентной заливкой создан

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

последнюю операцию, выбрав команду меню Edit • Undo (Правка • Отменить) или на-

жав комбинацию клавиш lf^ t r ll+l|z|. и повторите создание объекта. По умолчанию мож-

но отменить 1000 последних операций.

Чтобы в дальнейшем объектом можно было легко управлять, центр нарисованного кругадолжен точно совпадать с точкой привязки в центре сцены, обозначенной крестиком +.Вероятней всего, у вас совпадение не получилось. Поэтому переместим центр нарисо-ванного круга на точку привязки, воспользовавшись инструментом [ Ч | - Selection Tool(V) (Выделение).

> Нажмите кнопку [_kj - Selection Tool (V) (Выделение) в секции Tools (Инструменты)панели инструментов, чтобы выбрать этот инструмент.

> Установите указатель мыши в центре нарисованного круга так, чтобы указатель

мыши принял форму *«$».

Если установить указатель мыши не в середине объекта, а у егокрая так, что он примет форму Kj, то будет выполняться не

> перемещение, а редактирование формы объекта.

Page 36: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 35

>• Нажмите и удерживайте левую кнопку мыши.

> Не отпуская левую кнопку мыши, переместите круг так, чтобы его центр, обозначен-ный белым кружком, совпал с точкой привязки, обозначенной крестиком +.

у Отпустите левую кнопку мыши. Новое положение объекта будет закреплено.

После перемещения круг будет выделен - покрыт точечным узором.

> Для более точного совмещения воспользуйтесь клавишами управления курсором 1ГП,

II Т ], 1|-»|, [[«-I. Каждое нажатие одной из этих клавиш перемещает объект на один пик-

сел в соответствующем направлении. Если при этом удерживать нажатой клавишу

tS h i f tl, то объект будет перемещаться на 8 пикселов.

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

> Выберите команду меню Window • Design Panels • Info (Окно • Панели конструи-рования • Информация). На экране появится панель Info (Информация) (Рис. 1.17).

> Убедитесь, что созданный объект по-прежнемувыделен - покрыт точечным узором. Если это нетак, щелкните на нем мышью.

Когда на сцене выделен какой-либо объект, на пане-лях Info (Информация) и Properties (Свойства) ото-бражается информация о нем. Откройте панельProperties (Свойства) щелчком мыши на значке тре-угольника слева от имени панели Q. Как видите, вданном конкретном случае на панели указано, чтообъект представляет собой форму (Shape), т.е. зали-тую область. В полях ввода под надписью отобра-

59,0159.0

R: -G: -В: -А: -

+ X: 54.0Y: -10.0

Рис. 1.17. Панель Info(Информация)

жаются соответственно текущая ширина (W) и высота (Н) объекта (эти же значенияпоказаны на панели Info (Информация)). Изменим эти размеры так, чтобы они состав-ляли 30 пикселов. Это можно сделать как на панели Info (Информация), так и на панелиProperties (Свойства).

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

• . . ' , : • • • : , - • > - • ;

> На панели Info (Информация) дважды щелкните мышью в поле ввода W (Ширина).Значение в этом поле будет выделено темным цветом, и появится текстовый курсор.

> Введите с клавиатуры 30.

>- Нажмите клавишу |p»TabJ. Фокус переместится в поле ввода Н (Высота), и числовоезначение в нем будет выделено. Одновременно на рисунке изменится ширина объекта.

2*

Page 37: 100 % самоучитель Macromedia Flash MX

36 100% самоучитель Flash MX

Введите с клавиатуры 30 и нажмите клавишу [[Enter]. Высота объекта на рисунке

изменится.

На панели Properties (Свойства) можно щелкнуть мышью назначке навесного замка й слева от полей ввода (Рис. 1.18). Тогда

при нажатии клавиши lfcT a bl перемещение фокуса ввода во второеполе вызовет автоматический ввод того же значения в это поле.

Shape

W: | 30.0 | X: |-29.5

H: I 78,0 | y, | -29.5 |

Рис. 1.18. Ввод размеров объекта на панели Properties (Свойства)

В полях ввода X и Y в правой части панели Info (Информация) отображаются текущиекоординаты объекта, которые представляют собой координаты верхнего левого углапрямоугольника, описанного вокруг круга. Эти координаты в режиме редактированияэталона отсчитываются относительно точки привязки, обозначенной крестиком + вцентре сцены. Причем ось X направлена вправо, а ось Y - вниз. Поэтому, если вы точносовместили центр круга с точкой привязки, то в полях ввода X и Y значения координатдолжны быть равны -15.0.

>• Если значения в полях ввода X и Y отличаются от -15.0, то откорректируйте их так,

чтобы они были равны -15.0, и завершите ввод значений нажатием клавиши [[Enter].

Положение выделенного объекта изменится. Теперь его центр точно совмещен сточкой привязки.

Когда выделенный объект залит не градиентом, а сплошным цветом, то установка нанего указателя мыши приводит к отображению в палитре Info (Информация) цветовогокода заливки: R (Красный), G (Зеленый), В (Синий), которые .могут иметь значения от 0до 255. Параметр A (Alpha - Прозрачность) характеризует степень непрозрачности и мо-жет изменяться от 0% - абсолютная прозрачность - до 100% - полная непрозрачность.

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

>• Щелкните мышью за пределами выделенного объекта. Выделение будет снятоИнформация о размерах и положении объекта в палитре Info (Информация) исчезнет.Останутся только сведения о положении указателя мыши.

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

> Сверните палитру Info (Информация) щелчком мыши на значке свертывания Q влевом верхнем углу палитры.

Page 38: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 37

> Сверните также панель Properties (Свойства) щелчком мыши на значке Q слева отназвания панели.

Создание эталона Спутник завершено, и он автоматически помещен в библиотеку(Library), в которой хранятся эталоны всех объектов, используемых в фильме. Собствен-но, эталон помещается в библиотеку сразу, как только создается командой New Symbol(Новый эталон), а в процессе редактирования постоянно обновляется. Посмотрим, чтопредставляет собой библиотека.

>- Выберите команду меню Window • Library (Окно • Библиотека). На экране появитсяокно библиотеки Library - Untitled-1 (Библиотека - Неозаглавленный-1) (Рис. 1.19).

One item in library

| NameСпутник

Рис. 1.19. Окно библиотеки Library — Untitled-1 (Библиотека — Неозаглавленный-1)

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

> Щелкните мышью на имени эталона Спутник в нижней части окна библиотеки. Имяэталона будет выделено темным цветом, а в окне просмотра появится увеличенноеизображение эталона (Рис. 1.20).

£)£]©

Рис. 1.20. Изображение эталона в окне просмотра библиотеки

Page 39: 100 % самоучитель Macromedia Flash MX

38 100% самоучитель Flash MX

> Чтобы увидеть таблицу с информацией, нажмите кнопку [Ж] у правого края окна биб-лиотеки (Рис. 1.21).

One item in library

| Name [Kind ) Use Count ILinkage iDate Modified

Спутник Movie Clip Thursday, April 29, 2004 4:11:29 PM |O0

Рис. 1.21. Развернутое окно библиотеки

Информационная таблица состоит из пяти полей:

• Name (Имя) - имя эталона или импортированного файла; слева от имени находитсязначок, характеризующий тип эталона;

• Kind (Тип) - тип эталона (в данном случае - Movie Clip (Клип));

• Use Count (Количество экземпляров) - количество экземпляров данного эталона,вставленных в фильм; пока эталон не использовался, в этом поле стоит прочерк;

• Linkage (Связь) - указывает, связан ли данный эталон с другими документами;

• Date Modified (Дата модификации) - дата и время последней модификации эталона.

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

>- Сверните окно библиотеки, щелкнув мышью на кнопке [1] у правого края окна.

У нижней границы окна библиотеки находятся значки, имеющие следующее назначение:

t3 - New Symbol (Новый эталон) - создание нового эталона;

±3 - New Folder (Новая папка) - создание новой папки для хранения эталонов;

О - Properties (Свойства) - вызов диалога Symbol Properties (Свойства эталона) дляпереопределения свойств эталона;

© - Delete (Удалить) - удаление выделенного в библиотеке эталона.

>- Закройте окно библиотеки щелчком мыши на кнопке закрытия [xj в правом верхнемуглу окна.

Прежде чем продолжить работу над фильмом, его следует сохранить.

Page 40: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 39

Выберите команду меню File • Save (Файл • Сохранить) или нажмите комбинацию

+1! s I. На экране появится диалог Save As (Сохранить как) (Рис. 1.22).клавиш

ЕШЬ£% 3d*max5

C_DILLA^Document* and Setting*^ j Downloads

nismetsengeiMy Webs

S)MyWoikC3 Pfogram Files

СЭ WINDOWS

Save as type: jFlash MX 2004 Document I'M)

Рис. 1.22. Диалог Save As (Сохранить как)

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

>• Откройте папку, в которой вы хотите создать папку Flash.

>• Нажмите кнопку g? в верхней части диалога Save As (Сохранить как). В поле спискадиалога появится значок New Folder (Новая папка) с выделенным названием и ми-гающим курсором, приглашающим ввести новое имя.

Введите с клавиатуры: Flash и нажмите клавишу ||Enter|. Значок вновь созданной пап-

ки будет выделен.

Нажмите клавишу [[Enter)f чтобы открыть папку Flash.

>- В поле ввода File name (Имя файла) двойным щелчком мыши выделите находящеесятам имя Untitled-1 .fla и введите: Sputnik - такое имя мы присвоим файлу фильма.

> Нажав кнопку Save (Сохранить), закройте диалог Save As (Сохранить как). Файлбудет сохранен. Новое имя файла - Sputnik.fla - появится в заголовке окна программы.

При последующих периодических сохранениях фильма командой меню File • Save(Файл • Сохранить) диалог Save As (Сохранить как) уже появляться не будет, а файлбудет сохраняться на том же диске, в той же папке и под тем же именем. Чтобы сохра-нить фильм на другом диске, в другой папке или под другим именем, следует восполь-зоваться командой меню File • Save As (Файл • Сохранить как) или комбинацией кла-виш ir^n+fs^n+fs i .

Page 41: 100 % самоучитель Macromedia Flash MX

40 100% самоучитель Flash MX

По умолчанию, когда вы отменяете действия командой менюEdit Ф Undo (Правка Ф Отменить) или на панели History (Пре-дыстория), которую мы обсудим в главе 2, размер файла доку-мента Flash не изменяется, даже если вы удаляете из документакакой-нибудь элемент. Например, если вы импортируете в доку-мент видеофайл, а затем отмените команду импортирования,размер файла по-прежнему будет включать размер видеофайла.Так происходит потому, что удаляемый командой Undo (Отме-нить) элемент остается в фильме на тот случай, если вы ре-шите восстановить элемент командой Redo (Повторить). Что-бы необратимо удалить из документа какой-нибудь элемент иуменьшить размер файла, воспользуйтесь командой Save andCompact (Сохранить и уплотнить).

Если вы закроете программу командой меню File • Exit (Файл • Выход) или комбинаци-

ей клавиш I c t r l |+||О], предварительно сохранив файл, то открыть его для дальнейшей

работы сможете с помощью команды меню File • Open (Файл • Открыть) или комбина-

ции клавиш II C t r l l+|[Q|.

Теперь можете переключиться из режима редактирования эталона в режим редактирова-ния фильма.

>- Щелкните мышью на надписи Scene 1 (Сцена 1) вверху окна фильма. Вид сцены из-менится. На ней отобразится в виде белого прямоугольника на сером фоне пустойпервый кадр будущего фильма.

Создаем графические элементы фильма

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

>• В открывающемся списке в правом верхнем углу окна фильма выберите пункт ShowFrame (Показать кадр). Масштаб отображения кадра на сцене изменится. В поле от-крывающегося списка вы увидите новое значение масштаба, а на сцене - рамку кадра.

«; Изменить масштаб отображения можно также командой меню« View Ф Magnification Ф Show Frame (Вид Ф Увеличение Ф Пока-

зать кадр) или двойным щелчком мыши на инструменте HandTool (И) (Рука).

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

Page 42: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 41

> Нажмите кнопку [Oj - Oval Tool (О) (Овал) в секции Tools (Инструменты) панелиинструментов, чтобы включить этот инструмент.

> Укажите отсутствие цвета контура, щелкнув мышью на изображении карандаша #

кнопки | # D l ) - Stroke Color (Цвет контура), а затем - нажав кнопку Щ - No Color

(Не задан) в секции Colors (Цвета) панели инструментов.

>• Убедитесь, что для заливки по-прежнему выбран черно-белый круговой градиент,который мы использовали для заливки «спутника». Его черный цвет мы в дальней-шем изменим.

> Переместите указатель мыши на сцену и, удерживая нажатой клавишу llShiftl, нари-суйте в центре кадра круг так, чтобы его диаметр был несколько меньше высотыкадра (Рис. 1.23).

iomu.li.) Flash MX 2004 - [Sputnik ila'lFile Edit Vie» Insert Modify Tent Commands Control Window Help

Рис. 1.23. Круг нарисован

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

Напомним, что неудачно нарисованный объект и, вообще, 1000 последних операций,

можно отменить командой меню Edit • Undo (Правка • Отменить) или нажатием ком-

бинации клавиш К c t r l

Page 43: 100 % самоучитель Macromedia Flash MX

42 100% самоучитель Flash MX

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

> Нажав кнопку [_4J - Selection Tool (V) (Выделение) в секции Tools (Инструменты)панели инструментов, выберите этот инструмент.

> Щелкните мышью в середине нарисованного круга, чтобы выделить его.

> Выберите команду меню Window • Design Panels • Info (Окно • Панели конструи-рования • Информация). На экране появится панель Info (Информация).

> В полях ввода W (Ширина) и Н (Высота) введите значения 275 и нажмите клавишу

[[Enter]. Размер «планеты» изменится в соответствии с указанными значениями.

> Закройте панель Info (Информация), нажав KHOI в правом верхнем углу ее окна.

Заменим черный цвет градиентной заливки «планеты» коричневым цветом. Для этоговоспользуемся панелью Color Mixer (Смеситель цвета).

> Выберите команду меню Window • Design Panels •Color Mixer (Окно • Панели конструирования • Смеси-тель цвета). На экране появится панель Color Mixer(Смеситель цвета) (Рис. 1.24).

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

> Убедитесь, что в открывающемся списке со всплываю-щей подсказкой Fill style (Стиль заливки) в верхней Час-ти панели выбрано Radial (Круговой).

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

Рис. 1.24. Панель ColorMixer (Смеситель цвета)

жду порогами заполняются цветовым переходом. Каждый порог отмечается маркером £\такого же цвета. Использованный для заливки «планеты» черно-белый круговой гради-ент имеет два порога, расположенных по краям полосы и отмеченных белым и черныммаркерами |fj. Изменцм цвет черного порога на коричневый. Чтобы изменить цвет любо-го порога, следует предварительно выделить его маркер (f].

>• Щелкните мышью на черном маркере £} под правым краем горизонтальной полосы.Образец цвета слева от открывающегося списка Fill Style (Стиль заливки) окраситсячерным цветом.

> Щелкните мышью на образце черного цвета [Q] на панели Color Mixer (Смесительцвета) и в появившейся палитре цветов выберите коричневый цвет. Палитра закроется,а выбранный цвет отобразится на кнопке.

В поле просмотра (Gradient preview) у левого края панели Color Mixer (Смеситель цвета)вы увидите отредактированный градиент, а на сцене выделенный объект будет залиткоричнево-белым градиентом.

> Закройте панель Color Mixer (Смеситель цвета), нажав кнопку \х\ в правом верхнемуглу ее окна.

Page 44: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 43

>• Щелкните мышью за пределами выделенного объекта, чтобы снять выделение.

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

> Нажав кнопку [Of - Oval Tool (О) (Овал) в секции Tools (Инструменты) панели инст-рументов, снова выберите этот инструмент.

> Выберите синий цвет в открывающейся палитре Ц - Stroke Color (Цвет контура)секции Colors (Цвета) панели инструментов.

> Укажите отсутствие заливки, щелкнув мышью на значке ^ кнопки [& О j - FillColor (Цвет заливки) и вслед за ней нажав кнопку Щ - No Color (He задан) в секцииColors (Цвета) панели инструментов.

>• Переместите указатель мыши в пределы кадра и на-рисуйте эллипс так, чтобы его горизонтальная ось при-близительно совпадала с горизонтальным диаметромкруга, ширина была несколько меньше ширины кадра,а высота - меньше диаметра круга (Рис. 1.25).

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

>• Чтобы убедиться в этом, выберите инструмент [kj -Selection Tool (V) (Выделение) и щелкните мышьюв центре круга. Будет выделен не весь круг, а толькотот его фрагмент, который находится внутри эллипса(Рис. 1.26).

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

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

Рис. 1.25. Эллипс нарисован

Рис. 1.26. Выделен фрагменткруга внутри эллипса

> Установите указатель мыши на контуре эллипса слева от круга так, чтобы он принялформу \j.

> Щелкните мышью в этом месте. Будет выделен не весь эллипс, а только левая егочасть за пределами круга. При этом выделение фрагмента круга будет снято.

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

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

Page 45: 100 % самоучитель Macromedia Flash MX

44 100% самоучитель Flash MX

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

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

Сгруппируем фрагменты эллипса.

>• Выберите команду меню Modify • Group (Модификация • Сгруппировать) или на-

Рис. 1.27. Эллипс сгруппирован

жмите комбинацию клавиш 1 c t r l l+ll G l . Фрагменты эллипса будут сгруппированы и

выделены голубой прямоугольной рамкой (Рис. 1.27).

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

> Щелкните мышью внутри круга. Теперь, после тогокак фрагменты контура эллипса сгруппированы,круг выделяется полностью.

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

Укажем для эллипса точные размеры.

> Убедитесь, что эллипс по-прежнему выделен.

> Откройте панель Info (Информация) командой меню Window • Design Panels • Info(Окно • Панели конструирования • Информация).

> В поле ввода W (Ширина) панели Info (Информация) введите 500.

> В поле ввода Н (Высота) панели Info (Информация) введите 160.

>• Закройте панель Info (Информация), щелкнув мышью на кнопке [х] в правом верхнемуглу ее окна. Размер эллипса в кадре изменится.

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

на них мышью при нажатой клавише llShi?l.

> Убедитесь, что контур сгруппированного эллипса выделен. Если это не так, щелчкоммыши выделите его.

> Нажмите и удерживайте клавишу lS h i f tl.

>- Не отпуская клавишу lS h i f tl, щелкните мышью на круге. Оба объекта на сцене будут

выделены.

Page 46: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 45

Выровняем оси объектов.

> Выберите команду меню Window • Design Panels • Align (Окно • Панели конструи-

рования • Выравнивание) или нажмите комбинацию клавиш | Ctrl | + | к ] . На экране

появится панель Align (Выравнивание) (Рис. 1.28).

С помощью кнопки То Stage (Относительно сцены) можно указать программе выров-нять объекты не только друг относительно друга, но и относительно центра кадра.

>• Нажмите кнопку То Stage (Относительно сцены),чтобы включить режим выравнивания относительноцентра кадра.

Кнопки группы Align (Выравнивание) выравнивают выде-ленные объекты именно так, как показано на их миниатюрах.

Align:P & c

Distribute:- П Г - D - -ПЗ.

M a t c h size:

i s j 0 1 S J

№ t)i?Space:

~ea 0 ra

В И• M

• a

М Ш

Tostage:IH!

Рис. 1.28. Панель Align(Выравнивание)

> Нажмите вторую слева в группе Align (Выравнивание)кнопку [Ж] - Align horizontal center (Выравниваниецентров на горизонтальных осях). Вертикальные осивыделенных объектов совместятся и совпадут с верти-кальной осью кадра.

> Нажмите пятую слева в группе Align (Выравнивание) кнопку \*°\ - Align verticalcenter (Выравнивание центров на вертикальных осях). Будут совмещены горизон-тальные оси обоих объектов и кадра.

> Закройте панель Align (Выравнивание) нажатием кнопки [х] в правом верхнем углуее окна.

Повернем горизонтальную ось эллипса на некоторый угол относительно горизонтальнойоси круга. Предварительно отменим выделение круга.

> Удерживая нажатой клавишу lS h i f tl, щелкните мышью на изображении круга. Выделение

круга будет снято. Останется выделенным только сгруппированный контур эллипса.

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

> На панели инструментов выберите инструмент Free Transform Tool (Q) (Произволь-ная трансформация) [Ш]. В углах и серединах сторон прямоугольной рамки выделе-ния сгруппированного эллипса появятся квадратные маркеры вращения, масштаби-рования и наклона (Рис. 1.29).

Инструмент Free Transform Tool (Q) (Произвольнаятрансформация) можно также активизировать командойменю Modify • Transform • Free Transform (Модификация •Преобразование • Произвольная трансформация).

Угловые маркеры служат для наклона, вращения и масшта-бирования объекта, а маркеры на серединах сторон - для на-клона и масштабирования. Поворот объекта выполняетсяпутем перемещения угловых маркеров. Если при этом

удерживать нажатой клавишу llShiftl, то поворот будет

выполняться на углы, кратные 45°.

Рис. 1.29. Маркерывращения и наклона

Page 47: 100 % самоучитель Macromedia Flash MX

46 100% самоучитель Flash MX

> Наведите указатель мыши на правый верхний угловой маркер и, немного перемещаяуказатель мыши, добейтесь, чтобы значок инструмента принял форму €), соответст-вующую вращению.

>• Нажмите и удерживайте левую кнопку мыши.

> Не отпуская левую кнопку мыши, переместите указательмыши влево и вверх. Вместе с ним повернется эллипс.

> Отпустите левую кнопку мыши, когда угол поворотасоставит примерно 30-40 градусов против часовойстрелки (Рис. 1.30).

> На панели инструментов выберите инструментSelection Tool (V) (Выделение), чтобы скрыть маркеры Рис' и а Эллипс повернутпреобразования.

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

> Выберите команду меню Modify • Ungroup (Модификация • Разгруппировать) или

нажмите комбинацию клавиш II c ^+ll S h i f t l+![G|. Объект будет разгруппирован. Голу-

бая прямоугольная рамка выделения исчезнет. Все фрагменты эллипса останутся вы-

деленными.

>- Щелкните мышью за пределами объектов, чтобы снять их выделение.

> Щелкните мышью на фрагменте контура эллипса в пре-делах правой нижней части контура круга. Этот фраг-мент будет выделен..

> Нажмите клавишу |[р*м*1. Выделенный фрагмент эллипсабудет удален (Рис. 1.31).

> Нажмите комбинацию клавиш II c t r l 1+РП. чтобы сохра-

нить фильм.

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

Рис. 1.31. Фрагментэллипса удален

Слои и кадры

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

Page 48: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 47

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

Для удобства работы каждый слой имеет свое уникальное имя. При создании новогофильма в нем содержится всего один слой, которому по умолчанию присваивается имяLayer 1 (Слой 1), и этот слой отображается в левой части окна шкалы времени (Timeline)(Рис. 1.32). Слева от названия слоя находится значок, обозначающий тип слоя. Такойзначок, какой вы видите слева от названия слоя Layer 1, ставится перед названием обыч-ных слоев.

Ш mlilHI%11HirT~lli2.oip.ll o.5T~|f

Рис. 1.32. Окно шкалы времени (Timeline)

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

>• Щелкните мышью в левой части окна шкалы времени (Timeline) на белом ромбике,находящемся на пересечении строки с названием слоя Layer 1 и столбца со значкомоткрытого глаза Щ. В этом месте появится крестик красного цвета, а значок с изображе-нием карандаша будет перечеркнут красной линией; изображение на сцене исчезнет.

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

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

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

> Щелкните мышью на белом ромбике на пересечении строки слоя Layer 1 и столбца сизображением замка fl. В месте щелчка появится значок с изображением замка Ц, азначок с изображением карандаша будет перечеркнут красной линией. Эти признакиуказывают на то, что слой заблокирован.

Если вы теперь попытаетесь внести в изображение какие-либо изменения, то не сможетеэто сделать и получите сообщение о том, что слой заблокирован (Рис. 1.33), и предла-гающее разблокировать этот слой. Такое же сообщение появится при попытке редакти-рования скрытого слоя.

Page 49: 100 % самоучитель Macromedia Flash MX

48 100% самоучитель Flash MX

The current layer "Layer 1" is either locked or hidden. Would you like tounlock and show this layer?

Yet JL No

Рис. 1.33. Сообщение о невозможности редактированиязаблокированного или скрытого слоя

>• Щелкните мышью на значке с изображением замка @ в строке слоя Layer 1. Значокй и красная пометка исчезнут. Блокировка слоя будет снята, и он снова станетдоступен для редактирования.

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

> Щелкните мышью на значке с изображением квадрата, залитого синим цветом встроке слоя Layer 1. Синяя заливка этого значка исчезнет. Останется только синийконтур • , а изображение на слое будет представлено в виде контуров (Рис. 1.34)такого же синего цвета, как на квадратном значке.

i \4 ^--

Yi

—"

Рис. 1.34. Режим контурного отображения объектов

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

Цвет слоя можно изменить в окне Layer Properties (Свойств слоя).Чтобы открыть это окно, выделите слой и выберите в менюкоманду Modify Ф Timeline Ф Layer Properties (Модификация Ф Шкалавремени Ф Свойства слоя).

> Щелкните мышью на значке незалитого квадрата • в строке слоя Layer 1. Контурноеотображение слоя будет выключено.

Чтобы лучше организовать отображение объектов и анимации в фильме, вы можете до-бавлять новые слои. Количество создаваемых слоев ограничено только ресурсами ваше-го компьютера. Слои сами по себе никак не влияют на размер файла окончательногофильма. Но в большом количестве слоев трудно ориентироваться, особенно, если онинумеруются по умолчанию: Layer 1, Layer 2 и т.д. Поэтому всегда старайтесь присваиватьслоям осмысленные имена. Это значительно облегчит работу с большими фильмами.

Page 50: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 49

Кроме того, для лучшей организации слоев на шкале времени выможете создавать в ней папки и помещать в папки те слои, ко-торые относятся, например, как к каким-либо взаимосвязаннымили родственным объектам. Чтобы создать папку, щелкнитемышью на значке СЗ Insert Layer Folder (Вставить папку слоя),расположенном на нижней границе шкалы времени, и в шкалевремени будет создана папка, которой по умолчанию присваива-ется имя Folder 1 (Папка 1) (если это - первая созданная папка).Затем вы можете переместить в эту папку все нужные слои.Для этого щелкните мышью на слое и, не отпуская кнопку мыши,перетащите слой на папку и отпустите кнопку мыши. Для рас-крытия/закрытия папки щелкайте мышью на значке Q слева отимени папки. Разумеется, если документ содержит всего одинслой, папки не нужны.

Переименуем слой Layer 1, присвоив ему имя, соответствующее содержимому - Планета.

> Дважды щелкните мышью на имени слоя Layer 1. Это имя будет выделено темнымцветом и появится мигающий текстовый курсор.

>• Введите новое имя слоя - Планета - и нажмите клавишу [[Enter} или щелкните мы-

шью где-нибудь на пустом месте в шкале времени. Введенное имя отобразится в на-

звании слоя.

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

> Убедитесь, что включен инструмент [hj - Selection Tool (V) (Выделение). В против-ном случае нажмите его кнопку в секции Tools (Инструменты) панели инструментов.

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

>- Выберите команду меню Edit • Cut (Правка • Вырезать) или нажмите комбинацию

клавиш I c t r l i+l|X|. Изображение эллипса исчезнет со сцены и будет помещено в

буфер обмена.

Создадим новый слой.

> Нажмите кнопку Insert Layer (Вставить слой) •£? в нижнем левом углу окна шкалывремени (Timeline). В левой части этого окна появится и будет выделен новый слой,которому по умолчанию присвоено имя Layer 2 (Рис. 1.35).

Q? Планета

5 10 15 20 25 30 35 40 45 50 55 60

Рис. 1.35. Вставлен новый слой

Page 51: 100 % самоучитель Macromedia Flash MX

50 100% самоучитель Flash MX

Новый слой всегда вставляется над тем, который был текущим, и сразу становится ак-тивным. Для удаления активного слоя можно щелкнуть мышью на кнопке © - DeleteLayer (Удалить слой) в нижней части окна шкалы времени (Timeline).

Вставим на новый активный слой изображение из буфера обмена так, чтобы оно нахо-дилось в том же месте, в котором оно располагалось на слое Планета перед тем, как бы-ло вырезано. Для этого следует воспользоваться специальной командой - Paste in Place(Вставить в то же место).

> Выберите команду меню Edit • Paste in Place (Правка • Вставить в то же место) или

нажмите комбинацию клавиш II С{г |1+|[^П-н[У|. Изображение эллипса будет вставлено

из буфера обмена на новый слой Layer 2 и выделено.

Переименуем слой Layer 2, присвоив ему более выразительное имя - Орбита.

> Дважды щелкните мышью на названии слоя Layer 2, введите новое имя - Орбита - и

НаЖМИТе к л а в и ш у [[Enterj.

> Сохраните фильм, нажав комбинацию клавиш I Ctr l l + | s ) .

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

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

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

Мы уже говорили о том, что Macromedia Flash может создавать две разновидности ани-мации - покадровую (Frame-by-frame Animation) и расчетную (Tweened Animation).В покадровой анимации вы «вручную» рисуете все кадры, размещая их друг за другом.Если в программу будет импортирован анимационный GIF, то его анимация также будетпокадровой.

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

Page 52: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 51_

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

Кадры в Macromedia Flash могут быть двух типов: ключевые (Keyframe) и обычные(Frame). Ключевой - это кадр, в котором задаются изменения в анимации. Такими кад-рами начинается и заканчивается любой фильм. В расчетной анимации вы определяетеключевые кадры только в основных точках фильма, а остальные кадры программа создаетавтоматически. В покадровой анимации ключевыми являются все кадры.

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

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

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

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

S> Убедитесь, что слой Орбита по-прежнему является активным и выделен в окне шка-

лы времени (Timeline) темным цветом. Если это не так, щелчком мыши выделите его.> Выберите команду меню Insert • Timeline • Layer (Вставить • Шкала времени •

Слой). Над слоем Орбита будет вставлен и станет активным новый слой, которомупо умолчанию будет назначено имя Layer 3.

Присвоим данному слою новое имя - Спутник.

> Дважды щелкните мышью на названии слоя Layer 3, введите новое имя - Спутник -

И Нажмите Клавишу [[Enter].

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

Поместим на новый слой экземпляр эталона Спутник, который хранится в библиотеке(Library).

> Откройте окно библиотеки (Library) командой меню Window • Library (Окно •Библиотека).

Page 53: 100 % самоучитель Macromedia Flash MX

52 100% самоучитель Flash MX

v Установите указатель мыши на значке или имени эталона Спутник в окне библиотеки(Library).

>• Нажмите и удерживайте левую кнопку мыши.

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

> Отпустите левую кнопку мыши. Положение объекта будет закреплено, и он будетвыделен голубой квадратной рамкой (Рис. 1.36).

File Edit View Insert Modify Text Command* Control Window Help

Рис. 1.36. «Спутник» помещен в начало орбиты

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

> Закройте окно библиотеки (Library) щелчком мыши на кнопке закрытия [х] или по-вторной командой Window • Library (Окно • Библиотека).

>- Чтобы точно расположить экземпляр эталона Спутник в начале орбиты, выключите

отображение слоя Планета и воспользуйтесь клавишами |jTj, f j j , | Q , ( Q , нажатие

каждой из которых перемещает выделенный объект на один пиксел в соответствую-

щем направлении. После корректировки снова включите отображение слоя Планета.

Обратите внимание: как только экземпляр эталона был помещен на слой Спутник, пустойпервый ключевой кадр этого слоя в окне шкалы времени (Timeline) стал выделенным -он залит черным цветом и в нем появился белый кружок. Теперь для первого ключевогокадра слоя Спутник следует определить тип и параметры анимации. Это выполняется спомощью панели Properties (Свойства).

Page 54: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 53

>• Раскройте панель Properties (Свойства) (Рис. 1.37) щелчком мыши на значке Q слеваот названия панели.

У1

1Щ• Label type1

Frame

I'

. |Name l i

Tween: [None щ | Sound:

Effect:

Sync:

|None

[None

JEvent [ y j [Repeat

No sound selected.

• d I м

Ы11 ©A.

Puc. 1.37. Панель Properties (Свойства) кадра

Поле ввода Frame (Кадр) на панели Properties (Свойства) предназначено для идентифи-кации текущего кадра. Метки могут использоваться, например, для указания последова-тельности публикуемых кадров, для создания карт ссылок или печати кадров из проиг-рывателя. В поле Label type (Тип метки) можно выбрать тип метки: Name (Имя),Comment (Комментарий) или Anchor (Привязка). Метки типа Name (Имя) позволяютперемещаться между кадрами фильма с помощью скрипта, метки Comment (Коммен-тарий) служат для комментирования содержимого кадра, а метки Anchor (Привязка)упрощают навигацию по фильму Flash, разрешая пользователям перемещаться междукадрами или сценами с помощью кнопок Forward (Вперед) и Back (Назад) браузера.(Поименованные точки привязки отмечаются на шкале времени значком якоря &).

Параметр Tween (Расчетная анимация) позволяет указать тип создаваемой анимации:None (He задана), Motion (Движение), Shape (Форма).

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

> В открывающемся списке Tween (Расчетная анимация) выберите пункт Motion(Движение). На панели Properties (Свойства) отобразятся элементы управления ани-мацией движения (Рис. 1.38).

Label type: |temg

Tween: [Motion Ц 0 Scale

Ease: 0

Rotate: [Auto Щ [0 [times

О Orient to path • Sync • Snap

Sound: [None

Effect: None

Sync: [Event Ц [Repeat: 1 3 1 '

No sound selected.

Puc. 1.38. Элементы управления анимацией движения на панели Properties (Свойства)

Установка флажка Scale (Масштаб) позволяет в процессе движения объекта изменятьего размеры.

> Сбросьте флажок Scale (Масштаб), чтобы пока не включать анимацию размеров. Мыиспользуем этот параметр позднее.

С помощью поля ввода Ease (Плавность) и ползункового регулятора, появляющегосяпри нажатии кнопки Q справа от этого поля ввода, можно задать ускорение или замед-ление анимации в разных местах траектории. Когда ползунковый регулятор перемеща-ется вниз (In), изменения начинаются медленно и ускоряются к концу. Если же ползун-ковый регулятор Ease (Плавность) перемещается вверх (Out), изменения начинаютсябыстро и замедляются к концу. При установленном по умолчанию значении параметра -0 - изменения происходят равномерно.

Page 55: 100 % самоучитель Macromedia Flash MX

54 100% самоучитель Flash MX

В открывающемся списке Rotate (Вращение) можно выбрать направление поворота объ-екта при движении: CW - Clockwise (По часовой стрелке) или CCW - Counterclockwise(Против часовой стрелки), а в поле ввода справа указать количество полных поворотов(times). Если оставить значение по умолчанию None (He задано), то вращение не выпол-няется, а если Auto (Автоматически), то поворот объекта необходимо указать на сцене.

> Установите флажок Orient to path (Ориентировать по траектории), чтобы заставить«спутник» двигаться по траектории, определенной на специальном ведущем слое,который мы создадим позднее.

> Установите флажок Sync (Синхронизация). Это гарантирует синхронизацию объектованимации и позволяет исправить ошибки, которые иногда возникают при анимацииобъектов, уже содержащих анимацию.

> Установите флажок Snap (Привязка), чтобы автоматически фиксировать объект натраектории, если его положение определено недостаточно точно. Но значительно на-дежнее «вручную» указать точное положение объекта.

> Сверните панель Properties (Свойства) щелчком мыши на значке Q слева от назва-ния панели. Установленные параметры движения будут применены к анимации.

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

Укажем положение конечных ключевых кадров для всех трех слоев на отметке 62временной шкалы.

> Установите указатель мыши у правого края окна шкалы времени (Timeline) в строкеслоя Спутник под меткой 62 шкалы нумерации кадров.

> Щелкните мышью в этом месте. В указанной позиции появится темный прямоугольник(Рис. 1.39), определяя место, где будет создан новый кадр.

Lt* Орбита * • Щ1

; G? Планета • • • 1

5 10 15

1%|[Н]| ' 1

20 25 30 35

12.0fpS|l 0 * | | < | \%Ь

40 45 50 55 60

1

Рис. 1.39. Место для создания ключевого кадра указано

Подобным же образом определим положение конечных ключевых кадров для слоев

Орбита и Планета. При этом необходимо удерживать нажатой клавишу |lSl

> Нажмите и удерживайте клавишу llShiftl.

> Не отпуская клавишу ([sj£J, щелкните мышью в строке слоя Орбита под меткой 62

шкалы нумерации кадров. В этом месте появится темный прямоугольник.

Page 56: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 55

> He отпуская клавишу llShml. щелкните мышью в строке слоя Планета под меткой 62шкалы нумерации кадров. В этом месте также появится темный прямоугольник,указывая место для нового кадра.

> Отпустите клавишу l[Shiftl.

Теперь в отмеченных темными прямоугольниками позициях шкалы времени (Timeline)следует вставить ключевые кадры одновременно для всех слоев.

>• Выберите команду меню Insert • Timeline • Keyframe (Вставить • Шкала времени •

Ключевой кадр) или нажмите клавишу IF 61.

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

Рис. 1.40. Созданы ключевые и промежуточные кадры

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

При создании ключевого кадра командой Insert • Timeline • Keyframe (Вставить •

Шкала времени • Ключевой кадр) или нажатием клавиши |^£j программа помещает внего изображение из ближайшего слева ключевого кадра, т.е. в нашем случае - из первого,и вновь созданный кадр становится текущим. Об этом свидетельствует положение крас-ного маркера проигрывающей головки на метке 62 шкалы нумерации кадров. Изображение,соответствующее этому кадру, вы видите на сцене. Оно пока ничем не отличается отизображения первого ключевого кадра. Чтобы анимация «заработала», изображение следуетизменить, указав конечную точку траектории «спутника». Для этого достаточно пере-местить изображение спутника на слое Спутник в конечную точку эллиптической орбиты.

>• Щелкните мышью в окне шкалы времени (Timeline) на слое Спутник, чтобы выде-лить его. При этом на сцене будет выделено изображение спутника.

> Установите указатель мыши, который примет формуна сцене.

>• Нажмите и удерживайте левую кнопку мыши.

, на изображении спутника

Page 57: 100 % самоучитель Macromedia Flash MX

56 100% самоучитель Flash MX

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

Рис. 1.41. «Спутник» перемещен в конечную точку орбиты

> Отпустите левую кнопку мыши. Положение «спутника» будет закреплено.

Таким образом, мы указали положение «спутника» в последнем ключевом кадре анима-ции, и программа автоматически обновила все созданные ранее промежуточные кадрырасчетной анимации.

Полученный результат можно, просмотреть.

> Выберите команду меню Control • Play (Управление • Проиграть) или нажмите кла-

вишу [[Enter].

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

File Edit View Intel! Modify Text Command. Control Window HelpTooh fspulnikJid

^ Scene 1

S » S Ujl 5 10 15 20 25 30 | | 35 «I 45 50 55

Puc. 1.42. Проигрывание анимации: «спутник» перемещаетсяпо кратчайшему расстоянию

Page 58: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 57

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

Так как орбита движения спутника уже нарисована и находится на слое Орбита, тодостаточно просто скопировать ее на ведущий слой.

> Щелкните мышью на слое Орбита в окне шкалы времени (Timeline). Этот слой и всеего кадры будут выделены. Одновременно будет выделен эллипс на сцене.

> Выберите команду меню Edit • Сору (Правка • Копировать). Выделенный объектбудет скопирован в буфер обмена.

Создадим над слоем Спутник с анимацией новый ведущий слой.

> Щелкните мышью в окне шкалы времени (Timeline) на слое Спутник, чтобы вы-делить его.

> Нажмите кнопку Add Motion Guide (Добавить траекторию движения) 4"» в левойнижней части окна шкалы времени (Timeline). Над слоем Спутник будет вставленновый ведущий слой, которому по умолчанию присвоено имя Guide: Спутник(Ведущий: Спутник) (Рис. 1.43).

Рис. 1.43. Вставлен ведущий слой

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

Вставить ведущий слой можно также командой меню Insert • Timeline • Motion Guide(Вставить • Шкала времени • Траектория движения). ^

Вставим изображение траектории из буфера обмена на ведущий слой Guide: Спутник.

> Щелкните мышью на слое Guide: Спутник в окне шкалы времени (Timeline), чтобывыделить его и снять выделение слоя Спутник.

> Выберите команду меню Edit • Paste in Place (Правка • Вставить в то же место).Изображение эллипса будет вставлено из буфера обмена на слой Guide: Спутник ивыделено на сцене.

Page 59: 100 % самоучитель Macromedia Flash MX

58 100% самоучитель Flash MX

>• Выключите отображение ведущего слоя Guide: Спутник, щелкнув мышью в егостроке на пересечении со столбцом со значком глаза Щ. Выделенное изображениеэллипса, находящееся на этом слое, будет скрыто. Останется видимым только эллипсна слое Орбита.

>• Нажмите клавишу pnter|, чтобы просмотреть соз-

данную анимацию.

Вы увидите, что теперь «спутник» движется по эл-липтической орбите (Рис. 1.44).

> Чтобы сделать проигрывание фильма циклическиповторяющимся, то есть таким, каким оно обычнобывает при просмотре в проигрывателе или браузере,выберите команду меню Control • Loop Playback(Управление • Циклическое проигрывание).

Рис. 1.44. Движение «спутника»по эллиптической орбите

>• Нажмите клавишу ]jEnter|. Теперь проигрывание анимации будет непрерывным, пока

вы не остановите его.

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

> Выберите команду меню Control • Stop (Управление • Остановка) или нажмите

клавишу [[Enter]. Проигрывание анимации прекратится.

> Сохраните фильм, нажав комбинацию клавиш I c t r l l+l[s].

У нижнего края окна шкалы времени (Timeline), в центре, расположены кнопки и поля счисловой информацией. Кнопки имеют следующее назначение:

\Т\ - Center Frame (Центрирование кадра) - позволяет переместить выделенный кадр вцентр окна шкалы времени (Timeline) в том случае, если этот кадр не виден. Это удобнаяальтернатива горизонтальной полосе прокрутки;

{%] - Onion Skin (Смежные кадры) - позволяет включить и выключить одновременноеотображение нескольких, смежных с текущим, кадров;

Щ - Onion Skin Outlines (Смежные кадры в виде контуров). Данный режим аналогиченпредыдущему, но все смежные кадры отображаются в виде контуров;

Щ - Edit Multiple Frames (Редактирование нескольких кадров) - включает и выключаетрежим одновременного редактирования нескольких кадров. Это может быть удобно присоздании покадровой (Frame-by-frame) анимации и не нужно для расчетной, так какпоследнюю можно редактировать только в ключевых кадрах;

|П] - Modify Onion Markers (Изменение границ смежных кадров) - открывает меню, вкотором можно выбрать количество одновременно видимых смежных кадров.

Следующие за перечисленными кнопками три поля - информационные:

Current Frame (Текущий кадр) - отображает номер текущего кадра;

Page 60: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 59

Frame Rate (Частота кадров) - частота кадров фильма, установленная в диалогеDocument Properties (Свойства документа);

Elapsed Time (Прошедшее время) - время в секундах от начала фильма до текущего кадра.

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

• создание начального ключевого кадра командой меню Insert • Timeline • Keyframe(Вставить • Шкала времени • Ключевой кадр); ,

• указание начальной точки траектории;

• определение типа расчетной анимации - Motion (Движение) - и ее параметров спомощью панели Properties (Свойства);

• создание конечного ключевого кадра;

• указание конечной точки траектории;

• создание траектории движения (Motion Guide) на особом слое.

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

Добавляем ключевые кадрыи масштабируем движущийся объект

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

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

> Выберите команду меню Window • Toolbars • Controller(Окно • Панели инструментов • Панель управления). На экранепоявится панель управления проигрыванием фильма (Controller) puc j 45(Рис. 1.45). Панель управления

> Переместите эту панель так, чтобы она не перекрывала сцену проигрываниеми окно шкалы времени (Timeline). фильма (Controller)

Шесть кнопок панели управления (Controller) - типичные кнопки управления обычногомагнитофона или плеера. Пользоваться ими очень просто.

Page 61: 100 % самоучитель Macromedia Flash MX

60 100% самоучитель Flash MX

• Нажмите кнопку | * j - Play (Проиграть). Начнется проигрывание анимации;

• Нажмите кнопку [_ J - Stop (Стоп). Проигрывание будет остановлено;

• Нажмите кнопку [^_J- Step Forward One Frame [>] (Кадр вперед). Проигрываю-щая головка на шкале нумерации кадров переместится вперед на один кадр. Этого

же результата можно добиться, нажав клавишу L J (точка в английской раскладке

клавиатуры);

• Нажмите кнопку [_ J - Step Back One Frame [<] (Кадр назад). На шкале времени

будет отмечен предыдущий кадр. К предыдущему кадру можно перейти также, на-

жав клавишу ||TJ (запятая в английской раскладке клавиатуры);

• Нажмите кнопку {^j - Go To End (В конец фильма). Проигрывающая головка пере-местится на последний кадр фильма;

• Нажмите кнопку [I<HJ - Rewind (В начало фильма). Текущим станет первый кадр

фильма. Такое же действие выполняет команда меню Control • Rewind (Управление •

В начало фильма) или нажатие комбинации клавиш |[сы ]+|[ Aitj+l[R|.

Продолжим редактирование фильма. Нам нужно добавить в начало каждого слоя по че-тыре обычных кадра. Это можно сделать с помощью команды меню Insert • Timeline •

Frame (Вставить • Шкала времени • Кадр) или нажатием клавиши |££]. В данном случае

удобней воспользоваться клавишей llF5l.

>- Убедитесь, что красный прямоугольный маркер проигрывающей головки установленна первом кадре шкалы нумерации кадров и в информационном поле CurrentFrame (Текущий кадр) у нижнего края окна шкалы времени (Timeline) указан но-мер текущего кадра - 1 .

> Нажмите 4 раза клавишу |r£J. В начало каждого слоя будет вставлено 4 обычныхкадра, и проигрывающая головка переместится на пятый кадр. Номер текущегокадра - 5 - вы увидите в поле Current Frame (Текущий кадр) в нижней части окнашкалы времени (Timeline).

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

> Нажмите кнопку Q J В правом верхнем углу окна шкалы времени (Timeline), справа отшкалы нумерации кадров. Откроется меню режимов отображения кадров.

> Выберите в появившемся меню команду Small (Мелкие). Ширина кадров в окнешкалы времени (Timeline) уменьшится так, что все кадры снова будут видны вокне (Рис. 1.46).

Page 62: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 61

Pwc. i.46. Ширина кадров уменьшена

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

> Щелкните мышью на слое Спутник в окне шкалы времени (Timeline), чтобы сделатьего активным.

>• Щелкните мышью на пересечении слоя Спутник с тонкой красной линией, идущей отпроигрывающей головки вниз. Пятый кадр слоя Спутник выделится черным цветом.

> Нажмите клавишу |££J. В текущую позицию активного слоя будет вставлен ключевойкадр, в который будет скопировано содержимое ближайшего слева ключевого кадра,т.е. первого.

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

> Нажмите кнопку [j^J - Rewind (В начало фильма) на панели управления (Controller),чтобы перейти к первому кадру анимации.

> Откройте панель Properties (Свойства) щелчком мыши на значке Q слева от назва-ния панели.

> Щелчком мыши выделите первый кадр в слое Спутник. Кадр выделится черным цве-том, а на панели Properties (Свойства) отобразятся элементы управления анимацией.

> Установите флажок Scale (Масштаб) на панели Properties (Свойства). Это позволитпостепенно изменять масштаб отображения «спутника» при его движении междутекущим и следующим ключевыми кадрами.

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

> Убедитесь, что проигрывающая головка находится вкадре 1, и выделите щелчком мыши изображениеспутника на сцене. Изображение будет заключено впрямоугольную рамку выделения, а на шкале временивыделятся первые пять кадров в слое Спутник.

Выберите команду меню Window • Design Panels •Transform (Окно • Панели конструирования •Трансформация) или нажмите комбинацию клавиш

GED+GD- На экране появится панель Transform Puc- L47- Панель Transform(Трансформация) (Рис: 1.47). (Трансформация)

•*Ч 100.0% I ? 1100.0% ЦТ] Constrain

Page 63: 100 % самоучитель Macromedia Flash MX

62 100% самоучитель Flash MX

>• Убедитесь, что вверху панели установлен флажок Constrain (Пропорционально),затем в первое поле вверху введите значение 10%. Одновременно это же значениеавтоматически вводится во второе поле.

> Нажмите клавишу I E n t e r ]. Установленный параметр будет применен и изображение

спутника в текущем первом кадре станет практически невидимым.

> Нажимайте кнопку [** ) - Step Forward One Frame [>] (Кадр вперед) на панели управ-ления (Controller) и наблюдайте, как при переходе от первого к пятому кадру посте-пенно увеличивается размер «спутника».

Далее мы выполним подобную операцию уменьшения масштаба объекта для последнегокадра фильма, поэтому оставьте панель Transform (Трансформация) на сцене. Но пред-варительно необходимо сделать ключевым 62 кадр слоя Спутник.

> Перетащите красный прямоугольный маркер проигрывающей головки на отметку 62. шкалы нумерации кадров в окне шкалы времени (Timeline) и убедитесь, что номерэтого кадра отображается в поле Current Frame (Текущий кадр).

> Щелчком мыши выделите 62 кадр в слое Спутник (кадр находится на пересечениислоя Спутник и красной линии, идущей вниз от проигрывающей головки). Кадр вы-делится черным цветом, а на панели Properties (Свойства) отобразятся элементыуправления анимацией.

> Нажмите клавишу |££j. В текущую позицию активного слоя будет вставлен ключевойкадр, в котором продублировано содержимое ближайшего слева ключевого кадра -пятого (Рис. 1.48).

| ' * Guide: Спутник • • Ё1 j

ВЦ П| i

j ЕР Орбита • • DJ[: G? Планета • • • I I

S 10 IS 20 25 30II 1 1 III 1 1 1 II l.tl.l Hit l.l.lll HIM

H I * N M H l « ||iMt«ii

35 « 45 SO 55 ЬйП 65 70 75 80 I1*)

*

|T

Рис. 1.48. Добавлены ключевые кадры

Включим для текущего ключевого кадра функцию масштабирования объекта.

> Убедитесь, что проигрывающая головка находится на отметке 62, а ключевой кадр 62в слое Спутник выделен. Если нет, выделите этот кадр щелчком мыши на кадре. Кадрзакрасится черным цветом, а вокруг спутника появится синяя рамка выделения.

> Если нужно, откройте панель Properties (Свойства) щелчком мыши на значке Q сле-ва от названия панели, и в группе элементов управления анимацией (в центре панели)установите флажок Scale (Масштаб). Это позволит, начиная с данного ключевогокадра до следующего, постепенно изменять масштаб движущегося объекта.

> Сверните панель Properties (Свойства) щелчком мыши на значке Q слева от назва-ния панели. Она нам пока не нужна.

Для последнего ключевого кадра слоя Спутник определим числовое значение масштаба.

Page 64: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 63

> Нажмите кнопку \ш\ - Go To End (В конец фильма) на панели управления (Controller).Текущим станет последний кадр фильма.

>• Щелкните мышью на последнем ключевом кадре слоя Спутник в окне шкалывремени (Timeline). Проигрывающая головка переместится к отметке последнегокадра анимации.

> Щелкните мышью на изображении спутника на сцене. Спутник будет выделен изаключен в прямоугольную рамку выделения.

>• На панели Transform (Трансформация) введите значение 10% в левое верхнее поле.Одновременно это же значение будет введено во второе поле, расположенное правее.

>• Нажмите клавишу l E n t e r ]. Заданное значение масштаба будет применено к изображе-

нию спутника, и оно станет практически невидимым.

> Просмотрите, как изменяется размер «спутника» между 62 и 66 кадрами, нажимаякнопки (_ J - Step Back One Frame [<] (Кадр назад) и \^*J - Step Forward One Frame[>] (Кадр вперед) на панели управления (Controller).

И, наконец, чтобы «спутник» на некоторое время «задержался» за «планетой», добавимключевые кадры в позицию 78 слоев Спутник, Орбита и Планета. Сначала укажем ме-сто для новых ключевых кадров.

> Нажмите клавишу i!Shiftl, и, удерживая её нажатой, последовательно щелкайте мы-шью в кадрах 78 слоев Спутник, Орбита и Планета анимации. Выделенные кадрызакрашиваются черным цветом, отмечая места для вставки кадров (Рис. 1.49).

•'"•»Guide: Спутник X

Q? Спутник • • Ш # j _ .

1 • j i " 5' " ' io' '" i s " a ' a 30' " 35 40 '£* so'" 55''' бо '" Щ

• Щ-' ••••;••••••• i

70 75 80 85

Рис. 1.49. Выделение кадров 78 в слоях Спутник, Орбита и Планета анимации

> Выберите команду меню Insert • Timeline • Keyframe (Вставить • Шкала времени •Ключевой кадр). В позиции 78 всех слоев будут вставлены и выделены ключевыекадры, в которые скопируется изображение из предыдущих ключевых кадров. Меж-ду новыми и предыдущими ключевыми кадрами добавятся обычные промежуточныекадры (Рис. 1.50).

•'\Guide: Спутник

СЗ Спутник

С? Орбита

j l? ! Планета t

X

f .

® n

• •• •• в

«г

15 10 15 202530354045

ШШШШШШШШШШШШШШШШ. . .

• •

5 0 5 5 6 0 6 5 7 0

ввввввК.

75 N80 85

гсс

*

Рис. 1.50. Добавлены ключевые и промежуточные кадры

Page 65: 100 % самоучитель Macromedia Flash MX

64 100% самоучитель Flash MX

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

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

> Нажмите кнопку Q J - Play (Проиграть) на панели управления (Controller). Начнется

проигрывание фильма.

Теперь в начале орбиты «спутник» постепенно увеличивается в размерах, как бы «вос-ходит», а в конце орбиты - уменьшается в размерах - «заходит» и на некоторое время«задерживается за планетой».

> Нажмите кнопку [ " J - Stop (Стоп) на панели управления (Controller), чтобы остано-вить проигрывание анимации.

>- Сохраните фильм, выбрав команду меню File • Save (Файл • Сохранить).

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

Создаем анимацию формы

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

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

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

> Щелкните мышью в окне шкалы времени (Timeline) поочередно на черных ромбикахв строках слоев Guide: Спутник, Спутник и Орбита столбца Q. В этих местах появят-ся значки Э, означающие, что слои заблокированы (Рис. 1.51).

"i Guide: Спутник X. Ш ЩG? Спутник . « и

Рис. 1.51. Слои заблокированы

Page 66: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 65^

Теперь на слое Планета удалим ключевой кадр в позиции 66: для создания анимацииформы нам нужны только два ключевых кадра - начальный и конечный.

>- Щелкните мышью в окне шкалы времени (Timeline) на ключевом кадре в позиции 66слоя Планета. Этот кадр будет выделен.

>- Выберите команду меню Modify • Timeline • Clear Keyframe (Модификация • Шка-

ла времени • Удалить ключевой кадр) или нажмите комбинацию клавиш |[Shiftl-Hr4.

Ключевой кадр в указанной позиции будет удален и заменен обычным кадром.

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

> Нажмите кнопку [_ J - Go To End (В конец фильма) на панели управления (Controller),чтобы сделать текущим последний кадр слоя Планета.

Для модификации градиента в программе Flash MX 2004 используется инструмент FillTransform Tool (F) (Преобразование заливки).

> Нажмите кнопку Fill Transform Tool (F) (Преобразование заливки) [y£j в секции Tools(Инструменты) панели инструментов, чтобы включить этот инструмент.

> Установите указатель мыши, который примет форму U£r на сцене, на градиентнойзаливке «планеты» и щелкните на ней мышью. Вокруг градиентной заливки появитсяокружность, ограничивающая градиент (Рис. 1.52).

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

В центре окружности, ограничивающей градиент, находится р j « juaD

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

>• На шкале времени щелкните мышью на значке Q слева от надписи Timeline (Шкалавремени). Шкала времени свернется, но вы в любой момент можете ее раскрыть,повторно щелкнув мышью на том же значке. В окне фильма останется только увели-ченная сценах текущим кадром (Рис. 1.53).

Переместим центр градиента.

> Установите указатель мыши на круглом маркере в центре круга, ограничивающегоградиент, так, чтобы указатель мыши принял форму •$•.

> Нажмите и удерживайте левую кнопку мыши.

3-4724

Page 67: 100 % самоучитель Macromedia Flash MX

66 100% самоучитель Flash MX

sdia Flash MX 2004 - [Sputmk.fla]File Edit Viet* Insert Modify Text Commands Control Window Help

k k

/ 9

U AО D,

a

.- m

ft Ъ 85

Options

. 1.53. Окно шкалы времени (Timeline) свернуто

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

File Edit View Insert Modify Text Commands Control Window Help

/ pй АО •

- ;

Sputnik.fla"

gg Scene 1> » • • • !

н

Рис. 1.54. Центр градиентной заливки перемещен вниз

Page 68: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 67

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

>- Щелкните мышью на свободном пространстве рабочего окна. Круг с маркерамиисчезнет.

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

> Нажмите кнопку [|^J - Rewind (В начало фильма) на панели управления (Controller),чтобы сделать текущим первый ключевой кадр слоя Планета. На изображении плане-ты снова появится круговая градиентная заливка, так как этот кадр еще не изменялся.

>• С помощью вертикальной полосы прокрутки переместите кадр в нижнюю часть сцены.

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

> Переместите круглый маркер в центре окружности, ограничивающей градиент, влевовверх, вдоль малой оси «эллиптической орбиты» так, чтобы перемещенная окруж-ность касалась «планеты» сверху и ее центр находился на продолжении малой осиэллипса (Рис. 1.55). Заливка «планеты» станет сплошной коричневой.

edid Flash MX 2004 - [Sputmk.lla'lFile Edit View Insert Modify Тек! Commands Control Window Help

Toois I SputnikJIa"

Рис. 1.55. Центр градиентной заливки перемещен вверх

> Щелкните мышью на свободной области окна фильма. Круг с маркерами исчезнет.

> Раскройте шкалу времени (Timeline), повторно щелкнув мышью на значке Q слева отназвания панели. Окно шкалы времени снова появится на экране.

Page 69: 100 % самоучитель Macromedia Flash MX

68 100% самоучитель Flash MX

При открытии окна шкалы времени (Timeline) программа автоматически восстанав-ливает обычную (Normal) ширину кадров, и теперь в этом окне последние кадрыфильма не видны.

> Нажмите кнопку Q | справа от шкалы нумерации кадров и в появившемся меню вы-берите команду Small (Мелкие). Ширина кадров в окне шкалы времени (Timeline)уменьшится, и все кадры фильма снова отобразятся в этом окне.

> С помощью вертикальной полосы прокрутки сцены переместите кадр так, чтобы онбыл полностью виден в рабочей области.

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

У Щелкните мышью на названии слоя Планета в окне шкалы времени (Timeline). Всекадры этого слоя и изображение планеты на сцене будут выделены.

>• Раскройте панель Properties (Свойства), щелкнув мышью на значке Q слева от на-звания панели.

>• В открывающемся списке Tween (Расчетная анимация) выберите пункт Shape(Форма). На панели Properties (Свойства) появятся элементы управления анимациейформы "(Рис. 1.56). В окне шкалы времени (Timeline) на слое Планета появитсястрелка между первым и последним ключевыми кадрами, указывающая на то, чтоанимация формы создана.

11

H Frame| «*„

| Label type: JNam*

1L

Tween:Ease:

Blend:

| ShapeE IF][Distributive

Id

Ы

Sound:Effect:Sync:

JNone|None(Event LJJReNo sound selected.

u:eat

Ы ©

•a.

Рис. 1.56. Панель Properties (Свойства) с элементами управления анимацией формы

Поле ввода и ползунковый регулятор Ease (Плавность) панели Properties (Свойства)имеют такое же назначение, как и в анимации движения. Перемещение ползунковогорегулятора вниз (In) замедляет анимацию в начале, а вверх (Out) - в конце.

В открывающемся списке Blend (Переход) можно выбрать один из методов созданияпромежуточных форм:

Distributive (Распределенный) - создает анимацию, промежуточные формы которойимеют гладкие очертания;

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

> Сверните панель Properties (Свойства), щелкнув мышью на значке Q слева отназвания панели.

Page 70: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 69

> Выберите инструмент [kj - Selection Tool (V) (Выделение) в секции Tools (Инстру-менты) панели инструментов и щелкните мышью на свободном пространстве рабочегоокна, чтобы снять выделение кадров и объектов.

Вы увидите, что все кадры слоя Планета в окне шкалы времени (Timeline) залиты зеле-ным цветом (Рис. 1.57). Так обозначается анимация формы.

: •'"» Guide: Спутник

i G? Спутник

| G? Орбита

x e

• a

• e

i d

i ii i

Ш

5

—••>

i

10 15 20: . -.. '

• • : ; • / : • • • : ; : : : ; • ' • " « • • • • ' •

1 B I H

2 5 3 0 3 5 4 0

1 2 . 0 f p s | | 0 . 0 s \ \ *

4 5 5 0 5 5 C O 6 5 7 0

d

d .

1

7 5 i

» i

I

-

Рис. 1.57. Анимация формы создана

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

> Нажмите кнопку [ > ) - Play (Проиграть) на панели управления (Controller). Начнетсяпроигрывание фильма.

Вы увидите, что теперь не только «спутник» движется по орбите вокруг «планеты», но исама «планета» вращается вокруг своей оси. Эффект вращения планеты имитируетсяперемещением градиентной заливки в направлении, примерно совпадающем с малойосью эллиптической орбиты «спутника» (Рис. 1.58).

>• Нажмите клавишу (jEnterj, чтобы остановить проигрывание

анимации.

Сохраните фильм, нажав комбинацию клавиш II c t r l |+Ц S |.

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

Рис. 1.58. Проигрываниеанимации

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

Озвучиваем фильм

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

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

Page 71: 100 % самоучитель Macromedia Flash MX

70 100% самоучитель Flash MX

книгой. Файл шаблона с именем Шаблон для выполнения заданий.Яа можно найти впапке Шаблон на компакт-диске, приложенном к книге. Сейчас мы вставим в фильмзвук Звук Microsoft.wav.

> Вставьте в дисковод CD-ROM компакт-диск, приложенный к книге.

>• Выберите команду меню File • Import • Open External Library (Файл • Импорт •

Открыть внешнюю библиотеку) или нажмите комбинацию клавиш )[ctri| +|[shift] +i[О]_

На экране появится диалог Open as Library (Открыть как библиотеку).

> Найдите на диске папку Шаблон, раскройте ее, выделите файл Шаблон для выпол-нения заданий.Яа и откройте его двойным щелчком мыши на имени файла.

> На экране появится библиотека файла-шаблона, в которую уже помещен нужный намзвук Звук Microsoft.wav (Рис. 1.59).

Как видите, окно библиотеки внешнего фильма окрашенов серый цвет, и вы можете свободно переносить любые ееобъекты в библиотеку своего фильма. Сейчас мы перене-сем в библиотеку фильма Спутник.Яа звуковой файл ЗвукMicrosoft.wav.

> Выберите команду меню Window • Library (Окно • Биб-лиотека). Откроется библиотека фильма Спутник.Ла, в ко-торой пока содержится всего один клип - Спутник.

> Щелчком мыши выделите звуковой файл ЗвукMicrosoft.wav в библиотеке внешнего фильма и перета-щите его в список библиотеки фильма Спутник.Яа. ФайлЗвук Microsoft.wav будет помещен в библиотеку, и теперьвы можете применить его в фильме.

> Закройте библиотеку фильма Шаблон для выполнениязаданий.Яа командой Close Panel (Закрыть панель) менюокна библиотеки. Пока что она нам не нужна.

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

v Щелкните мышью на значке или имени импортированногофайла Звук Microsoft.wav в окне библиотеки (Library).Строка с именем файла будет выделена и в верхней частиокна библиотеки появится амплитудный график данногофайла (Рис. 1.60).

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

> Нажмите кнопку 0 в верхней части окна библиотеки(Library). Вы услышите звучание выбранного файла.

Остановить прослушивание можно с помощью кнопки [•].

1 B |

| • Library • Шаблон для выпол... S-, 14 items

| Name«]~ Beam Scan

«}£ Book Drops

k\~; Brick Drops

<|J Звук Microsoft.wav

• o - o o © E D

ни

[KindSoiSOLSou

Л.

Рис. 1.59. Библиотекашаблона, импортиро-

ванная в фильм

Рис. 1.60. Файл ЗвукMicrosoft, wav в окнебиблиотеки фильма

Page 72: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 71

>• Закройте окно библиотеки (Library) командой Close Panel (Закрыть панель) менюокна библиотеки.

Озвучивание фильма сводится к созданию нового слоя для звука, назначению слою зву-кового файла из числа хранящихся в библиотеке и настройке параметров звука на пане-ли Properties (Свойства).

Создадим для звука новый слой.

>• Щелкните мышью на слое Guide: Спутник, чтобы сделать его активным.

Над этим слоем поместим слой для звука.

> Нажмите кнопку Insert Layer (Вставить слой) t p у нижнего левого края окна шкалывремени (Timeline). Над слоем Guide: Спутник будет вставлен и станет активнымновый слой.

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

Звук - И нажав Клавишу j[Enter].

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

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

> Щелкните мышью в окне шкалы времени (Timeline) на первом кадре слоя Звук. Этоткадр будет выделен.

~>^Если нужно начать проигрывание звука не с первого кадра, а сдругого, то следует сделать этот кадр ключевым командой ме-ню Insert Ф Timeline Ф Keyframe (Вставить Ф Шкала времени ФКлючевой кадр). Первый кадр слоя становится ключевым авто-матически.

Воспользуемся панелью Properties (Свойства) для назначения слою звукового файла иуказания параметров звука.

>• Если нужно, откройте панель Properties (Свойства) щелчком мыши на значке Qслева от названия панели (Рис. 1.61).

и

Н1 Frame

I1I Label type: (Name

1L

Tween:Jf-ione •"• | Sound:Effect:Sync:

j None[None|ivven" |"|| RepeatNo sound selected.

Til | Edit

Ы111Z3Z3 ®

Рис. 1.61. Для назначения слою звукового файла используетсяпанель Properties (Свойства)

Page 73: 100 % самоучитель Macromedia Flash MX

72 100% самоучитель Flash MX

Открывающийся список Sound (Звук) в правой части панели содержит перечень всехзвуковых файлов, импортированных в фильм.

> В открывающемся списке Sound (Звук) выберите файл Звук Microsoft.wav. Под этимсписком появится информация о выбранном файле, а в окне шкалы времени(Timeline), на слое Звук отобразится амплитудный график файла (Рис. 1.62).

ГТУВЯ УДЯ< '"iGuide; Спутник X Ш

0? Спутник • Ш

| ©Орбита • §

G? Планета • •

•ь> Л £з

•Q•iаЕ

•© !

1 '5 10 " 15 ' 20

-_ »

. ' • '" .V:71 [ П И Ш И 1 |

-!-П-.-ГГГГ'^Г;-Г?-ТГ^ГТТГГ7ГГП

25 30 35 40 45

12.0fps|| 0.0s || 4 j j

50 55 60 Б5 70 75 80

11d

.

---- ш

..t

Рис. 1.62. Слою Звук назначен звуковой файл

В открывающемся списке Effect (Эффект) панели Sound (Звук) можно выбрать звуковойэффект для оформления фильма:

None (He задан) - эффекты не применяются;

Left Channel (Левый канал) — звук воспроизводится только в левом канале;

Right Channel (Правый канал) - звук воспроизводится только в правом канале;

Fade Left to Right (Перемещение вправо) - звук перемещается из левого канала в правый;

Fade Right to Left (Перемещение влево) - звук перемещается из правого канала в левый;этот и предыдущий эффекты позволяют имитировать объемность звука;

Fade In (Нарастание) - в процессе проигрывания громкость звука постепенно нарастает;

Fade Out (Затухание) - в процессе проигрывания громкость звука постепенно затухает;

Custom (Пользовательский) - эффект, созданный пользователем путем редактированиязвуковой дорожки в диалоге Edit Envelope (Редактирование огибающей), который от-крывается нажатием кнопки Edit (Редактирование) панели Properties (Свойства).

Открывающийся список Sync (Синхронизация) позволяет выбрать метод синхронизациизвука:

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

Start (Запуск) - выполняет те же функции, что и метод Event (Событие), обеспечиваяпроигрывание звука. Если звук не воспроизводится, он начинает звучать. Если же звукуже запущен в другом кадре, то проигрывание второго экземпляра звука не запускается;

Stop (Стоп) - останавливает воспроизведение указанного звукового файла. Этот методудобно использовать, когда требуется остановить один звук из нескольких, проигрывае-мых одновременно;

Page 74: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 73

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

Таким образом, Macromedia Flash использует звуковое сопровождение двух типов: собы-тийное (Event) и потоковое (Stream). При событийной синхронизации, к которой отно-сятся первые три метода, звук должен быть предварительно полностью загружен на ло-кальный компьютер, а проигрывание, начавшись, продолжается до тех пор, пока не бу-дет остановлено. Если звук должен повторяться, то он дублируется, то есть не требуетсяповторная загрузка. Потоковый звук начинает воспроизводиться сразу после загрузкидостаточного объема данных для озвучивания нескольких первых кадров. После началапроигрывания загрузка продолжается. Причем звук загружается столько раз, сколько разон повторяется.

При событийной (Event) синхронизации в раскрывающемся списке Sound Loop (Циклы)панели Properties (Свойства) можно выбрать один из двух вариантов проигрывания:Repeat (Повторить), а затем в правом поле Number of times to loop (Число повторов)указать число циклов воспроизведения звука, а можно выбрать пункт Loop (Непрерывно),и тогда звук будет воспроизводится непрерывно.

> Сверните панель Properties (Свойства), не изменяя значения параметров, предлагае-мых по умолчанию, щелкнув мышью на значке Q слева от названия панели.

> Нажмите клавишу [[Enter], чтобы просмотреть анимацию и прослушать звуковое со-

провождение.

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

>- Нажмите кнопку | и j - Stop (Стоп) на панели управления (Controller), чтобы остано-вить проигрывание фильма.

> Выбрав команду меню File • Save (Файл • Сохранить), сохраните изменения в фильме.

Для звукового оформления фильма в среде Windows программа Macromedia Flash позво-ляет импортировать звуковые файлы форматов только WAV и МРЗ. Если на вашем ком-пьютере установлена программа QuickTime версии 4.0 или выше, то вы можете такжеимпортировать звуковые файлы форматов Sound Only QuickTime Movies и Sun AU. Таккак звуковые файлы формата WAV обычно имеют большой объем, то в процессе публи-кации они сжимаются. Поддержка формата МРЗ позволяет импортировать уже сжатыйзвук. Это сокращает время публикации фильмов с таким звуком, так как не требуетсядополнительное сжатие, и уменьшает размер файла окончательного фильма, а такжетребуемый для воспроизведения объем оперативной памяти. Поэтому, по возможности,следует использовать именно данный формат.

Page 75: 100 % самоучитель Macromedia Flash MX

74 100% самоучитель Flash MX

Невидимая кнопка

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

Чтобы созданный нами фильм с анимацией мог использоваться в качестве заставки кглавной странице какого-либо сайта, необходимо предусмотреть возможность переходас фильма на сайт. На Web-странице такой переход обычно осуществляется щелчкоммыши на гипертекстовой ссылке. В фильме Flash, как мы увидим в дальнейшем, такжеможно использовать гипертекстовые ссылки. Но, кроме них, загрузить Web-страницуможно нажатием кнопки. Сделаем так, чтобы кнопкой служило изображение вращаю-щейся планеты и установка указателя мыши на ней вызывала появление надписи ТРИ-УМФ, а щелчок мышью на изображении планеты изменял начертание надписи и загру-жал в окно браузера главную страницу сайта издательства ТРИУМФ.

Macromedia Flash позволяет в любой момент изменить тип экземпляра эталона илипреобразовать графическое изображение в эталон любого типа, в том числе и Button(Кнопка). Но поскольку с изображением планеты связана анимация, то его нельзя преоб-разовать в кнопку, так как анимация перестанет работать. Поэтому мы создадим неви-димую кнопку такой же формы и размеров, как и изображение планеты, и поместим еена новый слой над слоем Планета. Для этого скопируем изображение планеты в буферобмена, чтобы затем вставить его в кнопку. Не имеет значения, какой ключевой кадрслоя Планета мы используем - первый или последний - и что изображено на нем. Он всеравно не будет виден на экране. Имеет значение только форма и размер области, зани-маемой этим изображением.

> Нажмите кнопку \ш\ - Rewind (В начало фильма) на панели управления (Controller),чтобы перейти к первому кадру фильма.

> Убедитесь, что в секции Tools (Инструменты) панели инструментов выбран инстру-

мент [ k \ - Selection Tool (V) (Выделение). Если это не так, выберите его.

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

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

>• Нажмите и удерживайте левую кнопку мыщи.

> Не отпуская левую кнопку мыши, перемещайте указатель мыши вниз, пока в окнешкалы времени (Timeline) не появится слой Планета.

>• Отпустите левую кнопку мыши. Новая высота окна шкалы времени (Timeline) будетзакреплена.

Page 76: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 75

> Щелкните мышью на названии слоя Планета в окне шкалы времени (Timeline), что-бы сделать его активным. Изображение планеты будет выделено также и на сцене.

> Выберите команду меню Edit • Сору (Правка • Копировать). Изображение текущегокадра будет скопировано в буфер обмена.

Создадим новый эталон типа Button (Кнопка).

> Нажмите комбинацию клавиш ll c t r l l+ilF8l. На экране появится диалог Create New

Symbol (Создание эталона).

> В поле ввода Name (Имя) введите имя создаваемого эталона - Кнопка.

>• В группе переключателей Behavior (Тип) установите переключатель Button (Кнопка).

> Закройте диалог Create New Symbol (Создание эталона), нажав кнопку ОК.Программа переключится в режим редактирования эталона Кнопка.

В отличие от эталонов типов Movie Clip (Клип) и Graphic (Графический), как уже отме-чалось выше, эталон типа Button (Кнопка) имеет только четыре кадра, которые отобра-жаются в окне шкалы времени (Timeline) против слоя Layer 1 (Рис. 1.63).

«•in

шзш не1 Up iover|Down| Hit |

[i1Ы%11*1 lull i 112.0fpsJ|_0.0s \\j_1 •

ж

Рис. 1.63. Окно шкалы времени (Timeline) в режиме редактированияэталона типа Button (Кнопка)

Каждый кадр имеет собственное имя, которое отображается в верхней части окна шкалывремени (Timeline), обозначающее соответствующее этому кадру состояние кнопки:

Up (Вне) - состояние кнопки, которое отображается, когда указатель мыши находится заее пределами;

Over (Над) - состояние кнопки, которое видит пользователь, когда указатель мышинаходится над ней и кнопки мыши не нажаты;

Down (Нажатие) - состояние кнопки, которое отображается, когда указатель мышинаходится на ней и нажимается левая кнопка мыши;

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

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

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

Page 77: 100 % самоучитель Macromedia Flash MX

76 100% самоучитель Flash MX

Щелкните мышью в окне шкалы времени (Timeline) на пересечении строки с назва-нием слоя Layer 1 и столбца Hit (Область). Будет выделено темным прямоугольникомместо для кадра Hit (Область).

Нажмите клавишу |[F6J. В указанном месте будет вставлен ключевой кадр. Имя кадраHit (Область) выделится красным цветом и на него переместится красная вертикаль-ная линия, указывая на то, что этот кадр текущий.

Выберите команду меню Edit • Paste in Center (Правка • Вставить в центр). Изо-бражение из буфера обмена будет вставлено в центр кадра Hit (Область) и на сценепоявится и будет выделен круг с коричневой заливкой (Рис. 1.64).

File Edit View Insert Modify Text Command* Contiol Window Help

Рис. 1.64. Изображение из буфера обмена вставлено в кадр Hit (Область)

> Щелкните мышью на свободном пространстве сцены, чтобы снять выделение объекта.

Создадим в пределах вставленного круга надпись ТРИУМФ, которую затем переместим вкадры Over (Над) и Down (Нажатие). Для указания параметров текста воспользуемсяпанелью Properties (Свойства).

> Если нужно, раскройте панель Properties (Свойства) щелчком мыши на значке Qслева от названия панели. Затем на панели инструментов выберите инструмент TextTool (Текст). На панели Properties (Свойства) немедленно отобразятся свойстватекста (Рис. 1.65).

> В открывающемся списке Font (Шрифт) панели Properties (Свойства) выберитегарнитуру шрифта для текста, содержащую символы кириллицы, из числа шрифтов,установленных на вашем компьютере.

Page 78: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 77

|staticText Щ внеT~\ П Auto kern / к

0 [ [•»{ 41 « Щ П Use device fonts

target:

Puc. 1.65. При активизации инструмента Text Tool (Текст) на панели Properties(Свойства) отображаются свойства текста

> В поле Font Size (Размер шрифта) вводом с клавиатуры или с помощью ползунково-го регулятора установите размер шрифта порядка 50-60 пунктов, в зависимости отгарнитуры. Этот размер вы потом откорректируете.

Нажмите кнопку В , чтобы установить полужирное начертание шрифта.

> Нажмите кнопку Щ - Text (fill) color (Цвет текста (заливки)) и в появившейся палитревыберите цвет для текста, который будет хорошо виден на фоне коричнево-белойградиентной заливки «планеты».

Теперь можно ввести текст.

> Установите указатель мыши, который примет форму Ид на сцене, внутри круга, улевого его края.

> Щелкните мышью в этом месте. Появится текстовый блок - узкий прямоугольник стекстовым курсором внутри.

> Введите с клавиатуры надпись: ТРИУМФ. Вводимый текст будет отображаться втекстовом блоке, отодвигая его правую границу (Рис. 1.66).

lomedia Flash MX 2004 - ISpulrnk.Ma"]File Edit View Insert Modify Text Command* Control Window Help

k k

A[ 3

W: | 256.8 | X; j-124.5 )u Н:[б4.9 | у; 1-39.8 |

[Times New Roman Cyr ~[£fl j 55 |>| Д |rjgjj / Й, ||Ц Ш Ш Ш

Щ/ |0 |p| AS [Normal |^[| П Auto kern / k S | Format... ~]

Л *> • Use device fonts.

] Target:

Puc. 1.66. Ввод текста

Page 79: 100 % самоучитель Macromedia Flash MX

78 100% самоучитель Flash MX

> Чтобы завершить ввод надписи, нажмите кнопку [kj - Selection Tool (V) (Выделе-ние) в секции Tools (Инструменты) панели инструментов. Текстовое поле исчезнет.Надпись будет закреплена и выделена тонкой синей рамкой выделения.

> Переместите надпись ТРИУМФ так, чтобы она располагалась в центре круга (Рис. 1.67).

>• Если нужно, измените размер шрифта текста, чтобынадпись не выходила за пределы круга.

Вырежем надпись ТРИУМФ из кадра Hit (Область) в буферобмена, чтобы затем вставить ее в кадры Over (Над) иDown (Нажатие), в которых создадим ключевые кадры.

> Убедитесь, что надпись ТРИУМФ по-прежнему выделена.

> Выберите команду меню Edit • Cut (Правка • Вырезать).Надпись ТРИУМФ исчезнет с текущего кадра и будетпомещена в буфер обмена.

>- Щелкните мышью в строке Layer 1 окна шкалы времени (Timeline) под названиемкадра Over (Над). В этом месте появится темный прямоугольник, указывающий ме-сто для кадра.

> Выберите команду меню Insert • Timeline • Keyframe (Вставить • Шкала времени •Ключевой кадр), чтобы вставить ключевой кадр.

>• Выберите команду меню Edit • Paste in Place (Правка • Вставить в то же место).Текст из буфера обмена будет вставлен в текущий кадр Over (Над) и появится насцене (Рис. 1.68). При этом автоматически будет создан и отмечен прямоугольникомобычный кадр Down (Нажатие).

; 6 ? Н а д п и с ь с о з д а н а

dia Flash MX 2004 - ISputnik.fla'lFile Edit View Insert Modify Text Commands Control Window Help

. e x•, I м Ы

;* /?

О, ТРИУМФС dors

/и?! in

Label type: [feme

Tween: Р°"в 5ound: [None

Effect: | [gone 33 {ШП

No sound selected.

Puc. 1.68. Надпись вставлена в кадр Over (Над)

Page 80: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 79

Вставим ключевой кадр и надпись также в кадр Down (Нажатие).

>•• Щелкните мышью в окне шкалы времени (Timeline) на кадре Down (Нажатие), чтобывыделить его. Надпись ТРИУМФ не исчезнет со сцены. Это означает, что она ужеавтоматически вставлена в данный кадр из левого ключевого кадра Over (Над).

> Нажмите клавишу |^J , чтобы создать ключевой кадр.

Изменим начертание надписи ТРИУМФ в кадре Down (Нажатие) на курсивное.

>- Убедитесь, что надпись ТРИУМФ выделена.

> Нажмите кнопку X на панели Properties (Свойства). Начертание выделенного

текста станет курсивным.

> Сверните панель Properties (Свойства) щелчком мыши на значке Q слева от назва-ния панели.

Эталон Кнопка готов. Теперь нужно поместить экземпляр этого эталона в фильм.

>- Щелкните мышью на надписи Scene 1 (Сцена 1) в левой верхней части окна фильма,чтобы перейти к редактированию сцены.

Создадим для экземпляра кнопки новый слой над слоем Планета.

>• Убедитесь, что слой Планета в окне шкалы времени (Timeline) выделен. Если это нетак, щелчком мыши выделите его.

> Нажмите кнопку Insert Layer (Вставить слой) t ? в левой нижней части окна шкалывремени (Timeline). Будет вставлен и выделен новый слой.

> Переименуйте новый слой. Дважды щелкните мышью на его имени, введите новое

имя - Кнопка - и нажмите клавишу [[Enter].

Переместим на этот слой из библиотеки экземпляр эталона Кнопка.

> Выберите в меню команду Window • Library (Окно • Библиотека). Откроется окнобиблиотеки (Library).

>- Переместите значок эталона Кнопка из окна библиотеки (Library) на сцену и распо-ложите его в центре круга-«планеты» (Рис. 1.69).

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

> Закройте окно библиотеки (Library), нажав кнопку [х] в правом верхнем его углу.

> Воспользовавшись клавишами \lj, I? К ||~»], [1*—1, совместите выделенную голубую

«кнопку» с «планетой».

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

Page 81: 100 % самоучитель Macromedia Flash MX

80 100% самоучитель Flash MX

File Edit View Insert Modify Text Commands Control Window Help.. 3 к

Рис. 1.69. Экземпляр кнопки помещен на новый слой

> Выберите команду меню Control • Enable Simple Buttons (Управление • Доступ к

кнопкам) или нажмите комбинацию клавиш 11 c t r l l+ll A l t l+ljB |. Голубой круг на сценеисчезнет. Теперь «кнопка» будет вести себя не как графический объект, а как кнопка,отвечая на действия мыши.

Пока указатель мыши находится за пределами круга-«планеты», т.е. за пределами области срабатывания кнопки,проигрывается кадр Up (Вне), для которого состояние кнопкине определено.

> Установите указатель мыши на изображение планеты, т.е.в пределы области срабатывания кнопки. Теперь проигры-вается кадр Over (Над) и внутри круга появляется надписьТРИУМФ (Рис. 1.70).

> Нажмите и удерживайте левую кнопку мыши. Программаперейдет к проигрыванию кадра Down (Нажатие). Начер-тание надписи ТРИУМФ станет курсивным (Рис. 1.71).

>• Отпустите левую кнопку мыши и удалите указатель мышиза пределы круга-«планеты». Надпись ТРИУМФ исчезнет -снова будет проигрываться кадр Up (Вне).

i—i

Рис. 1.71. Кнопка мышинажата

АТРИУМФк••; k :J

Рис. 1.70. Указательмыши над кнопкой

> Нажмите кнопку | • j - Play (Проиграть) на панели управле-ния (Controller) и проверьте, как работает кнопка в процес-се проигрывания фильма.

>• Остановите проигрывание, нажав клавишу [Enter].

ВвТРИУМФ

к * Авв

Page 82: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 81

> Выберите команду меню Control • Enable Simple Buttons (Управление • Доступ ккнопкам), чтобы выключить режим реагирования кнопки на действия мыши. Областьна сцене в пределах кнопки снова окрасится зеленым цветом, и кнопка будет вестисебя как графический объект.

>• Подберите в диалоге Document Properties (Свойства документа) цвет фона дляфильма - такой, на котором объекты анимации будут хорошо видны.

Подготовка графической части фильма закончена.

> Сохраните фильм, выбрав команду меню File • Save (Файл • Сохранить).

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

Создание интерактивных роликов

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

Чтобы сделать фильм интерактивным, в Macromedia Flash используются специальныепрограммы, называемые сценариями, или скриптами (от английского слова script -сценарий), содержащие наборы инструкций или команд (actions), написанных на языкеActionScript, которые выполняются при наступлении определенных событий. Таким со-бытием может быть достижение определенного кадра фильма, нажатие пользователемклавиши на клавиатуре или кнопки мыши, установка указателя мыши над указаннойобластью и др. Инструкции скрипта, которые называются также командами или опера-торами, и определяют реакцию Macromedia Flash на возникновение события.

Команды скрипта, выполняющиеся при наступлении того или иного события, указыва-ются для кадра, клипа или кнопки с помощью специальной панели Actions (Команды).Полное название этой панели Actions - Frame (Команды - Кадр), Actions - Movie Clip(Команды - Клип) или Actions - Button (Команды - Кнопка) - зависит от того, чтовыделено на сцене - кадр, клип или кнопка. Если команды заданы для кадра или клипа,то они выполняются при их проигрывании, а если для кнопки, - то при возникновениисобытия, связанного с кнопкой, например, щелчка мыши.

В предыдущих версиях Flash для ввода кода скрипта существовала возможность исполь-зования панели Actions (Команды) в режиме Normal Mode (Обычный режим), в которомвсе команды задаются визуально, путем выбора из меню или из перечня команд, и зна-ния языка ActionScript практически не требовалось. Однако в версии Flash MX 2004 этотрежим не предусмотрен, и для написания сценария требуются несколько большие усилия.

Page 83: 100 % самоучитель Macromedia Flash MX

82 100% самоучитель Flash MX

Создадим для нашего фильма простой скрипт, который позволит управлять его проиг-

рыванием таким образом, чтобы нажатие клавиши |[ пробел ] останавливало проигрыва-

ние анимации, а нажатие клавиши [[Enter) - возобновляло проигрывание. Кроме того,

поскольку мы создали фильм как заставку к главной странице сайта издательстваТРИУМФ, то щелчок мышью на кнопке-«планете» должен вызывать загрузку в окнобраузера главной страницы сайта, находящейся по адресу http://www.triumph.ru.

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

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

> Раскройте панель Actions - Button (Команды - Кнопка) щелчком мыши на значке Qслева от названия панели. Затем перетащите панель в середину рабочей области ирасширьте ее, перетаскивая за края, так, чтобы она выглядела примерно как на ри-сунке внизу (Рис. 1.72).

(*! g.lProperly9 «® onCbpEv.nl® rtmoveMovtaClip® KtProperly@ sUrtDrag® stopDrag® targelPalh

Cutrent Saladion

Scene 1Symbol C*finition(0

ы

в

. В.

Рис. 1.72. Панель Actions - Button (Команды - Кнопка)

Если панель была закрыта, то ее можно открыть командой меню Window • Development

Panels • Actions (Окно • Панели разработки • Команды) или нажатием клавиши \\Щ.

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

Рис. 1.7.3. Кнопки окна команд

Page 84: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 83

Ниже приведено краткое описание этих кнопок.

*3» - Add a new item to the script (Добавить в скрипт элемент) - щелчок на этой кнопкеоткрывает каскадное меню, позволяющее добавлять в скрипт новые элементы кода;

i§> - Find (Поиск) - открывает окно со строкой поиска, позволяющее находить в кодеотдельные выражения, переменные и т.п.;

^h, - Replace (Замена) - открывает окно поиска с заменой, позволяющее находить и за-менять в коде отдельные выражения, переменные и т.п. Очень полезное средство, помо-гающее быстро внести поправки в обширный код;

О - Insert a target path (Вставить цель) - открывает диалог, позволяющий вставить вкод адрес целевого объекта (клипа, кнопки, текстового поля, встроенного объекта видео);

V - Check Syntax (Проверить синтаксис) - проверка синтаксиса кода ActionScript. Приобнаружении в коде ошибок появляется соответствующее сообщение;

Ш - Auto Format (Автоформат) - форматирует код в соответствии с настройками поль-зователя в диалоге Auto Format Options (Параметры автоформата). (Диалог открываетсяиз меню окна). Если в коде есть ошибки, программа откажется форматировать код и вы-ведет сообщение об ошибке;

(Ч - Show Code Hint (Подсказать код) - подсказывает ввод доступных элементов кодапо ходу работы. Очень важное средство, намного ускоряющее кодирование.

В правом конце панели есть еще три кнопки, позволяющие открывать справку(Reference), устанавливать и удалять точки прерывания (Debug Options) и задавать раз-ные параметры форматирования кода (View Options), например, перенос строк.

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

> Нажмите кнопку Add a new item to the script (Добавить в скрипт элемент) ф в верх-ней части панели команд и в появившемся меню выберите команду Global Functions •Movie Clip Control • on (Глобальные функции • Управление клипом • на). На панеликоманд появится код обработчика события (Рис. 1.74).

Q5 g«tPi-op.rty® on@ ondipEvent@ removeMovieClip@ setProperty@S itwtDng® itopDr«g

в•

В [SI Currtnt S«l«tion

: S К н о п к 1

В *S Scene 1

45Symbol OtfinitionCO

I (gtt (® press® release@ reteaseOutsWe® rollover® rollout® dragOver® dragOut® keyPress "<Left>*

ine Iof4, Col 5"

Puc. 1.74. Панель Actions - Button (Команды — Кнопка) с кодом обработчика события

Page 85: 100 % самоучитель Macromedia Flash MX

84 100% самоучитель Flash MX

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

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

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

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

Press (Нажатие) - нажатие левой кнопки мыши, когда указатель мыши находится надпрограммируемой кнопкой. Причем учитывается не видимое изображение кнопки, аобласть срабатывания, которая определена в кадре Hit (Область);

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

Release Outside (Отпускание за пределами) - нажатая на объекте кнопка мыши отпус-кается за пределами объекта;

Roll Over (Наведение) - указатель мыши находится над объектом, и кнопка мыши ненажата;

Roll Out (Удаление) - указатель мыши удаляется с программируемой кнопки за ее пре-делы при ненажатой кнопке мыши;

Drag Over (Возврат) - при установленном на объекте указателе мыши нажимается кнопкамыши, указатель мыши удаляется за пределы объекта, после чего снова возвращается наобъект; кнопка мыши все время остается нажатой;

Drag Out (Сдвигание) - кнопка мыши нажимается при установленном на объекте указа-теле мыши, и указатель мыши сдвигается за пределы объекта;

Key Press <"ИМЯ КЛАВИШИ"> (Нажатие клавиши <"ИМЯ КЛАВИШИ">) - нажатиеклавиши клавиатуры. В списке событий, предлагаемом подсказкой, указаны различныеклавиши, обычно используемые для управления фильмом. В принципе, ActionScriptпозволяет определить обработку событий нажатия и других клавиш с некоторымиограничениями:

Нельзя использовать клавиши j£f3. Ш З , 0 0 » 1Г ГП. Ц З , |53> ?ВП и некото-рые другие.

Клавишу I S h i f t I можно использовать только в комбинации с алфавитно-цифровой

клавишей.

Page 86: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 85

Сначала определим, что при нажатии клавиши |[ пробел | проигрывание фильма должноостанавливаться.

> Прокрутите список предлагаемых событий, и найдите событие KeyPress "<Space>"

(то есть событие нажатия клавиши ll пР°6еп ] (space - «пробел» (англ.))- (Это событиепомещено в самый низ списка). Дважды щелкните на этом событии мышью. В окнекоманд появится такой код:

on (keyPress "<Space>") {

Таким образом, мы указали, что нажатие клавиши |[ Пробел ] буд е т вызывать некоторую

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

нажатии клавиши |[ пробел | Зта команда должна останавливать проигрывание фильма.

Она задается командой stop (стоп), которая вставляет в код скрипта оператор stop ( ) .

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

> Нажмите кнопку Add a new item to the script (Добавить в скрипт элемент) «fe в верх-ней части панели команд и в появившемся меню выберите команду Global Functions •Timeline Control • stop (Глобальные функции • Управление шкалой времени •стоп). Выбранный оператор будет вставлен между фигурными скобками и весьскрипт примет следующий вид:

on (keyPress "<Space>") {

stop ();

В языке Action Script каждый оператор должен заканчиваться символом ; (точка с запя-той) и программа автоматически добавляет этот символ после оператора.

>• Теперь для придания коду завершенного вида щелкните мышью на кнопке AutoFormat (Автоформат) Ш вверху панели команд. Код будет отформатирован в соот-ветствии с вашими настройками автоформата, и в нем исчезнут все лишние пробелы,пустые строки и т.п.

Итак, с помощью команд скрипта мы указали, что при нажатии клавиши 11 пробел | П р 0 .

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

что нажатие клавиши JfEn-terJ должно возобновлять проигрывание фильма.

>- Щелкните мышью в четвертой строке кода скрипта, под закрывающей фигурнойскобкой }. В эту строку мы вставим новые команды.

Вставим еще одного обработчика события on () кнопки.

> Нажмите кнопку Add a new item to the script (Добавить в скрипт элемент) ф в верх-ней части панели команд и в появившемся меню выберите команду Global Functions •Movie Clip Control • on (Глобальные функции • Управление клипом • на). В скриптбудет вставлен новый управляющий элемент:

Page 87: 100 % самоучитель Macromedia Flash MX

86 ' 100% самоучитель Flash MX

on () {

)

>• В появившемся списке доступных событий найдите событие KeyPress "<Enter>"и дважды щелкните на нем мышью. Событие будет добавлено в обработчик события,и код в окне команд примет такой вид:

on (keypress "<Enter>") {

Вставим команду, которая должна возобновлять проигрывание фильма. Это - командаPlay (Проиграть), вставляющая в код скрипта оператор p l a y ( ) .

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

>• Нажмите кнопку Add a new item to the script (Добавить в скрипт элемент) ф в верх-ней части панели команд и в появившемся меню выберите команду Global Functions •Timeline Control • play (Глобальные функции • Управление шкалой времени •проиграть). Выбранный оператор play() будет вставлен между фигурными скобка-ми и скрипт на панели Actions - Button (Команды - Кнопка) примет следующий вид:

on (keyPress "<Space>") {

stop ( ) ;

on (keyPress "<Enter>") {

Play ( ) ;

> Снова для придания коду завершенного вида щелкните мышью на кнопке AutoFormat (Автоформат) W вверху панели команд.

Теперь нажатие клавиши [[Enter] будет возобновлять проигрывание с того места, где оно

было остановлено.

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

И, наконец, чтобы щелчок мышью на программируемой кнопке вызывал загрузку вбраузер главной страницы сайта издательства ТРИУМФ, вставим еще одну командукнопки с аргументом release (Отпускание).

Page 88: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 87

> На панели команд щелкните мышью в следующей строке за введенным кодом и на-жмите кнопку Add a new item to the script (Добавить в скрипт элемент) Щ» в верхнейчасти панели команд. В появившемся меню выберите команду Global Functions •Movie Clip Control • on (Глобальные функции • Управление клипом • на). В строкескрипта, следующей за текущей, будет вставлен новый обработчик события:

on () {

>• В появившемся списке доступных событий найдите событие release и дважды щелк-ните на нем мышью. Код события приобретет следующий вид:

on (release) {

Теперь добавим в этот код команду загрузки Web-документа - Get URL (Получить URL),вставляющую в код скрипта оператор getURL ( ) .

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

>• Нажмите кнопку Add a new item to the script (Добавить в скрипт элемент) «fe в верх-ней части панели команд и в появившемся меню выберите команду Global Functions •Browser/Network • getURL (Глобальные функции • Браузер/Сеть • получить URL).В коде появляется выбранный оператор getURL ( ) , между круглыми скобками этогооператора появляется точка ввода, а под ней на панели команд появляется подсказкапараметров данного оператора (Рис. 1.75).

ondpEventemoveMovieCtip

tjrtDrig;topDr*g

Currwit Stkction4 5 Кнопк,

Symbol D«finition(s)

on (fceyPress "<3peice>") <stop I) ;

ine 8 of 11, Col 9_

Puc. 1.75. Введенный код оператора с подсказкой

Как видите, мы должны указать адрес URL страницы, которую нужно открыть (параметрurl), окно, в котором должна открываться страница (параметр window), и метод пере-сылки переменных (параметр method). Последние два параметра необязательны, но есливы решите их задать, то помните, что они должны вводиться один за другим, через запятую.

Page 89: 100 % самоучитель Macromedia Flash MX

88 100% самоучитель Flash MX

> Убедитесь, что курсор все еще находится между круглыми скобками аргументаgetURLO, и введите адрес URL документа, который должен быть загружен в брау-зер, в данном случае - сайта издательства ТРИУМФ: http://www.triumph.ru. Заклю-чите адрес в кавычки и поставьте запятую. Теперь код выглядит так:

getURL ("http://www. triumph.ru11, ) ;

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

_self - то же окно, в котором находится фильм;

„blank - новое окно;

_parent - родительский фрейм по отношению к текущему;

_top - фрейм высшего уровня.

> После запятой в операторе getURL() введите значение параметра _Ыапк (или другое),заключив его в кавычки. Код оператора примет вид:

> getURL ("http://www.triumph.ru","Jblank");

Далее можно указать метод GET или POST для отсылки переменных Web-серверу.Поскольку в нашем случае данные передаваться не будут, опустите этот параметр.

> Для придания коду завершенного вида, щелкните мышью на кнопке Auto Format(Автоформат) Ш вверху панели команд.

В окончательном виде код кнопки в панели Actions - Button (Команды - Кнопка) пока-зан на рисунке внизу (Рис. 1.76).

g| Assignmentf»1 Bitwise Operator!|Щ Comparison Operators

Д Logical Operators

[SJ Miscellaneous Operator

(*jj Built-in Classes

Constants

g | Compiler Directives

| DeprecatedComponents _E

8» 43.on (keypress "<Space>") {

stop () ;

on (keyPress "<Enter>") {

play();

on (release) <

getURL("http://www.triumph.ru"," blank");

||5 книц p i

Line 4 of 10, Col 1 Г

Рис. 1.76. Окончательный код в панели Actions — Button (Команды — Кнопка)

> Сверните панель Actions - Button (Команды - Кнопка), щелкнув мышью на значкеQ слева от названия панели.

> Сохраните фильм, нажав комбинацию клавиш I c t r l I+|(S|.

Page 90: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 89

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

> Выберите команду меню Control • Test Movie (Управление • Тестирование фильма).

Программа экспортирует фильм в формат SWF, создав файл окончательного фильмаSputnik.swf, который сохранит в той же папке, в которой находится файл исходногофильма. Процесс экспорта отобразится на линейном индикаторе в окне Exporting FlashPlayer (Экспорт в проигрыватель Flash) (Рис. 1.77), после чего на экране появится окнопроигрывателя Sputnik.swf, в котором сразу же начнется проигрывание фильма (Рис. 1.78).

Exporting Flash Player

IIIIIIBIIII Cancel

Рис. 1.77. Окно Exporting Flash Player (Экспорт в проигрыватель Flash)

File Edit View Control Debug Window HelpSputnik, swl - В X

Рис. 1.78. Окно проигрывателя Flash

С помощью контекстного меню проигрывателя (Рис. 1.79), которое появляется прищелчке правой кнопкой мыши в его окне, вы можете уменьшать (Zoom Out) или увели-чивать (Zoom In) масштаб изображения, изменять его качество (Quality), включать ивыключать проигрывание (Play), включать и выключать режим циклического проигры-вания (Loop), перемещаться в начало фильма (Rewind), к следующему (Forward) и пре-дыдущему (Back) кадрам, а также печатать текущий кадр на принтере (Print).

Page 91: 100 % самоучитель Macromedia Flash MX

90 100% самоучитель Flash MX

Проверим, как работают команды скрипта.

> Нажмите клавишу |[ пробел | Проигрывание анимации прекратится.

> Нажмите клавишу pnterj. Проигрывание будет возобновлено.

> Установите указатель мыши, который примет формубражении планеты. Появится надпись ТРИУМФ.

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

> Установите связь с Интернетом.Рис. 1.79. Кон-

> Щелкните мышью на изображении планеты. Начертание надписи т е к с т н о е м е и ю

ТРИУМФ изменится на курсивное, запустится ваш браузер, и в егоокне откроется главная страница сайта издательства ТРИУМФ.

1ТИТСЯ.

на изо-

иться к

Zoom InZoom Out100%

* Show AllQuality •PlayLoopRewindForwardBackPrintDebugger

проигрывателя

Если же вы не установите связь с Интернетом, то в окне браузера появится сообщение оневозможности отобразить запрошенную Web-страницу.

>• Прервите связь с Интернетом.

> Закройте окна браузера и проигрывателя, нажав кнопки \х\ в правом верхнем углукаждого их них.

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

Публикуем ролик для Web

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

• в браузерах Internet Explorer и Netscape Navigator;

• с помощью программы Flash Xtra в приложениях Macromedia Director и Authoware;

• с помощью специального элемента управления Active X для Flash в приложенияхMicrosoft Office и других, поддерживающих технологию Active X;

• в проигрывателе QuickTime;

• как автономное приложение (файл ЕХЕ).

Если Flash-фильм создается для проигрывания на Web-сайте, то обычно требуетсяподготовить файлы нескольких форматов. Прежде чем открыть фильм в окне браузера,следует открыть базовый HTML-документ, который, в свою очередь, загрузит проигры-ватель Flash и откроет в нем файл фильма, сохраненный в формате окончательногофильма SWF - единственном формате, в котором поддерживаются все интерактивныевозможности. В дополнение к HTML-документу, для посетителей сайта, у которых неустановлен проигрыватель Flash, следует подготовить анимационную версию фильма вформате GIF или же изображения в формате JPEG, GIF или PNG. Процесс создания всехэтих файлов называется публикацией.

Page 92: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 91

Кроме того, Macromedia Flash позволяет создать отдельные анимационные или статиче-ские изображения без документа HTML в форматах SWF, GIF, JPEG, PNG, BMP, AVI,MOV и других. Процесс создания таких файлов называется экспортом. Если фильм экс-портируется в формат SWF, то HTML-документ для использования этого фильма на сайтеможет быть написан «вручную».

Создание файлов, необходимых для помещения фильма на Web-сайт, осуществляетсякомандой меню File • Publish (Файл • Публикация). Причем эта команда генерирует нетолько файл окончательного фильма в формате SWF, но и графические файлы различ-ных форматов, которые используются в том случае, если у посетителя сайта отсутствуетпроигрыватель Flash, а также документ в формате HTML, осуществляющий запуск фильма.Перечень генерируемых файлов и их параметры определяются в диалоге PublishSettings (Параметры публикации).

Альтернативой публикации является создание HTML-документа в любом текстовомредакторе или редакторе HTML и включение в него тэгов для загрузки фильма.

Если требуется создать единственный файл с анимацией или статическим изображением,то используются соответственно команды меню File • Export • Export Movie (Файл •Экспорт • Экспорт фильма) и File • Export • Export Image (Файл • Экспорт • Экспортизображения). Параметры экспорта различны для разных форматов и ориентированы наподдержку возможности модификации фильма или статического изображения в другихприложениях. Допускается экспортировать весь фильм как файл формата SWF иликак последовательность статических растровых изображений. Возможен также экспортодного кадра или изображения как графического файла.

Для обновления или изменения опубликованного фильма следует отредактировать ис-ходный файл в формате FLA и повторить публикацию. Допускается импортироватьфильм формата SWF в Macromedia Flash. Но такой фильм теряет значительную частьисходной информации.

Выполним публикацию созданного нами фильма. Но предварительно познакомимся спараметрами публикации.

> Выберите команду меню File • Publish Settings (Файл • Параметры публикации) или

нажмите комбинацию клавиш I c t r l l+!Shiftl+|}F12l. На экране появится диалог Publish

Settings (Параметры публикации) с открытой вкладкой Formats (Форматы) (Рис. 1.80).

На этой вкладке посредством установки флажка слева от названия нужного формата оп-ределяется набор генерируемых файлов. Если выбранный формат требует настройкипараметров, то появляется дополнительная вкладка, на которой указываются параметрысохранения файла этого формата. Такие вкладки не появляются только для форматовWindows Projector (.exe) и Macintosh Projector, которые представляют собой исполняе-мые файлы для операционных систем соответственно Windows и Macintosh и используютдля воспроизведения фильма автономный проигрыватель (Standalone Player).

По умолчанию предлагается создать файлы форматов Flash (.swf) и HTML (.html), и вдиалоге присутствуют ярлыки вкладок для настройки параметров соответствующихфайлов. Форматы изображений GIF (.gif), JPEG (.jpg) и PNG (.png) предназначены длясоздания анимационных или статических изображений для тех посетителей сайта, у ко-торых не установлен проигрыватель Flash, а формат QuickTime (.mov) позволяет проиг-рывать фильмы на проигрывателе QuickTime.

Page 93: 100 % самоучитель Macromedia Flash MX

92 100% самоучитель Flash MX

Current profile: [DefaultFormats | Flash |HTML j

Type:El Flash (.swf)El HTML (.html)• GIF Image (.gif)• JPEG Image (.jpg)• PNG Image (,png)• Windows Projector (.еже)

• Macintosh Projector

• QuickTime (.mov)

t i p

File:

[Sputnik, swf

| Sputmk.html

| Sputnik, gif

| Sputnik, jpg

fsputnik.png

| Sputnik, exe

|Sputnik.hqx

| Sputnik, mov

Use Default Names

J + p B | e | © |

] P

] P

] P

] P

] P

I P

~\шI PH I

Publish Cancel

Puc. 1.80. Вкладка Formats (Форматы) диалога Publish Settings (Параметры публикации)

После выбора форматов на вкладке Formats (Форматы), в меню File • Publish Preview(Файл • Предварительный просмотр публикуемых файлов) становятся доступны команды,с помощью которых можно просмотреть, как будет выглядеть изображение в том илиином формате.

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

Вверху окна находится поле со списком Current Profile (Текущий профиль), в которомвы можете выбрать профиль публикации (т.е. сохраненный набор параметров публика-ции какого-либо пользователя). По умолчанию, в поле со списком отображается про-филь, заданный по умолчанию (Default). Однако, при необходимости, вы можете создатьсобственный профиль публикации, в котором будут сохранены ваши настройки публи-кации, и вы сможете повторно использовать эти настройки в последующих публикациях.Чтобы создать собственный профиль, щелкните мышью на кнопке Create New Profile

(Создание нового профиля) ±1вверху окна, в открывшемся одноименном диалоге вве-дите имя профиля, например, My Profile (Мой профиль), и щелкните мышью на кнопкеОК. После этого можно задать настройки профиля и пользоваться ими при последующихпубликациях.

Page 94: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 93

Другие кнопки вверху окна Publish Settings (Параметры публикации) позволяют:

- Import/Export Profile (Импорт/Экспорт профиля) - позволяет импортировать илиэкспортировать чужие или свои профили (в формате файлов XML);

"** 1 - Create New Profile (Создание нового профиля) - позволяет создавать новыепрофили;

- Duplicate Profile (Дубликат профиля) - позволяет создавать дубликаты профиля;

- Profile Properties (Свойства профиля) - щелчок мышью на этой кнопке открываетокно с именем профиля;

- Delete Profile (Удаление профиля) - удаляет ненужный профиль.

> Щелкните мышью на ярлыке Flash, чтобы перейти на соответствующую вкладку(Рис. 1.81), на которой определяются параметры файла окончательного фильма.

Publish Settings

Current profile: I DefaultFormats | Flash j HTML |

Version:

Load order:

ActionScript version:

Options:

Password:

JPEG quality:

Audio stream:Audio event:

[plash Player 7 [£J

j Bottom up |»|

(ActionScript 2.0 I».l|| Settings... |П Generate size reportП Protect from import "

П Omit trace actions

П Debuqqinq permitted

0 Compress movie

П Optimize for Flash Player 6 r65

I 1

1 П 1 (80 j0 100

MP3,16 tops, Mono |_5et_JMP3, 16 kbps, Mono IjrtJ• Override sound settings

Publish Cancel

Puc. 1.81. Вкладка Flash диалога Publish Settings (Параметры публикации)

В открывающемся списке Version (Версия) можно выбрать, в какой версии MacromediaFlash сохранить фильм. По умолчанию, устанавливается версия Flash Player 7. В раннихверсиях не реализуются все возможности Flash MX 2004.

Page 95: 100 % самоучитель Macromedia Flash MX

94 100% самоучитель Flash MX

В открывающемся списке Load Order (Порядок загрузки) указывается порядок загрузкислоев для первого кадра фильма: Bottom up (Снизу вверх) или Top down (Сверху вниз).

В раскрывающемся списке ActionScript version (Версия ActionScript) можно выбратьверсию ActionScript, использованную в фильме, и которую должен поддерживатьпроигрыватель (1.0 или 2.0). Этот флажок доступен только для версии Flash Player 6 ипозднейших.

Установка флажков группы Options (Параметры) позволяет:

• создать текстовый файл с отчетом о размерах каждого файла в байтах и другой полез-ной информацией, необходимой для анализа загрузки фильма (Generate size report);

• создать защищенный файл фильма, который невозможно импортировать в MacromediaFlash (Protect from import);

• игнорировать инструкцию t r a c e () в текущем файле SWF. Иными словами, еслиустановить этот флажок, то информация, отслеживаемая инструкцией trace () вкоде скрипта, не выводится в окне Output (Выход) (Omit trace Actions);

• разрешить отладку фильма в браузере с помощью отладчика браузера (DebuggingPermitted). При этом фильм можно защитить от несанкционированного доступа па-ролем, указав его в поле ввода Password (Пароль).

• задать сжатие фильма - сжать файл SWF для сокращения размера и времени загруз-ки файла (Compress movie). Сжатые файлы проигрываются только на Flash Player 6и позднейших версиях. (Флажок установлен по умолчанию).

• оптимизировать файл SWF под версию проигрывателя Flash Player 6 г65 с повышен-ным быстродействием (Optimize for Flash Player 6 r65). Чтобы этот флажок сталдоступен, выберите версию Flash Player 6 в верхнем раскрывающемся спискеVersion (Версия).

С помощью ползункового регулятора JPEG Quality (Качество JPEG) указывается сте-пень сжатия всех растровых изображений, используемых в фильме. Увеличение степенисжатия уменьшает размер файла, но в то же время снижает качество изображения. Еслив фильме нет растровых изображений, то этот параметр не изменяет размер файлаокончательного фильма и его качество.

Параметры Audio Stream (Потоковый звук) и Audio Event (Событийный звук) настраи-вают степень и технологию сжатия звука, использованного в фильме. В соответствую-щих им строках отображаются данные о полосе частот и формате сжатия потокового исобытийного звука. Если вы хотите использовать эти настройки вместо тех настроек,которые заданы в разделе Sound (Звук) панели Properties (Свойства), установитефлажок Override Sound Settings (Изменить параметры звука).

> Щелкните мышью на ярлыке HTML. В диалоге отобразятся соответствующие эле-менты управления (Рис. 1.82), позволяющие настроить параметры генерируемогоHTML-документа.

Page 96: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 95

Publish Settings

Current profile: (DefaultFormats | Flash | HTML

Template:

Dimensions:

Playback:

Quality:Window Mode:

HTML alignment:

Scale:

Flash alignment:

]

Flash Only E J f I n f a " 1

3 Detect Flash Version | Settings..7|

Match MovieWidth: Height:550 | X J400

Ц Paused at start

ElLoop

High

Window

Default

Default (Show all)

Horizontal

Center j j j

J z l

J pixels

0 Display menu

• Device font

I E !

1 3

1 3

L i J

Vertical

| Center [ £ |

3 Show warning messages

Publish Cancel

Puc. 1.82. Вкладка HTML диалога Publish Settings (Параметры публикации)

Многие из параметров, которые можно задать на этой вкладке, являются значениямиатрибутов тэгов <object> и <embed>. Именно эти элементы осуществляют загрузкуFlash-фильма в браузер.

В открывающемся списке Template (Шаблон) можно выбрать шаблон для HTML-документа. Описание каждого шаблона вы увидите, если выберете шаблон и нажметекнопку Info (Информация). При публикации используются те параметры HTML, которыеуказаны в шаблоне. Шаблон - это текстовый файл с переменными. В программу Macro-media Flash входит несколько готовых шаблонов. Допускается не только использоватьготовые, но и создавать новые шаблоны.

По умолчанию предлагается использовать шаблон Flash Only (Только Flash), которыйсоздает файл HTML исключительно для загрузки фильма, содержащий минимальныйнабор тэгов <object> и <embed>. Обычно этого вполне достаточно.

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

Page 97: 100 % самоучитель Macromedia Flash MX

96 100% самоучитель Flash MX

В открывающемся списке Dimensions (Размеры) вы можете указать размеры окна фильма,т.е. определить значения атрибутов width и height тэгов <object> и <embed>. При уста-новленном по умолчанию значении Match Movie (По размерам фильма) размеры окнафильма в браузере будут соответствовать размерам его кадра, определенным в диалогеDocument Properties (Свойства документа). Если выбрать значение Pixels (Пикселы) илиPercent (Процент), то в полях ввода Width (Ширина) и Height (Высота) следует указатьсоответствующие точные значения.

Группа флажков Playback (Проигрывание) позволяет задать параметры воспроизведения.

Если установлен флажок Paused at Start (Задержка при запуске), то параметрам playтэгов <object> и <embed> присваивается значение false (ложь) и воспроизведениефильма не начинается, пока пользователь не сделает это сам, нажав запрограммирован-ную кнопку или выбрав команду Play (Проиграть) контекстного меню. По умолчаниюфлажок установлен, и проигрывание фильма начинается сразу.

При установленном по умолчанию флажке Loop (Цикл) для атрибута loop тэгов<object> и <embed> устанавливается значение true (истина) и проигрывание выполня-ется непрерывно.

Установка флажка Display Menu (Отобразить меню) определяет для атрибута menuтэгов <object> и <embed> значение true, что позволяет пользователю вызывать контек-стное меню щелчком правой кнопки мыши в окне браузера. Если этот флажок сбросить,то в меню останется одна команда - About Flash (О Flash).

Если на компьютере пользователя отсутствуют использованные в фильме шрифты, топри установке флажка Device Font (Шрифты устройства) сглаженные системныешрифты заменяются шрифтами, наиболее близкими по начертанию. По умолчанию этотфлажок сброшен. При этом атрибут devicefont тэгов <object> и <embed> имеетзначение false.

Открывающийся список Quality (Качество) определяет значение атрибута quality тэгов<object> и <embed> и соответственно степень сглаживания. Так как сглаживание каж-дого кадра фильма перед его выводом на экран требует быстрого процессора, то значе-ния этого параметра позволяют выбирать приоритеты между качеством изображения искоростью воспроизведения:

Low (Низкое) — определяет приоритет скорости воспроизведения над качеством изо-бражения. При этом сглаживание отсутствует;

Auto Low (Настраиваемое низкое) - преимущество отдается скорости, но если имеетсявозможность повысить качество, то проигрыватель это делает. Проигрывание начинает-ся с отключенным сглаживанием, но оно включается, если проигрыватель обнаруживает,что процессор способен его обслужить;

Auto High (Настраиваемое высокое) - скорость воспроизведения и качество изображе-ния сначала имеют равные приоритеты, но при необходимости приоритет отдается ско-рости. Воспроизведение начинается с включенным сглаживанием. Если скоростьуменьшается ниже заданной величины, сглаживание выключается, чтобы повысить ско-рость воспроизведения;

Page 98: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 97

Medium (Среднее) - выполняется частичное сглаживание графических изображений.Растровые изображения не сглаживаются;

High (Высокое) - отдается предпочтение качеству изображения над скоростью воспро-изведения. Сглаживание векторных объектов выполняется всегда, а растровых - толькопри отсутствии анимации в кадре;

Best (Наилучшее) - обеспечивает наилучшее качество изображения без учета скоростивоспроизведения. Все изображения сглаживаются.

Открывающийся список Window Mode (Режим окна) позволяет выбрать значение атри-бута wmode тэга <object>, чтобы использовать некоторые преимущества браузера Inter-net Explorer. Этот параметр работает только в Internet Explorer 4.0 и выше при установ-ленном элементе управления Active X для Flash. Установленное по умолчанию значениеWindow (Окно) определяет для атрибута wmode значение window и запускает фильм наWeb-странице в собственном прямоугольном окне. Этот вариант дает наибольший выиг-рыш в скорости воспроизведения анимации.

Если требуется двигать элементы позади фильма, не показывая их, выбирается вариантOpaque Windowless (Непрозрачный, без окна). При этом для атрибута wmode устанав-ливается значение opaque (Непрозрачность).

Если же выбрать вариант Transparent Windowless (Прозрачный, без окна), то сквозьпрозрачные изображения фильма будет виден фон Web-страницы. При таком вариантедля атрибута wmode устанавливается значение transparent (Прозрачность).

В открывающемся списке HTML Alignment (Выравнивание на странице) выбирается рас-положение фильма в окне браузера. При этом устанавливается значение атрибута alignдля тэгов <object>, <embed> и <img>:

Default (По умолчанию) - фильм располагается в центре окна браузера;

Left (Влево) - фильм выравнивается по левому краю окна;

Right (Вправо) - выравнивание по правому краю окна;

Тор (Вверх) - фильм выравнивается по верхнему краю окна;

Bottom (Вниз) - выравнивание по нижнему краю окна.

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

Открывающийся список Scale (Масштаб) позволяет выбрать для тэгов <object> и<embed> значение атрибута scale, определяя таким образом способ расположенияфильма в пределах границ, определенных параметрами Width (Ширина) и Height (Высота).Выбранное значение применяется только в том случае, если значения ширины и высотыотличаются от исходного размера фильма. Возможны три варианта:

Default (Show all) (По умолчанию (показать все)) - фильм масштабируется равномернопо обеим осям относительно меньшей границы так, чтобы был полностью виден; границымогут быть с обеих сторон;

4 - 4724

Page 99: 100 % самоучитель Macromedia Flash MX

98 100% самоучитель Flash MX

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

Exact fit (Точное заполнение)заполнения указанной области.

неравномерное масштабирование по разным осям для

No scale (He масштабировать) - запрещает масштабирование Flash-документа при изме-нении размеров окна проигрывателя Flash Player.

Открывающиеся списки Flash Alignment (Выравнивание в окне фильма) позволяют ука-зать значение атрибута salign для тэгов <object> и <embed> и определяют положениефильма внутри области, указанной значениями Width (Ширина) и Height (Высота).

Установка флажка Show Warning Massages (Выводить предупреждения) позволяет вы-водить на экран сообщения об ошибках, связанных с несоответствием шаблона и наборафайлов публикации. Например, если вы выбрали шаблон, который должен включатьрастровое изображение, и не включили в набор публикации ни один из растровых фор-матов, то будет выдано предупреждение.

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

> Нажмите кнопку Publish (Публикация) в диалоге Publish Settings (Параметры пуб-ликации). Публикация будет выполнена. Ее ход отобразится на линейном индикаторев окне Publishing (Публикация) (Рис. 1.83).

Publishing

Mill Cancel

Рис. 1.83. Окно Publishing (Публикация)

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

> Закройте диалог Publish Settings (Параметры публикации), нажав кнопку ОК.

> Закройте также окно программы Macromedia Flash, выбрав команду меню File • Exit

(Файл • Выход) или нажав комбинацию клавиш li^tr'1+I|Q|. На запрос о сохраненииизменений в файле Sputnik.fia ответьте положительно.

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

> Откройте в браузере файл Sputnik.html из папки Flash.

Почти сразу в окне браузера начнется проигрывание фильма (Рис. 1.84).

> Проверьте, нажимая клавиши |[ пробел | и ||Enter|t к а к работает в браузере интерактив-

ное управление проигрыванием фильма.

Page 100: 100 % самоучитель Macromedia Flash MX

Macromedia Flash MX 2004: Быстрый старт 99

'3j Sputnik - Microsoft Internet ExplorerFjle Edit yiew Favorites lools Help

Seek FotwardО ' 9 <Я

Stop Refresh Home Favorites History Mail My Bankj Address |g C:\Flash\Sputnik.html

I

1Й Done mputer

7.84. Проигрывание фильма в браузере

> Проверьте, как работает интерактивная кнопка, установив указатель мыши на изо-бражении планеты и щелкнув на нем мышью. При подключении к Интернету в окнобраузера должна загрузиться домашняя страница сайта издательства ТРИУМФ.

> Вернитесь к предыдущему документу - Sputnik.html, нажав кнопку Back (Назад) напанели инструментов браузера.

Обратите внимание, что фильм в окне программы просмотра Web-страниц не центриро-ван, несмотря на установку Default (По умолчанию) параметра HTML Alignment (Вырав-нивание на странице) в диалоге Publish Settings (Параметры публикации). Поэтомуцентрирование следует указать в документе Sputnik.html «вручную».

> Откройте в программе Блокнот (Notepad) файл Sputnik.html из папки Flash.

Чтобы отобразить фильм в браузере, HTML-документ включает тэги <OBJECT> и<EMBED>. Причем тэг <OBJECT> используется для запуска фильма в браузере InternetExplorer, а тэг <EMBED> - для запуска фильма в браузере Netscape Navigator. Для тэга<EMBED> все параметры, например, WIDTH, HEIGHT, QUALITY, LOOP являются атрибутамии записываются внутри тэга. Для тэга <QBJECT> атрибутами являются WIDTH, HEIGHT,CLASSID, CODEBASE, а все остальные параметры записываются отдельно в виде тэгов<PARAM>. Каждый такой тэг содержит пару атрибутов - NAME и VALUE, опреде-ляющих соответственно имя и значение одного из параметров. Тэг <EMBED> долженнаходиться внутри тэга <OBJECT>. Для обоих тэгов - <OBJECT> и <EMBED> -используются идентичные значения, чтобы гарантировать одинаковое воспроизведениев любом браузере.

Page 101: 100 % самоучитель Macromedia Flash MX

100 100% самоучитель Flash MX

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

> Чтобы выровнять фильм по центру окна браузера, вставьте тэг <center> передоткрывающим тэгом <OBJECT>.

>- Сохраните документ Sputnik.html и закройте программу Блокнот (Notepad).

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

> Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу.

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

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

Page 102: 100 % самоучитель Macromedia Flash MX

Г Л А В А 2.Рабочая среда Flash

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

Настройка рабочего окна и панелей

Прикрепленные и плавающие окна

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

> Запустите программу Macromedia Flash, если она еще не запущена.

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

> Дважды щелкните мышью в верхней части панели инструментов,на заголовке секции Tools (Инструменты). Эта панель станет пла-вающей. У верхнего ее края появится строка заголовка с кнопкой\х\, предназначенной для закрытия панели (Рис. 2.1).

> Переместите панель инструментов в любое место рабочего окна,перетащив мышью ее заголовок.

Также просто можно снова прикрепить панель.

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

Выключить и снова включить отображение панели инструментовможно с помощью команды меню Window • Tools (Окно • Панельинструментов).

Аналогично перемещению панели инструментов можно перемещатьокно шкалы времени (Timeline) и прикреплять его к левому или пра-вому краям рабочего окна.

>• Установите указатель мыши в верхней части окна шкалы временислева от названия окна Timeline (Шкала времени). Указатель мы-ши примет форму четырехсторонней стрелки ф .

> Нажмите и удерживайте левую кнопку мыши.

То

/

О•

olsкPAD

3

View

ColorsЯ

•85Optionsft

Рис. 2.1.Плавающая

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

Page 103: 100 % самоучитель Macromedia Flash MX

102 100% самоучитель Flash MX

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

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

> Отпустите левую кнопку мыши. Положение окна шкалы времени (Timeline) у правогокрая рабочего окна программы будет закреплено.

Такое расположение удобно, когда вам нужно работать одновременно с большим коли-чеством слоев (Рис. 2.2).

Maciomedia Flash MX 2004 - (Untitied Г ]

File Edit View Inxeit Modify Text Command* Contiol Window Help

Рис. 2.2. Окно шкалы времени (Timeline) прикрепленок правому краю рабочего окна

> Переместите окно шкалы времени на прежнее место и прикрепите его в верхней частирабочей области.

С помощью команды меню Window • Toolbars • Main (Окно • Панели инструментов •Главная) вы можете включить отображение этого элемента интерфейса.

> Выберите команду меню Window • Toolbars • Main (Окно • Панели инструментов •Главная). Под полосой меню в верхней части рабочего окна появится панель ин-струментов Main (Главная). Эту панель тоже можно перетащить в любое место окна(Рис. 2.3).

Page 104: 100 % самоучитель Macromedia Flash MX

Рабочая среда Flash 103

Рмс. 2.5. Панель инструментов Main (Главная)

На панели инструментов Main (Главная) собраны кнопки, дублирующие основныекоманды меню: создания нового файла фильма, открытия и сохранения файла, печати,вырезания, копирования и вставки объектов, отмены предыдущей команды, повторения

отмененной команды, а также кнопки модификаторов инструмента [ Ч j - Selection Tool(V) (Выделение).

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

Создание раскладок панелей

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

> Выберите команду меню Window • Panel Sets • Default Layout (Окно • Раскладкипанелей • Раскладка по умолчанию). В рабочем окне появятся четыре окна с панелями(Рис. 2.4).

File Edit View Insert Modify Text Commands Contiol Window Help

U j Select a Component Instance to edit itsI! I parameters in this panel.

Size: f 550 x 400 pixels j Background:Publish: ) Settings... j Player: 7 Ac

Рис. 2.4. Раскладка панелей по умолчанию

Page 105: 100 % самоучитель Macromedia Flash MX

104 100% самоучитель Flash MX

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

> Щелкните мышью на строке заголовке окна Properties (Свойства). Окно свернется так,что видимым останется заголовок панели, а область сцены (Stage) автоматическирасширится, заняв освободившееся место (Рис. 2.5).

View Insert Modify Text Commands Control Window Help

UntMed-1

Рис. 2.5. Панель Properties (Свойства) свернута

> Повторно щелкните мышью на заголовке окна Properties (Свойства). Окно развер-нется, и вы снова увидите элементы управления этой панели.

Предположим теперь, что при решении некоторых задач будут использоваться толькопанели Color Mixer (Смеситель цвета), Transform (Трансформация) и Info (Информация),а остальные панели использоваться не будут. Создадим новую раскладку панелей.

> Закройте панели Components (Компоненты), Component Inspector (Инспекторкомпонентов) и Behaviors (Поведения), выбирая команду Close Panel (Закрытьпанель) в меню панелей.

> Откройте панели Transform (Трансформация) и Info (Информация) командами менюWindow • Design Panels • [Имя панели] (Окно • Панели конструирования •[Имя панели]) и перетащите их в правый верхний угол рабочего окна под панельColor Mixer (Смеситель цвета).

> Если нужно, внизу сцены сверните окна Actions - Frame (Команды - Кадр), Help(Справка) и Properties (Свойства). Не закрывайте эти панели, поскольку они исполь-зуются постоянно, особенно панель Properties (Свойства).

Теперь ваша рабочая область должна выглядеть примерно так же, как на рисунке ниже(Рис. 2.6).