• Like
浅析Flash特效开发 陈勇
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

浅析Flash特效开发 陈勇

  • 1,898 views
Published

 

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,898
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
55
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.  
  • 2.
    • flash 特效开发大概包括两大方面,一是二维特效(以对图片、文字本身应用效果为主),一种是三维特效(以粒子特效为主)
    • Flash 开发特效并非像那些特效软件如: AfterEffects 、 maya 、 3ds max 那么专业方便,但却已经足够应付那些商业应用
    • Flash 特效开发适合任意层次的开发者,即使你是 AS 新手,你也能够很容易进入特效开发行列,哪怕你是 AS 老手,很多特效你也要花功夫去研究。
    • flash 特效开发涉及很多学科,学了 as 之外,还包括物理学、数学、人工智能等
    • 它并不是独立存在的,学好它,你将很容易进入游戏行列,因为里面用到的很多算法游戏里都可以用得着。
    • 学好特效开发并不容易,但本次演讲我将尽量降低您的开发难度。
  • 3.  
  • 4.
    • getPixel(x:int,y:int):uint; getPixel32(x:int,y:int):uint;
    • getPixels(_rect:Rectancle):ByteArray;
    • noise(randomSeed:int,low:int=0,high:int=255,channel:int=7,gray:Boolean);
    • perlinNoise (baseX: Number , baseY: Number , numOctaves: uint ,
    • randomSeed: int , stitch: Boolean , fractalNoise: Boolean ,
    • channelOptions: uint = 7, grayScale: Boolean = false,
    • offsets: Array = null): void
    perlinNoise 可用来模拟一些自然现象与风景,像木材纹理、云彩、山脉、水波等等简单的数字随机杂点函数通常生成具有粗糙的对比度点的图像。 这种粗糙的对比度在自然界中通常是找不到的。 Perlin 杂点算法混合了在不同的详细级别上进行操作的多个杂点函数。 此算法在相邻的像素值间产生较小的变化。
  • 5.
    • fillRect(rect:Rectangle,color:uint);
    • lock()/unlock();
    • applyFilter(_bmd:BitmapData,rect:Rectangle,point:Point,filter:BitmapFilter);
    • threshold(sourceBitmapData: BitmapData , sourceRect: Rectangle ,
    • destPoint: Point , operation: String , threshold: uint , color: uint = 0,
    • mask: uint = 0xFFFFFFFF, copySource: Boolean = false): uint );
  • 6. 混合模式发生在两个图像之间,它是将 显示对象 的颜色信息与 背景 的颜色信息 进行混合生成混合后的 目的图像 , 显示对象 会与 背景 在相同位置进行像素级的混合计 算,以便为 目的图像 在相同位置生成处理后的像素信息 任何显示对象都具有 blendMode 属性,因此,任何显示对像之间都可以进行像素 级混合 每个像素都由三种原色(红、绿、蓝)组成,介于 0x00~0xFF 之间(换算成 10 进 制为 0~255 )
  • 7.  
  • 8. ColorTransform: 调整显示对象的颜色值。 可以将颜色调整或 颜色转换 应用于所有四种通道:红色、绿色、蓝色和 Alpha 透明度 计算公式: newRed=(_oldRed*redMultiplier)+redOffset newGreen=(_oldGreen*greenMultiplier)+greenOffset newBlue=(_oldBlued*blueMultiplier)+blueOffset newAlpha=(_oldAlpha*alphaMultiplier)+alphaOffset
  • 9.  
  • 10. 经常用于特效的颜色运算中,通常运算符有: >> ( 位向右移) 或者 <<( 位向左移) 或者 | 或者 & 例:十六进制红色: var _color:uint=0xff0000; 取红色的数值为: var _red:uint=_color>>16 0xff0000 二进制: 111111110000000000000000 去掉 11111111 1111 0001 & 按位 与 0001 1011 0001 | 按位 OR 1011
  • 11. var _red:uint=200; var _green:uint=100; var _blue:uint=50; var _color:uint=_red<<16|_green<<8|_blue; trace(_color.toString(16)); // c86432 var _color:uint=0xffa78a; var _red:uint=_color>>16; var _green:uint=_color>>8&0xff; var _blue:uint=_color&0xff; trace(_red);//255 trace(_green);//167 trace(_blue);//138
  • 12. append 矩阵相乘 appendRotation identity 单位或者标准化 transformVectors appendTranslation 透视 :在 2D 平面上将平行线表示成聚合于一个消失点,从而获得深度和距离的视觉效果 投影 :为多维对象生成 2D 图像; 3D 投影将 3D 点映射到 2D 平面 旋转 :通过按圆周运动的方向移动对象内的每个点来更改对象的方向(通常也会更改其位置) 转换 :通过平移、旋转、缩放、倾斜或这些操作的组合来更改 3D 点或点集 平移 :通过将对象内的每个点往同一方向移动相同的距离来更改对象的位置
  • 13. 旋转方向( appendRotation ): X 大于零 ( 向里) Y 大于零 ( 向里) 反之 反之 Z 大于零 ( 向里) 反之 注意: idensity 在每次变换之前需写
  • 14. 可用作管理 3 维空间点的数据结构 如果将某个显示对象的 Z 属性显示设置为数值 ,则该对象会 自动创建一个 3D 转换矩阵 。您可以通过更改此矩阵来 修改该对象的 3D 转换 设置 笛卡儿坐标系
    • 在三维粒子效果中经常结合 Matrix3D 进行轴 x 、 y 、 z 轴方向的旋转操作
    • 对两个矢量之间可以进行角度、距离、缩放等计算
    • 可进行叉积计算
    Z X Y X Y Z W
  • 15. (0,0,-focalLength) 投影平面 stage.stageWidth/2( 舞台宽一半 ) focalLength( 焦距 ) fieldOfView( 视野 ) focus( 焦点 ) _pp. focalLength =( stage.stageWidth /2)/( Math.PI /180*_pp. fieldOfView *0.5);
      • var _pp: PerspectiveProjection=new PerspectiveProjection();
      • _pp. fieldOfView =55
    focalLength 属性表示视点原点 (0,0,0) 与显示点在 z 轴上的位置 之间的距离
  • 16. 卷积将输入图像的像素与相邻的像素合并 以生成图像, 可用于位图对象以及显示 对象应用广泛的变形,可实现的效果包括:模糊、边缘检测、锐化、浮雕、斜角等等 P N N N N N N N N 主要是在 P 周围取 N*N 区域做处理,通常 N 取 3 、 5 、 7 ,即为 3*3 、 5*5 、 7*7 , N 越小,效果越不明显,但会减轻 CPU 计算量 dst (x, y) = ((src (x-1, y-1) * a0 + src(x, y-1) * a1.... src(x, y+1) * a7 + src (x+1,y+1) * a8) / divisor) + bias ConvolutionFilter (matrixX: Number = 0, matrixY: Number = 0, matrix: Array = null, divisor: Number = 1.0, bias: Number = 0.0, preserveAlpha: Boolean = true, clamp: Boolean = true, color: uint = 0, alpha: Number = 0.0) 例 : _convoFilter = new ConvolutionFilter(3, 3, [1, 1,1, 1, 1, 1, 1, 1, 1], 9);// 模糊:
  • 17. 常用滤镜参数: http://www.adobe.com/devnet/flash/articles/matrix_transformations_05.html 效 果:锐化 矩阵特点:中心上下左右值为负,且相等 , 且 divisor 为矩阵值和 效 果:模糊 矩阵特点:矩阵值相等,且 divisor 为矩阵值 和 效 果:浮雕 矩阵特点: 矩阵 对角线值取相反数,和为零 , 且 divisor 为 1
  • 18. Sobel 算子 边缘检测 边缘就是像素值有阶跃变化的像素集合 , 边缘检测的算法很多,有著名的 Sobel 、 Roberts 、 Prewitt 、 Laplacian 算法 边缘检测实例: http://www.gskinner.com/blog/archives/2005/08/flash_8_webcam.html
  • 19. redResult = (a[0] * srcR) + (a[1] * srcG) + (a[2] * srcB) + (a[3] * srcA) + a[4] greenResult = (a[5] * srcR) + (a[6] * srcG) + (a[7] * srcB) + (a[8] * srcA) + a[9] blueResult = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14] alphaResult = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19] 该类主要更改图像的 RGB 与 Alpha 值 , 可对图像饱和度、色相、亮度、对比度 进行更改 .
  • 20. 更改饱和度算法 计算机图形颜色亮度常量 private static var _nRed : Number = 0.3086; private static var _nGreen : Number = 0.6094; private static var _nBlue : Number = 0.0820; var srcRa : Number = (1 - nLevel) * _nRed + nLevel; var srcGa : Number = (1 - nLevel) * _nGreen; var srcBa : Number = (1 - nLevel) * _nBlue; var srcRb : Number = (1 - nLevel) * _nRed; var srcGb : Number = (1 - nLevel) * _nGreen + nLevel; var srcBb : Number = (1 - nLevel) * _nBlue; var srcRc : Number = (1 - nLevel) * _nRed; var srcGc : Number = (1 - nLevel) * _nGreen; var srcBc : Number = (1 - nLevel) * _nBlue + nLevel; var Saturation_Matrix : Array = [srcRa, srcGa, srcBa, 0, 0, srcRb, srcGb, srcBb, 0, 0, srcRc, srcGc, srcBc, 0, 0, 0, 0, 0, 1, 0]; this.filters = [new ColorMatrixFilter (Saturation_Matrix)];
  • 21. 更改对比度算法 var Scale : Number = nLevel * 0.06+1; var Offset : Number = nLevel*-3.81; var Contrast_Matrix : Array = [Scale, 0, 0, 0, Offset, 0, Scale, 0, 0, Offset, 0, 0, Scale, 0, Offset, 0, 0, 0, 1, 0];
  • 22. 此滤镜类经常用来开发水波、放大镜、哈哈镜效果,而且效果非常真实,主要因为通过计算可以对位图进行扭曲。 此滤镜使用了如下公式: dstPixel[x, y] = srcPixel[x + ((componentX(x, y) - 128) * scaleX) / 256, y + ((componentY(x, y) - 128) *scaleY) / 256) DisplacementMapFilter( mapBitmap:BitmapData, mapPoint:Point, componentX:Number, componentY:Number, scaleX:Number, scaleY:Number , [mode:String], [color:Number], [alpha:Number]) _filter = new DisplacementMapFilter(_buffer1, new Point(), BitmapDataChannel.BLUE, BitmapDataChannel.BLUE, 10, 50, DisplacementMapFilterMode.WRAP); 例:
  • 23. 注: componentX 与 componentY 代表颜色通道值 , Red 、 Green 、 Blue 、 Alpha 分别代表 1 、 2 、 4 、 8 , 如果看到复数 13 为 1+4+8=13 即为 Red 、 Blue 、 Alpha 三个通道 scaleX 与 scaleY 即 代表像素偏移比率 ,假如在被参考的 BitmapData 中 scaleX == 10, componentX(10, 10) == 1 然后这 BitmapData 在 (10, 10) 的 Red 值是 256 则使用这個 DisplacementMapFilter 类 它的 (10, 10) 像素就会被往右移 ((256 - 128)/128)*10 == 10 像素
  • 24.  
  • 25.  
  • 26. flintParticles Site: http://www.flintParticles.org 特点:
    • 几乎可以创造自然界中所有的常用粒子效果
    • 很容易模拟出现实中的真实自然效果,如,下雪、爆炸、烟雾、水波等等
    • 也容易创建很丰富的字体特效
  • 27. flintParticles 结构分析 此类库结构分为三个包 开发分析:见 word
  • 28. purseParticles (脉冲粒子系统) Site: http://www.rogue-development.com/pulseParticles.html explorer: http://rogue-development.com/pulse/explorer /# 图
    • 基于粒子行为对粒子效果进行配置
    • 易于扩展
    • 可通过粒子浏览器来创建自己想要的粒子效果
  • 29. http://wonderfl.net/c/bcD4/ 原理:
    • 创建 4 个杂点函数 octave
    • 动态改变每个杂点函数 octave 的 x 与 y 偏移
    • 量相对应 的数组
    • 注意设置 grayScale 为 true, 以便将 r 、 g 、 b
    • 通道的值 设置为相同
    • 添加一个新的布林滤镜来做颜色混合(正片叠底)
    每个 octave 函数的频率都是其前面一个 octave 函数频率的两倍。 Perlin 杂点被描述为“杂点的碎片总和”,因为它将多组杂点数据与不同级别的细节组合在一起
  • 30. http://wonderfl.net/c/hb3M/ http://wonderfl.net/c/5ayj/
  • 31.  
  • 32. 粒子系统就像一段能够产生粒子生命的程序。这段程序能够影响粒子的运动,粒子的属性,测试粒子与场景中其它对象的相互作用,并且可以定义每个时间点上粒子的状态和行为。粒子生命周期用来描述粒子从产生到消亡之间产生的变化,期间粒子所受的外力和各种触发器可以决定粒子在下一个时刻的状态,通过观察粒子的生命周期更有利于我们理解粒子的工作方式
  • 33. ( 1 )粒子基于特殊的设置来创建,但是它不得不由某些事件来引导和指挥。   ( 2 )动作被添加到粒子的某个位置,使粒子加速,向目标方向运动。这一系列动作是由力来控制的。   ( 3 )粒子将一直保持某一状态,直到一个事件产生。   ( 4 )事件测试能改变粒子的当前状态,它们像是一个触发器。当一个事件产生时,一个决定就不得不作出,粒子就可以进入一个新的状态。   ( 5 )一个新的状态可以改变粒子的某些属性,比如:速度、形状、尺寸、旋转,或者使旧粒子产生新的粒子。   ( 6 )这种力可以是各种力,比如风力、重力。   ( 7 )一个粒子可以被测试与其他对象撞击,或者被约束在某个对象上运动。   ( 8 )粒子的生命周期是另一种属性,它可以被测试,也可以被用来改变粒子状态,或者在若干帧后使粒子消失。   ( 9 )粒子还可以被指定任何一种材质。
  • 34.  
  • 35. Foundation ActionScript 3.0 Image Effects http://www.riabook.cn/en_book/Foundation-ActionScript-3-Image-Effects.htm
    • Filters And Blend Modes
    • Bitmap And BitmapData
    • Pixel Bender and Shaders
    • ActionScript in the third demension
    • Using an Animation and Effects Library
    • Text Effects
    • Video Effects
    • Interactive Effects
    部分目录赏析 download
  • 36. Papervision3D Essentials 特效部分目录赏析
    • Chapter 10 Particles
    • Chapter 11 Filters And Effects
    http://www.riabook.cn/en_book/papervision3d-essentials.htm download
  • 37.  
  • 38.