Free Articulate Skins Series 01: Freestyle

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:

  1. Fit your imagery in the outer margin around the Articulate Presenter display area, and
  2. Make your PowerPoint background seamless with the skin

Screengrab of the output

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:

  • &nav=1,2,101,102

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:

Skin JPEG file

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:

(full size image here)

(full size image here)

Have a lot of fun! And I would love to see what people do with this…
Sasha

About these ads

6 responses to “Free Articulate Skins Series 01: Freestyle

  1. Hi Sasha,

    This is a great tool it opens up lots of oppotunity for different imagery in my e-learning courses.

    However, I do have a quick question: if I wanted to move the course title and slide title into the middle of the page instead of the top left hand corner – is this easy to do?

    Thanks for making these files available to all – I really appreciate this.

    Best regards

    Gemma

  2. Hi Sasha,

    I’m attempting to due essentially the exact same thing as you are doing here, but with a custom designed skin that I built (instead of your “freestyle” skin). I’m not understanding how the “background swf” is being displayed or referenced by the skin and the power point slides. If possible, I’d love to take a look a the FLA source for the skin and the background swf.

    Thanks!
    Patrick

  3. Hi Sasha,

    I’ve think I’ve followed your instructions but my image is in the middle and your original skin is still on the outside.
    What might I have done wrong?

    Thank

    Mark

  4. Pingback: Free downloads | Sasha Scott Limited·

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s