Полезный Free Transform Tool
04.04.2008, автор Stormit, рубрики: Flash игры, Анимация, Игровые баннерыМногие разработчики и аниматоры сильно недооценивают встроенные возможности флэша, а порой просто не знают о них. Одна из таких - инструмент Free Transform Tool. А точнее его подвид Envelope. Наверное все знают его можно применять для изменения формы одного или нескольких объектов. Но мало кто знает, что это можно делать в режиме Edit Multiple Frames. Как же нам это использовать?
Этот способ подходит для создания анимации развевающихся на ветру предметов, испарений, простои интересных эффектов. Фактически это shape tween вдоль кривой!
Для примера я возьмусь сделать развевающийся на ветру флаг. Для наглядности я все шаги обозначил во флешке ниже. Сверяйтесь если что-то не понятно. Также ниже я рассмотрю возможные проблемы:
- Рисуем форму которую будем анимировать.
- Задаем длину анимации, например, 10 кадров. В последнем кадре сдвигаем флаг ровно на его длину (это обеспечит замкнутый цикл). Делаем Shape Tween и далее преводим анимацию в покадровку (выделяем промежуточные кадры и жмем F6).
- Включаем режим Edit Multiple Frames (рядом выбираем Onion All, чтобы захватить все кадры анимации), выбираем инструмент Free Transform Tool и ниже - способ Envelope. Жмем Ctrl+A и придаем деформатору вид как в примере ниже (зеркальность первых и последних маркеров и правильное смещение флага в пункте 2 обеспечит непрерывный анимационный цикл).
- Дальше, не снимая выделеня, выравниваем все по левому краю, чтобы левый верхний угол флага всегда был в одной точке. Последний кадр сейчас почти как первый - удаляем его. Если ошиблись с направлением ветра, делаем Reverse Frames.
- Все, флаг готов.
- Например его можно использовать так.
Теперь о проблемах, которые могут возникнуть: в режиме Envelope передвигаю маркер и анимация сразу искажается. Первое, что нужно сделать - это для всех кадров выполнить Modify – Shape – Straighten, - должно помочь. Еще можно попробовать перетаскивать маркер с клавишей Alt, будет больше действий, но результат может улучшиться. Можно просто нажать Ctrl+Z и попробовать закрутить еще раз, но в другую сторону.
Чтобы лучше показать область применения этого метода, я на скорую руку набросал несколько примеров:
Видно, что прием работает не только с простыми формами, а особый шик приобретает при комбинировании нескольких ссимволов.
P.S. Если в шаге 3 покрутить деформаторы больше чем на 90 градусов, получается еще один интересный эффект
Интересно на 15%
Просто класс! Так держать, коллега.
Хорошо, что есть кто-то, кто находит время (и терпение) писать уроки.
Обязательно напишу о твоём проекте.
Спасибо, буду держать планку
жаль, что многие флешеры недооценивают shape
и зачастую пытаются релизовать не сложные для shape-a задачи с помощью motion или скриптов.
Здравствуйте!
Очень интересный метод анимации! Спасибо, что показали его.
Попробывал сделать по примеру развивающийся флаг. По задумке это должен был быть флаг с логотипом компании (хотел использовать для баннера). Меня удивил вес флага. получилось около 30 кБ. Это нормально или я где-то ошибся?
Не стоит удивляться, получается ведь покадровка. Тем не менее нижняя флэшка с британским флагом весит меньше 9 килобайт.
Посмотри сколько сам логотип весит. Если получается много, попробуй разрядить анимацию (удалить каждый 2-й кадр а оставшиеся кадры растянуть по длительности)
Ну и Modify-Shape-Smooth
Здравствуйте!
Сам логотип, весит всего 1 Кб.
Мне всётаки удалось снизить вес с 30 Кб до 10-ти. Сделал это так.
Изначально размеры флага рисовал не такие, какие нужны были под баннер, а раз в 20 больше. Выполнил все вышеописанные Вами действия. И после выполнения пункта 4, трансформировал его до нужных размеров.
Вот только до сих пор не могу понять, почему такая разница в весе у флага с моей окончательной трансформацией и у флага, который рисовался сразу нужных размеров.
Скорее всего, потому что выполнялась операция Smooth.
По моему для разных размеров она по разному оптимизирует. Например, если в нормальном размере расстояние между точками 1мм, они остаются, а в уменьшенном виде это 0.01мм - программа считает что это слишком близко и глаз все равно ничего не заметит, поэтому они удаляются.
Огромное спасибо за то, что уделили моему интересу к данному вопросу внимание!
И в целом спасибо за Ваш блог!!! Очень много полезного для себя почерпнул. Обязательно буду следить за всеми публикациями!
Та-аак. Флажок анимировать умею. Спасибо автору!
Флаг конечно с программным синусом намного интереснее и по весу меньше будет чем в этом примере. А третий пример с разноцветными мошками очень прикольный:) в который раз убеждаюсь - экспериментировать, экспериментировать и экспериментировать. Флеш это такая глубокая кладезь, что просто голова иногда начинает кружиться от возможностей, и хочется использовать сразу всё:) нажать кнопку “мир-пауза” и творить пару месяцев, потом “мир-плей” и мир - вах!))))
Тогда бы время не ценилось так дорого и все бы работали за еду
Вы приводите несколько примеров, а как сделан второй (тот, что посередине). как работаь не с простыми формами, а с символами? как Вы этот флаг рисовали? это же сивол?
Этот способ работает только с формами. Флаг здесь не символ, а обычный шейп. Я его привёл для примера. что и со сложными формами можно так работать.