Fixed a bunch of bugs for the ZoomableImage class I posted some time ago.

You can find the old post here

Enjoy!

Comments

Hi everyone!

Today I release a new class, as previewed a few days ago.

The ZoomableImage class let you load an image and display it in a frame box of predefined dimensions. You can view this image only for a certain part, at the start. But you can click and drag it to view it all.

The class has several features, so you can view the docs to know them all. It is very customizable. And it is very easy to use.

Just by adding these few lines of code,

var zImage:ZoomableImage = new ZoomableImage("http://www.fuoridalcerchio.net/source/zoomableimage/image.jpg", {framewidth: 300, frameheight: 300, framealpha: 0.2, framecolor: 0x000000, overlay:true, zooms: [100, 50, 25]});
zImage.x = 200;
zImage.y = 200; 

addChild(zImage);

you can use the class in every project.

Enjoy! Critics and advices are welcome, as usual!

DOWNLOAD CLASS ZIP
ZOOMABLE IMAGE CLASS DOCS

Comments (3)

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