您好!欢迎您光临滑块控制实例大小的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>实例教程>>>滑块控制实例大小的制作原理与方法
滑块控制实例大小的制作原理与方法
发表日期:2012/9/18 14:09:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 3051

 滑块控制实例大小的制作原理与方法

   

    教学目的:通过本节教学了解和掌握as语句的添加使用,影片剪辑实例名称及动态文本变量的设置,进而运用这些原理制作滑块控制实例大小的动画效果。

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

    教学要点:变量、实例名称动态文本、动作面板、脚本添加。

 

 

     作前准备:准备一张规格约为200*270的动态透明mm图片,保存到指定的文件夹待用。   

   制作步骤

    1.启动FLASH8 软件

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

 

图1

    3.首先将素材导入库中待用

    选择“文件-导入-导入到库”,将动态mm透明图片导入到库中。其素材图,如下图所示: 

(素材图)

    4.创建影片剪辑元件

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

    a.选择m1图层第一帧,从库中拖出mm影片剪辑到舞台,规格不变。全居中。上锁。如图2所示:

图2

    b.选择m2图层第一帧,从库中拖出mm影片剪辑到舞台,适当等比缩小其规格,并在属性模板变化一下色调,将其放置在大m的左侧。上锁。如图3所示:


   图3

在从库中再拖出一个mm影片剪辑到舞台,适当等比缩小其规格,并在属性模板变化一下色调。将其放置在大m的右侧。上锁。如图4所示:


图4 

    (2)选择“插入-新建元件”,建立一个名为“底线”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,用矩形工具打开混色器,设置其参数,如图5所示:


 图5

在舞台拖一个规格为120*20的矩形,然后用充分变形工具,将其调整为如图6-1所示;再用选择工具将该实例调整为如图6-2所示;再用充分变形工具,将其调整为如图6-3所示。全居中。其流程如图6所示:


 图6

    (3)选择“插入-新建元件”,建立一个名为“滑块”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,用矩形规格在舞台拖一个规格为10*37的,无边线的绿色矩形,全居中。如图7所示:

图7

    (4)选择“插入-新建元件”,建立一个名为“控制”的影片剪辑元件,点击确定,进入元件编辑区。添加两个图层,共三个图层。自下而上命名为底线、滑块、as。

    a.选择底线图层第一帧,从库中拖出“底线”影片剪辑元件到舞台,左对齐-上对齐。如图8所示:

图8

点击该实例,在属性模板填写其实例名称为:dixian 。上锁。如图9所示:

图9

    b.选择滑块图层第一帧,从库中拖出“滑块”影片剪辑元件到舞台,将其放置在底线的中间。如图10所示:

图10

点击该实例,在属性模板填写其实例名称为:huakuai 。上锁。如图11所示:


图11

    c.选择as图层第一帧,按f9,打开动作模板,在as编辑区输入,如下帧语句:

left = dixian._x + huakuai._width / 2;
right = dixian._x + dixian._width - huakuai._width / 2;
bottom = top = dixian._y;
_root.mc._xscale = _root.mc._yscale = 50;
_root.per = 50;
huakuai.onPress = function ()
{
    this.startDrag(true, left, top, right, bottom);
};
huakuai.onRelease = function ()
{
    this.stopDrag();
};
_root.onMouseMove = function ()
{
    per = Math.ceil((huakuai._x - left) / (right - left) * 100);
    _root.per = per;
    _root.mc._xscale = per;
    _root.mc._yscale = per;
};
huakuai.onReleaseOutside = huakuai.onRelease;

锁定该图层。

    5.编辑制作场景

    返回场景1,添加三个图层,共四个图层。自下而上分别命名为背景、影片、控制、动本。

    (1)选择影片图层第一帧,从库中拖出mm影片剪辑元件到舞台,居中偏上,规格不变。点击该实例,在属性模板填写其实例名称为:mc 。上锁。如图12所示:

图12

    (2)选择控制图层第一帧,从库中拖出控制影片剪辑元件到舞台,并将其放置在mm影片剪辑元件的下方,水平居中。上锁。如图13所示:

图13

    (3)选择动本图层第一帧,用文本工具在控制实例下方拖一个动态文本框,水平居中。如图14所示:


图14

其字体、规格、颜色、位置设置参考,如图15所示:


图15

点击该实例,在属性面板填写其实例名称为:per 。上锁。如图16所示:


图16

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


图17


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


图18
 

  7.测试存盘

    *说明: 

    1.本教程中控制实例的规格做了适当的放大。

    2.mm影片剪辑元件中的实例可以是静态位图,动态图片,视频和你创作的动画作品。

  最终效果显示:


 


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

 

全屏下载

 

祝你成功!

 

进入更多教程

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



weweishuihuo
(2009/12/16 2:07:00)

上个发错了,不是50是0


weweishuihuo
(2009/12/16 2:06:00)

我的滑块在中间时,显示的是50

 发表评论:共有 2 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167