Building better code one byte at a time.

Creating transparent icons for the Carousel Interaction

In this example,  the icons shown in the rotating carousel are transparent (0% alpha channel) or do not have a solid background. Natively the Articulate Engage SDK does not have an option  for inserting images with an alpha channel. The effect seen in the example is achieved by using the following method:

  1. Publish the Carousel Interaction locally and choose the Open Folder option from the Publish Successful dialog.
  2. Browse to the following folder and open the data.xml file in a text editor (notepad for example): engage_content
  3. Rename all instances of the images from imageX.jpg to imageX.png (X – denotes the image number).
  4. Replaced all of the .jpg images in the published engage_content with folder with transparent .png equivalents.

Please Note, the above procedure will not work with the current public release of the Carousel interaction. During the development phase of the Carousel Interaction, I published a version using the Flash Player 8 that is shown in the example link above. Flash Player 8 and above supports transparency and/or bitmap caching needed for this to work but unfortunately had compatibility issues when used in Presenter ’09. To resolve any issues and maximize compatibility, I released a Flash Player 6 version. I’m still working to resolve the Flash Player 8 issues. Stay Tuned!

4 comments for “Creating transparent icons for the Carousel Interaction

  1. Ge0_Bill
    January 5, 2010 at 4:14 pm

    So what is the next step after opening data.xml?

  2. Arizona Lugon
    January 5, 2010 at 8:53 pm

    This article doesn’t seem to contain all the steps. Can you please provide the rest of the steps? Thanks!

  3. James _C
    June 9, 2010 at 10:24 am

    Hi, I have followed the instructions and the whole items become 100% transparent. Do i need a different version of carousel? Many thanks.. J

    • David
      June 15, 2010 at 1:03 pm


      I apologize for the confusion. I should remove this topic. Transparent images are not possible with the latest release. I ran into issues when using this interaction inside of Presenter. An alternate solution is discussed here.

Leave a Reply

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