To kick things off, a note on the words: “Player” and “Skin”. Some refer to it as the Articulate Presenter Community Player while others refer to it as a Skin. In my view, it really is both! The “Player” is all the mechanics, coding, and interactivity you develop, whereas the “Skin” is your custom graphic overlay. Whatever you choose to call it in the end, you are still developing the “Skin” and the “Player.”

In the first two lessons we’ll be concentrating on the “Skin.” The next two lessons we will be developing the “Player.” Any follow-up lessons that may continue in this series will be adding new features and/or functionality to this one we build here.

Before we begin though I want to warn you and apologize. This is a long read.  My goal is not only to show you how to build a Custom Articulate Player, but to offer some educational tips and pointers along the way.  Of the thousands of on-line tutorials I’ve read in my day, I always find myself wandering off in search of a term or an explanation to a topic the author referred to in the tutorial. Why couldn’t they simply provide a link to more information for additional leisurely reading? That said, I tend to digress off topic at times to explain things in a bit more detail than I should or that you care. And for that, I’m sorry.

Now that the housecleaning is out of the way, let’s get started!

The tools needed and setting up the project:

---

Here’s what the final output will look like when we’re done. This is simply 5 PowerPoint slides published in Articulate using the custom player we will build in this series.

This player will have the ability to turn on and off audio, although in this example I did not record any. Also, it is set to advance “By User” when publishing in Articulate. In a later series, I’ll add the seekbar and timer to this player to allow advancing either By User or Automatically.

Keep in mind this is very basic, but more importantly it’s the foundation you can build on later!

