您好!欢迎您光临鼠标事件动画的制作与思考_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>实例教程>>>鼠标事件动画的制作与思考
鼠标事件动画的制作与思考
发表日期:2012/9/18 22:27:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 5878

 鼠标事件动画的制作与思考

   

    教学目的:通过本节教学了解和掌握按钮、as语句的基本功能及运用,并用其原理制作出奇特而巧妙的鼠标事件动画。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:按钮、as、鼠标事件。

 

   

   制作步骤

     作前准备:准备好一张梅花枝图片和一朵透明的梅花和一张透明的脸谱图片,在制图软件(如ps、fw)加工后放置在指定的文件夹待用。

    (一)花开满枝

   1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为550*400,帧频为12,背景颜色任意,其它默认,点击确定,进入场景1工作区。如图1所示:

图1

    3.创建图形元件

    (1)选择“插入-新建元件”,建立一个名为“梅花枝”的图形元件,点击确定,进入元件编辑区。将准备好的梅花枝透明图片(或有背景的位图),导入到工作区。规格要略小于场景(带背景的位图同场景)。全居中。待用。如图2所示:

图2

    (2)选择“插入-新建元件”,建立一个名为“梅花”的图形元件,点击确定,进入元件编辑区。将准备好的梅花透明图片导入到工作区,全居中。待用。如图3所示:

图3

    4.创建按钮元件

    选择“插入-新建元件”,建立一个名为“按钮梅花”的按钮元件,点击确定,进入元件编辑区。点击第1帧(弹起),从库中拖出梅花元件到编辑区,全居中。在第3帧(按下)处插入关键帧。如图4所示:


图4

    5.创建影片剪辑

    选择“插入-新建元件”,建立一个名为“梅花开”的影片剪辑元件,点击确定,进入元件编辑区。从库中拖出按钮梅花元件到编辑区,全居中。选择“右键按钮梅花-动作”,打开动作面板,在as编辑区输入如下语句:

on (press) {
startDrag ("");
} on (release, releaseOutside) {
stopDrag ();
}

    6.组织编辑场景

    返回场景1,添加三个图层,共四个图层。自下而上分别命名为背景、梅花枝、梅花开和文本。

    (1)选择背景图层第一帧,导入或制作一个背景,规格为550*400,全居中,上锁。

    (2)选择梅花枝图层第一帧,从库中拖出梅花枝元件至工作区,调整好其规格、状态、位置(如果是透明的话),上锁。

    (3)选择梅花开图层第一帧,从库中拖出梅花开影片元件至工作区,放到适当的位置。然后再拖出若干(本实例共十朵),放置在第一朵梅花的位置上,并与其完全重合。上锁。

    (4)选择文本图层第一帧,在适当的位置上输入相关的文本内容。上锁。

    此环节完成后的画面如图5所示:


图5

    7.该作业完成后的时间轴如图6所示:
 

图6

    8.测试存盘。

 

    (二)不要碰我

    1.启动FLASH8 软件。

    2.确立文档属性 设置动画尺寸为550*400,帧频为12,背景颜色任意,其它默认,点击确定。如图7所示:

图7

    3.创建图形元件

    选择“插入-新建元件”,建立一个名为“脸谱”的图形元件,点击确定,进入元件编辑区。将准备好的脸谱透明图片导入到工作区。全居中。如图8所示:

图8

 

    4.创建影片剪辑

    选择“插入-新建元件”,建立一个名为“烦”的影片剪辑元件,点击确定,进入元件编辑区。从库中拖出脸谱元件到工作区。全居中。在第30帧插入关键帧,再在第10帧插入关键帧,选择属性面板中的颜色,变换脸谱颜色,其参数如图9所示:

 
图9
 
点击第1帧,创建此区域间的补间动画;在第20帧处插入关键帧,点击第20帧,创建第20-30帧区域间的补间动画。如图10所示:
 
 
图10
 
    5.创建按钮元件

    选择“插入-新建元件”,建立一个名为“按钮烦”的按钮元件,点击确定,进入元件编辑区。点击第1帧(弹起),从库中拖出烦影片剪辑元件到编辑区,全居中。然后在第4帧(点击)处插入关键帧,用矩形工具托一个略大于脸谱的无边矩形,全居中。如图11所示:

 
图11
 
    6.组织编辑场景

    返回场景1,添加三个图层,共四个图层。自下而上分别命名为背景、烦按钮、as和文本。

    (1)选择背景图层第一帧,导入或制作一个背景,规格为550*400,全居中,上锁。

    (2)选择烦按钮图层第一帧,从库中拖出烦按钮元件至工作区,全居中。选择“右键烦按钮实例-动作”,打开动作面板,在as编辑区输入如下语句:

on (rollOver) {//当鼠标滑过的时候,开始运行程序;
play();
}

在第2帧处插入关键帧,将烦按钮实例移动到其它位置;在第3帧处插入关键帧,再将烦按钮实例移动到另一个位置;同理同种方法完成第4-8帧的操作。随后在第9帧处插入关键帧,将烦按钮实例移至到工作区中下方,并用任意变形关键将其放大一点。上锁。

    (3)选择as图层第一帧,选择“右键该帧-动作”,打开动作面板,在as编辑区输入停止指令:

stop();

然后,依次在第2-8帧处各插入空白关键帧,在每帧处“右键该帧-动作”,打开动作面板,在as编辑区输入停止指令。在第9帧处插入普通帧。上锁。

    (4)选择文本图层第一帧,用文本工具输入作品的标题“不要碰我”,字体、颜色、大小、位置自定。在第9帧处插入关键帧,用文本工具输入“你好烦人啊!!!”,字体、颜色、大小、位置自定。然后,“右键第9帧-动作”,开动作面板,在as编辑区添加停止指令。上锁。

    此环节完成后的画面如图12所示:

 
图12
 
 
    7.该作业完成后的时间轴如图13所示:  
 
 
图13
 
    8.测试存盘。
 
 
    (三)你要哪个
   
    此节内容的操作可将上两个作业的基本原理有机地结合起来,加之个人巧妙的创意来完成这里就不加赘述了。具体可参考下方的效果显示,相信您一定会作的更好。
 

    *说明:

    1.本教材主要侧重于个别鼠标事件的制作原理,依据这一原理,举一反三,可创作出各式各样、丰富多彩的特效动画来。

    2.在《花开满枝》制作中,“梅花开”影片剪辑拖放梅花的个数不限,要依据作品实际情况而定,每朵梅花可改变颜色、形状、大小和姿态,其感观更佳。同理《不要碰我》中,“烦按钮”拖放帧数和位置的变化也不定。

    3.在《不要碰我》制作中”,如果透明脸谱不是线条图形,而是具有填充色,点击帧中的矩形隐形按钮制作环节可省略。

    4.本教程编写中参考了网络相关相近的教材,在此对其作者一并表示谢意!

  最终效果显示:


http://hsb345.16789.net/domName/hsb345/2008531584554056.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



很好
(2014/2/22 22:09:00) [113.234.173.]

花开满枝  好啊!


思雅
(2008/9/27 12:08:00) [219.152.228.]

哈哈,知道拉!不是点而是移动!
来过这里很久了,教程写的真好!


思雅
(2008/9/27 12:06:00) [219.152.228.]

花开满枝好象点不开!


虎虎
(2008/9/17 0:12:00) [123.14.150.]

好美啊,我收藏了,谢谢老师 ,我想跟 你学习qq;877497676

 发表评论:共有 4 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167