Adding Html5 to Web Page

This is a short tutorial explaining how to add Html5 animation content generated by KoolMoves or KoolShow to a web page.

The first step is to visit File > Export Settings. Non-advanced users are advised to use the default settings.

The second step is to generate the code that you will copy/paste to your existing web page. Select File > Export/Publish Movie > As Html5 Code. In the section called "1. Add to web page", there are two blocks of code: code that is to be placed between the <head> and </head> tags and code to be placed where you want the canvas object to display on the page.

<script type="text/javascript"> try{ document.createElement('canvas').getContext('2d'); } catch(e){ alert('HTML5 Canvas is not supported by this browser version.'); } </script> <noscript>Your browser does not support JavaScript</noscript> <script type="text/javascript" src="easeljs.min.js"></script> <script type="text/javascript" src="tweenx.min.js"></script> <script type="text/javascript" src="movieclip.min.js"></script> <script type="text/javascript" src="kooljs.min.js"></script> <script type="text/javascript" src="replace_with_name_of_animation.js"></script>   <div class="canvasHolder" style="max-width:784px; max-height:500px; width:100%"> <canvas id="canvas1" width="784" height="500" style="width:100%"></canvas> </div>

Your existing Html can be edited using Notepad, Notepad++ (an excellent free source code editor), or your favorite web page editor. Don't use a word processing application like Word, because it will add special characters which will invalidate the Html.

The web page loads the javascript and css files listed in the block of code shown below:

These files absolutely must be in the same relative location on your server as shown here, i.e., in the same folder as the web page or in a sub-folder. If you elected to create a separate javascript file for your animation, you will see a file named replace_with_name_of_animation.js. It is preferrable to edit this file name and also edit the file to have the same name -- any name of your choice. Don't include spaces in the name.

Most problems occur in this section. Files that are referenced here weren't properly copied to the server -- they were copied to the wrong folder or weren't copied at all.

A complete listing of all the files and their relative file paths are shown at File > Export/Publish Movie > As Html5 Code in the section called " 2. Files that need to be uploaded to the server by ftp":

replace_with_name_of_animation.js easeljs.min.js tweenx.min.js movieclip.min.js kooljs.min.js

All the files are found in the same folder as the animation project (base folder shown at the bottom of Export as Html5 code dialog), Html web page, or in a sub-folder if you elected to put the javascript files in a sub-folder. The core files can also be found in the application's Javascripts for Html folder.

To diagnose issues with missing or misplaced files, use File > Export/Publish Movie > Confirm Required Files on Internet.

Use https://validator.w3.org/ or a similar Html validator to test the web page for Html errors. Gross errors can result in the animation not showing.

There is no universal browser support for all video and audio formats. For example, IE only supports MP4 but Opera doesn't support MP4. IE doesn't support wav audio. Consequently, it is important to include multiple formats for each video and audio object. If you see a blank video display or a video display saying error, you probably are missing one or more formats in the video content setup. To remedy the situation, double-click on the video object on the stage in KoolMoves or KoolShow to get its properties and edit the Content property.