Flash动画实例训练
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Flash动画实例训练
目录
实例1:浮动文字的制作效果 (2)
实例2:金属文字的制作 (6)
实例3 小球碰撞 (10)
实例4 图片浏览 (16)
实例5动画按扭 (21)
实例6 键盘控制 (26)
实例7 烟花效果 (36)
实例8 鱼在海底游 (42)
实例9 遮罩文字 (45)
实例10 图像放大实例 (48)
实例11 登录界面的制作 (52)
实例12 闰年判断 (60)
实例13 函数求值 (64)
实例14 卷联 (68)
实例15 会跳动的彩信 (72)
实例1:浮动文字的制作效果
实例说明
本例将利用遮罩层制作的一个实例,最终效果如图1.14所示.
学习目标
通过本例学习,应能掌握遮罩层的概念,掌握如何利用遮罩层来制作动画。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为500px*120px,背景为黑色,帧频为8fps,ActionScript:2,属性面板设置如图1.1所示。
图1.1所示
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【浮动文字】的图形元件如图1.2所示
图1.2所示
(4)在该元件场景中利用【文本工具】输入“浮动文字”,字的大小设置为:56。
字的样式为:Courier New,字的颜色为:#999999,Alpha:100%,宽:228.4,高:69,X:-2.0,Y:-5.0,属性面板设置如图1.3所示。
图1.3所示
(4)【新元件】的效果图如图1.4所示
图1.4所示
(5)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【条形图形】的图形元件如图1.5所示。
图1.5所示
(6)在【新元件】场景中选择【矩形工具】设置笔触颜色为:#CCCCCC,Alpha:100%,在该元件的场景中画一个宽:48.6,高:57,X:- 105.3,Y:-26.5的矩形,并用Ctrl+C进行【复制】,再用Ctrl+V进行【粘贴】,【复制】5个大小一样的矩形,并选择【选择工具】适当的调整间距,使之浮动的效果更好。
属性面板设置如图1.7所示。
图1.7所示
(7)选择【窗口】|【库面板】,打开【库】面板,并把库面板中的【浮动文字】元件拖入到场景中,并放在第1图层中,把第1图层重命名为:浮动文字,同时在浮动文字图层的第40帧,按F5,完成后的时间面板如图1.8所示。
图1.8所示
(8)在场景中再次选择【窗口】|【库面板】,打开【库】面板,并把库面板中的【条形图形】元件拖入到场景中,并放在第2图层中,在第2图层的第20帧,右击选择【插入关键帧】如图1.9所示,,同样在第40帧也右击选择【插入关键帧】,并把【条形图形】元件移到第1帧的位置。
再选择第1帧,单击【属性】面板中【补间】按钮,并选择其中的【动画】,缓动:0,旋转:自动,属性面板设置如图1.10所示。
在第20帧也做第1帧同样的设置。
图1.9所示图1.10所示
(9)选种第2层,右击选择【遮罩层】,如图1.11所示,时间轴最后的效果图如图1.12所示。
图1.11所示图 1.12所示
(10)在场景中再次选择【窗口】|【库面板】,打开【库】面板,并把库面板中的【浮动文字】元件拖入到场景中,并放在第3图层中,在第3图层的第20帧,右击选择【插入关键帧】如图1.9所示,把【浮动文字】元件右移一小段距离,同样在第40帧也右击选择【插入关键帧】,并把【浮动文字】元件上移一段位置。
再选择第1帧,单击【属性】面板中【补间】按钮,并选择其中的【动画】,缓动:0,旋转:自动,属性面板设置如图1.10所示。
在第20帧也做第1帧同样的设置。
时间轴设完的最后效果如图1.13所示。
图1.13所示
(11)选择【控制】|【测试影片】命令,观看所做的效果,或按Ctrl+Enter进行测试。
效果如图1.14所示。
(12)选择【文件】|【保存】,如图1.15所示,这样就保存成一个.fla格式的文件了。
这个实例到这就全部结束。
图1.14所示
图 1.15所示
实例2:金属文字的制作
实例说明
本例将利用遮罩层制作的一个实例,最终效果如图2.12所示.
学习目标
通过本例学习,应能掌握遮罩层的概念,掌握如何利用遮罩层来制作动画。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为400px*200px,背景为黑色,帧频为8fps,ActionScript:2,属性面板设置如图2.1所示。
图2.1所示
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【元件1】的图形元件如图2.2所示
图2.2所示
(4)在【新元件】场景中选择【矩形工具】,在该元件的场景中画一个宽:698px,高:81 px,X:0 px,Y:0.1 px的矩形条,属性面板设置如图2.3所示。
并打开【混合器】面板,在填充样式下拉列表框中选择线性选项,设置其填充颜色为:红:216,绿:122,蓝:0,Alpha:100%,如图2.4所示。
图2.3所示
图2.4所示
(5)选择【窗口】|【库面板】,打开【库】面板,并把库面板中的【元件1】元件拖入到场景中,并放在第1图层中,位置为:X:-376.9,Y:89,属性面板的设置如图2.5所示
图2.5所示
选择第25帧,右击【插入关键帧】如图2.6所示,并把元件1的位置调整为:X:-36,Y:89,完成后的时间面板如图2.7所示。
图2.6所示图2.7所示
(6)在图层面板上选择【插入图层】,新建一个图层2,如图2.8所示。
在图层2中输入“金属文字”,并在第25帧按F5,选择第2层右击选择【遮罩层】如图2.9所示。
图2.8所示图2.9所示
(7)再新建一个图层3,选择第2层的第1帧右击选择【复制帧】如图2.10所示,再选择第3层的第1帧选择【粘贴帧】,并选择【修改】|【分离】,最后完成的时间轴如图2.11所示。
图2.10所示图2.11所示
(8)选择【控制】|【测试影片】命令,观看所做的效果,或按Ctrl+Enter进行测试。
效果如图2.12所示。
(9)选择【文件】|【保存】,如图2.13所示,这样就保存成一个.fla格式的文件了。
这个实例到这就全部结束
图2.12所示
图2.13所示
实例3 小球碰撞
实例说明
本例将利用引导层制作的一个实例,最终效果如图3.20所示.
学习目标
通过本例学习,应能掌握引导层的概念,掌握如何利用引导层来制作动画。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为400px*200px,背景为黑色,帧频为8fps,ActionScript:2,属性面板设置如图3.1所示。
图3.1所示
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【小球】的图形元件如图3.2所示。
图3.2所示
(4)在【新元件】场景中选择【椭圆工具】,在该元件的场景中画一个宽:69.8px,高:69.8 px,X:0 px,Y:0 px的圆,属性面板设置如图3.4所示。
并打开【混合器】面板,在填充样式下拉列表框中选择线性选项,设置其填充颜色为:红:255,绿:255,蓝:255,Alpha:100%,如图3.5所示。
图3.4所示
(5)选择【窗口】|【库面板】,打开【库】面板,并把库面板中的【小球】元件拖入到场景中,并放在第1图层中,位置为:X:208.4,Y:328.4,【属性】面板的设置如图3.6所示,选择第25帧、第40帧,右击【插入关键帧】如图3.7所示。
图3.6所示
图3.5所示图3.7所示
并在第40帧把元件1的位置调整为:X:552.5,Y:329.4,在第50帧按F5。
再回到第20帧,单击【属性】面板中【补间】按钮,并选择其中的【动画】,缓动:0,旋转:自动,属性面板设置如图3.8所示。
时间轴设完的最后效果如图3.9所示。
图3.8所示
图3.9所示
(6)在图层面板上选择【插入图层】,新建一个图层2,如图3.10所示
在图层2的第1帧,选择【窗口】|【库面板】,打开【库】面板,并把库面板中的【小球】元件拖入到场景中,位置为:X:81,Y:197.8,属性面板设置如图3.11所示,
图3.10所示
图3.11所示
选择第20帧、第40帧、第50帧【插入关键帧】,在第20帧小球的位置为:X:135.1,Y:330.1,在第40帧的位置为:X:-47.0,Y:210.1,第50帧的位置为:X:-124.9,Y:320.4,分别选择第1帧、第20帧、第40帧,单击【属性】面板中【补间】按钮,并选择其中的【动画】,缓动:0,旋转:自动,属性面板设置如图3.12所示。
时间轴设完的最后效果如图3.13所示。
图3.12所示
图3.13所示
(7)选择图层中的添加运动引导层,如图3.14所示,用【直线工具】画一条直线,并用【选取工具】做适当的调整,使之成为一条抛物线,如图3.16所示。
在第50帧按F5。
图 3.16所示
(8)在引导层的上面在新建一个图层3,用【直线工具】画一条直线,把直线的颜色设为:黑色,线条设为:实线,粗细设为:2,把其作为小球碰撞的地面。
属性面板的设置如图3.17所式。
在第50帧按F5。
图3.17所示
(9)再回到第2层的第20帧,把【小球】元件的中心与引导层的起始位置对齐,并与图层1的小球正好在这个位置碰撞,在第50帧把【小球】元件的中心正好与引导层的终止位置对齐。
如图3.18所示,最后完成的时间轴如图3.19所示
图3.18所示
图3.19所示
(10)选择【控制】|【测试影片】命令,观看所做的效果,或按Ctrl+Enter 进行测试。
效果如图3.20所示。
(11)选择【文件】|【保存】,如图3.21所示,这样就保存成一个.fla格式的文件了。
这个实例到这就全部结束
图3.20所示
图 3.21所示
实例4 图片浏览
实例说明
本例将利用元件中的按钮制作的一个实例,最终效果如图4.11所示.
学习目标
通过本例学习,应能掌握按钮的概念,掌握如何利用按钮加上行为面板中的代码来制作动画。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档。
(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为550px*400px,背景为黑色,帧频为12fps,ActionScript:2,属性面板设置如图4.1所示。
图4.1所示
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【next】的按钮元件如图4.2所示。
图4.2所示
(4)在【新元件】场景中,在【弹起】帧选择一个箭头图标,并与舞台的中心对齐,在【指针经过】帧选择一个箭头图标,在【按下】帧也选择一个箭头图标,在【点击】帧画一个黑色的圆形。
最后做成的按钮时间轴如图4.3所示。
制作出的next按钮外观如图4.4所示。
图4.3所示图 4.4所示
(5)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【previous】的按钮元件如图4.5所示。
图4.5所示
(6)在【新元件】场景中,在【弹起】帧选择一个箭头图标,并与舞台的中心对齐,在【指针经过】帧选择一个箭头图标,在【按下】帧也选择一个箭头图标,在【点击】帧画一个黑色的圆形。
最后做成的按钮时间轴如图4.3所示。
制作出
的previous按钮外观如图4.4所示。
(7)选择【窗口】|【库面板】,打开【库】面板,并把库面板中的1.jpg图片拖入到场景中,并放在第1图层的第1帧上,位置为:X:177.3,Y:139.5,宽:160,高:120,【属性】面板的设置如图4.6所示,再分别选择第1图层的第(2)(3)(4)(5)6帧右击【插入关键帧】如图 4.7所示,并分别把2.jpg,3.jpg,4.jpg,5.jpg,6.jpg图片拖到相应的帧上,位置与大小同第1帧的相同。
图4.6所示
图4.7所示
(8)在图层面板上选择【插入图层】,新建一个图层2,在图层2的第1帧,选择【窗口】|【库面板】,打开【库】面板,并把库面板中的【next】元件拖入到场景中,位置为:X:201.6,Y:312.6,宽:21.6,高:21.6,属性面板设置如图4.8所示。
图4.8所示
(9)选择【窗口】|【行为面板】,并选中第2层的第1帧,在【行为面板】的【时间轴控制】中选择stop();再选中第2层第1帧中的【next】按钮对象,并在【行为面板】输入一下代码:
(1)on (release) {
(2)nextFrame();
(3)}
(10)在第2层的第2帧分别把【next】按钮和【previous】按钮拖到舞台上来,
【next】按钮的位置为:X:199.9,Y:309.9, 【previous】按钮的位置为:X:250.5,Y:309.9,属性面板的设定如图4.9所示
图4.9所示
选中第2层的第2帧,在【行为面板】的【时间轴控制】中选择stop();再选中第2层第1帧中的【next】按钮对象,并在【行为面板】输入一下代码:
(1)on (release) {
(2)nextFrame();
(3)}
再选中第2层第2帧的【previous】按钮对象,并在【行为面板】输入一下代码:(1)on (release) {
(2)prevFrame();
(3)}
(11)在第2层的第3帧、第4帧、第5帧的具体做法和设定方法同步骤10,在这里就不多讲了。
(12)在第2层的第6帧,把【previous】按钮拖到舞台上来,【previous】按钮的位置为:X:250.5,Y:309.9,并选中第2层的第6帧,在【行为面板】的【时间轴控制】中选择stop(),再选中第2层第6帧的【previous】按钮对象,并在【行为面板】输入一下代码:
(1)on (release) {
(2)prevFrame();
(3)}
(13)这个实例完成后的时间轴如图4.10所示。
图4.10所示
(14)选择【控制】|【测试影片】命令,观看所做的效果,或按Ctrl+Enter进行测试。
效果如图4.11所示。
(15)选择【文件】|【保存】,如图4.12所示,这样就保存成一个.fla格式的文件了。
这个实例到这就全部结束
图4.11所示
图4.12所示
实例5动画按扭
实例说明
本例将利用元件中的按钮制作的一个实例,最终效果如图5.16所示.
学习目标
通过本例学习,应能掌握元件中按钮的创建方法,同时结合元件中的影片剪辑一起使用,制作一个动画的按钮。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档。
(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为550px*400px,背景为白色,帧频为12fps,ActionScript:2,属性面板设置如图5.1所示。
图5.1所示
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【元件1】的图形元件如图5.2所示
图5.2所示
(4)在【新元件】场景中,在第1帧选择【椭圆工具】,在该元件的场景中画一个宽:191.0px,高:74 px,X:-95.5 px,Y:-37 px的椭圆,并打开【混合器】面板,在填充样式下拉列表框中选择纯色选项,设置其填充颜色为:红:204,绿:0,蓝:0,Alpha:100%,如图5.4所示。
并用输入“动画按钮”,字的颜色为:#FFFF33,属性面板设置如图5.5所示。
设置后的时间轴如图5.6所示。
图5.4所示
图 5.5所示
图5.6所示
(5)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【元件2】的影片剪辑元件如图5.7所示,在【新元件】场景中,在第1帧选择【窗口】|【库面板】,打开【库】面板,并把库面版中的【元件1】拖到舞台上,并放在第1帧上,其位置为:宽:191.0,高:74,X:-95.5,Y;-37,再选种第15帧、30帧【插入关键帧】,在第1帧属性面板设定为:补间:动画,缓动:-34,旋转:逆时针,1次,属性面板设置如图5.8所示,在第15帧属性面板设定为:补间:动画,缓动:34,旋转:顺时针,1次,建立一个旋转的动画按钮。
设置完的时间轴如图5.11所示
图5.7所示
图5.8所示
图5.11所示
(6)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【元件3】的影片剪辑元件如图5.9所示,在【新元件】场景中,在第1帧选择【窗口】|【库面板】,打开【库】面板,并把库面版中的【元件1】拖到舞台上,并放在第1帧上,其位置为:宽:191.0,高:74,X:-95.5,Y;-37,再选种第15帧、30帧【插入关键帧】,在第15帧打开【窗口】|【变形】面板,把其宽、高都放大为260%,【变形】面板设定如图5.10所示,在选中第1帧、第15帧、属性面板设置为:补间:动画,缓动:0,旋转:自动,建立一个放大的动画按钮。
设置后的时间轴如图5.12所示。
图5.9所示图 5.10所
图5.12所示
(7)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【元件4】的按钮元件如图5.13所示,在【新元件】场景中,在【弹起】帧选择【窗口】|【库面板】,打开【库】面板,并把库面版中的
【元件1】拖到舞台上,并放在第1帧上,其位置为:宽:150,高:60,X:-75,Y;-30,在【指针经过】帧选择【窗口】|【库面板】,打开【库】面板把【元件2】拖到舞台上来,位置同第1帧,在【按下】帧选择【窗口】|【库面板】,打开【库】面板把【元件3】拖到舞台上来。
设置后的时间轴如图5.14所示。
图5.13所示图5.14所示
(8)回到场景,选择【窗口】|【库面板】,打开【库】面板,并把库面版中的【元件4】拖到舞台上,并放在第1帧上,设置后的时间轴如图5.15所
示。
图5.15所示
(9)选择【控制】|【测试影片】命令,观看所做的效果,或按Ctrl+Enter进行测试。
效果如图5.16所示。
(10)选择【文件】|【保存】,如图5.17所示,这样就保存成一个.fla格式的文件了。
这个实例到这就全部结束
图5.16所示
图5.17所示实例6 键盘控制
实例说明
本例将利用库面板制作的一个实例,最终效果如图6.28所示.
学习目标
通过本例学习,应能掌握库面板的使用方法,同时结合行为面板的使用,使动画制作更具人文性,利用键盘来操作动画。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档。
(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为640px*480px,背景为白色,帧频为12fps,ActionScript:2,属性面板设置如图6.1所示。
图6.1所示
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【按钮】的影片剪辑元件如图6.2所示
图6.2所示
(4)在【新元件】场景中
①选中第7层第1帧,选择【窗口】|【行为面板】,在【行为面板】的【时间轴控制】设为:stop()。
第2帧选择【矩形工具】画一个宽:102.1,高:72.3,X:-20.8,Y:-50.3的矩形,属性设置如图6.3所示。
图6.3所示
②在第6层的第1帧,选择【矩形工具】画一个宽:4.7,高:29.3,X:
11.7,Y:-16.7的矩形,打开【窗口】|【混合色】面板,七颜色设置为:红:0,绿:0,蓝:0,Alpha:20%,【混合色】面板设置如图6.4所示。
在第2帧选择【矩形工具】画一个宽:5.3,高:32.9,X:12.9,Y:-18.8的矩形,打开【窗口】|【混合色】面板,【混合色】面板设置如图6.4所示
图6.4所示
③在第5层的第1帧选择【矩形工具】画一个宽:34.1,高:34.0,X:-17.4,Y:-17.0的矩形,属性面板的设置如图6.5所示。
打开【窗口】|【混合色】面板,其颜色设置为:红:171,绿:156,蓝:90,Alpha:100%,【混合色】面板设置如图6.6所示。
在第2帧选择【矩形工具】画一个宽:38.3,高:38.1,X:-19.7,Y:-19的矩形,打开【窗口】|【混合色】面板,【混合色】面板设置如图6.7所示。
图6.5所示
图6.6所示图6.7所示
④在第4层的第1帧选择【矩形工具】画一个宽:20.2,高: 0,X:-11.3,Y:-12.9的矩形,属性面板的设置如图6.8所示。
打开【窗口】|【混合色】面板,其颜色设置为:红:255,绿:255,蓝:255,Alpha:30%,【混合色】面板设置如图6.9所示。
在第2帧选择【矩形工具】画一个宽:29.6,高:30.3,X:-15.5,Y:-14.6的矩形,打开【窗口】|【混合色】面板,【混合色】面板设置如图6.9所示。
图6.8所示
图6.9所示
⑤在第3层的第1帧选择【矩形工具】画一个宽:26.2,高: 26.2,X:-13.5,Y:-13.3的矩形,属性面板的设置如图6.10所示。
打开【窗口】|【混合色】面板,其颜色设置为:红:171,绿:156,蓝:90,Alpha:100%,【混合色】面板设置如图6.11所示。
在第2帧选择【矩形工具】画一个宽:29.5,高:29.4,X:-15.4,Y:-14.9的矩形,打开【窗口】|【混合色】面板,【混合色】面板设置如图6.11所示。
图6.10所示
图6.11所示
⑥在第2层的第1帧选择【矩形工具】画一个宽:36.0,高: 36.0,X:-18.2,Y:-17.9的矩形,属性面板的设置如图6.12所示。
打开【窗口】|【混合色】面板,颜色设置为:红:128,绿:114,蓝:66,Alpha:100%,【混合色】
面板设置如图6.13所示。
在第2帧选择【矩形工具】画一个宽:40.5,高:40.5,X:-20.7,Y:-20.1的矩形,打开【窗口】|【混合色】面板,颜色设置为:红:102,绿:90,蓝:53,Alpha:100%,【混合色】面板设置如图6.14所示。
图6.12所示
图6.13所示图6.14所示
⑦在第1层的第1帧选择【矩形工具】画一个宽:46.3,高: 46.2,X:-23.4,Y:-23的矩形,属性面板的设置如图6.15所示。
打开【窗口】|【混合色】面板,颜色设置为:红:0,绿:0,蓝:0,Alpha:9%,【混合色】面板设置
如图6.16所示。
在第2帧选择【矩形工具】画一个宽:57.8,高:57.8,X:
-29.1,Y:-28.8的矩形,打开【窗口】|【混合色】面板,【混合色】面板设置如图6.16所示。
设置后的时间轴如图16.17所示。
这样就建成了一个模拟按钮。
图6.15所示
图6.16所示
图6.17所示
(5)选择【窗口】|【库面板】,打开【库】面板,在这里我们给大家提供一个【瓢虫】影片剪辑元件,用时可以打开【库】面板就可以了。
(6)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【瓢虫影子】的影片剪辑元件如图6.18所示。
图6.18所示
图6.20所示
(7)在【新元件】中用【椭圆工具】画一个宽:61.3,高:47.8,X:-30.6,Y:-23.9的椭圆,属性面板如图6.19所示。
选择【窗口】|【混合器面板】,颜色设置为:红:0,绿:0,蓝:0,Alpha:5%,【混合器面板】的设置如图 6.20所示。
图6.19所示
(8)选择【窗口】|【库面板】,打开【库】面板
①把绿背景拖到场景的第1层的第1帧上,再选择新建图层,
②在第2层,选择【窗口】|【库面板】,打开【库】面板,把【瓢虫】元件拖到场景中来,位置为:宽:48.6,高:62.5,X:266.1,Y:76.2实例名称为:bug,属性面板的设置如图6.21所示。
③再选择【窗口】|【库面板】,打开【库】面板,把【瓢虫影子】元件拖到场景中来,位置为:宽:61.3,高:47.8,X:260.4,Y:47.8实例名称为:shadow g,属性面板的设置如图6.22所示。
图6.21所示
图6.22所示
④再选择【窗口】|【库面板】,打开【库】面板,把【模拟按钮】元件拖到场景中来,位置为:宽:46.2,高:46.2,X:76.9,Y:258.9实例名称为:up,属性面板的设置如图6.23所示。
⑤再选择【窗口】|【库面板】,打开【库】面板,把【模拟按钮】元件拖到场景中来,位置为:宽:46.2,高:46.2,X:29.9,Y:302.9实例名称为:left,属性面板的设置如图6.24所示。
图6.23所示
图6.24所示
⑥再选择【窗口】|【库面板】,打开【库】面板,把【模拟按钮】元件拖到场景中来,位置为:宽:46.2,高:46.2,X:74.9,Y:302.9实例名称为:down,属性面板的设置如图6.25所示。
图6.25所示
⑧再做一个箭头的复合图形,最后的组合如图6.26所示。
图6.26所示
(19)选择第2层的第1帧,再选择【窗口】|【行为面板】,打开【行为】面板,在其中添加如下的代码:
(1)speed = 5;
(2)onEnterFrame = function () {
(3)switch (Key.getCode()) {
(4)case 38 :
(5)up.gotoAndPlay(2);
(6)bug._y -= speed;
(7)bug._rotation = 0;
(8)break;
(9)case 40 :
(10)down.gotoAndPlay(2);
(11)bug._y += speed;
(12)bug._rotation = 180;
(13)break;
(14)case 37 :
(15)left.gotoAndPlay(2);
(16)bug._x -= speed;
(17)bug._rotation = 270;
(18)break;
(19)case 39 :
20、right.gotoAndPlay(2);
(21)bug._x += speed;
(22)bug._rotation = 90;
(23)}
(24)shadow._x = bug._x+3;
(25)shadow._y = bug._y+3;
(26)shadow._rotation = bug._rotation+90;
(27)if (bug._y<0) {
(28)bug._y = 480;
(29)}
(30)if (bug._y>480) {
(31)bug._y = 0;
(32)}
(33)if (bug._x<0) {
(34)bug._x = 640;
(35)}
(36)if (bug._x>640) {
(37)bug._x = 0;
(38)}
(39)};
(10)完成后的最后时间轴如图6.27所示。
图6.27所示
(11)选择【控制】|【测试影片】命令,观看所做的效果,或按Ctrl+Enter 进行测试,如图6.28所示。
图6.28所示
(12)选择【文件】|【保存】,如图6.29所示,这样就保存成一个.fla格式的文件了。
这个实例到这就全部结束。
图6.29所示
实例7 烟花效果
实例说明
本例将利用行为面板制作的一个实例,最终效果如图7.13所示.
学习目标
通过本例学习,应能掌握行为面板的使用方法,同时结合库面板的使用,使动画制作更具人文性,利用鼠标来操作动画。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档。
(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为550px*400px,背景为黑色,帧频为12fps,ActionScript:2,属性面板设置如图7.1所示。
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【line】的影片剪辑元件如图7.2所示。
图7.1所示
图7.2所示
(4)在【新元件】中
①第1层的第1帧选择【矩形工具】画一个宽:194.8,高: 43,X:-20.4,Y:-25的矩形,属性面板的设置如图7.3所示。
打开【窗口】|【混合色】面板,颜色设置为:红:511,绿:51,蓝:255,Alpha:100%,【混合色】面板设置如图7.4所示。
图7.3所示
图 7.4所示
在第2帧选择【窗口】|【混合器面板】,打开【混合器】面板,颜色设置为:红:255,绿:0,蓝:0,Alpha:100%,【混合器】面板的设置如图7.5所示。
在第3帧选择【窗口】|【混合器】面板,打开【混合器】面板,颜色设置为:红:0,绿:255,蓝:0,Alpha:100%,【混合器】面板的设置如图7.6所示
图7.5所示图7.6所示
②在第2层选中第1帧,选择【窗口】|【行为面板】,打开【行为】面板
的【时间轴控制】选择stop(),同样第2帧,第3帧做相同的设置。
(5)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【mline】的影片剪辑元件如图7.7所示。
(6)在【新元件】中第1帧选择【窗口】|【库面板】,打开【库】面板把【line】
元件拖到舞台上,其位置是:宽:19.5,高:4.3,X:0.0,Y:-2.5,属性设置如图7.8所示。
再选择第25帧、第30帧【插入关键帧】,并把第25帧的位置设置为,宽:19.5,高:4.3,X:142.5,Y:-4.5;第30帧的位置设置为:宽:19.5,高:4.3,X:158.0,Y:-4.5其属性面板的设置分别如图7.9、7.10所示。
再选择第1帧、第25帧,选择属性面板的【补间】为动画,其属性面板的设置如图7.11所示。
再选择第31帧,选择【窗口】|【行为面板】,在【行为】面板的添加如下的代码:
(1)this.removeMovieClip();
(2)stop();
图7.7所示
图7.8所示
图7.9所示
图7.10所示
图7.11所示
(7)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【dupm line】的影片剪辑元件如图7.12所示。
图7.12所示
(8)在【新元件】,选择【窗口】|【库面板】,打开【库】面板,把【mline】拖到第mline层上,并选择第10帧按F5,再新建一个A的图层,选中第1帧选择【窗口】|【行为面板】,在【行为】面板的添加如下的代码:
(1)j = 0;
(2)k = Math.floor(Math.random()*3)+1;
(3)mline._visible = false;
再选中第3帧选择【窗口】|【行为面板】,在【行为】面板的添加如下的代码:(1)for (i=j; i<j+60; i++) {
(2)mline.duplicateMovieClip("line"+i, i);
(3)mc=eval("line"+i)
(4)mc.line.gotoAndStop(k);
(5)mc._rotation = i*6;
(6)n = 20+random(80);
(7)mc._xscale = n;
(8)mc._yscale = n;
(9)}
再选中第7帧选择【窗口】|【行为面板】,在【行为】面板的添加如下的代码:(1)for (i=j+60; i<j+120; i++) {
(2)mline.duplicateMovieClip("line"+i, i);
(3)mc=eval("line"+i)
(4)mc.line.gotoAndStop(k);
(5)mc._rotation = i*6;
(6)n = 20+random(80);
(7)mc._xscale = n;
(8)mc._yscale = n;
(9)}
再选中第10帧选择【窗口】|【行为面板】,在【行为】面板的添加如下的代码:(1)for (i=j+120; i<j+180; i++) {
(2)mline.duplicateMovieClip("line"+i, i);
(3)mc=eval("line"+i)
(4)mc.line.gotoAndStop(k);
(5)mc._rotation = i*6;
(6)n = 20+random(80);
(7)mc._xscale = n;
(8)mc._yscale = n;
(9)}
(10)stop();
(9)选择场景用输入“在场景任意处单击”,并选择【窗口】|【行为面板】,在【行为】面板的添加如下的代码:
(1)i = 0;
(2)onMouseDown = function () {
(3)attachMovie("dup_mline", "dline"+i, i);
(4)_root["dline"+i]._x = _xmouse;
(5)_root["dline"+i]._y = _ymouse;
(6)i++;
(7)};
(10)选择【控制】|【测试影片】命令,观看所做的效果,或按Ctrl+Enter 进行测试。
效果如图7.13所示。
(11)选择【文件】|【保存】,如图7.14所示,这样就保存成一个.fla格式的文件了。
这个实例到这就全部结束。
图7.13所示
图7.14所示
实例8 鱼在海底游
实例说明
本例将利用元件中的图形制作的一个实例,最终效果如图8.9所示.
学习目标
通过本例学习,应能掌握元件中图形的使用方法,同时结合引导层的使用,使动画制作围绕引导线进行。
☞操作步骤
(1)启动Flash8.0程序。
选择【文件】|【新建】命令,新建一个Flash文档。
(2)单击【属性】面板中【大小】按钮。
打开【文档属性】对话框。
设置场景大小为500px*400px,背景为浅蓝色,帧频为12fps,ActionScript:2,属性面板设置如图8.1所示。
(3)选择【插入】|【新建元件】命令。
打开【创建新元件】对话框,创建一个名为【鱼】的图形元件如图8.2所示。
图8.1所示
图 8.2所示
(4)在【新元件】中选择【窗口】|【库面板】,在【库】面板选择【yu】的图片,把其拖到舞台的如下位置:宽:365.4,高:210.8,X:0,Y:0。
(5)选择【窗口】|【库面板】,在【库】面板选择【beijing】的图片把其拖到场景的第1层上,再选择第10帧按F5。
(6)选择【新建图层】,在第2层选择【窗口】|【库面板】,在【库】面板选择【鱼】元件,把其拖到舞台上,再选择第20帧右击【插入关键帧】,并把其挪动一定的位置。
回到第1帧,单击【属性】面板中【补间】设置为动画,属性面板的设置如图8.3所示。
图8.3所示
(7)在选择【添加运动引导层】,在该图层中用【椭圆工具】画一个宽:371.9,。