Initial File Upload Capability

This feature is only available in HTML5.

You can now create a file upload button, control what types of files can be uploaded, and send the files back to a server in the background, from within an IMO. You can also set clip segments to be selected if all file uploads have not yet completed, and to autoforward to a new clip when the file uploads are fully uploaded.  The button can be an image or a standard button, styled just like any other ClicFlic button. It does not look like the browser-specific file upload button we all know. Also, it can change appearance based on 'state' - based on whether there is a file ready to be uploaded.

File upload buttons are form elements, and so they need a submit button of some kind on the interaction to actually start the upload. Once the submit button is clicked, the IMO will perform whatever the click action of the submit button is, but will also silently upload the file totally in the background.

Accessing the Microphone or Camera directly:

The answer is: not yet. Web technology producers are certainly recognizing that the ability to access a microphone or video is important. Both Chrome and Firefox have implemented the ability to directly access the camera, microphone or video camcorder, if it's present and capture media either for playback within the browser or for sending back to a server. But even on these browsers the feature doesn't work on mobile platforms.

We are still several years away from a working standard for accessing media devices from within the web browser. There are a host of issues. I'm sure they will all be solved and the ability to easily capture audio/video from a web browser will have a profound effect on assessments.

File Upload to capture video/audio or other media

Currently, all browsers support file upload. On most modern mobile devices, the browser asks you if you want to directly access the camera, camcorder, or microphone. Then after you perform your capture, it places the captured file in the file upload slots. Workstations make you find the file yourself in the file system, and you have to create it totally separately.

We will certainly enhance the capability down the road as browsers improve. However, if you want to capture a short audio or video of a participant, as part of a pre-employment test, for instance, you can do this using this feature.

Integration

For integration with ClicFlic systems (ClicFlic and HR Avatar), the uploaded files are automatically captured and stored for retrieval in the online reporting system.For third party integrations, you must set the file upload URL at author time. The uploaded file is sent as an HTTP Post with Multipart/form-data content type. Parameters sent along with the file itself include: 

idn - the IMO number
eventid - the event identifier provided at runtime
ndseq - the ndseq number for the interaction
snseq - the snseq number of the file upload

Note that IMO always uploads files directly to a server, never through a hosting webpage. At runtime, you need to set the URL using the startup parameter: fupldurl

Authoring Notes

Note also that this feature is only available in HTML5 implementations. You can now create multiple clip segments in a clip and set one clip to be selected when the IMO is playing in flash, as well as if it's playing in HTML5 or HTML5 on mobile or HTML5 on non-mobile, or if all uploads have not completed. This gives you flexibility on how you handle situations where the browser is not compatible with file uploads and situations where the uploads have not completed. These settings are selected in Clip -> Clip Segment Advanced Settings -> 'select this clip segment if'  Remember that these settings are evaluated by the IMO in the same order as the clip segments appear in the clip, so you usually want to place the most restrictive clip segments at the top of the list.

Note that clips that are selected only when file uploads are not complete, should have an auto-forward attached to them. The IMO will execute the autoforward when the uploads have completed.

Reporting API V 2.0.23 Posted

The revised document is available, as always, at:
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf

The modifications allow you to control whether the IMO loads in flash or html5 at runtime using the new frcdeptyp parameter.  Additionally, a second new parameter was added which allows you to set the file upload url at runtime.  Both of these parameters override parameters set at author time.

Here's a summary of the changes to the document:


Added frcdeptyp input parameter. For hybrid deployments, this feature allows you to force the IMO to use flash (1) or HTMl5 (2), usually for testing purposes.  Also, added the fupldurl parameter so that the hosting webpage can pass the default file upload url to the IMO for HTML5 IMOs using the new File Upload Button interaction item type.

Video Interaction Item

While it's been available for some time in stealth mode, we've enhanced the capability to upload a video to an interaction item, rather than a clip and then play it on top of the clip.

As a clickable interaction item, this video can then be used as a submit button, or choice button, or whatever click action you want, including toggling play/pause on this video itself. It can also be animated to move across the screen, though that may be a little weird. The result XML is the same as for any clickable button.

This capability lets you inject small videos on top of your clips, either to achieve the interactivity you are looking for, or to enhance your multiple choice items with multiple video choices, or to allow you to reduce the bandwidth required to view a clip with the video presentation you are looking for.

Keep in mind that mobile devices introduce some complications for videos on top op video or audio clips.

• Mobile devices may not play any video or audio without a positive 'click' from the viewer. This means, you will need to insert a play/pause button to play the video (you can make the video itself the play/pause button, so clicking on the video makes it play. For video interaction items, ClicFlic will not create this button for you if it's needed (ClicFlic does do this on clips).
• Many mobile devices play only one video at a time (iPad). So, if you start a video interaction item on top of a video clip, the video clip will stop playing. 
• Some mobile devices play video outside of the web browser in it's own full screen player (iPhones, Opera on Android, Android browser). In this scenario, video interaction items will not work at all if the underlying clip also has a video.

So, clearly, if you plan on mobile devices, a video interaction item can be tricky and may not be the best solution.

To create a video interaction item, select 'Video Button' as the interaction item format for an interaction item. Then go to Main Menu -> Create -> Upload media to upload your videos.

How Browser Incompatibilities are Handled

Here's some info on what happens if a viewer's browser doesn't support Adobe Flash or HTML5. The answer depends on how an IMO is deployed. Recall that there are four deployment options:

• Flash Only
• HTML5 Only
• Hybrid Flash and HTML5, Default to Flash
• Hybrid Flash and HTML5, Default to HTML5

What Flash Version is needed?

In general, ClicFlic IMOs require Adobe Flash Player 10.0.0 or higher. This is to take advantage of many improvements made between flash players 9 and 10.  Strictly speaking, if you use .flv video and .mp3 audio, you only need version 9.0.0 or higher, and if you wish to use MP4 video, you need version 9.0.115 or higher.

What Browsers support HTML5?

HTML5 is supported by:
- Internet Explorer 9 or higher
- Firefox (any modern version)
- Chrome (any modern version)
- Safari (any modern version)
- Opera (any modern version)

Most web browsers constantly update themselves these days and they have frequent releases. Firefox, for instance, is currently on version 23 and Chrome is on version 29.

How does ClicFlic handle incompatible situations:
 
1. If the IMO is intended for Flash On;y - the IMO is usually embedded directly in your hosting webpage using <object> and <embed> tags, or using swfobject.js or some other means of embedding flash. In this scenario, you control what is presented to the user when they don't have flash at all or need to upgrade their flash player to version 10.0.0 or higher. On ClicFlic hosted deployments, the expressinstall.swf flash file is displayed if flash is installed but is an old version, and the following message is presented if no flash is installed:





This interactive media object cannot play at this time because Adobe Flash is not installed on this device. If your device supports Adobe Flash, please visit http://get.adobe.com/flashplayer/ to install Flash. In general, most laptop, notebook, and desktop computer web browsers support Flash. However, many mobile devices, such as Apple IOS devices (iPods, iPads and iPhones) and Android phones and tablets, do not support flash. In this case, please use a different device to access this website.




2. If the IMO is intended for HTML5 ONLY, the loading process is controlled by a ClicFlic script. If the browser is not HTML5 compatible, it shows this message:

BROWSER NOT COMPATIBLE. We cannot play this media because your web browser is not compatible with HTML5. To correct this, please try a different browser. Compatible web browsers include Internet Explorer 9 or above, Firefox, Chrome, Safari and Opera. Note that Opera Mini is not compatible.

3. If the IMO is a hybrid - meaning it plays in both Flash OR HTML5 depending on platform (either Flash or HTML5 can be designated as the default if both are available), the embed is performed by a ClicFlic script. In this case:

a. If no Flash is installed in the browser, or the IMO is set to default to HTML5:
- If the browser is HTML5 compatible, just use HTML5.
- If no HTML5 browser and no Flash, present this message:

BROWSER NOT COMPATIBLE. We cannot play this media because flash is not installed on your web browser and your web browser is not compatible with HTML5. Please try a different web browser if you have one available. Compatible web browsers include Internet Explorer 9 or above, Firefox, Chrome, Safari and Opera. Note that Opera Mini is not compatible. Alternatively, visit http://get.adobe.com/flashplayer/ to install the latest version of the Adobe Flash Player.

b. If Flash is installed, and is the default, or if there is no HTML5 browser, the system will play the flash version. If the installed flash is too early a version, the system will show a SWF file called expressinstall.swf to make it easy for the viewer to upgrade his or her flash installation.

Note that the messages above can be localized to any language, just like other standard text inside the IMO.

Timestamps Added to Result XML

To aid in troubleshooting and event reconstruction, we have added timestamps, to the event element, to all interaction and clip elements, and to all chronological history elements.

Each timestamp is added as an attribute (tmstmp) and is presented as the number of milliseconds since January 1, 1970, enabling them to be easily read and converted to dates by any XML parser.

Additionally, timestamps can be synchronized with server time by providing an input parameter to the IMO at load (reftime). This enables all timestamps to be relative to server time without worries about how time may be set on a user's computer.

Preloading Enhancements

We have enhanced the preloading capabilities of ClicFlic and provided authors more control over how and when media assets are preloaded. There are now several choices for preloading images, swf files, audio files, and video files for both clips and interactions.

Preloading now works in both Flash and HTML5 implementations. However, many mobile browsers and devices allow for only limited preloading of audios and videos.

Option A - Preload Clip

A clip can be designated to perform an IMO-wide preload in the Clip -> Advanced Settings.  When this clip loads the IMO will attempt to preload media for all clips and interactions. You can:

• Indicate whether all images only, images and audio, or images, audio, and video files will be preloaded.  
• Indicate that only designated clips and interactions should be preloaded, or all clips and interactions in the entire IMO. Clips and interactions are 'designated' for preload in their advanced settings.
• Indicate that clip auto-forward settings be delayed until after all either all items have completed pre-loading, or a configurable maximum time has elapsed (whichever happens first).
• Update the value of a state variable with the number of number of items remaining to complete preloading. You can then display this in an interaction attached to the preload clip to show the user the progress of preloading as the number counts down to zero. 
• Set the maximum wait time for preloading, after which the clip will autoforward if set to do so.

You can make several other settings in Clip-Advanced, such as the maximum number of items to preload, to give you control how the IMO behaves for this type of preloading.

Option B - Preload the next clip while the previous clip is playing.

For applications that are very sequential in nature, each clip can designate one other clip to be preloaded while that clip is playing. This is useful in eliminating any delay time in starting the next clip. The clip to be preloaded can be designated in the Clip -> Advanced Settings.

Option C - Preload the next clip when a specific interaction is presented.

Like option B, except an interaction can designate a clip to be preloaded when the interaction is presented. This can be used at the end of a clip, when an interaction appears, to preload the next clip while the user is reviewing the content of the interaction.

Option D - Globally preload designated clip and interaction images only at load time

A global preload occurs when the IMO initially loads before the first clip is presented.  If there is a preload clip defined (that is, a clip set per Option A above), there is no global preloading.  When the IMO initially loads, it will look for all clips and interactions that have been designated for preloading and conduct the preload. Only images are preloaded during a global preload. Video and audio files are not preloaded.
 

About Preloading

Where possible, preloading is conducted by downloading 100% of the media resource into the IMO and then using that resource directly for presentation when the resource is needed.  For certain implementations, however, this is not always possible for audio and video resources.

Flash - will download 100% of all resources.

HTML5 - Desktop (non-mobile)
    - All browsers except IE9 will download 100% of all resources. IE 10 and above does this.
    - IE9 will use the 'preload' function on the video or audio HTML tag, which usually preloads only enough of an audio or video to play it through without stopping.

HTML5 - (Mobile) Many (but not all) mobile browsers allow you to download all resources, but very few allow the downloaded resource to be used directly for playback. This means the browser will use it's own cache for playback, but browsers use different caching techniques and processes on different mobile devices.

         
 Example

I will create an IMO that performs preloading (Option A) and place a link to it here shortly. 

New Reporting API Document V 2.0.22

This version is now the current version and is available at:
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf


Changes are listed at the top of the document:

Version 2.0.22

Added tmstmp (time stamp) attribute to the result XML for all interaction and clip elements. Additionally, added capability to insert a reference time (milliseconds from midnight January 1, 1970) as an optional parameter (reftime), allowing all timestamps to be synchronized with server time, instead of client system time, which is unpredictable and may not be accurate). This value can be useful for reconstruction/tracing of actual events. Also added tmstmp attribute to event element to indicate time of initial IMO load.

 

Embedding Active External SWFs

In some cases, you may have a complex SWF that you want to embed into a ClicFlic IMO that collects data from the user that you want to store via the ClicFlic IMO reporting system. You can now doing this using the new SWF Component Interaction Item format. 

Note that these external SWFs are linked to via a URL you must provide, rather than a embedded. This gives you more flexibility in maintaining the external SWF.

Also, external SWF interaction items only work in the Flash implementation of ClicFlic. They do not work and will be ignored by the HTML5 implementation.

Simply create a SWF Component interaction item in the interaction you wish to use, then go to advanced settings and provide the URL to the external SWF.

In order to pass data to the IMO SWF, you must do several things when creating your external SWF:

1. Allow for cross-scripting by placing the line:

Security.allowDomain(  "*" );

in your top level constructor.

2. Create a public variable  responseData in your top-level object with a line like this:

public var responseData:Object;

This object should have four defined fields, which you can update as appropriate. These are:

- responseText: String - 'This is the Response Text',
- responseCode: integer - Great than 0 means OK.
- errorCode: integer - 0 means no error
- errorText: String - any additional information concerning an error.

3. When you want to send data, like a click message or user-entered data, you must dispatch a MouseEvent.CLICK event using the loaderInfo.sharedEvents field of your top-level object, like this:

e = new MouseEvent( MouseEvent.CLICK );
loaderInfo.sharedEvents.dispatchEvent( e );

When the ClicFlic IMO receives this event, it will read the responseData variable and extract the necessary data from this object. The responseText field will be included within the responseXML for this object.

Slider Interactions

Great news, you can now create Slider Interaction Items in ClicFlic. These interactions comprise a new type of form element that you can add to any interaction to collect data in place of a text input box, a combo box, or a radio button.

Sliders can be incremental (defined increments) or continuous. They can also be vertical or horizontal. Finally, you can have them automatically update a state variable value as they are changed, if you want. 

The basic approach is to create two interaction items within an interaction. The first interaction item is the slider bar, or background. This should be a button format with an image uploaded into it for the slider bar. This will also define the dynamic range of the slider. The position of the slider background also defines the position of the slider in the player. Note that the slider background must be positioned within the player, not within a panel.

Next, you create a 'Slider Thumb' interaction item, which is the thumb icon the user will drag across the slider. Slider thumbs can also have a mouseover/mousedown image. Once you create this interaction item, upload the thumb that you want to use. Then go to advanced settings. There you can associate this slider thumb with it's slider background interaction item, and you also define all necessary parameters for this slider, such as horizontal/vertical, the numeric value at the top or left-most end, the increment size, and a number of increments. You also define whether the slider is continuous or incremental.

Here's an example IMO with a couple sliders. Keep in mind that YOU CONTROL THE LOOK AND FEEL COMPLETELY. These are for functional demo purposes only.

http://www.clicflic.com/st/d.xhtml?a=TU4SIEhRbxg*&r=0.9276569097668675&s=thax

