6 Replies Latest reply on Apr 1, 2015 10:37 AM by ianben

    multiple action button

    ianben Level 1

      I am trying to figure out the code for this and am getting hopelessly lost:

      I want to create a button that simulates a gear lever being pulled down when clicked whilst at the same time triggering an image symbol to slide in to the stage from the bottom. After that when the button is clicked I want it to reverse back up to its original position and the image symbol to reverse out again.

      It's driving me mad because I'm sure if I understood JScript it would be possible.

      Any help gratefully received.

       

      Ian

        • 1. Re: multiple action button
          Journey214 Level 1

          Hi,

           

          I have looked into your problem and created a quick demo.  Just as a side note when you say "gear lever" are you referring to a car gear shifter?  Anyway what I would do is create a symbol for the gear animating in both directions.  Within the timeline of that symbol (I'll call it 'symLever" ) I will give it two labels "begin" - at the beginning and "end"- at the end.  One the first frame "begin label" create a trigger action and type in:

          sym.stop();
          

           

           

          On the end frame "end label" put a trigger action for:

          sym.stop("begin");
          

           

          This will cause the animation to loop after it passes this trigger.

           

          Now create your image symbol. I called it "symImage" .  Within this symbol replicate, what I did for "symLever" remember to have it loop with the:

          "sym.stop("begin");
          

           

          Now in the compositionReady function (if you don't know where this is I can show you) paste in the following code:

           

          sym.$("symLever").bind("click", function() {
          
            if (sym.getSymbol("symLever").isPlaying()) {
            sym.getSymbol("symLever").stop();
            sym.getSymbol("symLever").playReverse();
          
            sym.getSymbol("symImage").stop();
            sym.getSymbol("symImage").playReverse();
          
            } else {
            sym.getSymbol("symLever").play();
            sym.getSymbol("symImage").play();
          
            }
          
          });
          
          
          
          
          
          
          

           

          This code assigns a click event through the bind method, and looks to see if the animation "symLever" is playing or not - if it is then it will stop and then reverse, I have added the "symImage" to this "if" condition so that it will play and stop accordingly. 

           

          Screen Shot 2015-03-30 at 3.28.19 PM.pngScreen Shot 2015-03-30 at 3.28.43 PM.pngScreen Shot 2015-03-30 at 3.29.04 PM.png

          • 2. Re: multiple action button
            ianben Level 1

            Thank you for going to all the effort of creating an example - the generosity of people never fails to amaze me!

            So, if I want it to trigger, say a rectangle coming into the stage area, where would I put that command?

             

            Ian

             

            Sent from my iPad

            • 3. Re: multiple action button
              ianben Level 1

              Sorry - ignore the last question, I wasn't reading it carefully enough.

              I have built the example you sent and the "symImage" comes in when the lever goes down but immediately reverses back out again - the lever also immediately reverses. I'm not able to work out how to het the image to stay there until the "down" lever is clicked again.

              Are you able to help any further?

               

              Ian

               

              ---

              Ian Bennett

              Lecturer

              Department of Communication and Media,

              Anglia Ruskin University,

              East Road,

              Cambridge

              CB1 1PT

               

              ian.bennett@anglia.ac.uk

              • 4. Re: multiple action button
                Journey214 Level 1

                Yes of course! I enjoy helping wherever I can. 

                 

                Ok, my assumption is that the way your composition was built is causing some issues.  For example does your "symImage" have a "start" and "end" frame with "sym.stop();" on the first frame and "sym.stop("begin") on the last frame?   I like to break the symbols down a bit to make them lest complex with fewer layers to deal with.  I grouped the rectangle and text into a "div" called "Group" - and this is the element within the symbol "symImage" that follows the animation path. 

                 

                The main issue I think is dealing with the  "end" and beginning.  For example:

                without.png

                 

                The image above should examine the symImage symbol which contains a Group div holding Text and "rectangle3."  the group is the layer that is animation both of the other layers.  The timeline shows a begin and an end.  For this example the animation will play through to the "end" label and immediately revert back to the "begin" label.  (this is because of the "sym.stop("begin"); " now here comes the tricky part (for understanding) ,

                 

                1. Insert another keyframe on the 1second mark, (considering that this animation has a 2second length = 1/2 of the total) and copy the end frame "left" position by either manually typing it in, pasting the frame in that spot or grabbing and dragging the keyframe.  I copied the first segment of animation and pasted in after the 1second mark and by right clicking on it and selecting "invert" it will reverse the keyframes automatically.  (by doing this I can skip the next step).

                 

                2. now copy the beginning frame and past this at the 2second mark.  Use the "toggle pin" to animation your object. 

                 

                 

                The end result should go something like this: the symbol will play to the 1second mark and stop.  IF it is asked to continue playing it will play the reverse of the animation (from a visual standpoint) and once it reaches the "end" frame it will stop at the beginning again.  It is a loop.

                 

                invert.png

                 

                I have added a link to my dropbox if you would like to mess around with the file itself and see what I am talking about.  Hope this helps!

                 

                Dropbox:

                op_test1

                • 5. Re: multiple action button
                  Journey214 Level 1

                  Oh and I completely forgot, at the 1second mark, make sure it has a "sym.stop();" trigger on it. 

                   

                  here is the link on dropbox again:

                  op_test1

                  • 6. Re: multiple action button
                    ianben Level 1

                    Thank you very much, I will have a go at this.

                     

                    Ian

                     

                    Sent from my iPad