Silverlight, WPF, Fireworks, Flash, XAML, .NET, User Experience, Graphic Design, Web Programming and more!
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 <Grid.Resources />, 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
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.
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!
Download Preview Panel: Fireworks Gradient Direction Editor Panel
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)
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.