您所在的位置:QQ首页 > 动画频道> 正文

用Action Script脚本实现翻书效果
http://flash.QQ.com   2006年 06月 25日 17:33   闪客帝国   作者:阿鼠  
第 1 2 3 4

简介:

——概念描述

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

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

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

第一部分

——基本计算函数

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

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

//(得到两点之间的距离)

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;

}

用Action Script脚本实现翻书效果……

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

//(得到两点之间的角度)

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);

//(如果你看不懂,就去问你的数学老师)

deg = 180/(Math.PI / rad);

//(是的,我们通过cos得到了一个角度“rad”,不过是以弧度为单位的)

//(因此,我们需要再进一步把它转换成我们所需要的标准的角度)

if(y <0){deg = -deg;}

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

return deg;

}

用Action Script脚本实现翻书效果……

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

第二部分

——舞台上基本的Movie Clips

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

用Action Script脚本实现翻书效果……

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

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

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

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

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

用Action Script脚本实现翻书效果……

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

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

用Action Script脚本实现翻书效果……

3、创建一个包含一个点的symbol,你可以用任何风格的点,这取决于你把“点”这个symbol在舞台上放5次,分别命名为D0,D1,D2,D3和D4。

用Action Script脚本实现翻书效果……

我需要提醒你的是,不要在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 clip“Stage”的中心。

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

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

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

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

下一页
第 [1] [2] [3] [4]
免费订阅】【发表评论】【动画论坛】【  】【关闭
发表评论
 QQ号码:
 QQ密码:
 验证码: 匿名发表
* 请各位网友遵纪守法并注意语言文明。
*《互联网电子公告服务管理规定》
*《全国人大常委会关于维护互联网安全的规定》




关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 腾讯公益 | 客服中心 | 网站导航
Copyright © 1998 - 2008 Tencent Inc. All Rights Reserved
腾讯公司 版权所有