Zoom con Flash CS3

[Flep]

Eh si, sempre la classe BitmapData :)

Questa classe è davvero un gioiello per chi ama Flash.

Come già visto in precedenza : BitmapData e metodo draw , vedremo che questo metodo è davvero molto di più di quello che sembra.

Navigando il web, mi sono accorto che spesso mi imbatto in applicazioni che (alcune meglio alcune peggio) simulano uno Zoom ad una immagine e/o testo.

E' una cosa davvero interessante mettere a confronto diverse tecniche, per cui dopo un paio d'ore di scripting ho creato una classe...

Creo un FLA e lo salvo con nome ' zoom.fla ', creo una MovieClip che fungerà da preloader ( in questo caso utlizzo lo stesso preloader di questo articolo: Caricare un swf esterno con Flash CS3).

Poi mi creo la Document Class e salvo con nome ' 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 clip_mc: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=50/100;
		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);
			bottone.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);
			removeChild(clip_mc);
		}
		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);
			clip_mc=new MovieClip();
			addChild(clip_mc);
			clip_mc.addChild(image2);
			clip_mc.buttonMode=true;
			image2.y=45;
			clip_mc.alpha=0;
			initImageListener();
		}
		private function initImageListener():void
		{
			clip_mc.addEventListener(Event.ENTER_FRAME,fadeImages);
		}
		private function fadeImages(event:Event):void
		{
			var arrImage2:int=1;
			var da:Number=arrImage2-clip_mc.alpha;
			var aa:Number=da*.1;
			clip_mc.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)
			{
				clip_mc.removeEventListener(Event.ENTER_FRAME,fadeImages);
				clip_mc.alpha=arrImage2;
				image.alpha=arrImage;
				callDrag();
			}
		}
		
		private function callDrag():void
		{
			clip_mc.addEventListener(MouseEvent.MOUSE_DOWN,muoviClip);
			clip_mc.addEventListener(MouseEvent.MOUSE_UP,lasciaClip);
		}
		
		private function muoviClip(e:MouseEvent):void
		{
			clip_mc.startDrag();
		}
		private function lasciaClip(e:MouseEvent):void
		{
			clip_mc.stopDrag();
		}
	}
}

Risultato:

In questo script non c'è nulla di nuovo che non abbiamo visto, tranne che qualche calcolo matematico che ho applicato e la classe Matrix (altra gran bella classe che approfondiremo più avanti).

- Disegno barra e bottone

- Carico un immagine ad alta risoluzione

- Scatto una foto a questa immagine con il metodo BitmapData.draw e rimuovo l'immagine caricata (attenzione a questo passaggio, perchè rimuovere non significa dire al Loader di scaricarla, l' immagine non è visibile in quanto non è più nel nostro ObjectDisplay ma rimane fotografabile dal metodo draw)

- Aggiungo i listeners necessari

- Quando il bottone è premuto, oltre allo startDrag controllato, attivo un intervallo che mi ingrandisce l'immagine (ottenuta prima con draw e scalata del 50%) utilizzando la matrice di quella immagine (quindi la classe Matrix) in base al valore di una variabile datomi da un controllo matematico di proporzioni.

- Quando il bottone viene rilasciato, controllo di quanto è stata scalata l'immagine , scatto una foto all'immagine ad alta risoluzione che ho caricato e la scalo della stessa percentuale, in modo che la nuova immagine non risulti più sgranata.

- Faccio un fade/in fade/out di alpha tra l'immagine sgranata e quella 'sana'

Allego i files sorgente:

[Romi]

Ciao flep...
Ho visto un sito che usa uno zoom script che non posso trovare da nessuna parte...
L'indirizzo e index
Dai un'occhiata x favore...
Se mi puoi dare una mano ti saro molto gratto...
Anticipatamente ringrazio

[Flep]

Ciao Romi e benvenuto

Quello 'zoom' ( non è un vero e proprio zoom ) necessita di proporzioni matematiche.
In sostanza in base alle coordinate di una istanza Rectangle ( quello col bordo rosso piccolino ) muovi la foto grande che è mascherata.
Appena ho del tempo ti faccio un esempio

[Romi]

Grazie mille...
Sei molto gentile.
Sono in atesa di un tuo esempio...

[Flep]

Ciao Romi, chiedo scusa per il ritardo ma le cose da fare sono tante.
Ho creato il tuo esempio e domani lo pubblicherò perciò volevo avvisarti

[Flep]

Ciao Romi,
ecco l' esempio:

http://www.flepstudio.org/forum/util...navigator.html

[maiocchino]

Ciao Flep.

Mi sono appena iscritto al forum, mi sembra eccezionale. L'ho trovato mentre cercavo di capire come replicare questo effetto di zoom: http://www.feanor.net/z0r/shock/superZOOM.swf
Mi sembra che il tuo esempio sia molto vicino alla soluzione del problema. Come faresti la transizione tra due immagini differenti?
Grazie. Roberto

[Flep]

Ciao maiocchino e benvenuto

Molto bello quell' esempio.
Forse usa il draw() della BitmapData ? Oppure carica le immagini in background e poi te le visualizza... è da studiare.
Tu che dici ?

[maiocchino]

Grazie per la tua risposta!
Io ho ancora poca esperienza di AS3, per il momento lavoro ancora con AS2.
Pero' mi sembra che nell'esempio venga usato il metodo merge(). Forse l'idea e' quella di caricare le immagini e fare un merge tra due immagini successive quando si supera un certo valore di zoom.

[Flep]

Eh sì, potrebbe essere, anche se comunque le immagini sono da caricare...