Gif purple outline and some do not display
Jan 17, 2017
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
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! :)
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!
That is certainly an odd solution, but glad it worked for you and I'm certainly glad you popped in to share in case it can help others in the future :)
Hi there, can confirm the method Chris used as a quick-fix for purple-lined GIFs. There is a big change in outline simply by randomly cropping. Thank you!
Thanks for confirming that it worked for you, Kyle!
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?
norteo es problema del GIF animado ya que en otros software funciona perfecto.
gracias
Hello Juan,
Looks like I just responded to a similar post here.
Just wanted to link the two for anyone following along.
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!
Hi Colin,
Our team has been looking for a sample GIF to try and recreate this, and it doesn't seem that we have one yet. If you're able to upload one for us that is behaving oddly for you, we'd love to take a look!
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.
Colin,
Have you not tried cropping the image as I have suggested in my answer above? Even just cropping the GIF in Storyline ever so slightly on the edge will make a huge difference when you come to preview or publish.
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!
Just having this issue now, strange..
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!
I wonder if the latest update for 360 might have fixed the purple line bug on animated GIFs.
I've just tested it on one particular project on my end and it seems to be OK. Is anyone else able to test it out and confirm?
Hi Chris,
The issue is still open with our team - but if you're seeing it fixed, I'd love to know a bit more. Can you share a copy of the .story file here with our team?
Still the purple lines. Would love this to be fixed!
Hey Mike,
Would you be able to share the gif that's giving you trouble?
This one has been hard to replicate, but seems specific on the gif used.
Curious if you downloaded your gif from a website as well or what you used to create it.
I too have purple lines on gifs. These gifs were created using Adobe Animate CC. I've attached one. Cropping the gif didn't work either. It seems to happen if you resize the gif (make it smaller) the purple lines appear?
Hi Elliot,
Thanks for sharing this example - you mentioned resizing, and I wanted to check if that was when you inserted it into Storyline or if you're resizing it first in Animate and then seeing the oddness in Storyline?
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
This post was removed by the author
Ok, heres an example. It does not matter the software the .gif is made in. Does it with Animate, Photoshop and CrazyTalk animator.
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!
I've updated our report on this issue, and I'll make sure we share new information here with you.
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!
This discussion is closed. You can start a new discussion or contact Articulate Support.