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.

{ 96 comments… read them below or add one }

Matt Elliott March 5, 2010 at 8:38 am

Very good stuff, thank you for this. I like how you present the whole solution, not just 1 small part of it. I will be attempting this in the near future. One quesiton: do you NEED to have the articulate Presenter SDK to do this? Or will the Presenter SDK simply give you more things that you can customize?

Andrew Scivally March 5, 2010 at 8:58 am

I’m trying to open the ast_remote.fla file in Flash CS3 and it gives me an “unexpected file format” error. Is that file saved down to CS3?

Dave Mozealous March 5, 2010 at 10:05 am

Hey Andrew,

Try downloading it again, it is now saved in CS3 format.

-Dave

Dave Mozealous March 5, 2010 at 10:06 am

Hey Matt,

You don’t NEED to have the Presenter SDK to do any of this. The SDK will give you some sample files and a full cut of the documentation, but if you download my sample file you should be able to figure everything out.

Good luck!

Dave

Aaron Chase March 5, 2010 at 12:33 pm

This is awesome, thank you.

Andrew Scivally March 5, 2010 at 3:53 pm

I got the SDK files about 6 months ago. Are they the same now? Anything new (documentation) added? Should I ask for them again?

Dave Mozealous March 5, 2010 at 4:07 pm

Hey Andrew,

The last update we did to the Articulate SDK was in November, so it probably does have some minor changes. Basically we updated the doc to contain info about the community skins, but that is it. So if you read this post and you understand it you are good, as this post is way more indepth than what we put in the SDK document.

-Dave

Tony Chilvers March 9, 2010 at 4:24 am

Hi Dave,

Thank you for putting, in one place, a clear easy to follow tutorial on Custom Skins.

TC

Rob Nachum March 10, 2010 at 8:36 pm

Hi Dave

Very interesting article. Does the addition of the custom skin have any impact on any of the variables in the “playerproperties.xml” file on conversion? I can see a great purpose for a custom skin as it would be awesome if a could switch Advance Slides to “By User” as a default rather than having to set it manually each time (even though I know I can do a global change for each presentation) as we use it 99.9% of the time. Also we have a custom swf player that goes to the logopanel. We need to refer to that file in playerproperties so I need to change that file every time.

No, this isn’t a support query…

Loved the article on I before E…

Cheers
Rob

Dave Mozealous March 11, 2010 at 7:44 am

Hi Rob,

>Does the addition of the custom skin have any impact on any of the variables in the “playerproperties.xml” file on conversion?

It does not. The sdk is mainly aimed at runtime changes. Might want to check out the sample doc and see everything that is possible.

http://www.articulate.com/products/presenter-sdk.php

Good luck!

-Dave

Allan March 14, 2010 at 1:44 am

Hi Dave,

Thanks this is great, can you tell me how to embed the player in a html page?

I went here http://www.mozealous.com/blog/blogplayer.html to checkout the source code below.

I changed the relevant paths for
VALUE=’player/playershell.swf?rqPresentationID=TestPresentation’
src=’player/playershell.swf?rqPresentationID=TestPresentation’

When I preview in browser I just get a white window.

Thanks,

Allan

Dave Mozealous March 15, 2010 at 3:10 pm

Hey Allan,

You trying to embed it in a blog? Probably the easiest way to do it in Wordpress (if you are using Wordpress) is to follow David Anderson’s Screencast here:
http://screenr.com/Boh

It uses an iFrame, which isn’t the cleanest method out there, but it is the easiest. I plan on doing another follow up post to this post that shows you other was to embed it. I’ll make sure I update this post and threads when I do.

-Dave

-Dave

Dave Moxon March 16, 2010 at 3:07 am

Great stuff Dave. I’ll definitely be pointing people to this post!

Allan Bolton March 16, 2010 at 4:23 am

Thanks Dave, I’ll be keeping my eye out for any updates.

Deepali March 25, 2010 at 1:48 am

Hi Dave,

The article is just great and I was actually able to create a custom skin in not one but 2 hours :) Thanks so much!!

One problem though… Is it possible to create a custom slider / seek bar?? I was playing around with slide duration but that is not changing when there s a swf in the slide…

Thanks,
Deepali

Dave Mozealous March 25, 2010 at 7:10 am

Awesome Deepali,

I know it is possible to create a custom slider / seekbar because others have done it, specifically emersion in their Drop-Nav skin:
http://www.articulate.com/blog/announcing-articulate-presenter-community-skins/

What you could do is make a call to GetPresentationData() which should give you the length of any inserted SWF, then adjust the slide time accordingly.

