close

Вход

Забыли?

вход по аккаунту

?

И.Э. Широкова Создание анимации в программе Macromedia Flash Основы Flash - технологий Учебно-методическое пособие

код для вставкиСкачать
Иркутск: ИПКРО, 2008. –104 с.
МИНИСТЕРСТВО ОБРАЗОВАНИЯ ИРКУТСКОЙ ОБЛАСТИ
ИРКУТСКИЙ ИНСТИТУТ ПОВЫШЕНИЯ КВАЛИФИКАЦИИ
РАБОТНИКОВ ОБРАЗОВАНИЯ»
И.Э. Широкова
Создание анимации
в программе Macromedia Flash
Основы Flash - технологий
Учебно-методическое пособие
Иркутск, 2008
3
Печатается по решению Редакционно-издательского совета ИПКРО
УДК 51
ББК 37.92
Ш 64
Широкова
И.Э.
Создание
анимации
в
программе
Macromedia Flash. Основы Flash – технологий. Учебно-методическое
пособие. –Иркутск: ИПКРО, 2008. –104 с.
Рецензенты:
Балюк А.С. – кандидат физико-математических наук,
доцент Иркутского государственного педагогического
университета
Иванова Е.Н. – кандидат физико-математических
наук, доцент, зав. кафедрой ИиМОИ Иркутского государственного педагогического университета.
Учебно-методическое пособие содержит в себе основные принципы
использования Flash – технологий, или технологий интерактивной webанимации. рассматриваются возможности универсального редактора для
создания презентаций, клипов, заставок, игр, баннеров и логотипов, разработки компьютерных игр, создания художественных анимационных
фильмов и Web-страниц.
Неоспоримым достоинством Flash-технологий является возможность
получения анимированных динамических интерактивных web-страниц
очень небольшого размера, что является идеальным для использования в
сети Интернет. Рекомендуется учителям общеобразовательных школ, преподавателям системы начального, среднего и высшего профессионального
образования, студентам и учащимся.
ISBN 978-5-93219-212-2
© Иркутский ИПКРО, 2008
© Широкова И.Э., 2008
4
Тестирование анимации. Публикация фильма……………………….
Практическая работа «Создание простого Web – сайта»………..
Организация навигации по проекту средствами ActionScript……….
Пример разработки проекта «Анимация и программирование во Flash»...
Приложение. Вопросы и задания для самоконтроля………………...
Литература……………………………………………………………...
90
91
91
92
97
100
5
Введение
Это пособие предназначено для тех, кто хочет научиться основам работы с программой Flash. Мы будет рассматривать последнюю
версию программы Macromedia Flash Professional 8.
Flash – универсальный редактор для создания презентаций, клипов, заставок и игр. Сфера применения программы очень широка – от
создания баннеров и логотипов до разработки компьютерных игр, создания художественных анимационных фильмов и Web-страниц.
Flash-технологии, или, как их еще называют, технологии интерактивной web-анимации, были разработаны компанией Macromedia.
Неоспоримым достоинством Flash-технологий является возможность получения анимированных динамических интерактивных webстраниц очень небольшого размера, что является идеальным для использования в сети Интернет.
Adobe Flash, Flash, Adobe Flash Player, Adobe Flash Professional,
Macromedia Flash - все это названия программ разработки вебприложений, игр и мультфильмов под flash-платформу (Flash
Platform), наряду с ней существуют и другие инструменты (среды):
Adobe Flex Builder, Flash Development Tool (FDT), и другие.
Flash-анимация - это мультипликация, созданная с их помощью.
При создании фильма можно использовать медиа-, звуковые и графические файлы, можно создавать интерактивные приложения и вебстраницы.
В основе Flash-технологии лежит плавное «перетекание» одного
ключевого кадра в другой. Это позволяет создавать сложные мультипликационные сцены, задавая лишь несколько ключевых кадров для
каждого персонажа. Такая технология применялась задолго до Macromedia Flash. В 1986 году была выпущена программа Fantavision, использовавшая эту технологию. В 1991 году на основе этой технологии была выпущена игра Another World, а двумя годами позже Flashback. В 1995, после покупки программы для анимации
FutureSplash Animator, компания Macromedia выпустила продукт под
названием Flash.
Технология Flash использует векторную графику в формате
Shockwave Flash (SWF).
Составляющими Flash-технологии являются:

векторная графика;

поддержка нескольких видов анимации;
6

возможность создания интерактивных элементов интерфейса;

поддержка взаимодействия с импортируемыми графическими форматами (в том числе растровыми);

возможность включения синхронного звукового сопровождения;

обеспечение экспорта Flash-фильмов в формат HTML, а
также в любой из графических форматов, используемых в Интернете;

возможность просмотра Flash-фильмов как в автономном
режиме, так и с помощью Web-броузера;

наличие инструментов рисования, избавляющих создателя
Flash-фильмов от многих рутинных операций, а также от детального
изучения технических аспектов реализации Flash-технологии.
В пособии содержится большое количество примеров и индивидуальных заданий, выполняя которые, читатель сможет овладеть
навыками создания интерактивной компьютерной анимации.
I. Компьютерная графика и анимация
Компьютерная графика появилась достаточно давно - уже в
1960-ых годах. Сегодня принято пользоваться терминами «компьютерная графика» и «компьютерная анимация». Понятие «компьютерная графика» включает все виды работ со статическими изображениями, компьютерная анимация имеет дело с динамически изменяющимися изображениями.
Компьютерную графику обычно разделяют на растровую и
векторную. С помощью векторной графики можно создать объемное (трехмерное) изображение: ее технология позволяет давать компьютеру указания (команды), руководствуясь которыми он строит
изображения с помощью заложенных в программу алгоритмов. Этот
метод больше походит на черчение, причем часто трехмерное. С помощью векторной графики объекты строятся из так называемых
«примитивов» - линий, окружностей, кривых, прямоугольников, эллипсов и т.д. Примитив не нужно рисовать - выбрав пиктограмму с
изображением или названием, например, прямоугольника, вы просто
задаете ее параметры (координаты левого верхнего угла, ширину, высоту и т.п.), а уж компьютер чертит ее сам.
7
В векторных программах удобно работать с текстом, легко создавать геометрические фигуры, проста и легка работа с цветом.
Особенное удобство векторных программ в том, что рисунок в
них состоит из отдельных частей - графических объектов. Поэтому
еще такие программы называют «объектно-ориентированными» редакторами. Такая объектность дает векторной графике необычайную
гибкость в работе. В любой момент вы можете легко изменить любой
компонент, добавить что-то новое или ввести новый текст (данные).
Главный недостаток векторной модели - зависимость времени
визуализации от сложности и количества объектов, составляющих
картину, поскольку при каждом выводе на экран производится расчет
всех точек объектов. Чем сложнее изображение и больше в нем объектов, тем дольше оно рассчитывается и воспроизводится на экране.
Второй существенный недостаток - невозможность адекватно
описать с помощью объектов реальное изображение (например, фотографию человека). Слишком много сил придется потратить, чтобы
разложить его на графические примитивы. Модель получится чрезвычайно громоздкая и неточная. Поэтому для реальных изображений
используют другую модель - растровую, а представляемые ею изображения относят к растровой графике.
Растровое изображение разбито на множество мелких элементов
- пикселов. Цвет каждого пиксела записывается в память компьютера.
Если изображение имеет размер 800 пикселов по горизонтали и 600
пикселов по вертикали, то говорят, что картинка имеет размер
800x600. Чем больше количество пикселов в изображении, тем лучше
оно выглядит на экране и при печати.
Еще один важный параметр, который нужно знать, чтобы грамотно работать с растровым изображением - тип цветовой модели.
Он определяет способ описания цвета или тона каждым пикселом.
Например, модель RGB описывает любой цвет как композицию трех
основных составляющих: R (Red) - красный, G (Green) - зеленый, B
(Blue) - синий. Этот параметр особенно важен при подготовке изображения для определенных целей (вывод на экран или на принтер).
Многие графические программы предназначены для обработки
только векторного изображения или только растра, но существуют и
программы, сочетающие оба типа. Достаточно просто преобразовать
векторное изображение в растр (растеризация), обратная задача явля8
ется достаточно сложной, но существуют программы и для этого (так
назваемые векторизаторы). Программы для работы с трехмерной
графикой могут использовать как векторные (например, для построения сложных объектов), так и растровые изображения.
Компьютерная анимация
Анимация – это быстрая смена одного изображения другим, в
результате которой создается впечатление движения изображения.
Как правило, для плавного воспроизведения анимации необходима скорость , или частота кадров, не менее 12 кадров в секунду.
Компьютерная анимация предполагает использование компьютерного оборудования и программного обеспечения для создания
анимации.
Наиболее распространенным способом создания анимации является метод ключевых или опорных кадров (keyframing). При использовании этого метода вручную создаются так называемые ключевые
кадры (в этих кадрах прорисованы отдельные моменты фильма), а система компьютерной анимации автоматически строит все недостающие кадры между ключевыми, изображая объекты на промежуточных
стадиях их движения.
Для моделирования движений, или эффектов, которые трудно
воспроизвести с помощью ключевых кадров, используется автоматическая анимация. При этом типе анимации рассчитываются текущие
значения параметров анимации, основываясь на начальных значениях, заданных пользователем, и на математических выражениях, описывающих изменение параметров во времени.
Этот метод позволяет создавать анимационные фильмы очень
высокого качества.
Другой путь для создания компьютерной анимации - это использование специальных программ для работы с изображениями (графических редакторов) для рисования одиночных кадров и компоновки
их в необходимой последовательности. Одиночные кадры могут быть
позднее сохранены в необходимом компьютерном формате или выведены на видео.
Для создания компьютерной анимации существует множество
программных приложений, в том числе и программа Macromedia
Flash.
9
II. Знакомство с программой Flash
К концу 20-го века возможности компьютерной анимации достигли уровня обычных видеороликов. Но в Macromedia Flash внедрены такие возможности, о которых не могут и мечтать создатели видеофильмов - это диалог, участие пользователя в анимации. Первоначально это были обычные кнопочки, от нажатия которых происходили те или иные графические изменения. Но очень быстро Macromedia
Flash превратилось в среду разработки профессиональных приложений: сайтов, справочников, игр, презентаций. В настоящий момент
для создания таких приложений программисту необходимо быть немного дизайнером, знать графические возможности программы Flash
и встроенного в нее языка программирования ActionScript.
Общая схема создания Flash-фильмов
Несмотря на то, что редактор Flash предназначен в первую очередь для создания Web-страниц, при работе с ним вам очень редко
придется сталкиваться со специфическими «интернетовскими» терминами, как, например, тэг, атрибут, страница и т.д. Технология создания фильмов Flash основана на применении совсем других понятий и категорий. Поэтому для успешного освоения Flash необходимо
сначала разобраться с применяемой в нем терминологией.
Основные понятия
При построении любого Flash-фильма используется объектноориентированный подход. Это означает, что все элементы фильма
интерпретируются как объекты того или другого типа, для каждого из
которых заданы некоторые свойства и определен набор допустимых
операций. Например, для объекта «Текст» должен быть установлен
размер символов, способ начертания, цвет и т.д. Текст можно определенным образом редактировать, вырезать; копировать, создавать на
его основе текстовые гиперссылки и т.п. То же самое можно сказать о
графических изображениях и о звуке. Тем не менее, при работе с
Flash вместо понятия «объект» чаще используется термин символ
(Symbol). Основное различие между ними состоит в следующем.
Символ представляет собой своеобразный шаблон объекта с
определенным набором свойств. Символ хранится в специальной
библиотеке символов (Library) и может быть многократно использован как в одном и том же фильме, так и в нескольких фильмах.
Каждая новая копия символа, помещенная в фильм, называется эк10
земпляром символа (Instance). Экземпляр наследует все свойства
самого символа, и между ними устанавливается связь: при изменении
свойств символа соответствующие изменения автоматически применяются ко всем его экземплярам. Механизм символов позволяет сократить и размер фильма: если в нем используется несколько экземпляров символа, то информация о его свойствах не дублируется. Вместе с тем, вы можете изменять некоторые свойства конкретного экземпляра, что не влияет на свойства символа-оригинала. Например,
можно изменить размер и цвет экземпляра, а если речь идет о звуковом символе - добавить тот или иной эффект.
Как правило, динамика в Flash-фильмах обеспечивается за счет
того, что в течение некоторого интервала времени изменяются те или
иные свойства экземпляра (например, координаты, цвет, размер, прозрачность и т.д.), то есть изменяется состояние экземпляра. С каждым
состоянием экземпляра связан отдельный кадр фильма (Frame).
Кадр, соответствующий изменению состояния экземпляра, называется ключевым кадром (Keyframe). Ключевой кадр сам рассматривается как объект соответствующего типа, свойства которого пользователь может изменять. Для ключевых кадров предусмотрены некоторые специальные функции и команды.
Процесс смены кадров фильма описывается с помощью временной шкалы (Timeline). В качестве параметров временной диаграммы
можно указывать частоту смены кадров, моменты начала и завершения движения объектов и т.д.
В фильме может использоваться несколько различных объектов.
Состояние каждого из них может изменяться независимо от других,
либо вообще оставаться неизменным (если, например, некоторый
объект используется в качестве фона). Чтобы упростить описание поведения различных элементов фильма, каждый из них помещается,
как правило, на отдельный слой (Layer). Разработчики Flash для пояснения роли слоев в фильме сравнивают их с листами прозрачной
кальки. Собрав воедино «стопку» таких листов, вы можете получить
некую сцену, на которой действуют различные «персонажи». Сцена
(Scene) - это еще один термин, используемый при работе с Flash.
Каждая сцена представляет собой определенное сочетание слоев. Для
простых фильмов бывает достаточно создать и описать однуединственную сцену, содержащую один слой. Для более сложных
11
может потребоваться создать несколько различных сцен. Переход от
одной сцены к другой определяется уже не временной диаграммой, а
несколько иным механизмом. В простейшем случае сцены фильма
выполняются последовательно, в соответствии с их порядковыми номерами. Для более сложного построения фильма используются средства языка ActionScript.
При создании сложных фильмов достаточно важную роль играет
еще одно понятие - клип (Clip, или Movie clip). Клип - это специальный тип символа. Он представляет собой как бы мини-фильм, для которого создается собственная временная диаграмма и устанавливаются собственные параметры (например, частота смены кадров). Клип,
как и любой другой элемент фильма, может быть включен в библиотеку символов для многократного использования в фильме. Каждому
экземпляру клипа может быть назначено собственное имя.
Любой элемент фильма может быть использован и внутри клипа.
Разрешается также создавать «вложенные» клипы. Если требуется
описать некоторые дополнительные условия использования клипа
внутри фильма, то для этого могут быть использованы средства языка
ActionScript. В состав клипа могут включаться также интерактивные
элементы (например, кнопки).
Последовательность действий при создании Flash-фильма
При запуске большинства Windows-приложений автоматически
создается «заготовка» (пустой документ, бланк) того типа, для работы с которым предназначено данное приложение. Например, при открытии окна текстового процессора Word в нем появляется пустой
документ, в который вы можете ввести требуемый текст, добавить
графику и т.д. Для нового документа используются параметры, установленные по умолчанию (размер и стиль шрифта, ширина полей и
т.п.). Чтобы документ выглядел так, как хотели бы именно вы, целесообразно установить требуемые значения соответствующих параметров.
Подобным образом организована и работа с редактором Flash.
При его запуске автоматически создается «заготовка» будущего
фильма (точнее, его первой сцены). Если это необходимо, автор может установить собственные значения общих свойств фильма, таких
как частота смены кадров, размеры окна, используемого для отображения фильма, цвет фона, и некоторые другие.
12
После установки общих параметров фильма можно переходить к
формированию первой сцены фильма. Решив, какие именно объекты
должны присутствовать на этой сцене, вы последовательно помещаете каждый из объектов на новый слой. Установка параметров слоя это один из наиболее ответственных этапов построения фильмов. Поскольку в фильме слои (или помещенные на них объекты) тем или
иным образом взаимодействуют друг с другом, после описания очередного слоя может оказаться, что требуется отредактировать созданные ранее. В этом нет ничего страшного, это вполне естественно,
и Flash предоставляет автору возможность скорректировать предыдущие действия.
Очередной объект, подлежащий включению в фильм, может
быть либо взят из библиотеки символов, либо создан заново.
Если объект пока существует только в вашем воображении или
на бумаге, то Flash превращается в графический редактор, предоставляющий все основные инструменты для рисования, закрашивания,
ретуширования и комбинирования различных изображений. При этом
как отдельные компоненты создаваемого объекта, так и законченные
изображения могут быть импортированы из других графических
форматов.
Те объекты, которые предполагается использовать в фильме неоднократно (хотя бы дважды), целесообразно сразу создавать как новые символы.
Создание Flash-фильмов является весьма непростым делом. Поэтому после завершения очередного шага полезно проверить полученный результат, протестировать его. Flash позволяет тестировать
как отдельные сцены фильма, так и фильм в целом. Если тестирование прошло успешно, не забывайте сохранить результат своей работы
на диске (в отличие от того же Word, Flash не поддерживает функцию
автоматического сохранения).
После завершения работы над фильмом полезно также вспомнить о том, что он должен стать частью содержимого Web-страницы.
Самый главный недостаток любой страницы - большое время загрузки. Исходя из этих соображений, разработчики Flash позаботились о
том, чтобы вы могли оценить время загрузки фильма. Причем информация может быть получена как в числовой, так и в графической
форме для всех кадров фильма.
13
Интерфейс программы Flash
Рис.1 Основные элементы рабочей среды Flash
Каждому вновь открытому файлу соответствует свой рабочий стол.
На рабочем столе находится кадр - белая прямоугольная область на
экране, в которой воспроизводится Flash-фильм.
Строка заголовка – содержит название программы и имя документа;
Меню – включает все команды, предусмотренные программой;
Временная шкала- служит для контроля длительности показа изображений (управления анимацией).
Панель редактирования (Edit Bar) - позволяет управлять сценами,
редактировать символы, масштабировать рабочую область;
Инспектор свойств – отображает свойства выбранного инструмента,
символа, или документа. По умолчанию отображаются свойства документа: размер, цвет фона, частота кадров, параметры публикации и
параметры устройства;
Плавающие панели – позволяют управлять практически всеми свойствами объектов вашего документа: выбрать цвет или создать собственный цветовой образец, выровнять объекты и т.п.
Все панели можно открыть из основного меню Windows или содержащихся в нем подменю.
14
Меню View
В программе Flash предусмотрены некоторые возможности, повышающие точность рисования. Это средства для разметки стола и рабочей области: линейки (Rulers), сетка (Grid) и направляющие
(Guides). Получить доступ к ним можно через основное меню View.
Направляющие – это горизонтальные и вертикальные линии,
которые можно использовать в работе в качестве вспомогательных,
чтобы более точно разместить объекты на рабочем поле. Чтобы отобразить на экране направляющие нужно сначала отобразить линейки:
View Rulers. Чтобы отобразить направляющие выберите команду
View GuidesShow Guides, а затем перетащите направляющие с
линеек: при перетаскивании направляющей с левой линейки вы получаете вертикальную направляющую, а с верхней – горизонтальную.
Чтобы удалить направляющую, перенесите ее обратно на линейку.
Рис.2 Меню View c раскрытым подменю для отображения сетки
Сетка на рабочем поле используется для большего удобства при
изменении размеров, аккуратного и точного позиционирования объектов. И сетка, и направляющие видны только во время редактирования
фильма, в результирующем ролике они отсутствуют.
Чтобы отобразить сетку, выберите команду View Grid Show
Grid. Чтобы задать размеры ячейки сетки или изменить цвет линий
сетки выберите команду View Grid Edit Grid.
15
III. Рисование в среде Macromedia Flash
В среде Macromedia Flash вы можете создавать векторные рисунки, которые состоят из контуров (Stroke) и области заливки (Fill). Отдельные контуры можно нарисовать с помощью инструментов Line (Линия) или Pencil
(Карандаш). Если с помощью этих инструментов вы нарисуете замкнутую
область, ее можно будет окрасить произвольным цветом, градиентом или
заполнить растровым рисунком, т.е. получить область заливки.
С помощью инструментов Rectangle (Прямоугольник) и Oval
(Овал) можно создать одновременно контур и заливку. Инструмент
Brush (Кисть) создает только заливку, без контура.
Давайте теперь более подробно рассмотрим панель инструментов
и средства рисования, которые на ней расположены.
Панель инструментов разделена на 4 области:
1. Группа Tools (инструменты рисования и выделения);
2. Группа View (позволяет двигать лист и увеличивать/уменьшать изображение);
3. Группа Colors (позволяет выбирать цвет заливки (Fill color) и
контура (Stroke color) из палитры, менять эти цвета местами, делать
один из них прозрачным или устанавливать черно-белый режим);
4. Группа Options (отображает дополнительные возможности
каждого инструмента).
Выбор инструмента и его модификаторов (режимов работы) осуществляется нажатием левой клавиши мыши в панели инструментов.
На рис. 3 показана панель инструментов с выбранным инструментов Selection (Стрелка) и в группе Options отображаются модификаторы именно для этого инструмента.
Во Flash граница (контур) и область заливки являются самостоятельными объектами. Пред тем как изменять параметры этих объектов, их необходимо выделить. Область заливки или контур выделяются одним щелчком
левой кнопки мыши. Если нужно выделить область заливки вместе с контуром, сделайте двойной щелчок левой кнопкой мыши.
Для инструментов, создающих заливку (Rectangle, Oval, Brush,
Paint Bucket) в инспекторе свойств имеется возможность выбрать
цвет заливки.
Любая фигура, с однотонной заливкой и без контура, наложенная
на другую фигуру с теми же характеристиками, после снятия выделения образует с ней единое целое. При наложении одной фигуры на
другую с отличающимися характеристиками, верхняя форма поглощает перекрывающийся участок нижней формы.
16
Subselection (Частичное выделение)– редактирует созданные инструментами Pen, Pencil, Brush,
Line, Oval и Rectangle объекты
Selection (Стрелка)
Free Transform (Свободное
преобразование)
Line (Линия).
Pen (Перо) – создает кривые
Безье
Oval (Овал)
Pencil (Карандаш)
Ink Bottle (Чернильница) создает контур или изменяет
стиль контура
Eyedropper (Пипетка)
Hand (Рука) - перемещает
рабочую область
Stroke Color (Цвет контура)
– устанавливает цвет контура
Black and white (Черный и
белый) и No color (Нет
цвета) – устанавливают
цвета контура и заливки
Модификатор Snap to Objects (Привязка к объекту)
- объект при рисовании притягивается к месту
Модификатор Smooth
(Сглаживание) - сглаживает линии и простые кривые
Gradient Transform (Преобразование градиента) – изменяет
параметры градиента
Lasso (Лассо) выделяет области произвольной формы
Text (Текст)
Rectangle (Прямоугольник)
Brush (Кисть)
Paint Bucket (Заливка)
Eraser (Ластик)
Zoom (Лупа) изменяет
масштаб отображения рисунка
Fill Color (Цвет заливки) –
устанавливает цвет заливки
Swap colors (Заменить
цвета)– меняет местами
цвет контура и заливки
Модификатор Straighten
(Спрямление) - спрямляет
линии и простые кривые
Рис. 3 Панель инструментов
17
Для того чтобы объекты существовали независимо друг от друга
или контур и заливка составляли единое целое используют режим рисования Object Drawing (этот режим имеют инструменты Line (Линия), Pen (Перо), Oval (Овал), Rectangle (прямоугольник), Pencil
(карандаш) и Brush (кисть)) или выполняют группировку объектов.
Рис.4 Модификатор Objekt Drawing
Для группировки необходимо выделить объекты, которые нужно сгруппировать (или только обводку и заливку, дважды щелкнув на
объекте) и выполнить команду Modify  Group (Изменить 
Группировать). Вокруг выделенных объектов появится голубая
ограничивающая рамка. Она означает, что объекты сгруппированы и
будут вести себя как единое целое. Напрямую редактирование группы не возможно. Для того чтобы изменить объекты группы, выполните двойной щелчок на содержимом группе. Flash перейдет в режим
редактирования данной группы (все остальные объекты приобретут
более бледный тон). Выход из режима редактирование группового
объекта производится на названии текущей сцены, указанном в левой
части панели инструментов Edit Bar. Разгруппировать объекты можно командой Modify  Ungroup (Изменить  Разгруппировать).
При использовании режима рисования Objekt Drawing получается
похожий результат – нарисованная фигура сразу будет помещена в голубую рамку, и приобретет все те свойства, которые имеют группы.
Рассмотрим подробнее наиболее часто используемые инструменты.
Инструмент Selection (Стрелка или Выделение) – используется
для выделения объектов и изменения их формы. Чтобы выполнить над
объектом те или манипуляции, его необходимо предварительно выделить.
Во Flash можно выделить объект целиком либо только его часть, группу
объектов. Чтобы выделить весь объект, следует выбрать инструмент Selection и затем выполнить одно из двух действий:

