この記事のURL
Toolkit for CreateJS 1.1 から出力される html から最新版 CreateJS を利用するための修正箇所
現在の Toolkit for CreateJS 1.1 から出力される html ファイルを元に 最新版 CreateJS(EaselJS 0.6.0, TweenJS 0.4.0, SoundJS 0.4.0, PreloadJS 0.3.0)を利用したい場合、以下の各箇所の修正を行います。
最新版 CreateJS は、音周りやその他もろもろ改善されている箇所があるとの事なので、次バージョンの Toolkit for CreateJS が登場する前に試してみたい、という方向けの内容となります。
まず、音と画像を配置しただけの fla ファイルを Toolkit for CreateJS でパブリッシュすると以下の様な html ファイルが出力されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>
<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="http://code.createjs.com/soundjs-0.3.0.min.js"></script>
<script src="test.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/_1.png", id:"_1"},
{src:"sounds/Explosion.mp3", id:"Explosion"}
];
var loader = new createjs.PreloadJS(false);
loader.installPlugin(createjs.SoundJS);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
if (o.type == "image") { images[o.id] = o.result; }
}
function handleComplete() {
exportRoot = new lib.test();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
function playSound(name, loop) {
createjs.SoundJS.play(name, createjs.SoundJS.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>
これを以下のように修正します。修正前のものはコメントアウトしています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>
<!--
<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="http://code.createjs.com/soundjs-0.3.0.min.js"></script>
-->
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>
<script src="test.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/_1.png", id:"_1"},
{src:"sounds/Explosion.mp3", id:"Explosion"}
];
//var loader = new createjs.PreloadJS(false);
//loader.installPlugin(createjs.SoundJS);
//loader.onFileLoad = handleFileLoad;
//loader.onComplete = handleComplete;
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
var item = o.item;
var type = item.type;
if (type == "image") { images[item.id] = o.result; }
//if (o.type == "image") { images[o.id] = o.result; }
}
function handleComplete() {
exportRoot = new lib.test();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
function playSound(name, loop) {
//createjs.SoundJS.play(name, createjs.SoundJS.INTERRUPT_EARLY, 0, 0, loop);
createjs.Sound.play(name, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>
主な変更内容は以下の通りです。
・head タグ内 各js ファイルのバージョン番号の変更
・PreloadJS クラスを LoadQueue クラスに変更
・LoadQueue で読み込まれたファイルの解析処理変更(handleFileLoadメソッド)
・SoundJS クラスを Sound クラスに変更
[ FLASH ] [ tips ] [ update ] 投稿者 siratama : 2013年02月20日 00:01
トラックバック
コメント
