Classic Tween workflow

Last update: Nov 2018

Please note:

  1. Good knowledge of Flash (Animate), its tools and workspace are an essential prerequisite to understand the concepts, methods and techniques described below. Our goal is not to repeat what the other available sources of Flash knowledge cover in detail, but to bring some clarity about specific advanced ways of using the program.
  2. This is not intended to be a step-by-step guide. It is an attempt to describe the process in its complexity, focusing on character-related specifics and trying to cast light over areas that are usually not even mentioned in books about Flash.
  3. The text below assumes that readers are already animators or people with interest and knowledge of animation, its specific vocabulary, methods and practices.
  4. In this article we will be focusing mostly on the technical aspects of Flash animation production. The creative and artistic side of the problems will rarely be addressed. (A study that goes beyond the technical is available here.)

Important:

Every time we say Symbol, we mean Graphic Symbol. Every time we say Tween, we mean Classic Tween.
Bones in Flash are totally useless. Only authors paid by Adobe are trying to promote this feature.

Table of Contents


Digital Vector Cutouts


There are 3 ways of using Flash for character animation:

  • As an ink & paint cel-replacement tool to clean up rough animation drawn on paper
  • As a frame by frame tradigital tool to simulate multi-pass traditional process by drawing rough keys first, then cleaning them up, in-betweening and finally coloring and compositing
  • As a tool for digital vector cutout animation

From a creative point of view all three approaches are artistically challenging.

From a technical point of view, the digital vector cutouts are Flash's native format and present the most serious technical challenges as well as the most serious economic advantages. The latter is the reason for the mass adoption of Flash by so many studios all over the world.

Although, compared to some other vector applications, the program may seem quite simple providing only basic drawing tools, they have proved to be so flexible that almost any visual results can be achieved within Flash.

Macromedia's invention of Symbols – universal and independent containers of media that have their own timelines and can be nested creatively into one another – gives endless possibilities to create complex hierarchical structures.

Classic and Shape Tweening in the hands of capable animators save time, allow quick and easy experimentation and timing flexibility.

The Workspace


Before outlining the workflow we need to determine the physical set up of the workspace.

On top of a reasonably powerful computer with a reasonably high resolution monitor come three mandatory input devices:

  • a standard keyboard
  • a standard 2–3 button mouse with a scroll wheel
  • a drawing tablet (ideally Wacom)
  • + a light desk and a flatbed scanner for all the more delicate or serious concept work

Uninterrupted Process


In a digital environment speed can be improved by limiting interface interruptions to a minimum.

This is usually achieved by assigning keyboard shortcuts to all frequently used functions.

Text input fields, dialog boxes, buttons and icons are all big red octagonal STOP signs which interrupt creativity and cause the artist to interact with the machine instead of with his thoughts, vision and creations.

From an ergonomic point of view keyboard shortcuts should be arranged, so that most of them are accessible by the non-drawing hand and are within easy reach. For a right-handed person this means the left half of the standard keyboard. Numpad has to be activated for quick number field input.

EDAPT Shortcuts


EDAPT Shortcuts are a carefully designed optional component of the EDAP Tools extensions package.

Many changes to the default Macromedia / Adobe shortcuts have been made in an attempt to utilize the available keyboard resources in the best and most logical (for animation designers and animators) way.

EDAPT Shortcuts can be activated from Edit > Keyboard Shortcuts… menu and then chosen as the Current Set from the drop down list.

The newly assigned shortcut combinations become instantly visible in Flash menus.

To assist the transition from default to EDAPT shortcuts we developed an interactive shortcuts map, which is available under Commands > 09 EDAPT Help > Shortcuts Map. Hovering the cursor over a key displays all shortcut combinations associated with this key and gives brief descriptions of the corresponding functions.

Hover cursor over the buttons to see associated shortcuts. Pop out in a new tab and scale as you like.

Custom key assigned to one of the Wacom pen buttons


The last suggested change before we begin would be to modify the functionality of one of the Wacom pen buttons. This can be done from Wacom control panel on a per program basis; in this case we will only modify tablet's behavior for Flash.

Sacrificing the right-click gives access to context menus only via mouse's right button, but assigning a Backspace functionality to the same pen button allows to delete any selection without the need to change tools or move hands. In the process of designing, drawing, rigging and animating this saves a lot of time and allows uninterrupted process.

