×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 9391|回复: 26

[AS] Flash Spray Effect(AS3代码实现喷枪效果 二楼附译文)[本文已收录教程库]

[复制链接]
发表于 2008-10-28 13:31:30 | 显示全部楼层 |阅读模式




In this tutorial, I will show you how to create a spray effect in Flash. You can try the movie above to see how it looks. Change the color, density and size of the spray to see how the effect changes. Let's get started straight away.
Setting up the environment 1. Create a new document of size 400x400.
2. Import an image to the stage. Make sure the image is size 400x300.
3. Position the image on the top left corner.
4. Convert the image into a movie clip. Name it "imageMC" and set the registation point to the center.
5. Give the image an instance name of "drawingArea".
6. Open your Components library (Ctrl + F7). Drag one Slider to the stage. Position it however you want.
7. Give the slider an instance name of "sizeSlider". Apply the following settings.

8. Drag another slider to the stage.
9. Give it an instance name of "densitySlider". Apply the following settings.

10. Drag a color picker to the stage. Give it an instance name of "myColorPicker".
Moving into Actionscript 11. Open the actions panel and type the following.
/*We need to create a BitmapData object in order towork with pixels of a Bitmap object.We want the wallCanvas to be transparentat the beginning, that's why we use the 0x00ffffffvalue as a parameter.*/var wallCanvas:BitmapData  = new BitmapData(stage.stageWidth,stage.stageHeight - 100,true, 0x00ffffff);//Create a Bitmap object to refer to the  BitmapData objectvar bitmap:Bitmap = new Bitmap(wallCanvas);//Add the bitmap to the stageaddChild (bitmap);//We listen for the mouse down event on the walldrawingArea.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);//We listen for the mouse up event for the whole stagestage.addEventListener (MouseEvent.MOUSE_UP, mouseUpHandler);//This is the color of the sprayvar color:uint;//This is the maximum radius of the sprayvar maxRadius:Number;//This is the density of the sprayvar density:Number;//This is called when the mouse is down on the wallfunction mouseDownHandler (event:MouseEvent):void {        //Add the EVENT_FRAME so we can draw in each frame        addEventListener (Event.ENTER_FRAME, onEnterFrame);}//This is called when the mouse is releasedfunction mouseUpHandler (event:MouseEvent):void {        //We don't need the EVENT_FRAME, if the mouse is released (nothing to draw)        removeEventListener (Event.ENTER_FRAME, onEnterFrame);}//This function is responsible for the whole drawingfunction onEnterFrame (event:Event):void {                //Get the size from the sizeSlider        maxRadius = sizeSlider.value;                /*        Get the color from the myColorPicker.        We add 0xff000000 to the color to make the pixel        visible when we draw it (we draw the pixel in the for loop).        */        color = myColorPicker.selectedColor + 0xff000000;                //Get the density from the densitySlider        density = densitySlider.value;                /*         The density defines how many loops we have.        In other words, how many pixels are drawn in each frame.        */        for (var i:int = 0; i < density; i++) {                                //Calculate a random angle                var angle:Number = Math.random() * Math.PI * 2;                                // Calculate a random radius for the pixel to be drawn                var radius:Number = Math.random() * maxRadius;                                //Calculate the x and y positions                var xPos:Number = mouseX + Math.cos(angle) * radius;                var yPos:Number = mouseY + Math.sin(angle) * radius;                                //Draw the pixel.                wallCanvas.setPixel32 (xPos, yPos, color);        }}You are done, test your movie! If you have any questions, please visit the forum. Have a nice day!

[ 本帖最后由 xyl7422 于 2008-11-20 11:01 编辑 ]
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=212266
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 2金币 +6 热心度 +2 收起 理由
清风掠影 + 3 + 1 对论坛做出贡献
sanbos + 3 + 1 多谢鱼头,这篇文章把我译惨了,太乱了。

查看全部评分

发表于 2008-10-30 00:06:26 | 显示全部楼层

中文译文

酷素材
译正文前,先说明这是AS3文档,如果是AS2文档将不会有要用到的两个组件。(译者)
                                       flash喷枪效果
进入这个教程,你将看到怎样用flash创建一个喷枪效果。你可以试一下上面的影片看它如何实现的。
改变喷枪的颜色,密度和尺寸看看效果会发生什么变化,让我们马上开始吧。
设置环境
1.创建一个新的大小为400x400的文档。
2.导入一张图片到舞台上。调整图片大小为400x300.
3.使图片的位置在左上角。(相对于舞台左对齐,上对齐。译者注)。
4.将图片转换为MC,为它取名为:"imageMC",将注册点调到图片中心。
5.图片实例名称设为:"drawingArea".
6.打开你的组件库(Ctrl+f7),拖一个Slider组件舞台上。把它放到你喜欢的位置。
7.给这个Slider组件取一个实例名称"sizeSlider". 添加下面的设置。

8.拖另一个slider组件到舞台。
9.给它取一个实例名称:"densitySlider". 添加如下设置。

