wonderfl CHECKMATE Saqoosha amateurs
2009/09/15 21:02 - AS3.0
第三回 wonderfl CHECKMATE さくーしゃさん篇アマチュアーは Gradation クラスを使って、自分なりの虹を表現することが課題となっています。
で。
もうすでに k3lab さんの club ageHa@wonderfl や Euphoria、あるいは break さんの fork など、美麗な作品が出ているので、今さら儂の出る幕なんぞないワケじゃが、ちょっと思いついたのでそれを実体化してみることにしましたよ。
くだらん思いつきではありますが、これを作るに当たっては二つの課題をクリアする必要がありまして、これも勉強ってことでコードを組んでみました。
まずはできたものの提示から。
これは一体何なのかというと、タイトルにあるとおり、BetweenAS3 の各トゥイーンの見える化です。
トゥイーンの見える化なら Tweener の Transition Types みたいな線グラフの方が分かりやすいだろ、というご意見はごもっともなれど、そこはスルー(いやーただの思いつきですからして)。
BetweenAS3 は次の11個のトランジションタイプが定義されています(org/libspark/betweenas3/easing/ 参照。物理とカスタムは性質が異なるので除く)。
- Linear
- Sine
- Quad(Quadratic)
- Cubic
- Quart(Quartic)
- Quint(Quintic)
- Expo(Exponential)
- Circ(Circular)
- Elastic
- Back
- Bounce
そして各タイプは以下の4つのビヘイビアを備えています。このあたりのタイプおよびビヘイビアは Tweener と同じですね。
- easeIn
- easeOut
- easeInOut
- easeOutIn
で、トランジションタイプのうち Linear を除いた10個のトランジションの各ビヘイビアによって作られるグラデーションがどのような見栄えになるのか見てみよう、というのが今回のテーマです。
仕様としては、いちどきに、一つのトランジションタイプの4ビヘイビアに加えて比較用の Linear.linear でステージを5個に縦分割し、それぞれが描くグラデーションを表示するものとします。
前述したようにトランジションタイプは10個あるので、これを切り替えられるようにしなければらないわけで、ここで課題として以下の二つが浮上します。
- トランジション切り替えのインターフェース
- トランジション切り替えの方法
1. についてはコンポーネントのコンボボックスを使うのが一般的でしょう。 wonderfl で使用できるライブラリとしてコンポーネントがあったはずだから、それをちょっと学習してみよう。
2. についてはいろいろな解決法があると思います。
例えば、要素をオブジェクトとした配列を作ってそれで管理するとか。 その要素というのは以下のような、key としてトランジションタイプ名、value として各ビヘイビアを格納した配列とする、みたいな。
その方法だと、割と簡単に管理できそうだけど、easeIn とか easeOut とか、違う機能のためとはいえ、同じ文字列を何度も何度も打たなきゃならないんで、なんかちょっと釈然としない。
どうしようか考えていたら思い出しましたよ。文字列をクラスとして扱うことができるビルトインクラスがあったことを。
たしか flash.utils にあったはずと livedoc を見てみたら、ありました getDefinitionByName。 今回はこれを使ってみたいと思います。
そんなわけで今作品の課題は以下の二つの習得に決定!
- minimalcomps
- getDefinitionByName
minimalcomps ですが…… コンボボックスが無いっ! じゃあ仕方ないわね。代わりにラジオボタンを使います。minimalcomps のラジオボタンの使い方は wonderfl から先賢のお知恵を拝借しました(code search "bit101 RadioButton" でリストアップされたコードを拝見)。
getDefinitionByName については、LiveDoc の当該項目を参考にしました。
が、一つ釈然としない、というか、おかしいです。 getDefinitionByName は String からクラス参照が取得できるもののはず。 コーディングは間違っていないと思うんですが、以下のようなエラーが出ます(Bounce のラジオボタンを選んだとき)。
しかし投稿したコードのメンバプロパティの一番最初に書いた easingVector を定義すると、なぜか正常に動きます。 こんなの本来必要ないし、実際どこからも参照されていないのになぁ。
謎だ。どなたかご存じの方がおられましたら、ご教授いただけたら幸い。
やっぱここは「ActionScript 3.0 エラーアーカイブス コンパイルエラー・コンパイラ警告・ランタイムエラーの解法」買った方がイイのかしら。