Tutorial: Playback Video in a Bouncing Ball

Tutorial: Playback video in a bouncing ball

These notes describe incorporating video playback in a moving object. The example here is a stripped down version of a bouncing ball. When you understand how this works, you should be able to put video into the full bouncing ball described on this site as well as an application of your choosing. See also the suggestions here for creating new video playback objects

This application has a round screen showing a video clip bouncing against virtual walls:

The video clip stops when it hits the right or the bottom walls and it re-starts when it hits the left or the top wall.

The critical features of this application are:

·  creating a flash video playback object

·  making the playback appear to be 'in' a ball, that is, a circle shaped movie clip that can be moved around

·  implementing the rules that I invented regarding stopping and re-starting the video.

Play back of video

The Flash coding to play video involves creating a FLVPlayback object and setting its source property to be the video desired. What is new in this example, is that this is done for a Movie Clip symbol as will be described below and it is an instance of this symbol that appears to bounce in a virtual rectangular area. The code to create a playback object is

import fl.video.*; //identify the appropriate library

var flv:FLVPlayback;

flv = new FLVPlayback();

flv.source = "joshuahomerun.flv";

Of course, you need to put in your own name for the flv file. See the other tutorials on how to use Flash Video Encoder to create an flv version. I started with a .mov file.

For this application, I needed the playback to be rather small. FLVPlayback objects have width and height properties like most other things in Flash. Technically, an FLVPlayback object inherits from Sprite. This means there are width and height properties that can be modified with code:

flv.width = 150;

flv.height = 150;

The next step is to add the flv object to the display list. When objects are created using ActionScript code as opposed to being created manually in the Flash environment, you need to write code to make them appear on the screen. This is done by:

addChild(flv);

In this example, these statements are all outside of any function. You can create a more complex example by putting the flv.source assignment statement inside a function. For example, see comments below on the if statements. You also can remove the flv video playback object from the display by use of

removeChild(flv);

It probably makes sense to keep flv as a global variable—outside of any function.

Masks

I decided I wanted the video clip to be circular in shape. This turned out to be easier than I expected. My code creates a circle and uses the circle to be a mask for flv. The coding is

import flash.display.Shape; //identify the appropriate library for graphics

var circle:Sprite = new Sprite();

circle.graphics.lineStyle(1, 0x000000);

circle.graphics.beginFill(0x000000);

circle.graphics.drawCircle(75, 75, 50);

circle.graphics.endFill();

addChild(circle);

flv.mask = circle;

The 0x000000 values represent hexadecimal numbers that, in turn, represent Red Green Blue colors. The RGB value 000000 is black. In fact, the circle can be any color. The flv object shows through any part of the mask object, the circle that is opaque, meaning not transparent. If you need to create a more complex mask, put other shapes, for example, rectangles, using drawRect, between the beginFill and the endFill statements. The terminology is not intuitive to me: the mask[ed] stuff is what is shown!

Bouncing ball

The ball object is bounced using a Timer object for computer generated animation.

To use a timer requires code to declare and construct a Timer object. I do this with a single statement"

var mytimer:Timer = new Timer(50);

This defines a Timer object that will signal an event every 50 milliseconds, or, rather, potentially signal an event. Two more statements are necessary. A call to the addEventListener method associates an event with a function:

mytimer.addEventListener(TimerEvent.TIMER,moveball);

Next, it is necessary to start the timer:

mytimer.start();

Lastly, the function moveball needs to be defined. Before doing this, I define and initialize 2 global variables, that is, outside of the moveball definition.

var dx:int = 5;

var dy:int = 2;

These two values are used to modify the x and y positions of the flvb object. I give them these names because I think of it as displacement x and displacement y. These values are arbitrary. See the Bouncing Ball tutorial for explanation on how to set up the

Every timer interval, the coding in the moveball function starts with

