统计在线人数...

Flash翻书效果研究

[ 来源:互联网 | 作者:木木 | 时间:2006-9-1 下午 11:27:18 | 浏览:统计中... ]


总论

——概念描述

这个项目的概念是使来到我站点的人有机会用FlashMX设计一本虚拟的书,就象一本真正的书那样,不过它是摆在你的计算机桌面上的。你可以一页一页地阅读。

注意,这个课程是面向那些对ActionScript有所了解以及知道如何在FlashMX中编码的人。如果你只知道如何创建一个球并让它在桌面上滚动,那么请过几个月再来吧。

只是开玩笑啦。基本上在这个课程里只有很少的技术。在这个教程中的所有函数是经常使用的。编码非常容易,你需要知道的只是一些基本的三角知识,比如sine(正弦)、cosec(余弦)、hypotenuse(直角三角形的斜边)。这些对于这个教程来说就足够了。所以,放轻松,好好享受吧。

这是一个正在进行的项目。

如果你有任何问题,请给我e-mail。

让我们开始吧。

第一部分

——基本计算函数(basic calculation functions)

在这个根脚本(root script)里,我们有两个基本计算函数。你可以把它们直接拷贝到你的舞台(stage)上,因为我们将会一遍遍用到它们。一个是getDist,另一个是getAngle。它们对你来说很简单,是吧?老实说,我都没兴趣解释这样的东西,这些是高中数学课上该学的。

第一个函数是获得两点之间的距离。我们需要知道这两点之间的坐标。

// Get the distance between two points. (得到两点之间的距离)
function getDist(px1, py1, px2, py2){
x = px2 - px1;
y = py2 - py1;

hyp = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));

return hyp;
}

好了,现在你进展已经不错。我们可以试一下更难点的。——怎么获得两点之间的角度。

// Get the angle between two points. (得到两点之间的角度)
function getAngle(px1, py1, px2, py2){
x = px2 - px1;
y = py2 - py1;

hyp = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));

cos = x / hyp;
rad = Math.acos(cos);

// Ask your math teacher if you don’t understand this one.(如果你看不懂,就去问你的数学老师)

deg = 180/(Math.PI / rad);
// Yes, we do got one angle, rad, by 'Math.acos(cos)', but in radians.(是的,我们通过cos得到了一个角度“rad”,不过是以弧度为单位的)

// Therefore, we need do one more step to transfer it to normal angle we need.(因此,我们需要再进一步把它转换成我们所需要的标准的角度)

if(y <0){deg = -deg;}
else if((y == 0) && (x <0)){deg = 180;}

return deg;
}

我不需要做更多解释了吧

第二部分

——舞台stage上基本的Movie Clips

在库(library)中创建4个方块符号(symbol)。它们是你书中的不同的页面。如果你喜欢,你可以根据需要重新设计。我只需要提醒你一件事,就是,把参考点放在每个symbol的左下角,我们需要用它们来找到页面的位置。

在这个演示例子里,假定我们的书只有4页。如果你想让你的书页数更多,那就请自己加一些新的check situation函数。要确保页面的大小与书本相符。

把它们拖到你的舞台上,确保它们在不同的层面。

按照这个顺序:第4页,第1页,第2页,第3页。

第3页应该在最上面一层。

确保将这些movie clip如下图所示放置。

第3页的具体位置没什么要紧,因为我们将会把它做动态调整。

2、创建一个符号(symbol)圆,并切割下来(cut)。我们需要在移动鼠标的时候用它来检查不同的位置。

3、创建一个包含一个点的symbol,你可以用任何风格的点,这取决于你。

把“点”这个symbol在舞台上放5次,分别命名为D0,D1,D2,D3和D4。

我需要提醒你的是不要movie clip Page1和Page4的区域外放置任何movie clip。

4、我们还会需要一些别的符号(symbol),比如阴影或别的什么,我们可以迟一点再创建它们,别担心。

现在再数一次,你库(library)里的符号(symbol)有:

s_circle, s_dot, s_page1, s_page2, s_page3, s_page4

你舞台(stage)上的符号(symbol)有:

checkcircle, D0, D1, D2, D3, D4, page1, page2, page3, page4

