Co-ordinate Your Flash Site

Share this article

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:

949_image1

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:

949_image2

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:

949_image3

Enough!

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");  
_root.music_holder.music.gotoAndStop("back");    
 
\ 2. these commands make the images, which are designed to automatically    
\ pop-up for certain songs (above), invisible.  
 
_root.music_holder.music.miles._visible = false;  
_root.music_holder.music.herbie._visible = false;  
_root.music_holder.music.john._visible = false;  
_root.music_holder.music.jazzfestival._visible = false;  
_root.music_holder.music.sax._visible = 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");  
_root.movieholder.button_rack.info.gotoAndStop("start");  
_root.movieholder.button_rack.contact.textAnimation.gotoAndStop("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.  
 
_root.clock_holder.credits.gotoAndStop("off");  
 
\ 7. this command unloads any previously loaded movie, in case it    
\ had been displayed.    
 
_root.wipe1_holder.unloadMovie();    
 
\ 8. this command unloads yet another sub-movie, in case it    
\ had been displayed.  
 
_root.movieholder._level1.unloadMovie();  
 
\ 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.
  • 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.
  • 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.
  • 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!
  • 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!

    Steven MaclinSteven Maclin
    View Author

    Steve’s been a university professor since 1994, but for the past 5 years he’s been living and working with American military troops in Japan, South Korea, and Hawai’i. He has previously edited and published dozens of articles in professional administrative journals and recently, in his ‘spare time,’ he’s been building Flash Websites for distributing materials to his graduate students. Visit him at SteveMaclin.com.

    Share this article
    Read Next
    How to Deploy Apache Airflow on Vultr Using Anaconda
    How to Deploy Apache Airflow on Vultr Using Anaconda
    Vultr
    Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
    Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
    Dave NearyAaron Williams
    How to Create Content in WordPress with AI
    How to Create Content in WordPress with AI
    Çağdaş Dağ
    A Beginner’s Guide to Setting Up a Project in Laravel
    A Beginner’s Guide to Setting Up a Project in Laravel
    Claudio Ribeiro
    Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
    Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
    Gitlab
    Creating Fluid Typography with the CSS clamp() Function
    Creating Fluid Typography with the CSS clamp() Function
    Daine Mawer
    Comparing Full Stack and Headless CMS Platforms
    Comparing Full Stack and Headless CMS Platforms
    Vultr
    7 Easy Ways to Make a Magento 2 Website Faster
    7 Easy Ways to Make a Magento 2 Website Faster
    Konstantin Gerasimov
    Powerful React Form Builders to Consider in 2024
    Powerful React Form Builders to Consider in 2024
    Femi Akinyemi
    Quick Tip: How to Animate Text Gradients and Patterns in CSS
    Quick Tip: How to Animate Text Gradients and Patterns in CSS
    Ralph Mason
    Sending Email Using Node.js
    Sending Email Using Node.js
    Craig Buckler
    Creating a Navbar in React
    Creating a Navbar in React
    Vidura Senevirathne
    A Complete Guide to CSS Logical Properties, with Cheat Sheet
    A Complete Guide to CSS Logical Properties, with Cheat Sheet
    Ralph Mason
    Using JSON Web Tokens with Node.js
    Using JSON Web Tokens with Node.js
    Lakindu Hewawasam
    How to Build a Simple Web Server with Node.js
    How to Build a Simple Web Server with Node.js
    Chameera Dulanga
    Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
    Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
    Beloslava Petrova
    Crafting Interactive Scatter Plots with Plotly
    Crafting Interactive Scatter Plots with Plotly
    Binara Prabhanga
    GenAI: How to Reduce Cost with Prompt Compression Techniques
    GenAI: How to Reduce Cost with Prompt Compression Techniques
    Suvoraj Biswas
    How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
    How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
    Aurelio De RosaMaria Antonietta Perna
    Quick Tip: How to Align Column Rows with CSS Subgrid
    Quick Tip: How to Align Column Rows with CSS Subgrid
    Ralph Mason
    15 Top Web Design Tools & Resources To Try in 2024
    15 Top Web Design Tools & Resources To Try in 2024
    SitePoint Sponsors
    7 Simple Rules for Better Data Visualization
    7 Simple Rules for Better Data Visualization
    Mariia Merkulova
    Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
    Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
    SitePoint Team
    Best Programming Language for AI
    Best Programming Language for AI
    Lucero del Alba
    Quick Tip: How to Add Gradient Effects and Patterns to Text
    Quick Tip: How to Add Gradient Effects and Patterns to Text
    Ralph Mason
    Logging Made Easy: A Beginner’s Guide to Winston in Node.js
    Logging Made Easy: A Beginner’s Guide to Winston in Node.js
    Vultr
    How to Optimize Website Content for Featured Snippets
    How to Optimize Website Content for Featured Snippets
    Dipen Visavadiya
    Psychology and UX: Decoding the Science Behind User Clicks
    Psychology and UX: Decoding the Science Behind User Clicks
    Tanya Kumari
    Build a Full-stack App with Node.js and htmx
    Build a Full-stack App with Node.js and htmx
    James Hibbard
    Digital Transformation with AI: The Benefits and Challenges
    Digital Transformation with AI: The Benefits and Challenges
    Priyanka Prajapat
    Quick Tip: Creating a Date Picker in React
    Quick Tip: Creating a Date Picker in React
    Dianne Pena
    How to Create Interactive Animations Using React Spring
    How to Create Interactive Animations Using React Spring
    Yemi Ojedapo
    10 Reasons to Love Google Docs
    10 Reasons to Love Google Docs
    Joshua KrausZain Zaidi
    How to Use Magento 2 for International Ecommerce Success
    How to Use Magento 2 for International Ecommerce Success
    Mitul Patel
    5 Exciting New JavaScript Features in 2024
    5 Exciting New JavaScript Features in 2024
    Olivia GibsonDarren Jones
    Tools and Strategies for Efficient Web Project Management
    Tools and Strategies for Efficient Web Project Management
    Juliet Ofoegbu
    Choosing the Best WordPress CRM Plugin for Your Business
    Choosing the Best WordPress CRM Plugin for Your Business
    Neve Wilkinson
    ChatGPT Plugins for Marketing Success
    ChatGPT Plugins for Marketing Success
    Neil Jordan
    Managing Static Files in Django: A Comprehensive Guide
    Managing Static Files in Django: A Comprehensive Guide
    Kabaki Antony
    The Ultimate Guide to Choosing the Best React Website Builder
    The Ultimate Guide to Choosing the Best React Website Builder
    Dianne Pena
    Exploring the Creative Power of CSS Filters and Blending
    Exploring the Creative Power of CSS Filters and Blending
    Joan Ayebola
    How to Use WebSockets in Node.js to Create Real-time Apps
    How to Use WebSockets in Node.js to Create Real-time Apps
    Craig Buckler
    Best Node.js Framework Choices for Modern App Development
    Best Node.js Framework Choices for Modern App Development
    Dianne Pena
    SaaS Boilerplates: What They Are, And 10 of the Best
    SaaS Boilerplates: What They Are, And 10 of the Best
    Zain Zaidi
    Understanding Cookies and Sessions in React
    Understanding Cookies and Sessions in React
    Blessing Ene Anyebe
    Enhanced Internationalization (i18n) in Next.js 14
    Enhanced Internationalization (i18n) in Next.js 14
    Emmanuel Onyeyaforo
    Essential React Native Performance Tips and Tricks
    Essential React Native Performance Tips and Tricks
    Shaik Mukthahar
    How to Use Server-sent Events in Node.js
    How to Use Server-sent Events in Node.js
    Craig Buckler
    Five Simple Ways to Boost a WooCommerce Site’s Performance
    Five Simple Ways to Boost a WooCommerce Site’s Performance
    Palash Ghosh
    Elevate Your Online Store with Top WooCommerce Plugins
    Elevate Your Online Store with Top WooCommerce Plugins
    Dianne Pena
    Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
    Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
    Dianne Pena
    How to Build a Chat Interface using Gradio & Vultr Cloud GPU
    How to Build a Chat Interface using Gradio & Vultr Cloud GPU
    Vultr
    Enhance Your React Apps with ShadCn Utilities and Components
    Enhance Your React Apps with ShadCn Utilities and Components
    David Jaja
    10 Best Create React App Alternatives for Different Use Cases
    10 Best Create React App Alternatives for Different Use Cases
    Zain Zaidi
    Control Lazy Load, Infinite Scroll and Animations in React
    Control Lazy Load, Infinite Scroll and Animations in React
    Blessing Ene Anyebe
    Building a Research Assistant Tool with AI and JavaScript
    Building a Research Assistant Tool with AI and JavaScript
    Mahmud Adeleye
    Understanding React useEffect
    Understanding React useEffect
    Dianne Pena
    Web Design Trends to Watch in 2024
    Web Design Trends to Watch in 2024
    Juliet Ofoegbu
    Building a 3D Card Flip Animation with CSS Houdini
    Building a 3D Card Flip Animation with CSS Houdini
    Fred Zugs
    How to Use ChatGPT in an Unavailable Country
    How to Use ChatGPT in an Unavailable Country
    Dianne Pena
    An Introduction to Node.js Multithreading
    An Introduction to Node.js Multithreading
    Craig Buckler
    How to Boost WordPress Security and Protect Your SEO Ranking
    How to Boost WordPress Security and Protect Your SEO Ranking
    Jaya Iyer
    Understanding How ChatGPT Maintains Context
    Understanding How ChatGPT Maintains Context
    Dianne Pena
    Building Interactive Data Visualizations with D3.js and React
    Building Interactive Data Visualizations with D3.js and React
    Oluwabusayo Jacobs
    JavaScript vs Python: Which One Should You Learn First?
    JavaScript vs Python: Which One Should You Learn First?
    Olivia GibsonDarren Jones
    13 Best Books, Courses and Communities for Learning React
    13 Best Books, Courses and Communities for Learning React
    Zain Zaidi
    5 jQuery.each() Function Examples
    5 jQuery.each() Function Examples
    Florian RapplJames Hibbard
    Implementing User Authentication in React Apps with Appwrite
    Implementing User Authentication in React Apps with Appwrite
    Yemi Ojedapo
    AI-Powered Search Engine With Milvus Vector Database on Vultr
    AI-Powered Search Engine With Milvus Vector Database on Vultr
    Vultr
    Understanding Signals in Django
    Understanding Signals in Django
    Kabaki Antony
    Why React Icons May Be the Only Icon Library You Need
    Why React Icons May Be the Only Icon Library You Need
    Zain Zaidi
    View Transitions in Astro
    View Transitions in Astro
    Tamas Piros
    Getting Started with Content Collections in Astro
    Getting Started with Content Collections in Astro
    Tamas Piros
    What Does the Java Virtual Machine Do All Day?
    What Does the Java Virtual Machine Do All Day?
    Peter Kessler
    Become a Freelance Web Developer on Fiverr: Ultimate Guide
    Become a Freelance Web Developer on Fiverr: Ultimate Guide
    Mayank Singh
    Layouts in Astro
    Layouts in Astro
    Tamas Piros
    .NET 8: Blazor Render Modes Explained
    .NET 8: Blazor Render Modes Explained
    Peter De Tender
    Mastering Node CSV
    Mastering Node CSV
    Dianne Pena
    A Beginner’s Guide to SvelteKit
    A Beginner’s Guide to SvelteKit
    Erik KückelheimSimon Holthausen
    Brighten Up Your Astro Site with KwesForms and Rive
    Brighten Up Your Astro Site with KwesForms and Rive
    Paul Scanlon
    Which Programming Language Should I Learn First in 2024?
    Which Programming Language Should I Learn First in 2024?
    Joel Falconer
    Managing PHP Versions with Laravel Herd
    Managing PHP Versions with Laravel Herd
    Dianne Pena
    Accelerating the Cloud: The Final Steps
    Accelerating the Cloud: The Final Steps
    Dave Neary
    An Alphebetized List of MIME Types
    An Alphebetized List of MIME Types
    Dianne Pena
    The Best PHP Frameworks for 2024
    The Best PHP Frameworks for 2024
    Claudio Ribeiro
    11 Best WordPress Themes for Developers & Designers in 2024
    11 Best WordPress Themes for Developers & Designers in 2024
    SitePoint Sponsors
    Top 10 Best WordPress AI Plugins of 2024
    Top 10 Best WordPress AI Plugins of 2024
    Dianne Pena
    20+ Tools for Node.js Development in 2024
    20+ Tools for Node.js Development in 2024
    Dianne Pena
    The Best Figma Plugins to Enhance Your Design Workflow in 2024
    The Best Figma Plugins to Enhance Your Design Workflow in 2024
    Dianne Pena
    Harnessing the Power of Zenserp for Advanced Search Engine Parsing
    Harnessing the Power of Zenserp for Advanced Search Engine Parsing
    Christopher Collins
    Build Your Own AI Tools in Python Using the OpenAI API
    Build Your Own AI Tools in Python Using the OpenAI API
    Zain Zaidi
    The Best React Chart Libraries for Data Visualization in 2024
    The Best React Chart Libraries for Data Visualization in 2024
    Dianne Pena
    7 Free AI Logo Generators to Get Started
    7 Free AI Logo Generators to Get Started
    Zain Zaidi
    Turn Your Vue App into an Offline-ready Progressive Web App
    Turn Your Vue App into an Offline-ready Progressive Web App
    Imran Alam
    Clean Architecture: Theming with Tailwind and CSS Variables
    Clean Architecture: Theming with Tailwind and CSS Variables
    Emmanuel Onyeyaforo
    How to Analyze Large Text Datasets with LangChain and Python
    How to Analyze Large Text Datasets with LangChain and Python
    Matt Nikonorov
    6 Techniques for Conditional Rendering in React, with Examples
    6 Techniques for Conditional Rendering in React, with Examples
    Yemi Ojedapo
    Introducing STRICH: Barcode Scanning for Web Apps
    Introducing STRICH: Barcode Scanning for Web Apps
    Alex Suzuki
    Using Nodemon and Watch in Node.js for Live Restarts
    Using Nodemon and Watch in Node.js for Live Restarts
    Craig Buckler
    Task Automation and Debugging with AI-Powered Tools
    Task Automation and Debugging with AI-Powered Tools
    Timi Omoyeni
    Get the freshest news and resources for developers, designers and digital creators in your inbox each week
    Loading form