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

by Dave Mozealous on March 5, 2010

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:

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.

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.

{ 12 comments }

When life gives you creamy peanut butter, buy peanuts and make it chunky

by Dave Mozealous on February 12, 2010

Way back in middle school my friend Ethan faced a really challenging problem.  See Ethan’s mom had a membership to Sam’s Club, and always did the shopping for the family.  Well, one day his mom went to Sam’s club and purchased a huge 1 gallon jug of peanut butter for the family.  The problem was it was CREAMY peanut butter and Ethan (like many people) hated creamy peanut butter.

Ethan voices his displeasure with the creamy peanut butter purchase

Ethan being really displeased with the purchase let his mother know that he wasn’t about to eat that creamy peanut butter and asked his mother to get him chunky Peanut Butter instead.  Well, after Ethan’s mom just bought a gallon of creamy peanut butter, she was not about to go buy MORE peanut butter.

Faced with this problem Ethan could have done many things…he could have refused to eat the peanut butter until his mom corrected the problem, he could have sabotaged the peanut butter, and he could have gone out and bought chunky peanut butter himself.  None of these solutions would have made both him AND his mom happy.

So what did Ethan do?

Ethan was smart enough to think outside the box and come up with a solution to the problem that made both him and his mom happy.  He was able to stick to his principles and not eat creamy peanut butter, and make his mom happy by not wasting all that peanut butter…Ethan bought peanuts to convert the creamy peanut butter to chunky peanut butter. Ethan ran to the store, picked up a pound of peanuts, crushed them up, and fixed the peanut butter.

So the next time life gives you creamy peanut butter, be like Ethan and make it chunky.

You can follow Ethan on twitter here (@ethang).

{ 0 comments }

Why Flash on the iPhone/iPad doesn’t solve #mLearning

by Dave Mozealous on January 27, 2010

By now you have probably heard about the release of Apple’s new toy the iPad.  One of the biggest disappointments about the device so far is that again it is an apple device that will not initially support the Adobe Flash Player, much like the iPhone/iPod Touch.

Checking Twitter for comments about “Flash” and “iPad” you find a lot of disappointment:

@invaderkong: Wait….STILL NO FUCKING FLASH…yah iPad….I think I’ll wait till google copies ya and then makes you better

@sethruffer: iPad looks incredible….but no flash????without FlashI’m skeptical.

@tvilling: No it’s not a tablet computer – it’s a giant iPod Touch that does not do webpages with Flash #ipad #Apple pls. make a tablet macbookish.

Even Engadget chimed it support with a story about it within 15 minutes of the iPad announcement concluding.

Why no Flash Player on mobile devices hurts mLearning

The news of the lack of support for Flash on the iPhone and iPad is especially important to those involved in the learning industry.  Why?  Well the vast majority of eLearning training is delivered via Flash (using tools like Flash, Captivate, Articulate), and with so many prominent mobile devices (iPhone, Blackberry, Android -yet)  that don’t support any Flash Player eLearning developers are left waiting for devices to either support the Flash player, or another delivering system for eLearning content that doesn’t rely on the Flash Player.

If you listen to the folks at Adobe they will tell you that some form of Flash is available on most mobile devices, or will soon be coming to almost all mobile devices.  Well if you believe this, I have a bridge to sell you.  I left Macromedia/Adobe 4 years ago, and at the time everyone knew that the mobile platform was going to be the future.  Mobile is the future everyone would say.  Well here we are 4 years later and nobody I know actually has a mobile device that supports the Flash player.  I could go on and on about the incompetence of the leadership at Adobe, but that isn’t the point of this post.

Why adding Flash on the iPhone/iPad doesn’t solve the mLearning problem

If Steve Jobs had announced that the iPad, iPhone, and iPod Touch would come with the Flash Player would the entire eLearning industry jump up and shout for joy because now mLearning would be achievable?  Unfortunately no.

Why?

