+ Reply to Thread
Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Zoom con Flash CS3

This is a discussion on Zoom con Flash CS3 within the Articoli e tutorials forums, part of the Flash Italiano category; Eh si, sempre la classe BitmapData :) Questa classe è davvero un gioiello per chi ama Flash. Come già visto ...

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Zoom con Flash CS3


    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 ' :
    Code:
    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:
    Attached Files

  2. #2
    Junior Member Settled In Romi is on a distinguished road
    Join Date
    Nov 2007
    Posts
    4
    Rep Power
    0

    Re: Zoom con Flash CS3

    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

  3. #3
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Re: Zoom con Flash CS3

    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

  4. #4
    Junior Member Settled In Romi is on a distinguished road
    Join Date
    Nov 2007
    Posts
    4
    Rep Power
    0

    Re: Zoom con Flash CS3

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

  5. #5
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Re: Zoom con Flash CS3

    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

  6. #6
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Re: Zoom con Flash CS3


  7. #7
    Junior Member Settled In maiocchino is on a distinguished road
    Join Date
    May 2008
    Posts
    2
    Rep Power
    0

    Re: Zoom con Flash CS3

    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

  8. #8
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Re: Zoom con Flash CS3

    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 ?

  9. #9
    Junior Member Settled In maiocchino is on a distinguished road
    Join Date
    May 2008
    Posts
    2
    Rep Power
    0

    Re: Zoom con Flash CS3

    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.

  10. #10
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Re: Zoom con Flash CS3

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

+ Reply to Thread
Page 1 of 2 1 2 LastLast

Similar Threads

  1. Aiuto x gallery con multifoto e zoom in flash
    By wesley in forum Actionscript 3.0 base
    Replies: 0
    Last Post: 02-07-10, 09:58
  2. sposamento e zoom
    By sindro88 in forum Actionscript 3.0 avanzato
    Replies: 7
    Last Post: 28-07-09, 14:49
  3. [CS3/AS2] Zoom In/Out with Easing
    By colt5034 in forum Actionscript 3.0 newbies
    Replies: 0
    Last Post: 18-06-09, 06:21
  4. [FLASH 8] zoom relativo al click
    By rtank in forum Actionscript 3.0 base
    Replies: 10
    Last Post: 01-04-08, 12:18
  5. Zoom with Flash CS3
    By Flep in forum Tutorials
    Replies: 0
    Last Post: 09-10-07, 18:38

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts