Flash翻书效果研究.docx

1、Flash翻书效果研究Flash翻书效果研究概念描述这个项目的概念是使来到我站点的人有机会用FlashMX设计一本虚拟的书，就象一本真正的书那样，不过它是摆在你的计算机桌面上的。你可以一页一页地阅读。注意，这个课程是面向那些对ActionScript有所了解以及知道如何在FlashMX中编码的人。如果你只知道如何创建一个球并让它在桌面上滚动，那么请过几个月再来吧。只 是开玩笑啦。基本上在这个课程里只有很少的技术。在这个教程中的所有函数是经常使用的。编码非常容易，你需要知道的只是一些基本的三角知识，比如 sine（正弦）、cosec（余弦）、hypotenuse（直角三角形的斜边）。这些对于这个

2、教程来说就足够了。所以，放轻松，好好享受吧。这是一个正在进行的项目。如果你有任何问题，请给我e-mail。让我们开始吧。第一部分基本计算函数（basic calculation functions）在 这个根脚本(root script)里，我们有两个基本计算函数。你可以把它们直接拷贝到你的舞台(stage)上，因为我们将会一遍遍用到它们。一个是getDist，另一 个是getAngle。它们对你来说很简单，是吧？老实说，我都没兴趣解释这样的东西，这些是高中数学课上该学的。第一个函数是获得两点之间的距离。我们需要知道这两点之间的坐标。/ Get the distance between two

3、 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 = Mat

4、h.sqrt(Math.pow(x,2) + Math.pow(y,2);cos = x / hyp;rad = Math.acos(cos);/ Ask your math teacher if you dont 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 on

5、e 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的左下角，我们需要用它们来找到页面的位置。在这个演示例子里，假

6、定我们的书只有4页。如果你想让你的书页数更多，那就请自己加一些新的check situation函数。要确保页面的大小与书本相符。把它们拖到你的舞台上，确保它们在不同的层面。按照这个顺序：第4页，第1页，第2页，第3页。第3页应该在最上面一层。确保将这些movie clip如下图所示放置。第3页的具体位置没什么要紧，因为我们将会把它做动态调整。2、创建一个符号（symbol）圆，并切割下来（cut）。我们需要在移动鼠标的时候用它来检查不同的位置。3、创建一个包含一个点的symbol，你可以用任何风格的点，这取决于你。把“点”这个symbol在舞台上放5次，分别命名为D0,D1,D2,D3和D4

7、。我需要提醒你的是，不要在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选中，把它们

8、转换（convert）为一个符号（symbol） s_stage。把s_stage拖到舞台上，把它命名为movie clip“Stage”。确保movie clip D0位于movie clip“Stage”的中心。确保movie clip “Stage”的大小是Page 1 加 Page 4。这就是为什么当你在转换符号s_stage的时候不要在区域外面放置任何movie clip的原因。基本上，建立movie clip D0到D4 的目的是为了清楚找到参考点。当我们完成这个教程的时候，你可以把这些movie clip的透明度设置为0。我这里就是这么做的。我们可以在下面的课程中开始编码了。第三

9、部分初始化如下图所示初始化所有变量。/ Set the books 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=_ro

10、ot.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 t

11、he 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

12、 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, D1s position. （得到第一点，D1的位置）function getD1()if (_root.stage.checkcircle.hittest(_xmouse, _ymouse, true) _root

13、.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 D1s position. （自己完成这部分。基本上，我还要用三个函数来设置 D1的位置）提示：你的鼠标要去四个区域，在每个区域里，D1的位置是不同的。在这个例子里，我们只讨论区域A。我会把所有的代码放在最终文件里，你如果感兴趣的话，可以稍后查看。因为要按住鼠标拖动页面，你需要移动的第一个点

14、是在页面右下角的点。很好，我们还有三个点要做，耐心一点。第四部分得到所有其他三个点：同上面一样，你有几种情况要考虑。第一种情况比较简单。第3点位于边EF上。在这种情况下，点D4与点D3位于同一位置。另一种情况比较难一点。点D3位于边CE上。你需要计算D3和D4。或者：这里，我们需要一些三角函数来获得所有的数值。嗨，一定有更有效的方式来编码，我真是没兴趣再做一遍。：（我只需要提醒你一件事：Flash的坐标系开始于左上角，逐渐向下扩展到右边。对于一个数学家来说，求得所有的点很可能只需要几分钟，但是我却花了整整一个上午。如果你想做，你可以自己做，或者只需拷贝这些代码。/ Using point D1

15、 and Point F find all the other points. （用D1和F来找到其他的点）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 =

16、 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, _r

17、oot.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

18、._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);