The animation object allows to define a frame-by-frame animation, simlarly to a GIF but also supporting:
- Audio track
- Alpha channel
- Full playback control
Double-click on the animation object on stage to open the frames editor to add/change frames, other properties are available in the selection inspector.
In the animation editor, click [+] to add frames, [-] to remove selected frames. Frames in the list on the left size can be reordered via drag and drop, thumbnails size can be adjusted with the slider. You can use the play button to play the animation, eventually muting it.
Animation object supports most of the Generic Object Properties, plus the ones listed below. To edit properties of an animation object, select it and use the selection inspector at the right of your project window.
|Frames||List of frames of the animations, click to edit|
|Image Rendering Format||One between
|FPS||Frames per second to define the playback speed|
|Repeat||Number of times the animation playback should be repeated before considering it complete, use 0 to loop forever|
|Play End Behavior||One between Stay on Last Frame and Go to First Frame. Defines what frame is displayed when animation playback is complete, repectively the last or the first frame of the animation|
|Sound||Audio asset for the audio track. Will be played together with the animation|
Animation object triggers all Generic Events. To edit event handlers for an animation, select it and use the Interactivity Panel on the right side of the project window.
Animation object can be used as target of most Generic Actions, plus the following:
Plays an animation object and, eventually, its audio. If playback was previously stopped, it will restart where it left off.
The action is marked as completed immediately if the animation loops forever (Repeat property of the animation set to 0), otherwise it will wait until the last frame is displayed (or
Stop Animation action is called) then pass the execution to the next action in the list, even if the audio track is still playing
|Target||Animation object to play|
Stops playback of an animation object immediatelty, leaving it on the last displayed frame, and marks running
Play Animation actions targeting the same object as completed.
|Target||Animation object to stop|
Play animation ➜ selfin the
Loadevent of the animation to play it automatically when the page loads
Here’s an example of how a simple animation with four frames is exported on the html page:
<div id="obj4" class="SCPageObject SCAnimation spritespin-instance"> <div class="spritespin-stage"> <img src="../images/obj4_sprite1.png" style="display: block;" /> <img src="../images/obj4_sprite2.png" style="display: none;" /> <img src="../images/obj4_sprite3.png" style="display: none;" /> <img src="../images/obj4_sprite2.png" style="display: none;" /> </div> </div>