Working with Photoshop and Animate

You can use Adobe® Photoshop® and Adobe® Animate® together to create visually compelling web-based applications, animations, or interactive messaging elements. Photoshop lets you create still images and artwork, providing a high degree of creative control. Animate lets you bring those still images together and incorporate them into interactive Internet content.

The Photoshop drawing and selection tools provide you with a greater degree of creative control than the tools found in Animate. If you have to create complex visual images, or retouch photographs for use in interactive presentations, use Photoshop to create your artwork, and then import the finished images into Animate.

Importing still images into Animate

Animate can import still images in many formats, but you usually use the native Photoshop PSD format when importing still images from Photoshop into Animate.

When importing a PSD file, Animate can preserve many of the attributes that were applied in Photoshop, and provides options for maintaining the visual fidelity of the image and further modifying the image. When you import a PSD file into Animate, you can choose whether to represent each Photoshop layer as Animate layers or individual keyframes.

(CS6 and earlier versions only) Exchanging QuickTime movies

You can exchange QuickTime video files between Photoshop and Animate. For example, you can render a QuickTime movie directly from Photoshop, and then import it into Animate, converting it into an FLV (Animate Video) file, which can be played in Flash Player.

When you use Photoshop to modify video footage, you can paint nondestructively on its frames. When you save a Photoshop file with a video layer, you are saving the edits that you made to the video layer, not edits to the footage itself.

Note:

When you import a QuickTime video file from Photoshop to Animate, use the Import Video dialog box (File > Import Video). Using the Photoshop PSD import feature to import video only imports the first frame of a video file.

You can also export Animate documents as QuickTime video, and import them into Photoshop where you can paint non-destructively on the video frames. For example, you can create an animated sequence in Animate, export the Animate document as a QuickTime video, and then import the video into Photoshop.

Color

Animate works internally with colors in the RGB (red, green, blue) or HSB (hue, saturation, brightness) color space. Although Animate can convert CMYK images to RGB, you should create Photoshop artwork in RGB. Before you import CMYK artwork from Photoshop into Animate, convert the image to RGB in Photoshop.

About importing Photoshop PSD files

Animate lets you import Photoshop PSD files and preserves most of your artwork's data. The PSD Importer also lets you control how your Photoshop artwork is imported into Animate, letting you specify how to import specific objects in a PSD file, as well as specifying that the PSD file be converted to a Animate movie clip.

Certain visual attributes can either not be accurately imported, or, after they are imported, lose their ability to be further edited in the Animate authoring environment. The PSD Importer provides you with several options to import and place artwork to best maintain its visual appearance and editability. However, certain visual attributes cannot be preserved. Use the following guidelines to improve the appearance of PSD files imported into Animate:

Animate supports only the RGB color space, and not the CMYK color space, which is common in printing. Animate can convert CMYK images to RGB; however, colors are better preserved if you convert CMYK colors to RGB in Photoshop.

If you use a blend mode that Animate does not support, you can rasterize the layer to maintain its visual appearance, or remove the blend mode from the layer.

Animate cannot import Photoshop Smart Objects as editable objects. To preserve the visual attributes of Smart Objects, they are rasterized and imported into Animate as bitmaps.

Animate can only import the first frame of Photoshop Video layers.

Image and Fill layers are always rasterized when imported into Animate.

PNG objects in Photoshop are converted to JPG files when imported into Animate. Transparency in the original PNG is preserved in the resulting JPG file.

Photoshop does a better job of scaling bitmap images than Animate. If you know that you plan to scale a bitmap that is coming from Photoshop into Animate, scale the bitmap in Photoshop before importing it into Animate.

When importing objects containing transparent areas as flattened bitmaps, any objects on the layers behind the transparent portion of the object will be visible through the transparent area—assuming the objects behind the object containing transparency are also being imported. To prevent this, import only the transparent object as a flattened bitmap.

