laboratornaja_rabota1

Лабораторная работа 1. «Интерфейс программы Flash»

Цель работы: изучение инструментов и интерфейса программы Flash. Приобретение навыков работы с программой Flash.

1.Интерфейс Flash

1.1Окно программы Flash

При первом запуске программы Flash 8 на экране отображается окно программы (рисунок 1). Каждому открытому файлу программы (Flash-фильму) соответствует свой рабочий стол. Программа позволяет одновременно работать с несколькими фильмами. Если фильм не развернут во весь экран, то каждый следующий фильм открывается в своем окне. Это позволяет перемещать графические элементы из одного фильма в другой простым перетаскиванием между окнами. Когда рабочий стол фильма развернут во весь экран, то перейти от фильма к фильму можно, выбрав его название в нижней части меню Windows.

Рис. 1. Окно программы

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

Панель инструментов разделена на четыре области (рис.2).

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

1.2 Временная шкала

Временная шкала (рисунок 3) является важнейшим инструментом Flash 8. Все, что связано с последовательностью создания и воспроизведения кадров анимации, отображается на временной шкале. Она состоит из двух частей. Правая часть временной шкалы предназначена для создания слоев, помещения на них изображений и управления порядком наложения слоев. Левая часть шкалы предназначена для отображения информации об анимации слоев.

Рис. 3. Временная шкала

Для изменения вида ячеек кадров используется меню (рисунок 4), которое вызывается щелчком на кнопке

Рис. 4. Меню временной шкалы

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

2. Создание и использования библиотеки символов

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

Задание: создать графический символ и поместить его в библиотеку символов.

2.1. Символы Flash

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

Различают три основных типа символов:

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

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

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

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

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

2.2. Создание и сохранение символов. Создание статического графического символа

Рассмотрим создание статических графических символов на примере. Создадим символ листа дерева, а потом применим этот единственный символ при создании символа ветки.

1.Нарисуем лист дерева. Выделим его.

2.Выберем команду Convert to Symbol. На экране появится диалоговое окно (рисунок 5).

3.В поле Name (Имя) введем имя символа Лист, а переключатель Туре (Тип) установим в позицию Graphic (Графика). После щелчка на кнопке ОК будет создан графический символ.

Вызовем на экран библиотеку (рис.6) текущего фильма. Для этого можно выбрать команду

Window/Library (окно/библиотека).

Рис. 5. Диалоговое окно Convert to Symbol

Рис. 6. Библиотека

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

Изображение листа осталось в кадре. Теперь оно присутствует в фильме как экземпляр символа. Поместим в фильм еще один экземпляр того же символа. Для этого с переместим изображение листа из окна предварительного просмотра символов в кадр фильма.

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

Если предполагается использовать созданную ветку в фильме несколько раз, ее тоже можно сохранить как символ. Для этого необходимо Последовательно выбрать все элементы, входящие в изображение ветки, и выбрать команду Convert to Symbol/. Имя нового символа появится в списке доступных символов фильма.

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

2.3. Библиотека символов

При подготовке крупного проекта наполнение и правильная организация библиотеки фильма принимает очень важную роль. Панель библиотека имеет два режима отображения. Первый режим (рисунок 6) удобен для выбора и вставки символов в фильм. Второй режим (рисунок 7) лучше

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

Рис. 7. Расширенный режим отображения панели библиотеки

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

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

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

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

2.4. Редактирование символов

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

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

Рис.8. Диалоговое окно для режима редактирования символа

3. Анимация графических объектов посредством программы Flash

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

Задание 1: создать анимационный фильм с использованием покадровой анимации.

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

Задание 3: создать анимационный фильм с использованием направляющего слоя.

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

3.1. Создание анимации движения Motion Tween

Этот пример является ключевым в понимании работы со Flash-анимацией.

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

–в меню Window (Окно) выберите пункт Properties;

–нажмите правую кнопку мыши и в ниспадающем контекстном меню выберите опцию

Document Properties (Свойства документа).

Рис. 9. Диалоговое окно для режима редактирования символа

Рассмотрим настройки документа:
Title (Заголовок клипа) –	указывает заголовок клипа. Он может не совпадать с названием файла.
Description (Описание) –	краткое пояснение данного примера.
Dimension (Размер) – предназначен для установки размера сцены с помощью Width (Ширина)
и Height (Высота).
Background color (Цвет фона) –		для установки цвета фона клипа.
Frame rate (Частота кадров)		– количество кадров, ежесекундно воспроизводимых в окне.
По умолчанию – 12 кадров в секунду.

Riles units (Единицы измерения) – опция содержит раскрывающийся список, в котором можно выбрать наиболее удобные единицы измерения.

2)Используя стандартные элементы панели инструментов (рисунок 10) нарисуем мяч.

3)Воспользуемся инструментов Selection (Выделение) и переместим мяч на самый низ сцены.

Рис. 10. Изображение на первом

Рис. 11. Изображение на десятом кадре

ивосемнадцатом кадрах

4)На десятом кадре Timeline нажмем клавишу <F6> (Insert -> KeyFrame). В результате все кадры окрасятся в серый цвет.

5)Далее нажимаем правую кнопку мыши и в ниспадающем контекстом меню выбираем опцию Create Motion Tween (Создать анимацию движения). Обратим внимание, что серые кадры изменили цвет.

