So many widgets, so little time
TwitterFacebookGoogle

New Widgets and WidgetFactory 6.0.4!

We’re back from Devlearn! We had a great time meeting up with all of you over there and showing off our new widgets. Speaking of showing off our new widgets, let me show off our new widgets.

Have I sufficiently shown off our new widgets yet?

Good. Allow me now to show off something else.

WidgetFactory 6.0.4

Get it here

There was a small issue that crept up for WidgetFactory in the latest patch for Captivate, so this release is mainly to resolve that issue. There are also a few new util classes if you’re interested, but the main new toy in this release is wildcards.

Wildcards

Okay, so here’s the problem. You want to work with slide objects right? However, you also want your widget to be placed on a Master slide. BUT, Master Slide objects don’t have item names right? RIGHT! And they still don’t. So… No I don’t have a solution for reliably grabbing master slide objects yet. HOWEVER, we now have a reliable solution for widgets on master slides grabbing objects on slides attached to that master slide.

Okay here’s the concept. You’ve built a mouse cursor widget. Well actually I’ve built a mouse cursor widget. I showed it off on the video above. But for the sake of argument you’re developing this mouse cursor widget. You place this widget on the master slide. You attach that master slide to every slide you want to display a custom mouse cursor on. Then on each attached slide you place the graphic that you wish to appear as the mouse cursor. However, in your widget you don’t want the user to have to define the item name for each object on each slide, so what you do is this: Give the cursor a name of ‘@_cursor’. Then for the mouse cursor graphics on each slide, add ‘_cursor’ to the end of the item name.

You may see where I’m going with this.

getSlideObject() now has an optional third parameter where you can specify a wildcard character. So let’s take the above example. To grab a slide object with a ‘_cursor’ syntax, you’d write it like this:

1
var myCursor:Sprite = getSlideObjectByName("@_cursor", -1, "@");

getSlideObjectByName will return to you the first object it can find that matches your wildcard name.

BUT! What if you wanted to get ALL the objects on slide that match your wildcard name? In that case, use the new getSlideObjectsByWildCardName() method (yes I know, it’s a long name). This function returns an array of slide objects that match your query.

1
var myCursors:Array = getSlideObjectsByWildCardName("@_cursor", "@");

In the above code, myCursors now contains an array full of every object on slide that has ‘_cursor’ at the end of its item name. This saves a lot of headache for your widget users and it’s not all that much of a pain to implement is it?

So try the new wildcard today!

The Future

I’ll be pretty busy working on our new widgets for a while. There may be another WidgetFactory release in the near future to clean up some issues that we’ve been receiving about review mode.

Also, since going to Devlearn we got a lot of requests for HTML5 versions of our widgets. Currently only static widgets can be built in HTML5 and we only have one up for sale at the moment. There are rumors going around that support for the other widget types will soon be added to Captivate. So if/when that happens, we’ll be jumping on the band wagon and releasing HTML5 versions of our Drag and Drop widgets pronto. And a HTML5 Drag and Drop widget is going to need a HTML5 WidgetFactory.

We’re also thinking of releasing more YouTube tutorials for Captivate. So it’s possible you may see less written blogs and more video training on developing widgets coming out here.

So that’s where I’m at! Have a good day and if you get the chance – eat a pineapple.

Did Someone Say ‘Example’?

Recently I’ve had a number of people asking me to put up an example of a WidgetFactory 6 widget. At least I think it was a number of people. It could have been the same person through a number of different channels. Whoever you are and in whatever quantity I wish to thank you and provide you with a gift. Here for you all now, whether you requested it or not, is a free to download widget with all its code begging to be investigated.

Click Here to Download the WidgetFactory 6 Example

I’ve included a .fla file that you can use to publish the widget. However you can use any program you wish to compile the widget. Except Word. Because Word doesn’t compile .swf files. Come to think of it you couldn’t use PowerPoint either… or Outlook, or Captivate, or Firefox, or Windows Task Manager, or Steam, or iTunes, or Intelli-J Idea- Wait no, you can use Intelli-J idea to compile it.

Okay, let’s try that again. You can use ANY Flash IDE to publish the widget example, you just have to make sure that WidgetFactory is already installed in that IDE. If you’re using Flash, then click here to read a tutorial on setting up WidgetFactory.

