No syntax error, but causing flash player to run slowly. Why?

[Boxwell]

This is a script I did today to draw 6 rectangular boxes down the side of the screen. Its from a program in Fresh Flash (new design ideas with Flash MX), I've changed it to my needs. There are no syntax errors but it is causing the Flash Player to run slowly. I am using Flash MX. Can anyone help?

All it involves is this script in the first frame of the movie.

MovieClip.prototype.drawSquare = function(xpos,ypos,wdth,lgth,fcolour){
x = xpos;
y = ypos;
w = wdth;
l = lgth;
this.lineStyle(1,0,100);
this.beginFill(fcolour,50);
this.moveTo(x,y);
this.lineTo(x,y+l);
this.lineTo(x+w,y+l);
this.lineTo(x+w,y);
this.lineTo(x,y);
this.endFill();
}

//create squares and add events

for(i=0;i=150;i+=30){
_root.createEmptyMovieClip('mc'+i,i);
with(_root['mc'+i]){
drawSquare(100,i,10,30,0xFFFFFF);
}

//the rollover
_root["mc"+i].onRollOver = function(){
_root.createEmptyMovieClip("rol",1000);
rol.drawSquare(100,this._y,10,30,0xFFFFCC);
}

//the rollout
_root["mc"+i].onRollOut = function(){
rol.clear();
}

//the release
_root["mc"+i].onRelease = function(){
_root.texttarget = i*30;
}
}


Thanks for any help

Graeme
www.reebox.co.uk

[garbage]

Originally posted by Boxwell
There are no syntax errors ...

...
for(i=0;i=150;i+=30){
...

Guess again! This line should read:

for (i = 0; i == 150; i += 30) {

It's always the little mistakes ...

[Boxwell]

Nice one, thats stopped it running slowly, but I'm now not getting anything on the screen. when I caheck the variables, i = 0. What have I done wrong?

I put a trace(i); right after the for loop statement and am not getting anything.


Thanks again
Graeme

[garbage]

Try this ... it looks like there's something wrong with the rollover code (I don't know how to fix it), but the main problem was (again) with the loop initiator:

MovieClip.prototype.drawSquare = function(xpos, ypos, wdth, lgth, fcolour) {
    x = xpos;
    y = ypos;
    w = wdth;
    l = lgth;
    this.lineStyle(1, 0, 100);
    this.beginFill(fcolour, 50);
    this.moveTo(x, y);
    this.lineTo(x, y+l);
    this.lineTo(x+w, y+l);
    this.lineTo(x+w, y);
    this.lineTo(x, y);
    this.endFill();
};
// create squares and add events
for (i = 0; i <= 150; i += 30) {
    _root.createEmptyMovieClip('mc'+i, i);
    with (_root['mc'+i]) {
        drawSquare(100, i, 10, 30, 0xFFFFFF);
    }
    // the rollover
    _root["mc"+i].onRollOver = function() {
        _root.createEmptyMovieClip("rol", 1000);
        rol.drawSquare(100, this._y, 10, 30, 0xFFFFCC);
    };
    // the rollout
    _root["mc"+i].onRollOut = function() {
        rol.clear();
    };
    // the release
    _root["mc"+i].onRelease = function() {
        _root.texttarget = i*30;
    };
}

[Boxwell]

Yeah, thats sorted the loop okay. Thanks for that. Can anyone tell me why the rollover isn't quite working. I thought that as these events are being added during the loop it would work for each movieclip. When I rollover any of the squares it creates a coloured square in the top square (it should do it over the relevant square.)
I'm sure it is something to do with the line:


rol.drawSquare(100, this._y, 10, 30, 0xFFFFCC)

but I can't work out what. I've tried drawSquare(100,_root["mc"+i]._y,10,30,0xFFFFCC) but that does the same thing.

Any ideas?

Thanks again
Graeme
www.reebox.co.uk

[Boxwell]

Can nobody help me? Once I get past this stage it should be plain sailing (famous last words!!) but I am stuck here.

Thanks

Graeme

[Boxwell]

Hooray, I've managed to sort it out. If anyone was wondering why it wasn't working then let me know and I'll explain.

Thanks for all your help garbage,

Cheers
Graeme
www.reebox.co.uk

[garbage]

Okay - I had another look at it, and I can tell you WHY it doesn't work ... but I can't tell you how to make it work.

The problem is due to the scoping of the functions. This is the problem section:

// the rollover
    _root["mc"+i].onRollOver = function() {
        _root.createEmptyMovieClip("rol", 1000);
        rol.drawSquare(100, this._y, 10, 30, 0xFFFFCC);
    };

Now, the function in the button goes like this - "make a movieClip in the main timeline called "rol", and place it at depth 100". Okay, no problems there. Now we hit the snag. The function on the button hands over to a function placed generically in "rol" called "drawSquare", which says "place this clip at co-ords x=100, y=the co-ords rol is currently at, width=10, height=30, colour=0xFFFFCC".

See the problem? "this._y" uses "rol"'s scope to calculate the Y position, NOT the movieClip that calls the button function. The only way I can think to fix it would be to pass the name of the clip calling the function to the function ... but I'm not sure that can even be done when using function literals, as in this case.

If I think of anything I'll let you know, but maybe someone else can pick up here and fill us both in!

[garbage]

Do tell, B ... I'm dying to know!

[Boxwell]

Its because of the way Flash positions movieclips when they are created. It always positions them at 0,0. So even though my movie was drawing the boxes okay (due to the y in the drawSquare function increasing with i) it had the co-ordinates of all the movies at (0,0).

I changed it so that the co-ordinates of each movie changed instead of the y-co-ordinate in the drawSquares function (that could stay at 0 as each movie would be on a different y co-ordinate.

Here's the final code for your viewing pleasure!!


MovieClip.prototype.drawSquare = function(xpos,ypos,wdth,lgth,fcolour){

x = xpos;
y = ypos;
w = wdth;
l = lgth;
this.lineStyle(1,0,100);
this.beginFill(fcolour,50);
this.moveTo(x,y);
this.lineTo(x,y+l);
this.lineTo(x+w,y+l);
this.lineTo(x+w,y);
this.lineTo(x,y);
this.endFill();

}

//create squares and add events

for(i=0;i<180;i+=30){

_root.createEmptyMovieClip("mc"+i,i);
with(_root["mc"+i]){
drawSquare(100,0,10,30,0xFFFFFF)
_x = 0;
_y = i;
}

//the rollover
_root["mc"+i].onRollOver = function(){
_root.createEmptyMovieClip("rol",1000);
rol.drawSquare(100,this._y,10,30,0xFFFFCC);

}

//the rollout
_root["mc"+i].onRollOut = function(){
rol.clear();
}

//the release
_root["mc"+i].onRelease = function(){
_root.texttarget = this._y*-4;

}
}



It is used to control the movement of a sliding block of masked text. The movie with the text in it has this code placed on it.

onClipEvent (enterFrame) {
yslide = (_root.texttarget - this._y) * 0.3;
this._y += yslide;
}


It works really well.

Thanks again for your help

Graeme
www.reebox.co.uk