Electric Dog team considers Wacom Intuos tablets to be the best for work in Flash.
Cintiq in our opinion are overrated, overpriced and far from being a real replacement of an animation lightdesk.

1. Designing with cutouts in mind


If you are an experienced Flash animator, it is very likely that your designs will suffer a lot less from functionality issues. Experience helps predict and avoid problems before they occur.

Any animation character is designed with functionality in mind. It has to be able to perform the necessary physical actions and act within the required emotional range.

Appeal and clarity, achieved through exaggeration, stylization, clear silhouettes and simplification are among the desired results. All principles of good design, which date back to the Golden Age of Animation, are valid for cutouts. The aesthetic side of character design is not the focus of our articles.

We will be concentrating only on the technical and technological sides of the problems, trying to outline 'how to' approaches and convey good thoroughly tested practices. 

Roughing out the initial concepts on paper usually produces best results. The white sheet and the pencil do not push the designer in any direction. He is free to try variations and styling without worrying too much about how later the design will be converted to a digital cutout rig.

If our design can work as a real traditional paper cutout, then most certainly it will be functional as a Flash build too.

The critical areas, which need special attention, are always the joints and the body parts, pieces of clothing or appendages that wrap around the figure, starting in front of some elements and then spiraling behind them. All these as well as fairly voluminous flexible and long hair, loose clothing, floppy ears or tails would require a lot of overlapping action, constant additional attention during a multi-pass animation process and will complicate and slow down production.

Practice has proven that flat-colored designs with no outlines or only partial outlines work best.
The lack of outlines renders the overlapping areas of the same color invisible to the audience and joints become a lot easier to handle. Partial outlines work perfectly well in combination with flat-colored shapes. They can be used in any non-hinging parts of the character, such as face (facial features), hands (fingers), chest, shoes, etc.

Our goal during the later (refining, polishing) stages of the design process should be to make our designs predictably functional and easy to convert to digital vector cutouts.

For example: A collar, a bow-tie or a necklace can cover the neck-torso joint; a hand-cuff, a long sleeve or a bracelet can cover the wrist joint, etc.

Unfortunately, this is one of the reasons why a lot of the TV series produced in Flash look similar. Functionality has dictated many of the design decisions taken.

The more experienced Flash animators we become, the more functional our initial designs will be, because we will be able to anticipate, predict and avoid potential problematic areas.

All the above doesn't mean that 100% organic-looking characters are impossible to be created for cutout animation. It will only be more difficult, requiring many more redraws of individual elements.


2. Drawing with flexibility and symbol structures in mind


Flexibility in the context of production efficiency means that all Flash assets should internally be structured in a way that allows quick and easy alterations of individual elements or of the whole, automatic color replacement and adding variations and states without affecting the original.

For the audience this internal structure is invisible. For the production it can mean success or failure to meet deadlines and stay within budget.

For many years the lack of understanding of the capabilities and flexibility of Flash's drawing tools, combined with habits to use Adobe programs such as Illustrator has plagued the industry with unjustified assumptions that most of the artwork has to be created outside of Flash and then imported for animation.

Creating all the vector artwork directly in Flash is the only reasonable and efficient way of producing functional digital cutout structures as we go. In most cases Flash's tools are more intuitive and faster to work with than the corresponding tools in other vector programs.

All drawing has to be done with attempt to keep shapes clean with minimal number of points. This allows easy editing and modification using the V‑tool or the A‑tool.

The paintbrush [ B ] is very suitable for quick freehand sketches and roughing out new poses or elements.

For good clean linework it is best to use the Line tool [ N ]. Snapping (the little magnet) should frequently be turned on or off depending on the situation and that is why a shortcut key has to be assigned to it [ W ]. Initially it's always better to work with a hairline stroke thickness, because this ensures clean edges and corners. Alternatively, outline mode will provide a similar level of control.

When outlines are done, any line thickness can be applied to the stroke or if it is not needed any more, the shapes can be filled in and the stroke deleted.

If outlines are needed it's always better to keep as many of them as strokes as possible. If thick and thin effect is what you want for the linework, the only way to do this (in versions before Animate CC) is to convert the lines to fills. This is done by selecting the outline and applying the menu command Modify > Shape > Convert Lines To Fills.