To import multiple layers and maintain transparency without having any visible remnants of the layers behind the transparency, import the PSD file using the Bitmap Image With Editable Layer Styles option. This will encapsulate the imported objects as a movie clip, and use the movie clip's transparency. This is particularly useful if you need to animate the different layers in Animate.

Import Photoshop PSD files

Photoshop format (PSD) is the default Photoshop file format. Animate can directly import PSD files and preserve many Photoshop features, retaining the image quality and editability of the PSD file in Animate. You can also flatten PSD files when importing them, creating a single bitmap image file that retains the image’s visual effects but removes the hierarchical layer information native to the PSD file format.

(Optional) In the PSD Import dialog box, select layers, groups, and individual objects and choose how to import each item.

Select the various advancedimport options and publish settings for the PSD file.

PSD Advanced Options: Stage

PSD Advanced Options: Library

In the Import screen, select the following options:

Select Photoshop layer comp: Lets you select the particular layer comp with which he wants to import the PSD file.

Import as bitmap image with editable layer styles: Creates a movie clip with a bitmap inside.Supported blend modes, filters, and opacity are maintained. Blend modes that cannot be reproduced in Animate are removed. The object must be converted to a movie clip.

Import as Flattened bitmap image: Rasterizes the text into a bitmap to preserve the exact appearance of the layer in Photoshop.

Create movie clip: Specifies that the image layers be converted to movie clips when imported into Animate. This option can be changed in the PSD Import dialog box on a layer by layer basis if you do not want all of the image layers to be converted to movie clips.

Instance name: Specifies the name of the imported instance.

Registration: Lets you set the registration point for your movie clip.

Compression: Lets you choose either lossy or lossless compression formats.

Lossy (JPEG): Compresses the image in JPEG format. To use the default compression quality specified for the imported image, select Use Publish Setting. To specify a new quality compression setting, select the Custom option and enter a value between 1 and 100 in the Quality text field. (A higher setting preserves greater image integrity but yields a larger file size.)

Lossless (PNG/GIF): Compresses the image with lossless compression, in which no data is discarded from the image.

Quality:

Use Publish setting: To use the default compression quality specified for the imported image, select Use Publish Setting.

Custom: To specify a new quality compression setting, select the Custom option and enter a value between 1 and 100 in the Quality text field.

Calculate bitmap size: To calculate the size of all the bitmaps to be imported, select all the layers and click Calculate Bitmap Size.

Convert layers to:

Animate layers: All selected layers in the Select Photoshop layers list are placed on their own layer. Each layer is labeled with the name of the layer in the Photoshop file. The layers in Photoshop are objects on the individual layers. The objects also have the name of the layer in Photoshop when placed into the Library panel.

Single Animate layer: All the Photoshop layers are placed on a single Animate layer.

Keyframes: All selected layers in the Select Photoshop layers list are placed in individual keyframes on a new layer. The new layer is named for the Photoshop file (for example, myfile.psd). The layers in Photoshop become objects on the individual keyframes. The objects also have the name of the layer in Photoshop when placed into the Library panel.

Import as a single bitmap image: Compresses the object with multiple layers into a single bitmap image.

Place objects at original position: Retains the contents of the PSD file with the exact position they had in Photoshop. For example, if an object was positioned at X = 100 Y = 50 in Photoshop, it assumes the same coordinates on the Animate Stage. (not displayed in Import to Library option).

Set stage size to the same as Photoshop Canvas (546x513): The Animate Stage size resizes to the same size as the Photoshop document size (or active crop area) used to create the PSD file. This option is not selected by default. (not displayed in Import to Library option).

Select Import to import the files, Cancel to cancel the process or Hide advanced options to display the basic options.

PSD Basic Options: Library

In the Basic options, select the options in Layer conversion, Text conversion and Convert Layers.

Select Photoshop layer comp: Allows you to select a particular layer comp with which you want to import the PSD file. If you change the Layer Comp in the Basic options, the tree layout in Advanced Options is updated based on the selected Layer Comp.

Single flattened image: Rasterizes the shape into a bitmap to preserve the exact appearance of the shape layer in Photoshop.

