Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2008-11-10
26
Medium Priority
?
613 Views
Last Modified: 2013-11-11
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
0
Comment
Question by:isotherm
  • 15
  • 11
26 Comments
 
LVL 39

Expert Comment

by:blue-genie
ID: 22922511
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
 

Author Comment

by:isotherm
ID: 22923769
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
 

Author Comment

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


Thanks anyway
Iso
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:isotherm
ID: 22924107
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
 
LVL 39

Expert Comment

by:blue-genie
ID: 22927904
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
 

Author Comment

by:isotherm
ID: 22928491
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
 

Author Comment

by:isotherm
ID: 22928501
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
 
LVL 39

Expert Comment

by:blue-genie
ID: 22928703
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
 

Author Comment

by:isotherm
ID: 22928797
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
 

Author Comment

by:isotherm
ID: 22928850
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
 
LVL 39

Expert Comment

by:blue-genie
ID: 22938118
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
 

Author Comment

by:isotherm
ID: 22938167
hehe - ok thanks will go forth and see what happens
Thanks again - will report back on result

cheers
Iso
0
 

Author Comment

by:isotherm
ID: 22938307
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
 
LVL 39

Expert Comment

by:blue-genie
ID: 22938334
ok i'm gonna try replicate so you dont' have to upload,
but whats happening here?

loaderBar.barCentre
0
 
LVL 39

Expert Comment

by:blue-genie
ID: 22938346
no no no!!! bad Bad bad you're not using the listener - :-)
let me see if i can upload a sample for you.
0
 

Author Comment

by:isotherm
ID: 22938351
barCentre is the name of the actual loading bar graphic mc contained within loaderBar... is that wrong?
0
 
LVL 39

Expert Comment

by:blue-genie
ID: 22938497
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
 

Author Comment

by:isotherm
ID: 22938685
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
 
LVL 39

Expert Comment

by:blue-genie
ID: 22939058
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
 
LVL 39

Expert Comment

by:blue-genie
ID: 22939063
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
 
LVL 39

Expert Comment

by:blue-genie
ID: 22939170
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
 

Author Comment

by:isotherm
ID: 22939212
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
 

Author Comment

by:isotherm
ID: 22939215
Sorry I see what I've done.. durr!
0
 

Author Comment

by:isotherm
ID: 22939240
Now disappears fine, just the 0% - 1% issue and I'm there!
0
 
LVL 39

Accepted Solution

by:
blue-genie earned 500 total points
ID: 22942420
what 0 - 1 % issue?
0
 

Author Comment

by:isotherm
ID: 22942592
The text on the preloader starts on '0% loaded' stays like that till it's loaded, then disappears like it's meant to...
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question