29 Replies Latest reply on Feb 27, 2013 9:07 AM by Dam4222

    Using Greensock TweenLite or TweenMax with Edge

    padrepio Level 1

      I've heard that it's possible to use Greensock's Tween library with Adobe Edge. I've been trying to implement it in a project that I'm working on. I've read of 2 ways to include a JS library.

       

      One method is to include the JS files as you would normally do in any HTML file. This comes below the <!-- Adobe Edge Runtime --> comments, as follows:

       

      <script type="text/javascript" href="edge_includes/TweenMax.min.js"></script>
      <script type="text/javascript" href="edge_includes/TweenLite.min.js"></script>

       

      Another method that I found is this one:

       

      yepnope(

      {

          nope:[

          'edge_includes/TweenMax.min.js',

          'edge_includes/easing/EasePack.min.js',

          'edge_includes/TweenLite.min.js'

          ],

          complete: init

       

      }

      );

       

      Either way, I'm getting no responsed from any tweening at all. Here's an example of an attempt to change a property of a Symbol on stage.

       

      function init() {

          var chunLi = sym.$("ChunLi");

       

       

          chunLi.mouseover(function() {

              TweenMax.to(chunLi, 1, {width: 250});

          });

          chunLi.mouseout(function() {

       

          });

      }

       

      I've also tried with the CSS method:

       

      TweenMax.to(chunLi, 1, {css:{width:250}});

       

      Nothing's working.

       

      In fact, I can't seem to do anything to the properties of any symbol. All I'm trying to do is a rollover effect for a set of symbols that will increase their size onmouseover and then go back to normal size onmouseout.

       

      Edge file located here: http://www.lemieux-design.net/street fighter.zip

        • 1. Re: Using Greensock TweenLite or TweenMax with Edge
          resdesign Adobe Community Professional & MVP

          The way to add js files to Edge  is to include this in Composition Ready. 

          $.getScript("pathname"),functiom(){

               // your code here

          });

           

          Example below uses the ui.draggable.js file to allow object to be draggable.

           

          $.getScript("js/jquery.ui.draggable.js", function() {

          var engineCover = sym.$("engineCover");

          engineCover.draggable({ disabled: false });

          });

          • 2. Re: Using Greensock TweenLite or TweenMax with Edge
            padrepio Level 1

            Do I write all of my code in the Composition Ready area? I have an animation that plays as an intro for about 3 seconds and then a stop action. I thought my code would have to go in the frame script.

             

            Also, in this case, I need to import TweenMax, TweenLite, and some easing functions. It looks like this configuration only allows for one import?

            • 3. Re: Using Greensock TweenLite or TweenMax with Edge
              resdesign Adobe Community Professional & MVP

              I personally prefer to keep my code in one place. I usually keep everything on composition ready as much as I can. Of course some code can go into symbols. The GetScript lines are put in composition ready. If you have actions on the timeline, that's fine. Let me know how it goes.

              • 4. Re: Using Greensock TweenLite or TweenMax with Edge
                padrepio Level 1

                I tried your code and still nothing is working. I'm just not getting it.

                 

                In Flash, I would import a class file and then I can just write code for TweenLite right in the ActionScript editor and there's no problem. I've tried 3 different ways to connect the Greensock Tween Scripts into my project now and then fire some simple events on Symbols using TweenLite.to() actions. Nothing is working.

                 

                There has to be something I'm missing. It shouldn't be this difficult to tween an element.

                 

                ???

                • 5. Re: Using Greensock TweenLite or TweenMax with Edge
                  padrepio Level 1

                  For example,

                   

                  I tried to get a simple play action to work with this symbol, like this:

                   

                  var chunLi = sym.$("ChunLi");

                  sym.$("ChunLi").click(function() {

                      this.play("ChunLi");

                  });

                   

                  at the Composition Ready area. That doesn't work.

                   

                  However, if I select the symbol ChunLi and the use the built-in Play action, it does.

                   

                  Shouldn't the above code work?

                  • 6. Re: Using Greensock TweenLite or TweenMax with Edge
                    resdesign Adobe Community Professional & MVP

                    I got your file. I am not sure what you want to accomplish but I already see that you did not target your symbols properly in the previous post.

                     

                    Use getSymbol for symbols - Check the API under help in EA.

                     

                    var dhalsim = sym.getSymbol("Dhalim");

                    • 7. Re: Using Greensock TweenLite or TweenMax with Edge
                      padrepio Level 1

                      Really!? When I use the reference that I have and do an alert, it works. I'll try your way. The help is junk.

                       

                      What I'm trying to do is onmouseover, increase the width and height of each image and onmouseout, return them back to their normal size. Then give them an onclick event to send them to a different part of the timeline.

                      • 8. Re: Using Greensock TweenLite or TweenMax with Edge
                        resdesign Adobe Community Professional & MVP

                        Hum, you could do that on the timeline of each symbol and use play(); to play the animation on mouseover and playReverse() on mouseout. Unselect the play automatically in the symbol, add a stop() at the beginning and then play them when you need.

                        • 9. Re: Using Greensock TweenLite or TweenMax with Edge
                          padrepio Level 1

                          Well, that kind of defeats the purpose of using TweenLite, right?

                           

                          I tried changing my variable to:

                           

                          var chunLi = sym.getSymbol("ChunLi");

                           

                          and then tried a simple click function on that:

                           

                          chunLi.click(function() {

                               sym.play("ChunLi");

                          });

                           

                          And it didn't work. I'm doing this on the document.compositionReady.

                           

                          Also, I'm not sure what build you're on, but I'm using Adobe Edge Animate 1.0.

                          • 10. Re: Using Greensock TweenLite or TweenMax with Edge
                            resdesign Adobe Community Professional & MVP

                            Could you try

                            chunLi.click(function() {

                                 chunLi.play();

                            });

                            • 11. Re: Using Greensock TweenLite or TweenMax with Edge
                              padrepio Level 1

                              Tried it. Didn't work. "ChunLi" is a frame label on the main timeline. So I tried:

                               

                              chunLi.click(function() {

                                   sym.play("ChunLi");

                              });

                               

                              Is sym a reference to the main timeline?

                              • 12. Re: Using Greensock TweenLite or TweenMax with Edge
                                resdesign Adobe Community Professional & MVP

                                Yes, sym references the main timeline.So you code should play from your label to a stop() on the same timeline.

                                Using the getSymbol would be useful to play the symbol timeline.

                                 

                                It seems that the main problem is that you need to find the way to get greensock to be used by Edge. In my example with the jet engine, you will notice the line

                                engineCover.draggable({ disabled: false }); which used the js file.

                                 

                                I have never used greensock so I am not sure how to use it.  Is there a line to enable it?

                                 

                                It is seems that you do use the variable created for the symbol in the TweenMax line.

                                 


                                • 13. Re: Using Greensock TweenLite or TweenMax with Edge
                                  resdesign Adobe Community Professional & MVP

                                  Reading the doc for greensock I came across this line

                                   

                                  TweenPlugin.activate([SetSizePlugin]);

                                   

                                  Maybe there should be a similar line to add in the getScript to active TweenMax.

                                  • 14. Re: Using Greensock TweenLite or TweenMax with Edge
                                    resdesign Adobe Community Professional & MVP

                                    I am looking at the doc and it should work the way I have it but it is not. I will check more tonight unless you find the reason why it is not working. The alert is working. Not the rest.

                                     

                                    $.getScript("js/TweenMax.min.js", function() {

                                              var chunLi = sym.$("ChunLi");

                                              chunLi.mouseover(function(){

                                              TweenMax.to(chunLi, 1.5, {width: 250});

                                              alert("testing");

                                              });

                                    });

                                    • 15. Re: Using Greensock TweenLite or TweenMax with Edge
                                      Chris Gannon Level 1

                                      I've downloaded your prject files and there are several things that need fixing.

                                       

                                      1. You are trying to reference a symbol using

                                      var chunLi = sym.$("ChunLi");

                                      The syntax should be

                                      var chunLi = sym.getSymbol("ChunLi");

                                      2. The mouse event syntax should be

                                       

                                      chunLi.getSymbolElement().bind('mouseover',function() {

                                                          TweenMax.to(this, 1, {css:{scaleX: 2}});

                                                });

                                      3. You are trying to change the width of the image in the symbol which can be unpredictable. A better practice is to change the scale. See point 2 above. You can also scale both X and Y properties in one property by simply writing:

                                       

                                      chunLi.getSymbolElement().bind('mouseover',function() {

                                                          TweenMax.to(this, 1, {css:{scale: 2}});

                                                });

                                       

                                       

                                      4. You also need to make sure you have placed the properties you wish to animate inside a CSS object. See point 2 above.

                                       

                                      As a side note, you also don't need to load TweenLite if you are already loading TweenMax.

                                       

                                      So your final code (cut down a little here) should be:

                                       

                                      yepnope(

                                      {

                                                nope:[

                                                'edge_includes/TweenMax.min.js',

                                                'edge_includes/easing/EasePack.min.js'

                                                ],

                                                complete: init

                                       

                                       

                                      }

                                      );

                                      function init() {

                                                var chunLi = sym.getSymbol("ChunLi");

                                       

                                       

                                       

                                       

                                                chunLi.getSymbolElement().bind('mouseover',function() {

                                                          TweenMax.to(this, 1, {css:{scale: 2}});

                                                });

                                       

                                      }

                                       

                                       

                                      I hope this helps.

                                       

                                      Cheers,

                                       

                                      Chris

                                      • 16. Re: Using Greensock TweenLite or TweenMax with Edge
                                        resdesign Adobe Community Professional & MVP

                                        Thanks Chris for enlighting both padrepio and myself. I had mentioned the need for getSymbol, but the rest was mystery to me.

                                         

                                        One question, why do you load the js file this way rather than with getScript?

                                        • 17. Re: Using Greensock TweenLite or TweenMax with Edge
                                          Chris Gannon Level 1

                                          Pleasure - happy tweening!

                                           

                                          Oh I didn't see your question regarding script loading. To be honest I just like the way YepNope works and it has lots of other handy features - no other reasons really.

                                          • 18. Re: Using Greensock TweenLite or TweenMax with Edge
                                            resdesign Adobe Community Professional & MVP

                                            Hum, I think we posted at the same time. so here is my question again, just curious:

                                            One question, why do you load the js file this way rather than with $.getScript("pathname")?

                                            • 19. Re: Using Greensock TweenLite or TweenMax with Edge
                                              padrepio Level 1

                                              Right, that does the trick.

                                               

                                              Few things though.

                                               

                                              It seems like there's a delay on the mouse event. It takes a while to trigger. I programmed all 6 symbols the same way and some of them work and some of them do. Some of them do the mouseover/mouseout functions once, but don't do them again. Is this a browser performace issue?

                                               

                                              Is there a concept of levels, like there is in Flash? The symbol dips behind and in front of other symbols on the stage. Would I use a CSS z-index to bring it to the top?

                                               

                                              I am coming at this only knowing Flash and ActionScript. Syntactically, this is pretty foreign to me. I'm assuming that yepnope and the mouse events are JQuery style selectors? Or is this code native to Edge Animate? What would you suggest I learn to further my programming skills as applicable to Edge?

                                               

                                              Thanks.

                                               

                                              yepnope(

                                              {

                                                  nope:[

                                                      'edge_includes/greensock/TweenMax.js',

                                                      'edge_includes/greensock/easing/EasePack.js'

                                                  ],

                                                  complete: init

                                              }

                                              );

                                               

                                              function init() {

                                                  var chunLi = sym.getSymbol("ChunLi");

                                                  var dhalsim = sym.getSymbol("Dhalsim");

                                                  var guile = sym.getSymbol("Guile");

                                                  var honda = sym.getSymbol("Honda");

                                                  var ken = sym.getSymbol("Ken");

                                                  var ryu = sym.getSymbol("RYU");

                                                 

                                                  chunLi.getSymbolElement().bind('mouseover',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1.2}});

                                                  });

                                                  chunLi.getSymbolElement().bind('mouseout',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1}});

                                                  });

                                                 

                                                  chunLi.getSymbolElement().bind('click',function() {

                                                      sym.play("ChunLiP");

                                                  });

                                                 

                                                  dhalsim.getSymbolElement().bind('mouseover',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1.2}});

                                                  });

                                                  dhalsim.getSymbolElement().bind('mouseout',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1}});

                                                  });

                                                 

                                                  guile.getSymbolElement().bind('mouseover',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1.2}});

                                                  });

                                                  guile.getSymbolElement().bind('mouseout',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1}});

                                                  });

                                                 

                                                  honda.getSymbolElement().bind('mouseover',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1.2}});

                                                  });

                                                  honda.getSymbolElement().bind('mouseout',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1}});

                                                  });

                                                 

                                                  ken.getSymbolElement().bind('mouseover',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1.2}});

                                                  });

                                                  ken.getSymbolElement().bind('mouseout',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1}});

                                                  });

                                                 

                                                  ryu.getSymbolElement().bind('mouseover',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1.2}});

                                                  });

                                                  ryu.getSymbolElement().bind('mouseout',function() {

                                                      TweenMax.to(this, .4, {css:{scale: 1}});

                                                  });

                                              }

                                              • 20. Re: Using Greensock TweenLite or TweenMax with Edge
                                                Chris Gannon Level 1

                                                Hi padrepio,

                                                 

                                                Have a look at my blog chrisgannon.wordpress.com – there are lots of demos and tutorials to help you with most, if not all, of your questions. I too come from a Flash background and, although my tutorials aren’t necessarily aimed at Flashers, I write them in a way that I think ActionScripters will understand (because I am one!).

                                                 

                                                In terms of zIndex you can simply use that property in the same way as any other:

                                                 

                                                chunLi.getSymbolElement().bind('mouseover',function() {
                                                                    TweenMax.to(this, 1, {css:{scale: 2, zIndex:10}});         

                                                }

                                                );

                                                I hope that helps you along.

                                                 

                                                Cheers,

                                                 

                                                Chris

                                                1 person found this helpful
                                                • 21. Re: Using Greensock TweenLite or TweenMax with Edge
                                                  padrepio Level 1

                                                  Yes, I have seen your tutorials. Thanks.

                                                   

                                                  Any ideas on the sporadic behavior of the mouseevents I mentioned above?

                                                  • 22. Re: Using Greensock TweenLite or TweenMax with Edge
                                                    Chris Gannon Level 1

                                                    I'm not seeing that mouse event behaviour so I can't help there I'm afraid. Are you using a browser that has an error console? If not I'd suggest you use one like Chrome - it's sort of like the trace output for Flash but for JavaScript instead.

                                                    • 23. Re: Using Greensock TweenLite or TweenMax with Edge
                                                      resdesign Adobe Community Professional & MVP

                                                      Great blog Chris! Very useful. Have you posted your blog about the iPad Orientation on this forum?

                                                      • 24. Re: Using Greensock TweenLite or TweenMax with Edge
                                                        Chris Gannon Level 1

                                                        Nope but feel free to fire the links around

                                                        • 25. Re: Using Greensock TweenLite or TweenMax with Edge
                                                          Chris Gannon Level 1

                                                          Hi padrepio,

                                                           

                                                          Please mark this as 'Answered' - it will help others on the forum - thanks!

                                                          • 26. Re: Using Greensock TweenLite or TweenMax with Edge
                                                            mjjbuk72 Level 1

                                                            Hi Guys, can I just ask what the main benefits are of using the Greensock JS engine over Edge's built in way of animating? Is it mainly file size? thanks...

                                                            • 27. Re: Using Greensock TweenLite or TweenMax with Edge
                                                              Chris Gannon Level 1

                                                              Speed, features and functionality, ease of use and editability, great community and support, enormous flexibility - an endless list of positives! 

                                                              • 29. Re: Using Greensock TweenLite or TweenMax with Edge
                                                                Dam4222 Level 1

                                                                Hey Chris,

                                                                 

                                                                This is great stuff. Quick question though...how would you go about nesting your triggers and labels into a symbol? Take a look at my project below:

                                                                 

                                                                http://dl.dropbox.com/u/9159616/WolfandRabbitFinal.zip

                                                                 

                                                                I want people to be able to view it properly on an iPad or iPhone but when I tried your approach I ran into a problem because my timeline based animations rely on labels and triggers which its appears cannot be nested in a symbols.

                                                                 

                                                                Thanks for your help!

                                                                 

                                                                Adam