DISCLAIMER: This is an experimental skin that does NOT have all the features of the standard Articulate Player – so it may not work as you want it to.
When developing Articulate skins, it can be quite frustrating trying to:
- Fit your imagery in the outer margin around the Articulate Presenter display area, and
- Make your PowerPoint background seamless with the skin
I decided to find a solution, so here it is: the Series 01 Freestyle Articulate Skin.
The trick here is that the skin SWF references a JPEG file – and the background SWF file references the same file.
As well as creating a seamless “full picture” skin, because the JPEG is externally located, you can replace it with one of your own. So you can create your own design, using only a graphics program that’s capable of creating a JPEG.
And it’s easy…
INSTALL THE SKIN
Instead of sticking with the fully manual approach I used for the previous two skins (see previous blog posts), I decided to take advantage of the ARTPKG feature created for Articulate. This allows community player skins to be shared. Here’s the ARTPKG:
Note that it’s a ZIP rather than an ARTPKG file (as this is a format that’s not generally allowed as a download by browsers), so simply download it and change/rename the .zip extension to .artpkg. Double click the ARTPKG file and it will automatically be installed into Articulate Presenter. When you use PowerPoint to publish your Articulate Presenter presentation, you will have a Player Template available called freestyle.
The background SWF needs to be installed separately. Here it is:
Extract/unzip the SWF and navigate to your published presentation’s data/swf folder. You’ll see one, or maybe more than one background SWF named something like bgd1l1.swf. Replace all these files with this new provided background SWF file, making sure you rename it with exactly the same filename(s) as the deleted file(s).
CUSTOMISE THE NAVIGATION
When publishing, the skin creates a file in the /player folder called nav.txt. This specifies the order of slides, and is intended to be edited manually. For example, if you have a single slide, then a PowerPoint-based interaction using 100 slides, then an Engage slide, then a Quizmaker slide, you could get the skin to treat this as 4 slides rather than 103 slides by editing the nav.txt file to read:
The page counter will read 1/4, and the navigation will be 1 > 2 > 101 > 102 (and vice versa if you’re moving backwards).
Alternatively, if you delete this file, the skin will simply read in the default number of slides in your presentation and navigate between them one by one.
CREATE YOUR OWN SKIN
The really good feature of this skin is that both the skin itself and the background file(s) that you manually pasted in the data/swf folder refer to the same JPEG – and this JPEG is available to replace at your leisure. Just take a look in the /player folder after publishing, and you’ll find it:
Just see what happens when you replace the file (and hit Refresh on your browser). It needs to be:
- 1005 x 642 pixels
- 72 dpi
- Exactly named “skin.jpg” (not .jpeg or .gif for example)
This opens up just about all the possibilities you can think of with regard to how your skin looks. You can use a photograph like this one from Zanzibar – or anything else. If you want a solid colour, you can simply create a JPEG of a single colour. Or you can create a gradient. Or an illustration. Or a scan of a sketch. Or a 3D rendered scene…
Here are a couple more examples to play around with:
Have a lot of fun! And I would love to see what people do with this…