Comments on: Moving from Flash to Flex: Team Integration and Workflow

By: Flex Builder 2 & Apollo: Rise of the Devigner/Deseloper | Visualrinse | Design and Development by Chad Udell

Thu, 22 Mar 2007 01:45:54 +0000

[...] playing with the Apollo Alpha and my copy of Flex Builder for the last few days, I wonder if my last post about Team integration and desinger/developer workflow was a little misguided. Does it truly have [...]

By: ScaleNine Blog » Blog Archive » App Skinning: A Workflow

ScaleNine Blog » Blog Archive » App Skinning: A Workflow — Tue, 27 Feb 2007 04:56:48 +0000

[...] A recent blog post I came across brought up some questions regarding the UI design workflow and bringing those designs into Flex 2. I replied to the post outlining my experiences and I thought it might be worth sharing that information here. [...]

By: Chad

Chad — Sun, 18 Feb 2007 21:07:32 +0000

You all have certainly given me some great tips. Mike, I think your idea is fantastic.

Ethan, the next version of Fireworks sounds great, if that really is the case, I read the post over at John Nack’s blog… sounds very promising.

Thanks, EVERYONE!

By: Mike Britton

Mike Britton — Sun, 18 Feb 2007 20:47:46 +0000

I recommend getting your designers up to speed through the ScaleNine examples. They show how to use CSS and one fla to skin a Flex 2.1 app. Have them download and play with the source for the ScaleNine stuff and they will understand how to create their own themes from the ground up. After the initial prototype (which can initially be laid out by a designer in FlexBuilder), ownership of the app’s MXML should shift to the developer.

By: ethan estes

ethan estes — Sun, 18 Feb 2007 16:29:33 +0000

Well, at the max conf they demoed the next version of fireworks which is being retargeted to develop ria interfaces. You’ll be able to rework the standard ui components and then export an mxml project with the hooks set up to start adding the logic to your app. This will give designers ways to work in a comfortable graphics environment-much the way fireworks supports dreamweaver. It’s always better if a designer can get involved with the code side though-i think it informs our design decisions and gives them a higher success rate.

http://blogs.adobe.com/jnack/2006/10/fireworks_does.html

By: Juan Sanchez

Juan Sanchez — Sun, 18 Feb 2007 02:18:35 +0000

My experience is similar to Paul’s. As UI designer I usually create screens in Photoshop, Illustrator or Flash and get initial approvals. In most cases it’s almost easier to just bring it in to Flex and get everything working the way you want. It’s easier to show someone sometimes then explain it and Flex makes it easy to do that.

Usually after creating the initial graphics I’ll skin the app using an external CSS file, embedded fonts, and embedded images/swfs in the MXML. I populate my skinned components with temporary XML files that will eventually hook up to a database. If I need custom item renderers and editors I’ll create those too. What I don’t do is create custom action script components. However, I’ll figure out what I want, work with a programmer, then skin what I get back.

Basically, I try to get initial functionality and all visual components set up to hand over to a programmer. Then all that needs to be done is database integration, functionality and other integrations. It also makes it easy to put together the use cases.

As far as team integration, we all work on the same files via a CVS system. It’s amazing how much more we’re able to get done using Flex.

I just finished writing a post on my blog about 10 ways to skin a flex app. You might want to check it out. It’s basically a compilation of a lot of helpful resources I’ve found, both new and from the ScaleNine Resources page.

The things that helped me the most:

An article by Narciso Jaramillo about creating skins with source files. http://www.adobe.com/devnet/flex/articles/flex_skins.html

The Component Explorer to learn what components there are to use and code samples. http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

The Style Explorer, which you already mentioned.

The rest was just done by searching and experimentation. There are more resources available now that Flex is out of beta.

Good luck.

Juan

By: Chad

Chad — Sat, 17 Feb 2007 21:21:23 +0000

I also came across this article at Adobe’s Devnet: http://www.adobe.com/devnet/flex/articles/workflows.html

Not bad info here, either.

By: chadu

chadu — Sat, 17 Feb 2007 18:27:21 +0000

Jesse and Paul,
Thanks for the visit and thanks for the great links. I’ll definitely read up on this.

I have had a couple of conversations with some Flex focused Adobe CSRs, etc. on the phone, and they too have acknowledged there is a bit of a hole and certainly some confusion on how to get designers creating great Flex UIs. It seems it is indeed a priority.

By: Paul Rangel

Paul Rangel — Sat, 17 Feb 2007 17:47:57 +0000

We do encourage our designers to get to know the components especially with how easy it is to use CSS to skin them. With Flex 2.0.1 the CSS can be applied without recompile and integrating SWFs with Embed files make it very easy to add icons to the UI.That being said this is only skinning we have not gotten into the components to make them not look like a vanilla Flex app. It seems that it can be done with some effort see the Napkin Skinning experiment and the limits of Flex skinning.

We provide “working” comps with skins and basic actions that display the workflow of the application. What I have found interesting is that it is best to let the designer play with the states and transitions of components because flex makes it so easy. Much easier than the comparable implementation in Javascript. This is much to ask of some designers but we are lucky to have a UI designer that can handle both and we find with RIAs this sort of interaction design is what separates a good RIA from a great one.

Good luck and from what I found out at the Meet The Flex team conference this process should be getting easier and is high on their list. Of course they didn’t say how which is why I check the labs site every day .

-paul

By: JesterXL

JesterXL — Sat, 17 Feb 2007 17:38:34 +0000

Keep 'em in CSS only for the lowest risk. I've read about 2 companies having Designers layout MXML base forms, which sounds pretty rad. Bottom line, the styles provide most everything you need to allow designers to skin your controls, components, and custom components. If you are doing more than CSS styling & skinning, these might help: Integrating a Flash Interface into Flex 2 Gettinga a Photoshop Design into Flex 2 Flash 9 Button in Flex 2