Centering pics in kirupa Photo Gallery Using XML and Flash

programming flash
1

Hello,

I am using the kirupa xml foto gallery and I am loading different sized images… if they would load nicely centered the problem is solved… (not to stage width/height…!!)

The movieclip “picture” has to load the images centered from its own registration point so that it can be placed anywhere on the stage…
now its loads the images from aka left top…

any help greatly appreciated…:wink:

best

arn

i used this :
_x -= _width/2;
_y -= _width/2;

but it throws the images in a strange place on stage…

2

i’m not familiar with the kirupa gallery, but standard the registration point of a movieclip is top left. So you can use this knowledge to center the image.

However, this can only be done AFTER the image is loaded, so keep that in mind.
After it’s been loaded, just do somethink like this:

   if(mc_image._width > _root._width || mc_image._height > _root._height){
    while(mc_image._width > _root._width || mc_image._height > _root._height ){
     mc_image._xscale--;
     mc_image._yscale--;
    }
   }
   mc_image._x = (_root._width - mc_image._width) / 2;
   mc_image._y = (_root._height - mc_image._height) / 2;

If you plan on doing it like this, and load every image in the same mc_image movieclip, you have to set the _xscale and _yscale back to 100 every time you load a new image into it.

Good luck.

3

Hi Jasper thanks for the reply…
my Actionscript knowledge is a little narrow…

So i don’t know where to implement in you code…

here is all actionscript involved…(all in frame 1…:


function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
picture._x -= _width/2;
picture._y -= _width/2;
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
[/AS]
 
 
Hope you/anyone..;)......... can figure it out
4 
function loadXML(loaded) {
   if (loaded) {
      xmlNode = this.firstChild;
      image = [];
      description = [];
      total = xmlNode.childNodes.length;
      for (i=0; i<total; i++) {
         image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
         description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
      }
   firstImage();
   } else {
      content = "file not loaded!";
   }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
   if (Key.getCode() == Key.LEFT) {
      prevImage();
   } else if (Key.getCode() == Key.RIGHT) {
      nextImage();
   }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
   prevImage();
};
next_btn.onRelease = function() {
   nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
   filesize = picture.getBytesTotal();
   loaded = picture.getBytesLoaded();
   preloader._visible = true;
   if (loaded != filesize) {
      preloader.preload_bar._xscale = 100*loaded/filesize;
   } else {
      preloader._visible = false;
      if (picture._alpha<100) {
         picture._alpha += 10;
      }
   }
};
function nextImage() {
   if (p<(total-1)) {
      p++;
      if (loaded == filesize) {
         picture._alpha = 0;
         picture.loadMovie(image[p], 1);
         desc_txt.text = description[p];
         picture_num();
      }
   }
}
function prevImage() {
   if (p>0) {
      p--;
      picture._alpha = 0;
      picture.loadMovie(image[p], 1);
      desc_txt.text = description[p];
      picture_num();
   }
}
function firstImage() {
   if (loaded == filesize) {
      picture._alpha = 0;
      picture.loadMovie(image[0], 1);
      picture._x = (_width/2)-(picture._width/2);
      picture._y = (_height/2)-(picture._height/2);
      desc_txt.text = description[0];
      picture_num();
   }
}
function picture_num() {
   current_pos = p+1;
   pos_txt.text = current_pos+" / "+total;
}
5

Oops, I thought you asked for the images to scale to fit too, my mistake.

6

You have to wait till the picture is full loaded…

