Saturday, February 17, 2018

The Key to Animation

Animate uses a layer based keyframe animation system. For people who are not familiar with the creation of animation, this sounds complicated. It is a very quick and effective way of creating animation as the animator is just setting up guidelines for the computer to generate the majority of the  frames.

A keyframe is essentially a frame of the movie. Within the frame you place objects where you want them to be. Every time you want to change the contents of the frame you create a new keyframe. This by itself is not that powerful. Where the power comes from is with tweening. Tweening is a method where you let the computer animate the object for you. The word tweening is a concatenation of the term “inbetweening” which is where the lead animator would draw the key frames and junior animators would draw all the frames between the keyframes. Animate has two types of tweening. Motion Tweening and shape tweening.

Motion tweening moves an object from the location it is on the starting keyframe to the location it is when it is on the ending frame. You can also apply rotation to the object that is moving. While technically not motion, you can also adjust any color adjustments (such as the alpha level) and the adjustment will smoothly transition between the frames. As objects in nature don’t move at steady rates, you can use leading to have the object start the motion at a faster rate and slow down as it approaches the end keyframe or have it start slow and speed up as it reaches the keyframe. The image below illustrates the difference between the three types of tweening.




For even more advanced animation effects, you can have guides. Guides let you specify the path that a moving object will follow. You can have the object follow the path while maintaining the same orientation or you can have the object orient itself to the path. My April Fool series of games has a title sequence where each letter has a winding path to it’s ultimate location. The screenshot below illustrates the different paths that the letters follow to reach their final location.


Shape tweening is a bit complicated. Shape tweening is when you have one shape and it transforms itself into the second shape. This is easy to do, but hard to do well. You simply need two shapes, a starting shape on the start keyframe, and an ending shape on its ending keyframe. To make sure the shape morphs the way you want, you add key points to the shapes. These points help Animate determine where the lines and points that make up the shape should line up after the end of the tween. Here is an example of a square turning into a star with the red shapes being the onion skin outlines of the frames between the square and the star.



An Animate movie consists of one or more layers. Layers go from back to front with closer layers overlapping further layers. Every layer is independent of the other layers. In other words, you can have keyframes in one layer but not any of the other layers. Animate lets you define as many layers as you need and lets you group the layers into folders. It is advisable to keep each animated object on its own layer as not doing so will result in animate creating a separate tween object in the library which often leads to problems.

The animation system is the primary reason why you would choose to create a game in Animate instead of creating it from scratch using the free Create.js libraries. While everything listed above can be done manually in Create.js, having a tool that generates all the source code for you is nice. If your game is a very heavy animation-oriented project, then using Animate makes sense.

Using animate to create the animations for a game project but then doing that project manually using Create.js or some other library (or even another language) can also be a consideration. In a team environment, this approach can be very cost effective as you would only need creative cloud for your art team while the development team can have other development tools.

Saturday, February 10, 2018

Symbolizing things


Animate revolves around symbols. Symbols are a very efficient way of building movies, as a symbol only needs to be loaded once. After it has been loaded, you can create as many copies - known as instances - as you want to. More importantly, every instance of a symbol can have properties independently applied to it. You can adjust the size, orientation, and skew. You can also apply tinting, control the brightness, adjust the alpha (transparency) level. There are three basic types of symbols that Animate uses. The Graphic symbol, the Movie symbol and the Button symbol.

Graphic symbols are just a drawing converted into a symbol. The drawing can be as simple or complex as you desire, and can even contain other symbols as part of it. These tend to be vector based, but it is possible to use bitmaps for graphics. Flash used a very compact binary format for vector images making them take significantly less space than bitmaps in many cases. Animates’ HTML5 exporting converts these vectors into Create.js shapes which take up significantly more space, especially if you are not letting Animate compress the images.

A movie symbol is essentially a movie within the main movie. You have as much control over an Animate movie symbol as you do over the resulting movie. You are not limited to having a single level of movie clip as movie symbols can contain other movies as part of them, which can contain movie symbols within them which can contain movie symbols within them and so on. While this recursive nature of movie clips adds a lot of flexibility to creating animations, movie clip objects are fairly heavy in memory and processing requirements so having too many nested movie clips can slow things down substantially.

