Flash制作非常酷的时钟动画

   最终预览

  让我们看一下最终预览效果

  第一步:二进制是什么意思?

  每个人都知道如何计数,但不是每个人都知道有多少种不同的方法。我们现在要用一种很特别的方法,叫做十进制法。我们也可以用十六进制法,八进制法,二进制法或其他的。

  在十进制法中,我们用10来代表我们进位基数,以此来进行加减。但是在二进制中,10和十进制中的2是相等的,11和十进制中的3相等,100和十进制中的4相等,等等。所以我们常见的10也可以表示不同的数。


  二进制法是以2为基数的,这就是为什么它叫二进制,和以10为基数的十进制不同。计算机用二进制来工作。

  有了这些知识,你能看明白上面SWF中的表么?

  第二步:创建Flash文档

  创建一个新的AS3Flash文档,命名为”Binary_Clock.fla”


  第三步:设置舞台

  进入属性面板,将舞台大小设为550*400,背景色为#222222.


  第四步:获取TweenMax

  到http://www.greensock.com/tweenmax/网站下载AS3所需的库


  第五步:提取TweenMax

  将文件解压并将名为”com”的文件夹复制到你存放Binary_Clock.fla的目录中。


  第六步:创建一个方块(Bit)

  现在执行插入>新建元件,建一个名为Bit的影片剪辑元件。


  这个”Bit”将代表一个数的一个单位。它有两种状态,分别用两种颜色表示:一个代表0一个代表1。

  第七步:画一个方块

  下一步,在你新创建的元件中画一个50*50的正方形。


  第八步:修改方块

  将方块的颜色改为#00CBFF,并将其放置到中间。


  第九步:创建数列柱

  回到舞台,从库中选取些方块,并将它们摆成我们要用的样子。可以按下面的样子摆放。


  第十步:添加些元素

  可以按你所需添加些文本标签和线条,使它们更易于理解。


  第十一步:设实例名称

  在属性面板中为每一个方块设实例名称,它们的名字如下所示:


  第十二步:将FLA连接到一个文档类

  进入属性面板,将类名设为”Main”,这个是下一步中我们要创建的类。


  第十三步:创建文档类

  完成了舞台部分后,我们现在可以开始写代码了。首先创建一个新的ActionScript3.0文件,保存为”Main.as”


  将下面的代码添加到文件中:

  package {

  import flash.display.MovieClip;

  public class Main extends MovieClip

  {

  public function Main()

  {

  }

  }

  }

  第十四步:添加需要导入的类

  我们开始要先导入一些必要的类,将下面的添加到包声名后面。

  import flash.display.MovieClip;

  import flash.utils.Timer;

  import flash.events.TimerEvent;

  import com.greensock.*;

  import com.greensock.easing.*;

  第十五步:定义变量

  下面我们将定义些公有变量,将下面的添加到类声名后:

  public var clock:Timer=new Timer(1000);

  public var date:Date=new Date();

  public var hr:int;

  public var min:int;

  public var sec:int;

  public var bits:Array;

  这时会自动创建一个新Date对象将其设为当前时间。

  第十六步:为变量赋值

  好了现在来添加让时钟启动的代码。这些是在Main函数里面的。

  //通过这些来为每个变量赋初值

  sec=date.getSeconds();

  min=date.getMinutes();

  hr=date.getHours();

  clock.start();

  clock.addEventListener(TimerEvent.TIMER, setTime);

  第十七步:创建setTime()函数

  每一秒都会调用这个函数

  private function setTime(e:TimerEvent):void

  {

  date=new Date();

  sec=date.getSeconds();

  min=date.getMinutes();

  hr=date.getHours();

  }

  第十八步:将十进制数转化为二进制数。

  这个函数将把十进制数转化为二进制数,这些数过会会用到。

  private function dec2bin(dec:int, length:int):Array

  {

  var bin:Array = new Array();

  while((dec/2)>0) //注意这儿和 “while((dec/2)>=1)”的效果一样

  {

  bin.push(dec%2); //dec%2是dec除以2后的余数。 3%2=1; 4%2=0; 5%2=1; 6%2=0; 等等

  //也就是看这个数是偶数还是奇数

  dec=dec/2; //由于dec是整形数,所以会得到一个近似数

  }

  while(bin.length

  return bin;

  }

  所以,调用 函数dec2bin(13, 4)得到的是 [1,1,0,1].

  第十九步:创建converter()函数

  这个函数将传一个十进制数并用dec2bin()函数将其转化为我们将要用的二维数组

  private function converter(num:int):Array

  {

  var st:String=String(num);

  if (st.length==1) st=’0′+st;

  var fDigit:int=int(st.charAt(1));

  var sDigit:int=int(st.charAt(0));

  var fColumn:Array=dec2bin(fDigit,4);

  var sColumn:Array=dec2bin(sDigit,3);

  var result:Array=fColumn.concat(sColumn);

  return result;

  }

时间: 2024-10-01 17:16:28

Flash制作非常酷的时钟动画的相关文章

flash制作一个简单的音乐动画教程

  很多同学都对Flash感兴趣 ,下面小编就教教大家如何用flash做一个简单的动画. 通过这个设计充分地将FLASH动画的现况分析出来了,本设计是根据选定音乐.人物的设定.剧本的创作.场景的布置等.首先就是选歌,一部好的MTV就得有一首贯穿全场的好歌,其次就是根据歌意确定主题和场景的布置,最后围绕剧情制造出MTV. 工具/原料 Flash PS 一首自己感兴趣的歌 素材照片 方法/步骤 1.2 Flash软件的特点 FLASH的全称是Macromedia flash,后来又被adobe收购了

Flash制作超酷的旋转图像像册视觉效果

旋转 用Flash制作像册的教程已经很多了!这里就不在给大家罗嗦了!只要发挥自己的想象,相信自己!你能!那么超酷的旋转图像像册视觉效果就会出现.因为类似教程太多了,所以在这里不给大家详细讲解,如果你想深入研究,那么就自己下载源文件吧! 网页教学网注:这个源文件是从一个国外站点上下载来的!简单给大家讲解一下制作过程. 先看效果和源文件.(演示效果文件184K,如果您网速慢可能会多等会) 点击这里下载源文件(Flash源文件压缩包大小220K) 简单给大家说一下制作步骤. 首先修改文档属性,准备好动

Flash制作精美三维方格弹跳动画

跳动 效果演示: 点击这里下载源文件 制作步骤: 1.制作三维方块的三个面,并转换为图形元件:(在场景中插入--新建元件--图形),分别命名为元件1.元件2.元件3. 2.把三个图形元件组合为三维方块.并把三维方块也转换为图形元件.并在个图形之间画上线条,使轮廓更加清楚,立体感更强. 3.因为无论鼠标移动到三维方块的那个面上时,三维方块就开始弹跳,就必须把方块的各个面转换为按钮,制作按钮的方法:在场景插入--新建元件--按钮:按钮的弹起.指针经过.按下都设为空白帧,在点击帧插入关键帧,并把库中的

Flash制作特酷的图片遮照特效动画

特效 演示效果: 点击这里下载源文件 制作步骤: 1.启动Flash MX 2004,新建一个Flash文档,修改影片大小为300×300,帧率:30fps.如图: 2.单击"文件"菜单-->>"导入"-->>"导入到库"命令,导入一张事先准备好的300*300的一张图片素材.如图: 3.单击"插入"-->>"新建元件"命令(或者按Ctrl+F8),新建一个元件,命名为b

用 FLASH 制作好看的动态瀑布动画

动态 本文由中国教程网 英子原创,转载请保留此信息! 效果1: 点击这里下载源文件 1.准备好一张清晰的瀑布图片,启动FLASH,设背景为蓝色,其它默认. 2.文件--导入--导入到库,把图片导入. 3.在第一层的第1 帧,把图片从库里拖进舞台,调整图片和舞台一样大小.打开对齐面版,选相对于舞台,水平对齐,垂直对齐. 4.增加图层2 ,右键点图层1 的第1 帧--复制帧,右键点图层2 的第1 帧,粘贴帧.在图层1 右键点图片--转换为元件,类型:图形.锁定第1 层,把眼晴关上(隐藏图层1),打开

Flash制作精美美女遮罩效果动画

先看看演示效果:(文章最后提供了源代码) 制作步骤: 1.首先选一张美女图片 然后用photoshop把美女抽出来 调整边缘使其平滑 如果不会 这里有png原文件 2.新建一个FLASH文档 大小根据你的图片决定 我的是440*600 帧速为40. 3.新建MC1命名为渐变 做一个150*600的由浅灰色过渡到透明的矩形长条: 做好后在场景中删除. 4.新建一个"zhezhao1"mc,打开MC  把第一层命名为"mm1"层,画一个和美女轮廓一样的灰色图形 并转换为

Fireworks制作美女背景的时钟动画

  本教程叫你利用Fireworks,通过简单的几个步骤,制作漂亮的时钟指针动画,时钟的背景可以是美女的,也可以是你自己的. 先看看效果图 下面是教程

Flash制作可爱的“小兔子跷跷板”动画

这个Flash实例制作了两只可爱的小兔子玩跷跷板的动画,主要用到椭圆工具.渐变填充和任意变形工具等,操作简单易懂,适合练习. 制作步骤: 1.新建一个默认大小的Flash文档.先画天空背景,用矩形工具画一个矩形,在对齐面板中按下"相对于舞台",再点"匹配宽和高"按钮,最后点"垂直中齐"和"水平中齐"按钮.与舞台对齐之后给矩形设置如下从白色到天蓝色的渐变,方式为"线性". 图1 2.草地.画一个草绿色的矩形,

Flash制作飘落的红叶视觉动画特效(无AS)

特效 感谢网页教学网合作伙伴中国教程网提供本教程. 接着"蝶恋花"的练习, 我们举一反三再来学习,红叶的制作,主要学习内容是,如何灵活运用引导层. 我们先看看实例: 点击这里下载源文件 素材1 素材2 制作方法: 1.建新文档. 图1 2.文件--导入--导入到库.把背景图片和叶子图片导入到库. 图2 打开对齐面版,相对于舞台,水平中齐,垂直中齐.把背景和舞台对齐. 图3 3.点窗口--库, 在1 帧,把背景图从库里拖出舞台,调整与舞台一样大小.把图层1 改为背景层,右键点背景,转换为