1 Reply Latest reply on Apr 24, 2014 10:42 AM by TimJaramillo

# Infographic animation question

Hi there, I was hoping someone could help me out with this... I am trying to make an infographic for freshman students coming to college. In the infographic, I would like to have a piggy bank surrounded by icons of how you could save, or spend money. If you click on an icon (a coin) for example, “walking to class”, since it would save you \$50, the amount of money within the pig would move down however much \$50 represented. I would start the piggy bank at a college allowance of say \$500 and go from there. The user will click on the icon. and see how much the amount of money in your bank goes up or down. The problem that I am running into is that I can’t just set the level of money to go to a certain point in the timeline, since the piggy bank needs to know how much money is inside. Since it is up to the user to decide which icon to click on, the pig doesn’t know this exact order of which icon they will pick first, so I was wondering if there was some way to “code” within the pig so that I am able to accomplish this money level animation. If anyone has any ideas, please let me know!

• ###### 1. Re: Infographic animation question

Hi there,

One way to build this would be to think about the piggy-money-level-timeline in terms of %, not actual labels on the timeline. So- your piggy timeline would have the money level positioned at 100% at 'time 0'. And it would have money level positioned at 0% at 'time 10 seconds'.

Then at sym.compositionReady event, you can set up a variable to store a 'myMoney' variable. When the user clicks a button, you would add/subtract to that 'myMoney' variable.

At the sym.compositionReady event, you could also setup a function to calculate what frame in the piggy timeline to jump to, based on amount of money left in your 'myMoney' variable. (Again- thinking in percentages of money left, directly related to percent of your piggy timeline).