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

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)

Macromedia (and Adobe) Flash Player let you pass parameters to use in your movies at runtime. If you need a swf to change something basing on parameters passed to it, then you can use the FlashVars to pass the custom variables to it, and have them straight in your root timeline.

If you use the FlashVars, the variables will be created in the movie before the first frame is displayed.

The format is very important. You have to use querystring format to pass variables, as you do for importing variables or sending variables through GET method. Let’s see an example.

id_user=245&username=jack&age=15

As you can see, i’m sending three values, id_user, username and age, right in my movie. Maybe i want to change a dynamic greeting for my user, or something else.

Anyway. The format of the string is a set of name=value combinations separated by ‘&’. Special and/or non-printable characters can be escaped with a ‘%’ followed by a 2 digit hexadecimal value. A single blank space can be represented using the ‘+’ sign. For more information about URL encoding, please check URL Encoding: Reading special characters from a text file

You simply have to add the FlashVars property to your Object and Embed tags in the html used to host the movie.

Object Tag Example:

<PARAM NAME=FlashVars VALUE="id_user=245&username=jack&age=15">

Embed Tag Example:

<EMBED src="display.swf" FlashVars="id_user=245&username=jack&age=15" … (other parameters)></EMBED>

In this way, the variables will be available in your swf. Try it out!

See you soon!

Comments