webcam plus timer

We made an installation of all the computers in the class room using the webcam activity. A plan was made up by Rabia, Nieke, Giulia and Helena to make an experience of being shot at (when entering the room), using webcam to trigger sounds, then in the middle peacefulness using images which where triggered and get of the screen again, a last row in the back having silhouets (being stalked) leading up to a packman image...

Of course we have put the webcam out of the stage with:
video.x = -3000;

For the triggering and letting disappear the images we needed an extra timer in the webcam activity example:

import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;

var minuteTimer:Timer = new Timer(1000,1);

minuteTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);

function onTimerComplete(event:TimerEvent):void
{
winkelWagenMovieClip1.removeChildAt(0);
}
//minuteTimer.stop(); //these last lines to be added in the webcamActivityHandler
// minuteTimer.start();

and here you can find this example Flash CS4:
http://www.contrechoc.com/flash/flash-fun.zip

If you have Flash CS3 just put the textfile of this text in a new flash movie, save in a folder and create in this same folder the folders sounds and the folder images. In these last folders you can put your sonds (.mp3 format) and images. Change the names of these sounds and images in the script...
http://www.contrechoc.com/flash/webcamActivity_CS3script.txt

flash movie and folders structure

Using a webcam

Today we will be fooling around with webcam and microphone.

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 making of the webcam is also 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 here:
http://www.contrechoc.com/flash/flash-fun.zip


Some 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

Some keyboard firework

For e-paper we prepared this file:

keyboard Input e-paper prep.zip

in it you find several examples using a bit of turbo scripting:

1. keyboard input examples + netstreamvideo.fla
2. keyboard input start stop resume one button video.fla
3. keyboard input start stop resume one button multiple video.fla
4. keyboard input image shower.fla

1 is the example movie we saw earlier
2 is the same but start play pause resume in one keystroke, alternating, hitting 1
3 is the same all in one key, but it shows 6 video's played together after hitting 1,2,3,4,5,6
4 shows moving images, coming from a point, this is a bit advanced using a class script for the moving image, but still usable, and fun!

In 4 first try 1 then 2, and .... 3 , ok 4 to stop this avalanche!

repeat loop and timer

We learnt something about order and chaos in the last blog.

But we still got a static image. Flash loading the banana's and that was it.

Now we introduce a timer and get the machine alive!

A timer in Flash scripting is a function which can send "events" at a certain time interval. This event is caught by an eventlistener, just like the events from the keyboard and the mouse.

Here is the download, with the example:
http://www.contrechoc.com/flash/orderANDchaos.zip

The timer has to be declared:

var clickTimer:Timer = new Timer(50); //50 is the milliseconds between the ticks
clickTimer.addEventListener("timer", timerHandler2);

and you have to start it ticking:

clickTimer.start();

you can also stop it:

clickTimer.stop();

then like the keyboard or the mouse, you have to prepare a function catching the events:

function timerHandler2 (event:TimerEvent ) {

readSound("click.mp3");}

Now this plays the tick sound every 50 milliseconds, which is a lot!

Try varying the interval....

In the example images are loaded at the tick of the timer.

The images can come in at an unexpected order because the images are loaded from outside. To get a strict order in arrangement from back to front you need to put the images in movieClips, the boxes you already encountered in earlier examples.

Order and chaos: introducing random

The first lessons were really hard work, getting used to the terminology, all the windows, the scripting language...

This time we study the order of the world and the chaos of art. We will try to find a solution in between.

Start with your own background (big) and have a small image with a transparent background (.png) ready.

Discover the possibility of the so called “for-loop” for making order in the two direction: horizontal and vertical:

in a loop we can repeat things:
see the download: in the first movie we load one banana:
loadImage("banana.png", 100, 100);

in the second movie we load three banana's:
loadImage("banana.png", 100, 100);
loadImage("banana.png", 130, 100);
loadImage("banana.png", 160, 100);

but what about 25? Do we have to type all 25 banana's?

No!

