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:
- 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).
- Build an ast_remote.swf file to load our custom skin on top of the Articulate Presenter player
- 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.
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.
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.
So now let’s get to creating our Articulate Presenter Skin Package…
Download my Blog Player.artpkg file here so you can follow along.
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:
- Started PowerPoint
- Went to Articulate>Player Templates
- Added/Removed options that I wanted included in my Player Template
- Select File>Save As…
- 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 ) - 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.
- 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.
{ 96 comments… read them below or add one }
← Previous Comments
Next Comments →
Hey Steve,
Right, my player doesn’t have a full screen button…and I could be wrong, but I think I recall that the ability to go to full screen via the Flash Player was only introduced in ActionScript 3…and our current player only supports ActionScript 2. That being said you might want to post your question here:
http://www.articulate.com/forums/articulate-presenter-player-sdk/
And see if someone has a suggestion for going full screen in ActionScript 2….
-Dave
Hi Dave, I have been using your tutorials for creating custom skin and I’m having trouble with my skin loading. The progress bar freezes half way across so I am groping to find out where I went wrong.
If you have time I have two questions:
1. The XML file “blog player.xml” has only one adjustment to it that you have already made which made the community player active – is that correct? Were there any further customizations necessary?
2. Regarding the GUID number that we need to create for our “package.xml” file: I found a generator online and created a number. Do both the GUID and the version number have to change everytime you create a new version for testing?
Here is the link for the generator:
http://www.guidgen.com/
Many thanks for your time again,
Steve (not-a-programmer) Nixon
Hey Steve,
My first thought would be that the reason it isn’t loading is that the ast_remote.swf isn’t pointing to the correct custom player. If you got a link you can point me to I can check it out.
To answer your questions though…
1. Yep. That’s it.
2. They don’t need to both change every time you create a new version for testing. Technically the guid should never change, and the version number only needs to change if you are doing an upgrade…You should actually just be able to keep the same version number and keep reinstalling it. The version number is used by the installer to tell the installer what to do. If it is the same version it will prompt you to reinstall, if version is higher it will prompt you to overwrite.
Hope this helps.
-Dave
Hey Dave-
Thanks for this tutorial. I have followed each of the steps. I am wondering if you or anyone else has run into the issue of the package not loading in Articulate? When I double click on the package to install it I get this message, “Would you like to install version 0?” Then it says it is successful but it isn’t showing up when I open Presenter. Any ideas? I have changed the version number in the player.xml file but it isn’t picking up the title or the version. Any Ideas?
Thanks!
Tara
Hey Tara,
Initial thoughts would be that…
1. You might not be using Articulate Presenter 6.2 or later…You can check via the Help>About menu in Presenter.
2. The GUID listed in the package.xml matches the GUID of an existing installed custom skin.
When the custom skins are installed, they get installed in this location on your system (assuming Vista/WIN7 for OS):\AppData\Roaming\Articulate\Presenter\CommunityTemplates
C:\Users\
If you check there, do you see any folders?
-Dave
Very nice skin Dave. Thanks for the download and the tutorial. I have Flash, as a part of CS4, but don’t I use it. However, you’ve just given me enough confidence to consider jumping into skin development myself. The SDK seems reasonably priced too.
Thanks again..!!!
Dave, I have 2 questions, if you don’t mind.
1. I just noticed that your embedded example above auto-plays, despite having the play button in the screen area and on the controller in passive position (i.e. ready to be clicked to play). How can I fix that?
2. I like how you’ve directly embedded the playershell.swf file into this page. I viewed the source code on the blogplayer.html page you link to. But, I’m still unsure about how you’ve approached the position of your upload to your server and the relative path of the playershell.swf file. Would you mind explaining what you did there?
Many thanks, as always. You’re a legend..!!
Sorry Dave, I’m a dufus. I just saw the Previous Comments link on this page and saw that there were 50 additional comments on another page and realized that my second queston above was answered already. In that answer, you pointed us toward the iframe embed solution for WordPress. Thanks. You also said you were hoping to post on different embedding methods. Did that post ever come to fruition? Thx again..!!
Dave, after I installed your blog player skin I realized that it’s just your demo that auto-plays. So, please ignore Question 1 in my previous post. Sorry.
After publishing with your Blog Player skin, I’m even more interested in the embedding technique you used and the vast difference between the source code of the presentation I generated using it and the source of the example page you point to [ http://www.mozealous.com/blog/blogplayer.html ]. Perhaps you’re using the WP plugin? Thanks again..!!
Hey Shayne,
Sorry for the delay in getting back to you.
1. Yeah, this actually seems like it might be a bug in my player, but couldn’t figure out a good way to fix it in my short time building the player. Essentially what I try to do is set the player to pause on start (after a 250 ms delay), but I think when the SWF loads slowly sometimes that code executes too soon and doesn’t pause the player. In the Flash file you can bump that time to like 1 second or something and it should fix it.
2. Yeah, easiest way is just use that WP plugin. I never got around to blogging about the solution I used because it is way messy. The WP method is probably the best.
Good luck and let me know if you have more questions.
-Dave
Hi Dave,
I have used your skin as a basis for a number of other customized skins but have just found a small problem. The next and back buttons overlook any branching constraints that I place in Presenter.
For example, if I’ve set up a branching scenario where slide 1 proceeds to slide 4, when I am on slide 1 and click the Next button it takes me to slide 2, instead of 4.
The ActionScript for the Next button is as follows:
ffButton.onPress = function()
{
ArtAPI.PlayNext();
playButton._visible = true;
pauseButton._visible = true;
cntrPlay._visible = true;
}
Any help woudl be appreciated.
Thanks,
Kiran
Hi Kiran,
Using the SDK you could look at the Presentation.xml for the current slide then use that to determine where you should branch too. The data should all be in the presentation.xml.
Hope this helps.
-Dave
On the note you have within this page that states: “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.” (http://www.mozealous.com/how-i-created-a-custom-articulate-presenter-skin-in-less-than-an-hour-2/)
Does that mean you expect the new,next Articulate Presenter to support AS3 other than just inserting a webobject?
Thanks,
Jason Smith
Hi Jason,
Yes, the next version of Articulate Studio will support AS 3.
-Dave
Hi Dave, any ideas how to add a close button into the ast_remote file that will close the presentation? I can obviously add the button but not sure on the code?
Any ideas?
Thanks.
Pete.
Hey Pete,
I am not really a Flash expert, so I don’t know the code to do this, but I believe what you would want to do is use fscommand and then close the window through JavaScript.
Hope this helps.
-Dave
Looking forward to the AS3 support. I expect there will be some banging improvements all around!
Hello Dave,
Thanks for the tutorial! I was wondering if you knew of a tutorial on how to create a progress bar in AS2 (or even AS3)? I also stink at AS and would appreciate any help.
Thanks,
Travis
Hey Travis,
I unfortunately don’t…but I see you posted in our forums asking if others have…That would have been my recommendation to you, is posting in there.
-Dave
Hey dave, I’m getting sort of the same issue as Tara, after completing all the steps I try to open the .artpkg and a window says “Would you like to install version 0?”, but then after saying yes another pops up saying “There was an error installing this package.” I cant find where the error could be. I even tried publishing my player under the same API_Tester.swf name as you and only replacing that file. still the same message… help. please.
Brandon
Hey Brandon,
Any chance you can upload the package to me so I could take a look?
http://upload.articulate.com
Enter Subject: “QA Upload” so that it routes to me.
Then I’ll take a look.
Hey Brandon,
It looks like the issue is you zipped up the entire folder when creating the artpkg file. Just zip up the contents of the folder, not the actual folder itself.
That should fix it.
-Dave
Thanks Dave!
hi Dave!
Thank you so much for this demo!
I tried to modify the swf skin with flash but cannot get the slide counter to be displayed.
More precisely, if I just re-publish your API_Tester.fla file (flash CS4, action script 2, flash player 7), I get an error message about “font embedding”. I tried to embed fonts but in both cases, the slide numbers won’t display (or disappear very quickly) in the player.
could you give more details on the flash publishing options you used?
thanks again, really…
Hi Marie,
I am not a big expert on font embedding in Flash, but you might want to try changing the font for the counter to something more generic like Arial or something that everyone should have and see if that works.
-Dave
Hi Dave,
thanks for this useful post.
Unfortunately I have some problems with it.
Maybe you would be so kind and help me?
I just downloaded your sample files, changed the colour of one button, saved the whole thing, changed guid in package.xml and my “template”.xml, changed the ast_remote to the right player.swf and everything worked great.
Except…
The only thing that won’t work is the displaying of the slide counters.
As I didn’t change anything in the code, I’m not sure where the problem is. I have no Error message.
First the numbers are shown very shortly (just in the beginning, the 00) and afterward they are unvisible.
Hope you have an idea?
Thanks
Johanna
Hi Johanna,
You might want to try changing the font type of the numbers. My guess is I used some font that you don’t have on your system.
-Dave
Great post. I’m no Flash expert but ‘m going to have a go at following your instructions I’ve used some useful Presenter templates from Articulate Templates before but it would be great to make my own modifications.
The template site I previously mentioned has now moved – Articulate Templates. Just an update.
Hi,
I just downloaded your artpkg
Turned it into a .rar
Extracted it
Then went inside this folder (in which I extracted in last step)
Selected all and added them to rar
Turned it into .artpkg
now when I try to install this it prompts,
” would you like to install to install version 0″ (even though it is not version zero)
Even if I do install it I get a message ” There was an error during installing this package ”
p.s.- I have tried using different guid and I do have Articulate presenter 9.0
Also I don’t quite get how flash is calling ArtAPI. Is there some setting that needs to be done first
Hey Rajat,
Well a couple things could cause the problem:
1. That you are RARing the file, and not zipping it. They need to be zip files renamed, not rar…
2. The contents of the package aren’t at the root of the zip file. They shouldn’t be nested in a folder or anything.
If neither of those help you might want to contact our support department at http://www.articulate.com/support
About the ArtAPI, you might also want to post that in our forums to see if you can get some info, or ask our support department for access to the Articulate SDK.
-Dave
Thanks for the replay just a tiny little query is left which might seem stupid to you
Query is
Is it must to have an Articulate SDK for calling ArtAPI
Thank you again
Hey Rajat,
No, it is not necessary to have the SDK to call the Articulate API. However, the only place you will find the documentation is in the API.
-Dave
This tutorial was a great help!
Just wondering if you know of anything out there that details the specifics for creating a menu? I’ve got the SDK and it offers some guidance, but there’s not much in terms of specifics.
If you can point me in the direction as to where I can find anything related to creating menus within a custom skin, I’d really appreciate it.
Thanks so much!
Thanks Dave.
If you are wanting to build your own custom Articulate skin this tutorial is absolutely vital! I am quite good at the graphics side but struggle with coding. I realise you might “suck at Flash” as you say, but joining this tutorial with Kevins tutorials on LearnNuggets (www.learnnuggets.com) and one can work out pretty much everything. Kevin has admitted himself, he sucks at finishing! His tutorials have got as far as building the Flash bits in intricate detail, but so far nothing on what to do next! This is where your tutorial comes in!! Perhaps a little bit more detail would have helped someone who struggles at coding like myself. For instance, if you are pretty green at Flash, as I am, I takes a while to work out where the code is in the ast_remote.fls file. But I found it, and the experience taught me loads!
One question though. Do you know if there is a way to completely replace the original Articulate skin, or can you only cover it? I have the SDK, but not the Platinum Membership Plan. The SDK and its limited docs only allows me to add a few menus,tabs, and controls, not replace existing ones (I think!). Do you, or anyone out there, know if the extras I get with the Plan will allow me to entirely replace the original Articulate skin with a custom one?
Paul.
Hey Paul,
Via the SDK the only thing you can do is cover the existing skin, and the SDK and the docs that you have are the only ones we got. I posted this post as a supplement to the existing docs to show what else can be done.
You might want to post here though:
http://community.articulate.com/forums/61.aspx
As that will get you advice from the entire Articulate Community, and many of the people involved in that forum are way more knowledgeable about what is possible with hacks/tricks than I am at this point.
-Dave
Hey Dave,
My heartiest thanks to you for writing this superb blog. Your steps helped me to create a custom shell with very ease. You are doing a fantastic job for the Articulate community. After implementing your steps and with teh help of Articulate forums I was able to cross over all the issues I encountered to develop a perfect cutom player!
What needed was a good start and your blog just gave that perfectly!
As ever,
VK
Hi Dave,
thanks for this job, i’ve question about QuizMaker, can i use the player template for QM ?
Hi Guillaume,
Currently Quizmaker does not have an SDK, so these instructions only work for Presenter.
-Dave
Hi Dave,
Thanks for sharing these steps. I followed your procedures to the “T” but once I install the .artpkg file it says it’s installed but I cannot find it in the Player Templates dropdown. Shouldn’t it listed there?
Thx!
Hey Joanna,
You might want to contact our product support department at:
http://www.articulate.com/support
or post it in our forums to see if anyone has any ideas.
-Dave
Hi Dave:
I am using Flash CS5, and I changed your API_Tester.fla file appearance only and published in action script 2.0. I am getting error after installation. I followed your steps, however, I am still getting this error.
Could you please help. I am not Flash Programmer.
Harjinder
Hi Harjinder,
Want to drop a note to our support department at http://www.articulate.com/support and see if they can help? Or post in our community at http://community.articulate.com
-Dave
Hi Dave:
I was able to make it work this. However, could you please give me codes or sample codes how to exit presentation in custom player.
Hi Dave:
Could you please help me also to find out a way to fill player screen with slide. Now slides play in the right and there is space empty in the left. I wants to fill whole player with slide.
Hi Harjinder,
Check out our SDK and API forum in our community here:
http://community.articulate.com/forums/61.aspx
They might be able to help you with that.
-Dave
← Previous Comments
{ 7 trackbacks }