[Solved]PreLoader Help for a Newb?

[UbiAssassin]

Hello again everyone. I have to admit right off, that pre-loaders have been the bane of my existance even back in AS2. This is my first true attempt at creating one on my own and it is not very functional.

 

Basically I followed a tutorial for the visual elements that gave me enough room to do something that looks the way I want it to. I cobbled together the code from studying what little I could find >.<

 

Please excuse the pre-alpha nature of what you see. It is the husk of my up and coming website re-vamp with a giant picture plastered in the middle so that I could test the pre-loader that doesn't function hehe.

 

Here is the link to my test site with the non-functioning pre-loader: http://levelforge.com/WebsiteFlash10/Levelforge_NewAS3.swf

 

Here are all of the source files: http://levelforge.com/WebsiteFlash10/Levelforge_NewAS3.zip

 

Here is the code for my pre-Loader on the very first frame of my timeline:

 

import com.greensock.*;
import flash.display.*;
import flash.events.*;
import flash.display.MovieClip;
import flash.text.TextField;
import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;

var myLoadText:TextField;   //This is the Dynamic text field where I want my numberical progress to show, but it does not.
var circleLoader:MovieClip;  //This is the part of my pre-Loader setup that is supposed to animate, yet it does not.

function start(myLoadText:TextField):void {
myLoadText=myLoadText;
myLoadText.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
myLoadText.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
}

function onProgress(e:ProgressEvent):void {
var loadBytes:int=Math.round(e.target.bytesLoaded/1024);
var totalBytes:int=Math.round(e.target.bytesTotal/1024);
var percent:int = (e.target.bytesTotal / e.target.bytesLoaded) * 100;
myLoadText.text=String(loadBytes+"of"+totalBytes+"KB Loaded \n"+percent+"% Complete");
circleLoader.gotoAndPlay(percent);
}

function onComplete(e:Event):void {
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
trace("Loaded!");
currentFrame+1;
}

 

You will see the preloader interface load, but the blue fill circle and outer white ring are not rotating and doing their thing. The number text in the center is also not updating. I have zipped and added all of my source files and AS3 packets.

 

If someone has the time, could you please take a look and see what I am doing horribly wrong in the preloader section of the setup? I would really appreciate any criticisms and feedback I can get.

[Carl]

There is quite a bit wrong and/or confusing about what you are doing.

 

1: you have a bunch of functions defined but I don't see where you are calling them

 

2: setting something equal to itself seems a little weird

myLoadText = myLoadText;

 

myLoadText is already the instance name of a textfield on the stage AND a variable. making it the name of a function parameter isn't good.

 

i think you want something more like:

 

function startLoad(_myLoadText:TextField):void{
_myLoadText.loaderInfo.blahblahblahb
_myLoadText.text = "something";
}

startLoad(myLoadText);

 

also the word start is a reserved ActionScript keyword, you will be better off not using it as a name for your own custom function. using startLoad() will ultimately minimize the potential for problems now and in the future.

 

3: putting scripts on frame 1 and also having a document class makes it very awkward to troubleshoot. It appears your document class is loading a bunch of sounds with LoaderMax, but your Frame 1 scripts are attempting to monitor loading of the actual swf.

 

Most importantly, you aren't using LoaderMax for your preloader. I would strongly suggest that you read up on SelfLoader and try to implement that in a simplified file. The documentation shows how you can monitor the loading of "the parent swf" as well as external media (your sounds) and you can track the cumulative load of all these things. http://www.greensock.com/as/docs/tween/ ... oader.html

 

I would suggest that you start really simple. Remove the loading of all the external assets and just get your circleLoader and myLoadText to reflect the loading progress of the main swf using a single SelfLoader. Once that works, investigate implementing the other assets into your loading routine.

[UbiAssassin]

Yeah that all sounds very good. Thanks for taking the time to look at my mess hehe. Sadly I cobbled together stuff in code and it really makes no sense. I have been trying to re-work it all in a way that makes sense to me and have been failing. Starting simple and having the pre-loader as a flash movie of its own that uses LoaderMax to load the main page and maybe the sounds for now is a much better route. I can just have an .as file attached to the preloader fla and then load into my main movie when all of the assets that I am trying to call are loaded.

 

My main issue was that all tutorials that I have found thus far were plastering the preloader on frame 1 on the main movie, which really was not the way I wanted to approach it at all. I just wanted to start from somewhere and try to make sense of it. I know preloaders must be simpler than I am making them out to be LOL.

 

Thanks again. I will see what I can do with a simple external preloader for now using the Self Loader approach. Thanks for putting up with all of my questions btw. I am much more capable with timeline tweens and website visuals than I am with straight code. I am really enjoying learning, but it is not an extremely fast process >.<.

[UbiAssassin]

Ok, I have solved all of the issues, except for a very jumpy preloader bar. I switched from the more exact methods to an attempt at "rawProgress," but it did not seem to fully remove the issue. Here is my current code. I also updated the entire pre-loader code lower in the message:

 

	private function progressHandler(event:LoaderEvent):void
	{
		//trace("Watching Progress Now");
		var percent:Number = event.target.bytesLoaded / event.target.bytesTotal;
		var loaderBarProgress:Number = event.target.rawProgress;
		myLoadText.text = Math.round(percent * 100) + "%".toString();
		circleLoader.gotoAndPlay(loaderBarProgress);
	}

 

Can you see anything in that chunk of code that would help explain the loader bar animation craziness?

 

===============================================================================================

 

Ok, thanks to your help I have managed to approach this from the ground up. I have solved almost all of the problems:

 

I created a new Preloader.swf with its own .as file. It now loads the content for me as needed. The text progress indicator is working beautifully, but my preloader animation bar is doing some crazy stuff. I kind of moves forward then flicks back. It never goes all the way around or associates itself with the number percentage. I assume it is because I am not sure how to attach the animation to the progress correctly. How does this look to you?

 

Here is the partial functionality in action: http://levelforge.com/WebsiteFlash10/Levelforge.swf

 

package
{

import flash.display.*;
import flash.events.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.TweenMax;
import flash.display.MovieClip;
import flash.text.TextField;

public class Levelforge_Preloader extends MovieClip
{

	//==============================================
	//***create a SelfLoader and LoaderMax Queue***
	//==============================================

	public function Levelforge_Preloader()
	{
		var loader:SelfLoader = new SelfLoader(this, { name: "self", onProgress: progressHandler, onComplete: completeHandler, estimatedBytes: 24576 } );
		var navSwish:MP3Loader = new MP3Loader("http://levelforge.com/MP3/vwoom-Public_D-148.mp3", { autoPlay: false, container: this, estimatedBytes: 57344 } );
		var navRollOver:MP3Loader = new MP3Loader("http://levelforge.com/MP3/ayuigo-xrikazen-80.mp3", { autoPlay: false, container: this, estimatedBytes: 36864 } );
		var navButtonClick:MP3Loader = new MP3Loader("http://levelforge.com/MP3/button-11.mp3", { autoPlay: false, container: this, estimatedBytes: 8192 } );
		var levelforgeSwf:SWFLoader = new SWFLoader("http://levelforge.com/WebsiteFlash10/Levelforge_NewAS3.swf", { autoPlay: true, container: this, estimatedBytes: 6053888 } );
		var queue:LoaderMax = new LoaderMax({onProgress: progressHandler, onComplete: completeHandler});

		//==============================================
		//***Set up what needs to be Loaded and Load it.***
		//==============================================

		queue.append(loader);
		queue.append(navSwish);
		queue.append(navRollOver);
		queue.append(navButtonClick);
		queue.append(levelforgeSwf);
		queue.load();
		queue.addEventListener(LoaderEvent.COMPLETE, completeHandler);
	}

	private function progressHandler(event:LoaderEvent):void
	{
		//trace("Watching Progress Now");
		var percent:Number = event.target.bytesLoaded / event.target.bytesTotal;
		var loaderBarProgress:Number = event.target.rawProgress;
		myLoadText.text = Math.round(percent * 100) + "%".toString();
		circleLoader.gotoAndPlay(loaderBarProgress);
	}

	private function completeHandler(event:LoaderEvent):void
	{
		trace(event.target + " complete");

	}

}
}

 

Thanks again!

[UbiAssassin]

I turned off AuditSize, set the loading to rawProgress, and added the rest of my graphics. My preloader is working exactly as I wanted. Thanks for your input Greensock! It helped me a lot

 

Finished code:

 

package
{

import flash.display.*;
import flash.events.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.TweenMax;
import flash.display.MovieClip;
import flash.text.TextField;

public class Levelforge_Preloader extends MovieClip
{

	//==============================================
	//***create a SelfLoader, Content Loaders, and LoaderMax Queue***
	//==============================================

	public function Levelforge_Preloader()
	{

		var loader:SelfLoader = new SelfLoader(this, {name: "self", rawProgress: 1, onProgress: progressHandler, onComplete: completeHandler, autoDispose: true, estimatedBytes: 23552});
		var navSwish:MP3Loader = new MP3Loader("http://levelforge.com/MP3/vwoom-Public_D-148.mp3", {name: "navSwishSound", rawProgress: 1, autoPlay: false, container: this, autoDispose: true, onProgress: progressHandler, onComplete: completeHandler, estimatedBytes: 55296});
		var navRollOver:MP3Loader = new MP3Loader("http://levelforge.com/MP3/ayuigo-xrikazen-80.mp3", {name: "navOverSound", rawProgress: 1, autoPlay: false, container: this, autoDispose: true, onProgress: progressHandler, onComplete: completeHandler, estimatedBytes: 33792});
		var navButtonClick:MP3Loader = new MP3Loader("http://levelforge.com/MP3/button-11.mp3", {name: "navClickSound", rawProgress: 1, autoPlay: false, container: this, autoDispose: true, onProgress: progressHandler, onComplete: completeHandler, estimatedBytes: 7168});
		var levelforgeMainSwf:SWFLoader = new SWFLoader("http://levelforge.com/WebsiteFlash10/Levelforge_NewAS3.swf", {name: "mainSite", rawProgress: 1, autoPlay: true, container: this, autoDispose: true, onProgress: progressHandler, onComplete: completeHandler, estimatedBytes: 6052864});
		var queue:LoaderMax = new LoaderMax({name: "mainQueue", rawProgress: 1, onProgress: progressHandler, onComplete: completeHandler});

		//========================================================================
		//***Set up what needs to be Loaded and Load it. Add Event Listeners.***
		//========================================================================

		LoaderMax.defaultAuditSize = false;
		queue.append(loader);
		queue.append(navSwish);
		queue.append(navRollOver);
		queue.append(navButtonClick);
		queue.append(levelforgeMainSwf);
		queue.load();
		queue.addEventListener(LoaderEvent.COMPLETE, completeHandler);
		queue.addEventListener(LoaderEvent.PROGRESS, progressHandler);
	}

	//======================================================================================================
	//***Functions that Handle Progress and Completion. They also control the Movie Progression Updates.***
	//======================================================================================================

	private function progressHandler(event:LoaderEvent):void
	{
		//trace("Watching Progress Now");
		var percent:Number = event.target.bytesLoaded / event.target.bytesTotal;
		var circleLoaderProgress:Number = Math.round((event.target.bytesLoaded / event.target.bytesTotal) * 100);
		myLoadText.text = Math.round(percent * 100) + "%".toString();
		circleLoader.gotoAndStop(circleLoaderProgress);
	}

	private function completeHandler(event:LoaderEvent):void
	{
		trace(event.target + " complete");
		removeEventListener(LoaderEvent.PROGRESS, progressHandler);
		removeEventListener(LoaderEvent.COMPLETE, completeHandler);
	}

}
}