Flash中利用ActionScript3.0实现图像的扭曲效果

陈银凤

（内蒙古财经大学 计算机信息管理学院，内蒙古 呼和浩特 010051）

Flash与 Dreamweaver、Fireworks一起被称作 “网页制作三剑客”[1]。随着网络技术的不断发展，Flash已成为当今网络世界中的热点技术，其使用者可以充分发挥自己的想象力，设计和创作出具有图形、声音、视频和动画的各种交互内容，从而使广告、网站、游戏、贺卡、教学课件及音乐动画等真正独具特色。

与其他动画制作软件相比，Flash制作的动画容量小、操作方便、绿色免安装，非常适合在网络中传播。借助ActionScript能够制作出更为细腻、逼真的动画。ActionScript是Flash专用的脚本语言，采用面向对象的编程思想，通常以动画中的关键帧、按钮实例、影片剪辑实例作为对象来对ActionScript进行定义和编写，以帮助用户按照自己的意愿更加精确地创建动画，实现自己的意图。ActionScript由Flash Player中的ActionScript虚拟机(AVM)来解释执行，其代码通常被编译器编译成“字节码格式”，字节码嵌入SWF文件中，SWF文件由运行时环境Flash Player执行。ActionScript的版本已从1.0发展到如今的3.0，虚拟机也从AVM发展为支持ActionScript 3.0的新一代AVM2，其执行速度是之前ActionScript版本的10倍。ActionScript 3.0旨在方便创建拥有大型数据集和面向对象的可重用代码库的高度复杂应用程序。

本文主要阐述在Flash CS3环境中利用Action-Script3.0的BitmapData类和DisplacementMapFilter滤镜实现图像的扭曲效果。Flash CS3是Adobe公司收购Macromedia公司后将Macromedia Flash更名为Adobe Flash后的一款动画软件。

1 BitmapData类和DisplacementMapFilter滤镜

1.1 BitmapData类

使用BitmapData类可以处理Bitmap对象的数据 (像素)。可以使用 BitmapData类的方法创建任意大小的透明或不透明位图图像，并在运行时采用多种方式操作这些图像。也可以访问使用flash.display.Loader类加载的位图图像的BitmapData。此类允许将位图呈现操作与Flash Player的内部显示更新例程分隔开来。通过直接操作BitmapData对象,用户可以创建非常复杂的图像，不会因连续重新绘制矢量数据的内容而产生每帧开销。BitmapData类的方法支持多种无法通过通用滤镜接口获得的效果。BitmapData对象包含像素数据的数组。该数据可以表示完全不透明的位图，或表示包含Alpha通道数据的透明位图。以上任一类型的BitmapData对象都作为32 bit整数的缓冲区进行存储。每个32 bit整数确定位图中单个像素的属性。

每个 32 bit整数都是 4个 8 bit通道值 (从 0～255)的组合，这些值描述像素的Alpha及红色、绿色、蓝色的（ARGB）值。 当将 4个通道（红色、绿色、蓝色和 Alpha）与 BitmapData.copyChannel()方法或 DisplacementMapFilter.componentX属性和DisplacementMapFilter.componentY属性一起使用时，这些通道以数字形式表示，分别为：1（红色）、2（绿色）、4（蓝色）和 8（Alpha）。

(1)构造函数

BitmapData(width:Number,height:Number,[transparent:Boolean],[fillColor:Number])

(2)公共属性

height:Number[只读]：位图图像的高度，以像素为单位。

rectangle:Rectangle[只读]：定义位图图像大小和位置的矩形。

transparent:Boolean[只读]：定义位图图像是否支持每个像素具有不同的透明度。

width:Number[只读]：位图图像的宽度,以像素为单位。

1.2 DisplacementMapFilter滤镜

DisplacementMapFilter类使用指定的 BitmapData对象（称为置换图图像）的像素值执行对象置换。可以使用此滤镜将扭曲或斑点效果应用于从 DisplayObject类中继承的任何对象， 例如 MovieClip、SimpleButton、TextField、Video对象以及BitmapData对象。

DisplacementMapFilter需要有一个灰度图像作为置换映射图像，并基于这个映射图像的像素对另外一个图像进行扭曲。映射图像中比中性灰亮的像素在目标图像中对应位置上向左上角移动,较暗的像素则向右下角移动。

(1)构造函数

DisplacementMapFilter(mapBitmap:BitmapData=null,map-Point:Point=null,componentX:uint=0,componentY:uint=0,scaleX:Number=0.0,scaleY:Number=0.0,mode:String="wrap",color:uint=0,alpha:Number=0.0)

(2)公共属性

2 应用置换映射滤镜创建图像扭曲效果

使用 BitmapData对象[1]和 DisplacementMapFilter滤镜可以实现图像的扭曲效果。DisplacementMapFilter类使用BitmapData对象（称为置换图图像）中的像素值在新对象上执行置换效果。通常，置换图图像与将要应用滤镜的实际显示对象或BitmapData实例不同。置换效果包括置换过滤的图像中的像素，也就是说，将这些像素移开原始位置一定距离。

实现步骤：

(1)新建一个Flash文档,设置其舞台大小为340×220像素，背景为白色。

(2)选中图层 1，命名为“图像层”，导入准备好的一张图片到舞台，图片大小设置为164×220像素，选中该图片并转化为影片剪辑，元件名为“image”。选中舞台中的 image影片剪辑实例，命名为“pic”，并在舞台中靠左放置。从库中再次拖入一个image影片剪辑实例,无需命名,舞台中靠右放置（为与扭曲效果作对比）。

(3)菜单栏中点击 “插入/新建元件”，选择影片剪辑，元件命名为“displacer”，进入元件编辑环境。在图层1中，使用矩形工具绘制一个164×220的无边框灰色矩形，如图1所示。新建图层2，在右下角绘制一个直径为108像素的正圆，颜色填充为放射状 （3个色块均匀分布,从左到右颜色值分别为：#956A89、#6B1452、#000000；Alpha值分别为：100%、50%、0%），如图 2所示。

(4)回到场景中，新建图层 2，命名为“displacer层”，将displacer影片剪辑拖入舞台，影片剪辑实例命名为“dis”。其正好放置在“pic”实例的正上方。

(5)新建图层 3，命名为“AS”，选中第一帧，打开“动作”面板，输入如下代码：

(4)保存文档，按Ctrl+Enter键进行执行，测试图像的扭曲效果。如图3左侧所示，影片剪辑实例pic出现扭曲效果。

由于Flash制作出的动画体积小，非常适合在网络中传播，所以深受广大网民的喜爱。要想在Flash环境中制作出效果逼真的动画，ActionScript是不可或缺的部分。ActionScript是针对Flash Player运行时环境的编程语言，它用于处理各种人机交互、数据交互等功能，目前主要采用的版本是ActionScript3.0。ActionScript3.0与Flash CS3（或以上版本）相结合，可以创建出各种不同的应用特效，实现丰富多彩的动画效果。本文中正是利用ActionScript3.0的BitmapData类和DisplacementMapFilter滤镜实现了图像的扭曲效果。Flash中专业制作动画者可以借助 ActionScript3.0，更加充分地发挥想象力，随心所欲地制作出交互性极强的复杂动画，体现美仑美换的意境。

[1]张亚飞.Flash ActionScript 3.0开发王[M].北京：电子工业出版社，2008.

[2]王传华.Flash MX 2004实例教程[M].北京：清华大学出版社，2004.