Wednesday, October 6, 2010

Using the Slider component: Part 2

In this tutorial we will learn how to create a simple application with a slider using pure AS3.

Here's what we will be making today:


Firstly we import the necessary classes:

import fl.events.SliderEvent;
import fl.controls.Slider;
import flash.display.Sprite;

Creating the slider itself. The values must range from 0 to 1, becuase transparency (what we're changing) is ranged 0-1 in all objects, including Sprites (which we're using).

var mySlider:Slider = new Slider();
addChild(mySlider);
mySlider.move(20,50);
mySlider.width = 150;
mySlider.maximum = 1;
mySlider.minimum = 0;
mySlider.snapInterval = 0.01;
mySlider.tickInterval = 0.1;
mySlider.liveDragging = true;
mySlider.value = 0.5;

Creating the sprite and drawing the rectangle:

var mySquare:Sprite = new Sprite();
mySquare.graphics.beginFill(0x0000FF);
mySquare.graphics.drawRect(200,15,190,70);
mySquare.graphics.endFill();
addChild(mySquare);
mySquare.alpha = mySlider.value;

Finally, the Listener with the function:

mySlider.addEventListener(SliderEvent.CHANGE, updateText);

function updateText(SliderEvent):void
{
mySquare.alpha = mySlider.value;
}

And the full code:

import fl.events.SliderEvent;
import fl.controls.Slider;
import flash.display.Sprite;

var mySlider:Slider = new Slider();
addChild(mySlider);
mySlider.move(20,50);
mySlider.width = 150;
mySlider.maximum = 1;
mySlider.minimum = 0;
mySlider.snapInterval = 0.01;
mySlider.tickInterval = 0.1;
mySlider.liveDragging = true;
mySlider.value = 0.5;

var mySquare:Sprite = new Sprite();
mySquare.graphics.beginFill(0x0000FF);
mySquare.graphics.drawRect(200,15,190,70);
mySquare.graphics.endFill();
addChild(mySquare);
mySquare.alpha = mySlider.value;

mySlider.addEventListener(SliderEvent.CHANGE, updateText);

function updateText(SliderEvent):void
{
mySquare.alpha = mySlider.value;
}

That was pretty simple, wasn't it?

Thanks for reading!

No comments:

Post a Comment