Motionharvest

Animation Builder

Author Aaron Sherrill
Streamline the animation process in Adobe Animate by allowing developers to define animations in a more dynamic and code-centric manner. Particularly useful for creating complex animations programmatically by generating CSS keyframe animations for web projects.

In the realm of digital animation and interactive content, Adobe Animate stands out as a powerful tool for designers and developers alike. Central to its suite of features is the Animation Builder, a versatile script that revolutionizes the way animations are created, managed, and deployed. This guide offers both a detailed description and practical documentation on leveraging the Animation Builder for enhancing your animation workflows in Adobe Animate.

Introduction to Animation Builder

The Animation Builder is a custom ActionScript 3.0 script designed to streamline the animation process within Adobe Animate. It allows users to programmatically define animations, applying transformations and effects to objects on the stage with precision and flexibility. By bridging the gap between code and visual design, the Animation Builder enables creators to craft complex animations that would be time-consuming or impossible to achieve manually.

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.