Moving from Flash to Flex: Team Integration and Workflow


I have the Flex Builder Beta on my Mac. I have gone through all the tutorials. The team of developers I work with also have the Beta on the computers and have gone through the tutorials. I have demoed Flex to the Designers I work with and they seem impressed, if only because its seemingly powerful but not overly complex in how using drag and drop components you can quickly build apps that would have taken days in Flash. So basically, we are just waiting for the right job to come to build using Flex. Low risk, flexible timeline, an easy to work with client, etc. We currently don’t have anything like that in the queue right now, but I’m sure in a couple months or less, something will come in, and it’ll be time to give it a spin.

One thing I’m not quite sure about is how to have the UI designer go through the graphic design process with Flex as the final deliverable platform. Flash MX2004 introduced the v2 components, which completely changed how you design commmon UI elements, etc. I had a heck of a time getting my designers to feel comfortable using those components and assist skinning them, making sure they knew the constraints, etc. Finally, at Flash 8, we are regularly reskinning these components and the workflow seems pretty comfortable.

It looks like with Flex and Apollo things are going to be shaken up again. The components and skinning process operate much differently, and the MXML files are not seemingly somewhere you want a designer digging around in. Content/Presentation and logic are separated, which is great from my point of view, but a bit abstract for those coming from a timeline and library type of background. The concept of states and stacks vs. timelines and nested movie clips are just foreign enough to prove to be a bit of a impediment. I am starting to explore information out there on skinning Flex Components, I have played with the new Flex 2 style explorer, and the new (to me anyway) site ScaleNine look to be a cool way to start learning how themes/skins work.

How about developers/teams out there actively working on and designing Flex apps and UIs? Any tips or ideas on team integration? Workflows? Design comps and process? Do you concern yourselves with getting the designers up to speed on how the components work? Or do you just depend on your skills/know how to make whatever your designers think up come to life?

Posted on


10 comments

  1. JesterXL Feb 17

    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

  2. Paul Rangel Feb 17

    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

  3. chadu Feb 17

    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.

  4. Chad Feb 17

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

    Not bad info here, either.

  5. Juan Sanchez Feb 17

    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

  6. ethan estes Feb 18

    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

  7. Mike Britton Feb 18

    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.

  8. Chad Feb 18

    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!

  1. ScaleNine Blog » Blog Archive » App Skinning: A Workflow
  2. Flex Builder 2 & Apollo: Rise of the Devigner/Deseloper | Visualrinse | Design and Development by Chad Udell

Leave a reply