Dynamic Pageing?!

[papercut]

Hi there. Keep up the good work!
I'm trying to customize an xml photo gallery and need someone to help me with the pageing. When there are more pictures on the stage than it can hold I need Flash to generate page numbers and send the other pictures on a different page. Anyone who can help? Thanks in advance!

Here is the code:



var thumb_spacing = 76;
var thumb_height = 60;

function GeneratePortfolio(portfolio_xml)
{
var portfolioPictures = portfolio_xml.firstChild.childNodes;

var positionX = 0;
var positionY = 0;
for (var i = 0; i < portfolioPictures.length; i++)
{
var currentPicture = portfolioPictures[i];

var currentThumb_mc = menu_mc.createEmptyMovieClip("thumbnail_mc"+i,i);
if (positionX > 260)
{
positionX = 0;
positionY += thumb_height;
}
currentThumb_mc._x = positionX;
currentThumb_mc._y = positionY;
positionX += thumb_spacing;

currentThumb_mc.createEmptyMovieClip("thumb_container",0);
currentThumb_mc.thumb_container.loadMovie(currentP icture.attributes.thumb);

currentThumb_mc.image = currentPicture.attributes.image;

currentThumb_mc.onRelease = function()
{
image_mc.loadMovie(this.image);
}
currentThumb_mc.onRollOver = function ()
{
this.attachMovie("rollit", "newroll", 1);
this.newroll._alpha = 40;
}
currentThumb_mc.onRollOut = function ()
{
this.newroll.removeMovieClip();
}
}
}

// xml object for xml content
var portfolio_xml = new XML();
portfolio_xml.ignoreWhite = true;
portfolio_xml.onLoad = function(success)
{
if (success) GeneratePortfolio(this);
else trace("Error loading XML file");
}
// load
portfolio_xml.load("portfolio2.xml");

[papercut]

Sorry but... somebody to help with this? :look:
I'll appreciate your time... maybe give me a tutorial or something...

[papercut]

Bump!

[scotty]

I'm not sure what you're after when you talk about pictures...
The thumbs?

scotty(-:

[papercut]

I'm not sure what you're after when you talk about pictures...
The thumbs?

scotty(-:

Ok. I've got two blocks - left and right. On the left I've got mc which I fill with thumbs of images. When you click on one of the thumbs I load the full image on the right block in a different mc. But when the left area is full and there are more thumbs to be loaded there I want to generate links like for example 2, 3, 4, 5... and put the remaining thumbs on these pages. So no matter how many pics I have in the XML file they will load and will be on different pages.

Am I clear now? :)

[scotty]

LOL, you are:)
Can you post your fla?

scotty(-:

[papercut]

LOL, you are:)
Can you post your fla?

scotty(-:

Yeah :)
Here it is.

[scotty]

Here you go

var thumb_spacing = 76;
var thumb_height = 60;
//number of columns you want
var columns = 3;
//number of rows you want
var rows = 3;
function GeneratePortfolio(portfolio_xml) {
var portfolioPictures = portfolio_xml.firstChild.childNodes;
var positionX = 0;
//var to determine how much pages there will be
var pages;
//put everything inside scroll_mc
var scroll_mc = menu_mc.createEmptyMovieClip("scroll_mc", 99);
//mask scroll mc
scroll_mc.setMask(mask);
for (var i = 0; i<portfolioPictures.length; i++) {
var currentPicture = portfolioPictures[i];
var currentThumb_mc = scroll_mc.createEmptyMovieClip("thumbnail_mc"+i, i);
//returns the number of pages
pages = Math.floor((i/(rows*columns)));
//position of the different pages
var pageing = pages*(columns*thumb_spacing);
//thumb x position
currentThumb_mc._x = (i%columns)*thumb_spacing+pageing;
//thumb y position
currentThumb_mc._y = (Math.floor(i/columns)%rows)*thumb_height;
currentThumb_mc.createEmptyMovieClip("thumb_container", 0);
currentThumb_mc.thumb_container.loadMovie(currentP icture.attributes.thumb);
currentThumb_mc.image = currentPicture.attributes.image;
currentThumb_mc.imgurl = currentPicture.attributes.imgurl;
currentThumb_mc.onRelease = function() {
image_mc.holder.loadMovie(this.image);
image_mc.theurl = this.imgurl;
image_mc.onRelease = function() {
getURL(this.theurl, _blank);
};
image_mc.onRollOver = function() {
this.attachMovie("rollme", "myroll", 1);
};
image_mc.onRollOut = function() {
this.myroll.removeMovieClip();
};
};
currentThumb_mc.onRollOver = function() {
this.attachMovie("rollit", "newroll", 2);
this.newroll._alpha = 40;
};
currentThumb_mc.onRollOut = function() {
this.newroll.removeMovieClip();
};
}
//if there are more then 1 page
if (pages>0) {
for (var i = 0; i<=pages; i++) {
//attach a button for each page
var pag = this.attachMovie("page_btn", "page"+i, 99+i);
//position of the btton
pag._x = 25+i*50;
pag._y = 350;
//identifier for the button
pag.id = i;
//button text
pag.info.text = i+1;
pag.onPress = function() {
//show the right page
//you could add some easing...
menu_mc.scroll_mc._x = -(this.id*(columns*thumb_spacing));
};
}
}
}
Adjust the columns and row values to your need plus in the fla edit the page_btn.
You might have edit the mask size as well:)

scotty(-:

[papercut]

Hey, you're the man! BIG thanks! It's great! I appreciate your time and knowledge! :beer:

[papercut]

Can I change the status of the button to show on which page the user is. For example when you click "2" to change the color of it and when you click "3" to change the color of 3. Thanks again!

Respect!

[scotty]

In the page button make a new frame with the down state in it (don't forget to put a stop in frame 1).
In the page.onPress function add

setButtons(pages, this.id)
and then add this function (outside the generatePortfolio() )

function setButtons(tot, q) {
for (var i = 0; i<=tot; i++) {
var but = this["page"+i];
if (i != q) {
but.gotoAndStop(1);
but.enabled = 1;
} else {
but.gotoAndStop(2);
but.enabled = 0;
}
}
}

scotty(-:

[papercut]

Yeah, it's moving the head to the second frame but the number in the text field disappears?! I want to change the color of the number in the second frame. Strange...

[scotty]

Put the text field in a new layer and give it (normal) frame (F5) in frame 2 (i/o a keyframe) ;)

scotty(-:

[papercut]

I wasn't clear :)
I've got two layers with two keyframes in page_btn symbol. When the head jumps to the second keyframe I have the same textfield like in the first keyframe - "info" - but I changed the color of it. So when you click on one of the links the head goes to second frame and the digit should be different color. Now it disappears?!

[scotty]

It's because it is a keyframe...
The textfield is dynamically loaded in frame 1, not frame2.
Skip the keyFrame in frame 2, make it a normal one and change the color with textformat
In frame 1

fmt_up =new TextFormat();
fmt_up.color =0x333333;
info.setTextFormat(fmt_up);
and in frame 2

fmt_down = new TextFormat();
fmt_down.color = 0xFF0000;
info.setTextFormat(fmt_down);

scotty(-:

[rhamej]

It's because it is a keyframe...
The textfield is dynamically loaded in frame 1, not frame2.

I can't count the times that this problem has made me want to smash my mouse into a wall. :to:

[scotty]

LOL, the disadvantage of a wireless mouse:lol:

scotty(-:

[vljw8202]

Tried to download the fla but got "Unexpected file format". Is it because I am using MX? If yes, is there a MX version?

[scotty]

Here's the mx version :)

scotty(-:

[vljw8202]

Thank you for sharing the code. If you don't mind, can you tell me what 99 means in the following statment:
var scroll_mc = menu_mc.createEmptyMovieClip("scroll_mc", 99)
Thx.

[scotty]

99 is the depth scroll_mc is created in :)

scotty(-:

[vljw8202]

did u pick 99 arbitrary or there is an alogrithm?

[rhamej]

Knowing Scotty, there is probably some kind of alogrithm behind it. :lol: But its usually just picked at random :)

[vljw8202]

does it have to be unique?

[rhamej]

No. Just realize that if you load anything else into level 99, it will replace what ever it there. Think of it just like the layers in the timeline. 0 being the very bottom, 1 being on top if it, etc etc. :)

[scotty]

Knowing Scotty, there is probably some kind of alogrithm behind it. :lol: But its usually just picked at random :)
LOL, no it was a random number :lol:
And like you well explained above, be sure that depth isn't taken yet ;)

scotty(-:

[vljw8202]

Thank you all. All your tips are very useful for me (a newbie) to learning flash.
I copied scotty's copy and modified it to show a list (1-col x 20-row) of item name instead of thumbnails but it turned out that masking has no effect. Instead of showing every 20 items evevything is shown. When I switched back to show thumbnails, it seems to work.
Is masking only applicable to picture not for use onn text field?

[vljw8202]

I found the solution from this link http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_13987

The only minor issue is the text in no longer crisp.