Question

I am about to build a website in flash and AS3 where some pages will be given content through the flash authoring program, and others will be generated dynamically by as3 (not just the content of the page, but new pages themselves will be added through AS3). I am trying to figure out a general code architecture to support this.

The first solution that comes to mind is this: having all child display objects for any single page’s content housed in a container movie clip. This way I would have one movie-clip on stage for each page. On first thoughts, I could manage which page the person is on by setting the alpha to none, disabling all mouse interactivity for the Movie-clips which are not the current page. But I’m not certain this is the best way to manage memory. The other possibility is to move these movie clips outside of the bounds of the stage when not in use, but this might suffer from the same memory problems. Lastly, I could just add and remove display objects, so that only one movieclip at a time is on stage, but how would I keep the pages which were built in the flash authoring program? Could I store all of that somewhere in AS3, so I could add the display children back in their original form?

If someone knows of some articles which might deal with these problems, or explain simple design patterns for AS3/flash web pages, that would be great. I’m sure someone smarter than me has thought this through, and I don’t want to re-invent the wheel.

Answer 1

I would “export” each “page” to their own class (from within the library), along with a corresponding .as file for any specific code for each page. Then have a MovieClip named something like mainContent_mc that would always exist on stage as a placeholder.

When you want to load a new page call a function like:

function loadPage(pageNumber:int):void {
    //Remove any children of the content placeHolder
    //TODO: Handle any other memory management here as well
    while(mainContent_mc.numChildren > 0){      
        mainContent_mc.removeChildAt(0);
    }

    //Add the desired page
    switch(pageNumber){
        case 0:
            var p0:HomePage = new HomePage();
            mainContent_mc.addChild(p0);
            break;
        case 1:
            var p1:AboutPage = new AboutPage();
            mainContent_mc.addChild(p1);
            break;
    }
}

Of course if your pages are really small memory wise, you could get by with simply setting .visible = false; for all of your “pages” but I would still organize them as mentioned above.