July 11th, 2008
Custom Scrollbar Class using Flash and AS3
I recently wrote this AS3 class to create custom scrollbars in Flash. If you would like to download the example and class, you can do so here.
Copy and paste some text or just hit 'Enter'.
This first class is the document class that imports the CustomScroll class. One thing that you'll want to take note of is how we have to pass a reference of the main timelines stage object to the CustomScroll class constructor. For an explanation as to why we have to do this, check out Senocular's comments on the Kirupa.com forum or google "as3 access to stage and root".
package {
import com.francisdaigle.CustomScroll;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;
public class ScrollerExample extends MovieClip
{
public function ScrollerExample()
{
var example1:CustomScroll = new CustomScroll(stage, track1_mc, output1_txt, up1_btn, down1_btn);
var example2:CustomScroll = new CustomScroll(stage, track2_mc, output2_txt, up2_btn, down2_btn);
var example3:CustomScroll = new CustomScroll(stage, track3_mc, output3_txt, up3_btn, down3_btn);
var example4:CustomScroll = new CustomScroll(stage, track4_mc, output4_txt, up4_btn, down4_btn);
submit_btn.addEventListener(MouseEvent.CLICK, onSubmit);
}
// Submit Button
private function onSubmit(e:MouseEvent):void
{
output1_txt.text = input_txt.text;
output2_txt.text = input_txt.text;
output3_txt.text = input_txt.text;
output4_txt.text = input_txt.text;
}
}
}
And this is the CustomScroll class:
package com.francisdaigle{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.display.Stage;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.text.TextField;
public class CustomScroll extends MovieClip
{
private var _stage:Stage;
private var _track:MovieClip;
private var _input:TextField;
private var _output:TextField;
private var _up:SimpleButton;
private var _down:SimpleButton;
private var dragging:Boolean = false;
private var position:Number = 0;
private var rectangle:Rectangle = new Rectangle(0,0,0,0);
public function CustomScroll(stageRef:Stage, track:MovieClip, output:TextField, up:SimpleButton, down:SimpleButton)
{
_stage = stageRef;
_track = track;
_output = output;
_up = up;
_down = down;
rectangle.height = _track.height;
_track.knob_mc.y = 0;
_track.knob_mc.buttonMode = true;
_up.addEventListener(MouseEvent.MOUSE_DOWN, pressTheUpButton);
_up.addEventListener(MouseEvent.MOUSE_UP, releaseTheUpButton);
_up.addEventListener(MouseEvent.MOUSE_OUT, loseUpFocus);
_down.addEventListener(MouseEvent.MOUSE_DOWN, pressTheDownButton);
_down.addEventListener(MouseEvent.MOUSE_UP, releaseTheDownButton);
_down.addEventListener(MouseEvent.MOUSE_OUT, loseDownFocus);
_track.knob_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
_stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
_output.addEventListener(MouseEvent.MOUSE_WHEEL, onWheel);
}
// Up Button
private function pressTheUpButton(e:MouseEvent):void
{
_track.knob_mc.removeEventListener(Event.ENTER_FRAME, adjustIt);
_track.knob_mc.addEventListener(Event.ENTER_FRAME, holdTheUpButton);
}
private function holdTheUpButton(e:Event):void
{
position = int(position);
if (position > 0) {
position -= 1;
} else if (position < 0) {
position = 0;
}
_track.knob_mc.y = rectangle.height / (_output.maxScrollV - 1) * position;
_output.scrollV = position + 1;
//trace ('p up = ' + position);
}
private function releaseTheUpButton (e:MouseEvent):void
{
_track.knob_mc.removeEventListener(Event.ENTER_FRAME, holdTheUpButton);
}
private function loseUpFocus(e:MouseEvent):void
{
_track.knob_mc.removeEventListener(Event.ENTER_FRAME, holdTheUpButton);
}
// Down Button
private function pressTheDownButton(e:MouseEvent):void
{
_track.knob_mc.removeEventListener(Event.ENTER_FRAME, adjustIt);
_track.knob_mc.addEventListener(Event.ENTER_FRAME, holdTheDownButton);
}
private function holdTheDownButton(e:Event):void
{
position = int(position);
if (position < _output.maxScrollV - 1) {
position += 1;
} else {
position = _output.maxScrollV - 1;
}
_track.knob_mc.y = rectangle.height / (_output.maxScrollV - 1) * position;
_output.scrollV = position + 1;
//trace ('p down = ' + position);
}
private function releaseTheDownButton (e:MouseEvent):void
{
_track.knob_mc.removeEventListener(Event.ENTER_FRAME, holdTheDownButton);
}
private function loseDownFocus(e:MouseEvent):void
{
_track.knob_mc.removeEventListener(Event.ENTER_FRAME, holdTheDownButton);
}
// Drag & Drop
private function dragIt(e:MouseEvent):void
{
_track.knob_mc.startDrag(false,rectangle);
dragging = true;
_track.knob_mc.addEventListener(Event.ENTER_FRAME, adjustIt);
}
private function dropIt(e:MouseEvent):void
{
if (dragging) {
_track.knob_mc.stopDrag();
dragging = false;
}
}
private function adjustIt(e:Event):void
{
position = _track.knob_mc.y / (rectangle.height/(_output.maxScrollV - 1));
if (_track.knob_mc.y >= int(rectangle.height)) {
position = _output.maxScrollV - 1;
}
_output.scrollV = int(position + 1);
//trace ('p drag = ' + position);
}
// Mouse Wheel
private function onWheel(e:MouseEvent):void
{
_track.knob_mc.removeEventListener(Event.ENTER_FRAME, adjustIt);
position += e.delta * -1;
if (position < 0) {
position = 0;
} else if (position > _output.maxScrollV - 1) {
position = (_output.maxScrollV - 1);
}
_track.knob_mc.y = rectangle.height / (_output.maxScrollV - 1) * position;
//trace ('p wheel = ' + position);
}
}
}
If you're new to AS3 or if you're having trouble getting the example to work, make sure to designate a class path to the parent folder of 'CustomScroll.as' called 'classes'. I should also mention that in the examples 1, 3 & 4, the opacity of movie clip 'track_mc' has been set to zero in order that it be made invisible.
Have fun.
1November 12th, 2009 at 7:13 am
Nassar writes:
thank u sooooooooooooooooooo much.