;
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形式的例子,实现常见的幻灯片形式: