jenkins windows节点:[原创]Flash网站模块化拖动技术探解（New）

[原创]Flash网站模块化拖动技术探解（New）
[Noneo原创教程]
一.概述
目前MS和Google等大公司的网站里渐渐出现一种技术,可以实现用户界面的页面模块化拖动,我把它称之为网站模块化拖动技术.
先来看看一个MSN mySpace的例子,注意两张图片的不同:
(网址为:spaces.msn.com,没有MSN账号的要注册)
[upload=gif]UploadFile/2005-7/2005727132912969.gi
[upload=gif]UploadFile/2005-7/2005727132922100.gi
而实现这一过程,只需用户在网页上拖动相应的模块,就能完全按自己的个人喜好,调整网页模块的位置,当然相信这些公司网站上出现的出于更多的目的是为了增加更多的用户体验,吸引更多的用户.
而我们要做的是用flash来实现这一技术,并且加予应用.
(未完待续)

附件
2005-7-27 21:29
下载次数: 31
2005-7/2005727132912969.gif (14.24 KB)
2005-7-27 21:29
下载次数: 30
2005-7/2005727132922100.gif (15.06 KB)
引用  报告回复
(Noneo)
注册会员

UID 460176
精华 0
积分 10
帖子 54
技术分 4
阅读权限 20
注册 2005-7-5
状态 离线
#2
使用道具
发表于 2005-7-27 21:32 资料  个人空间 短消息 加为好友

二.简单排列的模块
首先我们得做个实验,就把网站想像成一块一块的,比如"新闻"一块,"会员登陆口"一块,"最新文章"一块,我们怎么对它们进行拖动呢?
OK,开始理清一下思路,现在我们现在必须考虑的是这些块要怎么排上去?
我们先不管什么"新闻","会员登陆口","最新文章"这些里面的内容,全部当他是MC1,MC2,MC3,实验先从简单化入手!
打开flash,做个类似下图的MC,MC里有个动态文本框,变量名:mcText ,同时给这个MC加上相应链接标识
[upload=gif]UploadFile/2005-7/200572713362571.gi
//======================flash源代码======================//
//先定个边距，10px
var border:Number = new Number(10);
var Xmodel = border;
var Mod:Array = new Array();
this.attachMovie("MC", "MC", this.getNextHighestDepth());
this.MC._visible = false;
//用二维数组对MC位置进行排列，假定为2行，2列
//列的循环
for (var i = 0; i<2; i++) {
var Ymodel = border;
//注意二维数组要先定义一维数组
Mod = new Array();
//行的循环
for (var j = 0; j<2; j++) {
duplicateMovieClip(MC, "MC"+i+j, this.getNextHighestDepth());
Mod[j] = "MC"+i+j;
//MC里的文本，用来区分不同MC
this[Mod[j]].mcText = "MC"+i+j;
this[Mod[j]]._y = Ymodel;
Ymodel += Number(this[Mod[j]]._height)+border;
this[Mod[j]]._x = Xmodel;
xx = Number(this[Mod[j]]._width);
}
Xmodel += xx+border;
}
//======================flash源代码======================//
这样MC的简单排列就完成了, 这是效果:
[upload=swf]UploadFile/2005-7/200572713392472.sw
[flash=481,341]UploadFile/2005-7/200572713392472.swf[/flash]
fla文件在下面的章节里会有
(未完待续)

附件
附件:2005-7/200572713392472.swf (2005-7-27 21:39, 554 Bytes)
',1)">
2005-7-27 21:36
下载次数: 35
2005-7/200572713362571.gif (8.64 KB)
引用  报告回复
(Noneo)
注册会员

UID 460176
精华 0
积分 10
帖子 54
技术分 4
阅读权限 20
注册 2005-7-5
状态 离线
#3
使用道具
发表于 2005-7-27 21:32 资料  个人空间 短消息 加为好友

三. 拖动和自动排序
在做完了模块的简单排列后,我们必须让每个模块能够按我们所希望的拖动,而且还必须自动排序,这节内容是MC数组的自动排序.
//======================flash源代码======================//
//先定个边距，10px
var border:Number = new Number(10);
var Xmodel = border;
var Mod:Array = new Array();
var Wmod:Array = new Array();
this.attachMovie("MC", "MC", this.getNextHighestDepth());
this.MC._visible = false;
//用二维数组对MC位置进行排列，假定为2行，2列
//列的循环
for (var i = 0; i<2; i++) {
var Ymodel = border;
//注意二维数组要先定义一维数组
Mod = new Array();
//行的循环
for (var j = 0; j<2; j++) {
duplicateMovieClip(MC, "MC"+i+j, this.getNextHighestDepth());
Mod[j] = "MC"+i+j;
//MC里的文本，用来区分不同MC
this[Mod[j]].mcText = "MC"+i+j;
this[Mod[j]]._y = Ymodel;
Ymodel += Number(this[Mod[j]]._height)+border;
this[Mod[j]]._x = Xmodel;
xx = Number(this[Mod[j]]._width);
}
Xmodel += xx+border;
////////////////////////////////////////////////////////////////////////////////////////
这里以上是上一讲里面的代码
////////////////////////////////////////////////////////////////////////////////////////
//创建一个新的数组用来做为传递的中介
var aa:Array = new Array();
for (var k = 0; k<2; k++) {
aa[k] = new Array();
for (var l = 0; l<2; l++) {
aa[k][l] = Mod[j];
//这里的n和m是用来定位，比如当n=1,m=0时，程序就可以很快知道现在拖的是第二列第一个模块了
this[aa[k][l]].n = String(i);
this[aa[k][l]].m = String(j);
}
}
}
//创建函数
//这是拖动时的函数,改变MC深度,透明度
function moveOver(n, m, flagX, Xmove) {
this[aa[n][m]].swapDepths(m);
this[aa[n][m]]._alpha = 100;
if (n != flagX) {
//添加数组元素，而添加的内容正是当前拖动着的
aa[flagX].splice(0, 0, aa[n][m]);
aa[n].splice(m, 1);
}
//对数组进行重新排序,因为每次拖动都会至少影响两个MC数组的位置
for (var i = 0; i<2; i++) {
for (var k = aa.length; k>0; k--) {
for (var j = 0; j<(k-1); j++) {
if ((this[aa[j]]._y+this[aa[j]]._width)/2>this[aa[j+1]]._y) {
tt = aa[j+1];
aa[j+1] = aa[j];
aa[j] = tt;
}
}
}
}
}
//======================flash源代码======================// (未完待续)
引用  报告回复
Noneo (Noneo)
注册会员

UID 460176
精华 0
积分 10
帖子 54
技术分 4
阅读权限 20
注册 2005-7-5
状态 离线
#4
使用道具
发表于 2005-7-27 21:33 资料  个人空间 短消息 加为好友

