动态网站制作指南



当前位置 > 网站建设学院 > 图形图象 > Flash教程 Rss

Flash CS4:制作水晶泡泡


发表日期:2009-11-1


  本例主要在前面所学编程知识的基础上进一步掌握元件类扩展类的编写,通过编写get 和 set 存取器函数,为创建的元件类提供易于使用的编程接口,使得元件类的属性在可以被访问的基础上进行良好的隐藏和封装。本例还配合使用三角函数知识创建丰富特效,通过本例的制作,读者可以掌握如何为元件类提供易于使用的编程接口,以及加深对三角函数知识的理解应用。

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

实例步骤:
(1)新建一个空白文档,舞台大小设置为400*300,帧频设置为30,将舞台背景颜色设置为 #618D0E ,绘制一个直径为舞台高度大小的正圆,并填充放射状渐变色,调整高光位置在下方,如下图10-1所示。
其填充放射状渐变色值为:#A7E600 - #078914 - #00552F 。调整色柄值,参数依次为:
       色柄一:红: 167,绿:230,蓝: 0  Alpha: 100%
       色柄二:红: 7,绿:137,蓝: 20  Alpha: 100%
       色柄三:红: 0,绿:85,蓝: 47  Alpha: 100%


图10-1  绘制背景

(2)创建一个新图层,命名为“高光”。绘制一个半径与步骤(1)中的圆形略小的同心圆形,并填充线性渐变色,使用“渐变变形工具”进行调整高光位置由上至下分布,如图10-2 所示。
其填充线性渐变色值为:#FFFFFF - #FFFFFF 。调整色柄值,参数依次为:
       色柄一:红: 255,绿:255,蓝: 255  Alpha: 0%
       色柄二:红: 255,绿:255,蓝: 255  Alpha: 100%

图10- 2 高光部分

(3)再创建一个新图层,命名为“顶部高光” 。使用“椭圆工具”在顶部绘制一个椭圆,填充线性渐变色,高光位置同上一样分布,如图10- 3所示。
其填充线性渐变色值为:#FFFFFF - #FFFFFF 。调整色柄值,参数依次为:
       色柄一:红: 255,绿:255,蓝: 255  Alpha: 0%
       色柄二:红: 255,绿:255,蓝: 255  Alpha: 68%


图10-3  顶部高光

(4)新建一个影片剪辑,命名为“Ball_mc” 。绘制类似小水泡的图形,这里我们绘制一个放射状渐变的圆形,大小约在20左右,如图10-4所示。
其填充放射状渐变色值为:#FFFFFF - #FFFFFF - #FFFFFF 。调整色柄值,参数依次为:
       色柄一:红: 255,绿:255,蓝: 255  Alpha: 36%
       色柄二:红: 255,绿:255,蓝: 255  Alpha: 9%
       色柄二:红: 255,绿:255,蓝: 255  Alpha: 0%


图10-4绘制类似水泡图形

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

图10-5  添加元件类

(6)下面是元件类扩展类。该类有三个私有属性,如第11到13行代码所示,我们在第22、第25行代码分别定义其属性对应的get()方法,为该元件类实例提供可访问对应属性的接口,第三个属性还提供set()方法,如第29行代码所示。在该类构造函数中还初始化了三个属性,分别产生随机的newX、newY值,如第17到19行代码所示。AS3代码: 
/**  

* 该类为扩展元件类  

* @author lbynet  

* @version 0.1  

*/  

package {  

import Flash.display.SPRite;  



public class Ball_mc extends Sprite {  



private var newX:Number;  

private var newY:Number;  

private var W:Number;  



public function Ball_mc() {  



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

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

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

}  



public function get _newX():Number{  

return this.newX;  

}  

public function get _newY():Number{  

return this.newY;  

}  



public function set _W(i:Number){  

this.W = i;  

}  

public function get _W():Number{  

return this.W;  

}  



}  

}
 (7) 下面的Main类是本实例的文档类,该类定义了三个属性,分别是存储水泡总数、数量累加变量和随机宽、高比例值, 第12到14行代码所示。在构造函数中调用init()方法进行初始化两个属性值,并注册ENTER_FRAME 事件侦听器,如第20到22行代码所示。
  1. /** 

    * 该类为主程序类 

    * @author lbynet 

    * @version 0.1 

    */ 

    package { 

    import flash.display.Sprite; 

    import flash.events.Event; 



    public class Main extends Sprite { 



    private var totalNum:uint; 

    private var i:uint; 

    private var dim:Number; 



    public function Main() { 

    init(); 



    private function init() { 

    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代码

private function enterFrameHandler(event:Event) {  



var _mc:Sprite;  



if (this.i <= totalNum) {  

_mc = new Ball_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++;  

}  



}  



private function removeEnterFrameHandler(event:Event) {  

var _mc:* = event.target as Sprite;  

_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行代码所示,最终产生盘旋上升效果,如本例效果图所示。下图所示是本例所使用的三角函数简单原理图。


图10-6 三角函数原理

(10) 当Ball_mc实例运动致舞台上方外,便清除该实例注册的ENTER_FRAME 事件侦听器和该该实例,并进行i值的递减,如步骤(7)第50到55行代码所示。我们还可以扩展思路,创作更多效果,如下图所示的小球从向而上运动,作类似喷泉效果。还可以做各种类似冒泡效果。


图10-7 扩展实例

>>出自《Flash CS4动画设计与制作208例》(转载请保留出处)

关注此文的读者还看过:
·2012-2-8 14:31:54 Flash AS入门教程第四课:AS常用语句第三节-循环语句
·2012-2-8 14:21:09 用Flash制作Flv播放器攻略
·2012-2-8 14:17:51 [视频教程]Flash 8 AS轻松入门 3
·2012-2-8 14:13:24 Flash电子书鼠标拖拽翻页效果原理分析
·2012-2-8 14:13:00 [视频教程]Flash 8 AS轻松入门 31
·2012-2-8 14:11:03 [视频教程]Flash 8 AS轻松入门 36
·2012-2-8 14:06:36 Flash cs4教程:CS4新特性之全新的动画理念Ⅳ
·2012-2-8 14:05:06 详细讲解Flash制作动画基础知识:遮罩
·2012-2-8 13:54:11 Flash新手入门教程:AS入门第二课_面向对象编程基础
站长推荐 PS笔刷下载 在线翻译 系统进程 广告代码
  发表评论
姓 名: 验证码:
内 容:
教程搜索服务
项目外包信息
·找长期合作的网页设计师(切图+
·SNS 网站开发
·云南大蓄文化传播有限公司网站设
·药品代购网站
·FLASH网站汉化
·求高手帮我设计一个减肥产品网站
·flash首页制作(已有设计图)
·寻求长期外包人员
·网页页面修改
·北京地区 flash动画合作
·佛山网站建设+263企业邮箱找我。
·ecshop+Discuz! X2+ Home会员整
·寻找网站建设团队或者个人合伙
·LOGO设计外包
·企业网后台程序外包
发布信息 浏览信息
邮件订阅服务
输入你的邮件地址,你将不会错过任何关于<Flash教程>的内容


图形图象文章分类
Photoshop教程
Fireworks教程
Coreldraw教程
Flash教程
3Dmax教程
Maya教程
Director教程
Authorware教程
AutoCAD教程
Illustrator教程
Ulead教程
相关软件
Silverlight
站长工具:Google PR查询|Alexa排名查询|网站速度测试|CSS在线编辑器|OPEN参数生成器|弹出式窗口代码产生器|密码登录生成器|在线按钮生成器|Meta标签生成器|邮箱图标在线生成|多色彩特效字代码生成器|网页代码调试器|在线FTP登陆|Flash取色器|配色代码对照表|配色辞典|CSS生成器|CSS在线压缩|广告代码|框架网页代码生成器|js/vbs加密|md5加密|进制转换|UTF-8 转换工具|在线调色板|Html转换js|Html转换asp|Html转换php|Html转换perl
实用工具:汉字翻译拼音|拼音字典|在线翻译|天气预报|火星文|在线网速测试|符号对照表|个税计算|理财工具|黄金价格|购房银行按揭利率计算|汇率查询|经典小工具|汉字简繁转换|普通单位换算|公制单位换算|生辰老黄历|国内电话区号|国家代码与域名缩写|文字加密解密|元素周期表|健康查询|世界时间|全国各地车牌查询|全国车辆交通违章查询|万年历|二十四节气|汉字横竖排版|手机号码查询|计算器|ip搜索
广告刊登 | 版权声明 | 联系我们 | 加入收藏 | RSS订阅
Copyright © 2000-2012 www.knowsky.com All rights reserved | 沪ICP备05001343号