Dynamic Movie Clips and the ScrollPane - Page 2

In the previous page you got to play around with an animation I created that loaded dynamic movie clips into a scrollpane. In this page, let's work on creating that animation on your computer.

Let's Get Started:

1. First, be sure to unzip and open the source file I posted earlier. It contains the basic interface to save you some time. Once you have the file opened, here is what you should see on the stage:

[ you should see a blank stage with a few buttons displayed ]

2. First, let's add a scrollpane component to our stage. Go to Window | Components to display the floating Components panel. Expand the User Interface node and find the ScrollPane component:

[ find the ScrollPane component ]

3. Once you have found the ScrollPane component, drag and drop the component to your stage. Position and resize it so that it fits nicely within the stage boundary and above our buttons as shown in the image below:

[ how your stage looks after dragging and dropping your scrollpane component ]

4. With the scrollpane selected, give it the instance name scrollPane:

[ give your scrollpane the instance name scrollPane ]

5. Next, click on the Parameters tab to access the fields you can modify. Find the vScrollPolicy field and set its value to on:

[ from the Parameters tab the vScrollPolicy to on ]

6. Ok, we are now done modifying the scrollpane component. Now, make sure your Library panel is displayed. Go to Windows | L (press Ctrl + L) to display the Library panel if it isn't already displayed.
   
   Right click on an empty part of your library and select the New Symbol item from the pop-out menu:

[ select New Symbol after right clicking on an empty part of a Library ]

7. The Create New Symbol window will appear. Give your symbol the name scrollMovieClip. From the same window, click the Advanced button and check the box for Export for ActionScript.
   
   You will notice that the Linkage Identifier text field is automatically filled in with the scrollMovieClip text:

[ set your new symbol's Name and Identifier to scrollMovieClip ]

8. Press OK to accept the changes and close the Symbol Properties window. Note that you just created a movie clip with no real content inside it. It just has the name and Identifier set to scrollMovieClip.

We are almost done. In the next page, we will add some code that makes all of these UI elements work well together.

Onwards to the next page!

1 | 2 | 3 | 4