Using Fonts with ClicFlic

We have implemented several new changes that enable you to take more control over what fonts are used within the IMO.

In the past, you could choose one font family from a set of three pre-defined font families that contain at least one font that is built in to most systems:

- Verdana, Arial, Helvetica, Sans Serif
- Times New Roman, Times, Serif
- Courier

These could only be selected at the global level and all text would be in these fonts using fonts found on the viewer's computer. If you wanted, Verdana and Times New Roman fonts could be embedded in the SWF File to give full control over these fonts and not rely on the viewer's computer. However, your choice was limited to only these fonts.

In addition to these three standard font families, you can now define up to 3 custom font-family strings, and use these custom font families at both the global, control bar, captions, and interaction-item level. This lets you choose from up to 6 different font families (3 predefined, plus 3 custom), individually, for most text strings displayed in the IMO.

To ensure fonts you define are available on the viewer's system, you can upload font files that will be embedded in compiled flash IMOs and will be included as linked assets for HTML5 deployments (using the CSS @font-face rule).

Simple Example - Two Custom Fonts

http://www.clicflic.com/st/d.xhtml?a=9bW6eeSHojU*&r=0.1962474931232232&s=thax

How To Do It

Custom Font Families are defined in IMO -> Main Settings -> Format Settings. You define custom font families the same way you define them in CSS, such as "Calibri, 'New Century Schoolbook', 'Tahoma'. Define one in each of the 'Custom Font Family' text boxes.  When you save, these families will show up in the font family selector pull-down menu that appears everywhere you can select a font for a text string such as an interaction item.

The IMO -> Main Settings -> Format Settings area is also where you can upload font files and provide descriptive information for these uploaded files, such as Font Family name, Font Weight, etc. .When uploading Font Files, keep in mind that different font files are needed for Flash and for different web browsers (HTML5).

The following fonts are compatible with Flash:

• TrueType fonts (*.ttf);
• OpenType fonts (*.otf);

For HTML5, the current status is:

• TTF - Works in most browsers except IE and iPhone.
• EOT - IE only.
• WOFF - Compressed, emerging standard.
• SVG - iPhone/iPad. 

To create an IMO that only works in flash, you only need one file for each font - ttf or otf.

To create an IMO that works across virtually all HTML browsers, you need four files, one of each listed above.


Step 1: Collect your font files.

The best way to get font files in the formats you want is to use font squirrel. You can upload your own fonts or use fonts they make available, then they will create that font in all the files you need and give you sample CSS code that will come in very handy when you are configuring on ClicFlic.

The following file types are allowed:  .ttf, .otf, .svg, .woff, and .eot

You can embed any number of font files, but remember that it will increase your SWF file size.

Step 2: Upload your font files.

You can upload as many font files as you need to in the IMO Main Settings -> Format Settings.

Note that the system will make your font files all lowercase on the system. So keep this in mind for the next step.


Step 3: Configure your uploaded fonts on ClicFlic

The most challenging thing about embedding a font is creating the embedded font info string in Main Settings -> Format Settings. There are three slots and you can use any of them. The format is:

Name;Family;Weight;Style;Filename1;Filename2;Filename3;Filename4;Filename5; ...  ..repeat  ...

- Name is not used, it's just a nice way to name your font.
- Family is very important. This is the name of the font family that will be used by both Flash and HTML5 browsers. When you define custom fonts in the next step, you will need to use the family name here. If you are using font squirrel, use value they provide here, because the SVG font format, required for ipads, requires this as an input and is compiled with it up front. If you change the family name provided by font squirrel, the svg file may not work.
- Weight is usually "normal" unless this is a bold version, then set it to "bold"
- Style is usually "normal" unless this is an italic version, then set it to "italic"
- Each filename is listed here next. Be sure to place the flash-compatible file in the filename1 slot. The others can go in any slot.