10.拖一个color picker 组件到舞始,给它取一个实例名称: "myColorPicker".
进入 Actionscript
11.打开动作面板输入下列代码:
/*我们需要创建一个BitmapData对象以便以一个像素图形对象工作。我们希望wallCanvas一开始时是透明的,这就是为什么我们用0x00ffffff值作参数。*/
var wallCanvas:BitmapData  = new BitmapData(stage.stageWidth,stage.stageHeight - 100,true, 0x00ffffff);
//创建一个归类于 BitmapData对象的位图对象。
var bitmap:Bitmap = new Bitmap(wallCanvas);
//在舞台上添加一个位图
addChild (bitmap);
//监听墙上的鼠标点下事件
drawingArea.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);
//监听整个舞台上的鼠标放开事件
stage.addEventListener (MouseEvent.MOUSE_UP, mouseUpHandler);
//喷枪的颜色
var color:uint;
//喷枪的最大半径
var maxRadius:Number;
//喷枪的密度
var density:Number;
//当鼠标在墙上点下时调用
function mouseDownHandler (event:MouseEvent):void {
//增加EVENT_FRAME 这样我们可以在每一帧绘制
addEventListener (Event.ENTER_FRAME, onEnterFrame);
}
//当鼠标放开时调用
function mouseUpHandler (event:MouseEvent):void {
//如果鼠标放开时(没有绘制),我们就不需要EVENT_FRAME了
removeEventListener (Event.ENTER_FRAME, onEnterFrame);
}  
//这个函数负责整个绘制过程
function onEnterFrame (event:Event):void {  
//从sizeSlider中获得尺寸
maxRadius = sizeSlider.value;
/*从myColorPicker.中获得颜色,当我们绘制时(我们循环绘制像素)我们使用0xff000000创建像素的颜色。*/
  color = myColorPicker.selectedColor + 0xff000000;
//从densitySlider中获得密度
density = densitySlider.value;
/*这个密度定义了我们循环了多少次,换言之,在每一帧绘制了多少像素*/
  for (var i:int = 0; i < density; i++) {
//计算一个随机角度
var angle:Number = Math.random() * Math.PI * 2;  
//计算一个被画的像素的随机半径
var radius:Number = Math.random() * maxRadius;  
//计算x和y的位置
var xPos:Number = mouseX + Math.cos(angle) * radius;
var yPos:Number = mouseY + Math.sin(angle) * radius;
//画像素
wallCanvas.setPixel32 (xPos, yPos, color);  
   }
}
你已经完成了,如果有什么问题,请访问论坛。快乐的一天!
  1. var wallCanvas:BitmapData  = new BitmapData(stage.stageWidth,stage.stageHeight - 100,true, 0x00ffffff);
  2. var bitmap:Bitmap = new Bitmap(wallCanvas);
  3. addChild (bitmap);
  4. drawingArea.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);
  5. stage.addEventListener (MouseEvent.MOUSE_UP, mouseUpHandler);
  6. var color:uint;
  7. var maxRadius:Number;
  8. var density:Number;
  9. function mouseDownHandler (event:MouseEvent):void {
  10. addEventListener (Event.ENTER_FRAME, onEnterFrame);
  11. }
  12. function mouseUpHandler (event:MouseEvent):void {
  13. removeEventListener (Event.ENTER_FRAME, onEnterFrame);
  14. }  
  15. function onEnterFrame (event:Event):void {  
  16. maxRadius = sizeSlider.value;
  17.   color = myColorPicker.selectedColor + 0xff000000;
  18. density = densitySlider.value;
  19.   for (var i:int = 0; i < density; i++) {
  20. var angle:Number = Math.random() * Math.PI * 2;  
  21. var radius:Number = Math.random() * maxRadius;  
  22. var xPos:Number = mouseX + Math.cos(angle) * radius;
  23. var yPos:Number = mouseY + Math.sin(angle) * radius;
  24. wallCanvas.setPixel32 (xPos, yPos, color);  
  25.    }
  26. }
复制代码

[ 本帖最后由 sanbos 于 2008-10-30 00:15 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 4金币 +13 威望 +1 热心度 +4 收起 理由
祁连山 + 1 辛苦了,支持一下哈。
xyl7422 + 5 + 2 博士翻译教程辛苦了,支持下:)
清风掠影 + 5 + 1 辛苦了
zctmh0336 + 3 + 1 对论坛做出贡献

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-10-30 00:25:04 | 显示全部楼层

交个作业:

作业:

[ 本帖最后由 sanbos 于 2009-4-12 09:10 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +2 收起 理由
清风掠影 + 2 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-10-30 10:01:52 | 显示全部楼层


[ 本帖最后由 xyl7422 于 2008-11-20 12:57 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 做得不错,可以显示啊,我看到了。

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-10-30 10:06:15 | 显示全部楼层
酷素材
为什么我发的图片都显示不出来呢?(也就是看不见我自已怕作业),我是按规格发的啊!我的电脑有病?

[ 本帖最后由 十兄 于 2008-10-30 10:14 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-10-30 11:32:13 | 显示全部楼层

回复 5楼 十兄 的帖子

酷素材
我能看见。也许是你的场景颜色太深了!
回复 支持 反对

使用道具 举报

发表于 2008-10-30 11:38:49 | 显示全部楼层

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2008-10-30 12:03:50 | 显示全部楼层
7楼老师发的,我看见了,怎么回事啊!毛病出在那里呢?
sanbos老师发的我也看不见。
回复 支持 反对

使用道具 举报

发表于 2008-10-30 14:07:54 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2009-4-12 01:35:54 | 显示全部楼层
七楼的长老,怎样才能使喷枪变为线条?
回复 支持 反对

使用道具 举报

发表于 2009-10-5 22:49:13 | 显示全部楼层
肥鱼版主的,我涂不上颜色,好像只是一副图片,是什么原因呢?其它的都没事。
顺便交上我的作业!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 做得不错

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-10-6 21:39:50 | 显示全部楼层
11楼的作业:
回复 支持 反对

使用道具 举报

发表于 2009-10-6 21:41:15 | 显示全部楼层
11# 从天而降


肥鱼版主的没问题啊,可以涂上颜色的。
回复 支持 反对

使用道具 举报

发表于 2009-10-6 23:07:50 | 显示全部楼层
恩,昨天可能是网速的问题吧,今天可以了!
回复 支持 反对

使用道具 举报

发表于 2010-2-8 17:02:41 | 显示全部楼层
交作业喽

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则