9 Replies Latest reply on Aug 12, 2014 9:50 AM by ambermoonchild1

    Edge Animate Z Axis

    ambermoonchild1

      I'm trying to make a pop-up book web site with Edge Animate using pop-up pictures like you would see in a children's book. I need to rotate on the z axis to make the pictures pop up, but I only have options to transform the x and y axis. I can make this animation easily in After Effects, but unfortunately, AE doesn't allow for the interactivity that I'm seeking. At this point, I'm thinking that I'm going to have to do half of it in AE and half in AN. This is going to be frustrating. Any suggestions?

        • 1. Re: Edge Animate Z Axis
          resdesign Adobe Community Professional & MVP

          Could you give us a sample of what you want - like a site even if it is Flash? It is hard to understand what you exactly want without an example. If you want a flip page there are  plugins that work in edge animate.

          • 2. Re: Edge Animate Z Axis
            ambermoonchild1 Level 1

            Hi resdesign! I've read your comments here before. They were very helpful. Thanks!

             

            The video is a (poor) example of what I want the hills and text to do. -Not the text already present. I'm going to change that, but I'm going to add text to link to the rest of my pages. I would be interested in learning more about the flip page plugin. Is that something you have to buy? And also, thank you so much for your quick response!

             

            • 3. Re: Edge Animate Z Axis
              resdesign Adobe Community Professional & MVP

              Sorry, I am not sure that I understand. Anyway, you can use css to change the z-index of layers when needed. You can also give class names to your layers so it is easier to manipulate them.

               

              As far as flippage.js, here is an example:

              flippage edge samples.zip - Box

              1 person found this helpful
              • 4. Re: Edge Animate Z Axis
                resdesign Adobe Community Professional & MVP

                Flippage is free to use.

                • 5. Re: Edge Animate Z Axis
                  ambermoonchild1 Level 1

                  I know that there is css in dreamweaver, but I was not aware that it was in Edge Animate. I really do appreciate all of your help. Thank you for taking time out of your day to reply

                  • 6. Re: Edge Animate Z Axis
                    ambermoonchild1 Level 1

                    Actually, now that I think about it, I'm wondering if you know a good forum for starters like me. I have way too many questions for you. My skill-set consists of Illustrator, Photoshop, Premiere and After Effects, so I'm a noob at web stuff. I understand the premise, but the implementation of that premise still baffles me. With my current understanding of the web half of CC, I think that I want to stick with AN and MU - and DW when I have to. If you are able to point me in the right direction, I would be so grateful. Again, thank you for your wisdom!

                    • 7. Re: Edge Animate Z Axis
                      resdesign Adobe Community Professional & MVP

                      As far as I can tell, you could create and delete symbols from the timeline on click events like next page, previous page etc... When you create symbols on the stage dynamically, they are placed at (0.0) axis. You will need to move them with css left and top properties. Another idea is to create your symbols into a container that is located at the axis your need.

                       

                      If your elements or symbols are on the same timeline, you can use css on any element or symbol  to change it's z-index as shown below:

                       

                      sym.$('elementORsymbolName").css({"z-index":"10"});  

                       

                      In this example your element or symbol will be moved above the 9 first layers of your composition.

                       

                      Using class names to have many elements do the same thing or have the same properties

                      Let's say that you have 10 symbols that you want to do the same thing, you could give them a class name.

                       

                      Click on the class icon:

                      classe.png

                      Enter the class name of your choice

                      12-3-2012 1-51-15 PM.png

                      When you mouse over the 'C', you will see the class name.

                      yellowGlod.png

                       

                      Then use the class name instead of the element's name for example as in the example above any text field that has the yellowGlow class with take the css below. Make sure you add a dot before the class name inside the quotation marks.

                      sym.$(".yellowGlow").css("box-shadow","0 0 5px #fcff00, 0 0 10px #fcff00, 0 0 20px #fcff00, 0 0 30px #ffd200, 0 0 40px #ffd200, 0 0 50px #ffd200, 0 0 60px #ff7800, 0 0 70px #ff7800");

                      • 8. Re: Edge Animate Z Axis
                        resdesign Adobe Community Professional & MVP

                        You can check out my tutorials at edgehero.com

                        • 9. Re: Edge Animate Z Axis
                          ambermoonchild1 Level 1

                          Thank you! You're my edgeHERO!