Solved

Green Screen photo imposed on another background

Posted on 2011-09-30
12
299 Views
Last Modified: 2012-05-12
I have to develop a Flash app that would remove green screen part of the photo and will replace it with desired background. Flash app is an SWF file where i load my photos (taken against a green screen). What functions/filters can be used to achieve that - i have to add the green pixels removal has to be automatic when the photo is loaded to the app. I heard something about the colorMatrix filter or something like this, but I would like to hear an expert opinion on that.

Attached a sample of what I am trying to achieve. Green screen photo converted to a desired composition
0
Comment
Question by:abilinski
  • 7
  • 5
12 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 36894415
@abilinski,
You same of green screen is very bad.
The image screen must be a flat wihtout any shading.
0
 

Author Comment

by:abilinski
ID: 36894459
I know that, just giving this as an example of what is to be achieved
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36894643
Ok, here is my example. Create a new Flash Project AS3 and set background to some color

//draw green screen
var greenColor:Number = 0x00FF00;
var bmd:BitmapData = new BitmapData(300, 300, false, 0);

//Draw red border arround
bmd.fillRect( new Rectangle(0, 0, 300, 300), 0xFF0000);

//Fill green background
bmd.fillRect(new Rectangle(10, 10, 280, 280), greenColor);

//Draw blue square inside
bmd.fillRect(new Rectangle(50, 50, 200, 200), 0x0000FF);

//Before
var before:Bitmap = new Bitmap(bmd);
addChild(before);

var newBmd:BitmapData = new BitmapData(bmd.width, bmd.height, true, 0);  
newBmd.draw(bmd);

//Remove green color
var removeColor:uint = (0xFF000000 + greenColor);
newBmd.threshold(newBmd, newBmd.rect, newBmd.rect.topLeft, "==", removeColor);

var after:Bitmap = new Bitmap(newBmd);
addChild(after);
after.x = 310;


0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:abilinski
ID: 36894666
THanks, that is helpful.  A question :

how do I specify "greenColor" I mean is this a certain color value and what about the "threshold" - is there like a safe range?
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36894675
0
 

Author Comment

by:abilinski
ID: 36894709
what if the green isn't the same everywhere? not every single time I will have perfect lighting conditions. How can i set the range of green to be stripped out from the photo?
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36894762
You said your image has flat green color
0
 

Author Comment

by:abilinski
ID: 36894786
yes it is as flat as possible and lighting will let it to be but there is always some weather/light conditions that can make the green shift off a bit. As much as we try to set the lighting perfectly there is always a room for error and exact color value is not going to work - it has to be a range of green.
0
 

Author Comment

by:abilinski
ID: 36894790
actually perfect solution would be to have a slider where a user could control the amount of green taken out from the photo. That would be awesome!
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36894824
OK, I modified my example

//draw green screen
var greenColor:Number = 0x00FF00;
var bmd:BitmapData = new BitmapData(300, 300, false, 0);

//Draw red border arround
bmd.fillRect( new Rectangle(0, 0, 300, 300), 0xFF0000);

//Fill green background
bmd.fillRect(new Rectangle(10, 10, 280, 280), greenColor);
bmd.fillRect(new Rectangle(20, 20, 260, 260), 0x00FF0F);

//Draw blue square inside
bmd.fillRect(new Rectangle(50, 50, 200, 200), 0x0000FF);

//Before
var before:Bitmap = new Bitmap(threshold(bmd, greenColor, 0));
addChild(before);

var after:Bitmap = new Bitmap(threshold(bmd, greenColor, 100));
addChild(after);
after.x = 310;

function threshold(source:BitmapData, testColor:uint, colorRange:uint = 0):BitmapData
{
      var rect:Rectangle = new Rectangle(0, 0, source.width, source.height);
      var pt:Point = new Point();
      
      var r:uint = testColor >> 16 & 0xFF;
      var g:uint = testColor >> 8 & 0xFF;
      var b:uint = testColor & 0xFF;
      
      var thRed_A:uint = ((r + colorRange) > 0xff) ? 0xff0000 : (r + colorRange) << 16 ;
      var thRed_B:uint = ((r - colorRange) < 0) ? 0 : (r - colorRange) << 16;
      var thGreen_A:uint = ((g + colorRange) > 0xff) ? 0xff00 : (g + colorRange) << 8;
      var thGreen_B:uint = ((g - colorRange) < 0) ? 0 : (g - colorRange) << 8;
      var thBlue_A:uint = ((b + colorRange) > 0xff) ? 0xff : (b + colorRange);
      var thBlue_B:uint = ((b - colorRange) < 0) ? 0 : (b - colorRange);
      
      var bitmapData:BitmapData = new BitmapData(rect.width, rect.height, true, 0x00000000);
      
      bitmapData.threshold(source, rect, pt, ">", thRed_A, 0xffff0000, 0xff0000, false);
      bitmapData.threshold(source, rect, pt, "<", thRed_B, 0xffff0000, 0xff0000, false);
      bitmapData.threshold(source, rect, pt, ">", thGreen_A, 0xffff0000, 0x00ff00, false);            
      bitmapData.threshold(source, rect, pt, "<", thGreen_B, 0xffff0000, 0x00ff00, false);
      bitmapData.threshold(source, rect, pt, ">", thBlue_A, 0xffff0000, 0x0000ff, false);
      bitmapData.threshold(source, rect, pt, "<", thBlue_B, 0xffff0000, 0x0000ff, false);

      bitmapData.copyPixels(source, rect, pt, bitmapData, pt, false);
      return bitmapData;
}


0
 
LVL 29

Expert Comment

by:dgofman
ID: 36894829
if you will accept my answer please send me your sample of FLA or SWF I would like to see how nice its working :)
0
 
LVL 29

Accepted Solution

by:
dgofman earned 250 total points
ID: 36894847
---abilinski:
 
actually perfect solution would be to have a slider where a user could control the amount of green taken out from the photo. That would be awesome!


Yes, I can but that is different question :)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question