i got the images to load and thumbnails to work but now i can't get the images to autosize to fill the working area and to also be centered instead of top left justified.
another issue is the nav list doesnt seem to be loading the css style sheet and there is a white box around the nav list and its not supposed to be there and i cant figure out how to get it to go away.
here is the new code.
Code:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:ATE="http://ns.adobe.com/ate/2009"
xmlns:ai="http://ns.adobe.com/ai/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:flm="http://ns.adobe.com/flame/2008"
xmlns:lib="assets.graphics.slider.*"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="components.*"
width="970" height="511"
initialize="onInit()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.effects.Fade;
import spark.events.IndexChangeEvent;
import spark.events.RendererExistenceEvent;
import valueObjects.ImageVO;
import valueObjects.SectionVO;
[Bindable]
public var selectedSection:SectionVO;
public var selectedIndex:Number;
public var autoTimer:Timer;
public var idleTimer:Timer;
public var sectionData:Array=new Array();
public var xmlLoader:URLLoader=new URLLoader();
public function onInit():void
{
xmlLoader.addEventListener(Event.COMPLETE, handleLoadComplete);
xmlLoader.load(new URLRequest("assets/imageData.xml"));
autoTimer=new Timer(4000);
autoTimer.addEventListener(TimerEvent.TIMER, handleAutoTimerEvent);
idleTimer=new Timer(60000);
idleTimer.addEventListener(TimerEvent.TIMER, handleIdleTimerEvent);
}
public function handleAutoTimerEvent(event:TimerEvent):void
{
setSelectedIndex(selectedIndex + 1);
}
public function handleIdleTimerEvent(event:TimerEvent):void
{
idleTimer.stop();
idleTimer.reset();
autoTimer.start();
}
public function stopTimer():void
{
autoTimer.stop();
autoTimer.reset();
}
public function handleLoadComplete(e:Event):void
{
var image:ImageVO;
var section:SectionVO;
var xmlData:XML=new XML(e.target.data);
for each (var sectionList:XML in xmlData..section)
{
section=new SectionVO();
section.name=sectionList.@name;
for each (var item:Object in sectionList.item)
{
image=new ImageVO();
image.thumb=item.thumb;
image.image=item.image;
section.items.addItem(image);
}
sectionData.push(section);
}
navList.dataProvider=new ArrayCollection(sectionData);
navList.selectedIndex=0;
selectedSection=sectionData[0];
setSelectedIndex(0);
autoTimer.start();
}
public function indexChangeHandler(event:IndexChangeEvent):void
{
idleTimer.reset();
idleTimer.start();
selectedSection=sectionData[event.newIndex];
setSelectedIndex(0);
}
public function handleThumbAdd(event:RendererExistenceEvent):void
{
event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
}
public function handleThumbClick(event:Event):void
{
stopTimer();
idleTimer.reset();
idleTimer.start();
var image:ImageVO=event.currentTarget.data as ImageVO;
setSelectedIndex(selectedSection.items.getItemIndex(image));
}
public function setSelectedIndex(value:Number):void
{
if (value >= selectedSection.items.length)
{
value=0;
}
var selectedImage:ImageVO=selectedSection.items.getItemAt(value) as ImageVO;
if (selectedIndex != value)
{
var pic1:Image=images.removeElementAt(0) as Image;
var pic2:Image=images.getElementAt(0) as Image;
pic1.source=selectedImage.image;
pic1.alpha=0;
images.addElement(pic1);
var fade:Fade=new Fade(pic1);
fade.alphaTo=1;
fade.duration=1500;
fade.play();
selectedIndex=value;
var fade1:Fade=new Fade(pic2);
fade1.alphaTo=0;
fade1.duration=1000;
fade1.play();
}
}
]]>
</fx:Script>
<s:List id="navList"
y="0"
width="155" height="511"
allowMultipleSelection="false"
change="indexChangeHandler(event)"
horizontalCenter="-406"
itemRenderer="components.GalleryButtonRenderer"/>
<s:Group id="images" x="273" y="2"
width="694" height="507"
maxWidth="694" maxHeight="507">
<mx:Image maxWidth="694" maxHeight="507"/>
<mx:Image maxWidth="694" maxHeight="507"/>
</s:Group>
<s:DataGroup id="thumbList" y="2"
width="100" height="507" buttonMode="true"
clipAndEnableScrolling="true"
dataProvider="{selectedSection.items}"
horizontalCenter="-276"
itemRenderer="components.ThumbRenderer"
rendererAdd="handleThumbAdd(event)">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
</s:DataGroup>
<s:VScrollBar y="0" fixedThumbSize="true" horizontalCenter="-219"
skinClass="components.VerticalScrollbarSkin2" viewport="{thumbList}"/>
</s:Group>
also here is my css code:
Code:
@namespace s "library://ns.adobe.com/flex/spark";
@namespace components "components.*";
@font-face
{
fontFamily: "Beast Machines";
src: url("/assets/Fonts/Beast Machines.TTF");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Century Gothic";
src: url("/assets/Fonts/GOTHIC.TTF");
embedAsCFF: true;
}
components|Gallery s|List
{
skinClass: ClassReference("components.VerticalList");
}
components|Gallery components|GalleryButtonRenderer
{
color:#333333;
fontFamily:"Century Gothic";
fontSize: 18;
}
components|Gallery components|GalleryButtonRenderer:hovered
{
color:#009cff;
}
components|Gallery components|GalleryButtonRenderer:selected
{
color:#000000;
}
Before you post, read our: 
