how copy the buttons after publish

[xber9]

I created a button in Adobe Animate CC, published it as "html5\canvas" and inserted in a web-page.
So, how can I copy the buttons in the web-page with minimal changes in animation code of the buttons?
You can find the animation code here:

https://jsfiddle.net/xber9/1og702yx/3/

Below in window you can find content of the js-file:

[kdmemory]

Hi xber9

i try to understand what you mean. You want to "copy" what you created in Animate CC, a button, and paste it into other webpages? To be used as a button?

First of all, your JSfiddle does show code, but otherwise nothing. I can see that there are 3 spritesheets with seemingly massive image sizes which are obviously missing here. If I look at the isolated HTML-iframe then the canvas is empty, transparent, tabula rasa. What, where is the button !?

You have to explain what your intentions are in more detail.

Klaus

[xber9]

Look, here is a test site. http://b91690vi.beget.tech/  There is a button on the website, the button is made in Animate CC. how to make a lot of such buttons on one page without duplicating them inside the Aminate project

[kdmemory · Accepted solution]

Hi xber9

"So, how can I copy the buttons in the web-page with minimal changes in animation code of the buttons?"

"how to make a lot of such buttons on one page without duplicating them inside the Aminate project"

Sorry that I let you wait with my reply.

To start I had to paste your two essential questions to remind me what your intentions are.

But nevertheless they remain unclear. I presume you want to use Animate CC HTML5 Canvas created buttons in a normal web document (using HTML / and possibly / CSS / JS) to make visual links to pages or functions like <send> etc.

Well, you know that HTML5 Canvas projects like your/this button are quite a big package. It normally includes one HTML, one Javascript document and possibly several spritesheet images. This all is a web package on it's own and it is not that easy to integrate it into another document. Let alone in multiple variants (buttons).

Mostly two ways are practiced: Placement in an iframe or an object tag. The basic idea of such practice is to leave the package published from Animate as an independent document set, stored on a webserver, on it's own and bind it into other setups via the two mentioned tag-methods.

For "small" things like buttons it seems to me that the object method is more appropriate. Something like this is possible:

<object type="text/html"
    data="/animate/buttons/3.html"
    width="200"
    height="200">
</object>

In this scenario on the relative path starting from the position of the HTML-doc with the object tag in the subfolders animate/buttons/ would be 3.html and 3.js plus possibly a further images folder with related spritesheet images. It would be also relatively easy to include this in responsive web design rules like being controlled by Bootstrap or similar reponsive Grid techniques.

On the other hand the iframe tag becomes feasible for larger stages/animations created in Animate CC.

But maybe this all is too heavy artillery to place/paste/reuse buttons. How about to export your creations as Animated Gif?

File => Export => Export Animated GIF ...

Of course at first you'll loose any mouseover or click interactivity you have coded in Animate. But you could export one still image for the UP state and an animated GIF for the OVER state and use javascript to catch the mouseover / mouseout events and swap the src-attribute accordingly.

Well - maybe I still do not answer precisely what you are after. But your question is too general and blurry.

-Klaus

[xber9]

Thanks, I think you understand my question. and sorry for my English, he is not very correct))). I will try the iframe and write about the results later. GIF is too easy and I know how it is done, but I want to experiment with canvas, and first make the buttons and then something more.