Multi-Dimensional Arrays and attachMovie
       by b.rich  |  3 August 2005

Hello boys and girls, today we are going to be building a dynamic member profile using multi-dimensional arrays and attachMovie. Why? Well it’s good practice for anyone new to ActionScript and makes the whole updating process very simple. Here is an example of what we will be creating:

[ all of the above data is located in variable form ]

The first thing we need to do is plan out all our data we will be using. This will be all the information we will be using in our movie. Below is an example of all the information we will be using for each member.

Name: Kirupa
Interests: Flashing (MX) complete strangers in 32-bit color.
Link To Profile: //www.kirupa.com/forum/member.php?u=1

Name: B.Rich
Interests: Basketball, Golf, Web Media.
Link To Profile: //www.kirupa.com/forum/member.php?u=4513

Name: Senocular
Interests: Fun stuff, like Flash
Link To Profile: //www.kirupa.com/forum/member.php?u=2867

Once we have planned out all the data we will be using we can begin creating the dynamic container which will store the information we will be using. Since the information we will be using is dynamic we will only have to create one container as a mock up which will be used for each group of information.

Let's Get Started:

  1. The first thing you will have to do is create a new animation in flash. Set the width to 300px and the height to about 400px.

step1

[ adjust your document properties ]

  1. On the first frame of your timeline draw a rectangle shape similar to the one shown below which is around 100px tall and 270px wide. This will be the background for our dynamic container:

[ the rectangle you just drew ]

  1. Before we go any further select the rectangle you just created and convert it to a movie clip (F8 or Modify>convert to symbol) giving it a name "container".
  2. Once you have created the new movie clip double click it to edit it. You should now be in our movie clip with the rectangle we created earlier as our container background.
  3. We now will create a series of dynamic text boxes which will hold all of our dynamic data starting with name. Create a new layer in your container movieclip.

    Click on the text tool icon in your toolbar and create a dynamic textbox about 3/4 of the background as shown below. Once you have created the text box, click on it and give it an instance title of "name":

[ create a new text field and give it the instance name 'name' ]

  1. The next textbox we will create is for Interests. Once again click on the text tool from the toolbar and create a new dynamic textbox below the name textbox you created in the previous step. Make this textbox the same width as the name one but this time make the textbox a lot taller since it will hold more information that the previous.
     
  2. Once you have created your new text box give it an instance name of "interest". Your container movieclip should now look similar to the picture shown below. Don't worry if they text boxes don't line up or overlap because you can adjust that later:

[ create the second text field and give it the instance name of 'interest' ]

  1. The last and final element to add to our container will be our button which will link to the profile of each member we add to our array. Click on the rectangle tool from the toolbar and create a small rectangle about the the width of your earlier text boxes. Make sure to position your new rectangle below the text boxes you created in the previous steps.
  2. Once you have created your button select it and convert it to a button with the name urlButton. Once your rectangle has been converted to a button click on the button and give it the following actions:
on (press) {
getURL(link, "_blank");
}
  1. You may add some text to your button such as "View My Profile", and if you really really want to, you can also add some rollover color changes. See my earlier animation example for inspiration!
  2. In order for the attachMovie function we will be using to create our member profile to work correctly we must give our newly created container movie a name and export it for ActionScript to use. To do this you will need to open up your library (Ctrl+L on Windows) or on the top toolbar click Window and select Library. Your Library should now be displayed.
  3. You will now notice in your library you have your container movieclip and button. highlight the container movieclip, right click and select Linkage. You should see a window called Linkage properties. Under the linkage setting check the "Export for ActionScript option".

    You will notice it also check the "Export in first frame" option and activates the two text boxes up top. Click in the Identifier textbox and type "container". Click ok. Your container movieclip is now completed and ready to use with ActionScript. Please refer to the picture below to make sure you selected the correct options:

[ the linkage properties window ]

  1. The next thing we need to do is create our multi-dimensional array that will hold all of our data which will be sent to the container movieclip you just created. Create a new layer on your main timeline and call it actions. Click on the actions frame in your timeline, right click and select Actions, and copy and paste the following:
//Array with all our information
memberInfo = [["Kirupa", "Flashing (MX) complete strangers in 32-bit color.", "//www.kirupa.com/forum/member.php?u=1"], ["B.Rich", "Basketball, Golf, Web Media.", "//www.kirupa.com/forum/member.php?u=4513"], ["Senocular", "Fun stuff, like Flash", "//www.kirupa.com/forum/member.php?u=2867"]];
//Starting x & y values
var xPos = 150;
var yPos = 60;
//For loop to attach our container movieclip and pass the array information
for (i=0; i<memberInfo.length; i++) {
//attach the container clip
attachMovie("container", "new"+i, i, {_x:xPos, _y:yPos});
//increase the y postion each time
yPos += this["new"+i]._height+5;
//add the information
this["new"+i].name.text = memberInfo[i][0];
this["new"+i].interest.text = memberInfo[i][1];
this["new"+i].link = memberInfo[i][2];
}

That's it! You are done! You can now test out your movie and you should see 3 instances of your container movie with all of the information in the array. I will now briefly explain the ActionScript involved in creating this on the next page.

Onwards to the next page!


 

page 1 of 2


 




SUPPORTERS:

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