Infoscreen flex with data from xml

[Malek]

Hello

I'm working on a project but I can't figure out how to do it since I'm new to flex.
I need to create a infoscreen about 6 buildings. With 3 pages. 

1. Page 1 is the standby screen. it only has one startbutton. After a time out the user always returns to this screen.
   
2. Page 2 is the collectionscreen. It displays tumbhnails of the buildings.
   
3. Page 3 contains a big picture of the clicked tumbhnail and a voice-over with info about the building.

All data needs to come from 1 xml file. (Content + link to pictures.)

How would I do it with the pages? (viewstates?)

How do I 

insert the time out?

insert the voice over?

make the tumbhnails gallery?

Thanks in advance!

Malek 

[Malek]

This is what I have so far

<?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">

<mx:Script>

<![CDATA[

private function toggleImage():void {

if (rep.currentItem.visible) 

rep.currentItem.visible=false

else 

rep.currentItem.visible=true;

}

]]>

</mx:Script>

<mx:XML id="imagesXML" source="images.xml" />

<mx:Zoom id="zoom" />

<mx:HBox id="hBox">

<mx:Repeater id="rep"

dataProvider="{imagesXML.image}">

 

<mx:Image source="{rep.currentItem.@src}"

  toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"

  completeEffect="{zoom}"

  id="repImage"

  maxWidth="100" 

  maxHeight="70"

  click= maxHeight="{FlexGlobals.topLevelApplication.height}"

  />

</mx:Repeater>

</mx:HBox>

</mx:Application>