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?
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.
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.
Thanks Gillian for sharing some of the gifs you are using. I've shared these with the team as we continue to investigate this issue and will be sure to update you here when I have additional news to share.
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.
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.
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.
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.
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
A quick note to let you know we've resolved the issue where some animated GIFs had purple outlines in published output. Update 26 of Storyline 360 is live today and includes this fix. Follow the steps here to update your Storyline 360 app!
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.
12 Replies
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.
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.
Thanks Gillian for sharing some of the gifs you are using. I've shared these with the team as we continue to investigate this issue and will be sure to update you here when I have additional news to share.
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.
Hi Christopher and welcome to E-Learning Heroes :)
We have both of the issues you mentioned reported and this conversation attached so that we can update you when we can.
Glad you found a workaround for the purple dot in the meantime.
Hi Christopher,
I'm curious about how you managed to avoid the purple outline. I'm often working with GIFs and it would be great if I could use them again.
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.
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.
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.
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
Hi Christopher,
A quick note to let you know we've resolved the issue where some animated GIFs had purple outlines in published output. Update 26 of Storyline 360 is live today and includes this fix. Follow the steps here to update your Storyline 360 app!
Hi all,
Great news!
If there's anything else I can answer, please let me know.
This discussion is closed. You can start a new discussion or contact Articulate Support.