[flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

38

Upload: shanda-innovation-institute

Post on 18-Nov-2014

631 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 2: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

flash 特效开发大概包括两大方面,一是二维特效(以对图片、文字本身应用效果为主),一种是三维特效(以粒子特效为主)

Flash 开发特效并非像那些特效软件如: AfterEffects、maya、 3ds

max 那么专业方便,但却已经足够应付那些商业应用 Flash 特效开发适合任意层次的开发者,即使你是 AS 新手,你也能够很容

易进入特效开发行列,哪怕你是 AS老手,很多特效你也要花功夫去研

究。

flash 特效开发涉及很多学科,学了 as 之外,还包括物理学、数学、人工智能等

它并不是独立存在的,学好它,你将很容易进入游戏行列,因为里面用到的很多算法游戏里都可以用得着。

学好特效开发并不容易,但本次演讲我将尽量降低您的开发难度。

Page 3: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 4: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

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):voidperlinNoise 可用来模拟一些自然现象与风景,像木材纹理、云彩、山脉、水波等等简单的数字随机杂点函数通常生成具有粗糙的对比度点的图像。 这种粗糙的对比度在自然界中通常是找不到的。 Perlin 杂点算法混合了在不同的详细级别上进行操作的多个杂点函数。 此算法在相邻的像素值间产生较小的变化。

Page 5: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

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);

Page 6: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

混合模式发生在两个图像之间,它是将显示对象的颜色信息与背景的颜色信息进行混合生成混合后的目的图像 , 显示对象会与背景在相同位置进行像素级的混合计算,以便为目的图像在相同位置生成处理后的像素信息

任何显示对象都具有 blendMode 属性,因此,任何显示对像之间都可以进行像素级混合

每个像素都由三种原色(红、绿、蓝)组成,介于 0x00~0xFF 之间(换算成 10 进制为 0~255 )

Page 7: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 8: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

ColorTransform: 调整显示对象的颜色值。 可以将颜色调整或颜色转换应用于所有四种通道:红色、绿色、蓝色和 Alpha 透明度计算公式:

newRed=(_oldRed*redMultiplier)+redOffset

newGreen=(_oldGreen*greenMultiplier)

+greenOffset

newBlue=(_oldBlued*blueMultiplier)+blueOffset

newAlpha=(_oldAlpha*alphaMultiplier)

+alphaOffset

Page 9: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 10: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

经常用于特效的颜色运算中,通常运算符有: >> (位向右移)或者 <<( 位向左移)或者 |或者 &

例:十六进制红色: var _color:uint=0xff0000;

取红色的数值为: var _red:uint=_color>>16

0xff0000 二进制: 111111110000000000000000去掉

11111111

1111

0001& 按位 与0001

1011

0001| 按位 OR1011

Page 11: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

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

Page 12: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

append 矩阵相乘appendRotation

identity 单位或者标准化

transformVectors

appendTranslation

透视 :在 2D 平面上将平行线表示成聚合于一个消失点,从而获得深度和距离的视觉效果 投影:为多维对象生成 2D 图像; 3D 投影将 3D 点映射到 2D 平面 旋转:通过按圆周运动的方向移动对象内的每个点来更改对象的方向(通常也会更改其位置) 转换:通过平移、旋转、缩放、倾斜或这些操作的组合来更改 3D 点或点集 平移:通过将对象内的每个点往同一方向移动相同的距离来更改对象的位置

Page 13: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

旋转方向( appendRotation ):

X 大于零 ( 向里)

Y 大于零 ( 向里)

反之

反之

Z 大于零 ( 向里)反之

注意: idensity 在每次变换之前需写

Page 14: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

Z

X

Y

X

Y

Z

W

可用作管理 3 维空间点的数据结构

如果将某个显示对象的 Z 属性显示设置为数值 ,则该对象会自动创建一个 3D 转换矩阵 。您可以通过更改此矩阵来修改该对象的 3D 转换设置

笛卡儿坐标系

在三维粒子效果中经常结合 Matrix3D 进行轴 x 、 y 、 z 轴方向的旋转操作 对两个矢量之间可以进行角度、距离、缩放等计算 可进行叉积计算

Page 15: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

(0,0,-focalLength)

投影平面

stage.stageWidth/2( 舞台宽一半 )

focalLength(焦距 )

_pp.focalLength=(stage.stageWidth/2)/(Math.PI/180*_pp.fieldOfView*0.5);

var _pp:PerspectiveProjection=new PerspectiveProjection();_pp.fieldOfView=55

fieldOfView( 视野 )

focus(焦点 )

focalLength 属性表示视点原点 (0,0,0) 与显示点在 z 轴上的位置 之间的距离

Page 16: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

