Fireworks to Flash

483

Tom Buchok

285

7426

12-01-2009

Description

Fireworks is a great application for prototyping banner ads. In a follow-up post, Tom Buchok, co-founder of Bannerflow, shows us how to take Fireworks prototypes and import them into Flash for banner ad development.

Requirement

Instructions

1. Description

Prototyping and exporting banner ads from Fireworks to Flash

2. General

In our previous post, we looked at how Fireworks is a great tool for prototyping and designing banner ads. Using the Symbols and Frames/States features make Fireworks the ideal application for designing banner ads. See the previous post here.

This post focuses on the process from taking our banner ad designs and importing them into Flash. We've set up a new banner ad file, for "Tom's Windshield Washing Service", for this post.

You will notice that before transfering to Flash all the ad elements have been converted to Symbols (F8). Below you can see each of the different Frames/States used to create this banner ad.



Figure 1: The PNG file with 3 States

3. To SWF

Once this ad is complete in Fireworks you can use Fireworks' export feature - selecting Flash > Export SWF or Save As > Adobe Flash SWF for Fireworks CS4.

Once exported or Saved As, the result is a SWF file that you can then import into Flash.

This is a bit confusing for some Flash users. Although editable Flash files are in FLA format, this exported SWF is completely editable in Flash.

4. Flash

Now open up Adobe Flash, and create a new file - using the same dimensions of our banner ad. In this case, 300x250 pixels. Finally, select File > Import to Stage. (Depending on the project, it may be more convenient to Import to Library).



Figure 3: Import into Flash

Here is the result:



Figure 4: Import into Flash

5. Tweaking

Once the SWF is imported into Flash, you will immediately notice that the fonts and some shapes are not perfectly imported. As with most transitions between programs, each layout will need to be tweaked once it is imported.

Other housekeeping needs include creating movieclips for each of the elements that you need to manipulate, and distributing shapes to different layers. Once this has been completed and code has been added to create the animation, the banner ad is complete.



Figure 5: Layers and code

Here the final result

Figure 6: Final Result

The reason it is great to have these import options is that you don't have to start from scratch within Flash. The general prototype and design maintains its shape in Flash. And it sure beats importing bitmaps into Flash, which will great increase the file size.