1 Reply Latest reply on Jan 22, 2013 12:37 PM by Jared_DA

    How can I use my Html/CSS Navigation bar to control an Edge Stage?

    Jared_DA

      I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage. 

       

      Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.

      The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:

      sym.play("home");
      

      and animate a 6000px width symbol across my 1000px stage in 1000px increments.

       

      I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.

       

      So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.

       

      currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?

       

      Many thanks to anyone who can help with this!

       

      Here is the code for the navbar:

       

      <div id="menu"><ul class="block-menu">
                          <li><a href="/home" class="three-d">
                                    Dynamic
                                    <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                          </a></li>
                          <li><a href="/demos" class="three-d">
                                    Work
                                    <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                          </a></li>
                          <li><a href="/deals" class="three-d">
                                    Blog
                                    <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                          </a></li>
                          <li><a href="/about" class="three-d">
                                    Profile
                                    <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                          </a></li>
              <li><a href="/about" class="three-d">
                                    Contact
                                    <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                          </a></li>
                </ul>
      <span class="block-menu"></span></div>
      
      

       

       

       

       

      Full 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>Untitled</title>
      <!--Adobe Edge Runtime-->
          <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
          <style>
              .edgeLoad-EDGE-57204389 { visibility:hidden; }
                    .block-menu {
                                    display: block;
                                    background: #000;
                          }
      
      
                          .block-menu li {
                                    display: inline-block;
                          }
      
      
                          .block-menu li a {
                                    color: #fff;
                                    display: block;
                                    text-decoration: none;
                                    font-family: 'Passion One',Arial,sans-serif;
                                    -webkit-font-smoothing: antialiased;
                                    -moz-font-smoothing: antialiased;
                                    font-smoothing: antialiased;
                                    text-transform: uppercase;
                                    overflow: visible;
                                    line-height: 20px;
                                    font-size: 24px;
                                    padding: 15px 10px;
                          }
      
      
                          /* animation domination */
                          .three-d {
                                    -webkit-perspective: 200px;
                                    -moz-perspective: 200px;
                                    perspective: 200px;
                                    -webkit-transition: all .07s linear;
                                    -moz-transition: all .07s linear;
                                    transition: all .07s linear;
                                    position: relative;
                          }
      
      
                                    .three-d:not(.active):hover {
                                              cursor: pointer;
                                    }
      
      
                                    .three-d:not(.active):hover .three-d-box, 
                                    .three-d:not(.active):focus .three-d-box {
                                              -moz-transform: translateZ(-25px) rotateX(90deg);
                                              -webkit-transform: translateZ(-25px) rotateX(90deg);
                                              -o-transform: translateZ(-25px) rotateX(90deg);
                                              transform: translateZ(-25px) rotateX(90deg);
                                    }
      
      
                          .three-d-box {
                                    -webkit-transition: all .3s ease-out;
                                    -moz-transition: all .3s ease-out;
                                    -ms-transition: all .3s ease-out;
                                    -o-transition: all .3s ease-out;
                                    transition: all .3s ease-out;
                                    -webkit-transform: translatez(-25px);
                                    -moz-transform: translatez(-25px);
                                    -o-transform: translatez(-25px);
                                    transform: translatez(-25px);
                                    -webkit-transform-style: preserve-3d;
                                    -moz-transform-style: preserve-3d;
                                    -ms-transform-style: preserve-3d;
                                    -o-transform-style: preserve-3d;
                                    transform-style: preserve-3d;
                                    pointer-events: none;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                          }
      
      
                          .front {
                                    -webkit-transform: rotatex(0deg) translatez(25px);
                                    -moz-transform: rotatex(0deg) translatez(25px);
                                    -o-transform: rotatex(0deg) translatez(25px);
                                    transform: rotatex(0deg) translatez(25px);
                          }
      
      
                          .back {
                                    -webkit-transform: rotatex(-90deg) translatez(25px);
                                    -moz-transform: rotatex(-90deg) translatez(25px);
                                    -o-transform: rotatex(-90deg) translatez(25px);
                                    transform: rotatex(-90deg) translatez(25px);
                                    color: #FFE7C4;
                          }
      
      
                          .front, .back {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    background: black;
                                    padding: 15px 10px;
                                    color: white;
                                    pointer-events: none;
                                    -moz-box-sizing: border-box;
                                    box-sizing: border-box;
                          }
      
      
          </style>
      <!--Adobe Edge Runtime End-->
      
      
      </head>
      <body>
      <div id="menu"><ul class="block-menu">
                          <li><a href="/home" class="three-d">
                                    Dynamic
                                    <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                          </a></li>
                          <li><a href="/demos" class="three-d">
                                    Work
                                    <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                          </a></li>
                          <li><a href="/deals" class="three-d">
                                    Blog
                                    <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                          </a></li>
                          <li><a href="/about" class="three-d">
                                    Profile
                                    <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                          </a></li>
              <li><a href="/about" class="three-d">
                                    Contact
                                    <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                          </a></li>
                </ul>
      <span class="block-menu"></span></div>
      <div  id="Stage" class="EDGE-57204389">
      </div>
      
      
      </body>
      </html>
      
      
        • 1. Re: How can I use my Html/CSS Navigation bar to control an Edge Stage?
          Jared_DA Level 1

          I've come across this from the Edge API:

          Edge.getComposition(compId)
          

           

          Anyone having trouble with this same issue should try this:

           

          var targetComp = AdobeEdge.getComposition('TARGETCOMPID');

             targetComp.getStage().play();

           

          in their trigger or event handler.

           

          How I got it to work:

           

          <li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
             targetComp.getStage().play();" class="three-d">
                                        Dynamic
                                        <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                              </a></li>