How can I control the depth (layer position) of a Flash Video?

Question

I would like to place a video object above one movieClip instance ("mc"), but below another movieClip instance ("mc_top").

I instantiated the _root.flashVid object by dragging a "New Video..." from the Library to the stage, and giving it the instance name "flashVid".

I create mc, then paint a blue box, then I create mc_top, and paint a yellow box. The flashVid instance is on the Stage (_root) from the beginning. Now how do I get the flashVid above "mc" but below "mc_top"?

// Create movieclips and paint boxes.
var mc:MovieClip = _root.createEmptyMovieClip("test", 
                                              _root.getNextHighestDepth());

mc.beginFill(0x0000ff, 50);
mc.lineStyle(2, 0x0000ff, 100);
mc.moveTo(0,0);
mc.lineTo(400, 0);
mc.lineTo(400,400);
mc.lineTo(0,400);
mc.lineTo(0,0);
mc.endFill();

var mc_top:MovieClip = mc.createEmptyMovieClip("test_top", 
                                               mc.getNextHighestDepth());
mc_top._x = 200;
mc_top.beginFill(0xffff00, 50);
mc_top.lineStyle(2, 0xffff00, 100);
mc_top.moveTo(0,0);
mc_top.lineTo(400, 0);
mc_top.lineTo(400,400);
mc_top.lineTo(0,400);
mc_top.lineTo(0,0);
mc_top.endFill();

// Flash video code (using Video object on stage, no components)
var nc = new NetConnection();
nc.connect(null);
var ns = new NetStream(nc);
ns.play("http://dl.getdropbox.com/u/295386/Stormpulse/my.flv");

// Tell flashVid to play what's coming through the netstream.
_root.flashVid.attachVideo(ns);

Answer 1

This answer is from David Stiller of quip.net

In AS2, the Video class doesn't feature any depth-related properties or moethods (contrast this, for example, with the MovieClip.swapDepths() method). For this reason, if you want to change a video's depth with AS2, you'll have to wrap the video object inside a movie clip. You'll have to give that wrapper movie clip an instance name, so you can change its depth with swapDepths(). That'll also change your reference for the attachVideo() method.

e.g.

// instead of this ...
_root.flashVid.attachVideo(ns);

// ... you'll have to use this ...
_root.wrapperMC.flashVid.attachVideo(ns);

... where "wrapperMC" stands for whatever instance name you've given the wrapper movie clip. Does that make sense?

The other thing to note is that movie clips dragged to the stage by hand are always lower, depth-wise, than movie clips attached to the stage by attachMovie() or createEmptyMovieClip(). So make sure to attach them all with code, or drag them all to the stage by hand. Otherwise, you'll have to "force" the manually dragged movie clip into the higher depths of the attached/created clips by using swapDepths() on it first.

// Declare a reusable variable to manage the
// attachment of three movie clips

// Here's the first usage (note the depth of 3)
var mc:MovieClip = this.attachMovie("contentAbove", "upperSquare", 3);

// Here's the second (the video wrapper, depth of 2)
mc = this.attachMovie("wrapper", "videoWrapper", 2);
// move this one down a tad
mc._y = 80;

// Here's the third (depth of 2)
mc = this.attachMovie("contentBelow", "lowerSquare", 1);
// move this one down even more
mc._y = 160;

// Now wire up the video
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoWrapper.flashVid.attachVideo(ns);
ns.play("http://dl.getdropbox.com/u/295386/Stormpulse/my.flv");

Answer 2

a shorter approach would be

MovieClip.prototype.swapDepths.call(_root.flashVid,_root.getNextHighestDepth());

to generally fix the problem, try this code:

Video.prototype.swapDepths = MovieClip.prototype.swapDepths;
Video.prototype.getDepth = MovieClip.prototype.getDepth;

afterwards instances of Video will have both methods available ... to not have compiler errors on variables strictly typed to Video, you will need to update your intrinsics (in the flash IDE path - just search for Video.as on your hard disk, and you should find them ... then copy the declarations of both swapDepths and getDepth from MovieClip.as to Video.as) ...

i will not dive into details for explanation. you should look at the call method of the class Function and read about how prototypes work in AS and AS2 (and JS and AS3 a little) ...

Answer 3

All you have to do is put the video inside an empty movieclip (as suggested above) and manipulate that movieclip in terms of depth. Very simple.