Flash翻书效果研究.docx
- 文档编号:18188795
- 上传时间:2023-08-13
- 格式:DOCX
- 页数:16
- 大小:206.83KB
Flash翻书效果研究.docx
《Flash翻书效果研究.docx》由会员分享,可在线阅读,更多相关《Flash翻书效果研究.docx(16页珍藏版)》请在冰点文库上搜索。
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); 第五部分: ——绘制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); lineTo(_root.stage.d2._x,_root.stage.d2._y); lineTo(_root.stage.d3._x,_root.stage.d3._y); lineTo(_root.stage.d4._x,_root.stage.d4._y); lineTo(_root.stage.d1._x,_root.stage.d1._y); endFill(); //Idon'tthinkIneedexplainthispart.YoucanfindtheminthehelporreferenceofFlashMX.Icopiedthemfromthere.J(我认为不需要解释这部分。 你能在FlashMX的帮助或者参考中找到它们。 我是从那里拷贝过来的。 ) //Prettyclear,right? (很清楚了吧? ) } setPage3(); //WeneedmoveandrotatemovieclipPage3withyourmousemove.Thatiswhyweneedthisfunctionhere.(我们需要在鼠标移动时移动和旋转movieclipPage3。 这就是为什么在这里我们需要这个函数) _root.stage.page3.setMask(_root.stage.triangle); } 这是我们还需要知道的一个函数: setMask。 就个人而言,我认为这个setMask函数在使用时有些小bug。 它不象其他函数那么好用。 我要提醒你的另一件事是,在同一级脚本里你只能用setMask一次,意思就是,如果你想同时setMaskmovieclipPage2,你需要创建新的maskmovieclip,并在不同级的脚本中setMask。 很难理解吗? 好吧,在我的例子里,我把下一个setMask放在movieclipPage2里。 //MoveandrotatemovieclipPage3(移动并旋转movieclipPage3) functionsetPage3(){ _root.stage.page3._x=_root.stage.d1._x; _root.stage.page3._y=_root.stage.d1._y; angle=_root.getAngle(_root.stage.stage.d1._x,_root.stage.stage.d1._y,_root.stage.stage.d4._x,_root.stage.stage.d4._y); _root.stage.page3._rotation=angle+90; //Whyadd90degreehere? Idon'tknow.Ijustfoundthatthenumbersworkedperfectlyonlybyaddingthatinthere.(为什么这里加了90度? 我不知道。 我只是发现加了这个之后数字才能很好地工作) _root.stage.page3._alpha=100; //RememberweinitializemovieclipPage3'salphaas0? Nowweneedswitchitback.BecausemovieclipPage2isontheunderlevelofPage3.(记得我们把movieclipPage3的透明度设置为0了吗? 现在我们需要把它变回去。 因为movieclipPage2在Page3的下一层。 ) } 在这一课程中多加一条编码。 在movieclip“Stage”中: onClipEvent(enterFrame){ _root.startSlip(); } 这一段代码使Flash一直检查鼠标的位置。 第六部分: ——在Page2中绘制maskshape 在movieclipPage2里创建一个新的名为Page2_content的movieclip。 随便你取什么名都可以。 把下面的代码加到新的movieclip Page2_content中。 基本上,就象我们在上一个课程中讨论的那样,在同一级的script中,你只能使用setMask一次。 这就是为什么在movieclipPage2里还需要再用一次的原因。 这些代码是为了显示底部的movieclipPage4。 //InsidemovieclipPage2_content.(在movieclipPage2_content内部) onClipEvent(enterFrame){ _parent.createEmptyMovieClip("triangle2",1); _root.stage.page2.page2_content.setMask(_parent.triangle2); with(_parent.triangle2){ colors=[0xEFEFEF,0xFFFFFF]; alphas=[0,0]; 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.pdx,_root.pdy-_root.stageH/2); lineTo(_root.stage.d2._x,_root.stage.d2._y-_root.stageH/2); lineTo(_root.stage.d3._x,_root.stage.d3._y-_root.stageH/2); lineTo(_root.pex,_root.pey-_root.stageH/2); lineTo(_root.pcx,_root.pcy-_root.stageH/2); lineTo(_root.pdx,_root.pdy-_root.stageH/2); endFill(); } } 检查一下你现在进展如何了? 很酷,对吧? 总结: ——你需要添加的其他东西 现在,我们已经完成得差不多了。 但是,当然,我们还需要再做一点什么,使它看起来象一本真正的书。 我们需要加一些阴影movieclip。 我用p
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flash 效果 研究