It's always a good idea to keep a copy of your original linework on a separate guided layer in case something goes wrong or in case you need to use it as a starting point for a new variation.

If you need a pointy ending of a line, it is possible to have a combination of lines with just fills endings. You can achieve this by selecting the portion which you would like to modify, convert it to a Union and then apply 'lines to fills' to it. After that you may drag one of the edges or snap them together.

If you are using the EDAP tools Keyboard Shortcuts Set, you have to select the portion of the line and then press [ Ctrl+Shift+G ] and [ Ctrl+Shift+C ]. Then you can modify the Union from the outside or inside. (illustration above)

Groups should be avoided at all times. A group may be used only as an intermediate step during design, but should never be left present in the final build.

Drawing objects (also called Unions) are a lot more flexible, but should also be used with caution.

The automated Find and Replace Color function in Flash 8 only works on raw vector shapes inside symbols. A typical problem during production may be the requirement to change some particular color in one particular character.

If groups and unions were not used the task becomes a simple automated operation. The finished scenes are subjected to a Find and Replace Color and in no time the problem is solved. On the contrary, if groups and unions were used during character creation, the operation snowballs and becomes a tedious time-consuming process, which requires manual operations and double-checking.

Similarly to the above, the EDAP Tools Find and Replace Strokes command cannot modify outlines locked inside groups due to limitations of the Flash / Animate host environment.

While we are on the matter of color, here is one more suggestion: Use unique character color palettes. This means that if you have two characters sharing the same red color – one wearing a red t‑shirt and the other having red sneakers – make sure that these two identical reds have different RGB values. For example: the t‑shirt can be R:204 G:0 B:0 and the sneakers R:206 G:0 B:0. They will look exactly the same, but you will be able to target them separately if a last moment change is required.

Logical groups of objects have to be wrapped together and put inside containers. These containers are the Symbols. Each symbol can contain indefinite amount of layers and frames. Shapes should be kept as raw vector and the individual elements that combine to form the whole should be kept separate occupying individual layers.

For example: A head will be a symbol with its registration point at the base of the neck. Inside this symbol there will be multiple layers, each of which will contain one element – the skull, the mouth and jaw, the ears, the nose, the eyes, the eyebrows, the hair, etc. Keeping all these elements separate allows quick edits of fairly simple shapes and also symbol-based animation, which we cover in the following chapters.

Also each one of these individual elements can serve as a starting point of a modified version of itself. Over time this builds up to a rich and flexible library.
For example: Alt-dragging the existing eyebrow from frame 1 to frame 2 will create a duplicate of it. Using the V‑tool we can quickly change an object as simple as this and will have a completely new facial expression at frame 2.

Shading and highlights are most flexible if kept on separate layers from the colored shapes and semi-transparent black and white (color alpha value less than 100%) are used for them. This allows quick and easy change of the underlying color without losing the shading. Of course, if the color styling requires specific design decisions with warm shadows and cool highlights for example, this method will need to be revised.

Symbolizing, the process of creating containers and filling them with content should happen at the same time as we are converting the imported pencil sketch (or digital rough) into a cutout rig. If the original design was well-planned, it is usually quite easy to decide how to separate the elements.

Symbols within symbols have to be used every time an element might need to be present at multiple locations.

For example: A logo/picture appears on a character's t‑shirt. Even if we may have multiple angles of the characters t‑shirt (each of them a different symbol) and the logo can appear on them foreshortened, it's a good practice to keep all views of the logo in one container occupying different frames there. This allows us to change the look of the logo at any time and we will only have to deal with the logos in that one container. Similar to the logo, the upper torso variations can be put all in one container which can hold front-on, 3/4, profile, back, etc, etc views as well as any transitional animations between these views or bent/squashed versions of the torso + some stock movements such as shrugging of shoulders.

When containers are used in such a way, most of the slow and unpleasant symbol swapping can be avoided. It also results in a lot cleaner and simpler symbol Library.

The dedicated Smart Graphic Control panel and two of the EDAP Tools commands make choosing the desired frame of the symbol contents to be displayed a very intuitive and easy process: Next Frame In Symbol and Prev Frame In Symbol with their corresponding shortcuts allow to quickly and interactively flick through symbol contents without the need to type in numbers.


