Built-By-Burton

Building better code one byte at a time.

Carousel Articulate Engage Interaction gets an update

After realizing I built my first interaction with the Engage SDK version 1.2, I had to convert this to SDK version 1.3. The latest release (1.3) now includes support for importing .mp4 file types. The version of the SDK installed can be identified by browsing to the following directory:

Vista:
C:Users<username>AppDataLocalAdobe<Flash Version><language>ConfigurationClassesArticulateEngage

XP:
C:Documents and Settings<username>Local SettingsApplication DataAdobe<Flash Version><language>ConfigurationClassesArticulateEngage

Depending on the operating system, a folder holding all of the Articulate Flash Class files will reside in one of the folders above and would be as follows:

  • v2_0 – This is Engage SDK version 1.2
  • v2_1 – This is Engage SDK version 1.3

You can get the latest Engage SDK here.

Here is a working example for the latest version of the Carousel Interaction.

Carousel v1.3
Carousel v1.3

43 comments for “Carousel Articulate Engage Interaction gets an update

  1. Bridget
    January 8, 2010 at 11:59 am

    This is great! Thank you! I see we are limited to only 10 media items – any way to add a few more?

  2. admin
    January 12, 2010 at 7:22 am

    Bridget,

    Because this interaction uses animation with images I wanted to keep the limit to 10. Moving graphics requires a little more horsepower to play back smoothly. I thought by limiting to 10, it would allow the content to play as expected on most any system. During the development stages I had up 50 items and it would play fine on my system, however did take some time to download the images when viewed from an external server – yet another reason for limiting to 10. If there is enough of a demand to raise this limit, I will consider making this change in an updated release.

  3. Nita
    January 20, 2010 at 1:23 am

    Excellent, many thanks for your contribution!

    I have built a number of images (*.png) so I want the transparent background. I have placed the images within a circle but still the image comes through surrounded by a box – Can you share how you git such a clean look on your version.

  4. David
    January 20, 2010 at 7:23 am

    The Carousel version I released to the public, currently does not support transparency. 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. If I can work out this issues, I will post a new version of the Carousel Interaction that will allow the transparent images to work. Thank you for your patience. Stay Tuned!

  5. Jim
    February 4, 2010 at 8:24 am

    This is a great interaction for pictures but I’ve been trying it with videos. There are a couple of things that would stop me using it:
    – all the moving graphics are the standard video icon rather than the first frame.
    – the video does not expand to screen (or selected size) when played.
    Have I missed something or is this as far as it can go at the moment?

    • David
      February 4, 2010 at 9:06 am

      Jim,

      1. Currently, there’s not a way to generate a thumbnail image for .flv or .mp4 file types and is why the static image or Video Icon is being used. This is a limitation of the Flash programming language. I would suggest you use a .swf video file instead. This will allow you to select a thumbnail of your choice or use the first frame of the .swf file.

      2. The only video type that will allow you to zoom is the .swf file type. This is the same for all Engage Interactions. If you need to zoom the video I would recommend using a .swf instead of a .mp4 or .flv.

      Hope this helps.

  6. Jim
    February 6, 2010 at 7:23 pm

    Yup. That’s great , thanks… :)

  7. Mindy
    February 8, 2010 at 1:36 pm

    Love this interaction. Having some troubleshooting difficulty. I can preview the carousel and it plays perfectly. Once it is published there are no images in the bottom carousel, they are static images next to the text at the top. Does this have to do with the version 1.2 vs. 1.3? When I follow the directory path above I can’t seem to find the folders you mention. I can get to “Adobe”, but not past “language. ”
    C:Documents and Settings\Local SettingsApplication DataAdobe\ConfigurationClassesArticulateEngage

    If you have any troubleshooting tips that would be greatly appreciated! Thanks!

  8. David
    February 8, 2010 at 2:30 pm

    Mindy,

    Please make sure you are publishing to a local drive (C: Drive) – if you are attempting to publish to a networked location, this will not work as expected.

    The versions I’m referencing above have to do with the Engage SDK which is not a requirement for this interaction to run. If my suggestion above does not help, I would recommend you download the Carousel Interaction again and reinstall over the existing. It’s possible the Carousel Interaction did not get installed correctly.

  9. Jarx
    March 29, 2010 at 10:40 pm

    Cute. Please think twice before implementing an interaction like this. Think about what drives the interaction. Is it a seductive decoration with low usability value or is it a substantive interaction that provides practice or feedback for real cogitation. Questions as litmus: Is this just neat like something I’ve seen before or does it provide real value as an activity? Are there simpler methods for exposure or activation?

  10. Brian
    March 30, 2010 at 2:58 pm

    Hi Jarx,

    This interaction should be used just like any other tool in your e-learning arsenal. If you find that it adds value to your content, then that’s awesome. I’ve seen many people use this interaction almost like an “unexpected interruption” to grab the end-user’s attention after a long period of traditional e-learning. Some of the best e-learning that I’ve seen challenges the learner to use self-discovery. I think that this interaction is a perfect example of self-discovery in that it grabs the user’s attention and invites the user to click around and see what happens. Once you’ve got someone’s attention and they’re actively engaged in the content, then it makes it easier to really deliver effective learning opportunities. As I stated previously, this tool is only as valuable as its impact on your content. If you don’t like it, put it in your toolbox and move on. You never know when an opportunity to use this tool will present itself again.

  11. Sarah
    April 23, 2010 at 9:45 am

    I love this interaction! Thanks for building it and sharing it with all of us!

    I am having the same trouble as Mindy. When I preview the interaction, it looks great- there are pictures in the carousel. But, when I publish my course, all I see are boxes that say, “NO MEDIA”, instead of the pictures I have uploaded. I am working from my local drive.

    Any ideas why this might be happening? I really want to use this interaction for this course!

    Thanks!

    • David
      April 23, 2010 at 2:35 pm

      Sarah – Because the interaction works when previewing, I would have to guess, your publish location is not valid or allowing .xml files types to be read. If you have published and uploaded to a server, please make sure the server has the ability to read .xml file types. The data.xml file in the published ‘engage_content’ folder is what loads the image data. If files are upload via a FTP client, make sure this is set to upload in Binary Mode. Articulate has an article related to this and can be found here.

      Note: the article in the link above is for Articulate Presenter and is the same for Engage content.

  12. Dan Rollins
    April 24, 2010 at 1:42 pm

    This is a great interaction. One feature request I would like to add would be to have the Carousel image that is related to the “step text” that is being displayed above would automatically rotate to front and center when the “Presentation-interaction advances by itself” option is selcted. Right now with that option the top portion of the Interaction will advance automatically but the carousel images do nothing. That would be a great enhancement.

    Thanks for the good work,
    Dan

    • David
      April 24, 2010 at 6:53 pm

      Dan – Great suggestion! A good friend of mine made this same suggestion. That’s 2 for the books and definitely one I will consider.

  13. Doug
    May 7, 2010 at 10:03 am

    I love this interaction.
    I initially used version 1.3.
    When I updated to 1.4 some of the corners of the images in my carousel became rounded. I don’t mind the rounded corners but in most of the images only 2 out of the 4 corners became rounded. Is there a standard image size that I should use in the interaction to make sure all corners are rounded consistently? If not, any thoughts on why this is happening?
    Thanks!

    • David
      May 7, 2010 at 12:33 pm

      Doug,

      I’m pleased to hear you are enjoying this interaction.

      When inserting media (images or video), the 3D Carousel media placeholder will create a 128 x 128 pixel mask starting at the upper left hand corner of the inserted media. Masking is sort of like a picture frame that is at a set dimension of 128 pixels by 128 pixels. Any part of an inserted image that extends beyond this will not be shown or cut off. Any part that is smaller will not fill the invisible mask and reveal only part of the masked corners (see image below). Although masking or revealing only part of an image might not be desirable, the 3D carousel was designed this way to overcome overlapping issues that could occur with images that are sized differently. The reason why you are seeing the top 2 corners or possible the left 2 corners is because your original image is either less than 128 pixels tall or less than 128 pixels wide. This can be corrected by using one of the following methods:

      1. Insert an image where the smaller of the 2 dimensions (width or height) is 128 pixels or greater.

      Note: The Carousel interaction will automatically try to scale the inserted image to a 128 pixels. However, if your image is not square, the larger of the 2 dimensions will be scaled to 128 pixels making the other dimension smaller than 128 pixels.

      2. Insert an image that is square.

      3. Resize the image in Engage by selecting the ‘Edit Properties…’ option below the media, set the Size: dropdown to ‘Custom size’ and set the smaller of the the dimensions to at least 128 pixels.

      Note: Setting a custom size to a non-uniform (not square) image, will scale the image beyond the mask. Unchecking the Keep Aspect ratio from the Multimedia Properties dialog will allow you to set the image size to exactly 128×128 pixels but will either stretch or squash the image.

      Carousel Image Mask

  14. Ali Zaheer
    May 24, 2010 at 2:50 am

    Hello everyone,

    I love this interaction. The issue is when i publish it to my local drive within presenter, i cannot see the revolvng images. it says NO MEDIA. why is this happening. please help :)

    thanks
    ali

    • David
      May 24, 2010 at 8:56 am

      Ali,

      Please make sure you are publishing to a local drive (C: Drive) – If you are attempting to publish to or have the project saved to a networked location or a USB drive , this will not work as expected. The “No Media” icon was included with this interaction for 3 reasons.

        1. To notify the author, that you have not selected an image or movie for the given step.

          2. The publish was not complete, because it was saved to or published to an invalid location. This can be a directory path that is too deep. The Windows operating system prevents folder paths deeper than 256 charters in length. This would mean, if you are publishing to or have saved to a really long folder path (example: C:This is a folderThis is another folderAnother FolderHere is another FolderOh Yeah This is a Folder TooWe Are getting too DeepBetter be carefulYour Content Might Not Publish to HereOK we are way too deepNeed to back offThis folder is too Deep and not all of your files will get Saved or Published here).

            3. When uploaded to a server, the files were not uploaded via the FTP client in Binary Mode. Most all FTP software, should have an option to upload in a Binary Transfer Mode. If this mode is not selected, the data.xml file that holds the list of image names and locations cannot be read and will display a “No Media” Icon.

              Try publishing and/or saving your project to a shorter path, the Desktop for example.

          • eric
            June 3, 2010 at 9:47 am

            This is a really cool interaction. I read your comment about why you limited the number of images to 10, but why not have at least 20. Just let everyone know that if you use more then 10 you run the risk of end users having issues. I am looking to put this on a website and i need at least 12 images.

            I do like this interaction a lot.

            • David
              June 3, 2010 at 10:49 am

              Eric,

              Thank you for the kind words. I am pleased to hear you like the Carousel interaction. Please know, I am considering all requests, however, coming from a customer support background, it’s hard for me to add a stipulation to the Interaction. This can sometimes do more harm than good. If I can work out the wording and the exact issues that can occur when more than 10 steps are used, I will certainly make this change.

          • Donna
            June 15, 2010 at 4:26 pm

            Thanks so much for creating this wonderful interaction, and then sharing it with the community!

            The only issues I’m having that I can’t seem to get around are
            1) the transparency one already mentioned – has that been updated?
            and
            2) no matter what I do when changing the color scheme, I get a white border around the top text box. I’d like there to be NO border – just a solid darker-colored background. I don’t see any mention when changing the color scheme of a frame or border around the text box (or ‘slide background’, which is where the top text resides). Any suggestions?

            • David
              June 16, 2010 at 7:38 am

              Donna,

              Thank you for the kind words. I’m pleased to hear you are enjoying this interaction. There has been some confusion that I am responsible for. The transparent images shown in my example, were created with a version of the Carousel I did NOT release to the public. This was because, there were some issues with this, when attempting to use this interaction in Presenter. I am currently looking for an alternative.

              To change the border color for the description box, please do the following:

              1. Select Colors –> New Color Scheme
              2. Select the FAQ –> FAQ Button Text

              Note: Changing the FAQ Button Text Color to match the background will give the appearance, it isn’t there. The FAQ was used to set the border color, because this is not a standard option built into the Engage interactions.

          • Roman
            June 16, 2010 at 10:40 am

            Hello.
            Thanks for your interaction.
            Is it possible to change the height of the text-presentation-field? Now the size is at about 40% of maximum height – when there are only a few or small pics, there is more space for the presentation.

            greetings, roman

            • David
              June 16, 2010 at 12:00 pm

              Roman,

              Changing the text box size is static and cannot be changed. This was designed this way, to prevent interference as the images rotate.

          • Ali
            June 21, 2010 at 1:43 am

            Hi David,

            Thank you for helping me out. I am still having the same issue where the images dont show up.
            Now this is very strange:
            It runs fine when its on its own. As in when I publish it as a single slide.
            But when I add it to a course, it fails. I get No Media instead of the images.

            Have you come across something like this before.

            Thanks
            Ali

            • David
              June 21, 2010 at 7:56 pm

              Ali,

              If there is a Flipbook interaction or Tic Tac Toe interaction inserted into and before a Carousel interaction in Articulate Presenter, this can occur. I am in the process of tracking down the creators for Tic Tac Toe and the Flipbook. I believe there is something in thier code that is interfering with my code. For example, if you place 2 or more Tic Tac Toe interactions in the same Articulate Presenter presentation, and go back and forth between the two, this will break both of them. This happens for the Flipbook as well. If you insert 2 or more Carousel interactions, in the same Articulate Presenter presentation, they all work as expected. The workaround here, is to not use the other interactions or place the Carousel before the others in the presentation.

              I hope this helps?

          • Marie
            September 14, 2010 at 3:15 pm

            I love this interaction!

            I have two thoughts:

            1. It would be great if the Engage developer had more control over the speed of the carousel. (I realize the user has the option to speed it up/slow it down, but I wish I could dictate this in some cases, because some of my participants are unsophisticated with technology and I don’t want to have to explain the controls.)

            2. I wish the controls also allowed me to increase the thumbnail size when I’m using fewer than 10 images and/or that I could manipulate the path of the carousel, as I would like to use this feature for smaller slide shows but the results are a little awkward because of the small image/wide space issue., if that makes sense.

            • David
              September 15, 2010 at 8:08 am

              Marie,

              I ‘m pleased to hear you are enjoying this Interaction!

              Both of your comments make perfect sense. As you know, currently it’s not an option to control the speed and or circumference of the carousel. When creating new Interactions like the Carousel, developers are limited to the application controls available in the default or built-in Process Interaction; so in order to add functionality (speed control setting), a developer has to use other methods for incorporating these settings – Did I loose you yet? :-). In short, I would have to incorporate or use the color settings/values to control the speed – the following link explains this better.

              http://www.builtbyburton.com/engage-carousel-interaction-1-5-released/

              As far as the circumference control, again this would have to be automatically calculated based on the number of images (not everyone would want this) or set by an unused and predefined color from the Color Schemes.

              These are both great suggestion and for now I will have to file them away as feature requests. In the future if anyone has a feature request for this Interaction, please post to the following link:

              http://builtbyburton.com/category/feature_requests/

              Thank you for helping me make a better Interaction.

          • Jackie
            September 14, 2010 at 3:24 pm

            Hi David,

            I trying to add steps that I want to remain hidden from the carousel while others are part of the carousel. Is this possible? I’m using the images as “folders” and creating links to other steps that I would like to bury within.

            Hope this makes sense,
            Jackie

            • David
              September 15, 2010 at 7:27 am

              Jackie,

              I’m always looking to add functionality to the Carousel without over complicating it. Currently, there’s not a way to hide the steps for this interaction without the No Media icon appearing. Hiding steps simply is not possible with how Engage is designed to work. You might notice you can’t hide any steps in any of the Engage Interactions. For now I’ll have to consider this a feature request.

              PS: I appreciate your forward thinking on this! Great idea!

          • October 29, 2010 at 9:27 am

            interesting conversation. I was just hoping you might be able to change the colour scheme in the backgrounds. I had to train my eyes to read it.

          • Curt
            December 29, 2010 at 12:19 pm

            Great interaction, and it would be an elegant solution to one of my Articulate modules if I could figure out how to do the following:

            The carousel interaction allows text linking to either a URL or a Step. Is it possible to create a link to another slide within the same Articulate presentation? Thanks.

          • Ericca
            March 3, 2011 at 7:25 pm

            David,

            I have been using the carousel interaction for some product demos that go out to our field sales organization. They are well received and people love the format. The only feedback that I’m getting is the size of the videos – they are pretty small. I have tried the “full screen” and “in a new window” options and the video is still only 128 pixels wide. The size of the source video does not affect it – small or large it will still provide a very small window to play the video. Are there any plans to make the video player larger for better viewing?

            • David
              March 4, 2011 at 6:20 pm

              Ericca,

              You might notice when inserting a .flv or .mp4 into any of the Engage interactions, there’s not additional options as with a .swf that allow you to specify how and where the movie will play back. Because there isn’t an option to open these movie file types Full size or in a new window, I had to make sure the movie would not extend into the Carousel of icons as well as fit inside each of the Carousel icon containers. The setting that controls these dimensions is global and would affect all images and movies displayed in the information area of above the spinning Carousel as well as the Carousel icons themselves.

              … so in short, unless I can find a hack to implement this, I’m not so sure this can be done with what is provided in the Engage SDK. Sorry.

              You could always use a .swf file as this will allow you to view the video full size, just make sure to replace the Thumbnail for the swf when importing to an image with a 1:1 ratio (square). I hope this helps!

              • Ericca
                March 5, 2011 at 8:40 am

                David,

                I do use .swf files for my videos and choose the option to use a picture as the media type that shows in the carousel. But, when the video comes up in a separate window it is still very small.

                What I am going to do for now is to use a link in the carousel text area that takes the user to a blank powerpoint page so that I can play the video at full size. Then, provide a link back to the carousel interaction from that page.

                But, if there is a way to get the video to play at a larger ratio by using a .swf and having it play in another window – that would be great! I will look forward to seeing what you find out…

                • David
                  March 5, 2011 at 9:47 am

                  Errica,

                  The inserted video (.swf) can be up to 720 x 540 pixels. When inserting a .swf make sure you set the Display to Full size from the Multimedia Properties dialog.

                  Based on your comments, I would have to guess the .swf(s) you are inserting are small to begin with; if this is the case inserting a smaller dimensioned video will only scale to it’s original dimensions and not greater. You would have to scale your videos (.swfs) up in dimension prior to inserting into Engage. Does this make sense?

          • Sue
            June 25, 2011 at 12:48 pm

            This is a great way for the learner to interact with dry content and I use this interaction frequently. Is there a way to delete the title bar from this interaction?

            Thanx!

            • David
              June 26, 2011 at 6:34 am

              Sue,

              I’m pleased to hear this interaction has been useful.

              As with all other Engage Interactions, there is no way to delete the title bar at the top. If you would like to see this in a future release, please submit a feature request here.

          • Patrick
            January 25, 2012 at 1:31 pm

            Thanks! I’m currently in process of trying to develop my own custom Engage interactions using the SDK. Is the source for this great Carousel interaction available for download?

            • David
              February 27, 2012 at 1:38 pm

              Patrick,

              I’m sorry, I haven’t shared the code for the Carousel Interaction. Having multiple/alternate versions floating around could have a negative impact on projects using the original version. I would like to avoid any issues by keeping this private at this time.

              Thanks for understanding.

          • March 18, 2012 at 2:18 am

            Thanks for creating and sharing such a great interaction. You are truly talented!!!

          Leave a Reply

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