当前位置:首页>网络学院>网页制作>Flash教程>文章内容

Flash AS制作个性月历教程

[ 来源:http://www.it55.com | 作者: | 时间:2007-11-06 | 收藏 | 推荐 ] 【

显示当月当天的个性化的月历。通过本文的制作练习,我们可以熟悉AS的Date对象、条件语句、循环语句、文本框控制等一些基础的运用。
    我们现在开始,打开flash,文档大小设为500x600,以符合月历的长宽比习惯。首先我们要导入一张图片,作为月历上半部分的图画,你当然以制作一些漂亮的flash来代替它。在场景中将第一层命名为“背景”,用矩形工具画一500x600 的矩形,无笔触,填充色用放射填充,与舞台居中对齐。

    新建一图层,命名为图片,在第一帧将导入的图片拖到场景中,在属性面板中调整其大小为500x280,在对齐面板中使其相对于舞台水平居中、顶对齐,如图:

    接下来,新建一图层,命名为:“星期”,在图片的下面画一文本框,属性为:静态文本、字体红色,字体大小15,宋体。在文本框中输入:“日 一 二 三 四 五 六”,每字之间空两格。

      现在,在再创建一个图层,命名为:”月“。在场景下半部的中间画一个文本框,打开属性面板,设置文本框的属性:设为动态文本,命名为:mon_txt,字体大小可设为最大,可直接在字体大小框输入100.字体颜色选浅色调,我这里选粉红色:mon_txt属性设置如下:

    接着来,新建一图层,命名为:“日”,画一文本框,大小约为:45x22属性设为:动态文本,字体为黑色,宋体,字体大小13.选中文本框,按ctrl+D,36次,复制36份,按每行7个,矩阵排列好,放于星期的下面。从第一个文本框开始,在属性面板中将37个文本框,分别命名为:d0~d37,注意顺序:先左后右,先上后下。

  

继续,新建一图层,命名为“年”,在日的下面,画一文本框,文本框稍放在场景的左边一点,为右边的时钟留下空间。属性:动态文本,命名为:year_txt,字体:Stencil Std,大小65.
现在,新建一图形元件,命名为“时间框”,在元件编辑面板中,画一矩形,无笔触,填充色为深灰色,大小为225x62,点击绘制对象按钮。最后用填充变形工具调整一下。

图为绘制对象按钮。
再画一个矩形,大小为203x40,笔触黑色,填充色为放射状,如下:

    将小矩形放于大矩形之上,居中。再用直线工具,颜色为灰色,将大小矩形四个角连起来。最后效果:

    回到场景,新建一图层,命名为:“时间”,将“时间框”控件从库中拖到场景中,放于右下角,在时间框上面画六个文本框,在第2、4、6个文本框中分别输入:“时”、“分”、“秒”。将1、3、5个文本框,设为动态文本,分别命名为:“hh_txt” “mm_txt” “ss_txt”.如图:

    好了,到现在为止我们的画面部分就完成了,按AS3的说法,显示对象已做完了。最后的效果应该是这样的:

    好,现在我们开始来写代码,实际上这才是本文的重点。下面这些代码是在AS3中实现的,不过这些代码在AS2中应该也可以。   

       新建一图层,命名为action,点击第一帧,打开行为面板。开始写吧:下面我们以逐步讲解的方式,列出代码,在最后,我将把代码清单列出方便大家复制,如果你不想搞懂这些代码,而是想直接拿来用的话,那么你可以跳到最后,将代码清单中的代码复制到 action图层第一帧的行为面板中,然后,在action图层第二帧插入关键帧,在行为面板中输入:gotoAndPlay(1);即可。
     在flash中时间和日期都要用到date对象,所以我们,首先要创建一个date对象,在第一行输入:
       var date:Date = new Date();//创建一个名为date的Date对象。
接下来,我们利用刚创建的Date对象来获取当前日期、时间:
      var year = date.getFullYear ();
      var mon = date.getMonth();
      var day = date.getDate();
      var hh = date.getHours();
      var mm = date.getMinutes();
      var ss = date.getSeconds();
我们先让时钟走起来:
     hh_txt.text = hh;
     mm_txt.text = mm;
    ss_txt.text = ss;
在action图层的第二帧,插入关键帧,在行为面板中输入:
      gotoAndPlay(1);//有了这一句,时钟才会走动。
现在可以点“控制“-”测试影片“,看看,时钟应该开始起动了。回到场景,回到action图层第一帧行为面板,我们接着上面的代码,往下写:

(编辑:IT资讯之家 www.it55.com

返回顶部
共3页: 上一页 1 [2] [3] 下一页  

网友评论

[以下评论为网友观点,不代表本站。请自觉遵守互联网相关政策法规,所有连带责任均有评论者自负。]
[不超过250字]