Flash 如何创造一个好的;素描;动作脚本的效果?
我已经能够使用这里提供的像素弯曲着色器获得草图效果(某种程度上)。下面的示例照片(一张有着令人毛骨悚然的眼睛的照片) 右上方的图像是用Balsamiq模型创建的,是照片到草图效果的一个很好的例子。那么我该如何创建这样的东西呢?欢迎提供任何链接或源代码 上面的图片是由flash生成的,下面是代码,下面的图片是我理解的应该是目标。他们不完全一样,但有点接近 结果在很大程度上取决于对源图像执行的微调(//去饱和+亮度+对比度),我认为它不能在一系列图片上自动执行Flash 如何创造一个好的;素描;动作脚本的效果?,flash,apache-flex,actionscript-3,Flash,Apache Flex,Actionscript 3,我已经能够使用这里提供的像素弯曲着色器获得草图效果(某种程度上)。下面的示例照片(一张有着令人毛骨悚然的眼睛的照片) 右上方的图像是用Balsamiq模型创建的,是照片到草图效果的一个很好的例子。那么我该如何创建这样的东西呢?欢迎提供任何链接或源代码 上面的图片是由flash生成的,下面是代码,下面的图片是我理解的应该是目标。他们不完全一样,但有点接近 结果在很大程度上取决于对源图像执行的微调(//去饱和+亮度+对比度),我认为它不能在一系列图片上自动执行 package { import f
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.filters.ColorMatrixFilter;
import flash.filters.ConvolutionFilter;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;
/**
* @author Nicolas Barradeau
* http://en.nicoptere.net
*/
public class Sketch extends Sprite
{
[Embed(source = '../lib/test.jpg')]private var src:Class;
private var bd:BitmapData = new src().bitmapData;
public function Sketch()
{
addChild( new Bitmap( bd ) );//need a bitmapData called bd
sketch( bd );
}
private function sketch( bd:BitmapData ):void
{
// desaturation + brightness + contrast
bd.applyFilter( bd, bd.rect, new Point, grayscale );
bd.applyFilter( bd, bd.rect, new Point,brightness( 25 ) );
bd.applyFilter( bd, bd.rect, new Point,contrast( 20 ) );
bd.applyFilter( bd, bd.rect, new Point,brightness( 35 ) );
//creates the outlines
var outlines:BitmapData = bd.clone();
outlines.applyFilter( outlines, outlines.rect, new Point, outline( 80 ) );
outlines.applyFilter( outlines, outlines.rect, new Point, negative );
outlines.applyFilter( outlines, outlines.rect, new Point, grayscale );
//draws the outlines into the bd
bd.draw( outlines, new Matrix( 1, 0, 0, 1 ), new ColorTransform( 1, 1, 1, .75 ), BlendMode.MULTIPLY );
//creates some additionnal noise
var noise:BitmapData = bd.clone();
noise.noise( 0, 0, 255, 7, true);
//draws the extra noise
bd.draw( noise, new Matrix( 1, 0, 0, 1 ), new ColorTransform( 1, 1, 1, 0.15 ), BlendMode.ADD );
//final contrast pass
bd.applyFilter( bd, bd.rect, new Point, contrast( 55 ) );
}
private function outline( value:Number = 80 ):ConvolutionFilter
{
var q:Number = value / 4;
return new ConvolutionFilter( 3, 3, [
0 , q , 0 ,
q , -value , q ,
0 , q , 0
], 10 );
}
private function get negative():ColorMatrixFilter
{
return new ColorMatrixFilter( [
-1 , 0 , 0 , 0 , 0xFF,
0 , -1 , 0 , 0 , 0xFF,
0 , 0 , -1 , 0 , 0xFF,
0 , 0 , 0 , 1 , 0
] );
}
private function get grayscale():ColorMatrixFilter
{
return new ColorMatrixFilter( [
.3086 , .6094 , .0820 , 0 , 0,
.3086 , .6094 , .0820 , 0 , 0,
.3086 , .6094 , .0820 , 0 , 0,
0 , 0 , 0 , 1 , 0
] );
}
private function brightness( value:Number ):ColorMatrixFilter
{
return new ColorMatrixFilter( [
1 , 0 , 0 , 0 , value,
0 , 1 , 0 , 0 , value,
0 , 0 , 1 , 0 , value,
0 , 0 , 0 , 1 , 0
] );
}
private function contrast( value:Number ):ColorMatrixFilter
{
var a:Number = ( value * 0.01 + 1 )
var b:Number = 0x80 * ( 1 - a );
return new ColorMatrixFilter( [
a , 0 , 0 , 0 , b,
0 , a , 0 , 0 , b,
0 , 0 , a , 0 , b,
0 , 0 , 0 , 1 , 0
] );
}
}
}
上面的图片是由flash生成的,下面是代码,下面的图片是我理解的应该是目标。他们不完全一样,但有点接近
结果在很大程度上取决于对源图像执行的微调(//去饱和+亮度+对比度),我认为它不能在一系列图片上自动执行
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.filters.ColorMatrixFilter;
import flash.filters.ConvolutionFilter;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;
/**
* @author Nicolas Barradeau
* http://en.nicoptere.net
*/
public class Sketch extends Sprite
{
[Embed(source = '../lib/test.jpg')]private var src:Class;
private var bd:BitmapData = new src().bitmapData;
public function Sketch()
{
addChild( new Bitmap( bd ) );//need a bitmapData called bd
sketch( bd );
}
private function sketch( bd:BitmapData ):void
{
// desaturation + brightness + contrast
bd.applyFilter( bd, bd.rect, new Point, grayscale );
bd.applyFilter( bd, bd.rect, new Point,brightness( 25 ) );
bd.applyFilter( bd, bd.rect, new Point,contrast( 20 ) );
bd.applyFilter( bd, bd.rect, new Point,brightness( 35 ) );
//creates the outlines
var outlines:BitmapData = bd.clone();
outlines.applyFilter( outlines, outlines.rect, new Point, outline( 80 ) );
outlines.applyFilter( outlines, outlines.rect, new Point, negative );
outlines.applyFilter( outlines, outlines.rect, new Point, grayscale );
//draws the outlines into the bd
bd.draw( outlines, new Matrix( 1, 0, 0, 1 ), new ColorTransform( 1, 1, 1, .75 ), BlendMode.MULTIPLY );
//creates some additionnal noise
var noise:BitmapData = bd.clone();
noise.noise( 0, 0, 255, 7, true);
//draws the extra noise
bd.draw( noise, new Matrix( 1, 0, 0, 1 ), new ColorTransform( 1, 1, 1, 0.15 ), BlendMode.ADD );
//final contrast pass
bd.applyFilter( bd, bd.rect, new Point, contrast( 55 ) );
}
private function outline( value:Number = 80 ):ConvolutionFilter
{
var q:Number = value / 4;
return new ConvolutionFilter( 3, 3, [
0 , q , 0 ,
q , -value , q ,
0 , q , 0
], 10 );
}
private function get negative():ColorMatrixFilter
{
return new ColorMatrixFilter( [
-1 , 0 , 0 , 0 , 0xFF,
0 , -1 , 0 , 0 , 0xFF,
0 , 0 , -1 , 0 , 0xFF,
0 , 0 , 0 , 1 , 0
] );
}
private function get grayscale():ColorMatrixFilter
{
return new ColorMatrixFilter( [
.3086 , .6094 , .0820 , 0 , 0,
.3086 , .6094 , .0820 , 0 , 0,
.3086 , .6094 , .0820 , 0 , 0,
0 , 0 , 0 , 1 , 0
] );
}
private function brightness( value:Number ):ColorMatrixFilter
{
return new ColorMatrixFilter( [
1 , 0 , 0 , 0 , value,
0 , 1 , 0 , 0 , value,
0 , 0 , 1 , 0 , value,
0 , 0 , 0 , 1 , 0
] );
}
private function contrast( value:Number ):ColorMatrixFilter
{
var a:Number = ( value * 0.01 + 1 )
var b:Number = 0x80 * ( 1 - a );
return new ColorMatrixFilter( [
a , 0 , 0 , 0 , b,
0 , a , 0 , 0 , b,
0 , 0 , a , 0 , b,
0 , 0 , 0 , 1 , 0
] );
}
}
}
Flash能够在swf内运行像素弯曲过滤器。这里有一个很好的关于如何做的基础教程@斯台普枪:我知道PB,并用它创造了右下角的效果。但这还不够好,所以我正在寻找其他一些可以在右上角产生效果的过滤器。Flash可以在swf中运行像素弯曲过滤器。这里有一个很好的关于如何做的基础教程@斯台普枪:我知道PB,并用它创造了右下角的效果。但这还不够好,所以我正在寻找其他一些可以在右上角实现效果的过滤器。欢迎:)使用PB输出而不是大纲位图数据的btw应该工作得更好:)欢迎:)使用PB输出而不是大纲位图数据的btw应该工作得更好:)