FlashとHTML5。そして……。

みなさま

お疲れ様です。
大澤です。

前回のブログの最後に「Flash CC(2014)のスタートアップスクリーンに「HTML5 Canvas」という表示が出てビックリ!」
と書きました。
今回はFlash CC(2014)で、従来通りの「Actionscript3.0」と、新規作成画面に表示される「HTML5 Canvas」でそれぞれ作成し、比較してみようと思います。

まずは従来の作成方法で新規作成画面から「ActionScript3.0」を選び、幅:550px、高さ400px、フレームレートは24fpsとします。
※フレームレートとは、24フレームで1秒のアニメーションということです。
01
下図のような星の図形をつくり、クリックすると左上から右下に移動するアニメーションを作ります。
02
タイムラインは以下のようにし、1フレーム目に静止した星を配置、クリックすると2フレームに移動するという仕組みにしました。
2フレームからは右下に移動するアニメーションにしてあります。
※2フレーム~25フレームなので、その間の24フレームを1秒とするようにしました(24fps)
03
1フレーム目のActionscriptは以下です。

  1. import flash.events.MouseEvent;
  2. stop();
  3. myStar.addEventListener(MouseEvent.CLICK,starClick);
  4. function starClick(e:MouseEvent):void{
  5.     gotoAndPlay(2);
  6. }



25フレーム目は、

  1. stop();



でアニメーション終了です。

さて、次に「HTML5 Canvas」で新規作成します。
04

05
???
開いた画面を見ると、いつものFlashと同じで、不思議なことにActionscriptを書く「アクション」パネルもそのままです。
疑問に思いつつ、さきほどと同じ作り方をしてみました。
手間を省くため、さきほどのドキュメントからフレームごとコピーしペーストしましたが、
Actionscriptのフレームをペーストしたところ、出力パネルに、
「theStarHTML5_canvas.fla でのコピーまたは読み込み中に警告が生成されました :
* フレームスクリプトにコメントが追加されました」

と表示されActionscriptはコメントアウトされてしまいました。
06
とりあえず、コメントから外しパブリッシュ設定で「JavaScript/HTML」を選択、プレビューしてみました。
すると、以下のような表示が……。
「警告 :
EaselJS のフレーム番号は 1 ではなく 0 から始まっています。これは gotoAndStop や gotoAndPlay などのメソッドの呼び出しに影響します。
モーショントゥイーンはフレームアニメーションとしてパブリッシュされます。可能な場合はクラシックトゥイーンを使用してください。」

??
モーショントゥイーンではなくクラシックトゥイーンにすればいいの??
しかし、クラシックトゥイーンにしても
「警告 :
EaselJS のフレーム番号は 1 ではなく 0 から始まっています。これは gotoAndStop や gotoAndPlay などのメソッドの呼び出しに影響します。」

の表示は消えません。
仕方がない!
こうなったら「コードスニペット」の出番だ!
「コードスニペット」とはActionscript、Javascriptの入力補佐をしてくれる便利なコマンドセットです。
07
対象のオブジェクトを選択し、コードスニペットをダブルクリックで確定します。
今回は、1フレームに「クリックして特定のフレームに移動し、再生」
25フレームに「このフレームで停止」を入力しました。
08-1
▲1フレーム
08-2
▲25フレーム

便利なことに丁寧なコメントも記載してくれます。
プレビューしてみたところ、相変わらず警告は表示されますが、ブラウザによっては動いてくれました。
※ブラウザ別の動作結果は以下
 Google Chrome バージョン:42.0.2311.90 ×
 Opera バージョン:28.0 ×
 Safari バージョン:8.0.5 ◯
 Firefox バージョン:37.0.1 ◯

