Знакомство с Flash MX: Учебно-методическое пособие (практикум)

Федеральное агентство по образованию

Знакомство с Flash MX

Учебно-методическое пособие для вузов (Практикум)

Составители: В.В. Васильев Л.В. Хливненко

ВОРОНЕЖ 2007

2

Утверждено Научно-методическим советом математического факультета 31 января 2007 года, протокол № 5

Рецензент А.В. Костин

Учебно-методическое пособие (практикум) подготовлен на кафедре математического моделирования математического факультета Воронежского государственного университета.

Рекомендовано для студентов всех форм обучения.

Для направления 010101 (010100) Математика

3

1.1. Общее описание среды, создание простых изображений Среда Macromedia Flash MX Professional 2004 (далее будем назвать её Flash) является программным продуктом, который позволяет создавать графические интерактивные приложения. До сих пор мы говорили об использовании для оформления WEB-страниц графических файлов двух форматов: jpg и gif. Оба эти формата поддерживают растровую графику. Flash дает возможность создавать изображения векторной графики (формат swf), загружаемые в WEB-файлы. Объем изображений, созданных в Flash, очень мал. Кроме статических векторных изображений во Flash можно создавать анимированные рисунки и даже видеоклипы. В качестве изображения несложно создать, например, меню сайта и здесь же, в среде Flash, сопроводить графику скриптами (командами, управляющими экранными элементами) и сохранить в виде динамического html-документа. Средства Flash позволяют создавать простые игры и гибко работать с графикой. В среду Flash возможен импорт графических изображений различных форматов и дальнейшее преобразование их в файлы векторной графики. Для загрузки и просмотра html-документов, содержащих объекты Flash, WEB -броузер должен содержать плагин (plugin) – транслятор кода или проигрыватель. В настоящее время 98,3% пользователей Интернет имеют и используют проигрыватель Flash-клипов (по данным статистики на сайте www.macromedia.com). Прежде чем приступить к изучению среды Flash оговоримся о том, что все примеры, приведенные ниже, проверены в среде Macromedia Flash MX Professional 2004. Системные требования для ПК с ОС Windows, поддерживающего работу указанной среды, следующие: • процессор с частотой не менее 600 MHz (Intel Pentium III или равноценный ему); • операционная система Windows 98 SE (4.10.2222 A), Windows 2000 или Windows XP; • оперативная память не менее 256 MB (рекомендуется 512 MB); • свободное дисковое пространство - 800 MB. Включите компьютер. После загрузки операционной системы выберите Пуск| Программы| Macromedia| Macromedia Flash MX Professional 2004 или . Перед Вами откроется кликните на Рабочем столе по пиктограмме окно среды Flash (см. рис.1). Диалоговое окно, расположенное в середине, предлагает Вам выбор: открыть ранее используемый файл (Open a Recent Item), создать новый (Create New) или создать документ на основе шаблона (Create from Template).

4

Рис. 1. Диалоговое окно открытия документа Flash MX Professional 2004.

В нижней части диалогового окна есть checkbox с предложением «Не показывать больше» (Don’t show again). Выберите команду создать новый флэш-документ (Create New|Flash Document) и перед Вами откроется основное рабочее окно среды Flash см. рис. 2). По умолчанию новый Flash Document имеет расширение fla и имя Untitled-1. В нашей работе мы будем иметь дело с документами Flash. Изучение других документов не входит в задачи нашей лабораторной работы. Полный перечень документов (закладка General) и стандартных шаблонов (закладка Templates) открывается пользователю при выборе команды основного меню File| New… Рассмотрим элементы основного окна Flash MX Professional 2004.

Рис2. Основное окно Flash MX Professional 2004.

1 – основное меню; 2 – панель инструментов рисования (Tools); 3 – панель инструментов

7 – временная шкала (Timeline); 8 – название объекта; 9 – выбор активной сцены; 10 – выбор объекта;

5 просмотра (View); 4 – панель инструментов настройки цвета (Colors); 5 – параметры инструмента; 6 - список слоев;

11 – управление масштабом; 12 – рабочее поле (сцена); 13 – панели инструментов; 14 – инспектор объектов.

Создание, редактирование или монтаж Flash-изображений происходит на рабочем поле (12). Рабочее поле необычно для графических редакторов по величине (в графическом редакторе рабочее поле чаще всего занимает большую часть экрана), оно ограничено со всех сторон другими элементами окна. Увеличить область рабочего поля можно свернув другие элементы (нажатием на ) или установив курсор мыши на границу рабочего поля, изменить его размер. Управление масштабом (11) позволит увеличить размер полотна рабочего поля. (Попробуйте самостоятельно!) Основное меню (1) играет стандартную роль – содержит все функции, которые способна выполнять среда. Временнáя шкала (7) является очень важным элементом, на ней отображается и редактируется состояние кадров Flash-клипов. Слева от нее располагается список слоев (6), из которых состоит изображение. Строка заголовка файла имеет собственную навигацию по Flashдокументу. Слева перечисляются названия активных сцен и объектов (8), которые можно отобразить на рабочем поле кликнув на имени объекта указателем мыши. Вызвать сцену или объект для редактирования на рабочее поле можно с помощью кнопок 9 и 10 соответственно. Левая часть окна приложения Flash содержит панели инструментов (25). С помощью инструментов можно создавать и видоизменять изображения, находящиеся на рабочем поле. Набор инструментов для рисования здесь не слишком велик (чуть больше, чем в Paint), но их достаточно для создания простого изображения. Особенно удобно работать с инструментами, позволяющими искажать готовые рисунки (подробней познакомимся с этим в примере работы 1). Здесь Вы не найдете огромного количества фильтров изображений и инструментов для «чистки» фотографий, поэтому если необходима такая работа, то нужно обращаться, например, к PhotoShop. Любой объект во Flash имеет набор свойств, которые можно изменять. Очень удобно работать со свойствами объекта позволяет инспектор объектов (14). Для привязки программного кода (скрипта) к объекту используют панель Actions-Frame (13). Правая часть окна Flash обрамляется служебными панелями, набор которых часто изменяется пользователем во время работы с помощью пункта основного меню Window. (Попробуйте самостоятельно!) Рассмотрим и освоим правила работы с инструментами панелей рисования, просмотра, настройки цветов и параметров инструментов (2-5). При очевидной аналогии с другими графическими редакторами (например, TPaint, PhotoShop и др.) в использовании инструментов, Flash име-

6 ет свои особенности. Во-первых, любой графический объект, состоящий из границ и области заливки, можно изменять как весь в целом, так и по отдельности (отдельно границы, отдельно область заливки). Во-вторых, для изменения изгиба линий Flash использует кривые Безье второго порядка, что позволяет экономить размер получаемых файлов и легко управлять изогнутыми линиями. Указанные особенности позволяют удивительно легко видоизменять внешний вид рисунка, следуя за фантазией пользователя. Вы не будете скованы ни чем в воплощении своих идей (ничем кроме их отсутствия). Для знакомства с инструментами удобно использовать хинты, которые появляются при наведении указателя мыши на кнопку инструмента. Кроме названия самого инструмента в скобках указывается горячая клавиша вызова данного инструмента. Горячую клавишу нужно использовать вместе с кнопкой Shift. (Попробуйте самостоятельно!). Набор инструментов рисования (приведены названия на русском и английском языках и горячие клавиши):

Line

Subselection Lasso

Выделение части Лассо

L

Pen

Text

Текст

T

V Выделение

Selection

N Линия P

Ручка

S

Чернильница Ink Bottle

Прямоугольник Brush Кисть Fill Trans- Изменение form заливки Paint Заливка Bucket

I

Пипетка

Eraser

O Овал

Oval

Y

Pencil Free Transform

Карандаш Свободное Q изменение

Eyedropper

Rectangle

Резинка

A

R B F K E

Рис. 3. Инструменты панели Рисование. Пример работы 1: 1. Сверните панель Timeline (Временнáя шкала) 2. Сверните панель Properties (Свойства) 3. Настройте свойства инструмента Oval (овал)

Подсказка Кликните на  слева от названия панели Timeline Кликните на  слева от названия панели Properties Кликните по инструменту Oval (или нажмите Shift+O)

Обратите внимание на то, что изменился вид панелей Properties и Colors. На панели Properties можно изменить цвет границы овала (цвет карандаша), цвет заливки овала, толщину и вид линии границы овала. Рис. 4. Свойства объекта Oval.

7 Кнопка Custom… откроет диалоговое окно изменения свойств линии. Здесь можно увеличить в 4 раза масштаб просмотра вносимых изменений, отметив Zoom 4x. Если отметить Sharp corners, будут сглаживаться углы линий. Можно изменить тип и толщину линии. (Попробуйте самостоятельно!) На панели Colors можно выбрать цвета границы и заливки, а также воспользоваться кнопками быстрой настройки:

- черно-белого изображения,

