org.as3s.Tween Ver2.0
軽量・高機能Tweenライブラリ org.as3s.Tween Ver2.0を公開しました。
Ver1.6から大幅にバージョンアップしています。
▼主な特徴
- 複数パラメータのサポート
- 複数Tweenの一括設定
- Tweenerよりも軽量・高速
- 標準のイベントモデルに準拠（スタート、アップデート、ポーズ、完了）
- ディレイ（一定時間待機）のサポート
- リピートのサポート
- 単純なイージング（一定の割合で目標値に近づく、よく使われるタイプのイージング）のサポート
- 物理的なイージングのサポート
- カスタムイージング関数のサポート
- 目標値にオブジェクトを指定したTweenのサポート
- ワンライナー（１行でTweenの設定から実行まで記述）のサポート
▼使い方
LEADING EDGE DESIGN
LEADING EDGE DESIGNのサイトをリニューアルしました。
このブログではActionScriptに関する情報だけを掲載してきましたが、本業はLEADING EDGE DESIGNでデザインエンジニアとしてプロダクトデザインやユーザーインターフェイスデザインに関わっています。→ About
仕事としてはユーザーインターフェイスデザインのプロトタイピング手法としてFlashを利用することが多いのですが、久しぶりにFlashを使ったウェブサイトを製作しました。
RadioheadのプロモーションがGoogle Codeで行われている理由
RadioheadがGoogle Codeで”House of Cards”のPVを公開しています。
http://code.google.com/creative/radiohead/
このPVはビデオカメラをいっさい使わず、レーザースキャニング技術を使った3Dデータをもとに構成されており、
Flash版のViewerでは、リアルタイムに視点を変えながら再生することもできます。
http://code.google.com/creative/radiohead/viewer.html
さらに、この3DデータはCSV形式で公開されており、誰でもこのデータを使って作品を作ることができるようになっています。
http://code.google.com/p/radiohead/downloads/list
Processingのサンプルはダウンロードできますが、Flash版はなかったので、簡単なサンプルを作ってみました。
サンプルとソースは以下の通り。
Flex BuilderからFlash CS3でムービープレビュー(Mac版)
以前紹介したFlex BuilderからFlash CS3のムービープレビューを起動する方法のMac版です。
（Windows版はこちら）
1. JSFLファイルの作成
Flashオーサリング環境用のJavascript APIであるJSFLを利用して、ムービープレビューを実行するスクリプトを作成します。
以下の1行をテキストエディタなどで.jsfl拡張子を付けて保存します。
fl.getDocumentDOM().testMovie();
このスクリプトは、現在フォーカスされているflaファイルのムービープレビューを実行するものですので、実行時にはプレビューしたいflaファイルをあらかじめ開いておく必要があります。
なお、保存先はどこでも構いませんが今回は他のJSFLファイルが保存されている
/Applications/Adobe Flash CS3/First Run/Javascript
に、MoviePreview.jsfl という名前をつけて保存します。
参考：Adobe Flash JavaScript API の概要
2. 外部ツールの登録
Flex Builderのメニューから「実行」→「外部ツール」→「外部ツール ダイアログを開く」を選択します。
新規の起動構成を作成し、ロケーションに「/user/bin/open」を、引数に作成したJSFLファイルのパスを指定します。
例）
名前：MoviePreview on FlashCS3
ロケーション：/usr/bin/open
引数：”/Applications/Adobe Flash CS3/First Run/Javascript/MoviePreview.jsfl”
以上で、Flex Builderのメニューからムービープレビューを実行することができるようになります。
3. キーボードショートカットの作成
次に、作成した外部ツールにキーボードショートカットを割り当てますが、標準では外部ツールに個別にショートカットを割り当てることはできないようで、「最後に起動された外部ツールを実行」というコマンドにショートカットキー「Ctrl+Enter」を割り当てることにします。
以上で、繰り返しムービープレビューを実行する際には、Flash CS3と同様に「Ctrl+Enter」のショートカットを使うことができるようになります。
GoogleとYahoo!がFlash検索を改善
AdobeがFlashの検索インデックス化技術をGoogleとYahoo!に提供することでFlashコンテンツが検索されやすくなるそうです。
具体的な技術は明らかにされていませんがWebmaster Central blogのQ&Aから気になる点をまとめると、
Q: What about non-textual content, such as images?
At present, we are only discovering and indexing textual content in Flash files.
Also note that we do not index FLV files, such as the videos that play on YouTube, because these files contain no text elements.
インデックスされるのはSWF内のテキスト情報のみ。
画像やFLVファイルはインデックスされない。
Q: What are the current technical limitations of Google’s ability to index Flash?
1. Googlebot does not execute some types of JavaScript. So if your web page loads a Flash file via JavaScript, Google may not be aware of that Flash file, in which case it will not be indexed.
JavaScriptでSWFをロードしているとインデックスされない場合あり。
2. We currently do not attach content from external resources that are loaded by your Flash files. If your Flash file loads an HTML file, an XML file, another SWF file, etc., Google will separately index that resource, but it will not yet be considered to be part of the content in your Flash file.
外部ファイルは個別にインデックスされるが、元のSWFファイルの一部とはみなされない。
とのこと。
まだ開発中とのことですが、逆にJavaScriptや外部ファイルに中途半端に対応されるよりも、HTMLにはインデックスされたいコンテンツを記述して、SWFObjectなどJavaScriptでSWFコンテンツに置き換えられる方がありがたい気もしますが。。。
getter/setterを利用してイベントリスナーを動的に切り替える
AS2では
Mouse.addListener(this);
とすることで、MouseDown時に、this.onMouseDownメソッドが呼ばれるようになります。
trace("default");
}
function test() {
trace("test");
}
Mouse.addListener(this);
this.onMouseDown = test;
などとすることで、addListenerした後でもonMouseDownメソッドを動的に切り替えることができます。
AS3で採用されたイベントモデルでは、addEventLisntener時にイベントリスナーの参照を引数として指定するようになり、また、ほかのモダンな言語と同様、参照渡し（call by reference）ができないため、以下のようなコードではAS2に相当する動的なリスナーの切り替えができません。
trace("default");
}
function test(event:MouseEvent):void {
trace("test");
}
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
onMouseDown = test; //意味なし
上記の例では、addEventListenerで渡されるのは、その時点でのonMouseDownの値なので、その後にonMouseDownの値を変えても意味がありません。
【参考】AS3では関数の引数はすべて値渡し(call by value)である
そこで、下記のようにgetter/setterメソッドを利用することで同じような動作が実現できます。
この例では、最初のMouseDownと2回目以降のMouseDownで呼ばれるリスナー関数が切り替わります。
複数の非同期処理の完了を通知するQueueクラス
複数のファイルを読み込む場合など、複数の非同期処理の進行状況とすべてが完了したタイミングをイベントとして受け取ることができるQueueクラスを公開しました。
サンプルのダウンロードはこちらから。
クラスを公開するというほど大げさなものではありませんが、なるべく標準的なイベントモデルには変更を加えずに、複数イベントの完了を通知することができます。
仕組みはいたって単純で、各イベントを受け取るリスナーを Queue(待ち行列)に追加し、イベントが呼ばれたらQueueから削除しているだけです。
Queueが削除されたタイミングとQueueがなくなったタイミングでイベントが発生し、
queue.length / queue.totalで進行状況を知ることができます。
また、エラー発生時にもリスナーをQueueから削除するようにしておけば、ファイルが一部取得できなかった場合にもQueueの完了イベントを受け取ることができます。
AS3で陥りがちなメモリーリーク
AS3ではガベージコレクションによるメモリ管理が導入されています。
ガベージコレクションとは、簡単に言えば「どこからも参照されなくなったオブジェクトがころあいを見計らって勝手にメモリから消去される」仕組みです。
この「どこからも参照されなくなった」という条件がクセモノで、気をつけないとすぐにメモリーリークの原因になります。
メソッドクロージャとバインドメソッド
「メソッドクロージャ」という用語の使われ方が混乱しているようなので詳しく調べてみました。
イベントリスナーの引数のデフォルト値をnullにする
AS3で採用されたイベントモデルでは、イベントリスナーの引数として必ずEventクラス（またはそのサブクラス）のオブジェクトが渡されますが、場面によっては、イベントで呼び出されるメソッドを直接呼び出したい場合があります。
そのような場合は、引数となるEventオブジェクトのデフォルト値をnullにしておくと便利です。
下の例では、testメソッドを直接実行したり、Timerを使って１秒後に呼び出したりしています。