A Button is simply a special symbol that has special actions associated with it whenever the mouse is over it or the mouse has been clicked while over it. To be more precise, a button has 4 frames associated with it. The up frame is simply the normal appearance of the button. The over frame is how the button looks when the mouse is over it. The down frame is what the button looks like when the mouse is over it and the mouse button has been pressed. Finally, the hit frame defines the over/hit areas.

The hit frame may seem confusing to people new to Animate. This frame is not actually seen by the viewer, but is instead used by Animate. How it works is any area in the hit frame that is solid will react to the mouse being over it while an area that is not solid will be ignored. While touch users will not get the mouse over effect, the hit area is used for determining if a touch results in a down event.
Some of you may be wondering why you would want or need such a thing? Couldn't you just use the existing button image? The answer to that is you could, but then the button would only work if the user had his or her mouse positioned in a solid part of the image. In some cases, such as with our Play the Game button, we want the button to react if the mouse is within a block or an area that covers more than the frames cover. Conversely, you may not want a rectangular region or even the entire button to be clickable. The hit mask gives you total control over where the button can be clicked.


As an example, here is a button that I use for switching a sound from enabled to disabled. The top right image is the normal image and is what the user will see normally. The top-middle image is what will be shown to mouse users who move the mouse pointer over the image. The top-right image is what is shown when the button is clicked or touched. Finally, the bottom image is the hit map that is used for determining if the mouse is over the image.

Symbols can be created in animate simply by drawing something and then selecting the drawing and choosing the “convert to symbol” option from the right-click menu or the modify menu from the menu bar. Creating a symbol adds it to the library. Empty symbols can also be created from within the library, though personally this is not something I do. The library is a file-folder structure allowing you to easily arrange your symbols to make finding and working with them much more efficient. This is especially true when you get to larger projects that contain hundreds or thousands of objects.

Libraries also have the benefit of being sharable between projects. Animate makes it easy to move symbols between different libraries allowing you to create a standard set of library symbols that can be copied between libraries. There are also built in tools for converting a selection of library symbols into image atlases or stand alone files which can come in handy for environments where animators create assets in animate then hand them off to developers who are using pure JavaScript (or other language for non-HTML projects) for creating the application.

Saturday, February 3, 2018

Drawing Things Out

Animate, as mentioned earlier, is a vector based drawing and animation tool. All drawing in Animate is built around shapes. Shapes are made up of a series of connected lines and curves. You create the shapes by using basic building blocks such as lines, rectangles and ovals. You also have text, which can be treated as text or converted into a shape so that you can modify the shape. By breaking apart text twice you are given the vector shape of each character and can then use the arrow manipulation tools to alter the letters which can be great for creating title text quickly.

Shapes can have an outline and a fill, or can be just one of the two. The outline has a color, a thickness, and a pattern associated with it. One of the most unique thicknesses is the hairline. This is a special thickness as it will always be drawn as thinly as possible.

The fill of a shape can be a solid color, a gradient, or a bitmap fill. Gradients are a series of colors that gradually change from one color to the next color in the series. You may have as many colors in a series as you desire and can vary where in the gradient range the colors will change. Gradients can be linear or radial and the orientation, scale, and center spot can be adjusted. A bitmap fill is a bitmap image that is used to fill the shape. Bitmap fills are tiled, though you can adjust the orientation, scale, skew, and center spot.

For more complex shapes you can use a pencil tool. The pencil tool takes whatever shape you draw and turns it into a series of lines and curves. You can control how close to what you draw the pencil will be, with the more accurate the representation, the more anchor points in the object. The pencil tool is supposed to be intelligent, so it will try to figure out the shape you are drawing picking the most appropriate approximation it can come up with. The pen tool is just like the pencil tool except instead of lines it deals with fills.

The fountain pen tool lets you build a spline shape. The mathematics and techniques behind splines are interesting but way beyond this book so I will try to explain in simplified terms. A shape is made up of several points that define the basic shape. These points are connected via lines which can each be edited separately. For shapes made of straight lines this is fine, but for curved shapes, splines are used. Each line has additional points (weights) that control how much the line curves between two points. Curves can be controlled by adjusting the weight points for that line segment. You can adjust these points by using the sub-selection tool which looks like a white pointer.  While editing a shape this way can be painful, it gives you extreme control of the resulting shape.

The basic drawing tools within Animate are enough to do quite a bit and may be all that an artist needs. If better tools are needed, a vector package like Illustrator can be used. It is even possible to import a bitmap image and use a tracing tool that will convert the image into a vector shape.