youtube widget for Adobe Captivate 4


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 –


9 Responses

  1. I am trying to create a widget in flash but don’t seem to have that option in Captivate 4. I have downloaded flash but still don’t see it. It’s greyed out. What am I doing wrong?

  2. Rajeev,

    Thanks for posting the files. You’re a lifesaver!

    However, your directions seem to assume an awful lot, they are not clear, and, worst of all, they are not in chronological order. I could not follow them to create the files myself. I was wondering if you can come back and make these directions more user friendly? I’d like to learn how to make these kinds of widgets myself, and I would be very grateful if you could be the one to support this endeavor.

    Thanks again!

  3. Does anyone know what the copyright or intellectual property rules are with regards to including youtube videos in corporate/business developed courses?

  4. Is there a way to do this without building a widget? For some reason I can’t get to the build widget part. I’m on Windows 7 64…which is unsupported… Any assistance would be very appreciated.

Leave a reply