Flash AS3 代码实现滤镜动画效果

### Flash AS3 代码实现滤镜动画效果 #### 背景与概述 在Flash开发领域，使用ActionScript 3.0 (AS3) 实现动态滤镜效果是一种常见的技术手段，尤其对于那些追求视觉冲击力和交互性的项目来说更是如此。本文将详细解析如何通过AS3代码来实现滤镜动画效果，包括模糊和斜角滤镜，并提供了一个具体的示例，帮助读者更好地理解和应用这一技术。 #### 准备工作 在开始之前，我们需要按照以下步骤准备开发环境： 1. **创建新文档**：在Adobe Flash Professional中新建一个文档，设置舞台尺寸为500x250像素。 2. **导入图片**：将两张大小约为200x200像素的图片导入到舞台上，可以是任何形状的图片，例如圆形或方形图片。 3. **转换为MovieClip**：选中这两张图片，将其转换为MovieClip（简称MC），并根据个人喜好为它们命名，比如命名为“apple01”和“apple02”，并将注册点（也就是旋转和缩放的中心点）放置在图片中心位置。 #### 实现过程 接下来，我们将通过编写ActionScript 3.0代码来实现模糊和斜角滤镜的动态变化。 ##### 代码分析 在时间轴中选择“apple01”和“apple02”的关键帧，打开动作面板，输入以下代码： ```as // 定义模糊速度和斜角速度变量 var blurSpeed:Number = 1; var bevelSpeed:Number = 5; // 添加MOUSE_OVER事件侦听器 apple01.addEventListener(MouseEvent.MOUSE_OVER, mouseOverApple01); apple02.addEventListener(MouseEvent.MOUSE_OVER, mouseOverApple02); // 添加MOUSE_OUT事件侦听器 apple01.addEventListener(MouseEvent.MOUSE_OUT, mouseOutApple01); apple02.addEventListener(MouseEvent.MOUSE_OUT, mouseOutApple02); // 添加ENTER_FRAME事件侦听器 apple01.addEventListener(Event.ENTER_FRAME, enterFrameApple01); apple02.addEventListener(Event.ENTER_FRAME, enterFrameApple02); // 创建并附加模糊滤镜 var blur:BlurFilter = new BlurFilter(); blur.blurX = 20; blur.blurY = 20; blur.quality = BitmapFilterQuality.HIGH; apple01.filters = [blur]; // 创建斜角滤镜 var bevelFilter:BevelFilter = new BevelFilter(10, 45, 0x000000, 1, 0xffffff, 1, 0, 0, 0, BitmapFilterQuality.HIGH, BitmapFilterType.INNER, false); apple02.filters = [bevelFilter]; // 设置默认状态 var mouseIsOverApple01:Boolean = false; var mouseIsOverApple02:Boolean = false; // 当鼠标悬停在apple01上时 function mouseOverApple01(event:MouseEvent):void { mouseIsOverApple01 = true; } // 当鼠标悬停在apple02上时 function mouseOverApple02(event:MouseEvent):void { mouseIsOverApple02 = true; } // 当鼠标离开apple01时 function mouseOutApple01(event:MouseEvent):void { mouseIsOverApple01 = false; } // 当鼠标离开apple02时 function mouseOutApple02(event:MouseEvent):void { mouseIsOverApple02 = false; } // 绘制apple01的动画 function enterFrameApple01(event:Event):void { // 如果鼠标在apple01上，则减少模糊 if (mouseIsOverApple01 == true) { blur.blurX -= blurSpeed; blur.blurY -= blurSpeed; } // 如果鼠标不在apple01上，并且模糊度小于等于20，则增加模糊 else if (mouseIsOverApple01 == false && blur.blurX <= 20) { blur.blurX += blurSpeed; blur.blurY += blurSpeed; } // 更新模糊滤镜 apple01.filters = [blur]; } ``` ### 深入理解 1. **事件侦听器**：通过`addEventListener`方法为“apple01”和“apple02”添加了MOUSE_OVER和MOUSE_OUT事件侦听器，以便于跟踪鼠标在图片上的移动情况。 2. **模糊滤镜**：通过创建`BlurFilter`对象并调整其属性来实现模糊效果。其中`blur.blurX`和`blur.blurY`分别控制水平方向和垂直方向的模糊程度。 3. **斜角滤镜**：通过创建`BevelFilter`对象并设置其参数来实现斜角效果。这些参数包括阴影深度、角度、颜色等，可以自定义这些参数以达到所需的效果。 4. **动态更新滤镜**：利用`ENTER_FRAME`事件每帧更新模糊和斜角滤镜的状态，确保当鼠标悬停在图片上时模糊效果逐渐减弱，而当鼠标移开时模糊效果逐渐增强。 通过上述代码的详细解读，我们可以清楚地了解到如何使用AS3代码实现滤镜动画效果的具体步骤和技术细节。掌握这些技巧不仅能够帮助开发者在Flash项目中加入更丰富的视觉元素，还能提升用户界面的互动性和吸引力。希望各位读者能够在实践中不断探索和创新，创造出更多令人惊叹的作品。