Skip to main content
paul_james123
paul_james123
Inspiring
February 17, 2019
Answered

Two FLA's playing on the same webpage?

Hi,

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

1.) Trajectory

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.

This topic is closed to new replies. Start a new post to keep the conversation going.
kdmemory
kdmemoryCorrect answer
Inspiring
February 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

View reply

4 replies

kdmemory
kdmemory
Inspiring
February 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:

<body onload="init();">

  <animation_container>

   <canvas>..</canvas>

   <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.

<iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDN

Klaus

Translate
paul_james123
paul_james123Author
Inspiring
February 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

Translate
kdmemory
kdmemoryCorrect answer
Inspiring
February 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

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices