仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 763|回复: 7
打印 上一主题 下一主题

[学习教程] 来看看:Flash实例教程:制造十分酷的时钟动画-Flash实例教程

[复制链接]
活着的死人 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 20:36:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您是否有着精彩的Flash作品,您是否想把他转化为屏保程序。
poluoluo中心提醒:如今我们有了一个有目共睹的时钟,我们能够将它作为背景时钟,或将其增加到网页中.
在这个教程中我们将进修做一个分歧平常的,但十分酷的时钟:一个二进制时钟。
终极预览

让我们看一下终极预览效果
http://www.webjx.com/files/media/1_100509112318.swf第一步:二进制是甚么意义?

每一个人都晓得怎样计数,但不是每一个人都晓得有几种分歧的办法。我们如今要用一种很出格的办法,叫做十进制法。我们也能够用十六进制法,八进制法,二进制法或其他的。
在十进制法中,我们用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,并将其安排到两头。

第九步:创立数列柱

回到舞台,从库当选取些方块,并将它们摆成我们要用的模样。能够按上面的模样摆放。


poluoluo中心提醒:如今我们有了一个有目共睹的时钟,我们能够将它作为背景时钟,或将其增加到网页中.

第十步:增加些元素

能够按你所需增加些文本标签和线条,使它们更容易于了解。

第十一步:设实例称号

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

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

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

第十三步:创立文档类

完成了舞台部分后,我们如今能够入手下手写代码了。起首创立一个新的ActionScript3.0文件,保留为”Main.as”

将上面的代码增加到文件中:
package{
importflash.display.MovieClip;
publicclassMainextendsMovieClip
{
publicfunctionMain()
{
}
}
}
第十四步:增加必要导进的类

我们入手下手要先导进一些需要的类,将上面的增加到包申明前面。
importflash.display.MovieClip;
importflash.utils.Timer;
importflash.events.TimerEvent;
importcom.greensock.*;
importcom.greensock.easing.*;

poluoluo中心提醒:如今我们有了一个有目共睹的时钟,我们能够将它作为背景时钟,或将其增加到网页中.

第十五步:界说变量

上面我们将界说些私有变量,将上面的增加到类申明后:
publicvarclock:Timer=newTimer(1000);
publicvardate:Date=newDate();
publicvarhr:int;
publicvarmin:int;
publicvarsec:int;
publicvarbits:Array;
这时候会主动创立一个新Date工具将其设为以后工夫。
第十六步:为变量赋值

好了如今来增加让时钟启动的代码。这些是在Main函数内里的。
//经由过程这些来为每一个变量赋初值
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
clock.start();
clock.addEventListener(TimerEvent.TIMER,setTime);
第十七步:创立setTime()函数

每秒城市挪用这个函数
privatefunctionsetTime(e:TimerEvent):void
{
date=newDate();
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
}
第十八步:将十进制数转化为二进制数。

这个函数将把十进制数转化为二进制数,这些数过会会用到。
privatefunctiondec2bin(dec:int,length:int):Array
{
varbin:Array=newArray();
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来添补数组
returnbin;
}
以是,挪用函数dec2bin(13,4)失掉的是[1,1,0,1].
第十九步:创立converter()函数

这个函数将传一个十进制数并用dec2bin()函数将其转化为我们将要用的二维数组
privatefunctionconverter(num:int):Array
{
varst:String=String(num);
if(st.length==1)st=’0&prime;+st;
varfDigit:int=int(st.charAt(1));
varsDigit:int=int(st.charAt(0));
varfColumn:Array=dec2bin(fDigit,4);
varsColumn:Array=dec2bin(sDigit,3);
varresult:Array=fColumn.concat(sColumn);
returnresult;
}

poluoluo中心提醒:如今我们有了一个有目共睹的时钟,我们能够将它作为背景时钟,或将其增加到网页中.

第二十步:启动或封闭方块

如今我们要增加一些代码来启动,封闭方块,上面的函数将完成该功效:
//newBits是我们从converter()中失掉的二维数组,target是用来标明利用的是哪一列的”H”“M”或”S”
privatefunctionturnBits(newBits:Array,target:String):void
{
//二维数组经由过程轮回来改动方块的状
for(vara:int=0;a<newBits.length;a++)
{
//这是用来反省是不是将达小时列的6,记着小时列只要5个方块。
if((a!=6)||(target!=”H”))
{
//假如为0,猎取实例称号,比方起首是”S0&Prime;,然后是“S1&Prime;
if(newBits[a]==0)this.getChildByName(target+String(a)).alpha=.2;
//假如为1,将其alpha值设为1(启动)
elsethis.getChildByName(target+String(a)).alpha=1;
}
}
}
第二十一步:变动函数

一些对Main()函数和setTime()函数的变动:
publicfunctionMain()
{
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
turnBits(converter(sec),‘S’);
turnBits(converter(min),‘M’);
turnBits(converter(hr),‘H’);
clock.start();
clock.addEventListener(TimerEvent.TIMER,setTime);
}
privatefunctionsetTime(e:TimerEvent):void
{
date=newDate();
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
turnBits(converter(sec),‘S’);
turnBits(converter(min),‘M’);
turnBits(converter(hr),‘H’);
}
我们将会看到它能显现以后的工夫。
第二十二步:一些款式

这就是TweenMax要用到的中央。我们将增加光使时钟加倍美妙。按上面所示修正turnBits()函数。
privatefunctionturnBits(newBits:Array,target:String):void
{
for(vara:int=0;a<newBits.length;a++)
{
if((a!=6)||(target!=”H”))
{
if(newBits[a]==0)TweenMax.to(this.getChildByName(target+String(a)),1,{glowFilter:{color:0
若相依 该用户已被删除
沙发
发表于 2015-1-17 13:15:36 | 只看该作者
假设一个Web设计者需要让一页上的不同元素之间相互作用。如果其中的一些元素出现在Box内,而另一些在Box之外,那么设计者就很不幸。
金色的骷髅 该用户已被删除
板凳
发表于 2015-1-24 12:41:13 | 只看该作者
假设一个Web设计者需要让一页上的不同元素之间相互作用。如果其中的一些元素出现在Box内,而另一些在Box之外,那么设计者就很不幸。
精灵巫婆 该用户已被删除
地板
发表于 2015-2-1 16:14:26 | 只看该作者
矢量图形相对于位图的另一个优势是可以随意缩放的能力。这是对动画进程的奖赏,对用户来说也是一个很酷的特征。在Flash之前,Web上没有这种功能。
变相怪杰 该用户已被删除
5#
发表于 2015-2-21 23:21:23 | 只看该作者
动画广告相对于传统广告而言,它的优势在于不受时间、地点等条件限制,可以通过动画的形式将那些复杂又抽象的广告内容更加简单化、生动形象化。
乐观 该用户已被删除
6#
发表于 2015-3-7 00:50:47 | 只看该作者
FLASH动画的视觉观赏效果好,容易给民众留下深刻的印象,是动画行业从业者和动画创意设计制作机构的主要业务之一。
蒙在股里 该用户已被删除
7#
发表于 2015-3-14 05:23:22 | 只看该作者
目前动画广告在各类电视节目中有着广泛的应用,在影视及广告中占有重要地位。广州形动数码是国内领先的动画设计制作,
兰色精灵 该用户已被删除
8#
发表于 2015-3-21 02:16:52 | 只看该作者
在Web上只好把动画做得很小。即使最简单的动画也需要较长的下载时间。Flash的流技术和矢量图形对这种情况做了改变。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 23:58

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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