Animate cc exported html implementation in already existing html

Report · Dec 18, 2018

Hi together,

I want to create an interactive map. I tried animate cc for this - with success

I generated an html1 (2018_12_18_Sax...) and js and it works fine (see picture).... BUT

i can't integrate it into my already existing html2 "index" (exported from bootstrap studio). Implementation in bootstrap studio didn't work but I used Brackets to add the code from html1 to html2. Looks good for me (animate cc export starting @ first "<script>") BUT

If I click on my index there is only blank space in the area, where it schould be.

Is there a problem with my code (see above) or with my export settings in animate cc v see here v

I know its specific, but maybe somebody can help me, please!!

I have no clue to solve it ...

Best regards

Frank

Report · Dec 18, 2018

make sure your image assets are included in the folder used for testing.

Report · Dec 18, 2018

Thanks for the answer. It's svg and everything is in the head described by the js script [...] (there is only one image - the pattern when exported) and it works also without the images when testing html1. Do you have another explanation!?

Report · Dec 18, 2018

Hi Franki

this is a tough one.

And for me your screenshots do not show enough information to get a clear picture.

Your Publish Settings are probably alright but that's only for the document 2018_12_18_Saxony_map_interactive(.html - I suppose). The one you've published out of AnimateCC. Now you want to integrate that load (html1) into what you call html2 coming from Bootstrap Studio.

Well - there are 3 approaches:

1. what you're trying, putting html1 into html2 (I'll come to this later)

2. putting html2 into html1 by using this way: Using Animate CC HTML5 Canvas Templates with Multiple Publish Profiles | Adobe Blog

3. Putting an iFrame into html2 in which you put src="2018_12_18_Saxony_map_interactive.html". This is what I often do whereby I make the iFrame responsive with some extra JS. This method would depend on how self-contained your Animate-CreateJS-Canvas Thingie is. Is the interactivity happening exclusively in the canvas or do you access objects inside the outer DOM?

Now to your choice of putting html1 into html2:

First in your <head> Did you put into the <script> in collapsed line 26 the entire Javascripts from 2018_12_18_Saxony_map_interactive? There could be around 200 lines of code in some 4 to 5 script tags. Important vars get initialized there like exportRoot, canvas, anim_container, dom_overlay_container, to name only a few.

And in the <head> should be also some Style tag related to #animation_container. Everything needs to be carefully puzzled into your html2 document.

And in the <body> needs to be the stuff which belongs into the <div id="animation_container">. This one would contain the canvas with your interactive Events Übersicht. I can just see half of your <body>-line in your screenshot with the id="page-top" and that looks a bit suspicious ;-).

These are only some pointers and I'm not a guru. It might all be different or easier. But maybe consider the iFrame variant. Then you can just implement your 2018_12_18_Saxony_map_interactive.html as is into html2. A bit of iFrame styling like "border-style:none" and nobody can see that there are actually two documents in one view.

klaus

Report · Dec 18, 2018

I always recommend using an iframe to embed Canvas documents in other HTML pages, but only because it's easy and it works.

I gotta say though, I'm impressed that you managed to require ten different stylesheets for one page.

Report · Dec 18, 2018

ok. thanks. I give it a try

Report · Dec 18, 2018

Thanks a lot. Great advice

Animate cc exported html implementation in already existing html

1 Correct answer

Photos