Loaders

[DrewFulton]

I am in the final stages of my site design and am hung up on a specific loading problem. I have a main swf file that then loads other swf for each page.

I want to load the swf's into a specific MovieClip that is placed on the stage as part of a scroll bar setup. I don't know how to do this. I can simply create a loader and place it in a movieclip I create with AS and then use addchild. This works except for it means I have to place the scroll bar setup on each separate page creating a lot more tedious work and longer loads. Plus, I seem to only be able to load one page and then can't unload the loader to load another page. Major issue obviously.

So here we are... How can I take an external swf, load it into a MovieClip with instance name "content_mc" when a button is clicked. Second, when a different button is clicked, how do I unload the previous swf and load a new one? Below is the code I have so far. I look forward to any help.

Thanks so much.
Drew



stop();
var contentLoader:Loader = new Loader();
menu_mc.project_mc.projectsub.pdescription.addEven tListener(MouseEvent.CLICK, loadContent);
menu_mc.project_mc.projectsub.updates.addEventList ener(MouseEvent.CLICK, loadContent);

menu_mc.team_mc.teamsub.drew.addEventListener(Mous eEvent.CLICK, loadContent);
menu_mc.team_mc.teamsub.greg.addEventListener(Mous eEvent.CLICK, loadContent);
menu_mc.team_mc.teamsub.colin.addEventListener(Mou seEvent.CLICK, loadContent);
menu_mc.team_mc.teamsub.others.addEventListener(Mo useEvent.CLICK, loadContent);

menu_mc.media_mc.mediasub.photo.addEventListener(M ouseEvent.CLICK, loadContent);
menu_mc.media_mc.mediasub.pvideo.addEventListener( MouseEvent.CLICK, loadContent);
menu_mc.media_mc.mediasub.science.addEventListener (MouseEvent.CLICK, loadContent);

menu_mc.outreach_mc.outreachsub.offerings.addEvent Listener(MouseEvent.CLICK, loadContent);
menu_mc.outreach_mc.outreachsub.uevents.addEventLi stener(MouseEvent.CLICK, loadContent);

menu_mc.support_mc.supportsub.sponsors.addEventLis tener(MouseEvent.CLICK, loadContent);
menu_mc.support_mc.supportsub.donate.addEventListe ner(MouseEvent.CLICK, loadContent);


var subButtonSelect; // Holds Name of Button Currently Selected
var subbuttonArray:Array = [menu_mc.project_mc.projectsub.pdescription, menu_mc.project_mc.projectsub.updates, menu_mc.team_mc.teamsub.drew, menu_mc.team_mc.teamsub.greg, menu_mc.team_mc.teamsub.colin, menu_mc.team_mc.teamsub.others, menu_mc.media_mc.mediasub.photo, menu_mc.media_mc.mediasub.pvideo, menu_mc.media_mc.mediasub.science, menu_mc.outreach_mc.outreachsub.offerings, menu_mc.outreach_mc.outreachsub.uevents, menu_mc.support_mc.supportsub.sponsors, menu_mc.support_mc.supportsub.donate]
var contentArray:Array = ["pdescription.swf", "updates.swf", "drew.swf", "greg.swf", "colin.swf", "others.swf", "photo.swf", "pvideo.swf", "science.swf", "offerings.swf", "uevents.swf", "sponsors.swf", "donate.swf"];


function loadContent(event:MouseEvent):void {
for(var i:int = 0; i < subbuttonArray.length; i++) {
if(event.currentTarget == subbuttonArray[i]) {
if(subButtonSelect != null)
{
removeChild(content_swf);

}
contentLoader.load(new URLRequest(contentArray[i]));
contentLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onContentLoaded);
subButtonSelect = event.currentTarget;
}

}
}


function onContentLoaded( event:Event ):void{
content_swf = MovieClip(contentLoader.content);
addChild(content_swf);
}

[Rafael Baggio]

I like to create a container to loaded movies, you dont need to give the content a name, you just need to clean the content of the container, if you`re using a scroll, you can create a method to update de scroll when you change the content.

To unload a movie you just need to use the removeChild method, is the quickly and cleanest way to do this task(i suppose). Use custom events, so you can tell to your movie only to load a new movie when you already had cleaned your container.



myBtn.addEventListener(MouseEvent.CLICK, changeContent);

function changeContent(e:MouseEvent):void
{
this.addEventListener("CONTAINER_CLEANED", loadNewContent);
clearContent();
}

function clearContent():void
{
myContainer.removeChildAt(0);
// if you have more than one item in your container, do a for loop to remove it all
this.dispatchEvent(new Event("CONTAINER_CLEANED"));
}

function loadNewContent(e:Event):void
{
//and here you load the new content
}


Good luck, and sorry for my poor english. xD

[DrewFulton]

Rafael,

Thanks for the help. When you create the container, is it a movie clip or what? I am struggling with that at the moment.

Thanks!
Drew


I like to create a container to loaded movies, you dont need to give the content a name, you just need to clean the content of the container, if you`re using a scroll, you can create a method to update de scroll when you change the content.

