Grant Hinkson Blog » Fireworks

Fireworks to XAML Panel Updates (CS4 + Silverlight Fixes)

granthnk — Mon, 27 Oct 2008 03:56:18 +0000

UPDATE: Click Here for the Latest Version
If you’re using Fireworks CS4 and the Fireworks to XAML Exporter, chances are you’ve seen a problem with the quotation marks in the rendered XAML. I first saw this several months ago, but assumed it was just an issue with a beta version of Blend I was using at the time. As it turns out, changes to the core Fireworks text rendering engine were actually causing the problem – a result of the way I was copying text to the clipboard.

The original version of the panel creates a Fireworks text block, pastes the generated XAML inside the text block, then does a clipCut() to remove the text block from the stage and copy it to the clipboard. The latest version (posted here), sends the XAML back to the Flash panel and, using the System.setClipboard() method, pastes the XAML to the clipboard. The result is a noticeably faster export operation, a very nice surprise.

I’ve also done a little additional housecleaning, adding support for the new pixel-based rounded corners feature of Fireworks CS4. This is actually one of my favorite new features — where previously the CornerRadius of rectangles in Fireworks was percentage-based (meaning the amount of roundness would change as you resized the rectangle) you can now specify a pixel-based CornerRadius. This approach ensures the same CornerRadius regardless of the size of the rectangle. (This is how both WPF and Silverlight do it also). The updated panel will honor both percentage and pixel-based roundness modes.

I also updated the way text is converted to paths. Now, instead of a group of individual path objects (the result you get when you select Text > Convert to Paths in Fireworks, I go two steps further, first ungrouping the indivual paths, then joining them into a single path. The result is a much cleaner single Path object.

One last fix I made over the weekend addresses a problem exposed by Silverlight. The FW to XAML panel automatically adds a .Resources collection to the outermost panel, should any of its children need to define a brush resource. Often, this Resources collection was rendered as an empty node , something that the Silverlight engine does not like (WPF just ignores it). So, this latest update removes the Resources node if it’s empty. You’re welcome!

Summary of Changes

New Clipboard Logic – supports Fireworks CS4, improved performance
Support for both percentage and pixel-based rectangle roundness modes (pixel-based mode introduced with FW CS4)
Text to Paths operation results in fewer XAML objects
No longer render empty Resources collection (exposed via Silverlight)

Additional Notes

As always, you’re guinea pigs. Please let me know if you run into any problems with this update. I have run it through my standard gauntlet of tests, but I may have missed a use case.

Download Latest Version

Fireworks CS4 Beta on Adobe Labs

granthnk — Tue, 27 May 2008 16:23:09 +0000

The public beta of Fireworks CS4 is now available for download at labs.adobe.com. In addition to a very noticeable (and polished) cosmetic makeover, there are a lot of great new features. Check out Nick’s list of top new features. Alan has also posted a Breeze session archive demoing the new features. My panels should all function correctly, but please let me know if you run into any issues and I’ll work to get them fixed.

New Fireworks Panel: Gradient Direction Editor

granthnk — Thu, 15 May 2008 16:56:20 +0000

Over the past several months I’ve been working on a new “BrushManager” panel for Fireworks. I’ve been creating all of the individual pieces as AS3 components, both for ease of development and maintenance reasons. The BrushManager (I’ll eventually come up with a better name) lets you quickly toggle between Solid Fill, and Linear or Radial Gradient Fill. The Gradient editing capabilities currently in my Gradient Panel will be migrated into this new panel, along with a new precision Gradient Direction Editor. I currently have a test version of the Gradient Direction Editor in a standalone Fireworks Panel, available for download below.

Take the panel for a spin and send me your feedback. It’s still a bit buggy at this point, so use at your own risk!

The video below is encoded at 1280 x 720, so be sure and watch in HD on the Vimeo site!

Fireworks Panel: Gradient Direction Editor from Grant Hinkson on Vimeo.

Download Preview Panel: Fireworks Gradient Direction Editor Panel

New Fireworks Panel Preview: ResourceDictionaryPanel

granthnk — Sat, 01 Mar 2008 19:39:07 +0000

A couple of months ago I posted a preview video of the “Fireworks Brush Manager”. Since that post I’ve had pretty much no free time to work on the project. I’ve update the layout a bit, added new icons, etc., but haven’t really focused on finished up the functionality. Last week I spent a little time before bed one night reviewing how I expected to interact with the panel and realized that I was trying to cram too much into a single panel. I realized I really had two panels: a ResourceDictionary Panel and a new Brush Editor panel. Since I have the ResourceDictionary part of the thing in a partially working state, I decided to go ahead and post a preview release to start getting some feedback and bug testing going.

I only have the “Open” function working, which lets you browse for a ResourceDictionary. I’m planning on adding Save capability and a Sync feature, which will synchronize objects on the stage with brushes assigned to them should the resource change. Watch for that over the next 3 months

Known Issues: I’ve found that I have to open the same ResourceDictionary twice sometimes in order for the file to be recognized. So if your brushes don’t appear at first, try again. If your brushes never appear, or if you run into bugs, please send me a note along with your ResourceDictionary and I’ll add it to my list of test RDs.

(7: The number of times I typed “Panel” in this post, 8 after that last reference)

Download ResourceDictionaryPanel Preview
(Double-click MXP to install, swf included if you have problems, copy directly to the Command Panels folder: C:\Program Files\Adobe\Adobe Fireworks CS3\Configuration\Command Panels)

Fireworks to XAML Converter Update

granthnk — Wed, 18 Apr 2007 01:35:33 +0000

I’ve released an updated version of the Fireworks to XAML panel along with a new article at the Fireworks Developer Center at adobe.com. The article provides a nice overview of the panel, the features it offers, and how you can tailor the settings to meet your specific needs. The latest version includes a number of bug fixes, support for textures and patterns (ahh yeah!) and replaces the current masking implementation with clipping paths. You can download the latest version from the article posting.

The article is featured in the all new Fireworks Developer Center, updated along with the new CS3 launch. Fireworks CS3 has a ton of great new features that you definitely need to check out. There are lots of great new articles and walkthroughs in both the Developer Center and the Design Center.

Fireworks Gradient Panel

granthnk — Wed, 18 Apr 2007 01:25:41 +0000

Just in time for the CS3 Launch – my Fireworks Gradient Panel that I wrote about in January now has a nice new face and a handful of additional features — the ability to change the fill mode to solid, linear gradient or radial gradient and set the orientation on gradients. I also added the ability to synchronize the color and opacity nodes, a requirement by gradients in Flash. I’ve added a slider to the opacity stops so you can quickly set their value as well. I’m using this panel all the time and find it really streamlines my work.

I have a new article at the Fireworks Developer Center that digs a little deeper into the features — you can download it from there.

Article and Download

Fireworks Gradient Panel

granthnk — Wed, 24 Jan 2007 04:58:03 +0000

I’ve been working on a custom Gradient Panel for Fireworks off and on for a while and wanted to go ahead and get it posted. It’s not in a final state, but it’s definitely usable as is. Having worked with XAML for quite a while now, I’ve grown to expect the ability to hand-tweak the offset values of GradientStops. Now I can do the same thing in Fireworks, all from the comfort of a panel!

I’m providing two ways to edit with precision: a zooming gradient stop interface and a grid of values. The attached photos show the Gradient Panel in action.

Download Fireworks Gradient Panel Extension

Fireworks to XAML Minor Update 0.9.3

granthnk — Wed, 04 Oct 2006 01:47:37 +0000

A minor update of the Fireworks to XAML Exporter has been posted on the Infragistics Visual Design Group site. This post addresses a gradient conversion issue that occurred under certain circumstances.

Fireworks gradient fills consist of a collection of color nodes and a collection of opacity nodes. Because an object can also have an opacity mask applied separately from the collection of opacity nodes, I am merging the opacity nodes with the color nodes into a single GradientStopCollection. Each gradient stop is of the format #AARRGGBB, which results in the same effect. This allows me to apply a separate opacity mask and maintain the Fireworks visual. This issue occurred during the node merge process.

Fireworks to XAML Exporter 0.9.2 Released

granthnk — Tue, 26 Sep 2006 18:39:56 +0000

I’ve posted the lastest version of the Fireworks to XAML Exporter on the Infragistics Visual Design Group site. Lots of significant changes are included in this release. You’ve asked for the ability to save directly to a xaml file, it’s there. You’ve asked for image support – included. Lots of other quality improvements have been included as well, so the translation should be much more accurate now. Keep those comments and suggestions rolling in and watch for updates in the future.

FW to XAML Update

granthnk — Wed, 06 Sep 2006 05:47:22 +0000

In light of Mike Swanson‘s latest contest announcement, I thought it would be appropriate to post a status update on the Fireworks to XAML Exporter. The Fireworks PNG format isn’t included in the contest, but just knowing that other file format converters are being worked on encourages me to release the latest version of this converter. I plan on posting an updated panel within the next week that supports saving directly to .xaml files instead of just providing clipboard support. I really like the clipboard feature, but I think file support is definitely expected, especially for heavier files. I have updated the path logic so that paths now behave like paths natively drawn in EID. Also, instead of just exporting selected items, you can now choose to export the current frame in its entirety (layer support included). I’ll put together a comprehensive list of changes in the coming week, just wanted to keep those of you who are currently using this informed.

Stay tuned — it should prove to be a nice update!