Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
oll

TweenMax with Adobe Edge, how to get parent symbol

Recommended Posts

Hello everybody,

I am a completly new EdgeUser. I am more familiar with AfterEffects, but I can imagine the things

you can do with a tool like edge.

 

I used flash for several years but more like copy and paste (AS2).

 

What I am looking for is basically very easy, but not for me.

I searched and searched but I cant found the solution for:

 

get the parent symbol an do some tweening with tweenMax:

 

 

 
TweenMax.to(sym.$("jacket01"),2,{css:{y:-220, scale:0.4, opacity: 1}, delay:9, ease:Expo.easeOut});
 
//I am currently inside an element named ("menue"),
from here I want to tween a Symbol named ("jacket01") which is on the stage.
 
 
I tryed a lot of things but nothing realy worked:
TweenMax.to(sym.$("jacket01").parent(),2,{css:{y:-220, scale:0.4, opacity: 1}, delay:9, ease:Expo.easeOut});
 
I cant find the answer to such a simple question.
 
I would be great if there is someone of your professional coders could give me 
an answer.
 
It would be very helpful to dive in the new edge tool.
 
Thank you very, very much in advance from germany
 
P.S. This is my first result with adobe Edge:
fake-RangeRover_site all done with edge:
 
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Sorry, I don't know much about the internal working of Edge. 

The support here is really focused on the GreenSock Animation Platform.

 

A google search for "parent symbol of edge symbol" got me this result though:

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

 

Which mentions

 

 

Get symbol parents
To control a parent symbol, use the following:
 
sym.getParentSymbol();
 

Does that work for you?

 

Link to comment
Share on other sites

From the documentation

 

// Get the stage from the composition level, get the symbol,

// and play the timeline

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

Link to comment
Share on other sites

I'm having a similar issue using tweenmax with edge. Could someone please help me figure this out?


First, here's a test file to show what I'm trying to do:


https://www.yousendit.com/download/UVJqc0x6Q0NTSUExZXNUQw


On this file, the small green rectangle and blue ellipse are both symbols on the main stage.


The large gray rectangle is called parentSymbol and contains the red circle which is called childSymbol.


The green rectangle has code (which DOES NOT using tweenmax) that controls the visibility of the red circle and it works great. Here is the code:


mouseover:

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

sym.getSymbol("parentSymbol").$("childSymbol").hide();


mouseout:

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

sym.getSymbol("parentSymbol").$("childSymbol").show();


Here's my problem:


What if you want to use tweenmax and have the red circle fade out when you mouseover the blue ellipse? 


The blue ellipse currently has this code and it doesn't work. 


mouseout:

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

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

TweenMax.to(childSymbol, 1, {css:{opacity:1}, ease:Quad.easeOut});


mouseover:

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

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

TweenMax.to(childSymbol, 1, {css:{opacity:0}, ease:Quad.easeOut});


 

As an added test, the opacity of the gold rectangle with the rounded corners is being controlled using tweenmax. But, the gold rectangle resides on the main timeline and is not a child symbol. This code works fine.


The question is, how to I use tweenmax to get a symbol on the main timeline to talk to a nested child symbol? Or for that matter, talk between nested symbols as well.


Your advice would be surely appreciated by those of us who love tweenmax and am trying to learn how to use it in edge. Thanks very much in advance.

Link to comment
Share on other sites

To to get the red circle (childSymbol) to fade out/in on mouseover/mouseout of the blue ellipse do this:

 

 

 

Symbol.bindElementAction(compId, symbolName, "${_ellipse_symbol}", "mouseover", function(sym, e) {
         //use jQuery to target the element to be tweened
         var target = sym.getSymbol("parentSymbol").$("childSymbol")
         TweenMax.to(target, 1, {opacity:0, scale:0.5});
      });
      //Edge binding end


      Symbol.bindElementAction(compId, symbolName, "${_ellipse_symbol}", "mouseout", function(sym, e) {
        //use getElement() to target the element to be tweened  
        var target = sym.getSymbol("parentSymbol").getSymbol("childSymbol").getSymbolElement();
        TweenMax.to(target, 1, {opacity:1, scale:1});
      });
      //Edge binding end
 

Notice I'm showing 2 ways of targeting the element that should be faded. Also, it appears you were trying to use getSymbol("someSymbol") as the target of your tween.

 

As I understand it, edge symbols are just JavaScript objects, TweenMax needs to tween the symbol's DOM element. 

  • Like 1
Link to comment
Share on other sites

Awesome! Thank you very much, Carl. Your code works well-although the mouseover only works on second mouseover. On the first mouseover, nothing happens but if you mouseout and mouseover again, then the red dot moves. This happens if I place the code directly on the element itself-which is something that is encouraged in Edge but a practice I avoided in Flash (and couldn't do once AS3 came around).

But, if I place your code in an actions panel on the main timeline, apart from the element, it works perfectly.

I realize that this isn't an Edge forum, but hope that this will help others who are trying to move from Flash to Edge and hoping to take the awesomeness of greensock with them.

Link to comment
Share on other sites

Glad it worked. I didn't use Edge at all. I edited the parent_child_test_edgeActions.js file directly. I imagine where you place the code in Edge dictates where it shows up in that file and how it works. So it sounds like what I did was akin to putting the code on the main timeline.

 

Note:

 

 

Symbol.bindElementAction(compId, symbolName, "${_ellipse_symbol}", "mouseover", function(sym, e) {

});
 

 

 

Was all boilerplate code that was in your existing file, which was generated by Edge.

If you were pasting that part onto your symbol, maybe that was causing the conflict/error. Not sure.

 

It might be a good exercise to add some simple code to the main timeline and to a symbol directly and then investigate the edgeActions file to see how both are handled behind the scenes.

Link to comment
Share on other sites

I totally didn't read the 'get parent symbol' bit and just posted some useless stuff about referencing the composition and stage. Buh. Sorry. Need. Sleep.

Link to comment
Share on other sites

@Chris: No problem at all. Your tutorials have been a lifesaver. 

@Carl: I'll create some test files with the code placed in different places as suggested. I'm inclined to think just putting the code in one place would be better - specifically if you're editing an older file - than splitting it up among elements. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×