Preloader in main movie to display loading external swf? How?

Hi - I have a main movie that loads different external swfs into a movie clip called 'vid_frame' - I want to display the loading progress of these movies. I have a loading bar mc on the main movie, but I can't figure out how to make it work. Would I be better off using a standard component?
Thanks in advance for any help/advice.

cheers
Iso
isothermAsked:
Who is Participating?
 
blue-genieConnect With a Mentor Commented:
what 0 - 1 % issue?
0
 
blue-genieCommented:
if you're loading things into other movieclips I'm going to assume that you're using aS2.
right then go into the flash help file and search for MovieClipLoader.
if you have a look at MovieClipLoader.getProgress, there's and example there how to implement the use of listeners to check loading progress you can scale your loading bar (as per normal loading bar) according to the percentage loaded.

all the code and explanation is in the help file.
0
 
isothermAuthor Commented:
Hi Blue Genie,
thanks - I will look again. I have used these before, but not loading external swfs that reference a loading bar on the main movie.

cheers
Iso
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
isothermAuthor Commented:
Hmm... doesn't give any code examples that I can understand...and what the heck is a network sandbox? :-(


Thanks anyway
Iso
0
 
isothermAuthor Commented:
For example, the code I'm using to load the movie is:
vid_frame._xscale = vid_frame._yscale = 100;
vid_frame.loadMovie("swf/spin.swf");

.. what is the syntax for using moviecliploader? In the help file, the example they give seems to assume that you want to create an empty movie clip as well - which I don't...

Iso
0
 
blue-genieCommented:
if you don't want to create a movielclip on the fly to load it in and you simply want to use one you already have (vid_frame i'm assuming)then simply drop that line of code and use your movieclip as the target.

last line of cut and paste from help file

image_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", image_mc);
image_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", vid_frame);

network sandbox!!!! NB !! anything refering to a sandbox in NB.
all your swf file reside in a sandbox, whether you like it or not. if you publish your files for local access they have a local sandbox, if for remote files they have a network sandbox, never the 2 shall play in the same sandbox. so one can't access the other.
also many other issues about security and sandboxes would save you much future hassles to read up on it on the adobe site.


//this.createEmptyMovieClip("image_mc", this.getNextHighestDepth());
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip) {
    target_mc._x = Stage.width/2-target_mc._width/2;
    target_mc._y = Stage.height/2-target_mc._height/2;
    var w:Number = target_mc._width;
    var h:Number = target_mc._height;
    target_mc.lineStyle(4, 0x000000);
    target_mc.moveTo(0, 0);
    target_mc.lineTo(w, 0);
    target_mc.lineTo(w, h);
    target_mc.lineTo(0, h);
    target_mc.lineTo(0, 0);
    target_mc._rotation = 3;
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", image_mc);

Open in new window

0
 
isothermAuthor Commented:
Hi - thanks for that - I can get MovieClipLoader to load my clip now, but unfortunately I'm still no nearer to solving my original problem of getting the loading movieclip to use the loading bar on the main movie :¬(

best,
Iso
0
 
isothermAuthor Commented:
Incidentally - what do these lines do?

    target_mc.lineStyle(4, 0x000000);
    target_mc.moveTo(0, 0);
    target_mc.lineTo(w, 0);
    target_mc.lineTo(w, h);
    target_mc.lineTo(0, h);
    target_mc.lineTo(0, 0);
    target_mc._rotation = 3;
Thanks,
Iso
0
 
blue-genieCommented:
the example dynamically draws a box.
if ever you find code you dont' understand its very easy to look up works. like lineTo in the help file to see what it does.

now that you know how this works .. have a look at this ....

var container:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
    trace(target + ".onLoadProgress with " + bytesLoaded + " bytes of " + bytesTotal);
}
listener.onLoadInit = function(target:MovieClip):Void {
    trace(target + ".onLoadInit");
}
mcLoader.addListener(listener);
mcLoader.loadClip("http://www.w3.org/Icons/w3c_main.png", container);

again ignore the bits about creating a empty movieclip.
now if you look the in load progress and you have a look at the output you'll see it tells you how much is loaded.

so now you want to resize your bar for the preloader as its going along.
have a look (again from the help file) at the code snippet where they create a preloader - that will help you with the math, but the line of interest to you should be

   pBar_mc.bar_mc._xscale = pctLoaded; and obviously the pctLoaded value .
