Занятие 8 - volsk-sch17.edusite.ru

Анимация во Flash
Анимация в Macromedia Flash - это последовательность изображений (кадров), при
последовательном просмотре которых возникает иллюзия движения или изменения свойств
объекта.
Существует два принципиально разных способа анимации:
1. Первый - прорисовывать или импортировать растровую графику в каждый кадр, и
используя Flash в качестве средства, позволяющего быстро пролистывать изображения,
просмотреть фильм. Это покадровая анимация.
2. Второй - заставить Flash автоматически просчитывать промежуточные кадры между
ключевыми кадрами (keyframes) с основным содержимым, и отстоящими друг от друга на
любое количество кадров. Это твининг (tweening) - анимация движения, свойств или шэйпинг
(shaping) - трансформация формы или свойств объекта, таких, как цвет, прозрачность, яркость и
т.д.
Саму анимацию во Flash можно разделить на несколько типов:

Покадровая анимация.

Расчетная анимация движения (по прямой и по траектории).

Расчетная анимация-трансформация формы.

Расчетная анимация свойств объекта (цвета, прозрачности, яркости).
Для того, чтобы создавать анимации нужно уметь работать со шкалой времени (timeline),
слоями (layers), кадрами (frames) и символами (symbols).
Покадровая анимация
Покадровая анимация - это анимация, полностью составленная из ключевых кадров. В ней вы
сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких
статических кадров будет занимать изображение).
На временной шкале покадровая анимация выглядит следующим образом:
Рис. Покадровая анимация
Достоинства:



Покадровая анимация дает, в некотором смысле, больший контроль над анимацией. Она
позволяет более точно воспроизводить любое изменение.
Это единственный способ организовать смену абсолютно независимых изображений слайд шоу (например, создавая обычный баннер средствами Flash).
И все остальное, для чего возникает необходимость прорисовывать каждый кадр
вручную.
Недостатки:


Покадровую анимацию сложно и долго модифицировать. Особенно, если это не
дискретный набор изображений, а связанная анимация. Приходится модифицировать все
кадры.
Покадровая анимация занимает достаточно большой объем, так как приходится хранить
информацию о каждом кадре.
Шкала времени - Time Line. Основные понятия
Шкала времени является основной панелью для создания и редактирования Flash-фильма.
Когда вы только начинаете создавать Flash-представление, шкала времени первой сцены (Scene
1) содержит один слой (Layer 1) с пустыми (белыми) кадрами.
В конце создания Flash-представления шкала времени каждой сцены может быть многослойной.
Каждый слой будет содержать кадры и скрипты (программами на языке Action Script) и будет
являться отдельным однослойным фильмом.
Воспроизведение Flash-представления (.swf) - это одновременный последовательный (если нет
скриптов перехода) покадровый показ всех таких однослойных фильмов.
Временная шкала - основной инструмент при работе с анимацией во Flash. Если в рабочей
области редактируется графическое содержимое, то в шкале времени фактически пишется
сценарий флэш-фильма.
На ней отображается информация:

о слоях,

о том какие кадры являются ключевыми, а какие генерирует Flash,

с помощью временной шкалы можно понять, какие кадры содержат действия или метки,

она позволяет перемещать ключевые кадры и целые куски анимации.
Основные части шкалы времени:
линейка - она отображает все кадры по возрастающей. Числом отмечен каждый пятый кадр. На
линейке виден красный маркер;
маркер - указывает на текущий кадр, отображаемый в окне. При клике на какой-либо кадр в
слое кадров, маркер автоматически перемещается на него;
указатель шкалы времени - выполняет ту же функцию, что и инструмент Стрелка (Arrow) в
рабочей области. Он выделяет кадр, для последующей с ним работы. Чтобы выделить
конкретный кадр, щелкните по нему левой клавишей мыши. Выделенный кадр темнеет;
слои - слева в шкале времени находится перечень слоев. Под ним существуют кнопки,
позволяющие добавлять и удалять слои;
шкала кадров - поле, где вы можете добавлять и удалять простые и ключевые кадры. Если
вызвать контекстное меню (нажать на правую клавишу мыши) на каком-либо кадре, вы увидите
перечень действий, которые можно совершить.
По тому, что содержится внутри кадра, можно получить информацию о том, что:

