Flash翻书效果研究.docx

Flash翻书效果研究.docx

《Flash翻书效果研究.docx》由会员分享，可在线阅读，更多相关《Flash翻书效果研究.docx（10页珍藏版）》请在冰豆网上搜索。

Flash翻书效果研究

Flash翻书效果研究

——概念描述

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

你可以一页一页地阅读。

注意，这个课程是面向那些对ActionScript有所了解以及知道如何在FlashMX中编码的人。

如果你只知道如何创建一个球并让它在桌面上滚动，那么请过几个月再来吧。

只是开玩笑啦。

基本上在这个课程里只有很少的技术。

在这个教程中的所有函数是经常使用的。

编码非常容易，你需要知道的只是一些基本的三角知识，比如sine（正弦）、cosec（余弦）、hypotenuse（直角三角形的斜边）。

这些对于这个教程来说就足够了。

所以，放轻松，好好享受吧。

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

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

让我们开始吧。

第一部分

——基本计算函数（basiccalculationfunctions）

在这个根脚本（rootscript）里，我们有两个基本计算函数。

你可以把它们直接拷贝到你的舞台（stage）上，因为我们将会一遍遍用到它们。

一个是getDist，另一个是getAngle。

它们对你来说很简单，是吧？

老实说，我都没兴趣解释这样的东西，这些是高中数学课上该学的。

第一个函数是获得两点之间的距离。

我们需要知道这两点之间的坐标。

//Getthedistancebetweentwopoints.（得到两点之间的距离）

functiongetDist（px1,py1,px2,py2）{

x=px2-px1;

y=py2-py1;

hyp=Math.sqrt（Math.pow（x,2）+Math.pow（y,2））;

returnhyp;

}

好了，现在你进展已经不错。

我们可以试一下更难点的。

——怎么获得两点之间的角度。

//Gettheanglebetweentwopoints.（得到两点之间的角度）

functiongetAngle（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）;

//Askyourmathteacherifyoudon’tunderstandthisone.（如果你看不懂，就去问你的数学老师）

deg=180/（Math.PI/rad）;

//Yes,wedogotoneangle,rad,by'Math.acos（cos）',butinradians.（是的，我们通过cos得到了一个角度“rad”，不过是以弧度为单位的）

//Therefore,weneeddoonemoresteptotransferittonormalangleweneed.（因此，我们需要再进一步把它转换成我们所需要的标准的角度）

if（y<0）{deg=-deg;}

elseif（（y==0）&&（x<0））{deg=180;}

returndeg;

}

我不需要做更多解释了吧？

第二部分

——舞台（stage）上基本的MovieClips

在库（library）中创建4个方块符号（symbol）。

它们是你书中的不同的页面。

如果你喜欢，你可以根据需要重新设计。

我只需要提醒你一件事，就是，把参考点放在每个symbol的左下角，我们需要用它们来找到页面的位置。

在这个演示例子里，假定我们的书只有4页。

如果你想让你的书页数更多，那就请自己加一些新的checksituation函数。

要确保页面的大小与书本相符。

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

按照这个顺序：

第4页，第1页，第2页，第3页。

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

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

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

2、创建一个符号（symbol）圆，并切割下来（cut）。

我们需要在移动鼠标的时候用它来检查不同的位置。

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

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

我需要提醒你的是，不要在movieclipPage1和Page4的区域外放置任何movieclip。

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）上所有的movieclip选中，把它们转换（convert）为一个符号（symbol）s_stage。

把s_stage拖到舞台上，把它命名为movieclip

“Stage”。

确保movieclipD0位于movieclip“Stage”的中心。

确保movieclip“Stage”的大小是Page1加Page4。

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

基本上，建立movieclipD0到D4的目的是为了清楚找到参考点。

当我们完成这个教程的时候，你可以把这些movieclip的透明度设置为0。

我这里就是这么做的。

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

第三部分

——初始化

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

//Setthebook'swidthandheight.（设置书的宽和高）

stageW=_root.stage._width;

stageH=_root.stage._height;

//Setreferencepoints'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;

//WeneedshowmovieclipPage2atthebeginning,sohidePage3first.（我们需要在开始的时候显示movieclipPage2，所以先隐藏Page3）

把这部分代码放入你的第一个根脚本（rootframescript）。

——怎么找到第一个点？

第一个点，D1，是你鼠标的位置。

（说实在话，在D1的位置上有几种情况。

假设你的鼠标离开了movieclip圆，会发生什么？

你可以迟一些时候再完成这部分。

我已经做好了。

这是留给你的作业。

）

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

//Themainfunction.（主函数）

functionstartSlip（）{

getD1（）;//Thisfunctionistheonewhatweneeddiscussinthiscourse.（这个函数是我们要在这一课中讨论的）

getD234（）;

DrewMask（）;//Wewilladdthesetwofunctionslater.（我们将在以后添加这两个函数）

}

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

//Getthefirstpoint,D1'sposition.（得到第一点，D1的位置）

functiongetD1（）{

if（_root.stage.checkcircle.hittest（_xmouse,_ymouse,true））{

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

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

}else{

//Finishthispartyourself.Basically,Ihave3morefunctionstosettheD1'sposition.（自己完成这部分。

基本上，我还要用三个函数来设置D1的位置）

}

}

提示：

你的鼠标要去四个区域，在每个区域里，D1的位置是不同的。

在这个例子里，我们只讨论区域A。

我会把所有的代码放在最终文件里，你如果感兴趣的话，可以稍后查看。

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

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

第四部分

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

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

第一种情况比较简单。

第3点位于边EF上。

在这种情况下，点D4与点D3位于同一位置。

另一种情况比较难一点。

点D3位于边CE上。

你需要计算D3

和D4。

或者：

这里，我们需要一些三角函数来获得所有的数值。

嗨，一定有更有效的方式来编码，我真是没兴趣再做一遍。

：

（

我只需要提醒你一件事：

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

对于一个数学家来说，求得所有的点很可能只需要几分钟，但是我却花了整整一个上午。

如果你想做，你可以自己做，或者只需拷贝这些代码。

//UsingpointD1andPointFfindalltheotherpoints.（用D1和F来找到其他的点）

functiongetD234（）{

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;

//CheckoutweatherpointD4isatthesamelocationofpointD3.（检查D4是否和D3在同一个位置）

if（_root.stage.d3._y

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;

}

}

哇，现在我们快完成了，继续！

第五部分：

——绘制maskshape

你只需要知道两个特别的点。

一个点创建一个空的movieclip，并在其中绘制一些东西。

另一个点用另一个动画来遮住一个movieclip。

好了，让我们来编码。

//Createmaskingmovieclip（创建遮罩movieclip）

functiondrawMask（）{

_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）;