Wednesday, 28 March 2012

Back and Next buttons

After looking at the CBeebies site and other children's sites I noticed they use back and next buttons to help the children navigate the pages so I decided to add them to my site. I created back and next buttons in the shape of arrows and added them to my site. Below is the code I added in the action script for the Home page for the next button.

function onNextbutton1Click(e:MouseEvent):void
{
gotoAndStop("Venues");

}
nextbutton1.addEventListener(MouseEvent.CLICK, onNextbutton1Click);

So with this code added when the children click on the arrow with next on it at the bottom of the screen it will take them to the Venues page. Then when they are on the Venues page they can click another next arrow which uses the same code as above apart from
the gotoAndStop changes to:

gotoAndStop("Games");

On the Venues page I added a back arrow which uses the same code as the next arrow apart from it tells the user to go back.

function onBackbutton1Click(e:MouseEvent):void
{
gotoAndStop("Home");

}
backbutton1.addEventListener(MouseEvent.CLICK, onBackbutton1Click);

I added back and next buttons on the Venues, Games pages and then back buttons on each of the Venue pages and on the Colour In page. Below is a screenshot of one of the pages:


No comments:

Post a Comment