Roll-over Scaling Explanation  
How does the rollover scaling example work?

The Images (webdings never looked so good).
Each image is a movie clip. The image in each movie clip is a button. The up state of each button is the grey version of each image, the over state is the colored version of the image. The origin (centre point) of each movie clip is the top left corner of the clip.

The Layout.
You can see the original layout of the screen by switching on the grid button and moving the cursor to an area without any image. The movie is 600x300 divided into 50x50 squares. Each movie clip takes up either 4 or 6 of these squares.

The Scripting.
Scripts are in three places. As clip actions on the 'boxes' movie clip itself (the MC that contains ALL the images). As clip actions on the individual movies, and as roll-over scripts on the buttons inside the movies.

Key to how the whole program works is the use of 6 arrays that keep track of the distortion of the grid. These are:

gx[0..11] ... stores the actual width of each column of the grid at any time

gy[0..5] ... stores the actual height of each row of the grid at any time

px[0..12] ... stores the positions of the lines separating the columns

py[0..6] ... stores the positions of the lines separating the rows

tgx[0..11] ... stores target values for gx values to move toward

tgy[0..5] ... stores target values for gy values to move toward

...at the start of the movie all these arrays are initialised to the values of an un-distorted grid- all the values in gx,gy,tgx & tgy are 50, and px and py contain 0,50,100,150 etc... This is done using an onClipEvent (load) block on the boxes movie clip.

The gx, gy,px and py values are dynamically recalculated on every frame based on the content of the target arrays (tgx and tgy). This is done in an onClipEvent (enterFrame) block on the boxes movie clip.

The contents of tgx and tgy are set by the scripts on the rollover actions of the individual movie clip buttons, when these are set to new values, the values of gx and gy will slowly change until they match (px and py are also re-calculated). The tgx,tgy values specified for each button set the columns and rows for that image to large values and all other columns and rows to correspondingly smaller values.

The onClipEvent(enterFrame) block on each individual movie clip positions the clip (_x & _y) to the relevant px and py array element. For example, if the movie clip is positioned in the third column and fourth row its top left position is given by px[2] and py[3]. In the same way, the width and height (_width, _height) of each clip is based on the values for the relevant column and row sizes. For example, if our clip mentioned above is 3 squares wide and two high its width would be given by gx[2]+gx[3]+gx[4], and its height by gy[4]+gy[5].



...hope you found this interesting/informative. Let me know if it helped!