Adding Dynamic Content into Flash Designs: Beauty with Brains

Want to amuse yourself during a long download? Here’s a simple test you can try on web professionals to determine brain hemisphere dominance: ask them what they think of Flash. The answers will tend toward two extremes:

1. The hardcore Flash designer who loves creativity and freedom and would never willingly design another HTML site, let alone anything data-driven (Right Brain all the way), or,
2. The hardcore database programmer who won’t bother with Flash on the theory that it won’t support the dynamic data functions needed for a demanding business site (Left Brain forever).

Both camps could do with a bit of a news flash: you can integrate dynamic content into Flash animations without the expense of high-end software or database integration services.

While there are virtuosos who have years of experience with action scripting (a scripting language built into Flash) coupled with impeccable design talent, most designers with whom I’ve broached the subject were unaware of a great opportunity to unite the hemispheres. All it takes is an off-the-shelf Content Management System (CMS) and some very minor action scripting to make even a 100% Flash site updateable by the most non-technical of clients.  One caveat regarding this trick; you need a true database-driven CMS, not a low-end webpage editing tool like Macromedia Contribute.  A database-driven CMS separates content from presentation, providing a password protected, user-friendly interface for the client to update content in the database. The CMS software then combines the content data with the designer’s templates to create the web pages the public sees.

Here’s how it’s done:

For each block of text in your Flash animation that you want the client to be able to update, place an action script variable instead of literal text, named for example latestNews.

Next, make a page using your CMS that may seem a little unusual – it won’t have any HTML tags, but will simply have a set of variable name and value pairs, which look like this: variableName=value. The variable name should match the one you put in the text block in step 1. For the value, use your CMS’s placeholder for dynamic content (this will vary depending on the CMS, but might be something like {Content}. So your CMS template page could look like this:

latestNews={Content}

Place the action script loadVariables command in the first frame of your Flash movie, telling it to load its variables from the bare-bones CMS-generated page you created in step 2. If, for example, you named the page flashContent.html, you’d call loadVariables(‘flashContent.html’).

As noted, the process may vary slightly from one CMS to another – check with the software provider’s tech support if you need help.

From the client’s point of view, the process looks like this: they close a big deal and want to announce it on the company’s website. The IS Manager berates the Marketing Manager as follows: “I told you not to let that designer make us a Flash site. Now we have to pay an arm and a leg to have it updated!” The Marketing Manager promptly logs into the content management system’s web-based control panel, goes to the News section, edits the text, and instantly, the text fading, flying, or rotating in has become that breaking news story.

The key here is this: just because the content is displayed in Flash, doesn’t mean you have to do the contortions required to make it editable via a Flash movie. The editing can be done in a run-of-the-mill web-based CMS control panel, while the presentation to the public is done in Flash.

And it gets even better. To really leverage the separate-content-from-presentation concept, let’s say you’ve got a Flash version and an HTML version of the site. You could tie both into the same CMS, and allow the client to update that news story in both places with one edit. Also, newer versions of Flash can load images dynamically, so with a little more work you can leverage a CMS to let the client edit the images as well as the text in a Flash movie.

To ease the integration process and make sure a given CMS package is Flash-content friendly, check with the CMS provider to see if they have downloadable Flash templates. These templates are basically short Flash movies whose content can be updated by an end-user via their CMS.

There are some cautions – for example, if you’ve taken text into a program like Illustrator or Freehand to visually tweak it, and then imported the vector graphic back into Flash, you won’t be able to replace it with an action script variable and the client won’t be able to edit it.

Does all this mean that you need to look for an expensive CMS system?  The mid-tier systems such as Red Dot and AtomZ start at about £5,000 depending on the project size. For the level of dynamic content you’re likely to put in a Flash movie, those are probably overkill, and lower-cost CMS systems will do the job for you.  For example, the Code4Design CMS solution, which targets the independent web designer, starts at £185. This CMS employs an intuitive and easy-to-use interface that a non-technical end user can quickly learn and begin using.

So you really can have the beauty of Flash with the brains of dynamic data – all without breaking the bank. 

Profile

Won Kim, Marketing Manager Code4Design (www.Code4Design.com)

Won Kim joined Code4Design (www.Code4Design.com) in 2002 and is leading marketing and new business development initiatives for the European market. He brings over eight years of corporate sales and marketing experience including four years of web-based software experience. Previously, he worked as on-site marketing manager for Samsung’s 2002 Winter Olympic Program. Other work experiences include: founder of Adcarus Inc., an innovative media company combining grassroots marketing and the web, consultant for the 2002 World Cup, and executive-level launch team member for the Daewoo Motor America’s introduction into the U.S. Contact Kim at won.kim@code4design.com.

Code4Design (www.Code4Design.com) provides plug-In database applications that Web Design, Flash, and Internet Marketing firms use to add common dynamic functions to their clients' websites. The Code4Design software allows Web Designers to extend their technical product suite by offering affordable data-driven site capabilities, without the high cost of in-house development or database expertise.