Анимация растра во флеше

Несколько лет назад  довелось поработать над игровым проектом  в качестве аниматора. Анимировать пришлось целую  серию  мифических существ – гномов, минотавров и горгулий:) Все персонажи были отрисованы художником  в фотошопе,  и использовать  нужно было растровые изображения. Сам принцип анимации перекладкой растра не отличается от анимации вектора, а вот при подготовке растра к анимации есть свои нюансы. 1. Фотошоп

Поскольку  анимацию с растровыми объектами  реализуют  в технике перекладки, то обязательно персонажа рисуем послойно, чтобы после, при разделении цельного объекта, не дорисовывать недостающие куски.

 

2. Подготовка растра  к импорту во флеш

В первую очередь, нужно определиться с размером растровой картинки для импорта. Если требуется, сразу уменьшить в  фотошопе, а не импортировать во флеш картинки плакатного размера.  Это связано с тем, что уменьшить растр во флеше,  используя стандартный инструмент масштабирования (Scale) возможно, но при экспорте  в свф. размер файла не уменьшится. Флеш, увы, не может уменьшить файл за счет уменьшения изображения.

3. Импорт изображений во флеш

Сохранять каждый слой из  фотошопа по отдельности в png картинку:

1.скрываем все слои, кроме одного.

 

2. file–save–save for-web. Из списка выбираем формат картинки – PNG 24 (картинка нам нужна на прозрачном фоне).

 

3.сохраняем в папку под нужным именем.

Таким образом,  сохраняем каждый слой.  Процесс  трудоемкий, особенно если  персонажей несколько десятков.

Теперь каждую картинку нужно обрезать в фотошопе, используя инструмент кадрирования.

И хотя бОльшую часть png картинки занимает прозрачный фон, это  существенно влияет на вес, а для веб это важно.

 

 А  теперь можно импортировать изображения во флеш:  file– import – import to stage – png , файлы, выделяем все сразу. Все изображения прилипают к верхнему левому краю:

 

Нужно их разложить, «построить» заново персонажа. Для этого выделяем все изображения, кликаем правой и выбираем – разложить на слои (distribute to layers):

 

Итог подготовительной работы – слепили персонажа из кусочков.

­

И теперь каждую картинку сохраняем в символ – (выделение + F8). Желательно, перед сохранением в символ не применять к растру трансформацию – сжимать, поворачивать т. д., потому что возможны дефекты при экспорте в swf.

Обязательно нужно включить сглаживание изображения ­ (smoothing) в библиотеке.

 

 

 

Вот и все, можно приступать к анимации:)

p.s.  Во флеше есть возможность импортировать psd. файл непосредсвенно во флеш, обходя рутинную работу послойного сохранения:  file–import–import to stage – PSD файл. Открывается окно:

 

Ставим галочку напротив  Place layers at original position. В результате получаем на таймлайне разложенные по слоям части персонажа. Но этот метод имеет свои недостатки, если импортируемые объекты  на прозрачном слое: рваные края или края с белым ободком.­

 

И хотя  я  использовала более ранние версии флеша и фотошопа -  проблему с импортом до сих пор не устранили. Не поленилась и специально проверила:)

Пример анимации растра:

Комментарии
Аватар пользователя ID

Ух спасибо!Smile

Аватар пользователя Tasty_Cat

Для случаев, когда нет исходника и все слои изначально слиты, подходит более простой способ - картинка расчленяется сразу во флеше. Для этого нужно нажать ctrl+b, выделив фотографию, размножить этот кадр на нужное количество слоев, а потом при помощи пентула обводить нужные детальки, удаляя остальное.
Повторюсь, это подходит когда вырезать детальки нужно по-любому - в этом случае быстрее все сразу делать во флеше.

Аватар пользователя Oksana

если нет послойной картинки, то приходится делать,как вы описываете.Но лучше делать по слоям,а не резать во флеше. Комментарием ниже уже отвечала почему.

Аватар пользователя DEaDA

можно не резать в фотошопе по слоям, можно сделать это во флеше:
-добавляем картинку
-выделяем, жмем ctrl+B
-обводим карандашом нужные части тела (Y)
-выделяем части, преобразуем их в мувики по отдельности
-удаляем обводку карандаша
-распределяем мувики на оригинале
-где нужно меняем область видимости вырезанного кусочка стрелкой выделения (V)
-анимируем

то есть содерижмое мувиоков это шейп, залитый битмапой картинки

Аватар пользователя Oksana

спасибо за мнение.использую этот метод,когда нужно выдрать часть растровой картинки,а в фотошоп идти лень)но в данном случае этот способ лучше не использовать, мне кажется.отрезав руку,останется на теле пустота.отрезаем оружие - и надо редактировать дырки на ногах. а их ничем не заполнишь, это растр. можно как-то пошаманить и заплатки поставить,но все-равно будет неаккуратно.а это минус.поэтому резать не надо ни во флеше, ни в фотошопе, а изначально все части рисовать послойно.

Аватар пользователя DEaDA

да, это для простых вещей или когда нет нормального исходника

Аватар пользователя Fedor

Оксана, здравствуйте! Подскажите как вы решаете проблему со сглаживанием анимации?
К примеру, у меня картинка 1000 px движется (classic motion tween) слева на право в поле баннера размером 240 px.При этом картинка идет с притормаживанием, видно что нет плавности хода.
Как такой вопрос вы решаете в ваших анимациях.

Аватар пользователя Oksana

здравствуйте,Федор.
не часто работаю с растром,можно сказать,что очень редко)но припоминаю,что видела нечто похожее. торможение скорее всего связано с нагрузкой на процессор.
возможно,ваша картинка неоптимизирована и много весит.
1.попробуйте уменьшить ее (photoshop - save for web)
2.попробуйте выключить сглаживание картинки во флеше (в уроке есть,как его включить, а вы отключите) + посмотрите настройки импорта - процентное указание качества картинки (по умолчанию стоит50%,выставите 30% и сравните результат до и после).
3.возможно, что classic motion tween стоит заменить программной анимаций, двигать картинку с помощью кода, а не с помощью обычной твиннинговой анимации.
вот здесь есть урок,можно посмотреть исходник (движению облаков по небу) - http://xitri.com/2008/07/01/uafpug3-flash-actionscript-animation.html
или этот урок по циклическому движению фона - http://xitri.com/2008/04/17/loop-background1.html
попробуйте,надеюсь,что поможет.

Аватар пользователя Исак

Я польщен, спасибо вам огромное!

Аватар пользователя Renderdoll

Оксана, спасибо за статью! Работала и раньше с растром,но только сейчас из вашей статьи узнала про сглаживание, а ведь картинка от этого действительно лучше смотрится. Smile

Аватар пользователя Oksana

рада,что информация полезна)

Аватар пользователя Гость

Спасибо. Новичку самая полезная информация.

Аватар пользователя Oksana

на здоровье)

Аватар пользователя zulin

Я бы еще добавил такой хинт:

1. перед воссозданием персонажа можно сохранить картинку с ним и положить на нижний слой, сделать его Guide-ом (чтобы не экспортировался).
2. потом после конвертации всех частей в мувиклипы выставить им всем режим наложения Difference.
3. Поперемещать все части в области ПРИМЕРНОГО расположения относительно общей картинки.
4. округлить координаты всех частей до целых значений (на всякий случай, может в будущем пригодиться). Лучше это делать не руками, а специальным несложным jsfl-скриптом.
5. выровнять все части при 100% зуме ориентируясь на фоновую картинку на guide-е (из-за difference это будет довольно заметно).
6. вернуть всем мувиклипам режим Normal.

Viola! Smile

Аватар пользователя Oksana

очень полезное дополнение,спасибо! я не расписала подробно,как сложить персонажа заново.а некоторые вещи мне до сих пор были неизвестны - режим наложения Difference я не использовала и скрипт для координат.за новую информацию тоже спасибо)

Аватар пользователя kunicz

Экспортировать каждый слой вручную в PNG необязательно. Лучше воспользоваться Скриптом 'Export Layers to Files' (он есть в PS CS5), в интернетах гуляет скрипт 'Export Layers to PNG' (то же самое, только чисто для PNG). Только перед применением скрипта нужно разгруппировать в фотошопе все слои, иначе выдаст ошибку.
А подрезку (Image - Trim - transparent) полученных PNG-шек лучше повесить на action и применять пакетно.

Аватар пользователя Oksana

спасибо, про скрипт не слышала,ценная информация)
анимировала еще во времена цс 3)вобщем, урок можно переписать))

Аватар пользователя murejib

Пара дополнений:
1. Рутину по сохранению слоев в PNG можно превратить в счастье, если использовать скрипт, который встроен в фотошоп (не помню с какой версии, но мне кажется он уже очень давно реализован, по крайней мере в цс4 точно есть) Cкрипт называется Export Layers To Files. Находится в меню File->Scripts

2. Если импортировать послойный PSD, нужно каждый слой импортировать не как Flattened Bitmap Image (установка по умолчанию), а как Bitmap Image with editable Styles. Это помогает точно передавать альфа канал, а также все поддерживаемые флешом фильтры и режимы наложения.

Аватар пользователя Oksana

не получилось тогда в цс3 превратить в счастье) хорошо,что появились такие фишки,не знала о них.спасибо,что поделились,буду использовать по необходимости)

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки