企業が好む表現対策 Part2<吹出し>::Roundtrip Clip(JP)
企業は吹き出しを使った表現方法が好きだ。吹き出しはクリックすると膨らむ、ロールオーバーすると膨らむ。マウスによるインタラクションは様々であるが、吹き出しが膨らみ終わるとコピーを表示するというのは共通している。そして何らかのインタラクションによって吹き出しを閉じる。なぜなら画面内を吹き出しで覆って他の表現要素を邪魔してしまうからである。吹き出しを使う場合、画面内の要素に対してスペースが小さいことが多く、すべての吹き出しを出したままにすることはない。今回は前回に引き続いて国内企業サイトでよく使われる表現を考えていく。
グラフィックを決定する
吹き出しは大きさが大きくなり最大の大きさになった時にコピーが表示される。閉じるときはその逆再生と考えて良いのでフレーム構成は３０フレームなら正方向だけのアニメだけでよくなる。３０フレーム目にコピーを配置すれば完全に膨らんだ状態でのみコピーが表示することができる。
今回のサンプルを実行すると以下のようになる。sourceもダウンロードでき、さらに動いているサンプルは記事の最後にある。
RoundtripClipクラス
この吹き出しをムービークリップを拡張してRoundtripClipクラスとすることから始める。この表現で使われる動きを整理すると、このグラフィックには膨らむ、縮む、止まるという３つの動作があることがわかる。これを実現するメソッドは、expand()、compress()、stop()とする。この３つの動作には、フレームの再生、逆再生、停止の３つの動作が起きることがわかる。正方向から逆方向再生、またその逆が出来るreverse()メソッドも追加してある。
この吹き出しをムービークリップを拡張してRoundtripClipクラスとすることから始める。この表現で使われる動きを整理すると、このグラフィックには膨らむ、縮む、止まるという３つの動作があることがわかる。これを実現するメソッドは、expand()、compress()、stop()とする。この３つの動作には、フレームの再生、逆再生、停止の３つの動作が起きることがわかる。正方向から逆方向再生、またその逆が出来るreverse()メソッドも追加してある。
public function expand():Void{ state.expand(); } public function compress():Void{ state.compress(); } public function stop():Void{ state.stop(); } public function reverse():Void{ state.reverse(); }
状態を作成する
stateは、以下の４つのメソッドを持つことを保証している。
interface IState { function expand():Void; function compress():Void; function stop():Void; function reverse():Void; }再生、逆再生、停止の３つの状態があるので、上のIStateを実装した３つのクラスが必要になる。下のForwardStateでは、expand()が実行されている状態、すなわち再生中なので、expand()メソッドを呼び出す必要はなく空になっている。再生中に呼び出せるのは、吹き出しを縮める、停止、反転だけである。
public function ForwardState(rtc:RoundtripClip) { this.rtc = rtc; rtc.onEnterFrame = function(){ var next:Number = this._currentframe + 1; var end:Number = this._totalframes; if(next > end){ this.stop(); }else{ this.gotoAndStop(next);//最終フレームまで再生ヘッドを移動する } }; } public function expand():Void{}//何もしない(今は再生状態なので) public function compress():Void{ rtc.setState(rtc.getBackwardState());//逆再生状態にする } public function stop():Void{ rtc.setState(rtc.getStopState());//停止状態にする } public function reverse():Void{ rtc.setState(rtc.getBackwardState());//逆再生状態にする(今は再生状態なので) }ForwardState.as
丸が膨張した状態でクリックすると停止し、再度クリックすると縮小可能になる。