「CreateJS」カテゴリーアーカイブ

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その3)2017年版

【MacOS Seria+Adobe Animate CC 2017.5リリース】
swfで作ったコンテンツをHTML5 Canvasに書き出すお勉強のその3です。

その2から随分間が空きましたが(笑)、ちょうど以前開発したAS3コンテンツをまとめてCanvas化する仕事があって、思い出しつつ調べつつ作業したので、2017年10月の時点でどのように変換したかをまとめておきます。

前提とするコンテンツは下記のようなものです。

・Flash IDE(いわゆる純正のFlashアプリケーション)で作成されたもの。
・スクリプトを外部ファイル化していない(関数などは1フレーム目にまとめて定義)。
・タイムラインとActionScriptを併用している(定義した関数や変数をフレームで呼び出すようなもの)

ちょっとしたインタラクションとアニメーションを絡めたようなコンテンツは、わざわざクラスファイルを外部化するのも面倒だし、こういう作り方してる人も多いんじゃないかと思います。FlashDevelopやFlash Bulderなんかでガリガリ作ったものは、その筋の人たちにお任せします(笑)。

0.FlaファイルをCanvas形式に変換する。

コマンド>他のドキュメント形式に変換 を選択します。

ドキュメントタイプコンバーターで「HTML5 Canvas」を選択してファイル名、保存場所を指定してOKを押します。

ドキュメントタイプコンバーターのポップアップ

※この時、全てのActionScriptはコメント化されます。「this.stop();」などそのまま使えるものもコメント化されるので要注意。

1.型は全て削除する(:uint や as MovieClipなど)。

JavaScriptにはないので当然ですね。アクションパネルなどで一括置換が漏れがなくてオススメです。

2.タイムラインのどこからでも使いたいものは、アクション>グローバル>スクリプトに書く(のグローバル化)

1フレーム目に関数(function)を書いて、別のフレーム(例えば10フレーム目)で呼び出すのは、ASではよくやりますが、これがそのままではJavascriptで動きません。その場合は、アクションパネルでアクション>グローバル>スクリプトを開いて、ココに書きます。ココに書かれた変数や関数はグローバル化されるので、this参照なしでどこからでも呼び出せます。

アクションパネルの左側から、グローバル>スクリプトを選択します。

・スクリプト例(定義:グローバル>スクリプト)

//---アニメフラグ
var flg_anime = true;

//ボタン:切替
function switchBtn(flg)
{
	if (flg)
	{
		//アニメーション開始;
		startAnimation();
	}
}

・スクリプト例(呼び出し;フレームスクリプト)

//ボタン:初期化
switchBtn(flg_anime);

※ flg_anime, switchBtn()共にグローバルなので、this等の修飾なしで使用できる。

グローバル>スクリプトの関数で、ステージ上に配置されたMovieClipやボタン、ステージのタイムラインなどを使用する場合は、exportRootで参照します。

・スクリプト例(定義:グローバル>スクリプト)

//アニメーション開始
function startAnimation()
{
	exportRoot.gotoAndPlay("f_anime");
}

3.MovieClip内の関数

タイムラインが1フレームしかないもので、MovieClip内で完結する変数、関数は、そのままthis等の参照なしでフレームに書いてOK。
・そのMovieClip内に閉じたものは、function xxx(){} で定義したものをthis.xxx()で参照すればよい。

・スクリプト例(MovieClip;フレームスクリプト)

//何か例を入れる

但しMovieClipの外部から参照する変数、関数はプロパティにする必要があります。
・this.xxx = function(){} な書き方。

//何か例を入れる

4.プロパティパネルに書いたインスタンス名は参照出来ない。

ボタンやMovieClipでインスタンス名で参照したいときは、明示的にnameプロパティに文字列を設定する必要があります。

・スクリプト例(定義:グローバル>スクリプト)

//ボタン:初期化
function inithBtn()
{
	exportRoot.btn_up_year.name = "btn_up_year";
	exportRoot.btn_up_month.name = "btn_up_month";
	exportRoot.btn_up_day.name = "btn_up_day";
}

※MovieClipなら、MovieClip内のフレームで、this.name = “xxx” でも定義できる。

5.円形グラデーションやフィルターなどは使えない。

・HTML5 Canvasに書き出すのに制限があります。ライブラリ上でビットマップに変換しておくか、場合によってはビットマップで作り直す必要があります。

6.MouseEvent.MOUSE_UP >> pressup

・ここは “mouseup” じゃないので要注意。

処理 AS JavaScript
クリック MouseEvent.CLICK click
マウスオーバー MouseEvent.MOUSE_OVER mouseover
マウスアウト MouseEvent.MOUSE_OUT mouseout
マウスダウン MouseEvent.MOUSE_DOWN mousedown
マウスアップ MouseEvent.MOUSE_UP pressup
ロールアウト MouseEvent.ROLL_OUT rollout

7.Movieclip内の関数でのthis参照

関数内でのthisを参照すると、ページのルートであるWindowを指します(詳しくは、別記事の「4.thisの参照」を参照のこと)。
MovieClip内の関数で、相対的にパスを指定したいときは、関数外で変数にthisを入れておき、それを使って参照します。

・スクリプト例(定義:MovieClip内のフレームスクリプト)

//関数内での参照用にthisを変数化
var my_mc = this;

//初期化
this.init = function ()
{	
	my_mc.open_cap.visible = false;
	my_mc.close_cap.visible = false;

}

8.MovieClipボタンのカーソル対応

“buttonMode” は”cursor”に変更します。

処理 AS JavaScript
指カーソルにする MovieClip.buttonMode = true; MovieClip.cursor = “pointer“;
デフォルトカーソルにする MovieClip.buttonMode = false; MovieClip.cursor = “default“;

9.TFLは使えない。

・強制的に普通のテキストに変換されるので、注意が必要です。

10.Dateオブジェクトの扱いに注意

ActionScriptにもJanaScriptにも同じようにDateオブジェクトがありますが、年月日時分秒を取得する際に、ActionScriptはプロパティで、JavaScriptはfunctionのため、微妙に違うので要注意。

処理 AS JavaScript
Dateオブジェクト生成 var date:Date = new Date(); var date = new Date();
年(4桁) date.fullYear date.getFullYear()
date.month date.getMonth()
date.date date.getDate()
date.hours date.getHours()
date.minutes date.getMinutes()
date.seconds date.getSeconds()

11.MovieClipのwidth,height

MovieClip.nominalBoundsで取得可能です。

・スクリプト例(定義:MovieClip内のフレームスクリプト)

this.tft07.nominalBounds.width
this.tft07.nominalBounds.height

【参考】
・X-LABO: Toolkit for CreateJS & Haxe : シンボルの初期表示サイズ・位置情報取得 nominalBounds
・Animate CCで書きだしたCreateJSのグラフィックスの色をプログラム上から変更する – Qiita

createjs – How to change the width of a movieclip in flash html5 canvas? – Stack Overflow

12.MovieClipをリストアップする

多くのMovieClipを配置して制御する場合、ひとつずつに名前をつけたりするのも大変なので、MovieClipだけを配列化して使う場合があります。

・ActioScript例

function initBit():void
{
	array_bit = [];
	
	for (var i:uint=0; i<this.numChildren; i++)
	{
		var ds:DisplayObject = this.getChildAt(i);

		if (ds is MovieClip)
		{
			array_bit.push(ds);
			ds.visible = false;
		}
	}

}

この「is MovieClip」がjavaScriptにないので、どうしようかな?と考えて、MovieClipにはtimelineが存在するので、それを代替にしてMovieClipのみをリストアップすることにしました。まあ気づけばたいした話ではないんですが。

・JavaScript例

his.initBit = function ()
{
	array_bit = [];
	
	for (var i=0; i<this.numChildren; i++)
	{
		var ds = this.getChildAt(i);

		if (!!ds.timeline)
		{
			array_bit.push(ds);
			ds.visible = false;
		}
	}
}

だいたいこんなところだと思いますが、抜けがあったらまた更新します。

以前書いたブログもよければご参考に。

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その1) | AS blind side
【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その2) | AS blind side

【追記】
早速、12.を追記しました(2017.10.11)。

【CreateJS】Canvasのアニメーションを動的に切り替える

Canvasでアニメーションだけなら、JavaScript書かずにFlash CC(Animate CC)で書き出せばいいよね。Flashまだまだ使えるよ!なんですが、実際運用するとなると、ある時期でアニメーション切替、追加、削除等の変更が出てきます。AS3.0ならloadMovieでswf切り替えればよかったんですが、「CanvasにはloadMovieとかないし、どうするの?」と思ったら、意外とカンタンな話だったのでまとめておきます。

まずはアニメを作ります。
1つ目。Flash CC(今回はFlash CC 2015を使用)で、新規から「HTML5 Canvas」を選択してクラッシックトゥイーンでアニメーションして書き出しただけ。完成品はこちら

アニメその1

 

2つ目。作り方は同じ。完成品はこちら

anime2

 

で、2つ目のアニメを例に、Flash CCが書き出したHTMLとJavaScriptを見てみると・・・

・HTML抜粋(anime2.html)

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	exportRoot = new lib.anime2();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}
</script>

・JavaScript抜粋(anime2.js)

// stage content:
(lib.anime2 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// timeline functions:
	this.frame_119 = function() {
		//this.stop();
	}

	// actions tween:
	this.timeline.addTween(cjs.Tween.get(this).wait(119).call(this.frame_119).wait(1));

	// レイヤー 2
	this.instance = new lib.mc_girl();
	this.instance.setTransform(698.1,205,3,3,0,0,0,41.1,143.8);

	this.timeline.addTween(cjs.Tween.get(this.instance).to({x:283.1,y:463},59).to({scaleX:4,scaleY:4,x:-154.8,y:479},60).wait(1));

	// レイヤー 3
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#FF9900").s().p("Egq9AfPMAAAg+eMBV6AAAMAAAA+eg");
	this.shape.setTransform(275,200);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(120));

}).prototype = p = new cjs.MovieClip();

 

JSファイルでは、アニメーション全体がlib.anime2として定義されていて、それをHTML側に書いたJavaScript(init)でstageにaddChildしているという構造です。

なので、アニメーションの再生フレームを監視して、再生し終わったらremoveChildで削除して、次のアニメーションをaddChildすれば言いわけです。で、この2つのアニメーションを切替再生するためにJavaScript部分を書き直したHTMLがこちら。

・HTML(anime_switch.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>anime_switch</title>

<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="anime1.js"></script>
<script src="anime2.js"></script>

<script>
var canvas, stage, exportRoot;
var animeArray = ["anime1","anime2"];
var count_anime;

function init() {
	canvas = document.getElementById("canvas");
// 	exportRoot = new lib.anime2();

	count_anime = 0;
	exportRoot = new lib[animeArray[count_anime]]();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
	createjs.Ticker.addEventListener("tick",onCheckAnimationEnd);
}

function onCheckAnimationEnd(event){
	if (exportRoot.timeline.position >= (exportRoot.timeline.duration-1)){

		count_anime++;
		count_anime = count_anime > (animeArray.length-1)  ? 0 : count_anime;

		stage.removeChild(exportRoot);

		exportRoot = new lib[animeArray[count_anime]]();
		stage.addChild(exportRoot);
	}
}

</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>

※完成サンプルはこちら

要点は以下の通り。

  • 両方のアニメーションのjsを読み込む(9-10行目)
  • アニメーションを切り替えるためのライブラリ名は配列化(15行目)
  • 再生順を管理するためのカウンタ変数を追加(16行目)
  • アニメーション再生監視用に関数を追加(31,34-45行目)

今回のCreateJSでのASとの相違部分は以下です。

処理 AS JavaScript
現在のフレーム数 mc.currentFrame mc.timeline.position
総フレーム数 mc.totalFrames mc.timeline.duration

 

【追記】
2つのアニメーションを1つのflaファイルに、それぞれMovieClipとして作成した場合は、JSファイル上は・・・

  • lib.anime1
  • lib.anime2

のように定義されるので、この名前でaddChildできます。よって、必ずしもアニメーションを別ファイルで作成する必要はありません。

※今回のようにアニメーション全体を切り替える場合、実際には別ファイルと管理する方が楽だと思います。

上記の説明は、私の環境のFlash CCで書き出される下記のバージョンのCreateJSを前提としています。

<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>

【参考】
今回はtwitterでのやりとりが元になりました。gyoh_kさん野中さんに感謝。

gyoh_kさんのツイート
野中 文雄さんのツイート1
野中 文雄さんのツイート2

【追記】2016.6.9
野中さんさんから、「MovieClip.currentFrameプロパティは前からあり、EaselJS 0.8.1 でMovieClip.totalFramesプロパティが加えられました。」とのご指摘を受けました。CreateJSとASの対応表を下記のように修正します。

処理 AS JavaScript
現在のフレーム数 mc.currentFrame mc.timeline.position,mc.currentFrame
総フレーム数 mc.totalFrames mc.timeline.duration,mc.totalFrames

 

currentFrame,totalFramesを使ったサンプルはこちら

参考
FN1506001 | EaselJS 0.8.1: MovieClipオブジェクトの再生の長さ・フレーム数を調べる | HTML5 : テクニカルノート
EaselJS v0.8.2 API Documentation : MovieClip – currentFrame
EaselJS v0.8.2 API Documentation : MovieClip – totalFrames

【CreateJS】CreateJS勉強会(第7回)私的まとめ

2016/1/22(金)CreateJS勉強会(第7回)に行ってきました。その個人的まとめです。

※以下、敬称略です。

セッション内容

【セッション1】Single Page ApplicationにおけるPreloadJSの活用事例

(リクルートマーケティングパートナーズ 山田 直樹

・「キャッシュ済のファイルは読み込まないようにする」について、「ブラウザのメモリ上限に対するキャッシュの扱い(古いものから消す等)」について質問。「現状ではコンテンツ数が少ないので考慮していない」とのこと。
・PreloadJS は 0.6.1 を使用。最新版(0.6.2)だと、queue.getResult().srcから抜き出したBlobオブジェクトのパスが使えない(画像が読み込めない)ため。
【セッション2】事例から見るCreateJSの使いみち

(世路庵 沖 良矢
※レジュメなし(クライアント情報を含むため非公表)

・CreateJSのメリット
 各要素(動画除く)を1つの APIで制御できる。
 ブラウザ間の挙動を吸収してくれる
・CreateJSのデメリット
 画面描画は、Flashは部分更新なのに対し、CreateJSは全画面更新になる為、負荷が高い。
【セッション3】EaselJS 0.8.2の改訂項目とgskinner labの作例「Arc Rainbow」

野中文雄

※「Arc Rainbow」についての、野中さんによる更なる解説記事
 ・ FN1512002 | Graphicsコマンドでトゥイーンアニメーションを描く | HTML5 : テクニカルノートFN1512001 | 設定のオン・オフを切り替える - トグルボタンの論理組み立て | HTML5 : テクニカルノートFN1601001 | 条件分岐を考える | HTML5 : テクニカルノート
【セッション4】CreateJSで開発するクロスプラットフォームなアプリ開発〜ElectronとPhoneGapで広がる可能性〜

(ICS 鹿野 壮野原 のぞみ
・レジュメ(前編後編

・Webコンテンツアプリ化のメリット
 開発リソースの軽減
 アプリ化はカンタン(デスクトップ >> Electron, モバイル >> Cordova
・Webコンテンツアプリ化のデメリット
ネイティブ機能はプラグインで実装。プラグインが公開されているか、または自作。この辺は AIR for iOS/Androidに 対する ANE(Adobe Native Extension)と同じ印象。

関連リンク

CreateJS勉強会 (第7回) まとめ – Togetterまとめ

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その2)

swfで作ったコンテンツをHTML5 Canvasに書き出すお勉強のその2です。

今回は座標制御について。

青いボタン(btn_start)を押すとスロット(slot_mc0)が回転して、ランダムな位置で停止するというサンプルです。スロットが回転中はボタンを押せないようにしています。これをCanvasで動くように書き換えます(赤字はインスタンス名)。swfサンプルはこちら

screen_test02_02

スロット(slot_mc0)のMovieClipの構造はこんな感じです。4つの絵の入ったMovieClipが縦に2つ(img_mc0,img_mc1)並んでいて、全体をマスクしています。マスクの範囲から出てしまったら、もう一方のMovieClipの上に来るような仕組みです。(当然ながら、MovieClipはx=0で揃えてあります)。

で、ASはこんな感じ。まずはルートのタイムラインに書いてあるスクリプト。JSに変換する前提なので、型指定はしていません。
【AS:ルートのタイムライン】

var timer_msg;

//startボタン:使用可
useStartBtn();

function onOver_start(event){
	var mc = event.currentTarget;
	mc.alpha = 0.7;
}

function onOut_start(event){
	var mc = event.currentTarget;
	mc.alpha = 1;
}

function onClick_start(event){
	//startボタン:使用不可
	nouseStartBtn();

	slot_mc0.setRandom();
	slot_mc0.startTimer_spin(1000*(0+1),3);
	slot_mc0.startSlot();
}

function stopSlot(mc){
	//startボタン:使用不可
	useStartBtn();
}

function useStartBtn(){
	btn_start.addEventListener(MouseEvent.ROLL_OVER,onOver_start);
	btn_start.addEventListener(MouseEvent.ROLL_OUT,onOut_start);
	btn_start.addEventListener(MouseEvent.CLICK,onClick_start);
	btn_start.buttonMode = true;

	btn_start.alpha = 1;
}

function nouseStartBtn(){
	btn_start.removeEventListener(MouseEvent.ROLL_OVER,onOver_start);
	btn_start.removeEventListener(MouseEvent.ROLL_OUT,onOut_start);
	btn_start.removeEventListener(MouseEvent.CLICK,onClick_start);
	btn_start.buttonMode = false;	

	btn_start.alpha = 0.3;
}

スロット自体の処理は、AS版ではスロット(slot_mc0)MovieClipのタイムラインに書いています。
【AS:slot_mc0のタイムライン】

var array_pos = [0,110,220,330,440];
var speed_max = 30;
var flg_end = false;
var flg_stop = false;
var flg_remove = false;
var posNo = 0;
var imgNo = 0;
var speed;
var timer_spin;
var pos_stop;

//開始位置をランダムにする
function setRandom():void{
	var pos_y = xRandomInt(0,img_mc0.height);

	img_mc0.y = pos_y;
	img_mc1.y = img_mc0.y-img_mc1.height;

	//はみ出しチェック
	ckeckFrameOut();

	//スピード:初期化
	speed = speed_max;

	//停止フラグ:初期化
	flg_stop = false;
	flg_end = false;
	flg_remove = false;
	posNo = 0;
}

//回転
function spin(event){
	img_mc0.y += speed;
	img_mc1.y += speed;

	if (flg_end){
		checkEndPoint();
	}
	if (flg_stop){
		checkStopPoint();
	}

	ckeckFrameOut();

	if (flg_remove){
		flg_remove = false;
		//停止時の位置ずれ補正
		img_mc0.y = pos_stop;
		if (img_mc0.y < 0){
			img_mc1.y = img_mc0.y + img_mc0.height;
		} else {
			img_mc1.y = img_mc0.y - img_mc0.height;
		}

		if (img_mc1.y == 0){
			img_mc0.y = img_mc1.y - img_mc0.height;
		}

		this.removeEventListener(Event.ENTER_FRAME,spin);
		var parentObj = this.parent;
		parentObj.stopSlot(this);
	}
}

//停止地点チェック
function checkEndPoint(){
	var i;
	var dis_mim = img_mc0.height;
	var flg_check = false;

	//---スロットをランダムにする
	for (i=0;i<array_pos.length;i++){
		if (img_mc0.y >= 0 && img_mc0.y <= array_pos[i]){
			flg_check = true;
			break;
		} else if (img_mc0.y < 0 && img_mc0.y <= array_pos[i]*-1){
			flg_check = true;
			break;
		} else {
			flg_check = false;
		}
	}

	if (flg_check){
		var dis = Math.abs(array_pos[i] - Math.abs(img_mc0.y));
		if (dis < dis_mim){
			dis_mim = dis;
			posNo = i;
		}
	}

	var fugo = (img_mc0.y < 0) ? -1 :1;
	pos_stop = array_pos[posNo] * fugo;

	//絵柄番号:判定(img_mc0.yが+値の時は、img_mc1の位置が当たりになる)
	imgNo = (pos_stop < 0) ? posNo :(array_pos.length-1) - posNo;
	imgNo = (imgNo == 4) ? 0:imgNo;

	flg_end = false;

	var amari = dis_mim % speed;

	if (amari > 0){
		img_mc0.y += amari;
	}

	flg_stop = true;
}

//停止監視
function checkStopPoint(){
	if (pos_stop == img_mc0.y){
		flg_stop = false;
		flg_remove = true;
	} else {
		var margin = Math.abs(Math.abs(pos_stop) - Math.abs(img_mc0.y));
		if (margin < speed){
			speed = margin;
		}
	}
}

//はみ出しチェック
function ckeckFrameOut(){
	if (img_mc0.y >= img_mc0.height){
		img_mc0.y = img_mc1.y - img_mc0.height;
	} else if (img_mc1.y >= img_mc1.height){
		img_mc1.y = img_mc0.y - img_mc1.height;
	}
}

//ランダムな整数値を取得
function xRandomInt (nMin,nMax) {
	// nMinからnMaxまでのランダムな整数を返す
	var nRandomInt = Math.floor(Math.random()*(nMax-nMin+1))+nMin;
	return nRandomInt;
} 

//Timer開始
function startTimer_spin(interval,count){
	timer_spin = new Timer(interval,count);
	timer_spin.addEventListener(TimerEvent.TIMER,onCheckTimer_spin);
	timer_spin.addEventListener(TimerEvent.TIMER_COMPLETE,onEndTimer_spin);
	timer_spin.start();
}

function startSlot(){
	this.addEventListener(Event.ENTER_FRAME,spin);
}

function onCheckTimer_spin(event){
	var timerObj = event.currentTarget;
	var remain_count = timerObj.repeatCount - timerObj.currentCount;
	if (remain_count <= 3){
		remain_count = (remain_count == 0) ? 1 :remain_count;
		speed = Math.round(speed / remain_count);
	}
}

//Timer停止
function onEndTimer_spin(event){
	//終了フラグ:on
	flg_end = true;
}

そして、これをCanvasで書き出すために、JavaScriptで書き直したものが下記です。こちらも同じくFlash CCのルートのタイムラインに書いています。Canvasでパブリッシュしたサンプルはこちら
【Canvas版JavaScript】

//インスタンスへのMouseOver関連イベントはコレが必須。
stage.enableMouseOver();

var h_img_mc = this.slot_mc0.img_mc1.y - this.slot_mc0.img_mc0.y;

var speed_max = 30;
var array_pos = [0,110,220,330,440];

//startボタン:使用可
useStartBtn(this);

function onClick_start(event){
	//startボタン:使用不可
	nouseStartBtn(event.currentTarget.parent);

	var mc = event.currentTarget;
	var slot = mc.parent.slot_mc0;

	slot.img_mc0.height = h_img_mc;
	slot.img_mc1.height = h_img_mc;

	setRandom(slot);
	slot.startTime = createjs.Ticker.getTime(true);
	startSlot(slot);
	startTimer_spin(slot,1000*(0+1),3);

}

function onOver_start(event){
	var mc = event.currentTarget;
	mc.alpha = 0.7;
}

function onOut_start(event){
	var mc = event.currentTarget;
	mc.alpha = 1;
}

//開始位置をランダムにする
function setRandom(mc){
	var pos_y = xRandomInt(0,mc.img_mc0.height);

	mc.img_mc0.y = pos_y;
	mc.img_mc1.y = mc.img_mc0.y-mc.img_mc1.height;

	//はみ出しチェック
	ckeckFrameOut(mc);

	//スピード:初期化
	mc.speed = speed_max;

	//停止フラグ:初期化
	mc.flg_stop = false;
	mc.flg_end = false;
	mc.flg_remove = false;
	mc.posNo = 0;
	mc.remain_count = 0;

}

//はみ出しチェック
function ckeckFrameOut(mc){
	if (mc.img_mc0.y >= mc.img_mc0.height){
		mc.img_mc0.y = mc.img_mc1.y - mc.img_mc0.height;
	} else if (mc.img_mc1.y >= mc.img_mc1.height){
		mc.img_mc1.y = mc.img_mc0.y - mc.img_mc1.height;
	}
}

//ランダムな整数値を取得
function xRandomInt (nMin,nMax) {
	// nMinからnMaxまでのランダムな整数を返す
	var nRandomInt = Math.floor(Math.random()*(nMax-nMin+1))+nMin;
	return nRandomInt;
} 

//Timer開始
function startTimer_spin(mc,interval,count){
	mc.remain_count = count;
	mc.addEventListener("tick",onCheckTimer_spin);
}

function startSlot(mc){
	mc.addEventListener("tick",spin);
}

function onCheckTimer_spin(event){
	var mc = event.currentTarget;
	var wCount = Math.floor((createjs.Ticker.getTime(true) - mc.startTime)/1000);

	var count = 3 -  wCount;

	if (mc.remain_count == count){
		return;
	} else {
		mc.remain_count = count;

		if (mc.remain_count <= 3){
			if (mc.remain_count == 0){
				mc.removeEventListener("tick",onCheckTimer_spin);
				onEndTimer_spin(mc);
			} else {
				mc.speed = Math.round(mc.speed / mc.remain_count);
			}
		}
	}
}

//回転
function spin(event){
	var mc = event.currentTarget;

	mc.img_mc0.y += mc.speed;
	mc.img_mc1.y += mc.speed;

	if (mc.flg_end){
		checkEndPoint(mc);
	}
	if (mc.flg_stop){
		checkStopPoint(mc);
	}

	ckeckFrameOut(mc);

	if (mc.flg_remove){
		mc.lg_remove = false;

		//停止時の位置ずれ補正
		mc.img_mc0.y = mc.pos_stop;
		if (mc.img_mc0.y < 0){
			mc.img_mc1.y = mc.img_mc0.y + mc.img_mc0.height;
		} else {
			mc.img_mc1.y = mc.img_mc0.y - mc.img_mc0.height;
		}

		if (mc.img_mc1.y == 0){
			mc.img_mc0.y = mc.img_mc1.y - mc.img_mc0.height;
		}

		mc.removeEventListener("tick",spin);
		stopSlot(mc);
	}
}

//停止監視
function checkStopPoint(mc){
	if (mc.pos_stop == mc.img_mc0.y){
		mc.flg_stop = false;
		mc.flg_remove = true;
	} else {

		var margin = Math.abs(Math.abs(mc.pos_stop) - Math.abs(mc.img_mc0.y));
		if (margin < mc.speed){
			mc.speed = margin;
		}
	}
}

//
function onEndTimer_spin(mc){
	//終了フラグ:on
	mc.flg_end = true;

}

//停止地点チェック
function checkEndPoint(mc){
	var i;
	var dis_mim = mc.img_mc0.height;
	//var posNo = 0;
	var flg_check = false;

	//---スロットをランダムにする
	for (i=0;i<array_pos.length;i++){
		if (mc.img_mc0.y >= 0 && mc.img_mc0.y <= array_pos[i]){
			flg_check = true;
			break;
		} else if (mc.img_mc0.y < 0 && mc.img_mc0.y <= array_pos[i]*-1){
			flg_check = true;
			break;
		} else {
			flg_check = false;
		}
	}

	if (flg_check){

		var dis = Math.abs(array_pos[i] - Math.abs(mc.img_mc0.y));
		if (dis < dis_mim){
			dis_mim = dis;
			posNo = i;
		}
	}

	var fugo = (mc.img_mc0.y < 0) ? -1 :1;
	mc.pos_stop = array_pos[posNo] * fugo;

	//絵柄番号:判定(img_mc0.yが+値の時は、img_mc1の位置が当たりになる)
	imgNo = (mc.pos_stop < 0) ? posNo :(array_pos.length-1) - posNo;
	imgNo = (imgNo == 4) ? 0:imgNo;

	mc.flg_end = false;

	var amari = dis_mim % mc.speed;

	if (amari > 0){
		mc.img_mc0.y += amari;
	}

	mc.flg_stop = true;
}

function stopSlot(mc){
	//startボタン:使用可
	useStartBtn(mc.parent);
}

function useStartBtn(target){
	target.btn_start.addEventListener("mouseover", onOver_start);
	target.btn_start.addEventListener("mouseout", onOut_start);
	target.btn_start.addEventListener("click",onClick_start);
	target.btn_start.cursor = "pointer";

	target.btn_start.alpha = 1;
}

function nouseStartBtn(target){
	target.btn_start.removeEventListener("mouseover", onOver_start);
	target.btn_start.removeEventListener("mouseout", onOut_start);
	target.btn_start.removeEventListener("click",onClick_start);
	target.btn_start.cursor = "normal";

	target.btn_start.alpha = 0.3;
}

AS版ではスロット(slot_mc0)MovieClipの中に書かれていたスクリプトも、Canvas版ではルートのタイムラインにまとめてあります。MovieClipの中にスクリプトを書かない方がいいと聞いたのでと、JSだとやはり1ファイルにまとまっていたほうがわかりやすいので。

※その為Canvas版では、【slot_mc0のタイムライン】の冒頭(1〜10行目)で書かれている変数も、固定値のもの(1〜2行目)はルートに書き、その他(3〜10行目)はスロット(slot_mc0)のプロパティにしてあります。また関数には引数でMovieClipを渡すようにしてあります。

で、ここからが本題のCanvas版用にJavaScriptで書き換える時の注意点。

1.オブジェクトの基準点が違う

まず気をつけないといけないのは、Cavnasに描き出されたにMovieClipの座標は、Flash CC上での座標(+)ではなくて中心点(○)であるということ。これを知らないで座標を取得すると訳のわからない位置が表示されてハマります。なので必ずオブジェクトの座標と中心点が重なるようにしておくこと。

【参考】
・Chitose Web: Toolkit for CreateJS 座標がずれる時

2.オブジェクトのwidth,heightが取れない。

そしてもう1つ。DisplayObject.getBounds()という一見オブジェクトのサイズを返してくれそうなメソッドがありますが、これが役に立たないということ。そもそも作られた目的が違うようです。詳しくは下記を参照。

【参考】
・FN1312005 | EaselJS 0.7.1: ColorFilterクラスでインスタンスの塗りのグラデーションを反転させる | HTML5 : テクニカルノート(FumioNonaka.com)
※「03 Shapeオブジェクトに矩形領域を定める ー DisplayObject.getBounds()とDisplayObject.setBound」を参照

またDisplayObjectにwidth,heigitのプロパティがありません。スロット(slot_mc0)をループさせるために中のMovieClipの高さが必要なので、ここではimg_mc0とimg_mc1のy座標の差を高さとして算出し(【Canvas版JavaScript】19〜20行目)、img_mc0とimg_mc1に「height」というプロパティ名で渡しています(【Canvas版JavaScript】4行目)。

※ img_mc0の高さはわかっているので固定値で変数にすることも可能ですが、絵柄を増やして高さが変更になることも考慮して計算で出しています。

3.Timerの使い方

AS版ではスロット(slot_mc0)の回転をEvent.ENTER_FRAMEでやって、Timerを一定間隔で動かして回転速度と停止のコントロールをしていたのですが、EaselJSで該当するTickerは静的クラスでインスタンス化できないので複数作れません。

・EaselJS v0.8.0 API Documentation : Ticker

なので、回転開始時間をcreatejs.Ticker.getTime()で取得してスロットのプロパティに設定し(【Canvas版JavaScript】23行目)、経過時間をチェックして擬似的にインターバル処理を行っています(onCheckTimer_spin/【Canvas版JavaScript】87〜107行目)。

【参考】
・JavaScript – CreateJS(EaselJS)でタイマを管理するTickerクラスの使い方 – Qiita

※JSのTimerを使えばいいのでは?という指摘を受けましたが、書いてる時点ではCreateJSの中のメソッドしか頭になく気がつきませんでした(笑)。そちらの方が、TimerとENTER_FRAMEにそれぞれ対応していていいかもしれません。

4.thisの参照

スタートボタンの制御を関数化していますが(useStartBtn/nouseStartBtn)、ここでも問題が。AS版のようにボタンを「this.btn_start」で参照すると、オブジェクトがないよと怒られます。

[Error] TypeError: undefined is not an object (evaluating 'this.btn_start.addEventListener')

console.log(“this >> “+this)で調べてみると、ルートで参照した場合は・・・

this >> [MovieClip (name=null)]

となり、functionの中で参照した場合は・・・

this >> [object Window]

と返ってきます。

FlashCCが書き出すHTMLを見てみてると・・・

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
	exportRoot = new lib.test02_html5();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}
</script>

となっていて、Flashからの要素をexportRootにラップしてstageにaddChildしているので、ルートで参照したときのthisの値([MovieClip (name=null)])は、exportRootを指しています。

一方、functionの中で呼び出したものはページのルートであるWindowを指すようです。

ここではカンタンにルートから呼び出す関数にはthisを渡して参照するようにしました(【Canvas版JavaScript】10行目、218〜225行目)。

※他の方法としては、直接exportRootを参照に使うか、stageの中から参照することも可能です。

exportRoot.btn_start.addEventListener("mouseover", onOver_start);
stage.getChildAt(0).btn_start.addEventListener("mouseover", onOver_start);

またはJSのFunction.bind()を使って、thisの参照を書き換えた変数を生成して呼び出す方法もあります。

var func = useStartBtn.bind(this.btn_start);
func(this);

【参考】
・FN1303001 | CreateJSで関数にスコープを定める ー proxy()関数 | HTML5 : テクニカルノート
・FN1303002 – 関数に任意のthis参照を定める – HTML5 : テクニカルノート
・JavaScript の超便利なメソッド bind で this を制御する | Foreignkey, Inc.

5.まとめ

処理 AS JavaScript
オブジェクトの座標(x,y) 座標(+) 中心点(○)
オブジェクトのサイズ(width,height) width,height プロパティなし
ルートのthis参照 root exportRoot
functionのthis参照 root Window
繰り返し処理 Event.ENTER_FRAME Ticker
タイマー Timer Timer(setTimeout/setInterval)

上記の説明は、私の環境のFlash CCで書き出される下記のバージョンのCreateJSを前提としています。

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="test01_html5.js"></script>

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その1)

今更ですが文字通り、swfで作ったコンテンツをHTML5 Canvasに書き出すお勉強です。

Flash Professional CCでは「コマンド」>「AS3 ドキュメント形式から HTML5 Canvas に変換」でCanvas用のファイルに変換できます。基本的なことはこちらから。

・Flash Professional CC:今すぐ試してほしい! 新しいHTML5書き出しADC Plus

これは前から知ってるわけですが、「じゃあJS部分はどう書くか?」ってざっとググっても変換用サンプルに書かれているJSはたいていルートでの「gotoAndPlay」レベル。で、もうちょっと実際に使う形でASに書いたものをどう書き換えればいいのか?というのを少しずつまとめていきます。

screen_test01

 

とりあえず簡単なサンプルで、win_mcというMovieClip(グレーの部分)にbtn(白の部分)というMovieClipが入っている。win_mcは10フレームで、btnをクリックすると1コマずつ切り替わるというもの。swfサンプルはこちら

で、ASはこんな感じ。ルートのタイムラインに書いています。JSに変換する前提なので、型指定はしていません。

win_mc.gotoAndStop(1);

win_mc.btn.buttonMode = true;
win_mc.btn.addEventListener(MouseEvent.CLICK,onClickBtn);

function onClickBtn(event){
	var target = event.currentTarget;
	var num_max = target.parent.totalFrames;
	var num_current = target.parent.currentFrame;
	var num_next = (num_current + 1) > num_max ? 1 : (num_current + 1);
	target.parent.gotoAndStop(num_next);
}

で、これをCanvasで書き出すために、JavaScriptで書き直したものが下記です。こちらも同じくFlash CCのルートのタイムラインに書いています。Canvasでパブリッシュしたサンプルはこちら

//インスタンスへのMouseOver関連イベントはコレが必須。
stage.enableMouseOver();

this.win_mc.gotoAndStop(0);

this.win_mc.btn.cursor = "pointer";
//win_mc.btn.buttonMode = true;
this.win_mc.btn.addEventListener("click",onClickBtn);

function onClickBtn(event){
	var target = event.currentTarget;
	//var num_max = target.parent.totalFrames;
	var num_max = target.parent.timeline.duration;
	var num_current = target.parent.currentFrame;
	//var num_next = (num_current + 1) > num_max ? 1 : (num_current + 1);
	var num_next = (num_current + 1) > (num_max - 1) ? 0 : (num_current + 1);
	console.log("num_current:"+num_current+"/num_next:"+num_next+"/num_max:"+num_max);
	target.parent.gotoAndStop(num_next);
}

JavaScriptの方は書き換えた箇所に、元のASをコメントにして残してあるのでわかると思いますが、まとめると違いは下記の通り。

処理 AS JavaScript
カーソル変更 buttonMode = true cursor = “pointer”
総フレーム数取得 target.parent.totalFrames target.parent.timeline.duration
フレームの数え方 フレームカウントが1から フレームカウントが0から

で、ここが落とし穴だったんですけど、予めStage.enableMouseOver()メソッドを呼出しておかないと、マウスポインタとインスタンスの重なりについてのイベントが起こらないということ。これがないとcursor = “pointer”を設定してもカーソルは変わらない。また・・・

this.win_mc.btn.addEventListener("mouseover", mouseOverHandler);
this.win_mc.btn.addEventListener("mouseout", mouseOutHandler);

のようなマウスイベントも取れません。

こちらの記事が参考になりました。やはり困ったときは野中さん(笑)。

F-site | EaselJSでインスタンスにロールオーバーしたとき指差しカーソルにする

ちなみに私の環境のFlash CCでは、下記のバージョンのCreateJSが使われています。

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="test01_html5.js"></script>

パブリッシュしてもローカルにライブラリがないと思ったら、ネット上のライブラリを参照してるんですね。これも今回初めて気づきました。

【追記その1】2015.3.30
野中さんから指摘を受けましたが、総フレーム数を取得する「target.parent.timeline.duration」は、MovieClipが持っている値ではなくて、「target.parent.timeline」でTweenJSのTimelineクラスを参照して、そのプロパティであるdurationを参照している、ということのようです。

・TweenJS v0.6.0 API Documentation : Timeline > Properties > duration
・EaselJS v0.8.0 API Documentation : MovieClip > Properties > timeline

【追記その2】2015.3.30
パブリッシュするときにCreateJSのライブラリをホスト(ネット上のライブラリ)にするか、ローカル書きだしにするかは「パブリッシュ設定」で変更できます。また書き出しに使用されるバージョンは、Flash CC側で固定になっているそうです。こちらも野中さんからご教授いただきました。

・FN1312001 | Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS | HTML5 : テクニカルノート(FumioNonaka.com)

EaselJS 0.7.0での変更点(その1)

土曜にいまクリ勉強会で、以前のサンプルをEaselJS 0.7.0対応に書き換えてみたので、忘れないようにメモ。

・マウスイベントが、イベントオブジェクトからDisplayObjectに変更された。
・mousemove,mouseupが、pressmove,pressupに変更された。
※(変更前)(変更後)>> ドラッグ出来ます。
・各フィルタがeaseljs-0.6.0.min.jsでは同梱された(個別指定が不要)。
・BoxBlurFilter >> BlurFilter に変更された
※(変更前)(変更後)>> クリックでフィルタがかかります。

その他にもいろいろ変更があるようですが。自分でチェックできてないので、引き続きサンプル修正しながらアップします(予定)。自分で書いてみないと覚えないので。

Toolkit for CreateJSでのパブリッシュされるインスタンス名

Toolkit for CreateJSでFlashからパブリッシュしてみました。で、インスタンス名があるときとないときで同違いがあるのか、書き出されたjsの中身を開いてみたのがこれ(抜粋)。

// stage content:
(lib.tkfc_test03 = function() {
  this.initialize();

  // レイヤー 5
  this.instance = new lib.シンボル1();
  this.instance.setTransform(218,85);

  // レイヤー 4
  this.instance_1 = new lib.walk_mc();
  this.instance_1.setTransform(401.6,204.9,1,1,0,0,0,-0.1,1.4);

  // レイヤー 3
  this.btn_next = new lib.btn_s_next();
  this.btn_next.setTransform(494.5,373.9);
  new cjs.ButtonHelper(this.btn_next, 0, 1, 2, false, new      lib.btn_s_next(), 3);

  // レイヤー 2
  this.instance_2 = new lib.s002();

  // レイヤー 1
  this.circle = new lib.circle();
  this.circle.setTransform(189,201);

       this.addChild(this.circle,this.instance_2,this.btn_next,this.instance_1,this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,531.7,387.4);

レイヤー毎にステージに配置されたものが書き出されていますが・・・

インスタンス名のあるものは、その名前で(例;this.circle、btn_next)
インスタンス名のないものは、固定名で上位レイヤーからの連番(例:this.instance、this.instance_1、this.instance_2

になるようです。で、jsで参照するときはこんな感じに。

function btnClickHandler(e){
  exportRoot.circle.x += 5;
  exportRoot.instance.rotation += 10;
}
※動作環境:MacOX 10.7.6 + Flash CS6 + Toolkit for CreateJS 1.2

東京ひよこの会 (第5回勉強会)に行ってきた

昨日、東京ひよこの会 (第5回勉強会)に行ってきました。第1回、第2回は幹事だったので、それ以来の参加です。
 途中でえらーさんと会ってやや遅れて到着しましたが、もう既に飲んでました(笑)(今回は飲みながら発表という趣旨)。上のリンクを見てもらえばわかりますが、なかなかに参加者も豪華。最後の方は真っ赤な顔の野中さんとか、酔って呂律の回らない一歩手間の池田さんとか、いろいろ貴重なものも見られました(笑)。
飲みながら徐々に砕けた感じで面白かったですが、ざっとまとめるとこんな感じでしょうか?
【いい点】
  • 飲みながらのざっくばらんな雰囲気。
  • (運営的に)懇親会の開示時間や予約などを気にする必要がない。
【悪い点】
  • 全体が長い。飲みながらのせいかか、ひとつずつの発表も後半につれて長くなっている気が。
  • 自分の発表まで、お酒をセーブするのがツライ(笑)。
何人か懇親会参加で後から見えた方もいたので、発表者以外も全員どっかのタイミングで自己紹介的なものがあるとヨカッタかな、と思います。ほぼみんな顔馴染みなのかなとも思ったけど、知らない人にとっては馴染みにくいかもしれないので。
あと「発表」って構えてしまうところもあるので、質問的なことも発表に含めるとか(例えば、○○をやりたいのでこう書いてみたけど、ここのところがうまくいかない等、丸投げでなく具体的な質問)すると、初めて出てみようかな、と思う人にも参加のハードル下がるかなと思ってみたり。
※ひよこの会は「原則各自発表」で、セミナー形式の勉強会ではないので。
私の発表はこんな感じでしたが、やはり発表するために整理するのは勉強になるなとか、対面でやる勉強会は質問もしやすかったり、セミナーにはない刺激がありました。できるだけこういうものには参加しないとなあ、と。
ともあれ、幹事のひろゆきさん小橋さん、おつかれさまでした。
【追記】池田さんがToolkit for Dartを大プッシュだったので、みなさん使いましょう(笑)。

EasleJS+Box2DWebで、床に角度をつける

野中さんのBox2DWeb+EaselJSのサンプルを組んでみた後に、床に角度をつけようとしたらハったのでメモ。要は、Box2Dでの角度=ラジアン、EaselJSでの角度=度数、ってことだったんだけど、コード書こうとして混乱してました。
bodyに角度をつける場合は・・・
 	//Box2Dでは、角度はラジアンで指定
  bodyDef.angle = Math.PI /180 *nAngle;
で、Tickerイベントの中でwolrdからbodyを取り出すときは、body.GetAngle()で取得した角度を度数に変換して・・・
  var body = world.GetBodyList();
  while(body){
     var myObject = body.GetUserData();
      if (myObject) {
        var position = body.GetPosition();
        myObject.x = position.x / SCALE;
        myObject.y = position.y / SCALE;

        //EaselJSでは、角度は度数で指定(ラジアン>度数変換)
        myObject.rotation = body.GetAngle() * (180/Math.PI);

      }
      //---次の剛体を取りだし
      body = body.GetNext();
  }
とやれば、物理計算と画面表示が正しく一致した角度になりました!実際に書いてみたコードはこちらにあります。

実際に角度つけたサンプルを見れば「ふんふん」となるようなことも、自分で書こうとすると意外にはまってしまうのは、経験の浅さかなと。

※事実誤認などありましたら、ご指摘ください。

CreateJSのマウスイベントでのthis参照

引き続き野中さんの記事(EaselJSのマウスクリックとドラッグ&ドロップ)のコードを書いていて、イベントハンドラからthisの参照した時に、何を指すのかがわからなかったのでテストしてみました。

 上の記事で作ったShapeに対して・・・
function overHandler(eventObject) {    console.log("over++++++++++++++++");

console.log("this>>"+this);
console.log("eventObject>>"+eventObject);
console.log("eventObject.target>>"+eventObject.target);

 }
こんな感じで、各イベントハンドラでログを書き出してみた結果です。
onClick
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=click stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onDoubleClick
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=dblclick stageX=104 stageY=51)]
eventObject.target>>[Shape (name=null)]
onPress
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mousedown stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onMouseMove
this>>[MouseEvent (type=mousedown stageX=110 stageY=55)]
eventObject>>[MouseEvent (type=mousemove stageX=503 stageY=253)]
eventObject.target>>[Shape (name=null)]
onMouseUp
this>>[MouseEvent (type=mousedown stageX=98 stageY=46)]
eventObject>>[MouseEvent (type=mouseup stageX=98 stageY=46)]
eventObject.target>>[Shape (name=null)]
onMouseOver
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mouseover stageX=115 stageY=55)]
eventObject.target>>[Shape (name=null)]
onMouseOut
this>>[Shape (name=null)]
eventObject>>[MouseEvent (type=mouseout stageX=119 stageY=66)]
eventObject.target>>[Shape (name=null)]

これらをまとめると・・・

  • onMouseMove,onMouseUpでは、thisは対となるMouseEvent(mousedown)を指す。
  • その他のマウスイベントでは、thisはshapeを指す。
ということのようです。
※easeljs:0.6.0で動作確認。
 
関連リンク