How I created a custom #Articulate Presenter skin in less than an hour

Have you ever wanted to develop your own custom Articulate Presenter player to give your eLearning courses that extra bit of customization?  Have you ever been tasked with developing eLearning content for a client who didn’t want you to use the Articulate Presenter player?  Did you know it IS currently possible to develop your own totally customized skin, and it actually isn’t that hard?

I built my totally customized #Articulate Presenter skin in less than an hour and you can too.

Here is what you will need to do to develop your own skin:

1. Build a skin using the Articulate SDK to mask the actual Articulate Presenter skin (a 980×640 SWF file that we will load on top of the Articulate Presenter Player).
2. Build an ast_remote.swf file to load our custom skin on top of the Articulate Presenter player
3. Package our skin in a format that can be easily shared and installed.

Worried that you don’t know how to use Flash?  No need to worry.  I don’t know Flash either.

Let’s check out the player I developed.  The idea was I wanted a small sized player that I could fit in my blog and would play well on devices with smaller screens, like mobile devices that have the Flash Player.  I also wanted to make it Zen, so it has only a few buttons.  So here it is below, click the play button to start playback.

View at Mozealous.com

Notice the big play/forward/back buttons, the mute icon, and the slide counter.  Very minimalist and blog friendly right?

1. Let’s build a skin to mask the Articulate Presenter skin

So how did I build it?  Well the first thing I did was build my custom skin in Flash.  What we are going to do is build a Flash file that will mask (hide) the actual Articulate Player.

Check out the 4:15 screencast below to see how I created the skin.

If you want to play along, download the FLA for this file here. You will need Flash CS3 or CS4 to edit the FLA.

View at Screenr

Easy peasy huh? I suck at Flash, and seriously this took me less than an hour to build.

Now let’s…

2. Build an ast_remote.swf to load our new custom skin

What is the ast_remote.swf file?  Well, it is a file that the Articulate Presenter loads on launch.  So what I have done is modify this file to load my own custom skin on top of the Articulate Presenter player.

You can download my ast_remote.fla file here to create your own ast_remote.swf.

Once you download it, the only thing you will want to change is this line:

loadMovieNum (“player/custom_player.swf”, 100);

Change the custom_player.swf to point to your custom skin.  So for example, with my skin the line looks like this:

loadMovieNum (“player/API_Tester.swf”, 100);

What does all the other code do in the ast_remote.swf file do?  The other code in the file makes sure that your custom skin is loaded before the rest of the player, so that you won’t ever see the regular Articulate Presenter player.

So now that we have created our skin, modified the ast_remote, it is time to…

3. Package our skin in a format that can be easily installed.

One of the cool things we added in Articulate Presenter ‘09 Update 5 is the ability to create and install custom skin packages.  What is an Articulate Presenter custom skin package?  Check out this screencast for an explanation.

View at Screenr

So now let’s get to creating our Articulate Presenter Skin Package…

Download my Blog Player.artpkg file here so you can follow along.

View at Screenr

Did I go too fast in my explanation of what the .ARTPKG file contains?  If I did no sweat, here is a recap of what it should contain:

• ast_remote.swf
• your custom skin.swf
• Any other files you want to contain
• **<templatename>.xml should be a template configured to match the requirements of the template needed. Remember to set the <communityplayer> tag to “true”.
• Package.xml – the XML that describes the package

And the package.xml should contain the following:

• uniqueID – (a GUID) that identifies the player (create a GUID here).
• content title –  the name of your template
• version - the version of your player
• presenterTemplate – the player template that is included in your package
• playerFiles – List of all files you want included when a presentation is published with your skin

** To create my template.xml file this is what I did:

1. Started PowerPoint
2. Went to Articulate>Player Templates
3. Added/Removed options that I wanted included in my Player Template
4. Select File>Save As…
5. Navigated to the folder that template was saved:
   (WINXP: C:\Program Files\Articulate\Presenter\templates\ )
   (WIN7/VISTA: C:\Users\username\AppData\Local\VirtualStore\Program Files\Articulate\Presenter\templates )
6. Added that template.xml file to my .artpkg

That is it, you have now developed your own Articulate Presenter skin

More info…

Get the Articulate Presenter SDK

In order to build your community skin you will probably want all the SDK documentation.  You can purchase the Articulate Presenter SDK from our store here or if you are an Articulate PMP customer you get access to it for free by contacting our support department here.

If you want to see everything that is possible to do in the SDK you can find the sample documentation here.

Get help developing your custom skin

Need help developing your skin?  Send a support request asking for access to the Articulate SDK forum here. This is a special forum setup for people with questions related to the SDK.  If you want you can also post questions in the comments here, but I suck at Flash, so if you have Flash related questions I might direct you to the forum.

Got a pimped out skin you want Articulate to see?

Awesome, we would love to see it.  Upload it here so we can check it out.

Having trouble finding all files referenced in this post?

No worries, you can download all files referenced here:

• My blog player FLA file
• ast_remote.fla
• Blog Player.artpkg

Want a custom skin, but suck at Flash worse than I do?

So you want a custom skin, but you don’t know or have Flash at all?  I can recommend a couple of people who have made some pretty sweet custom skins.

• Articulate MVP James Kinglsey – developed this sweet skin here for a customer of his, and he can build you an entirely custom skin for a price.
• e-Mersion – has built many custom skins, and even gives one away for free.  You can find out about all the services they offer here.

Note: Articulate Presenter ‘09 currently supports ActionScript 2.0.  In the next version we do of Articulate Presenter we will be migrating our content to ActionScript 3, so players you develop for Articulate Studio ‘09 will not work in future versions.  Just thought I would give you a heads up.