Fireworks Flex Components : Label

One thing I noticed the other week and have only just had a chance to invesitgate further is that Fireworks doesn't have a Label or a Text component. There is a good reason for this; it doesn't need them. If I draw a rectangle path on the stage and export it the rectangle is defined as an Image and a gif is exported with the MXML file to fill that position. But try placing a piece of text onto the stage and then exporting to MXML. Fireworks will define the Text within MXML as a Label. It will also define a Label style to define the appearance of the Label. Even more interesting if you add a second seperate piece of Text with some difference in appearance it will define two custom styles to define the appearance of the two Labels and add the styleName attribute to the Label. There is one final piece of intelligence that ensures the Fireworks to Flex workflow is spot on. Add a multi-line piece of Text to the stage and export. What you'll notice is that the multi-line text is exported as a Text component and that a Text style is defined.

This capability to appropriately export Text into mxml isn't mentioned in any documentation I can find and isn't immediately obvious when you look at the Flex Components. But it certainly is very useful once you know about it.

Fireworks : Flex Style Explorer

A while ago I saw this article on Flex styling in Fireworks CS3. I didn't write about it at the time because I didn't have access to CS3 and couldn't really test things out. But in my continuing search for the best way to integrate Fireworks into the Flex development workflow I've just taken another look. The real gem in this article is the Flex Styles Explorer. I've been using the online version of this tool from the day it first appeared and I use it often. It's a genuine time saver for styling Flex components. The Fireworks version of the tool gives easy access to the tool offline as well as allowing you to copy the generated css for use in Flex. It doesn't apply the styles to the Fireworks Flex Components so you won't be able to completely reproduce the design in Fireworks. But it provides a path for getting it quickly into Flex and anything that makes life easier is a good thing to me.

Adobe CS3 : Suite Inconsistencies

One the new features that I'm loving in Photoshop is the new compact panel system. When not in use panels appear as a cluster of grouped buttons on the right hand edge of the interface. Selecting a panels button (i.e Layers) opens that panel for use. Selecting a different panel will close the current one. It also seems to have enough intelligence to know when you're likely to want to keep it open. So far I haven't found any annoyances using this system in Photoshop. In fact more than once I've been heard to exclaim loudly how much I love it.

The same system is used in Flash and Illustrator. But hasn't been added to Fireworks and Dreamweaver. This adds a significant inconsistency between applications within the suite. Sure this is a minor gripe. Theses applications were originally released by two companies in two completely unrelated suites. So it's not a surprise that both suites of software aren't fully integrated in this first post merger release. But that doesn't mean I can't be working in Fireworks wishing I had that great compact panel system that they have in Photoshop.

The one post-Macromedia product that does have the compact menu is Flash. But the system is no where near as stable and intelligent as the Photoshop implementation. The problem seems to mostly effect the larger panels like Help and Actions. The Help panel in particular seems to be very flakey in it's behaviour. I guess we'll need to wait for CS4 to see these things sorted out.

Lightroom Painter : Odd metaphor but very useful

I've started using Adobe Lightroom for a photography project at work. I started a few weeks ago as the number of photos I needed to manage for the project grew and grew. It didn't take me long to get my head around Lightroom's structure and to find it quite indispensible. It wasn't perfect but the issues were small niggles rather than real issues. So I was very interested to see what they had changed with the 1.1 update that was released last week. The changes were mostly subtle but all were welcome. But there was one that took me a little while to get my head around ; the Painter. When viewing a collection or folder and you're in grid view a spray can icon appears in the grid tool bar. The spray can has a vertical tag icon and the tooltip says "Painter". On rollover we see some dots emerge from the cans nozzle. So you select the spray can and it comes off the tool bar (there is a darker circle showing where it belongs). Clicking on the circle puts it back. But you find yourself wondering what the hell does it paint. With the tool selected a partial answer is evident because you now see "Paint : Keywords" with a text field next to the Painters circle. It turns out you can type keywords in the text field and then "paint" them onto multiple images. In fact successive paints will toggle the keyword (i.e if the keyword already exist it is removed. Nice :o)

But wait there's more! It turns out Keywords is one option of many. You could also choose to "Paint" a :

• Label
• Flag
• Rating
• Metadata
• Settings
• Rotation

Settings is pretty interesting as it lets you paint on one of the presets (i.e Sepia tone, Grayscale, sharpen) or your own user defined settings. Rotation is sort of fun as you watch a whole row of images rotate clockwise.

It still feels sort of odd to be "painting" on keywords or a rotation. But ignoring the metaphor it's a very useful tool if you use any of these attributes. I use keywords to order my collections and I use ratings when working out image preferences. The keywords I use in bulk. Though ratings I tend to use on one image at a time. But I'm sure we all have very different workflows so this will suit different users in different ways.

Fireworks Flex Components : Extended

In a recent post I was looking at the steps required to create a simple HRule FFC (Fireworks Flex Component). You may remember that I included a property for defining the strokeWidth style but I didn't go so far as to actually get the FFC to update it's appearance because I wanted to keep the post simple. Over the last couple of days I've been working towards implementing this last element. But it turned out to be a little more difficult than I expected and required a few changes to my original FFC to make it work. The aim of this post is to look at these changes and what was required to make this work.

Firstly, let me talk about the reason I had trouble finding what in the end was quite a simple solution. With Fireworks javascript the best way to find out whats going on is to select the step you are interested in from the history panel and then select "copy steps" from the panels menu. This copies the relevant javascript to the clipboard. But that doesn't help us with our FFC's because the 'Symbol Properties' panel talks to the FFC using the Widget object. This interface works somewhat differently from the main API. The second reason this proved difficult is that none of the existing FFC's have an example of changing an object size within the FFC. In the end I found myself hunting through "Adobe Fireworks CS3 - Extending Fireworks" to find the answers I need (search for Widget and pathAttributes).

So firstly lets take a look at what changes we need to make to the HRule.graphic file. It's quite simple; we just need to replace our two paths with lines and then rename them as 'line' and 'shadow'. You'll then need to confirm they are correctly positioned. For some odd reason I found I needed to place the shadow 2 pixels below the line. These were the only changes I needed to make to the graphic.

Next open up the HRule.jsf file. The first change I made was within 'setDefaultValues' where we change the strokeWidth properties type from being a number to "Text". I'm not sure why this was necessary but a couple of issues disappeared when I did. Most of the real changes occured in 'applyCurrentValues' so let's have a look at the whole function :

function applyCurrentValues()
{
 var values = Widget.elem.customData["currentValues"];
 var w = Number(values[1].value);

 var line_obj = Widget.GetObjectByName("line");
 
 line_obj.pathAttributes.brushColor = values[0].value;
 line_obj.pathAttributes.brush.diameter = w;
 
 var shadow_obj = Widget.GetObjectByName("shadow");
 
 shadow_obj.pathAttributes.brushColor = values[2].value;
 shadow_obj.pathAttributes.brush.diameter = w;
}

The first line remains the same, but note the second line where we pick up the value for strokeWidth and convert it to a number. Now there are two blocks of three lines one for 'line' and one for 'shadow'. Both blocks do exactly the same thing but to a different path. The first line of each stores a reference to the object within a variable. This saves us from writing Widget.GetObjectByName("objectName") on the next two lines of eaach block. Those two lines are probably self explanatory but let's take a quick look. Both use 'pathAttributes' to change properties of the path. The first refernces brushColor to change the color of the paths stroke. For 'line' it gets changed to strokeColor. For 'shadow' it gets changed to the shadowColor. On the second line of each we set the brush.diameter to the strokeWidth.

That's it! You'll need to reload the "Common Symbols" panel and then drag the HRule component onto the stage. But now any changes we make in 'Symbol Properties' will be reflected within Fireworks as well as being exported into the MXML. From here we can very easily make a VRule FFC simply by saving HRule.graphic.png as VRule.graphic.png and rotating the lines. Then saving HRule.jsf as VRule.jsf and changing HRule to VRule on the first line of 'setDefaultValues'. Too easy. There's still quite a few things to work out before we could improve the existing FFC's or to make a full set. But with what we know now we could make a fairly complete set.