Editable text: Creates an editable text object from the text on the selected Photoshop layer. The appearance of the text might be compromised to maintain the edit ability of the text.

Vector outlines: Converts text to vector paths to preserve the visual appearance of the text.

Flattened bitmap image: Rasterizes the text into a bitmap to preserve the exact appearance of the text layer in Photoshop. Rasterized text is no longer editable.

Animate layers: Selected layers in the Select Photoshop layers list are placed on their own layer. Each layer is labeled with the name of the layer in the Photoshop file.

Single Animate layer: All the Photoshop layers are placed on a single Animate layer.

Keyframes: All selected layers in the Select Photoshop layers list are placed in individual keyframes on a new layer.Select Import to import the files, cancel to cancel the process or Show advanced options to display the advanced options.

Click OK.

Importing PSD files to the Animate library

Importing a PSD file into the library is similar to importing to the Stage. When you import a PSD file into the library, the root folder uses the name of the PSD file. After the PSD file is imported into the library, you can change the name of the root folder, or move the layers out of the folder.

note: The library orders the contents of the imported PSD file alphabetically. The hierarchical grouping and folder structure remains the same, but the library reorders them alphabetically.

A movie clip is created that contains all of the content of the PSD file imported to its timeline, as if the content were imported to the Stage. Almost all movie clips have a bitmap or other asset associated with them. To minimize confusion and naming conflicts, these assets are stored in an Assets folder in the same folder as the movie clip.

note: When you import to the library, the PSD file's contents are imported to the movie clip's timeline, not the main Animate timeline.

Photoshop Import options

When
you import a Photoshop PSD file that contains multiple layers, you
can set the following options:

Layer Comp

If the Photoshop file contains layer comps, you can specify which version of the image to import. A layer comp is a snapshot of a state of the Photoshop Layers palette. Layer comps record three types of layer options, all of which are imported into Animate:

Layer visibility: whether a layer is displayed or hidden.

Layer position in the document.

Layer appearance: whether a layer style is applied to the layer and the layer’s blending mode.

If no layer comps are present, this pop-up menu is hidden. Animate supports all aspects of the layer comp’s fidelity, including visibility, position, and layer style.

Importing text objects

Text objects are text layers in Photoshop. Choose how to import text into Animate.

Editable Text

Creates an editable text object from the text on the selected Photoshop
layer. The appearance of the text might be compromised to maintain the
editability of the text. If you import the text as a movie clip,
the movie clip contains an editable text object.

note: When importing
editable text into the library, it must be inside a movie clip. Only
movie clips, bitmaps, and graphic symbols can be stored in the library.
When Editable Text is selected as an option for a text layer being
imported into the library, it is automatically imported as a graphic
symbol.

Vector Outlines

Converts text to vector paths to preserve the visual appearance
of the text. The text itself is no longer editable, but opacity
and compatible blend mode maintain their editability. If this option
is selected, the object must be converted to a movie clip.

note: (Windows
8 only) If a PSD file containing text is imported with the Vector Outline
option selected, you cannot edit the anchor points for the vector
object. This is observed with PSD files that were created using
fonts unavailable in Windows 8.

Flattened Bitmap Image

Rasterizes the text into a bitmap to preserve the exact
appearance of the text layer in Photoshop. Rasterized text is no
longer editable.

note: When importing text on a path you must import
it as a flattened bitmap image to preserve the visual fidelity of
the object.

Importing shape objects

A Shape Layer object is an object that was
originally a shape layer in Photoshop or an image layer with a vector
clipping mask on it.

Editable Paths And Layer
Styles

Creates an editable vector shape with a bitmap clipped inside the vector. Supported blend modes, filters, and opacity are maintained. Unsupported blend modes that cannot be reproduced in Animate are removed. The object must be converted to a movie clip.

Flattened Bitmap Image

Rasterizes the shape into a bitmap to preserve the exact
appearance of the shape layer in Photoshop. A rasterized image is
no longer editable.

