发新帖  新投票  回帖 
帖子主题:绚丽的点击
10209个阅读者,26条回复 | 打印 | 订阅 | 收藏
里玫

发表时间:2011-10-30 20:22

绚丽的点击



里玫 发表在 动漫学坊 华声论坛 http://bbs.voc.com.cn/forum-325-1.html

简单介绍:以下实例运用代码绘制了小球,填充了放射颜色、同时让颜色和大小跟着随机数的变化而变化。当小球的初始状态设置完毕后,又为它注册了鼠标事件的侦听器,定义了小球在舞台里面上下左右运动的范围。一切代码输入完毕,最后一句addChild(mc);把这个叫做mc的实例请到了舞台上,随着你的鼠标不断点击,人机交互的效果由此实现。【最近嗓子发炎,过几天我嗓子好了再介绍此实例中代码的应用】
[全屏欣赏]

实例制作:
1.新建一个3.0flash文档。舞台设置默认。
2.图层一第一帧设计一个底图,颜色不要太深即可。
3.图层二第一帧输入以下的代码。
如果需要音乐自己添加。
代码及注释【在理解的基础上我作了注释。如有不妥,请高手斧正】
stage.addEventListener(MouseEvent.CLICK,cl);//为舞台注册了一个鼠标点击事件
function cl(e:MouseEvent) {
var mc:MovieClip=new MovieClip ();//为MovieClip新构造了一个类对象mc.
mc.graphics.beginGradientFill(GradientType.RADIAL,[0xffffff,0xff9999],[1,1],[0,80]);
//此句代码定义了mc的放射状底色。小括号里是填充放射状的代码。方括号里是放射状填充色、alpha值和色块的距离。
mc.graphics.drawCircle(0,0,10+Math.random()*20);//绘制mc的形状为圆形。半径定义在10--30之间,同时不断跟着随机数递增。
var r:Number=0.5+Math.random();//用随机数打开红色的颜色通道。
var g:Number=0.5+Math.random();//用随机数打开绿色的颜色通道。
var b:Number=0.5+Math.random();//用随机数打开蓝色的颜色通道。
mc.transform.colorTransform=new ColorTransform(r,g,b);
//用已经定义的r/g/b三个红绿蓝随机数让ColorTransform新构造一个transform类对象mc,目的是改变mc中圆的颜色样式。
mc.vx=10*Math.random()-5;
mc.vy=10*Math.random()-5;
//以上两行代码:为mc的上下左右移动取随机值。
mc.r=mc.width/2;//设置了mc的半径r等于mc的宽度除以2。
mc.x=mouseX;
mc.y=mouseY;
//以上两行代码把鼠标的坐标赋值给了mc坐标.
mc.filters=[new DropShadowFilter(2,45,0x000000)];//为mc添加滤镜效果.
addChild(mc);//显示mc。
mc.addEventListener(Event.ENTER_FRAME,fr);
//为mc注册一个帧频侦听事件。
}
function fr(e:Event) {//定义这个事件。
var mc:MovieClip=e.target as MovieClip;
//把实例中的目标重新赋值给左面的MovieClip类.mc.
mc.x+=mc.vx;
mc.y+=mc.vy;
//以上两行:把上下左右移动的MC的坐标赋值给现在的mc坐标,并让它们不断递增。
if (mc.x>550-mc.r) {//如果mc的x大于550-mc的半径,
mc.x>550-mc.r;//当mc.x大于550-mc.r时,
mc.vx*=-1;//mc.vx就向左移动:
}
if (mc.x mc.x=mc.r;//当两者相等时,
mc.vx*=-1;//mc.vx就向右移动:
}
if (mc.y>400-mc.r) {//如果mc.y大于400减去mc.r,
mc.y>400-mc.r;//当mc.y大于400-mc.r时,
mc.vy*=-1;//mc.vy就向上移动。
}
if (mc.y mc.y=mc.r;//当两者相等时,
mc.vy*=-1;//mc.vy就向下移动。
}
}

