Adobe MAX session: Flash Catalyst and Builder workflows

At Adobe MAX this week, I presented a session entitled “Working with Flash Catalyst Projects in Flash Builder 4″ – the recording for this will be available on Adobe TV in the future, in the meantime however I’ve posted the slides below.

<!–
Get Adobe Flash player

<!–

The presentation builds on the Exploring Flash Catalyst and Flash Builder workflows article that was published on the Adobe Developer Connection site, but also includes some example code which may help if you wish to explore the use of Flash Catalyst generated skins for custom Flex components that extend SkinnableComponent.

New content in the Adobe Developer Connection

Flex developers often use a combination of tools as part of their workflow, and Adobe Flash Builder 4 beta takes that into account. Follow Tim Buntel’s article to learn how well Flash Builder 4 can play with four other Adobe products in both data-centric and design-centric phases of a project: Adobe ColdFusion Builder beta, Adobe LiveCycle Data Services 3 beta, Adobe Flash CS4 Professional, and Adobe Flash Catalyst beta. Then move on to Elad Elrom’s article on how to use Pixel Bender with Flash Builder 4 beta as a number crunching engine.

Augmented reality (AR) made a big splash this year when GE’s Smart Grid reached mass-market appeal. Experienced Flash developers can dig into Samuel Asher Rivello’s AR project, which overlays a 3D model of the Eiffel Tower onto a 2D marker using FLARToolkit code libraries and a webcam. For those just getting up to speed with Flash CS4 Professional, check out Dan Carr’s five short presentations to learn about working with timelines, symbols, instances, buttons, Motion Editor, and ActionScript 3 in Flash. Finally, check out Paul Robertson’s new QuickStart on understanding the benefits of using the Vector class in ActionScript 3.

Web video producers might want to explore Lisa Larson-Kelley’s updated web video player template, which makes it easy to publish multiple videos on the same web page without authoring a new SWF for each one. Also use Jens Loeffler’s live dynamic streaming and digital video recording sample app to set up a dynamic streaming environment without any coding.

Iterative Design/Development with Flash Catalyst and Flash Builder

As I talk to more and more designers and developers one of the things that comes up is whether or not Catalyst makes it easier or harder to do iterative design on a project. The workflow most people have seen is you start in a tool like Illustrator, Photoshop, or Fireworks; create a high fidelity visual design in that tool and then import that into Flash Catalyst where you can start turning that artwork into visual components. I think that’s a pretty powerful workflow for designers of all stripes.

The issue that comes up most is that not everyone starts that way. In a lot of cases people create a skeleton application first in Flash Builder and then want to apply visual designs later. Themes are one option, and we’ve got a new Theme chooser in Flash Builder to help that, but one of the great things about Flex 4 is that it’s easy to create very customized, unique skins for components. So without the ability to do round-tripping between Flash Catalyst and Flash Builder in the 1.0 version of Catalyst, what can designers to to iterate on a design alongside a developer? The answer is the Flex Library project.

I realize this is far from an ideal workflow, but I think for Flash Catalyst 1.0 and Flash Builder 4 it works okay and provides a way for teams of designers and developer to iterate together without stepping on each others toes.

Core Steps

  • Export assets to a Library Project in Flash Catalyst.
  • Import that Library Project as a Library Project into Flash Builder
  • Link the imported Library Project to your main Flash Builder project.
  • Make design changes in Flash Catalyst.
  • Re-export the Library Project and import it by overwriting the old Flash Builder Library Project
  • Your main Flash Builder project will be updated with the new design.

Detailed Walkthrough

So lets say a developer has an application that they’ve created with the default components. I’ll start with something really basic:

<s:Button x="19" y="78" label="Button"/>
<s:HSlider x="210" y="31" />
<s:List x="152" y="108">
 
</s:List>
<s:TextInput x="10" y="31"/>
<s:Button x="152" y="77"/>

iterate_design_01

Clearly a great RIA in the making. But I take a lot of pride in my work and I want to use the power of Flex 4 to create a unique set of skins and components that stand out. In the ideal workflow I would be able to give this to my designer, they would open it in Catalyst, create some great components, and send it back to me. I can’t do that, but I can do some design in Catalyst and then bring those designs in a special way. First I’ll create some great looking components in Catalyst by starting with a blank project and importing Illustrator/Photoshop assets then converting them to components.

itreate_design_03

After I turn all of my artwork into interactive components I am going to pop over to the library panel and start giving them usable names. By default Catalyst calls the created components “Button1″, “Button2″, “ItemRenderer1″, etc. I give them names that will mean something to the developer and help differentiate components.

iterate_design_02

Once I do that, all I have to do is export my library file into an FXPL file by right-clicking anywhere in Catalyst’s Library panel. Once I can do that, I have the ability to import that FXPL file as a new Flex Library project in Flash Builder.

iterate_design_04

That library file contains all of the assets and skinned components I just created. In order to use those, all I need to do is add that project to my main Flex project from the project Properties->Flex Build Path and I can start changing the skinClass attribute for my components to point to those new files.

<s:Button x="19" y="78" label="Button" skinClass="components.BlackPushButton"/>
<s:HSlider x="210" y="31" skinClass="components.MetallicSlider"/>
<s:List x="152" y="108" skinClass="components.GreyDataList">
 
</s:List>
<s:TextInput x="10" y="31" skinClass="components.MetallicTextInput"/>
<s:Button x="152" y="77" label="Button" skinClass="components.GreyButton"/>

iterate_design_05

But now the client tells us they want that black button to be an interstate sign (who knows). I have that asset in Illustrator so I can open my original Flash Catalyst file that I created the library project in and I have a couple of options. I could create a new button with a unique name or I can change the original button component using the round-tripping between Illustrator. I’ll do the latter.

iterate_design_06

Once that’s finished toggle back to the Library panel and re-export the assets making sure to overwrite the original file. Then switch back to Flash Builder and go through the import process again. By default, it will try to create a new project and just append “_1″ to the project folder. Make sure you overwrite your project by removing that. You’ll get a warning, but that’s fine.

This is where the magic happens. Without doing anything, you can run your application and you’ll automatically have those new assets. Any event handlers you’ve wired up to the button or any code you’ve created that use that button will remain unchanged; only the button graphics will change. Because the projects are linked, any change we make to our imported assets filter down to our core project.

The designer can use that original Catalyst file and the re-export process to make modifications to any asset we want. They can also create new components from artwork, create custom components, or add image assets and all of those will be available to the developer inside of that main Flex project.

iterate_design_07

This is all still kind of a work in progress, but I think this will work for some of the design-develop problems people need to solve. While the 1.0 version of Flash Catalyst will have some limitations around the Flash Builder workflow, there are still a lot of basics there that can be built on. If you’ve tried this or have other ideas on how this could work, definitely drop me an email. I’d love to hear feedback.

Flash Catalyst best practices article published

An article I wrote on Flash Catalyst best practices for the Adobe Developer Connection site went live yesterday.

Flash Catalyst and Flash BuilderOne of the things I’ve found with Flash Catalyst is that the quality and usefulness of the assets and component skins that you’ll make available for the developers you are working with can vary depending upon how you’ve organized your project, as can the amount of rework and restructuring required on their part when they receive your FXP file. By thinking about naming, structure and being organized throughout the design phase of the project, you’ll help to ensure a smooth flow of assets from design into development.

If you’re considering using Flash Catalyst for creating the user interface for a rich Internet application then I hope the hints and tips shared in the article will help you to make the most from Flash Catalyst and ensure that you’re structuring your projects with the eventual output to the developer in mind.

The article is posted here.

If you have any feedback on the article or additional hints & tips then please do share them using the comments.

Recent content in the Adobe Developer Connection

As an Adobe Flash Platform developer, you’re probably frequently integrating video and sound into your projects. In this issue we have new sample projects on using Adobe Flex and Adobe Flash to work with media.

Jens Loeffler shows you how to create a video sharing application in just a few steps using Adobe Flex Builder and Adobe Flash Media Server. Dan Carr explains how to manage audio in a media project using Adobe Soundbooth with Adobe Flash Professional. Doug Winnie provides an iterative approach to the designer-developer workflow with Adobe products and technologies.

For those of you gearing up for the next release of Flex, check out Tim Buntel’s article, Five great new features in Flash Builder 4 beta. Meanwhile, Flex developers who are interested in mapping should not miss Matt Sheehan’s article. It teaches you how to build a basic interactive map with zoom and pan functionality, and then extend the application to include multiple providers and markers.