Using a webcam

Today we will be fooling around with webcam.

First of all we can load a webcam on the screen (or stage). This is done in a function.

The webcam can trigger loading of images and playing of sounds etc, (so can the microphone.)

The structure of the script is not too difficult: you add an object (there is the box again), this object is a webcam for tonight. Then you add an eventlistener. And the eventlisteners triggers a function when the event happens.

So we have:

• webcam
• eventlistener
• function on event

This is the same as:

• keyboard - eventlistener - function on event
• mouse - eventlistener - function on event

In the function you can put what you want, it can be loading an image, playing a sound...starting a movie......

The way to create the webcam is done in a function. This is like the functions of loading an image or streaming a sound. In principle you can copy paste these functions and use them like black boxes.

The working examples can be found in this folder, with examples:

http://www.contrechoc.com/flash/flashExamples.zip

if FLASH complains about the version of the .fla file, use the content of the txt file in the folder, copy paste it into a new flash movie, save in the folder with the sounds and images, and enjoy...

A funny examples from former classes:

http://www.contrechoc.com/flash/DanutasSnorrenShow/webcam.html

Made by Danuta, in her movie your mustache is changed when moving around!

Security setting

Flash is played from website on your computer. So flash movies are not supposed to be able to get data from your computer. Nor are flash movies supposed to activate your webcam without your consent. So every time you use the webcam you have to give permission to do this.

So there is a possibility that when you start the movie with the webcam it wont play immediately.

If nothing is playing or the mic does not respond, first verify if the computer has a mic or webcam, and then try clicking right in the flash window and look at the settings.

More can be done with the webcam than you think: Augmented Reality Flash, or Multitouch Flash is done also with this simple webcam.

Remark: close scrutiny showed that the activity handler is always triggering two times before tting into the normal waiting for a trigger mode. So to do it well,

used:

* webcam activity: eventlistener

* microphone activity: eventlistener

Advanced: you can have a picture, and want to replace colors in it? Using a blue screen for example.
http://keywon.com/wiki/index.php?title=Flash_Reference_-_BitmapData
You can do this on the image of the webcam too, replacing the color of a Hummer with the color on a specific spot of the webcam.
Using  lightsource as a mouse works like this, webcam, bitmapimage, threshold...
http://board.flashkit.com/board/showthread.php?t=753887

Using mouse input

The mouse input, using the eventListener


The mouse is more versatile than a key!

Handling the mouse also creates events like the keys.
We can attach reactions like the ones we practiced with the keys also to the mouse.
Again we use an eventlistener:

stage.addEventListener (.... )
also we have to add a function which defines what to do with the events triggered:
stage.addEventListener (...., whatToDoWithTriggerFunction)
the whatToDoWithTriggerFunction will have to be defined.

Here are several eventlisteners for the mouse (different kind of triggers, clicking moving):

• addEventListener(MouseEvent.CLICK, clickHandler);
• addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler);
• addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
• addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
• addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
• addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

Then in the function we can track different kind of properties:
 For example the mouse point has x and y coordinates.

So the recepie is like this:

add an eventListener:
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

and the corresponding reaction:

 function mouseUpHandler( event:MouseEvent): void
{
var posX : Number = event.stageX;
var posY : Number = event.stageY;
myMovieClip1.x = posX ;
myMovieClip1.y = posY ;
}

Using the arrow keys

 If you want to move images around, you shift the container of the images, the movieClip. You could do this using keys from the keyboard, but more fun is to use the arrow keys. The code for this is a bit different from the normal keys:

normal keys were triggered like this:

if (String.fromCharCode( event.charCode) == "5")

{

myMovieClip1.x = myMovieClip1.x - 50;

}

but with the arrows we have to do it like this:(using only the event.keyCode)

 if (event.keyCode == 38 )//up
{
myMovieClipWithCar1.y = myMovieClipWithCar1.y - 50;
}

    if (event.keyCode == 40 )//down
{
myMovieClipWithCar1.y = myMovieClipWithCar1.y + 50;
}

    if (event.keyCode == 37 )//left
{
myMovieClipWithCar1.x = myMovieClipWithCar1.x - 50;
}

    if (event.keyCode == 39 )//right
{
myMovieClipWithCar1.x = myMovieClipWithCar1.x + 50;
}
that is because the characters and letters are having a charCode (ASCII code) but the arrows don't represent "normal" characters. The other keys are having keyCode too, of course, but "charCode" is more like "character".

