9/6/2010 3:49:52 AM
Title:
Scrolling Images
I am creating one image gallery and I want to Scroll all images. All Images are come from one XML file.Structure of XML file as follows
<?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>
And I want to scroll images automatically from left to right and from right to left.
My mxml file code 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>
So can you help me how this done?If it is with code is more helpful.
9/6/2010 4:19:06 AM
what do you mean by scroll. If you load images in a horizontal list component then there will be a scrollbar automatically if images exceed the area. And what about the above code , is it working or not .
9/6/2010 4:28:45 AM
Hi Andrid,
The above code is working.I want when I click on next button the images are scroll automatically from left to right and the scrolling stops when last image appears.And again when I click on previous button the images are scroll automatically from right to left.
"Scroll" means moving.
It is not mean I want scrollbar.
9/6/2010 6:23:23 AM
you can simply place two buttons and on next press execute this code
moviesList.horizontalScrollPosition+=1;
on previous this
moviesList.horizontalScrollPosition-=1;
9/6/2010 10:53:38 PM
Hi Friend,
But It's not working properly.
The best example of what I want is present in "http://www.nba.com/" website
or in "yahoo.com"
so Can u give me the solution for that?