-Dave

Dan Reid April 20, 2010 at 1:33 pm

I thought I had this set up correctly – using this page as a model to create my own template – starting with all the files obtained here, before setting off and creating my own. Problem: when I change “false” to true, I just get a “loading bar”, and it hangs. Obviously turning on that one parameter (oh, it’s in the “playerproperties.xml” file) causes something not to work. PLEASE give me an idea where to look. I’ve edited the “ast_remote.fla” file to point to my skin (and to the APT_Tester.swf to see if that worked), and nothing is working. Every time I switch that parameter to true, this thing dies. Any ideas? (and yes, I have published the ast_remote.fla to a swf… :)

Dan Reid April 20, 2010 at 1:34 pm

oops – meant “API_Tester.fla file (posted above)… dang typos. :)

Dave Mozealous April 20, 2010 at 1:41 pm

Hey Dan,

Can you upload the artpkg file to me:
http://upload.articulate.com
Case Subject: “QA Upload”

I should be able to figure out what is going on, I remember something like this happened to me, but I can’t recall what the issue was.

-Dave

Renee April 20, 2010 at 4:47 pm

Hello-
I made my own skin and followed all the steps here, but when I tried to install the artpkg I made, I get the message “Would you like to install version 0?” And it doesn’t actually install anything. The title and version variables are null.
I couldn’t trace the error back to any particular piece, so I compared it to the original downloaded Blog Player artpkg, and I correctly get this message “Would you like to install Blog Player version 1.0″
BUT – I tried unzipping, rezipping, and changing the extension of the that exact Blog Player artpkg I downloaded from here and the problem returns… “Would you like to install version 0?” and nothing happens.
Am I missing something? I even downloaded a fresh copy of your artpkg and tried again… Unzipping, rezipping, and renaming the extension seems to break it. I am using the default windows extractor/zipper like you show in the video (send to compressed folder…)
thanks!

Dave Mozealous April 20, 2010 at 5:09 pm

Hey Renee,

Can you upload the package so I could take a look?

In a previous comment I gave Dan instructions on how to upload it, just follow those instructions.

Dave

Cody April 22, 2010 at 9:16 pm

Hi Dave

I am having the exact same problem as Renee, I get “Would you like to install version 0?” and nothing happens. Any help would be great.

Cody

Dave Mozealous April 22, 2010 at 9:34 pm

Hey Cody,

I believe Renee’s issue was that she was zipping up the entire folder, not just the contents od the folder. Make sure you only zip up the contents of the folder.

Dave

Dan Reid April 30, 2010 at 1:22 pm

Dave, I think I got it – it wasn’t the package at all, but the fact that I was running it over a network drive (and Flash security settings probably blocked the shell from loading the other file). I’m going to test this theory on our system next week, just to be sure, and if that’s the case, it had nothing at all to do with the packaging (fingers crossed!). I’ll write back here next week, just so I don’t leave this subject hanging (hate that when something gets solved and you can’t find out how, if you’re searching for the same issue, ya know? :) ).

Thank you for all your help on this (I’ve been reading through all the comments here and your suggestions and help, and it’s been VERY informative! Your tutorial really helped a lot!).

Dave Mozealous April 30, 2010 at 7:13 pm

Hey Dan,

Got the skin and checked it out, and I think I figured out what the problem is…

In the ast_remote.swf you are trying to call this custom skin file:
loadMovieNum(“player/DAN_CUSTOM_SKIN.swf”, 100);

But your custom skin is named eSIGN_CUSTOM_SKIN.swf, so the skin never gets loaded.

Also, as a heads up, in the artpkg file is the FLA for your skin. If I were you I wouldn’t include the source FLA in the artpkg file, just so people don’t steal your code.

Let me know if you still have issues after this.
-Dave

Saul May 20, 2010 at 5:40 am

Hi Dave
Using the SDK can one change the location of the Contents pane from the left to the right hand-side in the player?
Trying to better support left-right languages.

Thanks

Dave Mozealous May 20, 2010 at 6:08 am

Hi Saul,

There isn’t an SDK function or anything that will allow you to automatically switch the navigation from the left to the right, but the SDK will give you everything you need to build your own navigation on the right side of the player.

-Dave

Dan Reid May 24, 2010 at 7:08 am

Dave – Sorry it took me so long to get back on here (other projects, ya know how it is!). :) Anyway, yep, I think that was it – the names of the files (was trying to develop a few different things at once and must have forgot to change it).

