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 ‘gradientSlider.as’ file. But I will also put it here.

Events

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

gradientSliderEvent.GRADIENT_CHANGE

Provdies arrays for gradient Colours, Alphas and Ratios:

colours:Array
positions:Array
alphas:Array

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

Or use the following Method…

Methods

setGradient(mcToApplyTo:MovieClip);

Usage

-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;

addChild(slider);

slider.addEventListener(gradientSliderEvent.GRADIENT_CHANGE, onChange);

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

function onChange(e:gradientSliderEvent):void
{
slider.setGradient(sample);
}

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

[DOWNLOAD]