Centering a symbol on a responsive stage

First, I am completly aware that many have posted about this...but after a good part of the day...I can not make it work...I am having some real dificulty in centering an object based on viewport.
I am surprised at how much of a challenge this has turned into
Very Simple proof of functionality...online here: http://www.mattabron.com/animate_test/
1. Isolated out simple functionality
2. Created a stage called 'test' @ 2600x470pxs (targeting HD monitors to tablet)
3. Set Stage to 100 percentage width
4. Added a simple shape called 'test1' > converted it to a symbol
5. Centered on stage
6. Changed Settings as per below
7. Added this into the creationComplete Code Window:
sym.$("test1").css({
   width : '2600px',
   margin : '0 auto',
   position: 'relative'
***THE RESULT: it is fine at 2600 viewport but for 1024 it does not center.
Here it is online: http://www.mattabron.com/animate_test/
THANKS FOR TAKING THE TIME TO HELP!

You may want to read this link on Forum.
http://forums.adobe.com/message/5218381#5218381
//In a simple project, this added to CompositionReady will center project on stage. (Forum mentions it doesn't work if you have a preloader)
$("#Stage").css("margin","auto")
Cindy

Similar Messages

How can I center a symbol on a responsive page created with adobe edge ?

Hi everybody !
I started working on Adobe Edge Animate for about 1 month now, it's a great tool for a young web designer like me.
Actualy, I'm working on my responsive personal website and I encountered some problems. When I create a new symbol and that I put this one on my main scene, I can't center it (there isn't all the option available for an image for exemple).
( Sorry for my broken english, I'm french )

I built a file with your issue or problem: demo file (attachment).
I found one solution: see pictures. Size and position of the container ("Group") are relatives (%).
Dans les posts antérieurs, je proposais: soit de mettre les ellipses et le rectangle dans un même conteneur, soit d'ajouter un super-conteneur.
Mais définir relativement le conteneur fait aussi l'affaire. Relatif=% et absolu=pixels.
Comme ils disent : "Voilà !". Bon réveillon du nouvel an.

Help, please! to stop animation of one symbol from anover or stage

I'm not a great specialist in jquery, but I've had to deal with it. And have some expirience... But i can't do an elementary thing in edge animate, i guess. So, help me please!))
I need to stop some child symbols from the timeline of parent symbol(or Stage). On the timeline of stage, i have trigger. At this moment all the child clips have to stop as one...
I try to insert into trigger this code:
(child clips names: 'stan', 'bizan', 'bak')
var stantostop = sym.$("stan");
stantostop.stop();
var bizantostop = sym.$("bizan");
stantostop.stop();
var baktostop = sym.$("bak");
stantostop.stop();
and I'm sure, I'm doing something wrong(!!!), cause nothing changes.
If you cant help, please advice me some source with a lot of examples of typical operations and commands like this! So thank you for reading!

Thank you very much for your answer. I,ve started three topics before i,ve got an answer!)
But I think I have some different problem
It is in the organization of my clips:
Stage->Ship_going->Ship_swinging->stan
Stage->Ship_going->Ship_swinging->bizan
Stage->Ship_going->Ship_swinging->bak
Stan(and overs) are the clips wich are looped, and thats why, I think they can,t stop.
(They are the flags of ship. And the problem is in that fact that when ship stop i want to stop all animation including the loop animation of flags, then I want to deleete all clips, but I cant delete this clips in the same way Icant stop them)
I can show the example of my clip for you(itis rather amusing)))) and i guess you shall understand what i'm talking about)))
Can I send you the zip with clip?
elainefinnell wrote:
Hi, Strashevsky-
You don't need to refer to the jQuery object if all you want to do is stop the timeline. You can simply do this:
sym.getSymbol("stan").stop();
OR
var stantostop = sym.getSymbol("stan");
stantostop.stop();
Hope this helps get you pointed in the right direction!
-Elaine

Centering Dynamically Drawn Progress Bar on Stage

