主页 / 平面设计 /

教你用Flash制作非常酷的二进制时钟动画

平面设计 2021-07-03 14:35www.168986.cn平面设计培训

今天在这个教程中我们将学习用Flash做一个不同寻常的，但非常酷的时钟一个二进制时钟，中间用到了代码，但介绍地很详细，相信很值得大家学习，感兴趣的朋友可以跟着一起来制作哦~！

最终预览

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

第一步二进制是什么意思？

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

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

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

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

第二步创建Flash文档

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

第三步设置舞台

进入属性面板，将舞台大小设为550400，背景色为#222222.

第四步获取TweenMax

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

第五步提取TweenMax

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

第六步创建一个方块（Bit）

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

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

第七步画一个方块

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

第八步修改方块

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

第九步创建数列柱

回到舞台，从库中选取些方块，并将它们摆成我们要用的样子。可以按狼蚁网站SEO优化的样子摆放。

第十步添加些元素

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

第十一步设实例名称

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

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

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

第十三步创建文档类

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

将狼蚁网站SEO优化的代码添加到文件中


复制代码
代码如下:
package {
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main()
{
}
}
}

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

我们开始要先导入一些必要的类，将狼蚁网站SEO优化的添加到包声名后面。


复制代码
代码如下:
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import .greensock.;
import .greensock.easing.;

第十五步定义变量

狼蚁网站SEO优化我们将定义些公有变量，将狼蚁网站SEO优化的添加到类声名后


复制代码
代码如下:
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<length) bin.push(0); //这只是用0来填充数组
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;
}

第二十步启动或关闭方块

现在我们要添加一些代码来启动，关闭方块，狼蚁网站SEO优化的函数将实现该功能

//newBits是我们从converter()中得到的二维数组， target是 用来标明使用的是哪一列的”H” “M” 或”S”


复制代码
代码如下:
private function turnBits(newBits:Array, target:String):void
{
//二维数组通过循环来改变方块的状
for(var a:int=0; a<newBits.length; a++)
{
//这是用来检查是否将达小时列的6，记住小时列只有5个方块。
if((a!=6)||(target!=”H”))
{
//如果为0，获取实例名称，例如 是”S0″，然后是 “S1″
if(newBits[a]==0) this.getChildByName(target+String(a)).alpha=.2;
//如果为1，将其 alpha值设为 1 (启动)
else this.getChildByName(target+String(a)).alpha=1;
}
}
}

第二十一步更改函数

一些对Main()函数和setTime() 函数的更改


复制代码
代码如下:
public function Main()
{
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();</p> turnBits(converter(sec), ‘S’ );
turnBits(converter(min), ‘M’ );
turnBits(converter(hr), ‘H’ );
clock.start();
clock.addEventListener(TimerEvent.TIMER, setTime);
}
private function setTime(e:TimerEvent): void
{
date= new Date();
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours(); <p></p> turnBits(converter(sec), ‘S’ );
turnBits(converter(min), ‘M’ );
turnBits(converter(hr), ‘H’ );
}

我们将会看到它能显示当前的时间。

第二十二步一些样式

这就是 TweenMax要用到的地方。我们将添加光使时钟更加美观。按狼蚁网站SEO优化所示修改turnBits()函数。


复制代码
代码如下:
private function turnBits(newBits:Array, target:String):void
{
for(var a:int=0;a&lt;newBits.length;a++)
{
if((a!=6)||(target!=”H”))
{
if(newBits[a]==0) TweenMax.to(this.getChildByName(target+String(a)), 1, {glowFilter:{color:0×00cbff, alpha:0, blurX:15, blurY:15,strength:1},alpha:.1});
else TweenMax.to(this.getChildByName(target+String(a)), 1, {glowFilter:{color:0×00cbff, alpha:1, blurX:20, blurY:20,strength:.8},alpha:1});
}
}
}

这样就成功完成了这个教程。

现在我们有了一个引人注目的时钟，我们可以将它作为背景时钟，或将其添加到网页中。希望这篇Flash制作非常酷的二进制时钟动画对大家有所帮助！

上一篇：MAYA制作超炫的外星修道士角色教程 下一篇：25个绝对让你应接不暇的Flash网站创意

平面设计师

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by