Adobe Animate .fla Conversion and publish to HTML 5/JS
The previous person we had doing this task is no longer with the company, and the instructions they left are minimal. They are probably enough to jog their memory but are not helpful for someone attempting with no Flash/Animate experience. In our attempts we get a few different results
The file works correctly in IE but not in any other browser.
The file opens in IE but cycles through each frame, never stops, and doesn’t load in any other browser.
The file opens in IE but has no animation, doesn’t respond to clicks, and doesn’t load in other browsers.
The file doesn’t open anywhere
With our lack of experience with Flash/ Animate, we can’t tell what is the problem. We did try using a file that is unmodified and has a current working HTML5/JS publish, however, when we publish that same file we get the same results as above, while the original works fine. We believe that it something in the publish of the JavaScript causing the failure. I attempted to take bad.html and bad.js and overwrite bad.js with the content of good js. This worked, it’s the wrong data, but it worked and is why we believe the publish of the JavaScript is the issue.
The instructions we are following are as follows.
Open .fla in Animate
Click File --> Convert to --> HTML 5 Canvas (save File)
Click File --> Publish Settings
Basic tab
Uncheck Loop Timeline
Check Export images assets (as spritesheet)
Uncheck Export Sounds
Uncheck Export CreateJS
HTML/JS tab (No changes)
Image Settings Tab (No changes)
Click Publish
I have shared the .fla at https://1drv.ms/u/s!ApKpIVR_uf25hd9MF6pzZPKZjukwQw?e=oEzxRV in the hopes that someone can help and spot the error of our ways.
Thank you for any assistance.
My page based on html javascripts and css for view product's models in 3D form on web.
Im trying to hide my <model-viewer part. If you press f12 or right click on page you can easily download my 3d model to your computer. ( src="Assets/m1/makine.glb")
Is it possible to hide some parts (model-viewer part) on source codes with javascript or maybe with other tools for my page ?
Thanks..
My page link > https://unruffled-einstein-e67ebb.netlify.app/urun.html
You simply can't.
Code inspectors are designed for debugging HTML and Javascript. They do so by showing the live DOM object of the web page. That means it reveals HTML code of everything you see on the page, even if they're generated by Javascript. Some inspectors even shows the code inside iframes.
How about some javascript to disable keyboard / mouse interaction...
There are some javascript tricks to disable some keyboard, mouse interaction on the page. But there always are work around to those tricks. For instance, you can use the browser top menu to enable DOM inspector without a problem.
Try these:
Firefox: ☰ > Tools > Web Developer > Inspector
Chrome: ⋮ > More Tools > Developer Tools > Elements
They are outside the control of Javascripts.
Think about this:
Everything on a web page is rendered by the browser, so they are of a lower abstraction level than your Javascripts. They are "guarding all the doors and holding all the keys".
Browsers want web sites to properly work on them or their users would despise them.
As a result, browsers want to expose the lower level ticks of everything to the web developers with tools like code inspectors.
Basically, browsers are god to your Javascript. And they want to grant the web developer super power with code inspectors. Even if your trick works for a while, the browsers would want to undo it in the future.
You're waging war against god and you're doomed to fail.
Consulsion
To put it simple, if you do not want people to get something in their browser, you should never send it to their browser in the first place, or use PHP which can't be seen by visitors.
I'm new to Javascript and web development, but I've been writing iOS software for the past 7 years. I'm not a complete noob.
Here's the issue I'm having. I'm having a minimised Javascript file which is inserted in the website on the internet. How can edit the original source, while testing this on the website online where the bug in the Javascript is appearing.
Google Chrome appears to have a function like that, but I can't seem to make it work. Any tips, resources or explanation so I can get this thing figured out?
Thanks.
Yes, Chrome has "overrides" function which allows this.
Step 1: enable overrides
F12 > Sources > Overrides (in the left tab) > Enable Local overrides
You'll need to provide a path for it to save the scripts
Step 2: go
F12 > Sources > Network > Locate the relevant JS file > right-click > save for override
Go back to Overrides, navigate to the file and edit it. CTRL+S to save, then F5 to reload. Since you have the original javascript, you might as well replace the minified source with the original in the override.
Try this one.
Unminify JS
PS use KOALA for the minification of your CSS/JS.
Koala
We ran into an error that only occurs on Safari browsers, so I dusted off my OSX partition on my Macbook and am trying to debug it but I can't find out how to see the original source code and set a breakpoint.
My main file is main.d7f60b0631c7822cabf3.bundle.js and the last line of the file is this, which points to the sourcemap file which does exist because I can type in the url and get it, and it works in firefox and chrome:
//# sourceMappingURL=main.d7f60b0631c7822cabf3.bundle.js.map
In Firefox I can go to the debugger tab in dev tools and under sources I see my original source file webpack:///src/app/app.component.ts and I can open it and set a breakpoint.
In Chrome dev tools I go to the 'Sources' tab and do the same thing navigating a tree to webpack:// - . - src - app - app.component.ts.
Is there a way to achieve the same thing in Safari? From memory since I"m writing this on Windows I can't see any files in the debug tab, just a list of breakpoints. In the resources tab I can see the bundle and an arrow that looks like I should be able to expand it, but clicking on that arrow does turn it from right to down like it is expanded but nothing is displayed. Other files like jquery do seem to have the original source under them when expanded...
I had the same question, and found the answer in another posting here:
How do I toggle source mapping in Safari 7?
(short version, in the debugger, command-click on whatever symbol you want to look at, and it should jump to the original source. For reference, I'm working with TypeScript compiled to JavaScript)
The author points to this documentation:
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW4
In the process, I also noticed that in the Resources tab in the Safari debugger, it shows the foo.js with a turner next to it, which expands to show the original foo.ts file (and I assume with a more complex source, it might expand to show multiple sources if they get concatenated together?)
Personal opinion: I think the turner is a great solution to this problem... odd that the debugger defaults to showing the "compiled"/"transpiled" source rather than the stuff one is logically wanting to debug.
First be patient while the browser processes all the source maps.
Whenever that finishes, you should be able to search for any original source file by entering the name of that file into the input field located at the bottom of the pane with the placeholder "Filter". It's a pretty counterintuitive UX IMO. Hope this helps someone!
Screenshot:
I have an external JavaScript file and whether in FireFox or Chrome, whether all browsing data is cleared, it will NOT update no matter what. I believe something happened when I made a backup of my file, which I simply added "_thedate" to the end of the name. Then Save As back to the original name.
Now I cannot seem to get rid of the old JS no matter what unless I change the name of the file, which I really don't want to do, or add the script to the PHP page, which crowds it.
Anyone know the solution to this?
You are sure you are linking to the same file and then editing that same file?
On some browser, you can use CTRL F5 to force a refresh (on the PC). On the Mac, it is Cmd Shift R
Firebug also has a net tab with "Disable Browser Cache".
But I want to give a warning here: even if you can hard refresh, how do you know your customers are getting the latest version? So you need to check, rather than just making sure you and your program manager can do a hard refresh and just go home and take the paycheck next month. If you want to do a job that change the world for the better, or leave the world a little bit better than you found it, you need to investigate more to make sure it works for your customers too (or else, sometimes the customer may call tech support, and tech support may read the script of "clear out the cookies and it will work", which is what happens to me sometimes). Some methods down at the bottom of this post can ensure the customers get the latest version.
Update 2020:
If you are using Chrome and the DevTools is open, you can click and hold the Refresh icon in front of the address bar, and a box will pop up, and you can choose to "Hard Reload" or even "Empty Cache and Hard Reload":
Update 2017:
If you use the Google Chrome debugger, it is the same, you can go to the Network section and make sure the "Disable cache (while DevTools is open)" is checked, in the Settings of the debugger panel.
Also, when you link the JavaScript file, use
<script src="my-js-file.js?v=1"></script>
or v=2, and so forth, when you definitely want to refresh the file. Or you can go to the console and do a Date.now() and get a timestamp, such as 1491313943549, and use
<script src="my-js-file.js?t=1491313943549"></script>
Some building tools will do that automatically for you, or can be configured to do that, making it something like:
<script src="main.742a4952.js"></script>
which essentially will bust the cache.
Note that when you use the v=2 or t=1491313943549, or main.742a4952.js, you also have the advantage that for your users, they definitely will get the newer version as well.
How about adding a '?2' to the tag?
<script src="a.js?2"></script>
The server should return the same file with or without the '?2', but the browser should see it as a different file and redownload. You can just change this query string whenever the file is changed.
adapted from: http://blog.httpwatch.com/2007/12/10/two-simple-rules-for-http-caching/
I've had this problem before, it's very frustrating but I found a work around. Type in the full address of the js file (i.e. yourhost.com/javascript.js) and load it. You will probably see the old version load. Then hit f5 to refresh that page and you should see the new version load. The js file will now be updated in your cache and the code should run as you expect.
The solution I use is.
Using firefox
1. using web developer --> Web Console
2. open the java-script file in new tab.
3. Refresh the new tab you should see your new code.
4. Refresh the original page
5. You should see your changes.
I had this problem and solved in Chrome by just disabling Cache:
- Click F12;
- Go at Network tab;
- Click on "Disable Cache".
A little late to the party, but if you put this in your html, it will keep your website from updating the cache. It takes the website a little longer to load, but for debugging purposes i like it. Taken from this answer: How to programmatically empty browser cache?
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Rename your js file to something else temporarily. This is the only thing that worked for me.
The best way around browsercaches is to append a random number to the path of the js file.
Example in pseudo code:
// generate a random number
int i = Random.Next();
echo "<script src='a.js?'" + i + "></script>";
This will make sure your browser always reloads the file, because it thinks it's a different file because of the random number in the url.
The server will always return the file and ignore what comes after the '?'.
In both Firefox and Chrome, that is really annoying, but because of their default settings which can be changed the following way and then they work. I tried in Chrome and Firefox both with same order of steps.
Press F12 (Open Inspector)
Click Network, and then click Disable Cache
Now click Clear icon. In Firefox, it shows as a trash bin icon on left corner, in Chrome it is the second left icon, in between 'stop recording' and 'Filter'.
Now press F5 or refresh the page
They do update the resources with their fresh copy as they re-download them.
In Asp.netcore we can use asp-append-version taghelper
<script src="~/js/site.js" asp-append-version="true"></script>
Are you 100% sure your browser is even loading the script? Go to your page in Firefox and use the console in Firebug to check if the script has been loaded or not.
I have the same problem for awhile, and manage to figure out... And my case was because I have 2 javascript with the same function name.
1.Clear browser cache in browser developer tools
2.Under Network tab – select Disable cache option
3.Restarted browser
4.Force reload Js file command+shift+R in mac
Make sure the fresh war is deployed properly on the Server side
I was going insane trying to get my js files to refresh and I tried everything. Then I did a header check and remembered I was using Cloudflare!
In Cloudflare you can use dev mode to disable proxy.
Don't forget to check any errors in webpack compilation. Sometimes the application.js in app/javascript/packs/ doesn't reload due to webpack compilation error.
When I run into this issue I try this sequence of steps:
Hard refresh the page.
Clear cache + cookies.
Add a static version to my script.
src="my-script-name.js?v=1"
If the above does not help, add a dynamic version to my script:
src="my-script-name.js?v=" + Date.now() + Math.random()