Posted at

Flash/CreateJSコンテンツを切り替え表示する方法

More than 5 years have passed since last update.

Flash/CreateJSコンテンツを切り替え表示する方法

http://www.adobe.com/jp/devnet/createjs/articles/flash_createjs_01.html

Flash再生可否をチェックし、再生可能ならFlashを表示、そうでなければCreateJS表示

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Flash/CreateJSコンテンツの表示切り替え</title>

<script src="src/jquery-1.7.1.min.js"></script>
<script src="src/SWFObject-1.1.1.min.js"></script>

<script>

$(document).ready(function(){
/* Flash再生可否をチェックし、再生可能ならFlashを表示、そうでなければCreateJS表示
* 表示する位置は、body内のid:gameのdiv直下
*/
if($.flash.available){
addFlash();
}else{
addCJS();
}

//Flashを表示する関数
function addFlash(){
$('#game').flash({swf:'game.swf',width:550,height:400});
}

//CreateJSのライブラリを読み込み、表示する関数
function addCJS(){
//ステージとなるCanvas配置
$("#game").append(
'<canvas id="canvas" width="550" height="400"></canvas>'
);

/* 読み込みライブラリのリスト。この順番に同期処理で読み込みます。
* Toolkit for CreateJSから書き出されるjsファイルや、ゲーム用のjsファイルは、
* CreateJSのクラスを利用しているので、CreateJSの各種ライブラリ読み込み後に読み込むようにします。
*/
var libQueue = [
"libs/easeljs-0.5.0.min.js",
"libs/tweenjs-0.3.0.min.js",
"libs/movieclip-0.5.0.min.js",
"libs/preloadjs-0.2.0.min.js",
"libs/soundjs-0.3.0.min.js",
"GameData.js",
"game.js"
];

//ライブラリ読み込み用のヘルパ
function loadQueue(){
$.ajax({
url:libQueue.shift(),
dataType:"script",
async:false,
success:function(data){
if(libQueue.length==0){
//全てのライブラリを読み込んだ際に実行する関数を指定。今回は「init」を実行
init();
}else{
loadQueue();
}
}
});
}
//読み込み開始
loadQueue();

}
});

</script>

</head>

<body bgcolor="#F0F0F0">
<p>
Flash再生可否をチェックし、再生可能ならFlashを表示、そうでなければCreateJS表示します。<br>
表示する位置は、body内のid:gameのdiv直下です。
</p>

<div id="game"></div>

</body>

</html>