Flash CS3には,定番のパーツをムービー内で使用できる「コンポーネント」が用意されています。前回に続いて,代表的なコンポーネントの使い方を学習しましょう。


 前回の記事では,Flash CS3にあらかじめ用意されている「fl」パッケージのコンポーネントのうち,基本的なコンポーネントをいくつかピックアップして使用方法をご紹介しました。今回は,コンテンツの操作に役立つコンポーネントをピックアップし,具体的なコードの記述方法をご紹介します。

図1●コンポーネントを使って作成したお絵かき
図1●コンポーネントを使って作成したお絵かき
(クリックすると別ウィンドウでムービーを表示します)

 図1は,Flash CS3に用意されているコンポーネントを使ったお絵かきムービーです。線の太さの変更や,色の指定等,一から作るとなるとちょっと大変そうなこのムービーも,コンポーネントを使用すれば,比較的簡単に組み上げることができます。ムービーで使用しているコンポーネントの使い方を見て行きましょう。

NumericStepperとSlider

 まずは,「決められた範囲から,任意の数値を選択させたい」場合に便利な「NumericStepperコンポーネント」と,「Sliderコンポーネント」から見て行きましょう。前々回ご紹介したように,コンポーネントを使用したい場合には,[ライブラリ]パネル内に,使用したいコンポーネントを,[コンポーネント]パネルからドラッグ&ドロップして準備しておきます。

図2●[ライブラリ]パネルに準備する
図2●[ライブラリ]パネルに準備する
[画像のクリックで拡大表示]

 このとき,[コンポーネント]パネルは,ショートカットキー[Ctrl]+[F7]で表示されます。ちなみに,コンポーネントのパラメータをオーサリング環境上で設定できる,[コンポーネントインスペクタ]パネルは,[Shift]+[F7]キーで表示されます。「コンポーネント関係は,[F7]キー周りで表示する」ようにできているわけですね。

 さて,それでは実際にコンポーネントを配置し,使ってみましょう。まずはNumericStepperコンポーネントです。NumericStepperコンポーネントは,一つのテキストボックスと,そこに表示される数値を増減させるためのボタンがセットになったコンポーネントです。マウス操作で数値を細かく指定したい場合に便利です。

 NumericStepperコンポーネントでは,次のような各種プロパティで選択させたい値の範囲や,ボタンを押した時の値の変化量を設定します。

表1●NumericStepperコンポーネントのプロパティ(抜粋)
プロパティ 説明
valueプロパティ ステッパーの値を取得/設定
maximumプロパティ 最大値を設定
minimumプロパティ 最小値を設定
stepSizeプロパティ ボタンを押した時の変化する値の量を設定

 また,よく使うイベントは,なんといってもchangeイベントでしょう。他のコンポーネントでもうおなじみですが,値が変化した時に発生します。

表2●NumericStepperコンポーネントのイベント(抜粋)
イベント 説明
change 値が変更された時に発生
イベント定数:Event.CHANGE
イベントオブジェクト:Event