How do you insert website url to your courses? Insert a button and associate “Open URL or file” in success action and point to the url. When user clicks the button a browser opens up the URL. But this breaks the continuity of course and many might want a better experience.

Would it be better if you can open a website inside captivate course without relying on a browser window opening up. One of the challenges is inability of flash to render html files. There are few solutions available in various blog posts which uses the fact that the browser can display html. And swf can communicate with html using ExternalInterface API to control the visibility, movement and resizing. 

For captivate courses it would mean asking the html wrapper to show the URLs using iframes. This also needs changes to html wrapper to add the code which reacts to communication with captivate swf. These changes can be minimized as mentioned in this post -. It relies on inline javascript function calls from swf. It also means that a standalone/projector captivate swf cannot use this mechanism as it would need a html wrapper.  In this post I am using Flex to achieve this because most of the examples were in flex and with the workaround suggested by Ravi in his recent post – it is possible to create flex widgets for captivate. 

Download the flex project at the end of this post and import it in Adobe Flash builder 4 to see the code. This just acts as a proof of concept and shows the capability of captivate widget framework and flex to plug a missing functionality. It contains bare minimum code needed for a static captivate widget and to show the URL. Explanation of important code snippets –

1. File IFrame.mxml – moveIFrame() is called on resize and move.
2. source() is called to set the URL address
3. visible() is used to show/hide the html
4. File htmlInIFrame.mxml – preInit() is creating the object and appending it to wrapper html DOM.
5. the code which uses the component iframe.
6. File CPWidgetSystemManagerBase.as – mWidgetType:int = 0 to make it a static widget. 

As mentioned in Ravi blog post on how to create a flex widget – perform the following step – “In case you are having issues with getting the flex widget to work, you need to merge the Flex framework into the swf. To do so, Goto Project > Properties > Flex Build Path > Library Path > Select the Flex SDK and choose ‘Merged into Code’ as the linkage type.” 

Publish it to get the output swf or download the swf from the link given at the end of this post. And insert it as widget in a Adobe Captivate Project and publish it. Run the generated html. You can see the html file displayed inline in captivate swf. The code as it is just explains the concept and needs extra work done to make it as a usable widget. For a professional widget here are some of the points I can think –

1. the position of iframe needs to come from widget position in html page. Right now this is hard coded.
2. The visibility needs to be controlled properly. For this visible property could be set as needed. Right now it is always visible.
3. The size of html iframe could be a parameter coming from widget.
4. The url could be parameter coming from widget so that a captivate author can put the URL he wants to see.

 Below is a snapshot of a URL being displayed in captivate course. 

Please try it and let us know your comments. Get the files mentioned in this blog post –

1. The flex project(created in Adobe Flash builder 4) – rename the file extn from zip to fxp
2. The widget swf – can be used with adobe captivate 5