赞助广告 赞助广告
  当前位置:网络学院图形图像Flash → 用Flash巧制万年历(图)
用Flash巧制万年历(图)
日期:2002年11月14日 作者:莫治雄 人气: 查看:[大字体 中字体 小字体]

灵活应用Flash的日期对象,结合Flash的动画设计能力和功能强大动作脚本语言的支持,可以制作出各种款式新颖、走时准确的时钟、日历。下面的“万年历”就是利用Flash的日期对象制作的。

“万年历”实例综合运用了日期对象、数组对象、颜色对象,包括日期对象的创建,日期对象方法的调用,月份的正确显示技巧,周日与日号数对正技巧,循环控制技巧,函数定义与调用技巧。下面我们将对万年厉的制作方法和技巧运用作详细分析说明。

1.设计思路和需要解决的关键问题

Flash的日期对象有很多能够处理日期和时间的方法。通过创建日期对象的实例,调用它的方法,就可以读取系统日期和时间,显示当前的日期和时间和当前年月的月历。用给定的年、月、日创建日期对象,就可以读取和显示指定年月的月历。通过按钮的形式给用户选择年月(模拟翻页动作),然后根据用户的选择,把选定年月的月历显示出来,这就构成了万年历。

需要解决的关键问题包括:当前日的突出显示;确定闰年和非闰年中2月份的天数;日与周日的正确对齐显示;“翻页”显示和屏幕刷新;重置当前日期等等。

2.判断给定年份是否是闰年

闰年的条件是:能被4整除且不能被100整除,或能被400整除的年份是闰年。根据这个条件,我们可以定义一个函数来实现。代码如下:

function leapYear (year)
  {
  days_in_month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  if ((year%4 == 0) && (year%100<>0) || (year%400 == 0))
  {
  days_in_month.splice(1, 1, 29);
  } else {
  days_in_month.splice(1, 1, 28);
  }
  return days_in_month;
  }

这个函数对传递过来的年份进行判断,如果满足上述条件:能被4整除且不能被100整除((year%4 == 0) && (year%100<>0) )或能被400整除(year%400 == 0),则该年为闰年。判断是否是闰年的目的是确定每年的2月份的天数。如果是闰年,2月份就是29天,否则为28天。

函数中我们先创建一个数组对象days_in_month,并用每年12个月的天数初始化。然后根据是否是闰年,用数组对象的splice修改数组中的第1个元素(注:数组元素下表从0开始),用return动作返回该数组。

调用此函数的方法如下:

currentyear = 2004
  daysinmonth = leapYear(currentyear);

返回结果存入daysinmonth数组中。

3.确定给定日期的周日

要确定给定日期的周日,我们可以用指定的日期创建一个日期对象的实例,然后调用它的getDay()方法来实现。例如,我们想知道2008年2月1日是星期几,可以通过下面的代码来实现:

GivenDate = new Date(2008, 1, 1);
  weekdayOfFirstDay = GivenDate.getDay();

这里需要注意的是,Flash的日期对象,用0代表1月,1代表2月,依次类推。因此,在上述创建日期对象的语句中,第二个制定月份的参数是1而不是2。调用getDay()方法的结果是weekdayOfFirstDay = 5(0代表星期日,5代表星期五),即2008年2月1日是星期五。

4.确定给定月份的天数

在调用自定义函数leapYear时,我们得到一个给定年份的各月天数的数daysinmonth。要获取指定月份的天数,只需在该数组中检索即可。例如:

currentmonth = 1
  numberofdays = daysinmonth[currentmonth];

返回结果就是daysinmonth数组中第1个元素的值(即2月分的天数)。

5.把数字表示的月份转换为中文表示

为了能够在月历中显示中文的月份名,我们创建了一个中文月份名数组cnfullmonths。访问这个数组,就可以实现这种转换。例如:

cnfullmonths = new Array("一月", "二月", "三月", "四月", "五月", "六月",
"七月", "八月", "九月", "十月", "十一月", "十二月");
currentmonth = 1
cnmonth = cnfullmonths[currentmonth];

6.显示月历

年、月、日、每月天数、每月第一天周日和中文月份名准备就绪后,就可以设计月历显示了。月历显示需要解决的关键问题是日与周日的对齐显示,即某一天应该是星期几。
在版面设计时,先把周日作为表头,按日、一、二、三、四、五、六的顺序排列好,然后把第一天排在对应的周日列下,其余按顺序排列即可。

在电影剪辑wnl的layer3层,我们放置了38个动态文本框电影剪辑实例,实例名分别是d0~d37,用于显示日号数。d0~d6排在第一行,对应于周日的日、一、二、三、四、五、六列,其余顺延排列。文本框电影剪辑实例内的文本框变量设为daynum。

有了上述版面设计,我们就可以用循环来控制来解决日与周日的对齐显示问题。首先定义一个显示日号数的函数,代码如下:

