Wave pool depths issues

Hello everyone.

I’m having a few problems getting an idea to work. **3 **problems actually.

You can see it here: http://www.cloudesign.com/clients/depthproblem/

I’ve taken Senocular’s wave pool code and attempted to integrate it into a full browser design. 1 One of the problems is that the “pool” doesn’t stretch all the way across in the browser.

Here’s how the wave pool is generated:

this.createEmptyMovieClip("pool",1);
pool.count = 200;
pool.spacing = 5;
pool.seaLevel = -65;
pool.delay = 4;
pool.accel = 0.03;
pool.fric = 0.88;

pool._y = Stage.height

pool._alpha = 40;

pool.init = function(){
    this.pause = 0; // control pause interval
    this.theFrame = 0; // count frames to control pause
    this.curr_ymouse = this._ymouse; // current mouse position
    this.points = new Array();
    // populate points array
    var point = 0;
    while (point < this.count) {
        this.points[this.points.length] = {
            x: point * this.spacing,
            y: this.seaLevel,
            speed: 0,
            num: point,
            process: new Array(),
            nProcess: new Array()
        };
        ++point;
    }
}
pool.makeWave = function (num, mag) {
    this.points[num].speed += mag;
    this.points[num - 1].process[this.points[num - 1].process.length] = [mag, -1];
    this.points[num + 1].process[this.points[num + 1].process.length] = [mag, 1];
};

pool.mouseWaveNum = function () {
    return Math.round(Math.min(Math.max((this._xmouse) / this.spacing, 0), this.count));
};

pool.onMouseMove = function () {
    this.last_ymouse = this.curr_ymouse;
    this.curr_ymouse = this._ymouse;
    var thisNum = this.mouseWaveNum();
    var curr_y = this.points[thisNum].y;
    if (curr_ymouse < curr_y && curr_y < this.last_ymouse || curr_y < this.curr_ymouse && this.last_ymouse < curr_y) {
        this.makeWave(thisNum, Math.min(Math.max(-1, (this.curr_ymouse - this.last_ymouse) * 0.5), 1));
    }
};
pool.onEnterFrame = function() {
    var next, me, i, col;
    var point = 0;
    // process waving motion
    while (point<this.count) {
        me = this.points[point];
        me.speed += (this.seaLevel-me.y)*this.accel;
        me.speed *= this.fric;
        me.y += me.speed;
        if (!this.pause) {
            i = 0;
            while (i<me.process.length) {
                me.speed += me.process*[0];
                next = this.points[point+me.process*[1]];
                next.nProcess[next.nProcess.length] = me.process*.slice();
                ++i;
            }
        }
        ++point;
    }
    
    // draw lines (needs to be after waving, not during)
    var point = 0;
    this.clear();
    this.beginFill(0x134E66,100);
    while (point<this.count) {
        me = this.points[point];
        if (!this.pause) {
            me.process = me.nProcess;
            me.nProcess = [];
        }
        if (!point) col = 0x70E0;
        else{
            col = 127+Math.min(Math.max(20*(this.points[point-1].y-me.y), -127),128);
            col = ((col/2)<<8) | col; // green thats 1/2 the blue
        }
        this.lineStyle(0,col,100);
        this.lineTo(me.x, me.y);
        ++point;
    }
    this.lineStyle(0,0x38,100);
    this.lineTo(me.x,0);
    this.lineTo(0,0);
    // update pausing
    this.pause = this.theFrame++ % this.delay;
};

// get things in motion.
pool.init();

And here’s how I’m controlling it’s position on the stage:

Stage.align = "TL";
Stage.scaleMode = "noScale";
stop ();

// initial positions

pool._y = Stage.height
pool._width = Stage.width

player._y = Stage.height - 20
player._x = Stage.width - 485

bottombar._width = Stage.width
bottombar._y = Stage.height - 20

// end initial position setting


// resize listener
sizeListener = new Object();
sizeListener.onResize = function() {
    // resize positions

pool._y = Stage.height
pool._width = Stage.width
    
player._y = Stage.height - 20
player._x = Stage.width - 485
    
bottombar._width = Stage.width
bottombar._y = Stage.height - 20

 
};
Stage.addListener(sizeListener);

I can’t get it to initialize at the browser width.

2 The other issue I’m having is I don’t know how to control at what depth the “pool” is placed, I need it to be underneath “bottom bar” and the container.

I’m bringing in the MP3 player through a container MC like this:

player.loadMovie("mp3player.swf");

3 The last issue I’m having is that I’m wondering if there’s a smoother way to control objects on the stage? When changing the browser size around, I don’t get as smooth an effect as I’ve seen elsewhere

Anyone have an ideas? Here’s the source, please help me:

http://www.cloudesign.com/clients/depthproblem/depth_problem.zip

hmmm… am I not being clear or is this just a really boring thread?

the link doesn’t appear to show anything of what you are talking about

I can’t visualise what you are getting at :stuck_out_tongue:

You might need to resize your browser to see some of the issues.

The wave pool is the blue strip at the bottom of the browser, touch it to see the waves.

The “pool” MC is created through the AS above, and it’s getting placed at the top of the stage, I want it underneath the brown bar and mp3player, but can’t seem ot control the depth of it.

The other issue I’m having is that the pool doesn’t stretch to the browser width on the first frame, only on resize, even though the code is identical.