Slider コンポーネントの使用

フォーカスを取得している Slider インスタンスでは、次のキーを使用した操作が可能です。

フォーカスの制御について詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の IFocusManager インターフェイスと FocusManager クラス、および FocusManager の操作 を参照してください。

ライブプレビューでは、オーサリング時にプロパティインスペクターまたはコンポーネントインスペクターで各 Slider インスタンスのパラメーターに加えた変更が反映されます。

プロパティインスペクターまたはコンポーネントインスペクターで Slider コンポーネントの各インスタンスに設定できるオーサリングパラメーターは、 direction 、 liveDragging 、 maximum 、 minimum 、 snapInterval 、 tickInterval および value です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。これらのパラメーターに設定できる値については、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の Slider クラスを参照してください。

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

1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

2. Label コンポーネントをコンポーネントパネルからステージの中央にドラッグします。

   • インスタンス名を valueLabel にします。

   • text パラメーターに値 0 percent を割り当てます。

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 プロパティを変更します。

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. スライダーのサムを左右に移動して、イメージの明暗を調整します。右側に移動するほど明るくなります。