Flash / AS



ASP.net / PHP






  Design & Effects
  Audio & Video
  User Interface





Fading Grid
by Voetsjoeba

Creating some code for a forum member, I came up with this idea. It uses the Grid tutorial by Ilyas Usal. It can be used as effect on images, it can fade from left to right and from bottom to top, and it can even be used for preloaders. But how do you create it ? You're about to find out.

[ click the start button to see the effect ]

Steps to Create Animation
The following steps will help you to create the animation you see above:

  1. Create a new Flash document. Choose File | Import, and select the image you want to use. It will now appear on the stage.

  2. Resize the movieclip to your needs using the Info Panel (Window | Info) or the Transform Panel (Window | Transform).
Make sure both height and width can be divided by the same number. This number will be the width and the height of the box later, so if the width of the image can't be divided by the width of the box, the grid will be larger or smaller than the image. The sample swf above uses 304.7 x 221.6, which can both be divided by 27.7.
  1. Select the image, and choose Insert | Convert to Symbol or hit F8

  2. In the window that pops up, click the option Movie Clip, give it the name image and click the top left box from the square of boxes.


    [ set the movieclips registration poin to the top-left ]


  3. Click OK. Now, the image is a movieclip. Select the movieclip, and give it the instance name image (in the Properties Panel, on the left right under the dropdown box).

  4. The image is now ready. On to the next part: creating the box. Create a new layer and give it any name. Now, select the Rectangle Tool, set fill to white and lines to none, and create a box.

    [ create a white box on a new layer ]

  1. Select the box (if it is not visible on a white background, drag the selection box over the area where it was created) and open the Info Panel (Window | Info). Remember that number from the important notice in the beginning ? Here is where we use it. In the Info Panel, change the width and the height of the box to that number.

  2. Choose Insert | Convert to Symbol or hit F8 to convert the box to a movieclip. Click the option button, give it the name box and set the registration point to the top-left.

  3. Now give the brand new movieclip the instance name box, and we're finished with the box. On the next page, we set up the border and the ActionScript.

This tutorial continues on the next page with more instructions and information on creating the fading grid effect.


Next Page



kirupa.com's fast and reliable hosting provided by Media Temple.