щелкнуть дважды мышью внутри объекта;
18
установить указатель мыши за пределами объекта, и, нажав
кнопку мыши, переместить указатель таким образом, чтобы весь объект
оказался внутри области, ограниченной прямоугольником.
Для выделения контура объекта следует подвести указатель к границе объекта и щелкнуть (один раз) левой кнопкой мыши. В результате контур будет выделен таким же образом, как и при выделении всего объекта, а
внутренняя часть объекта останется не выделенной.
Если контур объекта представляет собой многоугольник (то есть
имеет углы), то щелчок на любом участке (отрезке) контура приводит к
выделению только этого участка. Чтобы выделить весь такой контур, следует щелкнуть последовательно на всех отрезках контура, удерживая
нажатой клавишу Shift. Инструмент Selection можно также применять для
редактирования контуров объектов. Для этого требуется подвести указатель к контуру (он не должен быть выделен!). Когда возле указателя появится значок в виде небольшой дуги, нажать левую кнопку мыши и, не
отпуская ее, переместить указатель в нужном направлении.
Инструмент Selection имеет параметры Smooth и Straighten – они
позволяют улучшить качество рисунков (сгладить линии или выпрямить).
Параметр Snap To Objects – привязка к объектам – заставляет создаваемые объекты привязываться к уже имеющимся на рабочем поле (появляется кружочек в той точке, в которой будет произведена привязка).
Инструмент Pencil (Карандаш) – можно использовать для выравнивания линий и сглаживания кривых при рисовании. Для этого предназначены 3 режима модификатора (см. рис.5).