[本帖最后由 里玫 于 2011-10-30 21:37 编辑]

本帖助威记录

jufeng1221 +1
学习了
2011-11-25 20:51:39
为我洋洋 +1
比这精彩的帖子还有木有
2011-11-02 08:10:09
总计:魅力2点 助威2查看所有助威>>

本帖最近评分记录
贝子   2011-11-11 12:57  金钱  +10   好帖
贝子   2011-11-11 12:57  魅力  +10   好帖



----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
雨虹天地清

回复时间:2011-10-30 20:26
很好玩的效果,哈哈哈哈,有空我也做一个。




----------------------------------------------
相信自己,相信梦想,明天更美好。
 
@芙蓉阁主

回复时间:2011-10-31 00:09
里查德的实例总是这样新鲜别致,每一个实例都要花费大量的时间和精力去设计和反复测试修改。里查德是绝对称职和认真的好老师。这个实例好玩呢,俺点了无数个彩球在飞。2.0的脚本俺都晕着呢,更别说这3.0的了,呵呵,只有欣赏的份啦,笨笨的阁主学不会哦~~~




----------------------------------------------
心中那自由的世界,如此的清澈高远,盛开着永不凋零蓝莲花!

** 莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。**
 
笑看世间

回复时间:2011-10-31 03:33
点击后出来的是泡泡糖小朋友一定会喜欢,哈哈,AS代码,头都晕




----------------------------------------------
自娱自乐乐在其中
 
贝子

回复时间:2011-10-31 10:06
里玫很棒,又开始研究AS了,曾经做过AS练习,但都只是复制粘贴代码,制作出实例是比较容易的,这AS效果很特别,欣赏这绚丽的点击,里玫的用心的老师,辛苦,欣赏

 
里玫

回复时间:2011-10-31 15:25
谢谢几位前辈的鼓励。刚起步学习,现在属于初级阶段,看看这个年纪能否接受新的挑战?呵呵,现在涉及到的只是中学简单的数学知识,以后还有高中的三角解析几何等等;不知能否坚持到底.......




----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
wu2011

回复时间:2011-11-1 03:13
很好的教程,很好的效果!
有一小小建议:无限添加,舞台会变得密密麻麻,建议有个数量限制,超出了就先删除最底层那个,再添加!
var quantity:int=数量;
if (numChildren>quantity) {
var movieClip:MovieClip=getChildAt(0) as MovieClip;
removeChild(movieClip);
movieClip=null;
}

 
里玫

回复时间:2011-11-1 12:29
我正在3.0脚本的学习中,不少内容还没有学到。对你的建议很感兴趣,先把你说的代码粘贴到了到原来的脚本末尾,按自己的理解,把“数量”改成了10,想限制在点击10次,是否对?
另外,下面的代码我加上了理解后的注释,请检查是否有误?
测试结果:小球的点击没有被限制在10次。看样子我对“数量”的定义错了。请指教!

var quantity:int=10;//点击数字限定为10次
if (numChildren>quantity) {//如果小球显示数字大于10个
var movieClip:MovieClip=getChildAt(0) as MovieClip;//重新定义多出的movieClip对象
removeChild(movieClip);//移除这个多出的movieClip
movieClip=null;//这个movieClip无效。
}




----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
wu2011

回复时间:2011-11-2 12:22
论坛老师多如牛毛,也只是初级的东西,既然楼主问到,小弟吃饱饭没事做也就献丑一下啦!
也祝楼主早日学会、掌握,使楼主高超的动画水平再如虎添翼!

下面我简单举个例子:

//针对这个例子,因为舞台有其它元件,为了更好地管理深度!所以首先建立一个空的容器,将new出来的对象全部放到这个容器

var movieClip:MovieClip=new MovieClip();
addChild(movieClip);
stage.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(event:MouseEvent):void {
var ball:MovieClip=new MovieClip();
ball.graphics.beginFill(Math.random()*0xffffff);
ball.graphics.drawCircle(0, 0, Math.random()*30+10);
ball.graphics.endFill();
ball.x=mouseX;
ball.y=mouseY;
movieClip.addChild(ball);
//将ball添加到movieClip容器,此时ball的父级容器是movieClip,而不是时间轴(如果代码是写在时间轴的),所以很好地管理深度
if (movieClip.numChildren>30) {
//movieClip容器的子对象大于30
var extendsBall:MovieClip=movieClip.getChildAt(0) as MovieClip;
//为取得null的方法,将movieClip容器最底层的子对象(ball)类型转换、继承
//AS3的深度管理是这样的,当删除下层对象,上面的自动跌落去
movieClip.removeChild(extendsBall);
//删除,但还尚在内存之中
extendsBall=null;
//清空
}
}


 
wu2011

回复时间:2011-11-2 12:37
另外,我还将该例写成类文件,有兴趣就看看!

Ball.as

package {
import flash.display.Sprite;
import flash.display.GradientType;
import flash.geom.ColorTransform;
import flash.filters.DropShadowFilter;
public class Ball extends Sprite {
public var radius:Number;
public var vx:Number=0;
public var vy:Number=0;
public function Ball(_radius:Number,r:Number,g:Number,b:Number,color:uint):void {
this.radius=_radius;
this.graphics.beginGradientFill(GradientType.RADIAL,[0xffffff,0xff9999],[1,1],[0,80]);
this.graphics.drawCircle(0,0,_radius);
this.transform.colorTransform=new ColorTransform(r,g,b);
this.filters=[new DropShadowFilter(2,45,color)];
}
}
}

Main.as

package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
public class Main extends Sprite {
private var sprite:Sprite=new Sprite();
public function Main():void {
addChild(sprite);
stage.addEventListener(MouseEvent.CLICK,clickHandler);
}
private function clickHandler(event:MouseEvent):void {
var ball:Ball=new Ball(10+Math.random()*20,0.5+Math.random(),0.5+Math.random(),0.5+Math.random(),0x0000);
ball.vx=10*Math.random()-5;
ball.vy=10*Math.random()-5;
ball.x=mouseX;
ball.y=mouseY;
sprite.addChild(ball);
if (sprite.numChildren>30) {
var extendsBall:Ball=sprite.getChildAt(0) as Ball;
sprite.removeChild(extendsBall);
extendsBall=null;
}
ball.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function enterFrameHandler(event:Event):void {
var ball:Ball=event.target as Ball;
//转换类型、继承
ball.x+=ball.vx;
ball.y+=ball.vy;
var left:Number=0;
var right:Number=stage.stageWidth;
var top:Number=0;
var bottom:Number=stage.stageHeight;
if (ball.x+ball.radius>right) {
ball.x=right-ball.radius;
ball.vx*=-1;
} else if (ball.x - ball.radius< left) {
ball.x=left+ball.radius;
ball.vx*=-1;
}
if (ball.y+ball.radius>bottom) {
ball.y=bottom-ball.radius;
ball.vy*=-1;
} else if (ball.y - ball.radius< top) {
ball.y=top+ball.radius;
ball.vy*=-1;
}


}
}
}



本帖最近评分记录
梦圆.   2011-11-2 22:58  金钱  +10   感谢WU2011的真诚交流和精彩分享。
梦圆.   2011-11-2 22:58  魅力  +10   感谢WU2011的真诚交流和精彩分享。
 
雨虹天地清

回复时间:2011-11-2 13:45
哈哈哈哈,AS高手很多很多呀。但玩脚本,自己学习着写会更有趣味的。每天进步一点点,N年过后也会成才的。问好了。




----------------------------------------------
相信自己,相信梦想,明天更美好。
 
里玫

