Flash制作书本翻页效果

来源:游家吧
哔哩哔哩漫画免费下载

学习办公 / 99kb

查看

用Flash实现书本翻页效果。

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

启动Flash MX,按Ctrl+M更改帧频率为ps,宽度和高度分别为xxx,然后选择白色作为背景色。

在菜单栏中依次点击“插入”→“新建元件”,然后选择图形类型并命名为“封面”。利用绘图工具在舞台上绘制书籍封面,注意使左上角与舞台中心对齐。参照图设计进行细节调整。

- 图1设计书籍封面

创建书页内页。在舞台中新建一个名为page的图像符号,运用矩形工具设计其大小与封面相仿,确保左上角与舞台中心完美契合。

设计一个看不见的按键,在时间轴上选择关键帧,利用矩形工具创建方形图标,效果如图示。

- 图2设计隐形按键

创建电影片段pages,添加书图层,设定第一帧为空白关键帧,在动作中设置停止命令。

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

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

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

- 图3的book层居中对齐制作

新的文章如下:建立一个新的button&page图层并置于book图层之上。在该图层的第一帧设置为空白帧,在第二帧插入关键帧。将隐形按钮放置其中,并使用缩放工具调整其尺寸以完全符合封面的大小,确保其覆盖整个封面范围。这样可以保证点击区域与封面紧密相连,实现最佳的交互体验。

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

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

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

- 图5设计书本开关按钮

创建一个新的电影片段叫book,总长;建立一个名叫cover的图层,将封面图像放在舞台上,使其居中对齐;从第第,这些区域应为空白,如同效果示。

创建新图层,将电影片段置于舞台正中心并水平居中,然后在属性面板中为其命名,效果如下图。

- 图6中右侧翻转的位置

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

在rightflip图层之下新建左侧页面图层,使用实例面板导入电影剪辑pages并命名为leftpage,效果如上图所示。

- 图7置于右侧页面

左页与右翻页需在同一水平线上对齐,间距等同于一页书的尺寸。当书籍翻开时,通过leftpage实现的效果需要精准定位,以达到外观和布局的一致性。

在rightflip图层之上添加新的leftflip图层。 将名为pages的影片片段导入至舞台,调整其位置以对齐于rightflip图层,并命名为leftflip,此图层用于呈现翻页动画效果。

在电影片段pages的第一帧中确实会显示为一个小的空心圆,这可能会影响视觉效果的清晰度。为了更好地进行调整,建议先删除这个空白帧。这样做的好处是能够更加直观地展示和编辑内容。具体操作步骤如下: 在图层中删除页面pages的首帧。 删除完毕后,回到d.fla文件,确认首帧被正确移除。完成上述步骤后,在制作book片段时,记得将第一帧重设为空白帧以确保整体结构的完整性。这一过程的具体操作可以通过参考示意图(图示)来实现。

- 图8呈并列双书状,视觉效果更清晰直观。

请参考下述步骤: 在时间轴上选择第和第。 点击F来设置这两个关键帧。在变换面板中,将第的pages水平缩放调整为,垂直变形设为-具体操作见下图。注意:步骤中的“具体操作”指的是上图所示的过程。

- 图9调整形变

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

- 图10编辑中心位置

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

在第和第设置pages的Transform参数为水平缩放,垂直变形,效果如图示。

- 图11配置变换参数

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

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

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

在Frame面板中,调整的渐变样式至移动模式,如图示进行设置。

- 图12呈现移动渐变效果

在Actions层的第一、二、十、十八、十九、二十、二十九和三十七帧插入关键帧,并为每个关键帧设置相应的Actions指令。

- 首帧画面

- }

- 第二帧画面

- }

- }

- }

- 第十帧画面

- }

- 第18帧画面

- }

- }

- 第19帧画面

- 第20帧画面

- 停止

- }

- }

- 第二十九帧画面

- 第37帧画面

- }

- }

- }

- }

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

- }

- }

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

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

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

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

- }

- }

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

- }

- }

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

- }

- }

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

- }

- }

- }

- }

- }

- }

- }

在按下“下一页面”时执行向后翻页;点击“上一页面”实现向前翻页;按下“关闭”键会恢复到原始状态。

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

- 将电影片段拖入场景中

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

内页采用图像增强技术,可以展示多种画面,并根据需求调整页数布局,从而实现流畅的叙事体验。

精品推荐