Web Designing に Tweener の記事を書きました

Web Designing (ウェブデザイニング) 2008年 09月号 [雑誌]

そろそろ書店に出ているはずの「Web Designing 9月号」に、AS3 ユーザー御用達のトゥイーンライブラリ「Tweener（トゥイーナー）」を覚えよう！的な記事を書かせていただきました。

前号と合わせてお読みいただき、「ActionScript ライブラリごっさ便利！」と発見していただけると嬉しいです。

ライブラリ初心者の方対象です

既に使ってる人には今更感漂うかもしれませんが、AS3 で Tweener 使ってる人は全 Flash 制作者の 10% ぐらい（僕の勘）かなと思ってますので、そういう記事にしました。でも最後のページの一覧表（ドキュメントの左メニューの順に全網羅した）の中には結構知らなかったメソッドもあったりしましたよ。僕は。

AS2 版ダウンロードサンプルも用意しました

本誌記事は AS3 での解説になっていますが、Tweener は AS2 版もあって使い方はほとんど一緒です。でもライブラリデビューの人はちょっとの違いもドキドキものなので、ダウンロードサンプルは AS3&FlashCS3 版と、AS2&Flash8 版の両方を用意してあります。Tweener ライブラリ自体もバージョンごとに同梱してあるので、本当に fla ファイルをパブリッシュするだけで動く（はず）です！

お蔵入り記事

今回も誌面スペースの都合でカットされた記事があります。ご本人様達に許諾いただいてたのですがすいません。内容的にはやや高度テクニックなので興味ある方はどうぞ～。

---

エキスパート：達人のTweenerテクニック

Tweenerライブラリの中身を調べてしまうような達人は、オンラインドキュメントでは紹介されていないような機能を使ったり、独自にTweenerをカスタマイズしたりしています。ありがたいことにそのノウハウはネット上に公開されていますので、Tweenerをよりディープに学びたい人は参考にしてみましょう。

スペシャルプロパティの変則的な活用法（haricot_ando氏）

標準のActionScriptではフィルタや色の変化（ColorMatrixFilter）はコーディングに数行必要なため、「設定が面倒」な部類に入ります。Tweenerのスペシャルプロパティとtime:0設定を活用することで、例えば明度を変化させる場合、スペシャルプロパティをimportした後：

ColorShortcuts.init();
Tweener.addTween(mc1,{_brightness:1.8,time:0});

これで「いきなり明度1.8（最大値2.55）の状態」にできます。同様にして色相やぼかしフィルタなども簡単に適応させることができるのですが、なんとなくtime:0が気持ち悪いということで、さらに簡単に：

ColorShortcuts._brightness_set(mc1, 1.8, [ ]); 
// この手法だとinitも省略できる。第３引数の空配列は省略できないので記述しておくこと。

という使い方があることが、ライブラリのasファイル（クラス）本体を調べると分かります。

カスタムトランジションをビジュアル設定（Saqoosha氏）

Tweener で予め用意されている41パターンのトランジションタイプ以外の動きが欲しい時はトランジションを自作することになります。その際、イージングのための数式が必要になりますが、数式だと動きのイメージが掴めません。上図の一覧表のようなグラフを編集してイージング具合を設計できると便利です。 FuseKitという別のトゥイーンライブラリから提供されている「カスタムイージングエディタ」を利用してグラフ上で編集、そこから数値を取得し、transitionParamsを使ってTweenerに流用する方法が紹介されています。

素敵なイージングが作れたらregisterTransitionを利用して命名し、「オレ流トランジションタイプ」として使いまわすのも一興です。

Tweener 拡張で、MovieClipをMatrixで変形をできるようにした。（fladdict氏）

Tweenerを拡張してMatrix変形ができるように改造。registerSpecialProperty系メソッドを活用してTweenerのスペシャルプロパティと同様の使い勝手になるように工夫して設計されており、ライブラリユーザによる機能向上＆フィードバックという好例。

---

最後に：Tweener いいですよ。

ライブラリは他人様が作ったコードなので使うのは不安だなぁという人もいるかもしれません（たしかに Papervision3D とかは仕様がどんどん変更されてフォローするのが大変だったりもします）。
プログラムが得意な人は自力でトゥイーンエンジンを用意したりしていますが、そうでない人はせめて「そういうもんがあって、こういうことができるんだなぁ。」程度に、さわりだけでも体験しておいたほうがいいんじゃないかと思っています。

私事ですが、今回の Tweener と似たような機能を持つ AS2 用のトゥイーンライブラリ「FuseKit」というのがあるのですが、これを知って僕は ActionScript が一層好きになりました（好きじゃなかったらこんなに関連エントリ書きませんｗ）。そして今なら AS2,AS3 両方で利用できる Tweener を習得しておくといいのではないかと思います。Tweener に関しては既に全世界で使われまくりで、そんなに大規模な仕様変更はないと思うので、今月号の使い方を習得しとけば結構末長く重宝するはずですー。

追記：本誌最後の表は、一度 Tweener のドキュメントを日本語訳したのち、僕なりに分かりやすいように書き直しているのですが、校了後、肝心の翻訳データを紛失してしまいました。あ～あ。

追記２：Tweener は addTween 内で繰り返し設定ができないのがやや残念ポイントかな。自分でフォローしてやればできるんだけど、addCaller みたく count でループ回数定義できたらいいのに。（ちなみに FuseKit はスコッと設定できる。）