Co-ordinate Your Flash Site

Flash Websites load more quickly when they’re broken into smaller movies (i.e. "modularized"). While the idea seems obvious enough, it’s still worth mentioning! But what’s less obvious is that, once you’ve started along that road, issues of "coordination" take precedent; and, whether the developer is a seasoned professional or a relative newbie (like me), they’d do well to recognize these issues up front.

This article hopes to accomplish three things: first, to underscore the value of modularization. Second, to clarify some of its important, though previously underreported, repercussions. Finally, to offer remedy to these repercussions by explaining how the task of "coordination" can be accomplished systematically.

References are made to a few Websites I’ve designed for others and to a bulleted check list of questions that Flash developers (particularly those hoping to decrease load times) should consider before they break up their Websites into little bitty pieces.

Case Study

I had previously broken up a few sections of one of my favorite Websites into smaller swfs and loaded them into different levels of the main movie. In fact, this seemed pretty logical for things like MP3 or music selectors, clocks and such. And I’d grown accustomed to the inordinate size that my main movie had grown to. So, when I came across a recent SitePoint article on modularizing the main movie (otherwise known as putting it on a diet), I studied it with great interest.

Indeed, it worked! In fact, it worked so seamlessly, I went through my entire Website and modularized 6-8 additional sections! Great, I thought! Now, the main movie was much smaller in size — at least, it was after I deleted all remaining unused items from its library. With that, I noticed the site took less time to load, and that I could more easily isolate any remaining areas of concern. Unexpectedly, by breaking up the main movie into smaller pieces, it became easier to identify those sections of the Website that could be re-used!

For instance, when the Website initially loads, a set of doors open to reveal an image centered on the screen, which sits right above four main navigational buttons. Before modularization, this "door-opening routine" would occur only once — the first time the site was loaded. This was the first thing I modularized, and, after I did, it became obvious to me that I could re-use or "coordinate" the door-opening routine to execute every time my users clicked on one of the main navigation buttons! All I had to do was call the door-opening routine from inside each one of the buttons. Simple!

What I had not yet realized was that the task of coordination would eventually become anything but simple. Try coordinating anywhere from 25-50 different sub-movies so that they interact as users expect, both with the main movie and with one another! Let me tell you, it can get a little unwieldy!

Just how Unwieldy Can it Be?

Well, let me just say that, despite its obvious benefits, modularization raises important questions of coordination (which, in turn, raise questions of time and effort — e.g. how much time do you have and how much effort are you willing to expend?). However, the first question asks: "how much modularization is enough, and how much is too much?" Is there a point of optimality? Consider this.

You’ve got four navigational buttons, all programmed into your main .swf. Each is associated with a different sub-menu item or selection, and each has a different background image (see Image 1). Modularize these four buttons into four smaller, faster-loading .swfs and you’ve got problems. Check this:

  • the sub-menu selections and/or background image for the first button need to be turned off when any other main navigational buttons is selected;
  • the same for the second button the user selects — its related information needs to be turned on; and, while all of this is happening,
  • the first button is not supposed to disappear or become inoperative.
  • the background music should not be affected by the button selection, but the images of musicians that appear when the music begins should disappear when certain buttons (but not all) are selected.

For a seasoned Flash designer or developer, none of this is particularly disturbing; everything is as it should be. But for the rest of us, aspiring to become a seasoned Flash "something or other," this all comes from out of the blue.

It means we need to program each of the navigational buttons to issue a series of commands that will make certain characteristics of the remaining buttons roll-up, slide out, or otherwise disappear — to allow the other buttons to display their information without interfering with one another. In plain English, the buttons need to evaluate and interact with their "environment" before they execute.

This, then, raises a second question: "how do I get the smaller .swfs to exchange commands between one another, as well as to and from the main movie?"

The Coordinative Task

Say, for instance, the Website loads and the user clicks one of the main navigation buttons. As they expect, the button displays its submenus:

Co-ordinate Your Flash Site

And, as the user rolls over each one of the submenu items, the text for that item highlights and an image is displayed in the main "display area" — an image that visually conveys the main idea of the current (rolled-over) item.

Then (since we’ve all got these really intelligent users) — with the first menu still in its "down" position, but without selecting anything from its submenu — the user decides to click a second navigation button, one which comes with its own menus and (you guessed it) an image that would effectively cover the same display area:

Co-ordinate Your Flash Site

Well, if the two buttons are modularized (which is to say they exist as separate .swfs) — and are not coordinated — both sub-menus and/or background images will be displayed on top of one another, rendering both buttons ineffective:

Co-ordinate Your Flash Site


For some projects, this may produce the desired effect(s). But, if that’s not quite what you had in mind, you may want to read further.

Though I’ve learned a lot about Flash by modularizing my Website, I’ve learned twice as much by taking the time to coordinate the buttons and other routines I had so happily dismantled. After all, what good is a movie that loads quickly and is easy to repair if it doesn’t operate as expected? Not much.

