Hello Everybody!

This is just an afternoon proof of concept I made for a project that needs this feature. The mission of this development is to extract the people in front of the camera, and although the extraction must be improved widely, you can see below the first results

In order to achieve this I used flash and Pixel Bender. The algorithm to achieve this results is mine and probably for that reason is not very optimized

What I do, basically is retrieve the absoulte values of the RGB channel substraction between the empty room image values and the camera stream, then I compare the average of this result with the tolerance and if is inside the ratio, Bingo! just render it!

Problems I found doing this POC:

- Lack of Pixel Bender documentation, although I finally found what I need.

- When you take the first screenshot and then you seat in front of the webcam, you may provoque some changes in the lights of the room, this has as a result some rendering problems, but most of them should be solved adjusting tolerance.

- You shouldn’t wear any color that is at the same time in the first picture ( the one without you )

- Poor quality webcams generates more pixeled renderings, that can be solved on the flash side, smoothing the webcam stream, and on the pixel bender side improving the algorithm.

- Poor quality webcams adds an odd ‘stroke’ surrounding the user silhouette

Actionscript tips:

To link the Pixel Bender images to the Actionscript code use this:

_shader.data.frontImage.input = image1BitmapData;
_shader.data.backImage.input = image2BitmapData;

*frontImage and backImage are the names set inside Pixel Bender Code.

To run the Pixel Bender Job you must create a new BitmapData with the same size of the input images, and render the result there with the next commands:

var myJob:ShaderJob = new ShaderJob( _shader, outputBitmapData );
myJob.start(true);

Pixel Bender:

Here you can get the Pixel Bender Code.

A new question came into my mind, if I can send a ByteArray to Pixel Bender and get a modified one, and, Strings can be converted into ByteArrays, can Pixel Bender be used as a Encryption method? I’ll investigate… Sure someone already try that

I already tried this using alchemy seems the link is broken, I will try to restore this post soon

No related posts.

Update: Seems not be working on the web, sure it’s some crossdomain issue so I’ll try to access to a budget ( since you cannot put a crossdomain.xml policy file on your Amazon’s root folder ) and I’ll update this post then

Static and dynamic website objects ( SWF, mp3, images, etc…) are high bandwith consumers, especially dynamic ones liek SWFs due to development issues. If our bandwidth gets collapsed people will take a long time to see our website or even do not come to see it.

One solution to this problem is to move all these items to Amazon S3 which provides a very good service at low cost.

There is a library in google code (as3awss3lib) I could not get to run, probably because they need the AIR libraries and my intention was to use the core Flex libraries only. So I decided to investigate how the Amazon S3 API works, and then tried to access this API using HttpService. If you have tried the same thing you’ve found that not HttpService do not allow custom headers (even if AIR lets you), so I tried to find other ways to put my own headers in httpService, My attempt was to create a connection with the Socket object but soon I found this library (as3httpclientlib) on google code work done and I only had to worry about the connection.

Here is an example of a simple application ( Having some Security Sandbox Issues, I’ll check the policies but totally works on local ):

[SWF]wp-blogfiles/Flex_Amazon.swf, 512, 335[/SWF]

And the code (to compile this code you will need these libraries: as3httpclientlib and as3crypto):

MXML source

Related posts:

1. New Tool: Flex PMD

Hello People!

It has been a long time since my last post so I’ve decided to post something found interesting. Long ago, seeking a faster way to create my websites I found CMS called Drupal, this CMS provides a lot of very important aspects of a web, such as content creation, scalability and robustness. But as you know this blog is basically based on the Flash platform technologies, not Drupal, But I was interested in joining the two sides and make a login.

To follow this tutorial is recommended that you have some knowledge of Drupal and Flex

Requirements

Have a server ( local or remote ) with Drupal

Note:

This tutorial was mad with Drupal 6.x but I think you can do it perfectly with the previous version 5.x

