пособие-Flash

Министерство образования и науки Российской Федерации ФГБОУ ВПО «Уральский государственный экономический университет»

Сакулина Юлия Валерьевна

Миронова Людмила Ивановна

Flash-анимация

УЧЕБНОЕ ПОСОБИЕ

Екатеринбург

2013

Сакулина Ю.В. – кандидат педагогических наук, доцент Миронова Л.И. – кандидат технических наук, доцент

Учебное пособие по курсу «Flash-анимация»

Екатеринбург, 2013, 121 с.

© Сакулина Ю.В.,

Миронова Л.И., 2013.

2

	СОДЕРЖАНИЕ
1. Основы работы с редактором Flash .........................................................................................		5
2. Окно Flash...................................................................................................................................		6
3. Панель инструментов ................................................................................................................		7
4. Создание объектов.....................................................................................................................		7
	Контур, обводка, заливка ......................................................................................................	7
	Инструмент Rectangle.........................................................................................................	10
	Инструмент Line .................................................................................................................	11
	Инструмент Pencil ..............................................................................................................	11
	Редактирование линий, инструменты Arrow и Subselect ................................................	12
	Инструмент Brush ...............................................................................................................	14
	Инструмент Ластик ...........................................................................................................	15
	Инструмент Pen (Перо) ......................................................................................................	16
	Инструмент Dropper...........................................................................................................	18
	Инструмент Paint Bucket ....................................................................................................	18
5. Сложение и вычитание фигур ................................................................................................		19
6. Трансформация объектов........................................................................................................		23
7. Модификация фигур ...............................................................................................................		25
8. Привязка объекта к сетке и к другим объектам ...................................................................		26
9. Группировка объектов ............................................................................................................		27
10.	Выравнивание и распределение объектов ..........................................................................	29
	Группа кнопок Distribute (Распределение) .........................................................................	29
	Группа кнопок Match Size (Выровнять размер) ................................................................	30
11.	Работа с цветом......................................................................................................................	32
12.	Перевод растрового изображения в векторное...................................................................	37
13.	Создание статического текста ..............................................................................................	39
	Расширяемый горизонтальный текст ..............................................................................	39
	Статический горизонтальный текст заданной ширины ...............................................	39
14.	Форматирование текста ........................................................................................................	40
	Установка выравнивания, полей, абзацных отступов и межстрочного интервала ...	40
	Редактирование текста .....................................................................................................	40
	Преобразование и разбиение текста.................................................................................	40
15.	Анимационные эффекты.......................................................................................................	42
16.	Покадровая анимация............................................................................................................	43
17.	Работа с кадрами....................................................................................................................	46
18.	Автоматическая анимация....................................................................................................	50
19.	Автоматическая анимация формоизменения......................................................................	56
20.	Автоматическая анимация трансформации объекта..........................................................	57
21.	Использование хинтов в анимации формы.........................................................................	62
22.	Анимация текста....................................................................................................................	63
23.	Движение по заданной траектории......................................................................................	64
24.	Движение по произвольной траектории..............................................................................	65
25.	Управление траекторией перемещения объекта ................................................................	67
26.	Создание символов................................................................................................................	79
27.	Создание кнопок ....................................................................................................................	83
28.	Использование слоя маски ...................................................................................................	87
29.	Основы работы с языком программирования Actions Script.............................................	91
РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА ......................................................................................		119

3

ВВЕДЕНИЕ

Цели усвоения учебной дисциплины (модуля) «Flash-анимация»:

формирование компетенций, направленных на изучение приемов создания компьютерных анимационных фильмов в среде Adobe Flash CS4;

формирование интереса к творческой деятельности в процессе создания Flash-анимированных роликов;

привитие навыков планирования своей работы в соответствии с проектом;

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

работа в группе для достижения общей цели.

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

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

вкачестве инструмента для решения задач, помощника в работе.

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

краткие теоретические сведения по теме;

примеры выполнения заданий;

рекомендации по выполнению упражнений;

демонстрационные материалы.

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

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

4

1. Основы работы с редактором Flash

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

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

