flash as3 slider

programming flash
1

Hi, I’m building a flash slider in actionscript 3 using a external slider class that I found on the internet. I’m pulling in the position of the slider into a dynamic text filed when the slider first appears but I need the value in the dynamic text field to update everytime the the mouse is down and the cursor moves the position.I then need that number to be saved in a variable so that I can use it again later.

The class that I have used is below:

package com.reintroducing.ui
{
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.geom.Rectangle;
import flash.utils.Timer;
import flash.utils.getQualifiedClassName;
/**
* The SliderUI is a class that allows you to quickly create sliders with tracks without the need to use components.
* There is a "percent" and a "currentValue" property that you can tap into to see what position the slider is at on the track.
* </ p>
* Please note that if you are using the SliderUI on the "y" axis your track's registration point needs to be on the
* bottom (NOT the top) and the slider will go up to raise the value and down to lower it. If you do not pay attention
* to this your slider will be "broken".
* 
* @author Matt Przybylski 
* @version 1.0
*/
public class SliderUI 
{
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
private var _stage:Stage;
private var _track:Sprite;
private var _slider:Sprite;
private var _timer:Timer;
private var _percent:Number;
private var _lowVal:Number;
private var _highVal:Number;
private var _startVal:Number;
private var _currentVal:Number;
private var _range:Number;
private var _axis:String;
private var _changeProp:String;
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
/**
* Creates an instance of the SliderUI with the given parameters. If the $startVal parameter is set to something
* higher than the $highVal or lower than the $lowVal parameter, the $startVal parameter is reset to one of those two values.
* 
* @param $stage The stage that the track and slider are sitting on
* @param $axis The axis that the slider will be used on
* @param $track The track to be used for the slider
* @param $slider The object that will function as the slider
* @param $lowVal A number representing the low value of the slider
* @param $highVal A number representing the high value of the slider
* @param $startVal A number representing the value the slider should start at (default: 0)
* 
* @return void
*/
public function SliderUI($stage:Stage, $axis:String, $track:Sprite, $slider:Sprite, $lowVal:Number, $highVal:Number, $startVal:Number = 0):void
{
this._stage = $stage;
this._axis = $axis;
this._track = $track;
this._slider = $slider;
this._lowVal = $lowVal;
this._highVal = $highVal;
this._startVal = $startVal;
this._changeProp = (this._axis == "x") ? "width" : "height";
this._range = (Math.abs(this._lowVal) + this._highVal);
this._slider.buttonMode = true;
this._timer = new Timer(10);
if (this._startVal < this._lowVal) this._startVal = this._lowVal;
if (this._startVal > this._highVal) this._startVal = this._highVal;
if (this._startVal < 0)
{
this._percent = (Math.abs(this._lowVal + Math.abs(this._startVal)) / this._range);
}
else
{
this._percent = (Math.abs(this._lowVal - this._startVal) / this._range);
}
this._currentVal = (this._lowVal + (this._range * this._percent));
if (this._axis == "x")
{
this._slider[this._axis] = (this._track[this._axis] + (this._percent * this._track[this._changeProp]));
}
else
{
this._slider[this._axis] = (this._track[this._axis] - (this._percent * this._track[this._changeProp]));
}
this.initEvents();
}
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
/**
* Initializes the slider and timer events.
*/
private function initEvents():void
{
this._slider.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
this._slider.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
this._timer.addEventListener(TimerEvent.TIMER, updateInfo);
}
//- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
/**
* Enables the controls of the SliderUI.
* 
* @return void
*/
public function enable():void
{
this.initEvents();
}
/**
* Disables the controls of the SliderUI.
* 
* @return void
*/
public function disable():void
{
this._slider.removeEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
this._slider.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
this._timer.removeEventListener(TimerEvent.TIMER, updateInfo);
}
/**
* Cleans up the SliderUI for garbage collection.
* 
* @return void
*/
public function destroy():void
{
this.disable();
this._timer = null;
}
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
/**
* Starts the dragging of the slider and starts the timer to dispatch percentage.
*/
private function handleMouseDown($evt:MouseEvent):void
{
if (this._axis == "x")
{
this._slider.startDrag(false, new Rectangle(this._track.x, this._slider.y, this._track.width, 0));
}
else
{
this._slider.startDrag(false, new Rectangle(this._slider.x, this._track.y, 0, -this._track.height));
}
this._timer.start();
this._stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
}
/**
* Stops the slider dragging and timer.
*/
private function handleMouseUp($evt:MouseEvent):void
{
this._slider.stopDrag();
this._timer.reset();
this._stage.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
}
/**
* Updates the info of the slider's position.
*/
private function updateInfo($evt:TimerEvent):void
{
this._percent = Math.abs((this._slider[this._axis] - this._track[this._axis]) / this._track[this._changeProp]);
this._currentVal = (this._lowVal + (this._range * this._percent));
}
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
/**
* Returns the percentage of the slider's position on the track, between 0 and 1.
* 
* @return Number
*/
public function get percent():Number
{
return this._percent;
}
/**
* Returns the current value of the slider's position on the track.
* 
* @return Number
*/
public function get currentValue():Number
{
return this._currentVal;
}
//- HELPERS -----------------------------------------------------------------------------------------------
public function toString():String
{
return getQualifiedClassName(this);
}
//- END CLASS ---------------------------------------------------------------------------------------------
}
}

Here is the code that I have in the flash file that contains the slider itself:

//Slider
import com.reintroducing.ui.SliderUI;
var sui:SliderUI = new SliderUI(stage, "x", track_mc, slider_mc, 0, 100, 50);
trace("FIRST PERCENT: " + sui.percent + " & VALUE: " + sui.currentValue);
//Read position value
var currentpercent01;
currentpercent01 = sui.currentValue;
trace (currentpercent01);
//Put percent value in box
currentpercent01text.text = String(currentpercent01 + "%");
stop();

Any ideas? The value 50 appears to start with as that is what I set the slide to show when it first appears but I need it to update each time the slider bar is moved.

2

In updateInfo you should dispatch an event from your slider. Then in the fla, you can listen for that event and update your textfield from there.

You should check to see if your calculated percent is different than the current percent before dispatching this event, though, so you’re not constantly sending out those events, rather, only when percent actually changes.

3

Hi,
Thanks for the reply.
This is where I’m a bit confused as I thought in the class it is automatically updating the info but how do I parse that information to the flash file?
As the updateinfo is a function is it just a matter of me calling that function in the flash file to do what you’re suggesting? That’s what I’m struggling with at the moment.

Sorry I’m a bit of a as3 newbie so I’m really struggling with how to do that so any details would be greatly received.

Thanks

4

updateinfo is being called internally by your SliderUI instance. Its purpose is to update… the info. When you update the info is when the slider changes (or more specifically, in the timer that polls for slider changes). This is regulated by SliderUI so it makes sense that its the one making the call.

Your fla doesn’t need to call this since, 1) it doesn’t know when to call it, and 2) at any time it decides to call it, the information would already be up to date. What your fla wants is to get the data that gets updated in that function call, not necessarily to make the call itself. Additionally it wants to know when that data gets updated so it can update its own stuff based on those changes. To make this happen, you need to make SliderUI act more like a Timer object.

A Timer will cycle through time periods and let you know when those time periods occur. It does this by dispatching an event. You can then capture that event (Timer.addEventListener(TimerEvent.TIMER, ... )) and do things that you want to attach to that timing.

Your fla wants to know when the slider data changes, so it would want to do something like sui.addEventListener(Event.CHANGE, ...) to be able to react to that. And it can. You just need to set up SliderUI to dispatch that CHANGE event for your fla to pick up. And that’s pretty easy. All you need to do is add

dispatchEvent(new Event(Event.CHANGE));

in SliderUI when your data changes.

Now, as I said before, its better if you’re not constantly throwing this out there every time you’re looking for updates, rather only when an update occurs. So here’s what I’m suggesting updateInfo should look like:

private function updateInfo($evt:TimerEvent):void
{
var currPercent = Math.abs((this._slider[this._axis] - this._track[this._axis]) / this._track[this._changeProp]);
if (currPercent !== this._percent)
{
   this._percent = currPercent;
   this._currentVal = (this._lowVal + (this._range * this._percent));

   // let anyone listening know that the value has changed.
   dispatchEvent(new Event(Event.CHANGE));
}
}

In the fla you would then add something like

sui.addEventListener(Event.CHANGE, handleSliderChange);

function handleSliderChange(event:Event):void
{
   currentpercent01text.text = sui.currentValue + "%";
}
5

Thanks so much. That makes sense.