Создание анимации в программе Macromedia Flash (стр. 7 )

При выполнении команды File à Publish (Файл à Публикация) содержимое активного документа сохраняется в файлах тех форматов,
которые были предварительно заданы командой File à Publish Setting… (Файл à Параметры публикации…). В результате могут быть сформированы файлы анимационной Web-страницы, одного или нескольких фильмов, а также изображений отдельных кадров. Эти файлы буду помещены в ту папку, к которой последний раз обращалась программа при выполнении операции открытия или сохранения документа.

Нам будут, пожалуй, интересны только два формата SWF и GIF. Для того чтобы настроить параметры сохранения выполните команду Файл à Параметры публикации…. Поставив галочки напротив
соответствующих форматов, можно изменить параметры сохраняемых файлов. На вкладке SWF можно выбрать версию Flash-плеера и версию ActionScript, для которых будет сохранен файл. На вкладке GIF можно указать будет ли это анимация или статичный кадр, выбрать размер файла (в пикселах), выбрать палитру и т. д.

Практическая работа «Создание простого Web – сайта»

Рассмотрим порядок работы над созданием простого Web – сайта. Под простым сайтом будем понимать интерактивный фильм, удовлетворяющий следующим требованиям:

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

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

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

·  Все разделы проекта должны содержать разные динамические элементы (анимированные заставки, декоративные эффекты, интерактивные элементы и т. д.), характер которых отражает назначение раздела.

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

Организация навигации по проекту средствами ActionScript

Навигация может осуществляться либо посредством перехода между сценами с использованием функций выбора кадра (gotoAndPlay(), gotoAndStop()), либо путем загрузки внешних документов SWF в стек документа с использованием функции loadMovie(). Оба этих способа будут подробно рассмотрены ниже, в примере разработки проекта «Анимация и программирование во Flash».

Пример разработки проекта
«Анимация и программирование во Flash»

Порядок работы над проектом

1. Продумать тематику и структуру проекта, нарисовать макет.

2. Все нужные файлы: стартовую страницу (start. fla); графические и текстовые файлы; файлы SWF, которые будут загружаться с использованием функции Load External Movieclip помещать в процессе создания в одну папку. Для удобства все файлы должны иметь короткие осмысленные имена.

Рис. 54 Стартовая страница проекта

3. Сделать стартовую страницу больше по размеру, чем стандартные файлы фильмов, например, 640*480.

4. Разнести элементы стартовой страницы по слоям – текстовые надписи на одном слое, кнопки на другом, на самом нижнем слое – фон. В самом верхним слое должен размещаться символ – прямоугольник, стандартного размера рабочего поля фильма Flash, в который будут загружаться фильмы - примеры. Нарисуйте его инструментом «прямоугольник», контуром цвета фона вашей страницы без заливки, преобразуйте в символ - клип. Разместите так, чтобы над
клипом была видна заставка всего проекта, сбоку меню. Хотя можно этот символ растянуть на весь экран. Обязательно дайте ему имя. Например, 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, выгрузился бы не только загруженный внешний файл, а весь наш проект целиком.

Важное замечание: после выполнения вышеуказанных действий вы можете увидеть, что при проигрывании внешнего файла видны те кнопки и надписи на титуле, которые вы там разместили. Это происходит, если у загружаемого фильма нет непрозрачного фонового слоя. Чтобы кнопки и надписи не были видны, можно либо
добавить непрозрачный фон к загружаемым фильмам, либо выучить язык ActionsScript и воспользоваться его возможностями: в программном коде кнопки добавить команду, которая изменит свойства символа - клипа okno и сделает его непрозрачным.

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

Рис.55 Раздел Справочные материалы

6. Теперь создаем меню в центре: Справочные материалы, Список литературы и ресурсов Интернет, Полезные советы,
Помощь учителю.

При создании меню справочных материалов создается несколько кнопок, по щелчку на каждой мы будем переходить в другой кадр фильма. Для первого кадра нужно сделать останов (выбрать действие Stop). Чтобы добавить останов в 1 кадр, выделите слой «действия», в этом слое выделите 1 кадр, откройте панель Actions и напишите stop ( ) ;.

а) Создать кнопку без надписи в виде прямоугольника (надпись добавится потом инструментом Текст), назвать ее btnmenu.

Замечание:

Можно, конечно, использовать и готовые кнопки из библиотеки. Если на ней есть какая-то надпись, ее можно изменить: поместите кнопку из библиотеки на титул и сделайте двойной щелчок мышью. Вы перейдете в режим редактирования кнопки. Измените текст надписи на кнопке. Чтобы добавить еще одну кнопку, такую же, но с другой надписью, в панели Library щелкните правой кнопкой мыши по вашей кнопке и выберите команду Duplicate. У вас в библиотеке появится еще одна кнопка, точная копия первой, имя вам будет предложено ввести. Перенесите экземпляр дублированной кнопки на титульный лист, теперь вы можете поменять надпись на ней.

б) 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, переименуем ее в 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 предусмотрены для анимирования объектов?

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 помощью панели 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, созданным вами градиентом.

Улица. Нарисуйте отдельно дом и дерево. Сгруппируйте каждый объект и скопируйте. Копию домика отразите по горизонтали и измените размер. Разместите объекты так, как показано на рисунке. Инструментом ЛИНИЯ нарисуйте дорогу, уходящую вдаль. Добейтесь того, чтобы возникло ощущение перспективы.

