Flash网站模块化拖动技术探解

　　一.概述

　　目前MS和Google等大公司的网站里渐渐出现一种技术,可以实现用户界面的页面模块化拖动,我把它称之为网站模块化拖动技术.

　　先来看看一个MSN mySpace的例子,注意两张图片的不同: (网址为:spaces.msn.com,没有MSN账号的要注册)

　　而实现这一过程,只需用户在网页上拖动相应的模块,就能完全按自己的个人喜好,调整网页模块的位置,当然相信这些公司网站上出现的出于更多的目的是为了增加更多的用户体验,吸引更多的用户. 而我们要做的是用flash来实现这一技术,并且加予应用.

　　首先我们得做个实验,就把网站想像成一块一块的,比如"新闻"一块,"会员登陆口"一块,"最新文章"一块,我们怎么对它们进行拖动呢?

　　OK,开始理清一下思路,现在我们现在必须考虑的是这些块要怎么排上去? 我们先不管什么"新闻","会员登陆口","最新文章"这些里面的内容,全部当他是MC1,MC2,MC3,实验先从简单化入手!

　　打开flash,做个类似下图的MC,MC里有个动态文本框,变量名:mcText ,同时给这个MC加上相应链接标识

//======================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[i] = new Array();
//行的循环
for (var j = 0; j<2; j++) {
duplicateMovieClip(MC, "MC"+i+j, this.getNextHighestDepth());
Mod[i][j] = "MC"+i+j;
//MC里的文本，用来区分不同MC
this[Mod[i][j]].mcText = "MC"+i+j;
this[Mod[i][j]]._y = Ymodel;
Ymodel += Number(this[Mod[i][j]]._height)+border;
this[Mod[i][j]]._x = Xmodel;
xx = Number(this[Mod[i][j]]._width);
}
Xmodel += xx+border;
}
//=============flash源代码=============//

　　这样MC的简单排列就完成了, 这是效果: fla文件在下面的章节里会有

　　在做完了模块的简单排列后,我们必须让每个模块能够按我们所希望的拖动,而且还必须自动排序,这节内容是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[i] = new Array();
//行的循环
for (var j = 0; j<2; j++) {
duplicateMovieClip(MC, "MC"+i+j, this.getNextHighestDepth());
Mod[i][j] = "MC"+i+j;
//MC里的文本，用来区分不同MC
this[Mod[i][j]].mcText = "MC"+i+j;
this[Mod[i][j]]._y = Ymodel;
Ymodel += Number(this[Mod[i][j]]._height)+border;
this[Mod[i][j]]._x = Xmodel;
xx = Number(this[Mod[i][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[i][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[i].length; k>0; k--) {
for (var j = 0; j<(k-1); j++) {
if ((this[aa[i][j]]._y+this[aa[i][j]]._width)/2>this[aa[i][j+1]]._y) {
tt = aa[i][j+1];
aa[i][j+1] = aa[i][j];
aa[i][j] = tt;
}
}
}
}
}
//======================flash源代码======================//

经过了之前三章的了解，结合前面的代码,我们开始试着为模块的拖动做一个简单的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; i<Cols; i++) {
var Ymodel = border;
//注意二维数组要先定义一维数组
Mod[i] = new Array();
//行的循环
for (var j = 0; j<Rows; j++) {
duplicateMovieClip(MC, "MC"+i+j, this.getNextHighestDepth());
Mod[i][j] = "MC"+i+j;
//MC里的文本，用来区分不同MC
this[Mod[i][j]].mcText = "MC"+i+j;
this[Mod[i][j]]._y = Ymodel;
Ymodel += Number(this[Mod[i][j]]._height)+border;
this[Mod[i][j]]._x = Xmodel;
xx = Number(this[Mod[i][j]]._width);
}
Xmodel += xx+border;
}
//创建一个新的数组用来做为传递的中介
var aa:Array = new Array();
for (var i = 0; i<Cols; i++) {
aa[i] = new Array();
for (var j = 0; j<Rows; j++) {
aa[i][j] = Mod[i][j];
//这里的n和m是用来定位，比如当n=1,m=0时，程序就可以很快知道现在拖的是第二列第一个模块了
this[aa[i][j]].n = String(i);
this[aa[i][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; i<Cols; i++) {
for (var k = aa[i].length; k>0; k--) {
for (var j = 0; j<(k-1); j++) {
if ((this[aa[i][j]]._y+this[aa[i][j]]._width)/2>this[aa[i][j+1]]._y) {
tt = aa[i][j+1];
aa[i][j+1] = aa[i][j];
aa[i][j] = tt;
}
}
}
}
//重新排序后，模块的位置
var Xmodel = border;
for (var i = 0; i<Cols; i++) {
var Ymodel = border;
for (var j = 0; j<aa[i].length; j++) {
this[aa[i][j]]._x = Xmodel;
this[aa[i][j]]._y = Ymodel;
this[aa[i][j]].n = String(i);
this[aa[i][j]].m = String(j);
Ymodel += Number(this[aa[i][j]]._height)+border;
xx = Number(this[aa[i][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)<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);
}
} 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]]._x<tt2) {
flagX = 0;
moveOver(n, m, flagX, Xmove);
} else if (this[aa[n][m]]._x>=tt2) {
flagX = 1;
moveOver(n, m, flagX, Xmove);
}
}
}
//=============flash源代码============//
　　到这里我们就初步实现了无内容flash网站模块的拖动和自动排序的demo，效果如下:

点击这里下载源文件

　　(未完待续)

时间： 2024-12-25 21:47:03

Flash网站模块化拖动技术探解的相关文章

Flash网站优化及透明FLASH代码详解

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 Flash比GIF动画要漂亮些,我们把它设为透明后,Flash的背面我们可以插入一些漂亮的图片与之搭配达到很漂亮的效果:这时候可能更灵活的使用页面效果.或者仅仅在网页中加入透明的Flash,对于透明flash,如果无法加载,选择一种合适的代码,对于搜索引擎及用户体验来说都是很好的.在这里推荐使用第一种代码embed模式.漂亮的动画页面可吸引更

CODE大全大量Flash网站收藏

我的博客:CODE大全:www.codedq.net:业余草:www.xttblog.com:爱分享:www.ndislwf.com或ifxvn.com. http://www.wallop.com在线flash社区,个人空间. http://www.doof.com/doof/在线flash社区,很强,界面也很棒 http://Maps.amung.usflash网站来客定位. ttp://www.splashup.com/splashup/杀了我吧,这都做出来,在线photoshop,fle

让Flash网站具有IE前进后退功能

Flash全站的技术应用系列:(一)AS+JS的Flash网站无刷新定位技术  (二)Flash网站的SEO(三)Flash网站的流量统计(四)让Flash网站具有IE前进后退的功能 (本文) 前言: 写完流量统计的教程以后,本以为会很轻松地就可以完成该篇文章.后来才发现,原来还是遇到了困难.因为要通过iframe控制主HTML的变量,一开始,考虑到打开父窗口用的是_parent,而Flash里的父级也是_parent,于是理所当然地以为iframe访问主html也是通过_parent,结果,弄

Flash 网站的流量统计

流量|统计 Flash全站的技术应用系列:(一)AS+JS的Flash网站无刷新定位技术  (二)Flash网站的SEO(搜索引擎优化)(三)Flash网站的流量统计 (本文)(四)让Flash网站具有IE前进后退的功能 前言 前段时间发了两篇Flash全站的技术应用文章后,有部分网友提出说,叫我写篇文章,阐述如何实现IE的前进后退功能.但是这个并没有在我的计划之中,也没有研究过.找了一堆关于堆栈历史记录的东西,很多都用了AJAX,看着头晕,并且拷贝人家的代码来运行也实现不了.接着,还拿了2AD

全Flash网站制作剖析

经过一段时间的Flash学习之后,很多朋友开始对那些全Flash网站的制作发生兴趣.全Flash网站基本以图形和动画为主,所以比较适合做那些文字内容不太多,以平面.动画效果为主的应用.如:企业品牌推广.特定网上广告.网络游戏.个性网站等. 制作全Flash网站和制作html网站类似,事先应先在纸上画出结构关系图,包括:网站的主题.要用什么样的元素.哪些元素需要重复使用.元素之间的联系.元素如何运动.用什么风格的音乐.整个网站可以分成几个逻辑块.各个逻辑块间的联系如何.以及你是否打算用Flash建

Flash深入学习：全Flash网站制作剖析

(另外推荐学习:flash制作很出效果的韩国菜单 flash制作广告全程实例)     经过一段时间的Flash学习之后,很多朋友开始对那些全Flash网站的制作发生兴趣.全Flash网站基本以图形和动画为主,所以比较适合做那些文字内容不太多,以平面.动画效果为主的应用.如:企业品牌推广.特定网上广告.网络游戏.个性网站等. 制作全Flash网站和制作html网站类似,事先应先在纸上画出结构关系图,包括:网站的主题.要用什么样的元素.哪些元素需要重复使用.元素之间的联系.元素如何运动.用什么风格

VPN技术详解(下）

详解 VPN技术详解(下)吕晓波 (紧接中篇) 数据传输阶段 一旦完成上述4阶段的协商,PPP就开始在连接对等双方之间转发数据.每个被传送的数据报都被封装在PPP包头内,该包头将会在到达接收方之后被去除.如果在阶段1选择使用数据压缩并且在阶段4完成了协商,数据将会在被传送之间进行压缩.类似的,如果如果已经选择使用数据加密并完成了协商,数据(或被压缩数据)将会在传送之前进行加密. 点对点隧道协议(PPTP) PPTP是一个第2层的协议,将PPP数据桢封装在IP数据报内通过IP网络,如Interne

小议制作Flash网站及flash应用的技巧

技巧 flash网站技巧拾零 1. 快速更新网站文字 在Flash网站各子界面制作过程中,网站文字可以通过复制.粘贴.甚至直接导入文本的方式进行.这里介绍的方法是连A4Desk都不用打开,直接修改文本文件即可更新网站文字了.因为在制作Flash网站时,在软件安装目录下会自动生成一个import文件夹,该文件夹里的每一个文本文件的内容都和网站页面的内容相对应的,找到相应的文本文件即可进行修改了. 2. 快速修改菜单标签 在制作在Flash网站时,修改菜单标签是通过执行"Edit→Section N

技巧：Flash 网站的 SEO

seo|技巧 目前,全FLASH站里头的文字很难给一般的搜索引擎捕捉到(可能以后GOOGLE会有改善吧),因为搜索引擎只分析HTML页面里头的文字(动态页面如ASP,PHP那些也行,不过优先级会比较低),所以,FLASH在这方面是很吃亏的.之前也有人在这里发过关于FLASH的SEO问题,是通过XHTML实现的,今天我要给大家介绍的是另一种方法:通过网页重定向以及我上一篇教程的FLASH站定位技术. PS:这两种方法在搜索引擎眼里,都是作弊的行为.一个不小心,服务器给封了也不知道.所以建议大家如果