1.可用鼠标直接拖扔,让其流动;也拽动下方的滚动条(鼠标滑过时显示);
2. 该例子中有140多幅图,是采用多线程、异步加载的;


显示样式:


倒影Alpha(透明度):


倒影高度(百分比):





1.ImageFlow 图片下载的默认策略:只下载当前位置左、右各 50 幅,所以哪怕有最多的图片,也不可能永无休止地下载;
2.可查看创建Freeform的XML描述文件
3.其中的 ImageFlow 控件加载了和图片相关的XML数据,其中有一部分图片的URL采用了图片扩展URL的写法
4.注意ImageFlow是没有背景属性的,直接采用了Freeform中的上下文背景;
5.源码分析:页面的鼠标点击事件如下:
 function OnEvent(id, Event, p1, p2, p3, p4)
 {
  if(Event=='ImageClicked' || Event=='ImageDblClicked') {
   var s = "txt2 \r\n ID号:"+p1+", 资料名称:"+p2;
   if(Event=='ImageDblClicked') s += '(事件:鼠标双击)';
   AF.func("setValue", s);
  }
 }

6.不太常用的高级功能:
可动态更改属性、动态添加Path(渲染路径),请执行,看看上面的Freeform有什么变化。该效果的js如下:
function advance()
{
 //更改背景色
 AF.func("setProp", "bgColor \r\n #ffffff");
 
 //更改ImageFlow样式、宽度
 AF.func("setObjectProp", "flow \r\n style \r\n horz");
 AF.func("setObjectProp", "flow \r\n x1 \r\n 10%");
 AF.func("setObjectProp", "flow \r\n x2 \r\n 90%");
 
 //添加一个矩形Path,下面都会用到
 var path="<path id='path1'><rect x='0' y='0' width='100%' height='100%'/> </path>";
 AF.func("addPath", path);
 
 //在ImageFlow的背面增加一个平铺的Img
 var s = "image \r\n src=res/back1.jpg;x=flow.left;y=flow.top; width=flow.width; height=flow.height; arrange=tile; pathid=path1; \r\n flow";
 AF.func("addObject", s);
 
 //增加左阴影 (线性渐变)
 AF.func("addObject", "Rect \r\n id=rcLeft; x=flow.left;y=flow.top;width=10; height=flow.height; pathid=path1; thick=0; ");
 AF.func("setObjectProp", "rcLeft \r\n Filter \r\n start.color=#000000; start.alpha=255; end.alpha=0; start.x=0; start.y=0; end.x=100%; end.y=0");
 
 //增加上阴影 (线性渐变)
 AF.func("addObject", "Rect \r\n id=rcTop; x==flow.left;y=flow.top; width=flow.width; height=8; pathid=path1; thick=0; ");
 AF.func("setObjectProp", "rcTop  \r\n Filter \r\n start.color=#000000; start.alpha=255; end.alpha=0; start.x=0; start.y=0; end.x=0%; end.y=100%");
}
当然,如果你决定采用这种样式,可以直接写进Freeform的XML描述文件,不必写这js了。

7.这是滚动条采用Digital形式的例子,实现常见的幻灯片形式: