利用AS3.0中TileList类制作图片滚动查看器

package  
{
	import flash.display.Sprite;
	import fl.data.DataProvider;
	import fl.containers.UILoader;//设置要加载的内容,然后在运行时监视加载操作
	import fl.controls.TileList;//提供呈行和列分布的网格,通常用来以“平铺”格式设置并显示图像
	import fl.controls.ScrollBarDirection;//可以使用滚动窗格来限制这些媒体(显示对象和 JPEG、GIF 与 PNG 文件,以及 SWF 文件)类型所占用的屏幕区域
	import fl.events.ListEvent;//列表事件
	
	public class TileListMain extends Sprite
	{
		private var myTileList:TileList;//提供呈行和列分布的网格,通常用来以“平铺”格式设置并显示图像
		private var myUILoader:UILoader;//设置要加载的内容,然后在运行时监视加载操作
		private var mydataprovider:DataProvider;//基于列表的组件,提供呈行和列分布的网格。 可以在该组件顶部指定一个可选标题行,用于显示所有属性名称
		
		public function TileListMain()
		{
			myTileList = new TileList();//创建一个新的TileList
			myUILoader = new UILoader();//创建一个新的UILoader
			mydataprovider = new DataProvider();//创建一个新的DataProvider
			
			mydataprovider.addItem({label:"image1", source:"images/1.jpg"});//加载图片
			mydataprovider.addItem({label:"image2", source:"images/2.jpg"});
			mydataprovider.addItem({label:"image3", source:"images/3.jpg"});
			mydataprovider.addItem({label:"image4", source:"images/4.jpg"});
			mydataprovider.addItem({label:"image5", source:"images/5.jpg"});
			mydataprovider.addItem({label:"image6", source:"images/6.jpg"});
			mydataprovider.addItem({label:"image7", source:"images/7.jpg"});
			
			myTileList.direction = ScrollBarDirection.HORIZONTAL;//设置滚动图片的运动方向
			myUILoader.scaleContent = true;//将图像自动缩放到 UILoader 实例的大小
			myUILoader.autoLoad = false;//否定 UILoader 实例自动加载图片内容
			myUILoader.width = 400; //设置大图的宽
			myUILoader.height = 300;//设置大图的高
			myUILoader.move(75,15);//设置大图的呈现坐标
			addChild(myUILoader);//将大图加载到舞台
			
			myTileList.dataProvider = mydataprovider;//将小图的图片内容和属性传递给滚动列表
			myTileList.columnWidth = 100;//设置小图在滚动列表中的宽
			myTileList.rowHeight = 50;//设置小图在滚动列表中的高
			myTileList.columnCount = 5;//设置在滚动列表中显示的列数
			myTileList.rowCount = 1;//设置在滚动列表中显示的行数
			myTileList.move(5,330);//设置滚动列表的呈现坐标
			addChild(myTileList);//将滚动列表加载到舞台
			myTileList.addEventListener(ListEvent.ITEM_ROLL_OVER,onListEventHandler);//为滚动列表添加鼠标事件
		}
		private function onListEventHandler(e):void
		{
			myUILoader.source = e.item.source;//捕获鼠标目标,传递图片参数
			myUILoader.load();//将目标呈现到舞台
		}
	}	
}

  简单实用,效果很棒。

posted @ 2012-10-17 20:59  小糊涂仙儿  阅读(552)  评论(0编辑  收藏  举报