Roundtrip images with Flash!

Roundtrip Ra-Uun-duh tree-up
Macromedian term to describe the process when editing an object whether it’s a bitmap, code, or a swf and transferring its properties to another Studio app instantly thus eliminating tedious and repetitious import steps in the process.

Not only can you copy and paste directly into Flash from Fireworks and retain alpha transparency, but you can also roundtrip bitmaps with Fireworks while preserving the PNG source file.

Before Studio 8, you would have had to either update the bitmap via “right-click > properties” in the library panel or delete it and re-copy the bitmap over from Fireworks which creates a Fireworks Objects folder located in the Library.

I got into a habit of copying bitmap and vector objects from Fireworks and pasting them into Flash over and over again until I got it just right that it took me longer to get used to the FW/FL Roundtrip workflow enhancement. A couple seconds of preparation will be well worth it to be in-sync with Flash and bitmap editing.

For this walk through, it is recommended to download the source and follow the steps below:

  1. Open Flash 8
  2. Open movie.fla
  3. File > Import > Import to Stage, and select image.png
  4. In the PNG Import Settings, adjust the options like below and click ok.

    Note: Experiment with the PNG Import Settings. (Selecting “Import as a single flattened bitmap” will not create a folder called Fireworks Objects in your FLA.)

    This could be my personal preference, but I can’t stand the auto-generated Fireworks folder that gets created in the Library when copying objects from FW to FL. You can’t win, just leave it there until your finished going back and forth, then kill it and organize your library.

  5. Select the “caddy” bitmap on the stage
  6. Click the “Edit” button found in the Property Inspector (PI) which will invoke the “Roundtrip” process to Fireworks.

    Note: If the “Edit” button is disabled, then open the Library panel, right-click image.png > properties, click Import and select image.png in the roundtrip folder, click ok and proceed to the next step. The reason its disabled is somehow Flash wasn’t able to detect the source path so we will force it or update it here.

  7. Make an edit to the bitmap
  8. Click “Done” in the top-left corner of the document in Fireworks which will complete the last step in the Roundtrip process. At this point, you should see the image updated in Flash.

Now Roundtrip until your hearts content…just remember, when the you Roundtrip the PNG file back into Flash, it gets automatically saved so no reverting unless you made a copy of the file beforehand. ;)

In order to retain the Alpha transparency, make sure to set the canvas color to transparent in Fireworks, if not, the Roundtrip process will carry the background information with it unlike the copy/paste feature where it doesn’t matter if the canvas color is transparent or not.

Fireworks is also the central hub and starting place to design web site mocks and then shift your mindset into either Dreamweaver or Flash’s environment for final implementation of the design.

The more integration with the Studio apps, the more productive we can become when developing web sites and rich web applications.