Then using the arrow codes: keyCode = 37 or 38 or 39 or 40 you can steer an image around on the Stage.

Using a custom made media template

We will use these templates in practicing programming techniques like using a timer, using an eventListener, in combination with progressive downloading of image, sound and video, :

http://www.contrechoc.com/flash/flashExamples.zip

This folder contains an example with a timer, a sound on keyboard input, an image on keyboard input and the same with all media and video.

With the programming experience of the first blog we will modify the script and make a story using the media variables, like sound, image, and video.

This  example is the media (sound, image, video on keyboard input) template on it's own:

http://www.contrechoc.com/flash/easy_Flash_Media_Usage.zip

We import classes to load an Image and read a Sound (and play it directly).
When we know how to use the classes we dont have to comprehend anything about how this functions.

How to use a class?
first import it:

import LoadImageInMovieClip;

then declare a variable of this class (that is prepare the memory for it.)
giving it parameters:

var myMovieClipWithCarImage : LoadImageInMovieClip = new LoadImageInMovieClip( imageName);

The imageName is a parameter and you have to know that you have to give the name of the image. This image must be in the folder called Images.

Then using this imageClip: putting it on stage

stage.addChild(myMovieClipWithCarImage);

and then later on, removing it from stage:

stage.removeChild(myMovieClipWithCarImage);

or repositioning it:

myMovieClipWithCarImage.x = 500;

The next example is sound:

import PlaySound;

var mySound: PlaySound = new PlaySound(nameOfSound, numberOfTimesPlayed, volume);

these last 3 parameters.....you have to know them..for instance the volume has to be between 0 and 1.

var mySound: PlaySound = new PlaySound("1.mp3", 3,.5 );

and that is all there is to using the classes.

The video is more complicated in the example:
I have prepared the way for multiple video's, putting the video's in an array. These video's have no names, I call them with the place they occupy in the array. The first place is called 0!
(This is always true in programming.)

But lets say you want only one video:

import NetConnectionVideoClass;

var myVideo: NetConnectionVideoClass = new NetConnectionVideoClass("MOV00948.flv");

there are a lot of functions for a video!

stage.addChild(myVideo);//putting it onto stage.

myVideo.addVideoChild();//starting the stream (the naming can be improved!)
myVideo.loopPlayVideo();

myVideo.pauseVideo();
myVideo.resumeVideo();

myVideo.videoAlpha(whatTransparency);// between 0 and 1

myVideo.videoRot(numberOfDegrees);
try it out!

As an extra assignment, I have made a class, TransformImage, which can blend one image into the other, learn how to use it without any understanding!

import this class: 

import TransformImage;

You have to make a MovieClip, add this thing to the Stage.

var myMovieClip5: MovieClip = new MovieClip();
stage.addChild(myMovieClip5);

Then create an instance of TransformImage: (with parameters, this MovieClip, and the names of the images.)

var myTransformMovieClip : TransformImage;

myTransformMovieClip = new TransformImage(myMovieClip5, "car1.png","car2.png" );

and look how image 1 is transformed in image 2.

The images have to be placed in the folder images as usual

You need the class don't you? (It is also in the folder with the examples)

http/:www.contrechoc.com/flash/TransformImage.zip

put it in the folder where the flash .fla is, otherwise your .fla will not find it and complain.

Flash: how to get used to scritping

This blog will show simple scripting in the script window using a few variables and the trace function. It illustrates using a function and some programming techniques.

Open Flash

Open a Flash AS.3 movie.

The reason we use AS3 and not AS2 is that AS3 is a language which is like other programming languages. SO what you learn for AS3 you can also use in JAVA, ARDUINO scripting etc.

The go to WINDOW Actions, the Actions window opens.

Start typing:

trace ("Hello World of Frogs");

look at the colors of the script, blue is a system word, the text is in green.

then we make a variable:

var theNumberOfFrogs : Number = 555;

This line prepares the memory for a Number.

The way of writing is a bit strange: it is called Elephants notation, it is like this because spaces are not allowed and we need to get the name descriptive anyway.

There can be other variables made eg a MovieClip:

var thisIsAMovieClip : MovieClip = new MovieClip();

Look at the notation:

conventions are to start a variable name with a small character and a class (Number, MovieClip) with a capital.

also:

choose the name of the variable carefully so that after 20 pages of script you know what the variable is about by reading the name.

this is a bad name:

var f : Number = 0;

because you cannot see what this variable is supposed to contain.

now continue with:

trace("the number of frogs is:", theNumberOfFrogs );

compile the movie using CMD ENTER of CTRL ENTER

then the output window opens en you get a result.

continue with:

var theNumberOfFrogsEatenEachNight : Number = 123;

theNumberOfFrogs = theNumberOfFrogs - theNumberOfFrogsEatenEachNight;

trace( "the number of Frogs left is:", theNumberOfFrogs);

this means: theNumberOfFrogs becomes what is was minus theNumberOfFrogsEatenEachNight

now you see the variable in action, it can be changed!

repeat, copy paste:

theNumberOfFrogs = theNumberOfFrogs - theNumberOfFrogsEatenEachNight;

trace( "the number of Frogs left is:", theNumberOfFrogs);

theNumberOfFrogs = theNumberOfFrogs - theNumberOfFrogsEatenEachNight;

trace( "the number of Frogs left is:", theNumberOfFrogs);

theNumberOfFrogs = theNumberOfFrogs - theNumberOfFrogsEatenEachNight;

trace( "the number of Frogs left is:", theNumberOfFrogs);

you see the number of theNumberOfFrogs diminishing, it can even become negative.

What is a negative frog???

So we want to avoid that!

we type: and now I use the special code blocks because I want to use a character smaller than, used in html....

  if (theNumberOfFrogs < 0)
theNumberOfFrogs=0;
//which becomes:
if (theNumberOfFrogs < 0)  {
theNumberOfFrogs=0;
trace(" you have eaten all frogs!");
}
//if I want to be noticed that there are no frogs left.

I am using // to indicate a comment in the code, that line is not seen as code, its color is light grey.

But now I want to get rid of the repetitions.

First of all we make a machine called function which can be called each night:

 function eatingOfFrogsEachNight() {
theNumberOfFrogs=theNumberOfFrogs-theNumberOfFrogsEatenEachNight;
if (theNumberOfFrogs < 0) {
theNumberOfFrogs=0;
trace(" you have eaten all frogs!");
}
trace( "the number of Frogs left is:", theNumberOfFrogs);
}

This function can be called every time we want to use it, even if we don't know how it functions exactly! The name should be obvious like loadImage(), or loadAndPlaySound().

Then we make a loop, to avoid repeating the function call:

 for (var i: Number = 0; i < 1000; i=i+1) {
eatingOfFrogsEachNight();
}

Now the poor frogs are eaten a 1000 times!

But that is far too much, we want to stop the loop if there are no frogs left:

So we need another if statement:

 for (var i: Number = 0; i < 1000; i=i+1) {
eatingOfFrogsEachNight();
if (theNumberOfFrogs<=0) {
i=1000;
}
}

It is placed inside the loop and it will finish the loop when the number of frogs left is 0.

So know we have seen a lot of things, variables, if statements, for loops, and functions.

The whole script is like this:

 trace("Hello World of Frogs");
var theNumberOfFrogs:Number=555;
var theNumberOfFrogsEatenEachNight:Number=23;
for (var i: Number = 0; i < 1000; i=i+1) {
eatingOfFrogsEachNight();
if (theNumberOfFrogs<=0) {
i=1000;
}
}
function eatingOfFrogsEachNight() {
theNumberOfFrogs=theNumberOfFrogs-theNumberOfFrogsEatenEachNight;
if (theNumberOfFrogs<0) {
theNumberOfFrogs=0;
trace(" you have eaten all frogs!");
}
trace( "the number of Frogs left is:", theNumberOfFrogs);
}

 

The output is this: