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.
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:
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.
[ adjust your document
properties ]
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 ]
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".
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.
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' ]
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.
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' ]
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.
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");
}
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!
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.
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
]
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
varxPos=150;
varyPos=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.