Actionscript 3 Videowall / Videotexture

actionscript 3, BitmapData, video

Here I am with my first experiment on this blog.

I was trying to get a videowall effect by displaying many times the same video tiled on X rows and columns.

The bad one…

The logic says to create N*N Video Class instances and position them dinamically with a double for loop on rows and columns.
Alternatively we can speed up things by using the FLVPlayback component so we don’t need to manage connections and NetStream objects.

As I expected that couldn’t be that simple. Just with 10*10 (100 for non-math guys :-) ) wall the frame rate is fast dropping and audio and video desynch issues appear. Another point is that you have to manually mute all FLVPlayback/Video instances except one for having one single audio playback.

Here is the “bad” code:

This example will try to create a video wall instancing many times the FLVPlayback component with the same video source.
Results are very poor performances and audio sync issues.


/* set the number of horizontal and vertical tiles
a matrix of tiles*tiles instances will be created
try with very low numbers to avoid crashes.
A value of 10 will produce (10*10=) 100 instances of the FLVPlayback on the stage 
var tiles:uint=4;

// get stage size for tile size calculating
var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;

// calculate the size of a single tile
var vw:Number=sw/tiles;
var vh:Number=sh/tiles;

// perform a double cicle on rows and columns
for (var i:uint=0; i

If you use FLVPlayback as I do in the above code just remember to drop the component in the library before compiling the movie or flash will not be able to attach it dinamically.

And here is the (almost) working example.

As you can see videos are not perfectly synchronized and just raise a little the tiles number to make everything laggy.

...and the good one

Ok, now the better idea in another picture and few words:

  1. Add a single FLVPlayback instance
  2. create e bitmapdata and a bitmap to display it
  3. add a frame based event to apply the draw() method of the bitmapdata to the video instance N*N times at everyframe with a translation matrix to set the position of every tile.
  4. add the bitmap to the stage and hide the FLVPlayback instance.
  5. Enjoy

I really couldn't believe how the new AS3 bitmap engine can perform well once again. I have added a numeric stepper to let you dinamically change the tiles number and test it yourself. I set the limit to 50*50 (2500!) tiles and on my old Athon XP 3200 it just shows a little of audio stuttering when reaching that limit.

Here is the well working example,

and here comes the code:

This example will use a single bitmap and the bitmapdata draw() method to render everyframe the video content as texture

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Matrix;
import fl.controls.NumericStepper;

// get stage size for tile size calculating
var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;

var tiles:uint;
var vw:Number;
var vh:Number;

// create a single instance of the FLVPlayback component
var video:FLVPlayback=new FLVPlayback();
// add to stage the newly created FLVPlayback instance

// create the destination bitmap/bitmapdata
var bdata:BitmapData=new BitmapData(sw, sh, false, 0xeeeeee);
var bitmap:Bitmap=new Bitmap(bdata);
// perform a double cicle on rows and columns

function setTiles():void {
	// get the tiles number from the NumericStepper value
	// calculate the size of a single tile
	video.setSize(vw, vh);
addEventListener(Event.ENTER_FRAME, onframe);
function onframe(event:Event):void {
	for (var i:uint=0; i

Hope you liked my first actionscript post.

Edit: I didn't forget the beginBitmapFill method, but the project started a little different (not all the tiles was identical) and so I left the manual loop. In a few times I'll post the beginBitmapFill version for performance comparison.



  1. andrea  •  Dec 26, 2007 @9:05 pm

    I understood the code, the two examples show exactly the issue regarding how flash manages video’s steams. A new tip to know for me as i feel frustrated and like kid on developing above the flash platform.

  2. andrea SilentCode  •  Dec 26, 2007 @9:27 pm

    Could u paste please for the next on line examples the sources of your experiments ?
    thx in advance

  3. Pierluigi Pesenti  •  Dec 26, 2007 @11:34 pm

    The sources are not useful here. It’s only code, just copy all the code and paste it on the first frame of a blank fla.
    In addition you just need to drop a FLVPlayback component to the library because all the v3 components need to be in the library to be attacched dinamically.

  4. jesse harshbarger  •  Jan 21, 2008 @6:04 pm

    “In addition you just need to drop a FLVPlayback component to the library because all the v3 components need to be in the library to be attached dynamically.”

    …this means the NumericStepper component also needs to be a library item. These can be found in the Component Library; User Interface and Video. Drop an instance of each onto the stage and delete the instance from the stage. They will remain in the library.

  5. Pierluigi Pesenti  •  Jan 21, 2008 @9:07 pm

    I don’t get it. We are saying the same thing :)
    Dropping to the stage and deleting a component is the same as dropping it to the library.


  6. P.J. Onori  •  Mar 17, 2008 @11:11 pm

    Very nice work – bitmap draw is a beautiful thing. :)

  7. Scott  •  Oct 1, 2008 @8:18 pm

    Exactly what I was looking for… many thanks!

  8. Jack Johnson  •  Oct 16, 2008 @2:00 pm


    Nice work. It helps in what I’m trying to do. creating video wall like this hxxp://

    any thought or quick “how to” on it’ll be great.


  9. Ganaraj  •  Nov 25, 2011 @11:34 am

    It will be even faster, if you just did 1 Bitmapdata.draw() and then created n bitmaps, referenced all the bitmaps to the same bitmapdata.

    Since you are trying to create the same image all over the place. it is easily possible to do what you are trying to do and the performance will be even better. Bitmapdata.draw is a costly call. Instead of doing n bitmapdata.draw, you are not doing just 1. Which means your performance should shoot up n times.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>