Free Community Articulate Skin (Update)

Thanks to all great feedback I received from community I have made a few changes and posted a new .artpkg
This update addresses two issues:

  • Engage content was not scaled/positioned properly.
  • Mysterious green "shadow" under the outline.

Keep the feedback coming!

I am excited to post my first Articulate custom skin for the Community.

I developed most of this skin a few months ago but held of finishing and releasing it until Articulate rolled out their new .artpkg format.
First, some features of the skin.

  • It provides more room for the content.
  • The outline ‘ticks’ off content your students have visited.
  • You can make it any color you want.
  •  It creates tabs along the top just like the standard skin.
  • It’s cool looking (OK I may be biased)

Overall, the experience using the Articulate SDK was straightforward. With no major bumps along the way. I will say that I used several ‘undocumented’ features of the SDK to accomplish all this. In some cases resorted to what I am best at… hacking apart code to make it better. For instance, there is nothing in the SDK to tell you if a slide was already viewed, but Articulate is tracking it, I just had to find out where.

One problem I had in particular was with the Colorizer. It seems that although you package a custom template xml file to go with your skin it might be overwritten (at least parts of it) when the Articulate user alters the colors and then saves the template. I found a way to force what I needed to happen via ActionScript to ensure things looked the way I wanted.

Another small issue I had was simply in the zipping process. When we upload courses to our LMS at the office we have to zip the folder that contains the files. Therefore, that is how I zip by habit. Strange stuff kept happening when I tried to install my .artpkg. Turns out you should select all the files then zip. Again… this probably only happened to me cause of our process at work.

I want to thank @articulatebrain and @dmozealous along with all the folks at @Articulate for helping me with the new format and QAing the final product, they are a pleasure to work with. Now that I got my hands into it, I can see a lot of good stuff to come. I also will be making some feature requests for the next version of the SDK!

I am sure there are limitations to this skin. Right off the bat, I can think of a few… and I am sure some of you have a wish list.
I created a thread in the Articulate Forums to help track any feedback, ideas, or issues.

If you would like some customizations, specific features, or even your own player feel free to contact me. My rates are very reasonable :-)

Download and enjoy: glassyPlayer.artpkg

Click the screen shot to view a working demo:

A quick screenr on how to install the skin and change colors:

Dave Mozealous created a very good screenr explaining the new format:


Hi, the max media size for the regular Articulate player is 980x560.

What is the max size for videos on your skin ? The screen real estate seems much bigger.

Thanks for a great asset.

I am trying to expose the completion status of a slide so that I can "check off" a segment in the the Course Outline. I also want to store this info in a CMS (Drupal). What is the undocumented function that Articulate calls when a slide or course is complete? I've written the "back end" of this with Drupal + Services & AMFPHP.

Thanks for sharing this skin - It is very helpful!

Unfortunately Articulate does not trigger any exposed function/event when a slide is complete... the best you can do is keep checking the player's status within your code.

Love this player - great work! I like the simplicity of the design and the way the outline can be hidden and howitr animates in and out. I've been using it in conjunction with the Powepoint and Engage templates from and have got some great results. The blue in the player fits well with the templates I have used. I've finally got some resources without the Engage black header bar and with a great looking glassy player :)

Only one thing:

Its possible Change the name of the 'Outline' button to 'Menu'.

Sorry for my english.

I really like your skin and agree it looks cool for the user

I Most like the following:-

a) It has a clean uncluttered interface for the user
b) The navigation buttons are user (human) friendly and display better than the std. articulate ones.
c) The larger screen available for the presentation to the user.
d) The fact I can manipulate color to match my html window.

Four comments for possible improvements.

1. The skin does not seem to recognize when I have marked a slide as 'Locked' It would be handy to include this function which is available as part of the articulate skin. The articulate skin displays a small lock image when the mouse hovers over the arrow(s) forward buttons (navigation buttons)! In these cases the developer would have provided a navigation arrow or button in the slide if branching was being implemented.

2. the Message that pops up when you have restricted the user to current slide or previous and he clicks the navigation arrow forward before the whole slide has been displayed. There is no mesage text to warn user of the reason the message has popped up? If you could Populate the message box with a suitable text information.

3. Change the name of the 'Outline' button to 'Menu'. In addition make this button smaller so that it does not encrouch on the header of slides being displayed in 'standard' or 'No sidebar' view.

4. The larger navigation arrow does not change to show the pause button 'look' when the slide is displaying - although the bar does show you how far it has gone in displaying the slide. (When displaying 2 or more slides in "Preview mode" (Articulate) it works properly for the first slide")

Thanks for a very nice tool!

I love these skins for articulate, but the zip drives don't have the gray articulate icon that allows me to intall the skin... does anyone know why this is occuring?

Sometimes when you download the file Windows 'senses' that it is a zip file and changes the extension. You can rename the file to change it back to .artpkg

I wasn't sure what you guys ment by "renameing" the file... but it worked thank you!

Does anyone know how to obtain the free Kineo Articulate skin?
Last year you could download it for free.

best regards

Hi, i install your skin on my proj and work well but when i switch from one slide to another through outline some slide rest white wihtout play of my swf file(all my slide are swf imported).
can you help me please? Seems that when i click on title on outline the command goto slide don't work very well.

Thank you

Is it possible to change the word "Outline" to the word "Menu"?

Hmm sorry that functionality is not built into this skin... stay tuned we have some new ones on the way.

When I double click on the artpkg file, I only get an error massage saying: There was an error installing this package"

I have the issue where the download appears as a zip file. I've changed the extension and placed the artpkg file in my C:\Program Files\Articulate\Presenter\templates; is this where I should be saving it? It is still not appearing as an option in my Player Template window as shown in the screenr demo. Thanks for your help and for sharing this groovy new skin!

Hi Mindy,
After you rename the file you should double-click it. Articulate should recognize it and install it.

When I download (excuse for my bad english) it's not a .artpkg but a Zip files and I cannot install it. Can you send me the glassyPlayer.artpkg directly at my email adress?


It's a known problem with Articulate... scroll down a bit and you'll see the solution.

Thanks it works!

Just downloaded and am using. Like the layout and the transitions on the menu. Very exiting using new skins such as this and the one Kineo released. Thanks for sharing.

Couple things:

The outline button top left obscures the title on engage interactions on my output (IE 7) and there is sometimes a green 'shadow' which loads for a fraction of a moment ahead of an engage interaction.

Hope that helps you track bugs/issues - can provide screen shot of first issue if needed.


Thank you for the kind words.
Please do send me a screenshot, or even better use to show me whats happening with the engage.
I think I know whats going on with the green "shadow" I'll get to work trying to fix it!

Hey! Looks pretty cool! I like the fact that it has more area for the content. One thing I noticed when viewing the demo, I clicked "Exit Now" and it killed Firefox. I didn't test it on IE or any other browser. But overall, definitely see a future in custom skins coming our way.

Thanks for the kind comments and heads up on the Exit button. That is Articulate functionality... I didn't mess with that part.
I hope too see a bunch of new skins as well.

I am trying to downlaod and install the glassy player and my options do not look like your screener presentation. I use microsoft vista an I can only save or open the zip folder, how do i save this as demonstrated? Thank you

Yeah... it's a known problem
Basically you just need to rename the downloaded file. should be glassyPlayer.artpkg

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Images can be added to this post.
  • You may use [inline:xx] tags to display uploaded files or images inline.
  • You may use <swf file="song.mp3"> to display Flash files inline
  • Twitter-style @usersnames are linked to their Twitter account pages.
  • Twitter-style #hashtags are linked to

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
    _  _  _  _       _           _                                                 _  _      
_(_)(_)(_)(_)_ (_)_ _(_) _(_)(_)
(_) (_) (_)_ _(_) _ _ _ _ _ _ _ _ _ (_) _
(_) (_) (_)_(_) _(_)(_)(_)(_) (_)(_)_(_)(_) (_)(_)(_)
(_) _ (_) (_) (_) (_) (_) (_) (_) (_)
(_) (_) _ (_) (_) (_) (_) (_) (_) (_) (_)
(_)_ _ _(_) _ (_) (_)_ _ _ (_) (_) (_) (_) (_)
(_)(_)(_) (_) (_) (_)(_)(_)(_) (_) (_) (_) (_)
Enter the code depicted in ASCII art style.