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: