Away3D Programming Tutorial - Mouse Interaction

Learn how to respond to mouse events in Away3D. Demo and source code included.

VIEW THE DEMO
DOWNLOAD THE CODE

Mouse interactivity is a must for all but the most simple web applications, and 3D flash applications are no exception. Not only does it allow the application to respond to a users requests, but allowing the user to click on and interact with an application also entices the user to investigate your application further. You've probably already seen this user interaction with a lot of Flash advertisements. Thankfully it is quite easy to respond to mouse events with Away3D.

ApplicationManager.as

Our ApplicationManager class has 4 properties: mesh, rotation, meshScaleTween and meshRotateTween. The later 3 properties all relate to tweening the mesh on the screen in response to a mouse event. This application makes use of the TweenMax class. Previously I have made use of the Tweener class, which does much the same thing, but TweenMax has some nice features, like yoyo, that made me switch. The mesh property is a standard MeshObject, which you can read about in a previous tutorial here.

In the startupApplicationManager function we create and initialise the MeshObject as per usual, this time with the built in Cube primitive. The mouse interaction comes about from the functions we attach to the mouse events MOUSE_DOWN, MOVE_OUT and MOVE_OVER. If you have ever manually hooked up event listeners for standard GUI code then this should look familiar. If not, these 3 lines of code allow us to watch for when the mouse button is pressed over the cube, when the mouse is moved over the cube, and when the mouse is moved off the cube.

The mouseOver, mouseOut and mouseDown functions hold the code that is executed when these mouse events are triggered. All three setup a new TweenMax animation: the mouseDown function rotates the cube, the mouseOver function sets up a yoyo tween that bounces the scale of the cube from 1 to 2, and the mouseOut function sets up a tween to return the cube back it its original scale.

Responding to mouse events really is that simple: you simply add an event listener and create the corresponding function. If you want to do some more advanced mouse interaction I recoomed you check out the MouseEvent3D class, which is the parameter that is sent to the event listener function. There is a wealth of information in the MouseEvent3D class like mouse coordinates, texture coordinates, the object that was clicked on, the material that was clicked on and more.

Find more Flash tutorials here.