Built-By-Burton

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

Comments are closed.