I have seen that many of you get stuck while changing the as3 scrollbar class to handle the movement of horizontal content, so I decided to post an article to explain how to change the scrollbar code to do it.

It is very easy indeed. You simply have to change all y occurrencies to x, and all height to width.

This is the code.

package
{

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.BlurFilter;
	import flash.geom.Rectangle;
	import flash.display.Shape; 

	public class HScrollbar extends MovieClip
	{

		private var _dragged:MovieClip;
		private var _mask:MovieClip;
		private var _ruler:MovieClip;
		private var _background:MovieClip;
		private var _hitarea:MovieClip;
		private var _blurred:Boolean;
		private var _XFactor:Number; 

		private var _initX:Number; 

		private var minX:Number;
		private var maxX:Number;
		private var percentuale:uint;
		private var contentstartx:Number;
		private var bf:BlurFilter;

		private var initialized:Boolean = false; 

		public function HScrollbar(dragged:MovieClip, maskclip:MovieClip, ruler:MovieClip, background:MovieClip, hitarea:MovieClip, blurred:Boolean = false, xfactor:Number = 4 )
		{
			super();
			_dragged = dragged;
			_mask = maskclip;
			_ruler = ruler;
			_background = background;
			_hitarea = hitarea as MovieClip;
			_blurred = blurred;
			_XFactor = xfactor;
		}

		public function set dragged (v:MovieClip) {
			_dragged = v;
		}

		public function set maskclip (v:MovieClip) {
			_mask = v;
		}

		public function set ruler (v:MovieClip) {
			_ruler = v;
		}

		public function set background (v:MovieClip) {
			_background = v;
		}

		public function set hitarea (v:MovieClip) {
			_hitarea = v;
		}		

		private function checkPieces():Boolean {
			var ok:Boolean = true;
			if (_dragged == null) {
				trace("SCROLLBAR: DRAGGED not set");
				ok = false;
			}
			if (_mask == null) {
				trace("SCROLLBAR: MASK not set");
				ok = false;
			}
			if (_ruler == null) {
				trace("SCROLLBAR: RULER not set");
				ok = false;
			}
			if (_background == null) {
				trace("SCROLLBAR: BACKGROUND not set");
				ok = false;
			}
			if (_hitarea == null) {
				trace("SCROLLBAR: HITAREA not set");
				ok = false;
			}
			return ok;
		}

		public function init(e:Event = null):void {
			if (checkPieces() == false) {
				trace("SCROLLBAR: CANNOT INITIALIZE");
			} else { 

				if (initialized == true) {
					reset();
				}
				bf = new BlurFilter(0, 0, 1);
				this._dragged.filters = new Array(bf);
				this._dragged.mask = this._mask;
				this._dragged.cacheAsBitmap = true; 

				this.minX = _background.x; 

				this._ruler.buttonMode = true; 

				this.contentstartx = _dragged.x; 

				_ruler.addEventListener(MouseEvent.MOUSE_DOWN, clickHandle);
				stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandle);
				stage.addEventListener(MouseEvent.MOUSE_WHEEL, wheelHandle, true);
				this.addEventListener(Event.ENTER_FRAME, enterFrameHandle); 

				initialized = true;
			}
		}

		private function clickHandle(e:MouseEvent)
		{
			var rect:Rectangle = new Rectangle(minX, 0, maxX, 0);  //_background.y - (_ruler.height / 2), minX, 0, maxX);
			_ruler.startDrag(false, rect);
		}

		private function releaseHandle(e:MouseEvent)
		{
			_ruler.stopDrag();
		}

		private function wheelHandle(e:MouseEvent)
		{
			if (this._hitarea.hitTestPoint(stage.mouseX, stage.mouseY, false))
			{
				scrollData(e.delta);
			}
		}

		private function enterFrameHandle(e:Event)
		{
			positionContent();
		}

		private function scrollData(q:int)
		{
			var d:Number;
			var rulerX:Number; 

			var quantity:Number = this._ruler.height / 5; 

			d = -q * Math.abs(quantity); 

			if (d > 0) {
				rulerX = Math.min(maxX, _ruler.x + d);
			}
			if (d < 0) {
				rulerX = Math.max(minX, _ruler.x + d);
			}

			_ruler.x = rulerX; 

			positionContent();
		}

		public function positionContent():void {
			var upX:Number;
			var downX:Number;
			var curX:Number;

			/* thanks to Kalicious (http://www.kalicious.com/) */
			this._ruler.width = (this._mask.width / this._dragged.width) * this._background.width;
			this.maxX = this._background.width - this._ruler.width;
			/*	*/ 		

			var limit:Number = this._background.width - this._ruler.width; 

 			if (this._ruler.x > limit) {
				this._ruler.x = limit;
			} 

			checkContentLength();	

			percentuale = (100 / maxX) * _ruler.x;

			upX = 0;
			downX = _dragged.width * 1.01 - (_mask.width / 2);

			var fx:Number = contentstartx - (((downX - (_mask.width/2)) / 100) * percentuale); 

			var currx:Number = _dragged.x;
			var finalx:Number = fx; 

			if (currx != finalx) {
				var diff:Number = finalx-currx;
				currx += diff / _XFactor; 

				var bfactor:Number = Math.abs(diff)/8;
				bf.blurX = bfactor/2;
				if (_blurred == true) {
					_dragged.filters = new Array(bf);
				}
			}

			_dragged.x = currx;
		}

		public function checkContentLength():void
		{
			if (_dragged.width < _mask.width) {
				_ruler.visible = false;
				reset();
			} else {
				_ruler.visible = true;
			}
		}

		public function reset():void {
			_dragged.x = contentstartx;
			_ruler.x = 0;
		}

	}
}

