Sliders

Sliders allow users to select a value within a constrained range. A common example is a volume bar. This entry will demonstrate how to use the Slider ActionScript class.

This class requires two images: slide bar and slide handle.

1. Right click and save this image () as slide_bar.png in the src directory. On my machine, the full path is:
   /home/kca/workspace/hello_world/src/
   
2. Right click and save this image () as slide_handle.png in the src directory.
   
3. Copy and paste this XML into asset.xml in the src directory
4. At the command prompt, run this command in the src directory:
   

   swfmill simple asset.xml asset.swf

5. This will rebuild the asset library. A new SWF file should now exist in the src directory called asset.swf.
   
6. Add a new ActionScript Class in the oas2 subfolder called Slider. Copy and paste this code. Save changes.
7. Double click source file Application.as to edit
8. Above the class constructor:
   

   private var _slider_value_text_field:TextField ;

9. At the bottom of function init, add this code:
   

   var my_slider:Slider = Slider.create(this, "my_slider", 150, 300 ,
       "asset_slider_bar" , "asset_slider_handle") ;
   my_slider.set_maximum(150) ;
   my_slider.set_value(25) ;
   
   createTextField("_slider_value_text_field", getNextHighestDepth(), 225, 300, 325, 400) ;
   
   my_slider.onValueChange = function(value:Number) {
   
   instance._slider_value_text_field.text = "" + Math.round(value) ;
   
   } ;  // end my_slider.onValueChange = function(value:Number)
   

10. Save the file, and the SWF file is automatically rebuilt by Eclipse. Click to see the new slider. Drag the slider to see the label update with the current slider value.