projectpanelscreenshotslider.mxml

flex 实现的一个showcase 喜欢flex的朋友可以

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:components="com.flexShowcase.components.*"
	
	width="310"
	height="70"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	
	creationComplete="creationCompleteHandler(event)">
	
	
	<mx:Script>
		<![CDATA[
		
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.AnimationFunctions;
			import com.flexShowcase.data.Screenshot;
			import com.flexShowcase.events.ScreenshotHorizontalListEvent;
			
			import mx.collections.ArrayCollection;
			import mx.effects.Move;
			import mx.events.ListEvent;
			
			//////////////////////////////////////////////////
			//getter/setter variables
			
			[Bindable] private var _images:ArrayCollection;
			
			//////////////////////////////////////////////////
			//private variables
			
			public var _currentImageIndex:uint;
			public var _maxImageIndex:uint;
			
			private var maxImagesPerScreen:uint = 4;
			private var screenNum:uint=0;
			private var imageWidth:uint=72;
			private var sliderTween:Move;
			private var defaultListItemSelected:Boolean=false;//use to select the first list item by default
			private var drawnListItems:Array;
			private var selectedListItem:ProjectPanelScreenshotSliderImage;
			
			[Bindable] private var screenshotHorzListWidth:uint;
			
			//////////////////////////////////////////////////
			//getter/setter functions
			
			[Bindable]
			public function set images(val:ArrayCollection):void{
				if(val!=null){
					_images=val;
					list_mc.dataProvider=val;
					doScrollButtonCheck()
					screenshotHorzListWidth=getScreenshotListWidth()
					
					_maxImageIndex = _images.length - 1;
					_currentImageIndex = 0;

					if(_images.length<2){
						list_mc.visible=false;
					}else{
						list_mc.visible=true;
					}
					selectFirst()
				}
			}
			public function get images():ArrayCollection{
				return _images
			}
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				imagesHolder_mc.mask=mask_mc
				sliderTween=new Move(imagesHolder_mc);
				
				prevBut_mc.visible=false
				nextBut_mc.visible=false
			}
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function handleListItemSelect(event:ListEvent):void{
				var item:ProjectPanelScreenshotSliderImage = event.itemRenderer as ProjectPanelScreenshotSliderImage;
				item.showSelected()
				selectedListItem=item
				_currentImageIndex = event.columnIndex;
				_maxImageIndex = _images.length - 1;
				callForImageDisplay();
				deselectItemsExcept(item)
			}
			private function handleListItemRollOver(event:ListEvent):void{
				var item:ProjectPanelScreenshotSliderImage = event.itemRenderer as ProjectPanelScreenshotSliderImage;
				if(item.data!=list_mc.selectedItem){
					item.handleRollOver() 
				}
				deselectItemsExcept(item)
			}
			private function handleListItemRollOut(event:ListEvent):void{
				var item:ProjectPanelScreenshotSliderImage = event.itemRenderer as ProjectPanelScreenshotSliderImage;
				if(item.data!=list_mc.selectedItem){
					item.handleRollOut() 
				}
				deselectItemsExcept(item)
			}
			
			
			//////////////////////////////////////////////////
			//private functions
			
			private function scrollNext():void{
				var goAmount:int=-(Math.round(maxImagesPerScreen*imageWidth))
			
				sliderTween.end()
				sliderTween.duration=500;
				sliderTween.xBy=goAmount
				sliderTween.play();
				screenNum++
				doScrollButtonCheck()
			}
			private function scrollPrev():void{
				var goAmount:uint=Math.round(maxImagesPerScreen*imageWidth)
				
				sliderTween.end()
				sliderTween.duration=500;
				sliderTween.easingFunction=AnimationFunctions.EXPONENTIAL_EASING_FUNCTION;
				sliderTween.xBy=goAmount
				sliderTween.play();
				
				screenNum--
				doScrollButtonCheck()
			}
			private function doScrollButtonCheck():void{
				var xpos:uint=imagesHolder_mc.x
				var numImagesTotal:uint=images.length;
				var maxPossibleScreens:uint;
				var remainder:uint=numImagesTotal%maxImagesPerScreen
				var numWholeScreens:uint=numImagesTotal/maxImagesPerScreen
				if(remainder==0){
					maxPossibleScreens=numWholeScreens-1
				}else{
					maxPossibleScreens=numWholeScreens
				}
				
				if(numImagesTotal<=1){
					prevBut_mc.visible=false
					nextBut_mc.visible=false
				}else{
					if(screenNum==0){
						if(maxPossibleScreens==0){
							prevBut_mc.visible=false
							nextBut_mc.visible=false
						}else{
							prevBut_mc.visible=false
							nextBut_mc.visible=true
						}
						
					}else if(screenNum==maxPossibleScreens){
						prevBut_mc.visible=true
						nextBut_mc.visible=false
					}else{
						prevBut_mc.visible=true
						nextBut_mc.visible=true
					}
				}
			}
			public function selectFirst():void{
				list_mc.selectedItem=images.getItemAt(_currentImageIndex);
				callForImageDisplay();
			}
			public function selectNext():void{
				var nextindex:Number=_currentImageIndex+1;
				if(nextindex>=images.length){
					nextindex=0;
				}
				_currentImageIndex=nextindex;
				list_mc.selectedItem=images.getItemAt(nextindex);

				callForImageDisplay();
			}
			private function deselectItemsExcept(item:ProjectPanelScreenshotSliderImage):void{
				for(var i:uint=0;i<drawnListItems.length;i++){
					var listItem:ProjectPanelScreenshotSliderImage=drawnListItems[i]
					if(listItem!=item&&listItem!=selectedListItem){
						listItem.handleRollOut() 
					}
				}
			}
			private function callForImageDisplay():void{
				var screenshot:Screenshot = images.getItemAt(_currentImageIndex) as Screenshot;
				var imageURL:String = screenshot.large;
				
				var ev:ScreenshotHorizontalListEvent=new ScreenshotHorizontalListEvent(ScreenshotHorizontalListEvent.SELECT_SCREENSHOT);
				ev.url=imageURL;
				dispatchEvent(ev);
			}
			private function getScreenshotListWidth():uint{
				if(images!=null){
					var width:uint=imageWidth*images.length
				}
				return width
			}
			private function refreshComponent(event:Event=null):void{
				if (images != null) {
					if(images.length>0){
						drawnListItems=new Array()
						
						for(var i:uint=0;i<images.length;i++){
							var item:ProjectPanelScreenshotSliderImage=list_mc.itemToItemRenderer(images.getItemAt(i)) as ProjectPanelScreenshotSliderImage;
							if(item!=null){
								drawnListItems.push(item);
							}
						}
						
						if(drawnListItems.length>0){
							drawnListItems[0].showSelected();
							selectedListItem=drawnListItems[0];
						}
					}
				}
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:Canvas id="mask_mc" x="15" height="66" width="280" backgroundColor="0x990000" alpha="0" />
	<mx:Canvas id="imagesHolder_mc" x="11" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<components:ScreenshotHorizontalList id="list_mc" y="0"
			width="{screenshotHorzListWidth}"
			itemRenderer="com.flexShowcase.components.projectPanel.ProjectPanelScreenshotSliderImage"
			borderStyle="none" borderThickness="0" backgroundAlpha="0" 
			horizontalScrollPolicy="off" verticalScrollPolicy="off"
			change="handleListItemSelect(event)" backgroundColor="0x009900"
			itemRollOver="handleListItemRollOver(event)" itemRollOut="handleListItemRollOut(event)"
			updateComplete="refreshComponent()" />
	</mx:Canvas>

	<mx:Button id="prevBut_mc"  styleName="projectPanelSliderNavButtonBack" x="0" y="20" width="16" height="17" 
		click="scrollPrev()" buttonMode="true" visible="false"/>
	<mx:Button id="nextBut_mc" styleName="projectPanelSliderNavButtonNext" x="294" y="20" width="16" height="17"
	    click="scrollNext()" buttonMode="true" visible="false"/>
	    
	    
</mx:Canvas>