Today I’m starting a series of posts exploring a workflow starting from design in Photoshop CS5 through prototyping in Flash Catalyst CS5 to implementation in Flash Builder 4. I’ll import my Photoshop design into Flash Catalyst where I’ll prototype the user interaction. Actually, I expect I’ll be able to do more than prototype it. I expect to be able to implement a significant amount of it directly in Flash Catalyst. From there I plan to export the FC project to Flash Builder for any manual ActionScript coding that is needed. I’ll detail my findings in this post and several more to come.
The project I’m using for this test is a portfolio site for an artist couple. Since it will be a very visual site with little text it’s a perfect project to do entirely in Flash/Flex. The sophisticated visual transitions and effects possible with Flex will complement the site’s aesthetics. Search engine optimization, always a concern in a Flash site, is not much of an issue here since the amount of text on the site will be minimal anyway.
Importing a Menu from Photoshop into Flash Catalyst
To begin learning the new features in CS5 I decided to start small and try implementing a simple navigation menu. One of the first things you’ll hear about in Flash Catalyst tutorials is the importance of layering and grouping your artwork properly to allow for easy importing from your design app. I’ll discuss this in a future blog post but, for now, I’ll just mention that I laid out six pieces of text in Photoshop along the bottom of page with each menu item in a separate text layer.
Menu exported from Photoshop
As I created each piece of text, I didn’t bother to align them vertically as I figured I’d just use the align vertical edges command in Photoshop to do that automatically. However, I discovered that the command doesn’t do what I expected. It appears to align the text visually based on the specific characters in each text layer, treating each text layer as a graphic shape rather than specifically as a text object. What I expected is that it would align the baseline of each text piece—which is what you would usually want. But that’s not what happened. So, I manually aligned them and continued.
Importing Layer Effects from Photoshop into Flash Catalyst
Next, I started planning a background highlight to appear behind each menu item on mouseover. While doing that, I started experimenting in Photoshop with some layer effects to provide good contrast between the menu item text and the background highlight. As I was doing that it occurred to me that I should check out how well Photoshop filters are imported into Flash Catalyst. I also had a question about whether it would be better to apply the effects in FC or Photoshop. The obvious approach is to do it in FC because doing it PS would mean that I’d have to create two copies of each piece of text, one with the effect and one without. By doing it in FC I’d only need a single copy of each and I’d just apply the effect as part of the mouseover interaction. But I wasn’t sure if I’d get the same refined results in FC as I could get in Photoshop.
So, I started comparing the drop shadow filter in each application. It turns out that layer filters are different in Flash Catalyst than Photoshop—at least, the drop shadow filter is. In Photoshop three of the key parameters are called Distance, Spread and Size. In Flash Catalyst they’re called Distance, Blur and Strength. These aren’t just different names for the same things. Using the same values in both Photoshop and FC gets you quite a different effect; e.g., try using the value 5 for all three parameters so there’s no confusion about which is which. The effect is not nearly the same in the two programs.
Besides reducing work, I learned that there is another important reason for applying layer effects in Flash Catalyst—FC rasterizes layer effects when importing. On one hand, that could be good because you’ll get exactly the effect you expect. On the other hand, you wouldn’t have the ability to tweak an effect later. Additionally, there are compatibility problems; here’s what the Adobe Flash Catalyst CS5 Classroom in a Book says on the subject: “Unfortunately, not all filters and effects import correctly into Flash Catalyst.” So, I decided to apply the filters in Flash Catalyst.
Converting Artwork into Components in Flash Catalyst
One annoying behavior of FC is that when converting artwork into components it renames the layer with the type of the component you create. So, for example, a piece of menu text that previously had the word “About” as the layer name now becomes “Button.” After you convert a few text layer menu items into buttons you end up with a lot of “Button” layers unless you make a point of renaming each one back as you go. It would make a lot more sense for FC to append the word Button (or maybe just btn) to the existing layer name. Or leave the layer name unchanged.
Flash Catalyst layer panel before and after converting text into buttons. (There is one layer fewer in the after screen shot because the "Works by Carlos" text layer and the Shape 1 highlight rectangle were combined when converting into a button component.)
Anyway, I proceeded to convert each piece of menu text into a button. As I did so, I was thinking about adding a highlight to show the selected menu item. That’s actually not something you can do, as such, with Flash Catalyst because buttons don’t have a selected state. Buttons can have up, over and down states but FC doesn’t have a feature to show that a button or other component is selected. Components can have a disabled state though, so I was able to use that as a workaround. When a menu item is selected it doesn’t need to be enabled so by disabling it and setting the disabled color to indicate that is it selected (not the normal sort of disabled look) I could get the desired appearance. (To disable a button uncheck the button’s Enabled checkbox in the Properties panel.)
However, I did run into another menu-related hurdle that I couldn’t overcome directly in Flash Catalyst. I wanted to have the selected menu highlight slide from the previous menu item to the newly selected menu item whenever the user clicks on a menu item. As far as I can tell, that’s beyond the ability of FC. Any given component can have a variety of up/over/down/enabled/disabled states depending on the specific component type. But a change in a component’s appearance is limited to that component.
To have a highlight slide along the menu bar passing below several menu items on its way from the previous menu item to the new current item will apparently require some manual ActionScript coding. This, of course, is where the designer hands off the project to the developer who can then complete that type of work in Flash Builder—which raises a question I have about the code generated by Flash Catalyst. I’m wondering how easy it will be to edit that code manually. Will the code be fairly clear and easy to understand? Will it be structured in a way that allows for substantial additional development? These are always concerns when dealing with automatically generated code and are issues I plan to explore in an upcoming post.
Photoshop to Flash Catalyst to Flash Builder Workflow, Part I
Today I’m starting a series of posts exploring a workflow starting from design in Photoshop CS5 through prototyping in Flash Catalyst CS5 to implementation in Flash Builder 4. I’ll import my Photoshop design into Flash Catalyst where I’ll prototype the user interaction. Actually, I expect I’ll be able to do more than prototype it. I expect to be able to implement a significant amount of it directly in Flash Catalyst. From there I plan to export the FC project to Flash Builder for any manual ActionScript coding that is needed. I’ll detail my findings in this post and several more to come.
The project I’m using for this test is a portfolio site for an artist couple. Since it will be a very visual site with little text it’s a perfect project to do entirely in Flash/Flex. The sophisticated visual transitions and effects possible with Flex will complement the site’s aesthetics. Search engine optimization, always a concern in a Flash site, is not much of an issue here since the amount of text on the site will be minimal anyway.
Importing a Menu from Photoshop into Flash Catalyst
To begin learning the new features in CS5 I decided to start small and try implementing a simple navigation menu. One of the first things you’ll hear about in Flash Catalyst tutorials is the importance of layering and grouping your artwork properly to allow for easy importing from your design app. I’ll discuss this in a future blog post but, for now, I’ll just mention that I laid out six pieces of text in Photoshop along the bottom of page with each menu item in a separate text layer.
As I created each piece of text, I didn’t bother to align them vertically as I figured I’d just use the align vertical edges command in Photoshop to do that automatically. However, I discovered that the command doesn’t do what I expected. It appears to align the text visually based on the specific characters in each text layer, treating each text layer as a graphic shape rather than specifically as a text object. What I expected is that it would align the baseline of each text piece—which is what you would usually want. But that’s not what happened. So, I manually aligned them and continued.
Importing Layer Effects from Photoshop into Flash Catalyst
Next, I started planning a background highlight to appear behind each menu item on mouseover. While doing that, I started experimenting in Photoshop with some layer effects to provide good contrast between the menu item text and the background highlight. As I was doing that it occurred to me that I should check out how well Photoshop filters are imported into Flash Catalyst. I also had a question about whether it would be better to apply the effects in FC or Photoshop. The obvious approach is to do it in FC because doing it PS would mean that I’d have to create two copies of each piece of text, one with the effect and one without. By doing it in FC I’d only need a single copy of each and I’d just apply the effect as part of the mouseover interaction. But I wasn’t sure if I’d get the same refined results in FC as I could get in Photoshop.
So, I started comparing the drop shadow filter in each application. It turns out that layer filters are different in Flash Catalyst than Photoshop—at least, the drop shadow filter is. In Photoshop three of the key parameters are called Distance, Spread and Size. In Flash Catalyst they’re called Distance, Blur and Strength. These aren’t just different names for the same things. Using the same values in both Photoshop and FC gets you quite a different effect; e.g., try using the value 5 for all three parameters so there’s no confusion about which is which. The effect is not nearly the same in the two programs.
Besides reducing work, I learned that there is another important reason for applying layer effects in Flash Catalyst—FC rasterizes layer effects when importing. On one hand, that could be good because you’ll get exactly the effect you expect. On the other hand, you wouldn’t have the ability to tweak an effect later. Additionally, there are compatibility problems; here’s what the Adobe Flash Catalyst CS5 Classroom in a Book says on the subject: “Unfortunately, not all filters and effects import correctly into Flash Catalyst.” So, I decided to apply the filters in Flash Catalyst.
Converting Artwork into Components in Flash Catalyst
One annoying behavior of FC is that when converting artwork into components it renames the layer with the type of the component you create. So, for example, a piece of menu text that previously had the word “About” as the layer name now becomes “Button.” After you convert a few text layer menu items into buttons you end up with a lot of “Button” layers unless you make a point of renaming each one back as you go. It would make a lot more sense for FC to append the word Button (or maybe just btn) to the existing layer name. Or leave the layer name unchanged.
Anyway, I proceeded to convert each piece of menu text into a button. As I did so, I was thinking about adding a highlight to show the selected menu item. That’s actually not something you can do, as such, with Flash Catalyst because buttons don’t have a selected state. Buttons can have up, over and down states but FC doesn’t have a feature to show that a button or other component is selected. Components can have a disabled state though, so I was able to use that as a workaround. When a menu item is selected it doesn’t need to be enabled so by disabling it and setting the disabled color to indicate that is it selected (not the normal sort of disabled look) I could get the desired appearance. (To disable a button uncheck the button’s Enabled checkbox in the Properties panel.)
However, I did run into another menu-related hurdle that I couldn’t overcome directly in Flash Catalyst. I wanted to have the selected menu highlight slide from the previous menu item to the newly selected menu item whenever the user clicks on a menu item. As far as I can tell, that’s beyond the ability of FC. Any given component can have a variety of up/over/down/enabled/disabled states depending on the specific component type. But a change in a component’s appearance is limited to that component.
To have a highlight slide along the menu bar passing below several menu items on its way from the previous menu item to the new current item will apparently require some manual ActionScript coding. This, of course, is where the designer hands off the project to the developer who can then complete that type of work in Flash Builder—which raises a question I have about the code generated by Flash Catalyst. I’m wondering how easy it will be to edit that code manually. Will the code be fairly clear and easy to understand? Will it be structured in a way that allows for substantial additional development? These are always concerns when dealing with automatically generated code and are issues I plan to explore in an upcoming post.
{ 2 trackbacks }