problem with making images clickable to call any method at run time while calling from XML file

1 view
Skip to first unread message

amar Shukla_allahabad_delhi_bangalore

unread,
Aug 1, 2008, 8:46:27 AM8/1/08
to Flex India Community
I have a problem.I have a program whose code is given below .in this
program i am making a carousel kind thing to display some images and
when i will click on left right button it will move images back and
forth respectively..like simple carousel component.
I am accessing images using External XML file ,Now problem arise that
how to make images clickable to call diffrent function on diffrent
images.
Like i can use Change event of Horizontal list as
change="{function( )}" to call any function on chaneg event but it
will be unique function call at click on every image in horizontal
list ..
nd i want to call diffrent function on clicking at diffrent images...
below i am pasting my code-

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="410" height="400"
layout="absolute" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.collections.XMLListCollection;
import mx.utils.ObjectUtil;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;

/*
// STATIC DATA This array collection holds the data for the tile
list..
[Bindable] public var fabrics:ArrayCollection = new
ArrayCollection(
[ {fabric:"assets/radial.png"},
{fabric:"assets/4sqrs.jpg"},
{fabric:"assets/fabric1.JPG"},
{fabric:"assets/fabric2.JPG"},
{fabric:"assets/fabric3.JPG"},
{fabric:"assets/fabric4.JPG"}
]
);

*/

[Bindable] public var fabrics:ArrayCollection;
[Bindable] public var ria:ArrayCollection;

public function init():void
{
httpReqFabric.send()
}

private function getFabrics (e:ResultEvent):void
{
var xmlFabric:XML
var arrFabric:Array= new Array();
var arrRia:Array=new Array();

//get XML
xmlFabric = e.result as XML;


// loop through XML and get data...
for each (var item:XML in xmlFabric.children())
{
arrFabric.push( {fabric:item.toString()} )
//arrRia.push( {ria:item.toString()})
}
fabrics = new ArrayCollection ( arrFabric);
//ria=new ArrayCollection(arrRia);


}

private function faultHandler(e:FaultEvent):void
{
Alert.show( "Fault :: " + e.message );
}

public function scrollLeft():void
{
var pos:int = hListComp.horizontalScrollPosition - 1;
var min:int = 0;
var value:int = Math.max(min, pos);
hListComp.horizontalScrollPosition = value;
}


public function scrollRight():void
{
var pos:int = hListComp.horizontalScrollPosition + 1;
var max:int = hListComp.maxHorizontalScrollPosition;
var value:int = Math.min(pos, max);
hListComp.horizontalScrollPosition = value;
}
public function amar():void{


}

]]>
</mx:Script>

<mx:HTTPService id="httpReqFabric"
url="data.xml"
method="POST"
useProxy="false"
resultFormat="e4x"
result="getFabrics(event)"
fault="faultHandler(event)"
/>



<mx:HBox height="120" width="98%" verticalAlign="bottom"
horizontalGap="5" backgroundAlpha="0" horizontalAlign="center">

<mx:Image id="imgLeftArrow" source="assets/left_arrow.gif"
width="15"
click="scrollLeft()"/>

<mx:HorizontalList id="hListComp"
dataProvider="{fabrics}"
useRollOver="true"
itemRenderer="FabricThumbnail"
width="100%"
height="100%"
columnWidth="120" rowHeight="120"
dragEnabled="true"
borderStyle="none"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
change="amar()"
/>
<mx:Image id="imgRightArrow" source="assets/right_arrow.gif"
width="15"
click="scrollRight()"/>
</mx:HBox>
</mx:Application>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
code of data.xml file where i have stores image paths

<?xml version='1.0' encoding='utf-8'?>
<fabrics>
<fabric>
assets/amar.jpg
</fabric>
<fabric>
assets/radial.png
</fabric>

</fabrics>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
FabricThumbnail.mxml as a renderor component

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox width="100%" height="100%" horizontalAlign="center"
verticalAlign="middle"
xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="5"
useHandCursor="true" buttonMode="true" mouseChildren="true"
>

<mx:Script>
<![CDATA[

]]>
</mx:Script>

<mx:VBox id="thumbFabricComp" width="100" height="100"
verticalGap="5" >
<mx:Image
id="image"
source="{ data.fabric}"
width="100"
height="100"
horizontalAlign="center"
complete="thumbFabricComp.visible = true;" />

</mx:VBox>

</mx:VBox>


---------------------------------------------------------------------------------------------------------------------------------------------------------------------
So this is the problem and i hope i was able to explain my problem
well...
Please ask me if you did'nt get my problem.
Thank You!
:)

Pradeek

unread,
Aug 2, 2008, 12:30:46 AM8/2/08
to Flex India Community
Are you trying to make 3D carousel?

Abdul Qabiz

unread,
Aug 2, 2008, 5:20:30 AM8/2/08
to flex_...@googlegroups.com
Did you look at itemClick event of HorizontalList? This should be dispatched when an individual item is clicked, you would get also get references/values of various item related things in event object.

-abdul


On Sat, Aug 2, 2008 at 10:00 AM, Pradeek <pra...@gmail.com> wrote:

Are you trying to make 3D carousel?





--
-abdul
---------------------------------------
http://abdulqabiz.com/blog/
---------------------------------------

amar Shukla_allahabad_delhi_bangalore

unread,
Aug 4, 2008, 12:36:41 AM8/4/08
to Flex India Community
ya Pradeek its kind of carousel but no 3Dt circular but a simple
carousel ...

And Thnx Abdul!

brij

unread,
Sep 19, 2008, 2:36:12 AM9/19/08
to Flex India Community
Hi,

Just came across this link on Flex / Flash Carousel. So thought of
sharing it with you.

http://www.shinedraw.com/animation-effect/flash-vs-silverlight-image-carousel/

Regards,
Brijesh

Flexian_me

unread,
Sep 22, 2008, 4:01:47 AM9/22/08
to Flex India Community
oh thx alot for sahring dude!

:)

it can help others too if they have same kind of requirement in
future ...
:)
Reply all
Reply to author
Forward
0 new messages