Uso del componente Slider

Cuando una instancia de Slider está seleccionada, se pueden utilizar las teclas siguientes para controlarla:

Para obtener más información sobre el control de la selección, consulte la interfaz IFocusManager y la clase FocusManager en la Referencia de ActionScript 3.0 para Flash Professional y en Trabajo con FocusManager .

La previsualización dinámica de cada instancia de Slider refleja los cambios de parámetros realizados durante la edición en el inspector de propiedades o el inspector de componentes.

Puede establecer los siguientes parámetros de edición para cada instancia del componente Slider en el inspector de propiedades o en el inspector de componentes: direction , liveDragging , maximum , minimum , snapInterval , tickInterval y value . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase Slider en la Referencia de ActionScript 3.0 para Flash Professional .

En el ejemplo siguiente se crea una instancia de Slider para permitir que el usuario exprese su nivel de satisfacción con algún evento hipotético. El usuario mueve el componente Slider a derecha o izquierda para indicar un mayor o menor nivel de satisfacción.

1. Cree un nuevo documento de Flash (ActionScript 3.0).

2. Arrastre un componente Label del panel Componentes al centro del escenario.

   • Asígnele el nombre de instancia valueLabel .

   • Asigne el valor 0 por ciento al parámetro text .

3. Arrastre un componente Slider del panel Componentes y céntrelo debajo de value_lbl .

   • Asígnele el nombre de instancia aSlider .

   • Asígnele una anchura de 200

   • Asígnele una altura de 10

   • Asigne un valor de 100 al parámetro maximum .

   • Asigne un valor de 10 a los parámetros snapInterval y tickInterval .

4. Arrastre otra instancia de Label del panel Biblioteca y céntrela debajo de aSlider .

   • Asígnele el nombre de instancia promptLabel .

   • Asígnele una anchura de 250.

   • Asígnele una altura de 22.

   • Introduzca Indique su nivel de satisfacción en el parámetro text .

5. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:

   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. Seleccione Control > Probar película.

   En este ejemplo, a medida que mueve el deslizador de un intervalo a otro, un detector del evento SliderEvent.CHANGE actualiza la propiedad text de valueLabel para mostrar el porcentaje correspondiente a la posición del deslizador.

En el ejemplo siguiente se crea un componente Slider con ActionScript. Se descarga la imagen de una flor y se utiliza el componente Slider para permitir que el usuario pueda aplicar más o menos intensidad de luz a la imagen cambiando su propiedad alpha para crear una correspondencia con el valor de Slider.

1. Cree un nuevo documento de Flash (ActionScript 3.0).

2. Arrastre los componentes Label y Slider del panel Componentes al panel Biblioteca del documento actual.

   Esta acción añade los componentes a la biblioteca, pero no los muestra en la aplicación.

3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente para crear y colocar instancias del componente:

   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. Seleccione Control > Probar película para ejecutar la aplicación.

5. Mueva el deslizador de Slider a la izquierda para disminuir la intensidad de luz de la imagen y a la derecha para aumentarla.