ActionScript 3.0综合应用案例(图像识别+位图滤镜+Molehill)
- 博客分类:
- 技术杂绘
本文是对ActionScript 3.0的一个综合应用案例,涉及到图像识别,位图滤镜以及Molehill底层API等方面的知识。请确保安装了Adobe Labs里发布的Flash Player 11,0,0,58 (代号Incubator),本案例的开发环境如下:
Flash Builder 4
Flex SDK 4.5 Hero (Build 19786)
AGALMinAssembler
请参考这篇文章在Flash Builder里配置Incubator的开发环境:
如何通过Flex SDK或者Flash Professional来开发测试Incubator
请点击图片查看最终效果,以确保运行时安装无误。
本文的几个知识点:
简单的识别动作的方法
水波效果的原理
使用Molehill底层API绘制水波平面
简单的识别动作的方法
这个案例里的动作识别原理非常之简单,简而言之就是对比两张图片然后找出不同的区域,所以如果把摄像头对准车水马龙的大街,那么结果将是一幅波涛汹涌的场面。
如果你从来没有和摄像头打过交道,那么请看下面的这几行代码: var cam:Camera = Camera.getCamera("0"); cam.setMotionLevel(100); video = new Video(800,600); video.attachCamera(cam);摄像头可以将捕捉来的图像放在一个Video的实例里,然后既可以用attachChild(video)直接放在舞台上,也可以作为位图源在后续的BitmapData中绘制。比如这样: sourceBitmapData = new BitmapData(video.width,video.height);
sourceBitmapData.draw(video,drawMatrix); 前面提到了,简单的动作捕捉就是对前后两帧的图像进行像素对比,这需要对图像进行逐行扫描。但是如果按照原图像的大小比如800×600来扫描,那么在两层for循环中需要一共检测480,000个像素点,这对CPU来说是一个不小的开销,所以我们不这样做。一个技巧是利用bitmapData.draw的其中一个参数Matrix将原始图像"缩放"到一个小的bimapData上,比如下面就是缩放成80×60的一个例子: //video(800 x 600)
drawMatrix = new Matrix(.1,0,0,.1,0,0);
sourceBitmapData.draw(video,drawMatrix); 代码中,Matrix的第一个和第四个参数分别是横向与纵向的缩放比例,Matrix不是一个新的类,有关Matrix的使用请参考ActionScript帮助文档。下一步就是在每帧都与前一帧图片对比,扫描所有像素,将颜色差异超过一定值的点标记出来,最后取所有标记点的中心点,这个点就是我们要捕捉的动点。 sourceBitmapData.draw(video,drawMatrix);
var sumx:Number=0;
var sumy:Number=0;
var total:int=0;
for(var i:int=0;i2000000){
total++;
sumx+=i;
sumy+=j;
}
}
}
lastBitmapData = sourceBitmapData.clone();
var targetPoint:Point = new Point(sumx/total, sumy/total); 水波效果的原理
这个效果好多年前就见过,至今依然印象深刻,我认为是对ConvolutionFilter, DisplacementMapFilter和BendMode应用的一个经典案例(本案例中没有用到DisplacementMapFilter)。下面我再来介绍一下这个水波效果的原理以及代码。ConvolutionFilter(卷积滤镜)可以模拟波的传播与反射。以前我介绍过这个滤镜,它是用一个(M,N)矩阵来表示一个像素受其周围各像素颜色的影响程度。比如下面的这个矩阵,它表示一个点周围的8个点对它的颜色影响都是1。 //定义矩阵的列数与行数
var matrixX:Number = 3;
var matrixY:Number = 3;
var matrix:Array = new Array(
1,1,1,
1,1,1,
1,1,1
);
//这个参数是矩阵各个数值之和,如果为0则取1
var div:int = 9;
convolutionFilter = new ConvolutionFilter(matrixX,matrixY,matrix,div,-0.2) ; 卷积滤镜会把这个公式应用在图片上的每个像素点上面,如果每帧都运行一次,那么最后的结果就是颜色值突出的点会向周围扩散,最后所有的像素点颜色等同。这和波向周围传播的表现形式一模一样。而如果这种传播到达了图像边缘,其反应可以由ConvolutionFilter构造函数的第7个参数clamp决定,如果值是true,那么这种扩散会朝图片内部反射。这又和波的反射特性不谋而合。
卷积滤镜模拟波的传播与反射效果
但只是通过卷积滤镜是做不到上图的效果,还要使用图形叠加来完成波峰和波谷的交替。图形叠加(BlendMode)表示两层图形叠加在一起时,上下两层图像是如何影响的。它包括一系列的效果,具体说明请参考 ActionScript帮助文档。利用图形叠加效果中的Add和Different,可以分别创造出波峰和波谷的特效。
全部代码如下,这里面bitmapData3,bitmapData2,bitmapData1可以理解为N,N-1,N-2帧的主位图, N是当前帧。由于卷积滤镜的扩散作用,这三个位图的面积顺序应该是bitmapData3最大,bitmapData1最小。它们分别的作用是:bitmapData1负责绘制波谷,bitmapData2负责绘制波峰,bitmapData3是主位图,用来加滤镜。
//应用缓冲运动计算运动点的位置
movePoint.x += (sumx/total - movePoint.x)/2;
movePoint.y += (sumy/total - movePoint.y)/2;
//首先给bitmapData2绘制一个很小的母环,增加一个新的波峰。
bitmapData2.setPixel(movePoint.x-1, movePoint.y,0x0000FF);
bitmapData2.setPixel(movePoint.x+1, movePoint.y,0x0000FF);
bitmapData2.setPixel(movePoint.x, movePoint.y-1,0x0000FF);
bitmapData2.setPixel(movePoint.x, movePoint.y+1,0x0000FF);
//将bitmapData2绘制到当前的位图bitmapData3上,并加上卷积滤镜,完成水波的一次扩散。
bitmapData3.applyFilter(bitmapData2,bitmapData3,ne w Point(),convolutionFilter);
//用bitmapData3给自身加一个ADD叠加效果以强化水波,不然无法传播。
bitmapData3.draw(bitmapData3, mat, null, BlendMode.ADD);
//用更早一帧的位图给bitmapData3反色绘制,用来强化波谷。
bitmapData3.draw(bitmapData1, mat, null, BlendMode.DIFFERENCE);
//给bitmapData补充颜色,延长波的传播距离
bitmapData3.draw(bitmapData3,mat,colorTransform);
//保存新一轮的bitmapData1,bitmapData2,为下一帧绘制做准备。
bitmapData1 = bitmapData2;
bitmapData2 = bitmapData3.clone();
使用Molehill底层API绘制水波平面
最后就是如何将水波的效果利用Molehill的底层API绘制到3D舞台上。这里需要顶点着色器和片段着色器的基础知识,我在这篇文章中有过详细的介绍:深入浅出了解Molehill的底层API-顶点着色器与片段着色器
好了,假设你现在已经知道如何使用Vertex Shader和Fragment Shader来绘制三角形,我们来看看如何绘制一个由若干三角形组成的平面。关于这个命题,我的朋友Edward Huang在这篇文章里有一个不错的例子,本文关于搭建顶点模型的一些代码就是援引自那里。
在平面中搭建顶点的工程与我们在2D里排列图标的道理一样简单,只需一对for循环便可以实现:
for(var j:int=0;j
图中meshColNum是4, 一共有5列顶点,由于是逐行扫描,所以每个点的dotId为横向递增,纵向为等差数列(间隔为5,即meshColNum+1)。在每一个方格中用四点双面法绘制两个三角形,其中蓝色的三角形由点0,1,6组成,绿色的三角形由0,5,6组成。所以公式可以归纳成这样,由N点开始的两个三角形为(N,N+1,N+meshColNum+2)和(N,N+meshColNum+1,N+meshColNum+2)。这样IndexBuffer的序列就很容易被定义出来。
在定义了顶点缓冲、着色器、索引缓冲、透视矩阵常量等信息之后(详见上面提到的文章),最后一部就是在每一帧都调用的方法中更新顶点的纵坐标值,使得它与水波位图中相应像素点的颜色值成正比,这样水波的波形就会被绘制在3D空间中。
private function render():void{
var dotId:int=0;
for(var j:int=0;j<=meshRowNum;j++){
for(var i:int=0;i<=meshColNum;i++){
//取出相应点在位图中的颜色值
var c:int = bitmapData3.getPixel(Math.round((bitmapData3.width -1) * i/meshColNum),
Math.round((bitmapData3.height-1) * j/meshRowNum)
);
//由于主位图水波用蓝色绘制,所以这里不用进行额外的位运算
meshPool[dotId * 6+1] = -2-.5*(c) /0xFF;
dotId++;
}
}
vertextBuffer.uploadFromVector(meshPool,0,meshPool .length/6);
context3D.clear(0,0,0);
context3D.drawTriangles(indexBuffer,0);
context3D.present();
}
全部代码请在这里下载:
WaterControl.as
发表评论
-
C#对字符串加密解密
2012-07-06 09:52 932using System; using System.Co ... -
正则表达式基本技巧
2012-07-06 09:45 594以下所有正则表达式均为Python风格 1.模式开关 ... -
常用的正则表达式
2012-07-06 09:37 586日常工作中经常会遇到的一些验证、匹配、替换等字符串操作都会 ... -
KingCMS接触之:源代码剖析
2012-07-06 09:30 615先从核心开始./system/core.class.php ... -
win7组件服务COM+应用程序编录错误解决办法
2012-07-03 13:43 836有时候在安装某个 ... -
怎么在DropdownList下面嵌入图片
2012-07-02 10:57 826flex4 的DropdownList下拉框组件本身并不支 ... -
Cairngorm示例:用户登录
2012-07-02 10:57 5671. Cairngorm简介 Cairngorm是 ... -
flash builder 制作 浏览器并 读写配制文件
2012-07-02 10:57 545flex/spark" xmlns:mx=&q ... -
[tamarin系列之3] ASC编译器命令行基础
2012-07-02 10:57 4221、ASC编译器简介 avmshell执行了abc文 ... -
LCDS-ES 与 Hibernate3,SQLServer的整合
2012-07-01 00:39 617其实LCDS与Hibernate3(目前最新版本好像是Hi ... -
关于BlalzeDs RDS
2012-07-01 00:39 617BlazeDs 默认是不用RDS的,因为原因很简单,虽然用 ... -
为什么用*? 为什么不用*?
2012-07-01 00:39 576离开RoR有一段时间了,本来不想提些负面的东西,不过JE猎 ... -
flash特效原理:标签云
2012-07-01 00:39 680其实标签云是一个比较常见的特效类,在wondefl里 ...
相关推荐
《ActionScript 3.0 语言参考》是 Flash® Player 和 Adobe AIR™ 应用程序编程接口 (API) 的参考手册。 此版本包括支持 Adobe AIR 运行时环境的新 ActionScript 类、方法和属性。 在可能的情况下,特定于 AIR 的新...
连线题是课件中常用的一种应用,本例可做各种推广使用。本示例为纵向物理定律与相关解释文本间的连线题,初高中课本中常见题型。
《Flash ActionScript 3.0动画教程》是一本专为学习和掌握Flash中ActionScript 3.0编程语言而设计的教程,特别适合对动画制作和互动设计感兴趣的读者。ActionScript 3.0是Adobe Flash Platform的核心编程语言,它的...
ActionScript 3.0(简称AS3)是Adobe Flash Platform中的编程语言,主要用于创建互动性的网页内容、游戏以及丰富的互联网应用程序。本教程旨在为初学者提供一个全面的AS3基础知识框架,结合源代码实例,帮助读者快速...
第1篇 ActionScript3.0语言基础 第1章 ActionScript3.0概述 第2章 搭建ActionScript3.0开发环境 第3章 ActionScript3.0语法 第2篇 ActionScript3.0面向对象特性 第4章 ActionScript3.0面向对象编程 第...
《Flash ActionScript3.0教程示例(从入门到精通)》是一本全面解析ActionScript3.0编程语言在Flash平台上的应用的教程。ActionScript3.0是Adobe Flash Professional中的核心编程语言,用于创建交互式动画、游戏、富...
第10、11章分别介绍了几个ActionScript 3.0实际应用的范例,包括网站制作、游戏制作和桌面应用等。 本书以ActionScript 3.0体系结构为主线,附以大量的范例进行讲解。无论是基本的语法还是类的设计与应用,都配有...
ActionScript 3.0是Adobe Flash Professional、Flash Player以及Adobe AIR中的主要编程语言,用于创建交互式内容、游戏和富互联网应用程序(RIA)。本教程针对ActionScript 3.0的动画制作进行了深入讲解,旨在帮助...
《ActionScript3.0 Game Programming》是一本专为游戏开发者设计的权威教程,中文版的出版使得更多中国读者能够深入理解和掌握ActionScript3.0在游戏开发中的应用。这本书不仅覆盖了ActionScript的基础语法和面向...
ActionScript3.0是Adobe开发的一种面向对象的编程语言,主要用于创建富互联网应用程序(RIA),尤其是在Flash平台上。它是Flash Professional、Flash Builder等工具的核心组成部分,让开发者能够为网页、桌面和移动...
ActionScript 3.0是Adobe Flash Professional中的核心编程语言,用于创建交互式、动态的Web内容,包括游戏、动画和丰富的互联网应用(RIA)。 本教程覆盖了多个关键知识点: 1. **基础语法与编程概念**:首先,你...
本书详细地介绍了 actionscript 3.0的基础知识,包括 actionscript 3.0语言、actionscript 3.0对象的操作方法、显示列表的使用、事件模型、加载外部素材、可视化编程以及利用声音和视频增强应用程序等方面的知识,并...
总之,ActionScript 3.0宝典是一本宝贵的资源,对于希望创建互动内容、游戏或应用程序的开发者来说,这本书将提供深入的指导和实践案例。通过研读这本书,你可以掌握创建动态Web内容所需的关键技能,并且能够利用...
ActionScript 3.0 是Adobe开发的一种面向对象的编程语言,主要用于创建富互联网应用程序(RIA,Rich Internet Applications),尤其是在Flash平台上。它极大地提升了Flash Player和Adobe AIR应用的性能和功能,使得...
《Foundation ActionScript 3.0 Animation》是一本...《foundation Actionscript3.0 Animation.pdf》这个文件很可能是这本书的电子版,包含完整的章节内容和可能的练习案例,对于自学或者参考来说是非常宝贵的资源。
ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言,它在 Flash 内容和应用 程序中实现了交互性、数据处理以及其它许多功能。 ActionScript 是由 Flash Player 中的 ActionScript 虚拟机 (AVM) 来执行的...
ActionScript 3.0是Adobe Flash Professional和Flex SDK中用于创建富互联网应用程序(RIA)的主要编程语言。在“ActionScript 3.0动态绘制正弦曲线”这个项目中,开发者利用了AS3的强大功能来创建可视化图形,特别是...
ActionScript 3.0是一种强大的编程语言,主要用于实现Flex应用的业务逻辑和控制,与MXML一起构成了Flex应用程序开发的基础。ActionScript 3.0在Flash Player运行环境中执行,借助ActionScript虚拟机(ActionScript ...