Adobe Animate .fla Conversion and publish to HTML 5/JS - javascript

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.

Related

Loading sourcemaps and debugging in Safari?

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:

Javascript game does not load sprites but loads arena

https://github.com/mliu95/quintus-tag
Source code is there.
I was following Liu's tutorial on this (https://mliu95.github.io/2014/09/16/Creating-an-online-multiplayer-web-game-using-Socketio-and-Quintus-Part2/)
Part 1 worked perfectly fine (single player with a movable sprite). However, upon introducing multiplayer (accomplished by opening multiple windows with localhost:8080), the sprites simply don't appear on the screen.
Also, you are dealing with a complete noob in terms of networking. I know a decent amount of Java but have no experience whatsoever. Any advice would be greatly appreciated.
You didn't give much information to go on, and didn't respond to my question in the comments that could clarify the issue.
But here is what I think is happening, in part one of the tutorial he lists his sprite paths here:
var files = [
'/images/tiles.png',
'/maps/arena.json',
'/images/sprites.png',
'/images/sprites.json'
];
I'm assuming your sprites are 404'ing (not being found), so here is a possible fix.
Your file structure is probably not the same as his, where are you storing the sprite images locally (on your pc)? It needs to be in the same paths as shown above. Sprites should be located in YourProjectFolder/images. Make sure your your sprite file is named sprites.png
After making sure all those files are placed correctly, open your developer tools (f12), head to the network tab, check the "disable cache" box (if you're on chrome). And refresh.
It should load your sprites after these changes, and if not, you need to post the specific errors you are running into. The errors will show up in developer tools after you refreshed, if it is still unable to find them.
Good luck

spoof Plugins for Chrome

Is it possible to spoof Chrome plugins?
I noticed that their names are stored in Preferences and Local State file in /Users/mainuser/Library/Application\ Support/Google/Chrome/Default/Preferences and /Users/mainuser/Library/Application\ Support/Google/Chrome/Local\ State respectively (on Mac), but manually changing the contents of these files gets treated as file corruption. Any idea how to spoof it?
Plugin information are publicly available and are easily inspected with something like this:
var x=navigator.plugins.length; // store the total no of plugin stored
console.log(x);
var txt="";
for(var i=0;i<x;i++)
{
txt=navigator.plugins[i].name;
console.log(txt);
}
I assume you want to modify an extension that you have installed on your machine in order to improve it.
You can use the Developer Mode and load the modified extension:
Extensions that you download from the Chrome Web Store are packaged up
as .crx files, which is great for distribution, but not so great for
development. Recognizing this, Chrome gives you a quick way of loading
up your working directory for testing. Let's do that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
Paranoid about browser fingerprinting I guess.
If you want hide navigator.plugins list, see this plugin :
https://github.com/bcaller/plugin-privacy-chrome
See content.js#L27 :
properties.plugins = vecw({}, true);
The "real" fix is to stop the enumeration of plugins for everybody, so there is no fingerprint information (after everyone upgrades):
https://bugs.chromium.org/p/chromium/issues/detail?id=271772
If you hide navigator.plugins, that is also an identifying (single bit) feature that will make you stand out since there will be very few users who hide navigator.plugins. Which is why you'd want to spoof.
From another answer, from #Hors Sujet, https://github.com/bcaller/plugin-privacy-chrome is a great place to start how to program a spoof. You'll want to look like the vast majority of Chrome users (I'm not sure that actually exists, though.)
But what you likely really want is EFF's Privacy Badger.
Start here to see the number of bits you can be fingerprinted by:
https://panopticlick.eff.org/
And then install Privacy Badger from here:
https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp

CSS and JS fail when upgrade made to Drupal site

I've run into an issue that crops up when I make a change to a Drupal site - www.productworld.com
This is how the problem crops up:
Make a change to site, e.g. add javascript tracking code or adding a new static webpage.
When NOT logged in as admin (viewing the site as a regular visitor), the homepage is now screwed up. It appears that the CSS and JavaScript for the homepage aren't loaded. When logged in as an admin, I see a cached version of the site, looking as it should. I use two separate browsers to confirm the problem - one where I'm logged in as Drupal admin in Chrome, and two where I view the site in Firefox as a non-logged in site visitor.
Here's some screenshots of what the site looks like when the problem crops up:
http://imgur.com/xs3hF
http://imgur.com/wMBVq
http://imgur.com/Gksb9
http://imgur.com/eZPTE
Note: the company images that you see (iWatt, Roal, Assa Abloy etc) should be in a nodequeue (a jQuery image slideshow), but instead they appear one after the other. The blue box with the gold call to action appears way down the page. This is what leads me to believe that the CSS and JS isn't loading.
3.Clearing the Drupal cache fixes the issue.
It's obviously highly undesirable to have a site that gets screwed up everytime a simple change is made to it.
If anyone has run into a similar issue, please let me know.
Thanks.
When you make changes to the site with caching enabled it will cause problems. This is because it will be using some cached copies of earlier files.
I tend to make changes to a development version of the site, then roll them out to the live site and clear the cache.

Javascript caching on iPad HTML5 fullscreen web application

I'm having an problem where the iPad insists on loading an old copy of a .js file, instead of the current one. Strangely enough, this only happens when the page is in fullscreen mode, not when it's being run from the page.
I'm not using any kind of cache manifest;
When I open the page on Safari, it behaves as dictated by the latest version of the .js;
When I open the page through the icon, it behaves as dictated by the old .js;
Killing the running application, deleting the icon and then creating it again doesn't solve the problem; it's still using the old .js, even while in full screen.
Does anyone have an idea of what's going on?
-- update --
This seems to be an iOS 5 bug.
-- Workaround (a.k.a. ugly hack) --
Simply add some fake http params to the script tag, so that the cache thinks it's entirely another JS:
<script src="js/pentaho-jqm-repository.js"></script>
Becomes:
<script src="js/pentaho-jqm-repository.js?fkn-ios-bug=1"></script>
After using the aforementioned workaround (adding a fake parameter to the URL) and then changing it back, strangely enough, the problem stopped happening. Of course, in a production environment, one wouldn't be able to do this, so I think I'll just start numbering the js versions so that the end user won't have this problem.

Categories

Resources