您好!欢迎您光临运用组件制作简单的个性万年历_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>运用组件制作简单的个性万年历
运用组件制作简单的个性万年历
发表日期:2012/9/18 9:22:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 4706

运用组件制作简单的个性万年历 

   

    教学目的:通过本节教学了解和掌握flsh8软件中组件的调出、运用以及相关参数的改写,动态文本变量的设定、脚本的添加和声音控制等综合运用。

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

    教学要点:组件、动画补间动态文本、按钮、as语句

 

    

    作前准备:

    1.准备一张规格为180*280人物照片,经过制图软件(ps、fw)处理后保存到指定的文件夹待用。

    2.准备一张透明的动态蝴蝶,保存到指定的文件夹待用。

    3.下载一首和内容相符的mp3歌曲,保存到指定的文件夹待用。

  制作步骤

    1.启动FLASH8 软件

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


图1

    3.导入素材到库 首先,将准备好的人物照片、动态蝴蝶、歌曲等素材导入到库中,待用。

    4.创建按钮元件 选择“插入-新建元件”,建立一个名为“隐钮”的按钮元件,点击确定,进而元件编辑区。在第四帧(点击)插入空白关键帧,用矩形工具在舞台拖一个,规格为80*20的,无边线的矩形,颜色随意。全居中。如图2所示:

图2

    5.创建图形元件 选择“插入-新建元件”,建立一个名为“边框”的图形元件,点击确定,进而元件编辑区。用矩形工具打开混色器,设置其参数,如图3所示:

图3

在舞台拖一个笔触高度为30,规格为420*370的,无填充色的矩形框。在用矩形工具拖横竖两个长条摆放在矩形中间,再用矩形工具拖一个小矩形放置在左边的矩形中,作为内框。用充分变形工具选中所有实例,并将其色调调整为,如图4所示:

图4

框选舞台上所有实例将其转换为影片剪辑元件。全居中。然后,打开属性面板上的滤镜,设置其参数,如图5所示:

图5

这时舞台中实例转换为立体边框。

    6.创建影片剪辑元件

    (1)选择“插入-新建元件”,建立一个名为“眨眼”的影片剪辑元件,点击确定,进而元件编辑区。其制作方法见:flash制作眨眼的简便方法

    (2)选择“插入-新建元件”,建立一个名为“嘴巴”的影片剪辑元件,点击确定,进而元件编辑区。其制作方法见:让嘴巴动起来的制作方法

    (3)选择“插入-新建元件”,建立一个名为“蝴蝶轨迹”的影片剪辑元件,点击确定,进入元件编辑区。添加一个引导层,共两个图层。

    a.选择引导层第一帧,用椭圆形工具在舞台拖一个规格为80*80的,红色的,笔触高度1,无填充色的正圆,然后用最小的橡皮擦在该实例左侧擦出一个小口。全居中。在第30帧插入帧,上锁。如图6所示:

图6

    b.选择图层1第一帧,从库中拖出蝴蝶影片剪辑到舞台,如图7所示:

   

图7

将其放置到正圆开口的上端点,注册点必须和该端点重合。如图8所示:

图8

在第30帧插入关键帧,将蝴蝶移到正圆开口的下端点,注册点必须和该端点重合。如图9所示:

图9

右键该图层第1帧,创建本区域间的动画补间。上锁。

   (4)选择“插入-新建元件”,建立一个名为“歌曲”的影片剪辑元件,点击确定,进入元件编辑区。选中图层1第一帧,从库中拖出歌曲到舞台,按f5,待歌曲完全播放完后松开。

   (5)选择“插入-新建元件”,建立一个名为“声控”的影片剪辑元件,点击确定,进入元件编辑区。添加五个图层,共六个图层。自下而上分别命名为图片、嘴巴、眼睛、歌曲、按钮、as。

    a.选择图片图层第一帧,从库中拖出人物照片到舞台,打散后将其裁剪规格为180*280,全居中。在第2帧插入帧。上锁。

    b.选择嘴巴图层第2帧,从库中拖出嘴巴影片剪辑元件到舞台,并将其放到mm嘴的位置上,反复测试,直到满意为止。上锁。

    c.选择眼睛图层第2帧,从库中拖出眨眼影片剪辑元件到舞台,并将其放到人物照片眼睛的位置上,反复测试,直到满意为止。上锁。

    d.选择歌曲图层第2帧,从库中拖出歌曲影片剪辑元件到舞台,位置随意。上锁。

    e.选择按钮图层第一帧,用文本工具在人物照片下方输入“听我唱歌”,在第2帧插入空白关键帧,用文本工具在“听我唱歌”的位置输入“关闭歌曲”,两帧上文字的规格、颜色、字体适中。然后,从库中分别依次拖出两个隐钮按钮元件到舞台,并将其分别依次放到第1帧和第2帧的文字上。点击第1帧上的按钮,按f9,打开动作面板,在as编辑区输入,如下指令:

on (release) {
 gotoAndStop(2);

}

点击第2帧上的按钮,按f9,打开动作面板,在as编辑区输入,如下指令:

on (release) {
 gotoAndStop(1);

}

    f.选择as图层第一帧,按f9,打开动作面板,在as编辑区输入停止指令:stop(); 。上锁。此影片剪辑完成后的时间轴如图10所示:

图10

    下面我们开始讨论万年历,这是本教程的主体内容。

   (6)选择“插入-新建元件”,建立一个名为“万年历”的影片剪辑元件,点击确定,进入元件编辑区。选中图层1第一帧,选择“窗口-组件”,在打开的组件界面中,双击最后一个图标,再双击下图蓝色部分的图标,如图11所示:

图11

这时,万年历便进入舞台。选中该实例,全居中。如图12所示:


图12

此时万年历中的月份、星期都是英文。如果你欲将其换成中文,则须进行如下操作:

    a.打开属性面板左边的“参数”,出现了万年历相关参数的设置面板,如图13所示:

图13

    b.双击上图第一行红色对号处,出现星期值设置面板,你便可以将其中英文换成中文,点击确定。如图14所示:

图14

    c.双击图13第四行红色对号处,出现月份设置面板,你便可以将其中英文换成中文,点击确定。如图15所示:

15

上述环节完成后,参数面板显示,如图16所示:

图16

万年历实例显示,如图17所示:

图17

    7.编辑制作场景 返回场景1,添加六个图层,共七个图层。自下而上命名为人物照、万年历、文本、边框、蝴蝶、as1、as2。

    (1)选择边框图层第一帧,从库中拖出“边框”图形元件到舞台,全居中。上锁。

    (2)选择人物照图层第一帧,从库中拖出“声控”影片剪辑元件到舞台,并将其放置在边框右上方小框中,调整好其大小位置。在第2帧插入帧。上锁。如图18所示:

图18

    (3)选择万年历图层第一帧,从库中拖出“万年历”影片剪辑元件到舞台,并将其放置在边框左上方内框框中,调整好其大小位置。点击该实例,在属性面板设置其色调为红色30%,在第2帧插入帧。上锁。如图19所示:

图19

这时,舞台上的万年历实例看上去没有什么变化,不要紧,测试时万年历背景就会变成淡红色了。当然你也可以换成你喜欢的颜色。

    (4)选择文本图层第一帧,用文本工具-静态,在边框下方输入“当前是”;再用文本工具-动态,在“当前是”的右侧拖一个动态文本框,用选择工具点击该实例,在属性面板输入变量为:mc1 ;再用文本工具-动态,在上一个动态文本框的右侧拖一个较长动态文本框,用选择工具点击该实例,在属性面板输入变量为:mc2 。在第2帧插入帧。上锁。如图20所示:

图20

    *三个文本的字体、颜色、规格自定,但以后在测试中注意动态文本内容不用超出边框。

    (5)选择蝴蝶图层第一帧,从库中拖出蝴蝶轨迹影片剪辑元件到舞台,调整到你满意的规格,点击该实例,在属性面板输入变量为:mc 在第2帧插入帧。上锁。

    (6)选择as1图层第一帧,按f9,打开动作面板,在as编辑区为动态文本输入,如下脚本:

time = new Date();
hour = time.getHours();
minute = time.getMinutes();
second = time.getSeconds();
milli = int(time.getMilliseconds()/10);
if (minute<10) {
 minute = "0"+minute;
}
if (second<10) {
 second = "0"+second;
}
if (milli<10) {
 milli = "0"+milli;
}
if (hour<12) {
 mc1 = "上午";
} else {
 mc1 = "下午";
}
mc2 = hour+":"+minute+":"+second+":"+milli;

在第2帧插入帧。上锁。

    (6)选择as2图层第一帧,按f9,打开动作面板,在as编辑区为蝴蝶输入,如下脚本:

onEnterFrame = function () {
 _root.mc._x=_root._xmouse
 _root.mc._y=_root._ymouse
};

在第2帧插入帧。上锁。

    8.本作业完成后时间轴显示如图9所示:


图21

  9.测试存盘

    *说明:

    1.本教程的重点是运用组件制作万年历,其它部分可以省略,也可以换成你喜欢的背景或内容,以形成自己的个性万年历。

    2,动态文本框的拖放要在作品完成后反复调试,如果你制作时第二个动态文本框小时的显示是一位数,那么在第二个动态文本拖放时要多出一位数的位置,这样当小时显示是两位数时,时间内容就不会超出边框了。

    3,如果你想万年历显示大一些,可在作品上传发表时将其宽高等比放大。其效果查看:个性万年历

  最终效果显示:


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

 


 

全屏下载

 

祝你成功!

 

进入更多教程

 

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

没有相关评论

 发表评论:

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

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

联系电话: 联系人:翠柏

琼icp备09005167