Gif purple outline and some do not display

Hi

 

When I publish my storyline file (web, include html5 output) the gif displays either like this:

or does not display at all when published, or it displays fine. I have created various gifs with ezgif.com. How come do some gifs display whereas others do not? I have attached one gif that works and another that does not display.

I have read on the forum that if published as flash the purple hue will disappear, but my problem is that flash does not work on mobile devices.

Thanks

 

Update:

 So I was opening it directly from its file(in Chrome). I see the problem is gone now once I open it in it's attended environment. (I uploaded it onto tempshare) and it displays fine now.

29 Replies
Alyssa Gomez

Thanks for that update Anastasia! I appreciate you sharing your experience for the benefit of others in the community, since this is another example of how viewing published content from your local hard drive can cause aspects of your content to fail. Instead we recommend uploading published content to the environment for which it was published. Glad to hear you got it sorted! :)

 

Chris Hodgson

I too was experiencing this issue with animated GIFs that I had placed into a recent project, the outline was showing a faint purple line that I couldn't seem to get rid of, whether viewed on the desktop or uploaded to my web server as suggested above.

BUT I found a very bizarre solution!

If you use the crop tool in Storyline on your image just to take off a tiny bit off the edge (so for example keep a little bit of space at the edge of your GIF so that that you can crop it out in Storyline) then all of a sudden when you preview the project the purple lines are all gone!

Juan Alegria

Yo estoy usando un gráfico para animar hacer parpadear mi personaje, pero el personaje tiene este color. Este color no lo muestra , solo me muestra la linea negra. Probe con muchos colores y todos funcionan pero este color en especial no lo muestra. Algun desarrollador de Storyline que sepa porque puede pasar esto? es que Storyline en su codigo de programación considera este tono de color para transparencias?

 Este color no lo muestra

 

norteo es problema del GIF animado ya que en otros software funciona perfecto.

gracias

Colin McRae

Hi Leslie,

 

I'm having the same problem and I was wondering if there are any other solutions besides cropping? I need to have the project published in HTML5. When I open the gif in Edge or Chrome it appears normal as you can see below. In the Storyline timeline it also appears normal. The bright purple outline only appears when I preview or publish it. 

Are there some best practices in regards to the export settings of gifs? I'm exporting out of Photoshop so I have some flexibility if there is anything I need to watch for. Thanks!

Colin McRae

Hi Ashley, 

Thank you for the quick response! I've attached the .gif. As iterated in my previous message the gif should look fine if opened in a browser directly.

In Storyline I created a new project, Went to (Media) Picture > Insert > Picture from file.

Then published Entire Project. 

This should recreate the issue. Hope it helps! 

Thank you.

 

Alyssa Gomez

Hi Colin,

Thanks for sharing the GIF file with us. I saw the purple border when I inserted it on a Storyline 360 slide, and cropping the GIF didn't seem to solve the issue. I'm going to share this with our Support Engineers for a second look, so keep an eye out for an email from them soon!

Katie (Gokhshteyn) Riggio

Sorry you're seeing the purple lines too, Mike! We've got this behavior logged as a software bug now, and our team is looking into next steps. 

This discussion is added to the associated report so that we can keep everyone here posted on this bug's progress! Thanks to all for bringing this to our attention, and I'm really sorry it's slowing you down!

elliot tordoff

Hi Ashley,

Yes, if you resize a gif in Storyline, and make it smaller. Then preview/publish, you'll see a purple outline.

I got around this by going back to Animate CC and resizing the GIF export and then importing to Storyline but this is a long way around to ensure the correct dimensions.  I use quite a lot of dynamic elements in my learning resources, Is there a timeline for when this bug will be fixed?  Thank you in advance 

Crystal Horn
  • Hi there, Mike.  I'm really sorry that this has been tricky for us to nail down.  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, like with your dog .gif example. 

    The purple outline right now occurs with HTML5 output.  Our team does have this issue on the radar, so I appreciate you sharing your example.  It helps us narrow our focus!

  • Hi Elliot, and thanks for clarifying.  I'm seeing the same behavior with those steps you described.  I believe it's related to the transparency of the .gif.

I've updated our report on this issue, and I'll make sure we share new information here with you.

Gillian Delvigne
Chris Hodgson

I too was experiencing this issue with animated GIFs that I had placed into a recent project, the outline was showing a faint purple line that I couldn't seem to get rid of, whether viewed on the desktop or uploaded to my web server as suggested above.

BUT I found a very bizarre solution!

If you use the crop tool in Storyline on your image just to take off a tiny bit off the edge (so for example keep a little bit of space at the edge of your GIF so that that you can crop it out in Storyline) then all of a sudden when you preview the project the purple lines are all gone!

Hi Chris,

Thanks for sharing this tip. 
Could you provide an concret example in attchment, please?

I tried to crop my GIFs without success.

Thank you!