- 浏览: 50097 次
- 性别:
- 来自: 青岛
最新评论
本例主要在前面所学编程知识的基础上进一步掌握元件类扩展类的编写,通过编写get 和 set 存取器函数,为创建的元件类提供易于使用的编程接口,使得元件类的属性在可以被访问的基础上进行良好的隐藏和封装。本例还配合使用三角函数知识创建丰富特效,通过本例的制作,读者可以掌握如何为元件类提供易于使用的编程接口,以及加深对三角函数知识的理解应用。本例思路:
创建实例背景。
绘制类似水泡的图形,并转换为元件类。
编写元件类扩展类。
创建文档类。
实例步骤:
(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行代码所示。
/**
* 该类为主程序类
* @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 (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 扩展实例
[1b]>>出自《Flash CS4动画设计与制作208例》(转载请保留出处)[/1b]
本文转自:http://www.5uflash.com/flashjiaocheng/Flashdonghuajiaocheng/5203.html
发表评论
-
FLV播放器汇总
2010-04-10 11:54 568http://www.dengjie.com/weblog/c ... -
Flash Media Server 起步(9)在线列表
2010-04-10 11:54 560学了这么多,智商跟我差不多的,概念应该都搞混了 学了就要用 ... -
Flash Media Server 起步(9)在线列表
2010-04-10 11:54 601学了这么多,智商跟我差不多的,概念应该都搞混了 学了就要用 ... -
Flash Media Server 起步(10)中文编码问题
2010-04-10 11:54 893是一个郁闷我一段时间的问题才想到了答案。。。话说曾经在公司做了 ... -
Flash Media Server 起步(10)中文编码问题
2010-04-10 11:53 525是一个郁闷我一段时间的问题才想到了答案。。。话说曾经在公司做了 ... -
彻底接触AS3视觉元件架构
2010-04-09 13:24 643DisplayObject,直译为视 ... -
彻底接触AS3视觉元件架构
2010-04-09 13:24 728DisplayObject,直译为视 ... -
不够50行代码的AS3歌词显示
2010-04-09 13:24 889引用内容 该文章为Demo用途,请见谅… 该文章来自猫粮的bl ... -
不够50行代码的AS3歌词显示
2010-04-09 13:24 921引用内容 该文章为Demo用途,请见谅… 该文章来自猫粮的bl ... -
AS3写的web 2.0 风格
2010-04-09 13:23 592在往上逛的时候发现 一篇日志 ,用 AS3 写出了 Web 2 ... -
【as3】ActionScript 3.0体验试教学视频教程
2010-04-09 10:27 563很不错的视频教程 原文地址: http://blog.sina ... -
as3 使用sound类(翻译)-暂停和继续播放声音
2010-04-09 10:27 618[1b]问题十[/1b] 如何暂停声音,如何从暂停的地 ... -
AS3.0中的位图扭曲变形
2010-04-09 10:27 1434DisplacementMapFilter 类使用指定的 Bi ... -
AS3.0中的位图扭曲变形
2010-04-09 10:27 1299DisplacementMapFilter 类使用指定的 Bi ... -
[JS]FlashUpload上传模块
2010-04-09 10:26 1166[AS3][JS]FlashUpload上传模块 P.S.F ... -
flash打造碧海浪涌海鸥飞美丽动画
2010-04-08 10:47 643文中我们用flash绘制一幅好看的动画场景:碧海、蓝天、白云、 ... -
flash制作飘落的红叶视觉动画
2010-04-08 10:47 629接着"蝶恋花"的练习, 我们举一反三再来学 ... -
flash制作飘落的红叶视觉动画
2010-04-08 10:47 595接着"蝶恋花"的练习, 我们举一反三再来学 ... -
漫画绘制技法大放送(上)
2010-04-08 10:46 573网络收集整理(jundark) [1b]一、人体基本结构[/1 ... -
flash动画形变讨论二:低头
2010-04-08 10:46 504上次说了基本的形变,现在说下提示点,提示点是控制图形变化的基本 ...
相关推荐
FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作源码FLASH动画制作...
flash动画制作,flash动画制作,flash动画制作,flash动画制作
有兴趣可以下来看看,是我自己画的,比较有意思哦~这个事源代码
用于制作文字flash的制作软件,可以制作出常用的有关文字设计的flash动画。
一个FLASH的小动慢制作画,周杰伦歌FLASH的制作过程
FLash动画制作软件FLash动画制作软件FLash动画制作软件FLash动画制作软件
FLASH动画制作软件 傻瓜使用 轻松学会制作FLASH动画 FLASH动画制作软件 傻瓜使用 轻松学会制作FLASH动画
《FLASH补间动画制作——龟兔赛跑》教学设计.pdf
flash动画制作实训1-5已按题目要求做好,下载后解压,里面是5个压缩包,对应实训1-5,fla文件与swf文件在压缩包里。内容包括: 实训1:颜色和渐变应用 实训2:文字的使用 实训3:元件和库应用 实训4:引导层和遮罩层...
用flash制作的文件很小,这样便于在互联网上传输,而且它采用了流技术,只要下载一部分,就能欣赏动画,而且能一边播放一边传输送数据。 交互性更是flash动画的迷人之处,可以通过点击按钮、选择菜单来控制动画的...
Flash CS5制作网站动画
《Flash动画制作——遮罩动画》教学设计.pdf
Flash动画制作经典实例 flash制作 源码 万花筒 雪花纷飞 电光 遮罩效果 模糊效果 曝光效果 百叶窗效果
Flash CS5动画制作技术.pdf
Flash8.0平面图形与动画制作的动画案例,原创版
Flash的引导层动画_制作课件.ppt
国开电大《Flash动画制作》形考课程考核成品答案实训4:引导层和遮罩层的应用
用FLASH制作简单动画 计算机图形学课程设计
flash动画制作业 用于flash选修课作业成品下载【源代码+成品】 满足一般选修课作业要求,用到课堂上老师讲到内容。绝对满足老师选修课作业。
( flash动画制作教程