In a previous post I showed you how to set up WidgetFactory in Flash. But now we will see how to create a widget in Flash.
In this post we’ll make a simple Static Widget. When I mean simple, I mean just that. Captivate will recognise it as a widget and that’s about all.
Note: The information in this post is taken heavily from the Widget Basics eSeminar. For the sake of ease, it has been formatted into a blog post that you can refer to on the fly. This process will also work with Flash versions CS3 and CS4, while the eSeminar was done with some new CS5 features.
Step 1: Open Flash
Step 2: Create an ActionScript 3.0 Flash Document: A widget is essentially an swf. So we need something to create that swf. That’s what a Flash Document does.
You can create an ActionScript 3.0 Flash Document by choosing that option from the splash screen…
…or by going to File > New, selecting the ActionScript 3.0 Flash Document option, and clicking OK.
You now have a blank Flash Document. Save it by going to File > Save and call it something like: MyFirstWidget.
Step 3: Create an ActionScript file: If you’ve used the Widget Template before, then you know that you can write code in the Flash Document. However, to use WidgetFactory, you need to write your code in ‘classes’ (more on that in a bit), and classes can only be written in ActionScript Files.
To create a new ActionScript File, go to File > New, choose ActionScript File and click OK.
Flash will open up a blank ActionScript file. Save this file to the same location as the Flash Document, and give it a name of MyFirstWidget.
Step 4: Create a Class: Like I said, WidgetFactory widgets need to be written as classes. But what are those? Without knowing it, you’ve probably already come into contact with classes. MovieClip is a class, Buttons are a class, Bitmaps are a class. Just about everything seen in Flash are classes.
So a class is an object that serves a particular purpose. The class we’re going to write serves the purpose of being a basic widget. So with that in mind, let’s write that class.
The first thing you need to write is a package declaration.
1 2 3 | package { } |
This lets flash know where the ActionScript file is located in relation to the Flash Document. Seeing as we’ve saved both files to the same folder, there is no need to write anything else in the package statement.
Next we write the following between the package braces.
1 2 3 4 5 6 7 | package { public class MyFirstWidget { } } |
The package statement defined where this file is, this line defines what the file is – a class by the name of MyFirstWidget. As a rule, your class must always be the same name as the ActionScript File. The ‘public’ at the start makes this class available anywhere.
Currently, this class doesn’t do anything. In order to change this mild mannered ActionScript class into a widget, we need to make it extend a class that already works as a widget, such as the StaticWidget class in the WidgetFactory API. To do this, write the following.
1 2 3 4 5 6 7 | package { public class MyFirstWidget extends StaticWidget { } } |
We add two words to the class declaration: ‘extends StaticWidget’. Now that the MyFirstWidget class extends the StaticWidget class, it has all the abilities of the StaticWidget class. This means that Captivate will pick up our swf as being a widget.
However, the MyFirstWidget does not have access to the StaticWidget class right off the bat. It first needs to import it. Sort of like how if we wanted to read a book, we’d need to check it out of the library first. To import the StaticWidget class, write ‘import widgetfactory.StaticWidget;’ after the package declaration.
1 2 3 4 5 6 7 8 9 | package { import widgetfactory.StaticWidget; public class MyFirstWidget extends StaticWidget { } } |
At the moment, this class is a clone of the StaticWidget class, and that’s a bit dull. To start adding our own characteristics to the widget, we need it to run some code. In classes you write your code inside functions. A function is a block of code that will execute when we tell it to. If we write a function with the same name as the class, then that function will be called right when the class is created. This is called a constructor function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | package { import widgetfactory.StaticWidget; public class MyFirstWidget extends StaticWidget { public function MyFirstWidget ():void { trace("Hello World!"); } } } |
The one line of code in the constructor function sends the message “Hello World!” to the output panel in Flash. Well it will, once we’ve done the next step.
Step 5: Link the Flash Document to the ActionScript file: To make the MyFirstWidget class the controller of the MyFirstWidget Flash Document go to the Flash Document and open the Properties panel. If nothing in the document is selected you should see the following.
Under the publish accordion, there is a field called Class. This is where you put the name of the class that will control the document (known as the Document Class). So to link this Flash Document to the MyFirstWidget class, just type MyFirstWidget into the Class field.
FYI: It is not essential that the Flash Document and the ActionScript file have the same name.
Step 6: Publish the Flash Document: Now that everything is wired up, we’re ready to publish. To do this, go to Control > Test Movie (then Test in CS5), or press Ctrl + Enter.
Flash Player will pop up showing us our widget, and in Flash output window will pop up with the ”Hello World!” message we told it to show.
Step 7: Import the Widget into Captivate: Now switch over to a Captivate Project. Import the widget by going to Insert > Widget, then navigate down to where you saved the Flash and ActionScript files. There should be an swf file by the name of MyFirstWidget there as well. This is the file we just published, and it is the file we want to import. Select it and hit Open.
If everything is done correctly, Captivate will recognise the swf as a widget and display its Properties Dialog.
Step 6: Continue Building: Congratulations! You have now created your first widget. What it becomes, what purpose it serves, is up to you now.
You can continue writing code in the ActionScript file, and adding visual elements to the Flash Document, to build onto your widget. Captivate is your oyster.
Creating Other Widget Types
Now the above is fine as long as you wanted to create a Static Widget. But by now you’re probably saying: “Hey! What if I want to make a Question Widget, or an Interactive Widget. Whatever those are.”
Well luckily it’s not that hard to switch widget types. All you need to do to change the Static Widget above into an Interactive Widget is replace where ever it says StaticWidget with InteractiveWidget.
Update: For more information on how to write Interactive Widgets see this post.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | package { import widgetfactory.InteractiveWidget; public class MyFirstWidget extends InteractiveWidget { public function MyFirstWidget ():void { trace("Hello World!"); } } } |
The same goes for QuestionWidget.
Update: For more information on how to write a Question Widget see this post.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | package { import widgetfactory.QuestionWidget; public class MyFirstWidget extends QuestionWidget { public function MyFirstWidget ():void { trace("Hello World!"); } } } |
What’s next?
From here, I would recommend learning how to use Template Methods. Then after that, Widget Properties, which I may or may not be blogging about next week. 
Pingback: Tweets that mention Building Widgets in Flash | The Widget King -- Topsy.com
Thank you! Very good instruction. Even I could follow and build a widget. I’m going to learn more…….
Hi there,
Your site is a fantastic resource. Got stuck on a challenge I was set and was wondering if you had any insight.
So, I have a Static Widget sitting on a typical Multiple Choice question slide. Via AS3, the widget is able to navigate through the slide and click on a radio button of my choosing (using dispatchEvent). But when I try the same technique on the Submit button … it’s a a no-go!
What am I doing wrong?
I think it may be because you’re dispatching a different event to the one that the submit button is listening to.
Try the MouseEvent.MOUSE_UP event.
Tristan … i’m a muppet and yr a legend!
Hello!
I installed the widget as you explain at the entry “Setting up WidgetFactory in Flash”, but the widget is not working in Flash Cs 5
I get this error:
1017: No se encontró la definición de la clase base StaticWidget.
=> 1017: Could not find base class definition StaticWidget.
I created the flash file (MyFirstWidget_v2), then make the as file, also called MyFirstWidget_v2, linked to the Flash file.
And this is my code at the as file
package {
import flash.display.MovieClip;
import widgetfactory.StaticWidget;
public class MyFirstWidget_v2 extends StaticWidget {
public function MyFirstWidget_v2():void {
trace(“kaixo”);
}
}
}
am I doing something wrong?
Hi Adolfo,
I’d say the problem most likely isn’t the code, but that WidgetFactory hasn’t been properly set up in Flash. Can you double check the Setting up WidgetFactory in Flash post and make sure everything is set up correctly? (http://www.infosemantics.com.au/widgetking/2010/08/setting-up-widget-factory-in-flash/)
Particularly make sure that the source path can be found under the Advanced ActionScript 3.0 settings.
Hi Tristan
Thanks for the quick answer!
You’re right. The problem was that I copied the widgetfactory folder into another folder at the libraries folder…
Now i put it in the root of the libraries folder and everything works.
I’m sorry.
Thanks!
I am trying to set a function up to have incorrect answers automatically return to learning slide for review. Since Captivate 5 will not allow me to add a click button, can I do this with a Widget? I have had no training so I am learning as I go. Please be specific with response.
Hi Mark,
Perhaps the Static Button Widget that comes stock with Captivate will allow you to do what you want to. Lilybiri has written up an excellent article explaining how to use it. Here’s a link: http://lilybiri.posterous.com/using-the-button-widget-some-ideas
Essentially it allows you to do all the things a button would normally do, but you can place it on Question and Master slides.
Tristan,
Thank you for the response. The info looks good and I will try it as soon as I can get back to the IMI developing. I have found the learning curve to be dramatic with Captivate. For you and others within the BLOGS, please know that you have saved at least one computer from accidentially falling out a two-story window.
Ah yes… Let us reflect on how many computers have given their lives for us…
The button widget in static mode shows up in Cpative, but during play, it seems to fall into the background and doesn’t allow the jump-to-slide to work.?? Any ideas
Can you be a little more specific about your slide’s set up? I’m guessing you’re placing the button on a question slide.
Tristan,
You are correct. I have question slides that are Multiple Choice. I am trying to set it up where if the student chooses the wrong answer, the presentation will automatically send them to a training review slide before allowing them to select another answer.
In that case you should be able to go to the Question Slide, open the Quiz Properties panel. Under the action menu set Attempts to 1, Failure Levels to 1, and Last Attempt to Jump To Slide. Then under the Slide menu that appears under the Last Attempt drop down, select your training review slide. That way, when the audience answers the question incorrectly they are jumped to your review slide.