кадр является ключевым (такие кадры помечаются черными кружочками),

содержит действия (буква "а"),

содержит метку (красный флажок, после которого идет название метки).
Цвет кадра говорит о его типе:

серый цвет - это кадры, которые в точности повторяют ключевой кадр (keyframe).

синеватая или зеленоватая подсветка говорит о том, что кадры сгенерированы Flash.

белое или "пустое" полосатое пространство говорят о том, что в этих кадрах ничего нет,

темно-синий цвет говорит о том, что кадр выделен.
Кнопки управления тенями - это кнопки, позволяющие отображать соседние кадры как бы
через кальку, чтобы видеть разницу между предыдущими и последующими кадрами. Можно
задавать глубину такого отображения по обе стороны от маркера.
Работа с кадрами
Кадр может быть:
o создан вручную,
o быть сгенерирован программой Flash.
Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то
итоговые "многослойные" кадры, могут содержать различные типы кадров.
Принципиальным является четкое понимание их различия.
Существуют различные типы кадров:

ключевые кадры (черная точка)

чистые ключевые кадры (серый кадр)

пустые ключевые кадры (белый кадр на белом поле)

и кадры могут отсутствовать (видна шкала кадров).
Во Flash-анимации существует важное понятие - ключевые кадры (keyframes). Это кадры,
которые создаются вами, и которые Flash не будет изменять в процессе создания анимации. Вы
создаете эти ключевые кадры, а промежуточные кадры между ними создает Flash.
В анимации существует два типа промежуточных кадров:

кадры, построенные на основе изменения геометрии (shape tweening) (светло-зеленые
кадры) и

