`
wangangie32
  • 浏览: 40304 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

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
分享到:
评论

相关推荐

    ActionScript 3.0 API文档(CHM+HTML最新中文完整)

    《ActionScript 3.0 语言参考》是 Flash® Player 和 Adobe AIR™ 应用程序编程接口 (API) 的参考手册。 此版本包括支持 Adobe AIR 运行时环境的新 ActionScript 类、方法和属性。 在可能的情况下,特定于 AIR 的新...

    ActionScript3.0经典连线题2+AS3.0+Graphics+联线题+课件+课件制作

    连线题是课件中常用的一种应用,本例可做各种推广使用。本示例为纵向物理定律与相关解释文本间的连线题,初高中课本中常见题型。

    Flash ActionScript 3.0动画教程(中文高清)+源码

    《Flash ActionScript 3.0动画教程》是一本专为学习和掌握Flash中ActionScript 3.0编程语言而设计的教程,特别适合对动画制作和互动设计感兴趣的读者。ActionScript 3.0是Adobe Flash Platform的核心编程语言,它的...

    ActionScript 3.0基础教程(文档)+源代码

    ActionScript 3.0(简称AS3)是Adobe Flash Platform中的编程语言,主要用于创建互动性的网页内容、游戏以及丰富的互联网应用程序。本教程旨在为初学者提供一个全面的AS3基础知识框架,结合源代码实例,帮助读者快速...

    ActionScript 3.0开发技术大全(第一部分)

    第1篇 ActionScript3.0语言基础  第1章 ActionScript3.0概述  第2章 搭建ActionScript3.0开发环境  第3章 ActionScript3.0语法 第2篇 ActionScript3.0面向对象特性  第4章 ActionScript3.0面向对象编程  第...

    Flash ActionScript3.0教程示例(从入门到精通).rar

    《Flash ActionScript3.0教程示例(从入门到精通)》是一本全面解析ActionScript3.0编程语言在Flash平台上的应用的教程。ActionScript3.0是Adobe Flash Professional中的核心编程语言,用于创建交互式动画、游戏、富...

    Flash ActionScript 3.0 编程技术教程(附书光盘)

    第10、11章分别介绍了几个ActionScript 3.0实际应用的范例,包括网站制作、游戏制作和桌面应用等。 本书以ActionScript 3.0体系结构为主线,附以大量的范例进行讲解。无论是基本的语法还是类的设计与应用,都配有...

    actionscript 3.0动画制作教程

    ActionScript 3.0是Adobe Flash Professional、Flash Player以及Adobe AIR中的主要编程语言,用于创建交互式内容、游戏和富互联网应用程序(RIA)。本教程针对ActionScript 3.0的动画制作进行了深入讲解,旨在帮助...

    ActionScript3.0 Game Programing中文版

    《ActionScript3.0 Game Programming》是一本专为游戏开发者设计的权威教程,中文版的出版使得更多中国读者能够深入理解和掌握ActionScript3.0在游戏开发中的应用。这本书不仅覆盖了ActionScript的基础语法和面向...

    ActionScript3.0完全自学手册电子教案_ActionScript3.0_

    ActionScript3.0是Adobe开发的一种面向对象的编程语言,主要用于创建富互联网应用程序(RIA),尤其是在Flash平台上。它是Flash Professional、Flash Builder等工具的核心组成部分,让开发者能够为网页、桌面和移动...

    Flash ActionScript 3.0高级动画教程 [文字版+源代码]

    ActionScript 3.0是Adobe Flash Professional中的核心编程语言,用于创建交互式、动态的Web内容,包括游戏、动画和丰富的互联网应用(RIA)。 本教程覆盖了多个关键知识点: 1. **基础语法与编程概念**:首先,你...

    ActionScript 3.0基础教程

    本书详细地介绍了 actionscript 3.0的基础知识,包括 actionscript 3.0语言、actionscript 3.0对象的操作方法、显示列表的使用、事件模型、加载外部素材、可视化编程以及利用声音和视频增强应用程序等方面的知识,并...

    ActionScript3.0宝典 pdf 高清晰

    总之,ActionScript 3.0宝典是一本宝贵的资源,对于希望创建互动内容、游戏或应用程序的开发者来说,这本书将提供深入的指导和实践案例。通过研读这本书,你可以掌握创建动态Web内容所需的关键技能,并且能够利用...

    ActionScript 3.0 编程.rar

    ActionScript 3.0 是Adobe开发的一种面向对象的编程语言,主要用于创建富互联网应用程序(RIA,Rich Internet Applications),尤其是在Flash平台上。它极大地提升了Flash Player和Adobe AIR应用的性能和功能,使得...

    Foundation ActionScript 3.0 Animation

    《Foundation ActionScript 3.0 Animation》是一本...《foundation Actionscript3.0 Animation.pdf》这个文件很可能是这本书的电子版,包含完整的章节内容和可能的练习案例,对于自学或者参考来说是非常宝贵的资源。

    《ActionScript 3.0 语言和组件参考》中文官方版本,无错

    ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言,它在 Flash 内容和应用 程序中实现了交互性、数据处理以及其它许多功能。 ActionScript 是由 Flash Player 中的 ActionScript 虚拟机 (AVM) 来执行的...

    ActionScript 3.0动态绘制正弦曲线(附源码)

    ActionScript 3.0是Adobe Flash Professional和Flex SDK中用于创建富互联网应用程序(RIA)的主要编程语言。在“ActionScript 3.0动态绘制正弦曲线”这个项目中,开发者利用了AS3的强大功能来创建可视化图形,特别是...

    最专业的ActionScript 3.0

    ActionScript 3.0是一种强大的编程语言,主要用于实现Flex应用的业务逻辑和控制,与MXML一起构成了Flex应用程序开发的基础。ActionScript 3.0在Flash Player运行环境中执行,借助ActionScript虚拟机(ActionScript ...

Global site tag (gtag.js) - Google Analytics