FLASH文字颜色缓动特效(集锦7篇)由网友“小白爱打喵喵拳”投稿提供,这次小编给大家整理过的FLASH文字颜色缓动特效,供大家阅读参考。
篇1:FLASH文字颜色缓动特效
代码详解:
[SWF(backgroundColor=0x000000,width=550,height=400)]//设置场景背景色、大小
var r:uint=0,g:uint=0,b:uint=0;//声明无符号整数型变量r、g、b,初始值都是0
var color:uint,targetR:uint,targetG:uint,targetB:uint;//声明无符号整数型变量color、targetR、targetG、targetB
var filtersCo:uint,filtersR:uint,filtersG:uint,filtersB:uint;//声明无符号整数型变量filtersCo、filtersR、filtersG、filtersB
var glowF:GlowFilter;//声明一个发光滤镜类实例glowF
var matrix:Matrix=new Matrix;//声明一个矩阵类实例matrix
matrix.createGradientBox(550,200,0,0,0);//设置矢量图渐变填充所需矩阵样式(宽550,高200,旋转0,X方向平移0,Y方向平移0)
var sh:Shape=new Shape();//声明一个矢量图类实例sh
sh.graphics.beginGradientFill(GradientType.LINEAR,[0xff0000,0xffff00,0x00ff00,0x00ffff,0x0000ff,0xff00ff,0xff0000],[1,1,1,1,1,1,1],[0,42,84,126,168,210,255],matrix);//设置渐变填充样式(线性渐变,颜色块颜色,透明度,颜色块位置,矩阵)
sh.graphics.drawRect(0,0,550,200);//在sh中画矩形(左上角坐标(0,0),宽550,高200)
sh.graphics.endFill();//结束填充
var bmd:BitmapData=new BitmapData(550,200);//声明一个位图数据类实例bmd(宽550,高200)
var bim:Bitmap=new Bitmap(bmd);//声明一个位图包装类实例bim,用于包装bmd
bmd.draw(sh);//位图bmd为矢量图sh拍照
addChild(bim);//把位图bim添加显示列表
var txt:TextField=new TextField();//声明一个文本类实例txt
addChild(txt);//把文本txt添加显示列表
txt.defaultTextFormat=new TextFormat(“华文琥珀”,60);//设置文本格式(字体,字号)注意这样设置要放在内容前面才起作用
txt.text=“多特软件站欢迎您!”;//文本内容
txt.autoSize=TextFieldAutoSize.CENTER;//文本txt自动调整大小并居中对齐
txt.x=stage.stageWidth/2-txt.width/2;//文本的X坐标,把文本放在舞台中间
txt.y=stage.stageHeight*3/4-txt.height/2;//文本的Y坐标,把文本放在纵向3/4处
addEventListener(Event.ENTER_FRAME,frame);//添加帧频事件侦听,调用函数frame
function frame(e) {//定义帧频事件函数frame
color=bmd.getPixel(mouseX,mouseY);//color获取位图鼠标处像素点的颜色
targetR=color>>16;//targetR获取color中红色通道数值
targetG=color>>8&0xff;//targetG获取color中绿色通道数值
targetB=color&0xff;//targetB获取color中蓝色通道数值
r+=uint((targetR-r)*0.03);//r每帧增加targetR与r差的0.03倍
g+=uint((targetG-g)*0.03);//g每帧增加targetG与g差的0.03倍
b+=uint((targetB-b)*0.03);//b每帧增加targetB与b差的0.03倍
txt.textColor=r<<16|g<<8|b;//把r、g、b合成颜色付值给文字txt
filtersR=0xff-r;//filtersR获取0xff与r的差
filtersG=0xff-g;//filtersG获取0xff与g的差
filtersB=0xff-b;//filtersB获取0xff与b的差
filtersCo=filtersR<<16|filtersG<<8|filtersB;//把filtersR、filtersG、filtersB合成颜色付值给filtersCo
glowF=new GlowFilter(filtersCo,1,8,8);//发光滤镜glowF实例化(颜色,透明度,X方向模糊值,Y方向模糊值)
txt.filters=[glowF];//文字应用发光滤镜
}
//============说明
var txt1:TextField=new TextField();//声明一个文本类实例txt
addChildAt(txt1,numChildren-1);//把txt添加到显示列表的最底层
txt1.defaultTextFormat=new TextFormat(“华文隶书”,20,0x00cc33);//为txt设置文本格式(隶书,30号,深绿色)
txt1.text=“全脚本文字颜色缓动效果 鼠标滑动七彩图改变文字颜色”;//文本txt内容
txt1.x=20;//文本txt的X坐标获取20
txt1.y=360;//文本txt的Y坐标获取360
txt1.width=550;//文本txt的宽度获取220
txt1.filters=[new DropShadowFilter(2,45,0x0)];//为文本添加投影滤镜(距离5,方向45度,颜色黑色)
篇2:Flash教程:文字颜色缓动特效
先来看下效果:
代码详解:
[SWF(backgroundColor=0x000000,width=550,height=400)]//设置场景背景色、大小
var r:uint=0,g:uint=0,b:uint=0;//声明无符号整数型变量r、g、b,初始值都是0
var color:uint,targetR:uint,targetG:uint,targetB:uint;//声明无符号整数型变量color、targetR、targetG、targetB
var filtersCo:uint,filtersR:uint,filtersG:uint,filtersB:uint;//声明无符号整数型变量filtersCo、filtersR、filtersG、filtersB
var glowF:GlowFilter;//声明一个发光滤镜类实例glowF
var matrix:Matrix=new Matrix();//声明一个矩阵类实例matrix
matrix.createGradientBox(550,200,0,0,0);//设置矢量图渐变填充所需矩阵样式(宽550,高200,旋转0,X方向平移0,Y方向平移0)
var sh:Shape=new Shape();//声明一个矢量图类实例sh
sh.graphics.beginGradientFill(GradientType.LINEAR, [0xff0000,0xffff00,0x00ff00,0x00ffff,0x0000ff,0xff00ff,0xff0000], [1,1,1,1,1,1,1],[0,42,84,126,168,210,255],matrix);//设置渐变填充样式(线性渐变,颜色块颜色,透明度,颜色块位置,矩阵)
sh.graphics.drawRect(0,0,550,200);//在sh中画矩形(左上角坐标(0,0),宽550,高200)
sh.graphics.endFill();//结束填充
var bmd:BitmapData=new BitmapData(550,200);//声明一个位图数据类实例bmd(宽550,高200)
var bim:Bitmap=new Bitmap(bmd);//声明一个位图包装类实例bim,用于包装bmd
bmd.draw(sh);//位图bmd为矢量图sh拍照
addChild(bim);//把位图bim添加显示列表
var txt:TextField=new TextField();//声明一个文本类实例txt
addChild(txt);//把文本txt添加显示列表
txt.defaultTextFormat=new TextFormat(“华文琥珀”,60);//设置文本格式(字体,字号)注意这样设置要放在内容前面才起作用
txt.autoSize=TextFieldAutoSize.CENTER;//文本txt自动调整大小并居中对齐
txt.x=stage.stageWidth/2-txt.width/2;//文本的X坐标,把文本放在舞台中间
txt.y=stage.stageHeight*3/4-txt.height/2;//文本的Y坐标,把文本放在纵向3/4处
addEventListener(Event.ENTER_FRAME,frame);//添加帧频事件侦听,调用函数frame
function frame(e) {//定义帧频事件函数frame
color=bmd.getPixel(mouseX,mouseY);//color获取位图鼠标处像素点的颜色
targetR=color>>16;//targetR获取color中红色通道数值
targetG=color>>8&0xff;//targetG获取color中绿色通道数值
targetB=color&0xff;//targetB获取color中蓝色通道数值
r+=uint((targetR-r)*0.03);//r每帧增加targetR与r差的0.03倍
g+=uint((targetG-g)*0.03);//g每帧增加targetG与g差的0.03倍
b+=uint((targetB-b)*0.03);//b每帧增加targetB与b差的0.03倍
txt.textColor=r<<16|g<<8|b;//把r、g、b合成颜色付值给文字txt
filtersR=0xff-r;//filtersR获取0xff与r的差
filtersG=0xff-g;//filtersG获取0xff与g的差
filtersB=0xff-b;//filtersB获取0xff与b的差
filtersCo=filtersR<<16|filtersG<<8|filtersB;//把filtersR、filtersG、filtersB合成颜色付值给filtersCo
glowF=new GlowFilter(filtersCo,1,8,8);//发光滤镜glowF实例化(颜色,透明度,X方向模糊值,Y方向模糊值)
txt.filters=[glowF];//文字应用发光滤镜
}
//============说明
var txt1:TextField=new TextField();//声明一个文本类实例txt
addChildAt(txt1,numChildren-1);//把txt添加到显示列表的最底层
txt1.defaultTextFormat=new TextFormat(“华文隶书”,20,0x00cc33);//为txt设置文本格式(隶书,30号,深绿色)
txt1.text=“全脚本文字颜色缓动效果 鼠标滑动七彩图改变文字颜色”;//文本txt内容
txt1.x=20;//文本txt的X坐标获取20
txt1.y=360;//文本txt的Y坐标获取360
txt1.width=550;//文本txt的宽度获取220
txt1.filters=[new DropShadowFilter(2,45,0x0)];//为文本添加投影滤镜(距离5,方向45度,颜色黑色)
篇3:《flash中特效文字的实现》教学设计
设计思想:
从发展性教学的理念出发,采用以学生为主体,教师为主导的教学模式,以建构主义现代教学思想和任务驱动式教学方法为指导开展教学活动。针对学生信息素养参差不齐的现状,以活动训练为主,让学生在实践操练中掌握特效文字的制作方法。
一、教材分析:
本节课以几种特效文字制作为例,使学生充分利用Flash 8提供的文本、绘图、上色、选择和填充颜色等工具,具体应用到不同的操作中,建立一种具有创意和美工的设计思想,促进学生在兴趣学习的过程中建构理论知识、提高操作技能。
二、学生分析:
通过以前学习的画图程序 ,学生认识并接触使用过文本工具,输入文字不成问题,但对于农村中学的学生来说,独立完成学习任务还有一定难度。所以这节课我们以一种典型的特效文字为例,向学生展示Flash 制作特效文字的一般方法及技巧,使他们进一步熟悉Flash 工具的使用方法,然后再要求学生自主、合作完成学习任务!
三、教学目标:
1、知识与技能:
(1)、进一步熟练文本的输入、编辑与属性设置,熟练多种工具的恰当运用;
(2)、掌握文本图形化的方法、掌握修改图形,填充、修改图形颜色的方法;
(3)、促进学生灵活运用Flash 8工具制作实例能力的提高。
2、过程与方法:
通过实践操作,掌握文本图形化后能制作出特效文字的方法。
3、情感态度与价值观:
(1)、通过设置任务与生活相联系,促进学以致用;
(2)、培养学生发现美、欣赏美、表达美的综合能力。
四、教学重难点:
教学重点:
(1)、掌握文字图形化后处理的方法和技巧;
(2)、能灵活操作Flash 8提供的各种工具制作不同效果的文字。
教学难点:通过学习,能运用实例的操作,拓展思维空间。
五、教学过程:
(一)展示作品 激趣引入
[教师活动]播放展示Flash作品中几种不同的特效文字,同时说明“文字是Flash中不可缺少的原素之一,许多优秀的Flash作品都是精彩的动画配有丰富生动的文字来实现的。同学们也想制作出这样的文字效果吧!今天就让我们一起来探索Flash特效文字的奥秘吧!”
[设计意图]通过观看生动的Flash特效文字来激发学生探究新知的兴趣。
(二)明确目标 引入新课
[教师活动]展示教材中第一实例中特效文字的最终效果。“这种绚丽多彩的文字大家喜欢吗?”“这种文字效果是怎样制作的呢?”
[设计意图]由此引导学生认真观察教师制作渐变文字的.步骤及方法。
(三)教师引领 任务驱动
[教师活动]演示制作渐变文字,并在制作的过程中,插入讲授文本框知识,使学生在今后的文本输入的过程中能自己处理出现的问题。在颜色选项中填充七彩渐变色,完成渐变文字的制作后,提出设问,有的同学想用其它不同的颜色来填充字体,该如何实现呢?有些观察能力比较强的同学会发现在窗口右侧有颜色选项,我才及时给以肯定和表扬。并讲解演示混色器的显示、隐藏、类型及添加和删除等方法。让学生学会如何根据自己喜欢的配色方案来填充自己制作的作品。以此来提高学生学习Flash的兴趣,并能达到学习目标。
[学生活动]口述教师制作渐变文字的基本步骤,学生口述的同时出示制作渐变文字的步骤。并注意强调,将文字转换成图位的方法。
[设计意图]通过教师的演示和学生口述制作步骤,这样有利于学生掌握在工具的使用和制作的方法,使学生能独立完成制作渐变文字的任务。
[学生活动]学生参照老师的演示和书中实例操作完成任务一:制作七彩虹渐变文字“海上升明月,天涯共此时。”
[教师活动]巡视指导学生顺利完成制作任务。信息技术注重培养学生动手操作的能力和自主探究能力,所以在完成第一个任务后。强调制作时容易出现的问题。并让学生自主合作完成第二个任务:制作变形文字“自由飞翔”。要求学生根据字意制作出比较有创意的作品来。
[学生活动] 学生自主合作完成第二个任务:制作变形文字“自由飞翔”。
[设计意图]这个一环节的设计既培养了学生的动手操作的能力和自主探究的能力,同时也培养学生发现美、欣赏美、表达美的综合能力。
(四)欣赏作品 自评互评
[教学活动]教师把在巡视过程中发现有较好的作品,利用学生演示功能,进行展示。
[学生活动]首先让这名学生说说自己值得称道的地方和自己需要改进的地方,然后让其他学生说说他优点或提出建议。
[设计意图]通过自评互评,有利于学生形成正确的评价观,并能提高学生组织语言的能力和综合评价的能力。
(五)自主探究 巩固提高
[教师活动]“同学们已经顺利完成了以上两项学习任务,表现都非常好。老师想给你们出点难题,看一看聪明的你们还能不能完成。”此时出示巩固提高题目:制作特效文字“海内存知己,天涯若比邻。”并加补间动画或逐帧动画。在学生动手制作前出示教师制作的作品,并提出问题,并提示学生利用已学知识,自主、合作、交流完成动画作品。
[学生活动] 合作、交流完成巩固提高题:制作特效文字“海内存知己,天涯若比邻。”并加补间动画或逐帧动画。
[设计意图]鼓励加刺激的语言能让学生对接下来的内容充满好奇心和必须完成任务的决心。播放教师自制的作品能启发学生的制作灵感。巩固提高题的设计能让学生对已学知识加以巩固,又可以提高学生操作能力和综合实践能力。
(六)体验总结 情感教育
[教师活动]最后请同学们谈一谈在本课中你都收获了哪些知识和学会了什么?
[设计意图]通过学生谈收获的过程,培养学生概括总结重点内容的能力并同时强化学生记忆本课重点知识。
[教师活动]结束语利用学生制作“海内存知己,天涯若比邻。”的作品为引,希望同学们能制作出更多更好的Flash作品,发布到网络上,结识一些对制作Flash感兴趣的朋友。正像这句话所说“海内存知己,天涯若比邻。”以学会友,以才服人,在茫茫人海中找到自己学习的知己,做一生一世的朋友。
[设计意图]利用作品内容,延伸到情感教育,并能再次激发学生学习Flash的兴趣。
六、教学反思
以上教学策略我运用的是“任务驱动教学”。其指导思想是:一切从学生主体出发,让学生成为知识技能的“探究者”、难点问题的“突破者”,使学生真正的成为学习的主人。但是,这堂课还存在不足的地方——没有照顾到学生的个体差异性,这也是信息技术学科普遍需要面对的一个难题。学生完成任务的时间长短不一,他们的这种差异是由主客观原因造成的,光靠教师一人的力量,难以面面俱到。在课堂中,对于很快完成任务的孩子,教师应该及时给他们安排一些新任务,如对作品进行完善,也可以让他们依着自己的兴趣或疑惑,继续进行与任务相关的深入的探究,当然还可以请他们作为教师的助手,去帮助学有困难的同学。这样,慢的孩子也能得到更多的帮助。在今后的备课环节,我将多多注意分层次教学有关的研究探索。
篇4:Flash基础理论课 第八章 缓动与弹性运动Ⅰ
返回“Flash基础理论课 - 目录”
很难相信我们居然用了七章才把基础的内容介绍完,现在进入第八章,这里是高级内容的起点,从这里开始内容也开始变得越来越有趣了,前面的章节都是些常用的概念与技术。从今天开始,每章只着重介绍一两种特殊的运动。
本章将介绍缓动运动(成比例速度)与弹性运动(成比例加速度),不用担心它们只是两个名词术语,这章可以快速地略读。我会给出很多例子程序,可以使大家充分了解这项技术的强大。
成比例运动
缓动(ease)与弹性(spring)联系紧密。这两种方法都是将对象(通常指 Sprite或MovieClip)从某一点移动到目标点。使用缓动运动(Easing),如同让影片滑动到目标并停止。使用弹性运动(Springing),会产生向前或向后的反弹,最终停止在目标点位。两种方法具有一些共同点:
■需要一个目标点;
■确定到目标点的距离;
■成比例地将影片移动到目标点——距离越远,移动速度越快。
缓动运动(easing)与弹性运动(springing)的不同之处在于移动的比例。缓动运动时,速度与距离成正比,离目标越远,物体运动速度越快。当物体与目标点非常非常接近时,就几乎不动了。
弹性运动时,加速度与距离成正比。如果物体与目标离得很远,再用上加速度,会使移动速度非常快。当物体接近目标时,加速度会减小,但依然存在!物体会飞过目标点,随后再由反向加速度将它拉回来。最终,用摩擦力使其静止。
下面,我们分别看一下这两种方法,先从缓动(easing)开始。
缓动(Easing)
首先说明缓动的种类不只有一种。在 Flash IDE 中,制作补间动画时,我们就可以看到 “缓动输入”(ease in)和“缓动输出”(ease out)。下面所讨论的缓动类型与运动补间的“缓动输出”相似。在本章后面的“高级缓动”一节,将会给大家一个网站连接,在那里可以学习制作所有缓动的效果。
简单缓动
简单缓动是个非常基础概念,就是将一个物体移到别处去。创建这个“运动效果”时,希望物体能在几帧内慢慢移动到某一点。我们可以求出两点之间的夹角,然后设置速度,再使用三角学计算出 vx和vy,然后让物体运动。每一帧都判断一下物体与目标点的距离,如果到达了目标则停止。这种运动还需要一定条件的约束才能实现,但如果要让物体运动得很自然,显然这种方法是行不通的。
问题在于物体沿着固定的速度和方向运动,到达目标点后,立即停止。这种方法,用于表现物体撞墙的情景,也许比较合适。但是物体移动到目标点的过程,就像是某个人明确地知道他的目的地,然后向着目标有计划地前进,起初运动的速度很快,而临近目标点时,速度就开始慢下来了。换句话讲,它的速度向量与目标点的距离是成比例的。
先来举个例子。比如说我们开车回家,当离家还有几千米的距离时,要全速前进,当离开马路开进小区时速度就要稍微慢一点儿。当还差两座楼时就要更慢一点儿。在进入车库时,速度也许只有几迈。当进入停车位时速度还要更慢些,在还有几英尺的时候,速度几乎为零。
如果大家注意观察就会发现,这种行为就像关门、推抽屉一样。开始的速度很快,然后逐渐慢下来。
在我们使用缓动使物体归位时,运动显得很自然。简单的缓动运动实现起来也非常简单,比求出夹角,计算 vx,vy 还要简单。下面是缓动的实现策略:
1. 确定一个数字作为运动比例系数,这是个小于 1的分数;
2. 确定目标点;
3. 计算物体与目标点的距离;
4. 用距离乘以比例系数,得出速度向量;
5.将速度向量加到当前物体坐标上;
6. 重复 3到5 步。图 8-1 解释了这一过程。
图8-1 简单缓动
我们先来解释一下这个过程,看看在 ActionScript. 中是怎样实现的。
首先,确定一个分数作为比例系数。我们说过,速度与距离是成比例的。也就是说速度是距离的一部分。比例系数在 0和1 之间,系数越接近1,运动速度就会越快;系数越接近0,运动速度就会越慢。但是要小心,系数过小会使物体无法到达目标。开始我们以 0.2 作为系数,这个变量名就叫 easing。初始代码如下:
var easing:Number = 0.2;
接下来,确定目标。只需要一个简单的x,y 坐标,选择舞台中心坐标再合适不过了。
var targetX:Number = stage.stageWidth / 2;
var targetY:Number = stage.stageHeight / 2;
下面,确定物体到达目标的距离。假设已经有一个名为 ball 影片,只需要从ball的x,y 坐标中减去目标的x,y。
var dx:Number = targetX - ball.x;
var dy:Number = targetY - ball.y;
速度等于距离乘以比例系数:
vx = dx * easing;
vy = dy * easing;
下面,大家知道该怎么做了吧:
ball.x += vx;
ball.y += vy;
最后重复步骤 3 到步骤 5,因此只需加入enterFrame. 处理函数。
让我们再看一下这三个步骤,以便将它们最大程度地简化:
var dx:Number = targetX - ball.x;
var dy:Number = targetY - ball.y;
vx = dx * easing;
vy = dy * easing;
ball.x += vx;
ball.y += vy;
把前面四句简化为两句:
vx = (targetX - ball.x) * easing;
vy = (targetY - ball.y) * easing;
ball.x += vx;
ball.y += vy;
如果大家觉得还不够精简,还可以进一步缩短:
ball.x += (targetX - ball.x) * easing;
ball.y += (targetY - ball.y) * easing;
在开始学习使用缓动时,也许大家会比较喜欢用详细的句型,让程序看上去更加清晰。但是当你使过几百次后,就会更习惯用第三种写法。下面,我们选用第二种句型,以加强对速度的理解。
现在就来看一下脚本动作,依然延用Ball 类。以下是文档类 Easing1.as:
package {
import flash.display.Sprite;
import flash.events.Event;
public class Easing1 extends Sprite {
private var ball:Ball;
private var easing:Number=0.2;
private var targetX:Number=stage.stageWidth / 2;
private var targetY:Number=stage.stageHeight / 2;
public function Easing1 {
trace(targetX,targetY);
init();
}
private function init():void {
ball=new Ball ;
addChild(ball);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var vx:Number=(targetX - ball.x) * easing;
var vy:Number=(targetY - ball.y) * easing;
ball.x+= vx;
ball.y+= vy;
}
}
}
试改变easing的值,观察运动效果。
下面,大家可以让小球变成可以拖拽的,与第七章所做的拖拽与抛落效果很像。在点击小球时开始拖拽,同时,删除 enterFrame. 处理函数并且用stage 侦听 mouseUp。在 mouseUp 函数中,停止拖拽,删除 mouseUp 方法,并重新开始 enterFrame。下面是文档类 Easin2.as :
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Easing2 extends Sprite {
private var ball:Ball;
private var easing:Number=0.2;
private var targetX:Number=stage.stageWidth / 2;
private var targetY:Number=stage.stageHeight / 2;
public function Easing2() {
init();
}
private function init():void {
ball=new Ball ;
addChild(ball);
ball.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onMouseDown(event:MouseEvent):void {
ball.startDrag();
removeEventListener(Event.ENTER_FRAME,onEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
private function onMouseUp(event:MouseEvent):void {
ball.stopDrag();
addEventListener(Event.ENTER_FRAME,onEnterFrame);
stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
private function onEnterFrame(event:Event):void {
var vx:Number=(targetX - ball.x) * easing;
var vy:Number=(targetY - ball.y) * easing;
ball.x+= vx;
ball.y+= vy;
}
}
}
缓动何时停止
在物体缓动运动到目标点时,物体最终会到达目标点并且完成缓动效果,
但是,即使不显示该对象,缓动代码仍在执行中,这一来浪费了 CPU 资源。当物体到达目标时,应该停止执行代码。判断物体是否到达目标的方法非常简单,就像这样:
if(ball.x == targetX && ball.y == targetY) {
// code to stop the easing
}
但是这里要注意一些技巧。
我们所讨论的缓动类型涉及到了著名的Xeno悖论。Xeno也是位希腊人,爱好测量实验。Xeno将运动分解为下面几个步骤:物体要从A 点到达 B 点,它首先要移动到两点间一半的距离。然后物体再从该点出发,到达与 B 点距离一半的距离。然后再折半。每次只移动离目标一半的距离,但永远无法准确地达到目标。
这个悖论听起来是非常符合逻辑的。但是很明显,我们确实将物体从一点移动到了另一点,这样看来他的说法有些问题。到 Flash 中看看,影片在 x 轴上的位置为 0,假设要将它移动到 x 轴为 100的位置。按照悖论所说,设缓动系数为 0.5,这样每次运动到离目标一半的距离。过程如下:
■从0 点开始,经过 1 帧,到达 50。
■第 2 帧,到达 75。
■剩下的距离是 25。它的一半是 12.5 ,所以新的距离就是 87.5。
■按照这种顺序,位置将变化为 93.75, 96.875, 98.4375 等等。20 帧以后,将到达 99.999809265。
从理论上讲位置越来越接近目标,但是永远无法准确地到达目标点。然而,在代码中进行试验时,结果就发生了一些微妙的变化。归根结底问题就在于“一次最少能移动多少个像素”,答案是 1/20。事实上,二十分之一像素有个特有的名字:twip (缇)。在 Flash 内部计算单位都采用twip 像素,包括所有 Sprite 影片,影片剪辑和其它舞台对象。因此,在显示影片位置时,这个数值永远是 0.05的倍数。
下面举个例子,一个影片要到达 100的位置,而它所到达的最接近的位置事实上是 99.5。再分隔的距离,就是加上 (100 – 99.95) /2。相当于加上了 0.025,四十分之一像素。超出了 twip 是能够移动的最小值,因此无法加上“半个 twip”,结果是只增加了 0 像素。如果大家不信的话,可以亲自试一下(提示:将代码放入框架类中的init 方法):
var sprite:Sprite;
sprite = new Sprite();
addChild(sprite);
sprite.x = 0;
var targ:Number = 100;
for(var i:Number = 0; i < 20; i++) {
trace(i + “: ” + sprite.x);
sprite.x += (targ - sprite.x) * .5;
}
循环20次,将影片移动离目标一半的距离,这是基本缓动应用。将代码放入for循环,只是为了测试其位置,并不在于观察物体运动。循环到第 11次时,影片已经到达了 99.95,这已经是它能够到达的最远的地方了。
长话短说,影片并非无限地接近目标,但是它确实永远无法准确地到达目标点。这样一来,缓动代码就永远不会停止。我们要回答的问题是 “哪里才是物体最接近的目标位置?”,这需要确定到目标点的距离是否小于某个范围。我发现在很多软件中,如果物体与目标点的距离相差在一个像素以内,就可以说它已经到达了目标点,即可停止缓动了。
在处理二维坐标时,可以使用第三章所介绍的公式来计算点间距离:
distance = Math.sqrt(dx * dx + dy * dy)
如果只处理一维坐标点,如只移动一个轴的位置,就需要使用距离的绝对值,因为它有可能是个负数,使用Math.abs 方法。
OK,说得很多了,来写代码吧。这个简单的文档类,演示了如何关闭缓动运动(EasingOff.as):
package {
import flash.display.Sprite;
import flash.events.Event;
public class EasingOff extends Sprite {
private var ball:Ball;
private var easing:Number = 0.2;
private var targetX:Number = stage.stageWidth / 2;
public function EasingOff() {
init();
}
private function init():void {
ball = new Ball();
addChild(ball);
ball.y = stage.stageHeight / 2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var dx:Number = targetX - ball.x;
if (Math.abs(dx) < 1) {
ball.x = targetX;
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
trace(“done”);
} else {
var vx:Number = dx * easing;
ball.x += vx;
}
}
}
}
此例中,将缓动公式分解使用,首先计算出距离,因为我们需要知道是否该停止缓动。大家应该知道为什么要使用dx的绝对值了吧。如果小球在目标点的右边,dx的值总是负的,if (dx < 1)的结果永远为真,这就会使缓动停止。而使用Math.abs,就可以判断实际距离是否小于 1。
记住,如果将拖拽与缓动相结合,要在放开小球时,将运动代码重新启用。
移动的目标
上面例子中的目标点都是单一且固定的,这些似乎还不能满足我们的要求。事实上,Flash 并不关心物体是否到达目标,或目标是否还在移动。它只会问 “我的目标在哪里?距离有多远?速度是多少?”,每帧都如此。因此,我们可以很容易将目标点改为鼠标所在的位置,只需将原来 targetX和targetY的地方,改成鼠标的坐标 (mouseX和mouseY)。以下是一个比较简单的版本(EaseToMouse.as):
package {
import flash.display.Sprite;
import flash.events.Event;
public class EaseToMouse extends Sprite {
private var ball:Ball;
private var easing:Number = 0.2;
public function EaseToMouse() {
init();
}
private function init():void {
ball = new Ball();
addChild(ball);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var vx:Number = (mouseX - ball.x) * easing;
var vy:Number = (mouseY - ball.y) * easing;
ball.x += vx;
ball.y += vy;
}
}
}
移动鼠标观察小球跟随情况,是不是距离越远速度越快。
试想还有没有其它可移动的目标。当然还可以是一个影片向着另一个影片缓动。在早先的Flash 时代,鼠标追踪者(mouse trailers)——即一串影片跟踪者鼠标的效果——曾经风靡一时。缓动就是制作这种效果的方法之一。第一个影片缓动到鼠标上,第二个影片缓动到第一个影片上,第三个再缓动到第二个上,依此类推。大家不妨一试。
缓动不仅限于运动
本书中,有很多简单的例子程序。在这些例子中,我们主要是计算影片所用变量的值。通常,使用x,y 属性控制物体的位置。不过别忘了 Sprite 影片,影片剪辑以及各种显示对象还有很多其它可以操作的属性,而且基本都是用数字表示的。所以在读例子程序时,也应该试用其它属性代替这个例子中的属性。下面给大家一些启发。
透明度
将缓动用在 alpha 属性上。开始设置为 0 ,目标设置为 1 :
ball.alpha = 0;
var targetAlpha:Number = 1;
在 enterFrame. 函数中,使用缓动可以实现影片淡入效果:
ball.alpha += (targetAlpha - ball.alpha) * easing;
若将 0和1 颠倒过来就可以实现影片的淡出效果。
旋转
设置一个 rotation 属性和一个目标 rotation。当然,还需要一个能够表现旋转对象,比如一个箭头(arrow):
arrow.rotation = 90;
var targetRotation:Number = 270;
arrow.rotation += (targetRotation - arrow.rotation) * easing;
颜色
如果大家想挑战一下,可以在 24 位色彩中使用缓动。设置好 red,green,blue的初始值,使用缓动单独表现每一色彩元素的值,然后将它们再组合成 24 位色彩值。例如,我们可以从red 缓动到 blue。初始颜色如下:
red = 255;
green = 0;
blue = 0;
redTarget = 0;
greenTarget = 0;
blueTarget = 255;
在 enterFrame. 处理函数中的每一帧执行缓动。这里只表现一个 red 值:
red += (redTarget - red) * easing;
再将这三个数值组合为一个数(如第四章介绍的):
col = red << 16 | green << 8 | blue;
最后可以在 ColorTransform. (见第四章),线条颜色或填充色中使用该颜色值。
高级缓动
现在我们已经看到简单的缓动效果是如何实现的了,大家也许正在考虑如何使用更复杂的缓动公式制作一些效果。例如,在开始时比较缓慢,然后渐渐开始加速,最后在接近目标时再将速度慢下来。或者希望在一段时间或若干帧内完成缓动效果。
Robert Penner 以收集、编制和实现缓动公式而出名。我们可以在 www.robertpenner.com 中找到他的缓动公式。在他写这些内容时 AS 3 版本还没有出现,但是用我们前面几章所学知识,将它们转化为 AS 3 版本的也是件非常容易的事。
OK,下面进入Flash 中我最喜欢的一个主题:弹性运动(Springing)。
篇5:Flash基础理论课 第八章 缓动与弹性运动Ⅲ
返回“Flash基础理论课 - 目录”
弹簧链
下面我们将几个弹性小球串联起来,在介绍缓动一节时,我们简单地讨论了鼠标跟随的概念,意思是说一个物体跟随鼠标,另一个物体再跟随这个物体,依此类推。当时没有给大家举例子,是因为这个效果现在看来有些逊色。但是,当我们在弹性运动中使用这个概念时,效果就截然不同了。
本程序的设计思想:创建三个小球,名为ball0,ball1,ball2。第一个小球,ball0的动作与上面例子中的效果是相同的。ball1向ball0 运动,ball2向ball1 运动。每个小球都受到重力的影响,所以它们都会向下坠。代码稍有些复杂,文档类 Chain.as:
package {
import flash.display.Sprite;
import flash.events.Event;
public class Chain extends Sprite {
private var ball0:Ball;
private var ball1:Ball;
private var ball2:Ball;
private var spring:Number = 0.1;
private var friction:Number = 0.8;
private var gravity:Number = 5;
public function Chain() {
init();
}
private function init():void {
ball0 = new Ball(20);
addChild(ball0);
ball1 = new Ball(20);
addChild(ball1);
ball2 = new Ball(20);
addChild(ball2);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onEnterFrame(event:Event):void {
moveBall(ball0,mouseX,mouseY);
moveBall(ball1,ball0.x,ball0.y);
moveBall(ball2,ball1.x,ball1.y);
graphics.clear();
graphics.lineStyle(1);
graphics.moveTo(mouseX,mouseY);
graphics.lineTo(ball0.x,ball0.y);
graphics.lineTo(ball1.x,ball1.y);
graphics.lineTo(ball2.x,ball2.y);
}
private function moveBall(ball:Ball,targetX:Number,targetY:Number):void {
ball.vx += (targetX - ball.x) * spring;
ball.vy += (targetY - ball.y) * spring;
ball.vy += gravity;
ball.vx *= friction;
ball.vy *= friction;
ball.x += ball.vx;
ball.y += ball.vy;
}
}
}
看一下 Ball 这个类,我们发现每个对象实例都有自己 vx 和 vy 属性,并且它们的初始值均为0。所以在init方法中,我们只需要创建小球并把它们加入显示列表。
然后在onEnterFrame函数中,实现弹性运动。这里我们调用了 moveBall方法,比复制三次运动代码要好用得多。该函数的参数分别为一个 ball 对象以及目标点的 x,y 坐标。每个小球都调用这个函数,第一个小球以鼠标的 x,y作为目标位置,第二第三个小球以第一第二个小球作为目标位置。
最后,在确定了所有小球的位置后,开始画线,画线的起点是鼠标位置,然后依次画到每个小球上,这样橡皮圈就连接上了所有的小球。注意,程序中的 friction 降为0.8 为了使小球能够很快稳定下来。
创建一个数组保存链中所有对象的引用,然后通过循环遍历数组中的每个小球并执行运动,使这个程序更加灵活。这里只需要做一些小小的改变。首先,需要两个新的变量代表数组和对象数目:
private var balls:Array;
private var numBalls:Number = 5;
在函数 init 中,使用for循环创建所有对象,并将对象引用加入数组:
private function init():void {
balls = new Array();
for(var i:uint = 0; i < numBalls; i++) {
var ball:Ball = new Ball(20);
addChild(ball);
balls.push(ball);
}
addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
最后,onEnterFrame方法的变化最大。首先设置线条,将绘图起点移动到鼠标位置,再到第一个小球,然后循环为剩下的小球设置位置并连线。通过改变 numBalls 变量,我们可以加入任意多个小球。
private function onEnterFrame(event:Event):void {
graphics.clear();
graphics.lineStyle(1);
graphics.moveTo(mouseX,mouseY);
moveBall(balls[0],mouseX,mouseY);
graphics.lineTo(balls[0].x,balls[0].y);
for(var i:uint = 1; i < numBalls; i++) {
var ballA:Ball = balls[i-1];
var ballB:Ball = balls[i];
moveBall(ballB,ballA.x,ballA.y);
graphics.lineTo(ballB.x,ballB.y);
}
}
运行结果见图 8-3,大家可以在ChainArray.as找到这个类。
图8-3 弹簧链
多目标弹性运动
我们在第五章讨论速度与加速度时,曾说过如何使一个物体受到多种外力。如果每种力都是加速度,我们只需要把它们一个个都加到速度向量中去。因为弹力不过就是施加在物体上的一种加速度,因此在一个物体上添加多种弹力也是非常容易的。
下面是创建多目标弹簧的方法:我们需要三个控制点,这些点都是 Ball 类的实例,并且具有简单的拖拽功能,用它们作为小球弹性运动的控制点。小球会立即运动到点,并在两点间寻找平衡。换句话讲,每个目标都会对小球施加一定的外力,小球的运动速度就是这些外力相加的结果。
例子程序相当复杂,使用多个方法处理不同的事件。以下是代码(文档类 MultiSpring.as),看过后再进行分段讲解:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class MultiSpring extends Sprite {
private var ball:Ball;
private var handles:Array;
private var spring:Number = 0.1;
private var friction:Number = 0.8;
private var numHandles:Number = 3;
public function MultiSpring() {
init();
}
private function init():void {
ball = new Ball(20);
addChild(ball);
handles = new Array();
for (var i:uint = 0; i < numHandles; i++) {
var handle:Ball = new Ball(10,0x0000ff);
handle.x = Math.random() * stage.stageWidth;
handle.y = Math.random() * stage.stageHeight;
handle.addEventListener(MouseEvent.MOUSE_DOWN,onPress);
addChild(handle);
handles.push(handle);
}
addEventListener(Event.ENTER_FRAME,onEnterFrame);
addEventListener(MouseEvent.MOUSE_UP,onRelease);
}
private function onEnterFrame(event:Event):void {
for (var i:uint = 0; i < numHandles; i++) {
var handle:Ball = handles[i] as Ball;
var dx:Number = handle.x - ball.x;
var dy:Number = handle.y - ball.y;
ball.vx += dx * spring;
ball.vy += dy * spring;
}
ball.vx *= friction;
ball.vy *= friction;
ball.x += ball.vx;
ball.y += ball.vy;
graphics.clear();
graphics.lineStyle(1);
for (i = 0; i < numHandles; i++) {
graphics.moveTo(ball.x,ball.y);
graphics.lineTo(handles[i].x,handles[i].y);
}
}
private function onPress(event:MouseEvent):void {
event.target.startDrag();
}
private function onRelease(event:MouseEvent):void {
stopDrag();
}
}
}
在init方法中,创建小球并用for循环创建三个控制点,随机安排位置,并为它们设置拖拽行为。
onEnterFrame方法循环取出每个控制点,使小球向该点方向运动。然后,用控制点的坐标设置小球的速度,反复循环,从小球开始向各个控制点画线。onPress方法的内容非常简单,但是请注意 onRelease函数,我们无法知道当前拖拽的是哪个小球。幸运的是,使用任何一个显示调用stopDrag方法,都可以停止所有的拖拽,所以只需要在文档类中直接调用该方法。
我们只要改变 numHandles 变量的值,就可以轻松地设置控制点的数量。运行结果如图 8-4所示。
图8-4 多目标弹性
到目前为止,我相信大家已经有了很多的心得与体会,并且开始尝试解决一些书中没有提到的问题。如果真是这样的话,那就太好了!这也正是我写这本书的目的。
目标偏移
我们拿到一个真正的弹簧——有弹性的金属圈——然后将它的一头固定起来,另一头放上小球或其它物体,那么物体运动的目标点是哪里?难道说目标点是固定弹簧的那头儿?不,这并不实际。小球永远也到不了这个点,因为它会受到弹簧自身的阻碍。一旦弹簧变回了正常的长度,它会对小球施加更大的力。因此,目标点就应该是弹簧展开后的末端。
要寻找目标点,首先要找到物体与固定点之间的夹角,然后沿这个角度从固定点向外展开一段长度——弹簧的长度。换句话讲,如果弹簧长度是 50,小球与固定点的夹角是 45 度的话,那么就要以 45 度的夹角向外运动 50 个像素,而这个点就是小球的目标点。图8-5 解释了这一过程。
图8-5 弹簧复位
寻找目标点的代码如下:
var dx:Number = ball.x - fixedX;
var dy:Number = ball.y - fixedY;
var angle:Number = Math.atan2(dy,dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedY + Math.sin(angle) * springLength;
运行结果是,物体向着固定点运动,但会在与目标点相差一段距离时停止移动。大家还要注意,虽然我们叫它“固定点”,只是代表弹簧固定到的某个点。而不是指这个点不能移动。也许最好的方法就是看代码。
我们继续使用鼠标位置作为固定点,弹簧的长度为100 像素,
以下是文档类(OffsetSpring.as):
package {
import flash.display.Sprite;
import flash.events.Event;
public class OffsetSpring extends Sprite {
private var ball:Ball;
private var spring:Number = 0.1;
private var vx:Number = 0;
private var vy:Number = 0;
private var friction:Number = 0.95;
private var springLength:Number = 100;
public function OffsetSpring() {
init();
}
private function init():void {
ball = new Ball(20);
addChild(ball);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var dx:Number = ball.x - mouseX;
var dy:Number = ball.y - mouseY;
var angle:Number = Math.atan2(dy,dx);
var targetX:Number = mouseX + Math.cos(angle) * springLength;
var targetY:Number = mouseY + Math.sin(angle) * springLength;
vx += (targetX - ball.x) * spring;
vy += (targetY - ball.y) * spring;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
graphics.clear();
graphics.lineStyle(1);
graphics.moveTo(ball.x,ball.y);
graphics.lineTo(mouseX,mouseY);
}
}
}
虽然我们能够看到运行结果,但却不能真正发现这项技术的特殊用处。没关系,下一节会给大家一个特别的例子。
弹簧连接多个物体
我们知道如何用弹簧连接两个物体,还知道这个点不是固定的。但是,如果另一个物体上还有一个弹簧反作用在第一个物体上,又是怎样的呢?这里有两个物体之间由一根弹簧连接。其中一个运动了,另一个物体就要向该物体移动过来。
我开始认为制作这种效果会导致死循环从而无法实现,或者至少会引起错误。但我也没管那么多,勇敢地进行尝试。结果非常完美!
虽然前面已经描述了一些策略,但这里还要细致得说一下:物体A以物体B作为目标,并向它移动。物体B 反过来又以物体A作为目标。事实上,本例中目标偏移起了重要的作用。如果一个物体以其它物体直接作为目标,那么它们之就会相互吸引,最终聚集在一个点上。通过使用偏移目标,我们就可以使它们之间保持距离,如图 8-6所示。
图8-6 弹簧连接的两个物体
下面举一个例子,我们需要两个 Ball 类的实例。分别为ball0 和 ball1。ball0向ball1 偏移运动。ball1向ball0 偏移运动。为了不去反复写偏移弹性运动的代码,我们将这些功能写到函数 springTo 中,直接调用函数即可。如果想让 ball0向ball1 运动,只要写 springTo(ball0,ball1),然后再让 ball1向ball0 运动,就写 springTo(ball1,ball0)。还要设置两个变量,ball0Dragging 和 ball1Dragging,作为每个小球运动的开关。以下是文档类(DoubleSpring.as):
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class DoubleSpring extends Sprite {
private var ball0:Ball;
private var ball1:Ball;
private var ball0Dragging:Boolean = false;
private var ball1Dragging:Boolean = false;
private var spring:Number = 0.1;
private var friction:Number = 0.95;
private var springLength:Number = 100;
public function DoubleSpring() {
init();
}
private function init():void {
ball0 = new Ball(20);
ball0.x = Math.random() * stage.stageWidth;
ball0.y = Math.random() * stage.stageHeight;
ball0.addEventListener(MouseEvent.MOUSE_DOWN,onPress);
addChild(ball0);
ball1 = new Ball(20);
ball1.x = Math.random() * stage.stageWidth;
ball1.y = Math.random() * stage.stageHeight;
ball1.addEventListener(MouseEvent.MOUSE_DOWN,onPress);
addChild(ball1);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_UP,onRelease);
}
private function onEnterFrame(event:Event):void {
if (!ball0Dragging) {
springTo(ball0,ball1);
}
if (!ball1Dragging) {
springTo(ball1,ball0);
}
graphics.clear();
graphics.lineStyle(1);
graphics.moveTo(ball0.x,ball0.y);
graphics.lineTo(ball1.x,ball1.y);
}
private function springTo(ballA:Ball,ballB:Ball):void {
var dx:Number = ballB.x - ballA.x;
var dy:Number = ballB.y - ballA.y;
var angle:Number = Math.atan2(dy,dx);
var targetX:Number = ballB.x - Math.cos(angle) * springLength;
var targetY:Number = ballB.y - Math.sin(angle) * springLength;
ballA.vx += (targetX - ballA.x) * spring;
ballA.vy += (targetY - ballA.y) * spring;
ballA.vx *= friction;
ballA.vy *= friction;
ballA.x += ballA.vx;
ballA.y += ballA.vy;
}
private function onPress(event:MouseEvent):void {
event.target.startDrag();
if (event.target == ball0) {
ball0Dragging = true;
}
if (event.target == ball1) {
ball1Dragging = true;
}
}
private function onRelease(event:MouseEvent):void {
ball0.stopDrag();
ball1.stopDrag();
ball0Dragging = false;
ball1Dragging = false;
}
}
}
本例中,每个小球都是可以拖拽的。enterFrame函数负责为小球调用springTo函数。请注意,这两条语句都是由两条判断语句包围起来的,目的是要确认小球目前没被拖拽:
springTo(ball0,ball1);
springTo(ball1,ball0);
springTo函数用于产生运动,函数中的所有语句大家应该都很熟悉。首先,求出距离和角度,再计算目标点,然后向目标点运动。第二次调用函数时,参数相反,两个小球交换位置,开始的小球向另一个小球运动。这也许不是效率最高的代码,但是它可以最好地表现出运动的过程。
我们看到,小球不会依附在任何固定点上,它们都是自由飘浮的。小球之间唯一的约束就是彼此保持一定的距离。这种写法最好的地方是可以很容易地加入新的物体。例如,再创建第三个小球(ball2),同时为它设置一个变量(ball2Dragging),就可以这么添加:
if(!ball0Dragging) {
springTo(ball0,ball1);
springTo(ball0,ball2);
}
if(!ball1Dragging) {
springTo(ball1,ball0);
springTo(ball1,ball2);
}
if(!ball2Dragging) {
springTo(ball2,ball0);
springTo(ball2,ball1);
}
这样就建立了一个三角形结构,如图 8-7所示。大家熟练掌握后,很快就能做出四边形结构,直到一切复杂的弹簧结构。
图8-7 一根弹簧连接三个物体
本章重要公式总结
现在来回顾一下本章的重要公式
简单缓动,长形:
var dx:Number = targetX - sprite.x;
var dy:Number = targetY - sprite.y;
vx = dx * easing;
vy = dy * easing;
sprite.x += vx;
sprite.y += vy;
简单缓动,中形:
vx = (targetX - sprite.x) * easing;
vy = (targetY - sprite.y) * easing;
sprite.x += vx;
sprite.y += vy;
简单缓动,短形:
sprite.x += (targetX - sprite.x) * easing;
sprite.y += (targetY - sprite.y) * easing;
简单弹性,长形:
var ax:Number = (targetX - sprite.x) * spring;
var ay:Number = (targetY - sprite.y) * spring;
vx += ax;
vy += ay;
vx *= friction;
vy *= friction;
sprite.x += vx;
sprite.y += vy;
简单弹性,中形:
vx += (targetX - sprite.x) * spring;
vy += (targetY - sprite.y) * spring;
vx *= friction;
vy *= friction;
sprite.x += vx;
sprite.y += vy;
简单弹性,短形:
vx += (targetX - sprite.x) * spring;
vy += (targetY - sprite.y) * spring;
sprite.x += (vx *= friction);
sprite.y += (vy *= friction);
偏移弹性运动:
var dx:Number = sprite.x - fixedX;
var dy:Number = sprite.y - fixedY;
var angle:Number = Math.atan2(dy,dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedX + Math.sin(angle) * springLength;
篇6:Flash教程:FlashAS实现颜色渐变光线旋转特效
代码如下:
var pMaxSize:Number = 150;
var pCenterX:Number = 275;
var pCenterY:Number = 200;
var pNumTraces:Number = 20;
var pNumLayers:Number = 30;
var pCurrentLayer:Number = 0;
var pLineColour:Number;
var pPointDegree:Array = new Array;
var pPointDegreeChange:Array = new Array();
var pPointScale:Array = new Array();
var pPointScaleChange:Array = new Array();
var pPointX:Array = new Array();
var pPointY:Array = new Array();
var pBaseTimeline:MovieClip;
var pIntervalId:Number;
function init(baseTimeline:MovieClip):Void {
pBaseTimeline = baseTimeline;
pBaseTimeline.createEmptyMovieClip(“holder”, 0);
for (var j:Number = 0; j
pBaseTimeline.createEmptyMovieClip(“layer”+j, j+1);
pBaseTimeline[“layer”+j]._x = pCenterX;
pBaseTimeline[“layer”+j]._y = pCenterY;
}
initTraces();
pBaseTimeline.holder.onEnterFrame. = function() {
moveSpheres();
};
pIntervalId = setInterval(this, “updateSeeds”, );
}
function initTraces() {
for (var i:Number = 0; i
pPointX = 0;
pPointY = 0;
pPointDegree = (6.28318530718/pNumTraces)*i;
pPointScale = 50;
}
updateSeeds();
for (i=0; i
plotLine(i);
}
}
function moveSpheres() {
for (var i:Number = 0; i
pPointDegree += pPointDegreeChange;
pPointScale += pPointScaleChange;
plotLine(i, true);
}
pBaseTimeline[“layer”+pCurrentLayer]._alpha = 100;
pCurrentLayer = (pCurrentLayer+1)%pNumLayers;
for (var j:Number = 0; j
pBaseTimeline[“layer”+((pCurrentLayer+j)%pNumLayers)]._alpha = (j/pNumLayers)*100;
}
pBaseTimeline[“layer”+pCurrentLayer].clear();
}
function plotLine(i:Number, drawLine:Boolean) {
pBaseTimeline[“layer”+pCurrentLayer].lineStyle(1, pLineColour, 100);
pBaseTimeline[“layer”+pCurrentLayer].moveTo(pPointX, pPointY);
pPointX = (Math.cos(pPointDegree)*pPointScale);
pPointY = (Math.sin(pPointDegree)*pPointScale);
if (drawLine == true) {
pBaseTimeline[“layer”+pCurrentLayer].lineTo(pPointX, pPointY);
}
}
function updateSeeds() {
var deg:Number;
var scale:Number;
deg = randomRange(-100, 100)/2000;
if (pPointScale[0]>pMaxSize) {
scale = randomRange(-10, 0)/2;
} else if (pPointScale[0]<-pMaxSize) {
scale = randomRange(0, 10)/2;
} else {
scale = randomRange(-10, 10)/2;
}
for (var i:Number = 0; i
pPointDegreeChange = deg;
pPointScaleChange = scale;
}
pLineColour = randomRange(0, 0xFFFFFF);
}
function randomRange(min:Number, max:Number):Number {
var randomNum:Number = Math.round(Math.random()*(max-min))+min;
return randomNum;
}
init(this);
篇7:网页特效(背景特效代码):适时变换网页背景和文字颜色
类似于无刷新切换网页风格,本代码意在学习这种切换技术,实际使用时候很少这样用,对于学习DW的朋友会有帮助,当你选择了网页背景色和文字颜色,点击确认按钮JavaScript 函数会帮你适时将网页变换为你想要的颜色,
网页特效(背景特效代码):适时变换网页背景和文字颜色
。提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效,
★ 空间开场白动画
★ 动画策划书
【FLASH文字颜色缓动特效(集锦7篇)】相关文章:
《网页设计与制作入门与实战》心得读后感2023-02-24
难忘元宵节作文500字2023-02-07
Flash中帧的教学解析2022-07-06
小学生教学课件制作2022-05-06
FLASH制作个性的旋转圆形网页导航2022-05-06
浅淡CAI课件的制作2022-08-17
教学课件制作2024-03-24
动漫专业顶岗实习报告2022-12-30
Flash动画视觉效果在网页设计中的应用论文2023-01-14
《我的Flash动画贺卡》教学反思2023-08-02