制作flash时钟
- 格式:ppt
- 大小:371.50 KB
- 文档页数:11
再学AS3(三)——动态绘制钟表知识点:1、动态画圆:实际上圆的边线就是无数个小圆点的集合,也就是这些小圆点一个一个地显示便形成了大圆的边线。
下面是小圆点的坐标X=Math.cos(j1 / 180 * Math.PI) * 100 + w;Y=Math.sin(j1 / 180 * Math.PI) * 100 + h;j1++;且坐标随着j1的改变而改变。
2、进一步学习TIMER类;3、动态画直线(让直线一点一点地显示出来);下面是动态绘制的秒针语句:秒针.graphics.lineStyle(1.5,0x00CCCC);秒针.graphics.moveTo(0,0);秒针.graphics.lineTo(0,-j4);j4++;秒针.x=w;秒针.y=h;4、注意钟表中指针的坐标设定(不然就与实际指针走的方向不一致),见第3点中。
5、使绘制的钟表居于舞台中央,首先设定变量值,如下:var w:Number=stage.stageWidth/2;var h:Number=stage.stageHeight/2;然后再调用。
(否则你改变舞台的大小时就会错位)var w:Number=stage.stageWidth/2;var h:Number=stage.stageHeight/2;var 半径:Sprite= new Sprite();addChild(半径);var 外圆:Sprite= new Sprite();addChild(外圆);var 内圆:Sprite= new Sprite();addChild(内圆);var 表格:Sprite= new Sprite();addChild(表格);var 时针:Sprite= new Sprite();addChild(时针);var 分针:Sprite= new Sprite();addChild(分针);var 秒针:Sprite= new Sprite();addChild(秒针);//画圆心var yx:Sprite=new Sprite;yx.graphics.beginFill(0x00CCCC);yx.graphics.drawCircle(w,h,5);yx.graphics.endFill();addChild(yx);//申明变量var X:Number=0;var Y:Number=0;var X1:Number=0;var Y1:Number=0;var X2:Number=0;var Y2:Number=0;var j1:uint= 0;var j2:uint=0;var j3:uint=0;var j4:uint=0;var j5:uint=0;var j6:uint=0;var 画外圆计时:Timer=new Timer(10,360);var 画内圆计时:Timer=new Timer(10,360);var 画表格计时:Timer=new Timer(200,12);var 画秒针计时:Timer=new Timer(10,90);var 画分针计时:Timer=new Timer(10,75);var 画时针计时:Timer=new Timer(10,60);画外圆计时.start();画外圆计时.addEventListener(TimerEvent.TIMER,画外圆);画外圆计时.addEventListener(TimerEvent.TIMER_COMPLETE,画外圆完成); function 画外圆(event:TimerEvent):void {X=Math.cos(j1 / 180 * Math.PI) * 100 + w;Y=Math.sin(j1 / 180 * Math.PI) * 100 + h;j1++;外圆.graphics.beginFill(0xAAAAAA);外圆.graphics.drawCircle(X, Y, 1.5);外圆.graphics.endFill();}function 画外圆完成(event:TimerEvent):void {画内圆计时.start();画内圆计时.addEventListener(TimerEvent.TIMER,画内圆);画内圆计时.addEventListener(TimerEvent.TIMER_COMPLETE,画内圆完成); }function 画内圆(event:TimerEvent):void {X1=Math.cos(j2 / 180 * Math.PI) * 92 + w;Y1=Math.sin(j2 / 180 * Math.PI) * 92 + h;j2++;内圆.graphics.beginFill(0x999999);内圆.graphics.drawCircle(X1, Y1, 1.5);内圆.graphics.endFill();半径.graphics.lineStyle(3,0x000000);半径.graphics.moveTo(w,h);半径.graphics.lineTo(X1,Y1);}function 画内圆完成(event:TimerEvent):void {画表格计时.start();画表格计时.addEventListener(TimerEvent.TIMER,画表格);画表格计时.addEventListener(TimerEvent.TIMER_COMPLETE,画表格完成); }function 画表格(event:TimerEvent):void {X2=Math.cos(j3 / 180 * Math.PI) * 80 + w;Y2=Math.sin(j3 / 180 * Math.PI) * 80 + h;j3+=30;表格.graphics.beginFill(0x00CCCC);表格.graphics.drawCircle(X2, Y2, 2);表格.graphics.endFill();}function 画表格完成(event:TimerEvent):void {画秒针计时.start();画秒针计时.addEventListener(TimerEvent.TIMER,画秒针);画秒针计时.addEventListener(TimerEvent.TIMER_COMPLETE,画秒针完成); }function 画秒针(event:TimerEvent):void {//画秒针秒针.graphics.lineStyle(1.5,0x00CCCC);秒针.graphics.moveTo(0,0);秒针.graphics.lineTo(0,-j4);j4++;秒针.x=w;秒针.y=h;}function 画秒针完成(event:TimerEvent):void {画分针计时.start();画分针计时.addEventListener(TimerEvent.TIMER,画分针);画分针计时.addEventListener(TimerEvent.TIMER_COMPLETE,画分针完成); }function 画分针(event:TimerEvent):void {//画分针分针.graphics.lineStyle(3,0x00AAAA);分针.graphics.moveTo(0,0);分针.graphics.lineTo(0,-j5);j5++;分针.x=w;分针.y=h;}function 画分针完成(event:TimerEvent):void {画时针计时.start();画时针计时.addEventListener(TimerEvent.TIMER,画时针);}function 画时针(event:TimerEvent):void {//画时针时针.graphics.lineStyle(4,0x008888);时针.graphics.moveTo(0,0);时针.graphics.lineTo(0,-j6);j6++;时针.x=w;时针.y=h;}//画针动起来stage.addEventListener(Event.ENTER_FRAME,gx);function gx(e:Event):void {var sj:Date=new Date();var hm:uint=sj.getMilliseconds(); var m:uint=sj.getSeconds();var f:uint=sj.getMinutes();var s:uint=sj.getHours();秒针.rotation =(m+hm/1000)*6; 分针.rotation =f* 6+m*0.1;时针.rotation =s * 30 +f * 0.5;}。
FLASH时钟大全(有代码)效果图:都市商业圈时钟代码:<EMBED height=300 type=application/x-shockwave-flash width=190 src=/swf/clock/114.swf?firstTime=1277301947859quality="high" allowScriptAccess="sameDomain" wmode="transparent"></EMBED>效果图:51Home时钟代码: <EMBED height=230 type=application/x-shockwave-flash width=190 src=/swf/clock/116.swf?firstTime=1277301873328quality="high" allowScriptAccess="sameDomain" wmode="transparent"></EMBED>效果图:我的女孩时钟<EMBED height=160 type=application/x-shockwave-flash width=190 src=/swf/clock/105.swf?firstTime=1277301802984 quality="high" allowScriptAccess="sameDomain" wmode="transparent"></EMBED>效果图:篮球部落时钟代码:<EMBED height=190 type=application/x-shockwave-flash width=190 src=/swf/clock/94.swf?firstTime=1277632500953wmode="transparent" allowScriptAccess="sameDomain" quality="high"></EMBED>效果图:紫茄公交车时钟代码: <EMBED height=230 type=application/x-shockwave-flash width=190src=/swf/clock/20090923102901.swf?firstTime=1277632362734 wmode="transparent" allowScriptAccess="sameDomain" quality="high"></EMBED>效果图:核桃蛋糕时钟<EMBED height=200 type=application/x-shockwave-flash width=200src=/swf/clock/20090922094439.swf?firstTime=1277632277453 wmode="transparent" allowScriptAccess="sameDomain" quality="high"></EMBED>下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载下载。
精美的FLASH二十四小时和秒表动画时钟二十四小时时钟代码∶<EMBED allowScriptAccess="never" allowNetworking="internal"pluginspage=/go/getflashplay er src="/goodies/clocks/nackvision_timer05.s wf" width=300 height=300type=application/x-shockwave-flash autostart="0" wmode="transparent">二十四小时时钟代码∶<EMBED allowScriptAccess="never" allowNetworking="internal"pluginspage=/go/getflashplay er src="/goodies/clocks/nackvision_timer01.s wf" width=300 height=300type=application/x-shockwave-flash autostart="0" wmode="transparent">圆型二十四小时时钟代码∶<EMBED height=300type=application/x-shockwave-flash width=300src=/goodies/clocks/nackvision_timer 02.swf wmode="transparent" invokeurls="false"quality="high" allowScriptAccess="never" allowNetworking="internal"></EMBED>圆型二十四小时时钟代码∶<EMBED height=300type=application/x-shockwave-flash width=300src=/goodies/clocks/nackvision_timer 03.swf wmode="transparent" invokeurls="false"quality="high" allowScriptAccess="never" allowNetworking="internal"></EMBED>圆型秒表时钟代码∶<EMBEDpluginspage=/go/getflashplay ersrc=/goodies/clocks/nackvision_timer 04.swf width="40%" type=application/x-shockwave-flash wmode="transparent" quality="high" ></EMBED>蓝盘时钟代码∶<EMBEDpluginspage=/go/getflashplay ersrc=/goodies/clocks/nackvision_timer 06.swf width=300 height=300type=application/x-shockwave-flash wmode="transparent" quality="high" ></EMBED>。
一、时钟:需要用到动态文本,用于显示年、月、日、时、分、秒等动态信息,需要给每个动态文本设定一个变量名,日历是使用了窗口—>组件—>User Interface中的DateChooser,闹钟设定的组件是User Interface中的NumericStepper,需要给每个NumericStepper组件设置一个实例名称,便于读取其中设定的值。
闹钟声音的设置:导入声音文件到库面板,然后在库面板中选中声音文件,点击鼠标右键,在弹出菜单中选“链接”,在弹出窗口中选中“为ActionScript导出”,输入一个标识符。
1、创建一个新层,在第一个关键帧中加入如下代码onEnterFrame = function () {var now:Date = new Date();var year = now.getFullYear();var month = now.getMonth();var day = now.getDate();var week = now.getDay();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();_global.flag = true; //缺省时闹钟设定为关闭//首先获得系统的时,分,秒,年、月、日hc._rotation = hour*30; //hc为时针原件mc._rotation = minute*6; //mc为分针原件sc._rotation = second*6; //sc为秒针原件/*小时:一圈是360度,共12小时,每一小时30度分钟:一圈是360度,共60分钟,每一分钟6度秒钟:一圈是360度,共60秒钟,每一秒钟6度*/hn = hour; //hn为显示小时数的动态文本的变量名称mn = minute;sn = second;wn = week;yt = year;mt = month+1;dt = day;gugu = new Sound();gugu.attachSound("闹铃");if (flag == false){ //设定闹钟开关打开if (hn == hh.value && mn == mm.value && sn == ss.value){ //hh、mm、ss为设定闹钟的组件//的实例名称gugu.start();}}delete now; //删除now变量,以获取当前时间的新的值if(wn == 0) wn = "星期天";if(wn == 1) wn = "星期一";if(wn == 2) wn = "星期二";if(wn == 3) wn = "星期三";if(wn == 4) wn = "星期四";if(wn == 5) wn = "星期五";if(wn == 6) wn = "星期六";if (hour <10) {hn = "0"+ hn;}if (minute <10) {mn = "0"+ mn;}if (second <10) {sn = "0"+ sn;}if (month <10) {mt = "0"+ mt;}if (day <10) {dt = "0"+ dt;}};2、闹钟设定按钮on (release) {flag = false;}3、闹钟取消按钮on (release) {flag = true;}二、动画控制1、动画选择按钮(ani为舞台元件的名称)on (release) {unloadMovie(ani);loadMovie("ball.swf", ani);ani._x = -50;ani._y = 20;}2、播放按钮on (release) {ani.play();}3、停止按钮on (release) {ani.stop();}。
flash制作计时器和倒计时器flash制作计时器倒计时器一、获取系统时间方法:1、新建一图层1,鼠标双击“图层1”,改名为“文本”;(图层改名方法后面就不再叙述)2、选中“文本”层第一帧,再用鼠标点击左面工具栏的“A”,再点击在左下角属性栏“A”旁边的倒三角,点击“动态文本”(字体、字号、颜色根据需要自选),在工作面建立一个文本,输入“00:00:00”(引号不要)便于观察大小;在工作面中间的下面的“变量”里输入“bjsj”(引号不要)(输入变量名是便于动作调用,后面不再解释)3、新建图层2,命名“动作”。
选中“动作”层第一帧(为空白关键帧),按“F9”,在动作脚本框里输入(也可直接将下面脚本复制进去)(后面的脚本都可直接复制,不再解释)mytime=new Date() //定义一个时间函数mytimet_h=mytime.getHours() //定义t_h获得当前时间中的时if(t_h<10){ shi="0" + t_h //让小时以“00”的格式显示}else{shi=t_h //把小时赋值给变量“shi”}t_m=mytime.getMinutes() //定义t_m获得当前时间中的分钟if(t_m<10){ fen="0" + t_m //让分钟以“00”的格式显示}else{ fen=t_m //把分钟赋值给变量“fen”}t_s=mytime.getSeconds() //定义t_m获得当前时间中的秒if(t_s<10){ miao="0" + t_s //让秒数以“00”的格式显示}else{ miao=t_s //把秒数赋值给变量“miao”}bjsj=shi + ":" + fen + ":" + miao //动态文本框显示时分秒4、选中“动作”层第二帧,按“F7”(插入空白关键帧),在按“F9”,在脚本里输入gotoAndPlay(1)5、测试、调整、完成。
日历时钟的制作原理与方法1.启动FLASH8 软件。
2.确立文档属性设置动画尺寸为550*400,背景颜色深绿,其它默认,点击确定,进入场景1。
如图1所示:图14.创建图形元件选择“插入-新建元件”,建立一个名为“表盘”的图形元件。
点击确定,进入元件编辑区。
添加三个图层,共四个图层。
自下而上命名为底盘、外环、刻度、时数。
(1)选择底盘图层第一帧,用椭圆工具在舞台拖一个规格约为300*300的,笔触高度为10的,无填充的蓝色渐变(线性)的正圆,全居中。
将其打散,用填充工具在正圆的中间添加放射性的、紫白渐变颜色。
上锁。
其制作流程,如图2所示:图2(2)选择外环图层第一帧,用椭圆工具在舞台拖一个规格约为320*320的,笔触高度为20的,无填充的蓝色渐变(线性)的正圆,全居中。
上锁。
如图3所示:图3(3)选择刻度图层第一帧,用线条工具在舞台拖一个高度约为12的,笔触高度为3的,无填充的白色线段,将其放置在底盘的上端适当位置,水平中齐。
如图4所示:图4再用任意变形工具点击该实例,并将其注册点移到舞台的中心点。
如图5所示:图5选择“窗口-变形”,打开变形面板,设置其参数,如图6所示:图6点击变形面板下方的“复制并应用变形”按钮59次。
上锁。
完成后的舞台实例变化,如图7所示:图7(4)选择时数图层第一帧,用文本工具在刻度内侧输入一个“1”字,颜色红色,规格、字体自定,将其放置在底盘的上端刻度的下方适当位置,水平中齐。
如图8所示:图8再用任意变形工具点击该实例,并将其注册点移到舞台的中心点。
如图9所示:图9选择“窗口-变形”,打开变形面板,设置其参数,如图10所示:图10点击变形面板下方的“复制并应用变形”按钮11次。
上锁。
完成后的舞台实例变化,如图11所示:图11然后用文本工具将各实例依次改为相应的时数。
上锁。
完成后的舞台实例,如图12所示:图12(5)本环节完成后的时间轴,如图13所示:图135.创建影片剪辑(1)选择“插入-新建元件”,建立一个名为“时针”的影片剪辑元件。
实验十二面向对象编程——数字指针钟[实验学时]4学时[实验类型]设计性实验[实验目的]1、理解创建时间对象、访问时间对象的过程;2、掌握创建时间对象,访问时间对象的属性;[相关知识与准备]1、AS日期函数的常规语法;2、AS对象与变量。
[实验环境]Flash cs4[实验内容和要求]1、设计钟盘⑴、新建一个Flash文档,单击“属性”面板中的“尺寸”按钮,打开“文档属性”面板设置场景大小为400px*400px,背景为墨蓝色(#00659C),帧频为12fps。
⑵、按快捷键Ctrl+F8打开“新建元件”面板,创建一个“背景”图形元件,双击“背景”元件中的“图层1”三字,将其名改为“背景”。
⑶、点选工具栏中的“椭圆工具”并去掉填充色,如图2所示。
按住Shift 键和鼠标左键在“背景”元件的场景中拉出一个空心圆来。
用“箭头工具”点选刚才绘制的空心圆后,如图3所示设置其“属性”面板。
在点选空心圆后也可以按快捷键Ctrl+I打开“信息面板”进行设置。
完成如下图12.设计时钟刻度利用直线工具绘制一条短直线,运用变形工具,旋转30度,并直接复制;在利用椭圆工具绘制椭圆,删除多余的线条;转换为图形元件,并更名“刻度”。
3、设计指针按快捷键Ctrl+F8打开“新建元件”面板,分别创建名为“时针”、“分针”、“秒针”的影片剪辑元件。
4、旋转指针⑴、按快捷键Ctrl+E回到“场景1”,新建四个层,分别改名为“背景”、“时针”、“分针”、“秒针”。
⑵、按快捷键Ctrl+L打开“库”面板,把库中的“背景”、“时针”、“分针”、“秒针”元件拖入相应的层;⑶、分别点选“时针”、“分针”、“秒针”三个影片元件,在“属性”面板里分别设置其实例名为“hours”、“minutes”、“seconds”;⑷、新建一个图层,改名为action,F9调出动作面板,添加如下代码function ClockFun() {// 声明一个名为时间对象time = new Date();hour = time.getHours()*30;minute = time.getMinutes()*6;second = time.getSeconds()*6;minute += time.getSeconds()/10;hour += time.getMinutes()/2;seconds._rotation = second;minutes._rotation = minute;hours._rotation = hour;}setInterval(ClockFun,1000);5、设计显示日期⑴、锁定其它层。
FLASH时钟的制作教程FLASH 视频教程 2009-11-01 17:50:40为了大家制作时方便,把action图层的动作语句附于此:第一祯:d = new Date();_root.sec_mc._rotation = d.getSeconds() * 6 + d.getMilliseconds() / 160;_root.min_mc._rotation = d.getMinutes() * 6 + d.getSeconds() / 10;_root.hour_mc._rotation = d.getHours() * 30 + d.getMinutes() / 2;第二祯:gotoAndPlay(1);关于日期的语句:第一祯:time = new Date();y = time.getYear();moon = time.getMonth();today = time.getDay();day = time.getDate();year = y + 1900;moon = moon + 1;if (today == 1){ sun = "";today = "一";} // end ifif (today == 2){sun = "";today = "二";} // end ifif (today == 3){sun = "";today = "三";} // end ifif (today == 4){sun = "";today = "四";} // end ifif (today == 5){sun = "";today = "五";} // end ifif (today == 6){ sun = "";today = "六";} // end ifif (today == 0){sun = "日";today = "";}第二祯:gotoAndPlay(1);action图层的动作语句之二:第1祯:d = new Date();miaozhen._rotation = d.getSeconds()*6+d.getMilliseconds()/160;fenzhen._rotation = d.getMinutes()*6+d.getSeconds()/10;shizhen._rotation = d.getHours()*30+d.getMinutes()/2;time = new Date();hour = time.getHours();minute = time.getMinutes();second = time.getSeconds();if (minute<10) {minute = "0"+minute;}if (second<10) {second = "0"+second;}timetext = hour+":"+minute+":"+second;_root.onLoad = function() {weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");monthArray = new Array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月");timedate = new Date();};_root.onEnterFrame = function() {year = timedate.getFullYear();monthnum = timedate.getMonth();month = monthArray[monthnum];week = timedate.getDay();weekday = weekArray[week];dweek.text = weekday;day = timedate.getDate();hour = timedate.getHours();minute = timedate.getMinutes();second = timedate.getSeconds();dday.text = year+"年"+month+""+day+"日";delete timedate;timedate = new Date();};第2祯:gotoAndPlay(1);如何将自制的时钟放在桌面1、进入已经做好的时钟的主场景,添加一个图层,导入一张图片做为桌面的背景,尺寸可以同你的显示器分辨率一般大(我的是800*600),将该图层置于最下层,并锁定该图层。