Help with Creating Simple Navigation OOP Style

[dr_tchock]

Hi Folks,

I'm currently working on a project whereby a need a simple navigation between various MovieClips (in the library) - all with associated classes which will control their content. At the moment, I have 3 classes - Main, Content & Background (the latter not important here so I will leave it out)

NOTE: I've removed a lot of the extra code from these classes so they just deal with the navigation, which is why it looks like there are some pointless functions.

Main.as:



package {

import flash.display.MovieClip;
import flash.events.Event;

public class Main extends MovieClip {

private var theContent:Content = new Content;

public function Main():void {

init();

}

private function init():void {

addPage();

}


private function addPage() {

addChild(theContent);
}

}
}
Content.as:




package {

import flash.display.MovieClip;
import gs.TweenMax;
import fl.motion.easing.*;
import flash.events.*;

public class Content extends MovieClip {

//public var Page1:page1 = new page1;
//public var Page2:page2 = new page2;

var currentPage:page1 = new page1();

public function Content(){

init();

}

private function init():void {

initPages();
initNavigation();

}

private function initPages():void {

slidePage();

}

private function initNavigation(): void { //initialises 'next' button - will need changing

var aNextButton: nextButton = new nextButton();
addChild(aNextButton);
aNextButton.x = 750;
aNextButton.y = 300;
aNextButton.addEventListener(MouseEvent.CLICK, nextPage);

}

private function slidePage():void { //animates in

this.addChild(currentPage);

currentPage.x = 1800;
TweenMax.to(currentPage,1,{x: 0,y:0,ease:Cubic.easeIn});

}

private function nextPage(e:Event):void { //animates out and then removes page

var xyTween: TweenMax = new TweenMax(currentPage,1,{x: 1000,y:0,ease:Cubic.easeIn});
xyTween.addEventListener(Event.COMPLETE, scrubComplete);

}

private function scrubComplete(e:Event):void {

removeChild(currentPage);

}

public function resize(w:Number, h:Number):void {

this.width = w;
this.height = h;

}
}
}

As you can see, the MovieClips that will be animated in and out follow the naming convention "page1", "page2", etc and will be instantiated with variables of the same name but beginning with a capital 'P'.

I have a vague idea on how to do achieve this - perhaps by pushing the pages into an array, with the "next" button (I will add a "back" button too) selecting the next item in the array and applying the necessary animations accordingly.

However, I don't really know where to start with this, and would appreciate it if some wise individual could point me in the right direction? I'm not looking for anyone to write it for me, just suggest a sensible to direction to go in as this is surely an everyday problem.

I do, however, need to retain flexibility (hence the OOP approach). I'm happy to create more classes if needed.

[dr_tchock]

Nevermind, I have done it myself - was childishly simple in the end!

[lunatic]

Any chance you could post your solution in case others have a similar problem? Thanks!

[dr_tchock]

Sure. This is only the basics but adding more functionality should be pretty simple now.



package {

import flash.display.MovieClip;
import gs.TweenMax;
import fl.motion.easing.*;
import flash.events.*;

public class Content extends MovieClip {

var Page1:page1 = new page1; // MovieClips stored in Library
var Page2:page2 = new page2;
var Page3:page3 = new page3;
var pages: Array = new Array(); // Array to hold all pages
var currentPage:MovieClip = new MovieClip(); // Container for current page
var i:int = 0; // initialises index

public function Content(){

init();
}

private function init():void {

initPages(); // initialise page
initNavigation(); // initialise navigation
}

private function initPages():void {

pages.push(Page1); //pushes pages into array
pages.push(Page2);
pages.push(Page3);
this.addChild(currentPage); // adds container to stage
slidePageIn(); // slide first page in
}

private function initNavigation(): void { //initialises 'next' button - will need changing

var aNextButton: nextButton = new nextButton();
addChild(aNextButton);
aNextButton.x = 750;
aNextButton.y = 300;
aNextButton.addEventListener(MouseEvent.CLICK, nextPage);
}

private function slidePageIn():void { //animates in

currentPage.addChild(pages[i]); // adds page from position in array
currentPage.x = -800; // moves offscreen for sliding in
TweenMax.to(currentPage,1,{x: 0,y:0,ease:Cubic.easeIn}); // slides in
}

private function nextPage(e:Event):void { //animates out and then removes page

var xyTween: TweenMax = new TweenMax(currentPage,.5,{x: 1000,y:0,ease:Cubic.easeIn});
xyTween.addEventListener(Event.COMPLETE, transitionComplete);
}

private function transitionComplete(e:Event):void {

currentPage.removeChildAt(0); // removes page from display list
i++; // increases index
slidePageIn(); // start animation
}

public function resize(w:Number, h:Number):void { // method for resizing content

this.width = w;
this.height = h;
}
}
}