кадры, построенные на изменении символов (motion tweening) (светло-сиреневые
кадры).
Кроме того кадр может содержать программу, написанную на языке Action Script, тогда кадр
содержит букву "а", и кадр может содержать метку для удобства программирования, в этом
случае кадр имеет красный флажок, после которого стоит название метки.
Работа с кадрами осуществляется из главного меню, из подменю Insert (Вставить).
Если в шкале времени, нажать правой клавишей мыши на каком-либо кадре, вы увидите
перечень действий, которые с ним можно совершить:
o Create Motion Tween - Начать процесс создания промежутка, заполняемого твинингом
(движение, эффекты, масштабирование, поворот) или трансформацией (искажение
формы)
o Insert Frame- Вставить кадр
o Remove Frames - Удалить кадры
o Insert Keyframe - Вставить ключевой кадр
o Insert Blank Keyframe - Действует аналогично команде Insert Keyframe, но не копирует
содержимое первого ключевого кадра во все остальные
o Clear Keyframe - Убрать свойство ключевого кадра
o Select All - Выделить все
o Cut Frames - Удалить кадр
o Copy Frames - Копировать кадры
o Past Frames - Вставить кадры
o Reverse Frames - Реверс кадров (выстраивание их в обратном порядке)
o Sinchronize Symbols - Синхронизировать символы
o Actions - Отктыть окно для программирования действий
o Panels - Открыть панель Frame (Кадр) или Sound (Звук)
Задание временных параметров фильма
Для задания временных параметров фильма в главном меню выберите Modify
(Модифицировать) - Movie (Фильм). Откроется диалоговое окно Movie Properties
(Свойства фильма).
В поле Frame Rate (Частота кадров) диалогового окна Movie Properties (Свойства фильма)
устанавливается частота кадров фильма в секунду.
Параметр Frame Rate (Частота кадров) определяет скорость и качество воспроизведения
фильма.
Единица измерения fps (frames per second - кадров в секунду).
В этом же окне задается размер сцены (рабочего поля) - Dimension (Wight - ширина, Height высота), а также, цвет подложки (Background Color). В поле Ruler Units задаются единицы
измерения ширины и высоты сцены.
Лучше всего учиться созданию анимаций на конкретных примерах.
Перед созданием анимации сначала необходимо задать размер рабочей области.
Задание размеров рабочей области
Выберите в главном меню Modify (Модифицировать) - Movie (Фильм) или на клавиатуре
последовательно нажмите клавиши Ctrl-M.
В открывшемся окне Movie Properties (Свойства анимации) в строке Dimensions (Размеры) в
полях Width (Ширина) и Heigth (Высота) задайте необходимые размеры:
Формирование оптимальной сцены анимации
Если в самом начале размеры не определялись и по умолчанию размер рабочей области
составлял 550 на 400 px (пикселей), то после создания Flash-ильма для того, чтобы "обрезать все
лишнее" нажмите в окне Movie Properties (Свойства анимации) на кнопку Contents
(Содержимое), предварительно переместив все основное содержимое в левый верхний угол
рабочей области.
Если это фильм, где объекты размещены не только на рабочей области, а и вне нее, размеры
придется подгонять вручную в полях Width (Ширина) и Heigth (Высота).
Пример 1. Покадровая анимация "Дребезг объекта"
Создадим простую покадровую анимацию. Для этого:
1. Создайте новый файл (Ctrl-N).
2. Выберите в главном меню Modify - Movie (Модифицировать - Фильм)
3. В открывшемся окне Movie Properties (Свойства анимации) в строке Dimensions (Размеры)
в полях Width (Ширина) и Heigth (Высота) задайте необходимые размеры: например 120
на 60 пикселей.
4. В панели инструментов Tools (Инструменты) выберите инструмент Text (Текст)
, нажав
на него левой клавишей мыши. Основные модификаторы этого инструмента расположены
в перемещаемой палитре Character (Знак). Быстрее всего вызвать эту панель из строки
состояния (в нижней части интерфейса),
нажав на кнопку вызова этой панели
(третья слева).
5. Выберите в панели Character (Знак) в поле Font (Шрифт) любой шрифт содержащий
кириллицу.
6. Задайте параметры шрифта: размер шрифта, цвет, полужирный и т.д.,
7. Кликните на рабочем поле левой клавишей мыши и в возникшей пустой текстовой метке
наберите текст: например, "ПРИВЕТ". Чтобы снять выделение, кликните левой клавишей
мыши по рабочему полю вне выделения.
8. Создайте следующий ключевой кадр. Для этого:

выделите следующий (или через несколько) пустой кадр в слое, щелкнув по нему
левой клавишей мыши (он окрасится в синий цвет),

