Flash MX and MX2004 ScrollPane Tutorial #2

Make sure that you do the First ScrollPane tutorial Part 1 first: -
Flash MX ScrollPane - How to use the ScrollPane Component

This Flash ScrollPane tutorial will deal specifically with the problem of addressing buttons within a Flash MX Pro ScrollPane. This project will deal with the farcical premise of Steve's Tutes Inc website. We need to build a flash website that gives information about the Board , the members and staff of Steve's Tutes Inc. lol.. We have 12 board members and 32 staff, and we cant fit them on the page vertically so we need a scrollpane in the center section.
Let me draw you a picture:

First open up Flash MX Pro and create a new .fla file. Make the stage 600 pixels by 400 pixels.
Make a left navigation rectangle background a little bit less than 200 pixels wide and put it to the left.
Make a right hand section 180x380 and position it at (410,10).
Select the right hand box and press F8 and make it a Movieclip. Give it the instance name of "container".
These backgrounds were put on the bottom layer.

Create another layer and call it "buttons". Make your title and put it up the top of the left navigation bar.
Make a button with Board written on it. Give it the instance name of "board_btn".
Do the same with a Members button and a staff button. Name them "members_btn" and "staff_btn".

Creating Loaded Movies

Now we are going to create 3 new fla files so that we can load in our scrollpanes for the center section. Go file - New and Name the new fla "members.fla". Make it 600x400.
For Flash MX Pro , Select topMenu item Window - Development Panels - Components. Drag a ScrollPane to the stage. In the properties window, make the scrollpane 200x400, and position it at (200,0). Give it the instance name of "scroll01". In the properties box, Parameters for our scrollpane , click on the contentPath textbox and write in "member_mc". This will be the movieClip that will be loaded into our scollpane that will contain the members buttons.

Open up the library and click on the most bottom left icon to create a new symbol. Select "Movie Clip" and name it "member_mc". click on the Advanced button and tick the "Export for Actionscript" and in the Linkage - Identifier box leave the name as "member_mc". Click "OK".

Create buttons to go into ScrollPane

Start creating your buttons. I have put the list of member names vertically and made a button from each name.
Select your first button and open up the Actionscript window(F9) in Flash MX.
Put this code in your actions window with the button selected.:
Let me explain it. :
_level0 is the _root level or the main timeline of the main movie. we attach the mc "barney_mc" to that level or depth, and then set its position(_x,_y) to the container mc that we set up in the right hand section of our main movie.

on(press){
	_level0.attachMovie("barney_mc", "barney_mc",0);
	_level0.barney_mc._x = _level0.container._x;
	_level0.barney_mc._y = _level0.container._y;
}

do the same for the rest of the buttons on the members.fla file. Here is one for fred

on(press){
	_level0.attachMovie("fred_mc", "fred_mc",0);
	_level0.barney_mc._x = _level0.container._x;
	_level0.barney_mc._y = _level0.container._y;
}

Create 2 more new files and name them "board.fla" and "staff.fla".
Repeat the process above for creating a scrollpane and putting buttons inside an mc that will be inserted into the contentPath of the scrollpanes in those files. And make sure you write down all the mc names for the right content that you used in your attachMovie code.

Making a dummy Movie Clip for the right hand Content box

We need to create some sort of dummy cover mc to override the last members content in the right hand box. The easiest way to do this is create a dummy mc.
Create a movieclip , name it dummyRight_mc and give it the linkage id of dummyRight_mc as well. Put some content in this mc below and to the right of the center icon (+).

Loading ScrollPanes into Flash Main Movie

Now we need to load our separate .swf movies into the center section of our main movie. Go to our main movie, and create a new layer. Call it "code". Click on frame 1 of this layer and open the Actions window. Remember that we have called our left buttons, members_btn, board_btn, and staff_btn.
This code empties depth 1, attaches our dummy mc to the container mc, an loads our center scrollpane mc into the middle section.

board_btn.onRelease = function(){
	unloadMovieNum(1);
	attachMovie("dummyRight_mc","dummyRight_mc",0);
	dummyRight_mc._x = container._x;
	dummyRight_mc._y = container._y;
	loadMovie("board.swf",1);
}
members_btn.onRelease = function(){
	unloadMovieNum(1);
	attachMovie("dummyRight_mc","dummyRight_mc",0);
	dummyRight_mc._x = container._x;
	dummyRight_mc._y = container._y;
	loadMovie("members.swf",1);
}
staff_btn.onRelease = function(){
	unloadMovieNum(1);
	attachMovie("dummyRight_mc","dummyRight_mc",0);
	dummyRight_mc._x = container._x;
	dummyRight_mc._y = container._y;
	loadMovie("staff.swf",1);
}

this.onLoad = function(){
	attachMovie("dummyRight_mc","dummyRight_mc",0);
	dummyRight_mc._x = container._x;
	dummyRight_mc._y = container._y;
	loadMovie("members.swf",1);
}

Creating Right Hand Content MovieClips

Now we need to make all the movieclips that we wrote down before, eg. barney_mc, fred_mc etc..
Open up your library in your main movie. Create a new folder and name it "Member clips". Click on the left bottom icon to create a new symbol. Select type MovieClip , give it the name "barney_nc" and in the linkage section make sure it has the identifier of "barney_mc". Click OK.

Repeat the process above for fred_mc. And so on for brett_mc, danny_mc... etc etc..
Put these mcs in the members folder in the library. That will keep our library neat and help us keep control of our MovieClips.
Repeat the process for the Board movieclips and the staff movieclips.

Buy Flash MX Pro - from us and help out a struggling Web Developer ! :)