this example uses an xml file you'll just apply it to your movieclip loader.



var barWidth:Number = 200;
var barHeight:Number = 6;
 
this.createEmptyMovieClip("pBar_mc", 9999);
var bar:MovieClip = pBar_mc.createEmptyMovieClip("bar_mc", 10);
bar.beginFill(0xFF0000, 100);
bar.moveTo(0, 0);
bar.lineTo(barWidth, 0);
bar.lineTo(barWidth, barHeight);
bar.lineTo(0, barHeight);
bar.lineTo(0, 0);
bar.endFill();
bar._xscale = 0;
 
var stroke:MovieClip = pBar_mc.createEmptyMovieClip("stroke_mc", 20);
stroke.lineStyle(0, 0x000000);
stroke.moveTo(0, 0);
stroke.lineTo(barWidth, 0);
stroke.lineTo(barWidth, barHeight);
stroke.lineTo(0, barHeight);
stroke.lineTo(0, 0);
 
pBar_mc.createTextField("label_txt", 30, 0, barHeight, 100, 21);
pBar_mc.label_txt.autoSize = "left";
pBar_mc.label_txt.selectable = false;
 
pBar_mc._x = (Stage.width - pBar_mc._width) / 2;
pBar_mc._y = (Stage.height - pBar_mc._height) / 2;
 
var my_xml:XML = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success:Boolean) {
    pBar_mc.onEnterFrame = undefined;
    if (success) {
        trace("XML loaded successfully");
    } else {
        trace("Unable to load XML");
    }
};
my_xml.load("http://www.helpexamples.com/flash/xml/ds.xml");
 
pBar_mc.onEnterFrame = function() {
    var pctLoaded:Number = Math.floor(my_xml.getBytesLoaded() / my_xml.getBytesTotal() * 100);
    if (!isNaN(pctLoaded)) {
        pBar_mc.bar_mc._xscale = pctLoaded;
        pBar_mc.label_txt.text = pctLoaded + "% loaded";
        if (pctLoaded >= 100) {
            pBar_mc.onEnterFrame = undefined;
        }
    }
};

Open in new window

0
 
isothermAuthor Commented:
Thanks BG - it's going to take me a while to figure that out -

var container:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
    trace(target + ".onLoadProgress with " + bytesLoaded + " bytes of " + bytesTotal);
}
listener.onLoadInit = function(target:MovieClip):Void {
    trace(target + ".onLoadInit");
}
mcLoader.addListener(listener);
mcLoader.loadClip("http://www.w3.org/Icons/w3c_main.png", container);
.
..does this as go in the frame that has the loader bar - or on the loader bar? I find it amazingly frustrating that it has to be so complicated just to achieve a preloader.....

Incidentally I actually find the Flash help files very hard to fathom a lot of the time, so tend to Google problems rather than go to the help file.

Thanks very much for your time and help -
Iso


0
 
isothermAuthor Commented:
Hi,
if this is the code:

pBar_mc.onEnterFrame = function() {
    var pctLoaded:Number = Math.floor(my_xml.getBytesLoaded() / my_xml.getBytesTotal() * 100);
    if (!isNaN(pctLoaded)) {
        pBar_mc.bar_mc._xscale = pctLoaded;
        pBar_mc.label_txt.text = pctLoaded + "% loaded";
        if (pctLoaded >= 100) {
            pBar_mc.onEnterFrame = undefined;
        }
    }
};

..that handles the loading of the external swf - I can't understand a) where the name of the external swf is referenced...(my_xml??)  and b) is 'pbar_mc' the name of the loader?

Iso
0
 
blue-genieCommented:
yeah as i said instead of loading the xml file you'll want to load your swf file.
pbar_mc would be your loading bar mc.
you can set the start of it's with to 1pixel and it should grow
just put a bunch of traces into your code to check the percentage as you're loading and check that your bar is behaving as you expect it (ps make sure your registration point is set to top left ( the funny + thing when you're in edit mode of your movieclip)) < -- nested parenthesis tsk tsk

0
 
isothermAuthor Commented:
hehe - ok thanks will go forth and see what happens
Thanks again - will report back on result

cheers
Iso
0
 
