How to add Preloader to Monkey - Plz add this Mark

Monkey Targets Forums/Flash/How to add Preloader to Monkey - Plz add this Mark

therevills

(Posted 2012) [#1]

First we need to alter trans, open up src\trans\targets\flash.monkey.

Alter the Execute command (around line 72) so it looks like this:

Execute "mxmlc -static-link-runtime-shared-libraries=true -frame=MonkeyGame,MonkeyGame Preloader.as"

And the FLASH_PLAYER execute (76):

Execute FLASH_PLAYER+" ~q"+RealPath( "Preloader.swf" )+"~q",False

Compile trans, then move the exe to the bin folder.

Now go into the folder targets\flash and create the Preloader.as:

package
{
	import flash.display.DisplayObject;
	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.utils.getDefinitionByName;

	public class Preloader extends MovieClip
	{
		/** Bubble this event up to the stage to remove the preloader. **/
		public static const REMOVE_PRELOADER:String = "removePreloader";
		
		/** The fully-qualified name of the class we should instantiate after preloading. **/
		protected var applicationClassName:String;
		
		/** Container for our preloader graphics/animation. **/
		protected var preloader:Sprite;
		
		/** The application once it's instantiated. **/
		protected var application:DisplayObject;

		/** Constructor. **/
		public function Preloader(applicationClassName:String = "")
		{
			this.applicationClassName = applicationClassName;
			
			stop();

			loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
			loaderInfo.addEventListener(Event.COMPLETE, onComplete);
			
			setupStage();
			addPreloader();
		}
		
		/** Set any stage properties or global playback settings, e.g. framerate. **/
		protected function setupStage():void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
		
		/** Add preloader -- override this to add your own animated elements. **/
		protected function addPreloader():void
		{
			preloader = new Sprite();
			addChild(preloader);
		}
		
		/** Update preload progress. **/
		protected function onProgress(event:ProgressEvent):void
		{
			var progress:Number = event.bytesLoaded / event.bytesTotal;
			updatePreloader(progress);
		}
		
		/** Update preloader -- override this to update your animated elements. **/
		protected function updatePreloader(progress:Number):void
		{
			// update the preloader with the loading progress
			var g:Graphics = preloader.graphics;
			g.clear();

			// draw a solid background so we can't see the app as it loads in the background
			g.beginFill(0x000000);
			g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			g.endFill();
			
			// draw the outline of a progress bar
			g.lineStyle(3, 0xffffff, 1, true);
			g.drawRoundRect(100, 290, 600, 20, 10, 10);
			
			// fill the progress bar based on how many of our bytes have been loaded
			g.beginFill(0xffffff);
			g.drawRoundRect(100, 290, 600 * progress, 20, 10, 10);
			g.endFill();
		}
		
		/** Preload complete. **/
		protected function onComplete(event:Event):void
		{
			loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
			loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
			
			nextFrame();
			
			createApplication();
		}
		
		/** Create the application. **/
		protected function createApplication():void
		{
			// we assume the current label's name is the name of the class,
			// unless overridden in the constructor
			//var className:String = applicationClassName || currentLabel;
			
			// must create the application by name so we don't have any static linkage to this class
			
			var appClass:Class = getDefinitionByName("MonkeyGame") as Class;
			addChild(new appClass() as DisplayObject);
		}

		/** Remove preloader. **/
		protected function onRemovePreloader(event:Event):void
		{
			application.removeEventListener(REMOVE_PRELOADER, onRemovePreloader);
			removePreloader();
		}

		/** Remove preloader -- override this to remove the elements added in addPreloader(). **/
		protected function removePreloader():void
		{
			removeChild(preloader);
			preloader = null;
		}
	}
}

Alter the MonkeyGame.html embed line to look like this:

<embed src="Preloader.swf" type="application/x-shockwave-flash" width="640" height="480" wmode="direct">

Alter MonkeyGame.as, add the following line after [SWF(width="640",height="480")]:

[Frame(factoryClass="Preloader")]

Then compile your game... hopefully you will have a loading bar. Play around with the Preloader.as.

Test:
http://www.therevillsgames.com/monkey/flash/MonkeyGame.html

EdzUp

(Posted 2012) [#2]

In safari the loading bar goes off the right side, any way of scaling it to the resolution of the window?

slenkar

(Posted 2012) [#3]

the loading bar goes off the right side cos its being drawn at xcoord 100 and its 600 pixels wide. So its an easy fix.

Good work Mr revills

Foppy

(Posted 2012) [#4]

Very nice that you have figured this out.

therevills

(Posted 2012) [#5]

Yeah the loading bar was quickly added ;)

I think I can streamline the process, by making mxmlc output the swf as MonkeyGame.swf, there is an "output" parameter.

So I guess we could do something like this in trans:

Execute "mxmlc -static-link-runtime-shared-libraries=true -frame=MonkeyGame,MonkeyGame -output=MonkeyGame Preloader.as"

This should create a MonkeyGame.swf, so you dont have to alter the FLASH_PLAYER execute line or the MonkeyGame.html file.

*Not tested...

therevills

(Posted 2012) [#6]

Just tested the above and I was wrong, it needed to be this:

Execute "mxmlc -static-link-runtime-shared-libraries=true -frame=MonkeyGame,MonkeyGame -output=MonkeyGame.swf Preloader.as"

And I've moved the loading bar back a tad:

Preloader.as:

package
{
	import flash.display.DisplayObject;
	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.utils.getDefinitionByName;

	public class Preloader extends MovieClip
	{
		/** Bubble this event up to the stage to remove the preloader. **/
		public static const REMOVE_PRELOADER:String = "removePreloader";
		
		/** The fully-qualified name of the class we should instantiate after preloading. **/
		protected var applicationClassName:String;
		
		/** Container for our preloader graphics/animation. **/
		protected var preloader:Sprite;
		
		/** The application once it's instantiated. **/
		protected var application:DisplayObject;

		/** Constructor. **/
		public function Preloader(applicationClassName:String = "")
		{
			this.applicationClassName = applicationClassName;
			
			stop();

			loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
			loaderInfo.addEventListener(Event.COMPLETE, onComplete);
			
			setupStage();
			addPreloader();
		}
		
		/** Set any stage properties or global playback settings, e.g. framerate. **/
		protected function setupStage():void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
		
		/** Add preloader -- override this to add your own animated elements. **/
		protected function addPreloader():void
		{
			preloader = new Sprite();
			addChild(preloader);
		}
		
		/** Update preload progress. **/
		protected function onProgress(event:ProgressEvent):void
		{
			var progress:Number = event.bytesLoaded / event.bytesTotal;
			updatePreloader(progress);
		}
		
		/** Update preloader -- override this to update your animated elements. **/
		protected function updatePreloader(progress:Number):void
		{
			// update the preloader with the loading progress
			var g:Graphics = preloader.graphics;
			g.clear();

			// draw a solid background so we can't see the app as it loads in the background
			g.beginFill(0x000000);
			g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			g.endFill();
			
			// draw the outline of a progress bar
			g.lineStyle(3, 0xffffff, 1, true);
			g.drawRoundRect(20, 290, 600, 20, 10, 10);
			
			// fill the progress bar based on how many of our bytes have been loaded
			g.beginFill(0xffffff);
			g.drawRoundRect(20, 290, 600 * progress, 20, 10, 10);
			g.endFill();
		}
		
		/** Preload complete. **/
		protected function onComplete(event:Event):void
		{
			loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
			loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
			
			nextFrame();
			
			createApplication();
		}
		
		/** Create the application. **/
		protected function createApplication():void
		{
			// we assume the current label's name is the name of the class,
			// unless overridden in the constructor
			//var className:String = applicationClassName || currentLabel;
			
			// must create the application by name so we don't have any static linkage to this class
			
			var appClass:Class = getDefinitionByName("MonkeyGame") as Class;
			addChild(new appClass() as DisplayObject);
		}

		/** Remove preloader. **/
		protected function onRemovePreloader(event:Event):void
		{
			application.removeEventListener(REMOVE_PRELOADER, onRemovePreloader);
			removePreloader();
		}

		/** Remove preloader -- override this to remove the elements added in addPreloader(). **/
		protected function removePreloader():void
		{
			removeChild(preloader);
			preloader = null;
		}
	}
}

http://www.therevillsgames.com/monkey/flash/take2/MonkeyGame.html

h.humbert

(Posted 2012) [#7]

Thanks! Since I don't have a clue about ActionScript you pretty much saved my life.

siread

(Posted 2012) [#8]

I had some trouble using this preloader after uploading to Kongregate. It worked fine in the latest IE and Chrome but lots of IE8 users complained that the intitial load worked fine, but after that they only saw white screen when they refreshed the page or restarted IE and went to the game page.

After endless head-banging I tried swapping the preloader.as code for the code here:
http://flashpunk.net/forums/index.php?PHPSESSID=8a9aea7686a3cd31bcc6a4741be5be65&topic=633.0

I think all is good again. :)

therevills

(Posted 2012) [#9]

Hey Siread, what final preloader did you use? (As on that web page, there are a few pages with code on there?)

siread

(Posted 2012) [#10]

Ah sorry, I just used the one in the first post. I haven't tried the others. :)

therevills

(Posted 2012) [#11]

No worries, so its this code:

package 
{
	 import flash.display.*;
	 import flash.events.*;
	 import flash.text.*;
	 import flash.utils.getDefinitionByName;
	
	 [SWF(width = "640", height = "480")]
	
	 public class Preloader extends MovieClip 
	{
		 private var loader:Sprite = new Sprite();
		 private var border:Sprite = new Sprite();
		 private var text:TextField = new TextField();
		
		 private const loaderWidth:int = 320;
		 private const loaderHeight:int = 32;
		
		 private const loaderColor:uint = 0xffffff;
		 private const textColor:uint = 0xbbbbbb;
		 private const backgroundColor:uint = 0x000000;
		
		 private const main:String = "Main";
		 private var loaded:Number = 0;
		
		 public function Preloader() 
		{
			 // loader information
			 stage.addEventListener(Event.ENTER_FRAME, progress);
			
			 // show loader
			 addChild(loader);
			 loader.x = (stage.stageWidth / 2) - (loaderWidth / 2) + 4;
			 loader.y = (stage.stageHeight / 2) - (loaderHeight / 2) + 4;
			
			 addChild(border);
			 border.x = (stage.stageWidth / 2) - (loaderWidth / 2);
			 border.y = (stage.stageHeight / 2) - (loaderHeight / 2);
		
			 addChild(text);
			 text.x = (stage.stageWidth / 2) - (loaderWidth / 2);
			 text.y = (stage.stageHeight / 2) - (loaderHeight / 2) - 30;
			 text.textColor = textColor;
			
			 // render background
			 graphics.beginFill(backgroundColor, 1);
			 graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			 graphics.endFill();
			
			 // render the border
			 border.graphics.clear();
			 border.graphics.lineStyle(2, loaderColor);
			 border.graphics.drawRect(0, 0, loaderWidth, loaderHeight);
		 }
		
		 private function progress(e:Event):void 
		{
			 // how much we've loaded thus far
			 loaded = loaderInfo.bytesLoaded / loaderInfo.bytesTotal;
			
			 // update loader graphic
			 loader.graphics.clear();
			 loader.graphics.beginFill(loaderColor);
			 loader.graphics.drawRect(0, 0, loaded * (loaderWidth - 8), loaderHeight - 8);
			 loader.graphics.endFill();
			
			 // update text
			 text.text = "Loading: " + Math.ceil(loaded * 100) + "%";
			
			 // done loading?
			 if (loaderInfo.bytesLoaded >= loaderInfo.bytesTotal)
			 {
				 startup();
			 }
		 }
		
		 private function startup():void 
		{
			 // remove event listener(s)
			 stage.removeEventListener(Event.ENTER_FRAME, progress);
			
			 // hide loader
			 stop();
			
			 // remove all the children
			 var i:int = numChildren;
			 while (i --)
			 {
				 removeChildAt(i)
			 }
			
			 // go to the main class
			 var mainClass:Class = getDefinitionByName("Main") as Class;
			 parent.addChild(new mainClass as DisplayObject);
			
			 // remove self
			 parent.removeChild(this)
		 }
		
	 }
	
 }

(Just to place it here on this forum)

siread

(Posted 2012) [#12]

I did a little more work on my pre-loader, incorporating a background image and a third-party intro using FlashDevelop. You can see how in this thread...
http://www.monkeycoder.co.nz/Community/posts.php?topic=2623

Paul - Taiphoz

(Posted 2012) [#13]

did this ever get added?

Rushino

(Posted 2012) [#14]

Altering trans isnt a big deal. See the whole monkey package as an overall for your next game.. so you might have modified files for your target game such trans or the target directory template.. this is why i love monkey as it is extensible in many ways. I even think i could make an application to configure this and lets you use many instance of trans source in one click.. that would help.

Raz	(Posted 2012) [#15]

Just saying thanks for this. Makes my LD48 flash games seem a bit less shabby now!

GW_	(Posted 2012) [#16]

Wouldn't it better if Monkey was set up to always use a dummy pre-loader? That way we wouldn't have to alter Monkey core files.

Raz	(Posted 2012) [#17]

Yeah I would agree with that. I can't really imagine a scenario where when using flash you wouldn't want one.

Soap	(Posted 2012) [#18]

+1 to dummy pre-loader

HEY, HOW ABOUT THIS???

Make the dummy pre-loader an upsell to Monkey (Made With Monkey!).

Then we change it if we want to, no obligation to keep it that way, but on one hand it's more user friendly and the other it helps market Monkey.

We have used the pre-loader in this thread so also thank You <3

Aymes

(Posted 2013) [#19]

I don't suppose the dummy preloader ever got added and I just missed it?

Trying to create a web version of my latest game and all is well except for the fact it's got no preloader bar.

I've attempted to incorporate the one above. This is what I've done:

1. changed flash.monkey to incorporate the updated line 72 therevills mentioned.
2. compiled Trans (scary stuff!)
3. created Preloader.as
4. updated MonkeyGame.as

It all compiles but I run into a couple of difficulties:

1. no preloader bar! Just a white screen (when I load from a site. If I run locally it just loads the game as normal).
2. it changes the res of my game (I'm going for 800x600) and makes it look as if image filtering is turned off (it runs fast enough with it turned on).

I suspect I'm just being a dumbo. Any clues anyone?

Paul - Taiphoz

(Posted 2013) [#20]

Diddy needs a loading bar /me looks at them...

I don't think this works with the current version of monkey, might be wrong tho, I know I tried it a little while ago and couldn't get it working either.

Aymes

(Posted 2013) [#21]

Ah phew, that makes me feel better! At least I wasn't doing anything silly then.

Can't see why this isn't already included as part of Monkey. I mean, when would you ever not want a loading bar of some description in Flash?

Aymes

(Posted 2013) [#22]

Agh, could really do with a preloader soon.

I've got some contract work involving making flash stuff and without the preloader it's going to look a bit shoddy :(

Unless anyone knows the answer to getting this preloader working?

therevills

(Posted 2013) [#23]

Okay using v72b:

1. Create Preloader.as

Create the file "Preloader.as" in the \targets\flash\template\ folder:

package
{
	import flash.display.DisplayObject;
	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.utils.getDefinitionByName;

	public class Preloader extends MovieClip
	{
		/** Bubble this event up to the stage to remove the preloader. **/
		public static const REMOVE_PRELOADER:String = "removePreloader";
		
		/** The fully-qualified name of the class we should instantiate after preloading. **/
		protected var applicationClassName:String;
		
		/** Container for our preloader graphics/animation. **/
		protected var preloader:Sprite;
		
		/** The application once it's instantiated. **/
		protected var application:DisplayObject;

		/** Constructor. **/
		public function Preloader(applicationClassName:String = "")
		{
			this.applicationClassName = applicationClassName;
			
			stop();

			loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
			loaderInfo.addEventListener(Event.COMPLETE, onComplete);
			
			setupStage();
			addPreloader();
		}
		
		/** Set any stage properties or global playback settings, e.g. framerate. **/
		protected function setupStage():void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
		
		/** Add preloader -- override this to add your own animated elements. **/
		protected function addPreloader():void
		{
			preloader = new Sprite();
			addChild(preloader);
		}
		
		/** Update preload progress. **/
		protected function onProgress(event:ProgressEvent):void
		{
			var progress:Number = event.bytesLoaded / event.bytesTotal;
			updatePreloader(progress);
		}
		
		/** Update preloader -- override this to update your animated elements. **/
		protected function updatePreloader(progress:Number):void
		{
			// update the preloader with the loading progress
			var g:Graphics = preloader.graphics;
			g.clear();

			// draw a solid background so we can't see the app as it loads in the background
			g.beginFill(0x000000);
			g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			g.endFill();
			
			// draw the outline of a progress bar
			g.lineStyle(3, 0xffffff, 1, true);
			g.drawRoundRect(20, 290, 600, 20, 10, 10);
			
			// fill the progress bar based on how many of our bytes have been loaded
			g.beginFill(0xffffff);
			g.drawRoundRect(20, 290, 600 * progress, 20, 10, 10);
			g.endFill();
		}
		
		/** Preload complete. **/
		protected function onComplete(event:Event):void
		{
			loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
			loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
			
			nextFrame();
			
			createApplication();
		}
		
		/** Create the application. **/
		protected function createApplication():void
		{
			// we assume the current label's name is the name of the class,
			// unless overridden in the constructor
			//var className:String = applicationClassName || currentLabel;
			
			// must create the application by name so we don't have any static linkage to this class
			
			var appClass:Class = getDefinitionByName("MonkeyGame") as Class;
			addChild(new appClass() as DisplayObject);
		}

		/** Remove preloader. **/
		protected function onRemovePreloader(event:Event):void
		{
			application.removeEventListener(REMOVE_PRELOADER, onRemovePreloader);
			removePreloader();
		}

		/** Remove preloader -- override this to remove the elements added in addPreloader(). **/
		protected function removePreloader():void
		{
			removeChild(preloader);
			preloader = null;
		}
	}
}

2. Alter MonkeyGame.as

Add the following line after [SWF(width="640",height="480")]:

[Frame(factoryClass="Preloader")]

3. Compile your app

Ensure that you have deleted the old build folder from your app to get the preloader files.

4. DONE!

Tested in FireFox and Chrome.

Aymes

(Posted 2013) [#24]

therevills, I always said you was a genius! Thanks very much for that, appreciated :D

grudlux

(Posted 2013) [#25]

Awesome, thanks for the clean and easy-to-add preloader!

CGV	(Posted 2013) [#26]

Before I spend hours wrestling with it, please, does this still work with the latest Monkey, or at least V74a?

CGV	(Posted 2013) [#27]

Ive tried this preloader with V74a and V75d.

In both cases no preloader shows up at all in IE and the progress bar doesn't move in Chrome.

It works fine in Firefox, Safari and Opera though.

Can anyone else confirm this as I suspect it may be a problem with just my box.

UPDATE: I tried building with 72b which therevills specifically wrote the last preloader for and I got the same exact results so apparently it is my box.

I tried building with 3 different Flex SDK's and still the same results.

I'm at a loss to figure out what it is.

Other than the Flex SDK what else is involved in building Flash games with Monkey?

bazmonkey

(Posted 2013) [#28]

I use essentially the same code, with minor tweaks.

http://goodreactions.com/preloader/MonkeyGame.html
(I bloated out the swf to ~6MB so you see the loader bar for longer).

For me, this works on Chrome, Firefox, Opera, mac+windows. + works in IE7, Safari. But, I havent done a wide release using this preloader yet (have been using mochi distribution till now).

I'm using flex 4.6. My browsers + flash are generally up to date. I'm using monkey 72b. Actually, I dont edit any of the monkey trans/build commands, I just use mxmlc on the command line manually, but its the same command.

CGV	(Posted 2013) [#29]

Yep, your preloader works in every browser so it is my box.

Thanks for the confirmation.

I'm going to try an uninstall/reinstall of everything.