收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2024|回复: 4

[AS3] 我给大家送“钟”来了。。。。

[复制链接]
发表于 2011-6-6 21:46:27 | 显示全部楼层 |阅读模式
本人表达能力差,不多说了。 复制一下哈。 纯as制作效果。
*学习要点,对Sprite的属性应用,坐标,旋转等,细节点的就是秒针的运行,as绘制UI。其它点击变换背景,拖动,滚轮放大。
        *重点是:白天看与晚上看是不一样的,脱了短裤与穿了短裤看效果也可以试试。。。

源文件看附件。
主要代码
  1. package mythl{
  2.         /**
  3.         *@author:MythLong;
  4.         *mythl@163.com;
  5.         *学习要点,对Sprite的属性应用,坐标,旋转等,细节点的就是秒针的运行,as绘制UI。其它点击变换背景,拖动,滚轮放大。
  6.         *重点是:白天看与晚上看是不一样的,脱了短裤与穿了短裤看效果也可以试试。。。
  7.         *仅供学习参考,欢迎转载并美化,记得保留作者信息给我增加点名誉虚荣,谢谢啊。。 。  。
  8.         *
  9.         */
  10.         import flash.display.*;
  11.         //import flash.display.MovieClip;
  12.         import flash.geom.*;
  13.         import flash.events.*;
  14.         import flash.text.*;
  15.         import flash.filters.GlowFilter;
  16.         import fl.transitions.Tween;
  17.         import fl.transitions.easing.*;
  18.         import flash.ui.*;
  19.         public class Clock2 extends Sprite {
  20.                 /////////////
  21.                 private var _myDates:Date;
  22.                 private var date:uint;
  23.                 private var day:Array=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
  24.                 private var month:uint;
  25.                 private var hour:uint;
  26.                 private var second:uint;
  27.                 private var minute:uint;
  28.                 private var year:uint;

  29.                 private var tween:Tween;
  30.                 private var _stagebg:Sprite;
  31.                 private var _bgColor:Number;

  32.                 private var _timecon:Sprite;
  33.                 private var _clockSkin:Sprite;
  34.                 private var _reflectHi:Sprite;
  35.                 private var _hourMC:Sprite;
  36.                 private var _minuteMC:Sprite;
  37.                 private var _secondMC:Sprite;
  38.                 private var _hour_Bs:Sprite;
  39.                 private var _minute_Bs:Sprite;
  40.                 private var _second_Bs:Sprite;
  41.                 private var _oldrot:Number;
  42.                 private var tmpangle:Number;
  43.                 private var _reAngle:int=90;
  44.                 private var _pinColor:Number=0xDDDDDD;///指针颜色
  45.                 private var _filter1:GlowFilter;
  46.                 private var _filter2:GlowFilter;

  47.                 private var daytext:TextField;
  48.                 private var _yeartext:TextField;


  49.                 private var format:TextFormat;
  50.                 private var format2:TextFormat;

  51.                 private var stageW:uint=stage.stageWidth;
  52.                 private var stageH:uint=stage.stageHeight;
  53.                 private var menulabel:Array;

  54.                 /////////
  55.                 public function Clock2() {
  56.                         //stage.displayState="fullScreen";
  57.                         //stage.align=StageAlign.TOP_LEFT;
  58.                         //stage.quality=StageQuality.LOW;
  59.                         //_pinColor=0xFFFFFF;///指针颜色
  60.                         format=new TextFormat();
  61.                         format.font="微软雅黑";
  62.                         format.size=12;
  63.                         format.color=0x000000;
  64.                         format.align=TextFormatAlign.RIGHT;
  65.                         //
  66.                         format2=new TextFormat();
  67.                         format2.font="_san";
  68.                         format2.bold=true;
  69.                         format2.size=12;
  70.                         format2.color=0xDDDDDD;
  71.                         format2.align=TextFormatAlign.LEFT;
  72.                         //trace(_myDates.getSeconds());
  73.                         _stagebg=new Sprite();
  74.                         stage.addChild(_stagebg);
  75.                         _init();
  76.                 }
  77.                 ///////////初始化状态。
  78.                 private function _init():void {
  79.                         menulabel=new Array("mythl@163.com","Author:MYTHLONG");
  80.                         _customMenu();
  81.                         _buildingBG();
  82.                         _buildingUI();

  83.                 }
  84.                 ///
  85.                 private function _changeBG(evt:MouseEvent):void {
  86.                         _buildingBG();
  87.                 }
  88.                 private function _mouseBG(evt:MouseEvent):void {
  89.                         _stagebg.alpha=mouseX/mouseY*.2;
  90.                         trace(mouseX/mouseY*.2);
  91.                 }
  92.                 ////
  93.                 private function _dragMC(evt:MouseEvent):void {
  94.                         evt.currentTarget.startDrag();
  95.                 }

  96.                 private function _stopdragMC(evt:MouseEvent):void {
  97.                         evt.currentTarget.stopDrag();
  98.                 }
  99.                 private function _zoomMC(evt:MouseEvent):void {
  100.                         if (evt.delta<0) {
  101.                                 evt.currentTarget.scaleX=evt.currentTarget.scaleY-=.1;
  102.                                 if (evt.currentTarget.scaleX<.1) {
  103.                                         evt.currentTarget.scaleX=evt.currentTarget.scaleY=.1;
  104.                                 }
  105.                         } else if (evt.delta>0) {
  106.                                 evt.currentTarget.scaleX=evt.currentTarget.scaleY+=.1;
  107.                         }
  108.                 }
  109.                 /////开始时间更新显示。
  110.                 private function _runtime(evt:Event):void {
  111.                         _myDates=new Date();
  112.                         if (second!=_myDates.getSeconds()) {

  113.                                 date=_myDates.getDate();
  114.                                 month=_myDates.getMonth();
  115.                                 year=_myDates.getFullYear();

  116.                                 /////
  117.                                 hour=_myDates.getHours();
  118.                                 minute=_myDates .getMinutes();
  119.                                 second=_myDates.getSeconds();
  120.                                 //_secondMC.rotation=second*360/60;
  121.                                 tmpangle=second*360/60+6-_reAngle;
  122.                                 //tmpangle<180?tmpangle:tmpangle=tmpangle-360;

  123.                                 //trace(_oldrot+":"+tmpangle);
  124.                                 tween=new Tween(_secondMC,"rotation",None.easeNone,_oldrot,tmpangle,.999,true);
  125.                                 _minuteMC.rotation=minute*360/60+second*360/60/60-_reAngle;
  126.                                 _hourMC.rotation=hour*360/12+minute*360/60/12-_reAngle;
  127.                                 //trace(day[_myDates.getDay()]);
  128.                                 daytext.text=(month+1)+"月"+date+"日"+day[_myDates.getDay()];

  129.                                 //_yeartext.text=year+"年"+(month+1)+"月"+date+"日";

  130.                                 if (_myDates.getHours()>6 &&_myDates.getHours()<19) {
  131.                                         _hour_Bs.alpha=1;
  132.                                         _second_Bs.alpha=1;
  133.                                         _minute_Bs.alpha=1;
  134.                                         _clockSkin.alpha=1;
  135.                                         _reflectHi.alpha=1;
  136.                                 } else {
  137.                                         _hour_Bs.alpha=.1;
  138.                                         _second_Bs.alpha=.1;
  139.                                         _minute_Bs.alpha=.1;
  140.                                         _clockSkin.alpha=.1;
  141.                                         _reflectHi.alpha=.1;
  142.                                         daytext.appendText("XXX看到此信息说明你有穿短裤");
  143.                                         daytext.width=daytext.textWidth+5;
  144.                                 }

  145.                         } else {
  146.                                 _oldrot=_myDates.getSeconds()*360/60+6-_reAngle;
  147.                                 if (_oldrot==270) {
  148.                                         _oldrot=-90;////这个判断是为了纠正秒针超过180度时,rotation变为负数,tween动画的问题。
  149.                                 }
  150.                         }
  151.                         daytext.x+=(mouseX-daytext.x)/6;
  152.                         daytext.y+=(mouseY-daytext.y+daytext.height)/6;

  153.                 }
  154.                 /////////建立基本的时钟元素。
  155.                 private function _buildingUI():void {
  156.                         _timecon =new Sprite();
  157.                         //_timecon.rotation=-_reAngle;
  158.                         _timecon.x=300;
  159.                         _timecon.y=300;
  160.                         stage.addChild(_timecon);
  161.                         _clockSkin=_drawBody();
  162.                         _timecon.addChild(_clockSkin);
  163.                         ///////////
  164.                         var i:int=-1;
  165.                         while (++i<12) {
  166.                                 var _label2:Sprite=_drawCircle(0x00FFAA,1,2,122,0,true,0x00FFAA,0xFFFFFF,0,0);
  167.                                 _label2.rotation=360/12*i;
  168.                                 _timecon.addChild(_label2);
  169.                         }
  170.                         _hourMC=new Sprite();
  171.                         _minuteMC=new Sprite();
  172.                         _secondMC=new Sprite();
  173.                         daytext=new TextField();
  174.                         daytext.defaultTextFormat=format;
  175.                         daytext.text="12月12日星期一";
  176.                         daytext.width=daytext.textWidth+2;
  177.                         daytext.height=daytext.textHeight+2;
  178.                         daytext.x=20;
  179.                         daytext.y=-10;
  180.                         daytext.mouseEnabled=false;
  181.                         daytext.background=true;
  182.                         daytext.backgroundColor=0xA3FED9;
  183.                         daytext.border=true;

  184.                         _yeartext=new TextField();
  185.                         _yeartext.defaultTextFormat=format;
  186.                         //_yeartext.background=true;
  187.                         _yeartext.autoSize=TextFieldAutoSize.CENTER;
  188.                         _yeartext.x=-_yeartext.width/2;
  189.                         _yeartext.y=-10;
  190.                         _yeartext.mouseEnabled=false;
  191.                         //_timecon.addChild(_yeartext);
  192.                         //_stagebg.addChild(daytext);
  193.                         stage.addChild(daytext);
  194.                         _timecon.addChild(_hourMC);
  195.                         _timecon.addChild(_minuteMC);
  196.                         _timecon.addChild(_secondMC);

  197.                         _hour_Bs =_drawSprite(_pinColor,.1,110,9,-25,-4,true,0x000000,0xFFFFFF,.25,.6);
  198.                         _hour_Bs.addChild(_drawCircle(_pinColor,.1,10,0,0,false,0x000000,0xFFFFFF,.25,.6));
  199.                         _hourMC.addChild(_hour_Bs);
  200.                         var _hour_Pt:Sprite=_drawSprite(0x00FFAA,1,20,5,60,-2,false,0x00FFAA,0xFFFFFF,0,0);
  201.                         _filter1=new GlowFilter(0x00FF00,1,3,3,2,2,true);
  202.                         _filter2=new GlowFilter(0x00FF00,1,8,8,2,2,false);
  203.                         _hour_Pt.filters=[_filter1,_filter2];
  204.                         _hourMC.addChild(_hour_Pt);

  205.                         _minute_Bs =_drawSprite(_pinColor,.1,130,5,-20,-2,true,0x000000,0xFFFFFF,.25,.6);
  206.                         _minute_Bs.addChild(_drawCircle(_pinColor,.1,6,0,0,false,0x000000,0xFFFFFF,.25,.6));
  207.                         _minuteMC.addChild(_minute_Bs);
  208.                         var _minute_Pt:Sprite=_drawSprite(0x11E8FF,1,20,3,82,-1,true,0x11B8FF,0xFFFFFF,0,0);
  209.                         _filter1=new GlowFilter(0x0055FF,1,3,3,2,2,true);
  210.                         _filter2=new GlowFilter(0x0055FF,1,8,8,2,2,false);
  211.                         _minute_Pt.filters=[_filter1,_filter2];
  212.                         _minuteMC.addChild(_minute_Pt);

  213.                         _second_Bs =_drawSprite(0xDD3300,.1,130,2,-10,-1,true,0x000000,0xFFFFFF,.25,.6);
  214.                         _second_Bs.addChild(_drawCircle(0xDD3300,.1,4,0,0,false,0x000000,0xFFFFFF,.25,.6));
  215.                         _secondMC.addChild(_second_Bs);
  216.                         var _second_Pt:Sprite=_drawSprite(0xFF7011,1,5,5,74,-79,true,0xFF1A1A,0xFFFFFF,0,0,45);
  217.                         _filter1=new GlowFilter(0xFF1A1A,1,3,3,2,2,true);
  218.                         _filter2=new GlowFilter(0xFF1A1A,1,8,8,2,2,false);
  219.                         _second_Pt.filters=[_filter1,_filter2];
  220.                         _secondMC.addChild(_second_Pt);
  221.                         ////
  222.                         ///////
  223.                         _reflectHi=_drawGraCir(134,.1,0,0x98,0x99,700,700,-380,-570,0xFFFFFF,0xFFFFFF);
  224.                         _timecon.addChild(_reflectHi);
  225.                         _reflectHi.addChild(_drawGraCir(134,.9,0,0x00,0x99,700,700,-380,-570,0xFFFFFF,0xFFFFFF));
  226.                         //_reflectHi.addChild(_drawGraCir(134,.6,0,0x40,0x45,700,700,-380,-570,0xFFFFFF,0xFFFFFF,true));
  227.                         _reflectHi.addChild(_drawGraCir(135,0,1,0xEE,0xFF,380,380,-180,-142,0xFFFFFF,0xFFFFFF,false));

  228.                         //_oldrot=_secondMC.rotation=second*360/60;
  229.                         _minuteMC.rotation=minute*360/60+second*360/60/60-_reAngle;
  230.                         _hourMC.rotation=hour*360/12+minute*360/60/12-_reAngle;
  231.                         stage.addEventListener(Event.ENTER_FRAME,_runtime);
  232.                         _timecon.addEventListener(MouseEvent.MOUSE_DOWN,_dragMC);
  233.                         _timecon.addEventListener(MouseEvent.MOUSE_UP,_stopdragMC);
  234.                         _timecon.addEventListener(MouseEvent.MOUSE_WHEEL,_zoomMC);
  235.                         _stagebg.addEventListener(MouseEvent.CLICK,_changeBG);
  236.                         //_stagebg.addEventListener(MouseEvent.MOUSE_MOVE,_mouseBG);

  237.                 }
  238.                 ////绘制时钟的刻度与表盘。
  239.                 private function _drawBody():Sprite {
  240.                         var _body:Sprite=new Sprite();
  241.                         //addChild(_body);
  242.                         var _bg:Sprite=new Sprite();
  243.                         _bg.graphics.beginFill(0x361BA9,1);
  244.                         _bg.graphics.drawCircle(0,0,135);
  245.                         _bg.filters=[new GlowFilter(0x000000,.7,12,12,2,2,false,true)];
  246.                         _body.addChild(_bg);
  247.                         ///////
  248.                         var _reflect:Sprite=_drawGraCir(135,0,.2,0xBB,0xFF,500,500,-280,-400,0xFFFFFF,0xFFFFFF);
  249.                         _body.addChild(_reflect);
  250.                         //_reflect.addChild(_drawGraCir(135,0,.1,0xCC,0xFF,340,340,-180,-220,0xFFFFFF,0xFFFFFF));
  251.                         _reflect.addChild(_drawGraCir(135,0,.6,0xEE,0xFF,276,276,-138,-138,0xFFFFFF,0xFFFFFF));
  252.                         _reflect.addChild(_drawGraCir(135,0,.6,0xEE,0xFF,280,280,-142,-150,0xFFFFFF,0xFFFFFF));
  253.                         _reflect.addChild(_drawGraCir(135,0,1,0xEE,0xFF,380,380,-200,-240,0xFFFFFF,0xFFFFFF,true));
  254.                         ///////////
  255.                         var j:int=-1;
  256.                         while (++j<60) {
  257.                                 var _labelmin:Sprite=_drawSprite(0xEEEEEE,1,3,1,120,0,false,0x00FFAA,0xFFFFFF,0,0);
  258.                                 _labelmin.rotation=360/60*j;
  259.                                 _body.addChild(_labelmin);
  260.                         }
  261.                         ///////////
  262.                         var i:int=-1;
  263.                         while (++i<12) {
  264.                                 var _label:Sprite=_drawSprite(_pinColor,.25,20,6,105,-3,true,0x000000,0xFFFFFF,1,.6);
  265.                                 _label.rotation=360/12*i;
  266.                                 _body.addChild(_label);
  267.                         }
  268.                         var _copyright:TextField=new TextField();
  269.                         _copyright.defaultTextFormat=format2;
  270.                         _copyright.text="MYTHLONG";
  271.                         _copyright.autoSize=TextFieldAutoSize.CENTER;
  272.                         _copyright.x=-_copyright.width/2;
  273.                         _copyright.y=60;
  274.                         _copyright.mouseEnabled=false;
  275.                         _body.addChild(_copyright);

  276.                         return _body;
  277.                 }
  278.                 //////绘制定义属性的RECT.
  279.                 private function _drawSprite(_Color:Number=0xDDDDDD,_ColorAlpha:Number=1,_W:uint=10,_H:uint=10,_X:int=0,_Y:int=0,_Shadow:Boolean=true,_ShadowColor:Number=0x000000,_lineColor:Number=0xFFFFFF,_lineSize:uint=0,_lineAlpha:Number=1,_Ro:int=0):Sprite {
  280.                         var _myMC:Sprite=new Sprite();
  281.                         _myMC.graphics.lineStyle(_lineSize,_lineColor,_lineAlpha);
  282.                         _myMC.graphics.beginFill(_Color,_ColorAlpha);
  283.                         _myMC.graphics.drawRect(_X,_Y,_W,_H);
  284.                         if (_Shadow) {
  285.                                 _myMC.filters=[new GlowFilter(_ShadowColor,1,5,5,2,2,false,false)];
  286.                         }
  287.                         _myMC.rotation=_Ro;
  288.                         return _myMC;
  289.                 }
  290.                 //////绘制定义属性的circle.
  291.                 private function _drawCircle(_Color:Number=0xDDDDDD,_ColorAlpha:Number=1,_R:uint=5,_X:int=0,_Y:int=0,_Shadow:Boolean=false,_ShadowColor:Number=0x000000,_lineColor:Number=0xFFFFFF,_lineSize:uint=0,_lineAlpha:Number=1):Sprite {
  292.                         var _myMC:Sprite=new Sprite();
  293.                         _myMC.graphics.lineStyle(_lineSize,_lineColor,_lineAlpha);
  294.                         _myMC.graphics.beginFill(_Color,_ColorAlpha);
  295.                         _myMC.graphics.drawCircle(_X,_Y,_R);
  296.                         if (_Shadow) {
  297.                                 _myMC.filters=[new GlowFilter(_ShadowColor,1,5,5,2,2)];
  298.                         }
  299.                         return _myMC;
  300.                 }
  301.                 ////////////_buildingBG()
  302.                 private function _buildingBG():void {
  303.                         _bgColor=Math.random()*0xFFFFFF+0x002211;
  304.                         _stagebg.graphics.clear();
  305.                         _stagebg.graphics.beginFill(_bgColor,.3);
  306.                         _stagebg.graphics.drawRect((stageW-stage.stageWidth)/2,(stageH-stage.stageHeight)/2,stage.stageWidth,stage.stageHeight);


  307.                 }
  308.                 ////////////
  309.                 private function _customMenu():void {
  310.                         var _customMenu:ContextMenu=new ContextMenu();
  311.                         var item0:ContextMenuItem=new ContextMenuItem(menulabel[0]);
  312.                         var item1:ContextMenuItem=new ContextMenuItem(menulabel[1]);
  313.                         _customMenu.customItems.push(item0,item1);
  314.                         this.contextMenu=_customMenu;
  315.                 }
  316.                 ///bg
  317.                 private function _buildingGBG():void {

  318.                 }
  319.                 /////绘制渐变圆形。
  320.                 private function _drawGraCir(_Radiu:uint=135,_Alpha1:Number=0,_Alpha2:Number=.6,_Ratio1:Number=0xBB,_Ratio2:Number=0xFF,_MatrW:uint=500,_MatrH:uint=500,_MatrX:int=-250,_MatrY:int=-400,_Color1:Number=0xFFFFFF,_Color2:Number=0xFFFFFF,_Shadow:Boolean=false):Sprite {
  321.                         var _myMC:Sprite=new Sprite();
  322.                         var fillType:String = GradientType.RADIAL;
  323.                         //var fillType:String = GradientType.LINEAR;
  324.                         var colors:Array = [_Color1, _Color2];
  325.                         var alphas:Array = [_Alpha1, _Alpha2];
  326.                         var ratios:Array = [_Ratio1, _Ratio2];
  327.                         var matr:Matrix = new Matrix();
  328.                         matr.createGradientBox(_MatrW, _MatrH, 0, _MatrX, _MatrY);
  329.                         var spreadMethod:String = SpreadMethod.PAD;
  330.                         var interpolationMethod:String=InterpolationMethod.RGB;
  331.                         var focalPointRatio:Number=0;
  332.                         _myMC.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod,interpolationMethod,focalPointRatio);
  333.                         _myMC.graphics.drawCircle(0,0,_Radiu);
  334.                         //_myMC.graphics.drawRect(0,0,100,100);
  335.                         if (_Shadow) {
  336.                                 _myMC.filters=[new GlowFilter(_Color2,1,8,8,2,2)];
  337.                         }
  338.                         return _myMC;
  339.                 }
  340.         }
  341. }
复制代码

图一

图一

图二

图二

clock_code.rar

13.77 KB, 下载次数: 201

源码文件

发表于 2011-6-7 11:04:19 | 显示全部楼层
还真不错~~继续加油!
回复 支持 反对

使用道具 举报

发表于 2011-6-7 13:21:25 | 显示全部楼层
AS3真恐怖,代码那么长~~做得挺漂亮!
回复 支持 反对

使用道具 举报

发表于 2012-8-3 13:39:19 | 显示全部楼层
很好,很强大。。。。。
回复 支持 反对

使用道具 举报

发表于 2012-8-4 12:53:53 | 显示全部楼层
漂亮,喜欢这“钟”,空了来学习AS3,谢谢楼主分享!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-29 22:25 , Processed in 0.079875 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表