В отличие от растровых (точечных) рисунков векторные рисунки описываются математическими формулами и поэтому не искажаются при изменении размеров. На рис.1 слева показаны растровая и векторная окружности одинакового размера, а справа – части этих окружностей при 16-кратном увеличении (красные линии соответствуют векторной фигуре).

Рис.1. Примеры растровых и векторных изображений.

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

Технология Flash позволяет:

создавать анимированные изображения;

строить интерактивные ролики, реагирующие на действия пользователя;

строить сложные динамические меню;

проигрывать видеофильмы.

В то же время она обладает серьезными недостатками:

увеличивается размер Web-страницы, что часто неоправданно;

при проигрывании Flash-роликов сильно загружается процессор;

содержание Flash-роликов не доступно для поисковых систем; не решена проблема анимации объемных фигур.

5

История Flash началась в 1996 г., когда компания Macromedia выпустила продукт под названием Flash. В 2005 г. фирма Adobe купила Macromedia вместе с ее продуктами, включая Flash. Главная новинка – язык создания сценариев ActionScript 3.0, но он не прост для начального уровня, его изучение не входит в задачу нашего курса.

2. Окно Flash

Рис.2. Образец рабочего стола для воспроизведения Flash-фильма.

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

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

6

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

Втабл.1 представлен перечень инструментов, необходимых для создания Flash-фильма.

Таблица 1 – Перечень инструментов для создания Flash-фильма

Arrow (Selection) – стрелка (выделение)

Subselection – частичное выделение

Free transform/Gradient transform – трансформации

Lasso – лассо

Pen – перо, добавить или удалить узел

Text – текст

Line – линия

Rectangle –прямоугольники, эллипсы, многоугольник

Pencil – карандаш

Brush – кисть

Ink Bottle – чернильница

Paint Bucket – заливка

Eyedropper – пипетка

Eraser – ластик

Hand –рука просмотра

Zoom – масштаб

Stroke Color – цвет контура

Fill Color – цвет фигуры (внутренней области)

4. Создание объектов

Контур, обводка, заливка

 Рисование фигур.

1. Выберите инструмент редактирования Oval (Овал) на панели инструментов и нарисуйте овал. Фигура автоматически будет залита цветом.

7

(Если при рисовании овала удерживать клавишу Shift, то рисуемая фигура будет иметь форму окружности.)

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

Рис.3. Кнопка для возвращения удаленных элементов.

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

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

2. Залейте фигуру другим цветом.

Рис.4. Палитра Flash.

Для того чтобы изменить цвет заливки в текущей фигуре, необходимо выбрать новый цвет и воспользоваться инструментом Paint Bucket (Ковш

заливки) .

Цвет обводки тоже можно поменять. Для этого необходимо выбрать ин-

струмент Stroke color (Изменение цвета обводки). После этого от-

8

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

выбрать инструмент Ink Bottle Tool (чернильница) и щелкнуть им по линии обводки. В результате она зальется выбранным цветом (рис.5).

Рис.5. Образец заливки выбранным цветом.

Толщину и стиль линий обводки также можно менять. Для этого необхо-

димо щелкнуть по изображению карандаша кнопки Stroke color

(Изменение цвета обводки).

Рис.6. Панель настройки стиля, толщины и цвета линии обводки.

В ней можно настроить стиль линии обводки, ее толщину и цвет (рис.6). Если выбрать стиль линии Hardline и применить инструмент Ink Bottle

Tool , то получим линию в один пиксел. Линия Hardline (Жесткая линия) не имеет толщины, поэтому в окошке толщины линий значение не появляется.

Более тонкая настройка параметров линии производится на панели Stroke Style (Стиль линии). Вызвать еѐ можно кнопкой (рис.7).

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

9

Инструмент Rectangle

Инструмент Rectangle (Прямоугольник) расположен рядом с ин-

струментом Oval.

Помимо традиционного прямоугольника можно рисовать прямоугольни-

ки со скругленными краями. При выборе инструмента Rectangle (Прямоугольник) на панели Properties (Параметры), появляются счетчики с радиусом скругления (рис.8).

Рис.8. Скругление углов.

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

 Придумайте необычную рамку. Затем создайте произвольный стиль линии (рис.9).

Рис.9. Пример рамки.

 Создайте изображение, представленное на картинке (рис. 10).

Рис.10. Создание фигур.

10