四. 简单的demo
经过了之前三章的了解，结合前面的代码,我们开始试着为模块的拖动做一个简单的demo
主要实现拖动后数组的重新排序及移动位置。
下面代码有注释应该不难理解的
//======================flash源代码======================//
//先定个边距，10px
var border:Number = new Number(10);
var Xmodel = border;
var Mod:Array = new Array();
var Wmod:Array = new Array();
this.attachMovie("MC", "MC", this.getNextHighestDepth());
this.MC._visible = false;
//用二维数组对MC位置进行排列，假定为3列，2行
var Cols:Number = 3;
var Rows:Number = 2;
//列的循环
for (var i = 0; ivar Ymodel = border;
//注意二维数组要先定义一维数组
Mod = new Array();
//行的循环
for (var j = 0; jduplicateMovieClip(MC, "MC"+i+j, this.getNextHighestDepth());
Mod[j] = "MC"+i+j;
//MC里的文本，用来区分不同MC
this[Mod[j]].mcText = "MC"+i+j;
this[Mod[j]]._y = Ymodel;
Ymodel += Number(this[Mod[j]]._height)+border;
this[Mod[j]]._x = Xmodel;
xx = Number(this[Mod[j]]._width);
}
Xmodel += xx+border;
}
//创建一个新的数组用来做为传递的中介
var aa:Array = new Array();
for (var i = 0; iaa = new Array();
for (var j = 0; jaa[j] = Mod[j];
//这里的n和m是用来定位，比如当n=1,m=0时，程序就可以很快知道现在拖的是第二列第一个模块了
this[aa[j]].n = String(i);
this[aa[j]].m = String(j);
}
}
//创建函数
//鼠标拖动时，改变模块的深度和透明度
function Modlocation(n, m) {
this[aa[n][m]].swapDepths(this.getNextHighestDepth());
this[aa[n][m]]._alpha = 30;
}
//这是拖动时的函数。flagX：将要移动到的列
function moveOver(n, m, flagX, Xmove) {
this[aa[n][m]].swapDepths(m);
this[aa[n][m]]._alpha = 100;
this[aa[n][m]]._width = this[Mod[flagX][0]]._width;
if (n != flagX) {
//添加数组元素，而添加的内容正是当前拖动着的
aa[flagX].splice(0, 0, aa[n][m]);
aa[n].splice(m, 1);
}
//对数组进行重新排序
for (var i = 0; ifor (var k = aa.length; k>0; k--) {
for (var j = 0; j<(k-1); j++) {
if ((this[aa[j]]._y+this[aa[j]]._width)/2>this[aa[j+1]]._y) {
tt = aa[j+1];
aa[j+1] = aa[j];
aa[j] = tt;
}
}
}
}
//重新排序后，模块的位置
var Xmodel = border;
for (var i = 0; ivar Ymodel = border;
for (var j = 0; jthis[aa[j]]._x = Xmodel;
this[aa[j]]._y = Ymodel;
this[aa[j]].n = String(i);
this[aa[j]].m = String(j);
Ymodel += Number(this[aa[j]]._height)+border;
xx = Number(this[aa[j]]._width);
}
Xmodel += xx+border;
}
}
//移动后根据模块大小，调整模块位置
function ModMove(n, m) {
tt1 = border;
tt2 = this[Mod[0][0]]._width+2*border;
tt3 = this[Mod[0][0]]._width+this[Mod[1][0]]._width+3*border;
//当前第一列
if (n == 0) {
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)>tt2) {
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)flagX = 1;
moveOver(n, m, flagX, Xmove);
}
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)>=tt3) {
flagX = 2;
moveOver(n, m, flagX, Xmove);
}
} else {
flagX = 0;
moveOver(n, m, flagX, Xmove);
}
}
//当前第二列
if (n == 1) {
if (this[aa[n][m]]._x<(tt2-border)) {
flagX = 0;
moveOver(n, m, flagX, Xmove);
}
if (this[aa[n][m]]._x>=(tt2-border)) {
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)<=tt3) {
flagX = 1;
moveOver(n, m, flagX, Xmove);
}
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)>tt3) {
flagX = 2;
moveOver(n, m, flagX, Xmove);
}
}
}
//当前第三列
if (n == 2) {
if (this[aa[n][m]]._x>=tt3) {
flagX = 2;
moveOver(n, m, flagX, Xmove);
} else if (this[aa[n][m]]._xflagX = 0;
moveOver(n, m, flagX, Xmove);
} else if (this[aa[n][m]]._x>=tt2) {
flagX = 1;
moveOver(n, m, flagX, Xmove);
}
}
}
//======================flash源代码======================//
到这里我们就初步实现了无内容flash网站模块的拖动和自动排序的demo
效果如下:
[upload=swf]UploadFile/2005-7/200572713587289.sw
源文件如下:
[upload=rar]viewFile.asp?ID=258611[/upload]
(未完待续)

附件
2005-7-27 22:02
下载次数: 202
2005-7/20057271426370.rar (7.96 KB)
附件:2005-7/200572713587289.swf (2005-7-27 21:58, 1.45 KB)
',2)">
引用  报告回复
Noneo (Noneo)
注册会员

UID 460176
精华 0
积分 10
帖子 54
技术分 4
阅读权限 20
注册 2005-7-5
状态 离线
#5
使用道具
发表于 2005-7-27 21:33 资料  个人空间 短消息 加为好友

五. 从XML载入数据
简述一下：这次是对之前几节的一个总结，从功能上基本实现了本文的目的，能够从XML读取数据到 flash 并拖移，自动排序，模块内也相应有了内容。在实际运用中XML文件完全可以由Web语言生成，这样就能实现超级动态的flash站。。。不但内容是动态 的，连整个网站都可以随心摆放。
//======================flash源代码======================//
//xml的地址
_global.myserver = "";
this.model._visible = false;
//定义些变量
var Xmove:String = new String();
var border:Number = new Number(10);
var Modall:Number = new Number(0);
var Mod:Array = new Array();
//模块的宽，高，名字，题标，链接
var Wmod:Array = new Array();
var Hmod:Array = new Array();
var ModName:Array = new Array();
var InfoMax:Array = new Array();
var Title:Array = new Array();
var Link:Array = new Array();
var newMod:Array = new Array();
var moveMod:Array = new Array();
var IDMod:Array = new Array();
var ModText:Array = new Array();
//用于缓存的数组
var aa:Array = new Array();
var bb:Array = new Array();
var DataXML:XML = new XML();
DataXML.ignoreWhite = true;
DataXML.onLoad = function(success:Boolean) {
if (success) {
modMC();
} else {
gotoAndStop("Error");
data_txt.htmlText = "Loading XML is Error";
}
};
DataXML.load(_global.myserver+"model_5.xml");
//读取xml里的数据并自动排列
function modMC() {
Num = DataXML.firstChild.attributes.Num;
node = DataXML.firstChild.childNodes;
Xmodel = border;
t = 0;
for (var i = 0; iMod = node.attributes.Mod;
max = Mod;
Modall += Number(max);
Ymodel = border;
Hmod = new Array();
moveMod = new Array();
IDMod = new Array();
ModText = new Array();
for (var j = 0; jTitle[j] = new Array();
Link[j] = new Array();
Wmod[j] = node[j].attributes.Wmod;
ModName[i, j] = node.childNodes[j].attributes.ModName;
IDMod[j] = node.childNodes[j].attributes.ModID;
model.duplicateMovieClip("model"+i+j, this.getNextHighestDepth());
moveMod[j] = "model"+i+j
//读取模块内容的文本
for (var k = 0; kTitle[j][k] = new Array();
Link[j][k] = new Array();
ModConTextAll = "";
id = 0;
for (var l = 0; lid = l+1;
Title[j][k][l] = node.childNodes[j].childNodes[k].childNodes[l].attributes.Title;
Link[j][k][l] = node.childNodes[j].childNodes[k].childNodes[l].attributes.Link;
ModConTextAll += id+": "+Title[j][k][l]+" ";
}
ModText[j] = ModConTextAll;
//创建每个模块内容的文本
this[moveMod[j]].createTextField("my_txt"+k, 1, 10, 30, Number(Wmod)-20, 100);
this[moveMod[j]]["my_txt"+k].htmlText = ModText[j];
this[moveMod[j]]["my_txt"+k].selectable = false;
this[moveMod[j]]["my_txt"+k].wordWrap = false;
this[moveMod[j]]["my_txt"+k].autoSize = "left";
Hmod[j] = this[moveMod[j]]["my_txt"+k]._height+50;
}
this[moveMod[j]].ID.text = IDMod[j];
this[moveMod[j]].ModDrag._width = Wmod;
this[moveMod[j]].ModBoard._width = Wmod;
this[moveMod[j]].ModBoard._height = Hmod[j];
this[moveMod[j]]._y = Ymodel;
Ymodel += Number(this[moveMod[j]].ModBoard._height)+border;
this[moveMod[j]]._x = Xmodel;
this[moveMod[j]].ModNameText.text = ModName[i, j];
}
Xmodel += Number(Wmod)+border;
}
//建立缓存数组，用于保存变更的数组信息
for (var i = 0; iaa = new Array();
bb = new Array();
for (var j = 0; jaa[j] = moveMod[j];
bb[j] = ModText[j];
this[aa[j]].n = String(i);
this[aa[j]].m = String(j);
}
}
}
function Modlocation(n:String, m:String) {
this[aa[n][m]].swapDepths(this.getNextHighestDepth());
this[aa[n][m]]._alpha = 60;
}
//鼠标拖动模块时触发的函数
function moveOver(n:String, m:String, flagX:String, Xmove:String) {
this[aa[n][m]].swapDepths(m);
this[aa[n][m]]._alpha = 100;
this[aa[n][m]].ModDrag._width = Wmod[flagX];
this[aa[n][m]].ModBoard._width = Wmod[flagX];
if (n != flagX) {
aa[flagX].splice(0, 0, aa[n][m]);
bb[flagX].splice(0, 0, bb[n][m]);
aa[n].splice(m, 1);
bb[n].splice(m, 1);
}
//变更后的数组重新排序
for (var i = 0; ifor (var k = aa.length; k>0; k--) {
for (var j = 0; j<(k-1); j++) {
if ((this[aa[j]]._y+this[aa[j]].ModBoard._width)/2>this[aa[j+1]]._y) {
t = bb[j+1];
tt = aa[j+1];
aa[j+1] = aa[j];
bb[j+1] = bb[j];
aa[j] = tt;
bb[j] = t;
}
}
}
}
//变更后的数组重新定位
var Xmodel = border;
for (var i = 0; ivar Ymodel = border;
for (var j = 0; jthis[aa[j]]._x = Xmodel;
this[aa[j]]._y = Ymodel;
this[aa[j]].n = String(i);
this[aa[j]].m = String(j);
//重新从缓存数组里载入文本内容
for (var k = 0; kthis[aa[j]]["my_txt"+k].removeTextField();
this[aa[j]].createTextField("my_txt"+k, 1, 10, 30, Number(Wmod)-20, 100);
this[aa[j]]["my_txt"+k].htmlText = bb[j];
this[aa[j]]["my_txt"+k].selectable = false;
this[aa[j]]["my_txt"+k].wordWrap = false;
this[aa[j]]["my_txt"+k].autoSize = "left";
Hmod[j] = this[moveMod[j]]["my_txt"+k]._height+50;
}
this[moveMod[j]].ModBoard._height = Hmod[j];
Ymodel += Number(this[aa[j]].ModBoard._height)+border;
XX = Number(this[aa[j]].ModBoard._width);
}
Xmodel += XX+border;
}
}
//Release事件触发的函数，对模块的移动进行计算
function ModMove(n:String, m:String) {
tt1 = border;
tt2 = Number(Wmod[0])+2*border;
tt3 = Number(Wmod[0])+Number(Wmod[1])+3*border;
if (n == 0) {
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)>tt2) {
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)flagX = 1;
moveOver(n, m, flagX, Xmove);
}
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)>=tt3) {
flagX = 2;
moveOver(n, m, flagX, Xmove);
}
} else {
flagX = 0;
moveOver(n, m, flagX, Xmove);
}
}
if (n == 1) {
if (this[aa[n][m]]._x<(tt2-border)) {
flagX = 0;
moveOver(n, m, flagX, Xmove);
}
if (this[aa[n][m]]._x>=(tt2-border)) {
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)<=tt3) {
flagX = 1;
moveOver(n, m, flagX, Xmove);
}
if ((this[aa[n][m]]._x+this[aa[n][m]]._width)>tt3) {
flagX = 2;
moveOver(n, m, flagX, Xmove);
}
}
}
if (n == 2) {
if (this[aa[n][m]]._x>=tt3) {
flagX = 2;
moveOver(n, m, flagX, Xmove);
} else if (this[aa[n][m]]._xflagX = 0;
moveOver(n, m, flagX, Xmove);
} else if (this[aa[n][m]]._x>=tt2) {
flagX = 1;
moveOver(n, m, flagX, Xmove);
}
}
}
//======================flash源代码======================//
看看效果(请下载观看,flashplayer不支持不同domain的xml加载):
[upload=swf]UploadFile/2005-8/200582143348692.sw
或到这里http://www.noneo.com/blog/archives/2005/08/02/22.html 查看
XML文件:
[upload=rar]viewFile.asp?ID=260504[/upload]
注释现在没时间加了...
（在下一节里会讲到客户端保存和读取设置的问题，用的是 flash 的共享对象。）
[此贴子已经被作者于2005-8-2 14:49:45编辑过]

附件
附件:2005-8/200582143348692.swf (2005-8-2 22:33, 2.35 KB)
',3)">
2005-8-2 21:54
下载次数: 63
2005-8/20058213542655.rar (373 Bytes)
附件:2005-8/20058213565907.swf (2005-8-2 21:56, 2.35 KB)
',4)">