[iframe http://learnnuggets.com/resources/skin/player.html 490 320]

---

TOOLS:

The Articulate SDK:

The first two lessons do not require the SDK as we are simply building the ‘skin’ for the player in Flash. In order to develop the package for use with Articulate you will need access to the SDK. If you have joined the Platinum Membership Plan, the SDK is free of charge and merely requires an email request. If you don’t have the plan, you can purchase the SDK for $199 (as of this writing). Find more information about the SDK and/or the Membership plan here.

Adobe Flash:

The Articulate Player is published to the output file extension known as .swf or phonetically pronounced, “swiff.” Hence, the main tool for building a Custom Community Player is Flash. The ActionScript for the player is written in version 2.0 so any version of Flash back to MX 2004 (v.8) should be fine. I just recently upgraded to Flash CS4, but I built this player initially in Flash 8 which is several versions back. So, if you are using any of these Flash versions you should be fine: MX 2004, Flash 8, CS3, CS4, and my guess even CS5.

In Lesson II, I’ll show you how to build all the graphic assets used in this player developed directly in Flash. However, there are many graphic editing programs such as Illustrator, Fireworks, etc. that you can build the graphics and then import them into your Flash project. For this series though I’ll be concentrating in Flash to keep things nice and simple.

Adobe Dreamweaver or any Text Editor:

We won’t need a text editor until Lesson III as we will be making adjustments to the .xml files. I use Dreamweaver simply because it’s part of the Adobe Suite that I use, but Notepad or Wordpad will work just fine.

---

SETTING UP THE PROJECT:

First thing I do is set up the project taxonomy. It’s helpful now to think through where your project will live. As we go through these lessons I’ll show you where certain files need to be saved as it will matter at times. Other folders within this taxonomy may be added as a way to simply manage associated files to this project.  For now, simply create a directory to keep all your files. Later in this lesson I’ll explain this more in detail.

Opening a new Flash document/file:

As mentioned, the first two lessons we will be working in Flash. For that, we need to set up the stage environment and frame rate. This is a key step!  The last thing you want to find out is the “size” of your output is not what you intended after all the work you put into it. Resizing after the fact will throw off all your assets in relation to their x-y coordinates. Let’s get started! Open Flash and create a new Flash document/file.

I recently upgraded from Flash 8 to Flash CS4 which is a difference in 3 versions. Adobe CS and CS2 was about the time Adobe acquired Macromedia and Flash didn’t get its next version upgrade until CS3.  Here are two images on the differences of opening a new Flash document. The first one is Flash 8 and the other is Flash CS4. In Flash 8, it is referred to as a “document” and in CS4 it is referred to as a “file” either ActionScript (AS) 2.0 or 3.0. If you are using CS3 or 4, open a new AS 2.0 file. If you are using an earlier version of Flash we’ll set the player and AS version in the Publish Settings dialog panel later in this lesson.

For now, let’s just get a new document/file open: File > New…

Save your project!

Working in Flash for a number of years, I’ve learned that getting in the habit of saving your project as soon as you open a new file will prevent potential frustration later. Depending on the type of computer you’re working on, processor, memory, etc. there is nothing more frustrating than losing your work due to a sluggish or locked up system…you know what I’m talking about!

Also, I strongly recommend not saving your project on your computer’s local drive. When you first install Articulate, by default a “My Articulate Projects” directory is created in your “My Documents.” I realize the convenience, but I’ve lost three hard drives in my day and it took me three times to learn NOT to save work on a local drive anymore!

If you’re working on a shared network, choose a location that you have access to. If you’re working from your own laptop or desktop, save it to a portable device such as a thumb drive. Or, if you wised up over the years like me, you may have a couple redundant hard drives separate from your computer 😉

Let’s save your work now: File > Save > myPlayer.fla

Note about ActionScript:

ActionScript is…well, a scripting language similar to JavaScript based on ECMAScript and is used to create all the fancy interactivity stuff. It first came on the scene as v.1.x which was very archaic and buggy. ActionScript 2.0 first appeared in Flash MX 2004, a scripting programming language. ActionScript 3.0 is the latest release first introduced in 2006 with CS2 and is an object oriented programming language. I digress, but if you care to educate yourself more on the history of ActionSctipt, you can read more here.

Workspace:

The next thing we want to do is set up the workspace. As mentioned earlier, we won’t be using a lot of what Flash offers but just a few panels. Flash is a powerful tool and has a lot of really great built-in components and set of editing tools. I’ve been using Flash for about 10 years and I still only use about 50% of its capabilities. That being said, there is no reason to be intimidated by this program. We will only be using a few of the panels.

Below is a list of panels we will be using, so if you’re familiar with Flash and have your own default workspace setup, then more than likely you’ll have these already in view:

• Tools
• Timeline
• Properties
• Library
• Color
• Align
• Transform

We’ll be using the Actions panel too beginning in Lesson III, but it is not necessary to open it now.

The image below is a screenshot of the workspace I will be using throughout this project. As mentioned, I’m using Flash CS4 so the panels look a bit different from earlier versions of Flash. I will assure you that what we will be covering can be done in any version of Flash using ActionScript 2.0.

Properties – Publish Settings:

The next thing we need to do is setup the stage environment, or the Properties of the project. We need to set the document/file is to ActionScript 2.0 (if not already), the version of the Flash player (output), and the frame rate. Also, the Articulate Custom Community Player is a standard size of 980 x 640, so we’ll need to adjust the default 550 x 400 stage parameters as well.

Below are images of both the Properties panel in Flash 8 and Flash CS4 which are slightly different. To ensure our document/file is set to ActionScript 2.0 and our output is Flash Player 7, do either depending on the version of Flash you are using.

Flash 8 – Click the Publish: [Setting…] button.

Flash CS4 – Click the Profile: Default > [Edit…] button.

Properties – Document Properties:

To adjust the size and frame rate, we need to open the Document Properties panel. Again, both versions are slightly different.

Set the document to the Size: 980 x 640 and the Frame rate or FPS to 12.

Refer to the above Flash 8 Properties panel image – Click the Size: [550 x 400 pixels] button.

Refer to the above Flash CS4 Properties panel image – Click the Size: 550 x 400 [Edit…] button.

Why those settings?

Flash Player 7:

Setting the output to Flash Player 7 will ensure your player will work on most web browsers. Even though Flash Player 10 is the latest version, not all browsers are updated to the latest version – especially corporate workstations. Adobe’s Flash Player Version Penetration chart shows 99.1% and 97.0% of mature markets using Flash Player 9 and 10 respectively, but again most corporate environments are typically 2 to 3 versions behind.

Although Flash Player 6 is the lowest player that will support ActionScript 2.0, Flash Player 7 will ensure your new custom player will work in your environment. If you’re interested in learning more about how all these versions play together, ActionScriptVersions.com is a very informative site.

ActionScript 2.0:

Simply put, ActionScript 2.0 is supported by the Articulate API. ActionScript 1.x is for the most part obsolete, and AS 3.0 is an object-oriented programming language and the syntax is a bit different.

FPS:

The ‘Frames Per Second’ or frame rate is how many keyframes in the timeline that will be read in one second. By default Flash sets the rate at 12fps. This is fine for simple interactions where the user is controlling the pace. As most know, Flash’s popularity began as an animation program for web banners and fancy motion graphics. Actually, Flash is widely used in broadcast animation today and I’ll bet some of your favorite cartoons on air today were developed in it! 24fps and even 30fps is common practice for those type projects. 12fps is fine as long as you don’t have any complex animations in your player, so for these lessons we’ll leave it at 12fps.

Size:

As mentioned, the Articulate Custom Community Player is a standard size of 980 x 640 pixels. The average computer aspect ratio is 1024 x 768 pixels. This size is roughly 95% of the width of and 83% of its height to adjust for toolbars, scrollbars, etc.  Not sure how Articulate came up with this size, but it works nicely.

---

SUMMARY:

In this lesson we took some time and got things all organized and setup in preparation for building the graphics and assets for our Articulate Custom Community “Skin” (we won’t start building the ‘player’ until Lesson III). If you’re new to Flash, I would encourage you to review the Help section that comes with Flash. There are several starter tutorials that come with the program to get you familiar with the environment and tools. I will also assure you that no matter how intimidated you may be about using Flash, I’ll walk you through every step!

Check this Screenr out showing all the steps we just covered!

Don’t worry. As we get into this series, I’ll be providing all the necessary source files for you to compare your work.

Okay, we’re all set for Lesson II to begin building the graphics for the “skin” of our “player.” Maybe we can get Articulate to call it a Community “SkinPlayer” or “Community PlayerSkin?” 🙂

One final note: I’m a wordy guy and the disclaimer at the beginning of this post I asked for your forgiveness. Now I’m asking for your help. If you see something incorrect or my spell checker failed me, please don’t hesitate to let me know.