Category Archives: HTML5/JS

Adobe’s Edge-y HTML5 Development Tools

With Flash being increasingly dismissed for many web projects, Adobe needed an answer to replace at least some of that functionality with a tool that used HTML/JS…resulting in the Edge suite of tools.

Here’s Wikipedia’s entry on the Edge tools. I’m not sure the overview paragraph is terribly accurate, but it’s a good reference page overall, outside Adobe’s site.

That said, Flash isn’t entirely out of the game. With CreateJS integrated, Flash can output to HTML5 Canvas, creating solid images, charts, and animations. I consider this the beginning of the Flash IDE transformation. Until it moves further, however, the Edge tools provide a lot of the otherwise missing HTML functionality.

Continue reading

Captivate: How to view the HTML5 version anywhere

When you publish an Adobe Captivate project to both SWF and HTML5, three HTML pages are written to the output folder.

Captivate uses the project title as the filenames for the SWF-version of the published files. Say your project name is “MyProject”… In this case:

  • The SWF output will be titled ‘MyProject.swf’ and its parent HTML file will be titled ‘MyProject.htm”
  • The HTML output is called from the ‘index.html’ or ‘index_SCORM.html’ file (depending on whether or not SCORM is enabled for the project).
  • The third HTML file will be called ‘multiscreen.html’.

The multiscreen.html file involves some trickery which evaluates the browser and/or system that is accessing the project, then displays what it believes to be the appropriate version (SWF or HTML5) for the device. If you publish boimsmanifest-multiscreenth versions to a SCORM .zip package, the ‘imsmanifest.xml’ file within that package specifies the ‘multisceeen.html’ as the primary launch file; so when the user launches the lesson from the LMS, the ‘multiscreen’ file launches first, the trickery is invoked, and the proper version is presented.

If you always want the HTML5 version to  appear, you can edit that manifest file and change this line:

<resource identifier=”SCO_ID1_RES” type=”webcontent” href=”multiscreen.html” adlcp:scormtype=”sco”>

to be:

<resource identifier=”SCO_ID1_RES” type=”webcontent” href=”index_SCORM.html” adlcp:scormtype=”sco”>

However (!), be aware that not all desktop browsers work well with Captivate’s HTML5 output, so be warned this may cause issues for non-mobile users.

When I’m developing Captivate content to be delivered to both desktop and mobile devices, I rely on the manifest and multiscreen files to do their job. When testing published output, I upload the unzipped files to my staging server…and when doing quick tests, I directly load the index_SCORM.html (or just index.html) file using Chrome to do a quick evaluation of how well the mobile output will perform.

Of course, once further along, testing is done on a variety of devices for true evaluation…

So in sum, to quickly check Captivate’s HTML output on your desktop, call the ‘index’ files directly.