June 19, 2009

Captivate Widgets Tutorial: Create your first Widget

Greetings, widget enthusiasts!! In this post I am going to help you create your first Captivate Widget in just a few steps. And by the end of this post you will be able to actually see your widget in Action inside Captivate.

Today I’ll demonstrate how you can create a simple ‘Print Slide’ widget. So, shall we get started? Launch Captivate and do a File->New->Widget in Flash. Choose Widget type -> Static and ActionScript Version-> ActionScript2.0. Hmm, now you see Flash (provided you have Flash installed on your machine) is launched and an untitled page is opened in it.

1. In Flash go to Window->Components and from User Interface select-drag a button and drop on the stage. Select the button and then go to Window->Component Inspector->Parameters Tab and then in the “label” field change the label to “Print”.

Now back on the Properties panel give the instance name of the button as “Print_btn”. 

2. Now select the edit area (or the stage) and change the Document ‘Size’ to 120X 50 in the Properties panel by selecting the document and then clciking on the Edit button. We make this change to ensure that the final widget consumes minimum real estate on the Captivate slide. The document size might differ according to the requirements.

3. Place the “Print” button in the middle of the document and align it appropriately horizontally and vertically so that it looks like this :

 

4. Now let’s look at the programming part. Select the frame of Layer1 and press F9. It opens up the Actions-Frame window with the inbuilt actionscript skeleton code.

Note that most of the code has been explained in the skeleton code itself.

5. Now we will modify the onEnterFrame Function to control the visibility of this widget. To do this look for ‘this.onEnterFrame=function()’. The skeleton code in this function sets the default behaviors for the widget in different modes- like on Cp stage, in the preview window, and in the widget Edit dialogue. We will make the print widget visible on ‘Stage’ and invisible in the ‘Edit’ dialogue. We will ignore the ‘Preview’ window and the last part of the skeleton code which is used to pass parameters from the widget to Captivate (we will deal with these sections in the next tutorial).

Now directly go inside the “this.onEnterFrame = function ()” and replace everything after the line ‘var wm:String = widgetMode;’ with the following code snippet:

if(wm == undefined)

wm = ‘Stage';

if (wm ==’Stage’) //Stage is the when the widget swf is on the slide.

   {

      Print_btn._visible = true;    

   }

if (wm == ‘Edit’)//Edit dialogue of the widget in Captivate

   {

     Print_btn._visible = false;

   }  

else

   {

     Print_btn._visible = true;

 

6. Also add the following code right after the previous snippet. This code actually prints the Captivate slide for you:

 

Print_btn.onRelease= function() {

var pj = new PrintJob();

var success = pj.start();

if(success)

     {

         Print_btn._visible = false;

         pj.addPage(0, {xMin:0,xMax:600,yMin:0,yMax:450}) ;

pj.send();

     }

   delete pj;

          movie_mc.cpCmndResume = 1;

          }

}

//On click “if(success)”, the print button is first made invisible, and the slide sent for printing. Page dimensions are one of the key parameters that have to be included in a print job. If you notice here we are taking the default size of the Captivate slide as 600×450 which is not so nice. But in the next widget tutorial post I am going to explain how we can inherit the slide size as parameters to make this print function more scalable.

7. Now Publish the swf as say “Print-Blog.swf” using “Ctrl+Entr”. If you wish to change the location where the published swf is saved- go to File->Publish Setting and in the Formats tab change the location. Now back in Captivate, insert the widget on your slide using Insert->Widget (if required, browse to the location where you saved the Print-Blog.swf). Preview the Captivate movie and at runtime click the “Print” button to Print the slide which contains this button.

Looks nice, right? Well, this is just the beginning. In my next post I shall tell you how you can pass parameters from the widget and do a whole bunch of amazing stuff.

,,

