I. Overview
At present, MS and Google and other large companies in the Web site gradually appeared a technology, you can implement the user interface of the page modular drag, I call it the Web site modular drag technology.
First look at a MSN MySpace example, note that two pictures of different: (URL: spaces.msn.com, no MSN account to register)
The implementation of this process, only users in the Web page to drag the corresponding module, you can completely according to their personal preferences, adjust the location of the page module, of course, believe that these companies on the site for more purposes is to increase the user experience, to attract more users. And what we need to do is use flash to implement this technology and add it to the application.
First we have to do an experiment, the site imagined as a piece of, such as "News" piece, "member Landing" piece, "latest article" piece, how do we drag them?
OK, start to sort out the idea, now what we have to consider now is how these blocks are going to be lined up? We first no matter what "news", "Member Landing", "latest article" These contents, all when he is MC1,MC2,MC3, the experiment begins with the simplification first!
Open Flash, do a similar figure in the MC,MC has a dynamic text box, variable name: Mctext, at the same time to the MC plus the corresponding link identification
======================flash Source Code ======================//
Set margin First, 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;
The MC position is arranged with a two-dimensional array, assuming 2 rows and 2 columns
The loop of the column
for (var i = 0; i<2; i++) {
var ymodel = border;
Note that two-dimensional arrays first define a one-dimensional array
Mod[i] = new Array ();
Loop of rows
for (var j = 0; j<2; j + +) {
Duplicatemovieclip (MC, "MC" +i+j, This.getnexthighestdepth ());
MOD[I][J] = "MC" +I+J;
The text in the MC, used to distinguish different 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 Source Code =============//
So the simple arrangement of the MC is done, and this is the effect: the FLA file in the following section will have
http://www.flash8.net/bbs/UploadFile/2005-7/200572713392472.swf
After we have finished the simple arrangement of the modules, we have to have each module be able to drag as we want, and it must be sorted automatically, which is the automatic ordering of the MC Array.
=============flash Source Code =========//
Set margin First, 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;
The MC position is arranged with a two-dimensional array, assuming 2 rows and 2 columns
The loop of the column
for (var i = 0; i<2; i++) {
var ymodel = border;
Note that two-dimensional arrays first define a one-dimensional array
Mod[i] = new Array ();
Loop of rows
for (var j = 0; j<2; j + +) {
Duplicatemovieclip (MC, "MC" +i+j, This.getnexthighestdepth ());
MOD[I][J] = "MC" +I+J;
The text in the MC, used to distinguish different 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;
///////////////////////
Here's the code from the previous lecture.
///////////////////////////
Creates a new array to be used as a pass-through mediator
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];
Here the N and M are used to locate, for example, when n=1,m=0, the program can soon know that the second column is now the first module.
THIS[AA[K][L]].N = String (i);
THIS[AA[K][L]].M = String (j);
}
}
}
Create a function
This is the function when dragging, change the MC depth, transparency
function Moveover (n, M, Flagx, Xmove) {
This[aa[n][m]].swapdepths (m);
This[aa[n][m]]._alpha = 100;
if (n!= flagx) {
Adds an array element, and the added content is the currently dragged
Aa[flagx].splice (0, 0, aa[n][m]);
Aa[n].splice (M, 1);
}
Reorder arrays Because each drag affects at least two of the MC array locations
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 Source Code ======================//
After the previous three chapters of the understanding, combined with the previous code, we began to try to drag for the module to do a simple demo
The main implementation of the drag after the array reordering and moving position.
The following code has comments that should not be difficult to understand:)
======================flash Source Code ======================//
Set margin First, 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;
The MC position is arranged with a two-dimensional array, which is assumed to be 3 columns and 2 rows
var cols:number = 3;
var rows:number = 2;
The loop of the column
for (var i = 0; i<cols; i++) {
var ymodel = border;
Note that two-dimensional arrays first define a one-dimensional array
Mod[i] = new Array ();
Loop of rows
for (var j = 0; j<rows; j + +) {
Duplicatemovieclip (MC, "MC" +i+j, This.getnexthighestdepth ());
MOD[I][J] = "MC" +I+J;
The text in the MC, used to distinguish different 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;
}
Creates a new array to be used as a pass-through mediator
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];
Here the N and M are used to locate, for example, when n=1,m=0, the program can soon know that the second column is now the first module.
THIS[AA[I][J]].N = String (i);
THIS[AA[I][J]].M = String (j);
}
}
Create a function
Change the depth and transparency of the module when you drag the mouse
function Modlocation (n, m) {
This[aa[n][m]].swapdepths (This.getnexthighestdepth ());
This[aa[n][m]]._alpha = 30;
}
This is the function when dragging. FLAGX: The column that will be moved to
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) {
Adds an array element, and the added content is the currently dragged
Aa[flagx].splice (0, 0, aa[n][m]);
Aa[n].splice (M, 1);
}
Reordering an array
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;
}
}
}
}
After reordering, the location of the module
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;
}
}
Adjust module position after moving according to module size
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;
Current first column
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);
}
}
Current second column
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);
}
}
}
Current third column
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 Source Code ============//
Here we will be the initial implementation of the Content Flash Web module Drag and automatic sequencing of the demo, the results are as follows:
http://www.flash8.net/bbs/UploadFile/2005-7/200572713587289.swf
Click here to download the source file
(To be continued)
