µSprite Animation
To animate a shape in µSprite select the layer it is on so you can see it in the drawing area. You can select a layer on the Scene tab or with the selector below the drawing area. To get started draw for example a filled circle then click on the Animate tab and click in the blank timeline area.
On the Tween form you have many options, but the first time just try a click on the Bounce transition, type 100 in the target field and click the OK button. The tween is shown in the timeline and three new controls are available under the drawing area. Click play to see your shape bounce horizontally.
If you hover the mouse over a tween then you can see details about it and you can edit it by clicking it. If you click in the empty timeline area then the tween form is brought up again, ready to add another tween. This time try clicking on the 'y' property on the Display tab and enter 30 in to 'To frame' field so it finishes earlier than the first tween. Play the animation to see the new movement. This is how simple tweens are combined into more interesting movements. Experiment with the different Display properties and Transition types, but wait with the motion path, oriented motion path and the Advanced transition option, until you read their descriptions below.
Filters and Transforms
You can also animate filter effects applied to a shape. Try adding yet another tween but this time click on the Shadow tab and the distance property. Let the target be 100 again. You now see that a default shadow was added to your shape and when you play the animation the shadow distance is increased. You can create the illusion of 3-D movement if you also add a tween that scale the size of the shape. Properties for Bevel and Blur effects can be animated in the same way.
On the Color and Matrix tabs you can animate transform properties. For example you can shear the shape form with the matrix properties or you can change the color channels with the color transform. See the Flash API Reference on flash.geom.Matrix and flash.geom.ColorTransform. These properties may be more tricky to work with because they can interact with the simple display properties and can leave your shape invisible or off-screen.
So this might be a good time to switch to the Scene tab and bring up the Script dialog. If you browse to the end the of the generated class then you can see the generated timeline script - also quickly save your valuable work to you text editor so you can restore it later.
Motion path tweens
Motion path tweens require two parts: a path and a shape. To create a path you use the 'Add Path' button on the Scene tab. In this version of µSprite you do not see any difference in the user interface when you create a path. But in a path only line strokes are valid, so click on the 'Add point' button next to the drawing area and use it to draw a few connected line segments in the drawing area.
You can click on the root layer on the Scene tab or create another layer with 'Add Shape' and create a small figure or rectangle there. On the Shape tab you can click on the absolute move button to place the shape at origo (0, 0). If the shape is not at origo then its motion may be offset accordingly. Then switch to the Animate tab and click to add a new tween. Set 'Frame to' to for example 300 and select motion path on the Display tab. The Target field changes to Path layer and you now have to type in the index of the layer where you created the path.
In the likely event that you have no idea what index that was - either switch to the scene tab, hover the mouse over the path layer icon and see it in the tooltip - or use the layer selector spin button under the drawing area to switch to the path layer and see it in the field. If you use the last method then remember to switch back to the layer with the shape you want to animate or you will end up animating the path with itself. The tween dialog attaches the tween to whatever layer you have selected when you click the OK button.
When you play the animation you can see the shape approximately follow the path you created. On the Scene tab you can temporarily turn View Trace on and play the animation with both visible. Instead of trying to draw one long path that criss crosses, try creating more than one path and tween them sequentially. If your shape is something other than a circle then you can also try the oriented motion path and see your shape change direction as it moves along the path.
Advanced value path tweens
With an Advanced value tween you can control your animation in more minute detail. As with the motion path you need a shape and a path. But when you click the Advanced button under the Transition Label in the Tween dialog you might notice the frame numbers disappear. This is because the x-axis of the path you draw represents the frame number and the y-axis the value of the property.
For example if you create an advanced value tween on an x property with a path layer where you have drawn a straight line from (10, 100) to (60, 300) then your shape will immediately be offset on the x-axis with 100 relative to its control points. When you play the animation then the tween does nothing for the first 10 frames, then from frame 10 the x-position is increased gradually up to 300 at frame number 60.
You can further vary the behaviour by selecting a transition type other than linear. When you create an advanced value path for a property with a value between 0 and 1, such as an alpha level, then you will need to use to the zoom controls to draw the line accurately.
Examples
Below is a simple animation scene generated by µSprite showing a ball bouncing off a corner. To compile it with mxmlc save it into a file named BouncingBall.as. Check that you have the boostworthy version 2.1 animation library in your classpath or are compiling in the directory where its com directory exists. To view or edit it in µSprite, paste the class into the class script window available on the scene tab page.
Next is an example of a scene with path based animation. It uses two motion paths for the two birds/blops coming from the right hand side and one oriented motion path for the one from left so it can seem to change direction. An advanced value path is used to control the transparency of the sun's reflection in the water. To compile save as AnimatedMorningScene.as. To view it in µSprite try clicking on View Trace.
Note the difference between the script windows available from the scene tab and the shape tab. When you want to paste whole classes then you use the scene tab script window. It is also from here you copy your completed script.
The shape tab's script window only displays and reverse engineers the method defining the currently selected shape. It is therefore much faster and safer to edit a shape through this window than in the class script window.
Compilation of scripts with animation of color/matrix transforms and of filter attributes require the TweenEx class from the source distribution to be placed below the compilation directory or in the class path. The source distribution also contains a compatible version of the boostworthy animation library.