在送上教程之前,我想先感谢一位经典的网友,他介绍了一个数学公式编辑软件MATHTYPE,对我这次写教程有了很大的帮助.但是是谁一时想不起来,又找不到.如果找到的话,我一定会把他的大名公布出来,以示感激.
这是两个月前答应一位网友写的教程,但是当初没有时间,所以拖到现在.而且这个效果还是有相当一部分的人曾经在论坛上问过怎么做的.现在笔者挤出了点时间,给大家送上这个教程.
[1b]
[url=/Files/BeyondPic/2006-9/15/mousewave.swf][1b]
效果预览
[/1b][/url]
(点击观看)[/1b]
这基本上是用AS实现的.主要用了MovieClip对象的lineTo和curveTo方法,此外还有很多人都很熟悉的韩式弹性菜单的算法.
在这里,先给大家介绍比较简单的韩式弹性菜单算法.框架弹性动作就是通过这种算法实现的.它要达到的效果就是让一个物体在目标位置两侧振动,而且振幅越来越小,最终停止在目标位置.
[1b]它的算法如下:[/1b]
ObjPos=targetPos-deceleration*(ObjPos-targetPos)
你尝试让ObjPos是任意的一个数,然后让deceleration取0~1(不包括0,1),然后targetPos取一个跟ObjPos相差比较大的数,不断地代入上式算一下,你会发现ObjPos会在targetPos两侧振动,并且当前一次大于targetPos时候,这一次将小于targetPos,而且无限接近于targetPos,于是就达到弹性振动的目的了.
当然明眼人一观察就出结果.不过这个认识是感性的,如果有兴趣的话,可以看下我对这条式子的证明过程(对数学没兴趣的可以跳过)
在证明之前,先解释一点,上式两边的ObjPos是不一样的,在AS里,它并不代表相等,而是先把ObjPos当前的值代到右边,算出结果后重新对ObjPos赋值.因此,假设ObjPos原始值为a1,该式子运行一次后左边的ObjPos的值记为a2,依此类推,执行到n次后左边ObjPos的值记为an+1,所以,在数学上,实际上是进行这么一个数列的递推运算:
[1b]an=t-d(an-1-t)(其中d,t是常数)[/1b]
当代码执行n次时,物体的位置就位于数列{an}的第n+1项.
因此,我们需要证明数列当a1!=t的时候,an两个相邻项之间的数值跟t的差的符号相反,并且当n趋向于无穷的时候,an=t
由此可知,如果把这段代码用setInterval调用,或者在onEnterFrame里调用的话,ObjPos的值将在targetPos两边振动,并且无限接近targetPos.这个式子用到我的鼠标效果里,这里要控制的点就是整个框的最高点.最高点的变动带动整个形状的变动,当然带动形状变动是后面的事情,我们当前先要把最高点振动的效果实现.因此,targetPos就是框架最高点最终停留的位置,而ObjPos则是框架最高点当前的位置.
下面笔者介绍的将是如何根据算出的最高点把图形描绘出来:
首先,矩形的四个顶点都是常量,而且有三条边都是直线,因此,这里用lineTo就可以实现了.
[1b]lineTo(x,y)[/1b]方法比较简单,对MC调用该方法时,lineTo将在点x,y和当前MC的画图标记点连一直线,一开始默认为(0,0),所以第一次对该MC调用lineTo的时候,将在该MC上画一条从(0,0)到(x,y)的直线,然后画图标记点就改为(x,y)了.如果不希望一开始画上这条线的话,或者画完一根线以后,希望再画一根,并且不要跟现在的线连在一起的话,可以先用moveTo(x,y)方法改变画图标记点.
[1b]curveTo(controlX,controlY,anchorX, anchorY)方法[/1b]则是该教程的一个重点,因为波形的绘制都是通过该方法实现的.而且过两点有无数条曲线,所以,如何保证波形曲线的平滑性,是个很重要的问题.
[1b]下面先做一个小测试:[/1b]
新建一个Flash文档,在帧上添加下面的代码:
var initX = 100;
var inity = 200;
var controlX;
var controlY;
var anchorX = 50;
var anchorY = 50;
this.onMouseMove = function() {
this.createEmptyMovieClip("curve", 1);
with (curve) {
lineStyle(1, 000000, 50);
moveTo(initX, initY);
ControlX = _xmouse;
ControlY = _ymouse;
lineTo(controlX, controlY);
lineTo(anchorX, anchorY);
moveTo(initX, inity);
curveTo(controlX, controlY, anchorX, anchorY);
}
updateAfterEvent(this.onMouseMove)
};
然后,测试影片,在舞台上移动鼠标,观察曲线的变化(其中,鼠标所在的点是控制点)
也可以直接在这里预览:
[url=/Files/BeyondPic/2006-9/15/test.swf][1b]
效果预览
[/1b][/url]
[1b](点击观看)[/1b]
你会发现,不管控制点怎样变化,画出来的曲线都有一个特点,就是控制点跟曲线两个顶点的连线都和曲线相切,并且弧线总是C形,不是S形.这就是指导我们画出平滑曲线的重要结论.
本文转自:http://www.5uflash.com/flashjiaocheng/Flashdonghuatexiao/1046.html
发表评论
-
纯AS动感LOADING,可以开启随机12种效果
2010-04-10 13:37 533//加载需要使用的类 import mx.transition ... -
纯AS动感LOADING,可以开启随机12种效果
2010-04-10 13:36 642//加载需要使用的类 import mx.transition ... -
纯ActionScript的Loading效果四例
2010-04-10 13:36 606前言:稍微大一些的Flash作品在播放之前都会有一个Load ... -
纯ActionScript的Loading效果四例
2010-04-10 13:36 481前言:稍微大一些的Flash作品在播放之前都会有一个Load ... -
利用装载字节数制作loading
2010-04-10 13:36 569终于搞定。。呵呵。。 ... -
as3 使用sound类(翻译)-暂停和继续播放声音
2010-04-09 14:01 620[1b]问题十[/1b] 如何暂停声音,如何从暂停的地 ... -
ActionScript 3.0系列教程:Document Class特色为我们带来了什么?
2010-04-09 14:01 568Document Class,中文直译为“文档类”。顾名思义 ... -
ActionScript 3.0系列教程:Document Class特色为我们带来了什么?
2010-04-09 14:01 628Document Class,中文直译为“文档类”。顾名思义 ... -
AS3.0的类及绑定
2010-04-09 14:01 751[1b]ActionScript 3.0系列教程(2):AS ... -
AS3.0的类及绑定
2010-04-09 14:00 748[1b]ActionScript 3.0系列教程(2):AS ... -
as3游戏开发之打气球系列(二)
2010-04-09 11:51 456HI,经过了昨天疯狂的理 ... -
我对as3声音架构的理解
2010-04-09 11:51 536一直都对as3的声音架构 ... -
as3.0游戏开发之打气球系列(一)
2010-04-09 11:51 467好久没有写正经的文章 ... -
as3按钮事件
2010-04-09 11:50 508在刚开始学As3时,如果不知道按钮的事件如onPress的话 ... -
【as3】ActionScript 3.0体验试教学视频教程
2010-04-09 11:50 527很不错的视频教程 原文地址: http://blog.sina ... -
漫画绘制技法大放送(上)
2010-04-08 11:23 510网络收集整理(jundark) [1b]一、人体基本结构[/1 ... -
flash动画形变讨论二:低头
2010-04-08 11:23 536上次说了基本的形变,现在说下提示点,提示点是控制图形变化的基本 ... -
卡通娃娃360度转身动画
2010-04-08 11:23 550超人表情原创大赛正如火如荼的进行中,对于初哥可能就望钱兴叹了, ... -
指针随鼠标移动的flash卡通时钟
2010-04-08 11:23 615。先看下时钟效果: var fnum:Number = ... -
动画人物运动规律与节奏
2010-04-08 11:22 850本文转自:h ...
相关推荐
教你 设置个性 的鼠标特效。你可以自己设置个性的特效。不会让你失望的
Flash鼠标特效-鼠标跟随效果,鼠标在移动的过程中自动复制生成图案,鼠标若不移动的话,图案会重叠,形成很强烈的视觉效果。
网页特效-图片特效-鼠标悬停图片放大效果
ActionScript3,flash,
代码片段: 用鼠标拖动。 按1键作慢动作。 按2表示零重力。 按3表示反向重力。 </div>
鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色鼠标指针-蓝色
鼠标特效 html鼠标特效内有:跟随鼠标的图片 与以往不同的跟随鼠标的滚动文字,跟随鼠标很逼真的弹性小球,等等
ZineMaker特效-鼠标跟随。是我收藏的哦,虽然只有二十几个,当时都是很不错的哦。
很多博客背景的科技风粒子特效,html源码,可以F12全屏当作背景版也可以自己开发到页面里当作背景特效
Unity3D鼠标点击地面特效Real-time Strategy FX v1.0,类似英雄联盟的点击特效
鼠标特效技巧代码鼠标特效技巧代码鼠标特效技巧代码鼠标特效技巧代码
鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效
html5图片特效-鼠标悬停时旋转图片,这个效果您可以应用于相册或图片展示中,当鼠标悬停于图片时,图片会以一定角度旋转图片,以响应鼠标的操作,这种交互式的效果在目前已经使用相当广泛了。
五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 ...
录制鼠标轨迹.rar录制鼠标轨迹.rar录制鼠标轨迹.rar录制鼠标轨迹.rar录制鼠标轨迹.rar录制鼠标轨迹.rar
很多博客背景的科技风粒子特效,html源码,可以F12全屏当作背景版也可以自己开发到页面里当作背景特效。黑色的粒子特效,使用canvas绘制,可以跟随鼠标的移动变换背景粒子,很有科技感
CSS的鼠标影响.rarCSS的鼠标影响.rarCSS的鼠标影响.rarCSS的鼠标影响.rarCSS的鼠标影响.rarCSS的鼠标影响.rar
测试鼠标点击速度.rar测试鼠标点击速度.rar测试鼠标点击速度.rar测试鼠标点击速度.rar测试鼠标点击速度.rar测试鼠标点击速度.rar
攻击鼠标的文字.rar攻击鼠标的文字.rar
三色鼠标效果(一).rar三色鼠标效果(一).rar三色鼠标效果(一).rar三色鼠标效果(一).rar三色鼠标效果(一).rar三色鼠标效果(一).rar