Using Fireworks MX 2004 for Flash Graphic and Interface Design

Tweet

One of the things that can take the longest time when developing Flash applications is the design of interfaces and graphics.

It’s often a trade off between using lightweight vector objects created in a vector based application such as Freehand or Illustrator or to just use imported bitmaps.

More often than not it is the developer / designers choice or preference that dictates how the integral parts of the interface are created whether bitmap or vector, but there is an often overlooked gem in the Macromedia arsenal of applications that you can use as an alternative to create lightweight interfaces…Fireworks MX / MX 2004.

Fireworks MX / MX 2004 excels in creating lightweight editable, scalable vector imagery, and is much easier to use for rapid development of interface or graphics than say FreeHand or Illustrator with a vast range of fill and stroke types as well as the new autoshapes.

Creating vector graphics within Flash itself can lend itself to multiple episodes of hair pulling, but by using the built in shapes and pen tool in Fireworks MX / MX 2004 in conjunction with the selection and subselection tools, you can quickly create the graphics you need.

From there, it’s as simple as creating the graphics in Fireworks MX/ MX 2004, selecting ‘Edit > Copy’ in Fireworks and selecting ‘Edit > Paste’ within your Flash document.

Within Flash you can then fine tune the imported objects using Flash’ selection and subselection tools to create your final masterpiece.

Take the example vector illustration below, all quickly created in Fireworks MX 2004, imported straight into Flash with no problems whatsoever and all weighing in under 20K in the resultant SWF!

http://www.phireworx.com/content/blog/sitepoint/flash_and_fireworks.jpg

Don’t take my word for it, Macromedia offer a 30-Day trial for Fireworks MX 2004, so why not see if it suits your needs?

NOTE: You will need to take care when importing graphics that may have any live effects or filters you may have applied as these will be converted to bitmap representations

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.dxwebs.com n0rd

    You said it there, Steve. I preffer Fireworks to Photoshop in a lot of design cases. And the integration with Dreamweaver and Flash has become much better in the MX release. One command which Macromedia could have introduced in Fireworks (it can be found in Flash only) is the Trace Bitmap function, since it reduces the size of image files considerably (and can lead to some really cool effects).
    Otherwise, copy shapes and paths from Fireworks and paste them into Flash works as magic.

  • Colin Ramsay

    I think Fireworks is only *really* useful when you’re using it in conjunction with Flash, where, as you say, it’s extremely valuable. However, outside of that area the latest version of Photoshop proves why it’s the #1.

  • George Guz

    I think photoshop is a nice software to edit and create layouts and webpage, optimize, ,imagine to export and import a lots of types of files, etc, I preferred Photoshop, Is a good software!.

  • sgrosvenor

    I used to use PhotoShop of the time and whilst it excels at bitmap manipulation, it’s vector manipulation leaves a little to be desired ( a little clunky IMO).

    Where Fireworks excels especially in the latest version is the editability when working in vector mode, for creating web graphics, interfaces etc. Where Fireworks doesn’t excel is in bitmap manipulation, which is why i still use Photoshop for any major bitmap manipulation especially where masking is concerned

  • dave

    Any idea if its possible to take vectors from from Flash back to fireworks? It always pastes as a bitmap into fireworks, although its a vector in flash… (MX2004 versions)

  • Michael Proctor

    I agree that Fireworks is a good overall image creating software, but n0rd is right, it really does need the Trace Bitmap function that is in Flash, when you dealing with a customers logo the only way to do it is by scanning it at huge res then introducing it to Flash to trace.

    Is there a way to get it back to Fireworks as dave asked? it would be great to save a vector based copy of the logo for future use.