14 Replies Latest reply on Jul 28, 2013 11:04 AM by knoblauch97

    Position of Stage in HTML document

    knoblauch97

      Hi, today, I've started with Adobe Edge Animate.

      Now, I've my first question:

       

      I include the Adobe Edge animation like this in my html document:

       

      <!DOCTYPE html>

      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

      <title>Unbenannt</title>

      <!--Adobe Edge Runtime-->

          <script type="text/javascript" charset="utf-8" src="index-1_edgePreload.js"></script>

          <style>

              .edgeLoad-EDGE-5136256 { visibility:hidden; }

          </style>

      <!--Adobe Edge Runtime End-->

       

      </head>

       

      <body style="margin:0;padding:0;">

      <div id="Stage" class="EDGE-5136256">

      </div>

      </body>

       

      </html>

       

      The stage is 500 x 250 pixel and the position should be x=130 and y=150.

       

      But the animation is left on the top, how can I set the position?

       

      Thanks,

      Jan K.

        • 1. Re: Position of Stage in HTML document
          robboerman Level 4

          put this in the actions of stage > composionready

           

          sym.$("Stage").css({ "top" : 150, "left" : 130 });

           

          hope that is the solution to your qeustion

          • 2. Re: Position of Stage in HTML document
            knoblauch97 Level 1

            Thanks a lot.

             

            It works fine when I open the html file which was generated by Adobe Edge.

            But in my included html file, it's still on it's old position.

            • 3. Re: Position of Stage in HTML document
              robboerman Level 4

              link a style css file than to the html file

               

                   <link href="style.css" rel="stylesheet" type="text/css">

               

              and put this css code in it.

              #Stage {

              top:150px;

              left:130px;

              }

              • 4. Re: Position of Stage in HTML document
                knoblauch97 Level 1

                No, sorry, it doesn't work.

                Here I have a picture to show what I want to do:

                 

                123.PNG

                • 5. Re: Position of Stage in HTML document
                  SEIF BH Level 2

                  explain more plz , and talk french if you do

                  • 6. Re: Position of Stage in HTML document
                    knoblauch97 Level 1

                    Sorry, I'm from Germany and can't speak french.

                     

                    I want to make it like this (I found this website, it's just a example but I know that they have used the same software that I want to use (MAGIX Web Designer 6 and Adobe Edge).

                     

                    http://www.heimpel-jordan-ckv.de/

                     

                    We have a website created with MAGIX Web Designer 6 and included a Adobe Edge animation.

                     

                    My problem is the position of the animation. When I include my animation into the MAGIX html file, the animation is like in the picture on top and left.

                     

                    Could you understand?

                    • 7. Re: Position of Stage in HTML document
                      robboerman Level 4

                      haha Seif-bh, we dont talk french in the rest of the world

                       

                      i never used magix webdesigner before so i dont really know how that program converts its code to html.

                      but probably its something wrong with the html, can you maby show the page so we can see why its get placed on the top left and how to prevent that from happening?

                      • 8. Re: Position of Stage in HTML document
                        knoblauch97 Level 1


                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                        <html xmlns="http://www.w3.org/1999/xhtml">

                        <head>

                        <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>

                        <title>index</title>

                        <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>

                        <meta name="Generator" content="Xara HTML filter v.3.1.1.387"/>

                        <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>

                        <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>

                        <script type="text/javascript" src="index_htm_files/roe.js"></script>

                        </head>

                        <body style="background-color: #FF7373">

                        <div class="xr_ap" id="xr_xr" style="width: 760px; height: 576px; top:0px; left:50%; margin-left: -380px;">

                        <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>

                        <!--[if IE]><div class="xr_ap" id="xr_xri" style="width: 760px; height: 576px; clip: rect(0px 760px 576px 0px);"><![endif]-->

                        <!--[if !IE]>--><div class="xr_ap" id="xr_xri" style="width: 760px; height: 576px; clip: rect(0px, 760px, 576px, 0px);"><!--<![endif]-->

                        <img class="xr_ap" src="index_htm_files/1.png" alt="" title="" style="left: 130px; top: -1px; width: 500px; height: 401px;"/>

                        <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">

                        <a href="" onclick="return(false);">

                        </a>

                        </div>

                        <div id="xr_xd0"></div>

                        </div>

                        </div>

                        <!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->

                        <script type="text/javascript">xr_aeh()</script>

                        </body>

                        </html>

                         

                         

                         

                        <!DOCTYPE html>

                         

                        <html>

                         

                        <head>

                         

                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                         

                        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                         

                        <title>Unbenannt</title>

                         

                        <!--Adobe Edge Runtime-->

                         

                            <script type="text/javascript" charset="utf-8" src="index-1_edgePreload.js"></script>

                         

                            <style>

                         

                                .edgeLoad-EDGE-5136256 { visibility:hidden; }

                         

                            </style>

                         

                        <!--Adobe Edge Runtime End-->

                         

                        </head>

                         

                        <body style="margin:0;padding:0;">

                         

                        <div id="Stage" class="EDGE-5136256">

                         

                        </div>

                         

                        </body>

                         

                        </html>

                         

                         

                        ------------------------------

                        That is the MAGIX Web Designer website with the Adobe Edge code below.

                         

                        • 9. Re: Position of Stage in HTML document
                          knoblauch97 Level 1

                          I set this in the Adobe Edge: sym.$("Stage").css({ "top" : 150, "left" : 130 });

                          • 10. Re: Position of Stage in HTML document
                            robboerman Level 4

                            wow that is one messy code

                             

                            try to place instead of that code.

                            this code

                             

                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                            <html xmlns="http://www.w3.org/1999/xhtml">

                            <head>

                            <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>

                            <title>index</title>

                            <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>

                            <meta name="Generator" content="Xara HTML filter v.3.1.1.387"/>

                            <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>

                            <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>

                            <script type="text/javascript" charset="utf-8" src="index-1_edgePreload.js"></script>

                            <script type="text/javascript" src="index_htm_files/roe.js"></script>

                               <style>

                             

                                    .edgeLoad-EDGE-5136256 { visibility:hidden; }

                             

                                </style>

                            </head>

                             

                            <body style="background-color: #FF7373">

                            <div class="xr_ap" id="xr_xr" style="width: 760px; height: 576px; top:0px; left:50%; margin-left: -380px;">

                            <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>

                            <!--[if IE]><div class="xr_ap" id="xr_xri" style="width: 760px; height: 576px; clip: rect(0px 760px 576px 0px);"><![endif]-->

                            <!--[if !IE]>--><div class="xr_ap" id="xr_xri" style="width: 760px; height: 576px; clip: rect(0px, 760px, 576px, 0px);"><!--<![endif]-->

                            <img class="xr_ap" src="index_htm_files/1.png" alt="" title="" style="left: 130px; top: -1px; width: 500px; height: 401px;"/>

                            <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">

                            <a href="" onclick="return(false);">

                            </a>

                            <div id="Stage" class="EDGE-5136256">

                            </div>

                            <div id="xr_xd0"></div>

                            </div>

                            </div>

                            <!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->

                            <script type="text/javascript">xr_aeh()</script>

                            </body>

                            </html>

                             

                            if that doesn't work you have to place it trough iframe option

                            • 11. Re: Position of Stage in HTML document
                              resdesign Adobe Community Professional & MVP

                              Actually, Rob, a few of us speak French! I did live in Germany for a while but I do not speak German (shame on me!)

                               

                              But since this forum is English, it is probably better to stick to English when possible. I suppose Adobe has other Edge forums with other languages!?

                              • 12. Re: Position of Stage in HTML document
                                knoblauch97 Level 1

                                It doesn't work. It's very frustrating.

                                • 13. Re: Position of Stage in HTML document
                                  heathrowe Most Valuable Participant

                                  knoblauch97 what is the relatonship between the two html files?

                                   

                                  Can you post a zip file of the entire project so someone can better troubleshoot the issue.

                                   

                                  Darrell

                                   

                                   

                                  • 14. Re: Position of Stage in HTML document
                                    knoblauch97 Level 1

                                    I could solve the problem!!!!

                                     

                                    First of all, you have to center the animation:

                                     

                                    sym.$("Stage").css({"margin-left":"auto","margin-right":"auto"});

                                     

                                    Then, you have to set as background color of the stage transparent!

                                     

                                    After that, you have to make the stage higher (you add the spacing to the top to the height and move all elements down..)

                                     

                                    If you want to have a spacing to the left, you can make the width bigger and move all elements right.

                                     

                                    And now it's on the right position.

                                     

                                    But all in all, thanks a lot for your help!!