Box2DFlashAS3


ActionScript3.0のオープンソースライブラリ「Box2DFlashAS3」
の紹介をGIGAZINEさんでやっていたのでリンク。

Directorでは以前から高度な物理シミュレーションが可能だったのだけれど
商業的なコンテンツで活用された例を知りません。
物理シミュレーションがどのように商業利用されていくのか、行かないのか
興味津々です。

motion scriptセミナー

基本的な動きのActionScriptや、実用的でないマニアックな作品の
説明だけでは良くないので、比較的シンプルで仕事にも応用できそうな
サンプルソースも準備しています。
今回、お申し込みできなかった方は11/17にも開講する予定ですので是非。
申込み受付は10/20 10/22を予定しています。

<画面をクリックすると星や泡がでます>




AS3日記(9):マウスイベント3

マウスイベントの最終回はMOUSE_LEAVEのお話し。
あと、説明し忘れていたボタンモードについても後半に。
 
●MOUSE_LEAVE
===================================
タイトルにマウスイベントと書いたものの、マウスイベントではないかも
しれません。だって下のようにMouseEventではなく、Eventのプロパティに
なっているから…。

stage.addEventListener(Event.MOUSE_LEAVE, this.leaveFunc);

 
そしてもう一つポイント、このMOUSE_LEAVEはstageオブジェクトにしか
利用できません。そしてAS2のことと異なり、stageのsは小文字な事に注意してください。

stage.addEventListener(Event.MOUSE_LEAVE, this.leaveFunc);

1つ前のエントリーのサンプルではこれを大文字にしていて、
なんで機能しないんだろー、と考え込んでしまいました…。
 
 
 
 
●buttonMode
===================================
AS2ではマウスイベントを設定すれば、カーするがムービークリップに重なったとき
に指カーソルに変わりますが、AS3では変わりません。buttonModeプロパティを
trueにすることで変わるようになります。
また、これはマウスイベントを設定しなくてもtrueにすると指カーソルになります。
あと、これをtrueにするとAS1の時からある_upや_overといったフレームラベルを
利用できるようになりますが、これらは授業ではやりませんので、説明しません。
 

this.buttonMode = true;

  
さて、次回はAS2でいうところのアタッチの仕方について説明
しようとおもいます。

MOUSE_LEAVEサンプル



AS3で新しく追加されたMOUSE_LEAVEイベントのサンプル。
AS2まででのコンテンツではカスタムカーソルを利用しようとしても
Flash外にカーソルが出たときにFlash内にカーソルが置き去りにされて
しまうのだけれど、AS3のMOUSE_LEAVEを利用すれば
Flash外にカーソルが出たときにイベントがとれるので、
そのタイミングでvisibleをfalseにしてしまえばカーソルが残ることが
ありません。

これを利用すればインターフェイス講座のときに説明した、
ハイドメニューやプルダウンメニューの問題解決にもつながります。

sandy



結構前に試したまま放置していたファイルを見つけたのでアップ。
sandyというFlash用の3Dライブラリ群?なオープンソースを使ってます。
マウスの位置に合わせて、球体が回転するよ。

AS3日記(8):マウスイベント2

さて、今回も引き続きマウスイベントのお話し
では早速

●dragOver、dragOut
===================================
授業の時にも、これを設定しないとバグが発生することを確認しましたが
前回のマウスイベントのリストには、これに該当するものがありません。
ではどうするかというと、

イベントが発生したときに実行するカスタムメソッドでは
引数を受け取らなければなりませんでした、この引数はイベントオブジェクトと
呼ばれるもので、いろいろなプロパティを持っているというのは
enterFrameの回で説明しました。enterFrameの時は使えそうなものが
ないと書いたのですが、マウスイベントでは使えるプロパティがあります。

それがbuttonDownプロパティです。その名の通り、イベントが発生したときに
ボタンが押されているか否かを教えてくれます。

this.addEventListener(MouseEvent.ROLL_OVER , this.clickFunc);
function clickFunc (eo) {
var test = eo.buttonDown
trace(test);
}