回复时间:2011-11-2 15:10
我是初学者,wu2011朋友对AS掌握的程度是我努力的目标。提供的代码我已保留,不想简单复制粘贴,懂得原理后再使用比较好一点。再次谢谢你了。
不久前,网上的老师教了一个移动遮罩效果。注册了侦听器以后,给这个遮罩定义了属性,因为它是跟随鼠标移动的,所以在graphics.drawRec后面的小括号里,遮罩的xy坐标和鼠标的坐标联系在一起了,代码是:sp.graphics.drawRect(mouseX-50,mouseY-50,100,100); 此时,测试影片,这个sp已经随着鼠标移动而移动了。但是,老师后面又有了一句让sp跟随鼠标移动的代码:sp.graphics.moveTo(mouseX,mouseY); 测试时也没有异常出现。问题是,当我把这行代码屏蔽后,整个动画的移动遮罩效果也成立。所以请教wu2011:这行代码是否是多余的呢?老师为什么要建立这行代码呢?
以下是这个实例的脚本:
var sp:Sprite=new Sprite();
addChild(sp);
addEventListener(Event.ENTER_FRAME,fr);
function fr(e:Event) {
sp.graphics.beginFill(0xff00ff,1);
sp.graphics.drawRect(mouseX-50,mouseY-50,100,100); //测试后发现,现在已经实现了鼠标拖曳sp的效果。
sp.graphics.endFill();
/*sp.graphics.moveTo(mouseX,mouseY);*/
//测试:屏障了这句代码后,同样有随鼠标移动的效果。但是第6行的sp的坐标不与鼠标坐标相连,即使应用了这行移动鼠标的代码,也不能实现鼠标拖曳。那么,这句代码为什么还要呢?)
}
tu_mc.mask=sp;
mouse.hide();
屏蔽/*sp.graphics.moveTo(mouseX,mouseY);*/以后的测试效果:

[全屏欣赏]




----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
雪影无痕

回复时间:2011-11-2 21:43
理查德老师的这个制作真的好绚丽哦,刚在玩,偶滴宝贝也走过来玩了,引用他的话:太漂亮了,好爽啊!呵呵,由衷佩服与欣赏理查德老师的孜孜不倦的好学精神与创制能力,制作辛苦了,问好~~




----------------------------------------------
你有你的精彩 我有我的自在 ——ツ影子┇﹍★
 
梦圆.

回复时间:2011-11-2 22:56
佩服里玫老师的学习精神,钻研态度,握手致意!




----------------------------------------------
心若在 梦就在
 
里玫

回复时间:2011-11-2 23:03

原帖由 雪影无痕 于 2011-11-2 21:43 发表
理查德老师的这个制作真的好绚丽哦,刚在玩,偶滴宝贝也走过来玩了,引用他的话:太漂亮了,好爽啊!呵呵,由衷佩服与欣赏理查德老师的孜孜不倦的好学精神与创制能力,制作辛苦了,问好~~

影子的宝贝一定在特嫩特可爱的年龄吧?告诉你家小贝贝,给我一个他的笑脸,我让他向小彩球一样,点一下冒出来一个,冲着影子妈咪笑一笑,这更好玩儿呢!




----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
里玫

回复时间:2011-11-2 23:08

原帖由 梦圆. 于 2011-11-2 22:56 发表
佩服里玫老师的学习精神,钻研态度,握手致意!

谢谢梦圆的鼓励哦!刚刚试水脚本控制影片剪辑,都是最初浅的概念,还不知道后面是否能接受呢;




----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
wu2011

回复时间:2011-11-3 15:36
实在是不知道老师的用意,先讲讲moveTo()方法吧,我知道用lineTo()方法画线时,一般使用moveTo()方法作为第一条画图指令,可以直接把起点移动到目标位置,否则画第一条线时默认起点位置是(0,0),在画完一条线后,这条线的终点位置就会成为下一条线的起点位置。
请以下两个实例分别复制代玛测试一下,你就会很清晰moveTo()方法