パブリッシュ設定により、flaファイルも含め書き出されるファイルは以下です。
09
書き出されたhtmlのソースは以下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>theStarHTML5_canvas</title>
  6. <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
  7. <script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
  8. <script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
  9. <script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
  10. <script src="theStarHTML5_canvas.js"></script>
  11. <script>
  12. var canvas, stage, exportRoot;
  13. function init() {
  14.     canvas = document.getElementById("canvas");
  15.     images = images||{};
  16.     var loader = new createjs.LoadQueue(false);
  17.     loader.addEventListener("fileload", handleFileLoad);
  18.     loader.addEventListener("complete", handleComplete);
  19.     loader.loadManifest(lib.properties.manifest);
  20. }
  21. function handleFileLoad(evt) {
  22.     if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
  23. }
  24. function handleComplete() {
  25.     exportRoot = new lib.theStarHTML5_canvas();
  26.     stage = new createjs.Stage(canvas);
  27.     stage.addChild(exportRoot);
  28.     stage.update();
  29.     createjs.Ticker.setFPS(lib.properties.fps);
  30.     createjs.Ticker.addEventListener("tick", stage);
  31. }
  32. </script>
  33. </head>
  34. <body onload="init();" style="background-color:#D4D4D4">
  35.     <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
  36. </body>
  37. </html>

Javascriptのソースは以下

  1. (function (lib, img, cjs) {
  2. var p; // shortcut to reference prototypes
  3. var rect; // used to reference frame bounds
  4. // library properties:
  5. lib.properties = {
  6.     width: 550,
  7.     height: 400,
  8.     fps: 24,
  9.     color: "#FFFFFF",
  10.     manifest: [
  11.         {src:"images/star.png", id:"star"}
  12.     ]
  13. };
  14. // symbols:
  15. (lib.star = function() {
  16.     this.initialize(img.star);
  17. }).prototype = p = new cjs.Bitmap();
  18. p.nominalBounds = new cjs.Rectangle(0,0,100,100);
  19. (lib.starObj = function() {
  20.     this.initialize();
  21.     // レイヤー 1
  22.     this.instance = new lib.star();
  23.     this.instance.setTransform(-50,-50);
  24.     this.addChild(this.instance);
  25. }).prototype = p = new cjs.Container();
  26. p.nominalBounds = rect = new cjs.Rectangle(-50,-50,100,100);
  27. p.frameBounds = [rect];
  28. // stage content:
  29. (lib.theStarHTML5_canvas = function(mode,startPosition,loop) {
  30. if (loop == null) { loop = false; }    this.initialize(mode,startPosition,loop,{});
  31.     // timeline functions:
  32.     this.frame_0 = function() {
  33.         /* クリックして特定のフレームに移動し、再生
  34.         特定のシンボルインスタンス上でクリックすると、再生ヘッドがタイムラインの指定フレームに移動し、そのフレームから再生が継続されます。
  35.         メインタイムラインまたはムービークリップタイムライン上で使用できます。
  36.         
  37.         手順 :
  38.         1. 以下のコード内の数値 5 を、シンボルインスタンスのクリック時に再生ヘッドが移動するフレームの番号に置き換えます。
  39.         2. EaselJS のフレーム番号は、1 ではなく 0 から始まります。
  40.         */
  41.         this.stop();
  42.         this.myStar.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));
  43.         
  44.         function fl_ClickToGoToAndPlayFromFrame_2()
  45.         {
  46.             this.gotoAndPlay(1);
  47.         }
  48.     }
  49.     this.frame_24 = function() {
  50.         /* このフレームで停止
  51.          タイムラインは、このコードが挿入されたフレームで停止 / 一時停止します。
  52.         ムービークリップのタイムラインの停止 / 一時停止にも使用できます。
  53.         */
  54.         
  55.         this.stop();
  56.     }
  57.     // actions tween:
  58.     this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(24).call(this.frame_24).wait(1));
  59.     // 星のオブジェクト
  60.     this.myStar = new lib.starObj();
  61.     this.myStar.setTransform(50,50);
  62.     this.timeline.addTween(cjs.Tween.get(this.myStar).wait(1).to({x:500,y:350},23).wait(1));
  63. }).prototype = p = new cjs.MovieClip();
  64. p.nominalBounds = rect = new cjs.Rectangle(275,200,100,100);
  65. p.frameBounds = [rect, rect, new cjs.Rectangle(294.6,213.1,100,100), new cjs.Rectangle(314.2,226.1,100,100), new cjs.Rectangle(333.7,239.2,100,100), new cjs.Rectangle(353.3,252.2,100,100), new cjs.Rectangle(372.9,265.2,100,100), new cjs.Rectangle(392.4,278.3,100,100), new cjs.Rectangle(412,291.3,100,100), new cjs.Rectangle(431.5,304.4,100,100), new cjs.Rectangle(451.1,317.4,100,100), new cjs.Rectangle(470.7,330.5,100,100), new cjs.Rectangle(490.2,343.5,100,100), new cjs.Rectangle(509.8,356.5,100,100), new cjs.Rectangle(529.4,369.6,100,100), new cjs.Rectangle(548.9,382.6,100,100), new cjs.Rectangle(568.5,395.7,100,100), new cjs.Rectangle(588.1,408.7,100,100), new cjs.Rectangle(607.6,421.8,100,100), new cjs.Rectangle(627.2,434.8,100,100), new cjs.Rectangle(646.8,447.8,100,100), new cjs.Rectangle(666.3,460.9,100,100), new cjs.Rectangle(685.9,473.9,100,100), new cjs.Rectangle(705.5,487,100,100), new cjs.Rectangle(725,500,100,100)];
  66. })(lib = lib||{}, images = images||{}, createjs = createjs||{});
  67. var lib, images, createjs;



これらを踏まえ、HTML5 Canvas作成の補佐的な役割と考えた方が良さそうですね。
さらにHTML5、CSS3、Javascriptの勉強を続けたいと思います。

ちなみに、色々なサイトを参考にシンプルに書いてみました。
※一応、動いてくれますが、勉強中のため記述に間違いもあるかも知れません。
 ベンダープレフィックスを付与してあるので、上記の全てのブラウザで動きました。

  1. <!DOCTYPE HTML>
  2. <html lang="ja">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <style type="text/css">
  6.   body{
  7.     margin: 0;
  8.     padding: 0;
  9.     width:550px;
  10.     height:400px;
  11.     border:solid 1px #000000;
  12.   }
  13.   .target02{/*1秒で移動*/
  14.     -moz-transition: 1s linear;
  15.     -webkit-transition: 1s linear;
  16.     -o-transition: 1s linear;
  17.     -ms-transition: 1s linear;
  18.   }
  19.   .target02.on{/*到達座標、ステージ - 星の大きさ*/
  20.     -moz-transform: translate(450px,300px);
  21.     -webkit-transform: translate(450px,300px);
  22.     -o-transform: translate(450px,300px);
  23.     -ms-transform: translate(450px,300px);
  24.   }
  25. </style>
  26. <script type="text/javascript">
  27.   function starAction() {/*クリックすると動き出す関数定義*/
  28.     var target = document.querySelector('.target'),
  29.     target02 = document.querySelector('.target02'),
  30.     countNum02 = 0,
  31.     trnstnCountNum02 = 0;
  32.     target02.addEventListener('click', starMove);
  33.     function starMove(e) {/*移動する関数定義*/
  34.       countNum02 ++;
  35.       target02.classList.add('on');
  36.     }
  37.   }
  38.   document.addEventListener('DOMContentLoaded', starAction);
  39. </script>
  40. </head>
  41. <body>
  42.   <img src="star.png" class="target02"></div>
  43. </body>
  44. </html>



長くなりました。
今回はこのくらいにし……。
…と、言いつつ「One More Thing」w


InDesign
で同じアニメーションを作ってみます。

InDesign
でもCS5から「インタラクティブ」機能が搭載され、簡単なアニメーションが作成できるようになりました。
11
▲ウィンドウメニューから、インタラクティブ→アニメーションを選択します。
 他にも色々なインタラクティブ機能があります。
12
▲アニメーションパネルが表示されるので任意の動きを選択します。
 今回は「右に移動」を選択します。
13
▲イベントで、アニメーションのトリガーになる項目を選択します。
14
▲モーションパスをカスタマイズし、動かしたい方向、距離などを調節します。
 動作する時間なども、ここで設定します。
15
▲最後にファイルメニューよりSWF書き出しを選択し、任意設定をします。
 HTMLファイルも書き出してブラウザで確認してみましょう。

おもしろいですね。

長くなり、失礼いたしました。
最後まで読んで下さり、心より感謝いたします。