Полезный 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 градусов, получается еще один интересный эффект
Интересно на 14%
Просто класс! Так держать, коллега.
Хорошо, что есть кто-то, кто находит время (и терпение) писать уроки.
Обязательно напишу о твоём проекте.
Спасибо, буду держать планку
жаль, что многие флешеры недооценивают shape
и зачастую пытаются релизовать не сложные для shape-a задачи с помощью motion или скриптов.
Здравствуйте!
Очень интересный метод анимации! Спасибо, что показали его.
Попробывал сделать по примеру развивающийся флаг. По задумке это должен был быть флаг с логотипом компании (хотел использовать для баннера). Меня удивил вес флага. получилось около 30 кБ. Это нормально или я где-то ошибся?
Не стоит удивляться, получается ведь покадровка. Тем не менее нижняя флэшка с британским флагом весит меньше 9 килобайт.
Посмотри сколько сам логотип весит. Если получается много, попробуй разрядить анимацию (удалить каждый 2-й кадр а оставшиеся кадры растянуть по длительности)
Ну и Modify-Shape-Smooth
Здравствуйте!
Сам логотип, весит всего 1 Кб.
Мне всётаки удалось снизить вес с 30 Кб до 10-ти. Сделал это так.
Изначально размеры флага рисовал не такие, какие нужны были под баннер, а раз в 20 больше. Выполнил все вышеописанные Вами действия. И после выполнения пункта 4, трансформировал его до нужных размеров.
Вот только до сих пор не могу понять, почему такая разница в весе у флага с моей окончательной трансформацией и у флага, который рисовался сразу нужных размеров.
Скорее всего, потому что выполнялась операция Smooth.
По моему для разных размеров она по разному оптимизирует. Например, если в нормальном размере расстояние между точками 1мм, они остаются, а в уменьшенном виде это 0.01мм - программа считает что это слишком близко и глаз все равно ничего не заметит, поэтому они удаляются.
Огромное спасибо за то, что уделили моему интересу к данному вопросу внимание!
И в целом спасибо за Ваш блог!!! Очень много полезного для себя почерпнул. Обязательно буду следить за всеми публикациями!
Та-аак. Флажок анимировать умею. Спасибо автору!
Флаг конечно с программным синусом намного интереснее и по весу меньше будет чем в этом примере. А третий пример с разноцветными мошками очень прикольный:) в который раз убеждаюсь - экспериментировать, экспериментировать и экспериментировать. Флеш это такая глубокая кладезь, что просто голова иногда начинает кружиться от возможностей, и хочется использовать сразу всё:) нажать кнопку “мир-пауза” и творить пару месяцев, потом “мир-плей” и мир - вах!))))
Тогда бы время не ценилось так дорого и все бы работали за еду
Вы приводите несколько примеров, а как сделан второй (тот, что посередине). как работаь не с простыми формами, а с символами? как Вы этот флаг рисовали? это же сивол?
Этот способ работает только с формами. Флаг здесь не символ, а обычный шейп. Я его привёл для примера. что и со сложными формами можно так работать.
Способ отличный! Спасибо! Почти получилось.
Но вот вопрос. Я импортирую флаг в формате GIF или JPEG, потом (Ctrl+B) перевожу в шейп, затем делаю всё шаг за шагом, но упираюсь в то, что флаг воспринимается как заливка и поэтому края искажаются как и должно быть, флаг вьется как положено, но изображение внутри остается без изменений…. Смахивает на “маску” с неровными краями. Прошу помощи - как преобразовать JPEG так, чтобы искажение Envelope действовало и на внутренности изображения?
Пытался использовать Trace Bitmap, но в этом случае Shape Tween очень сильно искажает каждый кадр анимации и Flash перестает справляться с редактированием.
Помогите новичку, плиииз.
Самый простой способ - обрисовать растровую картинку и получить флаг в векторе. Флаги обычно имеют простую форму и проблем быть не должно.
Урок просто супер! Ничего подобного ещё не видел. +1 в карму и +1000 опыта.
Автор безкорыстно делится своим личным опытом!
З.Ы. ты куда пропал? Почему забросил сайт?
Простите, я совсем новичек. А что такое режим Edit Multiple Frames ? Всего 3 шаг, а я уже застопорилась
[b]iriska[/b] под кадровой линейкой есть 5 кнопочег, 3 из них с квадратиками разноцветными, они позволяют видеть и редактировать сразу несколько кадров.
Edit Multiple Frames - Кнопка с 2мя заполненными квадратиками , включающая режим такого редактирования, при этом над линейкой появляются маркеры (onion markers), обозначающие диапазон кадров, доступных для редактирования.
Думаю в инете много инфы по этому поводу
Хорошая весчь, думаю, на флаге еще стоит добавить тень на местах, более удаленных от зрителя, когда он развевается. Так будет объемней.
Есть такаая реализация в одной из последующих уроков по покадровой анимации
И вообще, хорошая вещь для анимирования волос при порыве ветра, если не хочется покадрово.
А вот третий пример с этими вот амёбами у меня плохо вышел(((
Так просто! Спасибо за “хитрюшку”. Вчера очень сильно помогла мне в работе
Здравствуйте, у вас очень интересный сайт, спасибо Вам за него.
Скажите, пожалуйста, а почему у меня флаг не движется, что я не так делаю? За ответ заранее спасибо
Здравствуйте, классная хитрость))) Автору спасибо!
Вот только сломал себе мозг с 3-м примером, вот по прямой получается амебу запустить, а вот как добиться чтоб она по кругу?
Можно пожалуйста исходник по почте ?
Спасибо ))
Очень жаль, Nikoll, но автор плохо следит за блогом, вот уже 3 месяца с последнего поста. А амебу по кругу можно пустить разбив всю анимацию по прямой на несколько частей - сегментов круга.. (лично я так и делал) но это было давно и исходник не сохранился
Спасибо за ответ )))
Я пробовал на 4 части разбить, но не получается совместить эти части для плавного перехода … приходится руками подрисовывать … долго получается, а автор пишет “на скорую руку набросал”, О_о … Наверное опыт )))
Хм, Nikoll, может попробовать части перехода располагать на более менее прямых участках круга? Конечно, в любом случае всё дело опыта =) У меня получилось, не идеально конечно, но во всяком случае веских проблем с этим не было…
Спасибо за помощь, dmitlantis!
Получилось зациклить без подрисовки ))) - вот результат:
http://v97.com.ua/ameba.swf
http://v97.com.ua/ameba.fla - исходник
Вот проблема у меня теперь, не могу их запустить в разное время… как то єто можно реализовать чтоб не плодить символы с пустыми кадрами вначале ?
Спасибо за помощь, dmitlantis!
Получилось зациклить без подрисовки ))) жаль ссылку на результат нельзя тут разместить.
Вот проблема у меня теперь, не могу их запустить в разное время… как то єто можно реализовать чтоб не плодить символы с пустыми кадрами вначале ?
Без проблем, Nikoll, рад был помочь! =)
А в чем, собственно, проблема? зачем плодить символы с пустыми кадрами? К сожалению не могу сейчас открыть ваш исходник.. Но если я правильно представляю ситуацию чтобы амебы находились разных фазах движения в начале, нужно для начала разнести их по отдельным слоям, а затем у некоторых перенести несколько кадров движения из конца анимации в начало, сохраняя их порядок. Или я некорректно представляю ситауцию?
Вот как раз Вашим методом у меня не получается, вот лучший вариант :
v97.com.ua/ameba.zip - наз АС никак
Я сделал с помощью АС3, но все таки пришлось символы плодить, вот исходник (
v97.com.ua/ameba.zip)
Позже усложнил скрип и справился в 1-н символ : вот исходник (
v97.com.ua/ameba2.zip)
Любопытно все-же как обойтись без скрипта ?
Прошу прощения, 2-ю строку читать так:
v97.com.ua/ameba3.zip - без АС никак
Метод зависит от конкретного результата который вы хотите получить. Если вам необходим основной символ клипа, который вы будете использовать в дальнейшем проекте и плодить программно или интерактивно то конечно без АС3 не обойтись. Но если вам всеголишь нужно сделать пару беспорядочно движущихся графических элементов для баннера можно обойтись и без символов, вам поможет лишь грамотная работа с таймлайном, слоями и кадрами. Вот вариант - (без АС и Символов) http://www.sharemania.ru/0165610
Как все просто ))
Изучаю флеш всего 2 недели, приучился что все должно быть в символах ))
Спасибо огромное за помощь, dmitlantis!
Незачто, рад был помочь! =)
Спасибо большое, как говориться самое простое - самое гениальное )))
было бы не плохо еслиб прикреплялось видео или сам файл что должно получиться))) для наглядности
Блин, а я так и не понял, как сделать амебы без AC, а файл по адресу http://www.sharemania.ru/0165610 уже отсутствует
у меня возникла проблема на 4 этапе. “выбираем инструмент Free Transform Tool и ниже - способ Envelope.” Envelope этого инструмента я не нашел, там по мимо Free Transform Tool есть еще Gradient Transform Tool. у меня Adobe Flash CS4
В CS5 не удается выбрать Envelope для нескольких кадров (в CS4 все работает как вы описали)
Была похожая проблема, как и у Андрея. Походу это баг в CS5 , так как включить Envelope можно, но очень хитрым способом. Выбираем ОДИН кадр, затем Free Transform Tool - Envelope, и только теперь (один слой все еще выделен) выделяем все. Вуаля - как на примере, все выделено через Envelope.
Извините вообще ничего не понял после 3 второго пункта!
Как понять выровнять по левому краю?
У меня получилось вот что - флаг сначало перемещается, а потом лишь меняет форму. на месте не стоит.
И сколько в итоге должно кадров остаться? 9?