« Flash: Human Locator
Rasterbator »


Flash: Slider Class

June 16th, 2005 by Luis

I quite like to use sliders in order to test some values while I'm developing a project.

Until now I've been using a simple draggable movie clip with startDrag() method. Sometimes I need to ease or jump to certain values, so this morning I decided to create a simple and quick Slider class with simple ease and jump to value features.

Sample swf:

[flash]http://www.blog.lessrain.com/wp-content/upload/slider.swf,400,250[/flash]

Click here to download the files

PLAIN TEXT
Actionscript:
  1. /**
  2. * @class:   Slider
  3. * @author:  luis@lessrain.com
  4. * @version: 1
  5. * -----------------------------------------------------
  6. *  Basic Slider
  7. * ----------------------------------------------------
  8. */
  9. import utils.Proxy;
  10. import animation.Tween;
  11. import mx.events.EventDispatcher;
  12.  
  13. class Slider
  14. {
  15.     private var _knobMC:MovieClip;
  16.     private var _baseMC:MovieClip;
  17.    
  18.     private var _orientation:String;
  19.     private var _prop1:String;
  20.     private var _prop2:String;
  21.    
  22.     private var _left:Number;
  23.     private var _right:Number;
  24.     private var _top:Number;
  25.     private var _bottom:Number;
  26.    
  27.     private var pointX:Number;
  28.     private var pointY:Number;
  29.    
  30.     private var mouseListener:Object;
  31.    
  32.     private var _initValue:Number;
  33.     private var _endValue:Number;
  34.     private var _range:Number;
  35.    
  36.     private var _value:Number;
  37.     private var _tw:Tween;
  38.    
  39.     //private static var overColor:Number=0xFFFFFF;
  40.     //private static var outColor:Number=0xFF004C;
  41.    
  42.     // required for EventDispatcher:
  43.     private var dispatchEvent:Function;
  44.     public var addEventListener:Function;
  45.     public var removeEventListener:Function;
  46.    
  47.     function Slider ()
  48.     {
  49.         EventDispatcher.initialize (this);
  50.     }
  51.    
  52.     public function init (knob:MovieClip, base:MovieClip, orientation:String, initValue:Number, endValue:Number):Void
  53.     {
  54.         _knobMC = knob;
  55.         _baseMC = base;
  56.        
  57.         _knobMC._x=_baseMC._x;
  58.         _knobMC._y=_baseMC._y;
  59.        
  60.         _orientation = orientation;
  61.        
  62.         if(_orientation == 'horizontal'){
  63.             _prop1='_x';
  64.             _prop2='_width';
  65.         }else{
  66.             _prop1='_y';
  67.             _prop2='_height'
  68.         }
  69.        
  70.         _initValue = initValue;
  71.         _endValue = endValue;
  72.         _range = (_endValue - _initValue);
  73.        
  74.         //_knobMC.onRollOver = Proxy.create (this, colorize, _knobMC, overColor);
  75.         //_knobMC.onRollOut = Proxy.create (this, colorize, _knobMC, outColor);
  76.         _knobMC.onPress = Proxy.create (this, startDrag);
  77.         _knobMC.onRelease = _knobMC.onReleaseOutside = Proxy.create (this, stopDrag);
  78.        
  79.         _baseMC.onPress = Proxy.create (this, findValue);
  80.        
  81.         _knobMC.useHandCursor = _baseMC.useHandCursor = false;
  82.        
  83.         _tw=new Tween(_knobMC);
  84.        
  85.         redrawLimits ();
  86.     }
  87.    
  88.     private function startDrag ():Void
  89.     {
  90.         //colorize (_knobMC, overColor);
  91.         _tw.abort();
  92.        
  93.         pointX = _knobMC._x - _xmouse;
  94.         pointY = _knobMC._y - _ymouse;
  95.  
  96.         mouseListener = new Object ();
  97.         mouseListener.onMouseMove = Proxy.create (this, updatePos);
  98.         Mouse.addListener (mouseListener);
  99.         dispatchEvent ({target:this, type:'onStartDrag'});
  100.     }
  101.    
  102.     private function stopDrag ():Void
  103.     {
  104.         Mouse.removeListener (mouseListener);
  105.         //colorize (_knobMC, outColor);
  106.         dispatchEvent ({target:this, type:'onStopDrag'});
  107.     }
  108.     private function updatePos ():Void
  109.     {
  110.         var pos:Number = getCurrentValue (_knobMC[_prop1]);
  111.         if (pos>= _initValue && pos <= _endValue) {
  112.            
  113.             _knobMC._x = Math.round (_xmouse + pointX);
  114.             _knobMC._y = Math.round (_ymouse + pointY);
  115.            
  116.         }
  117.        
  118.         checkLimits ();
  119.         updateAfterEvent ();
  120.     }
  121.    
  122.     private function checkLimits ():Void
  123.     {
  124.         if (_knobMC._x <_left) _knobMC._x = _left;
  125.         if (_knobMC._x> _right) _knobMC._x = _right;
  126.         if (_knobMC._y <_top)_knobMC._y = _top;
  127.         if (_knobMC._y> _bottom) _knobMC._y = _bottom;
  128.        
  129.         updateValue();
  130.  
  131.     }
  132.     public function redrawLimits ():Void
  133.     {
  134.         _left = _baseMC._x;
  135.         _top = _baseMC._y;
  136.         _right = Math.round((_baseMC._x + _baseMC._width) - (_knobMC._width));
  137.         _bottom = Math.round((_baseMC._y + _baseMC._height) - (_knobMC._height));
  138.        
  139.         checkLimits ();
  140.     }
  141.     public function getTarget ():MovieClip
  142.     {
  143.         return _knobMC;
  144.     }
  145.    
  146.     public function getCurrentValue (ref:Number):Number
  147.     {
  148.         return (Math.round ((ref - _baseMC[_prop1]) / (_baseMC[_prop2] - _knobMC[_prop2]) * _range + _initValue));
  149.     }
  150.    
  151.     public function jumpTo (val:Number):Void
  152.     {
  153.         _knobMC[_prop1] = translateValToPos(val)
  154.         checkLimits ();
  155.     }
  156.    
  157.     private function translateValToPos():Number
  158.     {
  159.         var tempValue:Number;
  160.        
  161.         if(arguments.length){
  162.             tempValue=arguments[0];
  163.         }else{
  164.             tempValue=(_orientation == 'horizontal')? getCurrentValue(_xmouse-(_knobMC[_prop2]/2)):getCurrentValue(_ymouse-(_knobMC[_prop2]/2));
  165.         }
  166.         return (Math.round (_baseMC[_prop1] + (((_baseMC[_prop2] - _knobMC[_prop2]) * (tempValue - _initValue)) / (_range))));
  167.     }
  168.    
  169.     private function findValue():Void
  170.     {
  171.         _tw.abort();
  172.         _tw.deleteProperties();
  173.         _tw.duration=250;
  174.         _tw.setTweenProperty (_prop1, _knobMC[_prop1], translateValToPos());
  175.         _tw.addEventListener('onProgress',Proxy.create(this,checkLimits));
  176.         _tw.addEventListener('onComplete',Proxy.create(this,checkLimits));
  177.         _tw.easingFunction=mx.transitions.easing.Regular.easeIn
  178.         _tw.start();
  179.  
  180.     }
  181.    
  182.     private function updateValue():Void{
  183.  
  184.         dispatchEvent ({target:this, type:'onChange', value:getCurrentValue (_knobMC[_prop1])});
  185.     }
  186.    
  187.     private function enableItems(enable:Boolean):Void
  188.     {
  189.         _knobMC.enabled=_baseMC.enabled=enable;
  190.     }
  191.    
  192.     private function colorize (mc:MovieClip, col:Number):Void
  193.     {
  194.         var c:Color = new Color (mc);
  195.         c.setRGB (col);
  196.     }
  197.  
  198. }


