Personal tools

Advanced Animation

From RadiWiki

Jump to: navigation, search

There are several ways to create animation in Radi, each suited to a specific use case.

The first one is motion keyframes. If you’ve read the Creating Vector Animation tutorial, you’re already familiar with this type of animation. Motion keyframes are created by setting a layer’s values at specific frames, and then Radi will calculate the in-between values to create a smooth transition from one value to another.

Motion keyframes are easy to use, but the animation is limited to what can be accomplished by changing values. (By combining motion keyframes with layer masks and parenting, you can create quite advanced animations just with these tools – the Peeking Bird example offers some ideas for how layers can be used together to build complex behaviors.)

This document explains another type of animation called shape poses. Whereas motion keyframes are automatic animation (the computer does most of the work for you), shape poses are a more manual kind of animation. When you create a shape pose at a particular frame for a layer, it replaces the layer’s previous content. This allows for frame-by-frame animation where each frame has a completely new image. (Before computers came along, this is how traditional 2D animation was done: animators would draw key poses, and then create in-between frames by redrawing the image for each frame.)

Creating animation using just shape poses is obviously a lot of work. For many uses, it’s best to use shape poses and motion keyframes together. Often you can break an animated object into separately animated parts. For example, a hand can be rotated separately of the body. The overall movement of the hand in relation to the body could be animated using motion keyframes. To animate more detailed movements within the hand, you would then use shape poses that affect just the hand.

The third kind of animation that can be created in Radi is scripted graphics. This entails programming in the JavaScript language, so it's a very different method of creating animation compared to the other two. Normally you wouldn't use scripting to create content that could be just as well drawn by hand; where scripting excels is animation that is either too complex to create manually (e.g. lots of objects in motion) or that can be controlled dynamically. To see an example of such animation, check out Hokusai's horse - interactive version. The snowflakes are rendered by a script, and all the rest was animated using motion keyframes and image layers. (You can download this example project file from the Radi download page.)

One advantage of scripted graphics is that it's easy to reuse in a different context. The snowflakes in this "Horse" example could be copied into another project, and with minor tweaks to the rendering like changing the size and density of the flakes, the effect could look quite different. In this sense, scripted graphics is similar to effect plugins in traditional graphics applications, but with the advantage that scripts are editable and can be published to HTML5 with no problems.

Shape poses

In Radi 0.8, shape poses can be created for shape layers. The controls for shape poses can be found in the Animation Keys section of the Layer Tools panel, just under the Timeline:


To create a shape pose, select a frame in the timeline. The button labelled "Add Pose" will be activated. Click on the button, and a "pose" icon showing a walking stick figure will appear at the frame. (You can see the icon on two consecutive frames in the above screenshot.)

When the animation is playing and the timeline enters this frame, the contents of the layer will be changed to match the pose.

What if you want to have the same pose at multiple frames? This is a common scenario: something happens, there is an animation, and then the animation returns to the original state, i.e. the layer returns to its original content.

To avoid duplicating content from one frame to another, Radi offers a feature called linked shape poses. When a frame contains a linked shape pose, its content will depend on the original in another frame (called the reference frame). If you edit the reference frame, all the linked frames will change accordingly.

To create a linked frame, click the button labelled Link. This opens a window with more instructions for picking the reference frame in the timeline.

When linked shape poses are published to HTML5, their content will simply reference the original frame, so they take very little space in the resulting HTML file. Therefore it's a good idea to use linked shape poses whenever possible.