Two Flash cc Animations in the same HTML Page

Question

Is there any way to keep two or more flash cc create.js animations in the same HTML page?

The problem is first one goes away and second animation comes to the first animation place. It's strange.

It contains <script> </script> twice.

<script> 
  var canvas, stage, exportRoot;
    function init() {
  }
</script>

Here is the link: Can anyone solve this?

Link removed as it led to spam content

Answer 1

This is possible, but will take some editing on your part. First, you should change the library name for one of your movies. You will need the lib properties object to remain (containing your image manifest, and other FLA properties). Additionally, if you have any similar names of symbols, you might run into collisions, and the first libraries items will be overridden.

You can change the library name in the publish settings. The default is "lib", which generates a window-level object that all symbols are defined on. You can see how the lib is generated in your js files created by Flash CC.

.

You may want to change the name of the images object as well, but you don't have to. Leave the CreateJS reference alone.

Next, you need to ensure that the canvas for each animation has a unique name. By default, it is just named "canvas". Change the canvas id in one of the usages, and then change the associated ID where the Stage is created.

<canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>

and

canvas = document.getElementById("canvas");

I also recommend changing things like the name of the stage, exportRoot, and other variables in case you plan on doing anything with them. If you don't it will be fine, provided everything happens in the right order.

[UPDATE]: If you have any assets loading, you will need to change the names of these variables. Loading assets makes the handleComplete method in the template fire asynchronously -- meaning it will always reference the second canvas/stage/etc.

Lastly, make sure you are only defining necessary elements once. You should only import the CreateJS libs once. There are some things that may not be supported, for example, you can only have one Ticker framerate. Also note that in your link you provided, you have 2 HEAD and BODY tags. You should consolidate them into one.

I hope that provides some useful direction.

Answer 2

This is also possible with a find and replace. First include the base library scripts in the page:

<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/movieclip-0.8.1.min.js"></script>

Then include your two animations below:

<script src="js/anim-1.js"></script>
<script src="js/anim-2.js"></script>

Next you need to include the code to init the animations. In my example animation two replaces animation one after five seconds:

<script>
    function init() {
        var canvas, stage, exportRoot;

        createjs.MotionGuidePlugin.install();
        canvas = document.getElementById("canvas");
        exportRoot = new libFirst.first(); // libFirst
        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();
        createjs.Ticker.setFPS(libFirst.properties.fps); // libFirst
        createjs.Ticker.addEventListener("tick", stage);

        // after five seconds replace with animation two
        window.setTimeout(function () {
            canvas = document.getElementById("canvas");
            exportRoot = new libSecond.second(); // libSecond
            stage = new createjs.Stage(canvas);
            stage.addChild(exportRoot);
            stage.update();
            createjs.Ticker.setFPS(libSecond.properties.fps); // libSecond
            createjs.Ticker.addEventListener("tick", stage);
        }, 5000);
    }
</script>

Notice how 'lib' has been changed to 'libFirst' and 'libSecond'. Lastly you need to do a find an replace in your animation files:

anim-1.js replace all 'lib' with 'libFirst'
anim-2.js replace all 'lib' with 'libSecond'

Then animation 2 will replace animation one