Built-By-Burton

Building better code one byte at a time.

Introduction to the Articulate Engage SDK

With the introduction of Articulate Engage ’09, Articulate introduced the free Articulate Engage Community Interaction Software Developers Kit (SDK) to enable Flash programs to create custom Articulate Engage interactions.

So what the heck is a SDK?

Well, SDK stands for software development kit or “devkit”. A SDK is typically associated with a software application and will sometimes include sample code, documentation or other tools needed to a build on or customize that specific application. Articulate has released a SDK for Engage ‘09, which includes the base code, documentation and a step-by-step tutorial to recreate the Stair Step interaction.  By following the tutorial, it’s not difficult to understand how this all works.  There are some limitations as to what can be done with the SDK, but with some creative thinking or engineering the possibilities are near endless. Before I go any further to explain the Engage SDK, I think it’s important to understand what Engage ’09 is and how it’s used to add your own media content.  In the Screenr below, I quickly walk through the Engage user interface and discuss what to plan for when creating with the Engage SDK.

If you watched the Screenr above, you should now have a good understanding of what Articulate Engage is and what you should plan for when developing with the Engage SDK. Remember, all of the user interface elements or UI menu options associated with the Process type interaction are the only UI menu options that will be available to you when developing with the SDK. Currently, there’s not an option to add new menus or options.

Let me whet your appetite for the Engage SDK.

In the Screenr below, I’ve compiled a few examples of Articulate Engage ’09 interactions developed with the Engage SDK. My intention is to demonstrate what can be done with the Engage SDK as well as motive your creative juices.

You can view the live Presentation of Engage SDK samples here.

OK, moving on…

What tools or software do I need to build with the Articulate Engage SDK?

The above list is the absolute minimum software requirements needed to work with and build a custom Articulate Engage interaction.  Please note, the hardware requirements are dependent on your choice of software. So, I would recommend visiting each vendor for a list of system requirements.

I won’t lie to you, it is important that you understand the Adobe Flash application as the SDK documentation assumes you have knowledge of this. The Screenr below will give you quick tour of Adobe Flash CS4, pointing out some of the more common menus and options used when working with the Engage SDK.

If you watched the above Screenr, you should have a good idea for what to expect when working with the Adobe Flash application. In a future blog article I will dive a bit deeper on some of those key features and share some tips and tricks to get you up to speed. In the meantime, join related forums and make Google your best friend :-).

Where do I get the Engage SDK and how do I install it?

1. You can request a copy of the Engage SDK  here. After filling out a short form you will receive an email with a link to the download.
2. Once you’ve obtained the EngageSDK_1_3.zip file, you need to extract the contents.
3. Simply double-clicking the exacted EngageSDK_1_3.mxp file will install the Engage SDK files. Just follow the prompts from the Adobe Extension Manager.

Note:  It’s possible when double-clicking the  EngageSDK_1_3.mxp file nothing will happen or Windows will prompt you for an action. There are a couple of things that would cause this to happen:

  • You don’t have Adobe Flash installed yet.
  • The Adobe Extension Manager isn’t installed.
  • The .mxp file extension is associated with another application installed on your system.

How do we fix this?

1. Install Flash and choose to install the Adobe Extension Manager if given the option.
2. Download and install the Adobe Extension Manager.
3. You could right-click the EngageSDK_1_3.mxp file and select ‘Open With…’ and locate the Adobe Extension Manager executable on your system.

C:Program Files (x86)AdobeAdobe Extension Manager CS4 Adobe Extension Manager CS4.exe

Once the Engage SDK is installed, the bottom of the Adobe Extension Manager will give a brief description for the Engage SDK along with a path to the help file.

I have recreated the above steps in the Screenr  below:

What skills do I need to create with the Articulate Engage SDK?

  • Adobe Flash MX2004 or greater authoring application
  • Flash ActionScript 2.0
  • XML (general knowledge)
  • In addition to what is listed above, it’s helpful to have some knowledge of JavaScript. Articulate Engage will use JavaScript to send and receive data to an interaction when embedded in an html page.

The above skill requirements are important, but don’t get discouraged. If you have successfully completed all of the steps outlined in the StairStep tutorial, half the battle is won. You might find creating with the Articulate Engage SDK can be fun. Take it a step further and modify the existing StairStep interaction slightly to suit your needs. What happens if you change the StairStep shape? How about changing the Step colors? Take your time, making small changes. Remember, trial and error is a good thing and can only help in the end.

So what’s next?

This is up you. If you have a passion for creating with code, tighten your boot straps and jump in… there’s nothing to be afraid of. I will do my best to answer any questions along the way and I will be sure to release more tutorials on this subject. If you would like to share your interaction with Articulate, please go here. If you want to share your interaction with the Articulate community, please join the Articulate forums here. Good luck and happy coding.

17 comments for “Introduction to the Articulate Engage SDK

  1. April 15, 2010 at 10:07 am

    Hey Dave,

    Thanks again for reply on the Articulate Forum and pointing me here to your blog. Great intro article on the whole Engage SDK process and what it takes to build an interaction. I know writing tutorials takes awhile and I’m looking forward to the next one.

    I particularly like the Screenr you did on setting up the Flash environment to begin building an interaction. We all have our preferences and I have two monitors where I put all my tools and Actions window on one window and the stage and timeline on the other. I guess this is what I was looking for in the SDK tutorial – it started off by copying & pasting the StairStep files and jumped right into where certain code was to be placed. For true beginners like myself, I need a tutorial on “How to set up the environment” with all the code stripped out….then build it from scratch.

    Anyway, great stuff. Later. Kevin

    • David
      April 19, 2010 at 11:51 am

      Thanks Kevin! – I am planning on adding a tutorial that will walk though the initial setup a bit further. I felt the tutorial included with the Engage SDK was sufficient enough and would have been redundant.

  2. May 19, 2010 at 12:58 pm

    Thanks Kevin! – I am planning on adding a tutorial that will walk though the initial setup a bit further. I felt the tutorial included with the Engage SDK was sufficient enough and would have been redundant.

  3. Amy
    June 4, 2010 at 1:05 pm

    Hey Dave,

    Thanks again for reply on the Articulate Forum and pointing me here to your blog. Great intro article on the whole Engage SDK process and what it takes to build an interaction. I know writing tutorials takes awhile and I’m looking forward to the next one.

    I particularly like the Screenr you did on setting up the Flash environment to begin building an interaction. We all have our preferences and I have two monitors where I put all my tools and Actions window on one window and the stage and timeline on the other. I guess this is what I was looking for in the SDK tutorial – it started off by copying & pasting the StairStep files and jumped right into where certain code was to be placed. For true beginners like myself, I need a tutorial on “How to set up the environment” with all the code stripped out….then build it from scratch.

    Anyway, great stuff. Later. Kevin

  4. July 2, 2010 at 11:50 pm

    Hi,
    How can I modify the in-built interactions in Engage using the SDK ,
    means the TAB, Timeline and other interactions or generate custom ones similar to them
    I cant find it in the help of the SDK 1.3 nor the objects in Flash component library
    Hemant

    • David
      July 3, 2010 at 9:28 am

      Hemant,

      The only interactions that can be modified with the Engage SDK are the ones that are included with the SDK:

      FlipBook
      StairStep
      FlashCards

      The above interactions along with the source code can be found in the following directory after installing the SDK.

      C:Users%username%AppDataLocalAdobeFlash CS4enConfigurationSamplesArticulateEngage SDK

      Note: The above ‘Flash CS4’ and ‘en’ folders should be modified to suit your Flash version and language respectively. If you do not have the Flash authoring tool from Adobe installed, you cannot use the Engage SDK.

  5. Brenda
    July 16, 2010 at 11:51 am

    I don’t have Adobe Flash but do have SwishMax…will the Engage SDK work with that program?

    • David
      July 18, 2010 at 1:05 am

      SwishMax will not work. You need one of the versions of Above Flash to work with the Engage SDK.

  6. Alex Young
    August 6, 2010 at 4:41 pm

    Hello David:

    Installed the Enage SDK without problem but cannot find any of the files that you refer to in your tutorial.
    I simply do not have anything that resembles The directory, C:Users%username%AppDataLocalAdobeFlash CS4enConfigurationSamplesArticulateEngage SDK.

    I am using a 30 day trial version of Flash CS5. Could this be the issue?

    Thanks and Regards
    Alex

    • David
      August 7, 2010 at 7:41 am

      Alex,

      The path noted below would be different and is dependent on your language and version of Flash.

      C:Users%username%AppDataLocalAdobe%Flash CS4%%en%ConfigurationSamplesArticulateEngage SDK

      – %username% = this would be your system account user name
      – %Flash CS4% = this name would be your version of Flash, so it might be Flash CS5 or just CS5
      – %en% = this would be the language you have installed on your system

      Note: On a new operating system its not uncommon to have some system folders hidden. You can turn on hidden folders by doing the following:

        1. Open Windows Explorer (My Computer)
        2. From the top menu choices select Tools –> Folder options…
        3. From The Folder Option dialog, select the View Tab and select ‘Show hidden files, folders, and drives.’
        4. Select the OK button to confirm setting change.

      Note: If the Tools menu option (step 2 above) is not visible, press the Alt key on the keyboard when Windows Explorer is opened and selected. This should reveal all of the menu options.

  7. Tim
    September 16, 2010 at 1:22 pm

    The interaction isnot showing up in my Engage Interactions, where should I put the file so it will be recognized in Engage?

    • David
      September 16, 2010 at 2:19 pm

      Tim,

      After downloading the Carousel.zip, you need to right-click the file and select extract all. This should reveal the Carousel.artpkg file. Double-clicking the Carousel.artpkg file will automatically install the interaction. More on this can be found here.

      I hope this helps.

    • September 23, 2011 at 3:33 am

      Hello David,
      I am flash programmer, I have created a new Articulate Engage interaction template but i am not able to read and update the suspend_ data to LMS is ether any method to do that please help how can I do that ?
      Thanks
      Suyog

      • David
        September 23, 2011 at 8:33 am

        Suyog,

        The function for handling LMS communication does not entirely occur within the Engage Template. Instead this is handled through the included javascript files when publishing the Interaction using the LMS format. As long as your template adheres to StairStep or Process model, this should work without any issues. More on publishing the Engage Interaction is outlined here.

        To make sure there isn’t a compatibility issue with your LMS I recommend you publish your custom Engage Interaction using the LMS format and then test in the SCORM TestTrack. This can save you time when troubleshooting your code.

        Does the Resume for your Interaction work correctly when publishing for Web with Resume enabled? This could also help you isolate the issue to the LMS.

        I hope this helps!

  8. Miki
    July 20, 2011 at 10:45 am

    Hi Dave

    I have Flash Professional CS5 installed in my computer. But when installing the EngageSDK_1_3.mxp, I got an error message saying “This extension requires following product: Flash (version 8 or later version). The extension will not be installed. OKAY.”

    Any idea? Thanks!

    Miki

  9. Garry
    September 20, 2012 at 1:51 pm

    Articulate is no longer distributing the Engage SDK. Any idea on where I might be able to acquire a copy of it?
    Thanks,
    –Garry

    • David
      September 21, 2012 at 8:17 am

      Gary,

      I’ll forward to your email if I can find a link. OK?

Leave a Reply

Your email address will not be published. Required fields are marked *