To display 8 images per page, you can consider two variables...one for index and another for display 8 in page as follows:
var index:int = 0;
var imagesToDisplay:int = 8;
var imagesCount:int = 8;
function arrangeImages()
{
for(var i:int = index;i < imagesCount;i++)
{
//code for loading and displaying images here...
}
}
next_btn.addEventListener(MouseEvent.CLICK,gotoNextPage); //next_btn is a button to go next page and display next 8 images...
prev_btn.addEventListener(MouseEvent.CLICK,gotoPrevPage); //prev_btn is a button to go last page and display previous 8 images....
function gotoNextPage(e:MouseEvent):void
{
if(index <= length of images - imagesToDisplay)
{
index += imagesToDisplay;
imagesCount += imagesToDisplay;
arrangeImages();
}
}
function gotoPrevPage(e:MouseEvent):void
{
if(index >= imagesToDisplay)
{
index -= imagesToDisplay;
imagesCount -= imagesToDisplay;
arrangeImages();
}
}
For viewing the full size images of the gallery one by one, you need to take another next and previous buttons. At that time you have to get the images of the current page by checking xml as well. Use the code like above but the only difference is you need to consider index of those 8 images and thier length that is nothing but 8. For prev button
if(index > 0)
index--;
call the function which loads images...
For next button
if(index < 7)
index++;
call the function which loads images...
For placing the images constantly, you can take one movieclip to have all these images. Place that movieclip according to the stage.
mc.x = stage.stageWidth/ 2;
like that....
Note: I just want to provide you a basic idea. But this may not be the exact code. As per your requirements, you can change...and go on...
