Flash designer/coder collaboration best practices

Question

I've done several flash projects working as the ActionScripter with a designer doing all the pretty things and animation. When starting out I found quite a lot of information about ActionScript coding and flash design. Most of the information available seems to focus on one or the other.

I didn't find any information about building flash projects in a way that lets the coder do their thing AND gives the designer freedom as well.

Hopefully more experienced people can share, these are some of the things i discovered after a few projects

• Version control is a must (as always) but can be difficult to explain to designers
• No ActionScript in the flash .fla files, they are binary and as a coder you want to try to keep away as much as possible
• Model View Controller is the best way I've found to isolate visual design changes
• Try to build the views so that they use frame labels, this allows the designer to decide what actually happens

What are your experiences? ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

The way I currently work is that I (the developer) build the functionality using a dummy FLA file, using only external class files. When the designer(s) finish up the layout, they send me a FLA with all the imported assets, and linked buttons and MovieClips. I then attach my document class to the new FLA, and make sure all the Objects match my code. Overall, its a pretty simple transition.

If an asset needs to be updated for whatever reason, the designers just send me the asset, and I update the FLA manually.

Answer 2

On our team everyone uses TortoiseSVN and a Trac instance per project. Designers are using the standard Flash designer to edit .FLAs and developers are using FlashDevelop to manage ActionScript files and debug the project.

The tool-chain works like this:

1. Developers program the behavior of each window by hand-editing MXML files (it's not as hard as it sounds) and developing the corresponding .AS files at the same time.
2. Designers make graphics for skins and other UI elements that get (link) exported and store them in .FLAs alongside the code.
3. Developers [Import()] the resources in the .AS files.

This way everything gets into source control and designers don't even look at a line of ActionScript. Off course I'm oversimplifying the process but I hope you'll get the idea.

Answer 3

I've been doing Flash for 9 years and I still find this a difficult thing to get right.

There is a balance of power between designers and developers, which will inevitably tip one way or the other.

If you work for a developer led studio, then you are lucky, as the designers will be instructed to make a design that fits your functionality. In Flex / MXML this is the only way to work.

If, on the other hand, you work in a graphic design/creative/advertising studio, you will be instructed to build whatever the designer puts together in PhotoShop, whether or not it is feasible to build within the time.

The key to getting around this is communication and education. Designers and design-focussed managers may not know what is involved in creating a particular piece of functionality, and if you explain to them why a particular thing is hard to do they might be persuaded to go and rethink their design. On the other hand, they may well think you're just a whiner! It never feels good when you have to tell someone "sorry, I can't really do that" when you know that you could make it work, given a few late nights!

As well as the things you and others have already noted, like using FlashDevelop and external AS classes, here's some other things I recommend:

• Start with a site map / wireframe that both the developers and designers agree to.
• Load all your text from XML into dynamic text fields, and make sure your buttons etc are designed to expand to fit content
• Make sure your designers have some idea how to correctly cut-up graphics and lay them out in Flash. A developer shouldn't be messing about in PhotoShop when you're up against a deadline.
• Make sure you get all you graphics assets well before the deadline - inevitably there'll be things they've missed and things that need changing.
• Be firm and don't let your design team try to sneak in extra features at the last minute.
• Let the designers use the timeline for character animation etc, but for simple tweens use an ActionScript tweening engine.

Hope these tips are some use!

Answer 4

separating the design from the code is the important thing to do - since I try to do projects as a series of modular components (stitched together a little, of course, since nothing ever fits exactly) I first make a sort of interactive wireframe. It's got placeholders for all UI elements, appropriately named and nested.

That .fla can be passed off to a designer, who can add whatever they want, as long as they keep the names and nesting order - essentially like skinning an app.