9 Replies Latest reply on Aug 29, 2014 1:57 AM by eliverrang

    Play to keyframe from arbitrary start.

    GarethConner

      Hi,

       

      I'm new to Edge Animate and trying to figure out something simple that I previously made in Hype.  I have an interactive graphic that shows a list of product features.  As the user clicks on a feature, the relevant physical area of the product is highlighted and a brief text description is shown.  An example of the desired effect can be found here.

       

      The highlights should slide around and reshape to fit the desired area of the product.  Since the user may click on a feature in random order, I need a way to animate to a keyframe from an unknown or arbitrary starting keyframe.  So far, I have figured out how to animate a symbol to pick up and play a timeline from a labeled point, but can't grasp how to "Play To" a point rather than "Play From".  I have also used "Stop At" a label, but then the elements snap to the keyframe position rather than gracefully easing into the new desired position.

       

      Any tips would be greatly appreciated.  This was pretty straightforward to do in Hype, so I imagine I'm just barking up the wrong tree in Edge.

        • 1. Re: Play to keyframe from arbitrary start.
          GarethConner Level 1

          To add a little more info I looked up the Hype terminology.  In Hype the effect is produced using "Relative Keyframes".  This is an excerpt from their docs:

           

          Timelines contain starting keyframes that are either absolute or relative. By default, all timelines are created with absolute starting keyframes. The difference between absolute and relative starting keyframes is subtle but important. When a timeline has absolute starting keyframes, elements animated by that timeline will have their animated properties set to the values defined by the starting keyframes when those keyframes are triggered, and will then animate to the values defined by their ending keyframes. When a timeline has relative starting keyframes, elements animated by that timeline will use their current values when the starting keyframes are triggered, and will then animate to the values set by their ending keyframes.


          I didn't turn up anything in the Edge docs when searching for Relative Keyframes.  Thanks for any info.

          • 2. Re: Play to keyframe from arbitrary start.
            resdesign Adobe Community Professional & MVP

            If you have a play and a stop for each area, then it will play that section of the timeline. What I usually do is use a symbol for each object with its own transition. Then the transition can be played independently of the main timeline. But if you have a symbol with several objects, you can do the same thing by using hide and show for each object and the transition in between.

             

            Of course there are several ways to do the same thing. Each designer use something that makes sense to them.

             

            Hope this helps.

             

            Btw I checked the site with my iPad and did not see the highlight you were talking about.

             

            On Wed, Aug 27, 2014 at 7:49 PM, GarethConner <forums_noreply@adobe.com>

            • 3. Re: Play to keyframe from arbitrary start.
              GarethConner Level 1

              Resdesign,

               

              Thanks for the reply.  I just checked out the site on my iPad as well and the highlight seems to display fine.  To see the effect, touch one of the labels on the righthand side:  "Informative Display", "Manual Jog Controls".  If you have a spare moment, I'd really appreciate it if you could take another look since I fear my verbal description isn't sufficiently clear.

               

              Unless I'm misunderstanding your suggestion, I don't think that will work.  In my experiments thus far each symbol needs a starting point and stopping point.  However, the starting point for each area will be the ending point of the last area the user clicked which is arbitrary, hence the need for a relative keyframe.

               

              Thanks again for the response.

              • 4. Re: Play to keyframe from arbitrary start.
                eliverrang Level 1

                You could get the effect you are looking for by creating a separate symbol and timeline for each one of the features. Then, clicking on the name of a feature could activate the appropriate animation to provide the animated highlighting effect (the product image would be stationary).

                 

                Peter Small

                • 5. Re: Play to keyframe from arbitrary start.
                  resdesign Adobe Community Professional & MVP

                  OK. I saw the effect on the labels.

                  I agree with Peter. Most often I use 1 symbol with a transition that can easily be played and played reverse easily. So I would use a symbol for each label.

                  You could create only one symbol and then load the symbol dynamically as many times as you need it and change the text in each label dynamically to what you need.

                  • 6. Re: Play to keyframe from arbitrary start.
                    GarethConner Level 1

                    Thanks to you both for the replies.

                     

                    I'm still not seeing how this would work to transition from one arbitrary location to the next.  I was able to create a mockup of the desired effect by coding the transitions directly in Javascript as event handlers for the button clicks:

                     

                    sym.getSymbol("TopHighlight2").getSymbolElement().animate({top: "0"}, 500);

                    sym.getSymbol("TopHighlight2").getSymbolElement().animate({top: "75"}, 500);

                    sym.getSymbol("TopHighlight2").getSymbolElement().animate({top: "150"}, 500);

                     

                    This is able to move a single element around without multiple symbols etc.  There's a quick version here.  As you can see I can click on any of the three circles, in any order, and the rectangle moves to a correlating position.  Of course, at this point I'm just using JQuery directly and starts to seem a little silly to wrestle with the Edge UI to get it done.  Probably best just to head back to Hype for this simple effect.  Thanks for the help.

                    • 7. Re: Play to keyframe from arbitrary start.
                      resdesign Adobe Community Professional & MVP

                      OK. I looked again at your original site. I had not actually played with the buttons. So now I can understand what you are trying to do.

                      I think you approach is the best one because at you mentioned earlier there is not easy way (or even none) on one timeline to create the same effect.

                      • 8. Re: Play to keyframe from arbitrary start.
                        resdesign Adobe Community Professional & MVP

                        You can also add the hieght and width in your transition as well as opacity to do the rest.

                        (I was just looking at your buttons which was only half of the visual !)

                        • 9. Re: Play to keyframe from arbitrary start.
                          eliverrang Level 1

                          How I would do this is to have a timeline that allowed you to move between your three stationary main views. ( add the images next to each other on the stage and give this a time line so that the three moved together across the stage) You can then stop this timeline at any of three points to display a particular image on the stage.

                          At each of these stopping points you create your labels for the image and create the required symbols with their own timelines for animating the highlights.

                           

                          Peter Small