Тема «Создание анимации»

Создайте анимационный фильм по следующему сценарию:

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.

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. ***** - Flash Blog – все о технологии Adobe (Macromedia) Flash.

http://www. /index.htm - Компьютерные вести On-line. Flash 8 – уроки рисования.

Содержание

	Введение………………………………………………………………...	3
I.	Компьютерная графика и анимация……………………………….	4
II.	Знакомство с программой Macromedia Flash……………………...	7
	Общая схема создания Flash – фильмов………………………………	7
	Последовательность действий при создании Flash – фильма……….	9
	Интерфейс программы Flash…………………………………………..	11
III.	Рисование в среде Macromedia Flash……………………………….	13
	Инструмент Selection (Стрелка или Выделение)…………………….	15
	Инструмент Pencil (Карандаш)………………………………………..	15
	Инструмент Line (Линия)……………………………………………..	17
	Инструменты Oval (Овал) и Rectangle (Прямоугольник)……………	19
	Инструмент Brush (Кисть)……………………………………………..	20
	Инструмент Paint Bucket (Заливка)……………………………………	20
	Практическая работа «Создание простых векторных рисунков»…...	21
	Различные способы трансформирования объектов………………….	26
	Практическая работа «Создание рисунков с использованием различных преобразований графических объектов»…………….	28
	Управление цветом…………………………………………………….	31
	Создание и редактирование градиента……………………………….	32
	Инструмент Gradient Transform (Преобразование заливки)………...	33
	Практическая работа «Создание и редактирование градиента»	35
	Библиотеки……………………………………………………………...	37
	Использование импортированной графики…………………………..	38
	Использование растровой графики в качестве заливки……………..	39
	Работа с импортированным изображением. Разбивка изображения…......	39
	Трассировка изображения……………………………………………..	42
	Слои……………………………………………………………………..	44
	Работа с текстом………………………………………………………..	46
	Применение графических преобразований к тексту…………………	46
	Практическая работа «Применение графических преобразований к тексту»……………………………………………	47
IV.	Анимация в среде Macromedia Flash……………………………….	49
	Типы кадров…………………………………………………………….	49
	Команды для работы с кадрами……………………………………….	50
	Типы анимации…………………………………………………………	50
	Ручная (покадровая) анимация………………………………………..	51
	Практическая работа «Создание фильма с покадровой анимацией»	52
	Символы………………………………………………………………...	53
	Практическая работа «Создание символа – клипа и использование его во множественных экземплярах»………….	55
	Вложенная анимация…………………………………………………..	57
	Практическая работа «Создание символа – клипа с вложенной анимацией»…………………………………………………………….	58
	Автоматическая анимация……………………………………………..	58
	Анимация движения……………………………………………………	59
	Порядок создания автоматической анимации движения……………	59
	Практическая работа «Создание фильма с автоматической анимацией движения»………………………………………………..	60
	Практическая работа «Анимация текста»………………………...	63
	Движение объекта по траектории……………………………………..	65
	Практическая работа «Создание фильма с движением по траектории»………………………………………………………...	66
	Анимация формы……………………………………………………….	68
	Порядок создания анимации формы………………………………….	68
	Анимация формы с метками анимации……………………………….	69
	Практическая работа «Создание фильма с автоматической анимацией формы»…………………………………………………...	69
	Работа с маскирующим слоем…………………………………………	70
	Практическая работа «Создание фильма с использованием маскирующего слоя»………………………………………………….	71
V.	Добавление к фильму интерактивности…………………………...	72
	Символы – кнопки……………………………………………………...	73
	Создание простой кнопки……………………………………………...	73
	Добавление к кнопке символа – клипа………………………………..	74
	Практическая работа «Создание анимированной кнопки»…….	74
	Работа со звуком………………………………………………………..	74
	Добавление звука к кнопке…………………………………………….	76
	Практическая работа «Создание озвученной электронной поздравительной открытки»………………………………………...	77
	Использование интерактивных элементов…………………………...	78
	Добавление простого действия к кадру………………………………	78
	Добавление действий к кнопкам………………………………………	79
	Добавление действий к символу – клипу……………………………..	80
	Наиболее часто используемые действия……………………………...	81
	Использование поведений……………………………………………..	83
	Практическая работа «Создание интерактивного резюме»…….	84
VI.	Создание интерактивных документов типа «Web – сайт» и презентаций………………………………………………………….	87
	Общие правила создания сайтов………………………………………	87
	Особенности создания сайтов в программе Flash……………………	88
	Правила создания презентаций………………………………………..	88
	Особенности создания презентаций с помощью программы Flash…	89
	Оптимизация фильма…………………………………………………..	89
Тестирование анимации. Публикация фильма……………………….	90
Практическая работа «Создание простого Web – сайта»………..	91
Организация навигации по проекту средствами ActionScript……….	91
Пример разработки проекта «Анимация и программирование во Flash»...	92
Приложение. Вопросы и задания для самоконтроля………………...	97
Литература……………………………………………………………...	100

Ирина Эдуардовна Широкова

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

Компьютерная верстка и макетирование , РИО ИИПКРО

_____________________________________________

Подписано в печать 26.12.08 Формат 60х90 1/16. Объем 6,5 п. л.

Гарнитура Times New Roman/ Печать RISO. Бумага писчая. Тираж 100 экз. г. Иркутск, 5-й Армии, 26.