Blowing Through Lines

Recently I worked on a project that required a very customized select box. Instead of a scrollbar the box would auto scroll depending on the mouse position. The items needed to be click-able and also have a rollover state. I came up with the MaskedSlider class to solve my sliding problems. Currently the function for the scrolling is hardcoded. I leave it as an exercise to the reader to implement whatever scrolling animation function the see fit.

download the source here slider demo

The class is fairly easy to use and can be instantiated as a UP_DOWN list or a LEFT_RIGHT list by setting the proper value in the constructor, as shown below in the simple example. Futhermore, you may set a background color, width, height, and the extra hit width and height you would like to allow. The hit length allows the movement to continue even when you have moused off the compnent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

package {
	import TopLevel;
	import hg.paginators.*;
	import flash.events.*;
	public class main extends TopLevel
	{
		private var slider1:MaskedSlider;
		private var slider2:MaskedSlider;
 
		public function main()
		{
			slider1 = new MaskedSlider(195,170,MaskedSlider.UP_DOWN,0xFFFFFF,10,10);
			slider2 = new MaskedSlider(460,42, MaskedSlider.LEFT_RIGHT, 0xFFFFFF,10,10);
 
			this.addChild(slider1);
			this.addChild(slider2);
 
			// add 15 items
			for(var i=0; i<15; i++){
				slider1.addItem( new item,rOver,rOut);
			}
 
			for(var j=0; j< 15; j++){
				slider2.addItem(new item,rOver,rOut);
			}
 
			slider1.x=30;
			slider1.y=30;
			slider2.y=220;
			slider2.x=30;
		}
 
		public function rOver(evt:Event){
			evt.target.alpha=0.7;
		}
 
		public function rOut(evt:Event){
			evt.target.alpha=1;
		}
	}
}

There are some interesting properties in this class as well as a changed event that you can subscribe to. Below are the relevent methods and properties from the class, a brief description of the functionality, and usage examples.

1
2
3
4
5
6
7
8
9
10
11
12
13

//three methods worth using
 
//change background
slider1.background(0xFF99FF);
 
//set speed
slider1.setSpeed(3);
 
//empty contents of the slider so that you can populate with new items
slider1.empty();
//set the default selected item useful for making sure there are no null values passed to other objects
// where 3 is the item number
slider1.setDefaultSelect(3);

So that block took you through some of the useful methods implemented for you. There is one piece of functionality I have left out. The slider is written so that you can select an item from a list of items. Below is a brief example of how you would accomplish this.

1
2
3
4
5
6
7
8
9

// you must subscribe to the change even
slider1.addEventListener(MaskedSlider.EVENT_ON_CHANGE, doSomething);
 
public function doSomething(evt:Event){
//to get the selected item
trace(evt.target.sItem);
//to get the index chosen
trace(evt.target.itemIndex);
}

That should get you started using this class. Although it is far from complete, I think the slider would make a great addition to many projects. Be creative with what you scroll. Remember an item can be any movie clip