AS3.0中的显示编程(末篇)-- 滤镜(下)

简介:

     剩下的三种滤镜,因为我自己也不是很懂矩阵啊这些的,只能做些简单的范例和说明了,抱歉!颜色矩阵滤镜、卷积滤镜、置换图滤镜这三种滤镜只能通过AS代码实现。如果说上面的六种滤镜,只是在原图的基础上做些简单的修改,那么这三种滤镜,就可以称之为大手术了,让我们继续往下看:

 

7)颜色矩阵滤镜(ColorMatrixFilter

      颜色矩阵滤镜用于过滤显示对象的颜色和Alpha值。可以进行饱和度的更改、色相旋转、将亮度更改为 Alpha,以及生成其它颜色操作效果等等。

      我这边举一个例子,大家先看效果图:

      clip_image002

      在那些全国悲伤的日子,我们需要停止娱乐节目,把Flash变灰来表示我们沉痛的哀悼。这种变灰的效果当然有很多方式来实现,最简便的是用JS控制网页。上次看到百度有人问,在Flash里要怎么实现这个效果,最佳回答是在属性面板里修改颜色。汗,这样需要多大的工程量啊!其实不用那么麻烦,只要做一个颜色矩阵滤镜并应用就可以实现这个效果了。

      AS代码如下,具体内容我就不解释了,不要求学会:

var matrix:Array = new Array();

matrix = matrix.concat([0.3086, 0.6094, 0.082, 0, 0]); // red

matrix = matrix.concat([0.3086, 0.6094, 0.082, 0, 0]); // green

matrix = matrix.concat([0.3086, 0.6094, 0.082, 0, 0]); // blue

matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha

var gray:ColorMatrixFilter = new ColorMatrixFilter(matrix);

var filtersArray:Array = new Array(gray);

tt.filters = filtersArray;

 

      8)卷积滤镜(ConvolutionFilter

      卷积滤镜可用于对BitmapData对象或显示对象应用一些特殊的图像变形,如模糊、锐化、浮雕、背反、光亮等。

      模糊效果:

      clip_image004

      AS代码如下:

var matrix:Array = new Array();

matrix = matrix.concat([0, 1, 0]);

matrix = matrix.concat([1, 1, 1]);

matrix = matrix.concat([0, 1, 0]);

var convolution:ConvolutionFilter = new ConvolutionFilter();

convolution.matrixX = 3;

convolution.matrixY = 3;

convolution.matrix = matrix;

convolution.divisor = 5;

var filtersArray:Array = new Array(convolution);

tt.filters = filtersArray;

 

      锐化效果:

      clip_image006

      AS代码如下:

var matrix:Array = new Array();

matrix = matrix.concat([0, -1, 0]);

matrix = matrix.concat([-1, 5, -1]);

matrix = matrix.concat([0, -1, 0]);

var convolution:ConvolutionFilter = new ConvolutionFilter();

convolution.matrixX = 3;

convolution.matrixY = 3;

convolution.matrix = matrix;

convolution.divisor = 1;

var filtersArray:Array = new Array(convolution);

tt.filters = filtersArray;

 

      浮雕效果:

      clip_image008

      AS代码:

var matrix:Array = new Array();

matrix = matrix.concat([-2, -1, 0]);

matrix = matrix.concat([-1, 1, 1]);

matrix = matrix.concat([0, 1, 2]);

var convolution:ConvolutionFilter = new ConvolutionFilter();

convolution.matrixX = 3;

convolution.matrixY = 3;

convolution.matrix = matrix;

convolution.divisor = 1;

var filtersArray:Array = new Array(convolution);

tt.filters = filtersArray;

 

      背反效果:

      clip_image010

      AS代码:

var matrix:Array = new Array();

matrix = matrix.concat([0, -1, 0]);

matrix = matrix.concat([-1, 4, -1]);

matrix = matrix.concat([0, -1, 0]);

var convolution:ConvolutionFilter = new ConvolutionFilter();

convolution.matrixX = 3;

convolution.matrixY = 3;

convolution.matrix = matrix;

convolution.divisor = 1;

var filtersArray:Array = new Array(convolution);

tt.filters = filtersArray;

 

      光亮效果:

      clip_image012

      AS代码:

var matrix:Array = new Array();

matrix = matrix.concat([5, 5, 5]);

matrix = matrix.concat([5, 0, 5]);

matrix = matrix.concat([5, 5, 5]);

var convolution:ConvolutionFilter = new ConvolutionFilter();

convolution.matrixX = 3;

convolution.matrixY = 3;

convolution.matrix = matrix;

convolution.divisor = 30;

var filtersArray:Array = new Array(convolution);

tt.filters = filtersArray;

 

      9)置换图滤镜(DisplacementMapFilter

      置换图滤镜使用BitmapData对象(称为置换图图像)中的像素值在新对象上执行置换效果。通常,置换图图像与将要应用滤镜的实际显示对象不同。置换效果包括置换过滤的图像中的像素,也就是说,将这些像素移开原始位置一定距离。此滤镜可用于产生移位、扭曲或斑点效果。

      由于这个滤镜本身比较复杂,要比较好的表现效果,又需要两幅特定的图,本人懒,就简单的做一个平移效果吧。

      clip_image014

      AS代码:

var mapImage:BitmapData = new BitmapData(tt.width, tt.height, false, 0xFF0000);

var displacementMap = new DisplacementMapFilter();

displacementMap.mapBitmap = mapImage;

displacementMap.mapPoint = new Point(0, 0);

displacementMap.componentX = BitmapDataChannel.RED;

displacementMap.scaleX = 250;

var filtersArray:Array = new Array(displacementMap);

tt.filters = filtersArray;

 

      滤镜这章到此就结束了,整个显示编程也告一段落。但其实Flash里的显示编程,内容很广,包括我下章第一篇的文本,也是显示编程的一部分。不过,我还是按照常用理解的习惯,归纳到元素这一块去了。










本文转自 windtoto 51CTO博客,原文链接:http://blog.51cto.com/windtoto/405985,如需转载请自行联系原作者
目录
相关文章
|
4月前
|
前端开发
前端如何创建好看的简洁的蒙版弹窗
前端如何创建好看的简洁的蒙版弹窗
|
5月前
|
前端开发
【零基础入门前端系列】—浏览器内核、背景渐变、转换(二十二)
【零基础入门前端系列】—浏览器内核、背景渐变、转换(二十二)
|
7月前
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(2)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
|
7月前
|
数据安全/隐私保护
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(1)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
|
11月前
|
Python 容器
tkinter模块高级操作(二)—— 界面切换效果、立体阴影字效果及gif动图的实现
tkinter模块高级操作(二)—— 界面切换效果、立体阴影字效果及gif动图的实现
177 0
|
前端开发
妙用滤镜构建高级感拉满的磨砂玻璃渐变背景
妙用滤镜构建高级感拉满的磨砂玻璃渐变背景
185 0
妙用滤镜构建高级感拉满的磨砂玻璃渐变背景
|
前端开发
巧用滤镜实现高级感拉满的文字快闪切换效果
巧用滤镜实现高级感拉满的文字快闪切换效果
202 0
巧用滤镜实现高级感拉满的文字快闪切换效果
|
Web App开发 前端开发 JavaScript
如何用纯 CSS 创作一个菜单反色填充特效
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1371 0
|
算法
图像滤镜艺术---PS图层混合模式之明度模式
原文:图像滤镜艺术---PS图层混合模式之明度模式 本文将介绍PS图层混合模式中比较复杂 的“明度”模式的算法原理及代码实现内容。
1356 0