2 Replies Latest reply on Aug 15, 2009 6:15 PM by Gurflob

    Flash effect similar to Adidas

    terryoleary1981

      Hi all,

       

      I'm trying to figure out how to replicate an effect I've seen on the adidas site and another site. I'm not too sure what the effect is called or where to start looking for guidance on doing it myself so I thought i'd start here for some help or a point in the right direction. I think it might be called a mosaic but not sure.

       

      An example of what I'm trying to do is here http://www.adidas.com/uk/homepage.asphttp://www.adidas.com/uk/homepage.aspand here http://www.leftfield-digital.com/

       

      It basically takes some images, expands them on rollover to reveal some text also moving or covering surround images.

        • 1. Re: Flash effect similar to Adidas
          robdillon Most Valuable Participant

          While each of these examples operates slightly differently, the process is the same. Each of the images that expands is a movieclip. It is stopped on its first frame. When it is rolled over it plays to show the expansion of the content. When it is rolled off, it plays again to show the contraction and, most likely, loops back to the first frame. In order to have each rolled over clip play on top, the z order of the movie clip that is rolled over is changed to place it on top of the others. Exactly how this is accomplished will depend on the version of actionscript that is used.

          • 2. Re: Flash effect similar to Adidas
            Gurflob

            It would involve quite a bit of code but some tips to get you started: Enable 9-slice scaling on the rounded rectangles so that the rounded edges don't get distorted. They also use masking to transition in the pictures. You would also have to code it so that they push the other rectangles out of the way. Though im not sure how to do this exactly, you would have to set some variables for the width and height and when you roll over one of the rectangles, it expands that one and distributes the size difference among the others.