Chapter 6. Moving Things Around
Animation is the illusion of motion and has always been an essential part of working with Flash. From web sites with animated menus, to games with advanced mouse interaction, Flash applications that have no animation at all are pretty rare. Animation keeps us, as users of the application or web site, interested, especially when we can move things on the screen ourselves.
Papervision3D has a lot to offer when it comes to user interaction. Although you could create predefined animation that the user cannot interact with, one of the great things about Papervision3D is that it is real-time. The user can freely interact with the objects in your scene because it has not been prerendered.
Although this chapter is mainly about moving things in your scene from one place to another, keep in mind that not all animation has to be in motion. Animation is also changing shapes, transparency, or color.
This chapter will cover the following topics:
The first thing that may come to mind when discussing animation is moving the 3D objects that you can see in your scene. We have done that in previous chapters by using the local rotation properties. However, moving the camera is at least as powerful in enhancing the user's 3D experience and we can achieve pretty amazing effects by doing so. The third element that should not be overlooked is the point light, which also can be animated. Basically there are three types of objects we can move:
The point light enables us to apply shading to objects and will be discussed in Chapter 7. Now that we know what we're about to move, let's take a look at how we can move them.
How can we move things around?
We can think of animation as change over time. This can include not only motion, but also changing color, transparency, or even the shape of an object. There are two kinds of animation:
Predefined animation
Dynamic animation
Predefined animation is always the same, like a pre-rendered cartoon that you see on television or an animation you would make by creating frames on the timeline in the Flash IDE. Dynamic animation can be different every time you see it, either by implementing randomness (for example, changing the color of an object randomly every five seconds) or by user interaction (for example, scaling an object by clicking on it). Dynamic animation is created by code instead of using the timeline.
Animation by user interaction is always dynamic, but dynamic animation is not always triggered by user interaction. It can also be a predefined sequence of animations with some randomness that was built in by the developer of the program. The categorization...
In previous chapters, several methods and properties have been introduced to move and rotate objects. We have used the x, y, and z properties to set the position of objects and we have discussed the moveForward(), moveBackward(), moveLeft(), moveRight(), moveUp(), and moveDown() methods, which move an object in relation to its own axes. We also discussed the lookAt() method to make an object look at another object.
In many examples, we have set the localRotationX, localRotationY, and localRotationZ properties to rotate objects around their own x, y, and z-axis. However, when it comes to rotating objects, Papervision3D has more to offer.
Alternatives for local rotation—pitch(), yaw(), and roll()
The local rotation properties have their counterparts in the next three methods:
pitch(): Rotates the object around its own x-axis (localRotationX)
yaw(): Rotates the object around its own y-axis (localRotationY)
roll(): Rotates the object around its own z-axis (localRotationZ...
There are several ways one can interact with Flash and Papervision3D applications. In this chapter, we will focus on mouse interaction and keyboard interaction. We will deal with keyboard interaction in the example at the end of this chapter. However, in this section, we will discuss some mouse interaction tricks—short pieces of code that you simply can put in the render method. When the user moves the mouse, this code will animate the camera or the object(s) in your scene. We will also take a look at how to orbit the camera around an object. Orbiting is moving the camera around an object over spherical coordinates, while keeping a constant distance to the object.
In order to demonstrate a sample of mouse interaction techniques, we will create a template class on which we will base the examples. Because we will make the mouse interact with a grid of planes, we will first build a grid as shown in the following screenshot:
Place the following code in your document class...
Tweening engines are sets of libraries that make it easy to do animation by code, including all kinds of easing in and out. With only a couple lines of code (or even a single line as we will see), a tweening engine lets you move objects around with smooth transitions. Tweening engines are used widely in 2D Flash applications. Fortunately, they can also be used in combination with libraries such as Papervision3D.
There are many open source tweening engines on the Internet and even more discussions about which one is the best, the fastest, the lightest, or the most convenient to work with. A list of some of the more popular engines is as follows:
Example—the galaxy extended
In the previous chapter, we built a basic keyboard navigation to fly around a paper plane, demonstrating the spring camera. What goes for mouse interaction also goes for keyboard interaction—you can make it as smooth as you like. The navigation we created wasn't particularly smooth, although the spring effect helped. But the spring camera is built into Papervision3D and using it has some limitations, unless you were to tweak or extend the code.
In the next couple of paragraphs, we will not only build keyboard navigation that runs more fluently, we will also demonstrate how to implement several camera perspectives as seen in games.
We will build an application based on the example from Chapter 5 in which we created a galaxy of planes, a sphere that represents the earth, and a paper plane that we can fly around. The application will have the following features:
Although the example...
Animation is the illusion of motion. It can be predefined, meaning the user cannot interact with it; or it could be dynamic, which is created by code and allows users to interact with the animation. You can move around 3D objects, the camera, and the light source. But animation is not only about moving things; changing the color, transparency, or shape of an object is also animation.
We have walked through several pieces of code that you can add in the render method and that enables the user to interact with the scene. In these examples, the concept of easing was introduced.
We have discussed Tweener, one of the available open source tweening engines, which can be used in combination with Papervision3D. A tweening engine lets you create and control tweens in an easy way. Tweener allows you to use quadratic Bézier curves, which are equations that define curved paths, meaning that we can tween the camera (or other objects) over a predefined curved path.
We have extended the basic keyboard...
