flash
CreateJS

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>