Flash CS3 ドキュメンテーション

ActionScript 3.0 コンポーネントガイド > UI コンポーネントの使用 > Slider の使用 > Slider を使用したアプリケーションの作成

Slider を使用したアプリケーションの作成

次の例では、Slider インスタンスを作成し、ユーザーが、ある特定の事項に関する満足度を回答できるようにしています。ユーザーは Slider を左右に移動させることで、回答する満足度の値を低下または増加させることができます。

Slider コンポーネントを使用してアプリケーションを作成するには :

1. 新しい Flash ファイル (ActionScript 3.0) ドキュメントを作成します。
2. Label コンポーネントを [コンポーネント] パネルからステージの中央にドラッグします。
   • インスタンス名を valueLabel にします。
   • text パラメータに、値として「0 パーセント」を割り当てます。
3. Slider コンポーネントを [コンポーネント] パネルからドラッグし、value_lbl の下の中央に配置します。
   • インスタンス名を aSlider にします。
   • 幅 (W) として 200 を割り当てます。
   • 高さ (H) として 10 を割り当てます。
   • 値として 100 を maximum パラメータに割り当てます。
   • 値として 10 を snapInterval パラメータと tickInterval パラメータの両方に割り当てます。
4. 別の Label インスタンスをライブラリからドラッグし、aSlider の下の中央に配置します。
   • インスタンス名を promptLabel にします。
   • 幅 (W) として 250 を割り当てます。
   • 高さ (H) として 22 を割り当てます。
   • text パラメータとして「満足度を入力してください」と入力します。
5. [アクション] パネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。

   import fl.controls.Slider;
   import fl.events.SliderEvent;
   import fl.controls.Label;
   
   aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);
   
   function changeHandler(event:SliderEvent):void {
       valueLabel.text = event.value + "percent";      
   }
   

6. [制御]-[ムービープレビュー] を選択します。

   この例では、スライダのサムを特定の間隔位置から別の場所に移動したときに、SliderEvent.CHANGE イベントのリスナーによって valueLabel の text プロパティを更新し、サムの位置に対応するパーセンテージを表示しています。

次の例では、ActionScript を使用して Slider を作成します。この例では、花のイメージをダウンロードし、ユーザーが Slider を使用してそのイメージの明暗を調整できるようにしています。具体的には、Slider の値に応じてイメージの alpha プロパティを変更します。

ActionScript を使用して、Slider コンポーネントを使用するアプリケーションを作成するには :

1. 新しい Flash ファイル (ActionScript 3.0) ドキュメントを作成します。
2. Label コンポーネントと Slider コンポーネントを [コンポーネント] パネルから現在のドキュメントの [ライブラリ] パネルにドラッグします。

   これにより、アプリケーションには表示されませんが、コンポーネントはライブラリに間違いなく追加されます。

3. [アクション] パネルを開いて、メインタイムライン内でフレーム 1 を選択し、次のコードを入力してコンポーネントインスタンスを作成し、配置します。

   import fl.controls.Slider;
   import fl.events.SliderEvent;
   import fl.controls.Label;
   import fl.containers.UILoader;
   
   var sliderLabel:Label = new Label();
   sliderLabel.width = 120;
   sliderLabel.text = "< Fade - Brighten >";
   sliderLabel.move(170, 350);
   
   var aSlider:Slider = new Slider();
   aSlider.width = 200;
   aSlider.snapInterval = 10;
   aSlider.tickInterval = 10;
   aSlider.maximum = 100;
   aSlider.value = 100;
   aSlider.move(120, 330);
   
   var aLoader:UILoader = new UILoader();
   aLoader.source = "http://www.flash-mx.com/images/image1.jpg";
   aLoader.scaleContent = false;
   
   addChild(sliderLabel);
   addChild(aSlider);
   addChild(aLoader);
   
   aLoader.addEventListener(Event.COMPLETE, completeHandler);
   
   function completeHandler(event:Event) {
       trace("Number of bytes loaded: " + aLoader.bytesLoaded);
   }
   
   aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);
   
   function changeHandler(event:SliderEvent):void {
             aLoader.alpha = event.value * .01;
   }
   

4. [制御]-[ムービープレビュー] を選択してアプリケーションを実行します。
5. スライダのサムを左右に移動して、イメージの明暗を調整します。右側に移動するほど明るくなります。

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000467.html

コメントの追加