As I understan there is a typo in Ned Murphy's answer.

currentX += currentImageWidth+spaceBetween has to be changed to currentX = currentImageWidth+spaceBetween, i.e. += would be changed to =

It also seems that it is implied that currentX = currentImageWidth+spaceBetween has to be specified as var

Her is how I altered my code:

  var currentX = currentImageWidth+spaceBetween;

                    //thisOne.x = (140 +20) *item;

                    thisOne.x = currentX;//modified line to adjust variable thumb widths

How would I define properties of currentImageWidth and spaceBetween?

I can not figure out how to proceed further. I tried to implement the changes outlined by you, but missing something which should have been understood by me.

Here is my new version of the code and images look all jambled up together:

  var currentX=390;

                    //thisOne.x = (140 +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                    thisOne.x = currentX;//modified line to adjust variable thumb widths

                    thisOne.itemNum = item;

                    thisOne.title = imageList[item].attribute("title");

                    thisOne.link = imageList[item].attribute("url");

                    thisOne.src = imageList[item].attribute("src");

                    //var set up for images appeance

                    var spaceBetween=20;

                    var currentImageWidth=thisOne.src

                    currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths

Yes, it seems to me that I am very close to that too.

Unfortunately your latest suggestion leaves to much up to my limited knowledge.

Altering xml file seemed at first as an easier solution so I added an attribute of width into an xml line of code:

<image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com" width="123"/ >

However looks lie I can not just start adding attributes unless they are standardised attributes?

Then in Flash AS3 version I tried the following:

var currentX=390;

                    //thisOne.x = (140 +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                    thisOne.x = currentX;//modified line to adjust variable thumb widths

                    thisOne.itemNum = item;

                    thisOne.title = imageList[item].attribute("title");

                    thisOne.link = imageList[item].attribute("url");

                    thisOne.src = imageList[item].attribute("src");

                    thisOne.currentImageWidth = imageList[item].attribute("width");

                    //var set up for images appeance

                    var spaceBetween=20;

                    var currentImageWidth=thisOne.currentImageWidth

                    currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths

Nothing worked.

If AS3 solution with changing the loading to be sequencial is easier could you specify the code for it?

I tried a goodle search for a tutorial on sequencial loading but came out empty handed.

I updated my xml fine with width settings unique for each image.

so now it looks like this:

<images>

<image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com" width="123"/ >

<image src="appThmb_imgs/ATI-1-bgpA_xsm.jpg" title="CoolingReflections" url="http://www.888acolyte.com" width="113"/>

<image src="appThmb_imgs/ATI-2-zenC_xsm.jpg" title="OrchidsUnderGlass" url="http://www.888acolyte.com" width="193"/>

<image src="appThmb_imgs/ATI-3-luminariesB_xsm.jpg" title="IllumiNight" url="http://www.888acolyte.com" width="123"/>

</images>

I get this error:

loading xml from: app_thmbs_imgsModfd.xml

xml load complete

TypeError: Error #1090: XML parser failure: element is malformed.

          at app_thmbs_imgsVarWdth_fla::MainTimeline/LoadXML()

          at flash.events::EventDispatcher/dispatchEventFunction()

          at flash.events::EventDispatcher/dispatchEvent()

          at flash.net::URLLoader/onComplete()

I am not sure how do I specify a number if each image has a different number value. Would it be better to have it as string, so this string picks up whatever the current number would be?

Here is the entire AS3 code:

//load xml

var xmlLoader:URLLoader = new URLLoader();

/////Parse XML

var xmlData:XML = new XML();

var xmlPath:String = "app_thmbs_imgsModfd.xml";

xmlLoader.load(new URLRequest(xmlPath));

trace("loading xml from: " + xmlPath);

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

function LoadXML(e:Event):void {

          trace("xml load complete");

          xmlData = new XML(e.target.data);

          //trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList

          buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function

}

/////Build Scroller MovieClip to Contain Each Image

var scroller:MovieClip = new MovieClip();

this.addChild(scroller);

scroller.y = 30;

/////

/////Parse XML

//build scroller from xml

function buildScroller(imageList:XMLList):void{

          trace("build Scroller");

          for (var item:uint = 0; item<imageList.length();item++) {

                    var thisOne:MovieClip = new MovieClip();

                    /*//outline

                    var blackBox:Sprite = new Sprite();

                    blackBox.graphics.beginFill(0xFFFFFF);

                    blackBox.graphics.drawRect(-1, -1, 124, 107);

                    thisOne.addChild(blackBox);*/

                    var currentX=290;

                    //thisOne.x = (140 +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                    thisOne.x = currentX;//modified line to adjust variable thumb widths

                    thisOne.itemNum = item;

                    thisOne.title = imageList[item].attribute("title");

                    thisOne.link = imageList[item].attribute("url");

                    thisOne.src = imageList[item].attribute("src");

                    thisOne.currentImageWidth = imageList[item].attribute("width");

                    trace(thisOne.currentImageWidth);

                    //var set up for images appeance

                    var spaceBetween=20;

                    var currentImageWidth=thisOne.currentImageWidth

                    currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths

                    //trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);

                    //Loading and Adding the Images

                    //image container

                    var thisThumb:MovieClip = new MovieClip();

                    //add image

                    var ldr:Loader = new Loader();

                    var url:String = imageList[item].attribute("src");

                    var urlReq:URLRequest = new URLRequest(url);

                    trace("loading thumbnail "+item+" into Scroller: " + url);

                    //assign event listeners for Loader

                    ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,compl eteHandler);

                    ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERRO R, errorHandler);

                    ldr.load(urlReq);

                    thisThumb.addChild(ldr);

                    thisOne.addChild(thisThumb);

                    //create listeners for this thumb

                    thisOne.buttonMode = true;

                    thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

                    thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);

                    thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);

                    //add item

                    scroller.addChild(thisOne);

          }

          trace("termination of build scroller");

}

function clickScrollerItem(e:MouseEvent):void{

          trace("clicked item " +e.currentTarget.itemNum + " - visit url: " +e.currentTarget.link);

}

function overScrollerItem(e:MouseEvent):void{

          trace("over"+e.currentTarget.title);

}

function outScrollerItem(e:MouseEvent):void{

          trace("out"+e.currentTarget.title);

}

function completeHandler(e:Event):void{

          trace("thumbnail complete "+e.target.loader.parent.parent.title);

}

function errorHandler(e:IOErrorEvent):void{

          trace("thumbnail error="+e);

}

Wow, the scary joy of coding. It was the blank space in the first line of xml code before the closing > which caused the problem.

Aside of not knowing, I would have never guessed it.

This part of an extra empty space which sends everything awry always scares me of the coding process. Are there any methods, check engines, proof reading buttons to turn on in DreamWeaver which would point out to those simple but hard to notice mistakes?

So there is no mistakes now in xml file.

However I can not make the flash file to produce desirable results. I still see the images all jammed up together and not spread apart with equal distances.

Here is the part of the code from AS3 setting:

//load xml

var xmlLoader:URLLoader = new URLLoader();

/////Parse XML

var xmlData:XML = new XML();

var xmlPath:String = "app_thmbs_imgsModfd.xml";

xmlLoader.load(new URLRequest(xmlPath));

trace("loading xml from: " + xmlPath);

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

function LoadXML(e:Event):void {

          trace("xml load complete");

          xmlData = new XML(e.target.data);

          //trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList

          buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function

}

/////Build Scroller MovieClip to Contain Each Image

var scroller:MovieClip = new MovieClip();

this.addChild(scroller);

scroller.y = 30;

/////

/////Parse XML

//build scroller from xml

function buildScroller(imageList:XMLList):void{

          trace("build Scroller");

          for (var item:uint = 0; item<imageList.length();item++) {

                    var thisOne:MovieClip = new MovieClip();

                    /*//outline

                    var blackBox:Sprite = new Sprite();

                    blackBox.graphics.beginFill(0xFFFFFF);

                    blackBox.graphics.drawRect(-1, -1, 124, 107);

                    thisOne.addChild(blackBox);*/

                    var currentX=290;

                    thisOne.x = (currentImageWidth +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                    thisOne.x = currentX;//modified line to adjust variable thumb widths

                    thisOne.itemNum = item;

                    thisOne.title = imageList[item].attribute("title");

                    thisOne.link = imageList[item].attribute("url");

                    thisOne.src = imageList[item].attribute("src");

                    thisOne.currentImageWidth = Number(imageList[item].attribute("width"));

                    trace(thisOne.currentImageWidth);

                    //var set up for images appeance

                    var spaceBetween=20;

                    var currentImageWidth=thisOne.currentImageWidth

                    currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths