В этом уроке я хочу рассказать начинащим изучать
Flash, как можно сделать красивую анимацию формы на примере цифр. Урок сделан в
Macromedia Flash 8. Начнем с самого главного - анимация формы будет работать
только в том случае, если вы оперируете графическими объектами. Т.е. создав в
нужных ключевых кадрах нужные, в нашем случае текстовые, объекты их нужно
превратить в графические. Итак, начнем. Создаем новый документ, указываем
необходимые параметры (размер, цвет фона, частоту кадров). В моем примере размер
200х200, цвет фона белый, частота кадров 12. Сразу указываем, что в первом
кадре будет происходить анимация формы: на вкладке Properties, в выпадающем
списке Tween, выбираем анимацию формы – Shape. В первом кадре с помощью
инструмента Text Tool, кнопка T, мы пишем цифру 1. Для начала, чтобы было проще,
выберите шрифт без засечек, Arial, Tahoma, Verdana. Далее переходим в 30-й кадр,
нажимаем F6, т.е. создаем ключевой кадр, и редактируем нашу цифру 1, меняем ее
на цифру 2. Здесь тоже есть тонкий момент, если вы просто удалите цифру 1 и
напишете цифру 2, то вы должны установить координаты цифры 2 такие же, как и
цифры 1, чтобы при анимации создался эффект превращения цифр одной в другую.
Если вы будет создавать далее цифру 3, 4 , 5 и далее, то соответственно
координаты всех цифр должны быть одинаковы. С написанием цифр закончили, теперь
их нужно превратить в графические объекты.
Выделяем каждую цифру по очереди и вызвав
контекстное меню правой клавишей мыши выбираем пункт Break Apart, можно так же
нажать комбинацию клавиш ctrl+B либо выбрать пункт Break Apart из меню Modify,
кому как удобнее. Мы превратили цифры в графические объекты.
Теперь вы можете проиграть получившуюся анимацию
с помощью комбинации клавиш ctrl+Enter или просто протянув бегунок по таймлайну.
Но наша анимация не очень красива, превращения цифр одной в другую несколько
«корявые». Давайте улучшим ситуацию. Для этого во Flash есть Shape Hint – это
ключевые точки объекта используемые в анимации. Их можно вставить вызвав меню
Modify – Shape – Add Shape Hint либо с помощью комбинации клавиш ctrl+shift+H.
Точки вставляются в виде маленьких кружочков красного цвета с буквами в центре.
Именуются они по алфавиту: a, b, c , d и т.д. Вставляются они по умолчанию в
центр объекта. Чем больше точек вы установите, тем более плавная анимация у вас
получится. Нажав на точку правую кнопку мыши можно добавить новую точку - Add
Hint, удалить лишнюю точку - Remove Hint и удалить все точки - Remove All
Hint.
Если вы сейчас перейдете на второй ключевой кадр
с цифрой 2, то увидите точно такие же точки красного цвета с теми же буквами в
центре. Теперь нам нужно их установить. Я предлагаю свой вариант, но вы
можете сделать и иначе, т.к. конечных рекомендаций нет, вы выставляете их
сообразуясь с собственным восприятием и вкусом. Смысл точек такой: вы
устанавливаете точку a в каком то месте первого объекта, переходите во второй
объект и так же выставляете точку a в нужном месте. При анимации эти точки
«перетекут» одна в другую. Если все сделано правильно, то точка на первом
объекте станет желтой, а на втором зеленой. На скрине показано размещение по
моему разумению. Ту же операцию проделываем для 2-го, 3-го объекта и т.д. Точек
будет много, аккуратно, не запутайтесь.
Собственно если все сделано правильно, то
проигрываем полученную анимацию с помощью клавиш ctrl+Enter или просто протянув
бегунок по таймлайну и наслаждаемся результатом. Применять можно где и как
угодно, только помните – работает только с графическими объектами. Исходник и
результирущий swf-файл прилагаются.