Animated path that grows around the screen (must work in HTML5 & IE)
Jul 20, 2018
Hi, I know there are some really clever Storyline animated out there. I need to create a particular style of animation which works in HTML5 output and with IE. Without being able to use any of the masked animations I'm a bit limited.
Basically I have a 3D render room which is viewed from above. There are 5 colour coded scenarios which trace different paths around the room visiting different objects. The end result is each of the five paths is fully visible i.e. the complete route is shown, at the end of the animation.
The best I have been able to create at the moment is a coloured dot which follows a motion path around the room and at the end of the motion path the full route (as a coloured custom line) fades up and the dot disappears.
Does anyone have an idea for animating a growing line around the room (Note: it changes direction a number of times) that will work in HTML5 and IE.
I'm working in 360.
Thanks
Trevor
6 Replies
This may not work for you but you can use scrolling panels for rudimentary masking. See here a rather rough example. Each line "runs" on a motion path in a (invisible) scrolling panel. It would take some trial-and-error to get the alignment right, but it may be worth a shot.
Hi M ichael, I have used the scrolling panel trick as a mask before. These paths are complex and at various angles so it will be tricky to get it smooth. But your rough example looks good. I'll give it a go.
I'd use wipe entrance animations.
Hi Tom, Unfortunately Wipe Entrance does not work in HTML5/IE as it is a masked animation. It is simply swapped for a fade. A motion path in a scrolling panel is a simple trick to get around the IE limitation.
This might sound like a pretty lousy workaround, but could you edit the 3D render in an image editing program and create an inverted mask of your line (so basically the path is 'cutout' of the image). Then import this new image and place it over the top of your 3D render image. All you need to do then is animate some coloured shapes 'between' the bottom-most and top-most images (using fly-in's/motion paths etc.), so that the colour shows through the transparent areas on the top-most image.
As I said, it's not an ideal solution and would require some trial/error with timing shapes/animations. But it's a potential workaround.
The only other option I can think of is using a javascript library to do some HTML canvas effects in the published output, but I honestly wouldn't know where to begin with something like that.
Hi Ben, thanks for the suggestion. To be honest I'm looking to keep it as simply as possible because at the end of the project I need to hand the master SL file over to the client for ongoing maintenance/updates. Their team have limited Storyline and graphical skills so I want something they can amend themselves.
This discussion is closed. You can start a new discussion or contact Articulate Support.