3 Replies Latest reply on Apr 21, 2014 2:59 PM by sinious

    Publishing and uploading HTML5 canvas

    pjokkenroll

      Hello! Sorry if I'm posting this in the wrong thread. I'm also sorry for the silly questions, after fooling around in Flash quite a lot it has become clear to me that I am an idiot.

       

      A couple of years ago I designed a homepage using Flash CS3, because I wanted it to have a good deal of animation on it. After a lot of intense pain it worked out all right. Now I want to remake it in HTML5, so that iOS-users can view it too. So I made a little demo thing in Flash CC, converted it to HTML5 canvas, used the code snippets and finally got it right. The "test movie in browser" worked fine. However, for reasons I will never understand, my iPad won't show up in the "test movie on device via USB" window, even though Finder (I work on an iMac) says it is connected.

       

      Anyways, I went ahead and uploaded the .html and.js file to my web hotel, but when I load the page in the browser it turns up completely white, both on the regular Mac and the iPad. I have searched the mighty internet for solutions, but to no avail. Now I just want to turn off the lights, curl up under my desk and sob. Can anyone amongst the kind souls out there please enlighten me?

       

       

      Pjokk

        • 1. Re: Publishing and uploading HTML5 canvas
          sinious Most Valuable Participant

          I can't say I'm very familiar with the Debug over USB for HTML5 Canvas projects but do note that this isn't something you really need to do with a web project. I believe Safari is not as picky as other browsers (Chrome) and will let you simply run the HTML file you generate directly off your filesystem to test. So simply publish, open the folder you publish to and double click the file to run it in Safari. There's no real difference besides where debugging happens.

           

          That said, what browser you use matters a bit. Google Chrome may not let you load files off your own filesystem will will break all sorts of XHR requests (AJAX). So either preview in Safari or Firefox or you'll be jumping through some hoops.

           

          Additionally you're moving from one type of coding to another. Although you have the power of a framework behind you (CreateJS.*), your still need to debug. Being in the browser means things get a bit more difficult. You should get used to your developer tools, e.g. Safari Inspector. If you see any errors, posting those here might help but they should also guide you toward a possible solution. It may be as simple as "I can't find a script I need", which you can easily fix yourself.

           

          Other browsers have their own different developer tools with JavaScript debuggers, consoles, DOM, etc. You'll need to get acclimated with JavaScript to (mostly) some small degree in these waters.

          1 person found this helpful
          • 2. Re: Publishing and uploading HTML5 canvas
            pjokkenroll Level 1

            Thank you for your reply. I'll check out Safari Inspector, I was not familiar with that one.

             

            What confuses me is why the published .html file works fine when I open it locally (Safari), but when I upload the same file (and the .js file) to my web server and type in the corresponding URL to visit the site, it turns up white?

             

            Thanks again.

            • 3. Re: Publishing and uploading HTML5 canvas
              sinious Most Valuable Participant

              If you have an URL it's much easier to diagnose. Without that it's attempting to fix a car in a remote garage we can't see or access.

               

              If it loads fine locally but not online then the first thing to do is always make sure your file paths are correct. You can do that a number of ways. One is to use the inspectors console which will be littered with 404 errors to files it cannot find. Otherwise you can view-source on your page, find the JavaScript and CSS files it should be including (which are typically hyperlinks) and click on them. If you get any 404 errors, you know the path is wrong. Then fix the paths.

               

              Otherwise we'll need more info than it's simply not working. Also checking on your desktop Mac is completely different than an iPhone or iPad so please keep those separate in your mind. What works on a Mac does not necessarily work on iOS.

              1 person found this helpful