function displayDayNumbers (weekday_of_firstday, number_of_days)
  {
  // 初始化日号数
  day_number = 1;
  // 循环显示日号数
  while (weekday_of_firstday<number_of_days)
  {
  //显示日号数的电影剪辑实例名是d0~d37;
  g = "d"+weekday_of_firstday;
  // 显示日号数的文本框变量为daynum
  eval(g).daynum = this.day_number;
  // 控制周日的变量递增1
  weekday_of_firstday = weekday_of_firstday+1;
  // 日号数递增1
  day_number = day_number+1;
  }
  }

调用这个函数需要传递两个参数,一个是每月第一天的周日weekday_of_firstday;一个是每月天数number_of_days,它是给定月的实际天数加上weekday_of_firstday(在这里weekday_of_firstday刚好也就是每月前面的“空日”,即如果每月的第一天是星期五,第一行前面就有星期日~星期四5天不排)。例如,2008年2月是29天,第一天是星期五,这样number_of_days = 29 + 5,即34天。日号数的排列位置就由weekday_of_firstday控制,排列时从d5开始,一直排到d33为止。

weekday_of_firstday每循环一次递增1。日号数则由变量day_number控制。

可以用类似下面的语句调用这个函数:

weekdayOfFirstDay = 5
  numberofdays = 29
  displayDayNumbers(weekdayOfFirstDay, numberofdays);

7.清除日号数

当用户“翻页”显示另一个月时,该月的天数和排列位置一般都与前面显示的月份不同。因此,在显示另一个月历之前,必须先“擦干净”。实现的方法就是把所有的日号数清空,代码如下:

function clearDaysNumber ()
{
  // 总共设置了38个显示日号数的文本框(d0~d37)
  for (x=0; x<37; x++)
  {
  g = "d"+x;
  eval(g).daynum = "";
  todayColor = new Color(eval(g));
  todayColor.setRGB(0x000000);
  }
  }

这个函数不需要传递参数,完成的任务有两个:一个是给所有文本框电影剪辑实例的相关文本框变量赋空字符串;另一个是把文本框的颜色设回黑色,覆盖突出显示的红色。

调用此函数的语句是:

clearDaysNumber();

8.显示当前日期

开始播放万年历时,应该显示当前日期,并把当日突出显示。当前日期由本计算机系统日期决定。本例采用下面的代码实现:

// 创建日期对象,取当前年月日
  todaydate = new Date();
  currentyear = todaydate.getFullYear();
  currentmonth = todaydate.getMonth();
  currentday = todaydate.getDate();
  //确定当年当月第一天的周日,得到每月前面的“空日”
  GivenDate1 = new Date(currentyear, currentmonth, 1);
  BlankDay = GivenDate1.getDay();
  // 访问中文月份数组,把用数字表示的月份转换为用中文表示的月份
  cnmonth = cnfullmonths[currentmonth];
  // 调用显示月历函数
  updateYearMonth(currentyear, currentmonth);
  // 调用突出显示当前日函数
  highlightCurrentDay(currentday);

在上述代码中,使用todaydate = new Date()语句创建日期对象,该对象保存了系统日期。因此,读取该日期对象的年月日,分别调用显示月历函数和突出显示当前日函数,就可以显示当前日期。突出显示当前日的函数定义如下:

function highlightCurrentDay (day)
  {
  day=day-1;
  g = "d"+day;
  todayColor = new Color(eval(g));
  todayColor.setRGB(0xff0000);
  }

调用这个函数需要传递当前日参数(day)。因文本框实例名从d0开始,需减1才能与传递过来的日对应,所以,我们在函数中给day减去1后再构造文本框实例名。

9.年份和月份选择

设置年份和月份选择,实现“翻页”功能。当用户按下月份的“前翻”按钮时月份递增一,按下“后翻”按钮时月份递减一。年份按钮的作用类同。这些按钮都分配有相应的脚本,但比较简单,请读者打开实例文件自行分析。

10.重置当前日期

在万年历右下角有一个按钮,单击该按钮,可以重新显示当前日期。主要考虑让用户“翻页”到其它月份后能迅速返回当前月。它的脚本与上面“显示当前日期”相同。你可以用下面的代码取代:

on (release)
   {
  call(1);
  }

call动作直接调用指定帧中的动作脚本。

这里特别提请读者掌握函数的定义和调用技巧。这个实例如果不是采用这种技巧,脚本的重复量将会很大且繁杂。使用函数调用技巧,不仅可以避免代码的重复,而且脚本的代码功能分工明确,结构清晰,便于阅读和维护。

(出处:赛迪网)

相关文章:
 
·用Flash巧制精致的动态万年历
相关软件:
 
·带世界地图世界时区的真正无错万年历
·博商网新款多功能万年历
·默飞冲天万年历 v1.0
  特别推荐
  热点TOP10