Flash & Actionscript blog by betaruce

Last time my little game allows us to control things in one direction only. This time you can move a block around the screen by your hands!

Here’s the demo video
http://flash8.betaruce.com/webcam_handControl_2_demo.swf

As you can see, since motion detection is more complicated this time, it’s better to have a really stationary background and with your hands moving clearly.
Move your hands onto the block and start moving. If you move too fast, the block may slip off your hands
The green dots on the screen shows your moving path. Check on the right image for your hand movement detection.

and here’s the real thing. have your webcam ready~

Go to my Flash 8 page for fla and other experiments.

Not sure why some ppl cannot play with the application in the previous post. Anyway here’s a video demo of how I control the yellow bar with my hands. Pls tell me if you still cannot play with the little game :).

http://flash8.betaruce.com/game2demo.swf

This is an unfinished Pong game. Unlike the usual Pong games, you are not playing with mouse or keyboard. Instead, move your hands in front of your webcam to hit the ball

Place your hand over the yellow bar and move your hands. Flash will detect your hand movement and move the bar accordingly. The left image let you see if your movement is enough.

Try it out and give me your comments

Guy Watson has a good article on Webcam motion detection. It makes good use of the new BitmapData methods and blendmode so the code can run pretty fast. His code is really impressive.

However the fla provided in that page is not the most ’simplified’ code and ppl who just started using Flash 8 may have some problems in understanding the code. Therefore I simplified the code a bit and the effect is just similar

The code is as follows. You can also download the fla here.

import flash.display.*;
import flash.geom.*;
cam = Camera.get();
vid.attachVideo(cam);
//
now = new BitmapData(cam.width, cam.height);
before = new BitmapData(cam.width, cam.height);
rect = new Rectangle(0, 0, cam.width, cam.height);
pt = new Point(0, 0);
//
onEnterFrame = function () {
// detect motion if user allow us to access the webcam
if (!cam.muted) {
now.draw(vid);
now.draw(before,new Matrix(),new ColorTransform(),'difference');
now.threshold(now,rect,pt,'>',0xff111111,0xffff0000);
before.draw(vid);
}
};
_root.attachBitmap(now,10);

The import statement helps you to import a class into Flash so that you do not need to type the full path to reference to a class.

Taking the new Matrix class as an example:

import flash.geom.Matrix;
mat = new Matrix();

can be written as:

mat = new flash.geom.Matrix();

Note:

1> the import statement only import classes into the current frame or object. Therefore, for another frame or object, you will need to import again or type the full path to access the class.

2> if an imported class is not used, it will not be exported in the swf, which means the file size will not be affected.

3> the import statement is only needed when you want to make a new instance (using the constructor e.g. new Matrix()) of that class. In the following example, we do not need to import anything as the matrix object is copied from an existing matrix:

mat = mc.transform.matrix;
mat.translate(10,0);
mc.transform.matrix = mat;

We can access all the matrix methods and properties of mat without importing anything.

We can use Matrix to do scaling and rotation on MovieClips. However, if we use the method scale() and rotate() of the Matrix class, the translation of the mc will also be affected, i.e. the tx and ty values are also changed.

Therefore, I may not use scale() if I want to scale a mc with matrix. Instead I will do the following (assume that there’s a movieclip named “mc” on the stage):

mat = mc.transform.matrix;
mat.a += .1;
mat.d += .1;
mc.transform.matrix = mat;

Scaling is done simply by changing the values of a and d.

For rotation, however, since I do not want to do so many sin and cos calculations, I still apply the rotate() method, and afterwards change the tx and ty back to their original values.

mat = mc.transform.matrix;
mat2 = mat.clone();
mat.rotate(Math.PI/6);
mat.tx = mat2.tx;
mat.ty = mat2.ty;
mc.transform.matrix = mat;

By using either of these 2 methods, we can do scaling and rotation with the mc remain in the same place (but not moving away).

Someone told me that my website is quite slow, and ppl may not be able to download files from my Flash 8 Experiments page because it’s too slow.

I’m not sure if anyone of you experience these problems…..if you do, can you please let me know by emailing me or leaving a comment here? Can you, for example, tell me where are you from, what is the main problem (pages loaded very slowly? are the files downloadable?), etc?

Thanks in advance I may consider changing to another server later if the problem is serious……

http://flash8.betaruce.com/

I’ve put all the source files online and you can download them for learning purpose

please feel free to email me or leave a comment here if you have any opinions or difficulties~

enjoy Flash 8

Since Flash 8 is out already, I can now open my fla to the public.

Keep an eye on my blog. I will put them up soon

Since I’m only a freelancer, I do Flash and Actionscripting mostly out of interest. Therefore, my opinions about the disadvantages of Flash 8 maybe different from those who are really in the IT field. Let’s see what they think.

From Luar (HK):
- New security measures of Flash Player is very troublesome (I AGREE!!!!!)
- No Flex Component
- BitmapData/BlendMode are slow, inefficient, and could be misused (err….not quite agree at this stage.)
- Flash Lite Emulator does not have a Debugger
- Typing function is worse and slower than MX 04 (?????)

From Danger’s blog (China):
- Script Assist (Well I think this is very useful to newbies….and it should be kept~~~)
- Animated GIF cannot move after they are imported (AGREE with that….only the 1st frame is imported -_-)
- No biggest change in this “Biggest” release
- FLV export still have rooms of improvement
- No improvement in UI Component

From lovebrian (Taiwan):
- AS editor do not have the functions (e.g. hiding of codes) of that in DW (Agree~)
- No speed improvement in Mac
- Screen Sharing API Support. Why Breeze is not set as default
- Flash Com and Flash Remoting Components are still not included (Agree~)
- Need to install Flv player to view FLV (Agree~)