Gradient Slider V1
13 years ago
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)
[cc lang=”actionscript3″]
gradientSliderEvent.GRADIENT_CHANGE
[/cc]
Returns(?) 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:
[cc lang=”actionscript3″]
setGradient(mcToApplyTo:MovieClip);
[/cc]
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:
[cc lang=”actionscript3″]
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);
}
[/cc]
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]
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”https://www.purplesquirrels.com.au/blogstuff/gradientslider/gradientSlider.swf” width=”650″ height=”280″ targetclass=”alignnone”]
[/kml_flashembed]