Posted by Sikandar Pradhan4:25 PM
  • Lieve Weymeis

    Thanks a lot for this clear tutorial! I was able to create ‘my’ first widget and am very proud about it.

  • http://www.captivate4.com Michael

    Excellent post!I’m happy to see that you have started this series on widgets. Hopefully it will encourage more people to develop some cool stuff ;o)/Michaelwww.captivate4.com

  • http://www.elearninglive.com Mark

    There’s an error in the code in the onEnterFrame. It should be “else” not “Else”.markwww.elearninglive.com

  • http://www.xpert.com.co Marlon Ceballos

    Can I recreate this example with ActionScript 3?

  • http://blogs.adobe.com/captivate Shameer Ayyappan

    @Mark: Thanks for pointing it out. The correction has been made

  • Sikandar

    @Marlon:You could try to modify the AS 3.0 skeleton code otherwise I shall be explaining AS 3.0 widgets in my forthcoming posts.

  • martin

    When going into file new, widget in flash is not highlighted and i cant use it. Why ?

  • Sikandar

    @Martin:That may be because you do not have flash installed in your machine.

  • Susith

    Can anyone help? I have a captivate project with 5 slides. At the 5th slide I want to insert a widget so that when the user clicks on it, it prints slides 2, 3 & 4 (without letting the user select, which slides they want to print). Can I tweak the widget explained on the tutotrial to do that? Many thanks

  • Brian Johnston

    Great post. Looking forward to the passing of the page parameters. Hopefully solve my problem of only getting the left half of the slide on the print out.

  • Saravana kumar

    Great Post.thanks a lot.

  • James

    Back in Captivate, I get a message saying “Not a valid widget”. Any hints?

    • Cameron

      I had the same problem until i discovered the menu option Insert -> Animation.

      Give it a try

  • Doug Desilets

    Does this work with Captivate 5 and AS3. That’s what I need.
    Thanks for your help!

    • http://blogs.adobe.com/captivate/ Allen Partridge

      Yes, it works with both Cp4 & Cp5

  • Tahiya

    REALLY??!! Isn’t anyone going to say it out loud? I will. Captivate doesn’t really work that well and requires so much behavioral and workaround activity on the part of its users that it is quite the painful thing to be stuck with for your job. Blerg!

    • http://blogs.adobe.com/captivate/ Allen Partridge

      Tahiya, that’s actually not a very common response. We’d love to know more about your concerns / issues. Please feel free to share any specific concerns or issues with us at wish-captivate (at) adobe.com

      • Tjarad

        Here is the thing about widgets. With all the seemingly great things that they promise to do, at the end of the day, everyone should know that static and interactive widgets do not report everything to LMS through SCORM or any other reporting mechanisms. You can’t see what a user types in any Text_Entry_Box or chooses from a drop down menu. So, they are not delivering what they are claimed to do. As an educator, I think it is a total wast of my time to have to up with solutions for something adobe should be doing!

        • Rod Ward

          I think that there is often a lot of misunderstanding about what widgets are or are not able to do. For example, Tjarad’s comment that “static and interactive widgets to not report everything to LMS through SCORM or any other reporting mechanisms”.

          Static widgets are obviously NOT going to report a score or anything else to an LMS because they’re…well…static. So they’re a bit like an image or a caption in Captivate. Would you expect an image to report something to your LMS. I doubt it. The confusion here sometimes arises because clever AS3 programmers can get even static widgets to do things that make them seem very interactive. For example you can have a Static Widget that acts as a button in Captivate. (See the Static Button Widget that ships with Captivate.) So the line gets a little blurry. But the fact holds true that there is no mechanism built into Captivate to accept a score from an interaction with a static widget.

          On the other hand, Interactive Widgets, and Question Widgets DO have the ability to be assigned a score in Captivate. So you can track Success or Failure of the user interaction for these objects, AND you can report that assigned score to an LMS via your quiz score. However, that DOESN’T mean you can easily report everything about what the user did with this interactive object (e.g. which specific text they typed into a field) or that your particular LMS would faithfully record that data. There are lots of variables here.

          Bottom line is: Widgets, whether they be static, interactive, or question widgets, fill a very valid use case in Captivate, and I for one am very happy that Adobe saw fit to provide us with this mechanism for extending the functionality of the app. The fact that they might not do EVERYTHING I would personally like them to do, doesn’t automatically make them a “total waste of time”.

          My wife doesn’t do everything I want either…but I’m still rather glad to have her around anyway for all the stuff she DOES do for me!

    • Agi

      Totally with you, Tahiya. Cap5 was a huge step forward but a lot of issues remained unsolved, and then Adobe tried to rip us off with the Cap 5.5 (which should be free since its a service pack essentially… and it still does not solve a lot of issues).

      • Gordon Harding

        I would have to agree. We have not gone to 5.5 but I do find Captivate frustrating to work with. Everything just seems hard to do. I have attended numerous webinars and have done a lot of the things they describe but I feel just bad after a day of working with it.

        Does anyone else have Captivate crash everytime you open DreamWeaver?

    • Tjarad

      I totally agree with Tahiya’s take on Captivate. Does anyone know of a better alternative?

    • Rod Ward

      @Tahiya: If you hate Captivate that much then you should find another tool that you like better. Life is too short to waste large chunks of it doing stuff you consider painful.

      On the other hand, as a long-time user of Captivate, Flash, Camtasia and a bunch of other e-learning tools, I can tell you quite candidly that there is NO tool out there that does everything everybody wants. Each one has both advantages and disadvantages.

      From my experiences, Captivate, even despite its quirks and annoying bugs, offers an excellent compromise between usability and power. It gives me excellent creative freedom of expression to create interactive e-learning, yet without requiring the steep learning curve that Flash does. To be sure, Flash can do more than Captivate, but not as quickly. Articulate or Lectora might be easier to use, but they’re not as flexible. Camtasia has great FMV capture, but falls down when you want interactivity.

      Overall, I keep coming back to Captivate time and time again. For the vast majority of my projects, it’s still the best option. Yes it has some bugs. Yes it has limitations. But that’s true of all software and all solutions.

      If it’s not what you want, go find your ideal tool, and then come back here and tell us what it does better than Captivate (as I have above). But be honest enough to also tell us where Captivate also wins.

      • Nick Stuart

        When the boss hands you Captivate and says “this is your job” you don’t have the option of saying “Hey, Lectora works so much better and is much less of a pain in the neck”. If you want to keep your job, you use Captivate.

        You’re right, life’s much to short to spend it struggling with Captivate, but then it all pays the same, and it’s good enough for government (and corporate) work.

    • LobsterGator

      Tahiya, 4 years after you published your post here I am in absolute agreement with you. Adobe is THE most frustrating program provider ever. Captivate 8 is horrendous! Just try to print a certificate – as if no one has ever thought of printing a certificate. Not the entire page, mind you – as the print widget is set to do – but to print JUST A CERTIFICATE. IMPOSSIBLE! Adobe is the reason I stay awake at night grinding my teeth. I requested Camtasia – my boss bought Captivate. UGH!

  • Tahiya

    5 only offers the AS3 choice when you go to create a new widget. That means I have to ignore the first step in the instructions and yet you say it works in 5 but when I’ve tried to place other AS2 widgets in 5 it claims they are not valid. ???

    • http://blogs.adobe.com/captivate/ Allen Partridge

      Tahiya, this article was written with regard to Captivate 4 projects (which still support the older AS2 technology) You’ll note that the publish date is June of 2009 (about a year before Captivate 5 was released.) If you’d like to learn more about creating widgets for Adobe Captivate 5, here are a bunch of other resources you can look at that will be much more relevant.

      Advanced Widget Creation in Adobe Captivate 5

      Basic Widget Creation in Adobe Captivate 5

      Creating Flex Based Widgets in Adobe Captivate 5

      • Phil

        What happens if you need to publish a project to anything below flash 9? You need to use captivate 4. …but then what if you need to publish a project to flash player 9 or above? use captivate 5 …so you need both installed to work with a varied mix of corporate network setups.

        eurgh. I don’t even know where to start with the problems of doing that.

  • Karen Benson

    New Captivate (v. 5) user… management wants to intersperse content with questions and answers. One or two slides of content, then a question slide. Also want to force the user to read the section again if they choose an incorrect answer… until they get it right, at which point in time they can move on. When I set “On success” to next slide and “On Last Attempt” to 1 try and jump to slide (wherever the content started), the user can still click and move on to the next slide. Have removed the “skip” as they want all questions done in order. Can’t find a widget that returns user to content repeatedly until the correct answer is selected. But there must be one? And I can’t insert the cute Continue and Back buttons that work so well on the other slides into the quiz slide… Any suggestions would be welcome!

  • TerryInLeesburg

    I have searched a lot for this exact widget for CP5.

    I do not mind coding my own, if I have great directions (like above).

    Could you either do another session with this exact widget in AS3, or post the changes needed to convert this to AS3 for CP5?

    Thanks
    Terry

  • Ml021469

    So, where’s the promised next post?

  • Wiez

    I have Captivate 5 and Flash 5.5. I am unable to follow the instructions listed in your step 5. Please help!

  • guobin0920

    Thank you!
    I hope to learn more about captivate the widget design and implementation,but I find that it is so hard for me to understand the code,is there some books that I can read?
    many thanks!

  • Keile

    I have been using Captivate 5 and as a new user I couldn’t find it easier to follow. My problem is with setting up the print function in Flash. I can’t find the “on enter frame function” I am not a programmer and the ActionScript is a little above my head. Can anyone help me? Perhaps it is different in this version of Captivate?

  • Andrew

    Why can Captivate not have a dedicated PRINT button to print slides (test results) without having to also have Flash or whatever and try to code it myself? I am not a geek in this area and just want to make up a simple test I can print the result of.

  • elbundy

    Hi,

    could you make that flash button as downloadable? Thanks.

  • mgmulet

    I have Adobe Flash CC and am trying my hand at making a widget, but Captivate won’t even open Flash CC? I found this post that says that I need Flash 6, is that still true for Adobe Captivate 7? Is this a Captivate thing or a network access to Flash CC problem? Can someone shed some light?

    • Hannie Rostamy

      i had the same problem so i started in flash from the first place.
      but first you choose action script 2.0 in the new page and do the rest simply.

  • Hannie Rostamy

    can’t find this.onEnterFrame=function() can someone tell me where is it???

    • Shriyansh Agnihotri

      If you are using AS3 then you need to listen the EnterFrame event first and then need to create a function to respond.

      something like this.

      this.addEventListener(Event.ENTER_FRAME, grow);

      function grow(e:Event):void
      {
      trace(“inside function”)
      }

  • Loading
  • Categories

  • Archives

  • Authors

  • Recent Comments

    • María Carmen Usoz: Ok. It´s a shame… We have to wait then. Thanks. C. Usoz
    • tannuts: Is i possible to change/delete the submit button on question slide and add your own custom button instead?
    • Shriyansh Agnihotri: Captivate 8.0.1.242 HTML5 content is not compatible with Firefox Browser for now. We will...
    • Shriyansh Agnihotri: Captivate 8.0.1.242 HTML5 content is not compatible with Firefox Browser for now. We will...
    • María Carmen Usoz: Hi Shriyansh. I just upgraded to the latest version of Adobe Captivate (8.0.1.242) and Firefox...
  • Captivate & eLearning Videos

    Subscribe to Adobe eLearning on YouTube.

    Check out the latest eLearning Videos on AdobeTV

Recently Approved