exoa labs

Voici comment rapidement avoir un effet "lightbox" en flash:












classe du chargeur d'image :

 
package {
	import flash.net.URLRequest;
	import flash.display.*;
	import flash.events.*;
	import SliderClip;
	public class ImageLoader extends MovieClip
	{
 
		private var clip:SliderClip;
		private var url:String;
		private var loader:Loader;
 
		private var targetX:Number=100;
		private var targetY:Number=100;
		private var speed:Number=2;
		public function ImageLoader(purl,tx,ty,s)
		{
			targetX = tx,
			targetY = ty;
 
			speed = s;
			url=purl
			clip = new SliderClip();
 
			addEventListener(Event.ADDED_TO_STAGE,onAddedToStage)
		}
		private function onAddedToStage(e:Event)
		{
			loader = new Loader();
            configureListeners(loader.contentLoaderInfo);
			var request:URLRequest = new URLRequest(url);
			loader.load(request);
			//addChild(loader);
			stage.addEventListener(Event.RESIZE, onResize);
		}
		private function onResize(e:Event)
		{
			clip.x = stage.stageWidth / 2;
			clip.y = stage.stageHeight / 2;
			loader.x = clip.x - clip.width / 2 + 5;
			loader.y = clip.y - clip.height / 2 + 5;
		}
		private function configureListeners(dispatcher:IEventDispatcher):void {
            dispatcher.addEventListener(Event.COMPLETE, completeHandler);
            dispatcher.addEventListener(Event.INIT, initHandler);
            dispatcher.addEventListener(IOErrorEvent.IO_ERROR, error);
            dispatcher.addEventListener(Event.OPEN, openHandler);
            dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
 
        }
 
        private function completeHandler(event:Event):void {
            trace("completeHandler: " + event);
        }
        private function initHandler(event:Event):void {
            //trace("initHandler: " + event);
			//trace(event.target.width)
			addChild(clip);
			clip.goTo(targetX,targetY,event.target.width+10,event.target.height+10,speed);
			clip.addEventListener(Event.COMPLETE,loadContent)
        }
		private function loadContent(e:Event)
		{
			addChild(loader)
			loader.x = clip.x - clip.width / 2 + 5;
			loader.y = clip.y - clip.height / 2 + 5;
		}
        private function error(event:*):void {
            trace("Error: " + event);
        }
 
        private function openHandler(event:Event):void {
            trace("openHandler: " + event);
        }
 
        private function progressHandler(event:ProgressEvent):void {
            trace("progressHandler: bytesLoaded=" + event.bytesLoaded + " bytesTotal=" + event.bytesTotal);
        }
 
	}
 
}

La classe qui gère le slider :

 
package {
	import flash.display.*;
	import flash.events.Event;
	import flash.filters.DropShadowFilter;
	public class SliderClip extends MovieClip
	{
		public static const PLACED:String = "PLACED";
		private var targetX:Number=100;
		private var targetY:Number=100;
		private var targetWidth:Number=100;
		private var targetHeight:Number=100;
		private var speed:Number=2;
		public function SliderClip()
		{
 
			//new DropShadowFilter(distance,angle, color,alpha,blurX,blurY,strength,quality,inner,knockout);
			var shadow=new DropShadowFilter(0, 45, 0x000000, 1, 13, 13, 0.7);
			this.filters = [shadow];
			this.alpha = 0.7;
		}
		public function goTo(ptargetX, ptargetY, ptargetWidth, ptargetHeight, pspeed)
		{
			targetX = ptargetX;
			targetY = ptargetY;
			targetWidth = ptargetWidth;
			targetHeight = ptargetHeight;
			trace(targetX,targetY,targetWidth,targetHeight,speed);
			this.addEventListener(Event.ENTER_FRAME,slideClip);
			this.gotoAndPlay(1)
		}
		public function restart()
		{
			this.addEventListener(Event.ENTER_FRAME,slideClip);
			this.gotoAndPlay(1)
		}
		private function slideClip(e:Event) {
			var clip=this;
			if (Math.abs(targetX-clip.x)<1) {
				clip.x=targetX;
				if (Math.abs(targetY-clip.y)<1) {
					clip.y=targetY;
					clip.removeEventListener(Event.ENTER_FRAME,slideClip);
					clip.addEventListener(Event.ENTER_FRAME,resizeClip);
				} else {
					clip.y = clip.y+((targetY-clip.y)/speed);
				}
			} else {
				clip.x = clip.x+((targetX-clip.x)/speed);
			}
 
		}
 
		private function resizeClip(e:Event) {
			var clip=this;
			if ((targetWidth>0) && (targetHeight>0)) {
 
				if (Math.abs(targetWidth-clip.width)<1) {
					clip.width=targetWidth;
					if (Math.abs(targetHeight-clip.height)<1) {
						clip.height=targetHeight;
						trace("OK");
						dispatchEvent(new Event(Event.COMPLETE));
						clip.removeEventListener(Event.ENTER_FRAME,resizeClip);
					} else {
						clip.height = clip.height+((targetHeight-clip.height)/speed);
					}
				} else {
					clip.width = clip.width+((targetWidth-clip.width)/speed);
				}
			} else {
				clip.removeEventListener(Event.ENTER_FRAME,resizeClip);
			}
		}
 
	}
 
}
 

pour lancer le chargement d'une image il suffit alors d'instancier la classe ImageLoader :

 
	var imageLoader=new ImageLoader("http://labs.exoa.fr/upload/imageLoader/image.jpg",targetX,targetY,speed);
 

Les sources sont disponibles ici