<?xml version=”1.0″ encoding=”utf-8″?>
<Canvas xmlns=”http://ns.adobe.com/mxml/2009″>
<Script>
<![CDATA[
import flashx.textLayout.formats.Direction;
import flash.utils.clearInterval;
import flash.utils.setInterval;
import mx.effects.AnimateProperty;
import mx.effects.easing.Exponential;
private var fx:AnimateProperty = new AnimateProperty();
private var index:uint;
/**
* Right click event
*/
private function moveRight():void {
index = setInterval(doMove,300,100);
doMove(100);
}
/**
* Left click event
*/
private function moveLeft():void {
index = setInterval(doMove,300,-100);
doMove(-100);
}
private function clear():void {
clearInterval(index);
}
/**
* Moving animation
*/
private function doMove(direction:Number):void {
fx.stop();
fx.property = "horizontalScrollPosition";
fx.easingFunction = Exponential.easeOut;
fx.toValue = imageContainer.horizontalScrollPosition + direction;
fx.play([imageContainer]);
}
]]>
</Script>
<Canvas y=”409″ width=”723″ height=”85″ backgroundColor=”#DAD8D8″
cornerRadius=”8″ borderStyle=”solid”>
<Image source=”assets/images/NavigationLeft.png” mouseDown=”moveLeft()”
mouseUp=”clear()” doubleClickEnabled=”true” x=”3″ y=”35″
useHandCursor=”true” buttonMode=”true” />
<Image source=”assets/images/NavigationRight.png” mouseDown=”moveRight()”
mouseUp=”clear()” doubleClickEnabled=”true” x=”700″ y=”35″
useHandCursor=”true” buttonMode=”true”/>
<HBox id=”imageContainer” height=”75″ x=”21″ width=”678″ y=”5″
horizontalScrollPolicy=”off” horizontalGap=”0″ >
<Repeater id=”imagesRepeater” >
<Image height=”75″ width=”75″
source=”{sourceOfImage}”
useHandCursor=”true” buttonMode=”true” />
</Repeater>
</HBox>
</Canvas>
</Canvas>
This will create a component in which images will be displayed in horizontally aligned box.
By fixing the size of HBox, images will be displayed with in that area. By clicking on left
and right navigation images, we can navigate to either ends to see all images. This have
animation effect. We can change the effects as per the requirement
(plz comment in english)
