34 Replies Latest reply on Mar 19, 2013 5:45 AM by chuba21

    Calling symbols basics...

    shadowfax007 Level 1

      Hello everyone-

       

      I started to ask a few questions about this in another "somewhat unrelated" post so though I'd start it new here, as I hope I'm not the only one with these types of questions :-)

       

      From the other post:

       

      --------------------------------------------

      ...

      I do have a general question about triggers and such:

       

      My thought is in my projects I'm trying to make almost everything a symbol and calling these symbols from the main timeline.  It seems to keep things less cluttered and easier to work with.

      Is this a preferred way of working with animations inside Edge or is there a "more preferred" way of doing things?

       

      Also, am I better adding triggers and such within the symbols (like I'm trying now) or from the main timeline?  Again, I thought it would make more sense to handle everything related to a symbol within the symbol...

       

      ---------------------

      From Josh Dura:

       

      It really all depends on what you plan on using the symbol for. In general, I think the same way. Using symbols keeps things less cluttered, and if I ever decide to reuse that symbol, it can just reuse that instance of the symbol.

       

      For your code, it makes the most sense to try whenever possible to keep all of your code in the same place. However, there are times when you will need to place code/triggers/events within the timeline of the actual symbol. Overall, try wherever you can to keep all your code as minimal and manageable as possible, and when using code inside the symbols, make it clean and as simple as possible so that maintaining it is easy.

       

      -------------------

       

      NEW POSTING:

       

      Right now, working with symbols and triggers is my new roadblock.  For example I have the following in a project for a slideshow type of animation:

       

      In my main timeline, I have about 5 symbols running - Nothing fancy.

       

      Also in the main timeline, I have 2 "Elements" - both images one on top of another (A pulsing button).

       

      I want this button, when clicked to call the symbol: "responsive_slideshow_part2" onto the stage (This will eventually be the first page of the slideshow but for now  it only consists a a circle changing opacity so I can test that it is being called into the main timeline.).

       

      This is where I'm getting a bit comfused and having problems :-)

       

      Do I:

       

      1.  Call the symbol with something like this (left bracket of pulsing button):

                var mySymbolObject = sym.getSymbol("responsive_slideshow_part2");

                If so, where do I put the symbol "responsive_slideshow_part2"?  In the main timeline (If so, where? - since it will play whenever the button is clicked and not at a particular time?) or nowhere as it will be called into the animation by the click on the button but then how do I place it where it needs to be in the animation?

       

      2.  Do I add something to a trigger on the main timeline (after adding the symbol with a command of stop?) at one second which is where the pulsing button timeline stops (right now I have this trigger to repeate the button pulsing) at 01:00:

                sym.play("arrow_start");

      "arrow_start" is the label set at 00:00 for the button.

       

       

      I hope some of this makes sense to someone!

       

      Thanks again for everyone's help!

      In the meantime, I'll be going over again some of the tutorials available on the net :-)

       

      James

        • 1. Re: Calling symbols basics...
          elainecc Adobe Employee

          Hi, James-

           

          You might want to take a look at my symbols tutorial again to answer your questions.

           

          https://blogs.adobe.com/edge/2012/07/18/tutorial-leveraging-independent-symbol-timelines/

           

          The section "Adding Interactivity" gives you an idea of how to call play on a symbol's timeline, and the same code snippet can be used wherever you want.  Here are a couple of options you might want to consider:

          • If you want your symbol to play automatically and never stop playing, make your symbol's timeline repeat indefinitely using a trigger or a Timeline.complete event, then ensure autoplay is on for the symbol.  When you load your project, your symbol will start playing and never stop.
          • If you want your symbol to only play when you click on something, add the sym.getSymbol("myInstance").play(); call to the click handler.

           

          Hope that points you in the right direction!

           

          -Elaine

          • 2. Re: Calling symbols basics...
            shadowfax007 Level 1

            Thanks Elaine!

             

            I don't know why my brain has been blocked when it comes to getting some interactivity to work!

             

            I did, however, find some things out that were troubeling me.

             

            In the actions editor, there is a function called "Get Symbol"

            I'm not sure what it does but I was under the impression it would call a symbol and run it (Hence it's name!).

            The code for this functions is:

            var mySymbolObject = sym.getSymbol("element/symbol name");

             

            In the tutorial that you created (I still love it!), in order to get this to work, instead of clicking on the function "Get Symbol" you say to add this line:

             

            sym.getSymbol("element/symbol name").play("label name in symbol");

             

            Make's sense and it works.  Even the Get Symbol function works as long as I add the play call (.play("label name in symbol");) - although it looks like it is doing nothing more than setting a varaible for later use.  Why is that and if so, why does it work as written below?

             

            var mySymbolObject = sym.getSymbol("element/symbol name").play("label name in symbol");

             

            I think this was my number 1 problem.  Are there other functions like this (I know several  others I've used, like call a URL, work as I would intend them to)?  If so, this will require a lot of us to have a much better understanding of JavaScript, in order to add/change what the function adds when clicked to build the actions...

             

            Thanks again for the help - I hope that I'm on my way, at least until the next function I run into like this one.  At least I know to look out for it now (Or maybe it is a bug?)!

             

            James

            • 3. Re: Calling symbols basics...
              elainecc Adobe Employee

              James-

               

              What this code snippet is doing is creating a local pointer to the object so that you can call other functions on it.  Let's say you want to move a symbol instance dynamically and change the text within the div, set a variable, then play from a label.  Well, you could do this:

               

              sym.$("myInstance").css("top", 50);

              sym.$("myInstance").css("left", 200);

              sym.$("myInstance").html("set my text");

              sym.getSymbol("myInstance").setVariable("foo", true);

              sym.getSymbol("myInstance").play("bar");

               

              Well, you could also do something like this:

              var myInstance = sym.getSymbol("myInstance");

              myInstance.getSymbolElement().css("top", 50);

              myInstance.getSymbolElement().css("left", 200);

              myInstance.getSymbolElement().html("set my text");

              myInstance.setVariable("foo", true);

              myInstance.play("bar");

               

              In this case, it's pretty much as wash as to how much code you type.  So why is this useful?

               

              Let's say you have a symbol element that's set three levels deep.  Instead of having to type something like this:

              sym.getSymbol("symA").getSymbol("symB").getSymbol("symC").play();

              sym.getSymbol("symA").getSymbol("symB").getSymbol("symC").stop();

              sym.getSymbol("symA").getSymbol("symB").getSymbol("symC").setVariable("foo", true);

               

              You can do something like this:

              var mySymC = sym.getSymbol("symA").getSymbol("symB").getSymbol("symC");

              mySymC.play();

              mySymC.stop();

              mySymC.setVariable("foo", true);

               

              You can see how this might be useful and easier to read, particularly as you're beginning to work with deeper and deeper symbol instances.

               

              Hope that helps!

               

              -Elaine

              1 person found this helpful
              • 4. Re: Calling symbols basics...
                shadowfax007 Level 1

                One more formatting question.

                 

                What are others doing with symbols that are being called into the main timeline?

                 

                On the symbols that are ONLY called with an action (meaning they have no particular place in the timeline that they play), where are you putting these symbols?

                 

                For example, I have a main animation that is 25 seconds long.  I was thinking of setting these symbols at something like the 1 minute mark to seperate them from the other symbols for easier editing/ troubleshooting, and a cleaner interface.  Does that sound like a good idea, or are others just putting them at the beginning of the mauin timeline?

                 

                Thanks for any input on this :-)

                 

                James

                • 5. Re: Calling symbols basics...
                  shadowfax007 Level 1

                  Elain-

                   

                  Yes, I can see that and it makes sense.

                  I am a little puzzled (and maybe with all the trying and testing I am wrong on this and it did not work like I thought it did) about the following line:

                   

                  var mySymbolObject = sym.getSymbol("element/symbol name").play("label name in symbol");

                   

                  Why would this play when clicked?  It looks to me that it is simply "setting" a variable and I would still need to call it to actually do something, where the line you used in the tutorial makes sense to me that it would play automatically on a click:

                   

                  sym.getSymbol("responsive_slideshow_part2").play("slideshow1");

                   

                  As always, thank you for the tremendous amount of help!

                   

                  James

                  • 6. Re: Calling symbols basics...
                    GusDoeMatik™ Level 1

                    Elain-

                    I love this definition of "how and why". It explains so much... THANK YOU...

                    • 7. Re: Calling symbols basics...
                      elainecc Adobe Employee

                      Hi, James-

                       

                      There are a couple of things you can do at this point.  What I tend to do is just leave it at 0 in the timeline, place it where I want it, and set the default visibility to Off.  (Don't just change the opacity, because otherwise the hit points in your animation will still be active.)  Then, when I want it to play, I use code to force the display:

                           sym.$("mySymbolInstance").show();

                      When I'm done with it, I'll call hide() on the jQuery handle again.

                       

                      Again, there are lots of different ways to handle interactivity and troubleshooting.  It's really up to you, and I don't think "best practices" have been established for where you place it in your main timeline.

                       

                      -Elaine

                      1 person found this helpful
                      • 8. Re: Calling symbols basics...
                        elainecc Adobe Employee

                        Hi, James-

                         

                        This gets into JavaScript syntax.  In your first statement, you're taking the results of the function on the right and assigning it to your variable.  Let's take a simpler example:

                             var foo = Math.round(1.5); // This expects foo to be assigned to 1.5 rounded to the nearest integer

                             console.log("rounded to: " + foo); // expected return value: 2

                         

                        So in the same vein, what you're calling above will execute what's to the right of the assignment operator.

                         

                        -Elaine

                        1 person found this helpful
                        • 9. Re: Calling symbols basics...
                          shadowfax007 Level 1

                          Thanks Elaine!

                           

                          I think I've finally wrapped the "GetSymbol" button (and others) around in my head.  The GetSymbol "code" is just giving me the starting code.  Form there It's up to me to decide what I want it to do: play, hide show, etc... :-)

                           

                          James

                          • 10. Re: Calling symbols basics...
                            elainecc Adobe Employee

                            No problem, Gus!  Glad to be of assistance.

                             

                            -Elaine

                            • 11. Re: Calling symbols basics...
                              shadowfax007 Level 1

                              Elaine-

                               

                              Well, What I thought I was beginning to understand doesn't make as much sense now that I "jump" to another level :-)

                               

                              Here's what I'm trying to do:

                              I have a symbol on the stage:  responsive_slideshow_button as well as the symbol: responsive_slideshow_part1

                               

                              At 00:00:00 on the stage's timeline, I have this:

                              sym.$("responsive_slideshow_part1").hide();


                              Thie responsive_slideshow_button symbol calls the symbol responsive_slideshow_part1, using this in the "stage" onClick: 


                              sym.$("responsive_slideshow_part1").show();

                              sym.getSymbol("responsive_slideshow_part1").play("in");

                              This works fine.


                              Now, within "responsive_slideshow_part1" I have a symbol called prev_next.

                              This symbol is a simple prev-next type button at the bottom that plays throught slideshow_part1.

                              My troubles lie in calling:  responsive_slideshow_part2

                               

                              What is the best way to call responsive_slideshow_part2 ?

                              And from where?

                              Also, I know I'm going to have to add a variable so I can track where the user is so I know where to send the previous or next click (there are 8 tutorial pages).  I think I can figure this out from your tutorial.

                               

                              I've tried everything I could think of but nothing has worked :-)

                               

                              Thanks!

                               

                              James


                              • 12. Re: Calling symbols basics...
                                elainecc Adobe Employee

                                Hi, James-

                                 

                                You should definitely save your state, then use your prev_next button to key the next animation.  Hope that gives you some direction.

                                 

                                -Elaine

                                • 13. Re: Calling symbols basics...
                                  GusDoeMatik™ Level 1

                                  Elaine how do I call the symbol itself and not the instance of the symbol...

                                   

                                  I'm trying to write code inside the creationComplete part of a symbol, not on the main stage! But inside the symbol itself. I want that code to effect all instances of that symbol and not just one instance... So my question is how do I set a varible to equal the actual Symbol.

                                   

                                  Currently my code goes like this (and it works for the one instance of the symbol, that's because I'm targeting the instance of that symbol and not the symbol itself):

                                  var mySlidingImages = sym.getComposition().getStage().getSymbol("Slider");

                                   

                                  So how do I change it to make it target the actual symbol? The actual name of the symbol is Slider_sym

                                   

                                  So I want my varible to look something like:

                                  var mySlidingImages = Slider_sym

                                  • 14. Re: Calling symbols basics...
                                    shadowfax007 Level 1

                                    ok, I feel like I'm beating a dead horse and I apologize (to both you and the horse!) for doing it but I'm almost there :-)

                                     

                                    As I learn a bit more, I can pose my questions a bit better as well, or so I hope!

                                     

                                    On the main stage, I have the following:

                                     

                                    A button (symbol: "design-slider-rectangle") that calls another (symbol: "main_develop"), also on the stage.

                                    In the timeline, I have this at 00:00:00:

                                    sym.$("main_develop").hide();

                                     

                                    In the onClick for the button "design-slider-rectangle", I have:

                                     

                                    sym.$("main_design").show();

                                    sym.getSymbol("main_design").play("in");

                                     

                                    This works great!

                                     

                                    Now, I'm trying to do the same but 1 lever deeper.

                                    "main_design" contains three links to other "pages".

                                    In the "main_design" symbol's timeline that was just called, I have the following:

                                    Three buttons in the "main_designs" symbol's timeline but I'll just focus on one "black_ball_design".

                                    Another symbol on the timeline: "responsive_design"

                                     

                                    I am trying to call the "responsive_design" symbol from the "black_ball_design" symbol (button).

                                     

                                    On the stage at 00:00:00:

                                    sym.$("responsive_design").hide();

                                     

                                    In the symbol "black_ball_design", I have the following onClick:

                                     

                                    sym.getParentSymbol().getSymbol("responsive_design").show();

                                    sym.getParentSymbol().getSymbol("responsive_design").play();

                                     

                                    I've also tried the folllowing:

                                    sym.getSymbol("responsive_design").show();

                                    sym.getSymbol("responsive_design").play();

                                     

                                    What do I need to do to call this symbol?

                                     

                                    Also, I was going to have another set of symbols, another level down.  How will htey be called?

                                     

                                    Or am I going about this all wrong?

                                     

                                    Thanks!

                                     

                                    James

                                    • 15. Re: Calling symbols basics...
                                      jbowden Adobe Employee

                                      Hi James,

                                       

                                      I may not fully understand what you're trying to do in your project, but if you want to show a symbol instance on the Stage, you wouldn't want to use getSymbol on the instance, but instead use $ indentifier, which is just shorthand for jQuery addressing. Try this instead:

                                       

                                      // this goes up to the parent symbol (the composition, in this case), and then shows the symbol instance

                                      sym.getParentSymbol().$("responsive_design").show();

                                      // this goes up to the parent symbol, and then gets the desired symbol and tells it to play

                                      sym.getParentSymbol().getSymbol("responsive_design").play();

                                       

                                      hth,

                                      Joe

                                      • 16. Re: Calling symbols basics...
                                        shadowfax007 Level 1

                                        Thanks Joe-

                                         

                                        I'm getting there, slowly!

                                         

                                        Form the main stage, I have a button calling a symbol with onClick:

                                         

                                        sym.$("main_design2").show();

                                        sym.getSymbol("main_design2").play("in");

                                        main_design2 is on the stage (hidden).

                                         

                                        From main design2, I have a button calling a symbol:

                                         

                                        sym.$("responsive_design").show();

                                        sym.getSymbol("responsive_design").play("in");

                                        responsive_design is on the main_design2stage (hidden).

                                         

                                        They both work.

                                         

                                        Now I'm trying to get a symbol on the "responsive_design" timeline to play symbol: "responsive_design"_1

                                         

                                        This however, does not work.

                                         

                                        At first I thought it would be a "step" process calling  symbol:

                                         

                                        Stage ->symbol:

                                        sym.$("main_design2").show();

                                         

                                        symbol1 -> symbol2:

                                        sym.getComposition().getStage().getSymbol("responsive_design").play();

                                        sym.$("responsive_design").show();

                                         

                                        symbol2 -> symbol3:

                                        sym.getComposition().getStage().getSymbol("responsive_design").getSymbol("responsive_desig n_1").play(0);

                                         

                                        But then I'm using the same call forom the stage to symbol1 and symbol1 to symbol2.

                                         

                                        Is there a set way to call symbols the deeper you go?

                                         

                                        I've been trying the examples in the api but no luck so far :-)

                                         

                                        I hope that clarifies things :-)

                                         

                                        James

                                        • 17. Re: Calling symbols basics...
                                          jbowden Adobe Employee

                                          Hullo again,

                                           

                                          Where is responsive_design_1 located? That's not clear to me in your description.

                                           

                                          For instance, from your description above, I take it that this is your hierarchy:

                                           

                                          Stage

                                          main_design2

                                          responsive_design

                                           

                                          Is responsive_design_1 within the responsive_design symbol? Or somewhere else?

                                          • 18. Re: Calling symbols basics...
                                            shadowfax007 Level 1

                                            Sorry Joe-

                                             

                                            Yes, that is exactly what I have and responsive_design_1 is within responsive_design. I will also have responsive_design_2 - responsive_design_6 within responsive_design.

                                                                                                                   

                                            Stage

                                            main_develop -> main_design2 -> main_depoly

                                            responsive_design -> -> responsive_design_1 ->responsive_design_2 -> responsive_design_3 -> responsive_design_4 -> responsive_design_5 -> responsive_design_6

                                             

                                            main_develop and main_deploy will have similar setups.

                                             

                                            does that make sense?

                                             

                                            James

                                            • 19. Re: Calling symbols basics...
                                              jbowden Adobe Employee

                                              Hi again,

                                               

                                              Still not sure I understand what you are trying to do. For instance, I don't understand why are you going all the way up the chain to access symbols? e.g., if you are in main_design2, and you want to play responsive_design, instead of having this in your click handler:

                                               

                                              sym.getComposition().getStage().getSymbol("responsive_design").play();

                                              sym.$("responsive_design").show();

                                               

                                              I would do it like this:

                                               

                                              // first, always make sure the symbol instance is displayed

                                              sym.$("responsive_design").show();

                                              // and then get access the symbol and play it

                                              sym.getSymbol("responsive_design").play();

                                               

                                              And so similarly, if the button (what is the name of this element?) is a child element of the responsive_design symbol, as is responsive_design_1, you could use this in your button's click event:

                                               

                                              sym.$("responsive_design_1").show();

                                              sym.getSymbol("responsive_design_1").play();

                                               

                                              If this button is not a child element of responsive_element, then where is it in your symbol hierarchy?

                                               

                                              Here's the key to correctly targeting symbols and their child elements:

                                              1. Understand where the caller is in the composition/document (where is the element I'm issuing the code from? Is it at the Stage level, or nested in one or more symbols?)
                                              2. Understand where the target is relative to the caller (where is the symbol/child element I want to target compared to where I am calling from? At the same level as the caller? Or is it above or below the caller? If the latter, how many nested symbols?)

                                               

                                              I'll upload an example file a little later that demonstrates how to do this.

                                               

                                              hth,

                                              Joe

                                              • 20. Re: Calling symbols basics...
                                                shadowfax007 Level 1

                                                Joe-

                                                 

                                                Thanks for the help!

                                                 

                                                I'm thinking that perhaps I had something else going on in my animation that was causing problems for me since:

                                                On stage, I used a button to call the animation I wanted, using:

                                                sym.$("main_design2").show();

                                                sym.getSymbol("main_design2").play("in");

                                                 

                                                That works.  When I get to the next "level", I used this to call the symbol without using the "parent" call and instead calling it just like in the first example.

                                                I couldn't, however, make this happen in the next level symbol call so thought I needed to go "up stage", which confused me since the last symbol I didn't need to do this :-)

                                                 

                                                So you are saying that if I'm on the main stage, I call a symbol using a call like this:

                                                sym.$("main_design2").show();

                                                sym.getSymbol("main_design2").play("in");

                                                 

                                                When I am inside the symbol "main_design2" and calling another symbol that is on the stage of "main_design2" (not on the mainstage), I call it the same way, without going "up stage", correct (this was how I originally thought it would work but, I'm sure because of something else I did or wrong code, It didn't and I thought I was wrong)?

                                                 

                                                So as long as I'm calling a symbol that is on the "current" stage, I can always call it like this:

                                                sym.getSymbol("symbol name").play(); - is this correct?

                                                 

                                                While we're on the subject, I have another question somewhat pertaining to this:

                                                 

                                                I'm obviously creating an entire website using Edge, working on the smart-phone version for now.

                                                -I have the "main screen" animation.

                                                -Then I have several links on that animation to other symbols (basically pages in a regular HTML website).  As I add these other pages (symbols within symbols), the animation grows in size and complexity.

                                                 

                                                Is it best to:

                                                Continue on this path, OR

                                                Create totally different animation "projects" (pages) for each section (like Design, which contains 6 "pages", or symbols)?

                                                 

                                                I haen't look into how you "link" animation projects but I'm sure I've seen that it can be done, correct?

                                                 

                                                Again, thank you so much Joe for all the help in pointing me in the right direction!

                                                 

                                                James

                                                • 21. Re: Calling symbols basics...
                                                  jbowden Adobe Employee

                                                  Hi James,

                                                   

                                                  Sorry, been busy with work.

                                                   

                                                  It sounds like you've gotten the gist of it.

                                                   

                                                  Think of each symbol as a stage with its own timeline. Even the (main) Stage is a symbol, although a somewhat different one in EA. Each symbol has child elements - that is, elements that are a part of the symbol, which can be divs (rectangles, ellipses, text, images, etc. from EA), and even other symbol instances. When symbols are contained within other symbols, we refer to them as being nested symbols.

                                                   

                                                  With nested symbols, there is a hierarchy:

                                                   

                                                  • Parent symbol: the symbol which contains one or more symbols
                                                  • Child symbol: a symbol nested within another symbol
                                                    • Sibling symbols: multiple symbols each having the same parent symbol

                                                   

                                                  So running with this family nomenclature, if symbol A contains a child symbol B, and if child symbol B contains a child symbol C, then symbol B is the parent symbol of C, and symbol A is the grandparent symbol of C. And vice-versa, symbol C is the child of symbol B, and grandchild symbol of symbol A. This generational chain can be as deep as you have nested symbols.

                                                   

                                                  So how does this apply in Edge Animate?

                                                   

                                                  At the most basic level, lets say we have a Stage (parent) that I'll refer to as A containing two (child) symbols, B1 and B2. Remember, A is the parent symbol of B1 & B2. Now from A (the Stage), I can get into each child symbol using this well-known method:

                                                   

                                                  sym.getSymbol("B1");

                                                  sym.getSymbol("B2");

                                                   

                                                  These allow me to control the timeline of each child (e.g., play or stop), as well as to access the elements within each symbol using the $ jQuery shortcut after getting the symbol.

                                                   

                                                  Let's say I have a button contained in symbol B1, that I want to use to stop the Stage timeline. I'd use code like this in the button click event:

                                                   

                                                  sym.getParentSymbol.stop();

                                                   

                                                  Click the button, and the Stage timeline stops. Make sense?

                                                   

                                                  Now say instead of having the button in symbol B1 stop the Stage timeline, I want it to stop symbol B2's timeline? I can't just use getSymbol, because I have no symbol B2 within symbol B1, and so it will fail. And I can't use just getParentSymbol, because in this case, that's the Stage, and it will control the Stage, but not B2. But...the Stage contains both symbols B1 and B2. So I combine the two methods into a single statement.

                                                   

                                                  sym.getParentSymbol.getSymbol("B2").stop();

                                                   

                                                  The first part (getParentSymbol) brings me up one level. The second part (getSymbol("B2") gets the symbol that exists at that upper level (B2 is a child of A, the Stage). You can go "up" the hierarchy as many levels as you need to using getParentSymbol to get to the symbol that contains the symbol you want to control, or go "down" using getSymbol as many levels as you need to address a deeply nested symbol.

                                                   

                                                  Here's a colorful example of maneuvering symbol hierarchy that illustrates all this - it's a tutorial of sorts, so mouse over and click the squares to get a visual explanation and example code:

                                                   

                                                  If you want to examine it in more detail, download it here.

                                                   

                                                  hth,

                                                  Joe

                                                  • 22. Re: Calling symbols basics...
                                                    shadowfax007 Level 1

                                                    Joe-

                                                     

                                                    Yes, I was starting to understand :-)

                                                     

                                                    Actually, I thought this was the way but as I said earlier, I must have had something else going on when I tried this and just assumed I was doing it wrong and there was another way!

                                                     

                                                    I'm glad to find I was right - between that and your great explaination I now understand it very well.

                                                     

                                                    BTW - the link didn't load :-)

                                                     

                                                    James

                                                    • 23. Re: Calling symbols basics...
                                                      jbowden Adobe Employee

                                                      shadowfax007 wrote:

                                                       

                                                      BTW - the link didn't load :-)

                                                       

                                                       

                                                      Son of a nutcracker! My new "free" hosting site seems to be down...

                                                       

                                                      Try this instead (example file only)

                                                       

                                                      Joe

                                                      • 24. Re: Calling symbols basics...
                                                        shadowfax007 Level 1

                                                        Thanks again Joe!

                                                         

                                                        I thought I had this all figure out, but, once again...

                                                         

                                                        stage -> main-design2 -> responsive_design

                                                         

                                                        In responsive_design, I have the following symbols on the timeline (all hidden except for tutorial1_nav):

                                                        tutorial1_nav

                                                        responsive_design_1

                                                        responsive_design_2

                                                        ...

                                                        responsive_design_6

                                                         

                                                        in tutorial1_nav, I'm using this in the onClick call (there are six buttons in the nav, each using a different onClick to call a different symbol from the responsive_design symbol):

                                                        button1:    

                                                        //sym.getSymbol("responsive_design")getSymbol("responsive_design_1").play("in");

                                                        button2:

                                                        //sym.getSymbol("responsive_design")getSymbol("responsive_design_2").play("in");

                                                         

                                                        For some strange reason, it plays and calls responsive_design_1 when the animation loads, not onclick!

                                                         

                                                        I've also tried this but nothing happened in one of the button onClicks in the tutorial1_nav:

                                                        sym.getParentSymbol().getSymbol("responsive_design_1").play("in");

                                                        sym.getParentSymbol().getSymbol("responsive_design_2").play("in");

                                                        ...

                                                         

                                                         

                                                        I've got everything working in this section but this :-)

                                                         

                                                        James

                                                        • 25. Re: Calling symbols basics...
                                                          jbowden Adobe Employee

                                                          shadowfax007 wrote:

                                                          button1:   

                                                          //sym.getSymbol("responsive_design")getSymbol("responsive_design_1").play("in");

                                                          button2:

                                                          //sym.getSymbol("responsive_design")getSymbol("responsive_design_2").play("in");

                                                           

                                                          If that's code you copy/pasted and not a typo on this thread, you're missing a dot in each statement before the second getSymbol call. Also, if that's your actual code, it won't run with a comment token in front of it. So those should be:

                                                           

                                                          sym.getSymbol("responsive_design").getSymbol("responsive_design_1").play("in");

                                                          sym.getSymbol("responsive_design").getSymbol("responsive_design_2").play("in");

                                                           

                                                          hth,

                                                          Joe

                                                          • 26. Re: Calling symbols basics...
                                                            shadowfax007 Level 1

                                                            Joe-

                                                             

                                                            thanks!

                                                             

                                                            The "dot" was a miss on my part but only a typo when I copied the comment tag :-)

                                                             

                                                            I tried again, but no luck.

                                                             

                                                            In the meantime, I added six "elipses" with an opacity of 0 to each of the pages and used those as butons on top of the nav buttons.  Not what I wanted but I thought I'd try.  Sure enough, they work when I'm on responsive_design (where all the other sysbols are):

                                                             

                                                            sym.$("responsive_design_2").show();

                                                            sym.getSymbol("responsive_design_2").play("in");

                                                             

                                                             

                                                            but I have the same problem trying from all the other symbol pages, even copying your code above (with the exception on the space in "pl ay" :-)

                                                            If I add you code to responsive_design_1's timeline (I also have one page with original code using the tutorial1_nav symbol and tried it there too) to try to call respopnsive_design_2 (on the responsive_design timeline)

                                                            I can't get the nav to work from any of the other symbols (responsive_design_1 -responsive_design_6), trying to call the next symbol from responsive_design...

                                                             

                                                            Would it help to upload the code?

                                                             

                                                            Thanks again for the help!

                                                             

                                                            James

                                                            • 27. Re: Calling symbols basics...
                                                              jbowden Adobe Employee

                                                              Hi James,

                                                               

                                                              One habit I find very useful is to test your code in the browser frequently while you're writing it - this helps you to catch mistakes early before they compound, which may be what's happening here. This habit will save you tons of debugging time when your project begins to get to highly complex.

                                                               

                                                              That all said, I think it may help to diagram the relevant symbol hierarchy vis a vis the elements calling them, and showing the relevant bits of code. If anything leaps out, I'll chime in.

                                                               

                                                              I don't mind helping users get to the bottom of scripting problems, but please also be aware my time is somewhat limited, as my primary responsibility is testing the next version of Edge Animate.

                                                               

                                                              Thanks,

                                                              Joe

                                                              • 28. Re: Calling symbols basics...
                                                                shadowfax007 Level 1

                                                                Joe - Thanks - I'll start checking and writing down the code for each piece of relevant info :-)

                                                                 

                                                                I actually do test my code in the browser, sometimes close to 100 times a day :-)

                                                                 

                                                                As for your time, I understand completely and feel what I consider a proper amount of guilt for asking for your help (seriously!) :-)

                                                                 

                                                                When I say thank you I truly mean it!

                                                                Especially from Edge team members, as I'm aware you have other things to better spend your time with, such as working on the newest, greatest version of Adobe Edge!!!

                                                                 

                                                                Of course, the same goes to others here on the list - I understand their time is just as valuable as mine!  I'm not always sure where they (as well as team members like yourself!) get the time to help so many on this list like me (which is the main reason I try to respond to posts whenever I can!) but I am ever grateful for their time and expertise as well!

                                                                 

                                                                Thanks!

                                                                 

                                                                James

                                                                • 29. Re: Calling symbols basics...
                                                                  jbowden Adobe Employee

                                                                  Thanks James...I try to dedicate spare time here when I can. And thank you for your contributions to this forum (both for your help to others as well as your questions - hopefully the conversations are helpful to others as well).

                                                                   

                                                                  Don't feel guilty about asking for help! Because I feel guilty that I can't help as much as I'd like! That's twice the guilt...now where's the fun in that?

                                                                   

                                                                  If you can diagram out the symbol hierarchy and provide the relevant code, I'm sure the problem can be solved by us or another forum member.

                                                                  • 30. Re: Calling symbols basics...
                                                                    shadowfax007 Level 1

                                                                    Thanks Joe-

                                                                     

                                                                    OK, fresh start :-)

                                                                    Basically, I'm trying to call the symbols on responsive_design from the tutorial1_nav symbol which is a child of responsive_design_1 through responsive_design_6 :-)

                                                                     

                                                                    Problem:

                                                                    The animation works for the following using the onClick action:

                                                                    stage -> button-slider-design calls main_design2

                                                                    main_design2 calls responsive_design

                                                                    responsive_design calls responsive_design_1 (which is on the responsive_design timeline and is a direct parent/child relationship).

                                                                     

                                                                    From here I am running into trouble.  I'm trying to call the other symbols that reside on the responsive_design timeline:  responsive_design_2 - responsive_design_6, from their respective timelines: responsive_design_2 -  responsive_design_6.

                                                                     

                                                                    I was hoping that I could use the tutorial1_nav symbol (found on all the symbols timelines above) to make the calls since they will all be the same code.

                                                                     

                                                                    So my problem is calling the symbols on responsive_design(parent) from it's child(/children?) symbols using tutorial1_nav.  Before I begin, I have done a test.  Since my problem is calling the symbols on responsive_design from the 6 other design 1-6 symbols, I'm focusing on the responsive_design_1 timeline (since I can call this at first from responsive_design and it works).

                                                                     

                                                                    on responsive_design_1 I have the following:

                                                                     

                                                                    tutorial1_nav is running in the timeline.  It has 6 buttons, 1-6.

                                                                    Also on the timeline of responsive_design_1, I have created ellipses that cover buttons 4-6 on the tutorial1_nav with an opacity of 0 and added the following to each respectively to test (which should overwrite anything in the tutorial1_nav since it is now covered with these ellipses):

                                                                     

                                                                    Ellipse 4 onClick:

                                                                    sym.getSymbol("responsive_design").getSymbol("responsive_design_1").show();

                                                                    sym.getSymbol("responsive_design").getSymbol("responsive_design_1").play("in");

                                                                     

                                                                    Ellipse 5 onClick:

                                                                    sym.getParentSymbol().getSymbol("responsive_design_2").show();

                                                                    sym.getParentSymbol().getSymbol("responsive_design_2").play("in");

                                                                     

                                                                    Ellipse 6 onClick:

                                                                    sym.getParentSymbol().getParentSymbol().getSymbol("responsive_design_3").show();

                                                                    sym.getParentSymbol().getParentSymbol().getSymbol("responsive_design_3").play("in");

                                                                     

                                                                    On the tutorial1_nav symbol, I have the following for button 1-3:

                                                                     

                                                                    button 1 onClick:

                                                                    sym.getParentSymbol().getSymbol("responsive_design_1").show();

                                                                    sym.getParentSymbol().getSymbol("responsive_design_1").play("in");

                                                                     

                                                                    button 2 onClick:

                                                                    sym.getSymbol("responsive_design").getSymbol("responsive_design_2").show();

                                                                    sym.getSymbol("responsive_design").getSymbol("responsive_design_2").play("in");

                                                                     

                                                                    button 3 onClick:

                                                                    sym.getParentSymbol().getParentSymbol().getSymbol("responsive_design_3").show();

                                                                    sym.getParentSymbol().getParentSymbol().getSymbol("responsive_design_3").play("in");

                                                                     

                                                                    From the ellipses on responsive_design_1, they all worked! (Great but then I have to write 6 "ellipses" on each symbol instead of using a symbol to control them).  The third one is a bit puzzeling though.  I can see the first two basically call the same symbol timeline but the third goes one above the first 2, yet it also works!

                                                                     

                                                                    From the buttons on tutorial1_nav, NONE of the 3 buttons work :-(

                                                                     

                                                                     

                                                                    Here's an outline of what I have:

                                                                     

                                                                    Stage:

                                                                     

                                                                    Symbols:

                                                                    button-slider-design

                                                                    button-slider-develop

                                                                    button-slider-deploy

                                                                    main_design2

                                                                    main_develop

                                                                    main_deploy

                                                                    edge_phone-A

                                                                     

                                                                    Actions:

                                                                    button-slider-design:

                                                                              sym.getSymbol("button-slider-design").play("more");

                                                                              sym.$("main_design2").show();

                                                                              sym.getSymbol("main_design2").play("in");

                                                                     

                                                                    labels: arrow_start

                                                                              00:00:00

                                                                              sym.$("main_design2").hide();

                                                                              sym.$("main_deploy").hide();

                                                                              sym.$("main_develop").hide();

                                                                    ----------------------

                                                                     

                                                                    Main_design2 symbol:

                                                                     

                                                                    Symbols:

                                                                              responsive_design

                                                                     

                                                                    Actions:

                                                                    black_ball_responsive:

                                                                              sym.$("responsive_design").show();

                                                                              sym.getSymbol("responsive_design").play("in");

                                                                     

                                                                    label: in

                                                                              00:00:00

                                                                              sym.$("responsive_design").hide();

                                                                    -----------------------

                                                                     

                                                                    responsive_design symbol:

                                                                     

                                                                    symbols:

                                                                    responsive_design_1

                                                                    responsive_design_2

                                                                    responsive_design_3

                                                                    responsive_design_4

                                                                    responsive_design_5

                                                                    responsive_design_6

                                                                    tutorial1_nav

                                                                     

                                                                    actions:

                                                                    ellipse4:

                                                                              sym.$("responsive_design_1").show();

                                                                              sym.getSymbol("responsive_design_1").play("in");

                                                                    ellipse5:

                                                                              sym.$("responsive_design").hide();

                                                                              sym.$("responsive_design_2").show();

                                                                              sym.getSymbol("responsive_design_2").play("in");

                                                                    ellipse6:

                                                                              sym.$("responsive_design").hide();

                                                                              sym.$("responsive_design_3").show();

                                                                              sym.getSymbol("responsive_design_3").play("in");

                                                                     

                                                                    label: in

                                                                              00:00:00

                                                                              sym.$("responsive_design_1").hide();

                                                                              sym.$("responsive_design_2").hide();

                                                                              sym.$("responsive_design_3").hide();

                                                                              sym.$("responsive_design_4").hide();

                                                                              sym.$("responsive_design_5").hide();

                                                                              sym.$("responsive_design_6").hide();

                                                                     

                                                                    label: out

                                                                              00:01:00

                                                                              sym.stop();

                                                                    --------------------------

                                                                     

                                                                    tutorial1_nav symbol

                                                                     

                                                                    Elements:

                                                                     

                                                                    Ellipse-nav_1

                                                                    Ellipse-nav_2

                                                                    Ellipse-nav_3

                                                                    Ellipse-nav_4

                                                                    Ellipse-nav_5

                                                                    Ellipse-nav_6

                                                                     

                                                                    actions:

                                                                     

                                                                    Ellipse-nav_1

                                                                              sym.getParentSymbol().getSymbol("responsive_design_1").show();

                                                                              sym.getParentSymbol().getSymbol("responsive_design_1").play("in");

                                                                     

                                                                    Ellipse-nav_2

                                                                              sym.getParentSymbol().getSymbol("responsive_design_1").show();

                                                                              sym.getParentSymbol().getSymbol("responsive_design_1").play("in");

                                                                     

                                                                     

                                                                    Ellipse-nav_3

                                                                              sym.getParentSymbol().getParentSymbol().getSymbol("responsive_design_3").show();

                                                                              sym.getParentSymbol().getParentSymbol().getSymbol("responsive_design_3").play("in");

                                                                     

                                                                     

                                                                    I hope this makes sense :-)

                                                                     

                                                                    James

                                                                    • 31. Re: Calling symbols basics...
                                                                      chuba21 Level 2

                                                                      Hey guys, all of this makes sense, but I am not getting how to name the symbols created dynamically so I can take them individually later. I am working in a crossword puzzle and pull the data from xml files.

                                                                       

                                                                       

                                                                      i,e,

                                                                       

                                                                      Lybrary item called: crosswordCell

                                                                       

                                                                       

                                                                      //CREATING THE SYMBOLS

                                                                      for (var i = 0; i<boardLength; i++)

                                                                                {

                                                                                for (var j = 0; j<row.length; j++)

                                                                                {

                                                                                          var cell = sym.createChildSymbol('crosswordCell', 'Stage'); // CALL SYMBOL FROM LYBRARY

                                                                                          cell.getSymbolElement().attr( 'name' , 'cell' + i + '_' + j ); // I WANT TO ASSIGN A NAME TO EACH SYMBOL TO CALL IT LATER. is this the way??

                                                                       

                                                                                          //SET THE POSITION

                                                                                          cell.getSymbolElement().css("position", "absolute");

                                                                                          cell.getSymbolElement().css("left", posX);

                                                                                          cell.getSymbolElement().css("top", posY);

                                                                       

                                                                                }

                                                                      }

                                                                       

                                                                      //CALLING THE SYMBOLS

                                                                       

                                                                      for (var i = 0; i<boardLength; i++)

                                                                           {

                                                                                for (var j = 0; j<row.length; j++)

                                                                                {

                                                                                        

                                                                       

                                                                                     var myCell = sym.getSymbol('cell' + i + '_' + j); //THIS DOES NOT WORK!! bad setting or bad calling???

                                                                                     myCell.param = across[i][0];

                                                                       

                                                                                      alert(myCell.param) //error

                                                                                }

                                                                      }

                                                                       

                                                                      Thanks. Adrian.

                                                                      • 32. Re: Calling symbols basics...
                                                                        joel_pau Level 5

                                                                        Hi Adrian,

                                                                         

                                                                        You've got 2 tools to build your crossword puzzle:

                                                                        1) .getSymbolElement().css("display", "inline-block"); Positionning will be automatic.

                                                                        2) sym.getChildSymbols(); You can call your symbol instances.

                                                                         

                                                                        Here is a demo loading a json file. It's an issue very close to your xml loading.

                                                                        Attached file: https://www.box.com/s/ef1exkkz4uiejt3kq074

                                                                        • 33. Re: Calling symbols basics...
                                                                          chuba21 Level 2

                                                                          HI JOEL

                                                                           

                                                                          Cool tips, but 2) looks more generalistic than my need.

                                                                           

                                                                          I have resolved the xml document loading and positioning but I want to name them that way I can call them individually for example, I want to disable the cell called 'cell1_7' or a group of cells.

                                                                           

                                                                          I think I am failing in naming the cells. I want a name like: 'cell' + i + '_' + j (where i and j are the row and the column of the cell. I also want to add properties as the value of the correct letter.

                                                                           

                                                                          I did this project in Flash AS3 and currently am translating it to Edge, basically it worked with minor tweaks (thanks ADOBE!!) but I still dont get the naming. It looks like my cell.getSymbolElement().attr( 'name' , 'cell' + i + '_' + j );  is not working.

                                                                           

                                                                          I could create a variable per cell, something like myCells['cell' + i + '_' + j] but I think it would not be a good practice having like 160 variables bothering in the memory and more in bigger boards.

                                                                           

                                                                          Thanks for your help!

                                                                          • 34. Re: Calling symbols basics...
                                                                            chuba21 Level 2

                                                                            Oh, I am reading your code, and I think I am seeing the light at the end of the tunnel.