欢迎光临

木子屋

标题: 懒人自有懒办法——雅酷互动flash as2简易教程第4篇

作者: dnawo

日期: 2009-03-12 02:52 AM

分类: 网页设计

内容: 据说，这世界是由懒人创造的。因为实在懒得不愿走路，所以，我们发明了汽车，因为实在懒得不愿意提东西，所以我们发明了起重机；因为实在懒得不愿意计算，所以，才有了计算机，实在懒得不愿意写汇编语言，懒人才去发明了高级语言。因为实在懒得去想怎么做缓动，于是才有了……
对了，是flash as2的缓动类。
以前咱们已经学过了如何自己通过onEnterFrame制造缓动效果，想必大家也都练习过。当你正练习得超有成就感，不亦乐乎的时候，一直在旁边崇拜得五体投地的路人甲同学说话了。你这做了些啥啊，费半天劲搞出来的效果也太没水准了吧，给俺做个回弹的效果让洒家欣赏欣赏。虽然你心里直打鼓，但是看见路人甲同学真诚的眼神，还是豪情万丈的上路了。哎，书到用时方恨少啊，谁让俺数学没学好呢，愣是用了九牛二虎之力，也没把这效果做出来。
所以，这时候你就需要……
对了，专门为懒人准备的缓动类。
下面我们来看一下如何利用这个好东西吧。
说到类，有编程基础的人，首先想到的就是面向对象，没有编程基础的人，肯定一头雾水。因为本教程主要面对后者，所以先打一下气，其实，类这东西，虽然这次咱们是第一次隆重提到，但，你实际是一直在跟类打交道。不过你不知道而已。即使现在，您也不需要先了解什么是类，本节的任务就是告诉你怎么使用就行了。
在flash as2.0里边，与缓动相关的有两个类，一个叫tween类，一个叫easing类。有了这两个东西，你就可以作出让路人甲佩服的动画了。
使用这两个类之前，我们必须把它加载进来，在程序的第一行写下这两句话：
复制内容到剪贴板 程序代码//导入Tween类
import mx.transitions.Tween;
//导入easing类
import mx.transitions.easing.*;
这样你的程序运行的时候，这两个类就被加载进来。
import 是导入类的意思。
而后面这段mx.transitions.则是这个类存放的路径。告诉flash到哪里可以找到这两个类，因为他们是随flash一起安装到你的电脑中的，所以，这个路径是固定的。
当然，你也可以不写这两句话，但是我建议你写，因为不写的话，你每次提到他们的时候，就必须把他们前面的那一串路经写上。
比如下面这样：
复制内容到剪贴板 程序代码someTweenID=new mx.transitions.Tween(……)
但是有了这两句话，你就简单了
复制内容到剪贴板 程序代码someTweenID= new Tween(……)
这就像你跟你mm聊天，提到路人甲，你mm肯定很困惑的问，是哪个路人甲啊？所以你必须说，是那个我看着超级不爽的路人甲。但是如果你一开始就告诉MM，我现在想和你聊一下那个让我不爽的路人甲，以后每次提到他的时候，就不用那么麻烦了，直接叫他小甲就行了。
好了，废话又多了。现在咱们先来看看第一个类怎么使用。
引用内容someTweenID = new Tween(object, property,function,begin,end,duration,useSeconds)
先解释一下里边一些参数的意义。
object：是指tween的对象，也就是目标。
property：字符串，也就是说你在用的时候，要把他们用引号引起来，这个是指你要应用效果的属性，比如“_x”、“_y”等。
function：easing缓动类型。（看不懂待会解释）
begin：数值，对象的初始值，也就是缓动一开始的值。
end：数值，缓动结束的值。
duration：缓动时间。
useSeconds：是一个布尔值，决定是用秒还是用帧数表示缓动时间。true表示使用秒，false用帧数。
看到这里你就知道，tween类主要就是控制操作谁、控制什么、多长时间的问题。
至于以何种方式缓动，则是另外一个类的工作：easing
下面我们把easing类拖出来示众。
Back：在一个或两个结束点过渡范围之外的扩展动画，类似于溢出效果
Bounce：在一个或两个结束点过渡范围内加入回弹效果，回弹的多少取决于运动过程的时间，长的时间回弹的次数就相对多
Elastic：发生在一个或两个结束点过渡范围外的弹性效果，弹性的力度不熟运动过程时间的影响
Reguler：在一个或两个结束点上加入减速效果，这个特性可以帮你做出加速后减速的效果
Strong：在一个或两个结束点上加入减速效果，这个效果类似于regular，不同的在于比较明显
None：在开始点到结束点加入匀速运动，没有效果。
如果你看不明白上面的这段说明，也不要着急，继续往下看。
以上提到的是六种效果，而这六种效果，又包含三种过渡方式
easeIn：在过渡的开始产生效果，就是说运动一开始出现这种效果。
easeOut：在过渡的结束产生效果，运动要结束的时候出现这种效果。
easeInOut：在开始和结束均产生效果。
好了，说半天都没用，咱们还是上场试一下吧。如果前面的你都看不懂，上场试一下你就明白了。
在库中建立一个影片剪辑。然后在场景中把它加载进来。
复制内容到剪贴板 程序代码this.attachMovie("myMc", "myMc", this.getNextHighestDepth(), {_x:20, _y:100});
看不懂这句话的，回去看本教程第一篇。
然后我们使用tween类来做缓动效果
myBall = new Tween(myMc, "_x", Elastic.easeOut, 0, 300, 3, true);
现在我们在解释一下上面这段代码，myMc不用说了，因为你是想让myMc产生缓动效果，所以，这个地方是myMc，_x，通过改变x轴的属性值，来实现缓动的效果，当然，出来_x周以外，咱们以前提到的那些影片剪辑的属性，都可以拿来用，你有时间的话，就分别把它们拎出来试一下吧。Elastic.easeOut，这个地方看到了吧？用的就是我们刚才提到的easing类， Elastic缓动效果，easeOut过渡方式，他们两个和起来的意思，就是让myMc在运动结束时产生回弹效果。20，影片剪辑从20开始运动，300，影片剪辑最后停在300的位置上，2，时间是2，true，表示计算时间的单位是秒。
我相信不用我说，你已经测试了我刚才这段代码。现在你可以把咱们刚才提到的各类效果都试一下，就明白它们大概是什么感觉了。
到这儿大家可以看到，这两个类实在是懒得很贴心，首先，它在类中已经清除了循环，所以，你再也不用担心循环清除的问题了。其次，如果你做完了一个回弹效果，可爱的客户看到了以后，却说，这个效果看得我头晕，能给我换一个缓和点的吗？这时候你只需要把Elastic改成Strong或Reguler，另外一种效果就出来了。剩下的时间，你就可以喝喝茶，到雅酷看看教程什么的，实在是居家旅行、泡妞偷懒之必备工具。
先别忙着兴奋，接下来，我们再说两个关于缓动类的很有用的东西，第一个是onMotionFinished，这个告诉程序，如果缓动结束以后，应该做什么。如果你不知道这个函数，但是想做影片剪辑缓动结束以后，弹出提示告诉你结束了，好像是很麻烦的一件事情，至少到目前为止，你的知识面还不足以让你做出来。但是有了onMotionFinished，一切都变得很简单了。
接着上面的代码，继续写：
复制内容到剪贴板 程序代码myBall.onMotionFinished=function(){
trace("缓动结束了！");
}
看一看什么效果。对了，这里顺带介绍一下trace的作用，trace的作用就是在测试的时候，在输出面板输出()内的内容，你刚才已经看到了它的作用，以后我们还会经常用它来测试我们的程序。
除了onMotionFinished，还有一个方法，可以使你的运动接着向另外一个方向运行，这个方法叫做continueTo()；它里边有两个参数，第一个参数是下一个目标点，第二个参数是运行时间，相当于tween里边的finish，duration，我们还是来现场试一下，就明白了。
把上面的代码改成
复制内容到剪贴板 程序代码myBall.onMotionFinished=function()
{
myBall.continueTo(400, 2);
}
你可以看到，影片剪辑在300的位置停下以后，又马上开始了新的缓动，移动到400，时间是2秒钟。
有了这样的一种方法，对于制造连续的缓动，你一定就胸有成竹了。
最后，我决定再介绍一个好玩的方法，它的名字叫yoyo();这个方法到底是做什么的，我就不说了，你们可以自己试一下，然后，你就知道它为什么叫这个名字了。
好了，关于缓动，咱们就说到这里吧，基本上有这些东西，一般页面里的缓动效果，对你来说应该都不在话下了。下次，咱们就应该说一下交互的问题了。
交互才是as的真正精髓所在，说白了，要是没有交互，学as程序做什么，关键帧不是都能搞定吗？可爱的路人甲肯定会这么问你的。所以，让我们用交互堵上他的嘴吧。

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.611 ms

返回

标题: 懒人自有懒办法——雅酷互动flash as2简易教程第4篇

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.611 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.674 ms

返回