We can do this more effecient:
we use a counter, just a variable counting from 0 to 25!
and we use this counter also to change the coordinates, in this case the x: 30 + counter*40
for (var counter = 0 ; counter < counter ="counter" j =" 1" j =" j" i =" 1" i =" i" style="text-align: center;">

Now we introduce a bit of disorder, using a random function:

for (var j = 1 ; j < j =" j" i =" 1" i =" i" style="text-align: center;">

We used the Math.random() to get a random number between 0 and 1 and have to multiply this to get between say 0 and 25 by 25...

We get this image....

We get a mixture of order and chaos, and we can send the screenshots to Boijmans.

Follow the sequence of order and chaos in these free flash movies, made especially for YOU!

http://www.contrechoc.com/flash/flash-orderAndChaos.zip

try making a function which can read another image, so you can alternate the order of two images! (We did that in class )

try varying the scale of the image, to get bigger and smaller images (We did that in class!)

So here are some static results: when you see it happen on screen, or when you repeat the key stroke on your keyboard every time a new unexpected configuration is made by your flash movie.

this is a random grocery shop from Rabia

this is criticizing commercial religions from Nieke

this is font fun from Giulia

Updated example keyboard input + Video streaming

The former example movie was not too complicated, but it didn't have a few possibilities which are needed for playing a video. We could load and play and replay the video in the FLVideoPlayback, but not really resume it.

To solve this problem we need a few extra "boxes", containers around the data. This is like the MovieClip around in image, or the Soundchannel around a sound.

First of all the new example: keyboard Input + Netstream Video

There are several examples of playing with images, sounds and video in this folder
we start with the keyboard input examples + netstreamvideo.fla

The first keys are the usual:

• 1 for a sound
• 2 for a stop sound
• 3 for a image
• 4 for a second image

Then we get to the playing of the video: (this part is new, but you practiced already this kind of scripting)

• 5 playing the first video
• 6 pausing the video
• 7 resuming the video
• 8 repositioning and rescaling the video

Then we have two keys left for the second video (the same for making the download zip smaller)

• 9 load and play second video
• 0 pause/resume second video

What about are the boxes? First we use a box called Netstream, which can be paused and resumed.
Then to get more than one video easily we made a special box called a class, starting from the examples from the FLASH Help, section NetStream.
This class must be included in the folder with the Flash movie. For the rest you can leave this alone. It has been imported at the top of the script:

import NetConnectionVideoClass;

In the script you can read what functions can be called, the name indicate what these functions are for.

To add a third video you have to do two things:
define the box:
var myVideoStream3:NetConnectionVideoClass=new NetConnectionVideoClass("MOV00948.flv");
where MOV00948.flv is the name (you can change, don't forget to put this new video also in the folder of the flash movie.)
and then copy and paste the play and resume parts, changing the name of course to myVideoStream3 instead of myVideoStream1 or myVideoStream2.

The other examples become more complex:
keyboard input start stop resume one button multiple video.fla starts pauses resumes a looping video on one button ( key 0)

If you want to use more than one video there is:
keyboard input start stop resume one button multiple video.fla
This movie has an array of video's, with positions etc, that play, pause, resume on one button.
For the sake of not going too much OO i have used the array and the playPauseResumeVideo function. Of course when more advanced you should make a nice new class.

(Yes the NetConnectionVideoClass.as is already a class....but one that can "just be used" )

Flash Scripting Primer, arrow keys and video on keys, mouse events

Arrow Keys:

Last time we saw the images appear on keyboard input.
Some keys are very special like the arrows, and we have to get hitting the arrows in another way than the normal keys:

normal keys were tracked like this:
if (String.fromCharCode( event.charCode) == "5")
{
myMovieClip1.x = myMovieClip1.x - 50;
}

but with the arrows we have to do it like this:
if (event.keyCode == 38 )//up
{
myMovieClip1.y = myMovieClip1.y - 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.

An example with only images:

http://www.contrechoc.com/flash/e-paper-images.zip




1,2,3,4 are background images,
5 is a text png,
6 is a duck, 6 is special, if you touch it again the duck will be different, about 5 images are placed in a sequence
7,8,9 are images, and the last image , key 9 always come on top.

The video (using FLVPlayback)
We can start playing a video like loading an image or playing a sound.
The video is streamed, we have to indivate the path, where to find the video:
var videoPath:String = "MOV00948.flv" when the video is in the same folder as the flash movie, or var videoPath:String = "videoFolder/MOV00948.flv", as an example when the video is in the folder called "videoFolder".

Also the video will play only when it is in the special format .flv, you can change the format in the Media Encoder or Video Encoder (CS3 or CS4).

For this way of playing the video we use a "component" of Flash. The components can be found under Menu: Window: COmponents or CMD 7 (MAC) or CTRL 7 (Windows).
Then we drag the FLVPlayback into the library ( CMD L for MAC, CTRL L for Windows). That is all, import fl.video.VideoPlayer; will be recognized.

We can also stop a video, and we can put a filter on a video. All these actions are practiced with the keyboard input.

http://www.contrechoc.com/flash/FlashStarter3.zip
FlashStarter2-ImageSound_onArrows.fla is the flash example with arrows
keyboard input and video.fla shows the possibilities of the video

a fine resource of video material is youtube. Youtube movies have the right format for flash: .flv
you can download youtube movies with this program: ytd
http://download.cnet.com/YouTube-Downloader/3000-2071_4-192611.html

The mouse input
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:
The mouse is more versatile than a key! For example the mouse point has x and y coordinates.

We can do something with these coordinates like this:

function startDraw ( event:MouseEvent): void
{
var posX : Number = event.stageX;
var posY : Number = event.stageY;
}

So with the mouse we can make a simple drawing flash movie:

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

Ok enough for today, we have to practice using this information, modify the movies, make

Flash Scripting Primer, loading sounds and images

After doing some basic coding in the first lesson we want to use images and sounds to make a first interactive flash movie.

We have a folder with sounds and a folder with images. We keep images and sounds in these folders outside the flash movie. We will load the needed sounds or images with a script. This keeps our actual movie small. So the movie is loaded quickly.

What is the plan? We have a few images and sounds. We will make a story using these images and sounds.

If the user pushes some keys, 1,2,3,4,5,6,7,8 for example, the movie reacts by loading either a sound or an image.

The details of this loading a sound or an image are hidden in a function which is already prepared. For new movies you can copy these functions from the example script. You don't have to study this! Concentrate on the concepts behind your movie.

IMAGES

Movieclips:

An image is caught in a MovieClip, with we which can shift the image around, make it rotate, scale it.

You have to do a bit of work with the movieclips though. First of all, a MovieClip must be created:

var myMovieClip1: MovieClip = new MovieClip();//(this is called instantiating an object, we have a var (variable) with the name myMovieClip1(you can choose this name) of type MovieClip, and this will become (=) a new Movieclip....)

Then you must put this "object" on stage, to make it visible:

stage.addChild(myMovieClip1);//your movieclip is a child, becomes dependent of, the stage, the "main" movieclip

But if you look now exporting the movie with CMD ENTER (for MAC) or CTRL ENTER (for Wondows), nothing is shown: that is because there is nothing yet in the movieclip!

So now we load an image using a prepared function:

loadImage(myMovieClip1, "3.png", 10, 100);//this tells to load an image called "3.png" inside this movieclip called myMovieClip1, and put it on the spot with coordinates 10 for x and 100 for y.

This line of code shows the image on Stage. It can be used for a background.

But we want to make the movie interactive:

Eventlisteners:

On key touch, of key 1, we want to load another image:

For this we need "an eventlistener", a process looking for the keyboard presses:

stage.addEventListener(KeyboardEvent.KEY_UP, keyDownHandler);

So, the stage is looking (listening) for events, happenings, like the pressing, or here the letting go of keys.

Then we have to ask: which key is pressed? We need some abstract stuff for that:

if (String.fromCharCode( event.charCode) == "3")
loadImage(myMovieClip1, "myDuck.png", 10, 100);

But you can recognize the key 3 in "3". And you can make this a 5 for key 5 etc. Be careful that in the FLASH environment the characters or letters are mostly shortcuts. If using characters, then test the movie in de flashplayer.

This checking which key is touched must happen inside a function, and this function was indicated by the listener: see keyDownHandler after stage.addEventListener(KeyboardEvent.KEY_UP, keyDownHandler );

function keyDownHandler ( event:KeyboardEvent ): void
{

//which key???:

if (String.fromCharCode( event.charCode) == "3")
loadImage(myMovieClip1, "myDuck.png", 10, 100);

}

example with only images: http://www.contrechoc.com/flash/e-paper-images.zip

* 1,2,3,4 are to switch backgrounds
* 5 is a text (of Heidegger, Frage der Technik)
* 6 is a duck which has a sequence of images
* 7,8,9 are random images, the red paint dot always comes on top

SOUND
The same goes for sound.
Loading a sound is done from the folder sounds.
The actual loading is done in a function readSound (not needed to study at the moment)
The sound must be in a Soundchannel, just like the image in a movieclip, to start playing and to stop playing.

so checking a key: (again inside this keyDownHandler function)
if (String.fromCharCode( event.charCode) == "9")
readSound("1.mp3",1000);
This tells the movie that if key 9 is touched, then it should load soundFile "1.mp3" and play it 1000 times!
This 1000 is there to get it looping. You can make this 1, for playing the sound once.

To stop the sound use this:
if (String.fromCharCode( event.charCode) == "2")
myChannel.stop();
Touching 2 will stop the sound.

Actually I am using only one soundChannel. This soundChannel was defined at the top of the script, like the MovieClip:
var mySound:Sound = new Sound();
var myChannel:SoundChannel = new SoundChannel();//you recognize the var, the SoundChannel name (actually a Class name) and the new.

When wanting to play two sounds at the same time , you should make an extra soundChannel:
and Sound:
var mySound2:Sound = new Sound();
var myChannel2:SoundChannel = new SoundChannel();
and pass this second Sound and SoundChannel with the readSound function as parameters, like the loadImage...but that is for later! We use a few images at the moment, but only one sound at the time....

Why not just use Image and Sound?

This Movieclip and Soundchannel can be thought of as wrappers, paper around the actual content. We need this "paper" to do things with it, like playing (for the sound) and shifting (of the image)

With these simple tricks we will make an animation with shifting images and sounds.

The example file with all the script working can be found here:

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

If the file does not open, then make a new flashmovie and copy and paste the text from the textfile "script for importing images and sounds" in the folder to your the actions window of the new movie, save the movie in the folder you downloaded and it will play. This is a problem of FLASH CS4 and FLASH CS3: this example was made in CS4 and CS3 refuses it...

Sounds must be in a mp3 format for FLASH
Because of this I have made a collection of ready to use sounds:

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

The image have to come from your own collection, you can use JPG or PNG.

PNG can be transparent.

Download Flash CS3 example: (script in a textfile)

http://www.contrechoc.com/flash/keyboardInput_CS3script.txt

(Make a new flash movie, window->actions copy paste the script text into this actions window, save movie in a folder, make also the folders images and sounds in this folder, provide the sounds ( .mp3 format) and the images (jpg or png) put them into the appropriate folders and play!)

used:

* keys, keyboard, keyListener, movieclip, soundChannel

Flash Scripting Primer, intro and basics

FLASH:

• Flash can be used as a design tool totally not using script.
• Flash can be used as a scripting environment, totally ignoring timeline and design features.
  

In this course we introduce you to the scripting aspects of FLASH.

Main subjects of this course:

• MovieClip, a structure
  
• Events, triggering things from the user
  
• Timer, triggering actions from the program
  

Events:

• Keyboard event
• Mouse event
• Camera event
• Microphone event

Actions Window

Where do we find the place to do a bit of coding? In the basic scripting window called Actions:

(In Dutch; "Handelingen" )

here is a textfile of the first scripting commands we use:

http://www.contrechoc.com/flash/flash-coding.txt

But first we have to get used to the scripting environment, and we start with our big friend "trace". The command trace prints what you give it into the 'output' window. Trace is a help if something is wrong, if you have to "debug".

Examples: Just in the Actions Window:

trace("hello");

CMD ENTER (for MAC) CTRL ENTER (for Windows) gives:

hello in the output window.

trace( 5 + 4);

gives: 9!

The difference are the quotes....when you do trace("5 + 4");

it gives: 5 + 4

...........

Explore the textfile in the last link, it is filled with all kind of examples, do it line for line, do the typing yourself, that helps for later.

you can copy and paste it into the action window and look what happens, but then you have to know how to make it into a .swf movie.

Exporting a Movie:

Press the CTRL ENTER for exporting the movie as a .swf file.

Try to understand what is happening and try to get used to the strange way the code is written.

Now we go to some prepared movies:

The first example movies can be found here:http://www.contrechoc.com/flash/flash-basics.zip

(CS3 examples made in Flash CS3 also working in Flash CS4)

the basics:

a sound loading example

an image loading example

the scripts are small, and can be copied and pasted into other scripts, (be careful though!)

a sound folder and a banana are joining the party.

(added also: a framelabel example, good start for alternative presentations.)

a great site for FLASH examples (tutorials, also photoshop things) is http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/

Sounds: FLASH handles only .mp3 ,free sounds can be found at: http://www.freesound.org/

images/cartoons can be found everywhere, google images with the keyword “cartoon” and “rabbit” for instance, also this kind of site can be found easily: http://www.barrysclipart.com/barrysclipart.com/index.php

FLASH games? There are about three trillion to be found, but this is a great site: http://www.flash-game.net/

Buttons and backgrounds texture generator

Doing scripting and coding is already a lot of work. But then, if you don't have a designer at the other side of your desk, you also have to do the imagery. So when you need a sketch you do it the easy way and search for free material on the internet. Just found an easy way of making sketches for buttons…..

http://www.grsites.com/

very nice for some fast menu productions in games….

Here an example of a background used for a flash blocking events example: (text added in photoshop)

this is a button i made for another blog:

this button is for a blog I maintain for a course on nds (nintendo ds) programming, interested? Be careful: this is for NERDS!

http://iepro.wordpress.com/2010/01/14/making-images-buttons-and-backgrounds/

FLASH: usefull links to start coding

We start with a bit of coding in the basic scripting window called Actions:

here is a textfile we use:

http://www.contrechoc.com/flash/flash-coding.txt

you can copy and paste it into the action window and look what happens. Try to understand or try to get used to the strange way the code is written.

The first example movies can be found here:http://www.contrechoc.com/flash/flash-basics.zip

(CS3 examples made in Flash CS3 also working in Flash CS4)

the basics:

a framelabel example, good for alternative presentations

a sound loading example

an image loading example

the scripts are small, and can be copied and pasted into other scripts, (be careful though!)

a sound folder and a banana are joining the party.

a great site for FLASH examples (tutorials, also photoshop things) is http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/

Sounds: FLASH handles only .mp3 ,free sounds can be found at: http://www.freesound.org/

images/cartoons can be found everywhere, google images with the keyword “cartoon” and “rabbit” for instance, also this kind of site can be found easily: http://www.barrysclipart.com/barrysclipart.com/index.php

FLASH games? There are about three trillion to be found, but this is a great site: http://www.flash-game.net/

FLASH: dressup - dressoff

This is an example of a student project, which was made interactive using simple FLASH scripting: (pictures used and published with permission.)

http://www.contrechoc.com/flash/dressupoff/dressupoff.html

(move the mouse over the images and watch the movie go forwards and backwards and change the speed of showing the images)

so: this is a sequence of images which can be played forwards and backwards using the mouse.

the script can be found here: (only the movie for the script,the folder “images” has to be added…)

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

used:

a timer: (to get the images loaded)

var clickTimer:Timer = new Timer(200);
clickTimer.addEventListener(“timer”, functionToDoWhenTimerFires);
clickTimer.start();

a mouse event, (to change the speed of the timer, property timer delay and to change the timer frequency)

stage.addEventListener( MouseEvent.MOUSE_MOVE, changeTimerDelayAndDirection);

for the rest only loadImages is used….

FLASH: the mouse

I promised you the MouseEvent, here is a drawing movie illustrating the different event playing together.

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

The mouse is a very complex thing! All kinds of events are possible.

Here are several eventlisteners for the mouse:

• 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);
• addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);

So a mouse is more complex than a key!

for instance the position, which can be found using the event like this:

function startDraw ( event:MouseEvent): void
{
var posX : Number = event.stageX;
var posY : Number = event.stageY;
}

used:

• for loop
• timer
• mouse event (in simpledraw)

FLASH: order and chaos

Order and Chaos this time! Nothing more beautiful for an artist. We work with the Math.random function to get random Numbers. And we work with a double for-loop to get order.

Loading a sequence of images in a for loop.

We learn how to put the timer to good use:
http://www.contrechoc.com/flash/orderANDchaos.zip

We need the timer for taking care of the order of the images which are coming in, being loaded.

FLASH, webcam and microphone activity

Today we will be fooling around with webcam and microphone. The webcam can trigger loading of images and playing of sounds etc, so can the microphone.

Later on we will discover how to load streaming movies. (needed flv format: use Media Encoder of Video Encoder

The examples can be found here:

http://www.contrechoc.com/flash/flash-fun.zip

To get some streaming movies we could try to download movies in flv format from youtube.

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.

ways to download from youtube can be found here:

http://www.frankwatching.com/archive/2007/05/08/top-25-hoe-download-ik-een-youtube-video/

used:

• webcam activity: eventlistener
• microphone activity: eventlistener

FLASH: about the ripple effect

We will be busy doing the asignment during these weeks, but interesting things will be shown anyway:

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

This is the ripple effect, which can be put on a movieclip.Nice for water effects, but also for imagining dreams!

Remark:

Some of my students (Kevin Klein) in Leiden used this effect but got in troubles using the Full Screen Mode: the framerate was severely reduced: he found the solution:

in settings (right click on the movie) uncheck hardware acceleration : here the picture with the settings window…

Thx Kevin!

FLASH question time

Is it possible to get a webcam behind an image? (The idea is to have a png and to show the webcam behind the (transparent) holes in the image.

Yes, just do an addChild with a movieclip with a picture after adding the camera:

so we have:

var winkelWagenMovieClip1 : MovieClip = new MovieClip(); //some movieclip to put an image in
winkelWagenMovieClip1.x = 0;
addChild(winkelWagenMovieClip1);

then we load the webcam using the FLASH help example:
//bla bla bla like the flash help example….

if (camera != null) {
camera.addEventListener(ActivityEvent.ACTIVITY, activityHandler);
video = new Video(camera.width * 2, camera.height * 2);
video.attachCamera(camera);
addChild(video);
loadImage( winkelWagenMovieClip1, “1.jpg”, 40,0 ) //the method for loading a picture in the MovieClip
addChild(winkelWagenMovieClip1);

} else

////etcetera like the help example

and having this movieclip in front of the webcam image you can change or animate the things in this masking movieClip.



linux baby in front of the webcam

Flash scripting and sound, load, play, loop

Sound is very important in every app. On the other hand it is a layer which has not too much to do with scripting. So we just have to know how to load a sound (since we keep the media external), how to play a sound, and how to loop a sound.

Flash does not like .wav sounds! So .mp3 is needed.

This is a very nice link for scripting examples around using sound in FLASH:
http://www.republicofcode.com/tutorials/flash/as3sound/

it tells you how to load an external sound, using URLRequest,
how to make it stop and pause and play again
(using soundChannel and eventlisteners)

how to change the volume, using soundtransform

The only thing I don’t find on this page is how to loop a sound:
this is done using the parameters in the play() function:

mySound.play(0,int.MAX_VALUE);

which means start at position 0 but repeat it the maximum possible number of times! (Which is quite sufficient, thank you very much, for most of the looped sounds…)

This last trick is found here: http://board.flashkit.com/board/showthread.php?t=769120

FLASH scripting starter 2

After discovering your truly great friend "trace" in FLASH and some other commands we go on loading an image and a sound.

We do this streaming, loading the sound and the image from outside the FLASH movie.

The details of this streaming is hidden in a function which you can copy from the example script. You dont have to study this!

What we will practice is making your movie listen to the keyboard and loading images and sounds from the keys.

For this I have made a collection of ready to use sounds:
http://www.contrechoc.com/flash/shortMP3sounds.zip

The image have to come from your own collection, you can use JPG or PNG.
PNG can be transparent.

We use this example movie:

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

We will explore this  movie and make it our own, that is to say we will make our own interactive FLASH movie, importing sound and images.

used:

• keys, keyboard, keyListener

FLASH scripting starter 3

Order and Chaos this time!

Loading a sequence of images in a for loop.
We learn how to put the timer to good use:

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

I promised you the MouseEvent, here is a drawing movie illustrating the different event playing together.


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

The mouse is a complex thing!

Here are several eventlisteners for the mouse:

• 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);


• addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);

A mouse is more complex than a key!
for instance the position, which can be  found using the event like this:
function startDraw ( event:MouseEvent): void

{
var posX : Number = event.stageX;
var posY : Number = event.stageY;
}

used:

• for loop


• timer


• mouse event (in simpledraw)

FLASH scripting starter 4: let's have fun

Today we will be fooling around with webcam and microphone.

Later on we will discover how to load streaming movies. (needed flv format: use Media Encoder of Video Encoder

The examples can be found here:

http://www.contrechoc.com/flash/flash-fun.zip

To get some streaming movies we could try to download movies in flv format from youtube.

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.

ways to download from youtube can be fund here:

http://www.frankwatching.com/archive/2007/05/08/top-25-hoe-download-ik-een-youtube-video/

FLASH starter: ripple effect

[We will be busy doing the asignment during these weeks, but interesting things will be shown anyway:

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

This is the ripple effect, which can be put on a movieclip.

Nice for water effects, but also for imagining dreams!

Remark:

Some of my students (Kevin Klein) in Leiden used this effect but got in troubles using the Full Screen Mode: the framerate was severely reduced: he found the solution:

in settings (right click on the movie) uncheck hardware acceleration : here the picture with the settings window...

Thx Kevin!

Flash Scripting: temporarily blocking events

Hi all, there was a question how to prevent images coming in too fast, for example if images are loaded on webcam activity.

The principle is to use a timer to get the delay.
The timer starts and a blocker is put in between the events coming in and the loading.
After the timer has expired, the blocker is removed.

You can use a Number as a blocker, using 0 and 1 for example but  here we use a Boolean.

A boolean can only be true of false (0 or 1).

var stoppingEvents:Boolean = false;

we use a delay timer, when it starts events will not cause reactions:

var delayTimer:Timer = new Timer(1000); //timer delay is 1000 milliseconds
delayTimer.addEventListener("timer", goOnListening);

This is how we stop events:

function keyDownHandler ( event:KeyboardEvent ): void
{
if ( stoppingEvents == false )
{
if (String.fromCharCode( event.charCode) == "1") //the active key is "1"
{
readSound("1.mp3");
stoppingEvents = true; //blocking the next 1000 milliseconds any sounds
delayTimer.start();//count down to give the listener free
}
}
}

we have started the timer here, when it is done:

function goOnListening (event:TimerEvent ) {

stoppingEvents = false;
delayTimer.stop(); //stopping th timer
}

it removes the blocker....

here is the source code:

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

of course this example can be used for blocking mouse events, webcam events, microphone events just as easy....