How to add Preloader to Monkey - Plz add this Mark

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

therevills

(Posted 1+ years ago) #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[Using Unity]

(Posted 1+ years ago) #2

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

slenkar

(Posted 1+ years ago) #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 1+ years ago) #4

Very nice that you have figured this out.

therevills

(Posted 1+ years ago) #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 1+ years ago) #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 1+ years ago) #7

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

siread

(Posted 1+ years ago) #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 1+ years ago) #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 1+ years ago) #10

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

therevills

(Posted 1+ years ago) #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 1+ years ago) #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

Taiphoz

(Posted 6 months ago) #13

did this ever get added?

Rushino

(Posted 6 months ago) #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 5 months ago) #15

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

GW_	(Posted 5 months ago) #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 5 months ago) #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 5 months ago) #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