Mavdoc
Animation, Collision and Switches
Now that we have all the props and local assets created for a level, we have spots to place all those animated critters that are sprinkled throughout the levels to give them added life. The image below shows the majority of creatures that populate the zOMG! areas. For their creation, we had the awesome artists pepper-tea and reapersun creating the vector art and then animating them respectively. By placing them in trees, water, perched or crawling on walls and elsewhere, they add a lot of character to the world.
Full size
The last type of animations to address are for objects in the world. These are usually turned into switches, which I will cover below. The example image shows the animation for the Sealab Compound door. Animating in Flash looks similar to this whether it's a monster, ring, environment creature or FX. I'll cover some of the basics from the elements shown.
Full size
On the left, different objects are on their own layer, and sometimes grouped into folders for organization. Some are put into "masks" so that you can define how much of the original object actually displays. The bubble layers are actually FX that are triggered to play at certain times, like when the two door sections first release and separate.
Running along the top is the timeline in frames. So given the speed the game runs at, 16 of these tick marks will be traveled every second if the animation is playing at full speed.
The "s0" type labels represent the current "state" of the object. For a simple door, state 0 might be closed, and state 1 is open. Labels reading "t0-1" and the like are transition labels, meaning it's the animation that will play as an object moves from state 0 to state 1.
The little dots that exist throughout the window are called "keyframes". These are different points in time that represent the current visual state of the object.
The arrows in the blue field are called "Tweens". There are two types: Motion and Shape Tweens. We pretty much only use Motion Tweens, which are basically areas where Flash automatically transitions between the visuals of two adjoining keyframes. So if you have an object on the left side of the screen for the first keyframe, and off to the right for the second, Flash will slide the object between these two points over the number of frames that the Tween exists. This also works for things like rotation, scale, alpha or tint.
Next we can move on to the collision layer for the level. The Dead Man's Pass example illustrates this. All the areas players can't walk is covered by a hand drawn vector shape made similar to local assets. It'll get a special attribute tag applied to it so the game recognizes this as collision and not just vector graphics. The collision applied to separate props get added to the collision layer to form all non-traversable areas in the game.
Full size
Another game element that needs to be addressed are switches. These are for areas or objects that need to be interactive, or clickable. Some of the more common examples are doors (as shown below), ladders, levers, or anything that you can click on to get a reaction, like a water well or the Wish Tree. When you mouse over any switch in the game, an animated set of gears lets you know that you can interact with this object. A vector object is created in the shape where these gears will display if moused over, and then given a special tag so the game script can recognize it and know what to do when the player clicks.
Full size
Somewhat similar to switches are portals, which can be seen in the Village Greens screenshot. When you hover your pointer over this green shape, a multi-directional icon will display to let you know you're at the edge of a zone, and clicking will move you to the next one. The blue dot shown is called a target. This is the spot where your avatar will be standing when you come from Bill's Ranch and into Village Greens on the road shown in the image. Each of these objects have a name and attribute tied to it so they know which area to load when activated.
Full size
We're getting close to the end! Only a handful more things need to be addressed before we're ready to actually try playing the level. Next it's time to wrap up the whole process--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization
Camera Setup
Rendering and Conversion
Flash Asset File
Flash Level Rooms and Props
Local Assets and FX
Now that we have all the props and local assets created for a level, we have spots to place all those animated critters that are sprinkled throughout the levels to give them added life. The image below shows the majority of creatures that populate the zOMG! areas. For their creation, we had the awesome artists pepper-tea and reapersun creating the vector art and then animating them respectively. By placing them in trees, water, perched or crawling on walls and elsewhere, they add a lot of character to the world.
Full size
The last type of animations to address are for objects in the world. These are usually turned into switches, which I will cover below. The example image shows the animation for the Sealab Compound door. Animating in Flash looks similar to this whether it's a monster, ring, environment creature or FX. I'll cover some of the basics from the elements shown.
Full size
On the left, different objects are on their own layer, and sometimes grouped into folders for organization. Some are put into "masks" so that you can define how much of the original object actually displays. The bubble layers are actually FX that are triggered to play at certain times, like when the two door sections first release and separate.
Running along the top is the timeline in frames. So given the speed the game runs at, 16 of these tick marks will be traveled every second if the animation is playing at full speed.
The "s0" type labels represent the current "state" of the object. For a simple door, state 0 might be closed, and state 1 is open. Labels reading "t0-1" and the like are transition labels, meaning it's the animation that will play as an object moves from state 0 to state 1.
The little dots that exist throughout the window are called "keyframes". These are different points in time that represent the current visual state of the object.
The arrows in the blue field are called "Tweens". There are two types: Motion and Shape Tweens. We pretty much only use Motion Tweens, which are basically areas where Flash automatically transitions between the visuals of two adjoining keyframes. So if you have an object on the left side of the screen for the first keyframe, and off to the right for the second, Flash will slide the object between these two points over the number of frames that the Tween exists. This also works for things like rotation, scale, alpha or tint.
Next we can move on to the collision layer for the level. The Dead Man's Pass example illustrates this. All the areas players can't walk is covered by a hand drawn vector shape made similar to local assets. It'll get a special attribute tag applied to it so the game recognizes this as collision and not just vector graphics. The collision applied to separate props get added to the collision layer to form all non-traversable areas in the game.
Full size
Another game element that needs to be addressed are switches. These are for areas or objects that need to be interactive, or clickable. Some of the more common examples are doors (as shown below), ladders, levers, or anything that you can click on to get a reaction, like a water well or the Wish Tree. When you mouse over any switch in the game, an animated set of gears lets you know that you can interact with this object. A vector object is created in the shape where these gears will display if moused over, and then given a special tag so the game script can recognize it and know what to do when the player clicks.
Full size
Somewhat similar to switches are portals, which can be seen in the Village Greens screenshot. When you hover your pointer over this green shape, a multi-directional icon will display to let you know you're at the edge of a zone, and clicking will move you to the next one. The blue dot shown is called a target. This is the spot where your avatar will be standing when you come from Bill's Ranch and into Village Greens on the road shown in the image. Each of these objects have a name and attribute tied to it so they know which area to load when activated.
Full size
We're getting close to the end! Only a handful more things need to be addressed before we're ready to actually try playing the level. Next it's time to wrap up the whole process--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization
Camera Setup
Rendering and Conversion
Flash Asset File
Flash Level Rooms and Props
Local Assets and FX
