-
1. Re: How do I code thumb scroller to have images set to its individual widths?
kglad Apr 27, 2012 8:18 AM (in response to nikolaig)where are the images? are they loaded? are they on-stage? are they in the library with classes assigned?
-
2. Re: How do I code thumb scroller to have images set to its individual widths?
Ned Murphy Apr 27, 2012 8:21 AM (in response to nikolaig)It looks like what you will need to do is manage the x placement differently than how it is currently done. ...
thisOne.x = (140 +20) *item;
You will need to know the width of each image as you place them in order to be able to manage spacing them out evenly. So you need to mainatin an x-placement variable that you use to plant each one. You increase that value based on the image width and desired spacing value for the next image that will be planted... something like...
thisOne.x = currentX;
currentX += currentImageWidth+spaceBetween
-
3. Re: How do I code thumb scroller to have images set to its individual widths?
nikolaig Apr 27, 2012 8:31 AM (in response to kglad)they are in the xml file.
Here is the full code for the scroller up to this point:
//load xml
var xmlLoader:URLLoader = new URLLoader();
/////Parse XML
var xmlData:XML = new XML();
var xmlPath:String = "app_thmbs_imgs.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);
thisOne.x = (140 +20) *item;
thisOne.itemNum = item;
thisOne.title = imageList[item].attribute("title");
thisOne.link = imageList[item].attribute("url");
thisOne.src = imageList[item].attribute("src");
//trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);
//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);
}
Here is teh code from xml file:
<?xml version="1.0" encoding="UTF-8"?>
<images>
<image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-1-bgpA_xsm.jpg" title="CoolingReflections" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-2-zenC_xsm.jpg" title="OrchidsUnderGlass" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-3-luminariesB_xsm.jpg" title="IllumiNight" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-4-eriserC_xsm.jpg" title="InnerElegance" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-5-greenglobeA_xsm.jpg" title="GazingGlow" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-6-bluezen_xsm.jpg" title="LightUpTheNight" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-7-wine_xsm.jpg" title="NightsWineRoses" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-8-pinkorange_xsm.jpg" title="TowerSpec" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-9-snowscapeA_xsm.jpg" title="IcySoph" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-10-vineA_xsm.jpg" title="TheGoldStandard" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-11-lamp_xsm.jpg" title="LampLighter" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-12-stockB_xsm.jpg" title="IllumGarden" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-13-tableB_xsm.jpg" title="TableTopAmore" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-14-URN_xsm.jpg" title="InteriorGlow" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-15-wash_xsm.jpg" title="EWallWash" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ATI-15-washamber_xsm.jpg" title="EWallWashAmber" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/BubbleOasis_RGB_xsm.jpg" title="BubbleOasis" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/ButterflyGlow_RGB_xsm.jpg" title="ButterflyGlow" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/CosmicSushi_RGB_xsm.jpg" title="CosmicSushi" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/CountryTower_RGB_xsm.jpg" title="CountryTower" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/CrystalSparkle_RGB_xsm.jpg" title="CrystalSparkle" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/FlamelessTabletopAccents_RGB_xsm.jpg" title="FlamelessTabletopAccents" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/OrchidLamp_RGB_xsm.jpg" title="OrchidLamp" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/PinkPassion_RGB_xsm.jpg" title="PinkPassion" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/RosesGallasGalore_RGB_xsm.jpg" title="RosesGallasGalore" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/SangriaBling_RGB_xsm.jpg" title="SangriaBling" url="http://www.888acolyte.com"/>
<image src="appThmb_imgs/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com"/>
</images>
-
4. Re: How do I code thumb scroller to have images set to its individual widths?
nikolaig Apr 27, 2012 9:03 AM (in response to Ned Murphy)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?
-
5. Re: How do I code thumb scroller to have images set to its individual widths?
Ned Murphy Apr 27, 2012 9:34 AM (in response to nikolaig)No, that is not a typo, there is nothing wrong with what I showed. You are continually increasing the currentX value. += is a shorthand code for saying
currentX = currentX + whatever
You do not want to specify the var where you did, it would need to be done earlier and would possibly be just...
var currentX = 0; // or whatever the first value of x will be.
So what you changed it to will not work.
The names I gave to the variables you are asking about are descriptive, so you should be able to determine where you get them from.
currentImageWidth is obtained from whatever image you just planted
spaceBetween is whatever amount of space you want between your images.
-
6. Re: How do I code thumb scroller to have images set to its individual widths?
nikolaig Apr 27, 2012 11:32 AM (in response to Ned Murphy)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
-
7. Re: How do I code thumb scroller to have images set to its individual widths?
Ned Murphy Apr 27, 2012 12:05 PM (in response to nikolaig)You seem to be close to what you might need, except you are not doing anything to acquire the width based on what you showed for the xml data.
var currentImageWidth=thisOne.src
The src data from the xml is the path/name of the image file, not the width of it. If you can include the width as a parameter in your xml then you could use that. If you cannot do that, then you need to load the image and acquire its width after it has finished loading... THis would mean you have to change the way you are loading to be sequencial... meaning you load each image and process it thoroughly one at a time. You don't trigger loading another until you are done with the current one.
-
8. Re: How do I code thumb scroller to have images set to its individual widths?
nikolaig Apr 27, 2012 12:35 PM (in response to Ned Murphy)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.
-
9. Re: How do I code thumb scroller to have images set to its individual widths?
Ned Murphy Apr 27, 2012 3:05 PM (in response to nikolaig)No, there are no standardized attributes, you can add anything you want as data in your xml. In your case it will be easier to deal with getting the data thru the xml file.
You should learn to use the trace() function to see if the data you are expecting is what you are getting... such as in
thisOne.currentImageWidth = imageList[item].attribute("width");
trace(thisOne.currentImageWidth);
One other thing you need to account for... when you read in xml data you are reading String values. Your width needs to be a Number, so you need to convert it.
-
10. Re: How do I code thumb scroller to have images set to its individual widths?
nikolaig May 1, 2012 9:18 AM (in response to Ned Murphy)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,completeHandler);
ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, 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);
}
-
11. Re: How do I code thumb scroller to have images set to its individual widths?
Ned Murphy May 1, 2012 1:31 PM (in response to nikolaig)To convert the width String to a Number just change that one line to...
thisOne.currentImageWidth = Number(imageList[item].attribute("width"));
As far as the xml error goes, the problem will be something in your xml file. The only thing that I can see that might cause it is you have a blank space in your first tag closer....
...://www.888acolyte.com" width="123"/ >
should be
://www.888acolyte.com" width="123"/>
-
12. Re: How do I code thumb scroller to have images set to its individual widths?
nikolaig May 2, 2012 8:31 AM (in response to Ned Murphy)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