これを利用すれば、dragOut、dragOverとrollOver、rollOutで動作を分けることができます。

授業ではdragOut、dragOverを設定しましたが、これはボタンが押されているときは
rollOver、rollOutのイベントが発生しないためでした。しかし、AS3では
ボタンが押されていようが、いまいがROLL_OVER、ROLL_OUTのイベントが発生するので、
この点に関しては楽になりました。

●releaseOutside
===================================
releaseOutsideもAS3ではなくなってしまいました。
そして、これを実現するのは、ちょっとややこしいです。ですが、
色々な方が、すでに対応策を公開していますので、そちらを参照してください。

まず考え方はこちらのブログを参照
fladdict.net

そしてサンプルを公開している方のブログ
52sec.org
 
 
 
●MOUSE_MOVE
===================================
AS2のmouseMoveに相当するものですが、設定されたムービークリップの領域にあるときしか
なので、これもreleaseOutsideの時と同様にstageにaddEventListenerする手法を用いないと
AS2のようなことは出来なくなってしまいました…。
 
 
 
●ダブルクリック
===================================
WEBコンテンツの作成においては、ほとんど使う機会はないと思います。
でもWEBアプリの作成なんかになると使うのでしょうね、きっと。

ダブルクリックのイベントは通常発生しないようになっています。
ダブルクリックのイベントを利用する場合はAS日記(5)で紹介した
doubleClickEnabledをtrueにする必要があります。

doubleClickEnabled = true;

doubleClickEnabledをfalseにしたときにダブルクリックをすると
クリックイベントが2回発生します。
doubleClickEnabledをtrueにしたときにダブルクリックをすると
ダブルクリックイベントが1回発生し、あとクリックイベントも1回発生します。
 
 
 
こんな感じで、かなりマウスイベントの扱いが変わってしまいました…。
さてマウスイベントについて調べていたら、
Stageオブジェクトにだけ利用できるMOUSE_LEAVEというイベントを見つけたので
2回で終わる予定でしたが、次回もマウスイベントにしたいと思います。
 
 

AS3日記(7):マウスイベント

な、なんだかAS3のマウスイベントが大変なことになっています…

AS3になって色々変わるのは覚悟していたのですが、
ちょっと戸惑いを隠せません…。なので2回に分けて
マウスイベントについてお話ししたいと思います。

まずはイベントリスナーの構文ですが、これはenterFrameのときと同じです
しかしenterFrameの時はEventだった部分がMouseEventに変わる点に注意です。

this.addEventListener(MouseEvent.CLICK , this.clickFunc);
function clickFunc (eo) {
trace(“click”);
}

そして上のActionScriptでお気付きかもしれませんが
イベント名がCLICKになっています。
AS3では扱えるイベントが下記のように変更されているのです。

イベントの名前が異なるくらいなら、何でもないのですが
僕がショックなのは、微妙にAS2の仕様と異なるのです。
僕にとっては悪い方に変わった感じです…。

とりあえずマウスイベントを下に列挙します。

CLICK
MOUSE_UP
MOUSE_DOWN
DOUBLE_CLICK

ROLL_OUT
ROLL_OVER
MOUSE_OUT
MOUSE_OVER

MOUSE_MOVE
MOUSE_WHEEL

でもって、各イベントについてのお話し

● CLICKとMOUSE_UPの違い
CLICKはクリックで、授業で説明したとおり
「ムービークリップを押して離したとき」に発生します。
それに対しMOUSE_UPは「ムービークリップを押したかどうかに関わらず
ムービークリップ上でマウスが放されたとき」発生します。

つまり、ムービークリップでない別のところで押してから、
ムービークリップ上に移動して離すと、CLICKのイベントは発生しませんが
MOUSE_UPイベントは発生します。
これに関しては問題はないです。releaseの代わりにCLICKを使えば
よいでしょう。

● ROLL_OUTとMOUSE_OUT(ROLL_OVERとMOUSE_OVER)
これはムービークリップが入れ子にしないと違いが分かりません。
ROLL_OUTはAS2のrollOutとだいたい同じです(違う点は下の方で解説)。
MOUSE_OUTは入れ子にされた中のムービークリップに重なるときにも発生します。
例えば、授業ではbuttonMCの中にtextMCのインスタンスを配置したりしましたが、
MOUSE_OUTのイベントはこのtextMCにも反応してしまうのです。
たとえtextMCにActionScriptを何も書いていなくてもです。
まぁ、上記のとおりなら、これまでのrollOverやrollOutの代わりにROLL_OUT、ROLL_OVER
を利用すればよいのですが…

●微妙に仕様が変わったROLL_OUT/ROLL_OVER
OSも含めインターフェイスのボタンは、そのボタン以外の場所でpressされ
pressしたままの状態で、ボタンにロールオーバーしても反応しないのが本来の仕様(だと思います)
そしてAS2のrollOverやrollOutも、そのような仕様になっています。
しかし!AS3ではボタンでないところからpressしたままロールオーバーしても
イベントが発生してしまうのです。
まぁ、普通に操作している分には全く違和感はないのですが。
なんだか気になるので、ネットで調べたけれど、だれも気にしていないみたい。

じゃぁということで、現在公開されているAS3コンテンツのボタンで
上記のようなROLL_OVERの仕様をどうしているのか調べてみた…。
EYE-PROJECT BY KDDI
うん。そのまんまAS3のROLL_OVERの仕様です。
ということで、僕もとりあえず気にしないことにします。

AS3日記(6):イベント(enterFrame)

今回はイベントについて。
AS2ではイベントを扱う仕組みとして、イベントハンドラ、イベントハンドラメソッド
イベントリスナーがありましたが、AS3ではイベントリスナーしか利用できません。

まずは手っ取り早く構文を確認しましょう。利用するActionScriptはaddEventListenerです。

addEventListener(利用したいイベント, イベント発生時に実行するカスタムメソッド);

AS2ではフリーサイズFlash講座のときにイベントリスナーを利用しましたが、
こちらはaddListenerでした。これとは別物ですので気を付けてください。

そして今回はenterFrameについてですから「利用したいイベント」はenterFrameになり、
ActionScriptでは以下のように書きます。

Event.ENTER_FRAME

2番目の引数には、イベントが発生したときに実行するカスタムメソッドを書きます。
ですから、総合すると以下のような構文になります。

addEventListener(Event.ENTER_FRAME, moveRoutine);

そして、AS3ではイベントが発生したら実行するカスタムメソッドにも注意が必要です。
実行したいカスタムメソッドには引数を1つ設定しなければ
なりません。

function moveRoutine (eo) {
this.x +=1;
}

引数はイベントオブジェクトとよばれるものなので、引数名はeo(event object)
としました。この引数を設定し忘れるとエラーになってしまいます。
ちなみに、この引数の値の型はEventですので、型指定をして書くとeo:Eventになります。
上の項目で、指定したenterFrameはイベントオブジェクトのプロパティだったりします。

引数であるからには、どのような値が入っているのか気になるので調べると
(ヘルプでENTER_FRAMEを調べると載っています)あまり使う必要が
なさそうなのばかりです。

結局、AS2ではイベントハンドラメソッドを利用していたものがAS3では
イベントリスナーに変わっただけです。
構文を覚え、引数を書き忘れないようにすれば入門基礎講座を修了した
方であれば問題なく利用できると思います。

それでもって、次回はマウスイベントについて
お話ししたいと思います。

追記
今回のActionScriptでオブジェクト指定を省略しないと以下のようになります。
※今回のActionScriptではthisを省略しても問題ありません。

this.addEventListener(Event.ENTER_FRAME, this.moveRoutine);

AS3:なんとなくパーティクル



ActionScript3の練習、パーティクルをとばしてみる。
ついでに画面をクリックすると演出が変わります。