卷积将输入图像的像素与相邻的像素合并以生成图像,可用于位图对象以及显示对象应用广泛的变形,可实现的效果包括:模糊、边缘检测、锐化、浮雕、斜角等等

P

N NN

N

NNN

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);// 模糊:

Page 17: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

常用滤镜参数:

http://www.adobe.com/devnet/flash/articles/matrix_transformations_05.html

效 果:锐化矩阵特点:中心上下左右值为负,且相等 ,且divisor 为矩阵值和

效 果:模糊矩阵特点:矩阵值相等,且 divisor 为矩阵值 和

效 果:浮雕矩阵特点:矩阵对角线值取相反数,和为零 ,且divisor为 1

Page 18: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

Sobel 算子

边缘检测

边缘就是像素值有阶跃变化的像素集合 , 边缘检测的算法很多,有著名的 Sobel 、Roberts 、 Prewitt 、 Laplacian 算法

边缘检测实例: http://www.gskinner.com/blog/archives/2005/08/flash_8_webcam.html

Page 19: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

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 值 , 可对图像饱和度、色相、亮度、对比度进行更改 .

Page 20: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

更改饱和度算法

计算机图形颜色亮度常量

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)];

Page 21: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

更改对比度算法

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];

Page 22: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

此滤镜类经常用来开发水波、放大镜、哈哈镜效果,而且效果非常真实,主要因为通过计算可以对位图进行扭曲。

此滤镜使用了如下公式:

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);

例:

Page 23: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

注: 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

像素

Page 24: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 25: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 26: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

flintParticlesSite: http://www.flintParticles.org特点:

几乎可以创造自然界中所有的常用粒子效果 很容易模拟出现实中的真实自然效果,如,下雪、爆炸、烟雾、水波等等 也容易创建很丰富的字体特效

Page 27: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

flintParticles 结构分析此类库结构分为三个包

开发分析:见 word

Page 28: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

purseParticles (脉冲粒子系统) Site: http://www.rogue-development.com/pulseParticles.htmlexplorer: http://rogue-development.com/pulse/explorer/# 图

基于粒子行为对粒子效果进行配置易于扩展可通过粒子浏览器来创建自己想要的粒子效果

Page 29: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

http://wonderfl.net/c/bcD4/

原理:创建 4个杂点函数 octave

动态改变每个杂点函数 octave的 x 与 y 偏移 量相对应 的数组注意设置 grayScale为 true, 以便将 r、 g 、 b

通道的值 设置为相同添加一个新的布林滤镜来做颜色混合(正片叠底)

每个 octave 函数的频率都是其前面一个 octave 函数频率的两倍。 Perlin 杂点被描述为“杂点的碎片总和”,因为它将多组杂点数据与不同级别的细节组合在一起

Page 30: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

http://wonderfl.net/c/hb3M/

http://wonderfl.net/c/5ayj/

Page 31: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 32: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

粒子系统就像一段能够产生粒子生命的程序。这段程序能够影响粒子的运动,粒子的属性,测试粒子与场景中其它对象的相互作用,并且可以定义每个时间点上粒子的状态和行为。粒子生命周期用来描述粒子从产生到消亡之间产生的变化,期间粒子所受的外力和各种触发器可以决定粒子在下一个时刻的状态,通过观察粒子的生命周期更有利于我们理解粒子的工作方式

Page 33: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

( 1 )粒子基于特殊的设置来创建,但是它不得不由某些事件来引导和指挥。   ( 2 )动作被添加到粒子的某个位置,使粒子加速,向目标方向运动。这一系列动作是由力来控制的。   ( 3 )粒子将一直保持某一状态,直到一个事件产生。   ( 4 )事件测试能改变粒子的当前状态,它们像是一个触发器。当一个事件产生时,一个决定就不得不作出,粒子就可以进入一个新的状态。   ( 5 )一个新的状态可以改变粒子的某些属性,比如:速度、形状、尺寸、旋转,或者使旧粒子产生新的粒子。   ( 6 )这种力可以是各种力,比如风力、重力。   ( 7 )一个粒子可以被测试与其他对象撞击,或者被约束在某个对象上运动。   ( 8 )粒子的生命周期是另一种属性,它可以被测试,也可以被用来改变粒子状态,或者在若干帧后使粒子消失。   ( 9 )粒子还可以被指定任何一种材质。

Page 34: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 35: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

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

Page 36: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)

Papervision3D Essentials特效部分目录赏析

Chapter 10 Particles Chapter 11 Filters And Effects

http://www.riabook.cn/en_book/papervision3d-essentials.htm

download

Page 37: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)
Page 38: [Flash开发者交流][2010.07.24]浅析flash特效开发(陈勇)