Hi,
I am trying to add a progress bar linked to timer to countup 60 seconds (for an eLearning lesson). Found a good Progress Bar sample in AS3 (http://ammarz.org/stuff/TimedProgressBar.zip) and would like to adapt it to a larger stage (1024 X 768).
Since the project will be deployed as AIR on Android devices, would like to center the progress bar on the stage. Have tried many variations of
xyzprogressbar.x = stage.width/2-progressbar.width/2
xyzprogressbar.y = stage.height/2-progressbar.height/2
with no success.
The following based on the above sample AS3 hard codes the progress bar to center stage for a 1024 X 768 stage:
var dimentions:Rectangle = new Rectangle(362,374,300,20);
drawProgressBar(_drawingCanvas.graphics,dimentions,5,0,0x990000,0xFF9900,0x000000);
But this doesn't solve the problem of centering the progress bar for resized playback on different device screens.
Can someone take a look (adapted sample FLA: http://eLearningprojects.com/ProgressBar.zip), suggest a way to center the bar in AS3 (without hard coding the specific x=362,y=374 dimensions as above)?
Thank you very much for your help.
Regards,

Hi Ned,
Thanks. That worked.
Regards,

Refer symbols in childsymbol on stage

Hello,
I apologize for my English, it's not very good. I'm trying to refer to a symbol in a childsymbol for a day now, but I can get it work only once. I've searched the forum, but can't find the same problem.
At the stage in compositionReady (this code works fine the first time):
     // Scene tour eiffel
        sym.getComposition().getStage().getSymbol("scene_home").$('mc_btn_tour').click(function() {
            soundGroup.stop();
            tourEiffel.play();
        // show menu
        sym.$("menu2").show();
        sym.getComposition().getStage().getSymbol("scene_home").$('mc_btn_tour') (this path isn't working the second time; when it is a childsymbol. So the music in soundGroup is not stopping and the menu2 is not showing up.)
This is the onclick code of the symbol which replaces the second scene by the first scene. Works fine.
// Empty content container
sym.getComposition().getStage().$("content").empty();
var positieScene_home = sym.getComposition().getStage().createChildSymbol("scene_home", "content", 1);
// Set the position
positieScene_home.getSymbolElement().css("top", "0");
$('body').css("background", "#D9FBD3");
Scene_home is placed on the stage in an element called 'content'. The first time playing it, it isn't a childsymbol. Second time it is.
First time:
Second time:
Does anyone has a solution for this? Or do you need more information? Thank you!
I stil haven't got a preloader and only the Eiffeltower is clickable but here's a demo:
http://nieneke-elsjan.nl/parijs/
Start > Click on the Eifeltower > Click 'Back to overview' in the right menu > Click on the Eifeltower again.
As you can see, the menu and the music won't work when you click for the second time at the Eiffeltower.

Thanks for taking the time to respond Nipun. We've already been looking at this as a potential problem. Some of the symbols do indeed exhibit naming like that outlined in the post you have linked, but some do not and are still empty; e.g. symbols with simple naming that contain only simple shapes or groups and no other symbols. As stated above, all developers/designers are using CC now, so this has not been opened in CS6 for some time; long before this problem arose.

How to structure several scenes (in symbols) on the main stage timeline

Hi,
I'm new to edge animate but have a Flash background and I'm working in Edge Animate on a game which is structured in several scenes. Each scene I did put in a symbol. Now I wonder how to build the main timeline or the "story - controller" so to speak. I have all the scenes but I do not know how to connect them.
In Flash it was possible to add keyframes of scenes one after another (like stairs) and jump forward or backward if needed to load the movie clips. In Edge Animate all scenes (or symbols) are in place from the beginning of the timeline and I cannot move the symbol to a later keyframe. Of course I can move animations in the timeline. The only way I think is to hide the symbols first and make them visible if needed. But this does not seem to be the right way and I don't understand the concept of structuring complex animations yet.
I would like to know how to structure several scenes in Edge Animate properly. Something like a scene loader or unloader would be useful. Highly appriciate any hints to a solution.
Thank you,
JP

resdesign wrote:
You can also use edgecommons to load edge composition into another edge composition.
Thank you to your tipp so I try to organize my scenes into compositions. I can successfully load a composition (scene2) into the main container :
EC.loadComposition("scene2.html", sym.getSymbol("mainContainer"));
Now I'm facing another situation. At the end of the loaded composition scene2 is a "Next Scene" button suppose to load scene3.html composition into the main container. "Next Scene" is a nested button inside the loaded composition screen2 symbol. How do I load the next compostion from the current one? This code for On Click of course does not work:
EC.loadComposition("scene3.html", sym.getSymbol("mainContainer"));
I think the refer to the mainContainer is wrong. Is it just a targeting issue or is it the wrong approach in general?

How to structure several scenes (in symbols) on the main stage

I have this main scene with four buttons, each will call a different composition.
These compositions will be loaded with Edge Commons's composition Loader inside Symbols ( I call it content) created with createChildSymbols.
That works. But I seem to be missing the right size relationship in between the Symbols size and the compostions it will received. It seems somehow smaller.
The wrapper Main Composition adaptes itself to the size of the display. But the compostition loades does not adapt, or worst. It does... sometimes....
I just don't understand...
any help ?

resdesign wrote:
You can also use edgecommons to load edge composition into another edge composition.
Thank you to your tipp so I try to organize my scenes into compositions. I can successfully load a composition (scene2) into the main container :
EC.loadComposition("scene2.html", sym.getSymbol("mainContainer"));
Now I'm facing another situation. At the end of the loaded composition scene2 is a "Next Scene" button suppose to load scene3.html composition into the main container. "Next Scene" is a nested button inside the loaded composition screen2 symbol. How do I load the next compostion from the current one? This code for On Click of course does not work:
EC.loadComposition("scene3.html", sym.getSymbol("mainContainer"));
I think the refer to the mainContainer is wrong. Is it just a targeting issue or is it the wrong approach in general?

Target Stage and append iframe from inside symbol????

Having trouble again. I am SLOWLY getting use to the CC 2014 thing =).
Now I need to be able to target a Symbol on the stage from within an element inside a symbol and append it with an <iframe> and pass attributes to the iframe.
I have a file -- please refer to the videoui symbol and whitewater1.click and whiteawater2.click actions in that symbol (link below (Drop Box)
Here's what I have so far...
// insert code for mouse click here
// Go to a label or specific time and stop. For example:
// sym.stop(500); or sym.stop("myLabel");
sym.stop("videotwo");
// Change the text in an element
sym.$("video-text").html("Video by: TheNigglesbear");
var youtubevidtwo = $("<iframe/>");
sym.getComposition().getStage().getSymbol("vcontainer").append(youtubevidtwo);
youtubevidtwo.attr('type','text/html');
youtubevidtwo.attr('width','616');
youtubevidtwo.attr('height','347');
youtubevidtwo.attr('src','http://www.youtube.com/embed/eqzwoIQseyA?rel=0'); // url/Video_Id
youtubevidtwo.attr('frameborder','0');       // 1 | 0
youtubevidtwo.attr('allowfullscreen','0');   // 1 | 0
This same code -with different path to symbol of course- works fine on the stage document.compositionReady, but not sure how to target the videoui and append the iframe and its attributes to it from inside another symbol.
Help please -- there really needs to be more ADVANCED examples of possible methods of targeting. I find a lot about targeting symbols inside of symbols,or Stage to symbols, but not much on symbols to stage to another symbol also on the stage.
Thanks in advance.
Dropbox - videoPhotoUI.zip

dharmk
Thanks for the input. Just what I needed, I had to adjust my thinking, but got it to work because you took the time to look at my file and offer the help. Really appreciate it!! Here's how I made it work (for all three) video buttons:
var container = sym.getComposition().getStage().$("vcontainer");
container.find("iframe").remove();
var youtubevidtwo = sym.getComposition().getStage().$("<iframe/>");
sym.getComposition().getStage().$("vcontainer").append(youtubevidtwo);
youtubevidtwo.attr('type','text/html');
youtubevidtwo.attr('width','616');
youtubevidtwo.attr('height','347');
youtubevidtwo.attr('src','http://www.youtube.com/embed/eqzwoIQseyA?rel=0'); // url/Video_Id
youtubevidtwo.attr('frameborder','0');       // 1 | 0
youtubevidtwo.attr('allowfullscreen','0');   // 1 | 0

What is the proper syntax to hide a div on the stage from within two nested symbols?

Hi everyone, I have recently started to use Adobe Edge and had some prior experience with Flash.
I have a button with a click action inside two symbols that should hide a symbol placed on the stage, which in turn its is parent symbol.
I tried using the following code but it didn't work:
sym.$("Step1").hide();
Thank you!
Nuno

I've got a similar issue and I thought I'd piggyback on this thread since I can't get your suggestions to work.
Here's what I've got in my file -
stage / fullRadial symbol / smRadial symbol / gold_btn element
When you click gold_btn I want to hide a different symbol inside of fullRadial call measuringContent. This is the latest code I've tried within the gold_btn element -
On click:
sym.getComposition().getStage().getSymbol("fullRadial").play("Gold Corner");
sym.getComposition().getStage().getSymbol("fullRadial").getSymbol("measuringContent").hide ();
It plays my Gold Corner label just fine, but I've I can't get the hide to work with anything I've tried.
Thanks for any help you can give.

Access a nested symbol timeline from the main stage

Hi all,
Would love some help on accessing a nested symbol from the main stage please.
To set the scene.....
"Its an autumn day..
no sorry...just joking...
So i have a symbol called "NormalAnatomy" - its not on the main stage, but when a button is clicked it appears in the 'content' box which is just a rectangle on the main stage.
Inside "NormalAnatomy" symbol is another symbol called "Scrub_all" which is an animation
For users to view the animation they use a scrub bar like this lovely lady has invented:
Create Click and Touch Draggable Scrubbers with Edge Animate CC | sarahjustine.com
So for Sarah Justines scrubber to work - the main stage has a lot of actions added to it. Also the "timelinePlay" symbol is on the main stage
Its starts:
var symDur = sym.getSymbol("timelinePlay").getDuration();
var mySymbol = sym.getSymbol("timelinePlay");
var scrubber = sym.$("scrubber");
var bar = sym.$("bar");
sym.$("mobileHit").hide();
var dragme = false;
So I put my "NormalAnatomy" symbol on my main stage to see if the code would work and changed all the relevant details.. and indeed it worked!
var symDur = sym.getSymbol("NormalAnatomy").getSymbol("Scrub_all").getDuration();
var mySymbol = sym.getSymbol("NormalAnatomy").getSymbol("Scrub_all");
var scrubber = sym.getSymbol("NormalAnatomy").$("scrubber");
var bar = sym.getSymbol("NormalAnatomy").$("bar");
sym.getSymbol("NormalAnatomy").$("mobileHit").hide();
var dragme = false;
But i don't want the "NormalAnatomy" symbol to be on the main stage as I want it to appear in the 'content' box only when i hit a btn
So as soon as I took this symbol off the main stage, the scrubber doesn't work. So I click a btn, and the symbol appears in the content box but the scrubber doesn't work.
so I tried in front of the "NormalAnatomy"
getStage().
getStage("content").
getComposition().getStage().
getSymbol("content").
but nothing works
The main problem must be the fact that the NormalAnatomy symbol appears inside a content box so the MainStage actions doesn't know how to find it??
So my question is... what should I put in the main stage actions to make it access the "NormalAnatomy" symbol?
Thanks for your help in advance!

On click handler for the symbol use
sym.getComposition().getStage().getSymbol("nameofsymbol").play();
or
sym.getSymbol("nameofsymbol").play();
replace the italics with the literal name of the symbol as it appears in the Elements panel.
Some API details found here (http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html) in the Work With Symbols section.
Darrell

How to refer to a Label on the Stage from within a Symbol

Hi Edgefriends,
I'm working on a project in Edge Animate, however I have about zero experience with JavaScript and I can't seem to get this working without it so I hope someone can help me to get this done.
Below you see the code I need help with. It's part of a Symbol situated on the Stage. What I need it to do is to play from a Label ('subFontsTitels') situated on the Stage-level. I've tried a lot of posibilities but with no (satisfying) results. Could you please help me?
Part of the code:
Symbol.bindElementAction(compId, symbolName, "${_Button}", "click", function(sym, e) {
// play the timeline from the given position (ms or label)
sym.getComposition().getStage().sym.play('subFontsTitels');
// insert code for mouse click here
//Edge binding end

hmmm it doesn't seem to solve the problem yet. I'll paste the full code attached to the symbol, maybe there's a problem with the whole combination of the code:
Code
Symbol.bindElementAction(compId, symbolName, "${_Button}", "mouseover", function(sym, e) {
sym.stop("over");
//Edge binding end
Symbol.bindElementAction(compId, symbolName, "${_Button}", "mousedown", function(sym, e) {
sym.stop("down");
//Edge binding end
Symbol.bindElementAction(compId, symbolName, "${_Button}", "mouseup", function(sym, e) {
sym.stop("up");
//Edge binding end
Symbol.bindElementAction(compId, symbolName, "${_Button}", "mouseout", function(sym, e) {
sym.stop("normal");
//Edge binding end
Symbol.bindElementAction(compId, symbolName, "${_Button}", "click", function(sym, e) {
// play the timeline from the given position (ms or label)
sym.play("subFontsTitels");
//Edge binding end
The symbol's name is SubTekstTitels and it's located directly on the Stage. The label "subFontsTitels" is located on the Stage aswell. I hope this will help getting this done.

Control stage animation from buttons nested in a symbol

I have a symbol that is animated png SEQ of a rotating "cube". Added to the symbol I created "buttons" that are clear rectangles that define a "clicking area" . Each one corresponds to a side of the "cube". As the cube turns i turn these "buttons" on/off and track the corresponding cube face while it is facing the user. The symbol name is "CubeSpin" the button names in the symbol are Button1, Button2, etc to Button6.
What I want to be able to do is create click actions for these buttons from the main stage compositionReady which would - (1) stop() the play of "CubeSpin" symbol and (2) goto and play(label) on the main stage timeline. The animation at the head of play(label) on the main stage, among other things, slides symbol "CubeSpin" off the stage and out of view, then turns it off (display off). At the end of this animation, "CubeSpin" slides back on stage and I want to add a trigger code to start play() again for the "CubeSpin" symbol.
Thanks for any help here.
Joel H

Hi there!
Edge is a very flexible tool that allows you do very simple things (animate objects on the timeline), and very complex things (custom javascript coding in the code panel, using external code libraries, etc).
For specific Edge Animate questions, a good place to start is this forum- use the search function to find answers to your questions, or start a new thread if you can't find your answer here.
Also, be sure to read through the Edge API doc:
http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
If you are looking to dive deeper into javascript, here are a few good JS tutorials:
http://elegantcode.com/2010/10/22/basic-javascript-part-1-functions/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Getting_Started
http://eloquentjavascript.net/chapter1.html
If you have a javascript-specific question, http://stackoverflow.com/ is also a great resource.

Make subtle adjustments to simlar symbols on the stage

Let's say I create a symbol of a stick figure holding a shield.
Symbol 1: The Stick man
Symbol 2: The Shield
Symbol 3: the Stick man holding the shield.
Now, how would it be possible to place several copies of Symbol 3 on the stage while making subtle adjustments to EACH symbol 3 on the stage.
Is this possible?
Let's say I want to make each stickman slightly a different color without every single stickman taking on the same color.
Then I may want symbol 2 (the shield) to be a slightly different color in each of the stickman.
How could I go about making this subtle of an adjustment without effecting every instance of symbol 1 and 2 on the stage. Is this possible in flash??? It seems that flash has so much power, but I have yet to figure out how to use it all, and I sure hope something like this is possible.
If I need to explain what I mean, I sure will take the time to do this, but if someone could help me out here, that would be hugely appreciated.

If you give each symbol instance an instance name, then you can operate on any of the properties of each of those symbols. So, for instance, if you have one instance of symbol 3 on the stage, select it and, in the Properties window, give it an instance name of "figure1". If you then double click on this instance, you can open it in to edit its content. This symbol will contain two symbols. Select each one separately and name each, say "man" and "shield".
Now, every time you bring a copy of the figure from the Library to the stage, it will contain two named symbol instances. If you select this new instance on the stage and name it, you can then address the symbols inside separately from the symbols inside "figure1".
The options for changing the color of any given symbol are limited. One way to go about this is to edit the shield symbol, add a layer, and then add a new symbol that you can use for the color change.

Find number of symbols on Stage

Hi,
I'm trying to find out how many symbols with a certain naming convention are on the stage. The name of these symbols are incremented by 1, so for example I have symbols 'drag_1' & 'drag_2' currently on the stage and I want to return how many 'drag_ ' symbols are on the stage. This can change depending on how much of these symbols the user adds to the stage.
I've included some pseudo code below to help understand what im talking about!
for (var i = 0; i < 100; i++){
if(SYMBOL_ON_STAGE = 'drag_' + i){
number_of_symbols = number_of_symbols + 1
Thanks for any help!

You can use
var childSymbols = sym.getChildSymbols();
var num = 0
for(var i = 0;i<childSymbols.length;i++){
var reg = new RegExp(/Stage_drag_*/);
if(reg.test(childSymbols[i].getSymbolElementNode().id)){
num++;
alert(num);

Centering an animated symbol

I have read just about everything I can find on the subject of centering a symbol on a fluid layout and can find no solution that works for me.
http://www.avatarea.com/blocks/
will show you where I am at. The floating symbol which contains some 17 animated images and is 2445px wide needs to sit in the center under the banner.
I have used this code :
// center symbol horizontally
sym.$("blocks").css({
   width : '2445px',
   margin : '0 auto',
   position: 'relative'
recommended on an earlier post and it just doesnt do it.
any suggestions would be seriously helpful.

You know what, just a few moments ago I did the same as you. Simplified
it ala KISS
Made a simple symbol and slowly complicated it once it was centered. I
have no idea what was causing it to refuse to center but now, it does.
What I did notice was that there seems to be something squirrely about
the way symbols are named. For example in my library, a symbol is named
Symbol_2 but, in the time line its called Symbol_22. There seems to be a
hidden protocol that names symbols what the hell it likes I think I
must now always keep an eye on what the symbol is called within the
timeline and not refer to the symbol library. Probably an instance issue..
I really appreciate your taking the time to reply. As soon as I get this
page up in a close to finished test format Ill post again
once again, many thanks.

Centering a symbol on a responsive stage

Similar Messages

Maybe you are looking for