Updated: May 21, 2010 – Lesson I: Making Your Own Custom Articulate Player
Actually, I started out with hopes of developing my own Articulate Engage Interaction. About half way into the SDK (Software Development Kit) documentation, I realized it was a bit over my head just yet. So I turned my attention to the building my own player instead.
Just about that time, I came across Dave Mozealous’ blog titled “How I created a custom Articulate Presenter skin in less than an hour.” First thought that came to mind was, “Yeah right, unless you’re a seasoned pro at programming!” I’m not new to Flash or HTML, but Dave’s article along with supporting Screenr screencasts inspired me to give it a try. Not to mention the huge kudos for answering all my questions!
Following his directions…walla! My first custom skin!
[iframe http://learnnuggets.com/resources/skin/player.html 490 320]
At first glance, this can easily be done in Flash with simple buttons, but it’s a real-live-honest-to-goodness Articulate player published right from PowerPoint! It’s nothing to write home to Mom about, but I am excited on several accounts:
- I did it!
- Anyone can do it!
- The possibilities are endless!
I’m a graphics guy so the literal term, “skin” to me is the exoskeleton or the outer graphical look and feel of the player. I can design a thousand skins, but I was more interested in the framework. The Player. The guts!
I know myself well enough to know that if I understand what’s going on under the hood – the code and how it all stitches together and communicates, the rest is gravy.
This is a VERY basic custom player. Many of the default Articulate player attributes and functions have been turned off. Ya’know…crawl, walk, then run. Now that I have the basic infrastructure in place, I’ll be using this player (v.1) as a foundation to build onto. Here is my unofficial plan (in no particular order):
- Seekbar
- Zoom toggle widget
- Menu
- Tab bar
- Tool bar
- Logo panel
- Audio volume slider
Not to rewrite Dave’s article, but I want to chronicle my own development process. Stay tuned for a tutorial series on how I put mine together:
- The tools and setting up the project
- The skin: Designing and building the grapics
- The coding: ActionScript and XML
- The package and publishing: File management and the .artpkg file extension
Until then, give Dave’s article a try!
Updated: May 21, 2010 – Lesson I: Making Your Own Custom Articulate Player
Kevin the skin looks fantastic! Way better looking than mine. Congrats on getting this finished and it was a pleasure helping you out on this.
-Dave
Thanks Dave! If not for your patience with all my questions, I’d still be scratching my head. As for the way it looks – that stuff comes natural to me like coding is for you 🙂 Stay tuned…in the next series, I’m going to write a tutorial on how to build all the graphic assets used in this player. With your coding knowledge and some NuggetHead graphics, we should build a player with all the pieces and parts!
Hey, that is great. I look forward to your series.
Thanks Jim! I hope the series measures up and will be helpful for others to follow. Should have the first chapter up in a few days
Wow it looks great!
Super job Kevin.
Thanks James! Studying on the seekbar now. Got any tips?
Wow, you two did a great collaboration job, and Kevin, kudos to you for diving in!
I’m very impressed!
@jenisecook
Thanks Jenise! I must admint it wasn’t much of a collaboration as it was student/teacher. Dave kick-started me with his article and then entertained a couple weeks worth of my questions 🙂