How Do You Create SWF files for Acrobat 9 Using Flex?

| No Comments

The Flash Player and specifically, the one built into Acrobat and Reader 9, support various “scaleModes“. The scaleMode property tells the Flash Player how to scale what’s playing inside it.

The four possible modes are…

  • StageScaleMode.SHOW_ALL—The entire Flash application is visible in the specified area without distortion while maintaining the original aspect ratio of the application. Borders can appear on two sides of the application.
  • StageScaleMode.EXACT_FIT—The entire Flash application is visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur.
  • StageScaleMode.NO_BORDER—The entire Flash application fills the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the application.
  • StageScaleMode.NO_SCALE—The entire Flash application is fixed, so that it remains unchanged even as the size of the player window changes. Cropping might occur if the player window is smaller than the content.

The default settings for SWF authored in Flash CS3 works perfectly when that SWF is placed on a PDF page using the Flash Rich Media Annotation.

However, if you are using Flex Builder 3 to create SWF files for use in Acrobat 9 and you want to have the SWF play on the PDF page, there’s one important detail you need to know. In Flex Builder 3, the scaleMode must be set to “StageScaleMode.EXACT_FIT” in order for Acrobat 9 to scale the content when the page is zoomed in and out. More importantly, this setting allows Acrobat to print the PDF with your SWF scaled properly.

Setting the scaleMode is pretty simple in Flex but it must be done after the stage object exists otherwise you get  the “Cannot access a property or method of a null object reference” error. The way I do it is to add the following code to the “mx:Application” tag and then create my Flex application the way I normally would.

applicationComplete=”stage.scaleMode = StageScaleMode.EXACT_FIT;”

The example PDF below will illustrate what a difference the scaleMode makes. In the PDF, the chart on the left uses the default scaleMode setting, the one on the right uses EXACT_FIT. Because the file is set to open at 100% zoom, both will look correct at first but then try zooming in and out of the document and you’ll see what happens.

Example PDF