5 Replies Latest reply on Nov 21, 2013 4:08 AM by DDcreams

    Masking a circular animation in Edge Animate?

    bludgeonsbest Level 1

      I am new to Edge Animate and I need to create a mask that will hide the elements as they rotate out of a free-floating window. I have an animation currently that sits in a circular window and plays when the page loads. The screen shot below is from the page in Muse with the .oam file playing. The images are PNGs with transparent backgrounds so the animation plays over the background images. 

      Screen Shot 2013-11-18 at 11.01.30 PM.png

      What I'm trying to add is an iris effect I've animated in Edge Animate. I haven't been able to hide the edges of the vanes in the iris during animation. I've tried to cut and paste code that I've found on this forum and others but I don't know much about coding and I haven't had any success. This screenshot is shortly after the animation starts to play as the vanes rotate out of the window:

      Screen Shot 2013-11-18 at 11.15.20 PM.png

      Basically, I need to mask the iris animation to keep the images from showing outside the circular frame. I've found that the clipping tool in Edge only does square or rectangular masks. I have a PNG that I can use as a mask but the coding has really got me flummoxed. The mask:



      If anyone has a (simple) way to insert the code I need or a workaround, I'd greatly appreciate it. Thanks.

        • 1. Re: Masking a circular animation in Edge Animate?
          DDcreams Level 1

          "So the animation plays over the background images " flip your logic


          Well I've done this before a number of times in a number of languages, this isn't a code issue... atleast as far as I can tell from what you explained, what I would do is this. This is really basic stuff is video games...




          *the Above blue area is made 100% transparent

          *make "1 symbol placed behind it" ( shown in pink ) in edge

          ( you center that symbol perfectly and lock it, use pixels or % but make sure you get that part right..., "test it in browsers and resize to see if it stays put" )


          *Then just load all your images into that symbol

          And then just keyframe Rotate the spiral effect and whatever else you wanted to do, this isn't a code thing unless you have got bigger plans...


          Keep in mind I don't use Muse but I do understand it takes the learning out of alot of things, so if I for whatever reason didn't understand you correctly, please elaborate

          1 person found this helpful
          • 2. Re: Masking a circular animation in Edge Animate?
            bludgeonsbest Level 1

            Thanks, I was able to knockout the background in Muse and drop the Edge Animate file behind that so that I could put other images above the background layer. The animation plays smoothly and the vanes are hidden as they rotate. Now all I have to do is figure out how to add the play and pause button back to the top layer.


            I agree that Muse and Animate take the learning out of things but that's kinda what I like about it. I'm not looking to be a developer or writing my own code so these programs hit the spot and unlike Flash and Dreamweaver are a lot more intuitive. I used Freeway before and the plugins and widgets available were nice but

            for a non-tech person Muse is much easier.


            I've seen other questions about masking on these forums so I'm hoping that freeform masking will be in an upcoming EA release.

            • 3. Re: Masking a circular animation in Edge Animate?
              DDcreams Level 1

              I have nothing against people using dreamweaver and muse, they are great tools for alot of people, just not me


              Edge is a different matter entirely, it doesn't take away the learning "if" you want, so I can be lazy and efficient as needed, now your cooking with gas..


              I would suggest making a alternate version of your site entirely in edge, I cannot see all that you have going on but understand if you have the .psd for that background you could animate it all!


              There are multiple methods to input external html, php or whatever into edge... externally for updating purposes.


              Id love to see a link of the site if you would care to share..


              Yea masking would be a great feature no doubt!

              • 4. Re: Masking a circular animation in Edge Animate?
                bludgeonsbest Level 1

                I actually have a number of animated GIFs in the background. I considered doing the whole thing in Flash or Edge Animate but the issue of compatibility with older browser and with flash blockers and iphones made me decide to wait. The lightbulbs illuminate with a flash animation but I'll probably replace that with Edge. This isn't live yet--it's a redo of my old site. I'm redoing the navigation and making a more pared down "enter" page to cut the loading time. I'll be glad to send you a link when this goes live.

                • 5. Re: Masking a circular animation in Edge Animate?
                  DDcreams Level 1

                  Very cool, i dig the Intricacies of the design, Goodluck in your efforts!