Kingsley eLearning Solutions

You have big dreams for your eLearning.
We'll make them come true.

image of Kingsley

Add Custom Tools to Articulate Toolbar with SDK

Submitted by Kingsley on Mon, 03/15/2010 - 12:21

One of the coolest features of the Articulate SDK is the ability to add your own tools to the Toolbar along the top of your course.  Some of the tools I have seen are voltage calculators, feedback forms, live charts, etc. This is also where I often put tools such as custom navigation.

In this post I will walk you through the steps to add your flash file to the Articulate Toolbar. This tutorial assume you have access to a Flash file and can edit it’s ActionScript. If you don’t have a file you can download the files I am using in this demo.  And don’t worry… you don’t have to be a hardcore, up-all-night, bawls-swilling, hacker-geek, I will give the code you need, so just copy-n-paste! Download this zip file to get all the resources. Keep in mind this is a sample file; all the Articulate related code works, but it will not actually send feedback anywhere.

From a high level view here is what we need to do.

  • Edit art_plugins.xml
  • Add Articulate SDK hooks
  • Add functions to hide/show your tool
  • Some Clean up.


Edit art_plugins.xml

One of the first things Articulate does when launched is look for a file named art_plugins.xml. If it finds this file, it loads any tools (or tabs) that are listed in it.

Chances are your course does not have an art_plugins.xml file. Don’t worry about creating one from scratch, you can use the one I included with the demo files. You will need to put this file and your .swf into your published course’s “player” folder. Watch the Screenr below to see how to customize it:

Add Articulate SDK hooks

Now that you have your Flash file loaded into the player, you need to let Articulate tell it what to do.

There are two things that Articulate looks for inside your Flash file: 

  • artModuleIsActive - A variable that declares if your tool is active
  • artModuleAPI(command) - a function that accepts commands to activate/deactivate.

Again… don’t worry about trying to write this code yourself. Use the code I put in frame one of the .fla file your downloaded. After watching the screenr below you should understand what the code is doing and how we plan to use it.


Add functions to hide/show your tool

OK, so now we have it setup so that our code will let Articulate know when the tool is active and we are listening for commands from Articulate. We need to write some functions to show/hide our tool when Articulate tells us to.  We will also want to hide it when it loads the first time or it will just be hanging out on the screen when the course launches. All this code is in the .fla and in this screenr I will explain what each function is doing.

Clean up

Alright... Everything we have is functional but there are still some tweaks we can make to improve the users’ experience.  Most of this is just adding the little touches that folks have come to expect from an application. For instance; when we click the ‘send’ button we expect the window to close. The same thing goes for clicking the toolbar button while the tool is open; we expect it to close.
To make the experience smoother I would suggest you mimic Articulate’s behavior. In this version I animate the tool sliding up and down. I didn’t have to write a bunch of code, instead I used an ActionScript Class that is free for anyone.
One important note here. For some reason Articulate calls the ‘activate’ command immediately after sending the ‘deactivate’ command. My solution to this is included in the screenr below.


Submitted by Brisco (not verified) on Thu, 12/02/2010 - 16:38


Just had a quick question concerning the script. Great script by the way.

Did you ever come up with scripting that would handle the out function? One that would make the flash ease out vs disappearing abruptly? Let me know your thoughts.



Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Enter the characters shown in the image.