One more quicky question – and I’m sure I’ll end up finding it 5 mins after submitting this… How can I access the link and text for an Attachment, so I can make my own custom flash area for Attachments? I can’t seem to find any reference to it in the SDK – unless it’s right there and for some reason I keep skipping over it? :)

Dave Mozealous May 24, 2010 at 7:22 am

Hey Dan,

You should be able to find the attachments in the References node of the published presentation.xml file. So if you use the GetPresentationData() call you should be able to get it.

-Dave

Dan Reid May 24, 2010 at 8:04 am

Dave, thanks again for your quick reply! I’ve been trying to access the GetPresentationData() function, but not sure what the exact syntax is for grabbing the info… Samples below – what am I missing? I’ve tried a few different ways – including “…opd.References.Doc.Title… etc… :(

I’m trying this:

ACTIONSCRIPT:
var opd = ArtAPI.GetPresentationData()
_root.presentationdata = opd.Title[0] + ” – ” + opd.Type[0] + ” – ” + opd.Data[0];


THIS IS IN THE PRESENTATION.XML FILE:

file

file

Dave Mozealous May 24, 2010 at 8:27 am

Hey Dan,

It looks like the XML got stripped from the post, but to be honest I am not much of a ActionScript programmer so I probably won’t be the best person to ask.

Have you thought about posting this in the Articulate SDK forums:
http://www.articulate.com/forums/articulate-presenter-player-sdk/

The people in that forum have a better knowledge of AS coding than I do…

-Dave

Marion June 1, 2010 at 1:27 pm

Hi Dave,
that’s a great tutorial, thank you so much for sharing your source files too (really helpful for non coders like me :)) !
One question tho, I seem to have a problem installing your ARTPKG file. Once I’ve downloaded it, I double click on it and an error message comes up saying “there was an error installing this package”. For the same reason I therefore cannot test my own SDK file (because when I try to install it, the same error message comes up).
I’m running Windows 7 pro and Articulate Presenter 09 in case this helps…

Any help would be great.

Marion June 1, 2010 at 2:10 pm

Dave, me again. I did some research and found out that I needed to upgrade to Studio 09. It’s all working now, no error messages – yeay!
Thanks
Marion

erica June 4, 2010 at 7:12 am

Hi – We are using Articulate Studio for the first time and are having a strange problem with our custom skin menu. We’ve created four modules using the same custom skin. The first worked perfectly but later ones have developed menu problems eg a menu link doesn’t work or the title of the section appears blank in the menu but the link works. The problem seems to focus around one particular slide but different ones each time. Sometimes inserting an extra slide has fixed this problem but not always. Any advice or suggestions much appreciated! Thanks.

Dave Mozealous June 4, 2010 at 7:16 am

Hey Erica,

I haven’t heard of that happening before…

Have you thought about posting it to our SDK forums here:
http://www.articulate.com/forums/articulate-presenter-player-sdk/

Might help if you could also point to an example of this happening…

-Dave

Sarah June 15, 2010 at 7:51 am

Thanks so much for sharing. Is there anyway to test the templates before assigning them within articulate to see if your code works the way you want it to?

Deepali June 21, 2010 at 3:26 am

Hi Dave,

With your help, I have created many articulate skins so far :) Thanks so much for the tutorial again…

I have just been coming across a very weird problem that is just not going away!!

I enable seekbar… A slide time is say 5 seconds… The slide completes playing… Then I get the seekbar to say 2 seconds and using play button, try to replay… It doesnt let me! It starts playing the next slide… Strangely this happens only after the slide has completed playing once. Not if I try to pause and replay before that! I have tried almost every approach but no help.. This bugger wont budge… Any ideas??

Thanks!
Deepali

Dan Reid June 21, 2010 at 10:50 am

Hey Dave! Me again! :) I have a few skins that are coming along nicely – ended up having to extract the Attachments from the XML with my own code, but it works pretty good! Wish there was a simple SDK function to get each attachment (title and link) in actionscript, but making my own gave me a little more insight into how it all works – so it’s all good. :)

And of course, another question… :)

How would I reference the presentation area, so that I can set the x,y position, and the width and height? Some of the skins I’m getting overlap the presentation area, and if I could just position the presentation area manually, I can match it all up perfectly! :) I’d rather do that than force our graphic artist to make everything completely square, with a thin top and bottom margin. I like some of the skin graphics I’m getting, but it’s practically impossible to move the graphics around in a way that it looks right, and not cover up key areas of the presentation area. If that makes sense?