To complete this tutorial you will need some modules that do not come with the core ( amfphp and services ) as well as the amfphp server. To install the modules simply unzip them inside drupal_folder/modules but i recommend creating a folder drupal_folder/sites/all/modules and copy them inside. Then it¡s imperative you download the amfphp server and copy the the folder inside the amfphp. ( You should have something like this drupal_folder/modules/amfphp/amfphp, the first amfphp is the module logic and the second is the server.

Now we must activate some options of the modules we just install

- In Services activate Services ( it’s the only option, you can fail here xD )
- In Services – servers activate AMFPHP
- In Services – services activate System Service and User Service

You can go to the Drupal Services option and click on the AMFPHP server, you would see a default message from the server, if you can’t see it you may missed something.

One more thing before view the Actionscript code, in the Drupal Services menu, inside the Settings Tab, disable the “Use Keys” option which is used to provide security when we connect from external applications, and althought this tutorial might be used to create an external login too, we won’t use keys to simplify the tutorial ( maybe in a next post ) however we will leave the “Use sessid” active.

Once you have activate that options ( remember to save once you’ve activated ) we need to give permissions for anyone to access the services, if not an anonymous user couldn’t login because it couldn’t access them. Now we can begin to create our AS3

Before giving the Actionscript code I would like to discuss some aspects of the code:

While creating remoteObjects is easier in mxml I always prefer to avoid it using Actionscript but this meant more time until I found the way to communicate Flex with Drupal because I couldn’t how I could pass parameters to Drupal, if you’ve encountered the same problem, I hope this tutorial help.

Note:
Before communicating with any other service you must have your sessid, you’ll do that connecting with the system.connect service, which will return you an object containing the sessid. If you do not know if your services are working correctly because of your code or because of Drupal, you can execute them directly from the Drupal Services menu, there you can find all the parameters you need to execute any service.

Using MXML remoteObject is implemented like this ( using user.get as example ) :
id=”test”
endpoint=”http://localhost/drupal/services/amfphp”
destination=”amfphp”
source=”user”
result=”handler_drupalResult( event )”
fault=”handler_drupalFault( event )”>

sessid
1

This service is used to get the information about the user with a certain uid ( user id ). In order to do that you must be logged in.

In Actionscript should be something like this:

drupal.source = “user”
var params:Object = new Object();
params.sessid = sessid;
params.uid = 1
Operation(drupal.getOperation( “get” )).argumentNames = ["sessid","uid"]
drupal.getOperation( “get” ).arguments = params;
drupal.getOperation( “get” ).send();

The lined marked in bold is the one I was searching during hours, this is automatically implemented in the mxml component, if you don’t put it Drupal will always return “Missing Arguments”

Finally, the code:

I hope you find this usefull!!

Related posts:

1. Creating your first BlazeDS project
2. Flex, Amazon S3 and custom headers
3. Flex swf optimization ( I )

Now we’ve got Adobe Flex configured to work with BlazeDS let’s start with our first project.

We will do this:

We will create the front-end logic in Actionscript and MXML.

We will create the back-end logic in JAVA

We will create the needed config files to establish a bridge or a connection between the front-end and the back-end.

So let’s start creating a new project, this time we want to use a Server technology. Here we must select J2EE because tomcat / BlazeDS uses this language / technology and we won’t touch anything

you can see the results in the next image:

At the bottom of the image you’ll see a check box with this text: Create combined Java / Flex project using WTP. In the java source folder will be placed all the raw java files, the logic of the back-end, once you execute the project this logic will be compiled and placed to the server automatically, don’t worry about that.

Next we must configure the J2EE settings, the target runtime will be BlazeDS we created in the last post. I always put the same in the Context root and the Content folder, the project name, but in this example I will put context_root and content_folder to show you how the folders and files are created. The project is structured like this:

Inside the content_folder to folders has been created: META-INF, and WEB-INF ( this is the important one now… )

inside WEB-INF we’ve got 4 folders:

classes: This is the back-end compiled logic created inside the src folder, every time you run the project the JAVA files will be recompiled ( if needed ) and updated inside this folder.

flex: Here is the messaging configuration you will see 4 files inside this folder but you only need services-config.xml the other files are automatically created for order purposes, if you delete them you will get some errors because you must edit services-config.xml. This file includes the other three, if you delete this inclusions, you can delete the files… ( of course this files are useful to mantain the messaging structure clean but this is a beginner tutorial!! )

lib: Some libraries, don’t need to look here…

src: Don’t need to look here either…

web.xml configuration file, we won’t edit this.

OK.

Now we’ve got our structure created the first thing we must do is add our project to our server, this will create a new folder inside the backend with the name of the project and this will contain a copy of our recently created content_folder.

Now we will delete all the files inside content_folder -> WEB-INF -> flex except for services-config.xml, and we will edit the services node like this:

 	            	com.ncatstudios.remoting.Test

The important parts of this piece of XML are the destination and the source. The destination is like the address of the wharehouse where to fetch the data. We must call somewhere from flex to access the data, this name must be the same both sides. The source is the name of the JAVA class ( package doted format ) where we will call the methods.

Finally here is the code to run the application:

and the JAVA logic:

package com.ncatstudios.remoting;

public class Test {

	public String sayHelloTo(String who)
	{
		return "Hello " + who;
	}

}

Now you can run the application to test it.

Possible error / bug: I found that sometimes my application doesn’t run as it should.

If you open the project properties, inside the Flex Server section just delete the folder of the root URL, leave it to http://localhost:8080, you probably won’t need to edit this for rest of the life of this project.

Related posts:

1. Setting up your BlazeDS (tomcat) server on Eclipse ( local )
2. Flex & Drupal login ( Actionscript remoteObjects )

One of the best improvements of AS3 is the inclusion of native support for parsing xml with e4x. E4X give us the possibility of parsing xml data as objects.

You can access the information using “dot” notation ie node_name.node_child_node_child…

As any technology there are advantatges and disadvantatges:

Advantatges:

This technology is fast to write, very intuitive and saves a lot of typing.

Disadvantatges:

You must be careful about what are you filtering, large xml means an increasing of flash player time to parse the file, which is stored in memory temporarely, and this is a quite important performance issue.

In the next example you can find how can you filter a xml file using this technique:

[SWF]wp-blogfiles/bin-release/regex.swf, 500, 576[/SWF]

And here some code:

private var _xml:XML;		

private function init():void
{
        loadXML("../assets/XML/texts.xml");
}

private function loadXML(xml:String):void
{
        var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, handler_xmlIsLoadedCorrectly);
	loader.dataFormat = "e4x"
	loader.load(new URLRequest(xml));
}

private function handler_xmlIsLoadedCorrectly(event:Event):void
{
	_xml = new XML(event.target.data);
	TA_Xml.text = _xml.toString()
}

private function handler_searchStringIsChanged(event:Event):void
{
	var reg:RegExp = new RegExp(TI_SearchString.text);
	TI_Results.text = _xml..item.(reg.test(text)).@id
}

I hope you find it useful!

Related posts:

1. Flex swf optimization ( I )
2. Flex, Amazon S3 and custom headers
3. Compile CSS to SWF memory bottleneck