Tutorial: Away3D TypeScript: Start on MouseOver

In this short tutorial, we will demonstrate how to start and stop the Away3D animation whenever the user moves the curser over and off the canvas element. This would be useful if you had several Away3D scenes on one page and didn’t want to use up the CPU and GPU running animations the user wasn’t even looking at.

What we will need to develop to achieve this effect.

  • A start method.
  • A stop method.
  • An onmouseover function.
  • An onmouseout function.
  • A catch for resizing errors.
  • A catch for an initialization error.

This tutorial builds off of the Away3D TypeScript: Template’s HTML and TypeScript. All the new or changed code will be highlighted in the full code block below.

StartOnMouseOver.HTML

Line 9 we renamed our JavaScript file to StartOnMouseOver.js.

Lines 54-57 sets up a onmouseover listener on our Away3D canvas element. Which then calls our StartOnMouseOver object’s start method.

Lines 59-62 sets up a onmouseoff listener on our Away3D canvas element. Which then calls our StartOnMouseOver object’s stop method.

Line 64 prevents errors from trying stop the scene before it has had a chance to render the first frame. To prevent this we set a JavaScript timeout function that after 1/10th of a second calls our StartOnMouseOver object’s stop method.

StartOnMouseOver.ts

Line 85 calls the viewport’s render() method. This was to ensure that the Away3D stage covered the entire canvas element. Without it you might see some anomalies that you would rather not see.

Lines 88-91 creates a start() method. To make sure that it is accessible outside of the class we use the public preface. Within the method, we simply call the _timer‘s start() method.

Lines 93-96 creates a stop() method. To make sure that it is accessible outside of the class we use the public preface. Within the method, we simply call the _timer‘s stop() method.

Compile and Test in HTML

Remember, this is just the TypeScript file. You still need to compile the TypeScript file into a JavaScript file for browsers to read. For a refresher on how to do that refer to Away3D TypeScript – Getting Started.
Lastly, to implement the complied JavaScript file into our HTML template document change the JavaScript file name from Template.js to what ever you named it. Refer to the tutorial Away3D TypeScript: in an HTML Document if you need assistance.

In Closing

It was actually very simple to trigger the animation to start and stop as the mouse moves on and off of the canvas element. For added affects, try to make the scene blur on mouse out! That might be another tutorial soon!

If you liked this tutorial, you can follow us on Facebook or Twitter to keep an eye out for more tutorials.

Posted in Away3D TypeScript, HTML, JavaScript Tagged with: , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*