10 Replies Latest reply on Mar 29, 2013 2:10 AM by RalphDCW

    Responsive scaling of animation in Edge Animate


      I am inserting an animation into a responsive web page. I have gotten the design to scale in either direction (horizontally and vertically) in both Animate and a browser but cannot get the animation to scale in both height and width when the browser window size is just narrowed or the page is served up to a mobile device (tablet or phone.) I created a simple test comparison at this link: http://www.users.cloud9.net/~agoltz/edgeTest/animateTest.html  I've embedded the CSS styles in the document so they can be evaluated (be kind...I'm an amateur)


      If the browser window is narrowed the animation just gets narrower but doesn't scale vertically. The static image scales in both directions as the width of the window or device narrows. I'm looking for the same behavior with the animation. I hope I'm just missing something (not an unusual occurance) and not that this is a limitation of Animate since Flash is no longer a universal option. Any thoughts?  Thanks.

        • 1. Re: Responsive scaling of animation in Edge Animate
          RalphDCW Level 1

          Hi agoltz47


          Just wondered if you've ever found a solution?


          Can't believe no-one from Adobe has replied to your post.


          I see that Adobe have now a Responsive tutorial for Edge Animate - but unless they can find a way to get Edge Animate files to scale in responsive web pages - then I can't see Edge Animate having much of a future!

          • 2. Re: Responsive scaling of animation in Edge Animate
            agoltz47 Level 1



            Not a single response (other than yours.) Fortunately, most of the original Flash content on the site was "eye candy", er, I mean graphic message enhancement, so I replaced what I could with animated gif and dropped the rest for now. I continue to experiment with ways to fool html5 and CSS to cooperate but so far no luck. If I get it I'll post a response to myself so other searchers can benefit.


            I agree that it is a severe limitation for responsive design but I take solace in being a pioneer and am sure Adobe will catch up...someday. Not so surprised that I didn't get the "um, you can't" response. Bad for the image.


            Thanks for reaching out. At least I know the post is live.


            • 3. Re: Responsive scaling of animation in Edge Animate
              RalphDCW Level 1

              Thanks for getting back to me.


              Sorry you've had no luck.


              I've just started a discussion called:


              Are Adobe EVER going to make Edge Animate scale-to-fit (like Flash)?


              If I get any answers I'll let you know



              • 4. Re: Responsive scaling of animation in Edge Animate
                agoltz47 Level 1

                Excellent! Hope it gets some action.

                • 5. Re: Responsive scaling of animation in Edge Animate
                  agoltz47 Level 1

                  Just one further thought as you embark on this issue...


                  As Edge is really just a front end on HTML5 and CSS, as I got deeper into it I began to get the sense that the limitation is there more so than with Edge. I am an EXTREME amateur in web development, primarily revising my corporate site every couple of years to keep up with evolution and the infighting of the gods (iOS & Flash, devices, etc.) so my perspective is equally limited. Just seems like a half step backward to overlook animated graphics in the pursuit of accommodating device and OS proliferation.


                  We'll see...

                  • 6. Re: Responsive scaling of animation in Edge Animate
                    RalphDCW Level 1

                    Personally, I'd say Edge Animate is about ten steps behind Flash!


                    I know its not Adobe's fault. They were caught on the hop when Steve Jobs did what he did. It's just so frustrating to be waiting for Edge Animate to catch up to where Flash was ten years ago!


                    Like you, I'd regard myself as an extreme amateur in web development. I'm a graphic designer - not a programmer. Give me a package like Flash and I'll get my head around it and create some (in my humble opinion) nice sites. But I'm hopeless without a decent programme. I envy the programmers who can delve into HTML5 and CSS, etc, etc and create web sites without the need for a user friendly programme like Flash.


                    Just one other thing. On the subject of whether the problem is HTML5, CSS or Edge Animate: I'm absolutely no expert but I don't think the problem is inherent to HTML5 and CSS because Canvas is also HTML5/CSS and there are people claiming scale-to-fit solutions with Canvas. Here is an example:



                    • 7. Re: Responsive scaling of animation in Edge Animate
                      agoltz47 Level 1

                      Totally agree re: Flash compared to Animate level of finish. It did take some time for Flash to get where it was but one other difference...Flash was a platform (hence Jobs' ease in locking out of iOS) vs. Edge, which generates html and CSS.


                      But even more importantly...THANKS for the lead on Canvas. As a software junkie I've been messing with Canvas since v3 and am up to date on updates. I'll be pursuing that avenue with great interest.

                      • 8. Re: Responsive scaling of animation in Edge Animate
                        agoltz47 Level 1

                        Oh. Now I see. The "canvas" tag and JavaScript, not Canvas the graphics program. Still worth looking into, thanks.

                        • 9. Re: Responsive scaling of animation in Edge Animate

                          I'm working hard to scale images and text too with a responsive page and is hard honestly. There isn't a feature that scales everything proportionally. One is made with amazium and the other with bootstrap. Maybe helps you checking it out.





                          • 10. Re: Responsive scaling of animation in Edge Animate
                            RalphDCW Level 1

                            Hi Rodlab2x


                            Thank you for sharing your tests. Interesting to see comparison between Amazium and Bootstrap. Which is which by the way?


                            I'm impressed, particularly with the first one (http://www.lab2x.com/pacificdental/) because it almost appears to be scale-to-fit in places. In fact, for a moment, you had me fooled and I thought you'd solved it!


                            I think you've come up with probably the best possible solution at the moment.


                            Let me just check that I've understood your site correctly?:


                            You have 3 versions of the header panel that the site swaps to as the browser size is reduced:


                            1. The large one. This is an Edge Animate animation and uses all the feature in the 'Resize' lesson - ie. it scales horizontally but the height remains the same.

                            2. The middle one. This is a smaller Edge Animate animation with the same features as above.

                            3. The small one. (This is the one that fooled me for a moment!). This may be Edge Animate - BUT it's not an animation at all. It is a still image - and therefore able to scale proportionately


                            Just a suggestion - you could go further and add some animation to the smallest header. If you only use images, not graphics, then you can achieve scaleable animation. Just try making the graphics png files with transparency. Might help if each layer png is the same width and height as the background image. Only issue is - I don't know if the file size will be prohibitively big.