Built-By-Burton

Building better code one byte at a time.

Engage Carousel Interaction 1.6 Released!

I released an updated version (1.6) for the Carousel Interaction. This update contains a minor fix that addresses the issue of images and the text area not loading above the rotating thumbnail images. If you have published content with the first public release (1.3 or later), please download/install the latest update and republish for these changes to take effect.

Carousel.zip

I apologize for the quick release soon after releasing version 1.5. I was unaware of the issue addressed in this latest release. Thank you all for your support and for bringing this issue to my attention.

50 comments for “Engage Carousel Interaction 1.6 Released!

  1. July 11, 2010 at 8:15 pm

    Hi David,

    I can’t get the link to work to the new carousel zip. If I left click on it, I get a 404 error, if I right click and save link as, the downloaded zip archive says it is invalid archive.

    cheers

    Dave

    • David
      July 11, 2010 at 9:23 pm

      Dave,

      My apologies. Please try again. The link has been updated.

  2. July 14, 2010 at 6:28 am

    Hi David, Do you do custom flash jobs. I have a video and a png to lay over the top that must loop. I made it in quizmakker by laying one over the other, but due to a limitation of quizmaker I now need to do it in presenter, but it doesnt support flash layers. If I gave u the video file and png, could you create a looped flv or swf that was tested to work in presenter. I’ve tried and created a swf that works in a web page or in a flash player, but when I put it in presnter the background video is just blank white. I’m desparate and given u know flash and articulate, you might be just the man for the job. If so shoot me an email please, am happy to pay.

    • David
      September 21, 2010 at 4:47 pm

      Dave,

      I’m sorry, I wouldn’t have the time to look at this right now. Good Luck!

  3. July 14, 2010 at 6:49 am

    Thanks for the transparency it works a treat. Can I ask how the carousel action works now, its almost at a standstill in my interaction, hardly spins at all. I’ve used only still images and a fair bit of audio, but I doubt the file is massive. Any suggestions?

    • David
      September 21, 2010 at 4:45 pm

      Dave,

      Moving the mouse to the left or right of the slide will control the direction of rotation. The closer the mouse gets to the middle, the slower the Carousel will spin. To speed it up just move the mouse to the left or right.

      Note: The Carousel is designed to rotate at a predefined speed when the mouse is not hovered over the slide.

  4. Brenda
    July 21, 2010 at 8:32 am

    Hi David

    This is an awesome interaction. I’m wondering if there’s a way to remove the white rounded-corner box from around my images? I tried adjusting the properties and the image transparencies, but haven’t been able to remove that white box. Any help would be appreciated!

    • David
      September 21, 2010 at 4:41 pm

      Brenda,

      I apologize for the extremely late reply. The white box, is the place holder for the inserted images. If you use an image that is at least 128 x 128 pixels, this will ensure the image fills this area. Ideally, its best to use images that are square.

      I hope this helps!

  5. MikeH
    November 22, 2010 at 12:12 pm

    I downloaded this interaction and it says that it has been installed but I don’t see it?

    • David
      November 22, 2010 at 6:08 pm

      Mike,

      Can you please elaborate or at least give the exact steps you took to download and install. I have replied to you on the Articulate Forums as well as the Blog post, but have not heard back from you.

      Where are you looking for the Carousel Engage Interaction after installing (exact steps please)?
      Did you download the zip version or the .artpkg version?
      Is the Engage Interaction listed in Engage Start Button (upper left hand corner of Engage) –> Engage Options –> Manage Community Interactions …?

  6. sheri
    May 4, 2011 at 3:39 pm

    Hi, the carousel file isn’t working for me. When I download the updated zip file and try to open or extract I get a msg saying the file is invalid. Thoughts? Thanks so much. Sheri

    • David
      May 4, 2011 at 4:14 pm

      Sheri,

      An invalid file is a sign that the file did not completely donwload or the download was corrupt.
      Please try again to save the file to your Desktop and be sure to keep your browser open until the download completes.

      I hope this helps!

      • June 8, 2011 at 12:44 pm

        Having the same problem – have tried multiple times from multiple workstations with no success – is there an alternate link? I would prefer the Articulate Package for easy installation.

      • David
        June 8, 2011 at 1:15 pm

        James,

        My apologies. My site was optimized last week which affected the download links as you have noted. These should be working now but you might need to clear your browser cache.

        Here is an alternate link:

        http://builtbyburton.com/wp-content/downloads/Engage/Carousel.zip

  7. AurelieM
    May 12, 2011 at 5:47 am

    Hi
    First, thank you for your great Interaction.

    I’ve an issue with the rotation icons that appear in the lower corners of the interaction.
    I read how to turn them off, but I want the opposite : with my usual Color Scheme, they are almost invisible.
    I didn’t find a correpondant item to edit in my Color Scheme. How can I change their color, for example into black?

    • David
      May 12, 2011 at 2:53 pm

      AurelieM,

      Thank you! I’m pleased to hear you are enjoying the Carousel interaction.

      Because I had used up so many of the color scheme items to trigger additional functionality, I did not include and option to change the color for the icons manually; only to turn them on or off. You might notice the color is designed to change automatically and is always in contrast with the background. For example, if the background color is white the icons will be black and vise a versa.

      I hope this make sense!

      • AurelieM
        May 16, 2011 at 4:33 am

        That’s my problem : the background color is white, and the icons too :s
        Background color : FFFFFF
        Slide Background : F4F4F4

        the arrows icons are not visible.

        Even with
        Background color : FFFFFF
        Slide Background : FFFFFF

        the arrows icons are still white : http://img855.imageshack.us/img855/1748/carousel1.png

        I hope you’ll have an idea to fix it
        Have a god day :)

        • David
          May 16, 2011 at 10:06 am

          AuelieM,

          Thank you for pointing this out. I know I have a version that corrects this behavior. You might notice when modifying the color scheme in Engage the expected behavior works there, just not when published. I’ll look into getting this fixed this week.

      • AurelieM
        May 16, 2011 at 11:24 am

        Yes, I notice that. Thank you :)

        • David
          May 16, 2011 at 6:39 pm

          OK Aurelie, after looking at my code, it would appear I’ve hooked into the Color Scheme –> Background transparency to help determine what color the spinner icons should be. To workaround the issue with a white background, set the Color Scheme –> Background color to White (#FFFFFF) and the Transparency to 100%. That should darken the spinner icons for you.

          Note: If you are inserting this interaction into an Articulate Presenter presentation, the theme or layout behind the the Engage slide in PowerPoint will show through when setting the Engage background transparency to 100% but only when the Articulate Presenter –> Presentation Options –> Publish Tab –> Include slide master behind quizzes and interactions option is checked. This will give you additional control over what you want to appear as a background for the Carousel interaction. So if you place a picture of a pink giraffe in the PowerPoint layout that is behind the Engage slide in PowerPoint, that pink giraffe will appear in the center of rotating thumbnails when published.

          I hope this helps!

      • AurelieM
        May 17, 2011 at 4:31 am

        It comes up roses.
        Thank you for your help. :)

  8. Ashley
    June 1, 2011 at 11:39 am

    Hi! Love this interaction but I’m having an issue with it . . .

    The NEXT SLIDE button will NOT appear and I can not figure out how to make it appear. The course I’m building for a client is supposed move automatically within each interaction but the user will need to click NEXT SLIDE to move to the next interaction. This is the only interaction in the whole course that doesn’t display NEXT SLIDE and I am going crazy to figure out how to get it to display. HELP??? :)

    • David
      June 1, 2011 at 1:58 pm

      Ashley,

      When selecting the Articulate Presenter Properties button on the slide containing the Carousel interaction, you are given the option to show the Next button – (Show ‘Next Slide’ Button: Show Always). However, if the Engage interaction is set to “Presentation – interaction advances by itself” (Interaction Properties in Engage), the next button won’t display and the slide will simply move forward without any intervention by the end user.

      Note: This interaction was built with the SDK provided by Articulate using the same core as the StairStep interaction (exhibits the same behavior you noted). It wasn’t until you pointed out this issue, I realized this was overlooked in the Articulate SDK. I will look into correcting this for the Carousel Interaction, but unfortunately don’t have a time frame as to when I will have this done.

      I hope this helps!

  9. June 8, 2011 at 12:40 pm

    Can you send me an alternate link or email me the file for the Carousel 1.6 interaction. The links on this site all seem to download a corrupt ZIP file that I cannot open.

    • David
      June 8, 2011 at 1:11 pm

      James,

      My apologies. My site was optimized last week which affected the download links as you have noted. These should be working now but you might need to clear your browser cache.

      Here is an alternate link:

      http://builtbyburton.com/wp-content/downloads/Engage/Carousel.zip

      • June 9, 2011 at 11:25 am

        Cleared the cache and still experiencing the same issue – any advice?

      • June 9, 2011 at 1:53 pm

        was able to finally download successfully using safari instead of exploder :)

        • David
          June 9, 2011 at 2:40 pm

          That’s great! Thanks for posting back.

  10. James
    June 23, 2011 at 3:26 pm

    Great interaction. Love the look of it. I am curious what is the optimal size for the thumbnails in the carousel? Also, can the size be adjusted? Thanks.

    • David
      June 23, 2011 at 6:53 pm

      James,

      Since the rotating image thumbnails are in square dimensions, a square image would be ideal for this interaction. I wouldn’t go any less than 128×128 pixels as this is the actual and final size for the image placeholder.

      Although images imported into the interaction can be of any size, the placeholder is always 128×128 and cannot be changed.

      I hope this helps!

  11. Isadelle
    June 24, 2011 at 12:10 pm

    After trying several different times to install the carousel engagement, I’m still not having any luck.

    Below are the error messages I get when attempting to install:
    1. Would you like to install version 0?
    2. There was an error installing this package.
    3. Error: Start of central directory not found; Zip file corrupt. Possible cause: file transfer error.

    Please let me know if you can offer any assistance.
    Thanks.
    Isadelle

    • David
      June 26, 2011 at 6:31 am

      Isadelle,

      Please try downloading with a different browser and/or different system. User James, above was having a similar problem, where this corrected the issue for him.

      I hope this helps!

  12. H
    December 8, 2011 at 11:46 am

    Dave,

    Is there a way where you can set the icons to when clicked, will open in a new window or a new tab?

    thanks.

    • David
      December 8, 2011 at 6:11 pm

      H,

      Sorry, there’s no way to change what happens when the icon is clicked. However, in the description, after the icon is clicked, you could create a hyperlink linking outside of the interaction.

      I hope this helps!

  13. Tim
    March 21, 2012 at 5:57 am

    Hi David,

    Many thanks for the wonderful interaction! I have just one question, when I publish the interaction, using a colour scheme I’ve created, the Carousel Interactions seems to have a black outline on the title bar as well as a dropshadow. None of the othe engage interactions I’ve created using the same colour scheme has this. The background of the colour scheme I’ve set it white (not sure if this is relevant). Do you know why this might be and is there a way to modify/remove it?

    Many Thanks

    • David
      March 21, 2012 at 8:00 am

      Tim,

      Thank you for the kind words.

      As with all custom Engage interactions, the Carousel Interaction was built off of the StairStep interaction model. The StairStep has the same black outline around the title bar.The drop shadow is also present on most all other interactions and was not designed to be removed. If you would like to see these additional options in a future release, please submit your feature request here.

      I hope this helps!

  14. Robyn Dennis
    March 22, 2012 at 5:56 pm

    I am wondering if there is a way to change what appears in the carousel when you load a FLV video file. It says “MOVIE” and i would like to be able to label it differently so the user knows what it is. Is there a way to do this?

    thank you,
    Robyn

    • David
      March 22, 2012 at 8:26 pm

      Robyn,

      Unfortunately there’s no way to modify the thumbnail image when using a FLV or MP4, however, a SWF will allow you to choose an image or to use the first frame of the movie as the place holder.

      I will certainly consider this as an option in for a future release.

      I hope this helps!

  15. Michael
    December 5, 2012 at 12:11 pm

    Thanks for this great interaction. One question, when I import a graphic and preview, the graphic’s reflection is not immediately below the graphic like the default image. Is there a setting that can be easily adjusted to move the reflection closer to the actual image? Thanks so much.

    • David
      December 5, 2012 at 12:28 pm

      Michael,

      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

      • michael
        December 5, 2012 at 3:56 pm

        Thanks so much for the quick reply…and all the detail.

      • David
        December 5, 2012 at 4:43 pm

        I’m glad I could help. It’s best to use square images as this will give the Carousel a nice clean, consistent look.

  16. Greg
    March 27, 2013 at 1:26 pm

    Hi David,

    Trying the Carousel interaction for the first time. Am I to supply graphics to have pictures appear in the boxes that currently read “No media?”

    Thanks.
    Greg

    • David
      March 27, 2013 at 3:31 pm

      Greg,

      The Carousel interaction requires you to provide images for each of the steps. If an image isn’t added for any given step, the No Media icon will appear as you have noted. I would recommend adding photos that are square, this will ensure the images fill the square rotating thumbnails.

      I hope this helps!

  17. Fabio Foster
    July 2, 2013 at 1:44 pm

    hello,

    interaction carousel, there is the possibility to insert images with transparent background?
    I inserted some images, however, the background is not transparent but white!

    thank you,

    • David
      April 6, 2014 at 10:24 pm

      Fabio,

      Sorry. It’s not possible to insert transparent images. In an earlier version I created this was possible, however, there were too many code conflicts with Articulate Presenter, so I removed this functionality.

      Sorry for the delayed response.

  18. Todd
    September 27, 2013 at 8:45 am

    I downloaded the Carousel zip link above and got a “There was an error installing this package” notice. Also it initially stated “Would you like to install version 0?” Any suggestions?

  19. David
    April 6, 2014 at 10:35 pm

    Theresa,

    I would hope you found the answer to your question back in 2013, but in case you didn’t the link below should explain how to change the body text color for any Engage interaction.

    https://www.articulate.com/support/engage-09/formatting-text

    Note: All Engage ’09 interaction types allow you to edit text using the rich-text editor.

    My apologies for the delayed response. I hope this helps.

Leave a Reply

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