flash特效原理：图片滑动放大效果

这几天，都在无所事事，唯一寄托就是在这里记录一下自己研究出来的东西。趁现在有点时间，就把最近看过的一种常用的flash特效记录一下，flash 做特效不是为做特效而做，在make thing move 书里讲了许多的数学和物理原理，通过这些原理，我发现做特效就需要懂原理。懂了这些原理后，特效就会变得轻松容易。

现在准备一下，讲求一个公式，这个公式对做这个特效很有帮助。公式如下：



一、基本基本原理公式

x轴：

图片缩放率=最大缩放率-|鼠标的x坐标值-每一张图片的x轴大小|*自定义的比例；

鼠标的x坐标值减去每一张图片的x轴大小的绝对值的差，乘以自定义的比例，然后最大缩放率减去这个值就可以知道结论：

离鼠标越近的图片，缩放比例就会越大，相反离鼠标越远相对缩放率越小。



var scale:Number=max-Math.abs(mouseX-pic.x)*ratio; 这样公式就知道了

简化 scale=max-|mouseX-pic.x|*ratio;



同理：

y轴：

图片缩放率=最大缩放率-|鼠标的y坐标值-每一张图片的y轴大小|*自定义的比例；



二、***过程





我们***Mc的时候，Mc里面有一个名为title的动态文本，在其上面铺盖一层透明的色的图像，同时，需要指定底部为注册点，笔者按这种方式处理。然后链接为TestMc 类





库链接图：









三、程序实现

接下来，准备了



现在我们写一个基础类Effect.as。这个特效基础类，可以设置最大放大率，图片间距，和比率

package 
{

	import flash.display.MovieClip;
	import flash.events.*;
	public class Effect extends EventDispatcher
	{
		private var Ratio:Number;//缩放比率
		private var Max:Number;//设置最大缩放比率
		private var Distans:Number;//图片距离
		public function Effect()
		{
			
		}
		//设置最大的缩放比率
		public function set max(value:Number):void
		{
			Max=value;
		}
		public function get max():Number
		{
			return Max;
		}
		//设置鼠标与图片之间距离的差的绝对值的缩放比率
		public function set ratio(value:Number):void
		{
			Ratio=value;
		}
		//设置鼠标与图片之间距离的差的绝对值的缩放比率
		public function get ratio():Number
		{
			return Ratio;
		}
		
		//设置图片之间的距离
		public function set distance(value:Number):void
		{
			Distans=value;
		}
		public function get distance():Number
		{
			return Distans;
		}
	}
}

接下来，我们继承这个Effect.as 类，这个类里面有放大x轴的方法，和放大y轴的方法，同样有还原原来位置的方法

package 
{
	//图片滑动效果version 1.0

	import flash.display.MovieClip;
	import flash.display.Stage;
	public class RollPhoto extends Effect
	{
		private var mc:MovieClip=new MovieClip();
		private var mystage:Stage;
		public function RollPhoto(stage:Stage)
		{
			this.mystage=stage;
		}
		
		//图片放大
		public function ZoomPhotoX(array:Array):void
		{
			var mouseposition:Number = mystage.mouseX;
			var length:Number=array[0].width*array.length+super.distance*(array.length-1);
			if (mouseposition<0)
			{
				mouseposition=0;
			}
			if (mouseposition>length)
			{
				mouseposition=length;
			}
			for (var i:uint=0; i<array.length; i++)
			{
				var s:Number =super.max- Math.abs(mystage.mouseX - array[i].x)*super.ratio;//公式
				s = s < 1 ? 1 : s;
				array[i].scaleX = array[i].scaleY =s;
			}
			for (var j:uint=1; j<array.length; j++)
			{
				array[j].x = array[j-1].x + array[j-1].width/2 + array[j].width/2 + super.distance;
			}
		}
		//图片以y轴放大
		public function ZoomPhotoY(array:Array):void
		{
			var mouseposition:Number = mystage.mouseY;
			var length:Number=array[0].width*array.length+super.distance*(array.length-1);
			if (mouseposition<0)
			{
				mouseposition=0;
			}
			if (mouseposition>length)
			{
				mouseposition=length;
			}
			for (var i:uint=0; i<array.length; i++)
			{
				var s:Number =super.max- Math.abs(mystage.mouseY - array[i].y)*super.ratio;//公式
				s = s < 1 ? 1 : s;
				array[i].scaleX = array[i].scaleY =s;
			}
			for (var j:uint=1; j<array.length; j++)
			{
				array[j].y = array[j-1].y + array[j-1].height/2 + array[j].height/2 + super.distance;
			}
		}
		//还原
		public function RestPosition(array:Array,type:String="x"):void
		{
			for (var i:uint=0; i<array.length; i++)
			{
				array[i].scaleX =array[i].scaleY=1;
				if (type=="x")
				{
					array[i].x = array[0].width/2+i*(array[0].width + super.distance);
				} else
				{
					array[i].y = array[0].height/2+i*(array[0].height + super.distance);
				}
			}
		}
	}
}

