header
ask question
Click here to ask Question Now Its free No registration required. Flash, Flex, Flash Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
Priyanka Kshirsagar
Points:0
Posts:0

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.



1
Andrid
Points: 720
Posts:0
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 .

2
Priyanka Kshirsagar
Points: 0
Posts:0
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.

3
Friend
Points: 710
Posts:0
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;

4
Priyanka kshirsagar
Points: 0
Posts:0
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?


Post your Reply
Name  

Email

Type your Reply or Answer

Are you human? What is 2+6 



Members Login

Email  
Password
Forgot Password





This website focus on: Flash | Flex | FMS | RED5 | WOWZA | Flash Media Server | Adobe AIR | ActionScript,Flash Solutions | Flash Question | Flash Answers | Flash Developers | Flash Problem, Flash Help, Flash bugs, Flash workaround | Flash Blog | Flex Question Answers | Flash Forum | Flex Development | Actionscript development | Flash development | Adobe AIR development
Copyright © 2008 AskMeFlash.com. All rights reserved. Privacy Policy | Terms & Conditions