How to have smooth fade effect between the two images via XML

Question

I have my xml gallery working fine, all i need is to have a smooth fade effect between the two images, right now they are changing with a jerk. Can somebody help me getting this effect with my code. Any help is much appreciated.
function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        image = [];
        link = [];
        thumbnails = [];
        thumbnailsOn = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
            link[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
            thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
            thumbnailsOn[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
            thumbnails_fn(i);
        firstImage();
        loopPlay();
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("data.xml");
thumbnail_mc.attachMovie("prev", "prev_new", 1);
    thumbnail_mc.prev_new._x= -20;
    thumbnail_mc.prev_new._y= -1;
thumbnail_mc.attachMovie("next", "next_new", 4);
thumbnail_mc.next_new._y= -1;
    //thumbnail_mc.next_new._x= -30;
thumbnail_mc.prev_new.onRelease = function() {
    prevImage();
thumbnail_mc.next_new.onRelease = function() {
    nextImage();
p = 0;
this.onEnterFrame = function() {
    filesize = holder.getBytesTotal();
    loaded = holder.getBytesLoaded();
    //preloader._visible = true;
    if (loaded != filesize) {
        preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
        preloader._visible = false;
        if (holder._alpha<100) {
            holder._alpha += 10;
function nextImage() {
    if (p<(total-1)) {
        p++;
        if (loaded == filesize) {
            holder._alpha = 0;
            holder.loadMovie(image[p], 1000);
            //desc_txt.text = description[p];
            picture_num();
click._alpha=0;
click.onRelease = function() {
    getURL(link[p], "_blank");
    loopStop();
function HoldImage() {
    nextImage();
    clearInterval(myTimer2);
    loopPlay();
function checkImageState() {
    if (p==total-1) {
        p = -1;
    if (loaded==filesize) {
        clearInterval(myTimer1);
        myTimer2 = setInterval(HoldImage,3000);
function loopPlay() {
    myTimer1 = setInterval(checkImageState, 3000);
function loopStop() {
    clearInterval(myTimer1);
    clearInterval(myTimer2);
function prevImage() {
    if (p>0) {
        p--;
        holder._alpha = 0;
        holder.loadMovie(image[p], 1000);
        target_mc._alpha = 40;
        picture_num();
function firstImage() {
    if (loaded == filesize) {
        holder._alpha = 0;
        holder.loadMovie(image[0], 1000);
        picture_num();
function picture_num() {
    current_pos = p+1;
function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
        target_mc._x = (target_mc._width+10)*k;
        target_mc.pictureValue = k;
        target_mc.onRelease = function() {
            p = this.pictureValue-1;
            nextImage();
        target_mc.onRollOver = function() {
            this._alpha = 40;
        target_mc.onRollOut = function() {
            this._alpha = 100;
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);       

Answer 1

I have a center of energy program similar to the one used by IMAQ. I have attached an example using your data. I first found the center of the entire image. Then I split the array in two and found the centers of each half. That gives you the position of the two spots. This program won't work if the spots are too close to each other or are separeted in the other axis.
Attachments:
distance between two spots one direction.vi ‏1096 KB
Center of energy calc.vi ‏40 KB