Importing image or fill layers

If the image or fill layer is associated with
a vector mask, it is treated as a shape layer object.

Bitmap Image With Editable Layer Styles

Creates a movie clip with a bitmap inside. Supported blend modes, filters, and opacity are maintained. Unsupported blend modes that cannot be reproduced in Animate are removed. The object must be converted to a movie clip.

Flattened Bitmap Image

Rasterizes the image into a bitmap to preserve the exact
appearance of the image or fill layer in Photoshop.

A merged bitmap is an object that contains more than one Photoshop layer that is flattened (or merged) into a single bitmap when imported into Animate. Objects in a merged bitmap represent layers in Photoshop. To create a merged bitmap, select two or more layers, and select the Merge Layers button.

If you import multiple objects of different types, Animate only lets you import the selected objects with the import options they share in common, such as Create Movie Clip and Registration.

Importing multiple objects of the
same type

If you import multiple objects of the same
type, the import options displayed are the same as if a single object
of that type was selected. If the objects do not share the same
attributes, the import options displayed are in an indeterminate
state, and your results may not be as expected.

(CS6 and earlier versions only) Importing a Group folder

When you import a group folder, you can import it as a movie clip, or place each layer in the group on its own layer or keyframe on the timeline.

If you select Import As Movie Clip, each layer in the group folder is placed on a layer in a movie clip, which is then placed on its own layer or keyframe on the timeline. The movie clip uses the same name as that group folder had in Photoshop, and if you import the movie clip to a Animate layer, the layer uses the same name.

If you do not place the group in a movie clip, each layer is converted to the type that is currently set for it, and each layer in the group is imported to its own Animate layer. The Animate layers are named for the individual layers in the PSD file.

(CS6 and earlier versions only) Importing and merging layers

The PSD Importer lets you merge two or more
layers into a merged bitmap that is imported as a single bitmap
file rather than individual objects.

The layers you select
to create a merged bitmap must be a continuous range of two or more
layers at the same level. For example, you cannot select one layer inside
a group and a layer outside that group, and merge them. Instead,
you must select the entire group and the separate layer.

Setting publish options

The publish settings in the PSD Importer let you specify the degree of compression and document quality to apply to the image when publishing the Animate document as a SWF file. These settings take effect only when you publish the document as a SWF file and have no effect on the image when you import it to the Animate Stage or library.

Compression

Lets you choose either lossy or lossless compression formats:

Lossy

Lossy (JPEG) compresses the image in JPEG format. To use
the default compression quality specified for the imported image,
select Use Publish Setting. To specify a new quality compression
setting, select the Custom option and enter a value between 1 and
100 in the Quality text field. (A higher setting preserves greater
image integrity but yields a larger file size.)

Lossless

Lossless (PNG/GIF) compresses the image with lossless compression, in
which no data is discarded from the image.

note: Use lossy compression
for images with complex color or tonal variations, such as photographs
or images with gradient fills. Use lossless compression for images with
simple shapes and relatively few colors.

Calculate Bitmap Size

Determines the number of bitmaps that are created for a
given layer based on your import selections and the compressed size
in kilobytes of the resulting bitmaps on the layer. For example,
if you select a layer with a drop shadow and a blur and maintain
layer styles, the Calculate Bitmap Size information states that
three bitmaps will result from the import—one for each filter effect
and another for the image itself. To calculate the size of all the bitmaps
to be imported, select all of the layers and click Calculate Bitmap
Size.

(CS6 and earlier versions only) Photoshop file importer preferences

The Animate Preferences dialog box lets you set import preferences for Photoshop PSD files. The preferences you specify for importing PSD files affect the options the PSD Import dialog box is initially populated with for the Photoshop layer types.

Note:

To
override the preferences specified for different layer types on
an object by object basis, use the PSD Import dialog box. Select
the layer to change import options for, and specify the necessary
options.

Import Image Layers Preferences

