注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

Flash课件通用导航界面  

2009-08-18 08:04:57|  分类: flash课件制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

课件效果

 

这是通用导航界面的另一个实例,在这个实例当中,我们同样以按钮动作作为触发事件,即单击导航按钮后触发相应的影片剪辑运行,从而达到进入二级页面的目的。从本质上讲该实例与前面几个相同,其区别在于布局方式和制作方法上稍有差别。

画面的主体部份是4个主导航按钮,这些按钮均被定义相应的动作脚本,单击其中任意一个按钮,可弹出相应页面。弹出画面的右下方是一个名为“返回”的按钮,单击此按钮,弹出窗口自动关闭,画面返回到初始状态。

制作要点

 

1.图层结构分析

图1是课件完成以后的图层结构。Flash课件通用导航界面 - 白云飘飘 - .

图1 课件的图层结构

【背景和标题】图层由“背景”、“环形球”元件和静态文本构成,【光线】图层则采用了图形的形状渐娈方式来处理,这两个图层之间是遮罩和被遮罩的关系,最后形成一束光线一闪而过,画面逐渐展开的效果。另外在【星1】、【星2】图层中我们设计制作了一颗闪亮的星球,对“光线”进行了渲染,以增加课件的整体美感,具体效果可参考配套光盘中的源文件。

【按钮】图层是本课件的主休部分,在此必然要引用到按钮元件,图2是导航按钮“课件标题1”的图层结构和参考效果。Flash课件通用导航界面 - 白云飘飘 - .

 

 

图2 “课件标题1”的图层结构和参考效果

 

其它3个导航按钮的制作手法类似于按钮“课件标题1”,这里不作详述。在这4个按钮导航图层(被放在一个名字为“按钮”的层文件夹中)中,我们分别以4个主导航按钮为对象,采用了补间动画并配以合适的外部音效的方式来处理完成。

 

2.导航按钮元件分析

毫无疑问,4个导航按钮上均定义有动作脚本来触发相应的鼠标事件,这是本课件的关键所在,以按钮“课件标题1”为例,其动作脚本为:

on (release) {

gotoAndStop(122);

mc1._visible = 1;

}

 

以上动作脚本所执行的功能为:当按下该按钮并释放鼠标后,主场景时间轴线跳转到第122帧停止运行,同时,实例名为“mc1”的影片剪辑为可见状态。为什么要跳转到第122帧停止运行?为什么“mc1”影片剪辑要设置为可见?

先看看【弹出窗口】图层,在该图层的第122帧至125帧,我们分别设置了4个实例名为“mc1”、“mc2”、“mc3”、“mc4”的影片剪辑,这4个影片剪辑即为课件的弹出窗口,它们分别对应着4个主导航按钮并配合它们的按钮动作。另外在该图层的第121帧,我们定义了帧动作脚本为:stop,也就是说当影片播放到此帧后停止运行,画面已全部展开,4个主导航按钮也均已出现,此时主画面呈现静止状态并等待下一步指令。还是以“课件标题1”按钮为例,假设我们此时单击该按钮,主场景时间轴线跳转到第122帧停止,同时该帧中的影片剪辑“mc1”开始运行。“mc1”开始运行意味着“弹出窗口1”慢慢出现在画面中,这样便实现了课件的“弹出窗口”功能。图3为“mc1”影片剪辑元件的图层结构和参考效果。Flash课件通用导航界面 - 白云飘飘 - .

 

 

图3 “mc1”影片剪辑元件的图层结构和参考效果

 

如上图所示,在“弹出窗口”的右下角有一个名为“返回”的按钮元件,该按钮上的动作脚本为:

on (release) {

_root.mc1._visible = 0;

}

以上动作脚本的功能是,单击该按钮并释放鼠标后,实例名为“mc1”的影片剪辑元件为不可见状态,这里的“_root”为路径。 

通过以上动作脚本,从而实现了课件的“清屏”功能。单击“返回”按钮这一动作对应了前面部份的主导航按钮动作。

分析至此,相信你对定义在导航按钮上的动作脚本“mc1._visible = 1;”有了更深层次的理解。

本课件中引用的声音文件路径为:配套光盘\素材\ch2素材\声音5.mp3-声音8.mp3。

 

课件总结本课件的重点是主场景时间轴线和图层结构的布局方法以及各按钮元件之间的动作关联,4个弹出窗口影片剪辑元件的制作方法也值得关注。另外,本课件还引用了4段外部音效,适时地对课件的整体效果进行了渲染,起到了锦上添花的作用

  评论这张
 
阅读(789)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017