This is an example of what can be accomplished.

Soon i will release a scrollbar content that handles horizontal and vertical scroll. It will have some new features that you will like at most.

Until then, see you soon! :)

Comments (3)

I was not satisfied with the previous release of the scrollbar. It was too difficult to adapt and use, and it left very little space for upgrading.

So i made a new scrollbar class, with advanced features, with the precious help of Jack Kalish. Please stop by his site at www.kalicious.com, he was very helpful for this new version of the Scrollbar Class. Thanks Kali!

By the way. These are some of the new features.

• It is now possible to use every movieclip on the stage as the components of the scrollbar. You are not forced anymore to give your object defined instance names. They can be whatever you want.
• The class is now instantiated using the New Scrollbar constructor, that takes several parameters, leaves you more freedom and gives you the possibility to choose if you want the dragged movieclip to be blurred on dragging and the velocity of the movement.
• The class now releases errors on init() if you did not declare the right components and tells you what components are missing.
• The ruler (handler) length is now proportional to the length of the object dragged, as well as mousewheel velocity.

You do not need to instantiate the class by rightclick -> linkage, anymore.

The right way to use the class is now:

import Scrollbar;
var sc:Scrollbar = new Scrollbar(text, maskmc, scrollbar.ruler, scrollbar.background, area, true, 6);
sc.addEventListener(Event.ADDED, scInit);
addChild(sc);
function scInit(e:Event):void {
sc.init();
}

This is the example i made. As suggested by Kalish, i used a Input text to change runtime the length of the text box (to check for the change in the length of the scrollbar ruler)

And here you can download the class zip package, with an example inside.

Enjoy! And as usual, any comment is welcome!

Comments (39)

Some of you may wonder how to activate my as2 scrollbar class to navigate the dynamic list i posted yesterday.

It is quite simple. Download the package here, unpack it and put the scrollbar.as file in the project folder.

Now just paste the scrollbar movieclip in the dynamic xml list fla, take a few minutes to change it to fit the design, and the change the buildList function as below.

function buildList() {

[...]

downBtn.onRelease = function () {
offset += 1;
adjustList();
}

upBtn.onRelease = function () {
offset -= 1;
adjustList();
}

scrollbar.setDragged(this.container); // the dragged object
scrollbar.setRuler(scrollbar.ruler); // the ruler
scrollbar.setBackground(scrollbar.sfondo); // the scrollbar background
scrollbar.setMaschera(this.maschera); // the mask used in the fla
scrollbar.setTweenSpeed(25); // Tween velocity for dragging
scrollbar.setMouseWheelAdd(10); // Mouse wheel increment
scrollbar.init(); // start!

}

Now test the swf and be amazed!

Hope this will help some of you! Enjoy!

Comments (3)

Hi to all!

You can find online my latest work, made in Egolab, for Activision.

Guitar Hero is the site about all the products of the Guitar hero brand, featuring games in which you play a fake guitar, trying to reproduce the skills of famous and wicked guitar men.

I developed some useful actionscript stuff that took my time but it is well worth it! In the site you can find a great news and events management concept, a extras gallery working with desaturation (made with caurina tweener) and a bunch of playlists, loading external content in xml and even preloading the real mp3.

Some other people worked on this project. So thanks for the collaboration to Alessandro Balasco (cms developing), Marco Fresta (art direction and design), Alessandro Reali (video making and adapting), Alberico Bartoccini (content animation and organization).

Visit the site if you want to experience the hard work we made. I hope you like it.

See you

Comments (1)