Hi all. I'm trying to put together a water flow animation that follows a pipe - and the pipe has curves and cross junctions (the pipe is only very small, like a CAD diagram). I'd like to be able to change how far the water goes along the pipe based on an action. Does anybody have any examples of how this can be done or be able to point me in the right direction?
More information would help here. How are you doing this. Are these images, animations, video clips, etc. Are you attempting to do this in Storyline or something else?
I thought I was posting in a general Storyline forum ;) It's Storyline 3. The pipes are graphics, and I need to be able to fill these pipes up to a certain point, following the pipes as the water fills. So it could be straight or curved. I can't find any way of doing it, motion paths certainly isn't the way to do it, perhaps some form of background fill but I can't see how to make that following the direction of the pipe.
It really depends on the level on animation that you require. You could easily show each stage of pipe with individual images on layers or in states. Just create individual images, and change states or layers to swap out the image as needed.
If you want it to actually look like the water is flowing through the pipe, then you are looking at something a bit more sophisticated. For that type of animation, I generally turn to Adobe After Affects, and create a short video. Then you just input the video, and where needed. You can also mix video and stills if you need to provide places to stop for explanations or activities.
Unfortunately, the animation tools available in Storyline are pretty limited. That's why I always use other resources and then import my artwork.
That being said, you can do something using the wipe animation. I've created an example for you to look at. Perhaps something like this will work for you.
That's a really great point Matthew. As usual, IE is the trouble maker in the crowd. This does work in Chrome and Firefox though. Perhaps IE will catch up someday, but you can never tell.
I still think the best solution is to animate with something else, and then import the video file.
Is it possible to freeze the animation at a certain point before it finishes? Also can the animation be on another layer and be seen through a transparent top layer?
I would need to show the pipes empty before hand and then animate the water flowing after an action.
In the example that I sent to you, the animations are all on a separate layer. The animated images are above the base image. Take a look at the timeline, you'll notice that each section of pipe is animated individually. You can move the time lines around to space them however you like. I started the animation at the beginning, but you can change the trigger to begin the animation whenever you like Just show the animation layer when you are ready for the animation to run.
To create the animation, I just copied all of the shapes that I created on the base layer to a new layer, and changed their color. Then I displayed the shapes one at a time by spacing their starting times out on the timeline, and used a wipe affect to reveal them.
I seem to have found a bug - I've managed to create the water flow animation thanks to your help, and I also created a water tank which has a decreasing water level (using Wipe). However, this animation should be triggered from the very beginning of the timeline, but for some reason it waits until the rest of the animations of the water flow are complete. I've tried removing it and creating it again, but same problem.
To trigger the animation, be sure to start the animated element at the beginning of the timeline. If you placed the element on a new layer, then you will also need to add a trigger to show the layer when the base layer starts.
I've done both of those, the other flow animations works fine but the water level animation doesn't start even though it's right at the beginning of the timeline.
To show your water level in the tank dropping to a lower level, try this,
Create an image of your tank with the water level at it's ending point. All of your shapes in this initial image should be static.
Add another shape of your water level at it's starting point, (full tank.)
Add an exit wipe animation to the new water level image. Set the duration to how long you want the animation to last. Set the end of this timeline to end at the same amount of time that you set your duration. Set the effect direction to down.
Exactly what I've done and it works like that *but* doesn't play the animation until the rest have finished on the slide even though its at the start of the timeline.
Since that is an exit animation, be sure that the end of your timeline is at the spot where you want the animation to end.
In my example, I set the duration for 3 seconds, so the end of the timeline for the animation is also at 3 seconds. This way the animation starts at the beginning of the timeline.
21 Replies
Hi Nick,
More information would help here. How are you doing this. Are these images, animations, video clips, etc. Are you attempting to do this in Storyline or something else?
I thought I was posting in a general Storyline forum ;) It's Storyline 3. The pipes are graphics, and I need to be able to fill these pipes up to a certain point, following the pipes as the water fills. So it could be straight or curved. I can't find any way of doing it, motion paths certainly isn't the way to do it, perhaps some form of background fill but I can't see how to make that following the direction of the pipe.
So you are trying to animate the water flowing?
It really depends on the level on animation that you require. You could easily show each stage of pipe with individual images on layers or in states. Just create individual images, and change states or layers to swap out the image as needed.
If you want it to actually look like the water is flowing through the pipe, then you are looking at something a bit more sophisticated. For that type of animation, I generally turn to Adobe After Affects, and create a short video. Then you just input the video, and where needed. You can also mix video and stills if you need to provide places to stop for explanations or activities.
Does that help?
I would prefer to use Storyline natively to create this animation - don't have access to any animation tools at the moment. Any other pointers?
Are you doing all of your artwork in Storyline?
Unfortunately, the animation tools available in Storyline are pretty limited. That's why I always use other resources and then import my artwork.
That being said, you can do something using the wipe animation. I've created an example for you to look at. Perhaps something like this will work for you.
That's a really great point Matthew. As usual, IE is the trouble maker in the crowd. This does work in Chrome and Firefox though. Perhaps IE will catch up someday, but you can never tell.
I still think the best solution is to animate with something else, and then import the video file.
Is it possible to freeze the animation at a certain point before it finishes? Also can the animation be on another layer and be seen through a transparent top layer?
I would need to show the pipes empty before hand and then animate the water flowing after an action.
Hi Nick,
In the example that I sent to you, the animations are all on a separate layer. The animated images are above the base image. Take a look at the timeline, you'll notice that each section of pipe is animated individually. You can move the time lines around to space them however you like. I started the animation at the beginning, but you can change the trigger to begin the animation whenever you like Just show the animation layer when you are ready for the animation to run.
To create the animation, I just copied all of the shapes that I created on the base layer to a new layer, and changed their color. Then I displayed the shapes one at a time by spacing their starting times out on the timeline, and used a wipe affect to reveal them.
Apologies, haven't had a chance to look at this until now. This looks exactly how I want it to work, so I'll take a close look at your story. Thanks!
I seem to have found a bug - I've managed to create the water flow animation thanks to your help, and I also created a water tank which has a decreasing water level (using Wipe). However, this animation should be triggered from the very beginning of the timeline, but for some reason it waits until the rest of the animations of the water flow are complete. I've tried removing it and creating it again, but same problem.
Ni Nick,
To trigger the animation, be sure to start the animated element at the beginning of the timeline. If you placed the element on a new layer, then you will also need to add a trigger to show the layer when the base layer starts.
I've done both of those, the other flow animations works fine but the water level animation doesn't start even though it's right at the beginning of the timeline.
Hi Nick,
Can you post a copy of your project here? I'd be happy to take a look at it for you.
Unfortunately I can't do that due to corporate data policies. I'll continue experimenting with the water level animation.
To show your water level in the tank dropping to a lower level, try this,
Take a look at how I did it in this example.
Exactly what I've done and it works like that *but* doesn't play the animation until the rest have finished on the slide even though its at the start of the timeline.
Instead of wipe animation, you could use an animated slider. Something similar to my car example: http://predogled.licej.eu/samples/slider-trick/
https://community.articulate.com/discussions/articulate-storyline/adjust-car-s-speed-on-the-fly-can-you-guess-how-this-was-done
Since that is an exit animation, be sure that the end of your timeline is at the spot where you want the animation to end.
In my example, I set the duration for 3 seconds, so the end of the timeline for the animation is also at 3 seconds. This way the animation starts at the beginning of the timeline.
That's solved it - my fault in setting the end of the animation in the wrong place.
Cool! I'm glad you found it.
Remember, mistakes aren't and error, they are a learning opportunity. Trial an error is the best way to work out how this stuff works.
This discussion is closed. You can start a new discussion or contact Articulate Support.