This is a hack of the Adobe Edge Animate runtime, to make things a little easier (see possible) for developers to use and control the animations in their projects, especially when creating SPAs (single page apps) using modular workflows.

There are two main changes (hacks) to the runtime. The first is the addition of a UMD (universal module loader), to enable better encapsulation when using require style workflows.

The second is the addition of a method called "addComposition" to the AdobeEdge object, which allows you to programatically add a composition and the composition's animation definition to the AdobeEdge instance. This "sort of" replaces the "loadComposition" method that is normally used to ... load compositions, and run them.

As this is a hack for my own personal abuse, it currently does not support all Adobe Edge features, namely preloaders and browsers that do not support css transforms, and possibly other things I have overlooked in my hackery. Feel free to send pull request ;).

A basics example project using angular can be found here https://github.com/ichabodcole/edge-animate-hack-example/

One form of installation:

npm install ichabodcole/edge-animate-hack

then if using something like browserify or requirejs

var AdobeEdge = require('edge-animate-hack');

###How to use

First, obviously create some animation with Adobe Edge Animate.

In addition to the hacked runtime, you will need to edit the files that the program creates for your animation. The main one is the file that ends with "_edge.js" file. This one contains the animation definition code. You'll want to strip out everthing until it looks something like the below.

// These should point to wherever your project assets are.
var im  = 'images/',
    aud = 'media/',
    vid = 'media/',
    js  = 'js/';

// This object contains the animation definition, which I then export.
var myAnimation = {
    fonts : {
    },
    opts : {
        'gAudioPreloadPreference': 'auto',
        'gVideoPreloadPreference': 'auto'
    },
    resources : [
    ],
    scripts : [
    ],
    symbols : {
        // lots of nested objects in here...
    }
};

// I'm exporting using commonjs format.
module.exports = myAnimation;

Below is some example code from an angular project I made:

import angular from 'angular';
// The hacked runtime
import AdobeEdge from 'edge-animate-hack';
// This is the stripped down animation definition from above.
import compDefn from './animations/myAnimation';

angular
    .module("myModule", [])
    // I inject the AdobeEdge object into Angular as a constant
    // so I can use it like service in controllers and directives.
    .constant('AdobeEdge', AdobeEdge)
    // The controller defined below
    .controller('AppCtrl', AppCtrl);


function AppCtrl($scope, AdobeEdge) {
    // This is the id generated by the Edge Animate program.
    var compId = 'EDGE-3260115',
        // this is the name of the top-level symbol that gets created in a project.
        symbolName = 'stage',
        // I copied these options from the code that was generated in the projects html file.
        // You will find them in a script block within an AdobeEdge.loadComposition call
        compOpts = {
            scaleToFit: "width",
            centerStage: "horizontal",
            minW: "0",
            maxW: "undefined",
            width: "1440px",
            height: "760px"
        };

    // addComposition returns the newly created composition object
    // make sure to call the ready method on this object to start your animation.
    var comp = AdobeEdge.addComposition(compId, compOpts, compDefn);
    comp.ready();

    // You could shorthand that by doing AdobeEdge.addComposition(compId, compOpts, compDefn).ready();

    // There will also be a file that ends with "_edgeActions.js".
    // If you added dynamic behavior to your animation while in the editor
    // you can copy those actions and use them similarly to how I have below.

    // Below I have added some actions to the angular scope for some basic control of the animation.
    // see the following link for more api documentation
    // http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#Trigger_Event_Action
    AdobeEdge.Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, (sym, e)=> {
        // In this case sym is the top-level "stage" symbol.
        // I am immediately stopping the main timeline at 0 milliseconds.
        sym.stop(0);

        $scope.playClick = function() {
            // Start the timelie at 0 milliseconds
            sym.play(0);
        };
        $scope.stopClick = function() {
            // Stop and reset the timeline at the beginning of the animation.
            sym.stop(0);
        };
    });
}

In your html view file:

<div id="Stage" class="EDGE-3260115">