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.

Captivate widgets,widget tutorial,captivate widget documentation