I’ve been wanting to create an interactive infographic for awhile, but wasn’t sure where to start. Then it came to me: what if I used Rise 360 and integrated some Storyline blocks? And that’s how th...
Published 7 years ago
Version 1.0
Blog Post
The sliders aren't working in Chrome for you? I'm using Chrome on my end and they're working...so that's really strange. What version of Chrome are you using?
I did not make the gifs, our motion designer did so I'll let her jump in here and explain how she does it. :)
I did not make the gifs, our motion designer did so I'll let her jump in here and explain how she does it. :)
Hi Allison,
This is an inspiring example. Thank you for your work!
I'm anxious to find out how you made the GIFS, or how your motion designer did. I'm not a motion designer but hoping to find out how I too can do this.
You mention here and above you'll let us know.
Many thanks!
This is an inspiring example. Thank you for your work!
I'm anxious to find out how you made the GIFS, or how your motion designer did. I'm not a motion designer but hoping to find out how I too can do this.
You mention here and above you'll let us know.
Many thanks!
- Hi Camilla,
I made the animations for Allison in a program called After Effects. There are lots of ways to animate the different things like the planets or the spaceship. Animating in After Effects is a lot more "from scratch" than in something like power point or Storyline, but it's really fun to learn (for me at least haha).
After animating in After Effects I use adobe media encoder to render my animations to .mp4 videos. Then I used Photoshop to convert those mp4 files to gifs. You can also use online gif makers to convert just about any mp4 file (or a part of that video file) to a gif!
Hope this is helpful!- Thank you for your help!
- Hi Laura,
I've built my animation in storyline and used screen to GIF to create the GIF. When uploaded in to rise it's very pixelated. I re captured it on a wider screen setting but it didn't fix the issue. Any tips you have would be great. Here's the very bare rise file and its' the 'beach' section. https://rise.articulate.com/share/qULK-ly3xXsrjepjOQMv9-mAWEnQX0eB
Any assistance would be great. I can also send the articulate file if needs be.
TIA
Emma- Hi Emma, sorry to jump in. Having looked at your animation I thought it looked pretty good and I thought initially it was an intentional style choice. I think what you are referring to as 'pixelated' is actually 'colour banding' and is quite common with the GIF format. The GIF being an older format has inherent limitations. For example it can only support 256 colours and uses various (compression) methods to compose the image you see on the screen. I have never used 'Screen to Gif' so I am unsure what compression methods they use for their GIF output. But in Photoshop for example you can do things such as reduce amount of colours or apply 'Dither' (a way to make colour banding look smoother). My guess with your image is that the 'screen to Gif' software does not apply Dither which is causing the colour banding. I could be wrong but that's my best guess. I would suggest using a different tool to create the gif. Using storyline to create the animated GIF is probably not the best idea, but if you are limited by software a work around might be to record short screencast of the animation cropping out any background (maybe you can use articulate Peek?) then you are free to use other GIF generator tools on the web (https://giphy.com/create/gifmaker).
I apologise if you know all this stuff already!
Andy
p.s. I'm English, hense the spelling of colour and apologise ;-)
