flashas3.0位图和滤镜.ppt

第18章 位图和滤镜 在ActionScript 3.0中加入了对位图的支持，可 以实现创建位图图像，也可以把外部的位图图像 加载到Flash中利用滤镜类，可以对Flash元件和 位图增加各种滤镜效果。结合位图和滤镜类，可 以实现访问和更改各个像素值的功能，也可以创 建自己的滤镜式图像效果并使用内置杂点功能创 建纹理和随机杂点。 18.1 位图 计算机系统中支持的图像主要分为两类：矢量图 形和位图图像。本节将介绍位图的基础知识，以 及在ActionScript 3.0中所提供的位图处理包的 相关内容。 18.1.1 位图基础 矢量图形由以数学方式生成的几何形状，如直线、曲线和 多边形等基本图形组成，在Adobe Flash CS5中创作的图像 属于矢量图形。位图图像也称为光栅图像，由排列为矩形 网格形式的小方块，也就是像素组成，在Adobe PhotoShop CS3中创作的图像属于位图图像。 位图图像是用图像的宽度和高度来定义，以像素为量度单 位。其中像素是指位图图像中的最小信息单位，表示在屏 幕中显示的单个不同颜色的点。每个像素由对应的颜色值 来表示。在使用RGB颜色表示的位图图像中，像素由红、绿 和蓝三个字节组成，每个字节包含一个0到255之间的数字 。将三个字节合并成为一个颜色值，应用于显示对象，就 能够产生与绘画颜色相似的颜色。 18.1.2 Bitmap类 Bitmap类用来表示位图图像的显示对象。这些图像可以是使用显 示对象的Loader类加载的外部图像，也可以是使用Bitmap()构造 函数创建的图像。Bitmap类创建的图像，其信息可以使用其 BitmapData属性来引用并处理。Bitmap对象是一种显示对象，因 此可以使用显示对象的属性和方法来进行操作和控制。此外， Bitmap对象还有两个常用的属性：PixelSnapping象素贴紧和 smoothing平滑。 PixelSnapping象素贴紧属性用于控制Bitmap对象是否贴紧至最近 的像素。PixelSnapping属性包括以下可能值： PixelSnapping.NEVER：不进行像素贴紧。 PixelSnapping.ALWAYS：图像始终与最近的像素贴紧，与变形无 关。 PixelSnapping.AUTO：如果绘制图像时未应用旋转或倾斜效果， 并且图像是以99.9%到100.1%的缩放系数绘制的，则图像将与最近 的像素贴紧。 18.1.3 BitmapData类 BitmapData类用于处理Bitmap对象的像素数据，也可以使用 BitmapData类的方法创建任意大小的透明或不透明位图图像，并 在运行时采用多种方式操作这些图像。此类还可以访问使用显示 对象的Loader类加载的位图图像的BitmapData值。 BitmapData类的表18-1 BitmapData类属性 属性数据类型说 明heightint位图图像的高度，以像素为单位。 只读属性。rectRectangle定义位图图像大小和位置的矩形。只读 属性。transparentBoolean定义位图图像是否支持每个像素具有 不同的透明度。只读属性。widthint位图图像的宽度，以像素为 单位。z属性有4个，如表所示： BitmapData类属性 属性数据类型说 明 heightint位图图像的高度，以像素为单位。只读属性。 rectRectangle定义位图图像大小和位置的矩形。只读属性。 transparen t Boolean定义位图图像是否支持每个像素具有不同的透明度。只读属性。 widthint位图图像的宽度，以像素为单位。 18.1.4 创建位图 创建位图，需要把Bitmap类和BitmapData类结合使用。使 用Bitmap类创建位图对象，使用BitmapData类创建Bitmap 对象的数据信息，最后使用Bitmap对象的构造函数或 bitmapdata属性获得BitmapData创建的数据。 Bitmap类的构造函数格式如下所示： Bitmap(bitmapData,pixelSnapping,smoothing) 参数说明如下： bitmapData：被引用的BitmapData对象数据。默认值为 null。 pixelSnapping：确定Bitmap对象是否贴紧至最近的像素。 默认值为“auto”。 smoothing：确认在缩放时是否对位图进行平滑处理。默认 值为false。 18.1.5 加载外部图像 在ActionScript 3.0中支持加载外部的位图图像到位图中。加载外部的图 像，需要使用显示对象的Loader类的load方法来实现。具体实现请参见 22.1节。 下面的示例使用Loader对象，从外部加载一幅位图图像，并把它加入到 Bitmap位图对象上。使用文档类：LoadImage，代码如下所示： 加载外部图像 18.2 处理像素 在ActionScript 3.0中，利用BitmapData类的方 法，既可以处理单个像素点，又可以处理像素数 组。本节将介绍处理单个和多个像素的方法。 18.2.1 获取单个像素 在使用像素处理位图图像时，首先需要获取要处理区域中 所包含的像素的颜色值。在ActionScript 3.0中，可以使 用getPixel()方法从指定坐标点（x，y）中获取RGB颜色值 。若需要获得包括透明度Alpha通道信息，则需要使用 getPixel32()方法。 getPixel()方法用于获取位图指定点的RGB像素值。其用法 格式如下所示： getPixel(x:int, y:int) 说明：此方法将返回一个整数，表示BitmapData对象中在 某个特定点(x, y)处的RGB像素值，如果（x,y）坐标在图 像范围之外，则返回0。 参数说明如下： x：像素点的x坐标位置。 y：像素点的y坐标位置。 18.2.2 设置单个像素 若要想更改位图中包含的某个像素的颜色或透明 度，则可以使用setPixel()方法或setPixel32() 方法。若要设置像素的颜色，则这两种方法都可 以使用。 setPixel()方法用于设置BitmapData对象的单个 像素值。此方法会保留图像像素的当前Alpha通道 值。其用法格式如下所示： setPixel(x:int, y:int, color:uint) 参数说明如下： x：指定要更改的像素点的x坐标位置。 y：指定要更改的像素点的y坐标位置。 color：指定像素点要改变成的RGB颜色值。 18.2.3 处理像素数组 若要获取一个区域的像素而不是单个像素的值，可以使用 getPixels()方法来实现。其用法格式如下所示： getPixels(rect:Rectangle) 参数rect表示当前BitmapData对象中的一个矩形区域，返回的结 果是表示给定矩形对象中的像素的字节数组。字节数组的每个元 素，即像素值都是无符号的整数（32位未经相乘的像素值）。 相反，若要更改一组像素值，可以使用setPixels()方法来实现。 其用法格式如下所示： setPixels(rect:Rectangle, inputByteArray:ByteArray) 此方法实现将字节数组转换为像素数据的矩形区域。字节数组中 的数据应该是32位ARGB像素值。 参数说明如下： rect：指定应用像素设置的BitmapData对象的矩形区域。 inputByteArray：字节数组对象，由要在矩形区域中使用的32位 未经过相乘的像素值组成。 18.3 位图的复制 位图复制就是将一个位图的数据复制到另一个位 图图像。在ActionScript 3.0中，BitmapData类 提供了4种位图复制的方法，分别为：clone()方 法、copyPixels()方法、copyChannel()方法和 draw()方法。 18.3.1 clone()方法 clone()方法用于实现对原位图对象的克隆效果，此方法将产生一个与原 位图完全相同的副本。其用法格式如下所示： clone() 注意：复制产生的副本的修改并不影响原位图的效果。 下面的示例使用clone()方法实现载入一个外部的位图，并进行复制操作 。使用文档类：Clone，代码如下所示： 克隆位图 18.3.2 copyPixels()方法 copyPixels()方法用于将目标位图对象的BitmapData数据按照指 定的坐标和矩形区域进行复制，并将复制出的数据作用于另一个 位图对象。其用法格式如下所示： copyPixels(sourceBitmapData,sourceRect,destPoint,alphaBit mapData,alphaPoint,mergeAlpha) 参数说明如下： sourceBitmapData：要从中复制像素的目标位图图像。该图像是 一个BitmapData实例，也可以指自身BitmapData实例。也就是可 以从自身复制一部分。 sourceRect：表示要从目标图像获得区域的矩形。 destPoint：表示将在其中放置新像素的矩形区域的左上角。 alphaBitmapData：表示AlphaBitmapData对象源。 alphaPoint:Point：AlphaBitmapData对象源中与sourceRect参数 的左上角对应的点。 mergeAlpha：若要使用Alpha通道，请将该值设置为true。 18.3.3 copyChannel()方法 copyChannel()方法实现将一个Bitmapdata对象中某一个通 道的数据复制到另一个Bitmapdata对象的某个通道当中。 其用法格式如下所示： copyChannel(sourceBitmapData,sourceRect,destPoint,s ourceChannel,destChannel) 参数说明如下： sourceBitmapDat：要使用的目标位图图像。此图像可以是 自身图像，也可以是另一个图像。 sourceRect：指定要从源图像中复制的矩形Rectangle对象 。最大不能超过源图像。 destPoint：获取数据位置的目标Point对象，表示要在其 中放置新通道数据的矩形区域的左上角。 sourceChannel：源通道。 destChannel:uint：目标通道。 18.3.4 draw()方法 draw()方法可以实现使用Flash Player矢量渲染器在位图图像上绘制源显 示对象。而且可以指定矩阵颜色转换和混合模式和目标区域参数来控制呈 现的执行方式。此外还可以根据需要指定是否应在缩放时对位图进行平滑 处理。其用法格式如下所示： draw(source,matrix,colorTransform,blendMode,smoothing) 参数说明如下： source：目标位图，指要绘制到BitmapData对象的显示对象或BitmapData 对象。 matrix：矩阵对象，用于缩放、旋转位图或转换位图的坐标。默认值为 null。 colorTransform：颜色转换对象，用于调整位图的颜色值。默认值为null 。 blendMode：指定要应用于所生成位图的混合模式。默认值为null。 clipRect：矩形对象，定义要绘制的源对象的区域。默认值为null。 smoothing：用于确定因在matrix参数中指定缩放或旋转而对BitmapData 对象进行缩放或旋转以后，是否对该对象进行平滑处理。默认值为false 。 18.4 使用杂点功能 杂点功能用于实现在屏幕上实现类似于电视上“ 雪花”这样的效果。此类效果一般可以用于背景 图像，也可以在动画制作过程中实现动态切换效 果。在ActionScript 3.0中有两种方法可以实现 此效果，分别为：noise()方法和perlinNoise() 方法。 18.4.1 noise()方法 noise()方法可以实现对位图应用杂点效果，实现对位图图像的指定区域 中的像素应用随机颜色值。其用法格式如下所示： noise(randomSeed,low,high,channelOptions,grayScale) 参说说明如下： randomSeed：随机整数，用于决定图案的随机种子数。要实现真正的随机 结果，通常使用Math.random()方法为此参数传递随机数字。 low：整数，指明要为每个像素生成的最低值（0至255）。默认值为0。此 参数将决定产生的杂点的明暗程度，参数越大，亮度越高。 high：整数，指明要为每个像素生成的最高值（0至255）。默认值为255 。此参数同样将决定产生的杂点的明暗程度，参数越大，亮度越高。 channelOptions：整数，指明将向位图对象的哪个颜色通道应用杂点图案 。此数字可以是四个颜色通道ARGB值的任意组合。默认值是7。 grayScale：设置为true时，此参数对位图像素应用randomSeed值，可有 效地褪去图像中的所有颜色。此参数不影响Alpha通道。默认值为false。 18.4.2 perlinNoise()方法 perlinNoise() 方法可以创建更好的有机外观纹理效果，此方法 可以生成逼真、有机的纹理，是用于烟雾、云彩、水、火或爆炸 的理想图案。其用法格式如下所示： perlinNoise(baseX,baseY,numOctaves,randomSeed,stitch,frac talNoise:,channelOptions,grayScale,offsets) 参数说明如下： baseX：用于决定创建的图案的x大小的值。 baseY：用于决定创建的图案的y大小的值。 numOctaves：用于组合以创建此杂点的octave 函数或各个杂点函 数的数目。octave数目越大，创建的图像越精细，但处理时间会 更长。 randomSeed：随机种子数的功能与在noise()函数中的功能完全相 同。获取随机种子数，尽可能的使用Math.random()方法实现。 stitch：如果设置为true，此方法将尝试缝合或者平滑图像的过 渡边缘以形成无缝的纹理，用于作为位图填充进行平铺。 18.4.2 perlinNoise()方法 fractalNoise：此参数用于控制生成的渐变的边缘效果。 如果设置为true，则此方法生成的碎片杂点会对效果的边 缘进行平滑处理。如果设置为 false，则将生成湍流。带 有湍流的图像具有可见的不连续性渐变，可以使用它处理 更接近锐化的视觉效果。 channelOptions：channelOption参数的功能与在noise() 方法中的功能完全相同。此数字可以是四个颜色通道ARGB 值的任意组合。默认值是7。 grayScale (Boolean)：grayScale 参数的功能与在 noise() 方法中的功能完全相同。设置为true时，此参数 对位图像素应用randomSeed值，可有效地褪去图像中的所 有颜色。此参数不影响Alpha通道。默认值为false。 offsets：对应于每个octave的x和y偏移的点数组。通过处 理偏移值，可以平滑滚动图像层。偏移数组中的每个点将 影响一个特定的 octave 杂点函数。默认值为null。 18.5 位图应用效果 使用Bitmap和BitmapData类处理位图可以实现很 多不同的效果，本节将介绍使用scoll()方法实现 滚动位图效果和使用pixelDissolve()方法实现像 素溶解的效果。 18.5.1 滚动位图效果 在实际应用的过程中，位图常常需要滚动显示， 比如大的图片显示，地图显示等等。要实现此效 果，可以直接使用BitmapData类的scroll()方法 来实现。其用法格式如下所示： scroll(x:int, y:int) 参数说明如下： x：表示水平滚动量的一个整数。 y：表示垂直滚动量的一个整数。 18.5.2 像素溶解效果 在ActionScript 3.0中提供了一种位图切换的效果像素溶解 。该效果使用pixelDissolve()方法来实现，其用法格式如下所示 ： pixelDissolve(sourceBitmapData,sourceRect,destPoint,rando mSeed,numPixels,fillColor) 参数说明如下： sourceBitmapData：输入的目标位图图像。源图像可以是另一个 BitmapData对象，也可以引用当前BitmapData实例。 sourceRect：定义要用作输入的源图像区域的矩形。 destPoint：目标图像中与源矩形的左上角对应的点。 randomSeed:int：用于开始像素溶解的随机种子数目。 numPixels：每块溶解区域对应的大小，默认值是源区域（宽度x 高度）的1/30。 fillColor:uint：一个ARGB颜色值，用于填充其源值等于目标值 的像素。 18.6 滤镜类及应用 在ActionScript 3.0中加入了滤镜类，使用滤镜 类，可以实现改变颜色、形状、大小、旋转或其 它显示效果。本节将终点讲述滤镜类及其用法。 18.6.1 滤镜类 在ActionScript 3.0中所提供的滤镜都位于flash.filters包中， 这些滤镜既可以用于在Flash中创作的显示对象，也可以用于位图 对象。使用滤镜可以应用丰富的视觉效果来显示对象，实现模糊 、斜角、发光和投影等效果。 常用的滤镜类有6中，如表所示： 常见滤镜效果 滤镜类说 明 BlurFilter可使用BlurFilter类将模糊视觉效果应用于显示对象。 ConvolutionFil ter ConvolutionFilter类应用矩阵盘绕滤镜 效果。 DropShadowFi lter 可使用DropShadowFilter类向显示对象添加投影 GlowFilter使用GlowFilter类可以对显示对象应用发光效果。 GradientBevel Filter 使用GradientBevelFilter类可以对显示对象应用渐变斜角效果。 GradientGlow Filter 可使用GradientGlowFilter类对显 示对象应用渐变发 光效果。 18.6.2 投影效果 在ActionScript 3.0中，可使用DropShadowFilter类向显示对象添加 投影效果。其用法格式如下所示： DropShadowFilter(distance,angle,color,alpha,blurX,blurY,stren gth,quality,inner,knockout,hideObject) 参数说明如下： distance：表示阴影的偏移距离，以像素为单位。默认值为4。 angle：表示阴影的倾斜角度，用0到360度的浮点数表示。默认值为 4.5。 color：表示阴影颜色，采用十六进制格式0xRRGGBB。默认值为 0x000000，黑色。 alpha：表示阴影颜色的Alpha透明度值。有效值为0到1.0。默认值为1 。 blurX：水平模糊偏移量。有效值为0到255的浮点数。默认值为4。 blurY：垂直模糊偏移量。有效值为0到255.0的浮点数。默认值为4。 18.6.2 投影效果 strength：印记或跨页的强度。该值越高，压印的颜色越 深，而且阴影与背景之间的对比度也越强。有效值为0到 255。默认值为1。 quality：滤镜的品质。也可以使用BitmapFilterQuality 常数：BitmapFilterQuality.LOW、 BitmapFilterQuality.MEDIUM和 BitmapFilterQuality.HIGH。 inner：表示阴影是否为内侧阴影。值true指定内侧阴影。 值false指定外侧阴影。 knockout：表示是否应用挖空效果(true)，若应用，将有 效地使对象的填色变为透明，并显示文档的背景颜色。 hideObject：表示是否隐藏对象本身。如果值为true，则 表示没有绘制对象本身，只有阴影是可见的。 18.6.3 发光效果 在ActionScript 3.0中，显示对象上应用GlowFilter类可以实现加亮效果，能够使显 示对象看起来像是被下方的灯光照亮，可创造出一种柔和发光效果。其构造函数用法 格式如下所示： GlowFilter(color,alpha,blurX,blurY,strength,quality,inner,knockout) 参数说明如下： color：光晕颜色，采用十六进制格式0xRRGGBB。默认值为0xFF0000。 alpha：颜色的Alpha透明度值。有效值为0到1。默认值为1。 blurX：水平模糊偏移量。有效值为0到255的浮点数。以2的乘方值进行优化，呈现速 度比其它值更快。默认值为6。 blurY：垂直模糊偏移量。有效值为0到255的浮点数。以2的乘方值进行优化，呈现速 度比其它值更快。默认值为6。 strength：印记或跨页的强度。该值越高，压印的颜色越深，而且发光与背景之间的 对比度也越强。 有效值为0到255。默认值为2。 quality：滤镜的品质。可使用BitmapFilterQuality常数： BitmapFilterQuality.LOW、BitmapFilterQuality.MEDIUM、 BitmapFilterQuality.HIGH。 inner：指定发光是否为内侧发光。值true 指定发光是内侧发光。值false 指定发光 是外侧发光（对象外缘周围的发光）。 knockout：指定对象是否具有挖空效果。值为true 将使对象的填充变为透明，并显 示文档的背景颜色。 18.6.4 浮雕效果 在ActionScript 3.0中，可以使用GradientBevelFilter类实现对显示对 象或BitmapData对象应用增强的斜角，以产生类似浮雕的效果。也可以在 斜角上使用渐变颜色可以大大改善斜角的空间深度，使边缘产生一种更逼 真的三维外观效果。其构造函数用法格式如下所示： GradientBevelFilter(distance,angle,colors,alphas,ratios,blurX,bl urY,strength,quality,type,knockout) 参数说明如下： distance：偏移距离。有效值为0到8。默认值为4。 angle：偏移角度，以度为单位。有效值为0到360。默认值为45度。 colors：渐变中使用的RGB十六进制颜色值数组。 alphas：colors数组中对应颜色的Alpha透明度值的数组。数组中每个元 素的有效值为0到1。 ratios：颜色分布比例的数组；有效值为0到255。 blurX：水平模糊量。有效值为0到255。如果模糊量小于或等于1，则表明 原始图像是按原样复制的。默认值为 4。采用2的乘方值进行优化，呈现 速度比其它值更快。 18.6.4 浮雕效果 blurY：垂直模糊量。有效值为0到255。如果模糊量小于或等于 1，则表明原始图像是按原样复制的。默认值为 4。采用2的乘方 值进行优化，呈现速度比其它值更快。 strength：印记或跨页的强度。该值越高，压印的颜色越深，而 且斜角与背景之间的对比度也越强。 有效值为0到255。值为0表 示未应用滤镜。 quality：滤镜的品质。可以使用BitmapFilterQuality常数： BitmapFilterQuality.LOW、BitmapFilterQuality.MEDIUM和 BitmapFilterQuality.HIGH。 type：斜角效果的放置。可能的值为BitmapFilterType常数： BitmapFilterType.OUTER便是对象外缘上的斜角； BitmapFilterType.INNER表示对象内缘上的斜角； BitmapFilterType.FULL表示对象顶部的斜角。 knockout:Boolean：指定是否应用挖空效果。值为true将使对象 的填充变为透明，并显示文档的背景颜色。 18.6.5 渐变发光效果 在ActionScript 3.0中，使用GradientGlowFilter类可以实现对显示对象 或BitmapData对象应用增强的发光效果。此方法还可以很好的控制发光颜 色，从而产生一种更逼真的发光效果。此外，渐变发光滤镜还可以实现在 对象的内侧、外侧或上侧边缘应用渐变发光。其构造函数用法格式如下所 示： GradientGlowFilter(distance,angle,colorsl,alphas,ratios,blurX,bl urY,strength,quality,ty