Screen division based on cursor position

1

I need advice in developing a dynamic user-controlled display. I’ve divided the layout into three equal parts. I wish to change these proportions based on cursor position:

if the user moves into panel A (left), panel A increases its width to 75% of the total area while panels B and C contract to fill the remaining 25% (at right).

if the user moves into panel B (center), panel B increases its width to 75% of the total area while panels A (moving left) and C (moving right) contract to fill the remaining 25%.

if the user moves into panel C (right), panel C increases its width to 75% of the total area while panels A and B contract to fill the remaining 25% (at left).

Any ideas? :red:

2

try this:


totalWidth = 500;
buttonA.onRollOver = function() {
     this._width = totalWidth*.75;
     buttonB._width = totalWidth*.25;
     buttonC._width = totalWidth*.25;
}

Just copy similar code to each element. You could also add an easing script…

Just make sure your registration points are where they need to be for the resize, and also consider using xscale instead of width depending on your content. :wink: