Camera Pitch in Viewing
Balloon Arches
For reasons of simplicity, we'll ditch
the movement for this example (though it's not
at all hard to re-implement) and get back to basic
panning. Here, however, as you can see, there's
an extra added axis of rotation in this panning
view. Not only can you look left and right, but
also up!
[
looking up at balloon arches]
Steps to Create Animation
- Create
your screen elements. Here there are a total
of 3 circular clips: one red ball, one yellow
ball and a smaller black ball. Then there's
the ground. The ground this time will be a movieclip
in our scene however. If you'll notice in the
movie that when you look up, the ground actually
falls beneath the view as if to follow the movement
of the view. Prior to this example, there was
no movement at all for the ground. That will
have to be addressed here so the ground will
need to be its own movieclip.
- Now
we can set up theScene movieclip and the other
variables. Camera will now have an extra property
for the new rotation which we'll call upAngle.
This will represent the angle at which we would
be looking up.
Something else a little different here is that
the camera now has a y of -200. This is to more
accurately reflect the fact that the camera
is not on the same level as the horizon and
that you actually have an elevated view as if
you were standing and not just a head on the
ground.
- Next
is the display function. This will be the same
function used for all the clips in the arches
since they behave the same. Their only difference
is size and color which is dependant on which
library item is attached in creating them. It
is here where we make use of that second camera
rotation, the upAngle. For this, we will need
to use the new trig methods explained earlier.
With these new methods, however, there will
be absolutely no need to re-establish a new
radius since rotation will be based off of current
x and y (or x and z) positions. This saves us
the hassle of messing with Math.atan2 and the
Pythagorean theorem. And that's a good thing.
There is one small trick to using these methods
though. In rotating around an axis, you will
need to save the calculated x,y or z values
in a temporary variable since the next function
will also want to use the original values. If
you redefine one of the originals to the new
value, it would mess up the result. That's no
big deal though, and easily avoided. Here's
how it looks.
- With
that complete, attach the clips as needed (see
source for script used in the example).
- Which
brings us down yet again to the onEnterFrame
function. There are a couple of changes going
on in here. One is a minor change to the camera
behavior. Changing the camera rotation now is
no longer and additive process since rotation
is now based on a change in rotation
and not the rotation based on 0. The camera
angle now represents how much to rotate
and not an absolute rotation value. So, because
of that, for movement based on the mouse, which
this example uses, "+=" is abandoned
in favor of just "=" - and this for
each angle of viewing, left & right and
up & down. Up and down here, though, will
have to be limited so that we don't end up doing
back flips when viewing the scene. Simple if
checks are then added to restrict the upAngle
view to be between straight ahead and straight
up.
The other change is the addition of the handling
of the ground movieclip. Because we have this
looking up factor involved in this 3D representation,
the ground can't sit statically in the same
position as it had before. It will need to move
in respect to the view when a vertical angle
is changed going down when you look up and coming
back up when you look down. So what does this
ground clip really represent? It represents
an ever expansive ground or plane that exists
at a y value of 0. The horizontal line created
by this plane in the middle of the screen is
the horizon line, or the height of a point at
a y of 0 with an infinite value of z. In other
words, if you were 50 bazillion miles back in
z, your visual vertical position would be about
on that line. With that understanding, we can
treat the ground as a point extremely far in
the distance and just move it up and down as
if it were any other point in the scene. The
ground, however, would not move left and right
and since it is only one clip, we won't go through
the effort of making a new display function
and adding it into the objectsInScene array
(though that is an option) - we can instead
just handle it directly in the onEnterFrame
function after displaying the objectsInScene.
So assume a large distance (or z) and calculate
a y value for the ground movieclip to correctly
position it. Remember, the ground clip would
for this on the main timeline and not in theScene
so you will need to base the _y off of theScene's
current _y. If you were to attach the ground
clip into theScene, this wouldn't be a problem.
This example does not do that, however.
When complete, assign to the onEnterFrame event
and the example is complete.
Full Rotation
In that example there were 2 axes of rotation.
All that remains in this total three-dimensional
conquest is that final third axis - rotation around
the z axis, or camera roll. This would be comparable
to you tilting your head left or right down towards
either your shoulder while still looking straight
ahead thereby pretty much spinning the world in
front of you. In terms of the first person perspectives
of virtually all our previous examples, walking
around and interacting with the environment, this
act has little practicality. In fact, it generally
also has little practicality in other 3D as well.
The reason for this is that with just two axes
of rotation, you have the ability to see or rotate
in any direction in 3D giving you practically
a full range of three dimensional rotation.
Just think back to the previous example. If there
was no restriction on looking down, there would
be no direction that you couldn't look in - and
all this without the need of further rotation
around the third remaining axis. In fact, much
of the 3D you see online, when you see it, especially
in Flash, doesn't take advantage of that third
rotational axis, not only because, well, it's
not needed. But also, if you consider that a mouse
only really has two inputs in terms of direction
(left and right or up and down), there isn't much
room for controlling that third axis anyway. Given
that any rotation can be met with just two, why
bother with more? Well, I can think of some
reasons, but I won't bother you with those
now.
3D Shape Rotation Around a Center (All
Axes)
This is getting into the more popular and impressive
display of 3D in Flash - what you really think
of when you hear the term "3D." If you
are one of those Flash developers who has a very
2D-based mind set, coming across a fully rotational
3D object in a Flash player is often, at least
initially, very impressive. There's reason for
that impression too; because it's not at all intuitive
or really all that easy. Usually only those who
know what they're doing in terms of 3D and the
more complex math involved end up, well, doing
it. So far, however, in following this tutorial,
pretty much all that is needed to put this into
effect has been discussed. The ground work has
been done through the previous examples and only
a small change in implementation is needed to
achieve this new 3D effect.
Basically, the biggest difference here between
the previous example which gave the ability of
looking up is that, here, the camera object isn't
used. Rotation here is applied directly to the
shape and not the camera much in the same respect
as the Merry Go Round example only with more rotation.
This single shape is either perceived or alluded
to through the rotation of solid shapes in a uniform
manner, as the next example demonstrates, or something
rendered with a 3D look using Flash's
drawing methods based on theoretical points which
are all rotating around a common center that which
will be addressed later....on the next page.