把舞台(stage)上所有的movie clip选中,把它们转换(convert)为一个符号(symbol s_stage

s_stage拖到舞台上,把它命名为movie clip


Stage”。

确保movie clip D0位于movie clipStage”的中心。

确保movie clip “Stage”的大小是Page 1 Page 4

这就是为什么当你在转换符号s_stage的时候不要在区域外面放置任何movie clip的原因。

基本上,建立movie clip D0D4 的目的是为了清楚找到参考点。当我们完成这个教程的时候,你可以把这些movie clip的透明度设置为0。我这里就是这么做的。

我们可以在下面的课程中开始编码了。

第三部分

——初始化

如下图所示初始化所有变量。

// Set the book's width and height. (设置书的宽和高)
stageW = _root.stage._width;
stageH = _root.stage._height;


// Set reference points' position (设置参考点的位置)
pax=_root.stage.d0._x - stageW/2;
pay=_root.stage.d0._y - stageH/2;

pbx=_root.stage.d0._x - stageW/2;
pby=_root.stage.d0._y + stageH/2;

pcx=_root.stage.d0._x;
pcy=_root.stage.d0._y - stageH/2;

pdx=_root.stage.d0._x;
pdy=_root.stage.d0._y + stageH/2;

pex=_root.stage.d0._x + stageW/2;
pey=_root.stage.d0._y - stageH/2;

pfx=_root.stage.d0._x + stageW/2;
pfy=_root.stage.d0._y + stageH/2;

_root.stage.page3._alpha = 0;

// We need show movie clip Page2 at the beginning, so hide Page3 first.(我们需要在开始的时候显示movie clip Page2,所以先隐藏Page 3

把这部分代码放入你的第一个根脚本(root frame script)。

——怎么找到第一个点?

第一个点,D1,是你鼠标的位置。(说实在话,在D1的位置上有几种情况。假设你的鼠标离开了movie clip圆,会发生什么?你可以迟一些时候再完成这部分。我已经做好了。这是留给你的作业。)

在给D1的位置赋值之前,我们首先需要一个主函数。

// The main function. (主函数)
function startSlip(){

getD1();
// This function is the one what we need discuss in this course. (这个函数是我们要在这一课中讨论的)

getD234();
DrewMask();
// We will add these two functions later. (我们将在以后添加这两个函数)
}

现在你可以检查如何设置D1了。

// Get the first point, D1's position. (得到第一点,D1的位置)
function getD1(){
if (_root.stage.checkcircle.hittest(_xmouse, _ymouse, true)) {

_root.stage.d1._x = _root.stage._xmouse;
_root.stage.d1._y = _root.stage._ymouse;

}else{

// Finish this part yourself. Basically, I have 3 more functions to set the D1's position. (自己完成这部分。基本上,我还要用三个函数来设置 D1的位置)
}
}

提示:你的鼠标要去四个区域,在每个区域里,D1的位置是不同的。在这个例子里,我们只讨论区域A。我会把所有的代码放在最终文件里,你如果感兴趣的话,可以稍后查看。

因为要按住鼠标拖动页面,你需要移动的第一个点是在页面右下角的点。

很好,我们还有三个点要做,耐心一点。

第四部分

——得到所有其他三个点:

同上面一样,你有几种情况要考虑。

第一种情况比较简单。第3点位于边EF上。在这种情况下,点D4与点D3位于同一位置。

另一种情况比较难一点。点D3位于边CE上。你需要计算D3


D4

或者:

这里,我们需要一些三角函数来获得所有的数值。嗨,一定有更有效的方式来编码,我真是没兴趣再做一遍。:(

我只需要提醒你一件事:

Flash的坐标系开始于左上角,逐渐向下扩展到右边。

对于一个数学家来说,求得所有的点很可能只需要几分钟,但是我却花了整整一个上午。如果你想做,你可以自己做,或者只需拷贝这些代码。

// Using point D1 and Point F find all the other points. (用D1F来找到其他的点)
function getD234(){

len = _root._root.getDist(pfx, pfy, _root.stage.d1._x, _root.stage.d1._y);
len1 = len/2;
len2 = (pfx - _root.stage.d1._x)/2;

_root.stage.d2._x = pfx - len1*len1/len2;
_root.stage.d2._y = pfy;

len2 = (pfy - _root.stage.d1._y)/2;
len3 = len1*len1/len2;

_root.stage.d3._x = pfx;
_root.stage.d3._y = pfy - len3;


// Check out weather point D4 is at the same location of point D3. (检查D4是否和D3在同一个位置)
if (_root.stage.d3._y < pey){
ptx = pex - (pfx - _root.stage.d2._x)*(pey - _root.stage.d3._y)/len3;
pty = pey;

len = _root.getDist(_root.stage.d3._x, _root.stage.d3._y, ptx, pty);
len1 = (pex - ptx)*(pey - _root.stage.d3._y)/len;

len2 = len1*len1/(pex - ptx);
_root.stage.d4._x = pex - len2*2;

len2 = len1*len1/(pey - _root.stage.d3._y);
_root.stage.d4._y = pey - len2*2;

_root.stage.d3._x = ptx;
_root.stage.d3._y = pty;

}else{
_root.stage.d4._x = _root.stage.d3._x;
_root.stage.d4._y = _root.stage.d3._y;
}
}

哇,现在我们快完成了,继续!

第五部分:

——绘制mask shape

你只需要知道两个特别的点。一个点创建一个空的movie clip,并在其中绘制一些东西。另一个点用另一个动画来遮住一个movie clip

好了,让我们来编码。

// Create masking movie clip (创建遮罩movie clip
function drawMask(){

_root.stage.createEmptyMovieClip ("triangle", 1);
with (_root.stage.triangle) {
colors = [ 0xEFEFEF, 0xFFFFFF ];
alphas = [ 100, 100 ];
ratios = [ 0, 0xFF ];
matrix = { a:200, b:0, c:0, d:0, e:200, f:0, g:200, h:200, i:1 };

beginGradientFill( "linear", colors, alphas, ratios, matrix );

moveTo (_root.stage.d1._x, _root.stage.d1._y);

共有0人参与评价,平均得分:0分
评论内容只代表网友观点,与本站立场无关! 查看完整内容
   

当前在线人数
QQ:748838 MSN:allen_xia#msn.com E-mail:allenxia666#126.com QQ群:站长联盟北方区-北京(28200145) 站长联盟南方区-上海(67713522)