您好!欢迎您光临彩虹电子日历时钟的制作原理与过程_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>实例教程>>>彩虹电子日历时钟的制作原理与过程
彩虹电子日历时钟的制作原理与过程
发表日期:2012/9/17 15:03:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 5351

 

 

彩虹电子日历时钟的制作原理与过程

   

       教学目的:通过本节教学了解和熟悉动作面板及as语句的添加使用,并学会用脚本来制作电子日历时钟,进而丰富自己的动画内容与技巧,创作出优秀的动画作品。

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

       教学要点:动态文本、动作面板、as语句。

    

    作前准备 

    准备1张规格为550*400的背景图片,经过制图软件(ps、fw等)处理后,保存在指定的文件夹,待用。 

    制作步骤

    1.启动FLASH8 软件

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

图1

    3.创立影片剪辑元件 选择“插入-新建元件”,建立一个名为背景的影片剪辑,点击确定,进入元件编辑区。添加一个图层,共两个图层。

    (1)选择图层1第1帧,导入一张已准备好的背景图片,规格为550*400,选中该图片,左对齐,上对齐。如图2所示:

 
图2
 
操作完成后的该实例,如图3所示:
 
 
图3
 
    (2)选择图层2第1帧,右键该帧处,打开动作面板,在as编辑区输入如下语句:
 
var time:Number = 0;
var timeMin:Number = 100;
var alphaDrop:Number = 2;
var growBy:Number = 2;
var rotateByMax:Number = 10;
function deg2rad(degrees:Number):Number {
  return degrees * Math.PI / 180;
}
function randRange(min:Number, max:Number):Number {
  var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
  return randomNum;
}
function drawPoly(sides:Number, color:Number, radius:Number):MovieClip {
  var depth:Number = _root.getNextHighestDepth();
  var poly_mc:MovieClip = _root.createEmptyMovieClip("poly" + depth, depth);
  var unitAngle = deg2rad(360 / sides);
 
  poly_mc.beginFill(color);
  poly_mc.moveTo(radius, 0);
  for (var i:Number = 1; i < sides; i++) {
    var turn:Number = unitAngle * i;
    var dx:Number = Math.cos(turn) * radius;
    var dy:Number = Math.sin(turn) * radius;
    poly_mc.lineTo(dx, dy);
  }
  poly_mc.endFill();
 
  return poly_mc;
}
function initPoly():Void {
  this._x = _xmouse;
  this._y = _ymouse;
  this._xscale = this._yscale = 0;
  this.rotateBy = randRange(-rotateByMax, rotateByMax);
 
  this.onEnterFrame = function():Void {
    this._xscale = this._yscale += growBy;
    this._alpha -= alphaDrop;
    this._rotation += this.rotateBy;
 
    if (this._alpha < 0) {
      this.removeMovieClip();
    }
  };
}
onMouseMove = function():Void {
  if (getTimer() - time > timeMin) {
    initPoly.apply(drawPoly(randRange(3, 12), randRange(0, 0xFFFFFF), 100));
    time = getTimer();
  }
};
 
    4.组织编辑场景 返回场景1,添加三个图层,共四个图层。自下而上分别命名为背景、文本、as、边框。
 
    (1)选择背景图层第1帧,从库中拖出背景影片剪辑到场景工作区,全居中。在第2帧插入帧。上锁。
 
    (2)选择文本图层第1帧,用文本工具设置其参数如图4所示:
 
 
图4
 
选用动态文本,在舞台拖出五个文本框,再用静态文本输入相关面容。其参考位置,如图5所示:
 
 
图5
 
自上而下,自左而右分别依次选中各个动态文本框,先后在变量中确定其变量名称为yeahtext、daytext、weektext、half、timetext。在第2帧插入帧。上锁。如图6所示:
 
 
图6
 
    (3)选择as图层第1帧,右键该帧处,打开动作面板,在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) {
 half = "上午";
} else {
 half = "下午";
}
yeahtext = time.getFullYear();
daytext = time.getMonth()+1+" 月 "+time.getDate()+" 日";
weektext = "星期 "+time.getDay();
timetext = hour+":"+minute+":"+second+":"+milli;
 
在第2帧插入帧。锁定该图层。
 
    (4)选择边框图层第1帧,导入或制作一个边框,规格为550*400,全居中。在第2帧插入帧。上锁。
 
    此环节完成后的实例显示,如图7所示:
 

图7
 

    5.该作业完成后的时间轴如图8示:
 
 
图8
 

    6.测试存盘

 

    *说明:

    此教程中的脚本含有鼠标跟随、日历和时钟多种特效。你可以应用这个原理和操作,创作出生动别样的精彩动画作品。如有兴趣就试试吧。

   

      最终效果显示:


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

 

全屏下载

 

祝你成功!

 

进入更多教程

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



笑揽风霜
(2012/11/20 15:40:00) [60.26.151.]

非常感谢翠柏老师的教材!让俺学会了制作电子日历!真心的感谢您!


千资
(2010/1/12 19:58:00) [113.140.35.]

 老师的教程真好,我们从中学了不少东西。谢谢老师!


“大哥哥”
(2009/11/28 20:05:00) [123.233.129.]

感谢老师提供这么好的教材,在您这里学了不少的东西,希望老师以后编写更多、更好的教材,以飨读者。


香飘四海
(2009/5/16 9:59:00) [117.88.124.]

感谢《迎客松》网站提供的优秀作品,谢谢各位老师编写的教案。


天龙
(2008/12/22 0:16:00) [60.217.134.]

老师你好,你的教材很好啊,学了很多东西,谢谢你老师,祝你圣诞快乐!

 发表评论:共有 10 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167