AUTO EXPAND/SHRINK HORIZONTAL/VERTICAL MENU W/ COLOUR FX

This little utility will automatically tween an animation to stretch and shrink menu items on rollover/rollout using a user-defined “expansion factor”. The direction of expansion/contraction (horizontal or vertical) can easily be altered by changing just ONE line of code and by arranging items on stage in your desired layout. It also uses a nice little ColorMatrixFilter fade effect to tween the images from colour to black and white and vice versa. Each item can also be clicked to open a desired URL (this could easily be altered to call an internal function or jump to a root timeline frame for example)

A horizontal layout FLA and a vertical layout FLA is included in the download (both using the EXACT same assets) to show how little change is required to display different orientations, a different number of menu items and the effect the expansion factor has.

NOTES

• There are four properties that can be set at the top of the “actions” frame. These include :
  • arrElements : an array that stores the instance names of each item as assigned on stage
  • NUM _TWEEN_DURATION : how long in seconds the animation will last for
  • NUM _EXPANSION_FACTOR : how much to expand an item when rolled over
  • STR _DIRECTION : direction of expansion/contraction. Valid values are “horizontal” or “vertical”
• There is ONE class file associated with the menu items. This is linked via the Library items by setting the AS2 .0 class value to “sideElement” (as per included class file)
• Alter arrElements with the correct instance names given to each item on stage.
• Alter arrProps and ensure that an xInit AND strLink value are defined for each element eg.

  {xInit:arrElements[4][strPropertyToMove], strLink:"http://www.flashden.net"}

• Each item must have a movieclip instance called “mc_border”. This is used in calculations. Should you not need a border you can simply turn alpha to zero or style in an “invisible” colour. This example uses rounded corners (and slice-9 turned on) so if editing, please ensure this mc is vertically and horizontally centered around it’s origin AND that the slice-9 guides are adjusted accordingly.
• Each item also has a movieclip instance called “mc_image”, “mc_mask” and “mc_info”. These may or may not be required depending on the desired design of your items, however there is code in sideElement.as to tween these. Feel free to tweak the code relating to these items if you’re confident enough to gain different effects. You also may want to tweak the colour to black and white settings in the fade() function.
• After creating and styling your items, manually lay them out on stage in either a horizontal or vertical fashion according to the setting you used in STR _DIRECTION above. The code will automatically calculate the spacing between the first two items and assume that is the intended GAP spacing. For best results ensure they are laid out with even spacing.
• This example uses rounded corners and uses the Flash 8 9-slice scaling ability. However I’ve used a gradient mask to cover up distortion at the edges since 9-slice movielcips do not work as masks If the items were simply rectangles then there’d be no need for this gradient.
• If you adjust the thickness of the border, then you may need to refer to the class code sideElement.as comments and make some adjustments
• Currently the code uses a getURL to open a new page and link to a website. A custom function could easily be called by changing the onRelease function in the sideElements.as class file
• My cheesy design can of course be vastly improved upon so I suspect this can be made to look quite nice!