scotty(-:

7

oh yeah, good point…hmm.

function loadXML(loaded) {
   if (loaded) {
      xmlNode = this.firstChild;
      image = [];
      description = [];
      total = xmlNode.childNodes.length;
      for (i=0; i<total; i++) {
         image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
         description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
      }
   firstImage();
   } else {
      content = "file not loaded!";
   }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
   if (Key.getCode() == Key.LEFT) {
      prevImage();
   } else if (Key.getCode() == Key.RIGHT) {
      nextImage();
   }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
   prevImage();
};
next_btn.onRelease = function() {
   nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
   filesize = picture.getBytesTotal();
   loaded = picture.getBytesLoaded();
   preloader._visible = true;
   if (loaded != filesize) {
      preloader.preload_bar._xscale = 100*loaded/filesize;
   } else {
      preloader._visible = false;
      if (picture._alpha<100) {
         picture._alpha += 10;
      }
      picture._x = (_width/2)-(picture._width/2);
      picture._y = (_height/2)-(picture._height/2);
   }
};
function nextImage() {
   if (p<(total-1)) {
      p++;
      if (loaded == filesize) {
         picture._alpha = 0;
         picture.loadMovie(image[p], 1);
         desc_txt.text = description[p];
         picture_num();
      }
   }
}
function prevImage() {
   if (p>0) {
      p--;
      picture._alpha = 0;
      picture.loadMovie(image[p], 1);
      desc_txt.text = description[p];
      picture_num();
   }
}
function firstImage() {
   if (loaded == filesize) {
      picture._alpha = 0;
      picture.loadMovie(image[0], 1);
      desc_txt.text = description[0];
      picture_num();
   }
}
function picture_num() {
   current_pos = p+1;
   pos_txt.text = current_pos+" / "+total;
}

?

8

Hi rasper/defective and scotty…

thanks for your efforts…but nu succes yet…

…it has to be centered to it’s own registration point…not that of the for example “stage”…

By the way…
My “picture” clip is completely emty…aka…no content on frame one…
(just using it like a container function…). is this right?..

hope someone can bring up the code…I think we are getting close…:slight_smile:

Rasper your last code does the centering job …but it puts the loaded images not anywhere near the “picture” clip…i moved it across the stage but your code places the pictures always at the same position…
seam not te relate to the picture clip position…although it does the job…some finetuning…needed…:slight_smile:

Much appreciated!

best,

arn

9

Using an empty movieclip is the way to do it.

My code does indeed place the picture in the middle of the stage.

I’m not quite sure about this, but if you load an image inside a MovieClip, than that image ‘becomes’ the MovieClip. If you use

picture._x -= picture._width/2;
picture._y -= picture._width/2;

it will place the movieclip at the coördinates that equal to the half of your image size. For example if your picture-movieclip is directly located in the _root, and it is 500px wide, this will mean that it will be placed on _x = 250. If it were 300px wide, it will be placed on _x = 150.

But, if you want to use an empty movieclip to place your image in, and then place that movieclip somewhere (manually) so that the registration point is the middle of the picture, you will have to do something else. I think you should put your picture-movieclip inside another ‘holder’ movieclip. When the picture is loaded, you can use the code in this post to position it inside that holder movieclip. That way you can keep your holder movieclip on the same centered place.

Is that something that you can use?

10

Hi Rasper.

thanks for your explanation…this makes me think of the wellknown…
scale/resize function wich does the job perfectly…if there is someone out there who can implement this code into the kirupa xml gallery code…?..

here is what I have…(it’s from another setup…)

[AS]
MovieClip.prototype.resizeMe = function(w, h, id) {
var speed = 3;
container._alpha = 0;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
container._x = this._x-this._width/2+spacing/2;
container._y = this._y-this._height/2+spacing/2;
infofield._y = Math.round(this._y+this._height/0+spacing/0);
container._alpha += 8;
if (container._alpha>90) {
this._root.container.infoclip.info.text = id;
container._alpha = 100;
delete this.onEnterFrame;
}
}
};
};
[/AS]

thanks…:slight_smile:

best,

arn

11 
var cx = picture._x;
var cy = picture._y;
this.onEnterFrame = function() {
	filesize = picture.getBytesTotal();
	loaded = picture.getBytesLoaded();
	preloader._visible = true;
	preloader.preload_bar._xscale = 100*loaded/filesize;
	if (picture._width) {
		preloader._visible = false;
		if (picture._alpha<100) {
			picture._alpha += 10;
		}
		picture._x = cx-picture._width/2;
		picture._y = cy-picture._height/2;
	}
};

scotty(-:

12

scotty!!! and evereybody alse here invloved…:slight_smile:
many thanks…your code works like a charme…:slight_smile:

I knew you had the skills…:wink: I’ve checked severel other postings of you…
and your knowledge/dedication to this forum …is needed…and much respected…:thumb:

thanks…again…

made the finishing touch on my current project.!

Best,

arn

www.electronicnature.com

13

no problem =)