Dynamic Movie Clips and the ScrollPane - Page 3

In the previous page you started adding things to the partial source. The interface of your animation should be complete, so this page covers all that remains - the code.

9. With our scrollpane component setup and our empty movie clip created, it's time to add some code. In the timeline, right-click on the first frame and select Actions. The Actions window should appear.
    
   Copy and paste the following code into the window:

var i:Number=0;

var mcMain:MovieClip;

function init() {

//empty movie clip in library with linkage name "scrollMovieClip"

scrollPane.contentPath = "scrollMovieClip";

mcMain = scrollPane.content;

trace(mcMain);

}

init();

 

btnAdd.onRelease = function() {

//attaching blueMovie to the content location stored in mcMain

mcMain.attachMovie("blueMovie", "blue"+i, mcMain.getNextHighestDepth(), {_y:50*i+5, _x:5});

i++;

scrollPane.invalidate();

};

 

btnRemove.onRelease = function() {

if (i != 0) {

i--;

removeMovieClip(mcMain+".blue"+i);

scrollPane.invalidate();

}

}

10. Test your animation by pressing Ctrl + Enter. Notice that when you press the plus/minus buttons, shapes are automatically added or removed from the scene.

Ok, now that you have your own version of the scrollpane working, let's take a look at the code in greater detail so that you have an idea of why the animation works the way it does.

Code Explained
The following sections will go through each line of code and explain its significance to the overall animation:

var i:Number=0;

var mcMain:MovieClip;

I first declare two variables that I will be re-using in the movie. The variable i will store a Number value and the mcMain variable will store a MovieClip object.

function init() {

//empty movie clip in library with linkage name "scrollMovieClip"

scrollPane.contentPath = "scrollMovieClip";

mcMain = scrollPane.content;

}

init();

The init function takes care of some initial housework before the rest of the code kicks in. I declare the init function and call it a few lines later.

scrollPane.contentPath = "scrollMovieClip";

We finally get to the interesting stuff...the first line of code inside our init function! In this line of code, we set the scrollPane's contentPath property to that of the empty movie clip, scrollMovieClip, we created earlier.

To dig deeper, the scrollpane internally scrolls a movie clip. That movie clip needs to be defined somehow, and we can do that by setting the contentPath of the scrollpane to that of an external SWF file or a movie clip stored in the library. So in this case, the empty scrollMovieClip stored in the library becomes the movie clip used by the scrollpane.

mcMain = scrollPane.content;

In this line, I set our mcMain variable I declared earlier to the movie clip used by the scrollpane. The scrollpane's internal movieclip, like I mentioned earlier, is scrollMovieClip as set by the scrollpane's contentPath property.

What mcMain refers to, though, is not scrollPane.scrollMovieClip as what one might expect! What it actually holds is the path to the movieclip at: _level0.scrollPane.spContentHolder.

spContentHolder is the name given to the movieclip stored inside our scrollPane. Our earlier use of scrollMovieClip from the library will no longer be used, even though spContentHolder refers to the same movie clip as scrollMovieClip.

There is more code that needs to be explained, so onwards to the next (and last) page!

1 | 2 | 3 | 4