Purple border around my images (GIF)

Hi all,

I posted a message a few days ago about some problem with GIF handling in Storyline 360. GIF with a size who exceeds 2000px are displaying as static images.

But I encounter a new problem that severely alters the quality of my creation. There is a purple border around my images. I tried several parameters to avoid this (size, quality, color mode), in vain. See attachment.

Have you the same problem when importing GIF in storyline? Is there a way to fix this?

Thanks a lot!

 

12 Replies
Crystal Horn

Hi there, Gillian.  I'm sorry that GIFs in Storyline are giving you some trouble.  I see your other discussion replies, and I read through your case with Renson.

For the purple line issue, we are seeing a difference between .gifs with transparency and .gifs with solid backgrounds. The transparent .gifs (like a .png image) seem to produce the purple outline with HTML5 output.  It looks like you tried one of the user-recommended workarounds to crop the GIF without any success.

If you'd like to attach the GIF to this discussion, I'd be happy to have a look and see if we can come up with a solution!  Renson had mentioned converting GIFs to MP4 files, and then using triggers to loop the playback.

I'll keep you posted on our progress with the purple line issue, in the meantime.

Gillian Delvigne

Thank you for your answer, Crystal Horn. :)

I only use transparent GIF to create interactive scenes for my learners (small serious game) following this method: https://www.youtube.com/watch?v=nvy1Fr3Ep3Y

I know that GIF files have a little trouble with transparency and that the outline pixels are full of color, but by applying the right settings (in photoshop), you can choose not to display the mask or force it to blank. This can lead to very good results.

For example, the following files (as attachments) display perfectly in a browser, but they display the purple outline when imported into Storyline.

 Thank you for your consideration.

Christopher Martinez

Hi, we are having the same issues here in our department. Additionally, when we have been able to produce a gif without the purple outline (which usually involves scaling), there is always a purple dot in the bottom right corner in any gif with transparency. So far we've been handling this by covering it with an object in storyline. 

chris holman

Hi all i have experienced the same issue and found a few causes and a few solutions.

Firstly, if it’s a static image with a transparency save as a .png not a gif, this will produce the transparency that can be scaled in storyline.

If you want to have a transparent moving animation you need to be careful when scaling, whatever the size you want in storyline the gif needs to be around the same size as scaling a gif down causes the purple outline, I believe this is because the edge of the object and the transparent background is not interpolated properly when scaled down. This also goes for reducing scaling the image down when saving for web.

I have also experimented with settings when saving, I have added what works for me.

Christopher Martinez

Hi Gillian,

  I avoided it by always maintaining a 1:1 scaling from Photoshop to Articulate. Any scaling at all caused the borders we were seeing. Where a single pixel was turned, usually with a transparent-animated gif, we used a small box object with similar background color to hide it. 

Christopher Martinez

Hi Chris, 

  We had the same results and had the same solutions. I heard from my co-worker that they were not seeing the outlines on Scaled-animated GIFs once the project was published into HTML5 which leads me to wonder if it's an issue only restricted to the storyline player. I didn't get to play with the publishing options. Was wondering if you saw your purple outline disappear in the published project.

chris holman

Hi Chris, i have had a bit of a play with it, i think you can get away with a little scaling but if you push it you will get the line. I also found the smaller and thinner the transparencey  in the gif can also produce the purple line. Avoid any fade transitions also as these product the same effect.

I also found once published the output is usally better

Ashley Terwilliger-Pollard

Hi all,

Great news!

  • If you're using Storyline 360: We just released Update 27. This release includes a fix for the issue where transparent animated gif has a purple dot at the bottom right. To see what this version has to offer, follow these steps to update your software.
  • If you're using Storyline 3: This issue isn't fixed in Storyline 3 just yet, but we promise to keep this discussion updated as soon as new information is available.

If there's anything else I can answer, please let me know.