庖丁解牛 酷炫FlashWeb浮动面板篇
数码时尚
要做好一个网站,除了拥有灵活友好的界面吸引来访者之外,细微之处也是不可忽视的。每一个不起眼但却别具匠心的地方,都可为你的网站带来忠实的拥护者。要在这细微之处显出工夫,拥有一个美观的导航条是必要的,想想动感互动的界面配合美观的导航条设置,有哪个访问网站的网友不会动心呢?
今天我给大家讲讲FlashWeb中的浮动面板制作。差点忘记了,以上源程序及图片部分可以在http://wsmmt.52flash.net/flashweb.rar处下载,而《电脑迷》第9期也会收录!
浮动面板也就是可以实现拖动的面板,类似于操作系统中的窗口,这样的设计也是为了迎合大众的操作习惯。Flash中创作的浮动面板,可以实现类似Windows操作系统中窗口的所有功能,另外还可以实现一些其他的效果,例如动画和其他交互。
1.在Flashweb.fla文件中新建一个图层,图层名称为panel。绘制一个矩形,填充色彩#4C627D,W:107,H:11。将左边和上方的边框色设置为#7F8FA3,右边和底下的边框色设置为#324C5C,使之呈现立体状。
2.选中这个矩形,按F8键转换成影片剪辑,名称为panel。在panel影片剪辑中,新建5个图层,各复制一个如图1所示图形,使之平均分布,再在相应的图层输入文字内容,然后在顶端与底部绘制如图2所示的两个图形。
3.新建一个图层,绘制一个最小化按钮,然后按F8键转换成影片剪辑,名称为panelbtnmc。双击进入影片剪辑,在第1帧输入代码stop(),在第2帧绘制一个最大化按钮,将两个按钮图形转换成按钮,在最小化按钮中添加如下代码。
on(press){
_parent.panelaction.play()
gotoandstop(2)
}
4.在最大化按钮中输入如下代码:
on(press){
_parent.play()
gotoandstop(1)
}
5.双击空白区域回到上一级影片剪辑,使用“Insert→New Symbol”命令制作一个空影片剪辑,名称为panelaction。在这个空影片剪辑的第1帧输入代码stop()。
6.在第2帧建立关键帧,输入代码如下:
if(_parent._currentframe>1){
_parent.gotoandstop(_parent._currentframe-1)
}
if(_parent._currentframe<=1){
_parent._currentframe=1
gotoandstop(1)
}
解说
这是一个控制类的影片剪辑,或者叫做控制类影片剪辑。
第一行:当上一级影片剪辑的当前帧大于1时。
第二行:上一级影片剪辑的时间轴停止在上一级影片剪辑的当前帧减一的位置,也就是让时间轴倒退一格。
第四行:当上一级影片剪辑的当前帧小于等于1时。
第五行:上级影片剪辑的当前帧等于1。
第六行:影片剪辑将停止在第1帧,也就是完成了控制使用。
7.在第3帧建立关键帧,输入代码gotoandplay(2),也就实现了帧内循环的方式。
8.将这个影片剪辑拖放到panel影片剪辑中,在“Instance Name”输入框中输入实例名称为panelaction。
9.在panel影片剪辑中,选中最顶端的一格,按F8键将它转换成button按钮,然后在按钮中输入如下代码:
on (press){
this.startDrag(false, 53, 158, 587, 340);
}
on (release, releaseOutside) {
this.stopdrag();
}
解说
第一行:当鼠标单击按钮时。
第二行:开始拖动影片剪辑,范围为左端等于53、顶端等于158、右端等于587、底部等于340。
第四行:鼠标单击后松开,或者在按钮以外松开时。
第五行:停止拖放这个影片剪辑。
10.按“Ctrl+Enter”键测试我们的浮动面板。
在下一期中,我们将着重讲解缓冲式移动背景的制作方法。缓冲式可移动背景也是FlashWeb的特色之一,它在很多FlashWeb中都有应用,但是关于背景切换的方法却有所不同。大多数网站使用的背景切换方式,是用时间轴的方法来完成的。我们将通过使用Action程序来控制背景的切换,这样一定可以使大家有所收获。

