How to "Package" or "Compile Files" of HTML5 Canvas on Animate CC?

[shazzyms]

Hi, I'm currently working on an HTML5 canvas on Animate CC to create a series of web banners. Since I'm only doing the design of the ads, I need to pass my banner files to the developer for his use on his website.

Yesterday I tried sharing my files with him, and sent him just the .html & .js files that I Published from Animate CC. But the issue is that the banner didn't show up on his browser when he clicked open the .html file. What I can guess is that the file needs all its source files to be copied and compiled into one folder and passed on to the developer as well, am I correct?

Since my files are all over the place, how do I Package or Compile all of the source files of my HTML Canvas file? Is there anyway to do this?

[kglad · Accepted solution]

save your fla to a new directory and then publish.  all the files in that new directory (except the fla) need to be sent.

the easiest way to do that is to zip (or otherwise compact) the files and send the compressed file.

[macpawel]

Yes, typical way of distributing our work is Zip file

Be sure you have right settings before Publish. Check folder, sprites, ect. some publishers prefere all files in one folder.

pawel

[Joseph Labrecque]

An additional note - based upon browser security settings, just running an HTML file with canvas elements and bitmap images may cause a problem if not run on a server. Note that when you test an HTML5 Canvas project from within Animate that a local server is spun up in the background for this purpose.

[rosebudd]

Doubleclick being the most common ad serving vendor has a validator.

For DCM

https://h5validator.appspot.com/dcm/asset

Your zip should include your images folder if there is one, with any bitmaps you ended up not using being deleted. Any transparent PNGs should be optimized, and your zip file will include your images folder, the JS and html file. Your file weight will be judged on the file size of your zip. Your backup image should be outside your zip file.

https://tinypng.com/

How to prepare HTML5 assets for DCM - DoubleClick Digital Marketing Partners Help

[marcr26851442]

How do you export the "backup" file from Animate? When I publish that file doesn't seem to be included.

[ClayUUID]

Are you talking about the recovery file? That's literally just a copy of your FLA.

[marcr26851442]

When I publish at html it creates a .html , .js, and images folder. I am also needing a image "backup" file. How is that generated?

[kglad]

in an images folder.

follow the message 1 suggestion.  that's the easiest way to find all the published assets.

[marcr26851442]

I am able to locate the published files and the images folder does include the needed images for the html. I have a request to place a backup file outside of the images folder. Is this file auto generated by Animate or do you duplicate your image files, name them backup, and place them outside of the images folder?

[kglad]

i don't know what you need when you state, 'i have a request...'. 

whoever is making the request needs to tell you exactly what they want then it's up to you to produce that.  animate is not going to interpret that request any better than i can.

[marcr26851442]

When I read the comment above: rosebudd Mar 7, 2018 6:45 AM, she mentions "Your backup image should be outside your zip file".

Where do you obtain this backup image from? Is it auto generated from Animate? Is it a duplicate file of a image in the image folder?

[rosebudd]

You can simply right click on your canvas document in your browser when you

preview it, paste into a blank document in PhotoShop, and name and save as

a JPG or a GIF.

On Tue, Jul 30, 2019 at 1:43 PM marcr26851442 <forums_noreply@adobe.com>

[shazzyms]

Saving the .fla file in a new location definitely helped. Thank you! And thank you everyone your the replies

[kglad]

you're welcome.