The 3D layer manipulation tools are very handy, but "eat Kbytes" when exported to Shockwave Flash. I imagined there should be a way to suggest an animated 3D object, without actually using the 3D feature of Moho, thus rendering much smaller file. Of course, this is very labor-intensive, because every frame has to be drawn seperately.
I hoped this project would improve my drawing skill as a Moho animator. It may seem a bit mathematical to some of you, but the manipulations by Moho are even more complicated (I guess, I haven't looked into them). Luckily, users aren't aware of the complex calculations taking place inside Moho, that is until they stop using automated tools and are doing most things manually.
My goal in this project was to create a line drawing of a cube in a two dimensional plane and animate the resulting lines/surfaces so, that they give the impression of a rotating cube. To make things not too complicated I used rotation along the Z axis of the cube (running perpendicular to the front plane of the cube). This means the front plane is always in sight.
I started with a wireframe image of a cube. It was created by overlapping two equal squares and connecting the nearby corner points. I made sure all the lines were straight and all overlapping corner points were connected.
I decided I wanted an animation of 2 seconds at a frame rate of 24 frames per second (fps). This means a full circle of 360 degrees is made in 48 frames, which comes down to 7.5 degrees of rotation per frame. To keep track of the rotation state, I created a rotation aid. For a Z axis rotation this isn't really necessary, but for more complex rotations, it might be handy. So I made this aid for future projects.
Next I created a seperate group to help me put the corner points of the front of the cube in the right place during the animation. This group consists of a cross interconnecting opposing corner points on the front side of the cube, and a circle intersecting all of these corner points. The end points of the crosses correspond to the corner points of the front side. During rotation, these points move along the circle. The resulting Flash animation can be viewed here
Knowing how the corner points of the cube are moving, is knowing how the whole cube is moving. I already knew how four corner points were moving (on the front side of the cube), so all I had to do is figuring out how the corner points on the back side of the cube were moving. Adding a back group to help me with this tasks was easy. I just copied the front group and aligned it with the back of the wireframe cube (using the move layer tool). The result was an Flash animation of the front and back groups.
Now I knew where the corner points of the cube were during the animation (at the end points of the crosses), it was easy to move the individual points from frame to frame. The result was a rotating wireframe.
To create the illusion of a rotating cube, I had to remove the hidden lines. However, it is not possible to do this in Moho in this manner. While manipulating your points and lines, you can only move points and lines during animation, not remove them. However, in a cube only three planes are visible, from whichever angle in space it is viewed from. It should be possible to the draw a cube seen from one spacial angle, then rearrange the corner points so, that it appears the cube is shown from a different angle in space. If you use the wireframe cube as a template, the illusion should be perfect.
I used this "trick" to create an animation of three rotating planes. I marked two corner points with a dot and a star, respectively, to show you the rearrangement of these points and (hopefully also) the shapes of the individual "planes" during animation.
Now it was just simple a matter of copying this animation layer and cleaning it up. Here is the end result.
The result is a very small file (only 2.2 Kbytes after compression by Flash MX), in comparison with a real 3D cube rotating in 3D. However, there is a serious limitation: all the planes must be in the same color, otherwise the illusion is lost.
There are other ways to create a rotating cube in pure 2D, e.g. creating an animation of a rotating wireframe, make as many identical copies of this animation as there are frames, make them visible only only at a particular frame, and then make the hidden lines invisible in each layer, using the Hide Edge tool, and then coloring the sides.
I tried this method and found out that you'll need only 12 layers, and show each layer every 12th frame, with a different coloring of the sides for each appearance. This is very labor-intensive, but it can be done (view this example of only 2.7 Kbytes).
I needed about 7 - 8 hours to complete this exercise and write this article. The next thing I want to do is warping simple objects with similar techniques. Warping is one of the exercises mentioned in Drawing for Classical Animation, so I'm curious if I can pull this off in Moho as well.