isothermAuthor Commented:
Hi - getting closer I feel, but still no cigar. The movie loads in anyway and the loader bar appears and just stays on 0%. The label_txt doesn't appear at all. Sorry - I don't really know where I'm meant to be tracing anything so haven't used trace.. This is the code I have in the frame:

var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(this);
mcLoader.loadClip("swf/spin.swf", _root.vid_frame);
vid_frame._xscale = vid_frame._yscale = 100;
function onLoadInit(mc:MovieClip) {
    trace("onLoadInit: " + mc);
}
 


loaderBar.onEnterFrame = function() {
    var pctLoaded:Number = Math.floor(swf/spin.swf.getBytesLoaded() / swf/spin.swf.getBytesTotal() * 100);
    if (!isNaN(pctLoaded)) {
        _level0.loaderBar.barCentre._xscale = pctLoaded;
        _level0.loaderBar.label_txt.text = pctLoaded + "% loaded";
        if (pctLoaded >= 100) {
            _level0.loaderBar.onEnterFrame = undefined;
        }
    }
}
0
 
blue-genieCommented:
ok i'm gonna try replicate so you dont' have to upload,
but whats happening here?

loaderBar.barCentre
0
 
blue-genieCommented:
no no no!!! bad Bad bad you're not using the listener - :-)
let me see if i can upload a sample for you.
0
 
isothermAuthor Commented:
barCentre is the name of the actual loading bar graphic mc contained within loaderBar... is that wrong?
0
 
blue-genieCommented:
ok here you go.

this code will go on the main timeline, assuming that's what you did. in that case you do not need to have any references to _root or _level0.

make sure that your barCentre clip is not transformed /scaled in anyway, at start make it small, and the file loads it will go bigger by itself and then should finish off at the initial width you set it to.


loaderBar.barCentre._xscale = 1;
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void 
{
	var percLoaded = Math.floor((bytesLoaded/bytesTotal)*100);
	loaderBar.barCentre._xscale = percLoaded;
};
 
mcLoader.addListener(listener);
mcLoader.loadClip("swf/spin.swf",vid_frame);
stop();

Open in new window

0
 
isothermAuthor Commented:
Thanks BG - sooo close!

The loader bar is working ( Hurrah!) but the label_txt says '_02_' Then goes on to display just the '%' sign? Also I need to make it disappear once it's loaded....

thanks again,
Iso
0
 
blue-genieCommented:
i don't know what you've done but you simply need to say

loaderBar.label_txt.text = percLoaded + " % loaded";

underneath the bar xscale .


then to make it dissapear when its done.
add this AFTER the onLoadProgress method..

listener.onLoadInit = function(target:MovieClip):Void
{      
      unloadMovie(loaderBar);
};

Done!
0
 
blue-genieCommented:
oh also if you're testing locally in Flash IDE, use the simulate download option to get proper idea of what's happening in real life situation.
0
 
blue-genieCommented:
oh one more thing!!! important thing , you're not done yet.
in the loadINit when your remove your preloader, remove the eventlistener

listener.removeListener(listener);
very important for garbage collection.
0
 
isothermAuthor Commented:
Hi - ok this is now what I have:


loaderBar2.barCentre._xscale = 1;
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void
{
      
listener.onLoadInit = function(target:MovieClip):Void
{      
      unloadMovie(loaderBar);
};

      var percLoaded = Math.floor((bytesLoaded/bytesTotal)*100);
      loaderBar2.barCentre._xscale = percLoaded;
      loaderBar2.label_txt.text = percLoaded + "% loaded";
            
}
 
mcLoader.addListener(listener);
mcLoader.loadClip("swf/spin.swf",vid_frame);
vid_frame._xscale = vid_frame._yscale = 100;
stop ();
menu.gotoAndStop("menu1");

This loads in the movie, progress bar works great, label now displays '0%' to start, then stays till movie loaded and displays '1%'. Loader still not disappearing after load :-(
Not sure where I'm going wrong here

thanks
Iso
0
 
isothermAuthor Commented:
Sorry I see what I've done.. durr!
0
 
isothermAuthor Commented:
Now disappears fine, just the 0% - 1% issue and I'm there!
0
 
isothermAuthor Commented:
The text on the preloader starts on '0% loaded' stays like that till it's loaded, then disappears like it's meant to...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.