仓酷云

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

[学习教程] 带来一篇Flash实例教程:悦目的气泡动画殊效-Flash实例教程

[复制链接]
小女巫 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 20:43:34 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
Flash又被称之为闪客,是由macromedia公司推出的交互式矢量图和Web动画的标准,由Adobe公司收购。
poluoluo中心提醒:本例还共同利用三角函数常识创立丰厚殊效,经由过程本例的制造,读者能够把握怎样为元件类供应易于利用的编程接口,和加深对三角函数常识的了解使用。
本例次要在后面所学编程常识的基本长进一步把握元件类扩大类的编写,经由过程编写get和set存取器函数,为创立的元件类供应易于利用的编程接口,使得元件类的属性在能够被会见的基本长进行优秀的埋没和封装。本例还共同利用三角函数常识创立丰厚殊效,经由过程本例的制造,读者能够把握怎样为元件类供应易于利用的编程接口,和加深对三角函数常识的了解使用。

[media=wmv,400,300][/media]

本例思绪:
<1>创立实例背景。
<2>绘制相似水泡的图形,并转换为元件类。
<3>编写元件类扩大类。
<4>创立文档类。

实例步骤:
(1)新建一个空缺文档,舞台巨细设置为400*300,帧频设置为30,将舞台背景色彩设置为#618D0E,绘制一个直径为舞台高度巨细的正圆,并添补放射状突变色,调剂高光地位鄙人方,以下0-1所示。
其添补放射状突变色值为:#A7E600-#078914-#00552F。调剂色柄值,参数顺次为:
色柄一:红:167,绿:230,蓝:0Alpha:100%
色柄二:红:7,绿:137,蓝:20Alpha:100%
色柄三:红:0,绿:85,蓝:47Alpha:100%



0-1绘制背景

(2)创立一个新图层,定名为“高光”。绘制一个半径与步骤(1)中的圆形略小的齐心圆形,并添补线性突变色,利用“突变变形工具”举行调剂高光地位由上至下散布,如0-2所示。
其添补线性突变色值为:#FFFFFF-#FFFFFF。调剂色柄值,参数顺次为:
色柄一:红:255,绿:255,蓝:255Alpha:0%
色柄二:红:255,绿:255,蓝:255Alpha:100%



0-2高光部分

(3)再创立一个新图层,定名为“顶部高光”。利用“椭圆工具”在顶部绘制一个椭圆,添补线性突变色,高光地位同上一样散布,如0-3所示。
其添补线性突变色值为:#FFFFFF-#FFFFFF。调剂色柄值,参数顺次为:
色柄一:红:255,绿:255,蓝:255Alpha:0%
色柄二:红:255,绿:255,蓝:255Alpha:68%



0-3顶部高光


poluoluo中心提醒:本例还共同利用三角函数常识创立丰厚殊效,经由过程本例的制造,读者能够把握怎样为元件类供应易于利用的编程接口,和加深对三角函数常识的了解使用。

(4)新建一个影片剪辑,定名为“Ball_mc”。绘制相似小水泡的图形,这里我们绘制一个放射状突变的圆形,巨细约在20摆布,如0-4所示。
其添补放射状突变色值为:#FFFFFF-#FFFFFF-#FFFFFF。调剂色柄值,参数顺次为:
色柄一:红:255,绿:255,蓝:255Alpha:36%
色柄二:红:255,绿:255,蓝:255Alpha:9%
色柄二:红:255,绿:255,蓝:255Alpha:0%




0-4绘制相似水泡图形

(5)为影片剪辑“Ball_mc”增加元件类,如0-5所示。



0-5增加元件类


poluoluo中心提醒:本例还共同利用三角函数常识创立丰厚殊效,经由过程本例的制造,读者能够把握怎样为元件类供应易于利用的编程接口,和加深对三角函数常识的了解使用。

(6)上面是元件类扩大类。该类有三个公有属性,如第11到13行代码所示,我们在第22、第25行代码分离界说其属性对应的get()办法,为该元件类实例供应可会见对应属性的接口,第三个属性还供应set()办法,如第29行代码所示。在该类机关函数中还初始化了三个属性,分离发生随机的newX、newY值,如第17到19行代码所示。AS3代码:

/**

*该类为扩大元件类

*@authorlbynet

*@version0.1

*/

package{

importflash.display.Sprite;



publicclassBall_mcextendsSprite{



privatevarnewX:Number;

privatevarnewY:Number;

privatevarW:Number;



publicfunctionBall_mc(){



this.newX=1+Math.random()*100;//x轴上的随机速率

this.newY=1+Math.random()*20;//y轴上的随机速率

this.W=0;//用于改动x轴上的随机速率值

}



publicfunctionget_newX():Number{

returnthis.newX;

}

publicfunctionget_newY():Number{

returnthis.newY;

}



publicfunctionset_W(i:Number){

this.W=i;

}

publicfunctionget_W():Number{

returnthis.W;

}



}

}(7)上面的Main类是本实例的文档类,该类界说了三个属性,分离是存储水泡总数、数目累加变量和随机宽、高比例值,第12到14行代码所示。在机关函数中挪用init()办法举行初始化两个属性值,并注册ENTER_FRAME事务侦听器,如第20到22行代码所示。

  • /**

    *该类为主程序类

    *@authorlbynet

    *@version0.1

    */

    package{

    importflash.display.Sprite;

    importflash.events.Event;



    publicclassMainextendsSprite{



    privatevartotalNum:uint;

    privatevari:uint;

    privatevardim:Number;



    publicfunctionMain(){

    init();

    }

    privatefunctioninit(){

    this.totalNum=70;

    this.i=0;

    stage.addEventListener(Event.ENTER_FRAME,enterFrameHandler);

    }
(8)上面是两个侦听器函数,enterFrameHandler是后面注册的侦听器对应的函数,该函数创立了totalNum+1个Ball_mc实例,并实例的y坐标值一致设置在舞台高度以外,如第29到31行代码所示。接着我们在第33行代码中随机天生一个0到1之间的随机小数,并与天生的Ball_mc实例对应的宽、高举行相乘失掉随机的宽、高值,如第33到35行代码所示。If()语句的最初将Ball_mc实例增加到显现列表并注册ENTER_FRAME事务侦听器,和举行i值的累加,如第37到39行代码所示。

AS3代码


privatefunctionenterFrameHandler(event:Event){



var_mc:Sprite;



if(this.i<=totalNum){

_mc=newBall_mc();

_mc.y=stage.stageHeight;



this.dim=Math.random();

_mc.width*=dim;

_mc.height*=dim;



addChild(_mc);

_mc.addEventListener(Event.ENTER_FRAME,removeEnterFrameHandler);

this.i++;

}



}



privatefunctionremoveEnterFrameHandler(event:Event){

var_mc:*=event.targetasSprite;

_mc._W+=.1;

_mc.x=Math.sin(_mc._W)*_mc._newX+stage.stageWidth/2;

_mc.y-=_mc._newY;



if(_mc.y<=0){

_mc.removeEventListener(Event.ENTER_FRAME,removeEnterFrameHandler);

removeChild(_mc);

this.i--;//使得i的值小于totalNum,从而从头创立water_mc



}



}



}(9)removeEnterFrameHandler是天生的每一个Ball_mc实例对应的侦听器函数,在该函数中,我们对Ball_mc实例的W属性举行累加,并设置其X、Y坐标值,如上图中第45到48行代码所示,个中X坐标值被设置为舞台两头巨细+对应Ball_mc实例的newX属性值*其W属性的正弦值,如上图中第47行代码所示,从而使对应Ball_mc实例在舞台两头的摆布往返作活动,而在Y轴偏向上付与其newY值,使其发生Y轴偏向上的递加(也就是Ball_mc实例向上活动),如上图中第48行代码所示,终极发生回旋上升效果,如本例最终效果所示。下图所示是本例所利用的三角函数复杂道理图。



0-6三角函数道理

(10)当Ball_mc实例活动致舞台上方外,便扫除该实例注册的ENTER_FRAME事务侦听器和该该实例,并举行i值的递加,如步骤(7)第50到55行代码所示。我们还能够扩大思绪,创作更多效果,以下图所示的小球从向而上活动,作相似喷泉效果。还能够做各类相似冒泡效果。




0-7扩大实例

>>出自《FlashCS4动画计划与制造208例》(转载请保存出处)

</p>
网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是FutureWave公司的FutureSplash,是世界上第一个商用的二维矢量动画软件。
若相依 该用户已被删除
沙发
发表于 2015-1-17 13:57:09 | 只看该作者
一个物体从一个角(关键祯1)移动到另一个角(关键祯2)。然后tweening在关键祯之间填充祯,从而使物体可以在屏幕上优雅地运动。
柔情似水 该用户已被删除
板凳
发表于 2015-2-4 07:01:20 | 只看该作者
不过,要说国内在FLASH动画领域做的比较出色的,公认的是广州形动数码科技。
变相怪杰 该用户已被删除
地板
发表于 2015-2-9 18:22:16 | 只看该作者
广告本身无法看到网址链接,不利于网站本身的搜索引擎优化,对增加网站排行的权重没有意义。
小女巫 该用户已被删除
5#
 楼主| 发表于 2015-2-27 18:57:02 | 只看该作者
alpha通道,图像的一部分可以变成透明,透明度可以从完全不透明到完全不可见。Alpha通道支持没有副作用。
老尸 该用户已被删除
6#
发表于 2015-3-9 14:30:51 | 只看该作者
在与制作传统动画相比较的同时,flash具有便捷、节省人力财力,节约时间、推广方便的许多优势。但与此同时它也具有一点的缺点。
海妖 该用户已被删除
7#
发表于 2015-3-17 00:40:53 | 只看该作者
只要用心 只要努力 在加上你无限的创意和想象。FLASH无敌了
再见西城 该用户已被删除
8#
发表于 2015-3-23 14:27:26 | 只看该作者
Flash使交互性容易,并且消除了学习某种语言的需要。折中办法是不学语言,同时失去一些功能。但是你仍然可以处理基于用户动作(如鼠标移动或点击)的触发事件,这通常是你需要的所有交互性。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-4-28 12:33

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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