The world of Flash development can be a dangerous place. Although Flash offers the most comprehensive set of tools for Web site user interface development, there are numerous pitfalls that can cause a project to go sour. Flash's complexity can result in "two-day" projects taking two weeks, database access becoming nearly impossible, and file sizes that are daunting. I'll talk about some of the methods I've used to overcome these types of problems in a site I've recently developed, www.getfreshfruit.com.

Get Your Fresh Cut Fruit Here
www.getfreshfruit.com is a project I worked on through my company, Balance Studios (www.balancestudios.com), and Lindsay, Stone & Briggs (www.lsb.com) for Chiquita Brands, Inc. (www.chiquita.com). The purpose of this Web site was the introduction and launch of Chiquita's newest product innovation, Fresh Cut Fruit. Targeted at females between the ages of 25 and 54 who are concerned about their health, love fruit, appreciate convenience, and are "on the go," the Fresh Cut Fruit site required a friendly, engaging, and interactive user interface. The site's back-end features included a searchable and updateable store locator as well as an e-mail contact form. This interactivity builds the customer loyalty desired by Chiquita.

Immediately, this seemed like a great candidate for Flash. Fun, interactive, and integrated user interfaces are certainly Flash's forte. Developing the site in Flash also had some challenges, such as keeping the file size to a minimum (large product images were part of the project requirements), and, more importantly, staying within our limited timeline for site development. As I will explain, by maximizing the efficiency of routine Flash tasks, such as animations and data access, I was able to give www.freshcutfruit.com an intriguing front end in the appropriate time span.

What Happened to My Timeline?
Whether it's loading functions, button rollovers, or text effects, nearly every project using Flash involves some type of animation. The traditional method of animating in Flash is accomplished using the timeline and motion tweens with numerous keyframes and a small amount of ActionScript. For the Fresh Cut Fruit site, however, I chose to use a different method of animating: ActionScript-based MovieClip tweening.

Unlike traditional Flash animations, ActionScript-based tweens are accomplished without ever using the timeline. In fact, these tweens do not even require a MovieClip on the stage, just some clever coding. The lack of keyframes in ActionScript-based tweens make the Flash animations much easier to update as a project evolves. The developer is also given much more control over properties of the tweens, such as easing and the ability to react to the completion of the animation.

To accomplish ActionScript tweening for Fresh Cut Fruit, the "MovieClip Tweening" prototype by Ladislay Zigo was used. This Flash extension is available at laco.wz.cz/tween/. The extension provides the ActionScript classes necessary to accomplish ActionScript-based tweening without having to write any of the movement classes used to accomplish the tweens. The user-required documentation for this extension is extremely thorough, making the extension much easier to use than many of the other tweening-class alternatives.

The most essential method in this prototype is the tween function. Using just

instancename.tween(property, value, duration, tweenType, delay, callback);

properties of a MovieClip, such as position or alpha, can be tweened for a duration of time. The tweenType of the animation can be set to a variety of options, ranging from an elastic 'bounce' to a simple linear tween to produce highly controllable animations with great "feel."

In the Fresh Cut Fruit project, these tweening classes were used to create the navigation buttons as well as the loading functions' fruit animations. For example, to create, place, and animate a series of top-level navigation buttons, the following ActionScript could be used:

	Function PlaceButtons()
{
	// create button array
var x;
	buts = [];
	buts[0] = {label:"6oz Cup", data="6oz.swf"};
buts[1] = {label:"12oz Cup", data="12oz.swf"};
buts[2] = {label:"24oz Bowl", data="24oz.swf"};
buts[2] = {label:"32oz Tray", data="32oz.swf"};
buts[3] = {label:"64oz Tray", data="64oz.swf"};
// attach the buttons, apply the label, and create the tween
for (x=0; x<buts.length; x++)
{
	var nn = "nb" + x;
	attachMovie("navbut", nn, 100+x, {_x:50, _y:50+(x*20), _alpha:0,
	myLabel:buts[x].label, myMovie:buts[x].data});
	this[nn].tween(["_x", "_alpha"], [55, 100], 1, 
	"easeoutelastic", x*.2, null);
}
	}

Initially in this script, an array is declared, which holds the data used to create the buttons, followed by a for statement that loops through the array, places the buttons, and sets some properties, which gets them movin'. Let's break down the last line in the for statement, the implementation of the ActionScript-based tweening:

this[nn].tween(["_x", "_alpha"], [55, 100],

This segment declares that we will be tweening the _x and _alpha properties of the newly attached MovieClips from their initial values of 50 and 0 (which we determined in the previous line), to 55 and 100, respectively.

1, "easeoutelastic",

The "1" sets the period of the tween to one second. Note that the tweening prototypes are based on time instead of frames. "easeoutelastic" is the easing equation used on the MovieClips. Instead of tweening straight to the point, they've got a bit of "elastic bounce," just for effect (thank Robert Penner, www.robert penner.com, for these great functions).

x*.2, null);