Not only do most mobile devices NOT support the Flash Player, but they also don’t support Java.  Why does this matter? A big part of eLearning revolves around being able to not only VIEW content, but to also TRACK content.  Tracking is fundamental to delivering formalized eLearning training, which usually involves Learning Management Systems.  Here is the second part of the mLearning problem.  Many Learning Management Systems use client side Java (meaning Java runs in the browser) to do the actual tracking with SCORM and AICC content.

I don’t know the specific percentage of Learning Management Systems that use Java, and given that there are several hundred to a thousand different LMS vendors on the market it is difficult to get an accurate count, but I did ask a couple of SCORM experts (Tim Martin and Mike Rustici from SCORM.COM) if they had any idea how many used Java.  And the responses I got were:

  • too many (Tim)
  • few new deployments use Java, but hard to estimate the installed base of legacy SCORM implentations. (Mike)

So to Mike’s point, “few new deployments use Java,” this is good news.  Problem is that many people are stuck on older learning management systems that still do use Java.  Licensed versions of Learning Management Systems can be several hundred thousand dollars, and upgrading can either be prohibitively expensive, or difficult to manage, so organizations elect to not upgrade.

Conclusion

So my point is, even IF by some miracle the people at Adobe get the Flash Player on the iPhone/iPad it doesn’t completely solve the mLearning problem.  Without also adding Java support we still won’t have tracking.

As a note: Articulate Online is and always has been Java free.  So if the Flash Player problem is solved Articulate Online won’t have the tracking problem.

In case you are wondering, I left Adobe, I was not fired.  I own Adobe stock, and the incompetence of Adobe leadership bothers me as a stockholder in Adobe and stakeholder in the eLearning industry that relies on Flash.

{ 14 comments }

Convert #Articulate Web output to LMS output without republishing

January 19, 2010

This post is written in response to Deepak Saini’s questions in a comment on one of my posts.
So here is the problem: You have a bunch of Articulate presentations that you have published and uploaded to your website, and now it is your job to take all those presentations and upload them to your new [...]

Read the full article →

Create a Screenr Video Podcast in 4 EASY steps

January 8, 2010

It’s 2010, and you are dying to do something that embraces mobile learning. Why not create a Video Podcast of all your Screenr screencasts?
Here is how you can create a Video Podcast of your Screenr screencasts in 4 easy steps.
A little background
One of the cool things about Screenr, is that you can view your [...]

Read the full article →

I before E, ESPECIALLY after C

December 24, 2009

Every American elementary schooler is taught the mnemonic device, “I before E, except after C.”  I am dumbfounded by how bad this rule is. I misspell words all the time. Words like policies, species, and caffeine I can never spell correctly because they violate the rule. The rule is littered with exceptions. Recently, I wondered how bad the [...]

Read the full article →

How to use HTTPAnalyzer to debug AICC LMS reporting issues

December 18, 2009

Quick post here. I just created a screencast showing how you can use HTTPAnalyzer to debug reporting issues between content and a Learning Management System. You can get HTTPAnalyzer from the good folks at IEInspector here.

If you are a QA Engineer working on any type of Web Application, HTTPAnalyzer is a must have.

Subscribe [...]

Read the full article →

Microsoft Office 2010 Beta Released – Using it with #Articulate Presenter ‘09

November 18, 2009

Today Microsoft released the Office 2010 Public Beta, meaning anyone who wants it can download it here.  I wanted to give you a heads up, and let you know how it impacts Articulate Presenter ‘09, and for those brave enough to try the two, what you can do if you run into issues.
What you should [...]

Read the full article →

10 Things to Consider Before Choosing an LMS

November 5, 2009

So you know you want an LMS.  Good. This article isn’t here to tell you why you need one, or why you should use one, this is a guide for anyone who already knows they want an LMS, just wants a guide for what to check for.
Over the years I have spent many hours testing [...]

Read the full article →

What Troy McClure Can Teach You About Creating Awesome Screencasts

October 29, 2009

Troy McClure has made some exceptional instructional films in his day. You might remember him from such educational films as The Half-Assed Guide to Foundation Repair and Alice’s Adventures through the Windshield Glass. So with all his instructional video experience, you might be wondering…
What can Troy McClure teach me about creating awesome Screencasts?
Let’s first watch [...]

Read the full article →

← Previous Entries