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?
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
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.
Hi Andy,
Invert the triggers to start at the last object state instead of the first object state.
Example: For an object to start tall and get shorter when the slider is dragged, create an object with 10 states and each state has a shape that is incremental in size from "tall" to "short". When slider variable is 1 change state to 1. When slider variable is 10 change state to 10. Inversely, to show bar start short and grow taller, change the triggers that when the slider variable is 1 change the state to 10. When the slider variable is 2 change the state to 9, etc.
Attached is a starter example I use when teaching this concept.
Hi Kevin,
Thanks for the response. I think I understand that part. The issue I'm having is that my bars are fixed at the top and "grow" down towards the bottom of the slide instead of growing "up" towards the top of the slide. If you see my attachments, slide 1 is Normal state and slide 2 is state 5. The "anchor of the shape is at the top and it changes to go downward thus covering the text. I want it to go the other way (up). I'm assuming this is something easy I just can't find it!
No not easy the shape grows from the bottom when you increase the height, you need to drag the up
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
thank you everyone this helps me out a lot.
