Flash制作书本翻页效果

用flash实现书本翻页效果。

1、 隐形按钮功能，结合目标控制、对象缩放变形与中心点调整，实现关键帧动画效果。

2、 启动Flash MX后，按下Ctrl+M，在影片属性中将帧频设为18fps，尺寸调整为450px×300px，并将背景色设置为白色。

3、 在菜单栏中依次点击插入→新建元件，弹出窗口内选择图形类型，命名为cover。使用绘图工具于舞台绘制书籍封面，确保其左上角与舞台中心点对齐，具体效果可参考图1所示布局。

4、 图1设计书籍封面

5、 创建书页内页。新建名为page的图像符号，使用矩形工具绘制与封面相同尺寸的矩形，并将其左上角与舞台中心对齐。

6、 创建一个隐形按钮，选择Hit帧并插入关键帧，然后在舞台使用矩形工具绘制一个长方形，具体样式2所示。

7、 图2设计隐形按键

8、 创建电影片段pages，添加book图层，将第一帧设为空白关键帧，并在动作中设置停止命令。

9、 在第2帧按F7插入空白关键帧，将cover图像放入舞台，使其左上角与舞台中心对齐。

10、 在第3帧按F7插入空白关键帧，将page图像放入舞台，与cover图像对齐。

11、 在第8帧按下F5键插入帧，将book层的帧数延长至8帧，具体操作3所示。

12、 图3的book层居中对齐制作

13、 新建一个button&page图层，置于book图层上方。将该层第1帧设为空白帧，在第2帧插入关键帧，把隐形按钮放入图层中，使用缩放工具调整按钮尺寸，使其与封面完全一致，并覆盖在整个封面上方，确保点击区域匹配封面范围。

14、 在第3至8帧依次插入关键帧，并用文字工具标注页码1到6，具体效果4所示。

15、 图4为电影添加隐藏按钮与页码

16、 创建两个图层：text层和pagebutton层，分别用于添加文字内容和放置功能按钮。在第4帧和第5帧插入关键帧，设计用于向后翻页的next按钮；在第5帧与第7帧之间设置关键帧，实现向前翻页的pre按钮功能；于第8帧添加close按钮，点击后可关闭书本并返回初始页面状态，完成交互控制。具体布局5所示。

17、 图5设计书本开关按钮

18、 创建一个名为book的新电影片段，总长度为37帧。添加名为cover的图层，将cover图片置于舞台中，使其左上角与舞台中心对齐。第2到第37帧保持为空白帧，具体效果6所示。

19、 创建名为rightflip的新图层，将电影片段pages置于舞台中央并居中对齐，随后在属性面板中将其命名，具体效果6所示。

20、 图6中右侧翻转的位置

21、 由于电影片段的首帧为空白，舞台显示时仅可见一个微小的空心圆。

22、 在rightflip图层下方创建新的leftpage图层，将影片剪辑pages拖入舞台，并通过实例面板将其命名为leftpage，具体效果7所示。

23、 图7置于右侧页面

24、 leftpage需与rightflip在水平方向上保持平行，间距为一本书的宽度。书籍打开后，左侧页面效果由leftpage实现，因此其位置必须准确设置，确保视觉和结构上的协调统一。

25、 在rightflip图层上方创建新的leftflip图层，将名为pages的影片片段放入舞台中，与rightflip对齐，并命名为leftflip，该图层主要用于实现翻页动画效果。

26、 由于电影片段pages的第一帧为空白帧，在图层中显示为一个小空心圆，视觉效果不够直观。建议先删除该空白帧，以便更清晰地进行效果调整（光盘中的d.fla文件已删除首帧）。待完成book片段制作后，需将第一帧重新设为空白帧以确保结构完整，具体操作可参考图8所示示意图。

27、 图8呈并列双书状，视觉效果更清晰直观。

28、 选择第2帧和第9帧，按F6设置为关键帧。在变换面板中，将第9帧的pages水平缩放调整为85%，垂直变形设为-85，具体操作9所示。

29、 图9调整形变

30、 在第10帧插入一个空白关键帧，将影片片段pages放置到舞台中，使其在水平方向与第2帧对齐，垂直位置位于第2帧左侧约一本书的宽度处。执行修改>变形>编辑中心点命令，调整pages的注册点至其右上角位置，具体效果可参照图10所示。

31、 图10编辑中心位置

32、 选择第18、19、20、29帧，按下F6键插入关键帧。

33、 在第10帧和第29帧将pages的Transform参数设为水平缩放85%、垂直变形85，具体效果参考图11。

34、 图11配置变换参数

35、 把第19帧的页面拖到舞台外面。

36、 复制第9到30帧，接着复制第2到36帧，最后复制第19到37帧。

37、 在第36帧将pages的变换属性设为水平缩放95%，垂直变形-10。

38、 在Frame面板中，将第2到9、10到18、20到29以及30到36帧的渐变类型设为移动，具体设置参考图12所示。

39、 图12呈现移动渐变效果

40、 在Actions层的第1、2、10、18、19、20、29、37帧插入关键帧，并为每个关键帧分别设置对应的Actions指令。

41、 首帧画面

42、 }

43、 第二帧画面

44、 }

45、 }

46、 }

CSS3 3D书本翻页动画效果

CSS3 3D书本翻页动画效果

63

查看详情

47、 第十帧画面

48、 }

49、 第18帧画面

50、 }

51、 }

52、 第19帧画面

53、 第20帧画面

54、 停止

55、 }

56、 }

57、 第二十九帧画面

58、 第37帧画面

59、 }

60、 }

61、 }

62、 }

63、 在电影片段的pages中，于button&page层的第2帧，将按钮button的动作设定为指定操作。

64、 }

65、 }

66、 由于电影片段book中使用了pages，需向目标..说明该片段即为所指的book内容。

67、 在页面按钮层为各个按钮分别配置对应的操作功能。

68、 第3帧中next按钮的动作设置

69、 第4帧按钮pre的执行动作设置

70、 }

71、 }

72、 第5帧中next按钮的动作设置如下

73、 }

74、 }

75、 第6帧预按钮的执行操作设置

76、 }

77、 }

78、 第7帧关闭按钮的动作设置

79、 }

80、 }

81、 }

82、 }

83、 }

84、 }

85、 }

86、 按下下一页按钮时执行向后翻页，点击上一页则向前翻页，而按下关闭按钮将返回初始界面。

87、 将电影片段book放入场景并调整至合适位置，具体布局参考图13所示。

88、 将电影片段拖入场景中

89、 按下Ctrl+Enter即可测试当前效果。

90、 内页通过添加图形增强视觉效果，可在电影片段页面插入多幅画面，用以呈现完整叙事，页数可根据需要灵活设定。

以上就是Flash制作书本翻页效果的详细内容，更多请关注php中文网其它相关文章！