Flash 与课件制作：缓冲公式

   百度谷歌搜索，网上已经很多flash缓冲公式使用。其实原理很多人都会清楚的，今天徘徊在这个公式计算当中。在使用的时候，发现有趣的地方。

  

   mc.x+=(目标点-mc.x)*ratio;

这个例子当中，是以x坐标变化进行缓冲。ratio 是一个系数，默认取小于1的小数。0.1xxx-0.9xxxx区间内。

 

在每一帧刷新的情况下：   mc.x-是无限趋向于目标点，而目标点-mc.x差距会逐渐缩窄。不无穷靠近目标的点。

 

 

 

  下面是一组比较长的图片，当鼠标移动的时候，图片会左右移，当图片层在左边和右边边界的时候就停下来。而舞台上，图片层会很长的，我们所看到只会在红色的区间里面看到的。

 

 

 

经过遮罩后，图片显示情况

 

 

 

 

 

   第一步：首先创建一个cs3文档

   第二步：将我们所需要的图片做成一个元件mcc，注册点为左上角

   第三步：将元件放在舞台上位置

   第四步：建立遮罩层，并将遮罩层坐标和宽度记录 (69.7,542.5+69.7);

   第五步：书写代码

   第六步：计算左右两边临界区值。采用百分比计算办法。

 

stage.addEventListener(Event.ENTER_FRAME,Run); function Run(event:Event):void { move(mcc,69.7,542.5+69.7); } function move(mc:*,startPoint:Number,endPoint:Number,ratio:Number=0.5):void { var temp:Number=mouseX; if(mouseX<startPoint) { temp=startPoint; } if(mouseX>endPoint) { temp=endPoint; } var k:Number=(temp-startPoint)/(endPoint-startPoint); mc.x+=((startPoint-(mc.width-(endPoint-startPoint))*k)-mc.x)*ratio; }

 

 

 

 

然后我们再制作另外一个例子：

 

1  创建一个640x400的文档。

2 在舞台上创建一些图案和四个文字按钮。并对每一个进行命名。

3.创建一组图片序列

4 书写代码进行交互

 

 

                                                             Demo图

 

我们会采用这种缓冲制作遮罩中的一种动画效果。首先会在网上搜索一些摄影的作品（来源网上摄影网站），然后组成一个元件。

 

如下面，对每一张图片进行大小比例相等调节后，这些图片就可以做我们缓冲的时候用的图片。我们使用遮罩层只对一张图片进行遮罩效果。

 

如上面的Demo演示图，所看到的就是一张图片，其余都被隐藏起来了。接下来我们就需要考虑到怎样移动这张图片。当然我们依旧回归到使用这个公式来制作我们的课件。

 

 mc.x+=(目标点-mc.x)*ratio; 这条简单而实用的公式。

 

我们对每一张图片设计一个目标点位置。当我们鼠标移动到文字上方的时候，图片就会跟随移动起来了。这个简单效果就可以完成到了。

 

 

 

 

 

简单的代码效果：

 

代码当中只是个演示，其中我们只是需要理解到这个公式使用就可以，交互代码可以进行更改和设计，使其符合自己的设计目的和需要。

 

package { import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events.*; import flash.text.*; public class Main extends MovieClip { private var targetPoint:Number; private var key:Boolean=false; public function Main() { init(); } private function init():void { //按钮监听 title_btn1.addEventListener(MouseEvent.MOUSE_OVER,onOverHandler); title_btn2.addEventListener(MouseEvent.MOUSE_OVER,onOverHandler); title_btn3.addEventListener(MouseEvent.MOUSE_OVER,onOverHandler); title_btn4.addEventListener(MouseEvent.MOUSE_OVER,onOverHandler); addEventListener(Event.ENTER_FRAME,Run); } private function onOverHandler(event:MouseEvent):void { key=true; switch (event.currentTarget) { case title_btn1 : targetPoint=86; break; case title_btn2 : targetPoint=-28; break; case title_btn3 : targetPoint=-142; break; case title_btn4 : targetPoint=-256; break; } } private function Run(event:Event):void { if(key) photo.x+=(targetPoint-photo.x)*0.5; } } }

 

 

下面是文件和演示有兴趣可以看看。