6)Далее выделяем 18-й кадр и еще раз нажимаем клавишу <F6> и снова выбираем опцию Create Motion Tween. В итоге Timeline должна иметь следующий вид (рисунок 12).

Рис. 12. Панель Timeline

7)На данном этапе мяч готов к движению. Выделим мяч с помощью инструмента Selection и переместим его на новое место – вверх сцены (т.е. куда он должен допрыгнуть).

8)На 18-м кадре возвращаем мяч на прежнее место (рисунок 11).

9)Протестируйте клип.

3.2. Использование параметров замедления и увеличения движения Ease

Сейчас кажется неестественным равномерное подпрыгивание мяча. Обычно в начале движения самая большая скорость полета у мяча будет тогда, когда его подбрасывали, а затем скорость будет уменьшаться. И при обратном движении – чем ближе к земле, тем быстрее мяч торопиться вернуться.

Чтобы замедлить или увеличить скорости движения, во Flash существует параметр Ease (Ослабить). Чтобы замедлить или увеличить скорости движения, во Flash существует параметр Ease (Ослабить).

Параметр Ease позволяет регулировать скорость движения, чем больше его значение (максимально 100), чем большую скорость имеет предмет в начале движения и меньшую в конце. Начиная с восьмой версии Flash работать замедлением и ускорением стало проще благодаря диалоговому окну Custom Ease In/Ease Out (настройка замедления/ускорения), которое вызывается по нажатию на кнопку Edit на панели Properties (рисунок 13).

В диалоговом окне Custom Ease In/Ease Out с помощью кривой можно выполнять необходимые настройки. Таким образом, чем меньше угол кривой, тем медленнее движется объект и наоборот, чем больше угол, тем стремительней происходит движение.

Для добавления в клип данного эффекта воспользуйтесь панелью «Properties» и установите значения параметра Ease самостоятельно.

Рис. 13. Настройка диалогового окна Custom Ease In/Ease Out

3.3.Движение по спирали

1)Создадим новый документ spiral с любым фоном.

2)Теперь необходимо создать саму спираль. Можно нарисовать ее во Flash предложенными

стандартными методами типов инструментов Pencil (Карандаш), Pen (Перо) или Brush (Кисть). Но более эффективным кажется способ создания спирали в программе векторной графики. Например, в CorelDraw, где есть специальный инструмент Spiral Tool (Спираль), который позволит за считанные секунды создать спираль со всеми необходимыми параметрами (рисунок 13).

Рис. 14. Спиралевидная фигура

3) Создадим новый слой и нарисуем любое изображение, которому необходимо задать

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

4)Поместим во Flash-клип созданную спиралевидную фигуру через буфер обмена и разместим

еена сцену клипа (на слой Guide Layer 1). Появившаяся фигура будет сгруппирована. Для того чтобы можно было осуществлять ее редактирование необходимо щелкнуть по объекту левой кнопкой мыши и выбрать операцию Break Appart (разбить его на части). Под спиралью, направляющий движение, должен находится слой типа Guided (Направляемый).

Рис. 15. Добавление направляющего слоя

5)Далее необходимо реализовать для созданного объекта анимацию движения Motion Tween. Итак, на первом кадре ключевом кадре курсор находится на самом верху внешней дуги спирали, а на втором ключевом кадре располагается в центре (рисунок 16).

6)Протестируем клип.

Рис. 16. Добавление направляющего слоя

3.4. Анимацию изменения формы графических объектов (Shape tweening)

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

После того как имеются два ключевых кадра, делаем активным первый из них (просто переходим на него), и выбираем на панели Frame (Windows->Panels->Frame, Ctrl+F) в списке Tweening строку Shape (рисунок 17):

Рис 17. Создание анимации типа Shape tweening

Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка (рисунок 18).

Рис 18. Создание анимации типа Shape tweening

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

4. Интерактивная анимация во Flash

Цель работы: научиться создавать интерактивные элементы и применять их к анимационным фильмам, знакомство с элементами языка описания сценариев Action Script.

Задание: Для созданного анимационного фильма (раздел 3) внедрить интерактивный элемент в виде кнопок «Запустить проигрывание клипа» и «Остановить проигрывание клипа».

4.1. Создание и использование кнопок во Flash

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

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

При выборе символа типа «Button» (Кнопка) Flash создает временную диаграмму с четырьмя кадрами. Первые три отображают три возможных состояния кнопки, четвертый определяет активную область кнопки.

Для начала используем кнопки из библиотеки компонентов Flash. Выберите меню Window -> CommonLibraries -> Buttons (рисунок 19):

Рис. 19. Библиотека компонентов

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

Чтобы создать кнопку "с нуля", нажимаем Ctrl+F8 (Insert -> New symbol). Можно поместить в символ кнопки объект (или несколько объектов), уже существующий на сцене. Для этого выделите объект(ы) и нажмите F8 (Insert -> Convert to symbol). В обоих случаях вы увидите окно, изображенное на рисунке 20. В поле "Name" вводится имя символа кнопки. В поле "Type" выбираем Button. Зададим имя кнопки Button _1, выберем Button нажмем ОК.

Рис. 20. Диалоговое окно для создания нового символа