Solved

Green Screen photo imposed on another background

Posted on 2011-09-30
12
300 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

749 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