8 Replies Latest reply on Dec 16, 2012 8:51 AM by pmfr01

    Show/Hide problem and playing symbols

    pmfr01 Level 2

      Hi.

      I'm having trouble with show/hide and play instructions - here's my problem:

       

      I have 4 buttons (symbols) in the stage: "sectionOption1a_Btn", "sectionOption1b_Btn", "sectionOption1c_Btn" and "sectionOption1d_Btn".

      I also have, what I call, 4 "options": "Option1a", "Option1b", "Option1c", "Option1d".

      Each of these "Options1X" symbols have a "fade in" and "fade out" animation - at 0 ms and at 2000 ms, respectively (inside themselves).

      Each button runs each own option:

       

      "sectionOption1a_Btn"   »   CLICK   »   runs symbol "Option1a"

      "sectionOption1b_Btn"   »   CLICK   »   runs symbol "Option1b"

      "sectionOption1c_Btn"   »   CLICK   »   runs symbol "Option1c"

      "sectionOption1d_Btn"   »   CLICK   »   runs symbol "Option1d"

       

      All "Options1X" are hidden except the one wich is active.

       

      The problem:

      let's say, I have "Option1c" active and I want to go to "Option1a". So, I click "sectionOption1a_Btn". When I do this, I want the "Option1c" to run it's "fade out" (inside itself, at 2000 ms) and then run "Option1a" from 0 ms - it's own "fade in" while keeping all the other "Options1X" hidden, of course.

       

      I hope I didn´t over complicated my explanation.

       

      Here´s a schematic:

      Schematic Control buttons.jpg

      Thanx.

        • 1. Re: Show/Hide problem and playing symbols
          TimJaramillo Level 4

          Hi there, you can implement this type of functionality by tracking 2 variables. Yer basically telling the "currentOption" to play out on button click, and setting the "requestOption" according to the button click. At the end of the current symbol's outro anim, yer calling the "playRequest" function, to play the requested symbol.

           

          Put this on the stage.compositionReady event:

           

          var currentOption = null;// a, b, c, d

          var requestOption;

           

          // called by timeline.complete event at end of each Option

          sym.playRequest = function(){

               sym.getSymbol("Option1"+requestOption).play("fadeIn");

               currentOption = requestOption;

          }

           

          // called on button click

          sym.btnClick = function( request ) {

               requestOption = request;

              

               if(currentOption){

                    sym.getSymbol("Option1"+currentOption).play("fadeOut");

               }else{

                    sym.playRequest();

               }

          }

           

           

          Put this on button click:

          sym.getComposition().getStage().btnClick("a");// or b, c, d for each button

           

           

          Put this on the timeline.complete event of each Option symbol:

          sym.getComposition().getStage().playRequest();

          • 2. Re: Show/Hide problem and playing symbols
            pmfr01 Level 2

            Hi.

            First of all, thank you for the fast reply.

             

            I've been trying to adapt your code, but I get stuck all the time. I'm good with HTML and CSS, but not so much with Javascript/Jquery...

            I've isolated the buttons and the "options" in a single Edge file. Here's the link.

            I'd be very gratefull if you could implement your code in my Edge files - it would be easier for me to understand.

            By the way, you'll see that I even tried some other stuff, like unbinding the mouse events from the buttons, so people wouldn't press them again, but then they get unbinded permanently...

            I appreciate the help.

            Thanx again.

             

            Pedro

            • 3. Re: Show/Hide problem and playing symbols
              TimJaramillo Level 4

              Hi there,

               

              I implemented these items:

              - added timeline.complete triggers to each option1x symbol

              - added "btnClick" call on all button clicks

              - moved the functions I gave you to Stage.compositionReady event

              - removed all hide and show method calls. This can be handled more simply by setting the alpha of the nested text to 0 at the start of the timeline, then fading the text in. I didn't change the alpha, I'll leave that for you to do.

               

              There seems to be some funny stuff going on in that your "Lead_in" label actually moves the text offscreen. I think maybe your symbol is just positioned incorrectly.

               

              You need to:

              - set alpha of nested objects in option1x symbols to 0 at start, then fade in

              - position all option1x symbols correctly

              - check the timing of the labels versus outro animation- there seems to be a long pause before the outro animation actually happens. Move your outro animation closer to the "Lead_out" label.

               

              source:

              www.timjaramillo.com/code/edge/_source/exp_4_buttons_4_options_tj_1211_2012.zip

               

              Let me know if you have any more questions. Good luck!

              • 4. Re: Show/Hide problem and playing symbols
                pmfr01 Level 2

                Tim, this is one awesome piece of work!

                I've implemented your code in my main project and it's working great. I just forgot to mention these aspects:

                 

                1. the first option - option1a... - should enter into scene automatically, when the page loads, at a specific time (that I'll set)

                2. associate the "section_exit" label (inside all buttons - after the click labels) to play when we click another option

                 

                I already set the code for the buttons to stop after being clicked, not allowing the user to click them again.

                I tried as well to figure the rest out, but... I couldn't do it.

                I also noted that if we click more than one button quiclky, the first button's option1X jumps right up - it would be good to correct that.

                Could you update my code, please? Here´s the updated files.

                 

                Many thanx!

                 

                P.S.: The "lead_in" labels are intended to bring the element from off-screen. As to the Lead_in/Lead_out long timing... I wanted them to meet while Leading in/out.

                • 5. Re: Show/Hide problem and playing symbols
                  TimJaramillo Level 4

                  Hi there, glad you liked my code!

                   

                  1. To make the 1st scene enter into the scene automatically: create a setTimeout, and in the function, tell your option1a.. symbol to play from the appropriate label.

                   

                  2. To have buttons play the outro anim when you click another button, you may be able to leverage the functionality that I already added. On Stage.compositionReady event, create an array that holds all your buttons (like the current array_options array). Then, in the "btnClick" function, add the check for the button here:

                   

                  sym.btnClick = function( request ) {

                       requestOption = request;

                  //console.log("btnClick, currentOption = "+currentOption);

                       if(currentOption !=null){

                            sym.getSymbol(array_options[currentOption]).play("Lead_out");

                            sym.getSymbol(array_buttons[currentOption]).play("your_out_label");// add button check here

                            console.log("playing out: "+array_options[currentOption]);

                       }else{

                            sym.playRequest();

                       }

                  }

                   

                  In the "playRequest" function, add the check here:

                  sym.playRequest = function(){

                       sym.getSymbol(array_options[requestOption]).play("Lead_in");

                       sym.getSymbol(array_buttons[currentOption]).play("your_in_label");// add button check here

                       currentOption = requestOption;

                  }

                   

                  Also, can you mark the post where I gave you the source as "correct". That way future users will be able to find the correct answer easier.

                  • 6. Re: Show/Hide problem and playing symbols
                    pmfr01 Level 2

                    Hi Tim.

                    I've tried the code - setTimeout does not apply, because the symbol needs the "autoplay" to be "off" - all I need is to set a "play from" and it works.

                    The problem remains in what I mention before. I need to associate the "section_exit" label (after the click labels) from all the buttons to play when we click another option. Also, if we click more than one button quiclky, the  optiosn jump right up and it all get's messed up.

                    Help me out here please, it's all there's left.

                    Thanx again.

                    • 7. Re: Show/Hide problem and playing symbols
                      joel_pau Level 5

                      Hello pmfr01,

                       

                      Well, i download your files (post #2).

                      Your code starts to be too complicated.

                      Here is a faq tutorial: jQuery and Edge API (symbols).

                      ==> attachments

                      Now, you can use these tutorials to solve your main issue. I mean show and hide.

                      • 8. Re: Show/Hide problem and playing symbols
                        pmfr01 Level 2

                        Hi.

                        Joel_pau, the files from post#2 are outdated. That problem has already been solved by TimJaramillo.

                        The only thing I need now, is what I mentioned in my last post. Nevertheless, thank you for this tutorial - it may come in handy later on.