「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でのマウス座標取得に悩んでいたので、参考させていただきました。ありがとうございます。
![商用OK・加工OKの無料画像素材集[KOYU写]](http://www.kys-lab.com/common_files/img/banner/kys_photo_banner_120x90.gif)
コメントする