• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint


With attachMovie(), you can create a new instance of a movie clip in the library. In this exercise, you’ll begin a project that when complete will be a scrolling list of items. You will create the items in the list by attaching movie clip instances dynamically.

Open scrollingList1.fla in the Lesson14/Assets folder.

On the main timeline, you’ll see three layers: Actions, Window, and Background. The Background layer contains the main graphics for the project; the Actions layer will contain most of the project’s ActionScript, and the Window layer contains a movie clip instance called display.

Inside display’s timeline you’ll find four layers: Mask, Fields, Scroll Buttons, and Window Graphics. The Window Graphics layer contains the border and background graphics of the window; the Scroll Buttons layer contains a movie clip instance that holds the Up and Down scroll buttons that you will work with in the next exercise; and the Fields layer contains an empty movie clip instance called list, which will contain instances that are dynamically created using attachMovie() . These attached instances will appear as items on a list, one on top of the other. When the list movie clip instance is filled with these attached instances, it will become quite long. Thus, list is masked by a rectangular shape in the Mask layer (of its own timeline) so that only the area of list over the window graphics will be visible.

Open the library and locate the movie clip named score list info bar. Right-click (or Control-click on a Mac) it and select Linkage from the menu that appears. Select Export for ActionScript in the Linkage Properties dialog box that appears and enter infoBar into the Identifier field.

This movie clip is now available for use with the attachMovie() method.

One instance of this movie clip will be attached to the list instance for every line of information in the scrolling list (16 lines, 16 attachments). Inside this attached movie clip are two dynamic text field instances, moonName and moonNum, which will be used in the attached instances to display the various names of the moons as well as an associated moon number.

Select Frame 1 in the Actions layer on the main timeline. Open the Actions panel and enter this ActionScript:

							list =


The object of this exercise is to create a list of items by attaching movie clip instances. To this end, we’ve created an array of names: the 16 most well-known moons of Jupiter. For each name in this array, an instance of the movie clip in the library (that we previously gave an identifier name to) will be attached to the list instance.

Now it’s time to begin defining the function that will be used to create the list of movie clip instances.

With Frame 1 still selected, add the following code:

							function buildList () {
							spacing = 30;

The buildList() function will ultimately contain all of the ActionScript needed to attach, position, and populate the entire list with movie clip instances. To position the vertical list properly, a variable called spacing is created and given a value of 30, which will be used to set the vertical (y) distance between the center of one attached movie clip instance and the center of the one placed below it.

To attach and position the list items, add the following ActionScript to the function definition:

							var i = -1;
							while (++i < list.length) {
							name = "infoBar" + i;
							y = i * spacing;
							display.list.attachMovie("infoBar", name, i);
							display.list[name]._y = y;
							display.list[name].moonName.text = list[i];
							display.list[name].moonNum.text = i + 1;

Using by-now-familiar ActionScript, this part of the function uses a while loop to loop through every element in the list array. For each element in the array, the loop attaches an instance of the infoBar movie clip to the list instance (to build the list).

The first action in the loop creates a variable called name whose value is set using an expression that concatenates the string "infoBar" with the current value of i . Since the value of i is incremented with each loop, the value of name will be "infoBar0" , "infoBar1" , "infoBar2" , and so on, with each successive iteration of the loop. Further down in the loop, the current value of name is used to assign a name to each successive attached instance of infoBar. Next in the loop, a variable called y is created to store the intended y position of the movie clip instance that’s being attached. The value of this variable is based on an expression that multiplies the current value of i with the value of spacing . Since the value of i increases with each iteration, so too does the value of y . This results in successive attached instances being placed in a y position below the previous one created.

The last four actions in the loop attach and populate (with data) the dynamic text fields in each attached instance. First, an attached instance of the infoBar movie clip is created with an instance name and depth based on the current value of name and i , respectively. Next, this attached instance’s y position is set based on the current value of the variable named y . Since each attached instance contains the same graphical elements as the original, each has two text fields: moonName and moonNum. The last two actions in the loop populate those fields with the appropriate data. First, using the current value of i , the text value of moonName in the attached instance is set to the appropriate string value in the list array. Since the value of i is incremented with each loop, the moonName text field in each successively attached instance will display the successive string elements (moon names) in the list array. Lastly, the moonNum text field in each attached instance is set to a numerical value of i plus 1. This will result in numerical values of 1, 2, 3, and so on appearing in the movieNum text fields of successive attached instances.

Once this loop has been completed, each element in the list array has an attached movie clip instance that’s populated with information and appears in an ordered vertical fashion.

To have the function execute, add buildList(); at the end of the current script on Frame 1 (below the function definition).

After the function has been defined in Frame 1 of the movie, this line of script will execute all of the actions we set up in the previous steps.

Choose Control > Test Movie to test what you’ve created.

When the movie initializes, your list of items will appear. Remember: Because you’ve used a mask to limit the number of items that can be displayed simultaneously, you’ll only see a partial list.

Close the test movie and save your work as scrollingList2.fla.

You’ve completed the hardest part of this lesson: You’ve written ActionScript that dynamically attaches instances of a movie clip from the library in order to build a list of items. In the next exercise, you’ll be working with the same file to make the window scrollable.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint