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

Несколько лет назад  довелось поработать над игровым проектом  в качестве аниматора. Анимировать пришлось целую  серию  мифических существ – гномов, минотавров и горгулий:) Все персонажи были отрисованы художником  в фотошопе,  и использовать  нужно было растровые изображения. Сам принципанимации перекладкой растра не отличается от анимации вектора, а вот при подготовке растра к анимации есть свои нюансы. 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. В результате получаем на таймлайне разложенные по слоям части персонажа. Но этот метод имеет свои недостатки, если импортируемые объекты  на прозрачном слое: рваные края или края с белым ободком.­

 

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

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

flash-animated.com