examples/toolkit/toolkit_easelFL.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>

<!--
When exported by the createjs toolkit, the libs are all loaded immediately and sequentially
using script tags. When using EaselJS + EaselFL we need to know which to load. That
loading must occur before that of the createjs.MovieClip or the toolkit exported JS file
since they both utilize the Easel classes for prototypes immediately.
-->

<!-- added -->
<script src="../../js/FLSetup.js"></script>

<!--<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>-->
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<!--<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>-->
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<!--<script src="toolkit.js"></script>-->

<script>
var myCanvas, stage, exportRoot;

//added because the toolkit declares this within the exported JS file,
//which is being loaded after init method is executed
var images;

function init() {
	
	//flags
	var preloads = false, 
	easel = false,
	requireMovieClip = true;

	//handlers
	function checkReady() {
		if(preloads && easel) {
			createjs.FLSetup.loadScripts('toolkit.js', handleComplete);
		}
	}

	function handlePreloadsComplete() {
		preloads = true;
		checkReady();
	}
	
	function onEaselSuccess() {
		easel = true;
		checkReady();
	}

	function onEaselFailure() {
		//handle lack of support for Easel
	}

	//patch issue with PreloadJS failing due to lack of audio tag in IE8
	if(typeof window.HTMLAudioElement === 'undefined') {
		window.HTMLAudioElement = function (){};
	}

	//-- Toolkit exported init method with adjusted complete method
	myCanvas = document.getElementById("canvas");
	images = images||{};

	var manifest = [
		{src:"images/createjs.jpeg", id:"createjs"}
	];

	var loader = new createjs.PreloadJS(false);
	loader.onFileLoad = handleFileLoad;
	loader.onComplete = handlePreloadsComplete; //handleComplete;
	loader.loadManifest(manifest);

	//-- end Toolkit exported init method

	//EaselJS/EaselFL agnostic setup
	myCanvas.setAttribute('fl_swf_url', '../../haxe/bin/easelfl-NEXT.swf');

	var options = {
		preferFlash: true, //normally - false - in production
		EaselJS_url: 'http://code.createjs.com/easeljs-0.6.0.min.js',
		EaselFL_url: '../../build/output/easelfl-NEXT.min.js',
		SWFObject_url: '../../js/swfobject.js',
		//include only if movieclip is necessary for your application.
		//MC will load after core EaselJS or EaselFL
		//but before the success callback is executed
		MovieClip_url: 'http://code.createjs.com/movieclip-0.6.0.min.js' 
	};

	createjs.FLSetup.run( onEaselSuccess, onEaselFailure, options);
}


function handleFileLoad(o) {
	if (o.type == "image") { images[o.id] = o.result; }
}

function handleComplete() {
	exportRoot = new lib.toolkit();

	stage = new createjs.Stage(myCanvas);

	//EaselFL currently doesn't watch the canvas background color
	if(createjs.Stage.isEaselFL) {
		var bg = new createjs.Shape();
		bg.graphics.beginFill('#ffffff');
		bg.graphics.drawRect(0, 0, 550, 400);
		bg.graphics.endFill();
		stage.addChild(bg);
	}

	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(24);
	createjs.Ticker.addListener(stage); //Ticker must be added to stage for EaselFL to work
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>