In other news I’m going to be easing up on the blog posts for a bit because… Wait… No I should probably write a devoted blog post about that… I’ll be right back.

PS: One of the people who originally requested an example wanted to know how to build a pause/play/fastforward button with a widget. For that person, please have a look at the TestInteractiveRuntimeMode class. In there I have coded two buttons, one to report the Interactive Widget’s success criteria and one to report its failure criteria. To change the button’s functionality to pause or play the movie for say… the success button, go to its click event handler (the onSuccess function) and delete the code in there. You can pause and play the movie the same way as you would in Advanced Actions, by changing a Captivate Variable. For example, if you wanted to pause the movie you’d write this in the onSuccess function:

1
cpVariables.rdcmndPause = 1;

For a list of other Captivate Variables you can use to control the Captivate Movie, please take a look at this post here (look under the variables named ‘rdcmnd’).

Building A Widget Step by Step – Part 2: Widget Type

In the last post we looked at how to form the foundation for a widget. In this post we will see how to set the widget’s type.

If you are using the ‘old’ method of building widgets, you’d specify your widget’s type by which class you extend. If you wanted to build a static widget you’d extend the StaticWidget class, if you wanted to build an interactive widget you’d extend the InteractiveWidget class and so on.

With the new Widget method in WidgetFactory 6 (I’ve really got to come up with a better name for that) no matter what type of widget we’re building, we always extend the Widget class, which is type independent. By default, the Widget class will be a static widget, so how do we tell WidgetFactory that we want to build an interactive or question widget?

How to do it

At the end of the last post, our widget was looking like this:

1
2
3
4
5
6
7
8
9
package {

   import widgetfactory.Widget;

   public class MyWidget extends Widget {

   }

}

This bare bones widget will import into Captivate as a static widget. To make this an interactive widget, first of all we must build a constructor function. When the MyWidget class creates a MyWidget object, its constructor function will run immediately. We identify the constructor function by giving it the exact same name as the class. So let’s add a MyWidget function to the MyWidget class.

1
2
3
4
5
6
7
8
9
10
11
12
13
package {

   import widgetfactory.Widget;

   public class MyWidget extends Widget {

      public function MyWidget():void
      {
      }

   }

}

The Widget class has its own constructor function as well, and its constructor function is set up to receive two pieces of information. The first piece of information is what type of widget this is going to be. The second piece of information is a bit complicated and outside of the scope of this post (though we’ll get to it some day). To send this information to the Widget class’ constructor function we use the ‘super()’ method. Super is short for ‘super class’ which means the class were extending, which of course in this situation is the Widget class.

A few posts ago I showed how to use the WidgetType class to detect what type of widget you’re in. The WidgetType class also has another use. If you recall the widget class has three static properties:

  • STATIC
  • INTERACTIVE
  • QUESTION

These represent the static, interactive, and question widgets. When we call the ‘super()’ function we can pass in one of these properties and that will specify what type of widget we’re building.

  • For a static widget: super(WidgetType.STATIC);
  • For an Interactive widget: super(WidgetType.INTERACTIVE);
  • For a Question widget: super(WidgetType.QUESTION);

Of course, you must import the WidgetType class before you can access it. The WidgetType class is located under the widgetfactory package, so just add…

1
import widgetfactory.WidgetType;

…to your class and you’re set.

So in the end, an Interactive widget would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package {

   import widgetfactory.Widget;
   import widgetfactory.WidgetType;

   public class MyWidget extends Widget {

      public function MyWidget():void
      {
         super(WidgetType.INTERACTIVE);
      }

   }

}

And a question widget would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package {

   import widgetfactory.Widget;
   import widgetfactory.WidgetType;

   public class MyWidget extends Widget {

      public function MyWidget():void
      {
         super(WidgetType.QUESTION);
      }

   }

}

There is another way to define your widget type that does not involve this ‘super()’ call, but I’ll explain that in another post. For our next post, we’ll learn about widget modes!

Building A Widget Step by Step – Part 1: Getting Started

Hey everybody. Starting from today I’m going to be doing a series of short posts taking you step by step through building a widget with WidgetFactory 6.

To start off, make sure you have WidgetFactory installed in your coding environment (or IDE for short). If that IDE is Flash Professional, then this post gives you a step by step guide on how to install WidgetFactory.

In this post, we’ll learn the minimum amount of code needed to build a widget.

Before we start, please download WidgetFactory 6.0.1 which contains a couple of bug fixes.

Step 1: Create your Widget’s Document Class

A ‘class’ is a blueprint that defines how a particular type of object is built. So the ‘Doohickey’ class will define how the Doohickey object will work. Pretty much everything in ActionScript is an object, even the SWF itself. The ‘document class’ is the class that defines how the top level SWF object works.

How you create the document class differs depending on what IDE you use. For Flash Pro (CS4 and above I believe), you go to your properties panel, make sure nothing is selected, and then click the pencil icon next to the ‘Class’ field.

When you do that, a dialog will appear where you can give your Document Class a name. I recommend giving it the same name as your widget. Flash will create a new ActionScript file that you should then save to the same location as the .fla file. Save the ActionScript file with the same name as the class.

Step 2: Write the Class Structure

Every class follows the same structure.

First we must define what ‘package’ the class is in. In the case of our Flash built widget, this means where our class is in relation to the publishing Flash Project. In the step above, we saved it in the same folder as the .fla file, so we don’t need to provide any location information in the ‘package’ statement.

1
2
3
package {

}

Next up, we define the class name and its access modifier. This is done by writing ‘[access modifier] class [class name]‘. An ‘access modifier’ defines what classes can access this class. Classes can choose between two access modifiers: ‘public’ (accessible to anyone), or ‘internal’ (only accessible to other classes in the same package). The Document Class must be public, and the Class name should be the same as the file name.

1
2
3
4
5
6
7
package {

   public class MyWidget {

   }

}

Of course, most IDEs, even Flash, will write all this code for you. But there is no harm in understanding what this code does.

Step 3: Extend the Widget Class

Currently our Document Class is a barren wasteland. In fact, if you held it up to your ear, you’d probably hear the ocean. To fix that, we’ll make it extend another class. When class ‘A’ extends class ‘B’, class ‘A’ will gain all the abilities of class ‘B’. Seeing as we want our document class to act as a widget, we’ll have it extend the ‘Widget’ class.

However, before you can use the Widget class, we need to let Flash know we’re going to use it. To do this, we’ll import the widget class by going in between the package statement and the class statement and writing the following:

1
2
3
4
5
6
7
8
9
package {

   import widgetfactory.Widget;

   public class MyWidget {

   }

}

This import statement tells Flash that we want to import the ‘Widget’ class that can be found in the ‘widgetfactory’ package.

We are now free to make our document class extend the Widget class, and we do this by tacking ‘extends Widget’ on the end of our class statement.

1
2
3
4
5
6
7
8
9
package {

   import widgetfactory.Widget;

   public class MyWidget extends Widget {

   }

}

Step 4: Publish!

With all that code written, save your document class and publish your movie. In Flash you can do this by going to Control > Test Movie > Test.

Jump over to Captivate. Go to Insert > Widget and browse to the location of that published swf (if you’re using Flash, this will most likely be in the same folder as the .fla file).

The widget will now be imported into Captivate as a Static widget.

Hooray!

Next Time…

We now have a widget that will import into Captivate as a Static widget. But what if we don’t want the widget to be a Static Widget? What if we want it to be a Question or an Interactive widget? Tune in on the next post to find out how.

How to Detect Widget Type

Here’s a quick tip.

As many of you know, the Drag and Drop widgets come in two flavors, a Question Widget and an Interactive Widget. These two widgets mostly use the same code, but of course there are differences in between Question Widgets and Interactive Widgets, so at certain points different code is executed for the Question Widget than is for the Interactive Widget.

If you’ve got a similar situation and need to detect what type of widget is executing the code you’re writing, here’s how you go about it.

New to WidgetFactory 6 is the WidgetType class. It is found under the ‘widgetfactory’ package, so to import it you’d write the following:

1
import widgetfactory.WidgetType;

The WidgetType class has a single static property…

  • WidgetType.type

…and three static constants.

  • WidgetType.STATIC
  • WidgetType.INTERACTIVE
  • WidgetType.QUESTION

So if you want to check the widget type, just compare the relevant constant to the ‘type’ property like so:

1
2
3
4
5
6
7
if (WidgetType.type == WidgetType.QUESTION) {
   // This is a question widget.
} else if (WidgetType.type == WidgetType.INTERACTIVE) {
   // This is an interactive widget.
} else {
   // This is a static widget.
}