3D Menu in Flash CS3/CS4 using Flash Player 10 3D API

This article has been added to your 'Favorites' list.

By Jesse Nicholson

Published November 14, 2008

Intermediate

Rating:

Code Part 5 - Functions (sub-part 2) FINAL PAGE YAY

Jesse Nicholson

I'm a flash developer in Ontario Canada, I run my own business and I love pushing the limits of flash and exploring the latest developments from Adobe. I have developed a way to author flash 10 in the flash CS3 IDE and would like to begin posting articles on working with the new features (specifically 3d).

View all articles by Jesse Nicholson

The last three functions are the enter frame event to handle all of the filter updating for the depth of field simulation, and the rollover/rollout events for the menu buttons. Lets finish this;

function updatePos(e:Event):void
{
 myFilter1.blurX = -(mySpace.z + f1.z) / 80;
 myFilter2.blurX = (mySpace.z + f2.z) / 80;
 myFilter3.blurX = (mySpace.z + f3.z) / 80;
 myFilter4.blurX = (mySpace.z + f4.z) / 80;
 myFilter5.blurX = (mySpace.z + f5.z) / 80;
 myFilter6.blurX = (mySpace.z + f6.z) / 80;
// 
 myFilter1.blurY = myFilter1.blurX;
 myFilter2.blurY = myFilter2.blurX;
 myFilter3.blurY = myFilter3.blurX;
 myFilter4.blurY = myFilter4.blurX;
 myFilter5.blurY = myFilter5.blurX;
 myFilter6.blurY = myFilter6.blurX;
// 
 f1.filters = [myFilter1];
 f2.filters = [myFilter2];
 f3.filters = [myFilter3];
 f4.filters = [myFilter4];
 f5.filters = [myFilter5];
 f6.filters = [myFilter6];
// 
 SimpleZSorter.sortClips(mySpace);
}

The ENTER_FRAME function here uses some simple math to determine just how blurred each menu item should be. It works like this: it calculates the difference between where the parent clip is on the Z axis and where the children clips are on their Z axis. For the first item you put a '-' before the calculations so that the value returned is negative. That's because you're only ever going to see this item zoom in from behind the viewport, so you really only need to see it blur back in.

The SimpleZSorter class is great because it automatically sorts the depths of all items inside of the parent clip. That is, the depth as in the stage/display depth (child index), not the physical or Z depth. This keep items that are physically further away behind items that are physically closer (Z property). Great stuff.

function bOver(e:MouseEvent):void
{
 if(e.target == b1){
  Tweener.addTween(b1, {x:753.1, time:1});
 }else if(e.target == b2){
  Tweener.addTween(b2, {x:808.8, time:1});
 }else if(e.target == b3){
  Tweener.addTween(b3, {x:881.2, time:1});
 }else if(e.target == b4){
  Tweener.addTween(b4, {x:925.9, time:1});
 }else if(e.target == b5){
  Tweener.addTween(b5, {x:796.7, time:1});
 }else if(e.target == b6){
  Tweener.addTween(b6, {x:845, time:1});
 }
}
//
function bOut(e:MouseEvent):void
{
 if(e.target == b1){
  Tweener.addTween(b1, {x:773.1, time:1});
 }else if(e.target == b2){
  Tweener.addTween(b2, {x:828.8, time:1});
 }else if(e.target == b3){
  Tweener.addTween(b3, {x:901.2, time:1});
 }else if(e.target == b4){
  Tweener.addTween(b4, {x:945.9, time:1});
 }else if(e.target == b5){
  Tweener.addTween(b5, {x:816.7, time:1});
 }else if(e.target == b6){
  Tweener.addTween(b6, {x:865, time:1});
 }
}

The bOver and bOut functions are pretty straight forward. Keep in mind that the values entered into the tweens in these functions are relative to your buttons exact positions on the stage. All you're doing here is determining which button you rolled over/off of and shifting it's X property by 20 pixels. So, for example in bOut if your b1's x property on the stage was 100, you would want that tween value to be x:100 because that tween is designed to return the button to it's original positions. Vise/versa for the bOver function.

Anyway once the code is done and you actually get to use this I hope you enjoy. All of my customers have loved it, it's quite a selling feature. I am chaging my website design in a couple of months so I don't care if people do something similar. I do encourage everyone to personalize this as much as possible. You can go really cookey and make the items kind of FLY/SWING in from the back right and into focus or even add a spin to the animations where the items rotate on their Y axis all kinds of stuff. This is just a kind of platform on which I suspect you'll improve and expand the functions. If you have any questions you can email me ascensionsystems@gmail.com and I'll be sure to bring the question back to the forum to address it in a post some place or another.

Pages: « Back 1 2 3 4 5 6 Next »

Spread The Word

14 Responses to "3D Menu in Flash CS3/CS4 using Flash Player 10 3D API"

Josh Rating: ratingfull

said this on 03 Dec 2008 1:07:21 PM CST

is there some reason why the swf uses so much processing power ... it doesnt seem to have a rest point and always stays relatively high. It works well on my pc but I wonder about others. At least there should be rest points between the animations when nothing is moving.

(Reply to this comment)

Jesse Nicholson Rating: ratingfull

(

Author/Admin)

said this on 03 Dec 2008 1:14:15 PM CST

Josh,

