If you take a look at the full code mode in the code panel, you can see what's going on. The Stage is a symbol by itself, which means that it lies parallel to the other symbols. The symbol definitions are not held within the Stage. There are a couple of things you can do:
- Define the function in Stage scope and then access them this way: sym.getParentSymbol().functionName()... in which case you will want to pass in sym as the object you're working on
- Define the function outside the Stage symbol but within the Edge composition closure.
- Define the function in Stage scope and attach it to a variable to the Stage, then you can just retrieve the variable and have access to the function.
Hope that helps clarify things a bit.
Regarding the third solution : "attach it to a variable to the Stage". I understand, in document.compositionReady, use a sym.getComposition().getStage().getVariable() statement. Then later a sym.getComposition().getStage().getVariable(). Correct ?
PS : having the opportunity to dialog with a staff member, let me report some of the difficulties I encounter studying the Edge API page in that thread : http://forums.adobe.com/thread/1204480
1 person found this helpful
Here's a simple sample that I think will explain what's going on. As you can see in my project, I have two symbols defined (Library Panel), mySym and secondSym. I also have instances of these symbols on the Stage, which is defined as mySymInstance and secondSymInstance. I have click handlers set for both of these instances.
In the code panel, you can see that the click handlers live within the Stage, and the symbols live at the same level as the Stage, as all symbols live at the same level within the composition closure. Remember that the Stage is another symbol, and the composition closure is not exposed except in full code mode or by editing the edgeActions.js file directly. The last thing to note here is that as you well know, symbols are a one-to-many relationship, which means that you can have a lot of instances of the same symbol on the stage, and each can have a different action associated with it.
Hope this clarifies things a little more.
Thank you Elaine. I begin to understand the different scopes behind closures.
I am back after studying Cody Lindley's book. I tried this exercise. Two symbols menuA and menuB, instanciated respectively as menuA_1 and menuB_1. A menuA symbol nests four text elements itemA1 to itemA4. A menuB symbol nests three text elements itemB1 to itemB3. Text is black and should change color on rollover.
1) Brute force solution : each of the seven text elements has
- a mouseover handler : $(e.target).css('color', 'rgba(187,6,117,1.00)');
- a mouseout handler : $(e.target).css('color', 'rgba(0,0,0,1.00)');
Files here : https://www.box.com/s/w26hugoxom97o8x91rrk
2) In order to factorize to the symbol level, menuA was selected in the code panel, and the following function written before the code defining the event handlers
function changeColorA( targetElem, colorValue)
then all the event handlers were modified
- mouseover handler : changeColorA( e.target, 'rgba(187,6,117,1.00)');
- mouseout handler : changeColorA( e.target, 'rgba(0,0,0,1.00)');
Similar function changeColorB defined in menuB. This works ok.
Files here : https://www.box.com/s/l3mb4n4l9je4hsts7h8j
3) Now wanting to factorize at the stage level, Stage was selected in the code panel, and this
single changeColor function written
function changeColor( targetSym, targetElem, colorValue)
then all the event handlers, in each of the two symbols, were modified
- mouseover handler : sym.getParentSymbol().changeColor( sym, e.target, 'rgba(187,6,117,1.00)');
- mouseout handler : sym.getParentSymbol().changeColor( sym, e.target, 'rgba(0,0,0,1.00)');
Files here : https://www.box.com/s/dnizm64dusezq5kpbkuy
It doesn’t work. I suspect not passing the targetSym parameter correctly. May be the function needs a getSymbol( <instanceName>), but from inside the symbol I cannot pass an instance name ?
Could anyone show me what I miss ? Thank you.