Blinking shapes? Not possible???
Nov 10, 2016
By
Stian Larsen
Hi guys,
I've been trying for way too long to add very basic simple "animations" to my course, but I can't get anything to work.
What I need is simply a shape fading in and out, in a loop. Is this not possible in Articulate Storyline?
Example. I've got 5 traffic lights in my scene. I need to flash the lights. How?
Also, Articulate Storyline does not support SVG? Any other way to get vector graphics into Articulate?
Thanks a lot for any help regarding my issues! :)
19 Replies
Hi Stian, Make a layer for your red light call it " red". Make sure that it is not set to pause base layer (press the cog in slide layers to check). Draw a red circle in that layer. Give it some empty space on the timeline by grabbing the right side of it on the timeline( you need empty space for it to be off). On the red circle, place an entrance fade animation of .25 seconds and an exit fade animation of .25.
Then(within "red"layer) make a trigger that hides the layer on timeline end. Make another trigger immediately after that says show "red" layer on timeline end. This makes your layer loop. Hope that helps.
Hi, and thanks for your reply. As this would work for a simple slide, it would not be a very practical solution to my problem.
My course will need probably around 50-80 blinking shapes. That's too many layers to even bother.
Would it be possible to use javascript to target a shape and make it blink?
If the shapes are in a cycle you can place them all within the single layer. If they are independent. Then you are correct.
You can make and entrance and exit animation loop by using change state when animation completes triggers
Nice one Phil. I forgot about that trick.
Yes, Stian you can use JS, but again unless they're all on the same period, you will still have a lot of work to do with variables and states.
here ya go.. this fits the bill. hope this helps.
Thanks for your comments, Phil and Richard :)
I've so far made my courses from scratch in Adobe Animate, using JavaScript. My problem is that my team is not familiar with JavaScript, so I was hoping to make it work with Storyline.
Thanks a lot for creating the test-file. I will play around with it, and I think I might be able to make it work. :) Thanks again for your help.
PS: Will there be an update to Articulate Storyline 2? Because the Flash first approach when publishing is not working for us at all. I need to manually rename and move files to make HTML5 version play first.
EDIT: I did some testing, and indeed the "Hide this layer.. Show this layer" with in/out animation works. I will have to add some global variables to control when I want it to stop though. Or I can pause the timeline and hide the layer. This will be triggered from one of the "parent" layers.
Got one more question. I'll keep it in this thread.
I need to animate an arrow along a path. But I also need it to face the direction it's traveling. The path is a curved custom path.
Richard may have a solution to this as he is a wizard with animations.
Orient to Motion path is a feature in the New Storyline 360 but is not available in SL2
Thanks, I will wait and see if he might have a solution :)
Also, are there no way to edit a curve shape? When I try to make a curve, the line bends very differently when I'm done editing. And no way to adjust it.
And no way to jump in timeline? Say, On <trigger> jump to 3 sec in timeline.
I'm missing a lot of basic functionality. Sorry for asking so many questions ^^
Don't worry about the number of questions.
You cannot edit a curve, would love to see this.
You cannot jump to points in the timeline unfortunately.
Thanks for your answers :)
Does Articulate support any video format (or any format at all) in which I can import a Flash video or other video with transparency? (in HTML5 output)
Not that will be supported by the HTML5 output.
I have had success with knocking the background out of Adobe Animator html files, whereby the canvas objects moved about the screen and did there thing over SL. I've only been able to get it to talk one way though ( Flash to SL). Y'know if you're good at JS and Animator you don't really need to deal with all this stuff. You can get them to communicate and pass vars. And you get "curve to path free". w/o 360.
There's not a lot of info on procedure out there though, and I've only dabbled with the communication part. But to bring in your animation from Adobe Animate is the fairly easy part. Just name your AA file" index.html" and place it in a folder with it's contents. Then target that folder as a WebObject. Within Storyline you can put SL layers above this with content. Edit that original index.html to make the background transparent before you import though.
Example: http://www.richardleehill.com/goni/story_html5.html
Thanks for your help Richard :) I really appreciate it.
I think I will have to look into how to communicate between SL and Adobe Animate HTML5. If so, I could put all my animated assets in one exported canvas, and switch between them using javascript commands from SL. Will look more into the possible solutions.
This is one should help. https://community.articulate.com/discussions/articulate-storyline/webobject-and-storyline-variable
This discussion is closed. You can start a new discussion or contact Articulate Support.