Forum Discussion
making a bar graph animate up and down as you move a slider
hello everyone,
I am in need of some help. i am creating a bar graph that has a slider for yr 14, 15, 16 the bar should slide up and down as you slide to the years but the bars should be able to ease the bar in a natural form rather than just jumping to the different size bars for the years. i have seen this in a getting started demo with articulate but there is no demo of how to do it. Can anyone help?
Here is a sample that may get you started.
That's a cool idea, Walt! Great way to keep your stops, states and triggers to minimal. I've racked my brains before over having a million different states to simulate fluid motion.
Walt that is close to what I am looking for. my graph would go like this. point0 nothing on the chart. (Point 1)show 236 then back down to (point 2) 202 then back to (point 3) 124. Would I have to create one motion going forward for the 236, then another motion going back to 202, then another motion going to 124 and a once I get to point 3 I would have to make 3 more motions triggers to get back to 0? does this make sense. I have attached a document to show what I am trying to do.
walt and company, if you look at this video by tom you will see the wellness chart that was created for a demo but never explained. This is what I am really trying to do.
https://www.youtube.com/watch?v=gL0XMgnzBcc
Hey Eric. If you're referring to this slide:
this bar graph was created using states and triggers. The slider has 32 stops, and each of those bars has 32 states. Triggers are used to move the bars according to the position of the slider.
Slider Format:
States:
Triggers:
So, depending on how smooth you'd like the action to be, you're going to be fine tuning the movement with a number of states and slider stops... which is why I was lamenting the work involved in creating that effect in my praise for Walt. :)
Pick your poison: a little time and elbow grease, or an alternative workaround like Walt's. Either way, it's a great effect!
Thanks a ton
Eric,
Yes. You need to create motion paths for each of the 3 movements, and 3 more to reverse them. Create them all with the object at its original spot, and set them all to have relative start paths. Use the previousLocation variable and the slider variable in trigger conditions to know which direction the slider is moving, because there are two motion paths from each point, so you have to know which direction you are moving.
I would have done it using a transparent shape with a visible rectangle of different sizes within the states with a fade in/fadeout animation on that object.
It won't give you fly in with ease effect, but will be effective and I often find that using motion paths and sliders at some point the animations get confused, Walt's method is great I just find if you flick left and right quickly on a slider that sometimes the animation goes wonky.
And that becomes more pronounced as you add more stops.
thank you everyone this helps me out a lot.
I built similar one for training purposes that follows the same structure as the one Articulate has on their site and explained above
.story file attached
This is amazing, and saved sooo much time! Thank you, Kevin!
You're welcome!
hi Kevin, i need a health bar :( like a super mario... how can I do that?
hero x(figure the health)3-2-1