第三步：测试，通过复制TestMc。然后就进行鼠标监听，而这里我们采用的是碰撞的方法，而不是鼠标对每一张图片向上监听，为什么？这里留个疑问呢。

package 
{
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.geom.*;
	import flash.system.*;
	import flash.text.*;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.DisplayObject;
	import flash.display.Shape;
    import flash.display.Graphics;
	import flash.display.GradientType;
	import flash.utils.getDefinitionByName;
	import flash.display.Loader;
	import flash.net.*;
	import flash.display.DisplayObjectContainer;
	
	public class main extends MovieClip
	{
		private var array:Array;
		private var list:MovieClip;
		private var myphoto:RollPhoto;//图片滚动对象
		private var contain:MovieClip=new MovieClip();
		private var loader:Loader;
		public function main()
		{
			init();
		}
		private function init():void
		{
			myphoto=new RollPhoto(stage);//初始化对象
			myphoto.max=1.4;//设置最大缩放比例
			myphoto.ratio=0.0025;//设置自定义比例
			myphoto.distance=10;//设置图片间的距离
			createObj();
			addEventListener(Event.ENTER_FRAME,Run);
			addChild(contain);
		}
		//创建物体
		private function createObj():void
		{
			array = new Array();
			list = new MovieClip();
			list.y=60;
			list.x=200;
			list.name = "list";
			addChild(list);

			for (var i:uint=0; i<10; i++)
			{
				var myclass:Object=getDefinitionByName("TestMc");				
				var bit:MovieClip= new myclass() as MovieClip;
				bit.title.text="Menu"+i;
				bit.ID=i;
				bit.mouseChildren = false;
				bit.buttonMode = true;
				bit.x =20;
				bit.y =bit.height/2+i*(bit.height+10);
				array.push(bit);
				list.addChild(bit);
				bit.addEventListener(MouseEvent.MOUSE_DOWN,listdown);
			}
			stage.addEventListener(MouseEvent.MOUSE_MOVE,listmove);
		}
		private function Run(event:Event):void
		{
			memory.text=String(System.totalMemory/1024)+"/kb";//内存监控
		}
		private function listmove(e:MouseEvent):void
		{
			if (list.hitTestPoint(mouseX,mouseY))
			{
				myphoto.ZoomPhotoY(array);//以y轴为例
			}
			else
			{
				System.gc();
				myphoto.RestPosition(array,"y");
			}
		}
		private function listdown(event:MouseEvent):void
		{
			trace(event.currentTarget);
			//removeAllChildren(contain);//删除容器中对象
			//load(event.currentTarget.ID);
		}
		//加载外部图片
		private function load(path:String):void
		{
			loader=new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError);
			loader.load(new URLRequest(path));
		}
		private function onComplete(event:Event):void
		{
			loader.removeEventListener(Event.COMPLETE,onComplete);
			contain.addChild(event.currentTarget.content);
			contain.alpha=0;
			contain.x=150;
			contain.y=100;
			
		}
		private function onError(event:Event):void
		{
			throw new Error("路径错误");			
		}
		
		private function removeAllChildren(container:DisplayObjectContainer):void
		{
			while (container.numChildren>0)
			{
				container.removeChildAt(0);
			}

		}
	}
}

四 输出效果图









再看看以x轴的效果是如何;可以根据自己需要还可以增加一些阴影倒影类。







五、小结

我们知道，特效是源于数学的理解，有了这一层基础，我们会***出更多不错的效果，通过研究这些特效，而不要忘记理解背后的原理。同样，这个程序依然可以进行扩展，可以进行其修改以达到自己满意的效果，如增加一些倒影类结合图片这样看起来就更加酷。

好就介绍到这里。如果有意见或者问题处理，请留言。