Buttons with Animations Blurry

Sep 16, 2020

I have yet another issue with the quality in published Storyline 360 projects. I have two buttons on the screen from the beginning of the timeline, both with a half second fade-in animation. The quality in the published project is horrible. I thought maybe the animation is messing with Storyline's brain. Sure enough, I took the animation off of one button and left it on the other button. You can see the difference in quality, it's jarring. Can you please fix these quality issues? We are being forced to look at other development software because of them.

7 Replies
Sara Fromme

I noticed that in PowerPoint when we use some effects, it's like PowerPoint converts the image to something to run the effect and we have some degradation of the image, as well. Perhaps something similar is happening in Storyline.

If the button is a shape with text then I it is a vector image which remains crisp. My guess is that the vector image is converted to a bitmap to run the animation and that's why it loses some quality.

What happens if you save the button as an image at a higher quality and then add the animation to the image? Is there any degradation?

Again, this is all a guess on my part. Our team usually builds all of the graphics (even buttons) outside of the authoring tools and then we bring them in and assemble. I'd rather have a graphics program create my graphics the way we used to do it in the Flash world. And use the eLearning software to assemble the courses.

Paul Colby

Thanks Sara. I didn't understand your sentence ... If the button is a shape with text then I it is a vector image which remains crisp.

There are always work arounds, of course. Another thing that could be done is use one button timeline just for the animation, end its timeline, then bring the button in again with no animation. I am less interested in work arounds than in Storyline fixing quality issues like this. It kind of defeats the point of using software like this if we're always jumping through hoops to make simple things work.

Sara Fromme

From what I understand, when I create a shape in Storyline it is a vector shape that can scale up or down and remain crisp. A bitmap image like a jpg or png is a grid of fixed pixels and has some image degradation when inserted into a program especially if it scales up or down.

My guess is that Storyline has to convert the vector shape to a bitmap image to activate the animation. PowerPoint has a similar issue when you apply effects or some of the SmartArt. You'll notice that the quality degrades a little, too. 

I don't know if that's what happens in Storyline but that's a guess. If it does, then the vector shape is going to be converted to a lower resolution bitmap and I'd expect some degradation compared to the original vector shape. 

Like I said before, our team creates all of the assets outside of the authoring tools and then we bring those into the software to build the course. This way we can control the quality of the assets.

Paul Colby

Yes, I know what a vector image is. I don't understand your sentence, as written, due to its structure. I think you left some words out or something.

If you're saying to use vector images in place of Storyline's built-in buttons, then how do you import vectors into Storyline without Storyline converting them to bitmaps? Especially if they have an animation effect on them?

Paul Colby

You're guess is a good one. I agree with you. You're suggesting that instead of using the built-in buttons in Storyline, which come with different states, styles, etc., that I build all of the thousands of buttons for a project outside of Storyline, including the different states, styles, etc., saving them in a format that is of acceptable quality, then importing them all into Storyline and creating custom buttons? And that seems a better way to go than Storyline becoming aware of the issue and fixing the problem on their end? Not to mention that creating buttons that look halfway decent requires some level of graphic design. All of that circumvents the exact reason why an instructional designer/developer would decide to use a tool like Storyline.

If I were an instructional designer, rather than hire a graphic designer/production artist to create buttons all day long, I would implement the idea I suggested above, with a button on screen only for the time of the animation, and the exact same button w/o animation. I've attached a sample and an image. It's not perfect, there is a very slight shift between the two, but that's the price we pay for using a tool like Storyline, whose purpose is supposedly to save time, not to make things more difficult.

That, or I would do away with the animation altogether and just pop the button on screen, which is probably the route I will end up taking.

Sara Fromme

I get what you're saying. I don't think it's a bug I just think it's the nature of the way those tools work. As I was saying, PowerPoint does the same thing when you start to apply effects and other things to their shapes. 

I always assumed it's part of the conversion. 

However, if you have an issue with the software you should contact Articulate directly as this is a community forum.

This discussion is closed. You can start a new discussion or contact Articulate Support.