beta
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.
5/21/2010 12:41:03 AM
Title: how to repeat the images in a horizontal list
hi all,
i have a horizontal list in which images are displayed from a xml file .say there are 5 images ,after completion of 5th image the 1st image and so on should display.
in simple i want the horizontal list to scroll the images in a clockwise direction and anti-clockwise direction based on mouse movement.
thanks in advance,if u have sample code ,i will be greatfull to u
1
you can use mouse listener to scroll your image list using HorizontalList component in flex . You need to write the following code in actionscript 3.0 to make it scroll with mouse
private function init():void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,scrollList);
}
private function scrollList(evt:MouseEvent):void{
//move to left if mouse is left side of screen
if(mouseX<stage.width/2){
if(horizontalList.horizontalScrollPosition>0){
horizontalList.horizontalScrollPosition-=1;
}
}else{
//move to right if mouse is on right side of screen
if(horizontalList.horizontalScrollPosition<horizontalList.maxHorizontalScrollPosition){
horizontalList.horizontalScrollPosition+=1;
}
}
}
2
hi kiney,
its not working ,plz help,following is my component code
its not working ,plz help,following is my component code
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="imgService.send()" width="478" height="155"
xmlns:v="components.*" initialize="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
private function imgresultHandler(event:ResultEvent):void{
var imgdata:Object=event.result as XML;
}
private function imghandleFault(event:FaultEvent):void{
trace(event.fault.faultCode+":"+event.fault.faultString);
}
private function handleNext(event:MouseEvent):void{
Alert.show("scroll right");
}
private function handlePrev(event:MouseEvent):void{
Alert.show("scroll left");
}
private function init():void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,scrollList);
}
private function scrollList(evt:MouseEvent):void{
//move to left if mouse is left side of screen
if(mouseX<stage.width/2){
if(imghlist.horizontalScrollPosition > 0){
imghlist.horizontalScrollPosition-=1;
}
}else{
//move to right if mouse is on right side of screen
if(imghlist.horizontalScrollPosition<imghlist.maxHorizontalScrollPosition){
imghlist.horizontalScrollPosition+=1;
}
}
}
]]>
</mx:Script>
<mx:HTTPService id="imgService" url="imagescrolldata.xml" resultFormat="e4x" result="imgresultHandler(event)"
fault="imghandleFault(event)"/>
<mx:XMLListCollection id="imgList" source="{imgService.lastResult.spotdetails}"/>
<mx:Button id="butright" label=">" click="handleNext(event)"/>
<mx:HorizontalList id="imghlist" columnWidth="125" rowHeight="125" columnCount="3"
dataProvider="{imgList}" itemRenderer="components.ImageAndDesc" itemClick="imgEventHandler(event)"
mouseOver="mover(event)" width="375"/>
<mx:Button id="butleft" label="<" click="handlePrev(event)"/>
</mx:Canvas>
3
check the below code it works when you move your mouse over the tilelist , if mouse is on the left of image list then it scrolls to left else right.
private function init():void{
imghlist.addEventListener(MouseEvent.MOUSE_MOVE,scrollList);
}
private function scrollList(evt:MouseEvent):void{
if(imghlist.mouseX<imghlist.width/2){
if(imghlist.horizontalScrollPosition>0){
imghlist.horizontalScrollPosition-=1;
}
}else{
if(imghlist.horizontalScrollPosition<imghlist.maxHorizontalScrollPosition){
imghlist.horizontalScrollPosition+=1;
}
}
}
4
Hi kinley,
i still have problem ,i want to scroll the images inside the horizontal list but now the complete horizontal box is moving based on the mouse movement.
with this code the whole list box is moving
view plaincopy to clipboardprint
i still have problem ,i want to scroll the images inside the horizontal list but now the complete horizontal box is moving based on the mouse movement.
with this code the whole list box is moving
view plaincopy to clipboardprint
private function scrollList():void{
if(imghlist.x<500){
imghlist.x+=5;
}else{
imghlist.x=0;
}
}
private function scrollList():void{
if(imghlist.x<500){
imghlist.x+=5;
}else{
imghlist.x=0;
}
}
5
Insert Code here
<?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>
Post your Reply