Flash UIs with InDesign CS4

InDesign user-interface development can be expensive. It takes a lot of effort to implement a dialog or panel in ODFRC. Things should improve in future versions, with the possibility of using Flash-based user-interface tools like Flex and FlexBuilder. While this represents the future direction of InDesign user-interface development, there is a present reality in InDesign CS4. With an understanding of the current situation, you can implement Flash-based user-interfaces for InDesign CS4.

This posting highlights two samples that demonstrate two approaches — scripting and plug-in — to using Flex to create user interfaces for InDesign CS4. Each approach demonstrates how to achieve the following:

  1. Locate an SWF (binary Flash file) relative to a script or plug-in.
  2. Load the SWF in an existing InDesign user-interface widget.
  3. Provide a way to call InDesign from the SWF’s ActionScript code. (You cannot directly target InDesign CS4’s scripting DOM with ActionScript.)
  4. Provide a way to call ActionScript from InDesign code.

Scripting Approach

The scripting approach combines InDesign JavaScript (and its ScriptUI library) with Flash SWF. This was demonstrated originally in the InDesign CS4 Products SDK by the FlexUIBasicScriptUI sample. That sample shows how to create a panel with Flex and ScriptUI. Perhaps more than anything, it highlights the panel’s need to receive notifications from the application when relevant data changes. Since these notifications do not exist in the scripting DOM, I recommend using this approach for dialogs, which do not require notifications.

To back up the claim that this is a good technique for dialogs, and to demonstrate how you would do this, I implemented a new sample. It is demonstrated in the following video, which shows a simple dialog implemented with Flex and scripting. Eventually, we will add this sample to the SDK and maintain it there, but for your convenience, I have added rough and ready (CS4-compatible) sample files.

To run the sample, copy FlexScriptUIDialog.swf and FlexScriptUIDialog.jsx to your “Startup Scripts” folder (<InDesign>/Scripts/Startup Scripts). Note: <InDesign> is the InDesign application folder.

For details, see the comments in the included source files.

For information on how to compile the SWF, see Building Flex Files below.

Plug-In Approach

The plug-in approach can be used to implement more sophisticated user interfaces. The main difference from the scripting approach is that you can create a panel that behaves like a normal InDesign panel. (Script UI panels have a different appearance and do not behave like InDesign panels.) This includes the ability to watch for changes in a document and update the panel accordingly.

The InDesign CS4 Products SDK includes the FlexUIStroke sample. This sample demonstrates combining a C++ plug-in development with Flex. The plug-in portion provides the following:

  • A native panel containing a Flash player widget
  • An observer that watches for changes to the stroke weight in the current selection and updates the panel accordingly
  • Code that alters the stroke weight in the InDesign object model

The following video demonstrates what is possible using the plug-in approach.

For details on this panel, see the documentation and source code in the InDesign CS4 Products SDK. Each sample is documented in the API Reference. Click on Samples > All Samples >, then select the FlexUIStroke sample.

For information on how to compile the SWF, see Building Flex Files below.

You will find the plug-in in one of the following locations (depending on your platform) in the SDK:

  • <SDK>/build/win/prj/FlexUIStroke.sdk.vcproj
  • <SDK>/build/mac/prj/FlexUIStroke.sdk.xcodeproj

Building Flex Files

To import and compile either Flex project using FlexBuilder 3, follow these steps :

  1. Run Flex Builder 3.
  2. Choose File > Import > Flex Project…
  3. Select the Project Folder radio button
  4. Browse to the Flex project folder (this folder should contain the .project file).
  5. Uncheck the “Use default location” checkbox. This allows you to import the project in its current location.
  6. Click Finish.

If you do not have FlexBuilder, it is possible to compile these mxml files using the free Flex SDK:

  • mxmlc <…>/flexscriptuidialog/FlexScriptUIDialog.mxml
  • mxmlc <…>/flexuistroke/flexuistrokemxml/src/flexuistroke.mxml

Comments are closed.