You are here

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