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)

Hi all! This is a simple gallery i created for a project. It is very easy to customize, to change and to understand. It is a good starting point for creating a gallery system for your site. Download and see.

Demo (took the photos from my flickr)
Source code

I hope you enjoy!

Comments (1)

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)

Hi, i am writing this tutorial, to explain how to create a folder in your computer where to put all the libraries you can download from the web.  This is called a class path, i.e. a folder where the flash IDE will search for class definitions. Flash has a default directory where it searches for standard Actionscript 3 classes. Now we are going to create and add a new folder to the Flash class path.

I create a folder on my desktop. I will call it Actionscript for convenience.

Whoa! The folder’s done. Now we have to make Flash IDE recognize it.

We open Flash,  we go for Edit menu >> Preferences.

We select Actionscript in the left list and we access to the subpage where Actionscript preferences are set.

Now we have to click on the Actionscript 3.0 Settings… button.

This will open a new panel where we find:

• a dot
• $(AppConfig)/ActionScript 3.0/Classes

Now we click on the + sign to add an item to the list, that will be empty at first. We select it by clicking on it, and then we click the Browse to path button. We just have to browse to the Actionscript folder I created at the beginning, and then click Ok. The game is done.

Simply restart the flash IDE, and from this moment, every folder or file i will put into that directory, will be recognized by Flash.

I hope this is clear.

Let’s go for an example.

We download the Caurina Tweener Engine for AS3, from here.

We decompress the package to our desktop.  In this case, everything inside this package must be copied to the Actionscript folder we created. In some cases, you will have to copy only particular folders. However, always follow instructions.

So copy the file in the folder. And you have your first library in your class path!

Enjoy!

Comments (4)