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.
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 –
- File IFrame.mxml – moveIFrame() is called on resize and move.
- source() is called to set the URL address
- visible() is used to show/hide the html
- File htmlInIFrame.mxml – preInit() is creating the object and appending it to wrapper html DOM.
- the code which uses the component iframe.
- 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 -
- the position of iframe needs to come from widget position in html page. Right now this is hard coded.
- The visibility needs to be controlled properly. For this visible property could be set as needed. Right now it is always visible.
- The size of html iframe could be a parameter coming from widget.
- The url could be parameter coming from widget so that a captivate author can put the URL he wants to see.
Please try it and let us know your comments. Get the files mentioned in this blog post –