February 17, 2009

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 –


Posted by Rajeev Kumar5:22 PM
  • Michele K.

    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?

  • cb

    Hi Rajeev,This is a great add-on to captivate. I was wondering how hard this would be to convert to AS3?

  • Lisa Manning

    I am trying to follow these steps and I get an error message that the SWF file is not a valid widget when I try to import it into Captivate.

  • Lisa

    I am trying to follow these steps and I get an error message that the SWF file is not a valid widget when I try to import it into Captivate.

  • Lisa

    Is there a way to have the player continue within Captivate so that the entire movie plays?

  • Jenn

    Thanks for the widget! It is a huge help to me!

  • EJ


    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!

  • Sherry Fralic

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

  • Curious

    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.

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • Dev Agrawal_1987: Any solution for import 3D models into InDesign?
    • Anil Pan: I am a programmer. What tool(s) can I use to create an ebook that will allow me to embed code (Java, python...
    • zaman seo: Adobe photoshop, Is Awesome , Nice post and wonderful photoshop brushes collection with details describe...
    • Mahmud hasan: I agree with you Allen, as I actually have continually tried to bring humor into learning things I...
    • Su: I would like to change the play button position in the middle of forward and backward button. How can i do that?
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV