您好!欢迎您光临父亲节贺卡的制作原理与方法(上)_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>父亲节贺卡的制作原理与方法(上)
父亲节贺卡的制作原理与方法(上)
发表日期:2012/9/19 10:04:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 6880

父亲节贺卡的制作原理与方法(上)

   

    教学目的:通过本节教学了解和掌握设置动态文本,添加按钮、按钮组及指令的基本原理与操作方法,进而制作出鼠到即停、鼠标跟随、点击切换的相册式父亲节贺卡。

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

    教学要点:蒙板、按钮、动态文本、实例名称、变量、as

 

    

    作前准备:

    1.载录18首mp3规格的、缓冲效果较好的两首父亲歌曲,保存到指定的文件夹待用。

    2.准备十张规格为550*400的、有关父亲节的图片,经过制图软件(ps、fw)处理后,保存到指定的文件夹待用。

 

  制作步骤

    1.启动FLASH8 软件

    2.确立文档属性

    设置动画尺寸为550*600,颜色浅绿色,其它默认,点击确定,进入场景1。 如图1所示:


图1

    3.导入素材到库

    首先,将准备好的相关素材导入到库中,待用。

    4.创建图形元件

    (1)选择“插入-新建元件”,建立一个名为“边框”的图形元件。点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,导入或制作一个规格为550*600的(中间大边框是550*400,上下小边框为550*100)边框。全居中。如图2所示:


图2

    (2)选择“插入-新建元件”,建立一个名为“三角”的图形元件。点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,用矩形工具在舞台拖一个规格为80*18的,无边线的红色矩形(如图3-1);用选择工具将矩形调整为三角形(如图3-2);在调整为(如图3-3的形状)。其操作流程,如图3所示:

图3

    5.创建影片剪辑元件

    (1)选择“插入-新建元件”,建立一个名为“简介”的影片剪辑元件。点击确定,进入元件编辑区。添加一个图层,共两个图层。下层为简介,上层为边框。

    a.选择边框图层第一帧,将边框图形元件拖入舞台,全居中。在第第1000帧插入帧。上锁。

    b,选择简介图层第50帧,插入空白关键帧,用文本工具键入父亲节的由来(或将相关资料复制转帖到此处),字体、颜色、规格随意,此实例的总宽度要小于边框透明处的宽度。点击第50帧,再右键舞台上的文字将其转换为图形元件。然后再把该实例移到中间大边框的下方,水平中齐。如图4所示:


图4

在第1000帧插入关键帧,按方向键将其垂直移到中间大边框的上方。创建本区域间的补间动画。如图5所示:

图5

为编辑场景之便,可不用删除边框。

    (2)选择“插入-新建元件”,建立一个名为“图1”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。点击图层1第一帧,从库中拖出位图1到舞台,规格550*400(或略大于中间的大边框)。全居中。同理同种方法完成“图2-10”的 影片剪辑的操作。

    (3)选择“插入-新建元件”,建立一个名为“大图”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。点击图层1第一帧,从库中拖出图1影片剪辑到舞台,全居中。在第2-10插入空白关键帧,按上述方法分别依次放入图2-图10影片剪辑到舞台。上锁。如图6所示:

图6

    (4)选择“插入-新建元件”,建立一个名为“祝词”的影片剪辑元件。点击确定,进入元件编辑区。添加一个图层,共两个图层。下层为祝词,上层为边框。

    a.选择边框图层第一帧,将边框图形元件拖入舞台,全居中。在第100帧插入帧。上锁。

    b,选择祝词图层第1帧,用文本工具键入“祝天下父亲们节日快乐,幸福安康!”。将其转换为图形元件。然后将该实例移到下小边框的右端,如图7所示:

图7

在第100帧插入关键帧,按方向键将其平移到下小边框的左端,创建本区域间的动画补间。如图8所示:

图8

删除边框图层或该图层中的边框实例。

    (5)选择“插入-新建元件”,建立一个名为“鼠标”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,用文本工具在舞台键入“伟大的父亲您辛苦了”,规格、颜色、字体随意。选中该实例,点击“修改-分离”一次,然后将其组成圆形。框选该实例,将其转换为图形元件。全居中。如图9所示:

图9

    (6)选择“插入-新建元件”,建立一个名为“蒙板”的影片剪辑元件。点击确定,进入元件编辑区。添加一个图层,共两个图层。

     a.选择图层1第一帧,用矩形工具,打开混色器,设置其参数和色码快的颜色(每个色码快Alpha均为80%),如图10所示:

图10

在舞台拖一个规格为550*400的矩形,全居中。在第10帧插入关键帧,将每个色码快的Alpha改为0%。创建本区域的形状补间。如图11所示:

图11

     b.选择图层2第10帧,插入空白关键帧,点击该帧,按f9,打开动作面板,在as编辑区输入停止指令:stop();

     6.创建按钮元件

    (1)选择“插入-新建元件”,建立一个名为“隐形按钮”的按钮元件。点击确定,进入元件编辑区。就一个图层。选择图层1第1帧(弹起),用矩形工具在舞台拖一个无边线的矩形,颜色、规格随意,将其转换为图形元件。全居中。在第2帧(指针经过)插入关键帧,在第4帧(点击)插入关键帧。再选中第1帧中实例,设置其Alpha为40%。如图12所示:


图12

    (2)选择“插入-新建元件”,建立一个名为“三角按钮”的按钮元件。点击确定,进入元件编辑区。就一个图层。选择图层1第1帧(弹起),从库中拖出三角图形元件到舞台。全居中。在第2帧(指针经过)插入关键帧,点击该帧上的实例,在属性面板选择“颜色-色调-黄色”,在第4帧(点击)插入关键帧。上锁。如图13所示:

图13

    (3)选择“插入-新建元件”,建立一个名为“小图按钮1”的按钮元件。点击确定,进入元件编辑区。就一个图层。选择图层1第1帧(弹起),从库中拖出“图1”影片剪辑元件到舞台。设置其规格为137*100,全居中。在第2帧(指针经过)插入关键帧,在第4帧(点击)插入关键帧。再选中第1帧中实例,设置其Alpha为80%。上锁。如图14所示:


图14

    (4)同理同种方法完成“小图按钮2-10”的操作。

     7.创建按钮组影片剪辑元件

    选择“插入-新建元件”,建立一个名为“按钮组”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,从库中依次拖出小图按钮1-10并列水平排列好,在属性面板分别依次填写每个小图按钮的实例名称为“mc1 - “mc10”。如图15所示:

图15

点击小图按钮1,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (rollOver) {
 _root.mc1.stop();
}
on (release, rollOut) {
 _root.mc1.play();
}
on (press) {
 _root.mc.gotoAndStop(1);
 _root.m_mc.play();
}

同理同种方法完成小图按钮2-10的语句添加。所不同的是将上边语句中红色阿拉伯数字改成2-10。

然后,选中前四个(小图按钮1-4)实例,复制,粘贴,并将粘贴的实例移到小图按钮10的后边水平并列。如图16所示:

图16

     8.创建按钮组滚动影片剪辑元件

    选择“插入-新建元件”,建立一个名为“滚动”的影片剪辑元件。点击确定,进入元件编辑区。添加一个图层,共两个图层。下层为矩形,上层为按钮组。

    (1)选择矩形图层第一帧,用矩形工具在舞台拖一个和下小边框透明部分等宽的、高为150的,绿色无边线的矩形。左对齐-水平中齐。在第300帧插入帧。上锁。

    (2)选择按钮组图层第一帧,从库中拖出按钮组影片剪辑,左对齐-水平中齐。如图17所示:

图17

在第300帧插入关键帧,按方向键将该实例向右移动,使第11张图片的左边缘和矩形的左边缘对齐,这时舞台显示和第1帧相同。然后,将该实例在向后(右)移动一个像素。创建本区域间的动画补间。如图18所示:

图18

    删除矩形图层或该图层上的实例。

    9.创建声控影片剪辑元件

    (1)选择“插入-新建元件”,建立一个名为“音乐1”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。点击图层1第一帧,从库中拖出第一支父亲歌曲1到舞台,按f5,待歌曲放完后松开;同理同种方法完成“音乐2”影片剪辑的操作。

    (2)选择“插入-新建元件”,建立一个名为“声控1”的影片剪辑元件。点击确定,进入元件编辑区。添加三个个图层,共四个个图层。自下而上命名为音乐、交互、按钮、as。

    a.选择音乐图层第2帧,插入空白关键帧,从库中拖出音乐1影片剪辑到舞台。上锁。

    b.选择交互图层第1帧,用文本工具输入“音乐1”,字体、颜色规格自定,全居中。在第2帧插入空白关键帧,用文本工具输入“关闭”,字体、颜色规格自定,或导入、制作一个音频光谱及相关小图。

    c.选择按钮图层第1帧,从库中拖出隐形按钮按钮元件到舞台,放到音乐1之上,调整好大小。在点击该按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release) {
 gotoAndStop(2);

}

在第2帧插入关键帧,点击该帧上的按钮,按f9,打开动作面板,将as编辑区中按钮指令语句改为:

on (release) {
 gotoAndStop(1);

}

锁定该图层。

    d.选择as图层第一帧,按f9,打开动作面板,在as编辑区输入停止指令:stop();

在第2帧插入空白关键帧。上锁。

    e.此环节的时间轴如图19所示:


图19

     同理同种方法完成“声控2”影片简介的操作。

    至此,全部元件基本做完。下面进入场景的编辑制作:

进入教程下

 

 最终效果显示:


http://hsb456.16789.net/s-helpSite/domName/hsb456/20106161154999303.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

 

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



weiqiang303642
(2011/6/22 21:08:00)

老师,这是最后测试报的错。实在是看不懂,老师教教我吧!
**错误** 符号=声控1, 图层=按钮, 帧=1:第 1 行: 鼠标事件只允许用于按钮实例
     on (release) {

**错误** 符号=声控1, 图层=按钮, 帧=2:第 1 行: 鼠标事件只允许用于按钮实例
     on (release) {

**错误** 符号=声控2, 图层=按钮, 帧=1:第 1 行: 鼠标事件只允许用于按钮实例
     on (release) {

**错误** 符号=声控2, 图层=按钮, 帧=2:第 1 行: 鼠标事件只允许用于按钮实例
     on (release) {

ActionScript 错误总数:4   报错:4



weiqiang303642
(2011/6/22 21:03:00)

**错误** 符号=声控1, 图层=按钮, 帧=1:第 1 行: 鼠标事件只允许用于按钮实例
     on (release) {

ActionScript 错误总数:1   报错:1
老师还有这个,我的声控按钮没声音啊?老师教教我好吗?谢谢!


weiqiang303642
(2011/6/22 21:01:00)

**错误** 符号=声控1, 图层=按钮, 帧=2:第 1 行: 鼠标事件只允许用于按钮实例
     on (release) {

ActionScript 错误总数:1   报错:1

老师这啥意思啊?


812379368
(2010/6/17 19:15:00)

祝福老师节日快乐!


改邪小妖
(2010/6/17 5:58:00) [120.7.97.]

老师祝福你父亲节日快乐天天开心

 发表评论:共有 6 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167