function moveball(ev) {

flvb.x +=dx;

flvb.y += dy;

When a function is registered with a call to addEventListener, it must have a single parameter. This is the ev parameter indicated for moveball. It is not used in the internal code of this function. See the other examples using video playback for applications that do use the ev parameter.

These two statements move the ball by changing the value of the x and y properties.

Recall that this is a ball bouncing within virtual walls. The next part of moveball consists of 4 if statements. Each one checks for a wall being hit. I hit upon the numbers here by trial and error. Remember that x values start with zero at the left and go to the width of the Flash window on the right. The y values start with zero at the top of the screen and go to the height of the Flash window on the bottom. You go to Publish Settings/ HTML to set these, but I stuck with the default, 550 width and 400 height. The unit is pixels. The first if test is

if (flvb.x>=450) {

See the coding below for the other condition expressions.

The true-clause when hitting the bottom and the right wall consists of changing the sign of the corresponding displacement value: dx for the right wall and dy for the bottom wall AND stopping the movie clip play. this is done by calling the stop() method NOT for flvb but for flvb.flv:

flvb.flv.stop();

That is, the flv variable is a variable in the flvb movie clip instance.

When the ball is determined to hit the top or the right wall, my code sets dy or dx, respectively, to a positive value by using absolute value. The code also plays the movie clip:

flvb.flv.play();

Alternatively, I could have changed the name of the video clip file by using a statement that assigns a different string to flv.source. This would cause a new video clip to be played. The default setting is to play the video clip whenever the source property is set. You can use HELP to investigate properties of FLVPlayback objects.

The movie clip will stop when it is complete. If you like, you can write code to check for the completion and re-start the play back. The code is

flv.addEventListener(VideoEvent.COMPLETE,playagain);

function playagain(ev) {

flv.play();

}

The parameter ev is required for a function set up by addEventListener. It is not used in the code.

Note that I did not use this code involving checking for completion of the video clip in this example. Again, you can use HELP to determine other features of video playback.

Implementation

This very basic application consists of one symbol on the Stage. In Flash, Insert/New Symbol… Choose movie clip. Give it a name (I chose flvb. I also will make this the movie clip instance name.) There is nothing on the Stage for this symbol. Putting it another way, all the visible content is generated by ActionScript. Click on Window/Actions to get the Actions panel. The code has already been described. It is (again):

import fl.video.*;

import flash.display.Shape;

var flv:FLVPlayback;

flv = new FLVPlayback();

flv.source = "joshuahomerun.flv";

flv.width = 150;

flv.height = 150;

addChild(flv);

var circle:Sprite = new Sprite();

circle.graphics.lineStyle(10, 0xFFFFFF);

circle.graphics.beginFill(0xFFFFFF);

circle.graphics.drawCircle(75, 75, 50);

circle.graphics.endFill();

addChild(circle);

flv.mask = circle;

Return to the main movie by clicking on Scene 1.

It is necessary to get an FLVPlayback symbol in the Library. Click on the Window menu, Components, then drag FLVPlayback to the Library.

Click on the flvb symbol in the Library and drag it to the Stage and give it the instance name flvb. Remember that Movie Clip symbols need instance names. The symbol name only is not sufficient.

Click on the first and only frame and then Window/Actions. The code is

var dx:int = 5;

var dy:int = 2;

var mytimer:Timer = new Timer(50);

mytimer.addEventListener(TimerEvent.TIMER,moveball);

mytimer.start();

function moveball(ev) {

flvb.x +=dx;

flvb.y +=dy;

if (flvb.x>=450) {

dx = -dx;

flvb.flv.stop();

}

if (flvb.x <=-40) {

dx = Math.abs(dx); // make it positive

flvb.flv.play();

}

if (flvb.y>=340) {

dy = -dy;

flvb.flv.stop();

}

if (flvb.y <=-40) {

dy = Math.abs(dy); // make it positive

flvb.flv.play();

}

}

Notice that there is only 1 object on the Stage, the flvb symbol instance, and it looks and is empty until execution time. Here is a screen shot showing the Flash environment. Note the a indicating ActionScript in the single frame. Note also the 2 items in the Library. Lastly, note the selected instance named flvb.

Try it! Then use these general concepts to playback of video in your own application.