Рис.5 Модификаторы инструмента карандаш; результаты работы
инструмента карандаш с использованием разных модификаторов.
19
Инструмент Line (линия) – предназначен для рисования прямых линий. При нажатой клавише Shift – линии будут строго вертикальными (горизонтальными) или располагаться под углом 45°. При
нажатой клавише Alt – рисование линии начинается от середины линии, в обе стороны.
Инструменты Линия и Карандаш создают контуры. Настроить
внешний вид контуров можно при помощи инспектора свойств.
Рис. 6 Вид инспектора свойств для инструмента Line (Линия)
Основные параметры настройки – толщина (thickness) и острые углы (sharp corners). Дополнительные параметры зависят от
типа контура:
ДополнительВозможные значения
ные параметры
Solid (Сплошная) Нет
Dashed (Штрихо- Dash
(длина
вая)
штриха и интер- От 0,25 До 300
вала)
Dot Spacing (расDotted (Точечная)
стояние
между От 0,25 До 300
точками)
Solid (Сплошная)
Simple (Простая)
Ragged
(НеровRandom (Случайная)
ная)
Pattern (Модель) Dotted (Точечная)
Random Dotted (Точечная случайная)
Тип Линии
20
Wave
Height
(Высота колебания)
Wave
(Длина
ния)
Length
колеба-
Dot Size (Размер
точки)
Stipple (Точечный
Dot
Variation
Пунктир)
(Варианты точек)
Density
(Плотность)
Thickness
(Толщина)
Hatched
(Попе- Spaсe
речно-Штриховая)
ние)
(Расстоя-
Triple Dotted (Тройная точечная)
Random Triple Dotted (Случайная
тройная точечная)
Flat (Ровная)
Wavy (Волнистая)
Very Wavy (Очень волнистая)
Wild (Буйная)
Very Short (Очень короткая)
Short (Короткая)
Medium (Средняя)
Long (Длинная)
Tiny (Крошечный)
Small (Маленький)
Medium (Средний)
Large (Большой)
One Size (Одного размера)
Small Variation (С небольшими
различиями)
Varied Sizes (Различных размеров)
Random Sizes (Случайных размеров)
Very Dense (Очень плотно)
Dense (Плотно)
Sparse (Редко)
Very Sparse (Очень редко)
Hairline (Волосяная)
Thin (Тонкая)
Medium (Средняя)
Thick (Толстая)
Very Close (Очень близкое)
Close (Близкое)
Distant (Удаленное)
Very Distant (Очень удаленное)
None (Нет)
Bounce (Скачки)
Jiggle (НевыроLoose (Расплывчатая)
вненность)
Wild (Буйная)
21
None (Нет)
Slight (Слабый)
Rotate (Наклон)
Medium (Средний)
Free (Свободный)
Straight (Прямая)
Slight Curve (Слабая кривизна)
Curve (Кривизна)
Medium Curve (Средняя)
Very Curved (Сильная)
Equal (Одинаковая)
Slight Variation (Со слабыми различиями)
Length (Длина)
Medium Variation (Со средними
различиями)
Random (Случайная)
Выбрать цвет контура можно, воспользовавшись инструментом
Stroke Color (группа Colors на панели инструментов). Для этого:
• Подведите курсор к иконке рядом с изображением карандаша
• Кликните на стрелочку внизу иконки.
• Выберете один из цветов в появившемся окне.
Таким же образом настраивается цвет заливки, только используется при этом инструмент Fill Color (группа Colors на панели инструментов).
Инструменты Oval (овал) и Rectangle (прямоугольник) –
позволяют рисовать прямоугольники и эллипсы – фигуры, состоящие
из контура и заливки. Работа с ними достаточно проста.
Чтобы нарисовать объект овальной или круглой формы:
• выберете пиктограмму Овал (Oval) в панели инструментов;
• настройте цвет контура и цвет заливки с помощью инструментов Stroke Color и Fill Color.
• Если вы хотите нарисовать окружность – нажмите кнопку No
Color (Нет Цвета) при выбранном инструменте Fill Color (Цвет заливки), если же вам нужен закрашенный круг без контура, нажмите
кнопку No Color (нет цвета) при нажатом инструменте Stroke Color
(Цвет контура). Далее:
• подведите курсор к тому месту, где будет расположен левый
верхний угол прямоугольника, описанного вокруг вашего будущего
круга;
22
• прижмите левую кнопку мыши и двигайте курсор. Для рисования правильных окружностей нужно нажать и не отпускать клавишу Shift.
Чтобы нарисовать объект прямоугольной формы:
• выберете пиктограмму Прямоугольник (Rectangle) в панели
инструментов;
• настройте цвет контура и цвет заливки, так же, как при использовании инструмента Овал (Oval).
• подведите курсор к тому месту, где будет расположен левый
верхний угол прямоугольника;
• прижмите левую кнопку мыши и двигайте курсор. Для рисования квадратов нужно нажать и не отпускать клавишу Shift.
Этот инструмент может также работать в режиме многоугольника (PolyStar), с его помощью можно получить изображения правильных многоугольников или звезд. Чтобы воспользоваться режимом Многоугольник, подведите указатель мыши к черному треугольнику в левом нижнем углу пиктограммы, обозначающей инструмент Прямоугольник. В появившемся списке выберите
PolyStar. В инспекторе свойств появится кнопка Options, которая
позволит настроить свойства многоугольника или звезды, которую
вы собираетесь рисовать.
Инструмент Brush (кисть).
Этот инструмент имеет 5 режимов закрашивания:
А) Paint normal – обычное.
Б) Paint fills – закрашивание заливок объекта.
В) Paint behind – закрашивает фон позади объекта.
Г) Paint selection – закрашивает внутри выделения.
Д) Paint inside – закрашивает внутри контура. В этом случае имеется
в виду контур той области, в которой мы начали закрашивание.
Можно менять размер и форму кисти – параметры Brush Size и
Brush Shape.
Кисть создает заливку, к которой инструментом Ink Bottle
(Чернильница) можно добавить контур.
Инструмент Paint Bucket (Заливка) – позволяет закрашивать
ограниченные контуром области сплошными или градиентными цветами, или использовать в качестве заливки растровый рисунок. Этот
инструмент имеет параметр Gap Size (Размер Зазора).
23
Рис.7 Возможные значения параметра Gap Size (Размер Зазора)
Чтобы использовать инструмент Paint Bucket (Заливка):
• выберете Paint Bucket в панели инструментов;
• подведите курсор к объекту, который хотите окрасить;
• кликните мышкой. Объект будет окрашен в выбранный цвет.
Выбрать цвет заливки можно с помощью инструмента Fill Color
(Цвет Заливки) на панели инструментов. Кликните по прямоугольнику со стрелочкой и выберите в появившемся окне нужный цвет.
Когда выбран этот инструмент, панель инспектора свойств также отображает пиктограмму для настройки цвета.
Практическая работа «Создание простых векторных рисунков»
Задание: при помощи инструментов рисования Bruch (Кисть), Pensil
(Карандаш), Paint Bucket (Заливка), Rectangle (Прямоугольник),
Oval (Овал) нарисуйте картинки, изображенные на рисунках 8, 8а.
а) Букет цветов
24
б) Стрелки
в) Геометрический узор
Рис. 8. Векторные рисунки
г) Кленовый лист.
д) Дом.
Рис. 8а. Векторные рисунки
Букет цветов.
Цветы нарисованы с помощью инструмента Oval (Овал), чтобы
создать ощущение «пушистости», установите в инспекторе свойств
значения стиля контура, как показано на рис. 2.
Чтобы цветы, стебель и листья не «смешивались» друг с другом,
используйте операцию группировки (меню Modify – Group) или режим рисования Objekt Drawing для цветов, треугольников, составляющих стебель, листьев. Чтобы расположить части рисунка в правильном порядке (цветы лежат поверх стебля и листьев), используйте
меню Modify – Arrange.
Рис.9. Стиль контура для рисования контура цветка.
25
Стрелки
Чтобы нарисовать треугольник , выберите в выпадающем меню
для инструмента Rectangle (Прямоугольник) – Polystar, в инспекторе свойств нажмите кнопку Options, установите Style = Polygon и
нарисуйте многоугольник с 3 сторонами. При помощи инструмента
Selection (Стрелка) измените форму треугольников.
Геометрический узор
Для создания этого узора используются инструменты Прямоугольник и Линия, Заливка.
Сначала нарисуйте пятиугольник, затем с помощью инструмента Линия соедините попарно все
углы.
Теперь проведите линии таким образом, чтобы
они проходили через углы внутреннего пятиугольника, соединяя стороны внешнего. Начинайте рисовать линию от угла внутреннего пятиугольника, держа нажатой клавишу Alt, тогда
линия будет рисоваться в обе стороны от начальной точки. Если конец линии выйдет за пределы
внешнего пятиугольника, используйте инструмент Стрелка, чтобы выделить выступающий
конец и удалить его.
Маленькая звездочка в центре фигуры готова. Теперь дорисуем маленькие звезды в углах большого пятиугольника. Для этого в каждом углу проведите линии, которые показаны на рисунке.
Раскрасьте рисунок, используя инструмент Заливка.
26
Кленовый лист
С помощью инструмента Линия нарисуйте
прожилки:
Затем соедините концы линий:
С помощью инструмента Стрелка сделайте
линии более плавными:
Раскрасьте листок инструментом Кисть.
27
Дом
Инструментом Стрелка нарисуйте 2 прямоугольника – большой и маленький.
При помощи инструмента Selection (Стрелка)
сдвиньте левый нижний угол маленького прямоугольника немного вправо
Скопируйте полученную фигуру. Выберите для
копии команду Modify – Trasform – Flip
Horisontal.
Соедините две половинки крыши в одну, крышу пристыкуйте к дому.
Выделите полученный домик и сделайте его
копию, используя команды контекстного меню
Copy и Paste. На одной из копий нарисуем окна
и дверь: инструментом Прямоугольник нарисуйте окошко, скопируйте его в буфер обмена и
поместите на рабочее поле 5 дубликатов. Расположите окна поверх домика, как на рисунке.
Чтобы добиться точности в расположении, воспользуйтесь линейками и направляющими, либо командами из меню Modify – Align. Нарисуйте дверь.
28
Теперь поместите часть домика с окнами немного впереди и ниже части домика без окон:
Соедините линиями углы, удалите лишние линии и закрасьте белые участки инструментом
Заливка. Можно также изменить цвет окон,
крыши и двери, добавить мелкие детали (шторки, трубу и т.д.)
Различные способы трансформирования объектов
Для трансформации объектов используются инструменты:
• Selection (Стрелка);
• Subselection (Подвыделение);
• Free Transform (Свободная трансформация).
• Инструмент Стрелка (Selection) был описан выше.
Инструмент Subselection (Подвыделение) позволяет трансформировать линии, созданные инструментом Pen (Перо). Для трансформации используются маркеры на линиях.
Инструмент Free Transform (Свободная Трансформация) позволяет произвольно изменять форму объекта. В разделе Options (Опции) вы
можете выбрать один из четырех режимов трансформации (рис.10).
29
Рис.10 Четыре режима трансформации
Во Flash любой элемент фильма - графический объект, символ,
группа, текстовый блок - имеют так называемую точку трансформации (transformation point).
Точка трансформации - это некоторая точка объекта, относительно которой Flash выполняет позиционирование и преобразование
объекта (поворот, наклон и т.д.). По умолчанию точка трансформации
совпадает с геометрическим центром объекта.
Визуально эта точка отображается только в режиме трансформации объекта, то есть если объект выбран с помощью инструмента
Free Transform. Она представляет собой небольшой незакрашенный
кружок. Перемещая точку трансформации, вы можете изменять результат выполнения преобразования объекта. Чтобы изменить положение точки трансформации, необходимо:
1. Включить инструмент Free Transform и выбрать с его помощью требуемый объект фильма.
2. Подвести к точке трансформации указатель мыши, и когда возле
него появится маленький кружок, нажать левую кнопку мыши.
3. Не отпуская кнопку мыши, переместить точку трансформации
на новую позицию.
30
Рис. 11 иллюстрирует различие в выполнении операции поворота в зависимости от положения точки трансформации (слева - исходное, в геометрическом центре фигуры, справа - после перемещения
точки).
Обратите внимание, что эти же режимы, а также другие команды, преобразующие объект, доступны в пункте Transform (Трансформация) меню Modify (Модифицировать). Кроме того, панель
Transform (Трансформация) в меню Window (Окно) позволяет
очень точно изменять масштаб, наклонять (Skew) и поворачивать
(Rotate) объект при помощи полей ввода. Сжатие измеряется в процентах, наклон и поворот -в градусах.
Рис.11 Результат выполнения поворота при разных положениях точки
трансформации
Если вы хотите трансформировать активный объект, введите
значения и нажмите Enter. Если же вы хотите использовать как исходный, так и измененный объекты, нажмите пиктограмму Copy and
apply transform (Копировать и применить трансформацию).
Практическая работа «Создание рисунков с использованием
различных преобразований графических объектов»
Задание: создайте изображения, показанные на рис. 12.
31
а) Снежинка
б) Звездная дорожка
в) Улица
г) Радуга
Рис. 12 Задания для практической работы №3.
Рекомендации к выполнению:
Снежинки
Нарисуйте звезду с 7 лучами (выберите в выпадающем меню для
инструмента Rectangle (прямоугольник) – инструмент Polystar, в
инспекторе свойств нажмите кнопку Options, установите Style = Star,
с помощью инструмента Selection (Стрелка) получите один из лучей
снежинки. С помощью инструмента Ink Bottle (Чернильница) измените стиль контура (кнопка Custom в инспекторе свойств) как показано на рис.13.
32
Рис. 13. Стиль контура для рисования луча снежинки
Переместите центр фигуры на острие луча. На панели Transform задайте угол поворота 45 градусов. Щелкайте по кнопке Copy and Apply
Transform, пока не получится снежинка. Все сгруппируйте.
Другие варианты снежинок:
а) Снежинка, нарисо- б) Снежинка, нарисованная с помощью ванная с помощью ининструмента Кисть; струмента Овал
Справа - один из
лучей снежинки.
в) Снежинка, нарисованная при помощи инструмента Овал, с применением инструмента
Transform (модификатор
Envelope)
Рис. 14. Снежинки
Звездная дорожка
Чтобы получить эффект спирали, нужно в панели Transform задать не только угол поворота, но и изменение размера (например,
90%). Это значит, что у каждой новой звездочки ширина и высота будут составлять 90% от ширины и высоты предыдущей звездочки.
33
Улица
Можно воспользоваться изображением дома, которое мы получили при выполнении Практической работы по теме «Создание
простых векторных рисунков»
При помощи инструмента Free Transform (модификатор
Distort) можно изменить ориентацию домика в пространстве:
Рис. 15. Улица
Радуга
Разноцветные полоски, из которых состоит радуга, можно нарисовать инструментами Line (линия), Brush (кисть) или Rectangle
(прямоугольник), и затем изогнуть их при помощи инструмента
Free Transform (модификатор Envelope) .
Управление цветом
Выбор и настройка цветов производится с помощью панелей
Colors (Цвета), Color Mixer (Цветовой миксер) и Color Swatches
(Цветовые образцы). Кроме того, вы можете использовать панель
Инспектора Свойств.
Помимо обычных, сплошных, цветов, в программе Flash имеется
возможность использования градиентных и растровых заливок.
Градиент – это многоцветная заливка с плавным переходом
между 2 или более (до 16-ти) цветов. Любой цвет в градиенте может
также включать степень прозрачности.
Для изменения параметров градиентных и растровых заливок
используется инструмент Gradient Transform.
34
а) Colors (Цвета)
б) Color Mixer
в) Color Swatches
(Цветовой миксер)
(Цветовые образцы)
Рис.16 Панели для работы с цветом
Панель Colors (Цвета) позволяет выбрать цвета контура и заливки.
Для этого:
• подведите курсор к одной из пиктограмм с цветом;
• кликните на стрелочку внизу пиктограммы;
• выберете один из цветов в появившемся окне.
Или введите шестнадцатеричный код желаемого цвета. Например,
#FF0000 для красного. Здесь же вы можете установить прозрачность
(Alpha) в процентах или при помощи бегунка.
Крайняя справа пиктограмма открывает еще одно диалоговое окно,
где пользователь может создавать новые цветовые образцы. По сути, базовый диалог представляет собой панель Color Swatches (Цветовые образцы), а расширенный – Color Mixer (Цветовой миксер). Однако есть небольшие различия. Важной функцией панели Color Mixer является возможность выбора типа заливки:
• Solid (Однородная) – заливка одним цветом поверхности объекта.
• Linear (Линейная) – заливка градиентом слева направо.
• Radial (Радиальная) – заливка градиентом от центра объекта.
• Bitmap (Растровая) – заливка растровым изображением.
Когда пользователь выбирает тот или иной вариант, панель Color
Mixer изменяется соответствующим образом.
Создание и редактирование градиента
Палитра Color Mixer позволяет создавать собственные или редактировать выбранные градиенты. Градиент может быть линейным (Linear)
35
или радиальным (Radial). Использование в работе градиентных заливок
позволяет имитировать свечение, создавать ощущение объёма.
Выберите в палитре Color Mixer тип заливки - Linear или Radial.
Чтобы создать или отредактировать градиент вам необходимо выделить, кликнув мышкой, тот или иной указатель цвета, изменить его цвет по
своему желанию и сдвинуть, для того чтобы обозначить место, где согласно вашему замыслу начнётся переход цвета. Можно добавить ещё один, а
может быть и несколько указателей - для этого достаточно щёлкнуть левой
кнопкой мыши по полоске градиента (когда указатель мыши оказывается
над полоской, рядом появляется знак «+»). Если вы хотите удалить указатель, захватите его левой кнопкой мыши и потяните вниз.
Рис. 17 Вид панели Color Mixer для градиентной заливки
Экспериментируйте с различными комбинациями цветов, меняйте уровень прозрачности для каждого цвета, пока не получите желаемого результата. Обратите внимание, что каждый цвет в составе
градиента может иметь свой собственный уровень прозрачности.
Инструмент Gradient Transform (преобразование заливки) предназначен для изменения параметров градиентных заливок. Для
того, чтобы применить его, нужно кликнуть мышью по градиентной
заливке внутри объекта. Вид выделения на экране зависит от типа
градиентной заливки (линейная или радиальная) (рис.18 и рис. 19).
36
Рис. 18 Трансформация радиального градиента
Рис. 19 Трансформация линейного градиента
37
Практическая работа «Создание и редактирование градиентов».
Задание 1. Создайте градиенты для заливки изображений (рис. 20)
а) Море
б) «Волнистая»
поверхность
Рис 20. Градиентные заливки
в) Свеча
Рекомендации к выполнению:
а) Море (переход от темно-синего к светло-голубому)
Нарисуйте на рабочем поле прямоугольник и залейте его градиентом, в котором темно-синий цвет плавно переходит в почти белый.
В вашем прямоугольнике цвета меняются слева направо. Чтобы изменить направление смены цветов градиента, используйте инструмент Gradient Transform.
б) «Волнистая» поверхность. Используем тот же самый градиент, но уменьшим ширину градиентной заливки при помощи инструмента Gradient Transform, а затем изменим значение параметра
Overflow.
Рис. 21. Вид панели Color Mixer
при создании градиента
для раскрашивания моря.
38
Рис.22. Вид панели Color Mixer
при создании градиента для раскрашивания «волнистой» поверхности
в) Свеча
Для закрашивания языков пламени создайте градиент, содержащий
красно-оранжево-желтые оттенки. При использовании инструмента Заливка проследите, чтобы модификатор Lock Fill не был включен.
Задание 2. Нарисуйте картинки (рис. 23).
Рекомендации к выполнению:
Рыбка. При раскрашивании плавников модификатор Lock Fill должен быть выключен.
а) Рыбка
б) Елка
в) Объемные фигуры
Рис. 23. Задания для самостоятельной работы
Елка. Создайте градиент с плавным переходом зеленых оттенков, как
на рис. Нарисуйте елку инструментом Brush (Кисть): сначала более толстой кистью основные ветки, потом более тонкой – остальные. Самой тоненькой кисточкой можно нарисовать даже отдельные иголочки.
Рис. 24. Вид панели Color Mixer при создании градиента для рисования елочки
39
Задание 3: создать изображения красивых елочных игрушек – шарики, сосульки, полумесяцы, звездочки и т.д. Раскрасить красиво градиентными заливками, в т.ч. созданными самостоятельно. (Это заготовки для
будущей работы с символами). Постарайтесь, чтобы игрушки выглядели
объемными. Примеры игрушек показаны на рис. 25.
а) шар
б) бант
в) звезда
Рис.25 Елочные игрушки
г) ягодка
Библиотеки
Библиотеки позволяют автору использовать в новом фильме
объекты, созданные ранее либо им самим, либо разработчиками
Flash, либо другими авторами. Библиотека может содержать следующие объекты: символы (о них мы поговорим позже), растровые изображения, кнопки, звуковые файлы. Для работы с библиотекой предназначена специальная панель (рис.26). Для отображения панели
библиотеки на экране выполните команду Window – Library.
Рис.26 Окно библиотеки фильма
40
Список объектов библиотеки может содержать как отдельные
объекты, так и папки. Чтобы увидеть в списке символы, хранящиеся в
папке, ее необходимо предварительно открыть, дважды щелкнув на
ее пиктограмме мышью. Для объекта каждого типа используется своя
пиктограмма.
Кнопки, расположенные в нижней части окна библиотеки, позволяют добавить в библиотеку символ (кнопка New Symbol), новую
папку (кнопка New Folder); открыть окно свойств выбранного объекта (Properties); удалить выбранный объект (Delete).
Раскрывающееся меню библиотеки содержит команды, позволяющие изменять параметры как отдельных символов, так и библиотеки в целом. Всего таких команд более двух десятков. Поскольку
доступность той или иной команды зависит от текущей ситуации работы с библиотекой, то часто удобнее использовать контекстные меню объектов библиотеки.
Объекты из библиотеки фильма могут быть использованы в любом другом фильме. Для этого достаточно открыть новый файл, не
закрывая тот, библиотекой которого вы хотите воспользоваться, и в
поле со списком на панели библиотеки выбрать название фильма –
источника. В списке объектов библиотеки выберите нужный вам объект и перетащите его на рабочее поле нового фильма – в его библиотеке появится этот объект. После помещения объекта в библиотеку
нового фильма его связь с фильмом – источником исчезнет, т.е. в новом фильме вы можете как угодно изменять его, а в фильме – источнике все останется по-прежнему.
Общие библиотеки (Common Libraries)- это встроенные библиотеки Flash. В группу общих библиотек входит библиотека Buttons
(Кнопки) - набор готовых символов-кнопок, а также элементов кнопок, которые вы можете поместить в свой фильм.
Чтобы открыть общую библиотеку, нужно в меню Window выбрать Common Libraries, а в нем - имя нужной библиотеки. При
вставке символа из общей библиотеки в фильм он (символ) автоматически помещается в библиотеку фильма.
Использование импортированной графики
Поговорим об использовании импортированной графики во
Flash. Для чего она нужна? А нужна она, потому, что в фильме чаще
используют уже готовые рисунки: фотографии, фоны, шаблоны, собственные заготовки, чем собственноручно созданные изображения.
Поместим изображение в наш фильм. Воспользуемся командой
41
File ->Import -> Import to Stage, в появившемся стандартном диалоге выберем требуемый файл. Импортируемое изображение будет
вставлено в сцену (и одновременно помещено в библиотеку фильма).
Используя «мышь» Вы можете поместить его в нужное место. Еще
один вариант импортирования изображения - через буфер обмена.
Предположим, вы создали (или открыли) нужное изображение в каком-либо графическом редакторе (Photoshop, Corel Draw и т.п.). Выделите нужную область, скопируйте в буфер обмена, вставьте во
Flash из буфера обмена командой Paste контекстного меню. Изображение будет помещено на рабочий стол (и, опять же, в библиотеку).
Использование растровой графики в качестве заливки
Если вы хотите использовать растровую графику (форматы:
bmp, jpg, gif…) в качестве заливки то в палитре Color Mixer следует
выбрать способ заливки - Bitmap. Перед вами появится диалоговое
окно Import to Library (импортировать в библиотеку). Выберите
нужный вам файл, и он тут же попадает в библиотеку вашего фильма.
Можно использовать другой способ: в меню File выберите раздел
Import to Library и разместите в библиотеке фильма необходимые
вам для работы растровые изображения. Все они будут отображаться
в палитре Color Mixer в виде пиктограмм при выборе способа заливки Bitmap.
Работа с импортированным изображением. Разбивка изображения
С ним можно произвести следующие действия:
1.
Разбивка изображения.
Можно «разбить» его на отдельные области с определенным
цветом командой Modify -> Break Apart. Затем выделить область с
нужным цветом «волшебной палочкой» – один из модификаторов инструмента Lasso - Magic Wand, имеющей следующие параметры:
Threshold (пороговое значение) – определяет, насколько близкие по цвету прилежащие друг к другу пиксели должны быть включены в выделенную область. Чем выше это значение, тем более «мягкое» получается выделение (охватывается большее количество соседних пикселей, разных по цвету). Если для этого параметра ввести
значение 0, в область выделения попадут только пиксели с абсолютно
идентичным цветом.
Smoothing (сглаживание) – определяет, насколько сильно
сглаживать края изображения.
42
Чтобы настроить параметры «волшебной палочки», выберите на
панели инструментов инструмент Lasso, затем в группе Options –
модификатор Magic Wand Settings.
Щелкните на изображении «волшебной палочкой», инструмент
выделит требуемую область.
Далее эту выделенную область можно «перекрасить» в другой
цвет, сдвинуть, удалить, изменить ее форму и размер.
Используя такое «разбитое изображение» или часть разбитого
изображения, вы сможете использовать его в качестве заливки любой
замкнутой фигуры. Для этого выберите инструмент Eyedropper (Пипетка) и щелкните им по изображению. При этом инструмент устанавливает текущей заливкой данное изображение и делает инструмент Paint bucket (Заливка) активным. Теперь вы можете работать с
помощью инструмента Bruch (Кисть) или Paint Bucket (Заливка).
Пример. Пусть для создания электронной поздравительной открытки
«С днем рождения!» требуется поместить фото именинника в красивую
рамочку. Подходящую рамочку вы уже нашли в коллекции картинок для
Microsoft Office, и вставили ее в документ Word. Нам нужно импортировать в программу Flash оба изображения, наложить рамку на фото, подогнав размеры, и обрезать углы фотографии, выглядывающие из под контура рамки. Порядок действий будет таким:
Рис.27 Рамочка и фото.
1. Выделите в документе Word изображение рамочки и скопируйте
его в буфер обмена.
2. Откройте фильм Flash и вставьте изображение рамки на рабочее
поле. Чтобы быть уверенным в наличии или отсутствии у рамки белого
фона, сделайте фон рабочего поля темным. Для этого откройте панель инспектора свойств фильма и измените цвет параметра Background.
3. Выделите рисунок выберите команду Modify  Break Apart.
43
4. Теперь можно удалить фон. Снимите выделение с рисунка, щелкнув мышью по свободной области рабочего поля. Выберите в панели инструментов Lasso, затем в группе Options - Magic Wand. Щелкните мышкой по фону изображения и нажмите клавишу Delete. Теперь будьте внимательны – картинка перестала быть одним целым, и при перемещении
возможна потеря отдельных листочков или цветочков. Лучше всего ее
сгруппировать.
5. При необходимости с помощью инструмента Free Transform
можно изменить форму рамочки, например, сделать ее овальной. Можно с
помощью инструмента Ink Bottle добавить к рамочке контур.
6. Теперь импортируйте на рабочий стол фотографию.
7.Совместите рамочку и фотографию, изменяя форму и размеры
изображений, добейтесь желаемого результата.
8. Теперь осталось удалить торчащие углы. Вспомним, что при наложении друг на друга объектов типа Shape без контура, верхних объект
уничтожает нижний. «Разбейте» фотографию (команда Modify  Break
Apart), рамочку – разгруппируйте. Снимите выделение, щелкнув по свободной части экрана, а затем выделите рамочку и сдвиньте ее в сторону.
9. Инструментом Eraser осторожно удалите те части фотографии, которые оказались за границей рамочки.
10. Рамочку сгруппируйте (чтобы она больше не обрезала части фотографии) и опять совместите с фотографией.
Рис.28 Результат выполнения п.8.
44
11. Сгруппируйте фото и рамочку.
Рис.29 Итоговое изображение
2. Трассировка изображения
Если вы хотите использовать импортированный рисунок для
дальнейшей работы, использовать его для анимации, лучше произвести трассировку (векторизацию) растровых изображений. Эта процедура преобразует растровое изображение в векторное. Обычно программа Flash определяет импортированное изображение как объект
типа Bitmap, но может так случиться, что ваше изображение окажется объектом типа Group (если вы вставили его в фильм через буфер
обмена), тогда прежде чем выполнять трассировку, нужно будет его
разгруппировать командой Modify  Ungroup. Порядок действий
будет следующим:
1. Выделите растровое изображение, помещенное в текущей
сцене.
2. Выберите Modify  Bitmap  Trace Bitmap (Изменить 
Изображение  Трассировать изображение).
3. Введите пороговое значение для цвета (Color Threshold).
При трассировке, если разница RGB - значений между двумя соседними пикселами будет меньше, чем пороговое значение, тогда эти
два соседних пиксела будут интерпретированы как с одинаковым
цветом. Чем выше пороговое значение, тем меньше цветов будет
присутствовать в векторном изображении.
45
4. Введите значение для минимально допустимой области
(Minimum Area), чтобы установить количество пограничных пикселей при назначении цвета конкретной области трассируемого изображения. Чем меньше это значение тем точнее происходит передача
мелких деталей изображения.
5. Введите значение параметра Curve Fit (Точность подгонки
линий) для определения насколько точными и гладкими будут контуры векторизированного изображения.
6. Введите значение параметра Corner Threshold (Угловой порог) для определения количества острых углов.
а)
б)
Рис.30 Исходное изображение (а) и результат трассировки (б)
Трассировку изображения удобно применять, когда вы хотите
использовать готовый рисунок как основу для своей анимации.
Рис.31 Исходный рисунок (фотография детской игрушки) и то,
что получилось в результате преобразований
При импорте растровых изображений во Flash эти изображения
автоматически помещаются в библиотеку фильма.
46
Слои
Слои можно представить как прозрачные пленки, сложенные в
стопку друг на друга. Если на слое ничего нет, то сквозь него видны
слои, расположенные под ним. Когда создается новый Flash-фильм, в
нем содержится только один слой. К этому слою можно добавить еще
несколько слоев и с их помощью организовать расположение изображений и их анимацию в фильме. Количество слоев в фильме ограничивается только объемом памяти вашего компьютера. Увеличение
количества слоев не приводит к увеличению размера файла, в котором будет записан фильм.
Вы можете рисовать и редактировать объекты на одном слое и
при этом не затрагивать объекты на других слоях. Кроме того, имеется возможность создавать специальные слои, которые упрощают
процесс рисования и редактирования – направляющие слои, слоимаски.
Для звуков и действий (команд языка ActionScript) используются
свои отдельные слои. Это позволяет быстро находить все действия и
звуки, когда вам понадобится их редактировать.
Рисование и создание фигур происходит на активном слое. Чтобы сделать тот или иной слой активным, необходимо его выделить.
Пиктограмма «карандаш», появляющаяся рядом с названием слоя,
обозначает, что данный слой является активным. Активным в любой
момент может быть только один слой.
Редактировать объекты можно на любом видимом (visible) и не
заблокированном (locked) слое. Чтобы защитить слой от изменений,
его можно заблокировать, а чтобы не мешали работать объекты,
находящиеся на других слоях, тот или иной слой можно сделать невидимым. На любом уровне можно представить объекты в виде контуров (outlines), при этом можно задавать цвет контура любого слоя.
Чтобы создать слой, подведите курсор к пиктограмме со знаком
«+» и пустым листом на временной шкале и нажмите на нее.
47
Рис.32 Список слоев в панели Timeline
Чтобы удалить слой, выделите его, подведите курсор к пиктограмме с изображением урны на временной шкале и нажмите на нее.
Чтобы сделать невидимым слой, щелкните мышью в столбце
Eye (Глаз) справа от названия того слоя, который нужно спрятать;
чтобы показать данный слой, щелкните мышью в этом месте снова.
Чтобы сделать невидимыми все слои, щелкните мышью на
пиктограмме Eye (Глаз); чтобы показать все слои, щелкните мышью
на этой пиктограмме еще раз.
Чтобы представить содержимое слоя в виде контуров, щелкните
мышью в столбце Outline (Контур), возле названия слоя; чтобы отключить это представление, щелкните мышью в этом месте еще раз.
Чтобы представить все объекты на всех слоях в виде контуров, щелкните мышью на пиктограмме Outline (Контур); чтобы отключить это представление на всех слоях, щелкните мышью на этой
пиктограмме еще раз.
Присвоение слою нового имени
По умолчанию новые слои при создании получают имя Layer с
номером по порядку их создания. Старайтесь переименовывать слои,
чтобы их названия отражали их содержимое. Для переименования
слоя дважды щелкните по названию слоя, а затем наберите новое имя.
48
Работа с текстом
Для работы с текстом в программе Flash предусмотрен специальный инструмент – Текст (Text).
Чтобы поместить текст в рабочей области:
1. Выберете инструмент Текст (Text) в панели инструментов;
2. Кликните в том месте рабочего поля, где собираетесь вводить
текст. Появится поле ввода;
3. Измените его форму, используя маркеры;
4. Введите текст. Строка будет автоматически увеличиваться по
мере ввода символов. Для перехода на другую строку, достаточно
нажать клавишу Enter. Вы сами контролируете перенос символов.
Если же Вы сначала покажете какой длины будет Ваш блок, а затем
начнете вводить символы, то они будут переноситься автоматически
по мере заполнения блока.
Обратите внимание, что поле ввода можно переносить, как и
другие объекты. Параметры текста регулируются в панели Инспектора свойств и меню Текст (Text).
Рис.33 Вид инспектора свойств для инструмента Текст
Применение графических преобразований к тексту
Текстовые блоки можно преобразовывать точно так же, как и
другие объекты. Их можно масштабировать, поворачивать, искажать
и зеркально отображать при помощи инструмента при помощи инструмента Free Transform. При масштабировании текстового блока
как объекта увеличение или уменьшение размера шрифта не отображается в инспектора свойств.
49
Преобразованный текст можно редактировать, но в результате
некоторых преобразований он может стать плохо читаемым.
Разбивка текста
При разбивке текста каждый его символ помещается в отдельный текстовый блок. Разбив текст таким образом, можно преобразовывать и использовать в анимации каждую букву отдельно.
Текст можно преобразовать в составляющие его линии и области
заливки, чтобы затем манипулировать ими, как любыми графическими объектами (изменять форму, удалять и т.д.). Как и любые другие
фигуры, преобразованные литеры текста можно группировать или
преобразовывать в символы и анимировать. После преобразования
текста в линии и заливки его уже нельзя редактировать как текст.
Чтобы разбить текст:
1.
Выберите инструмент Selection (Стрелка) и щёлкните на
текстовом блоке.
2.
Выберите Modify (Изменить)  Break Apart (Разбить).
Все символы выбранного текста будут помещены в отдельные текстовые блоки. Текст будет располагаться на сцене там же, где и
раньше.
3.
Снова выберите Modify  Break Apart чтобы преобразовать символы в линии и заливки.
Текст также можно связать с адресом URL, чтобы пользователь
мог перейти на другой файл, просто щёлкнув по тексту.
Чтобы связать горизонтальный текст URL, выделите текст и в
поле URL Link (Ссылка) инспектора свойств введите URL, который
будет связан с текстовым блоком.
Практическая работа «Применение графических преобразований к тексту».
Задание: создайте изображения (рис. 34)
Рекомендации к выполнению:
а) Надпись с эффектом тени.
Создайте надпись с помощью инструмента Text (Текст). Преобразуйте ее в графическое изображение. Для этого выделите текст, и в
меню Modify выберите команду Break Apart, сделайте это 2 раза
подряд. У вас получится надпись, состоящая из букв-заливок, и все
они будут выделены.
50
а) Надпись с эффектом тени
б) Надпись с «пушистым» контуром
в) Заливка текста градиентом
г) Искажение текста
Рис. 34. Применение графических преобразований к тексту
С помощью инструмента Ink Bottle (Чернильница) создайте
вокруг каждой буквы контур. При этом не снимайте выделение с
букв! Инструментом Selection (Стрелка) возьмите выделенные буквы-заливки и переместите их чуть вправо и вверх. Для достижения
желаемого эффекта фон букв должен быть темнее цвета контура.
б) Надпись с «пушистым» контуром.
Создайте надпись и преобразуйте ее в графическое изображение,
дважды выбрав в меню Modify команду Break Apart. Снимите выделение с букв, щелкнув мышью по любому другому месту экрана. С
помощью инструмента Ink Bottle (Чернильница) создайте контур.
При этом в инспекторе свойств задайте следующие значения свойств
контура:
51
Рис. 35. Значения свойств контура
в) Заливка текста градиентом
Создайте надпись и преобразуйте ее в графическое изображение, дважды выбрав в меню Modify команду Break Apart. Выберите
инструмент Paint Bucket (Заливка) и залейте выделенные буквы
градиентным заполнением. Возможны 2 варианта заливки – при выключенном (а) или включенном (б) модификаторе Lock Fill. Затем с
помощью инструмента Ink Bottle (Чернильница) создайте контур
вокруг букв.
г) Искажение текста
Создайте какую-нибудь надпись и преобразуйте ее в графическое изображение, дважды выбрав в меню Modify команду Break
Apart. Выберите команду Modify – Transform – Envelope. Ваша
надпись будет окружена черной рамочкой со множеством маркеров,
позволяющих плавно изменить очертания фигуры. Попробуйте придать надписи такой же вид, как на рисунке (каждое слово обрабатывается отдельно).
IV. Анимация в среде Macromedia Flash
Типы кадров
Любой анимационный фильм состоит из кадров, последовательно отображаемых на экране. Кадры могут быть ключевыми или
обычными.

Ключевой кадр-кадр, в котором были (или будут) сделаны
какие-либо изменения. Ключевой кадр может быть полным (если он
имеет содержимое) или пустым, если такого содержимого нет. Клю52
чевой кадр отмечается на временной шкале черным кружком (полный
кадр) или незакрашенным кружком (пустой кадр).

Обычные кадры – те, что находятся между двумя ключевыми. Содержимое слоя для обычного кадра либо совпадает с содержимым ближайшего слева ключевого кадра, либо формируется программой автоматически (при использовании автоматической анимации). Обычные кадры также могут быть пустыми и полными.
Команды для работы с кадрами. Все команды выбираются из
контекстного меню кадра на временной шкале.
Действие
Вставка обычного
кадра
Вставка ключевого
кадра
Вставка пустого
ключевого кадра
Очистка ключевого
кадра
Удаление кадров
Выделение всех
кадров
Вырезание кадров
Копирование кадров
Вставка кадров из
буфера обмена
Команда
Insert Frame (Вставить кадр)
Insert Keyframe (Вставить ключевой
кадр)
Insert Blank Keyframe (Вставить пустой ключевой кадр)
Clear Keyframe (Очистить ключевой
кадр)
Remove Frame (Удалить кадры)
Select All Frames (Выделить все
кадры)
Cut Frames (Вырезать кадры)
Copy Frames (Копировать кадры)
Paste Frames (Вставить кадры)
Горячие
клавиши
F5
F6
F7
Alt+Backsp
ace
Shift+F5
Ctrl+Alt+A
Ctrl+Alt+X
Ctrl+Alt+C
Ctrl+Alt+V
Типы анимации
В программе Flash доступны два вида анимации:

Автоматическая анимация - автоматическое создание
промежуточных кадров между двумя ключевыми;

Ручная анимация - прорисовка каждого кадра фильма без
использования автоматической анимации)
Автоматическая анимация бывает трех видов:

motion tweening – анимация движения;

shape tweening – анимация изменения формы или морфинг;

встроенные эффекты временной шкалы – готовые анимационные эффекты, предлагаемые разработчиками программы Flash.
53
Ручная (покадровая) анимация
Суть ручной анимации заключается в том, что автор сам создает
каждый кадр будущего фильма и устанавливает последовательность
их просмотра. При этом каждый кадр фильма может являться ключевым, или могут присутствовать обычные кадры, полностью повторяющие ближайший ключевой кадр слева. Создание фильма методом
ручной анимации - достаточно трудоемкий и долгий процесс, поэтому ее целесообразно применять в тех случаях, если невозможно применить объекты видоизменяются или взаимодействуют друг с другом
каким-либо сложным образом, или невозможно применить автоматическую анимацию.
Рассмотрим процесс создания ручной анимации на примере.
Улыбающийся Смайлик (рис.36).
а)
б)
в)
г)
Рис.36 Содержимое ключевых кадров
д)
1. Создайте новый фильм с именем Smail.fla
2. В первом кадре нарисуйте рожицу (а) при помощи инструментов
Oval (овал) и Line (Линия). Обязательно используйте режим рисования
Objekt Drawing!
3. Выделите на временной шкале следующий кадр. Сделайте его ключевым (нажмите клавишу F6).
4. Вы увидите в только что созданном втором ключевом кадре точно
такую же рожицу, какую вы нарисовали в первом. Будьте внимательны –
сейчас он выделена, т.е. все составные элементы лица обведены голубыми
рамочками. Снимите выделение, щелкнув по свободному месту экрана. С
помощью инструмента Стрелка внесите небольшие изменения – как на
рис. б).
5. Повторите действия 3 и 4 для третьего, четвертого и пятого ключевых кадров. Рис. в, г, д.
6. Для того чтобы в конце фильма наша рожица на некоторое время застывала с улыбкой, добавьте еще один, шестой, ключевой кадр через несколько кадров, но никаких изменений в рисунок уже не вносите.
54
7. Посмотрим, что же у нас получилось. Мы можем посмотреть результат не выходя из рабочей среды Flash. Для этого в меню Control (Управление) выберите Play. Можно также посмотреть, как будет выглядеть ваш
ролик при проигрывании с помощью Flash – плеера, в формате SWF. Для
этого в меню Control (Управление) выберите Test Movie. При этом в той
же папке, где был сохранен файл Smail.fla появится файл Smail.swf.
Практическая работа «Создание фильма с покадровой анимацией»
Задание: создайте следующие фильмы с применением метода
покадровой анимации:
а) Вечернее небо
На вечернем небе одна за другой зажигаются звезды.
б) Новогодняя елка
Украшаем новогоднюю елку – игрушки, огоньки появляются
один за другим. Изображение елки и елочных игрушек мы уже создали, выполняя Практическую работу «Создание и редактирование градиентов». Чтобы использовать их в новом фильме, откройте файл с
этими изображениями. Выделите на рабочем поле изображение елки
(или игрушки), выберите в контекстном меню команду Copy (Копировать), затем перейдите в новый фильм, щелкните на рабочем поле
правой кнопкой мыши и выберите в контекстном меню команду
Paste (Вставить).
Рис. 37. Вечернее небо
Рис. 38. Новогодняя елка
55
в) Схема бисероплетения
В каждом ключевом кадре добавить либо бусину, либо кусочек
нити. На рисунке представлены 7, 12, 16 и 20 ключевые кадры. Для
того, чтобы схема демонстрировалась не очень быстро, настройте частоту показа кадров = 1 кадр в секунду. Для этого щелкните мышью
по серой области экрана (за пределами сцены) и в инспекторе свойств
измените значение Frame Rate (частота кадров).
а) 7 ключевой кадр
б) 12 ключевой
в) 16 ключевой
кадр
кадр
Рис. 39. Схема бисероплетения
г) 20 ключевой
кадр
Символы
Выполняя предыдущую практическую работу, вы заметили, что
иногда в фильме один и тот же объект (звезда, елочная игрушка, бусина) используется несколько раз. При этом программа Flash вынуждена сохранять описание каждого такого объекта множество раз, что
сильно увеличивает размер файла. Чтобы избежать этого, в программе предусмотрена возможность преобразования векторных рисунков
и даже анимации в символы.
Символом в Flash называется объект, образованный из некоторых произвольных объектов фильма или импортированной информации (растрового изображения, звука) и обладающий двумя отличительными свойствами:
- символ хранится в рабочей библиотеке документа или в библиотеке программы, а не в кадре фильма;
- в фильме можно разместить множество копий выбранного
символа, доступных для независимого редактирования, которые
называются экземплярами символа.
Символы бывают трех типов: графический (graphic) – изображение, кнопка (button) – интерактивный элемент, который реагирует
на нажатие мыши, символ-клип (movie clip) – фрагмент анимации,
56
имеющий собственную временную шкалу. Символ-клип может иметь
звуковое сопровождение и содержать сценарий на ActionScript. Анимация в клипе выполняется в цикле и не связана с основным фильмом. Клип может состоять из других вложенных клипов, содержать
кнопки. (Пример символа-клипа: пусть действие вашего фильма происходит в помещении, где висят часы. Стрелки на часах вращаются с
одинаковой скоростью, независимо от того, что происходит в фильме. Вот это самое вращение стрелок вокруг циферблата можно оформить как символ-клип.).
Экземпляр символа можно перемещать в фильме и изменять его
некоторые свойства; это не приводит к изменению исходного символа. Но если вы измените исходный символ (т.е. тот, что хранится в
библиотеке), то все его экземпляры в вашем фильме тоже изменятся!
Создание символа
1. Для того, чтобы создать символ (любого типа) «с нуля»,
нужно выполнить команду: Insert  New Symbol (Вставить  Новый символ), после чего откроется диалоговое окно в котором нужно указать тип символа и его имя. Затем вам будет предложено поработать в режиме редактирования символа – создать новый символ в
отдельном окне.
Кроме того, вы можете преобразовать существующий объект в
символ. Рисунок (созданный вами или импортированное растровое
изображение) преобразуется в графический символ, анимация – в
символ-клип.
2.
Чтобы преобразовать изображение в графический символ выделите объект или объекты, которые вы хотите преобразовать
в символ и выполните команду: Modify  Convert to Symbol (Изменить  Преобразовать в символ), или нажмите клавишу F8. Появится точно такое же окно, как и в предыдущем случае, где необходимо указать тип и имя символа. Выберите тип символа Graphik. Он
немедленно появится в библиотеке фильма, рядом с его названием вы
увидите такую пиктограмму:
3.
Чтобы преобразовать анимацию в символ - клип выделите на временно шкале все кадры анимации (если фильм имеет несколько слоев, то на всех слоях) и выберите в контекстном меню команду Copy Frames (Копировать кадры). Затем выполните команду
-Modify  Convert to Symbol (Изменить  Преобразовать в символ) или нажмите клавишу F8. Выберите тип символа Movie clip. В
57
библиотеке фильма появится ваш символ, рядом с его названием вы
увидите пиктограмму,
но он будет содержать только первый
кадр анимации. Найдите в списке объектов библиотеки только что
появившийся символ и дважды щелкните мышью по его пиктограмме. Вы попадете в окно редактирования символа. Выделите на временной шкале первый кадр и в контекстном меню выберите команду
Paste Frames. Теперь символ содержит всю необходимую анимацию.
Вернуться к рабочему полю можно, щелкнув по имени сцены в
левом углу панели Edit Bar.
Добавить символ в документ можно просто перетащив значок
этого символа из окна библиотеки. Символами можно обмениваться
между различными документами Flash. Для этого откройте документ,
в котором находится нужный символ. Перетащите символ из библиотеки второго документа в рабочее поле первого документа. В библиотеку первого документа будет добавлен новый символ, а в рабочем
поле появится экземпляр символа.
Упражнения
1) преобразуйте улыбающийся смайлик из предыдущего примера в символ – клип.
2) вернемся к практической работе «Создание фильма с покадровой анимацией». Сделайте задания под буквами а) и б) в новых
фильмах, но теперь предварительно преобразуйте изображение звездочки и изображение каждой елочной игрушки в символ.
Практическая работа «Создание символа-клипа
и использование его множественных экземпляров»
Задание 1: Создайте фильмы, используя множество копий
(экземпляров) каждого символа – клипа.
а) Фрагменты новогодней открытки
Для электронной новогодней открытки мы создадим два вида
лампочек: круглых, мигающих красным и синим цветом, и звездочек,
мигающих желтым и белым цветом. Создайте, используя полученные
символы – клипы:
а) изображение новогодней елки;
б) рамку для открытки;
58
а) новогодняя елка
б) рамка для открытки
Рис. 40 Фрагменты новогодней открытки
б) Лес
Рис. 41. Лес
Нарисуйте два дерева, например, елку и березу. Создайте на основе
этих рисунков два символа-клипа (пусть деревья немного качаются от ветра). А теперь нарисуем лес, в котором деревья разные – поместите на рабочее поле несколько экземпляров каждого символа, для каждого экземпляра
символа настройте размер, яркость, оттенок и т.д.
Изменить размер экземпляра символа можно с помощью инструмента Free Transform (также, как мы делали это с обычными
изображениями).
59
Чтобы изменить яркость (оттенок, прозрачность) экземпляра
символа или все эти параметры сразу, нужно:
- поместить на рабочее поле экземпляр символа;
- выделить его, если он не выделен;
- в инспекторе свойств в раскрывающемся списке Color выбрать
параметр: Brightness (яркость), Tint (оттенок), Alpha (непрозрачность), Advanced (расширенная настройка, все параметры сразу). В
зависимости от выбранного параметра вы получите возможность изменить качества экземпляра символа: для яркости и прозрачности Brightness Amount и Alpha Amount (количество (интенсивность) яркости и непрозрачности соответственно, выраженное в %). Для
настройки оттенка (Tint) вы должны выбрать цвет и его интенсивность в % (рис.42).
Рис.42 Настройка оттенка символа
Вложенная анимация
Иногда необходимо совместить сразу несколько эффектов:
например, чтобы у автомобиля, который перемещается по экрану по
сложной траектории, одновременно крутились бы колеса и мигали
фары. Чтобы легко реализовать этот эффект, во Flash предусмотрена
вложенная (многоуровневая) анимация. Объяснить ее легко: по заданной траектории движется не объект, а некая «анимация», в которой тоже что-то происходит.
Универсальный способ создания вложенной анимации таков: сначала
постройте по привычной схеме ту анимацию, которая затем будет участвовать в более сложном движении – внутреннюю анимацию. (Например,
автомобиль, у которого крутятся колеса). Затем преобразуйте эту анимацию в символ-клип. Теперь он появился в библиотеке, и вы сможете перенести его на рабочее поле и использовать как обычный объект - например,
создать анимацию. (В нашем случае – заставить автомобиль перемещаться
по экрану по какой – либо траектории.)
Обратите внимание: когда происходит настройка внутренней
анимации, вы «находитесь» не внутри фильма, а внутри символа,
который сам содержит внутреннюю шкалу времени. Это видно из
надписи под шкалой времени: обычно там указано лишь название
60
сцены (Scene), а теперь после названия сцены указывается и название
символа.
Дважды щелкнув по созданному символу, вы переместитесь
«внутрь» него и получите возможность изменить его вложенную
анимацию.
Практическая работа «Создание символа - клипа
с вложенной анимацией»
Задание: создайте следующие символы - клипы с использованием вложенной анимации (рис. 43):
а) Восход солнца (Солнце б) Паровозик (Двигается по
поднимается из-за горизонта, а дороге, колеса крутятся, из трубы
лучики вращаются)
идет дымок)
в) Инопланетянин (перемещается г) Пчела (перемещается по экрану,
по экрану, антеннки покачиваются, качает головой, машет крыльями)
колеса мигают или вращаются)
Рис. 43. Символы клипы с вложенной анимацией
Автоматическая анимация
Выполняя предыдущую практическую работу, вы обратили внимание на то, каким трудоемким является процесс создания анимации движения вручную, а главное, в результате вместо запланированного плавного
перемещения может получиться отрывистое, неравномерное движение.
Поэтому рациональнее применять средства автоматической анимации, к
числу которых относится анимация движения.
61
Анимация движения. Этот тип автоматической анимации можно применять к любым невекторным объектам документа (т.е. к символам, тексту, импортированным изображениям, сгруппированным
объектам). Каждый объект, для которого вы хотите создать анимацию
движения, обязательно должен находиться в отдельном слое.
При создании автоматической анимации движения можно изменить следующие параметры объекта:

расположение на рабочем поле;

параметры трансформации, включая масштаб, угол поворота и углы наклона объекта;

для символов - яркость, оттенок и уровень непрозрачности
объекта.
Последовательность кадров анимации движения, окрашивается в
светло-сиреневый цвет и перечеркивается сплошной черной стрелкой,
направленной слева направо. Если при создании анимации движения допущены ошибки, вместо стрелки вы увидите пунктирную линию.
Ошибки анимации движения возникают в следующих случаях:
- не создан завершающий ключевой кадр;
- ключевые кадры (начальный и завершающий) есть, но они или
пусты, или в них находятся только векторные изображения, или в них
находится более одного символа, сгруппированного объекта, растрового изображения или текстового объекта.
Порядок создания автоматической анимации движения
1.
Создайте ключевой кадр и разместите в нем один и только
один групповой, символьный, растровый или текстовый объект, который необходимо плавно преобразовать (проследите, чтобы в этом
слое не было векторных изображений).
2.
Создайте завершающий ключевой кадр, выделив на временной шкале нужный кадр и нажав кнопку F6. Между первым и завершающим ключевыми кадрами образовалась последовательность
кадров необходимой длины (чем меньше кадров в последовательности, тем быстрее будет происходить трансформация).
3.
Измените положение цвет или форму (или все вместе) в
этом ключевом кадре.
4.
Откройте инспектор свойств и в поле Tween выберите тип
автоматической анимации Motion. В поле Ease можно установить
уровень изменения скорости процесса раскадровки. В поле Rotate
(Поворот) можно выбрать ориентацию возможного поворота объекта
и количество поворотов объекта.
62
Для символов при анимации движения возможно плавное изменение
яркости, прозрачности и оттенка объекта. Для этого выделите символ,
находящийся в первом или завершающем ключевом кадре и в инспекторе
свойств в поле Color (Цвет) установите тип изменения (Alpha – прозрачность; Brightness – яркость; Tint – Оттенок) и количественные характеристики изменения.
Практическая работа «Создание фильма
с автоматической анимацией движения»
Задание: создайте фильмы с использованием автоматической анимации движения:
а) Звездное небо
На темном ночном небе множество звезд. Пусть некоторые звездочки постепенно становятся то ярче, то бледнее, некоторые – меняют цвет,
некоторые – прозрачность. Чтобы не создавать для каждой звездочки отдельный слой, сделайте несколько символов-клипов (звезда меняет яркость – один символ, меняет цвет – другой, прозрачность - третий), и разместите экземпляры этих символов на одном слое.
б) Звездопад
Небо остается как в предыдущем упражнении. Но время от времени
то одна, то другая звездочка падает вниз. Для каждой падающей звезды создайте новый слой или отдельный символ - клип.
в) Уплывающий вдаль корабль
Нарисуйте море и кораблик. Кораблик уплывает, становясь все
меньше и прозрачней, и, в конце концов, растворяется за горизонтом.
г) Падающий снег
Для создания эффекта снегопада создадим прямоугольник с
большей высотой, чем у сцены, внутри него нарисуем снежинки (Как
нарисовать снежинку – см. Практическую работу «Создание рисунков с использованием различных преобразований графических объектов») и будем медленно двигать его сверху вниз. При проигрывании
ролика в зацикленном режиме полотно со снежинками будет перемещаться от первого кадра (положение а рис.44) до последнего
(положение б рис.44) вновь и вновь, благодаря чему будет создан
эффект непрерывного снегопада.
Если выбрать произвольное расположение снежинок на прямоугольном полотне, то при переходе от последнего кадра к первому
вместо непрерывного движения снежинок будет видна смена одного
узора снежинок на другой (скачок).
63
а)
б)
Рис. 44. Положение полотна со снежинками относительно сцены в первом
и последнем кадрах анимации
Чтобы добиться непрерывности движения снежинок, будем располагать снежинки в прямоугольнике особым образом. Разделим прямоугольник на три части и добьемся того, чтобы узор в верхней части полотна,
равной по размеру сцене (400*500 пикселов), в точности совпадал с узором
в его нижней части такого же размера. Тогда в первом и последнем кадрах
изображение будет полностью совпадать. Если запустить такой ролик, то в
момент перехода от последнего кадра к первому все снежинки замрут на
время длительности одного кадра (1/12 секунды), а потом опять полетят
вниз. Если сделать полотно со снежинками не только больше по высоте,
чем сцена, но и шире ее, получится движение снежинок наискосок, сверху
вниз и слева направо.
д) Панорама
При обычной съемке видеокамерой панорамой называется перемещение камеры вдоль экрана по горизонтали, вертикали или под любым углом. В анимации панорамой называется то, что в обычном фильме назвали
бы той же панорамой или движением камеры. На рис. 45 изображен пример горизонтальной панорамы, охватывающей 2 поля (экрана).
Рис. 45. Панорама
64
Создание панорамы:
1. Нарисуйте или импортируйте рисунок панорамы, охватывающий 2
или более экрана.
2. Преобразуйте это изображение в графический символ.
3. В первом ключевом кадре выровняйте символ по левому и верхнему краям сцены.
4. Создайте на временной шкале второй ключевой кадр. Пусть протяженность панорамы составляет 50 кадров, тогда ключевые кадры будут
располагаться в 1 и 50 кадрах (или в 50 и в 100).
5. Во втором ключевом кадре выровняйте изображение по правому и
верхнему краям сцены. Замечание: изображение можно переместить, используя клавиши со стрелками на клавиатуре. Рисунок будет двигаться
строго вдоль той оси, на которую указывает стрелки.
6. Создайте анимацию движения.
е) Слайд-шоу с эффектом изменения прозрачности
Эффект достигается путем постепенного увеличения прозрачности
одного изображения с параллельным уменьшением прозрачности другого.
Каждое изображение появляется полностью непрозрачным, затем прозрачность за пять кадров возрастает до 100%, далее в течение десяти кадров демонстрируется изображение, а затем на протяжении пяти кадров
прозрачность вновь падает до нуля. В то время как одно изображение растворяется за пять кадров, следующее проступает за то же количество кадров. (Каждое изображение располагается на отдельном слое).
Рис. 46. Вид временной шкалы
ж) Кот и мышь
Сочетание ручной и автоматической анимации. Нарисуйте кота, мимо которого пробегает мышь. Кот облизывается, глаза у него увеличиваются и вспыхивают желтым, из кончиков лап вырастают когти. (Мышь и
глаза – анимация движения, язык и когти – ручная анимация).
65
а) начало фильма
б) конец фильма
Рис. 47. Кот и мышь
Практическая работа «Анимация текста»
Задание:
1.
Создайте заставку к фильму о том, как приготовить борщ.
Заставка – это самое начало фильма, когда на экране мы видим
название и (возможно) данные создателей фильма. Заставку целесообразно
помещать в отдельной сцене, чтобы иметь возможность редактировать ее
без опасения испортить что-то в уже созданных кадрах основного фильма.
Предварительно продумаем порядок действий: пусть сначала на
экране с эффектов увеличения появляется надпись Мастер-класс. После того как эта надпись займет свое положение на экране, с эффектом вращения
появляется слово Борщ и останавливается чуть ниже первой надписи. Потом с применением метода покадровой анимации появляются слова своими
руками. Так как мы будем анимировать 3 текстовых блока, нам понадобится
3 слоя. Нужно обратить внимание анимацию движения для слова Борщ
нужно будет начать не с первого кадра, а когда закончится анимация движения для слова Мастер-класс (это может быть, например, 30й кадр), а
начинать анимацию слов своими руками – после того, как Борщ встанет на
место. Поэтому нужно хотя бы приблизительно определить, на протяжении
какого времени будет показываться заставка к фильму. Допустим, в течение
2 секунд – появляется Мастер-класс, еще 3 – Борщ, еще 2 – своими руками,
и затем 3 секунды – изображение замирает, чтобы зрители могли прочитать
все надписи. Учитывая параметр Frame Rate можно рассчитать, сколько
кадров будет задействовано в анимации (при стандартном значении 12 кадров в секунду мы получим – 120 кадров).
Значит, анимация в каждом слое будет заканчиваться в 120 кадре.
1. Создайте новую сцену фильма: Insert - Scene.
2. Откройте панель Scene: Window - Other Panels - Scene.
3. Назовите сцену Scene 2 – фильм, Scene 1 – заставка (дважды щелкните на имени сцены и введите имя).
4. Перейдите в сцену Заставка (выберите ее в панели Scene).
66
5. Возьмите инструмент Text и напишите слово Мастер-класс.
Настройку текста можно производить с помощью инспектора свойств.
6. Вставьте 25-ый ключевой кадр. И переместите слово Мастер-класс
туда, где оно должно находиться в конце просмотра.
7. Перейдите на первый кадр и сильно увеличьте слово Мастеркласс. Создайте анимацию движения.
8. Продлите анимацию до 120 кадра (с 1 по 25-ый кадр – анимация
движения, с 26-го по 120 – последовательность обычных кадров).
9. Создайте новый слой. Вставьте 25-ый ключевой кадр. Напишите на
нем Борщ.
10. Вставьте 60-ый ключевой кадр и переместите слово Борщ туда, где
оно должно находиться в конце просмотра.
11. Перейдите на 25 кадр и переместите надпись за пределы рабочего
поля (вниз). Создайте анимацию движения. В поле Rotate выберите CW, в
поле Times – укажите 3.
12. Продлите анимацию на этом слое до 120 кадра.
13. Теперь напишем своими руками методом покадровой анимации
Создайте новый слой. Вставьте 60-ый ключевой кадр. Возьмите инструмент
Text и напишите букву «С». Вставьте следующий ключевой кадр и напишите в том же текстовом контейнере букву «В» другим цветом и т.д. (или
придумайте другую анимацию).
14. Продлите анимацию до 120 кадра.
15. Вставьте еще один слой, он будет фоновым. Переместите его вниз.
Импортируйте туда понравившийся растровый рисунок и подгоните его
под размеры рабочего поля.
16. Преобразуйте этот рисунок в символ, и продлите анимацию до 120
кадра.
17. Проверьте еще раз, чтобы последовательность кадров с анимацией
во всех слоях заканчивалась одновременно. Иначе объекты, содержащиеся
на слое с более короткой последовательностью кадров с анимацией, будут
исчезать, раньше времени. Чтобы «удлинить» анимацию на каком-либо
слое, выделите на панели Timeline для нужного слоя тот кадр, который
должен быть последним и нажмите клавишу F5 (последовательность кадров
будет продлена до выделенного кадра).
2.
Создайте бегущую строку «Узнайте прогноз погоды
по телефону 111-22-33!», которая будет сопровождать воспроизведение
какого-либо готового фильма.
Бегущей строкой называется строка текста, перемещающаяся по
экрану справа налево.
67
Используйте автоматическую анимацию движения; текстовый блок
будет перемещаться по горизонтали, от крайнего правого к крайнему левому положению (вспомните создание эффекта панорамы).
Подберите такую скорость движения, чтобы было удобно читать
текст. Если ваш фильм достаточно продолжительный, чтобы бегущая строка могла «пробежать» по экрану несколько раз, преобразуйте анимацию в
символ-клип.
3.
Создайте титры для какого-либо готового фильма.
Титры могут демонстрироваться на фоне последних кадров фильма,
либо на неподвижном фоне. В отличие от бегущей строки, обычно титры
движутся снизу вверх (вспомните создание эффекта снегопада).
Движение объекта по траектории
Анимация движения позволяет перемещать объект или группу
объектов, находящихся в отдельных соседних слоях документа, по
любой заданной траектории. При этом допускается ориентация этих
объектов вдоль направления их перемещения. В качестве такой траектории используется обычный векторный контур (линия, нарисованная инструментом Pensil), который размещается в отдельном слое
документа и называется направляющей движения или просто направляющей. Направляющая отображается лишь в окне документа (во
время воспроизведения фильма она будет скрыта).
Чтобы создать анимацию движения с направляющей, сначала создайте
анимацию движения по прямой. Затем нужно добавить направляющий слой
– слой, в котором будет нарисована траектория движения. Для этого на панели Timeline нажмите кнопку Add Motion Guide (добавить направляющий слой).
Рис.48 Кнопка для добавления направляющего слоя
68
Нарисуйте в этом слое любую линию, незамкнутую и несамопересекающуюся (она и будет служить направляющей движения). Перейдите к
первому ключевому кадру анимации движения. Выберите инструмент Free
Transform и щелкните по объекту, для которого создается анимация движения. Переместите объект так, чтобы белая точка (центр трансформации)
совпал с началом направляющей. Точно также поступите с объектом в завершающем ключевом кадре (центр трансформации должен совпадать с
концом направляющей). Если в инспекторе свойств (при выделенном первом ключевом кадре) поставить галочку напротив Orient to рath (ориентировать по направляющей), то объект во время движения будет находится
под одним и тем же углом относительно направляющей.
Чтобы задать направление перемещения объекта вдоль замкнутой траектории (вращение планеты вокруг солнца по кругу) необходимо сформировать не замкнутый, а разомкнутый контур, концы которого должны быть
расположены достаточно близко друг к другу.
Практическая работа «Создание фильма
с движением по траектории»
Задание: создайте фильмы с использованием одного или нескольких направляющих слоев:
а) Солнце всходит и заходит
Пусть в нашем фильме над лесом всходит и заходит солнце.
Создайте новый фильм. На первый слой – «Лес» – поместите изображение леса (можно использовать символ-клип, который мы создавали, выполняя работу «Создание символа-клипа и использование его множественных экземпляров»).
1.
Продлите анимацию, например, до 50 кадра. Создайте новый
слой и назовите его «Солнце». В первом ключевом кадре поместите изображение солнышка (работа «Создание символа-клипа и использование его
множественных экземпляров») за пределами сцены слева внизу.
2.
Сделайте ключевым 50 кадр, изображение солнышка передвиньте вправо, за правую границу сцены.
3.
Создайте для солнышка анимацию движения.
4.
Создайте направляющий слой над слоем «Солнце», назовите его
«Траектория».
5.
В слое «Траектория» нарисуйте карандашом траекторию движения солнышка над лесом.
6.
Совместите в первом и последнем ключевых кадрах центр солнышка с концами траектории.
7.
Протестируйте анимацию.
69
Рис. 49. Траектория движения солнышка над лесом
б) Пчелы
Рис. 50. Траектории полета пчел
Лето. Цветущий луг. Вдалеке несколько ульев. Над лугом летают
пчелы – приземляются на цветы и уносят нектар в ульи. Каждая пчела летает по своей траектории, то есть для каждой пчелы нужно будет создать
свой направляющий слой. Каждая пчелка – экземпляр символа – клипа
(работа «Создание символа-клипа с вложенной анимацией»).
70
При создании автоматической анимации для каждой пчелки поставьте галочку Orient to Patch.
Чтобы создать впечатление, что пчела улетает вдаль, в последнем
ключевом кадре сделайте размер пчелы очень маленьким.
Буквы выстраиваются в надпись
Это еще один вариант анимации текста. Пусть надпись (например, С
новым годом!) возникает побуквенно, каждая буква появляется из-за края
кадра и встает на свое место, двигаясь по определенной траектории.
Анимация формы
Анимацию формы применяют для плавного преобразования одного
векторного изображения (одного или нескольких объектов типа Shape),
находящегося в каком-либо ключевом кадре, в другое векторное изображение, находящееся в соседнем справа ключевом кадре.
Если анимация формы создана правильно, то на временной шкале
последовательность кадров с анимацией окрашивается в светло-зеленый
цвет, и на ней появляется сплошная стрелка, направленная слева направо.
Если при создании анимации формы допущены ошибки, вместо
стрелки вы увидите пунктирную линию.
Ошибки анимации. Формы возникают в следующих случаях:
- не создан завершающий ключевой кадр;
- ключевые кадры (начальный и завершающий) есть, но они либо пусты, либо в них находятся помимо векторного изображения символы,
сгруппированные объекты, растровые изображения или текст.
Замечания:
- нельзя плавно преобразовать область заливки в область обводки
(область заливки сразу теряет цвет, и анимация формы выглядит как преобразование одного контура в другой);
- при изменении используемых стилей оформления контуров или использовании сложного стиля (например, пунктирной линии), вы можете
увидеть во время анимации обычные сплошные линии;
- нельзя изменять типы градиентных заливок (например, линейный
на радиальный).
Порядок создания анимации формы
1.
Создайте ключевой кадр и разместите в нем векторное изображение, которое необходимо плавно преобразовать (в этом слое не должно
быть символьных, групповых, растровых или текстовых объектов).
2.
Создайте второй ключевой кадр, нажав клавишу F6.
71
3.
Измените положение цвет или форму (или то и то) во втором
ключевом кадре. Можно удалять или добавлять новые векторные формы.
4.
Откройте инспектор свойств и в поле Tween выберите тип анимации Shape. В поле Erase можно установить уровень изменения скорости
процесса раскадровки.
5.
На шкале времени последовательность кадров анимации должна изменить цвет на светло-зеленый. Если появилась сплошная стрелка, то
анимация выполнена корректно.
Анимация формы с метками анимации
Для анимации формы предусмотрена возможность использования
специальных управляющих меток, называемых метками анимации (shape
hints), с помощью которых задается направление преобразования одного
векторного изображения в другое, а также формируются прямолинейные
траектории, вдоль которых будет происходить перемещение выбранных
точек контуров изображения в процессе ее трансформации.
Для того чтобы добавить метки анимации, перейдите в первый ключевой кадр и выполните команду Modify  Shape  Add Shape Hint
(Изменить  Форма  Добавить метку анимации). На рабочем поле
появится небольшой кружок с буквой a. Переместите кружок в нужное
место. Перейдите в следующий ключевой кадр (там также будет кружок с
буквой a) и переместите его туда, куда должна, по вашему мнению, перейти указанная в первом кадре точка. Чтобы добавить еще одну метку анимацию, вернитесь в первый ключевой кадр и в контекстном меню первой
метки выберите Add Hint (Добавить метку) и т.д. Удалить метки можно
также через контекстное меню метки.
Практическая работа «Создание фильма
с автоматической анимацией формы»
Задание: Создайте фильмы с использованием автоматической анимации формы:
а) Превращение одной надписи в другую
Пусть надпись «Поздравляем» плавно превратится в надпись «С новым годом!». Если вы написали слово при помощи инструмента Text
(Текст), то перед созданием анимации формы вы должны 2 раза подряд
применить к нему команду Modify  Break Apart. После первого применения команды слово будет разбито на отдельные буквы, после второго –
каждая буква будет преобразована в графический объект (или объект типа
Shape). Можно и не использовать инструмент Текст, а написать буквы кистью или карандашом, или импортировать готовые изображения букв.
72
Импортированное изображение перед созданием анимации формы также
нужно разбить командой Break Apart.
б) Тающий снеговик
Нарисуйте в первом ключевом кадре снеговика, а в последнем - лужицу воды и отдельно лежащую морковку, глазки – угольки, метлу. Создайте анимацию формы и протестируйте ее. Скорее всего, результат вам
не понравится, т.к. таяние снеговика – процесс длительный, и между
начальным и конечным состоянием мы ожидаем увидеть промежуточные
стадии – снеговик чуть осел, накренился, выронил метлу... Поэтому для создания полноценной анимации придется создать несколько ключевых кадров, промежутки между которыми будут заполнены кадрами с автоматической анимацией формы. Кроме того, для того, чтобы изображения глаз,
носа, метлы не искажались самым фантастическим образом во время анимации, их лучше разместить на отдельных слоях, и для каждого элемента
создать свою анимацию, анимацию движения.
в) Обратный отчет
Вариант заставки к фильму: на экране сменяются цифры от 9 до 0,
каждый раз плавно перетекая одна в другую. После появления на экране
цифры 0 фильм продолжается по задуманному сценарию.
Работа с маскирующим слоем
Использование слоя маски позволяет закрывать часть слоя (или слоев), который находится под слоем маски. Объекты, помещенные в слое
маски, позволяют видеть сквозь них непрозрачные объекты слоев, расположенных под слоем маски. Слои под слоем маски называются маскированными. Маска может быть анимированной, при этом следует отметить,
что для перемещения слоя-маски нельзя применять траектории. Также часто используется неподвижная маска и анимированный фон.
Создание слоя маски
1.
Создайте объекты, которые хотите показать через «отверстие» в
слое маски. Они могут находиться в одном или нескольких слоях.
2.
Выделите самый верхний слой в списке и добавьте новый слой.
3.
Создайте, вставьте или импортируйте в новый слой одну фигуру с заливкой, текст или экземпляр символа. В дальнейшем эта фигура будет прозрачной, станет «отверстием», а незаполненная часть слоя будет
непрозрачной.
4.
Щелкните на названии слоя правой кнопкой мыши и выберите
из контекстного меню пункт Mask. Программа превратит обычный слой в
слой маски, а слой, находящийся ниже, сделает маскируемым. Для того,
чтобы под действие маски попали несколько слоев, находящихся ниже
маски, нужно для каждого слоя проделать следующее: щелкнуть правой
73
кнопкой по названию слоя и выбрать в контекстном меню пункт Properties,
а в группе Type – Masked.
Практическая работа «Создание фильма
с использованием маскирующего слоя»
Задание: создайте фильмы с использованием маскирующего слоя:
а) Эффект подсветки текста
Создадим пример, в котором будет создаваться эффект подсветки
текста за счет использования текстовой маски и подвижного фона с градиентной заливкой.
Создаем текст, к которому будет применен эффект подсветки. Назовем слой с текстом именем Текст и создадим еще один слой, дав ему имя
Градиент. В слое Градиент создадим прямоугольник, залитый градиентной радиальной заливкой. Этот прямоугольник должен быть в 3 раза
длиннее текста, и закрывать его так, чтобы граница прямоугольника
немного выходила за границу текста с правой стороны. Затем создаем
анимацию движения для прямоугольника – в конечном ключевом кадре
сдвигаем его так, чтобы граница прямоугольника немного выходила за
границу текста с левой стороны. Пусть анимация продолжается 60 кадров.
Поменяем слои Текст и Градиент местами и вставим ключевой кадр в
слое Текст в 60 кадре. Щелкнем по названию слоя Текст, в результате чего появится выпадающее меню. Выберем в этом меню пункт Mask. Просмотрим
результат.
б) Создание эффекта перехода между слайдами в слайд шоу
Используя маскирующий слой, можно создать множество красочных
эффектов, делающих процесс смены на экране изображений более красивым, плавным, интересным. Мы уже создавали один из таких эффектов –
эффект растворения, а сейчас создадим эффект изменения размера при появлении, когда слайд будет появляться на экране в виде точки и постепенно увеличиваться до размеров экрана, затем на некоторое время «замирать» и затем опять уменьшаться до размеров точки.
Для начала определим, в течение какого времени будет демонстрироваться каждый слайд с учетом нашего эффекта. Пусть у нас уходит 1 секунда на появление слайда, 3 секунды – демонстрация, и 1 секунда –
исчезновение слайда. Итого – 5 секунд для каждого слайда, или 60 кадров.
Итак, начнем.
1.
Создайте слой Слайды и разместите в первом кадре изображение первого слайда.
2.
Преобразуйте его в графический символ (чтобы уменьшить
размер фильма) и продлите анимацию до 60 кадра.
74
3.
В 61-й кадр вставьте ключевой кадр, замените изображение на
второй слайд, преобразуйте его в символ и продлите анимацию до 120
кадра. Таким же образом добавьте все слайды вашего слайд–шоу. Если их
очень много, можно размещать слайды в других сценах.
4.
Теперь добавьте новый слой и назовите его Маска. В первом
ключевом кадре нарисуйте инструментом Овал или Прямоугольник очень
маленькую фигурку в центре рабочего стола.
5.
Перейдите в 10 кадр, сделайте его ключевым и увеличьте вашу
фигуру так, чтобы она полностью закрывала рабочее поле.
6.
Перейдите в 50 кадр, сделайте его ключевым, изображение
менять не надо (с 10 по 50 кадр слайд демонстрируется на экране).
7.
Перейдите в 60 кадр, сделайте его ключевым и удалите
изображение.
8.
Вернитесь в первый ключевой кадр, скопируйте его в буфер
обмена, затем в 60 кадре выберите команду Edit – Paste in Place.
9.
В 1-м и 50-м кадрах создайте анимацию изменения формы.
10. На панели Timeline выделите 1 – 60 кадры слоя Маска и скопируйте их в буфер обмена.
11. На панели Timeline выделите 61 кадр слоя Маска и вставьте
кадры из буфера обмена; затем выделите 121 кадр и вставьте кадры из буфера обмена и т.д. Повторите это действие столько раз, сколько слайдов
участвует в вашем слайд – шоу.
12. На панели Timeline щелкните правой кнопкой по названию слоя
Маска и выберите в контекстном меню пункт Mask.
13. Протестируйте анимацию.
V. Добавление к фильму интерактивности
В простом анимированном фильме Flash воспроизводит кадры временной диаграммы в определенной последовательности, которая остается
неизменной, сколько бы раз вы не просматривали фильм. В интерактивном
фильме читатель имеет возможность использовать клавиатуру, мышь или
то и другое, чтобы перейти к некоторому фрагменту или сцене фильма,
переместить объекты, ввести информацию, а также выполнить многие
другие интерактивные операции.
Интерактивность Flash-фильма обеспечивается за счет включения в
него так называемых сценариев, которые представляют собой набор инструкций на языке ActionScript. Каждая инструкция инициируется при
наступления определенного связанного с ней события. События могут
быть самые разнообразные: достижение считывающей головкой опреде75
ленного кадра, нажатие пользователем клавиши на клавиатуре, щелчок
кнопкой мыши и т.д.
Символы – кнопки
Чаще всего для введения в фильм интерактивности используются
символы – кнопки. Кнопки отличаются от других символов тем, что
имеют свою собственную временную шкалу, правда, она несколько отличается от обычной. Временная шкала кнопки содержит всего 4 кадра, каждый из которых определяет внешний вид кнопки в разных состояниях:

Up – определяет, как выглядит кнопка в обычном режиме. Изначально пользователь видит именно это состояние кнопки.

Over - определяет внешний вид кнопки при перемещении над
ней курсора мыши (без щелчка)

Down – определяет, как выглядит кнопка при щелчке.

Hit – активная зона – определяет область кнопки, которая реагирует на действия мыши. Пользователь не видит этот участок.
Создание простой кнопки
1.
Выполните команду Insert – New Symbol или нажмите F8.
2.
Введите название символа и тип Button. Щелкните на
кнопке ОК.
3.
Создайте графическое изображение для состояния Up.
Можно использовать все инструменты рисования, добавлять слои,
импортировать растровые изображения, вставлять готовые графические символы.
4.
Щелкните на кадре Over нажмите клавишу F6 (создать
ключевой кадр).
5.
Создайте графическое изображение для состояния Over.
6.
Щелкните на кадре Down и создайте ключевой кадр.
7.
Создайте графическое изображение для состояния Down.
8.
Щелкните на кадре Hit и создайте ключевой кадр.
9.
Если необходимо, нарисуйте фигуру, которая определяет
активную зону кнопки.
10. Вернитесь к основному фильму. Перетащите из библиотеки
символ только что созданной вами кнопки на рабочее поле.
Кнопку можно сделать анимированной – то есть в одном из состояний внешний вид кнопки будет определяться не статичным рисунком, а анимацией. Для этого нужно добавить к кнопке символ –
клип.
76
Добавление к кнопке символа - клипа
1.
Выберите состояние, в котором кнопка будет анимирована
(Up, Over или Down).
2.
Создайте символ - клип, который вы будете добавлять к
кнопке.
3.
В процессе создания символа – кнопки в выбранном вами
состоянии (Up, Over или Down) поместите на рабочее поле клип, перетащив его из библиотеки.
В состав Flash входит стандартная библиотека интерактивных
элементов Buttons (кнопки), которая открывается командой Windows
 Common Libraries  Buttons.
Практическая работа «Создание анимированной кнопки»
Задание: создайте кнопки:
а) в виде цветка, который начинает вращаться при наведении на
него курсора мыши.
б) в виде лампочки, которая начинает мигать, когда на нее наводят курсор, и вспыхивает очень ярко при нажатии.
в) в виде двери, которая открывается при нажатии.
Работа со звуком
Flash поддерживает несколько способов подключения звукового
сопровождения. Вы можете использовать либо непрерывное звуковое
сопровождение, не зависящее от временной шкалы фильма, либо
синхронизировать анимацию и звуковую дорожку. Разрешается
назначать звуки кнопкам, кадрам и символам-клипам.
Добавленные в фильм звуки помещаются в библиотеку фильма,
наряду с растровыми изображениями и другими символами. Flash не
располагает средствами создания звуков, но позволяет импортировать звуковые файлы в различных форматах (в том числе WAV и
МРЗ) и затем корректировать параметры звука в соответствии с требованиями фильма.
Чтобы добавить звук к фильму, необходимо выполнить следующие действия:
1. Импортируйте в фильм один или несколько звуковых файлов;
для этого в меню File выберите команду File  Import  Import to
Library (Файл  Импорт  Импорт в библиотеку), а с помощью
стандартного окна Windows - требуемый файл; в результате содержимое файла будет добавлено в библиотеку фильма в качестве специального символа.
77
2. Создайте новый слой, который будет использоваться в качестве звукового; разрешается создавать несколько звуковых слоев, и
каждый из них будет работать подобно отдельному звуковому каналу; это означает, что при воспроизведении фильма звуки на разных
слоях, совпадающие во времени, воспроизводятся одновременно.
3. Выберите в звуковом слое кадр, с которого вы хотите начать воспроизведение звука; если данный кадр не является ключевым, выполните
для него команду Insert  Keyframe (или нажмите клавишу F6).
4. Щелкните в ячейке первого озвучиваемого кадра и в панели
инспектора свойств выберите в раскрывающемся списке Sound
(Звук) требуемый звуковой символ; на панели появятся (или станут
доступны) элементы управления, используемые для установки параметров звука, а также его исходные параметры: ширина полосы
частот, моно/стерео, разрядность, длительность, занимаемый объем
памяти (рис.51).
Рис.51 Формат инспектора свойств кадра при озвучивании кадра.
5. Если это требуется, с помощью указанных элементов интерфейса скорректируйте параметры звука (подробнее о том, как это
сделать, будет сказано ниже).
6. В раскрывающемся списке Sync (от Synchronization - синхронизация) выберите способ синхронизации звука:
 Event – звук-событие. Полное воспроизведение звука от
начала до конца, независимо от временной шкалы фильма, даже если
фильм будет остановлен (если, конечно, звук достаточно продолжителен). Рекомендуется для фонового звучания при воспроизведении
фильма в цикле или для коротких звуковых эффектов.
 Start – вариант аналогичен предыдущему, за исключением
того, что при очередном наступлении заданного события начинается
воспроизведение нового экземпляра звука, даже если воспроизведение предыдущего еще не закончено.
78
 Stop – используйте это значение, когда необходимо выключить определенный звук.
 Stream - потоковый звук; Flash обеспечивает «насильственную» синхронизацию анимации и потокового звука: например, если
кадры анимации не успевают воспроизводиться на Web-странице с
той же скоростью, что и потоковый звук, Flash-плеер пропускает некоторые кадры; воспроизведение потокового звука всегда прекращается при
завершении анимации; кроме того, потоковый звук никогда не продолжается дольше, чем воспроизводятся связанные с ним кадры анимации.
7. Установите длительность звучания; она определяется как число
повторений звука; это число следует ввести в поле Loops (Циклы);
например, если 3-секундный звук должен быть слышен в течение 30 секунд, следует ввести в поле Loops число 10.
Непосредственно после выбора в списке Sound одного из звуковых
символов его амплитудная характеристика отображается на временной
шкале (рис.52).
Рис.52 Представление на временной диаграмме озвученного кадра
Обратите внимание, что изображение звука на временной диаграмме масштабируется в соответствии с установленной частотой
кадров фильма. Например, при частоте кадров, равной 12, звук длительностью в 2 секунды займет 6 кадров на диаграмме.
Добавление звука к кнопке
Вы можете связывать звуки с различными состояниями символа
кнопки. Поскольку звуки сохраняются вместе с символом кнопки,
Они будут работать для всех ее экземпляров.
Чтобы добавить звук кнопке, выполните следующие действия:
1. Выберите символ кнопки в окне библиотеки и перетащите его
на стол.
2. Щелкнув дважды по кнопке, перейдите в режим редактирования символа.
3. Создайте новый слой, назовите его Звук.
4. В этом слое создайте ключевой кадр, соответствующий тому
79
состоянию кнопки, которое вы хотите озвучить.
5. С помощью элементов управления, имеющихся на панели инспектора свойств кадра, установите параметры звука, как было описано выше.
Для озвучивания других состояний кнопки необходимо повторить описанную выше процедуру.
Практическая работа «Создание озвученной электронной
поздравительной открытки»
Задание: создать электронную поздравительную открытку, соответствующую следующим требованиям:
- содержится один или несколько векторных рисунков, созданных с помощью инструментов рисования;
- содержится анимированный текст;
- содержится автоматическая анимация движения и/или формы;
- содержится кнопка воспроизведения звукового файла.
Примеры электронных открыток (идеи с Яndex. Открытки). Все
открытки озвучены и могут содержать кнопки для повторного воспроизведения и/или остановки анимации.
1.
«Создай свою мелодию». На открытке – несколько персонажей, которые держат в руках музыкальные инструменты. После
щелчка по фигурке она «оживает», начинает играть на своем инструменте и одновременно воспроизводится звуковой файл. После повторного щелчка фигурка замирает, звук замолкает. Для каждого персонажа – свой звук. Можно обойтись и без музыкальных инструментов, ваши персонажи могут петь, или топать ногой и т.п.
2.
«С днем рождения!» На экране – именинник собирается
съесть большой торт. Появляется надпись: «Если разделить этот торт
на всех, кому ты дорог...» От торта отделяются кусочки и уплывают
за границу экрана, у именинника вытягивается лицо. Наконец остается очень маленький кусочек, надпись: «... то тебе достанется только
маленький кусочек!» Именинник радуется, но не успевает его съесть
– мимо пробегает мышь и утаскивает последний кусок. Надпись:
«Это прекрасно, когда у кого-то много друзей! Это значит, что он
замечательный прекрасный человек!» Тут вокруг расстроившегося
именинника начинают появляться подарки. Последний подарок приносит мышка. Надпись: «И он получает больше всех подарков!
С днем рождения!!!»
3.
«С новым годом!» По дороге идет усталый снеговичок. Плечи
опущены, нос – морковка смотрит вниз. Он доходит до дорожного указателя «Новый 20.... год!!!» Останавливается, читает, начинает улыбаться.
80
Достает из кармана и надевает красный колпачок. Надпись: «Сбрось груз
забот, к нам идет Новый год!» Снеговик идет дальше, уже весело, его
изображение растворяется и заменяется надписью с новогодним пожеланием.
4.
«Новый год спешит на Землю». На экране – изображение
вращающегося земного шара не зелененьком фоне. Постепенно Земля
приобретает вид елочной игрушки – появляется петелька, она начинает блестеть. Изображение отдаляется, и мы видим множество таких
шариков, висящих на елке. Рядом с елкой – звездное небо. Надпись:
«Новый год спешит на Землю».
5.
«К дню святого Валентина». На экране – изображение
ромашки и надпись: «Погадаем? Всегда правильный ответ!» При
щелчке по любому лепестку ромашки изображение меняется: мы
видим, как плавно опускается лепесток ромашки, возникает надпись
«Любит» и кнопка «Еще раз».
6.
«С днем рождения!» На экране – 6 смешных лягушат. После щелчка мышкой по каждому лягушонку на экране появляются части слова «Поздравляем», пожелания, разлетающиеся маленькие сердечки и т.п.
Использование интерактивных элементов
Для создания интерактивных элементов используются команды
языка ActionScript – так называемые действия (actions). Действия –
это простые короткие инструкции, которые указывают Flash, что она
должна делать дальше. Они могут размещаться в двух местах:
 кадр на временной шкале;
 экземпляр символа (кнопки или символа - клипа).
Действие добавляют к кадру, чтобы иметь возможность управлять тем, что произойдет, когда фильм достигнет этого кадра. Действия кадра часто используются для воспроизведения фильма с определенного места или для создания цикла повторного воспроизведения
определенного фрагмента анимации, для остановки фильма или перехода к другому URL – адресу.
Добавление простого действия к кадру
1. Создайте новый слой для ваших действий ActionScript (если
вы еще этого сделали).
2. Щелкните на ключевом кадре.
3. Затем выполните команду Window  Actions, чтобы открыть
панель Actions.
81
Если панель Actions отображается в свернутом виде, щелкните
на строке ее заголовка, чтобы развернуть панель. Если в левой части
панели Actions не отображается список доступных действий ActionScript, то щелкните на расположенной в середине левой стороны
панели узенькой кнопке с направленной вправо стрелкой, чтобы
отобразить этот список.
4. Щелкните на кнопке Script Assist (Ассистент создания
сценария) в правой части панели Actions, если она еще не активизирована.
При активизации режима Script Assist правая часть панели Actions разделяется пополам на два горизонтальных раздела. В результате в верхней правой части панели Actions отображаются все возможные параметры введенного действия, которые вам потребуется
задать.
5. Выберите категорию и подкатегорию в списке в левой верхней части панели, затем либо дважды щелкните на названии действия, либо перетащите его в правую область панели Actions.
Можно также щелкнуть на кнопке со знаком «+», выбрать категорию, а затем указать в подменю название необходимого действия.
Например, для остановки фильма перед началом его воспроизведения
(воспроизведение начинается по щелчку на кнопке, размещенной в первом
кадре фильма) выберите категорию Global Functions (Глобальные
функции), подкатегорию Timeline Control (Управление временной
шкалой), и наконец дважды щелкните на действии Stop.
6. Если для выполнения действия необходимо ввести параметры,
введите требуемую информацию в правой верхней части панели.
Добавление действий к кнопкам
1.
Создайте кнопку и поместите ее экземпляр на рабочее поле.
2.
Выделив экземпляр, выполните команду Window – Actions
(Окно - Действия), чтобы открыть панель Actions.
3.
Щелкните на кнопке ScriptAssist в правой части панели
Actions, если она еще не активизирована.
4.
Щелкните в списке, находящемся в левой части панели Actions, на соответствующей категории, например, Global Functions
(Глобальные функции), затем щелкните на подкатегории, например,
Timeline Control (Управление временной шкалой), и дважды
щелкните на необходимом действии, например, goto. В окне редактирования кода в правой нижней части панели Actions будет добавлен
код действия on с установленным по умолчанию событием release, за
82
которым следует выбранное вами действие. Действие on представляет собой обработчик событий мыши (нажатие на кнопку мыши, освобождение кнопки мыши и т.д.). Событие Release означает отпускание
кнопки мыши, т.е. наступает в тот момент, когда кнопка отпущена
после нажатия.
5.
Если действие требует ввода параметров, введите необходимые значения в области параметров в правой верхней части панели
Actions.
6.
Если вы решили изменить событие release на другое, в области редактирования сценария в правой нижней части панели Actions щелкните на слове release в инструкции on release, чтобы выделить эту строку кода. Затем в правой верхней части панели Actions
сбросьте флажок опции Release и установите флажок другого события.
7.
Щелкните на строке заголовка панели Actions, чтобы свернуть эту панель.
Некоторые события, инициирующие действия кнопок
Press (нажатие) – когда пользователь щелкает на кнопке.
Release (отпускание) - когда пользователь отпускает кнопку
мыши.
KeyPress (нажатие клавиши) – когда пользователь нажимает
заданную клавишу на клавиатуре.
RollOver (перемещение над активной зоной) – когда курсор
попадает в активную зону кнопки при ненажатой кнопке мыши.
Добавление действий к символу - клипу
Действия к клипу добавляются также, как к кнопкам. По умолчанию в код ActionsScript вставляется обработчик событий клипа
OnClipEvent, используя для него задаваемое по умолчанию событие
Load.
Некоторые события, инициирующие действия символов клипов:
Load (загрузка) – как только клип загружается в память (впервые появляется на временной шкале).
EnterFrame (ввод кадра) – при переходе к каждому кадру клипа.
Unload (выгрузка) - в первом кадре после удаления экземпляра
клипа из временной шкалы.
MouseDown (щелчок левой кнопкой мыши) – после щелчка
левой кнопкой мыши.
MouseUp (кнопка отпущена) – когда левая кнопка мыши отпускается.
83
KeyDown (нажатие клавиши) – при нажатии любой клавиши.
KeyUp (отпускание клавиши) – когда отпускается какая-либо
клавиша.
Наиболее часто используемые действия
Действия для управления временной шкалой.
Это те действия, которые относятся к категории Global Functions
(Глобальные функции), подкатегории Timeline Control (Управление
временной шкалой) панели Actions.
Действие goto – указывает вашему фильму перейти к другому кадру.
Чтобы указать конкретный кадр, вставьте действие и выберите из раскрывающегося списка Type одну из следующих доступных опций:

Frame Number (номер кадра) – определяет кадр по его номеру на временной шкале.

Frame Label (метка кадра) – определяет кадр по метке, которую вы ему назначили. Чтобы создать метку кадра, выделите кадр
на временной шкале и введите имя метки в поле Frame Label инспектора свойств.

Expression (выражение) – задает номер кадра с помощью
программного кода Actionsscript.

Next Frame - следующий кадр.

Previous Frame – предыдущий кадр.
После перехода к указанному кадру возможны два варианта:

Go to and stop (перейти и остановить) – фильм переходит к
указанному кадру и останавливает воспроизведение. (Ждет реакции
пользователя, например щелчка по кнопке.)

