3D Rotating Clickable Menu (carousel)

This 3D menu is based on the popular x-mouse driven carousel style animation. Unlike most versions however, this one makes each menu item clickable so that the selected item rotates to the front and “locks” in place. The animation effect, number of menu items and the menu items themselves can be easily customised. NEW !!! See below for details on a way to have the carousel revolve around another clip!

The only thing that makes this file Flash 8 is the use of the ColorMatrixFilter. That code effect can easily be replaced for backward compatibility to Flash 7 or 6 if required.

How do I make each item “clickable” so that I can also launch, for example, a different browser window each time an item is clicked?

Basically all you need to do is add an array with links for each item and then add a getURL in the released() function.

1. At about line 30 add a line something like this :

var arrLinks:Array = new Array("http://www.website1.com", "http://www.website2.com", "http://www.website3.com", "http://www.website4.com", "http://www.website5.com", "http://www.website6.com", "http://www.website7.com", "http://www.website8.com");

2. Just after that add :

var bolFirstRun:Boolean=true;

Add this so you can test whether this is the first time the flash is run to prevent the link from executing straight away when the last line is run menu.item0.onRelease();

3. At around line 113 just after :

mc.dest = Math.PI/2;

add this

if(bolFirstRun){

bolFirstRun=false;

} else {

getURL(arrLinks[selectedID], "_blank");

}

You should now have clickable rotating items where you could of course change the getURL for your own custom function.

How can I have a clip that these objects rotate around?

1. Create a clip that you want the items to rotate about in the library and give it a linkageID of “centre_mc”

2. After this loop near the top of the code :

for(var i=0;i<numOfItems;i++)
{
...
}

add this :

menu.attachMovie("centre_mc","centre_mc", 150, {_x: 120, _y: 0});

You’ll need to muck around with the _x: 120, _y: 0 positioning to suit your clip but hopefully it should look as though the items circle around the “centre_mc” clip….

How to add a Blur effect as items get further away

Because there is a variable called “s” that is constantly updated in the animate() function that is used to determine a scale factor, you can use this same value to apply a blur.

First thing, you need to add the following somewhere near the top of your file :

import flash.filters.BlurFilter;

This makes the Blur Filter available to actionscript.

Then you’ll need to create a new BlurFilter instance (probably best to do so after the ColorMatrixFilter variables are created. So add this :

var blurFilter:BlurFilter = new BlurFilter(0, 0, 1);

Then in the initial for loop alter the filter assignment to this :

mc.filters = [colorMatrixGrey_filter, blurFilter];//modified this to now have TWO filters

Then in the animate() function add this line :

var mc:MovieClip = menu["item"+i];//exisitng line
var filterArray:Array = mc.filters;//ADDEDthis line

Still in the animate() function change the two occurences of :

mc.filters = colorMatrix_filter;
AND
mc.filters = colorMatrixGrey_filter;

to :

filterArray[0] = colorMatrix_filter;
mc.filters = filterArray;

and

filterArray[0] = colorMatrixGrey_filter;
mc.filters = filterArray;

respectively.

This essentially COPIES the current filter array on each clip and modifies JUST the ColorMatrix Filer (the first in the array);

And finally in the animate() function just after where var s is defined add this :

blurFactor = 20 - (s * 20);
var filterArray:Array = this.filters;
filterArray[1] = new BlurFilter(blurFactor, blurFactor, 1);
this.filters = filterArray;

This only modifies the 2nd filter (the blur filter) and ensures the Color filters are untouched.

Obviously you can muck around with the blurFactor value where I have 20 and use a more suitable value to increase/decrease the overall blur effect

Any problems feel free to contact me.

Good luck!