Solved

Green Screen photo imposed on another background

Posted on 2011-09-30
12
294 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Flash doesn't load in Iphone and Ipad 22 483
Action Script commands 5 234
Flash player 17 install script .bat or .vbs 9 529
2012 Domain With 350 Machines All Running Windows 7 7 126
Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
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 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…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

920 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

15 Experts available now in Live!

Get 1:1 Help Now