5 Replies Latest reply on Oct 7, 2015 7:11 AM by resdesign

    Calling a symbol within Edge

    stitch21z

      Hello,

       

      I'm working on a custom slider project where I have created a slider that the user can control to spin an animation around.  I have multiple animations I'm trying to connect to the slider.  I can get one working with the slider but not the others.  Right now I have one symbol on the stage called timelinePlay and within that symbol I have 2 more symbols that contain the animations. They are regular and spinPost.

       

      I'm using this to call the animations var mySymbol = sym.getSymbol("timelinePlay").getSymbol("regular","spinPost");

      But when I go to test it, only the regular animation is pulling with the slider button.

       

       

      I'm sure I'm missing something silly but any help would be appreciated.

        • 1. Re: Calling a symbol within Edge
          resdesign Adobe Community Professional & MVP

          Separate the 2 inner symbols. Plus, you do not need the variable. I would use:


          sym.getSymbol("timelinePlay").getSymbol("regular");

          sym.getSymbol("timelinePlay").getSymbol("spinPost");

          • 2. Re: Calling a symbol within Edge
            stitch21z Level 1

            Thanks for your quick response. The two animations I have I created in Maya. I rendered them out as pngs and brought them into fireworks where I exported them into edge as edge png animations. What I'm trying to accomplish is I have a model rotating in edge and when you click on a button a piece of the model will highlight.  What I would like to do is have all the animations react/move with the slider and just hide the ones I don't need until the user clicks on a button. I'm not the strongest in coding so I found some examples of a slider online. For the most part it works except it only controls one of the symbol animations.  Here is all my code for the slider.

               // Get the timeline length of timelinePlay. We'll reference this later in the code.
               var symDur = sym.getSymbol("timelinePlay").getDuration();
               // Get the symbol timelinePlay. We'll reference this later in the code.
               var mySymbol = sym.getSymbol("timelinePlay").getSymbol("regular", "spinPost");

               
               // Touch this to scrub the timeline of timelinePlay
               var scrubber = sym.$("scrubber");
               // Bar the scrubber follows
               var bar = sym.$("bar");
               // Added an extra invisible div to increase the hit region for mobile (hard to grab otherwise)
               //sym.$("mobileHit").hide();
               // Set the initial dragme function to false
               var dragme = false;

               // Detect if mobile device, and if so swap out mouse events for touch events. This is pretty much duplicated code with touch events swapped.

               if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {

                   //sym.$("mobileHit").show(); // Show the extra invisible div to increase the hit region for mobile (hard to grab otherwise)

                   $(function () {
                       scrubber.bind("touchstart", function (e) { // Enable the scrubber on touchstart
                           //e.preventDefault(); // Cancels the default action of the mobile device - used to ensure our touch events are fired
                           dragme = true;
                       });

                       scrubber.bind("touchup", function (e) { // Disable the scrubber on touchend
                           //e.preventDefault();
                           dragme = false;
                       });

                       scrubber.bind("touchmove", function (e) { // Make the magic happen on touchmove
                           if (dragme) {
                               var touch = e.originalEvent.touches[0];
                               var possibleX = touch.pageX;
                               var leftX = bar.offset().left;
                               var rightX = (leftX + bar.width()) - scrubber.width();
                               var scrubWidth = rightX - leftX;

                    // Confine the scrubber to the width of the bar

                               if (possibleX < leftX) {
                                   possibleX = leftX;
                               }

                               if (possibleX > rightX) {
                                   possibleX = rightX;
                               }

                               scrubber.offset({
                                   left: possibleX
                               });

                               var relativeX = possibleX - leftX;
                               var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay

                               mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released


                           }
                       });
                   })
               }

               else $(function () { 
                   scrubber.mousedown(function () { // Enable the scrubber on mousedown
                       dragme = true
                   })
                   $(document).mouseup(function () { // Disable the scrubber on mouseup
                       dragme = false
                   })
                   $(document).mousemove(function (e) { // Make the magic happen on mousemove
                       if (dragme) {
                           var possibleX = e.pageX;
                           var leftX = bar.offset().left;
                           var rightX = (leftX + bar.width()) - scrubber.width();
                           var scrubWidth = rightX - leftX;

                           // Confine the scrubber to the width of the bar
                           if (possibleX < leftX) {
                               possibleX = leftX;
                           }

                           if (possibleX > rightX) {
                               possibleX = rightX;
                           }

                           scrubber.offset({
                               left: possibleX
                           });

                           var relativeX = possibleX - leftX;
                           var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay

                           mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released

                       }
                   })
               })



              });

            • 3. Re: Calling a symbol within Edge
              resdesign Adobe Community Professional & MVP

              PM me a link to your files so I can determine where the problem is.

              • 4. Re: Calling a symbol within Edge
                stitch21z Level 1

                Thank you for your help.  I got it to work. Yay.  I broke the animations up into separate variables and added them to the stop timeline command and that did the trick.  Thank you again.

                • 5. Re: Calling a symbol within Edge
                  resdesign Adobe Community Professional & MVP

                  NP. Good luck on your project!