Get access to premium assets for free. Be the first to hear from Adobe.

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 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 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 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]ActionScriptexportas3

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

18 Responses

  1. Upon further review: I extracted the ZIP files and imported them to the Flash Builder workspace and EACH project generates two errors!

    Someone linked to a file on their D drive:
    “unable to open ‘D:RoboDemohulkdevextrasxplatmul[INSTALLDIR]ActionScriptexportas3’ ”

    When can we get an updated ZIP file?

    • … unfortunately, using this library in Captivate 6 causes a nasty runtime error in the onEnterFrame function:

      TypeError: Error
      #1034: Type Coercion failed: cannot convert
      mx.managers.systemClasses::ChildManager@728b041 to mx.core.IUIComponent.

      mx.managers::SystemManager/get application()


      • Hi Todd,

        You need to do this in cpSetValue in your main mxml file. I’m writing the function for you.

        override public function cpSetValue(inVariable:String, inValue):void
        if(inVariable == 'movieHandle')
        var movieHandle:CPMovieHandle = inValue as CPMovieHandle;
        var movieProps:CPMovieProperties = movieHandle.getMovieProps();
        var eventHandle:IEventDispatcher = movieProps.eventDispatcher;
        eventHandle.addEventListener(CPSlideEnterEvent.CPSLIDEENTEREVENT, slideEnterCallBack);

  2. Thanks Ravi,
    Also, this is not the question of Widget in Flex, if you can answer.

    I have a captivate Movie in Flex, I am facing a problem while loading that movie and going to a particular slide. Looks like I have a timer issue, Flex loads the movie and ties to goes to slide, but Captivate has not loaded yet.
    Is there a way, I can register for captivate movie loaded event in Flex App..

    Thanks again for all the help

    • Hi Mark,

      There is no such event.

      Captivate has optimized its placement of slides in such a way that the experience is smooth if you continue from the beginning of the swf.

      I assume you are loading captivate swf in a Flex swf. I can suggest a workaround for you. To know whether a slide is loaded or not, all you have to do is divide captivate main time line’s currentFrame by 2. So, if you want to jump to say 30th slide, check if captivateSwf.currentFrame/2 == 30 (Here captivateSwf is the handle to loaded captivate swf.)

      Hope this helps,

  3. Hi Ravi,

    is this method still workable when using captivate 5.5 and Flex 4.5.1.
    The compiled widgets work perfectly but when i try to compile them myself, they dont load up. Captivate isn’t showing the invalid widget message, so i guess they are valid. Only problem is the widget properties panel stays blank when added to the captivate project.

    Could you please send some suggestions to

    Kind regards,


  4. Is this blog still active?
    I’ve tried out the sample Question Widget fla, but althought the widget shows up in Captivate, it stays totally blank.
    Having changed the library path, I at first got an error: can’t find the libs. Then I created an empty libs folder in the project, after which the fla compiles, but shows absolutely nothing.

    What am I doing wrong here?

  5. I tried Captivate 6.0 and Flash Builder 4.6 with Flex SDK 4.6 without success. Widget displays it’s configuration parameters but don’t work when placed on slide.
    I changed Flex SDK to 3.6A and changed all spark objects to mx. And it works.

Leave a reply