Go to and play (перейти и воспроизвести) – фильм переходит в указанный кадр и начинает воспроизведение с этого кадра.
Действие on() – обеспечивает реакцию фильма на щелчок мышью,
перемещение курсора мыши или нажатие клавиши на клавиатуре.
Действие Play – сообщает фильму или символу - клипу, что следует выполнить воспроизведение.
Действие Stop – прекращает воспроизведение фильма или символа - клипа.
Действие stopAllSounds – прекращает воспроизведение всех
звуковых файлов.
84
Действия, связанные с браузером или сетью
Это действия, относящиеся к категории Global Functions (Глобальные функции), подкатегории Browser/Network (Браузер/Сеть)
панели Actions.
Действие getURL – эквивалент гиперссылки языка HTML, используется для перехода к другой Web – странице. Для использования этого действия нужно ввести в специальное поле URL – адрес и выбрать в раскрывающемся списке Window одну из следующих опций:
 _self – открывает новую Web – страницу в текущем окне.
 _blank – открывает новое окно.
 _parent – открывает во фрейме.
 _top – этот параметр заменит все фреймы новой Webстраницей.
Действие loadMovie – позволяет загрузить любой swf – файл или
растровое изображение из вашего компьютера или из Web. Параметры:

URL – адрес, если файл расположен в той же папке, что и
текущий фильм, можно просто ввести его название.

Location (расположение) – выберите в этом раскрывающемся списке значение уровня (Level), в который будет загружен
файл, если вы хотите поддерживать открытыми одновременно несколько фильмов или изображений.
Чтобы загружаемый файл заменил исходный, задайте значение 0
в качестве номера уровня. Результат применения такой установки
напоминает переключение изображений в слайд-шоу.
Для загрузки нового фильма или изображения без замены при
этом исходного фильма, укажите такой номер уровня, который не
использовался для загрузки других фильмов и изображений, отличный от 0. Частота кадров, цвет фона и размеры фильма при этом
определяются исходным фильмом, расположенным на самом низком
уровне (на уровне 0).
Чтобы заменить новым фильмом уже загруженный фильм или
изображение, задайте номер уровня, который использовался для этого фильма или изображения. Вы можете выбрать в раскрывающемся
списке Location значение Target (целевой объект) вместо значения
Level, если желаете заменить конкретный экземпляр символа - клипа.
В этом случае введите в соседнее поле имя экземпляра символа клипа, который хотите заменить.
Действие UnloadMovie выгружает фильмы, которые были
загружены с помощью действия LoadMovie.
85
Использование поведений
Поведения (Behaviors) – совокупность команд ActionsScript, которую можно добавить к кадру, экземпляру кнопки или символуклипу при помощи панели Behaviors.
Примеры поведений:
Категория Поведение
Movieclip Duplicate Movie Clip
Movieclip
Movieclip
Movieclip
Movieclip
Sound
Sound
Sound
Sound
Sound
Web
Описание
создает копию экземпляра символа клипа
Go to and Play at Frame воспроизводит фильм, начиная с укаor label
занного вами кадра, который можно
задать по номеру или метке
Go to and Stop at Frame переходит к указанному кадру фильor label
ма и останавливает воспроизведение
Load External Movie Clip загружает внешний .swf файл в указанный вами экземпляр символа клипа
Unload Movie Clip
удаляет загруженный внешний файл
Load Sound from Library загружает звуковой файл из библиотеки
Load streaming MP3 file загружает звуковой файл в формате
МР3
Play sound
Воспроизводит указанный вами звуковой файл
Stop all Sounds
останавливает воспроизведение всех
звуковых файлов
Stop Sound
останавливает воспроизведение определенного звукового файла
Go to Web Page
Открывает заданную вами Webстраницу
Добавление поведений
1.
Щелкните на ключевом кадре, если хотите добавить действие к кадру. Создайте символ и разместите его на рабочем поле, если нужно добавить действия к экземпляру символа.
2.
При выделенном кадре или экземпляре символа выберите
команду Window  Behaviors, чтобы открыть панель Behaviors.
3.
Щелкните на кнопке с «+» и укажите категорию. После
этого выберите одно из поведений в списке данной категории.
4.
Введите в появившемся диалоговом окне требуемую
информацию.
86
5.
Щелкните на кнопке ОК.
6.
Если вы добавили поведение к экземпляру кнопки или символа
- клипа и хотите изменить событие, при котором будет выполнен заданный
добавленным поведением код ActionsScript, щелкните на событии в панели
Behaviors, чтобы отобразить раскрывающийся список. Выберите новое
событие из этого раскрывающегося списка.
7.
Чтобы увидеть реальный код Action Script, который вы
только что создали, откройте панель Actions.
Практическая работа «Создание интерактивного резюме»
Задание: создать интерактивное резюме с использованием
базовых действий и навигационной панели
Подготовка области действия
Задача достаточно проста - создать интерактивное резюме, в котором была бы представлена наиболее важная персональная информация (см. рис.53).
1. С помощью инструмента Rectangle (прямоугольник) создайте 2 прямоугольника, которые будут выполнять роль верхнего и нижнего колонтитулов. Не делайте прямоугольники слишком большими.
Данный фильм будет содержать большой объем информации, поэтому середина области действия должна быть свободной.
2. Каждое резюме должно содержать имя человека, информация
о котором в нем содержится. С помощью инструмента Text (Текст)
введите в левой части верхнего прямоугольника свое имя.
3. Задайте метку первого кадра – (например, s11). Для этого выделите кадр на шкале времени, и в инспекторе свойств в поле <Frame
Label> напишите «s11». С помощью метки кадра вы сможете обращаться к нему не по порядковому номеру, а по собственному имени.
4. Сделайте останов в первом кадре.
5.Сохраните файл и присвойте ему имя. Теперь можно приступать к созданию других компонентов вашего резюме.
Создание интерактивных элементов
6.Создаваемое вами резюме будет содержать четыре части: контактная информация, образование, опыт работы и характеристики.
Прежде всего, необходимо создать кнопки для перехода к различным
разделам резюме. Кнопки должны быть похожи на пункты меню –
прямоугольники с надписью. Нарисуйте такой прямоугольник, скопируйте его и вставьте в документ 3 раза.
87
7. На каждом прямоугольнике сделайте надпись инструментом
Текст: образование, опыт работы, характеристики, контактная информация. Это заготовки для четырех кнопок.
Рис.53 Интерактивное резюме
8. Преобразуйте каждую заготовку в символ-кнопку. При этом в состояниях Up и Over кнопка будет выглядеть одинаково, как вы ее нарисовали, в состоянии Down измените цвет. Назовите кнопки b1, b2, b3, b4.
9. Поместите кнопки на нижний колонтитул.
10. Нажимая на созданные нами кнопки, вы будете перемещаться между сценами фильма – их должно быть 4, по числу кнопок. Для
каждой кнопки будет написан код, который позволит вам переместиться в определенную сцену. Так как во всех 4 сценах коды у кнопок будут одинаковые, то сначала напишите их для кнопок, а потом
создайте остальные сцены, копируя первую (это удобно, потому что
при копировании сцены все кнопки останутся на тех же местах, с теми же кодами, и останется только заполнить текстом ваше резюме).
Итак, кнопке b1 присвоим код (напишем его вручную, используя
панель Actions, режим Script Assist: нажмем кнопку с плюсиком, выберем Global Function  Timeline Control  Go to, в появившемся
окне должен быть выбран переключатель «Goto and Play», в поле со
88
списком Scene выбираем Scene 1, в поле со списком Type выбираем
Frame Label, в поле со списком Frame выбираем s11):
on (release) {
gotoAndPlay(«scene 1», «s11»);
}
Здесь s11 – метка первого кадра первого слоя (такие метки нужно присвоить первым кадрам во всех сценах). Для кнопок b2, b3, b4
соответственно:
on (release) {
gotoAndPlay(«scene 2», «s21»);
}
on (release) {
gotoAndPlay(«scene 3», «s31»);
}
on (release) {
gotoAndPlay(«scene 4», «s41»);
}
11. Мы будем использовать созданную ранее сцену в качестве
базовой для каждого раздела. Для этого необходимо создать три дубликата сцены Scene 1. Делается это следующим образом.
- Откройте панель Scene. Указанное окно содержит пока только
одну сцену. Отметьте ее (сцена Scene 1) и щелкните па кнопке Duplicate Scene в нижней части панели.
- На панели Scene появится сцена Scene 1 copy. Выполните на ее
значке двойной щелчок и переименуйте ее в Scene 2.
- Повторите описанные действия еще два раза и назовите новые
сцены соответственно Scene 3 и Scene 4.
12. В первом кадре каждой сцены сделайте останов и введите
имя метки – для 2, 3, 4 сцен соответственно: s21, s31, s41.
Создание элементов навигации
13. Создаваемая в нижней части резюме навигационная панель
должна содержать кнопки с закладками, чтобы читающий резюме человек всегда знал, в каком разделе он в данный момент находится.
Для создания закладки, являющейся одним из наиболее важных элементов резюме, мы воспользуемся кнопкой одной из наших кнопок.
Выберите одну из кнопок меню и войдите в режим редактирования. Щелкните на ключевом кадре состояния Down и выберите графический, так и текстовый элементы кнопки.
89
14. Преобразуйте в символ типа Графика.
15. Повторите эту процедуру для состояния Down трех остальных кнопок. Назовите создаваемые графические символы именами
m1, m2, m3, m4 соответственно. Сохраните фильм и возвратитесь к
главной временной шкале сцены Scene 1.
16. Перейдите к сцене Scene 1 и выберите экземпляр b1. На панели инспектора свойств щелкните на кнопке Swap Symbol и в открывшемся диалоговом окне Swap Symbol замените символ b1 графическим символом m1. Выполните указанные действия и в отношении символов в сценах Scene 2, Scene 3, Scene 4, заменив соответственно b2 на m2, b3 на m3, b4 на m4.
Завершающий этап создания резюме
17.Теперь, когда все элементы управления функционируют и вы
можете переключаться между различными разделами резюме (сценами фильма), можно приступать к созданию остальной части содержимого. В каждой сцене введите необходимую текстовую информацию с помощью инструмента Текст, можно вставить анимацию или
графические изображения по желанию.
VI. Создание интерактивных документов типа Web – сайт
и презентаций
Общие правила создания сайтов
Самые лучшие web-сайты - это те, которые привлекательно выглядят, емко выражают основную идею и не заставляют пользователей ждать получения информации на их экранах слишком долго. Вот
некоторые основные правила создания сайтов:.
1. Продумайте и сформулируйте цели создания вашего сайта.
Старайтесь сделать это настолько четко, насколько это возможно,
чтобы избежать ошибки создания бессистемных и непродуманных
сайтов.
2. Обязательно думайте о своей аудитории. Кто будет основной
аудиторией сайта? Какого они возраста? Чем они занимаются? Сколько
времени они проведут на сайте? В отношении каждой порции информации, каждой картинки и каждой детали подумайте, как отреагирует на это
аудитория, на которую направленно ее назначение.
3. Контролируйте размеры загружаемых изображений
и других элементов сайта. Долгая загрузка информации заставляет
пользователей быстро покидать сайт.
90
4. Продумайте дизайн сайта. Недостатки подбора цвета и разнообразия текста, заголовков могут быть причиной затрудненного
восприятия информации и раздражения пользователя.
5. Не перегружайте страницы информацией. Сайт должен
быть удобным для просмотра, поэтому на каждой страничке материал
лучше размещать небольшими порциями.
6. Структурируйте содержимое. Информацию, которую посетители
должны увидеть, не нужно прятать вглубь сайта. Сделайте важную информацию настолько легко доступной, насколько это возможно. Хороший
сайт имеет не один уровень вложенности. Вторичный материал упорядочивайте по группам взаимосвязанной информации.
7. Организуйте на сайте систему навигации. Это могут быть кнопки, адресующие к различным разделам сайта. Они, как правило, присутствуют на всех страницах сайта и обычно расположены плотной группой в
одном и том же месте страницы. Единообразие и компактность их расположения существенно упрощают просмотр сайта. Пользователю достаточно просто нажать кнопку, чтобы перейти в другой раздел сайта. Обязательно должна быть кнопка, с помощью которой пользователи могли бы
вернуться обратно к начальной странице.
Постарайтесь максимально упростить перемещение по сайту.
Лучше всего, если нужно будет нажать не более трех навигационных
кнопок, чтобы добраться до любой информации.
Особенности создания сайтов в программе Flash

При создании сайта с помощью программы Flash отдельные странички сайта соответствуют разным сценам. Первая сцена –
это стартовая страница, на которой располагается меню для перехода
в другие разделы сайта.

Чтобы время загрузки было максимально маленьким, вся
основная информация должна располагаться во внешних файлах и загружаться только по желанию пользователя, а основной фильм играет
роль «каркаса», «скелета» проекта.

Для навигации в сайте, созданном с помощью программы
Flash, можно использовать не только кнопки, но и текстовые гиперссылки.
Правила создания презентаций
Компьютерные презентации часто используются в рекламе, при
выступлениях на конференциях и совещаниях, могут также использо91
ваться на уроке в процессе объяснения материала учителем или докладов учащихся.
Продумайте назначение вашей презентации. От назначения
презентации будет зависеть не только ее содержимое, но и дизайн,
дополнительные элементы.
Думайте о своей аудитории. Создавая презентацию, учитывайте особенности восприятия разных категорий слушателей, возрастные
особенности, если презентация предназначена для детей.
Четко продумайте структуру вашей презентации. Разбейте
большую информацию на небольшие порции, разумно используйте
иллюстрации. Установите равновесие между текстовой и изобразительной информацией.
Продумайте управление презентацией. Удобнее всего управлять просмотром презентации щелчком мыши, но можно предусмотреть и автоматический показ слайдов.
Особенности создания презентаций с помощью программы Flash
При создании презентации с помощью программы Flash каждый
слайд будет располагаться в отдельной сцене. Каждый слайд может
содержать анимацию и/или звуковое сопровождение. В последнем
ключевом кадре каждой сцены нужно сделать остановку воспроизведения, и переходить к следующем слайду с помощью кнопок. Обычно
слайды презентаций имеют кнопки – «Следующий слайд», «Предыдущий слайд», «Закончить просмотр», «Вернуться в начало». Но при
желании можно добавить любое количество кнопок и гиперссылок
для перехода на разные слайды в соответствии с содержанием презентации. Тогда презентация будет называться интерактивной. При
этом нужно предусмотреть возврат в тот слайд, откуда вы ушли,
нажав на какую либо навигационную кнопку.
Если все слайды презентации по оформлению и структуре, можно создавать новые слайды (т.е. сцены) копируя и изменяя первый слайд.
Оптимизация фильма
Конечная цель оптимизации заключается в уменьшении числа
кривых, используемых для формирования объекта (напомним, что
Flash - это векторный редактор, и создаваемые с его помощью изображения - это не что иное, как некоторое сочетание кривых). Благодаря оптимизации можно убить сразу двух зайцев: сделать более правильными контуры объекта и уменьшить размер Flash-фильма.
Для оптимизации объекта требуется выполнить следующие действия:
92
1.
Выбрать объект, подлежащий оптимизации (выбрать можно весь объект, заливку, контур или часть контура).
2.
Выбрать команду Modify  Shape  Optimize (Оптимизировать).
3.
В открывшемся диалоговом окне с помощью ползункового
регулятора выбрать уровень оптимизации, а также два дополнительных параметра, первый из которых определяет способ проведения
оптимизации, а второй - необходимость информирования пользователя; значения обоих параметров выбираются с помощью флажков:
 если установлен флажок Use Multiple Passes (Использовать
последовательную оптимизацию), то операция оптимизации автоматически повторяется до тех пор, пока это возможно;
 если установлен флажок Show Totals Message (Показать итоговое сообщение), то после «оценки ситуации» Flash выведет на
экран сообщение о возможности оптимизации и ее эффективности.
Тестирование анимации. Публикация фильма
Тестировать активный документ в рабочем окне можно с помощью
команды Control  Play. Но при этом нужно помнить о ряде ограничений, которые не позволяют адекватно оценить, созданный фильм (например, анимация, заложенная в символах в рабочем окне проигрываться не
будет). Поэтому гораздо удобней тестировать фильм в окне воспроизведения. Для этого выполните команду Control  Test Movie. В открывшемся
окне будет воспроизведен ваш фильм целиком. Закрыв окно воспроизведения, вы попадете назад в рабочее окно документа.
Рабочий документ Flash имеет расширение fla. Это внутренний
формат Flash и он сохраняет файл в том виде, в котором вы его создаете (т.е. со всеми слоями, объектами, автоматическими анимациями и
т.д.). Для того чтобы просматривать созданный фильм или использовать его на Интернет-страницах, презентациях и т.д. необходимо сохранить его в другом формате. Возможно сохранение фильма в формате SWF. Этот векторный файловый формат широко используется
при создании фильмов компьютерной анимации благодаря поддержке
интерактивных и звуковых эффектов, а также редактируемой текстовой информации. Кроме того он доступен для использования многими обозревателями, что позволяет вставлять фильмы в web-страницы,
GIF (возможно как сохранение статичной информации, так и анимации), JPEG, PNG (только статичный кадр), MOV, EXE.
При выполнении команды File  Publish (Файл  Публикация)
содержимое активного документа сохраняется в файлах тех форматов,
93
которые были предварительно заданы командой File  Publish Setting…
(Файл  Параметры публикации…). В результате могут быть сформированы файлы анимационной Web-страницы, одного или нескольких
фильмов, а также изображений отдельных кадров. Эти файлы буду помещены в ту папку, к которой последний раз обращалась программа при выполнении операции открытия или сохранения документа.
Нам будут, пожалуй, интересны только два формата SWF и GIF.
Для того чтобы настроить параметры сохранения выполните команду
Файл  Параметры публикации…. Поставив галочки напротив
соответствующих форматов, можно изменить параметры сохраняемых файлов. На вкладке SWF можно выбрать версию Flash-плеера и
версию ActionScript, для которых будет сохранен файл. На вкладке
GIF можно указать будет ли это анимация или статичный кадр, выбрать размер файла (в пикселах), выбрать палитру и т.д.
Практическая работа «Создание простого Web – сайта»
Рассмотрим порядок работы над созданием простого Web – сайта.
Под простым сайтом будем понимать интерактивный фильм, удовлетворяющий следующим требованиям:

Проект должен включать не менее 5 тематических разделов, снабженных системой навигации, позволяющей осуществлять
переходы от одного раздела к другому.

Проект должен быть выдержан в едином стиле и содержать
общую идею. Необходимо уделить внимание композиционному и
цветовому решению в сочетании с информационной составляющей.

Проект должен корректно функционировать и иметь законченный вид в плане визуального оформления и информационного
наполнения.

Все разделы проекта должны содержать разные динамические элементы (анимированные заставки, декоративные эффекты, интерактивные элементы и т.д.), характер которых отражает назначение
раздела.

Не допускается использование полностью статичных страниц/экранов или страниц, отличающихся друг от друга только текстовой информацией и/или набором статичных картинок.
Организация навигации по проекту средствами ActionScript
Навигация может осуществляться либо посредством перехода
между сценами с использованием функций выбора кадра
(gotoAndPlay(), gotoAndStop()), либо путем загрузки внешних доку94
ментов SWF в стек документа с использованием функции
loadMovie(). Оба этих способа будут подробно рассмотрены ниже, в
примере разработки проекта «Анимация и программирование во
Flash».
Пример разработки проекта
«Анимация и программирование во Flash»
Порядок работы над проектом
1. Продумать тематику и структуру проекта, нарисовать макет.
2. Все нужные файлы: стартовую страницу (start.fla); графические
и текстовые файлы; файлы SWF, которые будут загружаться с использованием функции Load External Movieclip помещать в процессе
создания в одну папку. Для удобства все файлы должны иметь короткие осмысленные имена.
Рис. 54 Стартовая страница проекта
3. Сделать стартовую страницу больше по размеру, чем стандартные файлы фильмов, например, 640*480.
4. Разнести элементы стартовой страницы по слоям – текстовые
надписи на одном слое, кнопки на другом, на самом нижнем слое –
фон. В самом верхним слое должен размещаться символ – прямоугольник, стандартного размера рабочего поля фильма Flash, в который будут загружаться фильмы - примеры. Нарисуйте его инструментом «прямоугольник», контуром цвета фона вашей страницы без за95
ливки, преобразуйте в символ - клип. Разместите так, чтобы над
клипом была видна заставка всего проекта, сбоку меню. Хотя можно
этот символ растянуть на весь экран. Обязательно дайте ему имя.
Например, okno. Для этого введите его в поле Instanse Name инспектора свойств. Чтобы легче было разместить этот символ-клип, используйте направляющие.
5. Для того чтобы по щелчку на кнопке загружался и проигрывался внешний фильм, нужно:
- выделить кнопку;
- выбрать в меню Window  Behaviors, потом щелкнуть по
кнопке с плюсом, выбрать MovieClip  LoadExternal MovieClip,
затем в верхнем поле ввести имя загружаемого файла (если он лежит
в одной папке со стартовой страницей, можно не указывать полный
путь к файлу, но файл должен иметь формат SWF). Наконец, в нижнем - выбрать символ - клип-прямоугольник (в нашем случае okno).
Вернуться опять к титулу можно двумя способами (в том и другом
случае используется команда Выгрузить клип (Unload Movieclip):
- На загружаемом документе предварительно создать кнопку и
«повесить» на нее такой код: Window  Behaviors, потом щелкнуть
по кнопке с плюсом, выбрать MovieClip  Unload Movieclip. При
этом в верхнем поле будет написано this, что означает что выгружаем
именно тот фильм, в котором мы создали кнопку, во втором поле может быть написано либо одно слово _root, либо, если наш файл содержит несколько символов – клипов, могут быть после _root перечислены их имена. Мы выбираем _root, это значит выгрузить все.
- Кнопку выгрузки символа – клипа создать на титульном листе,
также выбрать Window – Behaviors, потом щелкнуть по кнопке с
плюсом, выбрать MovieClip – Unload Movieclip, в открывшемся окне
в верхнем поле будет написано This (так и оставить), в нижнем поле
выбрать Okno. Это значит, что при нажатии на эту кнопку будет выгружаться загруженный фильм (поэтому мы не вводим конкретное
название, любой фильм) из символа –клипа okno; если бы мы выбрали _root, выгрузился бы не только загруженный внешний файл, а весь
наш проект целиком.
Важное замечание: после выполнения вышеуказанных действий вы можете увидеть, что при проигрывании внешнего файла
видны те кнопки и надписи на титуле, которые вы там разместили.
Это происходит, если у загружаемого фильма нет непрозрачного фонового слоя. Чтобы кнопки и надписи не были видны, можно либо
96
добавить непрозрачный фон к загружаемым фильмам, либо выучить
язык ActionsScript и воспользоваться его возможностями: в программном коде кнопки добавить команду, которая изменит свойства
символа - клипа okno и сделает его непрозрачным.
Можно также загружать внешний файл в другой кадр и, закончив просмотр, возвращаться опять в первый кадр. При этом внешний
файл может проигрываться на полном экране, а не в области, ограниченной нашим прямоугольником. Можно загружать фильм в другую
сцену. Таким образом в моем проекте загружается игра «Угадай-ка».
97
Рис.55 Раздел Справочные материалы
6. Теперь создаем меню в центре: Справочные материалы,
Список литературы и ресурсов Интернет, Полезные советы,
Помощь учителю.
При создании меню справочных материалов создается несколько
кнопок, по щелчку на каждой мы будем переходить в другой кадр фильма. Для первого кадра нужно сделать останов (выбрать действие Stop).
Чтобы добавить останов в 1 кадр, выделите слой «действия», в этом слое
выделите 1 кадр, откройте панель Actions и напишите stop ( ) ;.
а) Создать кнопку без надписи в виде прямоугольника (надпись
добавится потом инструментом Текст), назвать ее btnmenu.
Замечание:
Можно, конечно, использовать и готовые кнопки из библиотеки.
Если на ней есть какая-то надпись, ее можно изменить: поместите
кнопку из библиотеки на титул и сделайте двойной щелчок мышью.
Вы перейдете в режим редактирования кнопки. Измените текст
надписи на кнопке. Чтобы добавить еще одну кнопку, такую же, но с
другой надписью, в панели Library щелкните правой кнопкой мыши
по вашей кнопке и выберите команду Duplicate. У вас в библиотеке
98
появится еще одна кнопка, точная копия первой, имя вам будет предложено ввести. Перенесите экземпляр дублированной кнопки на титульный лист, теперь вы можете поменять надпись на ней.
б) 4 экземпляра этой кнопки разместить в центре, каждому экземпляру дать имя, для каждой создать код: выбрать команду
Window  Behaviors, потом щелкнуть по кнопке с плюсом, выбрать
MovieClip  Go to and Stop at Frame or Label, в списке клипов
выбрать самый верхний (_root) (т.е. весь фильм). Для первой кнопки
переход в кадр 2, для второй - в 3, для третьей –4, для четвертой - в 5.
в) На каждой кнопке сделать надпись инструментом Текст.
г) В каждом слое продолжить анимацию, если необходимо,
нажав клавишу F5.
д) Перейти в 2 кадр, и оформить его – удалить ненужные текстовые надписи и кнопки, можно оставить заголовок.
е) Чтобы разместить гиперссылки на конкретные документы с
текстами справок:
- предварительно сохраните текстовые документы в формате
.htm, воспользовавшись программой Word или любым другим редактором Web-страниц;
- напишите с помощью инструмента Текст сам текст ссылки и
выделите его;
- в инспекторе свойств в поле Url link напишите название одного из подготовленных документов, например, zvuk.htm. Напоминаем,
что этот документ должен лежать в той же папке, где и стартовая
страница проекта.
Не забудьте создать кнопку для возвращения на главную страницу, назначив ей код Go to and Stop at Frame or Label с переходом
в кадр 1.
7. Остальные меню (Список литературы и ресурсов Интернет,
Полезные советы, Помощь учителю) – делаем аналогично, т.е. по
щелчку на пункте меню должен быть переход в другой кадр (или
сцену).
8. Для игры «Угадай – ка» создана анимированная кнопка,
в остальном все действует также, как и кнопки с примерами фильмов.
Игра загружается в другую сцену. Чтобы добавить вторую сцену, выберите в меню Window  Other Panels  Scene. Откроется
панель, в правом нижнем углу у нее 3 кнопки: сделать дубликат сцены, добавить сцену, удалить сцену. Нажимаем на первую кнопку
(Duplicate scene), у нас появляется Scene 1 Copy, переименуем ее в
99
Scene 2. В первом кадре второй сцены сделать останов, и удалить все
слои, кроме окна. Чтобы переходить от сцены 1 к сцене 2, пользуйтесь кнопкой Edit Scene в верхнем правом углу рабочего поля
, либо панелью Scene. Обязательно нужно задать метку
первому кадру второй сцены (у меня rrr) и первому кадру основной
сцены (у меня ppp). Для этого выделите кадр на шкале времени, и в
инспекторе свойств в поле <Frame Label> напишите «rrr» или «ppp».
С помощью метки кадра мы сможем обращаться к нему не по порядковому номеру, а по собственному имени.
Тогда чтоб загрузить игру, кнопке назначить код с помощью панели Window  Behaviors: нажав на кнопку с плюсом, выбираем
Movieclip  Go to and Play at Frame or Label, и в самом нижнем
поле (где нужно ввести номер кадра или метку) пишем «rrr». Затем
еще раз нажимаем на кнопку с плюсиком, выбираем Movieclip 
Load External Movieclip и верхнее окошко записываем название
файла игры.
Сдвиньте окно в левый верхний угол, чтобы свободное место
было справа и внизу.
Чтобы в любой момент можно было вернуться в основной документ, создайте кнопку «меню», такую же, как в примерах фильмов, в
первом кадре второй сцены стартовой страницы и назначьте ей код –
переход на кадр с меткой ppp.
Точно так же в это же самое место будет загружаться интерактивное резюме (кнопка «об авторе»).
Приложение
Вопросы и задания для самоконтроля:
1.
В чем заключается отличие векторной графики от растровой?
2.
Какие инструменты рисования не имеют модификаторов?
3.
С помощью каких инструментов можно изменять форму
линий и контуров?
4.
Какие инструменты применяются для работы с цветом?
5.
Какие инструменты применяются для рисования?
6.
Из каких составляющих состоит Flash-технология?
7.
Какие механизмы Flash предусмотрены для анимирования
объектов?
100
8.
Что подразумевается под интерактивностью?
9.
Какие инструменты используются для выбора объектов?
10. Чем отличается покадровая анимация от автоматической?
11. Что такое покадровая анимация?
12. Что такое автоматическая анимация?
13. Как управлять режимами просмотра кадров?
14. Как создается анимация движения?
15. Как создается автоматическая анимация трансформации
объекта?
16. Для чего нужны узловые точки формы?
17. Что такое слой?
18. Как создать и удалить слой?
19. Какие атрибуты имеют слои?
20. Какой слой называется направляющим?
21. На основе, каких типов объектов слоя может быть создана
маска?
22. Как производится анимирование маски?
23. Для чего используются папки слоев?
24. Какие операции можно выполнять с текстом?
25. Как создается и редактируется текст?
26. Какие бывают типы текстового поля?
27. Какие виды текста существуют во Flash?
28. Что такое динамический текст?
29. Для чего нужен редактируемый текст?
30. Для чего применяется статический текст?
31. Что такое символ?
32. Какие типы символов существуют?
33. Какие способы создания символов существуют?
34. Как производится редактирование символов?
Практические задания для самоконтроля
Тема: «Рисование в средеFlash»
Все рисунки создавайте в одном кадре. Создав рисунок, сгруппируйте его, уменьшите размер. Создав все рисунки, расположите их
на рабочем поле. Сохраните свою работу в файле с именем, состоящим из вашей фамилии, в папке Общая.
Звезда. Нарисуйте прямоугольник, с помощью инструмента
СТРЕЛКА получите прямоугольный треугольник. Скопируйте его,
копию раскрасьте в другой цвет и отразите слева направо командой
Modify – Transform – Flip Horisontal. Соедините два треугольника в
один и сгруппируйте. Переместите центр фигуры вниз. C помощью
101
панели Transform получите 5 лучей, задав угол поворота 72 градуса.
Нарисуйте сбоку закрашенный круг и наложите на звезду. Сгруппируйте объекты. Сделайте 2 копии звезды, уменьшите их и наложите
друг на друга.
Цветок. Нарисуйте прямоугольник, с помощью инструмента
СТРЕЛКА получите лепесток цветка. Сгруппируйте его. Переместите
центр фигуры вниз. На панели Transform задайте угол поворота 36
градусов. Щелкайте по кнопке Copy and Apply Transform, пока не получится цветок. Нарисуйте серединку цветка. Все сгруппируйте.
Роза. Выберите инструмент ПРЯМОУГОЛЬНИК, режим PolyStar. Задайте число сторон =8, стиль Polygon. На панели Transform задайте угол поворота 25 градусов, масштаб 90% (цифры примерные,
можно поэкспериментировать с другими значениями). Центр фигуры
смещать не надо. Щелкните по кнопке Copy and Apply Transform, пока результат вас не удовлетворит. Можно сделать цветок с более
плотной или менее плотной серединой.
Букет. Нарисуйте цветок и сгруппируйте его. Переместите вниз
центр фигуры. Задайте уменьшение масштаба, например 75%. Угол
вращения любой, например 60 градусов. Теперь при каждом щелчке
по кнопке Copy and Apply Transform на панели Transform копии будут
уменьшаться в соответствии с заданным узором, располагаясь при
этом по спирали, т.к. центр фигуры мы сместили вниз.
Звездное небо. Нарисуйте месяц, накладывая друг на друга 2
овала и удаляя затем верхний. У получившегося месяца восстановите
контур инструментом ЧЕРНИЛЬНИЦА. Нарисуйте звезду с отверстием в центре, накладывая маленькую звезду на большую и удаляя
затем заливку маленькой звезды. Скопируйте ее, с помощью инструмента ТРАНСФОРМАЦИЯ измените размер и форму. Нарисуйте фон
кистью, используя режим Paint Behind.
Солнце в облаках. Нарисуйте солнце, закрасьте его радиальной
заливкой. Инструментом КАРАНДАШ нарисуйте несколько облаков,
залейте их градиентными заливками разных оттенков, расположите
градиенты в разных направлениях (т.е. цвета меняются слева направо,
сверху вниз, по диагонали). Сгруппируйте каждый объект, расположите их так, чтобы одно из облаков заходило за солнце, другое было
перед ним. Нарисуйте фон кистью, используя режим Paint Behind, созданным вами градиентом.
Улица. Нарисуйте отдельно дом и дерево. Сгруппируйте каждый объект и скопируйте. Копию домика отразите по горизонтали и
102
измените размер. Разместите объекты так, как показано на рисунке.
Инструментом ЛИНИЯ нарисуйте дорогу, уходящую вдаль. Добейтесь того, чтобы возникло ощущение перспективы.
Тема «Создание анимации»
Создайте анимационный фильм по следующему сценарию:
1. Поляна. На поляне деревья и нераспустившийся цветок.
Сумрак. Из-за горки медленно-медленно поднимается солнышко
(зевает и трет глаза). Поднимается по дуге. Вот оно поднялось и
улыбнулось. Сразу же начинает светлеть. Бутон распускается и превращается в прекрасный цветок.
2. Городская улица. На крышу одного из домов садиться
летающая тарелка и из нее выходит Нечто. Нечто летит по улице
(мигает разными цветами и меняет форму). Приземляется на тротуар
и медленно превращается в автомобиль.
3. Зима. Пасмурно. Во дворе стоит снеговик. Вдруг тучка улетает и появляется солнышко (солнышко с лучиками и вращается). Снеговик начал медленно таять. Вот уже вместо снеговика осталась лишь
лужа с ведром и морковкой.
4. Проиллюстрировать смену времен года. Крупным планом
ветка, на ней несколько листиков. Вот постепенно они начинают желтеть. Дует ветер, идет дождь (листочки колышутся), ветер срывает их
и уносит вдаль. Идет снег. На ветках появляются сугробы. Снег прекращается. Сугробы начинают таять. Появляются почки. Из почек
медленно появляются листья (последний кадр совпадает с первым).
Литература
1.
Альберт Д., Альберт Е. Самоучитель Flash Professional 8.
–СПб: БХВ-Петербург, 2006.
2.
Прохоров А. Изучаем Macromedia Flash. //Компьютер – пресс.
2003. -№12.
3.
Гурвиц М., Мак-Кейб Л. Использование Macromedia Flash MX.
- Москва – Санкт-Петербург – Киев: Издательство Вильямс, 2003.
4.
Уотролл Э., Гербер Н. Эффективная работа: Flash MX.
–СПб: BHV – Питер, 2003.
5.
Андерсон Э., Лима М., Джонсон С. Визуальный курс
Macromedia Flash MX 2004. –М.: НТ Пресс, 2005.
103
6.
Финкельштейн Э., Лит Г. Flash 8 для «чайников». М.:
Диалектика, 2006.
7.
Стрелкова Л.М. Flash MX первые шаги. М.: Интеллект –
центр, 2004.
8.
Боршуляк М.П. Программа Flash 5. Учебное пособие. М.:
Дрофа, 2005.
9.
Борисенко А.А. Flash 8. Просто, как 2*2. М.: Эксмо, 2006.
10. Павлова И.М., Власова Н.Г. Makromedia Flash MX в модулях. //Информатика в школе. 2006. -№3.
Ресурсы Интернет
http://www.flashblog.ru - Flash Blog – все о технологии Adobe
(Macromedia) Flash.
http://www.kv.by/index2006041103.htm - Компьютерные вести
On-line. Flash 8 – уроки рисования.
Содержание
Введение………………………………………………………………...
Компьютерная графика и анимация……………………………….
I.
II. Знакомство с программой Macromedia Flash……………………...
Общая схема создания Flash – фильмов………………………………
Последовательность действий при создании Flash – фильма……….
Интерфейс программы Flash…………………………………………..
III. Рисование в среде Macromedia Flash……………………………….
Инструмент Selection (Стрелка или Выделение)…………………….
Инструмент Pencil (Карандаш)………………………………………..
Инструмент Line (Линия)……………………………………………..
Инструменты Oval (Овал) и Rectangle (Прямоугольник)……………
Инструмент Brush (Кисть)……………………………………………..
104
3
4
7
7
9
11
13
15
15
17
19
20
Инструмент Paint Bucket (Заливка)……………………………………
Практическая работа «Создание простых векторных рисунков»…...
Различные способы трансформирования объектов………………….
Практическая работа «Создание рисунков с использованием
различных преобразований графических объектов»…………….
Управление цветом…………………………………………………….
Создание и редактирование градиента……………………………….
Инструмент Gradient Transform (Преобразование заливки)………...
Практическая работа «Создание и редактирование градиента»
Библиотеки……………………………………………………………...
Использование импортированной графики…………………………..
Использование растровой графики в качестве заливки……………..
Работа с импортированным изображением. Разбивка изображения…......
Трассировка изображения……………………………………………..
Слои……………………………………………………………………..
Работа с текстом………………………………………………………..
Применение графических преобразований к тексту…………………
Практическая работа «Применение графических
преобразований к тексту»……………………………………………
IV. Анимация в среде Macromedia Flash……………………………….
Типы кадров…………………………………………………………….
Команды для работы с кадрами……………………………………….
Типы анимации…………………………………………………………
Ручная (покадровая) анимация………………………………………..
Практическая работа «Создание фильма с покадровой анимацией»
Символы………………………………………………………………...
Практическая работа «Создание символа – клипа
и использование его во множественных экземплярах»………….
Вложенная анимация…………………………………………………..
Практическая работа «Создание символа – клипа с вложенной
анимацией»…………………………………………………………….
Автоматическая анимация……………………………………………..
Анимация движения……………………………………………………
Порядок создания автоматической анимации движения……………
Практическая работа «Создание фильма с автоматической
анимацией движения»………………………………………………..
Практическая работа «Анимация текста»………………………...
Движение объекта по траектории……………………………………..
Практическая работа «Создание фильма с движением
по траектории»………………………………………………………...
Анимация формы……………………………………………………….
Порядок создания анимации формы………………………………….
20
21
26
28
31
32
33
35
37
38
39
39
42
44
46
46
47
49
49
50
50
51
52
53
55
57
58
58
59
59
60
63
65
66
68
68
105
Анимация формы с метками анимации……………………………….
Практическая работа «Создание фильма с автоматической
анимацией формы»…………………………………………………...
Работа с маскирующим слоем…………………………………………
Практическая работа «Создание фильма с использованием
маскирующего слоя»………………………………………………….
V. Добавление к фильму интерактивности…………………………...
Символы – кнопки……………………………………………………...
Создание простой кнопки……………………………………………...
Добавление к кнопке символа – клипа………………………………..
Практическая работа «Создание анимированной кнопки»…….
Работа со звуком………………………………………………………..
Добавление звука к кнопке…………………………………………….
Практическая работа «Создание озвученной электронной
поздравительной открытки»………………………………………...
Использование интерактивных элементов…………………………...
Добавление простого действия к кадру………………………………
Добавление действий к кнопкам………………………………………
Добавление действий к символу – клипу……………………………..
Наиболее часто используемые действия……………………………...
Использование поведений……………………………………………..
Практическая работа «Создание интерактивного резюме»…….
VI. Создание интерактивных документов типа «Web – сайт»
и презентаций………………………………………………………….
Общие правила создания сайтов………………………………………
Особенности создания сайтов в программе Flash……………………
Правила создания презентаций………………………………………..
Особенности создания презентаций с помощью программы Flash…
Оптимизация фильма…………………………………………………..
Тестирование анимации. Публикация фильма………………………. 90
Практическая работа «Создание простого Web – сайта»……….. 91
Организация навигации по проекту средствами ActionScript………. 91
Пример разработки проекта «Анимация и программирование во Flash»... 92
Приложение. Вопросы и задания для самоконтроля………………... 97
Литература……………………………………………………………... 100
106
69
69
70
71
72
73
73
74
74
74
76
77
78
78
79
80
81
83
84
87
87
88
88
89
89
Ирина Эдуардовна Широкова
Создание анимации в программе
Macromedia Flash. Основы Flash – технологий. Учебно-методическое
пособие.
Компьютерная верстка и макетирование Душутин В.К., РИО ИИПКРО
_____________________________________________
Подписано в печать 26.12.08 Формат 60х90 1/16. Объем 6,5 п.л.
Гарнитура Times New Roman/ Печать RISO. Бумага писчая. Тираж 100 экз.
ООО «Оттиск» 664003, г. Иркутск, 5-й Армии, 26.
3
4
Автор
irina.shir
Документ
Категория
Методические пособия
Просмотров
550
Размер файла
3 261 Кб
Теги
Учебно-методическое пособие, компьютерная графика
1/--страниц
Пожаловаться на содержимое документа