Forum Discussion
AntsMarching Animaton
I am looking for an Ants Marching animation for Storyline. The learner will stay on this slide for some time, so motion paths probably will not work. I have tried to create the animation in PowerPoint with no luck. I am basically making a rectangle with the starting and ending points close to the same spot for an electron flow diagram. I do not know enough JavaScript to go that route alone.
Animating in Articulate can be difficult. Here are my suggestions.
- Name your paths.
- Set up a series of cue points.
- Change your triggers logic.
- Move [first object] along [path 01] when the timeline reaches [cue point 1]
- Move [first object] along [path 02] when the animation completes [path 01]
- … repeat as necessary
-
Control your speed using “Duration”. So if your horizontal path is twice as long as your vertical path, then your vertical path duration needs to be twice as long as your horizontal path duration.
-
Set the “Direction” to none. I don’t know why its called “Direction”; it should be called “Easing”, and the ins- and outs- create a sense of friction which you probably don’t need for this animation.
I’ve attached a tweaked file. If you drag the stop and start points of the paths on top of one another, you should get an effect of a dot moving around a rectangle (I’ve kept them separate for illustrative purposes).
You can duplicate the object to automatically duplicate all of the paths and triggers. If you change the cue point, you can offset their start times so that they follow one another.
Good luck!
P
12 Replies
This would probably be easier to do in Motion tools like Apple Motion or after effects. If I was building in Storyline I would use freeform motion paths for the whole circuit and then remove the easing would be a lot of work
I'm wondering if Samuel has any ideas here or past work that might be able to be applied with a small tweak, since I know he has animation skills!
Animating in Articulate can be difficult. Here are my suggestions.
- Name your paths.
- Set up a series of cue points.
- Change your triggers logic.
- Move [first object] along [path 01] when the timeline reaches [cue point 1]
- Move [first object] along [path 02] when the animation completes [path 01]
- … repeat as necessary
-
Control your speed using “Duration”. So if your horizontal path is twice as long as your vertical path, then your vertical path duration needs to be twice as long as your horizontal path duration.
-
Set the “Direction” to none. I don’t know why its called “Direction”; it should be called “Easing”, and the ins- and outs- create a sense of friction which you probably don’t need for this animation.
I’ve attached a tweaked file. If you drag the stop and start points of the paths on top of one another, you should get an effect of a dot moving around a rectangle (I’ve kept them separate for illustrative purposes).
You can duplicate the object to automatically duplicate all of the paths and triggers. If you change the cue point, you can offset their start times so that they follow one another.
Good luck!
P
This is so awesome & helpful, thank you so much for chiming in!
Sounds like the perfect showcase for the power of GSAP's MotionPath plugin...
As seen here, but offcourse with a different path ;-)
https://www.youtube.com/watch?v=EutaYjHqv1U
Here a sample of how GSAP's plugins can work.
https://360.articulate.com/review/content/0423b384-58f0-4527-b755-3d3589a5ffce/reviewHi David, Not a marching ant resolve.
But re: "learner stays on slide for some time"
In storyline you can loop motion paths so the animation keeps repeating automatically by adding a trigger.
Copy trigger > Paste trigger > Change pasted trigger to when animation completes ..."The attached file has an option that works if you’re okay with bringing the “electrons” on one at a time.
Each electron has a freeform motion from the starting point of the circuit to the resistor.
Each one also has line motion path with a length of 0 (i.e., it doesn’t go anywhere). That has a super short duration. In essence, the puts the electron back at the starting point.
Both motion paths have no easing (i.e., Direction = None). They do not use a Relative starting point.
The first move around the circuit starts when the timeline of the electron starts. In the file, their entrances are spaced 0.25 seconds apart on the timeline.
When an electron’s path on the circuit completes, the 0-length path is triggered. That jumps the electron back to the starting point. When that short animation completes, its circuit path runs again.
The demo only includes 2 electrons. You’ll have to add more to fill the circuit. Consider spacing them out more so you don’t have as many to worry about.
Good luck!
P.S. I also recommend entering the equation directly into oval. It's easier in the long run to work with a single object instead of a group.
Hi DavidNowlin-f8a
I created a shape with a green border to replace multiple lines, representing the motion of electrons. Each electron follows a square motion path, with the dimensions and position of these paths perfectly matching the green-bordered shape. All motion paths last for 10 seconds, loop continuously, and have no easing. The timeline also spans 10 seconds, with the electrons appearing 0.25 seconds apart. Lastly, I set up a trigger to jump to time 9.25 seconds when the timeline starts, ensuring the electrons appear as if they are moving from the "minus" sign.Thank you everyone for the ideas and advice.
