Flash と HTML5 のコード比較「マウスに追随するオブジェクト」

July 31, 2010
fl_js_main.gif

「Flash」と「HTML5」が、よく議論されいて、どっちを覚えたらいいのか分からない人も多いかと思います。ボクもそうです。

自分の勉強もかねて、同じアニメーション(マウスに追随するオブジェクト)を、それぞれのスクリプト(ActionScriptとJavaScript)で書いて比較してみました。

Flash (ActionScript 3.0)

Flash (ActionScript 3.0)「マウスに追随するオブジェクト」
(要:FlashPlayer 9.0以上)

ドキュメントクラス

Flashのプロパティでドキュメントクラスに「Ball」と記述(名前は何でもいいけど、クラス名と合わせておく)。

Flash(AS3)コード (Ball.as)

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class Ball extends Sprite {
		private var circle:Sprite;
		private var speed:Number = 0.4; //ボールのスピード(小さいほどゆっくりになる)
		private var radius:Number = 20; //ボールの半径
		private var color1:uint = 0xFFFFFF; //ボールの色
		private var color2:uint = 0xD8EB00; //背景の色
		private var SCREEN_WIDTH:Number = stage.stageWidth; //ステージの幅
		private var SCREEN_HEIGHT:Number = stage.stageHeight; //ステージの高さ
		
		public function Ball() {
			// 背景を描く
			var square:Sprite = new Sprite();
			square.graphics.beginFill(color2);
			square.graphics.drawRect(0, 0, SCREEN_WIDTH , SCREEN_HEIGHT);
			square.graphics.endFill();
			square.x = 0;
			square.y = 0;
			addChild(square);
			 // 円を描く 
			circle = new Sprite();
			circle.graphics.beginFill(color1);
			circle.graphics.drawCircle(0,0,radius);
			circle.graphics.endFill();
			circle.x = SCREEN_WIDTH/2; // ステージの真ん中(よこ)
			circle.y = SCREEN_HEIGHT/2; // ステージの真ん中(たて)
			this.addChild(circle); //ステージに表示
			this.addEventListener(Event.ENTER_FRAME, MoveCircle);
		}
		//円の動き
		private function  MoveCircle(event:Event):void {
			circle.x += (mouseX - circle.x)*speed;
			circle.y += (mouseY - circle.y)*speed;
		}
	}
}

Flash(AS3)の概要

  • タイムラインのフレームに直接書く方法と、外部クラスに書く方法がある(ちなみに上記は外部クラスに記述)。
  • とにかく、型に厳しい。
  • スクリプトで簡単な図形が描ける(Canvasと同様)。

HTML5(Canvas)

HTML5 (Canvas)「マウスに追随するオブジェクト」

Firefox 3.6、Safari 5.0、Google Chrome 5.0で検証
(IEでは閲覧出来ません)

無理矢理、インラインフレームで外部のHTML5ページを埋め込んでます(笑)。きちんと表示しなかったり、別ページで表示させる場合は、下記のリンクをクリックしてください。

HTML5 (Canvas)「マウスを追随するオブジェクト」

HTML5(Canvas)コード

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
		<title>HTML5 (Canvas)「マウスを追随するオブジェクト」</title>
        <link rel="stylesheet" href="css/layout.css" type="text/css" />
<script>
	var circle; //通常はctx(context)って変数名にするっぽいよ
	var speed = 0.05; //ボールのスピード(小さいほどゆっくりになる)
	var radius = 20; //ボールの半径
	var color = "#FFFFFF"; //ボールの色
	var circleX = 250; // ステージの真ん中(よこ)
	var circleY = 170; // ステージの真ん中(たて)
	  
	window.onload = function () {
		init();
	}
	function init(){
		circle = document.getElementById('circle').getContext('2d');
		SCREEN_WIDTH = window.innerWidth;
		SCREEN_HEIGHT = window.innerHeight;
		document.getElementById('circle').addEventListener('mousemove',MouseMove,false);
		setInterval(draw,10);
	}
	//マウスの座標取得
	function MouseMove(e){
 		mouseX = e.clientX - (window.innerWidth - SCREEN_WIDTH);
    	mouseY = e.clientY - (window.innerHeight - SCREEN_HEIGHT);
	}
	//円を描く
	function draw() {
		circle.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); //再描画させるために、とりあえず消す
		circle.fillStyle = color;
		circle.beginPath();
		circle.arc(circleX,circleY,radius,0,Math.PI*2,true);
		circle.closePath();
		circle.fill();
		MoveCircle();
	}
	//円の動き
	function MoveCircle(){
		circleX += (mouseX - circleX)*speed;
		circleY += (mouseY - circleY)*speed;
	}

</script>
	</head>    
	<body>
    	<!-- Canvasを表示させる場所 -->
		<canvas id="circle" width="500" height="340"></canvas>
    </body>

</html>

<script>から</script>までが、Canvasに関する記述。

CSS

body{margin:0; padding:0}
#circle{margin:0; padding:0; background-color:#d8eb00}

HTML5(Canvas)の概要

  • Canvas自体にタイムライン機能がないので、一定間隔で再描画させながらアニメーションさせる。上記では、clearRect()メソッドをつかって、円の表示をクリアしています。
  • HTML5自体は、情報構造を定義するための言語なので、CanvasなどのJavaScriptで動きをつける。
  • スクリプトで簡単な図形が描ける(Flashと同様)。

感想

今回はじめて、「Canvas」を書いてみましたが、「Flash」で少しでもActionScriptを書いたことがある人は、似たような表記も多いので、理解が早いのかもしれません。
とかいって、どっちも極めていないボクは超苦労しましたが (´д`;)

とんちんかんなこと書いていたら、ご指摘よろしくお願いします(特にCanvasは怪しい箇所があるかも)。

参考サイト

カヤックさんがステキなサービスを提供されていますね。人様のソースを見るのはとても勉強になります。Canvasでのマウス座標取得に悩んでいたので、参考させていただきました。ありがとうございます。

Flash

wonderfl build flash online

JavaScript、HTML5、CSS

jsdo.it - share JavaScript, HTML5 and CSS

STAFF_01 [KYS-LAB]: ページが見つかりません。