8 Replies Latest reply on Jul 28, 2016 5:36 AM by johnb28283767

    Edge Animate with CMS

    johnb28283767

      I'm working in a CMS and I'm trying to get my Edge Animate animation to display within a single page of a microsite.

      The problem is that I don't have access to the head of the site, so where am I supposed to copy and past the <!--Adobe Edge Runtime--> ... <!--Adobe Edge Runtime--> code that Edge generates for me? Is there a way around having to paste this into the head section?

        • 1. Re: Edge Animate with CMS
          ddhayles Level 3

          You try adding you code into an iframe, are you able to upload and host your files?

          • 2. Re: Edge Animate with CMS
            johnb28283767 Level 1

            Thanks ddhayles,  I didn't really want to add to an inframe but I thought I'd give it a try and see how it looks. I've managed to get most of the animation to display on the web page within an iframe,  but none of the images are showing. Only the text and shapes created in Edge.

            I've opened the edge.js file and changed the path for the assets to point to the folder containing my assets on the server,  but still no images showing

            • 3. Re: Edge Animate with CMS
              ddhayles Level 3

              If you can post a link to the site I can try and see where the problem may be?

              • 4. Re: Edge Animate with CMS
                johnb28283767 Level 1

                Thanks, my images now seem to be showing, maybe the server just took a while to update my edited js files.

                Now I have a new problem, I will have several layers in my animation each containing a simple flyout animation when the mouse is hovered over an icon. As you can see from the screenshot the layers below will display the graphics behind the layers above.

                is there an easy way to bring a layer to the top automatically when the user hovers? (my coding/scripting knowledge is very limited)

                 

                Bottom layer showing beneath top layer when hovered

                image_1.jpg

                Top layer obviously look ok when hovered

                image_2.jpg

                • 5. Re: Edge Animate with CMS
                  ddhayles Level 3

                  Glad to here you got the images working.

                   

                  The first obvious solution with the new problem would be to make sure that all your Text popup elements are above all other content on the timeline, however I suspect that you may have included the popups within symbols so they will always stay on the layer of each element. Is that what is going on?

                   

                  A simple way to change to the layers dynamically would be to adjust the z-index of each symbol on hover so that they always appear in the foreground.

                   

                  try something like:

                  sym.$("mySymbolName").css({"z-index":100});

                  • 6. Re: Edge Animate with CMS
                    johnb28283767 Level 1

                    Thanks for the quick reply ddhayles,

                     

                    Yeah I have the text pop ups included with the circle symbols as the text box is animated and slides out from behind the symbol.

                    I tried adding sym.$("academic_writing_trigger").css({"z-index":100}); to the mouseover of my hit area but it doesn't seem to work :-/

                    • 7. Re: Edge Animate with CMS
                      ddhayles Level 3

                      It will be a targeting issue, where is your code for the mouseover action, in or outside of the symbol, you probably need to target the parent symbol rather than it's child.

                       

                      I can take a look at your code if you want to send me your project.

                      • 8. Re: Edge Animate with CMS
                        johnb28283767 Level 1

                        Thanks ddhayles, I really appreciate it

                        I'll message you with a link to my project files