I am having problem with web browser caching of my Adobe Animate html5 canvas animation project.
Let's say, my Adobe animate animation project (.fla) contains ten png image files on the timeline. (1.png, 2.png, ... 10.png). After exporting (Shift+R12) the project to html5 canvas format, Adobe Animate creates an image file: myfilename_atlas_.png for all 10 png images placed on the timeline.
I've uploaded the project to the web server ( myfilename_atlas_.png, jyfilename.js and the web page containing HTML5 canvas animation), then the website visitors opened the web page and chrome browser created cache file for the myfilename_atlas_.png on their machine.
Then I had to change some of the png files on my adobe animate project and re-uploaded the project to the web server. But when website visitors view the page again, they see errors - The location of the png images are mixed up - They see 2.png image on the spot where they should see 3.png image and so on... This error goes away if they delete cached images and files on their machine.
So, I think the error has been caused by the browser caching.
I have tried to avoid the error by attaching randomised query string value at the end of the js file:
And also tried: <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />
But I had no luck, still error occurs unless website visitors clear the cache on their browser, especially on google chrome.
Is there a way to force refreshing the myfilename_atlas_.png image and prevent image caching?
Oh, in fact, I did not change one of the png files but I have changed one of the vector graphics, (symbol) on the timeline. I did not change any png image files nor placed any new png image on the timeline but the error occurs - png images appear irratically - 2.png replaced by 3.png image etc. The error goes away if users flush the cache on their machine.