Many of you who are about to read this probably have mixed feelings about Flash. You’ve probably been held hostage to the ever-popular animated Flash intro. How fast do you click on the “skip intro” button? Even if it’s mildly entertaining the first time, it is surely just a time-waster the second. Flash sites often make me recall the old adage: “The first time it’s funny, the second time it’s boring, and the third time it’s annoying.”
Is there ever a good reason to use Flash? Can it overcome the problems of accessibility, search engine optimization, easy updating, and interminable download times? I hope to make a good case for the (occasional) good decision to use Flash, while revealing how I constructed just such a site with maximum efficiency and user-friendliness as my goals.
Now you’re probably saying to yourself, “Oh, there is a good reason to use Flash?” I believe its use is appropriate for any site where multimedia display is not a gratuitous annoyance, but rather the central content of the site. Copy one of the following URLs into your browser:
http://www.vladimirhorowitzmusic.com/
http://www.legacyrecordings.com/herbiehancock/
http://perfectstorm.warnerbros.com/
http://www.lordoftherings.net/
You’ll quickly see that the use of Flash in these sites is intended to engage the visitor in the immersive experience of music and movies. There are many side benefits to the use of Flash, such as pixel-perfect layouts and embedded fonts, but we’re going to focus on the multimedia aspect in this article.
When a local classical piano trio approached me about creating a Flash version of their site, they pointed to Midori (http://www.midoriviolin.com) and Joshua Bell (http://www.joshuabell.com) as the models they wanted to emulate. They requested the following features for their site:
In addition, they wanted an elegant and clean look that nonetheless had visual interest by virtue of a few tasteful animations. And finally, I wanted a way to empower them to update the components of the site themselves without having to touch the raw Flash files (which have the extension FLA.) or email me too often. Let’s look at how we accomplished these goals.
The trio wanted a design that matches the design of their latest CD of music by Ravel and Shostakovich. After planning the banner, color scheme, content, and layout, it was time to create the shell into which all pieces of the site load. The best approach for designing a Flash site is to keep it modular. It is not one Flash movie; it is many pieces (separate Flash movies) that load into or replace each other and form structural hierarchies.
Take a look at the diagram of the various levels to the Gemini Trio site. As you can see, the master shell movie, at level 0, loads first. It then triggers the loading of its dependent movies, the main navigation bar for the site, the MP3 player, and the design elements (such as the banner) that are common to all pages. These are the components that will remain on the screen at all times. The last piece that downloads on the first screen is the (uh oh) introductory animation. By loading it into the main master movie, the visitor can immediately click a desired link without having to first click out of the intro. No “Skip Intro” button is needed here!
Diagram of the Gemini Piano Trio Flash site.
By creating multiple separate movies, the visitor has to sit through a download only for desired links.
Let’s take a moment to look at what happens when we type in the address for the Gemini Piano Trio Web site: http://www.geminipianotrio.com/flash/. The first document that loads is a standard HTML index page. (Note: one of the benefits of loading Flash movies into standard HTML pages is that metatags can be added to aid in search engine optimization.) This index page has a Flash detection script that checks for the latest version of Flash Player, which is version 7. If the visitor has Flash Player 7, the master movie dynamically loads into the index page.
If the visitor doesn’t have Flash, or has an old version of Flash, some alternative explanatory text, as well as the GPT banner, loads into the page. There is a link to the download page for the Flash Player, and a link to the HTML version of the Gemini Piano Trio Web site in case the visitor prefers it. The index page also includes “no script” tags with similar explanatory content that loads if the visitor has JavaScript disabled.
Alternative content for visitors without Flash and with JavaScript turned off.
After performing detection and determining that Flash Player 7 is installed, Master Movie begins directing a complex series of events. Before any visible content loads, Master Movie directs the loading of a hidden movie with a shared library that contains, among other common items, the outlines for embedded fonts that will be used throughout the site. After these common elements are in place, Master Movie directs the intro animation movie, the navigation buttons, and the MP3 player movie to load into its shell. These components are three separate movies that need to download before they can play. To give the visitor visual feedback that something is happening during the wait, a faded violin becomes progressively more saturated. The percentage and the number of kilobytes downloaded also appear on the screen in dynamic text boxes that get their information as a script from Master Movie runs.
Violin animation with empty dynamic text boxes that fill as a script calculates the percentage and kilobytes loaded
Once the components for the opening page of the site have downloaded, a hierarchy must be established in order to keep the important elements on the screen at all times. For instance, no matter what page of the site the visitor chooses, the MP3 player and main menu need to remain visible and functioning. The way this occurs is through a stacking order, or levels. Master Movie is level zero, and therefore is always on the bottom. The various pages of the site (such as the biography pages, the reviews, and the gallery) load into level 5. The number of the level is not as important as the order: higher numbers rise to the top of the stack. Keep in mind, too, that movies that share a level get swapped in and out on the stage. If intro and gallery are both in level five, and intro is currently playing on the stage, once the visitor clicks the button for gallery, intro is unceremoniously escorted off the stage to make way for gallery. The hook lives…
You can see, then, that by simply loading the MP3 player piece into something like level 21, it will always be visible and on top on the stage. The other thing to keep in mind is that movies are transparent except for the areas where there are actual objects such as an MP3 player. This allows the designer to layer components in Master Movie. If the pages for gallery, reviews, and videos keep their objects in the middle of the screen, even though their level may be higher, the banner at the top of Master Movie will still show through.
The MP3 player movie only fills the bottom of the screen.
The violinist of the Gemini Piano Trio is very Web savvy, and, in fact, he created the standard HTML version of the group’s Web site. It became clear to me that he could easily handle updating the various components of the site himself if I gave him a little training. I typed out some basic directions, and spent a Sunday afternoon showing him the underpinnings of his Flash site. The important key I needed to convey to him was that he never has to touch an FLA file (these are the raw Flash files) in order to make his updates. The content, in the form of JPGs, MP3s, and TXT documents, is external to the Flash files, and loads at runtime.
Note: Flash is also great at handling XML, databases, and scripting languages such as PHP.
There are three areas in which I planned for client updating of the site: the MP3 files, the JPGs for the photo gallery, and the text for the various areas such as reviews, news, biographies, and concert schedule. By the time you read this article, the video pages should be complete, and I plan to make those easily updateable as well. Let’s take a look at the text updates first.
This Flash site makes extensive use of dynamic text boxes. What that means is that the written content is not actually embedded in the Flash movies themselves. Rather, the content is “called” at runtime. I used ActionScript, which is the programming language of Flash, to code this ability into the “swf” (the extension used in Flash movies) files.
First I created the plain text documents from the client’s content. Each document starts with a variable and then sets the content as the value. For example, here is the text in a plain text document for the description of one of the images in the photo gallery:
info=<p>Sheng-Tsung Wang, violinist</p>
The variable is “info” and the value is “Sheng-Tsung Wang, violinist” encased in HTML paragraph tags. Flash MX 2004 has some limited support for CSS, and an external style sheet sets the formatting for the paragraph tag.
I created all of the documents in this way, and put them in appropriate folders. The folders contain the documents for the different pages:
You can see that all the violinist has to do is modify the information in the plain text document. He was trained not to touch the variable or HTML code.
Of course there are always new publicity shots as the group records new CDs or performs in concert. For that reason, I made the slide show dynamic as well. Again, the images are external JPG files that are “called” through the use of ActionScript code in the gallery movie. My violinist has to do three things in order to update the slide show:
The numerical names serve an important purpose in that they provide the basis for a loop that cycles through the gallery.
One of the most important marketing tools of the site is the MP3 player with samples from the group’s CDs. There are plans for recording a new CD this year, and, just like every other part of the site, the violinist will be able to update the MP3 player himself. The steps are similar to those for the gallery, but with a twist made possible by a new feature that was included in Flash MX. Let’s review the steps:
Embedded ID3 tags allow Flash to identify and caption the music as it plays.
Note: Other “toys” in the MP3 player include a preloader that shows how much of the sound has downloaded. Because the sound is set to stream, the file begins playing before it finishes downloading. A related feature is the little ball that gives feedback for how much of the sound has played, and how much is still left. Finally, there is a volume control that allows the visitor to adjust the level by percentage. There is an alpha setting added to the ActionScript so that as the slider goes higher, the text becomes darker and more visible. As the slider goes closer to 0%, the text begins to fade.
I hope that this article has convinced you that there is some virtue in using Flash for specially targeted Web sites. Each new version of Flash gets better on accessibility issues, so this last great area of resistance should fall away in time as well. For instance, you can use an XML file to stream captioned text as videos play in your Flash file. If you would like to learn more about accessibility and Flash, go to the “Flash Developer’s Center” at:
http://www.macromedia.com/macromedia/accessibility/features/flash/hints.html
Another area of resistance, search engine optimization, still poses its problems, but there is good advice here:
http://searchenginewatch.com/searchday/article.php/2200921
If you’re interested in learning Flash yourself, I recommend the following books, in this order:
Additionally, Joey Lott is a partner at Community MX:
where, once you become a member, you can get personalized help with your Flash projects from The Man himself. Joey helped me solve an ActionScript problem I was having with the sound in the intro animation.
Community MX publishes two new articles, tutorials, or extensions each business day of the year. There are hundreds of Flash titles in the database, many of which provide unique content that can be found nowhere else.
I hope you’ve enjoyed this intimate look into the construction of a Flash site, and have become convinced that there are times when Flash is the best choice. Now go visit the Gemini Piano Trio Web site. As you read all the latest news on upcoming concerts and CDs, you can smile smugly to yourself because you know exactly how that information got there.