3. Rigging specifics: Flash builds


There is a fundamental difference between the Symbol's registration point and the Symbol's transformation point. When the two coincide, if we select the symbol with the Free Transform (Q) tool the combined point looks like a small white circle with a cross inside it. If we drag the circle away, the cross will remain in place.

The circle is the transformation point and the cross is the registration point.

The transformation point (also called pivot) can be moved temporarily to a new location by dragging and is used as a center of rotation or scaling. If double-clicked with the Q‑tool it will snap back to the registration point.

The registration point is permanent and unmovable.
When we press F8 to convert a selection to a symbol we can choose one out of nine options for the registration point. All of them are usually useless.
If the object we are converting to a symbol will be the character's upper arm, we want it to register and pivot in the shoulder joint, which is neither in the middle of the bounding box nor in any of its corners. If the object is going to be the character's lower arm, we want it to pivot in the elbow; if it is a hand we want it to pivot near the wrist. The only way to adjust the registration points in Flash is to enter inside the symbol and move its contents to a new location in relation to the permanent registration point, marked by a cross. Then on the outside we need to move the symbol back to its original location and finally to double-click the transformation point with the Q‑tool so that it snaps back to the registration point.

Moving the transformation point can be only a temporary solution and if done on one side of a tween, it will break it.

EDAPT Set Reg Point To Transform Point Ctrl+T addresses exactly this problem. It does all the repositioning and relocation compensations for us without the need to enter inside the symbol and based on the current position of the Transformation Point. All that we need to do is move the transformation point to the desired location – say shoulder joint – and press Ctrl+T. This speeds up the character building process enormously.

Another important decision that has to be taken at the beginning is whether the characters will use the typical circular joints. These are just two perfect circles with matching centers which overlap. When a knee or an elbow is based on perfect circles, the joint never 'breaks'.

When elements are symbolized it is very important how the original shape is oriented in relation to the orthogonal coordinate system. Even if an arm in a relaxed position may appear at 15° angle, it has to be created vertical first and then the symbol will be rotated. This will ensure that the bounding box and the internal coordinate system of the symbol will work best and allow much more precise control.

Some elements, like the neck or large triangular animal ears, are more likely to be skewed than rotated. Proper positioning of registration point and the contents of the symbol in relation to the local coordinate system is crucial.

We have already mentioned that Symbols are often used as containers for static images. These are usually versions of the same body part.

Even if we have multiple builds for the different angles of the character – F, F3/4, P, B3/4, B, etc. we usually only have one hand and one foot containers which hold all angles and versions of the hand and foot. It's good to decide early whether you will have left or right hands and keep this consistent. A flipped instance of the symbol will serve as the 'other' hand. Inside the hand symbol all left hands – sometimes hundreds of different positions, gestures and angles, each occupying one frame – have to be of the same scale, positioned in a way so that the wrist is over the registration point and are oriented in the best possible way in relation to the local coordinate system. Additionally they can be grouped in logical successions such as fists, pointing hands, relaxed, aggressive, dynamic, etc.

When this is done using Smart Graphic Control or Next Frame In Symbol and Prev Frame In Symbol commands is usually enough to quickly pick what is needed. If no existing asset matches our needs, we can easily add a new blank frame at the end of the timeline and draw the necessary position. As long as we don't change the order of the existing hands, the animation that was done previously will not be affected in any way.

A similar approach can be used for all body parts. Lower arm symbol, for example, can contain multiple frames, where foreshortened, bent or curved versions of the limb can be stored for quick access. Heads are usually a lot more complex and symbol swapping is difficult to be avoided completely. A head symbol usually has its registration point placed somewhere near the base of the neck. Inside the symbol there are multiple layers and on them many different objects, ideally all of them also symbols.

Mouths usually have several positions inside a mouth container for lipsyncing, eyes have blinks and so on.
On the outside the head symbol is rotated and moved around or swapped with a different symbol (usually a different view of the head). On the inside facial expressions are changed and lips are synced to a voice track.
For easier control it is always recommended to keep the internal and external timelines of the head symbol synced, ideally using the “play once” looping option. This ensures that frame numbers on the outside and inside will always match and timing will be a lot easier.

