Flash page transitions using variables

Hello, hope anyone can help me…I have a main movie clip with 4 movie clips inside it each on there own frame(the different pages). What i want to do is when someone goes from button 1 to say 3, i want page 1 to first play its outro animation before jumping to page three, and thus with all the other pages. I know how to do this with seperate swf’s but i cant seem to get it working with a single swf. I want it to be along the lines of this: http://www.templatemonster.com/flash-templates/12231.html

Heres my action script in the first frame of the main timeline:

currentPage = 0;
if (currentPage == 0) {
} else if (currentPage == 1) {
mc_00.gotoAndPlay(“outro”);
} else if (currentPage == 2) {
mc_00.gotoAndPlay(“outro”);
} else if (currentPage == 3) {
mc_00.gotoAndPlay(“outro”);
}
if (currentPage == 1) {
stop;
} else if (currentPage == 0) {
mc_01.gotoAndPlay(“outro”);
} else if (currentPage == 2) {
mc_01.gotoAndPlay(“outro”);
} else if (currentPage == 3) {
mc_01.gotoAndPlay(“outro”);
}
if (currentPage == 2) {
stop;
} else if (currentPage == 1) {
gotoAndPlay(“outro”);
} else if (currentPage == 0) {
gotoAndPlay(“outro”);
} else if (currentPage == 3) {
gotoAndPlay(“outro”);
}
if (currentPage == 3) {
stop;
} else if (currentPage == 1) {
gotoAndPlay(“outro”);
} else if (currentPage == 2) {
gotoAndPlay(“outro”);
} else if (currentPage == 0) {
gotoAndPlay(“outro”);
}
btn_01.onRollOut = function() {
btn_01.gotoAndPlay(“out”);
};
btn_01.onRollOver = function() {
btn_01.gotoAndPlay(“over”);
};
btn_01.onRelease = function() {
currentPage = 1;
content.gotoAndStop(2);
};
btn_02.onRollOut = function() {
btn_02.gotoAndPlay(“out”);
};
btn_02.onRollOver = function() {
btn_02.gotoAndPlay(“over”);
};
btn_02.onRelease = function() {
currentPage = 2;
content.gotoAndStop(3);
};
btn_03.onRollOut = function() {
btn_03.gotoAndPlay(“out”);
};
btn_03.onRollOver = function() {
btn_03.gotoAndPlay(“over”);
};
btn_03.onRelease = function() {
currentPage = 3;
content.gotoAndStop(4);
};