Netstream() loop problem

Question

I'm preloading 4 flv movies and hide them, when I rollover the videobutton movieclip i want the flv video to fade in and start playing. I have this working code, but I feel it's very badly written.

var videos:Array = new Array(
'ltp_video-low1.flv',
'ltp_video-low1.flv',
'ltp_video-low1.flv',
'ltp_video-low1.flv'
);

function videoOver(buttonMC,video,stream) {
 buttonMC.onRollOver = function() {
 stream.pause(false);
 video.attachVideo(stream);
 fadeIn(video);
 };
}

function videoOut(buttonMC,video,stream) {
 buttonMC.onRollOut = function() {
 fadeOut(video);
 stream.pause();
 };
}

for (var i:Number=1; i<=4; i++) {
 this['connection'+i] = new NetConnection();
 this['connection'+i].connect(null);
 this['stream'+i] = new NetStream(this['connection'+i]);
 this['stream'+i].play(videos[i-1]);
 videoOver(this['videobutton'+i],this['video'+i],this['stream'+i]);
 videoOut(this['videobutton'+i],this['video'+i],this['stream'+i]);
}

Instead I want something like this: But this doesn't work, something wrong with the attachVideo() i think.

for (var i:Number = 1; i<=4; i++) {
 this['connection'+i] = new NetConnection();
 this['connection'+i].connect(null);
 this['stream'+i] = new NetStream(this['connection'+i]);
 this['stream'+i].play('ltp_video-low1.flv');
 this['videobutton'+i].i = i;
 this['videobutton'+i].onRollOver = function() {
  this['stream'+this.i].pause(false);
  this.attachVideo(['stream'+this.i]);
  fadeIn(['video'+this.i]);
 };
 this['videobutton'+i].onRollOut = function() {
  this['stream'+this.i].pause();
  this.attachVideo(['stream'+this.i]);
  fadeOut(['video'+this.i]);
 };
}

Here is all the code:

// Import TweenLite
import gs.*;
import gs.easing.*;

// Creates the fade functions
function fadeIn(video) {
 TweenLite.to(video,0.5,{_alpha:100, ease:Regular.easeOut});
}
function fadeOut(video) {
 TweenLite.to(video,0.5,{_alpha:0, ease:Regular.easeOut});
}

// Parses the Flashvars into arrays
var titles:Array = (_level0.titleVars) ? _level0.titleVars.split(',') : [];
var urls:Array = (_level0.urlVars) ? _level0.urlVars.split(',') : [];

// Sets the mouse action
function SetMouseAction(indexNumber, buttonMC, arrowMC, dynamicTF, linkURL):Void {
 buttonMC.colorText = dynamicTF;
 buttonMC.onRollOver = function() {
  TweenLite.to(arrowMC,0.2,{_x:"2", _alpha:80, ease:Back.easeOut, tint:0x7cb0b7});
  this.colorText.textColor = 0x7cb0b7;
  // Fixes the Flash bug with button over each other
  if (indexNumber == 1 || indexNumber == 2 || indexNumber == 3) {
   stream1.pause(false);
   fadeIn(video1);
  }
  if (indexNumber == 4 || indexNumber == 5 || indexNumber == 6) {
   stream2.pause(false);
   fadeIn(video2);
  }
  if (indexNumber == 7 || indexNumber == 8 || indexNumber == 9) {
   stream3.pause(false);
   fadeIn(video3);
  }
  if (indexNumber == 10 || indexNumber == 11 || indexNumber == 12) {
   stream4.pause(false);
   fadeIn(video4);
  }
 };
 buttonMC.onRollOut = function() {
  TweenLite.to(arrowMC,0.2,{_x:37, _alpha:100, ease:Back.easeOut, tint:0xFFFFFF});
  this.colorText.textColor = 0xffffff;
 };
 buttonMC.onRelease = function() {
  if (linkURL) {
   getURL(linkURL);
  }
 };
}

// Loops trough all the MC
for (var i:Number = 1; i<=12; i++) {
 SetMouseAction(i,this["link"+i],this["arrow"+i],this["text"+i],urls[i-1]);
 this["text"+i].text = titles[i-1];
}





var videos:Array = new Array('ltp_video-low1.flv', 'ltp_video-low1.flv', 'ltp_video-low1.flv', 'ltp_video-low1.flv');

function videoOver(buttonMC, video, stream) {
 buttonMC.onRollOver = function() {
  stream.pause(false);
  video.attachVideo(stream);
  fadeIn(video);
 };
}

function videoOut(buttonMC, video, stream) {
 buttonMC.onRollOut = function() {
  fadeOut(video);
  stream.pause();
 };
}

for (var i:Number = 1; i<=4; i++) {
 this['connection'+i] = new NetConnection();
 this['connection'+i].connect(null);
 this['stream'+i] = new NetStream(this['connection'+i]);
 this['stream'+i].play(videos[i-1]);
 videoOver(this['videobutton'+i],this['video'+i],this['stream'+i]);
 videoOut(this['videobutton'+i],this['video'+i],this['stream'+i]);
}



/*
for (var i:Number = 1; i<=4; i++) {
 this['connection'+i] = new NetConnection();
 this['connection'+i].connect(null);
 this['stream'+i] = new NetStream(this['connection'+i]);
 this['stream'+i].play('ltp_video-low1.flv');
 this['videobutton'+i].i = i;
 this['videobutton'+i].onRollOver = function() {
  this['stream'+this.i].pause(false);
  this.attachVideo(['stream'+this.i]);
  fadeIn(['video'+this.i]);
 };
 this['videobutton'+i].onRollOut = function() {
  this['stream'+this.i].pause();
  this.attachVideo(['stream'+this.i]);
  fadeOut(['video'+this.i]);
 };
}
*/

Answer 1

In your original code you have:

function videoOver(buttonMC,video,stream) {
  buttonMC.onRollOver = function() {
    stream.pause(false);
    video.attachVideo(stream);
    fadeIn(video);
  };
}

videoOver(this['videobutton'+i],this['video'+i],this['stream'+i]);

In this case attachVideo is being called on a video object.

I don't see in your code where the video objects are declared, but I'll assume it's there.

In the second piece of code you're doing this:

this['videobutton'+i].onRollOver = function() {
  this['stream'+this.i].pause(false);
  this.attachVideo(['stream'+this.i]);
  fadeIn(['video'+this.i]);
};

So the attachVideo is being called on the videobutton object, not the video object.

Also, I don't think the reference to the stream will work, as your this variable will be the videobutton, which as far as I can tell doesn't have that value defined (the "this" reference within the function() {} is not the same as the this reference outside of it).

I think the call to fadeIn might also work incorrectly, as I think the scope will be messed up.

---

Here's something that might work. I haven't tested it at all, but hopefully you'll get the idea of what I'm trying for.

for (var i:Number = 1; i<=4; i++) {
  this['connection'+i] = new NetConnection();
  this['connection'+i].connect(null);
  this['stream'+i] = new NetStream(this['connection'+i]);
  this['stream'+i].play('ltp_video-low1.flv');
  this['videobutton'+i].i = i;
  setHandlers(i);
}

function onVideoButtonRollOver(i:Number):Void {
  this['stream' + i].pause(false);
  this.attachVideo(this['stream' + i]);
  this.fadeIn(this['video' + i]);
}

function onVideoButtonRollOut(i:Number):Void {
  this['stream' + i].pause();
  fadeOut(this['video' + i]);
}

function setHandlers(i:Number):Function {
  this['videobutton'+i].scope = this;
  // This essentially fixes the scope issue.  The value of i is retained
  // properly due to the property of closures.
  this['videobutton'+i].onRollOver = function() {
    this.scope.onVideoButtonRollOver.apply(this.scope, [i]);
  }
  this['videobutton'+i].onRollOut = function() {
    this.scope.onVideoButtonRollOut.apply(this.scope, [i]);
  }
}

Though I'm not really happy with this. I think the code should probably be refactored so that you have a single object per group, with members like "stream", "connection", etc. I think that would make things a lot cleaner as you wouldn't have to constantly be referring to the index.