Zoom with Flash CS3

[Flep]

Yes, you guessed, the BitmapData class again
This class is a real jewel if you love Flash.
As already seen before in " BitmapData and the draw method " , we"ll find out that this method is a lot more than meets the eye.
Browsing the net, I often come across applications which ( some better some worse ) simulate a Zoom to an image and/or text.
It"s actually very interesting to compare different techniques, so after a couple of scripting hours I create a class"
I create an FLA and save it as " zoom.fla " , I create a MovieClip which will act as a pre-loader ( in this case I use the same pre-loader of the article " How to load an external swf with Flash CS3 ").
Then I create the Document Class and save it as " Zoommando.as " :

package
{
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.display.Loader;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Matrix;
	import flash.geom.Rectangle;
	
	public class Zoommando extends MovieClip
	{
		private var barra:Shape;
		private var bottone:Sprite;
		private var urlImmagine:String;
		private var loader:Loader;
		private var grill:BitmapData;
		private var image:Bitmap;
		private var image2:Bitmap;
		private var rest:Number=.5;
		private var xx:Number;
		private var rest2:Number;
		private var matrice:Matrix;
		
		public function Zoommando()
		{
			init();
		}
		
		private function init():void
		{
			info_mc.visible=false;
			matrice=new Matrix();
			grill=new BitmapData(100,100);
			image2=new Bitmap();
			disegnaBarra();
			disegnaBottone();
			caricaImmagine();
		}
		
		private function disegnaBarra():void
		{
			barra=new Shape();
			barra.graphics.moveTo(0,0);
			barra.graphics.lineStyle(1,0x0);
			barra.graphics.lineTo(100,0);
			addChild(barra);
			barra.x=stage.stageWidth/2;
			barra.y=20;
		}
		
		private function disegnaBottone():void
		{
			bottone=new Sprite();
			bottone.graphics.moveTo(-10,-10);
			bottone.graphics.beginFill(0xFF6600,1);
			bottone.graphics.lineTo(10,-10);
			bottone.graphics.lineTo(10,10);
			bottone.graphics.lineTo(-10,10);
			bottone.graphics.lineTo(-10,-10);
			bottone.graphics.endFill();
			addChild(bottone);
			bottone.x=barra.x;
			bottone.y=barra.y;
			bottone.buttonMode=true;
		}
		
		private function caricaImmagine():void
		{
			urlImmagine='http://www.flepstudio.org/swf/pic_big.jpg';
			var request:URLRequest=new URLRequest(urlImmagine);
			loader=new Loader();
			initListeners(loader.contentLoaderInfo);
			loader.load(request);
		}
		
		private function initListeners(dispatcher:IEventDispatcher):void 
		{
			dispatcher.addEventListener(Event.OPEN,inizia);
			dispatcher.addEventListener(ProgressEvent.PROGRESS,inCaricamento);
			dispatcher.addEventListener(Event.COMPLETE,completato);
			dispatcher.addEventListener(IOErrorEvent.IO_ERROR,seErrore);
		}
		private function inizia(event:Event):void 
		{
			info_mc.visible=true;
		}
		private function inCaricamento(event:ProgressEvent):void 
		{
			var n:uint=(event.bytesLoaded/event.bytesTotal)*100;
			info_mc.loading_txt.text='Loading '+n.toString()+' %';
			var nn:uint=(event.bytesLoaded/event.bytesTotal)*info_mc.border_mc.width;
			info_mc.fill_mc.width=nn;
		}
		private function completato(event:Event):void 
		{
			info_mc.visible=false;
			addChild(loader);
			loader.y=45;
			initBitmap();
		}
		private function seErrore(event:IOErrorEvent):void 
		{
			trace("ioErrorHandler: "+event);
		}
		
		private function initBitmap():void
		{
			var scale:Number=50;
			scale/=100;
			var scaleMatrix:Matrix=new Matrix();
			scaleMatrix.scale(scale,scale);
			var bitdata:BitmapData=new BitmapData(loader.width*scale,loader.height*scale,true,0xFFFFFFFF);
			bitdata.draw(loader,scaleMatrix);
			image=new Bitmap(bitdata);
			addChild(image);
			image.y=loader.y;
			removeChild(loader);
			initBottoneListeners();
		}
		
		private function initBottoneListeners():void
		{
			bottone.addEventListener(MouseEvent.MOUSE_DOWN,sulClick);
			stage.addEventListener(MouseEvent.MOUSE_UP,sulRilascio);
		}
		private function sulClick(event:MouseEvent):void
		{
			image2.removeEventListener(Event.ENTER_FRAME,fadeImages);
			grill.dispose();
			image.alpha=1;
			var rect:Rectangle= new Rectangle(barra.x,barra.y,barra.width,barra.height);
			bottone.startDrag(false,rect);
			bottone.addEventListener(Event.ENTER_FRAME,attivaIntervallo);
		}
		private function sulRilascio(event:MouseEvent):void
		{
			bottone.removeEventListener(Event.ENTER_FRAME,attivaIntervallo);
			bottone.stopDrag();
			disegnaNuovaBitmap();
		}
		private function attivaIntervallo(event:Event):void
		{
			xx=(bottone.x-barra.x)/100;
			matrice.tx=0;
			matrice.ty=45;
			matrice.a=1+rest*xx*2;
			matrice.d=1+rest*xx*2;
			image.transform.matrix=matrice;
			rest2=matrice.d-1;
		}
		private function disegnaNuovaBitmap():void
		{
			var scale:Number=50+xx*50;
			scale/=100;
			var scaleMatrix:Matrix=new Matrix();
			scaleMatrix.scale(scale,scale);
			grill=new BitmapData(loader.width*scale,loader.height*scale,true,0xFFFFFFFF);
			grill.draw(loader,scaleMatrix);
			image2=new Bitmap(grill);
			addChild(image2);
			image2.y=45;
			image2.alpha=0;
			initImageListener();
		}
		private function initImageListener():void
		{
			image2.addEventListener(Event.ENTER_FRAME,fadeImages);
		}
		private function fadeImages(event:Event):void
		{
			var arrImage2:int=1;
			var da:Number=arrImage2-image2.alpha;
			var aa:Number=da*.1;
			image2.alpha+=aa;
			
			var arrImage:int=0;
			var daa:Number=arrImage-image.alpha;
			var aaa:Number=daa*.1;
			image.alpha+=aaa;
			if(Math.abs(da)<=0.05)
			{
				image2.removeEventListener(Event.ENTER_FRAME,fadeImages);
				image2.alpha=arrImage2;
				image.alpha=arrImage;
			}
		}
	}
}

This is the result:

This script doesn"t contain anything new not already seen, apart from some calculations and the Matrix class ( another great class that we"ll see later in more detail).
I draw bar and button
I load a hi res image
I take a shot at this image with the BitmapData.draw method and I remove the loaded image ( careful here, as removing doesn"t mean to tell the loader to unload it, but just to make it invisible to the ObjectDisplay, but still shoot-able by the draw method
I add the necessary listeners
When the button is pressed, on top of the controlled startDrag, I start an interval that enlarges the image ( obtained first with draw, then scaled up by 50%) using the image"s matrix (the class Matrix) based on the value of a variable given by a proportionally controlled mathematical calculation.
When the button is released, I check how much the image had been scaled , I take another shot of the original invisible hi res image and I scale it by the same percentage, so that the new image doesn"t look as lower res anymore.
I perform an alpha fade/in fade/out between the low res image and the new "healthy" one.

Source files: