Выгрузить анимацию в фотошопе можно просто — сохранить в формате «gif». но если нужно сохранить покадрово в другом графическом формате, то нужно сохранять отдельно каждый кадр. А если этих кадров очень много? То же самое касается AdobeFlash — как загрузить все кадры анимации сразу, а не загружать по одной картинке? В этом уроке разберемся, как автоматизировать эти процессы, упростить выгрузку кадров анимации из фотошопа и загрузку в AdobeFlash.

Выгрузка кадров анимации в фотошопе

Давайте выгрузим уже готовую анимацию psd-файла в фотошопе. Анимация будет использоваться не сложная — окружность с десятью кадрами, как показано ниже. Скачать файл можно здесь.

Примечание. Выгрузить анимацию можно также в качестве готового видео-файла. Для этого нужно зайти в главное меню File -> Export -> Render Video… Должно появиться окно с различными настройками выгрузки видео-файла и настройками видео. В данном уроке мы не будем рассматривать этот способ экспортирования анимации, можете почитать об этом на официальном сайте.

Откройте пример или создайте свою анимацию. Должна получиться следующая последовательность кадров анимации:

Чтобы выгрузить кадры анимации в виде отдельных картинок, нужно преобразовать их в слои. Для этого нажмите в панели анимации на кнопку, расположенную в верхнем правом углу, и в появившемся меню выберите «Flatten Frames Into Layers», в панели «Layers» появятся новые слои.

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

Выберите в главном меню File -> Scripts -> Export Layers to Files, чтобы открыть окно с настройками экспорта слоев с анимацией.

Примечание. Для версий фотошопа ниже CS4 не предусмотрена выгрузка png-файлов. Но эту проблему можно решить при помощи внешнего плагина. Вы можете скачать его по этой ссылке /wp-content/media/tutorial62_Photoshop_AdobeFlash_export_animation/ExportLayersFast.zip. Разархивируйте файл и поместите его в C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Scripts (после чего нужно будет перезапустить фотошоп) или выберите в главном меню File -> Scripts -> Browse… и файл скрипта.

Экспортирование слоев происходит, начиная с верхнего, поэтому после выгрузки файлы будут иметь имена в обратном порядке, начиная с десятого, а не первого. Чтобы этого избежать, нужно перед выгрузкой поменять порядок их расположения в окне «Layers». Для этого выберите все нужные слои и перейдите в главном меню Layer -> Arrange -> Reverse. Теперь слои идут так, как нужно, начиная с первого слоя.

Давайте рассмотрим некоторые пункты в окне Export Layers to Files. В первом поле нужно указать папку, в которую будут выгружаться файлы. Второе поле указывает, какой префикс будет добавляться к именам файлов. Далее идет флажок Visible Layers Only, который означает, что выгружаться будут те слои, которые отмечены как видимые. После того, как все настройки сделаны, нажмите кнопку «Run». Если выгрузка прошла успешно, то появится окно с надписью «Export Layers to Files was successful». Проверьте папку с выгруженными файлами.

Импортирование анимации в AdobeFlash

Создайте новый документ ActionScript 3.0. Перейдите в главное меню Insert -> New Symbol, чтобы создать новый символ типа MovieClip, в который поместим картинки анимации. Находясь в символе перейдите в главное меню File -> Import -> Import to Stage… В появившемся окне выберите папку, где находятся картинки анимации. Два раза нажмите мышью на первый файл. Появится диалоговое окно, нажмите кнопку ok, а если окно не появится, а загрузится только один файл, то нужно править имена файлов так, чтобы программа AdobeFlash распознала, что картинки это кадры анимации. Сейчас имена файлов имеют следующий вид: «anim_0000_Frame 1», «anim_0001_Frame 2» и т.д.

Все потому что фотошоп выгружает файлы и присваивает им длинные и различные по последовательности имена. Это можно исправить следующими способами:

1. Отредактировать имя каждого файла вручную, присвоив простые имена или просто числа. Но это долго и неудобно.
2. Переименовать файлы, используя программу Adobe Bridge, которая должна быть установлена вместе с фотошопом. Запуститьте программу, выберите папку, куда выгружались файлы, выделите все файлы, перейдите в главное меню Tools -> Batch Rename… Появится окно настроек, установите все параметры, как показано на изображении и нажмите кнопку «Rename». Это способ самый легкий, но не идеальный, потому придется проделывать это каждый раз с выгруженными картинками анимации.
   
3. Поправить файл скрипта «Export Layers To Files», который находится в C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Scripts. Можно отредактировать его так, чтобы имена выгружаемым файлам присваивались либо по порядку выгрузки, либо по имени слоя. Сделать это проще используя специальную программу-блокнот для редактирования кода, рекомендовать не буду, их вы можете поискать и скачать в сети. Найдите в функции function exportChildren(dupObj, orgObj, exportInfo, dupDocRef, fileNamePrefix) строчку
   fileNameBody += "_" + zeroSuppress(i, 4);
   и закомментируйте:
   //fileNameBody += "_" + zeroSuppress(i, 4);
   Сохраните файл и запустите повторную выгрузку файлов из слоев в фотошопе. Теперь имена файлов должны выглядеть следующим образом: «anim_Frame 1», «anim_Frame 2» и т.д.

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

Теперь можно загрузить картинки анимации в AdobeFlash. Находясь в символе, перейдите в главное меню File -> Import -> Import to Stage… , выберите первый файл, после чего появится диалоговое окно, нажмите «ok», все картинки будут расставлены каждый в своем кадре на панели TimeLine.

Когда все картинки загрузились, желательно их выровнять по центру. Для этого нужно выбрать каждый кадр и нажать на кнопку align справа вверху, после чего отобразится следующие варианты выравнивания, нажмите в первой группе «Align horizontal center» и «Align vertical center». Можно упростить и выровнять их сразу все, для этого на панели Timeline внизу нажмите на кнопку «Edit Multiple Frames».

На панели Timeline над кадрами должны появиться две скобки, которые нужно передвинуть так, чтобы в них находились все кадры.

Теперь выделите мышью в окне Scene все картинки и выровняйте инструментом align, как делали это для каждого отдельного кадра. Проверьте все кадры, чтобы в каждом картинка окружность находилась в центре. После проделанного нужно снять отжать кнопку-переключатель «Edit Multiple Frames». Перейдите на основную сцену, чтобы поместить на нее из библиотеки символ с анимацией, запустите приложение (ctrl + Enter), чтобы воспроизвести анимацию шарика.

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

Автор: Jean Winters