While working with one of our partners, we found that the HTML5 code used a poor practice for iterating over all the elements of an Array object in javascript using a for - in loop, such that, if another script extended the Array object, such as by attaching a contains or a custom sorting method, the iteration process would fail.
All Array object iterations using this method have been replaced with a more bulletproof method.
Additionally, a full review of all conditional statements has been conducted in the HTML5 code to prevent unexpected results when using === or !== vs using == or != comparison operators. There are a few subtle conditions that have caused unexpected results.
We recommend that you re-deploy your IMOs to take advantage of these changes.
ClicFlic Logo
ClicFlic
Saturday, November 2, 2013
Thursday, October 24, 2013
Reporting API 2.0.27 Posted
This update adds a new attribute called 'src' to the clip elements in the chronological history section of the result XML. The src parameter is intended to indicate what action caused the IMO to change to a particular clip, whether it be a user click on an interaction, or a timeout, or a keyboard action, or something else. The purpose is to make it easier to accurately reconstruct the pathway a user took through the IMO, both for troubleshooting and analysis purposes. Please see Appendix A of the guide for the format of this attribute.
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf
Wednesday, October 16, 2013
Bug Fix for Sequential IMOs using Ordered Clips
A bug was detected in which interactions that had both an interaction item that auto-submits itself after a short time (a few seconds) AND a "Next" button, in which both interaction items are 'go to next clip in order' could sometimes skip a clip (and the interactions on the skipped clip would not be displayed) if the next button was click just before the autosubmitting interaction item fired. In essence, the action of going to the next clip in order would happen twice.
For sequential assessments, like Multiple choice tests or SJT items, this scenario can occur. The result can be a loss of data.
The fix had to do with making sure that all autosubmit action timers connected with the current clip are cancelled when the clip is changed.
This change is now live and IMOs that may have this potential problem should be recompile and redeployed.
For sequential assessments, like Multiple choice tests or SJT items, this scenario can occur. The result can be a loss of data.
The fix had to do with making sure that all autosubmit action timers connected with the current clip are cancelled when the clip is changed.
This change is now live and IMOs that may have this potential problem should be recompile and redeployed.
Tuesday, October 15, 2013
Reporting API V 2.0.26 Released, Integration Enhancement
We have modified the sethistfcn which is used to receive result XML from the IMO by adding a second parameter to the function when it is called. The second parameter is an object. Currently, the object has only one field, but we expect to add more in the future. The single field is pctcomplt, which provides a number between 0.0 and 100.0 and indicates the calculated percent complete of the IMO.
Integrations can use this variable in a variety of ways, and avoid having to parse the Result XML just to retrieve it.
Existing implementations that do not accept two parameters should be fine and continue to function, as javascript will ignore the second parameter in this cases.
The revised API document is available at:
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf
Integrations can use this variable in a variety of ways, and avoid having to parse the Result XML just to retrieve it.
Existing implementations that do not accept two parameters should be fine and continue to function, as javascript will ignore the second parameter in this cases.
The revised API document is available at:
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf
Wednesday, October 2, 2013
Capturing IMO Log Messages - for troubleshooting
One of the problems with complex client-side programs is troubleshooting issues when there's a problem. You can show the error messages to the user, but that is usually frustrating for them and not typically helpful in locating the problem.
Based on a great suggestion from one of our clients, we have modified the IMOs to provide log messages to the javascript status function defined at runtime (statusfcn parameter). Implementations can then modify the status function however they choose to capture messages and, potentially, send them back to the server.
When set up for messages, the status function receives an object that has several fields:
status=msg (always set to 'msg' for messages)
eventid - the eventid provided at runtime for this imo.
level - 0=error, 1=warning, 2=info
text - the actual message.
You can capture these and then send the log messages back to a server URL using XMLHttpRequest. That way, when a user complains about a problem in the future, you'll have more information available for troubleshooting.
Here's a simple example of a status function you could include on your page:
function imoStatusFcn( o ) {
var status=o.status;
if( status==='msg' )
{
var msg = o.text;
var level = o.level;
var eid= o.eventid;
if( (msg) && (eid) )
sendLogMessage( msg, level, eid);
}
}
Based on a great suggestion from one of our clients, we have modified the IMOs to provide log messages to the javascript status function defined at runtime (statusfcn parameter). Implementations can then modify the status function however they choose to capture messages and, potentially, send them back to the server.
When set up for messages, the status function receives an object that has several fields:
status=msg (always set to 'msg' for messages)
eventid - the eventid provided at runtime for this imo.
level - 0=error, 1=warning, 2=info
text - the actual message.
You can capture these and then send the log messages back to a server URL using XMLHttpRequest. That way, when a user complains about a problem in the future, you'll have more information available for troubleshooting.
Here's a simple example of a status function you could include on your page:
function imoStatusFcn( o ) {
var status=o.status;
if( status==='msg' )
{
var msg = o.text;
var level = o.level;
var eid= o.eventid;
if( (msg) && (eid) )
sendLogMessage( msg, level, eid);
}
}
Tuesday, October 1, 2013
Reporting API 2.0.24 Posted
Yes, we have been busy here. Version 2.0.24 is now out and available at
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf
Changes introduced by this modification are:
Expanded the statusfcn functionality to include log-style messages from the IMO. Messages are now sent with different levels (error, warning, and info). Using the statusfcn, hosting webpages can now capture these messages, for better error-handling, or for sending back to the server.
Added two new IMO parameters that allow you to completely control what a user sees when they do not have a web browser that is compatible with the IMO. This allows you to more effectively control the user experience when the IMO cannot load.
http://cfmedia.clicflic.com/web/misc/api/ClicFlic_API_current.pdf
Changes introduced by this modification are:
Expanded the statusfcn functionality to include log-style messages from the IMO. Messages are now sent with different levels (error, warning, and info). Using the statusfcn, hosting webpages can now capture these messages, for better error-handling, or for sending back to the server.
Added two new IMO parameters that allow you to completely control what a user sees when they do not have a web browser that is compatible with the IMO. This allows you to more effectively control the user experience when the IMO cannot load.
Saturday, September 28, 2013
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.
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.
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.
Tuesday, September 17, 2013
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.
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.
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.
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:
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.
- Flash Only
- HTML5 Only
- Hybrid Flash and HTML5, Default to Flash
- Hybrid Flash and HTML5, Default to HTML5
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.
Saturday, September 14, 2013
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.
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:
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.
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.
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:
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.
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
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
Subscribe to:
Posts (Atom)