- убрать границу или фон (в зависимости от того, что выбрано), - поменять цвет границы на цвет заливки. Попробуйте самостоятельно! Используйте панель Properties для установок: цвет границы – красный, цвет заливки – желтый, толщина – 2, стиль линии – пунктир (- - -). Далее нажмите кнопку Custom и настройте стиль линии (Tipe) 4. Нари- Переведите курсор мыши на рабочее поле, прижмите левую суйте кнопку мыши и, не отпуская ее, растяните овал. Отпустите овал кнопку мыши 5. Изме). Подведите указатель Выберите инструмент Selection ( ните мыши к границе овала пока рядом с указателем не появится дустиль грани- га. Кликните по левой кнопке мыши. Граница будет выделена цы ова- белыми точками. В панели Properties откроются свойства объекта Shape. Сделайте произвольные изменения границы, исла пользуя эту панель. По аналогии измените цвет фона 6. Из) границу Выделите с помощью инструмента Subselection ( мениовала. Граница будет выделена зеленой линией с 8-ю узловыми те точками. Подведите указатель мыши к верхней средней узловой форму точке и, прижав левую кнопку мыши, вытяните овал за точку овала вверх. Расширьте верхнюю часть овала, потянув по очереди за левую и правую узловые точки горизонтальной касательной верхней узловой точки. Получим грушу (см. рис. 5) Рис. 5. «Груша». Поэкспериментируйте самостоятельно с изменением формы овала. Тяните мышкой за любые узловые точки внутрь и наружу. Представьте, что у вас в руках гибкий каркас из проволоки, и меняйте форму! Понравилось? 7. Отмените изменения

Нажимайте Ctrl+Z (или Edit| Undo…), пока не появится изображение, как на рис. 5

8 8. Отделите желтую грушу (внутренность) от красного контура (границы) 9. Измените форму желтой груши

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

Выделите с помощью инструмента Selection (

) грушу.

Выберите инструмент Free Transform ( ). Груша будет вписана в прямоугольник с узловыми точками и точкой центра. При перемещении курсора мыши в узловые точки он будет принимать вид различных стрелок. Выбирайте различные точки и изменяйте форму фигуры

Инструментом Selection можно выделять и часть объекта, обводя его указателем мыши, и применять трансформацию и другие изменения к выбранной части. Если необходимо выделить несколько частей объекта или элементов рабочего поля, то при выделении нужно удерживать нажатой кнопку Shift на клавиатуре. Если провести по области заливки линию, то груша будет разрезана на две половинки. Попробуйте самостоятельно! Для изменения цвета применяются инструменты Paint Bucket (

)и

Ink Bottle ( ). Инструмент Ink Bottle закрашивает только линии цветом карандаша. Инструмент Paint Bucket позволяет изменять цвет области, ограниченной линиями. С помощью Paint Bucket область может быть закрашена одним цветом, градиентом или изображением точечного рисунка. Пов панели Options появляются параметры инсле выбора инструмента струмента. Первый параметр позволяет выбрать величину разрывов линий, которые можно закрашивать или совсем запретить закрашивать разорванные линии. Значения параметра таковы: Don’t Close Gaps

- не закрывать разрывы

Close Small Gaps

- закрывать маленькие разрывы

Close Medium Gaps - закрывать средние разрывы

3 1 2 панели Рис. 6. Вид Color Mixer после выбора стиля Liner.

Close Large Gaps - закрывать большие разрывы. Цвет заливки можно изменить на панели настройки цвета (4-рис.2). С той же целью используется панель инструментов Color Mixer (13-рис.2). На последней панели (см. рис. 6) можно изменить и стиль заливки с помощью окна выбора, которое

9 предлагает следующие способы закрашивания: Solid – сплошная заливка одним цветом, Linear – линейная градиентная заливка, Radial – круговая градиентная заливка, Bitmap – закрашивание области точечным рисунком, выбранным из файла. Если выбрать стиль Linear или Radial, то на панели появится бегунок (1) для смешивания цветов спектра и окна выбора смешиваемых цветов. Для изменения пропорций цветов спектра нужно «зацепить» мышкой один из карандашей (2) и потянуть его влево или вправо. Для изменения цвета карандаша нужно двойным кликом мыши по стержню карандаша выбрать текущий цвет и в верхнем окне цвета (3) выбрать другой цвет. На бегунке цветов можно добавить карандашей (цветов) в спектр. Для этого нужно сделать двойной клик в любом месте бегунка. Попробуйте самостоятельно! Для заливки области точечным рисунком нужно выбрать стиль Bitmap, после чего откроется диалоговое окно выбора файла, с помощью которого можно выбрать точечный файл в качестве цвета фона. Lock Fill блокировка заливки позволяет заВторой параметр заливки крашивать все объекты на рабочем поле, как продолжение одного объекта. Используется маскирование рабочего поля, т.е. основной фон поля – полотно, а объекты на нем «дырки» в которые видны кусочки «подкладки». При включенной блокировке заливки закрашивается «подкладка», части которой видны через объекты, расположенные на рабочем поле. 10. НариВыберите инструмент Rectangle ( ). На панели Properties суйте выберите светло-зеленый цвет фона, фиолетовый цвет прямокарандаша, толщину линии 8, стиль линии Dotted, расугольстояние между точками 4 pts. Переведите курсор мыши на ник рабочее поле, прижмите левую кнопку мыши и, не отпуская ее, растяните прямоугольник. Отпустите кнопку мыши 11. На). На панели Colors стройте Выберите инструмент Paint Bucket ( Mixer установите стиль заливки Linear и смешайте на бегунке паракрасный, синий, зеленый и желтый цвета в равных пропорциях метры заливки 12. Закрасьте овал и прямоКликните внутри овала и прямоугольника угольник 13. Закрасьте овал и ). Кликните внутри прямоугольник, забло- Кликните по Lock Fill ( овала и прямоугольника кировав заливку 14. Измените цвет ). Выберите Выберите инструмент Ink Bottle ( границ овала и цвет карандаша. Кликните на овале и прямоугольнике прямоугольника 15. Измените цвет ). Выберите Выберите инструмент Fill Transform ( фона рабочего цвет фона. Кликните в любом месте рабочего поля

10 поля Цвет можно выбирать не только из палитры, но и с помощью пипетки ). Выбрав пипетку, курсор мыши нужно подвести к объ- Dropper ( екту, цвет которого Вам необходимо установить. При наведении пипетки на нужный цвет, рядом с изображением пипетки появится изображение инструмента, которым был построен объект (карандаш или кисть). В первом случае по клику мыши цвет объекта будет присвоен цвету карандаша, во втором – цвету фона. Попробуйте самостоятельно! Познакомимся с особенностями еще одной группы инструментов панели рисования: линии Line (

), карандаша Pencil (

) и кисти Brush

( ). Все эти инструменты являются традиционным набором для любого графического редактора и наверняка Вы уже работали с подобными инструментами. Во Flash инструменты Line и Pencil имеют одинаковые свойства, которые можно увидеть в панели Properties (см. рис. 7). Слева направо на панели доступны для выбора цвет, толщина и стиль линии. Рис. 7. Вид панели Properties инструментов Line и Pencil. Дополнительные возможности открываются после нажатия на кнопку Custom… (см. рис. 8). В окне Type можно выбрать стиль линии и настроить параметры стиля. В окне Thickness устанавливается толщина линии, а при установленном флажке в окошке Sharp corners Flash спрямляет неровности построения линий. Особенно отчетливо это проявляется при рисовании инструментом Pencil. 16. Нарисуйте половину эллипса

Рис. 8. Окно Stroke Style. Выберите инструмент Pencil. Установите параметры инструмента в панели Properties: цвет=черный, толщина=2, стиль=Solid. Кликните по кнопке Custom… и установите флажок Sharp corners. Нажмите Ok. Переведите курсор мыши на рабочее поле и, не отпуская левую кнопку мыши, нарисуйте от руки половину эллипса. Отпустите кнопку мыши. Ваш эллипс спрямился до П. Установите толщину линии=8 и повторите попытку изобразить половину эллипса. Теперь он такой, как мы хотели! Можно изменить толщину линии, выделив объект инструментом Selection и установив в панели Properties толщину. Инструментом Transform или Subselection можно изменить и форму. Попробуйте!

11 Выровнять линию можно используя пункт меню Modify| Shape, при выбранном инструментом Selection объекте. Разберите самостоятельно. Выберите инструмент Brush (кисть). В отличие от карандаша, кистью можно ставить точки однократным нажатием на мышь (не протягивая линию). На панели Properties всего лишь два параметра: цвет и сглаживание (Smoothing). Но на панели Options открывается целый букет возможностей изменения настроек кисти. Рассмотрим их подробней. Paint Normal – обычное раскрашивание, т.е. где провели, там и закрасили. Paint Fills – закрашивание заливок объекта (границы не окрашиваются «проявляясь сверху» мазка кисти). Paint Behind – закрашивание позади объекта (кисть рисует только на чистом поле, если захватывается объект, то на нем не остается следа от кисти). Paint Selection – закрашивание выделенной заливки (след от кисти остается только на предварительно выделенных инструментом Selection областях, если таких нет, то следа от кисти не остается). Paint Inside – закрашивает внутри контура (если мазок кисти выходит за контур, то он автоматически стирается до контура внутри объекта). Lock Fill – блокировка заливки работает так же, как для инструмента Paint Bucket. На панели Option есть еще два списка параметров: Brush Size (размер кисти) и Brush Shape (вид кисти), в которых соответственно можно выбрать размер кисти и вид мазка. Для удаления изображений применяется инструмент Erase (резинка). Выберите этот инструмент на панели. Интерес здесь представляет панель Options. На ней открываются следующие свойства инструмента: Erase Normal – обычное стирание (стирает и заливку и линии, по которым проводите резинкой) Erase Fills – стирание заливки (линии остаются нетронутыми) Erase Lines – стирание линий (заливка не удаляется) Erase Selected Fills – стираются области, ранее выделенные инструментом Selection Erase Inside – стираются только заливки линии не стираются

12 Faucet – кран. Если выбран кран, то стираются все сегменты объекта, а не только те, на которые указываете резинкой. Последняя опция – Erase Shape позволяет выбрать вид резинки. 17. Удалите изображение

Воспользуйтесь командой Edit| Select All и нажмите клавишу Delete или сделайте двойной клик по инструменту

) Erase ( Как используются оставшиеся инструменты Pen (ручка), Text (текст) и Lasso (лассо) разберем позже. Задание 1. Используя инструменты панели рисования, создайте графическое изображение кролика (см. рис. 10), раскрасьте его и сохраните в свою папку под именем krolik.fla. Перед началом выполнения задания настройте вид рабочего поля, отображающий сетку для удобства рисования. Выберите View| Grid| Show Grid. Для настройки сетки выберите View| Grid| Edit Grid… и установите параметры, как указано на рисунке 9. Рис. 9. Окно Grid.

Рис. 10. Кролик.

На практике далеко не всегда удобно тратить время на полное вырисовывание изображений. Как Вы попробовали – это не очень просто, да и не в каждом из нас живет художник. Чтобы на рисование картинок затрачивать меньше времени, во Flash возможен импорт любых изображений через File| Open (но не любой файл будет открыт! Этой командой удобно пользоваться для файлов с расширением JPEG) или File| Import... Выбрав последнюю команду Вы сможете импортировать файл на сцену (Import to Stage), в библиотеку (Import to Library) или импортировать во внешнюю библиотеку (Open External Library). При импорте на сцену изображение сразу окажется на рабочем поле, при импорте в библиотеку изображение нужно будет расположить на рабочем поле перетянув мышкой из библиотеки, которая открывается нажатием на Ctrl+L. Если импортируется анимированный объект, то Flash максимально сохраняет анимацию, преобразовывая в собственный формат знакомые форматы.

13 После размещения изображения на рабочем поле практически никакие операции редактирования к нему не применимы. Для их активации изображение нужно преобразовать в фигуры Flash. Происходит это так: изображение нужно выделить инструментом Selection или командой Edit| Select All и выбрать команду Modify| Bitmap| Trace bitmap… Параметры трассировки можно оставить без изменений и нажать OK. Все, теперь это графическое изображение во Flash! Можно его изменять целиком или частично. В этой элегантной простоте есть свое «но». Объем Flash-файлов при заимствованных рисунках намного больше, чем при рисунках, созданных непосредственно во Flash. Для оптимизации размеров импортируемых изображений нужно использовать следующие возможности: 1. Любую обрезку импортируемого изображения проводить ДО загрузки во Flash средствами «родного» графического редактора, например TPaint, PhotoShop и т.п. Если растровое изображение уменьшать или обрезать во Flash, то его объем не будет изменяться. 2. Перед импортом изображения настроить параметры документа, касающиеся качества отображения растровых изображений. Для этого выберите File| Publish Settings…|Flash Откроется диалоговое окно (см. рис. 11). В поле JPEG quality по умолчанию качество установлено 80%. Уменьшите его на столько, на сколько Вас устроит вид полученного битового образа. Рис. 11 Диалоговое окно па3. После импортирования битового обраметров документа. раза и разбивки его на графические векторные фигуры (Break Apart) выделите его и оптимизируйте изображение командой Modify| Shape| Optimize… Параметры оптимизации подбирайте в зависимости от назначения импортированного изображения. Нажмите OK. Задание 2. Найдите любой файл, содержащий битовый образ, с расширением jpg. Самое простое – отсканируйте какой-нибудь рисунок или фотографию и сохраните файл под именем bitmap1.jpg. Рассмотрим, как будет изменяться объем Flash-файла, содержащий импортированный битовый образ. Пример работы 2: 1. Запустите Flash

Подсказка

Пуск| Программы| Macromedia| Macromedia Flash MX Professional 2004 или клик на Рабочем столе по пиктограмме

2. Импортируйте изображение из файла bitmap1.jpg на сцену

File| Open… или File| Import| Import to Stage… В открывшемся окне выбора файлов выберите файл bitmap1.jpg и нажмите OK. Изображение появится на сцене

14 3. Просмотрите параControl| Test Movie или Ctrl+Enter метры файла Перед Вами открылось окно, изображенное на рис. 12. Оно разбито на три части. В 3-й части 1 2 проигрывается ролик (в нашем случае просто статическое изображение). Во 2-й части расположена диаграмма по3 кадрового воспроизведения ролика. Слева отмечены значения объема кадров. Если столбик диаграммы находится выше красной линии, то это означает, что при прокрутке ролика возникнет пауза. В 1-й части выводятся следующие параметры тестируемого файла: • Dimensions (Dim) – высота и ширина Рис. 12. Тестируемый файл анимации. со значением параметров. • Frame Rate (Fr Rate) – частота кадров, установленная для воспроизведения анимации. • Size – общий размер файла в Кб. • Duration – общее количество кадров и время воспроизведения анимации на основной временной шкале. • Preload – общее количество кадров (включая все клипы, входящие в анимацию), которое должно быть загружено, чтобы обеспечить плавность процесса воспроизведения, и количество секунд, в течение которых данное количество кадров будет загружено. • Bandwidth – пропускная способность канала, при которой проводится данное тестирование. Эту величину можно менять, выбирая в текущем окне View| Download Settings и далее пропускную способность канала. • Frame – номер кадра. • Loaded - общее количество кадров, которые уже загружены к данному моменту времени (на основной временной шкале). При дальнейших изменениях в данном примере будем отслеживать значение параметра Size. 4. Запишите размер файла и заSize. Кликните по х в правом верхнем кройте окно тестирования углу окна теста 5. Уменьшите изобраВыберите масштаб просмотра Show All. Выбежение до размеров сце- рите инструмент Free Transform. Тяните за узлоны (если оно больше) вую точку, уменьшая размер 6. Просмотрите параметры файла, запиши- Control| Test Movie или Ctrl+Enter. Size те размер и закройте окно тестирования 7. Уменьшите изобраОткройте файл bitmap1.jpg в графическом режение до размеров сце- дакторе, например PhotoShop. Сделайте обрез-

15 ны, используя графиче- ку контуров и измените размер изображения. ский редактор для расСохраните файл тровых изображений 8. Активизируйте окно Flash Клик в области окна Flash 9. Удалите загруженное ранее изоДвойной клик по Erase бражение 10. Импортируйте изоFile| Open… или File| Import| Import to Stage… В бражение из файла bitоткрывшемся окне выбора файлов выберите map1.jpg на сцену файл bitmap1.jpg и нажмите OK 11. Просмотрите параметры фай- Control| Test Movie или Ctrl+Enter. Size ла, запишите размер и закройте окно тестирования 12. Измените каче- File| Publish Settings…|Flash Откроется диалоговое ство отображения окно (см. рис. 10). В поле JPEG quality уменьшите битового образа значение. Нажмите OK 13. Просмотрите параметры файла, запишите Control| Test Movie или Ctrl+Enter. Size размер и закройте окно тестирования 14. Переведите рас- Выделите изображение инструментом Free Transтровое изображеform. Выберите команду Modify| Break Apart ние в векторное 15. ОпВыделите изображение. Выберите команду Modify| Shape| Optiтимизи- mize… Параметры оптимизации отметьте все, значение параруйте метра Smoothing задайте максимальным. Нажмите OK. Появится изобра- сообщение о том, во сколько сжато изображение в %. Нажмите OK жение 16. Просмотрите параметры файла, запишите Control| Test Movie или Ctrl+Enter. Size размер и закройте окно тестирования 17. Сохраните файл под именем test1.fla и записи в тет- File| Save ради об изменении размера файла. Закройте файл Полный отчет о состоянии каждого кадра можно получить в текстовом файле. Для этого следует настроить параметры публикации файла, выбрав команду File| Publish Settings и на закладке Flash поставить отметку для опции Generate Size Report. Далее при выборе команды File| Publish или нажатии Ctrl+F12 рапорт будет записан в текстовом файле с именем <имя_файла>Report.txt в том же каталоге, в котором хранится сам Flashфайл. Попробуйте самостоятельно!

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

16 вращающийся объект может исчезать, изменяя цвет. Преобразования объектов можно выполнять на одном слое или на нескольких слоях. Слой (layer)– это «пленка», на которой расположено изображение. Слои могут быть прозрачными и содержать отдельные объекты (фон, текст, различные графические элементы), а могут быть управляющие слои, на которых располагается траектория движения объекта, не видимая во время просмотра ролика. Анимацию во Flash можно создавать покадрово (в каждом кадре вручную задавать каждый шаг изменений объекта) или автоматически (установить вручную только длительность смены кадров, начальный и конечный кадр, а промежуточные кадры будут созданы автоматически). Преимущество при создании анимации отдается автоматическому режиму, который называется твининг (tweening). Твининг не только экономит время и нервы автора, но и размер Flash-файла. Основным понятием анимации является понятие ключевого кадра. Ключевой кадр (Keyframe) – это кадр, в котором определяются изменения в форме, расположении и других свойствах объекта. Для создания впечатления плавного изменения свойств объекта, очень важно установить высокую частоту смены кадров. Но нельзя забывать, что чем выше частота, тем больше объем файла, тем сильнее загружается процессор. Так как ролики, сделанные во Flash, используются в Интернет-приложениях, а разработчик не может гарантировать наличие высокопроизводительного процессора у всех потенциальных пользователей приложений, то необходимо найти баланс между частотой, объемом и требованиями к производительности ПК. Стандартная частота кадров в кинофильмах составляет 24 кадра в секунду, а в видеофильмах – 30 кадров в секунду. Рекомендуемая частота для Flashанимации – от 12 до 18 кадров в секунду. Мы в работе будем использовать частоту 15 кадров в секунду. Запомните: чем ниже частота смены кадров, тем меньше объем Flashфильма! Не увеличивайте частоту без видимой необходимости. Для управления кадрами используется Монтажная линейка Timeline. Познакомимся подробней с ее структурой, условными обозначениями и правилами работы. Пример работы 3:

Подсказка

Пуск| Программы| Macromedia| Macromedia Flash MX Professional 1. Запустите Flash 2004 или клик на Рабочем столе по пиктограмме File| Open 2. Откройте, созданный Вами файл krolik.fla File| Save as… 3. Сохраните файл под именем krolik_2.fla 4. Установи- Modify| Document… Откроется диалоговое окно (см. рис 13). те парамет- Оставьте все без изменений, кроме частоты смены кадров. ры докумен- Установите частоту 15 fps, нажмите Make Default и нажмите та OK

17

Рис. 13 Диалоговое окно свойств документа.

В строке Dimensions устанавливаются размеры рабочего поля. По умолчанию 550х400 пиксел. Изменить размер можно кликнув в окошке и набрав другое значение высоты и ширины рабочего поля. Минимальный размер равен 18х18 пиксел, максимальный – 2880х2880 пиксел. В строке Match расположены три кнопки, выбор которых означает следующее: Printer – устанавливает размер сцены, равный максимально доступной для печати области. Contents – устанавливает размер сцены, обрамленной полосой свободного пространства одинаковой ширины. Для пустого фильма на экране ничего не изменится. Default – применяет установки, выбранные пользователем и сохраненные нажатием на кнопку Make Default. В строке Background color можно выбрать цвет фона рабочего поля документа. В строке Frame rate указывается частота смены кадров. В строке Ruler units можно выбрать единицы измерения размеров документа. 5. Уберите с рабочего поля отобраView| Grid| Show Grid жении сетки 6. Разверните паКликните на  слева от названия панели Timeline. нель Timeline (если Если панель отсутствует, то отобразите ее на экране, она свернута) выбрав Window| Timeline или нажав Ctrl+Alt+T Панель Timeline состоит из двух частей: слева расположено окно управления слоями, а справа окно управления кадрами. Рис. 14 Окно Монтажной линейки Timeline. По умолчанию в документе создается один слой с именем Layer 1. Рядом с ним развернута шкала кадров, пронумерованных через 5 единиц. По умолчанию первый кадр всегда назначается ключевым (keyframe), а остальные являются обычными (regular). Шкала содержит 565 кадров. Добавить новые кадры можно вызвав контекстное меню кадра (правым кликом мыши, указывая на кадр шкалы) и выбрав пункт меню Insert Frame. Управлять видом шкалы кадров можно с помощью меню, расположенного в правом верхнем углу шкалы, которое открывается после нажатия на кнопку

18 . Меню разделено на 4 группы команд. Действие этих команд становится очевидным после их выбора. Попробуйте самостоятельно! На шкале кадров приняты условные обозначения анимационных свойств кадров: • черная точка – обозначает ключевой кадр; • черная окружность – обозначает пустой ключевой кадр; • символ a – обозначает, что ключевому кадру было назначено действие (скрипт); • красный флажок – обозначает, что ключевой кадр содержит метку; • зеленые кавычки – обозначают, что ключевой кадр содержит комментарий; • якорь - обозначает, что ключевой кадр содержит привязку к объекту; • светло-серые кадры после ключевого кадра – обозначают, что они содержат то же, что и ключевой кадр; • прямоугольный контур - обозначает конечный кадр; • красный прямоугольник на номере кадра указывает на текущий кадр. Покадровая анимация отображается несколькими, расположенными подряд, ключевыми кадрами. Автоматическая анимация имеет следующие условные обозначения кадров: • ключевые кадры отмечены точкой, а промежуточные кадры заняты черной стрелкой на сиреневом фоне – означает, что к этим кадрам применена автоматическая анимация; • пунктирная линия – обозначает проблемы с анимацией. Создадим ролик движущегося слева направо по горизонтали и растущего кролика. Пример работы 4:

Подсказка

1. Установите масштаб Выберите в правом верхнем углу окна файла просмотра рабочего поля krolik_2 в списке масштаба просмотра по величине кадра Show Frame 2. Определите первый ключевой Первый ключевой кадр указан по умолкадр ролика чанию в кадре 1 3. Отредактируй- Выделите инструментом Selection кролика. Сгруппите содержание руйте рисунок (для того, чтобы изображение не пепервого ключеремещалось по частям), выбрав Modify| Group. Певого кадра реместите указатель мыши на выделенную область и, нажав на левую кнопку мыши, переместите выделение к левой границе рабочего поля 4. Определите Кликните на шкале кадров по кадру 50. Установите последний клюкурсор мыши на условное обозначение кадра на шкале чевой кадр роли- и нажмите F6 или правым кликом вызовите контекстка ное меню и выберите команду Insert Keyframe. В

19 кадре 50 появится черная точка, кадры от 1-го по 50-й будут выделены серым цветом 5. Отредактируйте со- Выделите инструментом Selection кролика. Педержание первого реместите указатель мыши на выделенную обключевого кадра ласть и, нажав на левую кнопку мыши, переместите выделение к правой границе рабочего поля 6. Уста- Кликните по 50-му кадру на шкале (он должен быть выделен новите темно-синим цветом). Вызовите правым кликом контекстное автома- меню и выберите команду Create Motion Tween или из основтиченого меню выберите Edit| Timeline| Create Motion Tween. ское 50-й кадр теперь должен иметь сиреневую окраску. Теперь усизмене- тановите курсор на кадр 1 и выберите команду Create Motion ние Tween. Все кадры с 1-го по 50-й будут окрашены сиреневым кадров цветом и между ними проведена сплошная черная стрелка. Если стрелка пунктирная – значит Вы ошиблись. Отмените действия (Ctrl+Z) и повторите действия этого пункта заново 7. Сохраните изменения в ролике File| Save 8. Просмотрите Выберите из основного меню Control| Play или наготовый ролик жмите Enter. Кролик должен передвигаться слева направо 9. Создайте Выберите 1-й кадр. Выделите инструментом Free Transэффект рас- form кролика. Установите курсор мыши в правую верхтущего нюю узловую точку и, прижав левую кнопку мыши, покролика тяните о диагонали к левому нижнему углу рабочего поля, получив, таким образом, маленького кролика 10. Сохраните изменения в ролике File| Save 11. Просмотрите Выберите из основного меню Control| Play или наготовый ролик жмите Enter. Кролик должен передвигаться слева направо и расти Добавим к готовому ролику еще один сюжет: после того, как кролик остановится и вырастет, зрачки его глаз начнут вращаться и затем остановятся. Пример работы 5:

Подсказка

1. Сохраните файл krolik_2.fla под File| Save as… именем krolik_3.fla Во Flash графические объекты различаются своими свойствами и преобразованиями, доступными для них. Объекты Shape являются графическими. В состоянии Shape над объектом допустимы любые преобразования линий, заливки, стирания и т.п. Объекты Symbol или символы различают трех видов: Movie Clip (анимационный ролик), Button (кнопка) и Graphic (графический). Каждому виду символа присущи как собственные свойства, так и общие. Movie Clip (анимационный ролик) – используется для создания

20 интерактивных Flash-клипов. Button (кнопка) – изменяются в зависимости от поведения мыши. Образец или экземпляр символа – это копия символа, хранящегося в библиотеке, размещенная на рабочем поле. Сам символ хранится в библиотеке файларолика и может быть использован в другом ролике. Библиотеку (см. рис. 15) можно просмотреть, вызвав соответствующую панель командой Window| Library или нажав Ctrl+L. Рис. 15. Окно библиотеки

Сам символ хранится в библиотеке файла-ролика и может быть использован в другом ролике. Библиотеку (см. рис. 15) можно просмотреть, вызвав соответствующую панель командой Window| Library или нажав Ctrl+L. Панель появляется справа от рабочего поля. Если ее развернуть, то она будет состоять из трех частей: строки заголовка панели, области просмотра объектов библиотеки, перечня названий и типов объектов библиотеки. В Вашей библиотеке сейчас находятся объекты типа Grafic: Tween<№> и Krola. Объекты с названием Tween создаются автоматически при выборе команды Create Motion Tween. Если в символе нужно изменить конфигурацию линий, стереть или дорисовать часть, то символ необходимо выделить инструментом Free Transform и преобразовать в фигуру Shape командой Modify| Break Apart или нажав Ctrl+B. Изменения образца не передаются символу, хранящемуся в библиотеке. Если же изменить символ, то изменятся все образцы. Преобразуем рисунок в символ для того, чтобы при необходимости использовать символ в качестве образца при изменениях в файле. Использование образцов сокращает объем файла. 2. Преоб- Выберите последний (50-й) кадр. Выделите изображение кроразуйте лика командой Edit| Select All или нажмите Ctrl+A. Нажмиграфиче- те F8 или выберите Modify| Convert to Symbol. В появивское изо- шемся диалоговом окне задайте следующие значения парабражение метров: Name = Krola; Behavior = Graphic; Registration кролика (здесь указывается точка изображения, координата в графи- = которой определяет расположение всего символа. На экземческий пляре объекта эта точка изображается окружностью). символ Нажмите OK

21 Теперь разберемся, как создается эффект движения. Итак: кролик должен оставаться на месте, зрачки должны вращаться по указанной нами траектории, при этом глазницы должны быть белыми (т.е. начального положения зрачков не должно быть видно), после завершения вращения зрачков, кролик должен иметь вид, как в 50-м кадре. Для создания этого эффекта мы должны расположить на разных слоях различные части ролика: фоновый слой будет содержать кролика, у которого глазницы без зрачков, другой слой будет содержать правый зрачок, и еще один слой будет содержать левый зрачок, кроме этого нам потребуются 2 слоя, содержащие траектории движения зрачков. Слой с изображением зрачка должен быть связан со слоем траектории движения этого зрачка. Такие связки слоев порождают понятия ведущего и ведомого слоя. На ведущем слое задается траектория движения, а на ведомом – символ, движущийся по траектории, его начальное, конечное положение и твининг. Для того чтобы траектория движения не была видна на экране во время прокрутки ролика, ведущий слой делают невидимым. Приступим к реализации изложенного плана. 3. Вставьте в 51-м кадре ключевой Выберите 51-й кадр. Вставьте клюкадр чевой кадр (см. пример работы 4 п. 4). Твининг захватил и 51-й кадр 4. Удалите твининг Выберите 51-й кадр. Выберите из контекстного из 51-го кадра меню Remote Tween. Заливка кадра станет серой 5. ПреобраВыберите инструмент Free Transform. Выделите кролизуйте символ ка. Выберите команду Modify| Break Apart или нажмите в графические Ctrl+B. Кролик должен быть выделен штриховкой. Если фигуры этого не произошло, то еще раз повторите команду Ctrl+B 6. Сотрите Выберите инструмент Erase. Подберите размер резинки, зрачки резин- соизмеримый с размером зрачков. Установите параметр рекой в 51-м . Сотрите зрачки зинки в кадре 7. Проверьте Кликните по кадру и смотрите на рабочее поле. состояние 11-й кадр 50-й кадр 51-й кадр го, 50-го и 51го кадров 8. Создайте Кликните по 65-му кадру и сделайте его ключевым. Кадры с 51-го по 65-й будут закрашены серым, а в 51-м и 65-м фон для будущих кадров будут стоять черные точки. Вид всех этих кадров будет такой же, как 51-го 9. ПереимеДвойным кликом по названию слоя Layer 1 на панели нуйте слой Timeline войдите в режим редактирования имени. Сотрите Layer 1 в Main клавишей Delete или Backspace старое имя и наберите Main. Перекликните мышкой в любом месте экрана

22 10. Вставьте в нижней левой части панели Timeline (или Клик на новый слой выберите команду Insert Layer из контекстного меню Left над слоем слоя Main). Появится слой Layer 2. Переименуйте его в Main. Left будет ведомым Left (см. п. 8). Если слой Left расположен под слоем Main, то перетяните мышкой его наверх слоем 11. Вставьте новый Выделите левым кликом слой Left. Кликните на слой Left_line над слоем в нижней левой части панели Timeline (или Left. Left_line будет вевыберите команду Add Motion Guide из кондущим слоем для Left текстного меню слоя Left) 12. Выберите левым кликом по имени слой Left_line. Выберите в Опре- этом слое 51-й кадр и сделайте его ключевым. Выберите инструделите мент для изображения траектории движения: карандаш, овал, траек- линию или другой на ваш выбор. Изобразите на рабочем поле торию линию, по которой будет двигаться зрачек. Линия не должна выдвиходить за пределы левой глазницы. Вы видите изображение крожения лика, но рисуете на другом слое. Если линия сразу не удалась, то левого отмените ее, нажав Ctrl+Z, и попробуйте еще раз. Можете увелизрачка чить масштаб изображения, чтобы легче было рисовать, нажав на под панелью инструментов рисования. Если после увелупу личения масштаба глазница будет вне поля вашего зрения, то . Не забудьте вернуть масштаб сдвиньте изображение рукой назад! 13. Создайте Выберите 65-й кадр. Сделайте его ключевым. Выберите твининг тра- 51-й кадр и дайте команду Create Motion Tween ектории 14. Проверьте Кадры с 51-го по 65-й на слое Left_line должны быть заправильность крашены серым. Кадры с 1-го по 50-й на этом слое выполнения должны быть белые. Если они серого цвета, то установидействий. те курсор в 1-й кадр и потяните за мышку в сторону 51-го Сравните с кадра. Должен перемещаться серый контур. Дотяните его рис. 13 до 51-го кадра. Если у вас 51-й и 52-й кадры ключевые, то очистите 52-й кадр, выделив его и выбрав из контекстного меню команду Clear keyframe Если траектория движения – замкнутая линия, то не очень удобно задавать промежуточное положение символа при движении. При твининге Flash выбирает самый короткий путь, т.е. если начальное и конечное расположение символа будет различаться на несколько пиксел или совпадать, то символ не сдвинется с места. Здесь можно либо разорвать линию резинкой и расположить объект в начале и в

23 конце линии, либо задать не два положения символа, а четыре или более, смещая каждый раз символ по траектории. 15. Нари- Выберите левым кликом по имени слой Left. Выберите в этом суйте ле- слое 51-й кадр. Определите 51-й кадр на слое Left, как ключевый зра- вой (см. пример работы 4 п. 4). Выберите инструмент Oval для чок и изображения зрачка. Цвет карандаша и заливки установите опредечерный. Установите параметр рисования овала без границы, лите его нажав при выбранном на панели Colors. В начальначальной точке траектории движения нарисуйте зрачок. Создайте ное, косимвол из нарисованного овала под именем Zrachok (см. п. 2). нечное положе- Выберите в этом слое 65-й кадр. Определите 65-й кадр на слое Left, как ключевой (см. пример работы 3 п. 4). Разместите ние и твининг образец символа Zrachok в конечной точке траектории движения (перетяните мышкой из библиотеки символ Zrachok на с 51-го рабочее поле). Создайте твининг между 51-м и 65-м кадрами по 65-й кадр на слое Left (см. пример работы 4 п. 6) 16. ПроКадры с 51-го по 65-й на слое Left_line должны быть заверьте пра- крашены сиреневым и по ним проходит сплошная червильность ная стрелка. Кадры с 1-го по 50-й на этом слое должны выполнебыть белые. Если они серого цвета, то установите курсор в ния дейст- 1-й кадр и потяните за мышку в сторону 51-го кадра. Долвий. Срав- жен перемещаться серый контур. Дотяните его до 51-го ните с рис. кадра. Если у вас 51-й и 52-й кадры ключевые, то очистите 15 52-й кадр, выделив его и выбрав из контекстного меню команду Clear keyframe 17. Сделайте невидимым Левый клик на точке под изображением глаза ведущий слой ( ) на слое Left_line 18. Проверьте Запустите просмотр, нажав Enter, при выбранном работу ролика 1-м кадре. Ролик должен работать так: кролик перемещается и растет, после чего его левый глаз вращается и останавливается, правая глазница – белая 19. Создайте анимацию вращения правого Сделайте по аналогии с пп. зрачка. Ведущий слой должен иметь имя 10-17 Right_line, ведомый слой Right 20. Добавьте в Выберите слой Main. Выберите в нем кадр 66-й и сдефоновом слое лайте его ключевым. На рабочем поле появится изоокончательное бражение кролика без зрачков. Очистите рабочее поле изображение двойным кликом по инструменту Erase. Перетяните на кролика рабочее поле образец символа Krola из библиотеки 21. Устано- Вызовите панель Info командой Window| Design Panels| вите коор- Info. Панель появится справа от рабочего поля. Её можно

24 динаты изображения кролика в 66-м кадре, как 50-м

свободно перемещать. Откройте панель. На ней указаны размеры выбранного объекта и координаты точки привязки. Выберите на слое Main кадр 50. Выделите кролика. Посмотрите и запишите значения координат X и Y на панели Info. Выберите 66-й кадр, выделите кролика и введите значения координат на панели Info, как 50-м кадре. Это нужно, чтобы не было эффекта передергивания кадра 22. ПроЗапустите просмотр, нажав Enter, при выбранном верьте ра1-м кадре. Ролик должен работать так: кролик перемещаботу роли- ется и растет, после чего его левый глаз вращается по одной ка траектории, правый – по другой, и кролик остается в полной красе 23. Сохраните изменения в ролике File| Save Рис. 16. Вид панели Timeline для файла krolik_3.fla.

24. Протестируйте ролик и проаналиCtrl+Enter зируйте диаграмму загрузки кадров Диаграмма распределения кадров будет иметь вид, как на рисунке 17 (высота ключевых кадров будет зависеть от методов оптимизации, которые вы применяли в примере работы 2). Рис. 17 Диаграмма распределения кадров ролика krolik_3.fla. По виду диаграммы, очевидно, что паузы в работе ролика будут при загрузке 51-го и 65-го кадров. Эти кадры перегружены на слое Main. Преобразуем анимацию на этом слое. 25. Выберите 1-й кадр на слое Кликните мышкой по имени слоя, а Main затем по 1-му кадру этого слоя 26. Отмените Из контекстного меню кадра (правый клик по кадру) твининг в 1-м и выберите команду Remove Tween 50-м кадрах 27. Очистите Правый клик по номеру кадра на слое (появится конключевые кадтекстное меню), выберите команду Clear Keyframe. ры 51, 65 и 66 на Теперь все кадры с 1-го по 66-ой залиты серым, в 1-м и слое Main 50-м кадрах стоят черные точки, а в 59-м и 66-м прямоугольник 28. Сделайте невидимыми слои Левый клик на точке под изображением Right и Left глаза ( ) на соответствующем слое

25 29. Проверьте состояние кадров Клик по кадру. Все кадры на рабочем пос 51-го по 65-й на слое Main ле выглядят как символ Krola в библиотеке 30. Добавьте новый . Переименуйслой Round над сло- Выделите слой Main, нажмите на те слой Layer 6 в Round. Перетяните его мышкой и ем Main оставьте сразу над слоем Main 31. Сделайте 51-й кадр на слое Выделите 51-й кадр на слое. См. пример Round ключевым работы 4 п. 4 32. Нарисуйте в Используйте инструмент Oval. Для подгонки размера 51-м кадре на используйте Free transform. Удобней рисовать овал слое Round два любым, кроме белого цветом, подогнав место и распоовала белого ложение шор, изменить цвет на белый. Кадры с 51-го по цвета так, чтобы 65-й слоя Round закрашены серым, в 51-м кадре – черони прикрывали ная точка, в 65-м – прямоугольник зрачки 33. Проверьте состояние кадров Клик по кадру. Все кадры на рабочем пос 51-го по 65-й на слое Round ле выглядят как символ Krola в библиотеке, только без зрачков 34. Восстанови- Правый клик на 1-м кадре слоя Main. Выберите из конте твининг метекстного меню Create Motion Tween. Кадры с 1-го по жду 1-м и 50-м 50-й залиты сиреневым, между ними сплошная черная кадрами на слое стрелка (см. рис. 18 ) Main Рис. 18. Вид панели Timeline

35. Сделайте виЛевый клик на точке под изображением глаза ( ) димыми слои на соответствующем слое Right и Left 36. Протестируйте ролик и проанализируй- Ctrl+Enter (см. рис 19) те диаграмму загрузки кадров 37. Сохраните изменения в ролике File| Save Рис. 19 Диаграмма распределения кадров ролика krolik_3.fla Если сократить количество кадров ролика, то размер файла будет еще меньше. Тут решающее слово остается за автором ролика.

1.3. Создание связанных экранных страниц,

26

управляемых элементарными скриптами Для интеграции наших умений и знакомства с некоторыми новыми возможностями среды Flash создадим небольшое (состоящее из двух экранных страниц) приложение, в котором на первой странице расскажем о любимой книге, а на второй – о любимом фильме. Каждая страница будет иметь одинаковое оформление фона, содержать 3 кнопки, вызывающие информацию о книге (фильме), и кнопку перехода между страницами. Работу над созданием приложения будем вести по шагам: 1. Настройка параметров документа. 2. Создание основного фона. 3. Создание текстовых и графических объектов. 4. Размещение объектов на фоне. 5. Описание управляющих сриптов, сопровождающих появление объектов. Шаг первый – настройка параметров документа. Пример работы 6: 1. Запустите Flash

Подсказка

Пуск| Программы| Macromedia| Macromedia Flash MX Professional 2004 или клик на Рабочем столе по пикто-

грамме 2. Создайте новый документ Выберите из диалогового окна в разделе Flash Create New| Flash Document 3. Сохраните новый докуВыберите File| Save (Ctrl+S), введите имя мент в свою папку под име- файла, нажмите Сохранить нем all_in_one.fla 4. НаВыберите Modify| Document (Ctrl+J). В открывшемся диалостройте говом окне установите размер рабочего поля документа 800 x парамет- 600 px, цвет фона #330099 (наберите в подокне указанный ры доку- код цвета или поводите пипеткой по палитре по цветам мента темно-синего оттенка и следите за изменением цифрового кода, когда искомый цвет будет найден, сделайте левый клик), частоту смены кадров 15 fps. Нажмите Ok 5. Сохраните изменения File| Save (Ctrl+S) Шаг второй – создание основного фона документа (см. рис. 20).

27 3

5 1

2

Рис. 20. Основной фон документа 6

4 7

Пример работы 7:

Подсказка

1. ПереимеДвойным кликом по имени слоя Layer1 на панели Timeнуйте слой line войдите в режим редактирования имени и наберите Layer1 в Fon Fon, нажмите Enter 2. Определите первый Выберите кадр1 на слое Fon. Нажмите F6. кадр слоя Fon в качестве Далее создание основного фона будет провоключвого диться в первом кадре слоя Fon 3. НаУстановите масштаб просмотра, отображающий рабочее поле рисуйте рамку . целиком, например, 50%. Выберите инструмент рисования (1) раРаскройте панель Properties. Выберите параметры линии: бочего цвет=белый, стиль=Solid, толщина=10. Выберите параполя метры заливки: нет заливки . На панели Options задайте (см. рис. радиус сглаживание углов=10. Переведите указатель мыши 20) на рабочее поле и нарисуйте прямоугольник, обрамляющий все рабочее поле 4. На. Раскройте панель Propрисуйте Выберите инструмент рисования erties. Выберите параметры линии: цвет=белый, овальстиль=Dotted, расстояние между точками (Dot ную границу spacing)=2 pts, толщина=10. Выберите параметры залив(2) (см. ки: нет заливки . Переведите указатель мыши на рабочее рис. 20) поле и нарисуйте овал, левая граница которого располагается, как показано (2) на рис. 20. Немного позже вы удалите те части линии (3), которые нам будут не нужны. Выберите инструмент и сотрите правую часть овала. Чтобы аккуратно стереть линии на пересечении с границей, увеличьте масштаб просмотра 5. Нарисуйте Используйте инструмент с параметрами линии, как вставки (4) (см. рис. 20) для овала. Резинкой удалите ненужные части прямоугольников и овала (3)

28 6. Дорисуйте округление (5) (см. рис. 20)

, параметры линии оставьте, Выберите инструмент как для овала. Обязательно поставьте отметку для сглаживания линии (Custom…| Sharp Corners). Нарисуйте округление. Если Вы потерпели неудачу, то отмените действие (Ctrl+Z) и повторите попытку 7. Дорисуйте линию (6) (см. Используйте инструмент линия ( ) рис. 20) 8. Нарисуйте ), с параметрами, Используйте инструмент линия ( указатель стрелки (7) как для обрамления поля (1), и инструмент . Перед (см. рис. 20) заливкой проверьте, чтобы контур указателя не имел разрывов! 9. Определите Правым кликом по кадру 100 слоя Fon вызовите коносновной фон текстное меню и выберите мышью Insert Frame. Каддля всех кад- ры c 1-го по 100-й слоя Fon должны быть закрашены серов с 1-го по рым, 1-й кадр отмечен черным кружком, в 100-м кадре 100 изображен контур прямоугольника 10. Сохраните изменения в документе File| Save (Ctrl+S) 11. Просмотрите документ Control| Test Movie (Ctrl+Enter) 12. Перейди- Клик по имени документа в верхней левой части окна проте режим смотра. Внесите коррективы в изображение основного форедактирона, если в тестовом режиме Вы обнаружили ошибки. В вания доку- данном случае, неважно в каком кадре Вы будете редактировать фон. Все изменения будут приняты во всех кадмента рах с 1-го по 100 13. Сохраните изменения в документе File| Save (Ctrl+S) Шаг третий – создание текстовых и графических объектов документа. Для реализации нашего сюжета нам потребуются три группы графических объектов: управляющие страницей о любимой книге, управляющие страницей о любимом фильме и управляющие переходами между разделами. Для первой и второй страниц управляющие объекты будут идентичны. Поэтому в примере 8 мы создадим графические объекты из первой и третьей группы. Третья группа будет состоять из одного элемента: № Тип НазваНазначение ние 1. Butback Переход на первую страницу раздела (книги или ton фильма) Первая группа будет состоять из десяти элементов: № Тип Название Назначение 1. Button btn1 Переход на обложку книги 2. Button btn2 Переход на информацию об авторе книги 3. Button btn3 Переход на информацию о содержании книги

29 4.

Button

5. 6. 7.

Bitmap Graphic Movie Clip Movie Clip Movie Clip

8. 9.

Next_page Переход на титульную страницу о любимом фильме oblogka Графическое изображение обложки книги. Title Название книги (текст) Title_sum Название книги для анимации Title_mov Анимированное название книги top_book

Анимированное название книги, для отображения в верхней части экрана при переходе по страницам о книге. 10. Movie pic_book Изображение обложки, преобразованное из Clip графического объекта в объект, над которым возможны преобразования средствами Flash. Приступим к созданию объектов. Начнем с управляющих кнопок. Пример работы 8: 1. Создайте кнопку back.

Подсказка

Выберите Insert| New Symbol… (Ctrl+F8). В появившемся диалоговом окне в подокне Name наберите back, отметьте указателем мыши Button, нажмите Ok. Перед вами откроется окно, вид которого изображен на рис. 21 и в верхней части окна рабочего поля появится имя управляющей кнопки слева от имени сцены (Scine1).

Как было сказано выше, объект типа Button (кнопка) – изменяется в зависимости от поведения мыши. Различают четыре состояния этого объекта: Up – мышь вне кнопки, Over – мышь над кнопкой, Down – кнопка прижата, Hit – определяет границы кнопки (т.е. границы области, в которой кнопка будет «чувствовать» мышь). Процесс создания управляющей кнопки заключается в определении вида кнопки для каждого из 4-х состояний мыши. Вид может быть одинаковым для всех состояний или отличаться в зависимости от положения мыши. На рис. 21 приведен вид окна Монтажной линейки, которое должно быть открыто перед Вами. По умолчанию ключевой кадр установлен в первом кадре для состояния «UP». Рис. 21. Вид окна монтажной линейки для управляющей кнопки. 2. Определите для всех состояний кнопки сле-

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

30 ны, то потом можно будет их скорректировать. После того как изображение стрелки будет готово, установите указатель мыши в кадр под состоянием Hit слоя Layer 1, вызовите из контекстного меню команду Insert Frame Кликните по названию сцены Scene1 в верхней части окна рабочего поля. Окно управляющей кнопки закроется, активизируется окно сцены (в нашем случае с изображением основного фона), в библиотеке объектов документа появится новый объект

дующий вид:

3. Выйдите из режима редактирования кнопки 4. Просмотрите библиотеку документа Ctrl+L 5. Создай- Левым кликом активизируйте подокно библиотеки документе в бибтов, на нижней панели этого окна левым кликом по пиктолиотеке . В библиотеке появится новая папка с именем папку book грамме для объек- untitled folder 1, наберите новое имя папки book и нажмите Enter. Если вы вышли из режима редактирования имени и тов страпапка названа иначе, то правым кликом по папке вызовите ницы о команду Rename и присвойте имя папке книге 6. СозМожете воспользоваться последовательностью команд из п. 1 дайте или в нижней части окна библиотеки левым кликом по пиккнопку тограмме вызвать окно создания символа. После определеbtn3 ния имени и типа символа, перетяните мышкой в библиотеке имя btn3 в папку book 7. Оп1. Кнопка будет иметь следующий вид: редели). Выберите инструмент Text ( те вид состоя- Левым кликом в любом месте рабочего поля активизируйте окния UP но параметров текста (разверните окно Propertis). Оно будет иметь вид, указанный на рис. 22. Выберите значения параметдля кнопки ров текста, указанные на рис. 22. Цвет текста желтый (#FFCC33). Переведите курсор на рабочее поле и наберите btn3. большими русскими буквами СОДЕРЖАНИЕ. 2. Контур кнопки нарисуйте так же, как контур основного фона (толщина линии=3). 3. Скорректируйте взаимное расположение текста и контура с помощью окна параметров (текст должен располагаться в середине контура). Для этого выберите инструмент Selection ( ). Кликните им по тексту кнопки (текст будет выделен синей рамкой), переведите курсор в подокно координат (на рис. 22 обведено) и на клавиатуре набирайте значения координат (они необязательно совпадут с указанными на рис. 22)

31 Рис. 22. Окно параметров инструмента Text.

8. Определите для всех со- Установите указатель мыши в кадр под состояний кнопки вид, созстоянием Hit слоя Layer 1, вызовите из данный в п.7 контекстного меню команду Insert Frame 9. Определите 1. Выберите кадр под состоянием Over. Определите его вид состояния как ключевой. Over для 2. Инструментом Selection ( ) выделите текст. Измекнопки btn3 ните цвет текста в окне параметров на черный. 3. Инструментом Selection ( ) выделите внутреннюю часть кнопки. Измените цвет заливки кнопки в окне параметров на белый 10. Определи- 1. Выберите кадр под состоянием Down. Определите его те вид сокак ключевой. стояния Down ) выделите текст. Из2. Инструментом Selection ( для кнопки btn3 мените цвет текста в окне параметров на белый. 3. Инструментом Selection ( ) выделите внутреннюю часть кнопки. Измените цвет заливки кнопки в окне параметров на голубой (#66CCFF) 11. Определите вид состояКадр уже заполнен, тем самым определения Hit для кнопки btn3 на область чувствительности действия указателя мыши 12. Создайте Кнопка btn2 аналогична предыдущей. Поэтому сделаем кнопку btn2 её из кнопки btn3. В окне библиотеки объектов выделиследующего те имя btn3. Выберите из контекстного меню команду вида: Duplicate. В появившемся диалоговом окне введите имя btn2. Нажмите Ok. Кнопка btn2 появится в папке book. Двойным кликом по имени btn2 вызовите кнопку на редактирование. Выберите поочередно ключевые кадры, замените текст на АВТОР, скорректируйте размещение текста в контуре кнопки 13. Создайте кнопку btn1 следующего См. п. 12 вида: 14. Создайте кнопку Next_page

См. п. 12. Удалите во всех состояниях кнопки контур с заливкой, оставьте только текст. Размер шрифта=40 для всех состояний. Цвет шрифта для «UP» - желтый

32 следующего вида:

(#FFCC33), для «Over» - розовый (#FF9999), для «Down» - голубой (#66CCFF), для «Hit» - красный (#FF0000). Для состояние «Over» измените расстоя-

ние между буквами установите параметр 15. Выйдите из режима реКликните по названию сцены Scene1 в дактирования кнопки верхней части окна рабочего поля 16. Сохраните изменения в документе File| Save 17. ИмFile| Import| Import to library… в открывшемся диалогопортивом окне найдите и выделите графическое изображение, коруйте торое вы заранее отсканировали или нашли (если не знаете графиче- где его найти, то обратитесь к преподавателю). Нажмите ское изо- Ok. Изображение будет под именем выбранного файла имбражение портировано в виде объекта типа Bitmap в библиотеку. Есобложки в ли оно размещено не в папке book, то перетяните его мышбиблиокой в эту папку. Переименуйте изображение в oblogka теку 18. Создайте объ- Перетяните мышкой объект ologka на рабочее поле ект pic_book типа (он будет выделен). Нажмите F8. Введите имя Movie Clip из граpic_book, выберите тип Movie Clip. Удалите объфического объекта ект с рабочего поля, нажав клавишу Delete. Новый oblogka объект появился в библиотеке. Перетяните его в папку book, если он попал не в нее 19. Сохраните изменения в документе File| Save (Ctrl+S) Приступим к созданию анимации названия книги. Нам потребуется 2 клипа: первый будет появляться на титульной странице о любимой книге: название будет выезжать из левого верхнего угла в середину основного окна, изменяя размер от невидимого до большого. После чего название будет зафиксировано в средней части основного окна и постоянно будет переливаться цветами (пока пользователь не выберет переход на другую страницу о книге); второй клип будет появляться на всех страницах о книге в верней части основного окна, переливаясь цветами, так как середина окна будет занята информацией, соответствующей выбранной странице (обложка, автор или содержание). Пример работы 9: 1. Создайте текст названия книги «Координаты чудес»

Подсказка

) создайте текст КоС помощью инструмента Text ( ординаты чудес, выбрав следующие значения параметров текста: цвет текста=белый, шрифт= Monotype Corsiva, размер=20 2. Преобразуйте текст Выберите инструмент Selection (текст будет

33 в Movie Clip c именем выделен синей рамкой). Нажмите F8. Введите имя Title_sum клипа и тип 3. Удалите Title_sum с рабочего поля Delete 4. Создайте но- Выделите мышкой имя любого объекта в папке book. В вый объект нижней части окна библиотеки левым кликом по Title_muv типа пиктограмме вызовите окно создания символа, ввеMovie Clip в пап- дите название и тип объекта ке boоk 5. Создай- Двойным кликом по имени объекта Title_muv в библиотеке те анима- откройте его для редактирования. Определите первый кадр цию: поключевым слоя Layer 1. Переместите из библиотеки объект явление Title_sum в верхний левый угол рабочего поля (значения корастущего ординат: X= -656, Y= -114). В первом кадре установите выназвания - соту клипа H=1. Определите кадр 80 ключевым. В 80-м в объекте кадре установите значения координат: X= -590, Y= 12, выTitle_muv соту клипа H=128. Создайте автоматическую анимацию: в любом кадре с 1 по 79 правым кликом вызовите контекстное меню и выберите команду Create Motion Tween. Кадры с 1 по 80 должны закраситься сиреневым цветом и пересечены стрелкой 6. Сохраните изменения в документе File| Save (Ctrl+S) 7. Создай- Сделайте ключевыми кадры 100, 120, 140, 160. В 100-м те анима- кадре вызовите панель Properties объекта Title_sum, выдецию: пелив его инструментом Selection . В разделе Color (см. рис. релив 23) выберите из разворачивающегося списка значение Tint. цвета на- Установите цвет = #FFFF66 (желтый). В 120-м кадре устазвания - в новите цвет = #FF9999 (розовый). В 140-м кадре установиобъекте те цвет = #66FF99 (зеленый). В 160-м кадре установите Title_muv цвет = #FFFFFF (белый). Создайте автоматическую анимацию: между 80-м и 100-м кадрами, между 100-м и 120-м кадрами, между 120-м и 140-м кадрами, между 140-м и 160-м кадрами Рис. 23. Окно параметров объекта типа Movie Clip.

8. Поставьте метку для создания циклической анимации цвета в объекте

Левым кликом выберите 80-й кадр. На панели Properties (см. рис. 24) в разделе Frame активизируйте окно ввода левым кликом по нему. Наберите название метки Start. Нажмите Enter. На Монтажной линейке в 80-м кадре появится красный флажок и надпись

34 Title_muv

Start

Рис. 24. Окно параметров кадра Монтажной линейки. 9. Создайте циклическую анимацию цвета в объекте Title_muv

Левым кликом выберите 160-й кадр. Разверните панель Actions - Frame, в основном окне которой наберите команду gotoAndplay("Start"); (см. рис. 25)

Рис. 25. Окно панели Actions – Frame. Установив метку в 80-м кадре и отсылку из 160-го кадра на нее, мы организовали циклический переход ролика. Ролик теперь будет работать так: с 1-го по 80-й кадр «выплывает вырастая» название книги, далее каждые 20 кадров сменяется цвет: белый-желтый-розовый-зеленый-белый. 10. Выйдите из режима редакти- Кликните по названию сцены Scene1 рования объекте Title_muv в верхней части окна рабочего поля 11. Сохраните изменения в документе File| Save Второй клип получим как дубликат Title_muv и удалив в нем кадры с 1-го по 80-й. 12. Создайте В окне библиотеки объектов выделите имя Title_muv. Movie Clip c Выберите из контекстного меню команду Duplicate. В именем появившемся диалоговом окне введите имя Top_book. Top_book Нажмите Ok 13. Вызовите объект Top_book Двойной клик на имени в библиотеке на редактирование 14. Уда- Наведите указатель мыши в Монтажной линейке на кадр 1, лите в прижмите левую кнопку мыши и, не отпуская ее, перемещайте объекте указатель вправо по линейке, выделяя кадры до 79-го вклюTop_boo чительно. Отпустите левую кнопку мыши. Кадры должны k с 1-го быть выделены черным. Если не удалось, то начните сначала. по 79-й Правым кликом по выделенным кадрам вызовите контексткадр ное меню и выберите из него команду Remove Frames. Теперь в клипе осталась только циклическая анимация смены цвета

35

Внимание! При выделении кадров важно, чтобы кадр, с которого необходимо начать выделение, не был активным в момент установки на него указателя мыши. В противном случае, кадр (или группа кадров) будет перемещаться вместе с указателем мыши. Если вы попали в такую ситуацию, то просто отмените действие с помощью Ctrl+Z. 15. Выйдите из режима редактирования объекта Top_book 16. Сохраните изменения в документе

См. п. 10 См. п. 11

+Шаг четвертый – размещение объектов на фоне. Оформим четыре экранные страницы раздела о любимой книге: титульную, обложка, автор и содержание.

Рис. 26 Вид титульной страницы раздела о книге У нас готовы все объекты, кроме текста, расположенного в левом верхнем углу окна (см. рис. 26). Этот текст мы не будем сохранять в библиотеке в виде объекта, а поместим его сразу на сцене. Пример работы 10:

Подсказка

1. Сделайте ключевым 101-кадр. 2. Создайте текст «Любимая книга» 3. Расположите кнопки и клип Title_muv

Используйте контекстное меню кадра. Перекликните мышкой на синем поле основного окна, тем самым вы снимете выделение с объектов, размещенных на сцене Параметры текста таковы: цвет текста = #FFFF00 (желтый), шрифт= Monotype Corsiva, размер=35, жирный. Координаты расположения текста: X= 8, Y= 2 Перетягивайте объекты из библиотеки и определяйте им через панель Properties следующие координаты: 1. btn1 X= 90, Y= 145 2. btn2 X= 250, Y= 145 3. btn3 X= 410, Y= 145 4. Next_page X= 550, Y= 472 5. Title_muv X= 19, Y= 128 4. Сохраните изменения в документе Оформите следующую страницу:

36

Рис. 27. Вид страницы «Обложка».

5. Сделайте ключевым 102-кадр См. п. 1 6. Удалите клип Title_muv со сцены Выделите и нажмите Delete 7. Разместите Перетяните объект oblogka из библиотеки и определите изображение им через панель Properties координаты и размеры: X= обложки на 320, Y= 200; H=250, W=160.3. Размеры могут быть сцене другими в зависимости от рисунка, который вы будете использовать 8. Расположите кнопку back X= 16.4 , Y= 145 9. Расположите клип Top_book X= 161 , Y= 10 10. Создайте на Параметры текста: цвет текста = #FFFFFF (белый), сцене текстовый шрифт= Monotype Corsiva, размер=40, жиробъект «Обложный. Координаты расположения текста: X= 60, Y= ка» 300 11. Сохраните изменения в документе Оформите следующую страницу:

Рис. 27. Вид страницы «Автор».

12. Сделайте ключевым 103-кадр См. п. 1 13. Удалите изображение обложки со сцены См. п. 6 14. Разместите на сцене Создайте графический файл, преобразуйте его в объпортрет Роберта Шекли ект Flash и разместите объект на сцене (см. пример работы 8 пп.17-18 и текущий пример п. 7) 15. Создайте Параметры текста: цвет текста = #FFFFFF (белый), на сцене тек- шрифт= Monotype Corsiva, размер=40, жирный. Коорстовый объдинаты расположения текста: X= 58, Y= 199 ект «Автор» 16. СозПараметры текста: цвет текста = #FFFFFF (белый), шрифт= дайте на

37 сцене текстовый объект с информацией о писателе

Times New Roman, размер=13, X= 58, Y= 199, W=618, H=256. Содержание текста: «Роберт Шекли (Robert Sheckley, США, род. 1928-2005). Писатель. Лауреат премий "Странник-97" (в категории "Паладин фантастики"), "Малый Золотой Остап"-1997, "Малый Странник"1999. Родился в Нью-Йорке. Окончил технический колледж, факультативно прослушал курс литературы у Ирвина Шоу. В 1951 году окончил Нью-йоркский университет и получил степень бакалавра искусств, а год спустя опубликовал свой первый рассказ. Является общепризнанным мастером юмористической и сатирической фантастики. Многие российские любители фантастики в числе самых любимых классических произведений называют повести Шекли "Обмен разумов" и "Билет на планету Транай", рассказы "Страж-птица", "Призрак-6" и многие другие. Роберт Шекли опубликовал около двадцати романов и приблизительно столько же сборников рассказов. Также использовал псевдонимы Филлипс Барбе, Нэд Лэнг и Финн О`Донневан. На русском языке изданы два собрания сочинений писателя - первое выпущено издательством "Полярис" (в 12 томах), а второе - издательством ЭКСМО. Также использовал псевдонимы Филлипс Барбе, Нэд Лэнг и Финн О`Донневан. Популярные произведения Шекли издавались на немецком, греческом, венгерском, итальянском, польском, русском, испанском, шведском, финском и литовском языках» 17. Сохраните изменения в документе Оформите следующую страницу:

Рис. 27. Вид страницы «Содержание».

18. Сделайте ключевым 104-кадр См. п. 1 19. Удалите портрет писателя См. п. 6 20. Измените текстоОтредактируйте текст, измените координаты расвый объект «Автор» на положения текста: X= 60, Y= 300 «Содержание» 21. Удалите См. п. 6. текстовый Параметры текста: цвет текста = #FFFFFF (белый), фрагмент с шрифт= Times New Roman, размер=20, X= 263, Y=

38 текстом об 224. авторе. СозСодержание текста: дайте на сце- «Ах, я закидывал свою сеть в их моря, жене текстовый лая наловить хороших рыб, но постоянно выобъект с тек- таскивал я голову какого-нибудь старого стом эпигра- бога. Ф. Ницше. фа к книге «Координаты "Так говорил Заратустра"» чудес» 22. Сохраните изменения в документе. Шаг пятый - описание управляющих сриптов, сопровождающих появление объектов. Пример работы 11:

Подсказка

1. Добавьте новый слой Top над См. пример работы 5 п.10 слоем Fon Этот слой будет управляющим. В нем мы поставим команду Stop(); над 101-м кадром-страницей. Эта команда позволит держать страницу на экране до момента нажатия пользователем одной из кнопок перехода. Команда может быть написана на слое Fon, но это не всегда удобно. Часто используют отдельный управляющий слой, в котором есть только команды. Принципиальной разницы в том, где будет привязана команда к кадру нет. Просто, вынося команды в отдельный слой, мы себя страхуем от случайной ошибки привязать команду к отдельному объекту на сцене в текущем кадре. Такая ошибка не остановит выполнение ролика, но сообщение об ошибке будет выведено в информационном окне при тестировании ролика. 2. Сделайте ключевыми кадры 101, 102, См. пример работы 4 п. 4 103, 104 3. Добавьте команду Stop(); к кадру 101 См. пример работы 9 п. 9 4. Сохраните изменения в документе Добавим команды управления переходами к кнопкам. Команда выглядит однотипно, различаясь для разных кнопок только номером кадра перехода. Команда имеет следующий формат: on (release) { gotoAndStop(<номер кадра или «имя метки»>); } Смысл команды в следующем: по событию «release» (т.е. после нажатия мышкой на кнопку) происходит переход к кадру, номер (или имя метки) которого указано в скобках. 5. Добавьте Активизируйте 102-й кадр. Выделите кнопку инструменкоманду к том Selection и, развернув панель Action-Button, набекнопке back в рите команду: on (release) { 102-м кадре

39 gotoAndStop(101); } 6. Добавьте Выделите команду для кнопки back и скопируйте ее в команды к буфер, далее вставляйте команду из буфера к следующей кнопкам btn1, кнопке. Изменяйте только номер кадра соответственно btn2, btn3 в для: 102-м кадре btn1 gotoAndStop(102); btn2 gotoAndStop(103); btn3 gotoAndStop(104); 7. Добавьте команды к См. п. 6. Будьте внимательны: не вводите кнопкам back, btn1, btn2, команду там, где в этом нет необходимости. btn3 в 101, 103 и 104 кадрах Например, в 102-м кадре не нужен скрипт для кнопки btn1 и т.п. 8. Сохраните изменения в документе 9. Просмотрите документ Control| Test Movie (Ctrl+Enter) 10. Вернитесь в режим редактирования документа Обратите внимание на то, что первые 100 кадров не содержат ничего, кроме основного фона. Создадим в этих кадрах небольшой визуальный эффект: по основному полю по заданной траектории будет перемещаться «луч прожектора», освещая часть основного поля, а остальная часть будет синего цвета (т.е. цвета фона нашего флэш-документа). Подобные эффекты создаются с помощью маскирующего слоя, часто называемого просто маской. Маску можно представить себе в виде замочной скважины в двери: на экране будет видно только то, что можно увидеть в скважину произвольной формы, остальное – сплошной фон документа. Скважина может перемещаться по любой, определенной пользователем траектории. Наша скважина будет в виде окружности. Приступим к созданию маски. 11. Добавьте новый слой Maska над слоем Fon См. п.1 (под слоем Top) 12. Сделайте ключевым кадр 1 слоя Maska См. п.2 13. НариСделайте невидимыми слой Top и Fon, чтобы случайно не суйте в 1-м испортить расположенные на них объекты (см. пример кадре слоя работы 5 п.17). Активизируйте 1-й кадр на слое Maska. Maska Нарисуйте окружность, цвет заливки и линии которой бе«скважину» лый. в форме На самом деле цвет не важен, значение имеет только окружности форма. и определите для Выделите окружность инструментом Selection и преобранее траекзуйте ее в Movie Clip с именем mask_mov, нажав F8. торию дви- Сделайте на слое Maska ключевыми кадры 20, 40, 60, 80 и жения

40 100. Активизируйте поочередно эти кадры и изменяйте в них положение mask_mov, например так: кадр 20 - середина нижней границы, кадр 40 - середина правой границы, кадр 60 - середина верхней границы, кадр 80 - центр, кадр 100 - оставить без изменений. Задайте твининг (см. пример работы 9 п.5) между 1-м и 20-м кадрами, 20-м и 40-м, 40-м и 60-м, 60-м и 100-м

Рис. 28. Вид «скважины» на слое-маске.

14. Определите слой Maska Правым кликом по слою Maska вызовите как маскирующий, сделайте контекстное меню и выберите команду видимыми слои Top и Fon Mask. Слой Maska будет отмечен значком , слой Top будет отмечен значком и станет подчиненным слою Maska 15. Сохраните изменения в документе 16. Просмотрите документ Ctrl+Enter. В начале общий фон будет виден через смещающуюся «скважину», затем появится титульная страница о книге 10. Вернитесь в режим редактирования документа У нас остался не определен переход на раздел о любимом фильме и не сформирован сам этот раздел. Так как раздел о любимом фильме будет содержать сходную по структуре и управлению с разделом о книге информацию, то создадим его, скопировав и подредактировав объекты и кадры первого раздела. Пример работы 12:

Подсказка

1. Сделайте ключевым См. пример работы 4 п. 4. Из контекст105-й кадр слоя Fon и ного меню кадра выберите команду Clear очистите его Keyframe 2. СкоВыделите кадры 101-104, начиная со 101-го кадра слоя Top пируйте и заканчивая 104-м кадром слоя Fon (cм. пример работы кадры

41 101-104 всех слоев в кадры 110114

9 п. 14.). В результате должен быть черный прямоугольник, покрывающий в трех слоях кадры 101-104. Правым кликом по выделенной области вызовите контекстное меню. Из него выберите команду Copy Frames. Активизируйте на слое Top кадр 110, вызовите его контекстное меню и выберите из него команду Paste Frames 3. Поставьте метки в кад- См. пример работы 9 п. 8. В 101 кадре рах 101 и 110 слоя Fon для назовите метку Book, в 110-м – Cinema. организации переходов Флажки в этих кадрах появятся на Монтажмежду разделами ной линейке, а имена не будут видны, т.к. для них на линейке мало места 4. Добавьте команду См. пример работы 11 п. 5, 6. Команда: перехода на другой on (release) { раздел к кнопке gotoAndStop("Cinema"); next_page в кадрах } 101-104 5. В библиотеке документа См. пример работы 8 пп. 5, 12. В ресоздайте папку Cinema и по- зультате название объектов в папке местите в нее копии всех кно- Cinema должно быть таким же, как в пок и клипы Title_sum и папке Book (для корректировки назваTop_book из папки Book ний используйте команду Rename) 6. Измените Измените текст кнопок и клипов соответственно: кнопки и btn1 Кадр клипы из btn2 Режиссер папки Cinema Next_page КНИГА Title_sum Одиссея Top_book Одиссея 7. Создайте клип Title_muv в папке Cinema, исполь- См. пример разуя клип Title_sum из той же папки боты 9 пп. 4-7 8. Подготовьте графические объекты кадра фильма См. пример раи портретов режиссеров боты 8 пп. 17, 18 9. Оформите См. пример работы 10. Используйте рис. 29-32 и вид страниц в текстовые материалы, приведенные ниже. кадрах 110Замените все кнопки и клипы на соответствующие 114 кнопки и клипы из папки Cinema. Не забудьте исправить номера кадров в кнопках

42 Рис. 29. Вид титульной страницы о фильме.

Рис. 30. Вид страницы «Кадр».

Рис. 31. Вид страницы «Режиссер».

Рис. 32. Вид страницы «Содержание».

Текст для страницы «Режиссер»: Андрей Кончаловский Кончаловский Андрей Сергеевич, режиссер театра и кино, Лауреат Государственной премии РФ, Государственной премии Казахстана, Народный артист РФ. Родился 20 августа 1937 года. В юности готовился стать пианистом, учился в консерватории. Но с третьего курса

43 ушел во ВГИК, в мастерскую Михаила Ильича Ромма, прекрасного режиссера, мудрого мастера, воспитавшего таких разных, непохожих друг на друга кинематографистов, как Тарковский, Шукшин, Чухрай, Андрей Смирнов, Соловьев, Митта. Официальный сайт: http://www.konchalovsky.ru/ Фрэнсис Форд Коппола Этот человек бесится, когда его называют «великим режиссером», и пять статуэток "Оскара" он выбросил в окно собственными руками. Он несколько раз разорялся, сделал не один провальный фильм и утверждает, что много лет снимал совсем не то, к чему стремилась его душа. В 1999 году создателю "Крестного отца" исполнилось шестьдесят, и он категорически возражает, чтобы его превращали в памятник: "-Для этого я еще недостаточно покрылся пылью. И еще надеюсь преподнести человечеству свой главный сюрприз". Текст для страницы «Содержание»: Признанные мастера мирового кино - Андрей Кончаловский и Фрэнсис Форд Коппола - перенесли на экран гениальное творение Гомера, создав самый зрелищный и самый высокобюджетный (45 миллионов долларов) минисериал за всю историю Голливуда! Роскошная постановка величайшей эпической поэмы древнего мира позволила обрести новую жизнь легендарной истории странствий Одиссея, царя Итаки, которому греки были обязаны победой в Троянской войне. Разгневанные боги на 10 лет бросили его в пучину тяжелых испытаний. Ему пришлось сражаться с морскими чудовищами и Циклопом. Его соблазняли сладкоголосые сирены и искусительница Цирцея. Он побывал в Царстве мертвых и на острове нимфы Калипсо, которая хотела навеки оставить его у себя. Но несмотря ни на что Одиссей нашел путь домой, к своей верной жене Пенелопе... 10. Измените команду пеСм. пример работы 11 п. 5, 6. Команда: рехода на другой раздел в on (release) { кнопке next_page в кадрах gotoAndStop("Book"); 101-104 } 11. Сохраните изменения в документе 12. Просмотрите документ Ctrl+Enter Подготовьтесь к ответам на все (!) контрольные вопросы и задания к работе.

Контрольные вопросы и задания 1.1. Общее описание среды, создание простых

44

изображений 1. Дайте общую характеристику среде Flash. 2. Что такое плагин? Каково его назначение? 3. Каким системным требованиям должен отвечать ПК для нормальной ра-

боты с Flash? 4. Как запустить Flash? 5. Охарактеризуйте основное окно среды Flash. 6. Какие особенности применения инструментов рисования во Flash по сравнению с другими графическими редакторами вам известны? 7. Перечислите инструменты панели рисования. Продемонстрируйте переключение между инструментами с помощью горячих клавиш. 8. Используя инструменты панели рисования, нарисуйте и раскрасьте лицо клоуна в шляпе. Прокомментируйте порядок выполнения работы. 9. Выделите часть шляпы клоуна. 10. Выделите часть шляпы, нос и рот клоуна и закрасьте красным цветом. 11. Расскажите о возможностях инструментов Paint Bucket и Ink Bottle. 12. Какие параметры настройки инструмента Paint Bucket вам известны? Дайте им характеристику. 13. Продемонстрируйте возможности изменения цвета заливки с помощью инструментов панели Color Mixer. 14. Как пользоваться инструментом Dropper? 15. Охарактеризуйте особенности, свойства и продемонстрируйте правила работы с инструментами Line, Pencil и Brush. 16. Как можно удалить часть изображения? Все изображение целиком? 17. Как отменить сделанные изменения? 18. Настройте вид рабочего поля, отображающий сетку зеленого цвета 20х30px. 19. Найдите любой графический файл на своем ПК (или отсканируйте изображение) и продемонстрируйте возможности импорта рисунков во Flash. 20. Применяются ли операции редактирования к импортированному изображению? 21. Как оптимизировать размеры импортируемого изображения? 22. Как осуществлять контроль за размерами файла и скоростью его воспроизведения? 23. Как получить полный отчет о состоянии каждого кадра флэш-файла? Создайте, откройте и проанализируйте отчет для файла krolik.fla.

1.2. Создание анимированных объектов 24. 25. 26. 27.

Что понимают под термином «анимация»? Что такое кадр? Какие преобразования с объектами возможны во Flash? Что такое слой? Какие типы слоев различают?

45 Какая анимация называется покадровой? Какая анимация называется автоматической? Что такое твининг? Какой кадр называется ключевым? Какую частоту кадра целесообразно задавать во флэш-роликах и почему? 33. Какова стандартная частота смены кадров в кино и видео фильмах? 34. Для чего используется монтажная линейка? 35. Опишите структуру окна и основные инструменты монтажной линейки. 36. Как настроить свойства документа? 37. Какие условные обозначения анимационных кадров приняты на шкале кадров? 38. Откройте файл krolik_2.fla и продемонстрируйте его работу. 39. Как сгруппировать несколько объектов? 40. Как установить ключевой кадр? 41. Как создать автоматическую анимацию? 42. Создайте новый fla-файл, в котором кролик, не меняя размера, будет подпрыгивая перемещаться из правого верхнего угла сцены в левый нижний. 43. Какие графические объекты Flash вам известны? Охарактеризуйте каждый из них. 44. Как вызвать и использовать библиотеку ролика? 45. Чем отличается образец от символа? 46. Можно ли преобразовывать один тип объекта в другой? 47. Как определить для графического символа точку привязки (относительно, которой будет изменяться расположение символа)? 48. Какой слой называется ведущим? 49. Какой слой называется ведомым? 50. Создайте ролик, в котором кролик будет спускаться из левого верхнего угла в правый нижний угол сцены по траектории «серпантин». 51. Проанализируйте диаграмму распределения кадров ролика. Оптимизируйте ее. 28. 29. 30. 31. 32.

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

52.

46

Учебное издание

Знакомство с Flash MX Учебное пособие для вузов (Практикум)

Составители: Васильев Валерий Викторович, Хливненко Любовь Владимировна Редактор

Бунина Т.Д.