Button inside a symbols

Hello
I have a button inside a symbol and I would when you click to play this symbol.
The symbol is "Anim_Perso".
https://creative.adobe.com/file/47b82617-3124-4eab-9482-ac94b30674c4
https://creative.adobe.com/file/47b82617-3124-4eab-9482-ac94b30674c4
Thank you
Stephane

Hi there.
Inside your symbol, uncheck Autoplay and, on the button's actions panel, select click and add this line of code:
sym.getComposition().getStage().getSymbol("Anim_Perso").play();
pmfr

Similar Messages

Activate a button inside a symbol

First let me just say that edge is great tool, and makes our life much easier.
well.. i'm trying to get familiar with the program and I run into some obstacles.
on the stage i have a symbol, inside that symbol i have a button, which i need it to run an animation on the timeline inside that same symbol.
i used- sym.play("label name on timeline"); --- not working
i have noticed another problem, when i change the cursor it also dosen't appear when i export (CTRL+ENTER).
i tried to activate the symbol on the main timeline of the stage but it didnt solved the problem either.

YES.
Button is in mySymbol
you need to get back to the stage:
sym.getComposition().getStage().
you need to get the symbol
getSymbol("mySymbol")
you need to get the button:
$('btn')
sym.getComposition().getStage().getSymbol("mySymbol").$('btn').click(function(){
// you code here
sym.getSymbol("mySymbol").play('symbolLabel');
Here is a sample file:
https://www.box.com/s/lu9o0w0oqtex3fodti4x

Buttons inside symbol to activate action on main timeline

Hello I currently have a scrollable symbol placed on my stage. Inside that symbol are buttons which when clicked I want to use to hide and show different images on my stage. I can currently get the roll over images to work but when clicked they do nothing. Each button has an action of when clicked show"name of image" hide"all other images"
Any help would be greatly appreciated.
Thanks

Hi, Tim Jaramillo
I have an identical problem I hope you can help. I have been puzzling with the parameters and set-up of the piece of code for a “slider” Left/Right you published here 3 days ago.
With the code available in Edge script panel, I try to address the main stage from de images in the “slider” symbol. When you click a thumbnail in the “slider” you see the right picture on the stage. Is it possible for you to explain how to do that?
Thanks
Santos
File_sliderLR

Controlling a symbol from a button inside of the symbol

I hope this explanation makes sense:
I have an animate file with buttons on the main stage that control symbols.
(buttons are circles labeled 1876 and 1877)
The symbols simply move a png image on and off the stage.
For example, the two circles labeled 1876 and 1877 are PNG files made into buttons that control two different symbols.
The symbols move the scoreboard image on and off the stage.
Within the scoreboard image is an X, that I am hoping to put a button on top of within the symbol to close the symbol.
The code I am using to move the symbols on and off the stage is:
var current = sym.getVariable("current");
   if (current != "") {
      sym.getSymbol(current).play("out");
      sym.getSymbol("syboard1876").play("in");
   else {
      sym.getSymbol("syboard1876").play("shortIn");
   sym.setVariable("current", "syboard1876");
syboard1876 is the green board png.
Any idea how i can get the symbol to move off of the stage by tapping it?
And will I be able to have multiple buttons beneath the symbol (that are hidden beneath the b=green board when it is visible)?
This was the original tutorial I adapted the get the animation to work so far.
Tutorial: Leveraging Independent Symbol Timelines « Adobe Edge Animate Team Blog
Now I just need to figure a way to give the user the ability to tap the X to close the symbol.
Any suggestions?

you could use $each() with jquery in compositionReady
if not you need to get back to stage with sym.getComposition().getStage() or
you could use this in compositionReady
function useButtons(element) {
sym.$(element).bind("click",function() {
sym.$('image').attr('src','images/'+element+'.png').css({"opacity":1.00}); // this is a code example - I used the same name for the buttons and image names.
// add button names here
['', '','' ,'',''].forEach(useButtons);

Trying to show() and play() a symbol from inside another symbol

Hi Everyone !
I'm running into a problem which is getting me crazy.
I have the following case :
- 1 symbol (_Page_Background) containing an animation with the following trigger @0s :
// Hiding the symbol
sym.getParentSymbol().$("_Page_Background").hide();
// Stop it
sym.stop();
- 1 element (B_TOYS), inside of a symbol (BUTTONS) with the following "click" trigger :
// Showing the _Page_Background symbol
sym.getComposition().getStage().getSymbol("_Page_Background").show();
// Start playing it
sym.getComposition().getStage().getSymbol("_Page_Background").play("INTRO");
The Symbol _Page_Background starts hidden, like it should. But when I click on the button (B_TOYS), nothing happens. Although, everything was working correctly before I turned my buttons into symbols ..
I guess the problems lies with the "show()" function, because I have other buttons that work properly but they don't show/hide anything, they just play()
Am I missing something ?!
Thanks in advance for your kind help !

Hi Dimitri,
Think of symbols as independent timelines that can contain other elements, or instances of other symbols. The Stage/main timeline is a symbol as well. Scripting calls are scoped to the symbol that the script is in. The keyword sym stands for the symbol that you're in with the script.
So if your script is at the same level as what you are targeting with it:
Use sym.$("elementName") to access an element's properties
Use sym.getSymbol("symbolName") to access a symbol's timeline. If there's another symbol inside that symbol that you want to access, you'd use sym.getSymbol("symbolName").getSymbol("childSymbolName")...that's only two levels deep, but you can go as deep as needs be.
If you're trying to access an element in a symbol, you'd combine these two, such as sym.getSymbol("symbolName").$("elementName")
When your script is within a symbol and you want to access an element or symbol outside of the symbol timeline:
Use sym.getParent() to get to any elements that are in the parent symbol (the symbol which contains the symbol you're calling from), which could be the Stage or could be another parent symbol
Use sym.getComposition().getStage() from any symbol level to access things at the main Stage level. You can also dive into a symbol on the Stage from any symbol using sym.getComposition().getStage().getSymbol("symbolName").
All is explained in detail here:
http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
hth,
Joe

How to access a variable from inside another symbol

So i did this tutorial, Leveraging Independent Symbol Timelines created by Eliane...it's rockin, btw. ;-)
All's well but now i have a symbol on the stage called mc-home. inside of mc-home is a button called btn-go.
On the stage in composition ready there's a variable sym.setVariable("current", "mc-home");
This code works for a symbol that's on the stage but, how do i get this code to work on a button that's inside another symbol that's on the stage?
var current = sym.getVariable("current");
if (current != "") {
sym.getSymbol(current).play("OUT");
sym.getSymbol("mc-something").play("IN");
sym.setVariable("current", "mc-something");

sorry, i was kind of confused myself too, don't worry about it but thanks for your patience for reading it anyway

Insert JQuery .html into text field nested inside of symbol

This is one of those, 'it should be so simple....so of course, it's not' question.
Got a nested symbol. Rather simple one. Inside the symbol is a background rectangle and a text field. When I click a button, it should insert the HTML I give it from the click event.
Now initially I did this by just using the text field by itself. No nesting. This is the code:
sym.$("copy").html("Edge Rocks!");
OK, success! The text loaded just fine.
Now let's insert that text field inside of a symbol. And let's call that symbol 'content'.
Now I try....
sym.$("content").$("copy").html("Some new text");
Result? Nothing.
Tried using stage instead of sym and even added a var stage = sym.getComposition().getStage() statement before that. Nope.
Yea, they don't make it easy. So what's the solution?
Here's my example file.
https://www.dropbox.com/s/5n1ehhsp7r3rbt6/text.zip?m
BTW, ran this in Firebug's console. No errors.

Yes and no, Elaine. Kind of confusing but if the button is directly on the stage, that code works. However, if that button gets nested inside of its own symbol, the code no longer works and a JS error appears in console.
So in other words, the button and the text field are nested inside of symbols, but not the same symbol. So it's a question of the path being used.
I tried switching sym to Stage to no effect.
Redid the test file and uploaded it to Dropbox:
https://www.dropbox.com/s/ha24ki0wp0fb2nw/text2.zip?m

Linked symbols inside a symbol.

Working with multi-art board documents we need a way to use externally linked symbols inside a symbol in the document. Example: A Button.ai file is used in multiple documents (imaging large project with 100s of pages). The lined button symbol can't be used (Or any linked file) within a symbol. This is a very annoying limitation that requires manually update a button symbol kept in 10th of files.

Hitting "edit" is not a big deal. The grid is a big deal. If you need to adjust the size based on the grid then... you need create the same grid in the linked file and position the artwork precisely. If later on you want to adjust the grid you need to do it manually in all your linked file. Complex, is it not?
Also to be able to preview a change one need to hit save and get back to the original file...
Again all that isn't a big deal for a simple file when you need to adjust a linked image. If we talk about pixel perfect UI design - forget it.

Menu button inside menu, can you do it?

I am trying to create a dropdown menu when you rollover a
menu more menus appear underneath. I have my top menu with this
code. The menu is a mc symbol. The "on" and "off" activate the
other menu fade in.
on(rollOver){
gotoAndPlay("on");
on(rollOut){
gotoAndPlay("off");
Now here is where I'm having problems. I cannot get the menus
inside the movieclip (which are also mc's)to work. I want them on
rollover to change color and on click go to a url. I 've tried
giving them an instance name, a function, _root., nothing. Can this
be done?

yes. If you make your sub-menu a movieClip, and your buttons
inside it, you should have no problems.
eg:
on(rollOver){
gotoAndStop("on"); //"on" should be a 1 keyframe movieClip
the "on" timeline should have the animation of the sub-menu
opening, and a stop() action after the sub-buttons load.
then I would make each sub-button a 1 keyframe movieClip,
(but you dont have to) and assign all the functions of the button
to it's own timeline.
hope this helps!

Putting an iframe in a div thats inside a symbol?

I am trying to load an iframe into a div thats inside a symbol. I dont think im getting the path correct?
var externalUrl = "login.html";
sym.getComposition().getStage().getSymbol("Navigation").$("navWrapper").html("<iframe src='"+externalUrl+"' height=230px width=430px scrolling=no frameBorder=0 allowtransparency=true margin=0 padding=0></iframe>");
So the symbol is the ("Navigation") and the div im trying to load a iframe into the div inside that symbol named ("navWrapper")
Dont worry im not loading a navigation through iframe :3
Help much appreciated!

Thnx for the reply!
Sorry for any confusion there are no buttons involved. I am simply trying to load a html form into a div by using iframes. The navigation names are just names and not refering to a button or actual menu of any kind. Which is confusing i know.
So i have a symbol named Navigation with animations in it. And inside that symbol with the animations is a div names navWrapper that im trying to load a html file into. But its not working.
I can get it to load fine when the div navWrapper is on the main timeline by using
sym.$("navWrapper").html("<iframe src='"+externalUrl+"' height=230px width=430px scrolling=no frameBorder=0 allowtransparency=true margin=0 padding=0></iframe>");
thats the same as the code posted in my first post but without the sym.getComposition().getStage().getSymbol("Navigation");

MovieClip buttons inside a MovieClip button inside another MovieClip button

I am trying to make a Portfolio of my study abroad experience and can get something right about the movie clip buttons inside each other. I have a button to click on titled "travel" and a window shows up with more movieclip buttons to organize different locations of pictures. I can click on the button to have to slide of pictures but nothing happens. I have the "turnOffAllButtons" coding and also have the coding for stay clicked, but I can't get the 3rd set to show up. what am i not doing?
I don't have any errors or output comments showing up

I have it working now. what I did, I make a slideshow setup (gotoAndStop(1);) in a specific frame and the code I put in for the next, didnt work.
this is was I have now, without the "turnOffAllButtons" coding:
Main Button (actions Layer):
stop();
travelButton_mc.buttonMode=true;
travelButton_mc.addEventListener(MouseEvent.ROLL_OVER, colorizetravelButton);
function colorizetravelButton(givenEvent:MouseEvent){
if (givenEvent.currentTarget.currentFrame != 50)
travelButton_mc.gotoAndPlay(2);
travelButton_mc.addEventListener(MouseEvent.ROLL_OUT, decolorizetravelButton);
function decolorizetravelButton(givenEvent:MouseEvent){
if (givenEvent.currentTarget.currentFrame != 50)
travelButton_mc.gotoAndPlay(21);
travelButton_mc.addEventListener(MouseEvent.CLICK, loadtravelLocations);
function loadtravelLocations(givenEvent:MouseEvent){
travelButton_mc.gotoAndStop(50);
travelLocations_mc.gotoAndPlay(1);
Inside the travelLocations_mc I have currently one button to show a slide of pictures, this is the second layer of buttoncode:
stop();
scotlandButton_mc.buttonMode=true;
scotlandButton_mc.addEventListener(MouseEvent.ROLL_OVER, colorizescotlandButton);
function colorizescotlandButton(givenEvent:MouseEvent){
if (givenEvent.currentTarget.currentFrame != 50)
scotlandButton_mc.gotoAndPlay(2);
scotlandButton_mc.addEventListener(MouseEvent.ROLL_OUT, decolorizescotlandButton);
function decolorizescotlandButton(givenEvent:MouseEvent){
if (givenEvent.currentTarget.currentFrame != 50)
scotlandButton_mc.gotoAndPlay(21);
scotlandButton_mc.addEventListener(MouseEvent.CLICK, loadscotlandInfoPage);
function loadscotlandInfoPage(givenEvent:MouseEvent){
scotlandButton_mc.gotoAndStop(50);
scotlandInfoPage_mc.gotoAndPlay(1);
I turned the alpha up so you can see the mc that loads
I currently have a keyframe at 60 with a code of stop(); so the travelLocations_mc will still
does this make sense?

How can I change the color of a object inside a symbol?

Hello!
I'm working on this study and I need to change the color of an object inside a symbol when I click another object.
The object is called "bola", wich is inside the symbol "ponto" and the clicking object are the colored pencils (each pencil should change the color of the symbol's object, giving the impression you'd selecting a different pencil to draw).
I think it's simple to understand what I mean when you see the files.
I already tried this line on click event of the pencils, but it didn't work:
sym.getSymbol("ponto").$("bola").css("color","#123456");
Anyone knows how to make that work?
I would like to improve the experience of drawing as well. I made it with the "mousedown" event. Is that a better way to get a similar effect?
My files
Thanks a lot,
Clayton F.

Ok here is another sample:
http://www.meschrene.puremadnessproductions.net/Samples/HELP/LapisB/Lapis.html
http://www.meschrene.puremadnessproductions.net/Samples/HELP/LapisB/Lapis.zip
You need to create a var that changes the css background color..
Hopefully you can understand what I did...
The text I left showing so that you could see it change...
I updated the files and all colors should work now.
Message was edited by: ♥Schrene

Calling a function inside a symbol?

Hi there,
I'm one of those flash-devs that are trying to get Edge Animate to do what I usually do in Flash, so I might be doing this the wrong way, but I've got a symbol with a function "inside" on my stage, and I wanna call that function from the stage.
I've been trying to use sym.getComposition().getStage().getSymbol("symbolName").functionName(); but it doesn't work.
I don't have any problems manipulating the symbol itself by calling .play() or .hide() so I know the path works....can anyone show me the right syntax to call a function inside a symbol?
Thx in advance

Hi Abnesher,
An important principle to grasp is that symbols (and the stage is one of them) lies in parallel, despite the fact of instances of different symbols being nested one in another (and all in fine nested in the stage).
The consequence is that from inside your nested symbol you have no direct visibility of the function defined inside the stage symbol !
Inside the Stage symbol, in the document.compositionReady event handler :
sym.yourGlobalFunction = function( firstParameter)
// your stuff
Inside another symbol, in one of its events handlers :
sym.getComposition().getStage().yourGlobalFunction( 5);
Gil

Get the ID of a dynamically created symbol from library, INSIDE another symbol.

Hi everyone,
I'm trying to get the id from a dynamic created symbol from library.
When dynamically creating the symbol directly on the stage (or composition level), there's no problem.
But I just can't get it to work when creating the symbol inside another symbol.
Below some examples using both "getChildSymbols()" and "aSymbolInstances"
// USING "getChildSymbols()" /////////////////////////////////////////////////////////////////////////
// ON THE STAGE
var m_item = sym.createChildSymbol("m_item","Stage");
var symbolChildren = sym.getChildSymbols();
console.log(symbolChildren[0].getSymbolElement().attr('id')); // ok eid_1391853893203
// INSIDE ANOTHER SYMBOL
var m_item = sym.createChildSymbol("m_item", sym.getSymbol("holder").getSymbolElement());
var symbolChildren = sym.getSymbol("holder").getChildSymbols(); // Am i using this wrong maybe?
console.log(symbolChildren.length) // returns 0 so can't get no ID either
// USING "aSymbolInstances"" //////////////////////////////////////////////////////////////////////////
// ON THE STAGE
var m_item = sym.createChildSymbol("m_item","Stage");
console.log(sym.aSymbolInstances[0]); // ok (i guess) x.fn.x.init[1] 0: div#eid_1391854141436
// INSIDE ANOTHER SYMBOL
var m_item = sym.createChildSymbol("m_item", sym.getSymbol("holder").getSymbolElement());
console.log(sym.getSymbol("holder").aSymbolInstances[0]); // Javascript error in event handler! Event Type = element
In this post http://forums.adobe.com/message/5691824 is written: "mySym.aSymbolInstances will give you an array with all "names" when you create symbols"
Could it be this only works on the stage/ composition level only and not inside a symbol?
The following methods to achieve the same are indeed possible, but i simply DON'T want to use them in this case:
1) Storing a reference of the created symbol in an array and call it later by index.
2) Giving the items an ID manually on creation and use document.getElementById() afterwards.
I can't believe this isn't possible. I am probably missing something here.
Forgive me I am a newbie using Adobe Edge!
I really hope someone can help me out here.
Anyway, thnx in advance people!
Kind Regards,
Lester.

Hi,
Thanks for the quick response!
True this is also a possibility. But this method is almost the same of "Giving the items an ID manually on creation and use document.getElementById() afterwards".
In this way (correct me if i'm wrong) you have to give it an unique ID yourself. In a (very) big project this isn't the most practical way.
Although I know it is possible.
Now when Edge creates a symbol dynamically on the Stage (or composition level) or inside another symbol it always gives the symbol an ID like "eid_1391853893203".
I want to reuse this (unique) ID given by Edge after creation.
If created on the stage directly you can get this ID very easy. Like this;
var m_item = sym.createChildSymbol("m_item","Stage");
var symbolChildren = sym.getChildSymbols();
console.log(symbolChildren[0].getSymbolElement().attr('id')); // ok eid_1391853893203
I want to do exactly the same when created INSIDE another symbol.
var m_item = sym.createChildSymbol("m_item", sym.getSymbol("holder").getSymbolElement());
Now how can I accomplish this? How can I get the Id of a dynamically created symbol INSIDE another symbol instead of created directly on the stage?
This is what i'm after.
Thnx in advance!

Target a textfield inside a symbol?

I have a symbol called Rectangle and a text field called Counter on the stage. Inside the symbol I have another textfield called Counter2. For the .click event of the symbol I have:
sym.setVariable("checker", "1");
sym.$("Counter").html(sym.getVariable("checker"));
sym.setVariable("checker", "0");
sym.$("Counter2").html(sym.getVariable("checker")); //error here?
But I noticed that only Counter is being changed and that Counter2 was not targeted. How do I target Counter2 without having to move it to the main timeline?

Hi there,
Try this for the second textfield (assuming "Counter2" is nested in "Counter"):
sym.setVariable("checker", "0");
sym.getSymbol("Counter").$("Counter2").html(sym.getVariable("checker"));

Button inside a symbols

Similar Messages

Maybe you are looking for