Thanks for posting your question. The only time I ever ran into performance issues with this class is if you do not remove the digitalWarpIn class after using it to load your movie clip. See the digitalWarpIn class is what contains all of those little bitmap-generated effects and if you do you remove that item from the display list after the effect has been used then you will accumulate many loaded movie clips into the memory very fast, seeing that there is approximately 100 small clips generated per item. So, very important, removeChild(myDigitalWarpInClass) when you're all done. I'm going to "upgrade" the warp in class so it does it all for you and you don't have to add/remove it to the display, I'll post the update link here when I'm done OR you can subscribe to my tutorials at www.ascensionsystems.ca/tutorials.

(Reply to this comment)

Jesse Nicholson Rating: ratingfull

(

Author/Admin)

said this on 03 Dec 2008 1:29:14 PM CST

Okay, nevermind............ for some reason the author utility said this comment was linked to one of my other tutorials for the digital warp in/warp out class, SO, without looking I just commented based on what I thought the issue would be with that class.. oops. Okay so anyway what the issue would be, is the ENTER_FRAME event for updating the blurFilters being used as well as using the SimpleZSorter class. That's most likely it. SO, what you would do here is simply change the code so that ENTER_FRAME event is only being called whenever you're tweening through the "space". So, for example:

You use the zipTo function to move to each element based on what menu item you click. While this is running, the ENTER_FRAME event is running as well. Go find the ENTER_FRAME event listener and remove it. Leave the ENTER_FRAME function though. On the zipTo code and whatever other code is used to move through the space, do this:

[as]
function zipTo(e:MouseEvent):void
{

addEventListener(Event.ENTER_FRAME, updatePos);

if(e.target == b1){
Tweener.addTween(mySpace, {z:-f1.z, x:f1.x - 720, y:f1.y - 700, time:2, onComplete:removeIt});

}else if(e.target == b2){
Tweener.addTween(mySpace, {z:-f2.z, x:f2.x - 720, y:f2.y - 700, time:2, onComplete:removeIt});
}else if(e.target == b3){
Tweener.addTween(mySpace, {z:-f3.z, x:f3.x - 720, y:f3.y - 700, time:2, onComplete:removeIt});
}else if(e.target == b4){
Tweener.addTween(mySpace, {z:-f4.z, x:f4.x - 720, y:f4.y - 700, time:2, onComplete:removeIt});
}else if(e.target == b5){
Tweener.addTween(mySpace, {z:-f5.z, x:f5.x - 720, y:f5.y - 700, time:2, onComplete:removeIt});
}else if(e.target == b6){
Tweener.addTween(mySpace, {z:-f6.z, x:f6.x - 720, y:f6.y - 700, time:2, onComplete:removeIt});
}
}

function removeIt():void
{
removeEventListener(Event.ENTER_FRAME, updatePos);
}[/as]

You'll notice I added three things, in the Tweener event parameters I added the "onComplete" parameter and told it to call a function called removeIt. I then wrote that function added in a line of code to remove the event listener for the ENTER_FRAME event. I also put the event listener for the ENTER_FRAME event inside the button function so that it is applied and re-applied every time you "move" through the menu. This will give you that "break" in performance. Hope that helps, thanks for your comment I should have thought of this before!

(Reply to this comment)

Josh Rating: ratingfull

said this on 03 Dec 2008 2:33:18 PM CST

Thanks for the quick response ... I will try it out, what you recommended seems very logical. Thanks again I love the effect of this, and the tutorial was quite helpful!

(Reply to this comment)

Josh Rating: ratingfull

said this on 03 Dec 2008 2:51:29 PM CST

Brilliant, it rests at zero processor usage now! It frees up juice for other interactions when the z is at rest. Thanks again for the help. ^_^

(Reply to this comment)

Josh Rating: ratingfull

said this on 04 Dec 2008 1:00:38 AM CST

Seems that moving <code>addEventListener(Even t.ENTER_FRAME, updatePos);</code> into the button function bypasses the blur & sort on the initial rendering when first loading the swf. Once a button is clicked the updatePos function runs and the blurs & z stay proper from that point on.

I guess I need to trigger that updatePos once before any buttons are clicked. Moving that event listener outside of the button burns performance, is there a way to trigger the removeIt function after the first initial updatePos?

When I figure this out I'll post it back.
I'm attempting to convert this from a menu to a whole interface with the "pages" being within the s1 etc movie clips, changing from a static view to an active area when in focus.

(Reply to this comment)

Jesse Rating: ratingfull

(

Author/Admin)

said this on 04 Dec 2008 10:01:06 AM CST

Remember on the fourth page that initial tween that kinda shifts the whole thing into place? Just add the ENTER_FRAME event listener above that line, and then add the same onComplete parameter to the tween. Like this:

addEventListener(Event.ENTER_FRAME, updatePos);
Tweener.addTween(mySpace, {z:-f1.z, x:f1.x - 720, y:f1.y - 700, time:2, onComplete:removeIt});

That'll do it.

(Reply to this comment)

Stefan Padureanu Rating: ratingfull

said this on 16 Jan 2009 6:24:55 AM CST

quick question...I am trying to create a sphere shaped 3d menu...and I can't use tweens because the "geographical" positions of the other buttons cannot be calculated for all possible movements (on roll over each button the sphere moves around it's axis bringing the button to the central view)

so...how can I do this without using motion tweens ?

(Reply to this comment)

Jesse Rating: ratingfull

said this on 03 Oct 2009 1:50:15 PM CST

You can actually use motion tweens for the roll over event to accomplish exactly what you want.

(Reply to this comment)