Adobe Flash Platform Summit China 2010
Who am I?
1999
2004
2008
现在
AVM1 Math.三角函数
左脑+右脑
Adobe Flash Platform Summit China 2010
议题
Drawing API最直观的解释?
Flash Player 10上绘图API的新增项
AS3中的颜色体系?
绘制图形
ColorTransform类
滤镜Filters
BitmapData类
内置3D绘图API
Pixel Bender Shaders
Drawing API相关用途
感谢ActionScript 3.0 Image Effects一书作者Todd Yard授权演示其部分创作范例
Adobe Flash Platform Summit China 2010
✗
Adobe Flash Platform Summit China 2010
✓
Adobe Flash Platform Summit China 2010
Flash Player 10上Drawing API新增项
Pixel Bender
使用矢量(类型数组)提升内存使用效率
新增一个非零缠绕规则
3D绘图API透视
图形数据类
Adobe Flash Platform Summit China 2010
AS3中的颜色体系– 色彩
Adobe Flash Platform Summit China 2010
AS3中的颜色体系 – 换算机制
11111111 11111111 11111111
0xFF000 红 0x0000FF 蓝 0x00FF00 绿
var myColor16:Number = 0xFF<<16|0xFF<<8|0xFF
var myColor10:Number = 255<<16|255<<8|255
var myColor2:Number=1111111<<16|11111111<<8|11111111
请牢记 unit 类型
Adobe Flash Platform Summit China 2010
绘制图形– AS2/3演变
ActionScrpt 2.0
myMC.lineTo(100,100)
ActionScript 3.0
mySprite.graphics.lineTo(100,100)
myMC.graphics.lineTo(100,100)
myShape.graphics.lineTo(100,100);
Performance - clear()
Adobe Flash Platform Summit China 2010
绘制图形– 一切开始于画(直)线
lineStyle(width,color,alpha)
仅用作设定未来绘制线条的样式
clear() – 清除一切(清除线条,清除附加样式,绘图坐标同
时归零)
下一条线的起点,默认是前一条线的终点
moveTo() - 指定绘制线条的起始坐标
Adobe Flash Platform Summit China 2010
绘制图形– 一切开始于画(曲)线
curveTo(x1,y1,x2,y2)
x1,y1- 控制点
x2,y2- 曲线终点
moveTo(x0,y0)仍然可以决定曲线绘制的起点
Adobe Flash Platform Summit China 2010
绘制图形 - 画线是基调,填充是必须
moveTo,LineStyle,beginFill,lineTo
(CurveTo),endFill
不设置LineStyle线条,绘制不可见边界
beginFill(),将潜在地结束任何以前的填充
调用endFill()平滑结束填充
AS3自带内置形状绘制使填充变的更容易,包括
drawCircle,drawEclipse,drawRect,drawRoundRect等
Adobe Flash Platform Summit China 2010
绘制图形 - 渐变填充比单色填充更常见
lineGradientStyle() - 渐变笔触
beginGradientFill() - 渐变填充
GradientType.LINEAR或GradientType.RADIAL
import flash.geom.Matrix - 表示定位或填充的旋转
createGradientBox(width,height,rotation,startX,startY)
var myMatrix :Matrix = new Matrix();
myMatrix.createGradientBox
(width,height,rotation,startX,startY);
graphics.beginGradientFill
(GradientType.LINEAR,colors,alphas,ratios,myMatrix);
Adobe Flash Platform Summit China 2010
绘制图形 – 填充已经不仅仅是针对Vectors!
beginBitmapFill() / lineBitmapStyle()
beginBitmapFill(
bitmap:BitmapData, //用于填充的位图
matrix:Matrix=null, // 移动,缩放,旋转填充位图形状的变形矩阵
repeat:Boolean=true, //位图是否在形状空间内循环填充
smooth:Boolean=true // 告知Flash Player提供一个形状变形时的平滑处理
)
增强的绘图组合命令graphics.drawPath(),要善用
期待加入copyGraphics() :
没有办法copy graphics到另外一个graphics对象之上
Adobe Flash Platform Summit China 2010
绘制图形 – 设计与编程的完美结合!myoats!
http://www.myoats.com/create.aspx
Adobe Flash Platform Summit China 2010
ColorTransform类– Color类的优秀接班人
ActionScript 2.0
Color, setRGB()和setTransform()
ActionScript 3.0
Color - ColorTransform
任何Sprite和MovieClip对象都具备transform属性
mySprite.transform.colorTransform
继承Sprite或MovieClip的类,直接获得
transform.colorTransform属性
Adobe Flash Platform Summit China 2010
ColorTransform类– 如何使用它
myTransform = new ColorTransform(参数)
红色系数,绿色系数,蓝色系数,alpha系数,
红色偏移量,绿色偏移量,蓝色偏移量,alpha偏移量
色彩转换通道公式:新红色值=旧红色值*红色系数+红色偏移量
myTransform = new ColorTransform(0.2,0.4,0.12,0.6,244,112,96,72)
嵌入图片作为Bitmap属于可显示对象,具备transform属性
设置Bitmap的transform.colorTransform属性,实现图像的某种效果
“myPic.transform.colorTransform = new ColorTransform()”-
Reset!
Adobe Flash Platform Summit China 2010
滤镜– 像操作PS一样
在Flash IDE中
在AS3中
flash.filters
常用滤镜包括
DropShadowFilter,BlurFilter,GlowFilter,BevelF
ilter,GradientGlowFilterhe和
GradientBevelFilter
滤镜的目的:封装对于显示对象的效果操作
简单的属性传递和方法调用完成滤镜效果
所有显示对象的filters属性是一个滤镜对
象数组
mySprite.filters = [new DropShadowFilter()];
Adobe Flash Platform Summit China 2010
BitmapData类 – 通向绘图巅峰的必经之途
flash.display.BitmapData
New BitmapData参数
transparent为true,Bitmap使用32位; 为false,使用24位表示
AS2,AttachBitmap为MC添加一个位图
AS3
不能直接使用addChild BitmapData的方法
addChild只对DisplayObject继承类起作用,如Sprite,MovieClip和TextArea
BitmapData不继承自DisplayObject
使用Bitmap类作为BitmapData实例的容器
var bitmapdata:BitmapData = new BitmapData(100,100,false,0xff0000);
var bitmap:Bitmap = new Bitmap(bitmapdata);
addChild(bitmap);
每一个像素都可以使用getPixel和getPixel32方法
Adobe Flash Platform Summit China 2010
BitmapData类 - 最常用的绘图API类
在BitmapData实例内绘制像素数据
public function draw(
source:IBitmapDrawable,
matrix:Matrix = null,
colorTransform:ColorTransform = null,
blendMode:String = null,
clipRect:Rectangle = null,
smooting:Boolean = false
):void
source是重要参数,是一个DisplayObject或者BitmapData实例,都实现
IBitmapDrawable接口
Bitmap高级应用
像素随机化
对BitmapData实例应用滤镜
channel操作
粒子系统
Adobe Flash Platform Summit China 2010
BitmapData – Some tips
将尽可能多相同的Bitmap指向同一个BitmapData引用以节省内存
var copyBitmap:Bitmap = new Bitmap
(originalBitmap.bitmapData);
BitmapData也适用于video
data = new BitmapData( _width, _height, true, 0xFFFFFF );
data.draw( myvideoContent, new Matrix( 1, 0, 0, 1, -
myBitmap.x, - myBitmap.y ), null, null, new Rectangle( 0, 0,
_width, _height ) );
myBitmap.bitmapData = data;
BitmapData没有最完美的优化
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
- Demo
http://code.google.com/p/stardust-particle-engine/
Fluid Solver HD
http://code.google.com/p/in-spirit/wiki/FluidSolver
Adobe Flash Platform Summit China 2010
内置3D绘图API –Flash Player 10+支持
Perspective Transform = 3d Effects,是Drawing API的扩展
通过display object变形来实现
sprite.z = 100;
sprite.rotationX=45;
sprite.transform.perspectiveProjection
DisplayObject.transofrm.matrix3D可以访问display
object的3D变化值
DisplayObject.transform.perspectiveProjection提供
display object三维的透视投影对象访问
Adobe Flash Platform Summit China 2010
内置3D绘图API –从XYZ到UVT
针对bitmaps,设置UVTdata
某种程度上 UVT==XYZ
U == 水平横坐标,
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
从0到1
V == 垂直竖坐标,标准从0到1
T=?
T= focalLenth/(focalLength+Z)
T就是物体在三维空间内的透视缩
放比率
0.0
kernel invertRGB
{
input image4 src;
output float4 dst;
void
evaluatePixel()
{
float4 inputColor = sampleNearest(src,
outCoord());
dst.rgb = float3(1.0, 1.0, 1.0) -
inputColor.rgb;
dst.a = inputColor.a;
}}
Adobe Flash Platform Summit China 2010
Pixel Bender技巧
当使用applyFilter时,要小心使用sourceRect
比较使用ShaderJob和ApplyFilter,使用ShaderJob
ShaderJob 92-99ms
ApplyFilter 104-109ms
ShaderJob 快10%
处理速度:BitmapData>ByteArray>Vector.
ShaderJob在BitmapData上,92-99ms
ShaderJob在ByteArray上,147-172ms
ShaderJob在Vector.上,167-192ms
BitmapData上ShaderJob比Vector.上快50%左右
放弃Alpha == 0的检测,在必要的时候,可以提升30%-50%的渲染速
度
把input实例在处理ShaderJob或ApplyFilter后,作为output实例,性
能将会损失20%-30%
Adobe Flash Platform Summit China 2010
Adobe Flash Platform Summit China 2010
参考文献
http://www.flashandmath.com/advanced/smoothdraw/index.html
http://help.adobe.com/zh_CN/ActionScript/3.0_ProgrammingAS3/
WS5b3ccc516d4fbf351e63e3d118a9b90204-7e25.html
Adobe Flash Platform Summit China 2010
绘图
API
游戏
场景 动态
特效
绘图
应用
数据
图表 协作
工具
共享
白板
Geo
应用
增强
现实
Adobe Flash Platform Summit China 2010