9/6/2010 6:05:21 AM

Title: Scrolling images

---

<?xml version="1.0"?>
<gallery>
    <movie>
    	<pic>titanic.jpg</pic>
    	<title>Titanic</title>
    	<date>1997</date>
    </movie>
    <movie>
    	<pic>shakespeareinlove.jpg</pic>
    	<title>Shakespeare in Love</title>
    	<date>1998</date>
    </movie>
    <movie>
    	<pic>americanbeauty.jpg</pic>
    	<title>American Beauty</title>
    	<date>1999</date>
    </movie>
    <movie>
    	<pic>gladiator.jpg</pic>
    	<title>Gladiator</title>
    	<date>2000</date>
    </movie>
    <movie>
    	<pic>beautifulmind.jpg</pic>
    	<title>A Beautiful Mind</title>
    	<date>2001</date>
    </movie>
    <movie>
    	<pic>chicago.jpg</pic>
    	<title>Chicago</title>
    	<date>2002</date>
    </movie>
    <movie>
    	<pic>lordoftherings.jpg</pic>
    	<title>The Lord of the Rings: The Return of the King</title>
    	<date>2003</date>
    </movie>
    <movie>
    	<pic>milliondollarbaby.jpg</pic>
    	<title>Million Dollar Baby</title>
    	<date>2004</date>
    </movie>
    <movie>
    	<pic>crash.jpg</pic>
    	<title>Crash</title>
    	<date>2005</date>
    </movie>
    <movie>
    	<pic>thedeparted.jpg</pic>
    	<title>The Departed</title>
    	<date>2006</date>
    </movie>
    <movie>
    	<pic>nocountryforoldmen.jpg</pic>
    	<title>No Country for Old Men</title>
    	<date>2007</date>
    </movie>
    <movie>
    	<pic>slumdogmillionaire.jpg</pic>
    	<title>Slumdog Millionaire</title>
    	<date>2008</date>
    </movie>
</gallery>

This is my XML file

and my mxml file is as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="service.send()" height="536" width="852">
	
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			import mx.controls.Image;
			import mx.managers.PopUpManager;
			import mx.events.ResizeEvent;
			import mx.events.ListEvent;
			
			 private var fullImg:Image;
				
			[Bindable]
			private var movies:ArrayCollection;
			
			 
             private function init(obj:Object = null):void {
                if (obj == null) {
                	//lbl.title="";
                    img.source = null;
                } else {
                	//lbl.title = String("assets/poster/"+obj.title).toUpperCase();
                    img.source = "assets/poster/"+obj.pic;
                }
               // moviesList.addEventListener(MouseEvent.MOUSE_MOVE,scrollList);
            } 

            private function horizontalList_change(evt:ListEvent):void {
                init(evt.target.selectedItem);
            }

			//rollout Function
            private function horizontalList_itemRollOut(evt:ListEvent):void {
                if (moviesList.selectedIndex == -1) {
                    init(null);
                } else {
                    init(moviesList.selectedItem);
                }
            }
            
            //rollover Function
             private function horizontalList_itemRollOver(evt:ListEvent):void {
                init(evt.itemRenderer.data);
            }
			
			//previous button on
			 private function prev():void {
                var pos:int = moviesList.horizontalScrollPosition-4;
                var min:int = 0;
                var value:int = Math.max(min, pos);
                moviesList.horizontalScrollPosition = value;
            }
			
			//next button on
            private function next():void {
                var pos:int = moviesList.horizontalScrollPosition+4;
                var max:int = moviesList.maxHorizontalScrollPosition;
                var value:int = Math.min(pos, max);
                moviesList.horizontalScrollPosition = value;
            }


			private function serviceHandler(event:ResultEvent):void{
				movies = event.result.gallery.movie;
			}
		]]>
	</mx:Script>

	<mx:HTTPService id="service" url="xml/data.xml" result="serviceHandler(event)"/>
	<mx:VBox height="503" width="827">
		<mx:HBox width="820">
	<mx:Image id="previous" source="assets/previous.png" click="prev();"/>	
	<mx:HorizontalList id="moviesList" dataProvider="{movies}"   
		rowHeight="160" columnWidth="180" columnCount="4" horizontalScrollPolicy="off" 
		change="horizontalList_change(event);"
        itemRollOver="horizontalList_itemRollOver(event);"
        itemRollOut="horizontalList_itemRollOut(event);">
		<mx:itemRenderer>
			<mx:Component>
				<mx:VBox horizontalAlign="center" verticalAlign="middle">
					<mx:Image   source="assets/thumb/{data.pic}"/>
					<mx:Label text="{data.date}" color="#000000" fontStyle="italic"  />
				</mx:VBox>
			</mx:Component>
		</mx:itemRenderer>
	</mx:HorizontalList>
		<mx:Image id="next1" source="assets/next.png" click="next();"  height="38"/>
	</mx:HBox>
		<mx:VBox width="476" height="301">
			<mx:Image id="img" scaleContent="true"
                horizontalCenter="0"
                verticalCenter="0"
                maintainAspectRatio="true"
                width="250"
                height="250"
                completeEffect="Fade"
		showBusyCursor="true" horizontalAlign="right"/>
	<mx:Label id="lbl" text="{moviesList.selectedItem.title} ({moviesList.selectedItem.date})" 
		fontFamily="Arial" fontSize="12" fontWeight="bold" color="#FFFFFF" textAlign="right" width="256"/>
		</mx:VBox>
		
	</mx:VBox>
	
</mx:Canvas>

And the best example Which I showed is in "http://www.nba.com/" in this website. means when I click on next button all images scroll automatically from left to right and when I click on previous button all images scroll automatically from right to left. Can you help me with code?

9/6/2010 11:59:16 PM

9/7/2010 12:07:47 AM

9/7/2010 1:05:50 AM

9/7/2010 1:21:53 AM

Type your Reply or Answer