Download files for this lesson:
 color_anim.svg
color_anim_done.svg
In the following example, we'll animate an object to make it appear as though it is fading away. (Note that although Ikivo Animator 1.1, as well as newer implementations of the Ikivo Player, support the display and animation of opacity and gradients, we can simulate transparency for older players by animating the color of an object to match its background).
This example is a simplification of the "map.svgz" sample animation that is installed with Animator. See the CityMapTutorial.pdf file (installed with Animator, but available for download here) for more information on building the entire sample map animation.
To follow along in this lesson, download and open the color_anim.svg in Animator.
First, in order to animate the arrow's colors to match the color of the building that it's on top of, we need to determine what the fill color is on the theater building. We can either click through the Treeview until we find the theater building object (which in this case, is labeled as one of the "theater" objects in the "bldg_theaters" group). Or, we can click the "Untrap All" button at the top of the Treeview Trap column so that we have access to all objects. Then simply click on the object in the Stage Window until it appears to be selected. The selection system in Ikivo Animator's Stage Window allows the user to select any untrapped object by drilling down into a selection. For example, by clicking on the theater object once, we select the outermost group containing the arrow and the map called "arrow_and_map". Clicking again, moves the selection to the "downtown_map.svg" object. Continuing on, we eventually end up with the object called "theater2". Notice that the selection box on the object has turned from green to blue. The green selection box means that the object is an untrapped, and therefore, animatable group. The blue selection box means that the object is a "leaf element", or the lowest unit of the group.
With the theater building now selected, we can determine the fill color by looking at the Color Palette.
The fill color appears to be the Web hexadecimal color #FF6666. Take note of this color by creating a custom swatch. Simply move the cursor to an empty swatch space at the bottom of the palette, and when the cursor turns into a paint bucket, click to fill the swatch with the selected color.
Now, select the object named "arrow", and show its animation layers. Add keypoints to both the fill and stroke layers at 0 seconds. Advance the Timeline Marker to 1 second and sample (click on) the custom swatch color we just made. Notice that a fill color animation is created that tweens the fill color of the arrow to the theater's fill color. Click the stroke color indicator in the Color Palette in order to select the stroke color. Now click the swatch again to animate the stroke of the arrow to the same reddish color.
Preview the animation by opening the Preview Window and playing the animation. The arrow should
appear to fade into the building as in this completed version of the animation.
A Note on Tweening
As we changed the fill and stroke colors of the arrow object, animation bars appeared that span the time between 0 and 1 second. These bars represent tweened or interpolated color animations where the colors gradually change from their original values to the new colors we just set. Tweening is the default behavior for animations in Animator, but tweens can be removed in order to make "discrete" animations where the animated value changes instantaneously from one to another.
To remove tweening on any animation layer (except Visibility), simply right-click on the beginning keypoint of an animation bar, and select "Tween to next" from the context menu (this will remove the checkmark next to this option). Similarly, to add tweening, select "Tween to next" to tween the selected animation value to the value of the next keypoint.
|
