Animation Builder

Adobe Animate had its time in the spotlight as a respectable tool for creating web experiences. Those days are gone. Nowadays Animate attracts animators who use the tools to create short films. Arguably its greatest asset is its timeline. Animation Builder uses a snippet placed on every keyframe to capture the position, rotation, skew, and opacity of each Symbol.

What does Animation Builder give you?

Simply put, Animation Builder gives you the CSS code you need to to playback your animation just like how you created it in Animate.

Trophy Animation Codepen

Key Features and Capabilities

• Programmatic Animation Creation

  : Define animations through code, specifying keyframes, easing functions, and transformations without manually adjusting timeline properties.

• Support for 2D and 3D Transformations

  : Utilize matrix transformations for both 2D and 3D objects, enabling sophisticated animation effects.

• Dynamic Animation Management

  : Add, modify, or remove animations dynamically during runtime, offering unparalleled control over animation sequences.

• CSS Keyframe Export

  : Generate CSS keyframe syntax for web-based animations directly from your Adobe Animate projects, facilitating seamless integration with web development workflows.

Getting Started with Animation Builder

1. Installation: Begin by integrating the Animation Builder script into your Adobe Animate project. This involves importing the provided AS3 file into your project's script library.

2. Initialization: Instantiate the Animation Builder class by passing the main timeline and a target object (or objects) to animate. This sets up the foundation for your animations.

					var myAnimationBuilder = new AnimationBuilder(this, {
    "target1": symbolInstance1,
    "target2": symbolInstance2
});

3. Defining Animations: Use the add method to define keyframes for your animations. Specify the keyframe name, properties to animate, and optional easing functions.