Two FLA's playing on the same webpage?

Report · Feb 16, 2019

Hi,

I have created two FLAs and then published them as Canvas projects. These two separate projects are linked below:

2.) ProgressMeter
I’ve been trying for hours to get them to both play together on the same html page with out success. (I’d like to post and play the ProgressMeter FLA on the Trajectory FLA’s page but I've not been able to get the scripts to work together. (I think both animation containers need to share the same “player code” but haven’t been able to set that up in my webpage.)

This codepen example (below) does what I’m trying to do:
https://codepen.io/Visualife/pen/GJapGa/

…but I’m having trouble adapting that approach to work with the code for my 2 FLA files (linked above).

How do I add t the ProgresMeter FLA to the other html page and make them both play?

Any help is greatly appreciated.

Report · Feb 17, 2019

Hi Paul James

The example on codepen deals just with two canvasses (canvas_ship and canvas_car) which are both dealt with by one relatively compact javascript (166 lines) which utilizes pure CreateJS. When I say pure I mean CreateJS has been used without the Animate CC encapsulation.

What comes out of Animate when you publish to HTML5 Canvas is a quite massive HTML doc and a javascript. The latter contains the Lib, animations, shapes, code and much more, basically what you did in Animate translated in CreateJS-flavoured JS. The HTML doc contains JS for initialisation, responsiveness, important variables like stage or exportRoot and a HTML-part with a hierarchichal structure like in short:

<animation_container>

<dom_overlay_container>..</dom_overlay_container>

</animation_container>

</body>

To get two or even more of these monster pairs going on one webpage is virtually an impossible task. Unless you use two or more iFrame elements on one page. Each iFrame contains an independent HTML/Javascript pair. This way you can just feed the Animate outputs as is into iFrames without fiddling too much.

Klaus

Report · Feb 17, 2019

Thanks Klaus for your clear explanation.

It looks like if I use the IFrame approach, there will likely be performance issues... because goal is to have multiple, interactive animations on one page. (scroll down, click on bar graph, it animates, scroll down further, web article, scroll down further, select one of three buttons to see that animation, etc.) I think I've seen this done by others. I'll look around.

Since there would be sections of html text in between these animations I was thinking that I'd created individual FLAs and post them in divs within the page body. Sounds like I was being naive.

I guess a plan B would be to put placeholders (for example, an img of the bar graph) that the user clicks on to open a new window where the interactive FLA is available.

Any other ideas appreciated.

Thanks

Report · Feb 17, 2019

Paul James

I saw your other issue where an Animate canvas is supposed to play first when scrolled into view.

Of course this iFrame approach has got limits. If there are too many Animate canvasses on one page, with too heavy animations, millions of colors changing and code with things happening on every tick, that can be too much for CPU and GPU. You'll have to be reasonable.

Your plan B could be extended. Image images to click in the size of the animation_container/canvas to be opened. You could work with createElement and removeChild, so say dynamically removing the element with the image and putting in its place the iframe with the animation.

If you would use the jQuery library this kind of operations would be even easier. Like

$("img_div").remove();

This way everything stays on one page.

Klaus

Report · Feb 17, 2019

Klaus,

That <iframe> approach seems to work fine for my purposes.

Thanks much for your help!

Two FLA's playing on the same webpage?

1 Correct answer