Fireworks is a great tool for building and laying out the elements of an Edge Animate project, but until now you've had to manually export individual images and then recreate your layout in Edge. The Export to Edge command will do this for you, exporting your Fireworks document as a collection of HTML and JS files that can be opened by Edge Animate. All of the elements on the first state of the first page of the current document will appear in Edge with the same size, location, color, etc. that they have in Fireworks.

Exporting to Edge

When you run the Edge Animate > Export to Edge command, it will ask you to pick a folder to which the Fireworks document will be exported. The name of the current document is used to name the Edge files.

The last-used export folder is remembered across invocations, so the next time you run the command, it will re-export the files to the same folder. To export an already exported Fireworks document to a new location, run the Change Export Folder command. This command opens a folder selection dialog where you can select a new folder and then immediately exports the Edge files.

Note that exporting a Fireworks document to a folder that already contains Edge files will completely replace those files. You will lose any changes you had made to the files in Edge Animate. Any existing images in the images/ sub-folder will also be deleted, so be careful about using the command on existing Edge documents.

Supported elements

Many Fireworks elements will remain fully editable in the exported Edge Animate document, but not everything can be converted with full fidelity:

• Rectangles should maintain their fills, strokes and corner roundness. Dashed borders are also maintained (just don't use the "Dotted" style). The rounded rectangle auto shape can be used to create rectangles with only some corners rounded. Any patterns or textures on the rectangle will be lost.

• Text elements maintain their color and font selections. They may appear slightly different in Edge, as the Fireworks text engine is different than the browser's.

• Lorem Ipsum auto shapes are exported as blocks of regular text.

• Bitmaps are exported as 32-bit PNGs in the images sub-folder of the Edge project folder, which is where Edge normally stores images. An image whose opacity has been adjusted in the Properties panel is exported as a fully opaque bitmap, and then the transparency is reapplied via the Opacity attribute in Edge. This lets you further modify the opacity even after you've exported the Fireworks file.

• Rich symbol instances are exported as flattened images. Since there's no easy way to tell if two rich symbol instances look identical, each one is exported as a separate image.

• Symbol instances are exported as fully editable Edge symbols. If your Fireworks symbol contains an image, a rectangle and some text, those elements will also appear in the symbol in Edge. However, a symbol that contains just a single image will be exported as a regular image, since modifying the external image will automatically update everywhere it's used, which is the same benefits that a symbol gives.

• Perfect circles are exported as squares with 100% rounded corners, to simulate a circle.

• Rectangular paths, i.e., an ungrouped rectangle, are exported as rectangle elements, as long as the path hasn't been rotated.

• Groups are exported as flattened bitmaps.

• Invisible elements are ignored, while elements on locked layers are exported.

• Layers whose names begin with # are exported as a single flattened bitmap, with the same name as the layer, minus the #. This makes it easy to export an image that's made up of multiple elements without having to first group or flatten the elements.

• Shadow and glow effects on rectangles, circles, symbol instances, and text elements are exported and remain editable in Edge. Both inner and drop shadows are supported, as well as inner and outer glows (though text elements support only drop shadows). Only the first glow or shadow effect is exported, as Edge Animate does not support multiple effects.

  Effects on image elements are flattened into the bitmap, since CSS effects are applied only to the square edges of the image, which is usually not what you want.

All other types of elements and auto shapes are exported as images. If you want to export one of the above elements as a flattened image, you can just group it first. For instance, if you have a rectangle whose texture you want to appear in Edge, just group the rectangle with itself and it will be exported as an image.

Each element should have the same name in Edge as it does in Fireworks, as long as it's unique. Unnamed elements are named automatically based on their type.

The Fireworks canvas size will determine the size of the stage in Edge, and its background color will set the color of the stage.

Percentage-based layouts

If you append the % character to the name of an element, like Title %, its position and size will be exported as a percentage of the canvas size, rather than absolute pixels. This makes it easier to automatically change the composition's layout as its size changes. The % character will be stripped from the element's name.

Limitations

While useful for transferring the basics of a design from Fireworks to Edge, the command does have a number of limitations currently:

• Rotated elements should display with the correct rotation and location in Edge. If you scale an element proportionally and then rotate it, it should appear correctly, but if you reverse the operation, all bets are off.

• Elements that were rotated around something other than their center probably won't appear in the right place.

• Elements that have been skewed in either the X or Y direction should appear correctly in Edge, though skewing in both directions isn't currently supported. Skewing plus scaling also doesn't work.

• A partially transparent stage color is not supported, as Fireworks lets you specify either a fully opaque color or fully transparent background for the canvas.

• Textures, patterns and gradients are not supported in editable rectangles or text. If you want to maintain the appearance of these styles, just group the element to export it as a bitmap.

• Text elements will likely shift a bit, particularly vertically, depending on the size and font.

Exporting animations as Edge symbols

In addition to exporting a Fireworks document as an Edge project, you can export a multi-state document as an Edge animation symbol. The animations can be exported as either a series of PNGs or a single sprite image.

When you run the Edge Animate > Export as Edge PNG Animation command, you'll be asked to select a directory where the animation will be saved. Each state in the Fireworks document will then be exported as a 32-bit PNG, as long as its Include when exporting option is checked. The PNGs are added to a timeline, separated from the previous frame by the delay time set in the Fireworks States panel. (To change the delay, double-click the number to the right of the state name and enter a delay in 1/100ths of a second.) The PNGs and the timeline code are then bundled together into an .ansym file, which is what Edge Animate uses to store symbols externally.

The Edge Animate > Export as Edge Sprite Animation command works similarly, but the animation frames are stacked horizontally in a single wide image. The image is clipped to show a single frame's width of the sprite, and its background-position property is animated to show one frame at a time. The advantage of the sprite export is that the animation makes just one http request when pre-loading the image, vs. one for each frame in the PNG export. But the very wide images that are created might pose problems in some browsers.

Once the animation is exported, you can click the + button in the Symbols section of Edge Animate's Library panel and select Import Symbols.... In the resulting dialog, select the .ansym file that you exported from Fireworks.

The looping setting in the States panel controls how the exported animation behaves. The default is Forever, but you can change it to one of the other options in the menu.

Note that symbol names in Edge Animate have to start with a letter or underscore, and can contain only letters, numbers, hyphens and underscores, so any other characters in your document's filename will be removed. If your document's name doesn't start with a letter or underscore, an underscore will be automatically added to the front of it.

Importing files from Edge into Fireworks

In addition to exporting Fireworks files to Edge Animate, it's also possible to go the other way around. When you run the Edge Animate > Import from Edge command, it will ask you to select the .html or .an file that you want to import. A new Fireworks docment is then created with the same size and color as the Edge document.

Much of the contents of the Edge Animate composition are recreated as Fireworks elements, but given the command's early stage, some elements won't be imported correctly. Images are imported from the images folder of the Edge project. Rectangles are recreated as rectangle primitives or rounded rectangle auto shapes, depending on their corners. The border and fill colors of the rectangles should be maintained.

Text elements may shift a bit, as the two font engines are different. Some font families, especially web fonts that don't also exist on your machine, may not be set correctly in Fireworks.

Edge symbols are recreated as Fireworks symbols, maintaining their editability. Rotated and scaled symbols might shift a bit if they contain text.

SVG elements are not currently supported. They will be inserted as grey rectangles with the same size and position of the corresponding SVG element.

A parent element containing children will appear below its children instead of above. Elements nested more than one layer deep won't be positioned correctly.

Note that only the base state of the Edge composition is imported. Any transformations or changes that are applied after time 0 are not imported.

Release history:

0.3.5

2012-12-16: Fixed a bug where accented, non-ASCII characters would not display correctly in Edge.

0.3.4

2012-12-10: Added better handling for the case where someone shared a file that had been exported to a folder that doesn't exist on your machine.

0.3.3

2012-12-09: Fixed some bugs in the animation export that caused the frame times to be calculated incorrectly and broke when exporting more than 99 frames. Fixed a bug that caused non-square paths to be exported as images. Automatically make the symbol name conform to Edge's requirements.

0.3.2

2012-12-05: Got the extension working again on OSX by outputting files with DOS line endings, which Edge Animate seems to require.

0.3.1

2012-10-10: Updated the minified Edge JS to what's included with the public Edge Animate 1.0 release. Tweaked the .an output file.

0.3.0

2012-09-24: Added commands to export Fireworks documents as animations. Updated the extension to work with Edge Animate 1.0. Added support for shadows and glows, flattened layers, and percentage-based layouts. Fixed layering of elements in symbols.

0.2.0

2012-04-18: Public release.

0.1.2

2012-04-15: Added basic Edge import.

0.1.1

2012-03-18: Basic Edge export.