This entry was posted on Thursday, June 16th, 2005 at 12:20 pm and is filed under AS2, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to “Flash: Slider Class”

  1. Peter Witham Says:
    June 16th, 2005 at 3:01 pm

    This looks rather interesting I’ll have to play around with it. Thanks for taking the time to share with the world :)

  2. Emiliano Velasco Says:
    June 16th, 2005 at 3:10 pm

    Hi Luis,
    Very good class!! :)

    The link to download sample files is broken :(

    greetings,
    Emiliano Velasco

  3. Luis Says:
    June 16th, 2005 at 3:13 pm

    The link works now.

  4. Oli Shaw Says:
    June 16th, 2005 at 3:20 pm

    The download link works for me.

    Gtreat work, this is some thing that always useful

  5. Bruno Says:
    June 16th, 2005 at 5:54 pm

    great!
    well done m8

    hey, I sent you an email to your hotmail account, hope to see you 2nite ;)

    cheers

  6. Gabby Says:
    August 16th, 2005 at 10:08 am

    :) cool

  7. Gabby Says:
    August 16th, 2005 at 10:42 am

    :) cool, but… :-\ why dont use rolls the mouse wheel. :(

  8. bert Says:
    September 16th, 2005 at 8:28 am

    very cool stuff !

  9. Alex Le Says:
    November 9th, 2005 at 9:32 am

    nice code but as i’m still quite new to AS (i’ve done some OOPS programming but not that intensive in flash), so if you can write a little more details on your approach, it’ll be really beneficial to everyone else.

    I’m actually writing my own slider from scratch but it seems like i’ll have to spend quite a bit of time to get things working, but my code will for sure be ugly and case-specific, impossible to reuse. that’s why i’d like to see your approach to improve my design — hope you don’t mind :)

    cheers and thanks for sharing!

  10. Leonardo Faria Says:
    May 10th, 2006 at 2:49 pm

    hi
    anybody have the sample files?
    thanks.

  11. f-r-a Says:
    October 20th, 2007 at 12:29 pm

    thx, http://www.avu.cz/chronik
    f-r-a

Leave a Reply