These options specify how the import options
for image layers will initially be set. You can import image layers
as any of the following:

Bitmap Images With
Editable Layer Styles

Creates a movie clip with a bitmap nested inside. Specifying this option maintains supported blend modes and opacity, but other visual attributes that cannot be reproduced in Animate will be removed. If this option is selected, the object must be converted into a movie clip.

Flattened Bitmap Images

Rasterizes any text into a flattened bitmap image to maintain
the exact appearance the text layer had in Photoshop.

Create Movie Clips

Specifies that the image layers be converted to movie clips when imported into Animate. This option can be changed in the PSD Import dialog box on a layer by layer basis if you do not want all of the image layers to be converted to movie clips.

Text layer import preferences

These options specify how the import options
for text layers will initially be set.

Editable
Text

Creates an editable text object from the text on the Photoshop text
layer. The appearance of the text will be sacrificed to maintain
the editability of the text. If this option is selected, the object
must be converted into a movie clip.

Vector Outlines

Vectorizes the text into paths. The appearance of the text
may be altered, but visual attributes will be maintained. If this
option is selected, the object must be converted into a movie clip.

Flattened Bitmap Images

Rasterize the text to maintain the exact appearance the text
layer had in Photoshop.

Create Movie Clips

Automatically converts the text layer to a movie clip when imported into Animate. This option can be changed in the PSD Import dialog box on an object by object basis if you do not want all of the text layers to be converted to movie clips. This option is required when either Editable Text or Vector Outlines is selected.

Shape layer import preferences

These options specify how the import options
for shape layers will initially be set.

Editable
Paths And Layer Styles

This option will create an editable vector shape with a bitmap clipped inside the vector shape. Supported blend modes and opacity will also be maintained with this option, but other visual attributes that cannot be reproduced in Animate will be sacrificed. If this option is selected, then the object must be converted into a movie clip.

Flattened Bitmap Images

This option will rasterize the shape and maintain the exact
appearance the shape layer had in Photoshop.

Create Movie Clips

This option will set the shape layers to be converted to a movie clip when imported into Animate. This option can be changed on an object by object basis if you do not want some shape layers to be converted to movie clips. This option is disabled if the Maintain Editable Paths and Layers Styles checkbox is checked.

Layer group import preferences

This option specifies how the options for layer
groups will initially be set.

Create Movie Clips

Specifies that all groups be converted to a movie clip when imported into Animate. This can be changed on an object by object basis if you do not want some layer groups to be movie clips.

Merged bitmap import preferences

This option specifies how the import options
for merged bitmaps will initially be set.

Create Movie Clips

This option will set the merged bitmaps to be converted to a movie clip when imported into Animate. This option can be changed on an object by object basis if you do not want some merged bitmaps to be converted to movie clips. This option is disabled if the Maintain Editable Paths And Layers Styles checkbox is checked.

Movie clip registration import
preferences

Specifies a global registration point for movies
that are created. This setting applies to the registration point
for all object types. This option can be changed on an object by
object basis in the PSD Import dialog box; this is the initial setting for
all object types. For more information on movie clip registration,
see Edit symbols.

Publish settings for imported images

The publish settings preferences for a FLA file let you specify the degree of compression and document quality to apply to images when publishing the Animate document as a SWF file. These settings take effect only when you publish the document as a SWF file, and have no effect on the image when you import it to the Animate stage or library.

Compression

Lets you choose either lossy or lossless compression formats:

Lossy

Lossy (JPEG) compresses the image in JPEG format. To use
the default compression quality specified for the imported image,
select Use Publish Setting. To specify a new quality compression
setting, select the Custom option and enter a value between 1 and
100 in the Quality text field. (A higher setting preserves greater
image integrity but yields a larger file size.)

Lossless

Lossless (PNG/GIF) compresses the image with lossless compression, in
which no data is discarded from the image.

note: Use lossy compression
for images with complex color or tonal variations, such as photographs
or images with gradient fills. Use lossless compression for images with
simple shapes and relatively few colors.