« New Lynda.com tutorial on Captivate 4 | Main | Captivate - Acrobat Integration »

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 600x450 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.

,,

Comments

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

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)

/Michael
www.captivate4.com

There's an error in the code in the onEnterFrame. It should be "else" not "Else".

mark
www.elearninglive.com

Can I recreate this example with ActionScript 3?

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

@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.

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

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

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

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.

Great Post.

thanks a lot.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


Copyright © 2009 Adobe Systems Incorporated. All rights reserved.
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).