Saturday, July 30, 2011

AS3实现图片lomo效果 - Flash/Flex 阿墨技术社区

AS3实现图片lomo效果 - Flash/Flex 阿墨技术社区

最近没事研究了一个ps里面lomo效果,这些效果在ps里面实现是比较轻松的,想着是不是可以通过as3的bitmapdata操作来实现这个效果,在网上找各种资料算是基本差不多了,分享出来,欢迎大家指正

先看效果对比图

看原图


看看实现这种效果需要在ps中的步骤
1,原图滤色,目的是漂白图片,使亮的部分更加明亮
2,滤色后的图片反相
3,反相的图片的蓝色通道的20%和滤色后的图片叠加
4,添加四角的阴影效果

下面一步一步的通过bitmapdata来实习这些效果
1.滤色
我们可以在DisplayObject的叠加模式里面找到滤色BlendMode.SCREEN,具体解释是:将显示对象颜色的补色(反色)与背景颜色的补色相乘,会产生漂白效果。此设置通常用于产生加亮效果或用来删除显示对象的黑色区域。
这里实际是原图上面复制一个同样的一张图片,上面的图片和原图以滤色的模式叠加,具体的RGB的计算公式是 (255 - ((255 - topPixel) * (255 -bottomPixel))/255),这个只是一个通道的计算公式,每一个通道都要叠,先得到像素点的数值,分解成RGB三个通道,每一个都执行这个公式,然后在混合成16位色,赋值给像素点[ol] private function sereenBitmaps(i:int,j:int):void{
var color32:uint = bitmapdata.getPixel(i,j);
var red:int = color32 >> 16;
var green:int = color32 >> 8 & 0xFF;
var blue:int = color32 & 0xFF;

var redInt:int = screenBase(red,red);
var greenInt:int = screenBase(green,green);
var blueInt:int = screenBase(blue,blue);

var newUint:uint = redInt 复制代码执行完这一步的效果如下图所示:

2.反相
这一步是要对滤色后的图案进行反相,由于下一步要对反相的图片和滤色的图片进行叠加,要把滤色的图片复制一份,存起来供下一步使用。反相的也就是BlendMode.INVERT,就是我们在QQ聊天中选中图片的效果,像是胶片的底片一样,这个原理比较简单,就是把RGB的每一个通道乘负一,这里用滤镜也可以实现,我们之间用bitmapdata的colorTransform方法实现
new ColorTransform(-1,-1,-1,1,255,255,255,1),这里的参数看帮助文件就明白了[ol]private function processInvert():void{
bitmapdata.colorTransform(new Rectangle(0,0,bitmapdata.width,bitmapdata.height),new ColorTransform(-1,-1,-1,1,255,255,255,1));
}[/ol]复制代码执行完这一步的效果如下图所示:

3.反相的红色通道叠加
这里我们只需要把反相红色通道的20%叠加到底图上面就可以了,不透明图片的的叠加,而且只叠加一个通道,在网上找到了这个不同alpah图片颜色叠加的公式:叠加色r=覆盖色r*覆盖alpha+底色r*(1-覆盖色alpha),我们直接计算[ol]private function redadd(i:int,j:int):void{
var top:uint = bitmapdata.getPixel(i,j);
var bottom:uint = lightBitmapdata.getPixel(i,j);

var red:int = top >> 16;
var green:int = top >> 8 & 0xFF;
var blue:int = top & 0xFF;

var redbottom:int = bottom >> 16;
var greenbottom:int = bottom >> 8 & 0xFF;
var bluebottom:int = bottom & 0xFF;

var resultR:int = redbottom;
var resultG:int = greenbottom;
var resultB:int = blue*0.2 + bluebottom*0.8;

var newUint:uint = resultR 复制代码执行完这一步的效果如下图所示:

这时候已经基本差不多好使了
4.添加四角的阴影效果
这个效果是中间是空白的,边角是渐变的黑色,这个用Graphics的beginGradientFill非常容易实现,就是参数调整的问题,画一个shape画出这个形状,然后之间draw在bitmapdata上就可以了[ol]private function drawShape():void{
var shape:Shape = new Shape;
var g:Graphics = shape.graphics;
var fillType:String = GradientType.RADIAL;
var colors:Array = [0x000000, 0x000000];
var alphas:Array = [0, 0.3];
var ratios:Array = [200,255];
var matr:Matrix = new Matrix();
matr.createGradientBox(bitmapdata.width+160, bitmapdata.height+160, 0, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
g.beginGradientFill(fillType, colors, alphas, ratios,matr);
g.drawRect(0,0,bitmapdata.width+160,bitmapdata.height+160);
matr = new Matrix();
matr.tx = -80;
matr.ty = -80;
bitmapdata.draw(shape,matr);
}[/ol]复制代码这时候效果已经出来了


然后整理成类,见附件

参考文章:
http://www.wikish.net/doc-view-2072.html
http://blog.sina.com.cn/s/blog_62493c180100q8y0.html
http://www.bitscn.com/school/Flash/Action/200609/59873.html
附件:

Friday, July 29, 2011

AS3 Image Loader Class

package tc.hk.erikyang
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.IOErrorEvent;

import com.greensock.TweenNano;

import net.stevensacks.preloaders.CircleSlicePreloader;

public class ImageLoader extends Sprite
{
// ------- Properties -------
public var imageLoader:Loader = new Loader();
public var imageURLReq:URLRequest = new URLRequest();
private var preloader:CircleSlicePreloader = new CircleSlicePreloader();
public var maxWidth:Number = -1;
public var maxHeight:Number = -1;

// ------- Constructor -------
public function ImageLoader()
{
// set the name value, if specified
trace("ImageLoader()");
}



// ------- Methods -------
public function load(url:String, mwidth = 0, mheight = 0):void
{
imageURLReq.url=url;

if(mwidth)
this.maxWidth = mwidth;
if(mheight)
this.maxHeight = mheight;


//this.removeChild(imageLoader);
preloader.x = this.width/2;
preloader.y = this.height/2;

imageLoader.scaleX = imageLoader.scaleY = 1;

this.addChild(preloader);
try
{
imageLoader.load(imageURLReq);
}
catch (error:IOErrorEvent)
{
trace("Error: load()");
}
catch (error:Error)
{
trace("Error: load()");
}



imageLoader.contentLoaderInfo.addEventListener(Event.INIT, imageLoaded);
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageProgress);

}
private function imageProgress(evt:ProgressEvent):void
{
trace(Math.round((evt.bytesLoaded / evt.bytesTotal)*100));

}

private function imageLoaded(evt:Event):void
{
//var targetLoader:Loader = Loader(evt.target.loader);
trace("complete");



if((imageLoader.width>this.maxWidth && maxWidth>-1) || (imageLoader.height>this.maxHeight && maxHeight>-1))
{
imageLoader.width = this.maxWidth;
imageLoader.scaleY = imageLoader.scaleX;
}

this.removeChild(preloader);

trace("imageLoader: ", imageLoader.width, imageLoader.height);

this.addChild(imageLoader);

imageLoader.alpha = 0.1;

TweenNano.to(imageLoader, 1.5, {alpha:1} );

imageLoader.contentLoaderInfo.removeEventListener(Event.INIT,myRemoveListener);
imageLoader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS,myRemoveListener);
}

private function myRemoveListener(evt:Event):void
{
trace("Event removed");
}

}
}

