Flex based widgets

Have you ever used Adobe Captivate widgets? Widgets can enhance the type of content you can create with Adobe Captivate. You can leverage the complete capabilities of Adobe Flash via widgets. Once created, widgets can be used any number of times just like any other Captivate object. This really helps in creating engaging rapid elearning content. Captivate ships with a number of useful widgets. Captivate widgets are basically swf files which follow certain rules. One rule being (the blog is about this rule), the widget swf should register certain callbacks via External Interface. These callbacks should be made in the first frame of the swf.

Most of the widgets created for Captivate are Adobe Flash based widgets. Creating widgets using Adobe Flex/Flash builder is a little tricky. But once you get to know that, creating really powerful widgets takes no time. With Flex, you can leverage the vast set of inbuilt components which are powered by Flex framework to create rich and engaging Captivate widgets.

If you had ever tried creating a Captivate widget in Flex, I guess most of you wouldn’t have succeeded. You might have tried adding the External Interface callbacks either in applicationComplete or creationComplete handlers of the Application class in Flex. This method doesn’t work because Flex creates the Application in its second frame, where as Captivate expects the callbacks to be added in the first frame.

So, here we are providing a hassle free way to create Flex based widgets for Captivate. Follow these four simple steps and you can create your Flex based Captivate widgets in no time.

Step 1: Include the two ActionScript files provided below, in your Flex project.

Step 2: In your main mxml file, Change the mxml application start tag from

<s:Application  to  <cp_widget:CPWidgetApplicationBase xmlns:cp_widget="*"

And the end tag from

</s:Application>  to  </cp_widget:CPWidgetApplicationBase>

Step 3: Open CPWidgetSystemManagerBase.as and set the properties marked in TO BE SET BY WIDGET DEVELOPER section, according to your requirement.

• mWaitForSnapshot:
  • Set this to true, if you are overriding IsReadyForSnapShot function in your main application, else keep it false

• mWidgetType :
  • To create a static widget, set mWidgetType to 0
  • To create an interactive widget, set mWidgetType to 1
  • To create a question widget, set mWidgetType to 2

• m_EditModeWidth:
  • If you want a specific Edit Mode width, set this parameter, else set it to -1

• m_EditModeHeight
  • If you want a specific Edit Mode height, set this parameter, else set it to -1

Step 4: Override the widget specific methods provided in CPWidgetApplicationBase.as file in your main mxml file. For example, if you are trying to create a static widget, add these methods in your main mxml file and build the logic.

• override public function getInspectorParameters():Object
• override public function setInspectorParameters(inParam:Object):void
• override public function setParameters(inParam:Object):void
• override public function cpSetValue(inVariable:String, inValue):void
• override public function IsReadyForSnapShot():Boolean

Overriding all the functions is not a must. Choose which functionality you want in your widget and proceed accordingly.

That’s it!! It’s not difficult at all.

Optionally, if you want to mute further calls from Captivate, which might be required when you do state changes in Flex, call setCanDelegateCall(false) in your application class. When you want to unmute, call setCanDelegateCall(true).

If you are using mx:application, then you need to do these changes in CPWidgetApplicationBase.as: Uncomment, Import mx.core.Application; and comment out import spark.components.Application;

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.

Provided below are sample flex based widgets for Adobe Captivate 5 created in Flex along with the source.

MyFlexWidget is a static widget, which displays whatever is entered into it in widget properties.

MyInteractiveWidget is an interactive widget; you can select which button is the correct one among the given two, and that one will act as the correct answer

MyQuestionWidget is a question widget; which has similar functionality as that of the interactive widget.

Try them for yourself!

Flex & Widgets

Update: To compile the samples, you need to update the class path.To update the path, Goto Project > Properties > Flex Build Path > Source Path > Edit.

Just update the path to the following.
[Adobe Captivate Installation Directory]\ActionScript\export\as3

[Adobe Captivate Installation Directory] is the directory where captivate is installed. Typically it will be C:\Program Files\Adobe\Adobe Captivate 5