FLASH CS3实例Flash网站设计Word格式文档下载.docx
- 文档编号:13360905
- 上传时间:2022-10-10
- 格式:DOCX
- 页数:13
- 大小:2.38MB
FLASH CS3实例Flash网站设计Word格式文档下载.docx
《FLASH CS3实例Flash网站设计Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《FLASH CS3实例Flash网站设计Word格式文档下载.docx(13页珍藏版)》请在冰豆网上搜索。
其中,主要是翻页动画的制作,以及与网页信息结合,形成的动画效果。
图13-38水果网站效果展示
网站首页制作
该网站首页其实就是通过导航菜单组合而成的,所以该动画可以在网页式导航菜单动画的基础上制作。
既然是网站首页,就需要将网站中各个元素添加完整。
(1)将“网页式导航菜单”文档另存为“Flash水果网站”。
然后选中“图层1”中的4个实例右击,选择【分散到图层】命令,效果如图13-39所示。
图13-39将实例分散到各图层
(2)扩大舞台尺寸后,移动实例位置如图13-40所示,并且拉出辅助线。
图13-40扩大舞台
(3)分别在第15与35帧处插入关键帧后,依次设置第1与15帧中实例的位置,如图13-41所示。
图13-41改变关键帧中的实例位置
(4)在关键帧之间创建补间动画后,在空白图层中,根据辅助线绘制任意颜色矩形,并且创建遮罩图层,如图13-42所示。
图13-42创建遮罩动画
(5)在遮罩层下方新建图层中绘制白色到灰色渐变矩形后,创建如图13-43所示的阴影和倒影显示动画。
在创建阴影和倒影显示动画时,首先要创建元件。
由于倒影需要添加模糊效果,所以需要将其创建为影片剪辑元件。
图13-43创建阴影和倒影显示动画
(6)在“背景”图层上方第25帧处插入空白关键帧,并且输入文本。
将其转换为图形元件后创建显示动画,如图13-44所示。
图13-44创建版权信息显示动画
(7)将所有素材图像与音频文件导入【库】面板后,创建影片剪辑元件LOGO,并且将tb.psd图像拖入舞台中。
然后输入文本,如图13-45所示。
图13-45创建网站LOGO
(8)在遮罩图层上方新建图层LOGO,并且在第10帧处插入空白关键帧。
将元件LOGO拖入舞台后,设置实例名称并且创建由无到有显示动画,如图13-46所示。
图13-46创建LOGO显示动画
(9)新建图层“音效”并且在第10帧处插入空白关键帧,将“拍照音效.wav”拖入舞台中。
新建图层“背景音乐”,将“背景音乐.wav”拖入舞台中,并且设置属性如图10-47所示。
图13-47添加声音
(10)最后将带有脚本的空白关键帧拖至第35帧处,并且为其添加停止动作,如图13-48所示。
这样当导航菜单显示完整后,鼠标事件开始执行。
图13-48添加停止动作
网站内页制作
该网站中的内部网页并不是一个单纯的界面,还需要创建显示动画。
所以,一个网站内页是由多个元件组长的。
(1)创建影片剪辑元件“翻页”,从第2帧开始,依次插入空白关键帧,绘制一系列灰色图形,形成逐帧的翻页动画,如图13-49所示。
图13-49制作翻页逐帧动画
为了不使该动画重复播放,在最后一个关键帧中添加停止动作。
(2)创建影片剪辑元件“内页1”,在舞台中心区域拉出560×
400像素的辅助线。
然后在“图层1”第2帧处插入空白关键帧,将元件“翻页”拖入舞台中,位置如图13-50所示。
由于元件“翻页”中的动画帧为30帧,所以这里为其添加至第31帧。
这样才能够完整播放元件“翻页”中的动画。
图13-50实例在舞台中的位置
(3)新建“图层2”并且放置相同的元件后,选中“图层1”中的实例,将其水平翻转后,设置属性如图13-51所示。
图13-51设置相反方向的翻页效果
(4)在新建“图层3”第10帧处插入空白关键帧,通过【文字工具】
、【线条工具】
以及【矩形工具】
添加网页元素。
并且将其转换为影片剪辑元件“营养”,如图13-52所示。
图13-52创建影片剪辑元件“营养”
由于图像下方为带有投影滤镜效果的灰色矩形,所以需要先将矩形转换为影片剪辑元件。
然后即可根据图像尺寸,随意调整该元件大小。
(5)在最后一帧插入关键帧后,设置第1个关键帧中的实例属性如图13-53所示。
创建补间动画后,在空白关键帧与最后一个关键帧中添加停止动作。
图13-53创建补间动画
(6)在【库】面板中直接复制元件“内页1”为“内页2”与“内页4”,并且使用相同方法创建美食与禁忌网页,如图13-54所示。
图13-54制作内页2和内页4
(7)使用相同创建元件“内页3”后,双击进入元件“美容”编辑模式中。
然后将右侧的3幅图像分别转换为按钮元件后,剪切至“图层2”中,如图13-55所示。
图13-55图像转换为按钮元件
(8)分别进入按钮元件编辑模式中,为其添加鼠标指向声效,如图13-56所示,为某个按钮元件中的效果。
图13-56编辑按钮元件
(9)选中“图层1”中的图像与说明文字转换为影片剪辑元件“图片展示动画”后,依次在该元件内部插入关键帧,分别替换图像与文本,如图13-57所示。
然后,为每个关键帧添加停止动作。
图13-57创建图片展示动画
(10)返回实例“美容”后,分别为其中的实例设置实例名称,如图13-58所示。
然后在新建“图层3”中输入如下代码,设置按钮的鼠标单击事件语句。
functiontup1(event:
MouseEvent):
void
{
mc.gotoAndStop
(1);
}
cm.addEventListener(MouseEvent.CLICK,tup1);
functiontup2(event:
mc.gotoAndStop
(2);
gz.addEventListener(MouseEvent.CLICK,tup2);
functiontup3(event:
mc.gotoAndStop(3);
nm.addEventListener(MouseEvent.CLICK,tup3);
图13-58设置实例名称
(11)至此该网站中的所有内部网页制作完成。
组合网站
当所有网站元素制作完成后,就可以将这些影片剪辑元件放置在场景中,并且通过脚本将导航菜单实例与内部网页实例链接在一起。
(1)返回场景后,在“遮罩”图层上方新建图层“内页1”,并且在第50帧处插入空白关键帧。
然后将【库】面板中的元件“内页1”,拖入舞台中,位置如图13-59所示。
图13-59将元件“内页1”拖入舞台
在确定元件“内页1”在舞台中的位置时,首先在黑色矩形下方拉出辅助线,然后双击进入该元件编辑模式,查看最后一帧效果是否在辅助线内部即可。
(2)使用相同方法,分别创建3个新图层,并且在同一动画帧中,依次将元件“内页2”、“内页3”与“内页4”拖入舞台中,如图13-60所示。
图13-60将其它内页元件拖入舞台中
(3)在【库】面板中右击元件“翻页”,选择【直接复制】命令,得到元件“翻页2”,并且进入该元件编辑模式中,如图13-61所示。
图13-61在同文档中复制元件
(4)选中全部动画帧后右击,选择【翻转帧】命令,将动画帧倒序后统一向后错位,空出第1帧。
然后在第1帧与最后一个空白关键帧添加停止动作,如图13-62所示。
图13-62翻转动画帧
(5)返回场景后,新建图层“翻页”并且在第50帧处插入空白关键帧。
将元件“翻页2”拖入舞台,并且进行【水平翻转】命令后确定位置,如图13-63所示。
为了使其清楚查看元件“翻页2”在场景中的位置,这里是从场景进入该元件编辑模式查看的。
为了使翻页正好消失在菜单后,需要重新确定24帧以后的关键帧中的图形位置。
图13-63将元件“翻页2”拖入舞台
(6)返回场景,在“翻页”图层的最后一帧中插入空白关键帧后,分别为场景中的元件“内页1”至“内页4”,以及“翻页”设置实例名称,如图13-64所示。
图13-64设置实例名称
(7)将“动作”图层中的空白关键帧拖至第50帧处,并且打开【动作-帧】面板,输入如图13-65所示代码,为“水果营养”栏目添加鼠标单击事件语句。
图13-65输入鼠标单击事件语句
在鼠标单击事件语句中,为了使网站内页独立显示,这里设置了播放的实例为可见;
其它实例为隐藏。
(8)使用相同方法为其它栏目添加鼠标单击事件语句后,为网站LOGO添加鼠标单击事件语句,如图13-66所示,使其通过翻页返回网站首页。
图13-66为网站LOGO添加鼠标事件
(9)在“动作”图层的最后一帧处插入空白关键帧后,为其添加停止动作,如图13-67所示。
图13-67添加停止动作
(10)测试影片时发现,网站内页只能正常的显示一遍,这是因为元件“翻页”中添加了停止动作。
为了解决这一问题,在每个内页元件中添加一个动画帧,并且绘制矩形,如图13-68所示。
图13-68编辑元件“内页1”
在测试影片时,由于导航菜单与网站内页均设置了setChildIndex方法。
所以要想完整显示网站内页,则需要在鼠标单击后立即离开导航菜单区域。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FLASH CS3 实例 Flash网站设计 网站 设计
![提示](https://static.bdocx.com/images/bang_tan.gif)