Solved

Green Screen photo imposed on another background

Posted on 2011-09-30
12
290 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
 

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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…
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…
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.

708 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now