12 Replies Latest reply on Oct 26, 2012 12:41 AM by joel_pau

    Symbol Properties

    padrepio

      In Flash, I can programmatically change a Movie Clips properties with ActionScript. How can I do this with Edge?

       

      I've tried something like this:

       

      sym.getSymbol("ElementA").x = 450;

       

      And it doesn't work.

       

      Should I be addressing the CSS properties instead?

        • 1. Re: Symbol Properties
          joel_pau Level 5

          Hi,

           

          1) Yes, you have to use css function with left property: .css('left', 450)

          2) but you "select" your symbol using: sym.getSymbol("ElementA").getSymbolElement()

           

          Therefore: sym.getSymbol("ElementA").getSymbolElement().css('left', 450);

          1 person found this helpful
          • 2. Re: Symbol Properties
            TimJaramillo Level 4

            If you want to do the same thing with less typing, you can also use the jQuery selector directly:

             

            sym.$("ElementA").css({left:450});

            • 3. Re: Symbol Properties
              padrepio Level 1

              If I can theorize for a moment:

               

              Every symbol in Edge then is basically an absolutely positioned DIV

              To access symbol properties, you target the CSS attributes (left, top, bottom, right, width, height, etc.)

               

              Sound right?

              • 4. Re: Symbol Properties
                TimJaramillo Level 4

                Hi padrepio,

                 

                I recently built an Edge comp that was centered via external CSS. In order to correctly position my object with the sym.$("my_object").css({left:450}); code, I had to compensate for the css centering with a "centeredOffset" var, like this:


                sym.centeredOffset = $("#Stage").offset().left;

                 

                I then added that offest to my positioning code like this:

                sym.$("my_object").css({left:sym.myXPos - sym.centeredOffset});

                 

                Here's some interesting info on how Edge positions objects. According to the API doc:

                 

                Position div elements

                By default, Edge Animate makes sure that a stage div is positioned. If the div is not positioned either absolute or relative with CSS, Edge Animate makes it "position: relative" so all of its elements are animated relatively to the stage, rather than the page. You will need to use either flow-based or absolute position CSS to put your stages where you want them in your page.

                 

                API:doc

                http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

                • 5. Re: Symbol Properties
                  padrepio Level 1

                  Tim,

                   

                  Interesting. Very interesting. Thanks for the tip.

                   

                  I need more than API. I need a programming manual. The API just isn't enough. I've read through it.

                  • 6. Re: Symbol Properties
                    TimJaramillo Level 4

                    No problem padrepio.

                     

                    I agree- I have several grievances against the Edge Aniamate API doc (mainly regarding the content and visual formatting). No offense to my friends on the Edge Animate team, but the API doc reads more like an oddly formatted blog post than a proper API doc to me. Grey text on a grey background? ... no thank you.

                     

                    I wish the Edge API could be clean and full-featured, like the jQuery API: http://api.jquery.com/. In the jQuery api, you click on a property, and you're whisked away to a subpage with full explanation and examples. Everything is easy to read, and the information is easily accessible.

                     

                    Didn't mean to derail the thread ...

                    • 7. Re: Symbol Properties
                      padrepio Level 1

                      Yes, exactly.

                       

                      Back to the issue at hand, can you act on multiple properties at a time? width, rotation, color, etc?

                       

                      I tried this:

                       

                      sym.$("ElementA").css({width: 450; rotation: 45; color: #369});

                       

                      But it didnt' work.

                      • 8. Re: Symbol Properties
                        TimJaramillo Level 4

                        Yep, you can act on multiple props at once. I think you have to use 'background-color', not 'color'.

                         

                        Also, keep in mind that for rotation, you have to add browser-specific code:

                         

                        sym.your_angle = 45;

                         

                        sym.$("ElementA").css({width:450, 'background-color':'#369', 'transform':'rotate(' + sym.your_angle + 'deg)'});

                        sym.$("ElementA").css({width:450, 'background-color':'#369', '-moz-transform':'rotate(' + sym.your_angle + 'deg)'});

                        sym.$("ElementA").css({width:450, 'background-color':'#369', '-webkit-transform':'rotate(' + sym.your_angle + 'deg)'});

                        sym.$("ElementA").css({width:450, 'background-color':'#369', '-o-transform':'rotate(' + sym.your_angle + 'deg)'});

                        1 person found this helpful
                        • 9. Re: Symbol Properties
                          padrepio Level 1

                          Ouch. That syntax is awful, but it works. So, I see you need to include prefixes for everything too.

                          • 10. Re: Symbol Properties
                            TimJaramillo Level 4

                            Ya, the prefixes are needed since each browser handles rotation differently.

                            • 11. Re: Symbol Properties
                              Florian Steller

                              Hi,

                               

                              do you know, if I can also change css of (nested) HTML tags like "a", "p", "strong", etc like this?

                               

                              For formatted text in an element like:

                              [textElement]

                                   My Text with an link in it.

                              [/textElement]

                               

                              Formatted Text in Stage > compositionReady:

                              // TEXT FORMAT

                              var element = sym.$("textElement");

                              element.html("<p> My Text with an <a href="goesSomewhere" >link</a> in it.</p>");

                               

                               

                              Now I wont to change the color of the link...?

                               

                              Cange Link clolor like this:

                              sym.$("THEaTAG").css({

                                   'color':'#E91C89'

                              });

                               

                              Or nested:

                              sym.getComposition().getStage().getSymbol("MyElement").$("THEaTAG").css({

                                   'color':'#E91C89'

                              });

                               

                              how can I realize that?

                               

                              Thanks

                              • 12. Re: Symbol Properties
                                joel_pau Level 5

                                The simplest: an external stylesheet.

                                1) compositionReady:

                                $("<link/>",{

                                "rel":"stylesheet",

                                "type":"text/css",

                                "href":"css/menuLogo.css"

                                }).appendTo("head");//appendTo("#Stage") works too.

                                 

                                2) And a css file menuLogo.css:

                                a:link {

                                    color: #ffffff;

                                    text-decoration: underline;

                                }

                                a:visited {

                                    color: #000000;

                                    text-decoration: none

                                }

                                a:hover {

                                    color: #355d48;

                                    text-decoration: underline;

                                }

                                a:active {

                                    color: #FF0000;

                                    text-decoration: none

                                }