TechNote

PNG files rendered from After Effects are very large in Flash CS3 or Illustrator

Issue

When you import or place a PNG file that was rendered from Adobe After Effects CS3 or earlier into Adobe Flash CS3 or Adobe Illustrator CS3 and earlier, the image is several times larger than expected.

Solution

Do one of the following solutions:

Solution 1: Render the composition as Photoshop (PSD) files.

Flash CS3 and Illustrator do not exhibit the problem with PSD files. In the Render Queue panel, dupicate the composition's render item and set the Output Module format for the render item to Photoshop Sequence.

Solution 2: Render the composition as an image sequence with the QuickTime exporter.

Use the File > Export > Image Sequence command to render the PNG sequence. This command uses the QuickTime rendering engine to write the PNG files. (On Windows, you need to install QuickTime for this option to be available.) This method has less control that using the Render Queue in After Effects. Note that the default image properties (color depth, alpha channel, etc.) with this method may differ from the default image properties when using the Render Queue.

Solution 3: Re-size the image to the correct pixel dimensions in Flash or Illustrator.

To re-size the image in Flash, select the image, then enter the correct width and height in the Properties panel. (You may need to click the Lock icon next to the Width and Height fields to prevent the "Invalid size and position" warning from occurring.)

To re-size the image in Illustrator, select the image, then click on the Transform text in the Properties bar above the artboard. Enter the correct width and height.

Solution 4: Re-save the PNG files from Adobe Photoshop.

Photoshop corrects the problem by adding resolution information to the PNG file. Open the file(s) in Photoshop and do one of the following:

Use the File > Save As command to save the files to a different PNG file, or as a PSD file.
Save back to the original image file after making a non-operative change, such as the following:
1. Choose Select > All.
2. Choose Image > Crop.
3. Choose File > Save.

Note: If you rendered an image sequence from After Effects, then it may be more efficient to create an action and use the File > Automate > Batch command to process the files.

Solution 5: Change the resolution of the file in Adobe Fireworks.

Open the PNG file in Fireworks.
Press the Image Size button in the Properties panel.
Set the Resolution to a different value (72 is suggested).
Click OK.
Choose File > Save.

Additional Information

When After Effects renders a PNG file, it does not include the resolution (PPI; pixels per inch) tag. Although video and web are resolution-independent formats that do not require PPI information, Flash and Illustrator use the resolution tag to calculate the scale of the image. A problem in Flash and Illustrator cause it to overscale the image when the resolution tag is empty or not present.