youtube,adobe captivate,widgets

Here is a step by step guide to create a widget. While this is a basic widget it will highlight concepts of the Adobe Captivate 4 widget framework. In future posts we will slowly move to more complex widgets covering other aspects of this framework –

1. Decide user interface of your widget – The user interface should allow users to specify the youtube video url. It will have a label and text input box.
2. Open Adobe Captivate 4. Select menu File>New>Widget in Flash… It will open a dialog. Select “Static” and “Action Script 2.0”. Say ok. Adobe Flash will open with action script template for static widget in action script 2.0
3. Inside Flash select Windows>Components>User interface section. Insert the components ‘Label’ and ‘Text Input’. Name them “myLabel” and “youtubeUrl”. We will set the visibility of these controls such that they are only visible inside the “Widget Parameters” tab of widget dialog. This is the tab where users will be entering the values. Look inside onEnterFrame function how we have handled the visibility. We make _visible field = true only when widgetMode is ‘Edit’
4. Set up the data exchange facility for widget and Captivate. We will use few variables so that value of youtube url could be passed back and forth from Captivate project and youtube widget. We will change getInspectorParameters(), setInspectorParameters() and setParameters(). We have added one line code for getting and setting from the textbox.
5. Adding the core functionality. Refer to the code at this post where action script code is given for reference. Copy all of them except last statement which loads the player. Paste them at the beginning of the action script window. The statement ytPlayerLoader.loadClip loads the video. We will change this to load video from the user input. This has been moved to onenterframe function where we get the youtubeurl from captivate movie, parse them in the format which is accepted by the API and call loadClip.
6. Publish this in a Flash version greater than 8. The swf file you got is your widget.
7. Here is a Captivate movie showing how to use it

This is just to show the capabilities of Adobe Captivate widgets framework. There might be few modifications required before it can be used in real life projects. Please feel free to play around with it and share your findings on the changes done to this.

Source files discussed in this post –

• Source(.fla) file – the Adobe Flash file containing source code for the widget
• Widget(.swf) file – the published widget file which can be used inside Adobe Captivate 4

.