If you have three versions of a font - say normal, bold, and italic, you should repeat the process above on the same line. The Family name should stay the same for all versions, but the weight, style, and filenames will change.

Finally, always include ALL the semicolons in each line, even if there is nothing to put in the slot.

An example for the Broadway font used in the example IMO is:

Broadway;broadwayreg;;;broadway-webfont.ttf;broadway-webfont.eot;broadway-webfont.woff;broadway-webfont.svg;;;

Step 4: Add your embedded fonts to the Custom Font Family slots on ClicFlic

To use a font you've configured, you need to place it in one of the Custom Font Family slots. To do this, you write font family strings the same way you do in CSS. That is, the highest priority font is on the left, then lower priority, fallback fonts appear to the right, separated by commas.

Example Custom Font Family:   broadway, Arial, Helvetica, Sans Serif

This Family String says to the IMO:  look for Verdana, if not found, look for Arial, if not found, look for Helvetica, etc.

So, you should place your embedded font family name first in this list, then use an appropriate fallback.

Note that font families that have spaces or that begin with a number should be enclosed in single quotes:

'Times New Roman', Arial, Helvetica, Sans Serif

or

'20DB_Regular', Arial, Helvetica

This is very important. 

Bold & Italic Text with Custom Fonts

Bold and Italic text present several problems for custom fonts, including different treatment within Flash and HTML5. As a result, the IMOs behave as follows, for custom fonts only:

Flash:  Except in preview mode (within the authoring system), the bold and italic checkboxes are ignored for custom fonts.

HTML5: the bold and italic checkboxes are ignored for custom fonts.

Explanation:

The bold and italic checkboxes do not work in flash for embedded fonts. Within the authoring system, however, in preview mode, the fonts are not embedded and are 'pulled' from the author's computer, so the checkboxes do work there which makes it possible to position text exactly within interactions.

In HTML5,  web browsers will try to embolden or italicize a custom font in their own way, which messes up the positioning and dimensions calculations. this can easily cause unintended results, like extra line breaks in buttons that you didn't want. So, for custom fonts, these settings are ignored.

Best Practice:

1. Treat bold or italic versions of a custom font as a separate custom font. Yes, you only get to define three custom fonts.  So you have to be strategic.

2. If a font is bold or italic, check the checkboxes in the authoring system when using it, to ensure that preview modes and positioners work correctly. When defining the font in a custom font slot, always follow its bold name with its non-bold name, delimited by a comma.

3. Make sure the custom font is installed on your computer (authors computer) so that you can see what it will look like in preview or positioning mode.

So, if you have FONTA and want a bold version of FONTA, you must allocate two custom font slots, such as:

1. FONTA
2. FONTABOLD, FONTA

Next, upload the FONTA and FONTABOLD font files.

Next, when using FONTABOLD, check the bold checkboxes in the authoring system. Since the fonts are not embedded in flash in preview or positioner mode, the IMO look to the host system for the font, which must be installed on the author's computer to work properly. It will probably find FONTA and then make it bold because the checkbox is checked. It does not do this when the font is embedded (ie IMO is deployed and accessed outside of the authoring system).


Be Careful
Embedding font files is an advanced topic. Flash, and different HTML web browsers use different file types and these must be included here. Please consult ClicFlic for assistance before entering anything here. Note also that a name entered here must also be entered as the first font in a Custom Font Family, above for it to be useful.









Other notes:

1. Unless an uploaded font is installed on your system and uses the same exact family name, the Flash Preview and Interaction Previews and Positioners which are both Flash, will not show text in the correct font. HTML5 Preview should show the fonts if they are configured correctly. This means you should install any fonts you upload on your own system for authoring. Only compiled flash IMO objects will show the fonts.

Here's some useful information on troubleshooting Font problems on HTML5:

Troubleshooting Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

Fonts not showing in any browser

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

Fonts not loading in iPhone or iPad

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

Fonts not loading in Firefox

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

Fonts not loading in IE

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

Fonts not loading in IE9

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.