Also… (always an also!): I don’t know if this is possible – but I’d like to reference the background that Articulate puts in, from the powerpoint file, so that I can get rid of it so my shell’s background image (watermark, etc) shows through. Is there a way to reference the background image/movieclip to remove what Articulate puts in? Not even sure this is possible, but figured if it’s possible, this is the place to find out.

Dave, you’ve been the ultimate reference, and assistance and helped me out a lonnnnng way already creating these custom skins. I know I’m not alone in being grateful for all your help! Thanks!

Dave Mozealous June 22, 2010 at 8:30 am

Hey Sarah,

Yes there is. You can copy your custom skin SWF, your ast_remote.swf, and your custom player xml file into the published \player folder and that should allow you to test it without installing it

-Dave

Dave Mozealous June 22, 2010 at 8:33 am

Hi Deepali,

Sorry, no I don’t have any ideas. I haven’t tried to create a seekbar for mine, so I would just be venturing guesses.

You might want to try posting your question in the SDK forum to see if anyone has any suggestions:
http://www.articulate.com/forums/articulate-presenter-player-sdk/

I was out on vacation the last week, hence my really delayed reply.

Hope this helps.

-Dave

Dave Mozealous June 22, 2010 at 8:37 am

Hey Dan,

Glad I can be of help.

Unfortunately for these questions though I might not be the best resource. Have you thought about posting the question in our SDK forum here:
http://www.articulate.com/forums/articulate-presenter-player-sdk/

Reason I suggest that is that those people are usually much better ActionsScript/Flash people than I am and likely are going to come up with better solutions to your questions in Flash. As far as our SDK goes, we don’t have specific methods or anything to do expressly what you are looking for, but my guess is some people might have some creative suggestions for what can be done in Flash.

-Dave

Deepali June 22, 2010 at 8:06 pm

Hey Dave,
Thank you… :) I ll definitely try posting the query there!
Deepali

Ajay June 24, 2010 at 11:14 am

Hi Dave,

I like this custom skin idea. I am impressed. But how can we create custom Menu ?

You can checkout the sample here.

http://elearningbrothers.com/announcing-articulate-skins-awesome/

Thanks,
Ajay

Dave Mozealous June 24, 2010 at 11:31 am

Hi Ajay,

I am not %100 positive how they created that because I haven’t tried to create a custom menu before. But if I was going to do it, I would probably use the ArtAPI command GetPresentationData() to get the Presentation data, which includes the slide titles, and then use that to populate the menu.

Hope this helps.
-Dave

John June 25, 2010 at 4:29 am

Hi Dave,

I am trying to get in to skin development and thanks for for your site on how to start.

Is it possible for the user to turn the Background sound (the playlist) On and Off through the skin development. I understand that the sound can be as with you Blog Player. If so what ArtAPI do I use?
John

Dave Mozealous June 25, 2010 at 6:33 am

Hi John,

There isn’t any native function for muting just the playlist audio…you can mute the entire audio, but not just playlist.

That being said, you might want to check with other users in the Articulate Presenter SDK forums to see if they have any ideas:
http://www.articulate.com/forums/articulate-presenter-player-sdk/

-Dave

John June 26, 2010 at 6:58 am

Thanks Dave for you reply.

Can you tell me how to syntax a ArtAPI statment in the Flash Action Script for the:-
GetSlideInfo oSlideInfo.nPlayListId
I am trying to show if the current slide has a playlist set to -1 OR 0
Like you have with the CurrentslideCount
John
PS Do you think I would learn more if I bought the SDK from Articulate?

Dave Mozealous June 27, 2010 at 6:30 am

Hey John,

It would be something like this:
var ArtAPI = _level0.ArtAPI;
ArtAPI.GetSlideInfo oSlideInfo.nPlayListId;

Yes, you would learn more if you got the SDK from Articulate…the SDK provides sample code and a full list of the API info.

-Dave

Steve Nixon June 28, 2010 at 12:09 pm

Hi Dave, I would like to take the file you have provided here and use it as the basis for another skin. The question I have is: How does the full screen button behave with the Articulate left hand side menu? Does this design work with that or is it just what we see here?

Very best and thanks for the great tutorial – much appreciated!

Steve Nixon
Senior eLearning Developer
ADP Canada

Steve Nixon June 28, 2010 at 12:17 pm

Sorry I just noticed the FLA I downloaded doesn’t have a full screen toggle button – is that an FS command? Sorry I’m way behind with my actionscript. That is probably an ancient term.

Best, Steve

Leave a Comment

{ 7 trackbacks }

Previous post:

Next post: