2010年3月16日火曜日

Flash CS4  Sliderコンポーネントを使った回転表示

FlashCS4 のスライダーコンポーネントを使ったサンプル。
簡単にサンプルのようなガジェットが作れてしまいます。

ModelはいつものごとくShadeのTullyさん(笑)。
スライダを動かすと、回転します。
正確には被写体の周りをカメラが回って写した画像を表示しているのですが。



サンプル作成手順
①被写体の周りを回って写した連番画像を用意。
今回のサンプルは3DCG作成ソフトのShade10.5で作成しました。
3DCGソフトでの作り方はこのブログの範囲外なのでここでは省略します。

興味のある方は3DCG関連の姉妹サイトで記事を書きましたのでそちらを見てください。

関連記事(姉妹サイト)
(Shade10.5)被写体の周りを公転させながら撮影する

②FlashCS4のメニューで
 ファイル>読み込み>ステージに読み込み
より連番画像を読み込んでステージ上に配置。

③コンポーネントパネルから、Sliderをドラッグしてステージに配置。
スライダのインスタンス名を設定します。
今回はインスタンス名を「OrbitingSlider」としました。このインスタンス名を使ってAS3.0スクリプトで操作します。


④ステージに配置したスライダを選択し、コンポーネントインスペクタパネルを開いて、各種パラメータを設定します。

今回は、以下のように設定しました。
liveDragging true
(スライダのドラッグをスクリプトで検出するか)
maximum 72
(読み込んだ画像が72フレーム分なので最大値を72にセット)
minimum 1
(Flashのタイムラインのスタートフレームが1なので最小値をセット)
snapInterval 1
(スライダを動かしたときvalueが変化する間隔、今回はフレームを増やすので1ずつ変化させる)
value 1 
(スライダの初期値)


③Flash CS4のタイムライン上に(出来ればActionScript用のレイヤーを用意して)以下のスクリプトを記述します。

//Flashムービーの開始時、再生を始めず、ストップさせる。
//動きはスライダでコントロール
stop();
//スライダを操作するためのクラスファイルをimport
import fl.controls.Slider;
import fl.events.SliderEvent;

//スライダの位置やサイズをセット
OrbitingSlider.setSize(200,0);
OrbitingSlider.x=60;
OrbitingSlider.y=420;
//スライダのノブが動いたら検出するイベントリスナーの登録
OrbitingSlider.addEventListener(SliderEvent.CHANGE,onSliderChanged);


function onSliderChanged(event:SliderEvent) {
//スライダの値のフレームへ移動する。
gotoAndStop(OrbitingSlider.value);
}

0 件のコメント:

コメントを投稿