Custom preloader

[rhernando]

Hi,

I'm trying to make a custom preloader but i can't get it to work.

I looked at the preloader code in the preloader.fla but i'm pretty lost 

Here is the code

Code: [Select]

var request:URLRequest = new URLRequest("megazine.swf"); // File path is relative to the preloader
var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

// Update the percentage display
function loadProgress(event:ProgressEvent):void
{
    var percentLoaded:Number = event.bytesLoaded / event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);

this.percentLoaded.text = String(uint(percentLoaded)) + "%";
}

function loadComplete(event:Event):void
{
this.rotatingOrb.visible = false;
this.percentLoaded.visible = false;
}

loader.load(request);
this.addChild(loader);


Reggarding the path to the megazine.swf file it will be fixed later.

Thanks in advance,
Rodrigo.

[Florian Nücke]

What's not working? Looks OK.

[rhernando]

Hi,

The content doesn't appears, it loads megazine.swf but after that nothing appears. I simulate a download in flash but after it reaches 100% it just goes blank.

The code in the first post is the only code i have in the entire preloader file by the way. Maybe something it's missing.

Thanks for your interest.
Rodrigo.

[Florian Nücke]

You'll have to set the size of the container manually, or allow it to scale itself to fit the stage space.

I.e. when loaded, either set loader.content.megazine.width / loader.content.megazine.height to a certain value (could be you'll have to use loader.content["megazine"].width/height), or, for automatic scaling, set loader.content.fitToStage = true (again, could be you'll have to use loader.content["fitToStage"] = true).

[rhernando]

Hi Florian,

Sorry about being a pain in the *** but this is still not working.

I added the lines you suggested and now i have the following error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at externalpreloader_fla::MainTimeline/externalpreloader_fla::frame1()

I tried with the following lines in the preloader:
loader.content["fitToStage"] = true;

loader.content["megazine"].height = 800;
loader.content["megazine"].width = 800;

The entire code looks like this:

Code: [Select]

var request:URLRequest = new URLRequest("megazine/megazine.swf"); // File path is relative to this preloader
var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

// Update the percentage display
function loadProgress(event:ProgressEvent):void
{
    var percentLoaded:Number = event.bytesLoaded / event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);

this.percentLoaded.text = String(uint(percentLoaded)) + "%";
}

// Load complete, hide the animating graphic and text
function loadComplete(event:Event):void
{
    trace("Load Complete");
this.rotatingOrb.visible = false;
this.percentLoaded.visible = false;
}

loader.load(request);
this.addChild(loader);
loader.content["fitToStage"] = true;
this.stop();

The thing is that it works ok with other swf files, but when i add loader.content["fitToStage"] = true; to the code it gives me the same error.

Thanks a lot,
Rodrigo.

[Florian Nücke]

Put the fitToStage = true (or width/height=...) in the loadComplete block. It cannot be assigned at that point because the swf isn't loaded yet.

[rhernando]

Hi,

I couldn't test this before because of work issues, but now i tested it and works fine when i prove it on flash, but when i load the HTML it doesn't works  :'(

The custom preloader stall's in 0%, therefore nothing is loading. Is not a mz3 file problem because when i try with the common preloader works.

The final code for the preloader is as follows:

Code: (actionscript3)

var request:URLRequest = new URLRequest("megazine.swf"); 
var loader:Loader = new Loader();
 
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
 
function loadProgress(event:ProgressEvent):void 
{
    var percentLoaded:Number = event.bytesLoaded / event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
 
	this.percentLoaded.text = String(uint(percentLoaded)) + "%";
}
 
function loadComplete(event:Event):void 
{
    trace("Load Complete");
	this.rotatingOrb.visible = false;
	this.percentLoaded.visible = false;
	loader.content["fitToStage"] = true;
}
 
loader.load(request);
this.addChild(loader);

The HTML code is taken directly from the sample file, and the custom preloader is located in the same folder of the megazine.swf file, so i guess i am screwing it in the preloader...... again

Thank you for your patience and inputs.
Rodrigo.

[Florian Nücke]

The path to the megazine.swf has to be relative to the index.html file. If you want it to be relative to the preloader, have a look at the pathing workaround in the default preloader (getAbsPath() function).

[rbaybayan]

Hi Rhernando,

Have you make this thing work. I appreciate if you can share your snippets on "Loading %" together with the swf and fla file.  I like this feature to have it in percentage loading...

Thanks,

Ruel

[rhernando]

Yes i did it. It is a little tricky though.

Right now i have a lot of work (summer vacations are right around the corner here in Chile, so the work load increases), but i believe that Thursday i could post the code and explanation of how i did it, and the most experienced users of Action Script 3.0 could give us a hand in order to polish it.

Subscribe to this topic in order to now when i post what i did.

King Regards,
Rodrigo.

[Florian Nücke]

Just to let you know, in the current trunk (i.e. not in 2.0.4, will be in 2.0.5) I have added a more
"detailed" preloader, by adding a ProgressEvent to the MegaZine class (i.e. the engine also
dispatches it's internal loading progress, including plugins, localization,...)
New preloader is here: http://svn.mightypirates.de/megazine/trunk/fla/preloader.fla

[rbaybayan]

Hi Rhernando,

Thanks for your positive reply and to Florian for sharing the link.
I will wait for your actual sample to be posted.

Hi Florian,

It would be nice if we could place a loading percentage at the beginning of the loader. I'm new to AS3 flash to which I started learning. Any chance to post an actual sample for loader with percentage countdown?

Thanks,

Ruel

[Florian Nücke]

You'd just have a text field, give it a name and set it's value in the function handling progress events dispatched by the loader / megazine instance. Google for flash preloaders and you'll find quite a lot of examples.

[rhernando]

Hi Ruel,

I know i said yesterday i will post the preloader code but it was impossible, and considering that tomorrow i will go on summer vacations (remember is summer here in Chile) it wouldn't be cool to post it in two more weeks.

First here is the code of the preloader.

Code: (actionscript3)

import flash.display.*;
 
stage.align = StageAlign.TOP_LEFT;
 
stage.scaleMode = StageScaleMode.NO_SCALE;
 
// Set up the loader object
var request:URLRequest = new URLRequest("megazine/megazine.swf"); // File path is relative to this preloader
var loader:Loader = new Loader();
 
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
 
// Update the percentage display
function loadProgress(event:ProgressEvent):void 
{
    var percentLoaded:Number = event.bytesLoaded / event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
    this.percentLoaded.text = String(uint(percentLoaded)) + "%";
}
 
// Load complete, hide the animating graphic and text
function loadComplete(event:Event):void 
{
    trace("Load Complete");
    this.rotatingOrb.visible = false;
    this.percentLoaded.visible = false;
    loader.content["fitToStage"] = true;
}
 
loader.load(request);
this.addChild(loader);
 

As you can see just a simple preloader, the key features here are 2.
- First is the last statement of the Load Complete function. As Florian taught me, without setting the loader content to fit the stage it just doesn't works.
- Second are lines 3 and 5, this is important because otherwise this will go out of proportions, and if you are using images in the pages they could pixelate. Later i'll get back to this.

The xml code of the mz3 file doesn't need to be discussed (at least i think so, let me know if you want it too, but is the standard mz3 file that you will find in the Wiki).

The html code is important because i don't use the example method to embed the swf file, i use the old fashion way, and has worked fine this far. That is why i said in a prior post that it was a little tricky.

First this is the code of the head section of the html page

Code: [Select]

<script src="script/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">
html, body {
height: 100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
The first part is basically the file that makes any swf works.
The second part is what makes the preloader fill the entire screen (no matter what resolution you have), because of this key feature two of the actionscript is important, because the stage of the preloader fills the entire screen, but the content of the child in the preloader doesn't.

Then the rest of the code in the <body> tag of the html.

Code: [Select]

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100%','height','100%','src','megazine/Copia de externalpreloader','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','align','Middle','movie','megazine/Copia de externalpreloader' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
  <param name="movie" value="megazine/Copia de externalpreloader.swf" />
  <param name="quality" value="high" />
  <param name="align" value="Middle" />
  <embed src="megazine/Copia de externalpreloader.swf" width="100%" height="100%" align="Middle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</noscript>

The most important thing here is to establish that the width and height of the preloader are 100%, and of course replace the swf name with yours.

So as you can see this is not the work of someone who knows a great deal of actionscript or embedding swf objects, i just transformed the example that you can download and turn it into a simple web page, nothing more than that, an that is why the most experienced guys here could help us polishing it.

Kind Regards,
Rodrigo.

[hnuecke]

thanks, and enjoy your vacation!