Создаем анимацию. Временная шкала (линия). Ключевые кадры. Создание новых кадров. Анимация формы. Анимация движения.
(статья адресована учителям (и не только), начинающим работать со средой разработки Adobe Flash)
Прежде всего, запустите Flash9 и создайте флэш файл ActionScript3. Сохраните его под каким нибудь именем (должен получиться файл с расширением .fla,
animat1.fla, например). Поскольку мы будем создавать анимацию на временной шкале, нужно сразу установить скорость воспроизведения будущего флэш-ролика.
Для этого, на полоске под временной шкалой дважды щелкните по надписи
12 кадр и в открывшемся окне установите скорость воспроизведения
в 25 (или 30) кадров в секунду. Если вы не видите временной шкалы, откройте ее, одновременно нажав
Ctrl+Alt+T.
(Повторное нажатие приведет к исчезновению окна временной шкалы).
На временной шкале при создании нового файла по умолчанию будет один слой
с названием
Слой 1, с одним пустым
ключевым кадром. Пустой кдючевой кадр выглядит как бесцветный прямоугольник с пустым кружком.
Сверху шкала имеет разметку с градацией по 5 кадров. На разметке виден указатель кадров (красного цвета) с вертикальной полоской.
Ключевой кадр — это кадр, в котором можно рисовать или располагать экземпляры библиотечных символов (а также, располагать программный код, но это потом).
Существуют (в отличие от ключевых) и просто
кадры, в которых что-то нарисовать или расположить не удасться. Они отображаются на временной
шкале как прямоугольнички без кружка. Щелчком мыши кадры можно выбрать, при этом выбранный маркер кадра становится черным. Выберите первый ключевой
кадр и инструментом
кисть нарисуйте что нибудь на рабочем столе. Вы заметите , что кружок в маркере кадра стал черным.
Создание новых кадров.
Щелкните правой кнопкой мыши на 25 кадре временной шкалы и выберите в открывшемся меню
вставить ключевой кадр. На 25 кадре временной шкалы появится
маркер с черным кружком. Промежуток между ключевыми кадрами заполняются серыми маркерами без кружка — кадрами (неключевыми). В этих кадрах мы не сможем
изменить их содержимое, хотя они и содержат то же самое, что вы нарисовали в первом (ключевом) кадре. В 25-м (ключевом) кадре также находится этот-же рисунок, но
его можно изменять! Нажмите
Ctrl+Enter для тестирования ролика. Вы увилите неподвижную картинку. Закройте окно плеера. Создайте в 50 кадре ключевой кадр.
Затем выделите 25 кадр и сделайте изменеия в рисунке — например, дорисуйте кистью (тем же цветом!) к ранее нарисовонной фигуре что нибудь. Снова протестируйте
ролик (
Ctrl+Enter). Во время воспроизведения ролика вы увидите то же самое, что и в первый раз, но, с периодичностью в 2 секунды промелькнет новое
изображение.
Анимация формы
Теперь создадим анимацию формы. Щелкните на первом кадре правой кнопкой мыши и в открывшемся меню выберите
создать анимацию формы.
Промежуточные (неключевые) кадры окрасятся в зеленый цвет и появится стрелка от 1-го до 25-го кадра. То же самое проделайте и с 25-м кадром. Теперь протестируйте ролик.
После создания анимации формы первый рисунок плавно перетекает во второй (который в 25-м) кадре, а затем, наоборот (вы ведь не изменяли рисунок в 50-м). После достижения
последнего кадра ролик возвращается на первый кадр и воспроизведение продолжается бесконечно (если специально не остановить воспроизведение).
Помните, что анимация формы пригодна только для простых форм, таких как заливки и линии (одно из двух, но никак не линия и заливка одновременно!).
Располагайте в одном слое по одной анимации (слоев может быть много). Изменяться может как форма объекта, так и местоположение на рабочем столе, масштаб,
поворот, искажение, цвет и даже уровень прозрачности (alpha). Для сгруппированных объектов и экземпляров библиотечных символов анимация формы не применима!
Флэш будет выдавать ошибку, а стрелка между ключевыми кадрами примет вид пунктира.
Анимация движения.
Этот вид анимации, в отличие от анимации формы, применяется к сгруппированным объектам и к экземплярам библиотечных символов. Этот вид анимации не поддерживает
изменения формы объекта, но доступны движение по экрану, масштабирование, искажение, поворот, изменение пропорций, степень прозрачности.
Анимация внутри библиотечных клипов.
Создайте новый символ типа фрагмент ролика (нажмите одновременно
Ctrl+F8), назовите его, к примеру,
ball. Откроется окно редактирования символа.
Как видно, у библиотечного символа есть своя временная шкала, а значит, можно создавать анимацию внутри фрагмента ролика!
Нарисуйте правильный круг
(удерживайте при использовании инструмента
овал нажатой клавишу
Shift). Удалите линию контура, чтобы осталась только заливка. Залейте круг
радиальным градиентом, чтобы в центре получился светлый блик. Сгруппируйте получившееся изображение (выделите и нажмите клавиши
Ctrl+G).
Теперь создадим
анимацию прыгающего мяча. Выделите круг и откройте окно свойств (
Ctrl+F3). В окне свойств задайте размеры круга (ширина и высота по 100 пикселей) и
его координаты (X=0, Y=0).
На временной шкале создайте ключевые кадры на отметках 25, 30, 35 и 60. В 25-м кадре выделите круг (а, затем, в 30-м и 35-м)
измените свойство координаты Y на 300. Сместить круги можно было и простым перетаскиванием при помощи инструмента
стрелка или
трансформация,
однако, задавая размеры и координаты, можно добиться точного позиционирования объекта. Как вы уже поняли, наш мяч падает вниз, достигает поверхности в 25-м кадре, слегка
сплющивается до 30-го кадра, расплющивается до 35-го и отскакивает вверх до 60-го кадра. Значит, вам осталось немного сплющить мяч в 30-м кадре. Для этого
выделите мяч инструментом
свободное преобразование, потяните за верхнюю часть рамки, окружившую объект, вниз. Затем расширьте мяч в обе стороны.
Во всех ключевых кадрах создайте анимацию движения (щелкнув правой кнопкой мыши на маркере соответствующего кадра. Маркеры промежуточных кадров приобретут
сиреневую окраску и появятся стрелки. Анимация, почти готова. Почему почти? Мы не учли законов всемирного тяготения. Ведь при падении мяч должен ускоряться,
а при отскоке наоборот, скорость убывает до нуля. Полного соответствия с законами природы мы добиваться, конечно, не будем, но кое-что для улучшения восприятия
сделаем.
Выделите первый кадр. В окне свойств найдите оконце
замедлить с нулем. Щелкнув на галочьке возле оконца, вызовем появление ползунка. В
первом и 25-м кадре задайте значение замедления -100, в 30-м и 35-м кадрах — +100%. Выйдете из режима редактирования символа. На основной сцене удалите
все кадры, кроме первого ключевого (а в нем удалите содержимое рабочего стола). На рабочий стол перетащите из библиотеки символ
ball и расположите его
ближе к верхнему краю. Протестируйте ролик. Как вам это нравится? На мой взгляд, пять кадров на сплющивание и расплющивание — многовато. Войдите в режим
редактирования символа
ball, выделите два промежуточных кадра между 25-м и 30-м ключевыми кадрами и удалите их. То же самое проделайте между центральным
и предпоследним ключевыми кадрами.
Чтобы выделить несколько кадров подряд, щелкните начальный и конечный кадры при нажатой клавише Shift. Щелкнув на выделенных кадрах правой кнопкой мыши,
выберите удалить кадры.
Вы, наверное, обратили внимание на то, что временная шкала основной сцены имеет всего один кадр, но анимация внутри экземпляра
библиотечного символа все равно происходит.
Теперь, давайте создадим анимацию движения на основной сцене, используя наш экземпляр символа
ball. Создайте
ключевой кадр на отметке 250. Выделите первый кадр и создайте анимацию движения. В первом кадре перенесите мяч влево за пределы рабочего стола (ближе к верхнему левому углу),
а в последнем кадре переместите мяч вправо, также за пределы рабочего стола. В окне свойств задайте для него ширину и высоту в 20 пикселей. Протестируйте ролик (
Ctrl+Enter).
Как же остановить воспроизведение ролика? Для этого нужно написать небольшую программу на ActionScript3. Создайте новый слой (щелкните на уже существующем слое правой кнопкой
мыши и выберите
вставить слой). Щелкнув на новом слое правой кнопкой мыши, выберите свойства, где задайте ему имя
action. В принципе, имя слоя может быть любым,
но так уж принято. На этом слое мы и будем писать программный код (а рисовать ничего не будем). Заблокируйте, на всякий случай, нижний слой с анимацией. В последнем кадре
слоя
action создайте ключевой кадр, выделите его и нажмите
F9 на клавиатуре. Откроется
окно дейтсвия (action по английски). Напишите в окне
действия
stop();.
В ActionScript3 существует класс MovieClip, экземпляром которого является как символ ball, так и все его потомки на рабочем столе. Более того,
наш ролик также является объектом класса MovieClip. В классе MovieClip имеются встроенные методы, в частности, stop(); и play();, которые
вызывают остановку и воспроизведение ролика.
Расположенная на последнем кадре основной временной шкалы команда
stop(); остановит воспроизведение
основной сцены, но не остановит поспроизведение сцены мяча! Если бы мы расположили в последнем кадре мяч в области видимости, мы бы убедились, что мяч продолжает
прыгать на месте несмотря на то, что воспроизведение основной сцены приостановлено.
Чтобы остановить воспроизведение экземпляра библиотечного клипа, ему нужно
задать имя. Снимите блокировку с нижнего слоя. Выделите первый кадр, а в нем мяч. В окне свойств задайте мячу имя, например
ball1. Сделайте то-же самое и в
последнем кадре (имя тоже
ball1. Если бы вы задали имя до создания завершающего кадра, это произошло бы автоматически). Блокируем слой с мячом. Выделив
последний кадр на слое
action, нажимаем F9 и дописываем
ball1.stop();
Каждое выражение в ActionScript3 должно заканчиваться точкой с запятой. Новое выражение лучше начинать с новой строки — так код
лучше читается.
Разберем строку кода
ball1.stop();. Так мы вызываем метод
stop() объекта
ball (пишется имя объекта, а через
точку без пробела — его метод или свойство).
Что такое методы и свойства, мы разберем позднее, а на сегодня, я думаю,
достаточно.
Евсеев Владимир, 11.11.2010
