3 Replies Latest reply on Feb 17, 2010 6:10 PM by Harry Kunz

    Random Image Grid AS2

    24Rachel

      Hey,

       

      I have a flash project in AS2, in which I need a grid of people's faces to be displayed.

       

      The grid needs to load in the faces (jpeg images) dynamically from an XML sheet into a 10x10 formation. Each face is 50x50 pixels.

       

      There may be more than 100 people (there are 114 at the moment and this may fall or rise, but there will always be a minimum of 100), so any faces not shown immediately must be displayed after around 15 seconds by fading into other faces. This effect will be like a swap.

       

      Each face will appear at 40% alpha, and fade up to 100% alpha when rolled over, and vice versa on roll out.

       

      When clicked, a smaller movie clip will appear on the right hand side of the grid, fading in the image at a larger size 150x150 pixels, with their name and job title above it.

       

      Please take a look at the attached image to see the layout for a better idea.

       

      Now the question is, is this possible in AS2, and how difficult? I don't mean to ask for somebody to actually just do this for me, I just need some helping guidance on this please.

       

      Thankyou!

       

      Rachel

        • 1. Re: Random Image Grid AS2
          Harry Kunz Level 4

          Yes it is possible and it should be pretty simple task with AS2 so you don't need to worry about getting started. You will need two sizes for each image, a thumbnail (10x10) and the larger image (150x150). Thumbnails will be used for for faster loading of the grid and the larger image will be loaded upon clicking of an image. For the roll over and press/release handlers of each image, you can use the onPress, onRelease, onRollOver, onRollOut events of the movieclip class (which will contain one image each). For the fading animation you can use the Tween class just google how to use. The 15 minute-time out can be done with the setTimeout function. Time value input parameter is in milliseconds 15s = 15000ms. Then to load the XML data you will use the native XML class that AS2 provides.

           

          For loading images, you can use the MovieClipLoader class. Flash's help files have complete documentation about the different classes and can provide most of the information you will need for this project. If you want to load the images in a particular sequence, it would be best you create a Image queue loader, or you can search online for examples.

          1 person found this helpful
          • 2. Re: Random Image Grid AS2
            24Rachel Level 1

            Thanks Harry that's a great response. I'll get started and come back with questions (no doubt!)

            Thankyou

            • 3. Re: Random Image Grid AS2
              Harry Kunz Level 4

              Sure no problem.