Anyway, to give you an idea of the kind of interactivity involved in coordinating your buttons with one another, here’s a list of the commands that are now issued from my "Home" button:

on(release) {   

\ 1. these commands turn off the music, if it's already been turned on.   

_root.music_holder. unloadMovie("miles_and_john.swf");     _root.music_holder. unloadMovie("love_supreme.swf");     _root.music_holder. unloadMovie("cannonball_adderley.swf");     _root.music_holder. unloadMovie("finding_forrester.swf");     _root.music_holder. unloadMovie("tribute_to_miles.swf");"back");    

\ 2. these commands make the images, which are designed to automatically      \ pop-up for certain songs (above), invisible. = false; = false; = false; = false; = false;   

\ 3. if any of the navigational buttons are currently in their "display"      \ positions, these commands will bring them back to their      \ original positions.     

_root.movieholder.button_rack.gotoAndStop("start");     _root.movieholder.button_rack.teaching.gotoAndStop("start");     _root.movieholder.button_rack.research.gotoAndStop("start");"start");"start");   

\ 4. these commands turn off the background images that are associated      \ with each one of the (above) navigational buttons.     

_root.movieholder.mc_button_1_holder.unloadMovie();     _root.movieholder.mc_button_2_holder.unloadMovie();     _root.movieholder.mc_button_3_holder.unloadMovie();     _root.movieholder.mc_button_4_holder.unloadMovie();   

\ 5. this command turns on the background image that comes up      \ when the website initially loads.   

_root.movieholder.mc_picture_base._visible = true;   

\ 6. in case the user had previously clicked "credits," this command      \ makes the credits display go to its initial (off) position.   


\ 7. this command unloads any previously loaded movie, in case it      \ had been displayed.    


\ 8. this command unloads yet another sub-movie, in case it      \ had been displayed.   


\ 9. finally, this command loads a very small movie that appears      \  when the website initially loaded, telling the user that      \ they are now "back home."   

loadMovie("wipe1.swf", "wipe1_holder");     }

As you can see, there’s a lot going on — at least potentially — which is why you have to issue so many commands. Keep in mind that a similar slate of commands will need to be issued to other buttons so that they are similarly informed on how they should operate in a given situation. Again, the buttons need to interact with their "environment" — however that environment might be configured when the user decides to do whatever it is they do.

As you might imagine, several of the above commands will probably go nowhere, but that’s alright. Effective coordination is all about thinking through, and addressing up-front, the various possible interactions. You constantly need to ask yourself "what if?"

While several commands will probably go "unused," it’s important that they’re there so the user can do what they want to do, when they want to do it, "without the water going on every time they turn on the gas."

Before You Modularize

That said, here are a few instructions that may be of benefit to other newbies. These are things that should be determined before you modularize your Website.

  1. Make a list of all the intended interactions that could take place between the buttons/routines that you plan to modularize and their "environment." For navigation buttons, you might want to consider whether their (intended) operation should be constrained by, or subject to the operation of other buttons.
  2. Determine which commands will be necessary for the modularized buttons/ routines to interact with their "environments" once they are modularized. While absolute references to the _root. may help considerably (see above), other techniques (e.g., loading smaller .swfs into different levels of a given movie) may work even better in certain instances.
  3. Determine where these commands will need to be issued from. If you want to include a quiz on your Website, Macromedia provides a few quiz templates in Flash MX, under the File menu. If you want to modularize the completed quiz and have it load in your main movie, it may have problems reporting its results. Answer: load it as a stand-alone program and call it (from a button on the main movie) into its own browser window.
  4. Determine when these commands will need to be issued. When coordinating actions, you’ll find several places to load commands so that the website will operate as you intend. Sometimes, you’ll want to issue commands from a button, sometimes from a movie, sometimes from a frame, sometimes from a browser window, sometimes from a JavaScript, etc, etc. Don’t be afraid to think outside the box!
  5. Finally, determine (for yourself) how much time and effort you are able and willing to expend on a given project before you modularize it. As I hope to have shown here, each newly-created module brings with itself the additional requirement that it interact effectively with the rest of the Website. Alas, very little in life is automatic, and even less in Flash!

Bottom line: modularization is worthwhile, and should be done more often. But, since it’s only half the equation — you should know what it costs!


Category: software Time: 2002-11-27 Views: 2

Related post

  • Fast-Track Your Flash Site 2002-11-20

    Many Websites that use Flash could be optimized to load much more quickly than they currently do. By breaking up one large .swf into multiple smaller .swf files, you can decrease the time it takes your site to load, while at the same time making the

  • The Best Structure for your Flash Site 2006-04-07

    Adobe's (formerly Macromedia's) Flash application is, according to them, "The industry's most advanced authoring environment for creating interactive web sites and digital experiences." However, many users have trouble structuring their site eff

  • Display Download Status In Your Flash Preloader 2003-04-29

    We've all heard the hype, but you and I both know that Flash is a powerful tool, and needn't be a turn-off for users (yes, even those on dial-up connections). You can spend a lot of time honing your sites and movies to make the Flash experience more

  • .htaccess: Redirect Hotlink Flash -- Site with embed Flash 2011-02-21

    I have some PHP sites that embeds SWF files. These SWF files are now linked to by some other guys. And I don't want them to simply open the SWF, I want them to force being redirect to the page where the flash is embed. www.example.c

  • Pop up warning your flash player maybe out of date 2014-05-05

    In my office, it seems the router is infected by malware. So when we access and other specific sites, it always show pop up "warning!your flash player maybe out of date", then it will redirect to flash download page. I already downloa

  • XP SP2 and Your Web Site 2004-05-29

    This doesn't affect just ASP.NET developers, however the article concentrates on Microsoft technologies. How to Make Your Web Site Work with Windows XP Service Pack 2 shows what you need to do to be prepared for the changes to Internet Explorer, prin

  • Make Money From Your Content Site 2005-07-12

    If you're a Webmaster whose site receives even a modest amount of traffic, you've no doubt dreamed of the untold riches that lie untapped in your traffic stream. The burning question is: "How can I make the most money possible from my Website traffic

  • What's Your Web Site Worth? 2008-05-07

    Every day, we hear of yet another enormous company that's paid an even more unbelievable sum for an online entity that - it often seems from where you and I are sitting - doesn't actually generate much of an income. In the last few years, Yahoo! has

  • 10 Places to Sell Your Web Site 2009-08-24

    There comes a time when we all have an idea for a web site, we set it up and then-we never have time to work on it. There also comes a time when you realize you don't have the passion you once did, and instead of just letting it die, you want to find

  • 7 Tips To Make Your Web Site Mobile-friendly 2009-11-18

    This guest post has been written by Igor Faletski, co-founder of Mobify, the popular service for optimizing a site for the mobile web. SitePoint uses Mobify for its own mobile site - check it out at 1. Style for mobile Congrat

  • 7 Tips to Improve Your Web Site Copy 2009-11-19

    If you are a designer or developer, you probably use your own web site as a showcase, displaying what you can do for clients. Through your beautiful design, great functionality and creative navigation, your web site can be your best portfolio. But so

  • Macbook Pro suddenly lagging video playback + Flash sites 2011-08-01

    I have a Macbook Pro, OSx Lion, Intel Core2 Duo, 4GB Ram, NVidia Geforce 8600M GT 128 MB Ram, Intel x25m SSD. Approximately 4 years old. I've been running Flash sites and playing videos without any problems for years. Then suddenly 3 months ago, a fl

  • How do I fix the error "Your personal site does not contain a picture library named 'Pictures'" on user profile pages? 2011-11-15

    I'm working with a SharePoint 2010 farm that has SP 1 + the October 2011 CU installed. MySites and User Profile Synchronization with Active Directory were recently added. Everything seems to be working fine with the exception of loading user pictures

  • 10 New and Exciting jQuery Plugins for your WP Site 2012-04-05

    Today we are sharing you our collection of jQuery-powered plugins that adds coolness and interactive effects to your WordPress site that you'd love. Enjoy! Also see: 100 WordPress jQuery Plugins 1. Disruptive Talk It is a phono widget which lets Word

  • Problem: Enabling SquirrelMail For Your Web Sites On An ISPConfig 3 Server 2012-07-28

    Hello, I am running 10.10 with ISPC 3 (which was upgraded from 10.04). I attempted to enable the symlink so that squirrelmail is accessible from mydomain/webmail. However, I received an error when restarting apache indicating there was an error in--I

  • Question about "Mirror Your Web Site With rsync" 2012-11-09

    I have two servers set up, one being the primary(SERVER1), the second(SERVER2) being the backup in case of failure. I'm trying to get a good system set up to mirror all my files over to the backup server, so I tried the "Mirror Your Web Site With rsy

  • 4 Ways to Make Your WordPress Site More Accessible 2012-12-31

    Most of the time, my writing focuses on search engine optimization techniques. So, why would I write about accessibility in WordPress? Because, to a large extent, optimizing a site for search engines and optimizing a site for disability access amount

  • Enabling SquirrelMail For Your Web Sites On An ISPConfig 3 Server (Ubuntu 10.10) 2013-01-11

    Enabling SquirrelMail For Your Web Sites On An ISPConfig 3 Server (Ubuntu 10.10) Version 1.0 Author: Falko Timme Follow me on Twitter Lots of people have reported problems (such as getting 404 Not Found errors) using the SquirrelMail webmail package

  • How To Install jQuery Mobile on Your WordPress Site the Right Way 2013-03-20

    So, you want to start taking advantage of some of the fantastic new jQuery Mobile features on your WordPress site, but you could use some guidance as to the best way to get up and running fast. No problem! With this quick walkthrough, I'll show you t

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 3.547 (s). 13 q(s)