The next property is the amount of time each MovieClip will wait before starting its tween. In this case, we don't want each button to start at the same time, but to "flow in" from top to bottom. The last property, callback function, is set to null, but could be directed to a function that would execute when the buttons complete their motion.

By using ActionScript-based tweening in this project, the navigation menu was created without a MovieClip on the stage or a tween on the timeline. Because of this, the navigation menu and the "feel" of the buttons could be quickly updated, allowing much less development time on the entire site while also preparing the site for future updates or unforeseen revisions (adding and removing pages DOES happen!), simply by changing just a couple lines of code.

Searching for Stores? Use FlashOrb
One of the primary challenges in any Flash-based project is transferring database stored information and server-side logic to the Flash front end efficiently. A number of options exist for Flash-to-server communication, such as Web service components, the XML class, the LoadVars class, and the FlashOrb. Because development time was a major factor in this project, Web services and the FlashOrb were my two most likely choices. Due to its speed, low overhead, and ease of use, the FlashOrb turned out to be my selection.

FlashOrb, as seen in previous issues of MXDJ, is a technology built by the Midnight Coders (www.flashorb.com), based on Flash Remoting, which facilitates client-side Flash to server-side .NET or Java communication. The FlashOrb, as compared to Macromedia Web service components, is faster and more lightweight. In recent benchmarks, the FlashOrb has proven to be up to three times faster than SOAP-based communication when passing complex data types.

When considering overhead, both in file size and client-side memory allocation, Web service components also fall dramatically short of the FlashOrb. Web service components single-handedly add nearly 39KB to a Flash movie's file size, whereas FlashOrb components add only about 9KB. Web service components also appear to have significant memory allocation issues, whereas the FlashOrb uses an extremely small amount of client-side memory.

In the Fresh Cut Fruit project, a searchable store database was required, as well as a database-driven contact form. To accomplish this on the server side, I selected Microsoft SQL Server and C# .NET. The SQL server contains tables that house Fresh Cut Fruit's store database as well as its contact information. The back end consists of a .NET class, FreshFruit.BgFiles. I won't go into great .NET detail, but here are a few of the methods used for the site:

public store[] GetNearestStores(int zipcode)

This method is used in the "Store Locator" and takes a zipcode from the Flash client and, using a custom zipcode distance class and SQL queries, returns an array of "store" structs to Flash. This passing of complex data types would consume many resources using Web services, and would involve intricate parsing using the Flash XML class, but is no problem using FlashOrb.

public string[] GetStateStores(string state)

The GetStateStores method receives a two-letter state abbreviation from Flash and returns an array of store names that exist in the requested state. This method is used by the "Store Locator" page to display, for the user, a list of stores that carry the Fresh Cut Fruit product in their state.

public string SendMailTo(string emailto, string emailfrom, string title, string
message, string pw);

SendMailTo is simply a server-side e-mail script (using the OpenSmtp.Net component) that sends an e-mail to a specified recipient with a specific title and message. This method is used in both the "Let's Chat" contact form and the "Send to a Friend" form.

Great, but what's the use of all these server-side methods if we have no easy way of accessing them? Luckily, executing these methods using FlashOrb is as easy as the following, calling the GetNearestStores method:

	// First, set up the Remoting Connection:
	var orbConn = NetServices.create
GatewayConnection
("remoting.aspx");
	// Creating the Class Object
	var service = _root.orbConn.getService
("FreshFruit.BgFiles", this);
	// Calling the Method
	service.GetNearestStores
(Number(tbZipCode.text));
	// Receiving the Result
	function GetNearestStores_Result(res) {
		// Handle the results
		// Results will be in the form of a multi-dimensional array
	}

I won't go into great detail on the FlashOrb methods (see Joe Orbman's article in the May 2004 issue of MXDJ), but essentially, the .NET server-side classes can be called using only three lines of code and the responses require no parsing! Server-side access functions from Flash couldn't be any quicker or easier to develop.

It is by using these asynchronous database calls that one of the great user-experience benefits of Flash is realized - user interactivity. When the user runs a search on the store database, he does not lose control of the interface or get a screen refresh. Instead, after a very short load, the user is presented the search results and taken to the next step on the same page. This progression causes much less confusion for the site user, and, in this case, makes the store data much more accessible and fun to find!

Although this is just a sampling, these methods contributed to making the www.getfreshfruit.com site a success, based on timeline, file size, and user interactivity. Macromedia Flash provides developers with a tremendous opportunity to merge user interaction with technology, and by using the right tools, these low-bandwidth, database-driven, and interactive Flash sites can be delivered efficiently.

• Figure 1
• Figure 2