Fireworks to Xaml Panel Overview from Grant Hinkson on Vimeo.

I’m really excited to announce that Foundation Fireworks CS4 is now in the wild! I’ve been working on this book, along with a number of contributors, over the past several months, and it’s rewarding to finally have it published and in my hands. I’m particularly proud of the Extending Fireworks chapter — this is the chapter I wish I had when I first started writing Fireworks panels.

Two full-length chapters (including Extending Fireworks) have been made available on Adobe’s Fireworks Developer Center. You can download these for free and get a feel for some of the more advanced chapters in the book. Overall, I think we struck a nice balance between introductory concepts and real-world use cases. You’re not only introduced to the vector and bitmap tools, you’re walked through creating Flex skins, Adobe AIR prototypes, and E-Commerce web site layouts. If you’ve been wondering why Fireworks is the prototyping tool of choice for many visual and interface designers, this book may provide the answer!

• Download Windows Live Photo Gallery
• Download the Windows Live Photo Gallery SDK
• Check out the Windows Live Photo & Video Blog

Photo Gallery includes a publishing API that can be used to create custom plugins to publish your photos to any site. The app ships with a Flickr plugin and the SDK includes the source for the plugin. Without any modification, you can select a number of photos from your library then publish either to an existing Flickr Set or a new set. Along the way, you can set the permissions (public, friend, family, friend & family) for all of the photos you’re uploading.

So, this is where my modification comes in. There are times when I want to tag a few photos as public and the rest as private. With the default plugin, this would require two upload operations. With my updates, the plugin looks for specific tags on each photo that set flickr permissions:

switch (keyword.InnerText)
{
     case "flickr: public" :
          isPublic = true;
          break;

     case "flickr: family" :
          isFamily = true;
          break;

     case "flickr: friends" :
          isFriend = true;
          break;

     case "flickr: friends+family" :
          isFriend = isFamily = true;
          break;

     default :
          tags.Add(keyword.InnerText);
          break;
}    

I can now quickly add a tag using Photo Gallery and let the plugin handle the permissions for me automatically. This is by no means a perfect solution, but something that has saved me some time. I had to change the plugin in a few places throughout the project, but you can find the heart of the change in the SessionLoadItemInfo method of XmlHelper.cs. If you just want to take the plugin for a spin, run PluginSample.msi found in the bin\Debug folder of the zip.

Download Source: Windows Live Photo Gallery Flickr Uploader

In addition to all the writing that you can’t enjoy yet, I submitted a Mix10k contest entry titled Bitster — check it out and vote for me if you get a chance! I had a lot of fun working on it. I used some bitmap parsing concepts posted by Joe Stegman to create the effect. Of course I had lots of other ideas that I wanted to pursue, but the 10K limit stopped quite a few of those in their tracks.

I’ve also been working on the next release of NetAdvantage for Silverlight Data Visualization — I’m really excited about the work we’re doing there. I have fodder for plenty of posts queued up based on our experience with that product, so watch for a number of posts in the coming weeks and months ahead.

Since this is just a rambling post and a re-cap of the past several months, I want to also mention Quince, the new UX Patterns Explorer from Infragistics. Quince was just introduced today and I think it’s going to grow into a must-have resource for User Experience and Application Design professionals. Using Quince, you can browse existing and accepted patterns that solve common user interface problems. You can also post your own screenshots and solutions – something I’m really excited about. I can’t wait to see the community embrace this tool and advance user interface concepts!

So, that should do for now. Watch for more from me in the coming weeks, but don’t hold me to any sort of commitment! I just can’t make frequent-post commitments.

http://code.google.com/creative/radiohead/viewer.html

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

Josh just posted an update to his WPF-based podcasting app Podder. I have been working with him in my spare time over the past month  (or more) to provide a shiny new skin and test out his “structural skinning” concept. Just like my experience styling custom controls or other WPF applications, this experience required quite a bit of back-and-forth between myself and Josh. There were additional properties and events that I needed to fully deliver the look I was going for with my skin. After this interaction, I suspect that other designers wanting to skin his app will have an easier time now that we’ve been through this process.

Josh and I both wanted to get this release posted while I was at Mix so we pushed out my skin prior to me having time to clean up the resource structure. I’ll analyze the project structure with Pistachio next week, remove unused resources, and consolidate my resource structure into something more manageable. So, stay tuned for an update in the next week or two! While I was at first apprehensive about releasing prior to doing this, I now think it might actually be beneficial — designers new to WPF can see what a project looks like before and after resource cleanup and organization.

So, check out Josh’s post, and track me down this week at Mix if you want to see a demo of the app or talk to me about some of the techniques I used. I’ll post more thoughts on some of my design decisions in the coming days.

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)

The second video demonstrates a feature that I’m really excited about: ResourceWashing. Using ResourceWashing, you can “wash” the brushes defined in ResourceDictionaries with a new color. Since the brushes can be washed at runtime, you can create an application that can be infinitely customized by the end user — really exciting! This is the same washing technology used by AppStylist for Windows Forms in the “New from Template” feature. The xamRibbon is the first control whose brushes have been grouped into “WashGroups” to really take advantage of this technology. Moving forward, we’ll be applying the same techniques to the other controls. I can’t wait to see what the WPF community ends up creating with this technology!

Videos

• xamRibbon QuickStart Video
• ResourceWashing Video

If you’re reading this blog, you’re probably also reading Josh Smith‘s blog, and you’re probably aware that I’m working on a new skin for Podder, his WPF podcast reader. Throughout the design process, I’ve had lots of different ideas running through my head – I really have a clean slate to play with here, and any of you who have designed an app or web site from scratch know how challenging that initial blank page can be. There are so many possibilities, so many directions you can take the layout; ultimately, you just have to go with something then tweak until you go crazy. It’s definitely a different process than designing something that works (visually) with an existing product line. There, you have an established aesthetic that drives the design.

So, as I go into the polish stage and really have a feel for the direction the layout is going, I’m looking at ways to make the application feel responsive, alive. One way I’m doing this is through my “McGuffin”-Enabling Image Converter. This converter is bound to an Image’s Source property and then returns an “averaged” Color – I take a random sampling of pixels then average their color values. The resulting color represents the generalized color of the image. In Podder, I’m using this converter to set the background image of the application to a color that works well with the image of the selected podcast, so as the selection changes, the color of the application changes to match, and the plot advances (my McGuffin).

I’ve added this converter to the Infragistic ToyBox assembly that I started a while back (and haven’t actively added to in a while). Download the sample project to see the converter in action. (Note: it currently only works with local images, not images whose source points to a web address).