To unload a movie you just need to use the removeChild method, is the quickly and cleanest way to do this task(i suppose). Use custom events, so you can tell to your movie only to load a new movie when you already had cleaned your container.



myBtn.addEventListener(MouseEvent.CLICK, changeContent);

function changeContent(e:MouseEvent):void
{
this.addEventListener("CONTAINER_CLEANED", loadNewContent);
clearContent();
}

function clearContent():void
{
myContainer.removeChildAt(0);
// if you have more than one item in your container, do a for loop to remove it all
this.dispatchEvent(new Event("CONTAINER_CLEANED"));
}

function loadNewContent(e:Event):void
{
//and here you load the new content
}


Good luck, and sorry for my poor english. xD

[DrewFulton]

Nearly there!!!

It now works the first time but then when I click a second button I get the following error...

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::Loader/flash.display:Loader::_load()
at flash.display::Loader/load()
at main_fla::layout_1/loadNewContent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunctio n()
at flash.events::EventDispatcher/dispatchEvent()
at main_fla::layout_1/clearContent()
at main_fla::layout_1/changeContent()

Here's the entire AS code.



stop();
var contentLoader:Loader = new Loader();
var homeLoader:Loader = new Loader();
var container:Sprite = new Sprite();


menu_mc.project_mc.projectsub.pdescription.addEven tListener(MouseEvent.CLICK, changeContent);
menu_mc.project_mc.projectsub.updates.addEventList ener(MouseEvent.CLICK, changeContent);

menu_mc.team_mc.teamsub.drew.addEventListener(Mous eEvent.CLICK, changeContent);
menu_mc.team_mc.teamsub.greg.addEventListener(Mous eEvent.CLICK, changeContent);
menu_mc.team_mc.teamsub.colin.addEventListener(Mou seEvent.CLICK, changeContent);
menu_mc.team_mc.teamsub.others.addEventListener(Mo useEvent.CLICK, changeContent);

menu_mc.media_mc.mediasub.photo.addEventListener(M ouseEvent.CLICK, changeContent);
menu_mc.media_mc.mediasub.pvideo.addEventListener( MouseEvent.CLICK, changeContent);
menu_mc.media_mc.mediasub.science.addEventListener (MouseEvent.CLICK, changeContent);

menu_mc.outreach_mc.outreachsub.offerings.addEvent Listener(MouseEvent.CLICK, changeContent);
menu_mc.outreach_mc.outreachsub.uevents.addEventLi stener(MouseEvent.CLICK, changeContent);

menu_mc.support_mc.supportsub.sponsors.addEventLis tener(MouseEvent.CLICK, changeContent);
menu_mc.support_mc.supportsub.donate.addEventListe ner(MouseEvent.CLICK, changeContent);

var targetButton;
var subButtonSelect; // Holds Name of Button Currently Selected
var subbuttonArray:Array = [menu_mc.project_mc.projectsub.pdescription, menu_mc.project_mc.projectsub.updates, menu_mc.team_mc.teamsub.drew, menu_mc.team_mc.teamsub.greg, menu_mc.team_mc.teamsub.colin, menu_mc.team_mc.teamsub.others, menu_mc.media_mc.mediasub.photo, menu_mc.media_mc.mediasub.pvideo, menu_mc.media_mc.mediasub.science, menu_mc.outreach_mc.outreachsub.offerings, menu_mc.outreach_mc.outreachsub.uevents, menu_mc.support_mc.supportsub.sponsors, menu_mc.support_mc.supportsub.donate]
var contentArray:Array = ["pdescription.swf", "updates.swf", "drew.swf", "greg.swf", "colin.swf", "others.swf", "photo.swf", "pvideo.swf", "science.swf", "offerings.swf", "uevents.swf", "sponsors.swf", "donate.swf"];

addChild(container);
container.x = 208
container.y = 207
container.name = "content_mc"

homeLoader.load(new URLRequest("drew.swf"));
homeLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onHomeLoaded);

function onHomeLoaded( event:Event ):void{
content_swf = MovieClip(homeLoader.content);
container.addChild(content_swf);
}



function loadNewContent(e:Event):void {
for(var i:int = 0; i < subbuttonArray.length; i++) {
if(targetButton == subbuttonArray[i]) {
contentLoader.load(new URLRequest(contentArray[i]));
contentLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onContentLoaded);
subButtonSelect = targetButton;
}

}
}


function onContentLoaded( event:Event ):void{
content_swf = MovieClip(contentLoader.content);
container.addChild(content_swf);
}


function changeContent(event:MouseEvent):void
{
targetButton = event.currentTarget;
this.addEventListener("CONTAINER_CLEANED", loadNewContent);
clearContent();
}

function clearContent():void
{
container.removeChildAt(0);
this.dispatchEvent(new Event("CONTAINER_CLEANED"));
}




Any help would be extremely appreciated. Thanks!

Drew