Saturday, July 23, 2011

Understanding the Factors that Affect Depth of Field


Understanding the Factors that Affect Depth of Field

Advertise here
When we’re starting out in photography, understanding depth of field is the one of the first things we try to understand. What we often don’t realize is that depth of field is affected by more things than just aperture. In today’s tutorial, you’ll get some quick tips about the other factors that cause changes in the depth of the field of your images.

What is depth of field (DOF)

The simplest definition for depth of field is the area of your image that is in focus. More specifically, the distance between the nearest and the farthest object that are in focus. The shallowness of  the depth of field depends of the f/stop also known as aperture, the focal length of the lens, the size of the camera sensor and distances between you, the subject and the background.

Aperture or also known as f stop

The first thing we are going to talk is the aperture value. What is aperture? Well, when you look at camera lens you are going to see a maximum aperture range for that lens. For example f/3.5 – 5.6.  The main purpose of the lens is to collect light and deliver it to the camera sensor.
The aperture of a lens is the diameter of its opening. Aperture is expressed as a f/stop. The smaller the f/stop number (or f/value), the larger the lens opening (aperture). Depth of field depends of the size of the opening of the aperture. The larger the aperture opening is the more shallow the depth of field will be and opposite vice versa.



Focal length

The next thing that defines depth of field is focal length. If you have zoom lens or two prime lenses that are different in focal length you can test this yourself. The basic idea is that the longer the focal length is, the shallow the depth of field will get. And of course, the opposite is true when we have short focal lengths. For example if you shoot something with a 50mm lens at f/2.8 and then shoot the same thing with 200mm lens at f/2.8 the difference in the depth of field is going to be dramatic.




Sensor size

Let’s think of a pocket camera. Have you ever noticed that when you shoot with such a camera you almost never get a shallow depth of field and everything is sharp in focus? That’s because the sensor of the pocket cameras is so small. But if we take a look at cameras with bigger sensors, for example full frame cameras or with a crop factor of 1.5/1.6, you will see that the depth of field is more shallow. To summarize, a bigger the sensor size allows you to achieve a shallower depth-of-field.


Distance between you and your subject

The closer you are to your subject the shallower your depth of field will be. If you’re 2 meters from a subject, shooting at f/2.8 with your 50mm lens, you may get 10cm of depth to your focus. With thensame lens and aperture at 10 meters, you may get 100cm of depth. If you’re looking to create soft backgrounds with a less than optimal lens, just get really close to your subject.

Distance between the object and background

The final thing we are going to talk about today is the distance between the object we are shooting and the background. The further away the background is from the subject, the more blurred the background is going to be. For example, if we shoot a model that is standing 3 meters away from us and the background is 5 meters behind the model, the background will be sharper than if the background were further away.

Conclusion

Understand how depth of field works is a crucial part of photography. Being able to choose when to include a background or make blurry and soft allows you have more control over how your images look. If you have good tips for using depth of field or have some images that feature one of these principles, please share them below in the comments!