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

Lanny · Accepted Answer · 2016-10-12T20:36:08.910

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.

i use flash cs6 . and toolkit for createjs . it does not has option for change the library name in the publish settings — Tanvir Ahmed, Aug 26 '15 at 06:58
If the library items don't have colliding names, it shouldn't matter, since it is non-destructive (new library is only created if it doesn't already exist). You can manually change the name of the lib object at the bottom of any of the exported JavaScript -- but you will have to update it any time you publish from Flash. — Lanny, Aug 26 '15 at 15:43

score -1 · Answer 2 · answered Oct 06 '15 at 20:13

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

Flash CC supports changing the lib name in the publish settings. Additionally you would have to run this find/replace every time you make changes and republish. Your approach will sort of work as long as the animations do run one-after-the-other. Note that you did not remove the initial exportRoot from the first animation before adding the second. I don't recommend this approach. — Lanny, Oct 06 '15 at 21:54
Your method presumes you have access to the Flash CC publishing file. In my case I don't, so need this workaround! good point to use removeChild on the old animation! — Kim T, Oct 06 '15 at 22:53

Two Flash cc Animations in the same HTML Page

2 Answers2

Linked