var sampleSprite:Sprite=new Sprite();
addChild(sampleSprite);
sampleSprite.graphics.lineStyle(3,0x000000,1);
stage.addEventListener(MouseEvent.MOUSE_DOWN,downHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,upHandler);
function downHandler(event:MouseEvent):void {
sampleSprite.graphics.moveTo(mouseX,mouseY);
//用moveTo()方法把起点移动到目标位置
//如果注释了测试看看又是什么效果的
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
}
function moveHandler(event:MouseEvent):void {
sampleSprite.graphics.lineTo(mouseX,mouseY);
//画线
}
function upHandler(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
}



var sampleSprite:Sprite=new Sprite();
sampleSprite.graphics.clear();
sampleSprite.graphics.lineStyle(2,0x000000);
sampleSprite.graphics.beginFill(0xff00ff,1);
sampleSprite.graphics.moveTo(100,0);
//用moveTo()方法把起点移动到目标位置
//如果注释了测试看看又是什么效果的
sampleSprite.graphics.lineTo(-100,100);
sampleSprite.graphics.lineTo(-50,0);
sampleSprite.graphics.lineTo(-100,-100);
sampleSprite.graphics.lineTo(100,0);
addChild(sampleSprite);
sampleSprite.x=stage.stageWidth/2;
sampleSprite.y=stage.stageHeight/2;

移动遮罩实例graphics的drawRect()画矩形方法不需要moveTo()方法,
至于红字内容,要理解的这个效果是不断画出一个新的图形覆盖原有的图形的效果,假如初始化鼠标不在舞台,之后再移入,
那么就在mouseX-50,mouseY-50这位置绘图,所以只要鼠标移入的位置不在初始化那个图形之上,看起来就出现BUG了!!

说完,睡觉!按此在新窗口浏览图片


PS:初始化鼠标不在舞台,假如mouseX大于舞台的宽度的话,mouseX默认为舞台的宽度,sp就在舞台的右边!

 
里玫

回复时间:2011-11-3 16:06
感谢wu2011朋友的热心指导;你介绍的moveTo的应用方法还是很有用的,但是这不是我说的问题所在;我想请教你的是:
在移动遮罩这段语句中,老师说:最后第二行moveTo语句实现了sp这个遮罩跟随鼠标走的效果。 但是我发觉,不用这行语句,上述的代码已经可以让sp这个遮罩跟着鼠标走了。
所以我问你:这句moveTo语句为什么要设置?




----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
兰蕙hn
原创音画组

回复时间:2011-11-3 21:40
里玫老师真是一位难得的好老师,每次观赏你的回帖评论,既是学习,也是一种享受,现在又做了这么好的实例教程,真是太好了,效果既新鲜漂亮,又能增加学员的兴趣,非常欣赏里玫老师这种无私的奉献精神,给老师献花花!




----------------------------------------------
取个网名叫“兰蕙”,并不是真的认为自己就是兰心蕙质的女人,而是把这作为我的一种追求,一种境界。
 
里玫

回复时间:2011-11-3 23:19

原帖由 兰蕙hn 于 2011-11-3 21:40 发表
里玫老师真是一位难得的好老师,每次观赏你的回帖评论,既是学习,也是一种享受,现在又做了这么好的实例教程,真是太好了,效果既新鲜漂亮,又能增加学员的兴趣,非常欣赏里玫老师这种无私的奉献精神,给老师献花花!

我是边学习边和朋友们交流自己的学习体会呢,谢谢兰蕙的支持啊!




----------------------------------------------
加入华声论坛,丰富自己的娱乐世界。
 
发新帖 新投票
 回帖
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


使用个人签名
(请您文明上网理性发言!并遵守相关规定贴文发布前,请确认贴文内容完全由您个人创作或您得到了版权所有者的授权。版权声明
   



Processed in 0.034883 s, 11 q - sitemap,