Solved

Green Screen photo imposed on another background

Posted on 2011-09-30
12
312 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
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…

752 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