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)

How many times have you needed some “component” to achieve the effect of a magnyifing lens on a photo? Well, in my case, almost ever! :)

So i’m developing a simple class in AS3 to achieve this. With the ZoomableImage class, that will be released in a few days, you can:

• Open the greater version of any image using only the constructor
• Decide the dimension of the frame in which the image will be displayed and define where it should appear.
• Decide if you want some kind of cover for the rest of the site buttons to be disabled
• Customize the way it appear

You can check the example down here!

I hope you will like it! Any comment or advice is appreciated.

See you!

Comments

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)

Hi all,
i release today a simple class that will make it easy to generate parallax systems. You won’t have to bother about managing the various levels, anymore.
The thing is just easy as saying “wow”.

Just declare a movieclip on your stage as an instance of ParallaxContainer (you will find the ParallaxContainer.as file in the zip), and then add to the render list the object you want to be moved as you move your mouse. It is a good practise to clean the render list every time you create it :)
Then you have to choose if you want the parallax to move horizontally, vertically or both.
However, as long as you have added every movieclip you need, use the start method and go!

This is the code used in the example. Very easy indeed as you can see.

this.clean();
this.addItem(l3, 10);
this.addItem(l2, 30);
this.addItem(l1, 100);
this.set_mode("H");
this.start();

Just a quick reference to the method addItem. The first paramter is the object to move, the second one is the “wing”. The wing is the quantity of pixels the object will move at the maximum limit of the stage (i.e. extreme left / extreme right)

This is the example.

And this, of course, is the zip package to download. Click here.

Have fun!

Comments (19)