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