Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
From the author of

Generating the Mixer Interface

Having defined the parameters of the grid, you can now build it. For this, you need to attach instances of the boxMC movie clip from the Library, position them, and align them on the Stage. To do this, you need to assign a Linkage ID to the boxMC movie clip so that you can refer to it through ActionScript.

  1. Open the movie Library (Ctrl/Cmd+L).

  2. Select the boxMC movie clip. Right-click/Ctrl-click and select the Linkage option.

  3. In the Linkage Properties panel, select Export for ActionScript. The identifier name, boxMC, is inserted automatically. (See Figure 4.) Click the OK button to close the Linkage Properties window.

  4. Figure 4Figure 4

  5. Click on the first frame of the script layer and insert the following script right after the soundNum variable and before the }:

  6. Listing 02

    //Grid development
      createEmptyMovieClip("movieGrid", 1);
    //Set initial volume
      movieGrid.soundVolume = 100;
      movieGrid.gridColumnCount = 0;
    //Attaching the individual cells of the grid. 
    //Setting height and width.
      for(x=0;x<ROWS;x++) {
        for(y=0;y<COLUMNS;y++) {
          var boxName:String = "boxMC"+x+"_"+y;
          movieGrid[boxName]._width = BOXWIDTH;
          movieGrid[boxName]._height = BOXHEIGHT;movieGrid[boxName]._x = movieGrid[boxName]. _width * y;movieGrid[boxName]._y = movieGrid[boxName]. _height * x;
          movieGrid[boxName].boxLight._alpha = DEFAULTBOXALPHA;

    Figure 5 shows what your code looks like at this point.

    Figure 5Figure 5

    Here you have created a container movie clip, named movieGrid, so that you can have more control as to where your dynamically generated grid appears on the Stage. We set the initial volume soundVolume to 100 and the gridColumnCount to 0.

    A nested loop will build your grid dynamically, working much like a typewriter. It will add a new box to the right of the previous one until it creates the number defined by the COLUMNS variable, and then it will move on to the next row and continue until the entire grid is built.

  7. Test your movie by choosing Ctrl+Enter/Cmd+Return.

  8. The grid is aligned at the top-left corner of the movie, which isn't ideal, and it's not doing anything just yet. You will work on positioning it in the center, but not before you add the sounds.

  9. Save your work.

  • + Share This
  • 🔖 Save To Your Account