Download SMR MagneBot rig from the Downloads page

Smart Magnet Rigs

Learn how to bring your traditional Flash character build to a new level and convert it into a Smart Magnet Rig, adding extra flexibility for fast expressive posing and easy clean up.

For a detailed step-by-step tutorial with video demonstrations on Character rigging for Flash animation follow this link.

4. Break-apart animation workflow


Break-apart animation workflow was designed to speed up and streamline the animation process. It is based on the understanding that cutout animation is a multi-pass process and during the different passes the animator needs access to different levels of the rig and different timelines. This is an optional alternative to the traditional symbol swapping technique.

During the first pass, even if animating to dialog the animator focuses on body language, strong poses and clear silhouettes. Accents in the dialog are visualized by hitting specific extremes, head nods, head turns, etc. During this pass quick access to all head angles is crucial.

The standard approach is symbol swapping. It is a slow process that requires constant browsing of the Library for the desired head angle. This really interrupts the creative flow.

A way to avoid this constant symbol swapping is to group all head containers into one symbol, each of them occupying one frame. The looping properties of all these instances have to be set to play once and the registration points of all heads should match the registration point of this outer wrapper / container. By doing so we can quickly access all head angles using the shortcut keys for Next and Prev Frame In Symbol, block out our animation quickly and focus on the primary movements first. When we are happy with the rough timing, we can select all the keys using edit multiple frames and release the outer wrapping by pressing [ Ctrl+B ] (break apart). No visible changes should occur. But now we have access to a different level of detail and we are ready to do another pass over the animation – lip syncing, facial expressions, blinks, all kinds of secondary movements, which are done inside each head symbol.

To make things predictable and easy to control, all individual head angle symbols should have the same number of frames as the character timeline, and have to be synced to it. It can be done manually or with one press of a button by EDAP Tools Sync Symbols To Timeline [ / ]. (Although there is a default Sync checkbox in tween properties panel, it only works in the case when symbols don't change at keys.)

Example: A character speaks as it walks across the screen and turns its head.
Between #1 and #32 we see the head in 3/4 rotating slightly from its pivot and going up and down. The mouth is synced to the audio track and there is a blink. This should be done inside F3/4 head symbol on frames #1 to #32. At #33 the head turns, displaying F angle for one frame, then a flipped F3/4 for one and then a flipped Profile angle at #35 which is later tweened up and down with a few nods until the end of the shot at #60. The F head will need one lip synced frame at #33; the F3/4 will need one more lip synced frame at #34; and the lip syncing of the P head should begin at #35 and end at #60. All head symbols should have 60 (or more) frames in their timelines.

If timing needs to be changed later at character level, the heads must be re-synced and their internal timelines adjusted accordingly.


5. Animating the characters – bubble or sandwich


For ease of asset management, builds are always nested inside a Symbol container. When multiple character builds are created they should all maintain proper relative scaling between each other at 100%. This ensures that when two or more characters are dropped into a shot and they appear to be a similar distance away from the camera, we can easily check if the scaling is correct – the numbers have to match.

There are two options where to place characters on the timeline. Each of them has some advantages and disadvantages.

1. The bubble

Character is wrapped in its own cocoon and is buried one level deeper – i.e. inside the camera, the character is represented by one container on one layer. From the standpoint of production and assembly efficiency this is often the preferred variant.

In this case, a Flash cutout character lives in its own space bubble most of the time.

A single symbol contains all layered character elements which are animated inside it. This allows easy assembly process, proportional scaling, easy re-positioning within the scene, applying color effects and so on.

A typical scene has one or more background layers, one layer for each character present and maybe a few overlays.

All character animation happens inside those character symbols (bubbles).

Similar to traditional animation drawn on paper, if a character needs to interact with a prop, the prop should go inside the character bubble.

If two characters have physical contact which lasts more than 2–3 frames one of them has to go into the other character's bubble. This usually results in internal timelines with tens of layers and less experienced animators tend to feel intimidated by it. This bubble approach keeps the camera timeline cleaner, but is one of the reasons that Flash characters rarely touch or physically interact with each other. They are animated separately and quick fine timing and re-posing is virtually impossible.

2. The sandwich 

Character layers are nested in folders and all layers share the same timeline as the backgrounds.

This gives the animator full control over timing and much easier interaction between the characters, and the characters and environment. Resulting timelines can have tens of layers, but keeping most elements in collapsible folders can help keep things manageable.

The sandwich method can definitely deliver better quality animation, but requires more caution and more experience, esp. since repositioning and rescaling of characters can be done only using the Edit multiple frames option while looking at a confusing multitude of overlapping keys.

Often a bubble will be used in addition to the sandwich method. For instance in the case when a character goes into a cycle and walks out of frame. The walk cycle (on spot) is nested inside a container and that container is tweened as it loops.

Character animation should use the principles discovered and refined to perfection during the Golden Age regardless of the medium.

The reasons for wooden, poorly timed, flat or mechanical-looking Flash animation are not the limitations of the program, but the lack of skills of the animators, unrealistic production deadlines and misunderstood concepts of modernity.

The process of animating should be multi-pass, similar to the traditional pose to pose animation.

Some Flash animators who have traditional animation experience tend to roughly sketch the poses first with the paintbrush on a top layer, focusing on line of action and space/depth/foreshortening. These roughs are then used to guide them when they block out the keys using the actual rig.

Dealing with many symbols distributed to many layers is a technical challenge, but over time animators learn to lock and unlock layers, quickly turn outlines on and off, snapping on and off, to move transform points around temporarily and so on, without losing their way. For the beginner the process looks overwhelming. That is why inexperienced animators should start learning the techniques with the simplest possible character builds.

EDAP Tools' Smart Magnet Rigs greatly speed up handling of complex, intricate, multi-symbol builds, streamlining chain selection, thus allowing animators to focus on expressive poses and not waste time and energy, dealing with the pivots and manual selections.

Blocking out the animation includes creating keyframes (with strong-looking poses) by manipulating the symbols, rotating them, choosing to display different frame of the symbol contents and sometimes swapping symbols with other symbols that exist in the Library. Often some symbols need to be edited (from the inside) by adding new states/frames at the end of their timelines. It's a good idea if the manipulation would take more than a few seconds to only roughly sketch the required position and leave the final rendering for later. At this stage it's better to keep the animation keys-only and attempt rough timing without any tweening applied.

Another pass may be needed when breakdown poses are added in-between some of the keys.

When that second pass is completed the file has to be saved under a different name (usually with incremental number or letter at the end) and classic or shape tweening applied to the layers. Refining of timing, easing in or out, adding keys to smooth missing arcs and probably rendering in detail of all those rough new elements that were added earlier should be done at this stage. By the end of it the primary movements as well as some overlapping action should be close to final. All timing to the dialog, accents upon strong vowels, etc, have to be there too.

The file has to be saved under a new name and then, if Break Apart approach was adopted, the head symbol's outer wrapping released by breaking apart each key (as described in the previous chapter). During this fourth pass lipsyncing and facial animation has to be added and some extra polishing of the character regarding timing/posing.

Finally when the animator is happy with the results, some patching may be needed. Many times the crudest possible solution is the most efficient one. Many animators tend to work on a blank layer above everything else and draw strokes with the paintbrush wherever covering of some broken element is needed.

With this the work on the character animation for the shot is completed.

A final note about extending our expectations of Flash animation: Because of the easy rotation and the native behavior of tweens, many inexperienced animators let themselves to be led by the builds and tend to constrain their thinking and character movements to the plane of the screen. It's true that it is easier and faster to do things this way, but if we think of depth and space, with very little extra effort the animations become a lot richer, more expressive and appealing.


6. Movie layer setup: camera, safe frame, sound, masking


There are a few standard procedures that can be followed when setting up the structure of a Flash file for animation that will later be used for TV. Flash animation is usually done on a per shot basis, where every shot is one FLA file. Later these shots are exported to image sequences (usually PNGs) and edited together in a video editing application.

The standard process follows the stages of storyboard, animatic, rough cut, final cut, where animatic sequences are replaced by completed shots and the film can be seen as a whole at all times. 

If only vector artwork will be used, 1024x576 pixel stage (wide screen PAL, 16:9, square pixels) may be a reasonable resolution. If necessary during export the frames can be rendered at 1920x1080 (full HD).

If raster (painted) backgrounds and textures are used 1920x1080 would be a better option.

Frame rate can be 12.5, 25 or 50 frames per second, depending on the type of shot and desired final result.

For shots that have no camera moves or panning backgrounds 12.5 fps can be a viable stylistic choice. This means that animators work on 'ones' and during post each frame is duplicated. Animators have to deal with half the number of keys, timelines are shorter and the resulting animation looks similar to typical TV animation timed and shot on 'twos'. This, however, reduces smoothness and there is no easy, automated way to 'upscale' the animation to 25fps once it has been done at 12.5. Since in-betweens in Flash 'cost' nothing, opting for 12.5 should only be done on purpose, with good understanding what are the positives and the negatives of such a decision.

For shots with fast action and camera pans 25 fps would suit better. The camera moves will be rendered on 'ones' while the animators have the choice to work on 'twos' for any frame-by-frame bits that need to be dawn while keeping tweens on 'ones' for optimal sync and smoothness. The resulting timelines are twice longer than those animated at 12.5fps. The level of smoothness that camera moves and pans get is comparable to that of traditional cartoons shot on film.

A commonly observed problem with Flash animation is certain 'floatiness' of movements due to poor timing, the zero cost of in-betweens and lack of consciously controlled easing. All these are not inherent to the program itself, but rather an expression of the lack of mastery of the animator over their chosen medium. Choosing 12.5 fps might reduce the risk of constant 'floatiness' for a team of inexperienced animators – the lower time resolution allows fewer in-betweens. Dynamics and easing in such setup, however, need to be approached differently – whereas easing of +100 works very well at 25fps, the same effect with half the amount of frames can be achieved with easing of +70.

For interlaced TV broadcast, extra smoothness for panning backgrounds and shots with long camera moves can be achieved if they are done at 50fps. Then during post, fields can be interpolated dropping half of the information of each frame. On interlaced screens this produces the smoothest possible effect. As television is moving away from analog, this method seems to be becoming less popular and should only be used if required.

Some kind of safe frame guide has to be used to remind animators that there are still 4:3 devices in use around the world which crop the sides of the screen and many of the older TV-sets also crop significant strips around the edges of the frame. This safe frame is usually a standardized symbol used throughout the production and occupies a guided layer at the top of the main timeline.

We need to have the sound track on the main (stage) timeline, if we would like to export it during SWF preview. Its properties have to be set to stream. To avoid drastic degradation of sound quality during SWF export for preview, an export profile can be saved from movie properties panel, where the Audio Stream bit rate for MP3 is set to minimum 80 kpbs mono.

All background assets, props, and character animation should be put inside a container (symbol) which we usually call camera. This allows us to handle the shot as a single object and pan, zoom or re-compose with ease.

If there is a camera move in the shot, it is very likely that it will be done at main timeline (stage) level. This camera symbol is usually masked with a rectangle that has exactly the same dimensions as the stage.

Inside the camera all layering should be based on common sense. Background is usually a symbol, there may be some masks and overlays too. Layers can be grouped in folders to keep the timeline clean and it's always a good practice to name them.

Characters, as described earlier, usually either occupy one layer each (bubble method) and all character animation is done inside those synced character containers or are animated inside the camera timeline and are nested in folders (sandwich method).

If there is dialog in the scene, the sound file has to be placed at all levels where it may be needed (main, character, inside head, etc.). Only the main timeline sound (when set to steam) will export and play in the SWF.

For the camera and the character bubbles, the best loop setting would be play once.

Download EDAPT Movie Template from the Downloads page

Using scenes in a Flash movie doesn't seem to be a good practice and we do not recommend it. Having multiple scenes in a file can easily lead to confusion, misunderstanding, frustration and tensions between team members, because only the first scene in a flash file is visible upon opening.


7. Special effects


T here are a number of filters, blending modes and special effects, such as blur, glow, etc. which are only available to Movieclips and cannot be applied to Graphic Symbols.

The best way to circumnavigate this limitation is to wrap the animation in a Graphic container and then convert each frame of this container to a keyframe, which in turn is converted to a Movieclip.

The result is editable animation inside the Graphic container and a succession of single-frame Movieclips, each of them displaying one frame of the animation. Filters, blending modes and color effects can be applied to these Movieclips using Edit multiple frames or one by one.

To automate this process EDAP Tools offer Frames To Movieclips and Effects Tween – two commands which cover the whole range of problems with effects in Flash (Animate).


8. Naming conventions


A few words have to be said about naming conventions. In a small independent production this is less important, but for large-scale projects, developing a simple and easy to use, logical naming convention is critical.

Flash files are usually named by the initials of the show, season number, episode number, shot number, shot version. At the end it is also desirable to be put the animator's name. This means that if the show is called Clumsy Forest Animals and is in season 3, current episode 16, shot 42, version 6, done by N. Tilcheff, the file name will look something like this: CFA s03 ep16 sc42 v06 (NTilcheff).fla Underscores can be used instead of spaces, but doesn't seem to be necessary with modern operating systems. Of course, this is only one of the possible variants.

To avoid library symbol conflicts when bringing reusable assets into the current file all symbols have to be given unique names. In an attempt to keep Libraries clean designers tend to put all elements that belong to a particular character in a folder and also may have subfolders containing specific elements such as head bits, extra bits and so on. Analogically all symbols that belong to a particular character have to start with its initials or name and then have descriptive names with hierarchical structure. For example: _Fox_Build_All_v21 (the leading underscore will keep this symbol at the top of the Library for easy import (drag & drop) into other scenes; it also may contain a version number); Fox_Arm_Upper; Dog_Head_F34; Dog_Head_P; Hedgehog_Head_All; etc.

When elements are named logically they stay next to one another in the library and even if some swapping is needed finding the necessary asset is fairly easy. Different systems have been developed for naming and quick reuse of backgrounds and props. If sufficient time is allocated to preproduction and the team really likes to be efficient, detailed floor plans and maps of all locations are drawn, camera spots are positioned and numbered and then these locations with the camera number can be used to determine the name of the background. For example: A floor plan of the kitchen shows the door, windows, fridge, sink, table, chairs. 6 cameras are positioned, drawn as schematic cone of vision angles, which show what the camera would really see from that location. Camera 4 'sees' the fridge, the sink and part of the window. The resulting background can be called Kitchen_Day_Cam04.

Other options are also possible. If there are color variations of the same background, such as day and night, party lighting, magical colors, etc. all these can be frames within the same symbol. This can be indicated in the symbol name or with a note outside of the visible area. 

If such system is implemented and there is good communication between layout/background department and the storyboard artists the amount of necessary backgrounds can be kept well under control.

Nickolay Tilcheff
© 2011–2018

up to TOC

 
Comments

Thank you so much for this insightful compilation! I normally do 3D animation, but had to transition into 2D for a project I'm working on. This lesson probably improved my upcoming project 10-fold, and made the subsequent projects infinitely easier. Wonderful work!

Thanks a lot for leaving a comment, Chris!
Good luck with your 2D and 3D projects!

If you're using Flash, give our tools a test run too.

I just found this and saved the link. Looking forward to read it. Thanks alot.

I just found your site and tool. This was a very valuable read and I'll be looking at adding these tips to my workflow on future projects.

Just wanted to say thanks for such a comprehensive run down of an efficient Flash workflow. It was a huge help.

Massive help to my Flash work in UNI.

Thanks so much for this brilliant learning resource, there's nothing like this out there.

really awesomeeeee.….… post for flash production pipeline

I am an artist and a 2d animator and have been using Aftereffects and Flash for my character animations. Your toolset and this help article is AWESOME !
Thanks a lot 🙂

A gift from the heavens! Next Frame in Symbol/Prev Frame in Symbol shaved eons off from the animation process!

Thanks for the positive feedback, Andre!
Glad to know you've noticed such drastic improvement in efficiency.

Give the Smart Magnet Rigs a go.
I, too, am animating full-time and I can't imagine life without Smart Transform and Keyframe Advanced any more.

I tried to download the file for the EDAPT Break Apart Workflow Demo, but Flash is giving me an error message and won't let me open it. The sample files on the download page still work fine.

Yes, Animate 23.0.2 has a bug – it can't open older FLA files.
Try downloading from here.

Leave a Reply