и нажмите на клавиатуре клавишу F6. Содержимое предыдущего кадра полностью
скопируется в следующий кадр.
9. Сделайте несколько ключевых кадров подряд, повторив несколько раз пункт 8.
10. Теперь в каждом кадре проведите с текстом какие-нибудь изменения, например,
положение (с помощью перемещаемой палитры Info, задавая координаты X и Y) и цвет
(палитра Character) и т.п.
11. Однократный просмотр анимации – клавиша Enter.
12. Протестируйте анимацию, нажав Ctrl-Enter (просмотр анимации в окне браузера).
13. Сохраните файл, используя команды главного меню File - Save As. (сохраняемый файл
имеет расширение *.fla и значок для файла буквой f.
14. Чтобы можно было созданный фильм просматривать в браузере, его нужно опубликовать
для Web. Для этого:

В главном меню выберите последовательность команд File - Publish Settings
(Файл - Параметры публикации);

задайте параметры публикации, обязательно задав в окне Formats (Формат) типы
генерируемых файлов: (html или swf);

нажмите кнопку Publish (Публиковать) и закройте окно, нажав OK.
Для уже сохраненного *.fla-файла *.swf-файл создается автоматически при
просмотре фильма в браузере с помощью кнопок CTRL+ENTER. На значке swf-файла
– стрелки и солнышко.
Пример 2. Покадровая анимация "Печать текста"
Рассмотрим другую технологию покадровой анимации на примере создания анимированного
заголовка "Внимание, конкурс!".
Создадим иллюзию печати этих слов на печатной машинке. Для этого:
1. Создайте новый файл: в главном меню выберите File - New (Файл - Новый)
2. Выберите в главном меню Modify - Movie (Модифицировать - Фильм)
3. В открывшемся окне Movie Properties (Свойства анимации) в строке Dimensions
(Размеры) в полях Width (Ширина) и Heigth (Высота) задайте необходимые размеры:
например 250 на 60 пикселей.
4. В панели инструментов Tools (Инструменты) выберите инструмент Text (Текст)
,
нажав на него левой клавишей мыши.
5. Выберите в панели Character (Знак) в поле Font (Шрифт) любой шрифт содержащий
кириллицу.
6. Задайте параметры шрифта: размер шрифта, цвет, полужирный и т.д.,
7. Кликните на рабочем поле левой клавишей мыши и в возникшей пустой текстовой метке
наберите букву "В". Чтобы снять выделение, кликните левой клавишей мыши по рабочему
полю вне выделения.
8. Для формирования каждого последующего кадра, в котором будет появляться новая
буква, необходимо выполнить следующие действия:

В шкале времени кликните левой клавишей мыши в следующем (или через
несколько) пустом кадре. (При выделении он станет синим).

В главном меню выберите Insert - Keyframe (Вставить - Ключевой кадр) или
просто нажмите на клавиатуре клавишу F6. В кадре шкалы времени появится
черная точка - ключевой кадр.
Выберите инструмент Text (Текст)
и, если это необходимо, задайте новые
параметры его модификаторов (тип шрифта, размер, цвет и пр.). Для более
быстрого усвоения технологии покадровой анимации будем рассматривать пример
без изменения параметров модификаторов текста.

В рабочей области кликните левой клавишей мыши рядом с предыдущей буквой
внутри текстового блока, как бы продолжая набирать слово.

На клавиатуре нажмите следующую букву.
9. Повторяйте пункт 8, последовательно добавляя по букве в новом ключевом кадре, пока
не будет создана вся анимация. Для анимации такого заголовка потребуется 18 кадров.
10. Протестируйте анимацию:

Нажмите на клавиатуре клавиши Ctrl-Enter.

Просмотрев анимацию, закройте окно
11. Если вас не устраивает скорость показа анимации (в данном случае она равна 120),
измените ее в окне Movie Properties (Свойства анимации):

Выберите в главном меню Modify - Movie (Модифицировать - Фильм) или на
клавиатуре нажмите клавиши Ctrl-M.

В открывшемся окне Movie Properties (Свойства анимации) в поле Frame Rate
(Количество кадров в секунду) измените скорость. Чем меньше число вы
установите, тем медленнее будет воспроизводиться анимация.
12. Если вы хотите, чтобы какое-то время весь текст был виден полностью, необходимо
ввести несколько пустых ключевых кадров, повторяющих содержание последнего 18
кадра. Установите курсор, например, в 25 кадре (под цифрой 25) и нажмите F6.
Будут созданы пустые ключевые кадры (серые кадры), повторяющие содержание 18 кадра,
обеспечивающие его задержку еще в течение 7 кадров. Анимация несколько изменится.
Чтобы увеличить время, в течение которого будет виден 18 кадр, необходимо содержимое
25-ого ключевого кадра переместить вправо. Для этого левой клавишей мыши нажмите на
25-ый ключевой кадр (жирную точку), находящуюся под цифрой 25 в линейке кадров и
не отпуская мыши перетащите кадр вправо. Отпустите левую клавишу мыши.
