5 Replies Latest reply on Dec 8, 2012 6:46 PM by resdesign

    Set keyframe params in a script

    libhart

      I'm more of a coder than a drag/dropper.  I have a simple box that I'd like make grow from its top left corner.  That part is simple with keyframes and the timeline, no big deal.  I'd like to adjust where that top left corner is though based on where the user clicks on the screen, so instead of having separate boxes or separate animations and such I'd like to simply have the onclick event of some transparent shapes move the X,Y position  of the box itself.  I can then do a play() on my animation.  I'm sure there's a way, I think the X,Y is just a left, top in CSS, just not sure how to get at it for my box.

       

      Thanks.

        • 1. Re: Set keyframe params in a script
          libhart Level 1

          Reply to my own post.

           

          Found another post (sorry, didn't copy the link)

           

          sym.$("myobject").css('left', X);

          sym.$("myobject").css('top', Y);

           

          That does what I want...sort of....the X,Y that are given in Animate when positioning my box don't seem to be useable in the code above.  If I use those numbers, the box is way off.

          • 2. Re: Set keyframe params in a script
            libhart Level 1

            Hoping to track this down and hoping someone who is deep enough into the coding will jump in and give an answer.

             

            It seems, from looking at the JS, what I really want to be able to do is modify the top/left but also the fromValue on the timeline itself.  I'm going to have a bunch of buttons and I want the box to grow from the button that's clicked, then shrink back to the same button.  Instead of having a whole pile of keyframes and grow animations and shrink animations and labels, I want one grow animation and one shrink and a label for each, and I'd like to just change these values in the script based on which button is clicked.

             

            Thanks.

             

                    { id: "eid12", tween: [ "style", "${_bigbox}", "left", '176.16px', { fromValue: '310px'}], position: 500, duration: 870 },
                    { id: "eid38", tween: [ "style", "${_bigbox}", "left", '310px', { fromValue: '176.16px'}], position: 1610, duration: 870 }     ]
            • 3. Re: Set keyframe params in a script
              resdesign Adobe Community Professional & MVP

              Hi there,

               

              I have a sample for shrinking a box here:

              https://www.box.com/s/a5swakbxbq49q3qtcjse

               

              Hope this helps.

               

              You could also use scale instead.

               

              See this link where Joel gave an example here:

               

              http://forums.adobe.com/message/4877111#4877111

               

               

              Good luck on your project.

              • 4. Re: Set keyframe params in a script
                libhart Level 1

                Thanks!  That'll probably my solution, using css transitions, but I'm still hoping someone might be able to show me a quick example of some code that can get at those timeline eid's so I can adjust them.  That way I get the benefits of making tweaks to the animations/easing and all that in the gui, but get to control the numbers in the code.  Thanks again.

                • 5. Re: Set keyframe params in a script
                  resdesign Adobe Community Professional & MVP

                  There are different ways to get to the main timeline or the timeline of symbols. Did you read the API?