Moving/Scaling tiles based on currently selected tile (multidimensional dock effect?)

[nolen]

Basically, I'm trying to accomplish what the following images show:

This:


into this:



When you mouse over one of the tiles, the tiles surrounding it move away and scale/skew accordingly.

How would I go about calculating something like this? Have each tile track its surrounding tiles and always stay a specified distance away?

Has anyone done something similar to this and could possibly explain how they did it? I would prefer an explanation over an flat .fla or component. I want to understand how to do this.

[5TonsOfFlax]

Your images don't work. Apparently the host doesn't like people leeching bandwidth. Try another image host such as http://imageshack.us/

[nolen]

Your images don't work. Apparently the host doesn't like people leeching bandwidth. Try another image host such as http://imageshack.us/

Oh how odd, they've always worked before. Let's try this then:

This:


into this:

[5TonsOfFlax]

Well, the pictures work now. I don't know how to help with your problem. I would expect that you'd have to keep your tiles in a structure so that you can easily find the neighboring 8 tiles, and manipulate their height and width accordingly. It looks like the particular scaling factor depends on the mouse position in that the squishing is not symmetrical vertically. It's an interesting problem. Basically, you know that you have 3x small size width and 3x small size height in which to place those resized 9 tiles. You also know how big the middle tile is, so you can derive the width and height of the smaller tiles by divvying up the 3x - middleTile.width according to some weighting technique.

Good luck.