Prototype question

I was reading about prototype last night, and thought I'd give it my first try. Now, I have a question...there are 8 instances of a MC on the stage, named bar1-bar8...and I have them growing, in succession, in _xscale...can anyone tell me why the code below makes each bar grow quicker than the last:

code:

---

onLoad = function () {

	_root.i = 1;

	_root.speed = 10;

};

MovieClip.prototype.bargrow = function() {

	if (_root["bar"+i]._xscale<=200) {

		_root["bar"+i]._xscale += _root.speed;

	}

};

_root["bar"+i].onEnterFrame = function() {

	_root["bar"+i].bargrow();

	if (_root["bar"+i]._xscale>=100) {

		i++;

	}

};

---

if this is really simple, and I look stupid, can I say my girlfriend wrote it? ;) <just don't tell her I said that> :)

thanks, and I've attached a sample of the file if you want to see it.
Adam

This fixes it, explanations below.

Code:

---


onLoad = function ()
{
  _root.i = 1;
        _root.speed = 10;
};

MovieClip.prototype.bargrow = function() {
        if (this._xscale<=200) {
                this._xscale += _root.speed;
        }
};

_root["bar"+i].onEnterFrame = function()
{
        this.bargrow();
        if (this._xscale>=100) {
                i++;
                this.onEnterFrame = undefined;
        }
};

---

There were a couple of problems with your code. The line that "fixes" the problem is this one:

this.onEnterFrame = undefined;

Without this line, you were defining an onEnterFrame function for each movieClip, but it was always operating on the "i" movieClip, so by the end, you had all 8 movieclips working together to grow the 8th movieclip (8 times as fast).

I should also note that your script may have behaved differently when your main timeline had only one frame. In this case, the script would have been executed only once, and the onEnterFrame would have been defined only for the first bar, which would have grown all the other bars in sequence. But since your movie is 2 frames long, frame 1 gets reloaded repeated, and the onEnterFrame handler gets redefined for each movieclip as 'i' counts up.

The 'undefined' line, which I added, undefines the onEnterFrame handler for each movie clip when it is stopped growing, so only one clip 'grows' itself at a time.

The second change I made was to use the word 'this' where appropriate. Inside a MovieClip.prototype function, if you are referring to the clip that is executing the function, you don't need to do all that _root["bar"+i] nonsense. Just use 'this' to refer to the clip that is executing the function.

- Jim

Thanks, Jim..I saw you lurking around here, and was hoping you'd jump on this thread...you seem to be full of information for us hopefulls :) I initially had "this" in there, but went through soooo many transformations trying to get it figured out. Now, you mentioned about it being two frames long, it wouldn't work with only one frame, is this odd? I want to thank you for your in depth description on what you did...you've made things very clear :D

Adam

Glad to help. As you've written the script, it will only work if your main timeline is 2 or more frames long. This is because you are depending on the value of i to change (to count up) and then using it in the line that sets the onEnterFrame function for the i'th movie.

It is possible to slightly tweak the script so that it functions for a single-frame timeline. That would look something like this:

Code:

---


onLoad = function ()
{
  _root.i = 1;
  _root.speed = 10;
};

bar1.onEnterFrame = function()
{
  this._xscale += _root.speed;
  if (this._xscale>=100)
  {
    this._xscale = 100;     
    i++;
    _root["bar"+i].onEnterFrame = this.onEnterFrame;
    this.onEnterFrame = undefined;
  }
};

---

This initially assigns the 'onEnterFrame' function to bar1. When bar1 is done growing, it assigns the onEnterFrame to the next movie, and clears it's own copy.

This function magically stops after 8 bars because there is no 'bar9' movie.
However, if you wanted to be more explicit about it (and prevent a needless reference to a non-existant movieclip), you could change the line that says:

if (this._xscale>=100)


to this:

if (this._xscale>=100 && i < 8)


In this example, I also got rid of the separate 'bargrow' function, and incorporated its functionality into the onEnterFrame function, since that was the only place it was used.

- Jim

WOW!!! thanks, Jim. You have a very clear way of explaining things, so that they actually make sense to me :)

Adam