Flash’s Got a Brand New Bag

As broadband Internet connections become more ubiquitous, and more corporate sites begin to incorporate Flash and use it as their primary tool, there will be more of a need to incorporate e-commerce functionality into the Flash-based websites that you design.

For the moment, this is uncommon, and I can propose two reasons why:

1. Most e-commerce developers have experience creating HTML-based sites, and the current crop of development tools (i.e. ASP, PHP, JSP, Cold Fusion) are specifically designed to spit out HTML pages.
2. Many people still use dial-up modems. So, to provide easy, quick access to the largest number of customers possible, simple HTML sites are almost always the way to go.

The new face of e-commerce#section2

Fortunately, for designers at least, a few companies are willing to push the envelope. Recently, I got the chance to develop a Flash-based e-commerce site. The company’s goals for the project were to produce an e-commerce art gallery that provided the visitor with an above-average visual experience, and to “gain customers through quality.” La Palette hired me to develop a database-driven website with full e-commerce capabilities, and an interface created entirely in Flash.

What follows are some lessons I learned through this experience: things to do, things not to do, and ways to keep from beating your head against the wall. The following article does involve some advanced ActionScripting/ASP concepts, so put on your goofy flying goggles and get ready.

Baby steps#section3

The first painfully frustrating hurdle I encountered (oddly missing from Macromedia’s documentation) was a quirk involving the LoadVariables function. This is probably apparent to anyone who has experience developing dynamic Flash sites, but for a beginner, it was a major headache.

LoadVariables takes time. It is an asynchronous transaction. You cannot call LoadVariables and then begin to use the variables it loads in the same script! Worst of all, due to the flaky nature of TCP/IP communication over the Net, you can’t even use it in the next frame. Indeed, you can’t even estimate when you think it’ll be there. Have a nice day.

A technique discussed briefly on one page of the Actionscript Reference Guide is invaluable; I used it over and over again when building La Palette. Here’s the trick: create an object and make it into a movie clip. Then use LoadVariables to load the variables you want into that movie clip. On the movie clip that’s receiving the variables you need to add the following:

OnClipEvent(data)
{
 ... your code here…
}

This was the only reliable way I could get usable variables into the movie. Hopefully, this will save you some frustration. Once you understand this dilemma and the workaround, you can point the LoadVariables function at whatever kind of file you need (in the same domain), be it an ASP file, JSP file or even plain text. The only requirement is that the file must be in the same domain as the project you’re building.

Also, be sure to URLEncode any data you’re putting into your variables! If you’re spitting out things like artist names with spaces and commas in them, you won’t get very far without encoding them.

Our Daily Bread#section4

If you’ve done ASP, JSP or other web development before, you know there are a handful of things you do over and over again for almost any site. One good example of this is when you get a recordset from a database, and spit out a nicely formatted HTML list of items from that recordset. This gets a little trickier in Flash, but there are two things you’ll be using all the time:

1. LoadVariables
2. DuplicateMovieClip.

LoadVariables#section5

From the Flash movie, call LoadVariables and use a movie clip as your target. Make sure the movie clip has code to handle the data ClipEvent. Do all of your database processing the way you normally would in ASP/JSP/whatever, and spit out the variables from the ASP/JSP page in the correct format:

result1=foo&result2=bar&resultcount=2

Once the OnClipEvent is triggered, you’re ready to go to town.

DuplicateMovieClip#section6

Use the DuplicateMovieClip function to generate your list. What you want is a list of results in which each item in the list can be clicked to get more detail. This is pretty much always the case: think of search results, a display of shopping cart items, or appointments on a calendar.

So just make one movie clip that has all the functionality you want, and then make a duplicate of that movie for each result returned from the LoadVariables call. (This movie will have to contain any data you want to display for each result.)

In the case of La Palette.com, there was a list of artist names. I made one movie clip with the functionality I wanted, then used DuplicateMovie to create a copy for each artist’s name. Inside that movie clip, there’s a dynamic text object that displays the artist’s name. I also added code to do hit tracking in the movie, so that you can click on any of the artists’ names for more detail. This somewhat awkward workaround was necessary because there is no way to duplicate a button through ActionScript.

You’re not done yet#section7

One more hurdle caused long hours of painful head-scratching: how to load an image dynamically in Flash? The sad answer I came up with is that you can’t. The only solution I found was to make a Flash movie that is the same size as your main movie for each JPEG or GIF you need to load dynamically, and then use LoadMovie to bring that picture in.

This seems like a huge omission on Macromedia’s part. When developing web applications, you’re always going to need to dynamically load images. Ebay has images for their items, Amazon has book covers, and even Slashdot has categorical icons!

I thought I might be able to use Generator to do this, but after days and days of research, I decided to admit defeat and ask my assistant designer to help me make a very large number of simple Flash movies.

This is a solution of course, but as Larry Wall, the creator of Perl will tell you, “the three chief virtues of a programmer [are] laziness, impatience and hubris.” So it’s obviously not a good solution because it involves a lot of grunt work.

I suppose I could’ve used some PHP Kung Fu to get it done, but I didn’t have the time to play around with getting PHP installed and running. Hopefully, Macromedia will come up with a better solution for dynamically loading images in future versions of Flash.

A note on security#section8

I suggest using an entirely new window, or redirecting to a different page with GetURL, when you’re entering any sections of your site that must be transmitted with SSL encryption. The idea is to make the distinction between secure transactions and the rest of the site as clear as possible to the user.

If you redirect to a new page, they will get the annoying “You are entering a secure site!” alert box,  and the cute little padlock will show up in their browser window. Users rely on these cues to guarantee them that they’re using secure communications. I know I always look for that little lock whenever I pull out my credit card and start typing in those magic 16 numbers.

Some sites use secure communications within Flash movies or even within HTML frames that don’t provide you with all of the visual clues. The resulting sites may look cool, but I suspect that many visitors are wary about whipping out their plastic without visual reassurance that they’re shopping safely.

On the bright side#section9

Once you learn the quirks of integrating Flash and ASP, you’ll find that it’s similar to any other type of web development; there are a few techniques that you’ll use over and over again once you figure out how to do them right.

As we enter the next generation of web development, we’ll begin to see more and more e-commerce sites with a Flash interface. I, for one, will be happy to see better-looking shopping carts, so I can’t wait!