HTML5 Documentation

SmartBuilder HTML5 Converter logo

SmartBuilder outputs Flash content by default.  You can download the SmartBuilder content in a special format, and use our HTML5 Converter Tool to change content to HTML.  The HTML5 Converter Tool is installed on your PC.  Please use the links below for instructions on how to install the Converter, how to use it, and which features are supported.

HTML5 Converter Installation Instructions

      1. Click the download button below.

        SmartBuilder HTML5 Converter
             version 1.4.0

      2. If you are upgrading from a previous version, please uninstall the old version.  You can find the uninstaller in the Start > SmartBuilder Tools folder.
        uninstaller location
      3. Save the file to your desktop.
      4. Extract the zip file by right clicking and choosing Extract All...
        Extract All...
      5. Double Click on the inst.exe file.
        Double Click setup.exe
      6. If prompted, click Run.
        Click Run
      7. If you are upgrading from a previous version, click Yes when prompted to overwrite existing files.
        overwrite
      8. Click Next and follow the instructions to install the SmartBuilder HTML5 Converter on your computer.
        Click Next and follow the instructions
      9. Now find the SmartBuilder HTML5 Converter in your Start Menu, and run the program.
        Find the Converter in your Start menu
      10. The Converter will open and be ready to use!
        The HTML5 Converter is ready to use!
      11. Learn how to use the Converter here - HTML5 Converter Usage Instructions.

      How to use the SmartBuilder HTML5 Converter

      1. Select the Published lesson in SmartBuilder that you want to convert and click Download.
        Download the lesson
      2. Choose SB3 source package and click the Download button
        choose SB3 source package
      3. Save the SB3 file to your desktop.  You can rename if you'd like.
      4. Open the SmartBuilder HTML5 Converter.  If you don't have it installed yet, get it from here - SmartBuilder HTML5 Installation Instructions.
        Open the converter
      5. Click Browse to find the SB3 file and select it.  You can also choose a SCORM option if your lesson has SCORM calls.
        Click Browse
      6. Click Generate HTML5 to create the HTML5 package.
      7. Once the process has finished, you can view the lesson or open the folder to view all the files, which can be uploaded to the web.
        You can view the lesson or open the folder
      8. If you have a SCORM compliant lesson, you can select all the files in the folder and zip it, then upload it to your LMS.
        Select all the files, right-click and add to compressed

        Do not be alarmed if you get this message - it simply means that one or more of the automatically generated folders is empty, which is a common occurance.
        empty folders are okay

      View the supported Features and notes here - HTML5 Support by Feature.

      HTML5 Design Tips

      Contents

      Important Note
      Test Early. Test on Real Devices.
      Browsers
      Scaling
      SWFs
      Buttons
      Text
      Text + Other Objects
      Transitions
      Screengrabs: Graphic Effects, Scalable Shapes, Shapes, Tables, etc
      Autoplay (Audio and Video) on mobile
      Video
      RadioButton and CheckBox objects
      Menu
      Printing

      Important Note

      HTML5 is different from Flash output in a number of ways. While the Flash Player provides a consistent environment across all supported platforms, certain aspects of how HTML5 is rendered are determined by the browser. This means that some things in your HTML5 output may vary from SmartBuilder's Flash authoring environment, and may also vary depending on the learner's operating system and browser. For example, text and default buttons may look different on iOS Safari than they will on Windows 7 Chrome (or Firefox).

      HTML5 differs from Flash

      HTML5 differs across browsers

       

      Test Early. Test on Real Devices.

      Since the SmartBuilder authoring environment uses the Flash Player, what you see when you author content, preview the lesson, or view the published lesson will all be the same.  However, when you download and convert the lesson to HTML5, some objects may appear a little differently.  So don't assume that previewing the Flash version is good enough.

      While this page will help you design your content so that the HTML5 differences are not problematic, it is still important to test on all target devices and browsers after creating your first few lessons.  If you develop many lessons, and then start thinking about HTML5, you may have to go back to all of those lessons to make adjustments, which can be tedious.

       

      Browsers

      HTML5 is supported by Chrome, Firefox, Safari and Internet Explorer 9+.

      Some learners are still using Internet Explorer 8, which does not support HTML5.  If you must support learners using IE8, you will need to deliver content in the Flash output.

      Microsoft will be dropping support for IE8, which means that most IE8 users will have to upgrade to a modern browser, and thus will be able to access HTML5 content.

       

      Scaling

      HTML5 lessons do not scale on computers, so you'll want to design your lessons to work well for the expected screen sizes of your learners. 1000 x 519 is a safe bet for content that you plan to deliver on desktops and tablets, but knowing your audience is important.  For more information, see this blog post: http://www.smartbuilder.com/blog/3-handy-tips-for-better-mobile-learning/

      HTML5 content does not scale on desktops

      On mobile devices, SmartBuilder's HTML5 lessons will scale to match the width of the device, even if the device is rotated. Most likely you will want to design your content for horizontal viewing. Notice how the lesson is scaling in the images below. If the lesson were taller, the learner would have to scroll up and down when holding their device horizontally.

      Keep in mind the aspect ratio varies across different devices. So if you design for an iPad, you may get some vertical scrolling when it is viewed on Android tablets (which are usually more elongated).

      content matches the width of the device

       

        SWFs

        Do not use SWFs. They are not supported by HTML5.  If you are using SWFs for graphical elements (e.g., graphics, backgrounds, Scalable Shapes, button states) you can usually take a screengrab of the item and bring it into SmartBuilder as graphic (PNG or JPG). See the Screengrab section below. If you are using SWFs for animation or ActionScript, you can try to rebuild the functionality directly in SmartBuilder.

        do not use SWF files

         

        Buttons

        All of the built-in SmartBuilder button styles will default to the browser-defined button style.

        Default browser buttons are one of the objects that vary the most between different browsers and operating systems.  If you want a consistent look and feel for your lesson, make sure to use custom button styles and upload your own graphics. Remember, SWFs will not work.

        Built-in styles will use the browser-default

        Note, if you define only some of the images of a custom style, you will get bevel effects when you mouse over and click on your button.

        If you choose a custom style, but do not specify any images (sometimes used to create a transparent button), the button will use the browser default style.  So if you want to create a transparent button, you may wish to upload a transparent PNG image and use that as the image for all button states.

        Click to watch a video about this topic (opens in new window)

         

        Text

        Fonts - Try to only use Arial. HTML5 only uses device fonts (those installed on the learner's computer/device). Arial is nearly ubiquitous, which means that the end learner will end up seeing something very similar to what you design. If you use a more specialized font, and the learner does not have that font installed, they will default to Arial - possibly drastically changing the experience.  For special situations where you want to guarantee that text using a unique font looks the same in HTML5, you can always take a screengrab of your text and bring it in as a graphic (see the Screengrab section below).

        Shifting - Since each browser will render the fonts a little differently, it is important to leave extra room in your text boxes.

        Horizontally - Make sure that you leave enough room for the text to expand a little horizontally, otherwise it may wrap onto the next line:

        leave room for your text to grow

        Vertically - The line spacing will also vary across browsers. The more text that you have in a text object will magnify this problem.

        Sometimes it is a good idea to break your text into multiple text objects (Object Menu > Break Apart). As long as you give enough horizontal space for those objects (see above), this should work out well.

        Click to watch a video about this topic (opens in new window)

         

        Sizing - If you are designing for tablets, keep in mind that you probably want to make your text fairly large, so that it can be read on a tablet (and extra big if you expect your learners to be using phones). 16 pt font for tablets is about the smallest you want to use. For more information check out this link - http://www.smartbuilder.com/blog/3-handy-tips-for-better-mobile-learning/ (item 2)

         

        Text + Other Objects

        Hotspots and Drop Down lists - Since text is a little variable between the Flash and the HTML5 version, and even between the HTML5 version viewed on different browsers, it is not recommended to tightly integrate text with other objects (like Drop Down lists, Hotspots, Graphics etc).

        Click to watch a video about this topic (opens in new window)

         

        Drag and Drop - If you have dragable text, the considerations above are even more important. If your text drops onto a new line, or grows too big, it might not fit in the drop zone designed for it. Leave extra room in your Dragable text to allow it to grow, or adjust the size of your Drop Zones to accommodate the text.

        If you are running low on space, you can always take a screengrab of the text, bring it in as an image, and use the image of text as your Drag object.

        Make sure to test in several environments to ensure that your Drag and Drops work!

        drag items sizing is important

         

        Transitions

        SmartBuilder show and hide transitions do not convert to the HTML5 output. If you are building a new lesson, it is best not to use these.

         

        Screengrabs: Graphic Effects, Scalable Shapes, Shapes, Tables, etc

        Graphic Effects (such as Drop Shadows or Bevels) placed on objects will not show up in the HTML5 output. Similarly, SWF-based widgets, such as the Table object and Scalable Shape object will not convert to HTML5. However, you can often take a screengrab of the object(s) in SmartBuilder, and then bring in that screengrab as an image. The same method can be used for Shape objects that vary slightly, or text that you really want to lock down.

        Click to watch a video about this topic (opens in new window)

         

        More on Shapes - Be cautious of size differences and empty areas in Lines. Chevrons are not currently supported.

         

        Autoplay (Audio and Video) on mobile

        Audio objects, Timeline objects (with audio), and Video objects have some limitations on mobile devices. Apple does not want mobile users to be forced to download audio or video without their consent, and Android has since adopted the same restriction.

        So, the learner MUST click on the Audio or Video object DIRECTLY to get it to play. You can set Audio/Video to autoplay, which will work on a desktop machine, but it will not autoplay on mobile. You also cannot use separate play button (or any action) to get the Audio/Video to play. You MUST place the Audio/Video object on the page where the learner will have access to it.

        Click to watch a video about this topic (opens in new window)

         

        Usually, if you place the audio or video object in an obvious place, the learner will see the play button and click on it.  If you are worried they will not, and if your learners are going to be using desktops and mobile devices, you may wish to turn off the autoplay functionality for everyone and provide instructions to click on the object. Or have instructions that say something to the effect of "If the video does not start automatically, please press the play icon".

        Note: Once the learner clicks directly on the Video or Audio or Timeline initially, and the file starts loading, you can use your own buttons to pause and play the media.  Just make sure that you do not allow these buttons to be clicked before the media has started loading.

         

        Video

        If you are using FLV video in your lessons already, the HTML5 Converter will automatically convert it to MP4 video format, so you don't need to change anything. If you have uploaded an MP4 video (but changed the file extension to FLV) or if you are using the FLV URL property to point to an MP4 file, you are also fine, and don't need to change anything.

        If you are using the FLV URL property to point to an FLV video, you will need to update your video and URL to an MP4, or incorporate the video into your lesson so the HTML5 Converter can get to it.

        If you are just building your lesson and are unsure which format to use, we recommend using MP4 and the FLV URL property (which can point to MP4s), or changing the file extension to ".flv" so that it can be uploaded into SmartBuilder (no need to convert it).  More about videos here.

        Click to watch a video about this topic (opens in new window)

         

        RadioButton and CheckBox objects

        Appearance - Just like buttons and text, the graphical elements used by the RadioButton and CheckBox objects is supplied by the browser. This means that the exact appearance will differ from browser to browser. Remember to test your lessons on a variety of browsers, operating systems, and devices to catch any unexpected results early in your development.

        Clickable Area - When using RadioButton and CheckBox objects, keep in mind the learner cannot click on the text to select an item in the HTML5 version. They must click on the RadioButton or CheckBox icon to make their selection.

        Many people live with the learners having to click directly on the icons, but there are some workarounds that you can employ if you want the text to be clickable.

        With the RadioButton, you can use a hotspot over the text and an action for each choice to change the selection. Keep in mind that the text may shift a little when converted to HTML5 (see Text sections above). There is no easy way to do this with the CheckBox object (unless you want to use variables for each option choice).  You can balance the desire for clickable text against the time it will take to implement this.

        Or you can choose not use the RadioButton or CheckBox objects at all, and instead use graphics, hotspots, and actions to create your own RadioButton-esque functionality. This will give you the most control over the look and feel of your objects, but is more time-consuming to implement.

        Click to watch a video about this topic (opens in new window)

         

        Placement - In the Flash output the RadioButton and CheckBox icon will be centered vertically on the text. In the HTML5 output the icon will be level with the top of the text. If you are using Checks or Xs as item-level feedback keep this movement in mind. Most people continue to center their feedback on the text, and do not worry about the icon being in a different place.

        vertical alignment of icons for RBs and CBs

         

        Menu

        The Menu with Topics and Pages object is not supported in the HTML5 output, and if you wish to use a menu, you need to use the simpler Menu with Pages object. If you need to store and retrieve the state of the Menu with Pages between sessions, you can use the Array object to do this (similar to bookmarking). Since this is a relatively complex procedure, it is best to contact support, and schedule a time to look at this together.

         

        Printing

        Printing Displays (Display Set > printVisibleDisplay) is not supported in the HTML5 output. Instead, you can use Page Controller > printPage to print the entire page. If necessary, you can set up an action to hide all the elements on the page before using Page Controller > printPage, or navigate to a page that has only the objects intended to be printed.

         

          HTML5 Support by Feature

            Flash HTML5 Tips and Notes
          Basic Objects
          Text checkmark checkmark Tip 1: Use Arial font.
          Explanation: Arial is installed on most operating systems and will have the least risk of variation across platforms and browsers.
          Tip 2: Leave a little bit of extra space below large text blocks.
          Explanation: Line spacing and word wrapping may vary across browsers.
          Graphic checkmark checkmark  
          PNG checkmark checkmark  
          JPG checkmark checkmark  
          GIF checkmark checkmark  
          SWF checkmark   Tip 1: Do not use SWFs in your lessons. Use PNG, JPG, or GIF instead.
          Tip 2: Also make sure to swap out SWF that are used for custom buttons, scalable shapes or master page backgrounds.
          Explanation: Many mobile devices do not support Flash, so we do not include SWFs in the HTML5 output.
          Audio checkmark checkmark Tip: Do not include designs that require autoplay such as audio used for feedback sound effects.
          Explanation: Apple does not allow audio or video to autoplay on iPads. The reason given for this is that they want to prevent excess cellular data charges for streaming that is not approved by the user.
          MP3 checkmark checkmark  
          OGG   checkmark Note: This format of audio is automatically generated by the conversion tool for use in browsers that don't support mp3.
          Video checkmark checkmark Tip 1: Do not include designs that require video autoplay since Apple does not allow this.
          Tip 2: If your videos use the "FLV URL" property to point to remotely hosted video, you will need to convert the hosted video to MP4. MP4 can also be used in the Flash version of lessons.
          Explanation: Browsers do not support FLV delivered through HTML5. FLV Video that is imported into SmartBuilder will be converted automatically to a supported format (OGG, MP4) by the converter tool, but remotely hosted video must be converted by you. If you don't already have a tool to convert your FLVs to MP4s, you can use the SmartBuilder converter to convert FLVs to MP4s and then upload the MP4s to a server.
          Tip 3: Do not use the “Lock at Original Size” property.
          Explanation: In order to determine the video size when Lock at Original Size is selected, the video must first load. Apple does not allow this and instead just defaults the video to 300 x 150 pixels.
          FLV checkmark    
          MP4 checkmark checkmark Note: This format of video is automatically generated by the conversion tool.
          OGG   checkmark Note: This format of video is automatically generated by the conversion tool.
          Shapes      
          Common checkmark checkmark  
          Rounded squares checkmark checkmark  
          Symbols checkmark checkmark  
          Lines and pointers checkmark checkmark Note: Arrows and Lines are supported. Be cautious of size differences and empty areas in Lines. Chevrons are not currently supported.
          Captions checkmark checkmark  
          Response Objects
          Check box checkmark checkmark  
          Radio button checkmark checkmark  
          Button checkmark checkmark Tip 1: Use the “Custom” button style in the properties panel to ensure consistency across browsers
          Tip 2: Do not use SWFs for custom buttons. Use PNG, JPG or GIF instead.
          Tip 3: If you use non-custom button styles (e.g. XP, Halo, Glass Poll), add some extra padding for button labels since some browsers, especially Safari, need extra space to accommodate rounded corners
          Hotspot checkmark checkmark Tip: Do not use SWFs for custom Hotspots. Use PNG, JPG or GIF instead.
          Dropdown list checkmark checkmark  
          Input text checkmark checkmark  
          Drag and drop checkmark checkmark Tip: Use large graphics or text with large font for drag objects.
          Explanation: Dragging with a finger is less precise than a mouse.
          Display Objects
          Timer checkmark checkmark  
          Timeline checkmark checkmark Tip: Do not include designs that require timeline/audio autoplay.
          Explanation: Apple does not allow autoplay of media. The learner will need to click a play button to start the timeline. This play button will appear automatically wherever you place the timeline object.
          Percent Tracker checkmark checkmark  
          Streaming SWF checkmark    
          More objects
          RTMP Streaming Video checkmark    
          Cookie Object checkmark checkmark  
          HTML Frame checkmark    
          Icon Tracker Object checkmark    
          iFrame Object checkmark checkmark  
          Menu with Pages checkmark checkmark  
          Scalable Shapes checkmark    
          Search Object checkmark    
          Volume Controller Object checkmark    
          E-mail Object checkmark    Tip: For simple cases, you can use this method to set up mailto links.
          URL Data Object checkmark    
          Google Analytics Object checkmark    
          Menu with Topics and Pages checkmark    
          Tab Object checkmark    
          SWF Messenger checkmark    
          MultiState button checkmark    
          Grouping Objects
          Display set checkmark checkmark  
          Question set checkmark checkmark  
          Master pages
          Master page content checkmark checkmark  
          Background checkmark checkmark Tip: Do not use SWF for the master page background. Use PNG, JPG or GIF instead.
          Page navigator checkmark checkmark Tip: Consider using larger navigation buttons that are easy to touch with a finger.
          Fixed size pages checkmark checkmark  
          Scaling pages checkmark    
          Properties
          Labels checkmark checkmark  
          Fills checkmark checkmark  
          Borders checkmark checkmark  
          Graphic effects (shadows, bevels, etc.) checkmark checkmark Note: Shadow and Shadow Offset are implemented, others are not.
          Object specific properties checkmark checkmark  
          Transitions checkmark    
          Interactivity
          Action list logic checkmark checkmark  
          Flow logic checkmark checkmark  
          Hyperlinks      
          To Web content checkmark checkmark  
          To assets bundled by SmartBuilder checkmark checkmark  
          Variables      
          Local variables checkmark checkmark  
          Global variables checkmark checkmark  
          LMS
          SCORM tracking and reporting checkmark checkmark  
          Translation
          Output to target languages checkmark checkmark  
          Consolidate languages to a single lesson checkmark  checkmark  
          Browsers
          IE 9 and above checkmark checkmark  
          Firefox 16 and above checkmark checkmark  
          Chrome 22 and above checkmark checkmark  
          Safari 6 and above   checkmark  

           

          HTML5 Release Notes

          Here is a list of known issues with the HTML5 Converter Tool.  If you run into these issues, rest assured that we're working on it.

          To add to this list, please report an issue using the Feedback link in the bottom of the Converter (we will update the list manually with highly visible bugs).

          Feedback

          You can check back here to see if the issue has been resolved.

           

          Known Issues

          • HTML5 lessons on PCs (Windows or Mac) do not scale.  On mobile devices lessons will scale to the width of the device.
          • Hotspots with 100 percent transparency can still be seen faintly. 769
          • Radio Buttons are anchored to the top in HTML5 but are centered in Flash. 142
          • Radio Buttons and Check Box objects use the browser's default style, and cannot be customized.  749
          • Videos have black bars above and below them as a result of the Video Controller only showing when moused over. 154
          • Radio Buttons and Check Boxes - you must click on the graphic, not the label. 376
          • Pages with many objects may take a few seconds to load. 6364
          • Shadow and Shadow Offset Graphic Effects differ in HTML5 output and Flash output. Shadow has the shadow stronger on the right and bottom and tighter to the object. Shadow offset is much tighter to the shape of the object.

           

          Release 1.4.0

          Key enhancements

          • Support for AICC (SCORM has been supported for a while)
          • Consolidated SCORM language packaging from translated content
          • Larger radio buttons and check boxes for easier touching on tablets
          • URL Data object now HTML5 compliant
          • A new “Array” object - allows authors to create and manage lists. For example, to create “back button” type functionality for randomized/branching content.
          • Limelight streaming media player now HTML5 compliant
          • Default HTML5 output file name changed from axon_player.html to index.html
          • SCORM > setScore sends both raw score and scaled score (v2004) with a single action

           

          Key bug fixes

          • IFrame scaling fixed (made the same on Mobile and Desktop)
          • Input text works with number pad
          • Input text > getNumber ignores extra spaces
          • Radio Button horizontal setting works better (word wrap is closer to Flash version)
          • Cookie object returns empty string if there is no cookie
          • Page Controller > getGlobalVariables fixed
          • SCORM > getSuspendData fixed
          • SCORM 1.2 Manifest no longer shows error messages
          • Number variables rounded to hundredths place (e.g., 3.14 instead of 3.14159265359)

           

          Release 1.3.0

          • 508 / screenreader support in HTML5 output.
          • Bulleted list line breaks are more consistent across browsers. 858
          • Question Sets with multiple attempts fixed.  881
          • Drag and Drop Alignment, Reset Incorrect, and Reset All methods cleaned up.  866
          • Drag and Drop Move All to Correct method fixed to no longer automatically show feedback. 896
          • Menu's Allow Skip Ahead functionality fixed.  867
          • Radio Buttons can be reset to initial state (setSelectedIndex = 0). 885
          • Graphics brought in from PowerPoint import no longer invisible in HTML5 output.  890

           

          Release 1.2.2
          • Improved page scaling on mobile devices.
          • Improved the line objects to make them appear much closer to their Flash counterparts.
          • Responses set up in False nodes of the Flow Chart behave as expected.
          • SCORM calls fired when a lesson is first launched (such as retrieving a bookmark) no longer send requests before the lesson has initialized.
          • Bullets take the color from the text that they accompany.
          • The Menu object no longer goes directly to the page when using the "setSelectedIndex" method (useful for showing checkmarks in the menu when using bookmarks.
          • Text hyperlinks working as normal now.
          • Radiobutton and checkbox groups no longer show extra line spaces as html line breaks <br>.

           

          Release 1.2.0

          • IFrame supported!
          • Error report generated when unsupported objects are detected in the lesson! - http://youtu.be/tdC5mqaVHso
          • Scrolling text works on Firefox.
          • Bullets no longer always default to black.
          • Input Text default text now displays appropriately.
          • Conversion process can now be cancelled.

             

            Release 1.1.0-1

            • Cookie object added - can now save and retrieve cookies.  735
            • Certain lessons were missing images when converted, this has been fixed.  616
            • "Input text > contains" method now works in the Flow Chart in Chrome. 654
            • Drag and Drop object improved so that drag items can be placed anywhere on a drop zone. 766
            • Flow Chart no longer has visibility complications when later nodes are set to Start Visible. 768
            • Flow Chart looping bug fixed.  774
            • Flow Charts with a deleted Question Set at the beginning no longer breaks the action engine.  773
            • Flow Chart condition with CB answers no longer goes to correct feedback too often.  754
            • Responses stored in the Else node of  Flow Chart no longer fire when you go down another path.  748
            • Responses stored in the Flow Chart no longer cause the Flow Chart to hang.  763
            • Can click through Text objects to the objects below (hotspots, buttons, etc).  761
            • Timer objects stops at 0 when counting down.  726, 745
            • getLastDropZone now reports accurately when item is dropped outside a drop zone.  760
            • Fixes to the HTML5 Converter interface to allow View Lesson to work with SCORM.  757, 734
            • Bulleted text no longer defaults to black.  742, 755