Today I decided to redo my gradient slider as a reusable class. But first I had to learn better OOP so after watching a quick tutorial over at GotoAndLearn I started moving all the code into separate class files. The main thing I wanted to do was to have the slider dispatch a custom event, and be able to instantiate the slider from ActionScript. Now I have completed the main re-organising and you can down load the class files below. You can see it in action above as well. I have included most of the documentation on how to use it in the ‘’ file. But I will also put it here.


Only 1 event… dispatched whenever anything is changed (colour, position, add or remove colour)


Provdies arrays for gradient Colours, Alphas and Ratios:


Which can be used for custom stuff (See my ParticlePlayground AIR app)

Or use the following Method…




-first copy the customColourPicker folder from the supplied gradientSlider FLA and add to your library. The following code provides an example of how to add sliders and use them:

import com.nemenvisual.ui.gradientSlider.gradientSlider;
import com.nemenvisual.ui.gradientSlider.gradientSliderEvent;

var slider:gradientSlider = new gradientSlider(141,17);

slider.x = 40;
slider.y = 130;


slider.addEventListener(gradientSliderEvent.GRADIENT_CHANGE, onChange);

slider.setGradient(sample); //sample is a MovieClip on the stage called 'sample'

function onChange(e:gradientSliderEvent):void

The gradientSlider is by no means perfect but I do plan to update and improve it soon. Feel free to use it where ever.