×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载随时随地聆听大师开讲/课堂酷素材!视频教程打包下手绘教程
咔咔摄影抠图教程路径专辑photoshop cs3视频教程 
查看: 2052|回复: 14

(转载)星火飘落

[复制链接]

该用户从未签到

发表于 2009-11-15 13:43:08 | 显示全部楼层 |阅读模式
本教程转自《Flash CS4动画设计与制作208例》
Part 1  制作星火特效
(1)新建一个大小为500×300像素,帧频为30fps的空白文档。导入素材“西湖夜景.jpg”文件,然后设置其坐标为(0,0),如图8-1所示,再采用前面的方法在“属性”面板中添加Main文档类。
  
图8-1  导入背景
(2)按Ctrl+F8组合键新建一个影片剪辑(名称为Star_mc),进入该影片剪辑的编辑区域,然后按住Shift+Alt组合键的同时使用“椭圆工具”在该影片剪辑的中心点绘制一个圆形。
  
图8-2  绘制圆形
技巧与提示:
图形的填充色类型为“放射状”,第1个色标颜色为(R:255,G:0,B:0),第2个色标颜色为(R:153,G:0,B:0),第3个色标颜色为(R:153,G:0,B:0),Alpha为0%。
(3)新建一个star图层,再单击“工具箱”中的“多角星形工具”按钮 ,并在“属性”面板中设置好该工具的参数,然后按住Shift+Alt组合键的同时在影片剪辑的中心点绘制一个如图8-3所示的星形。
  
图8-3  绘制多角星形
(4)使用“选择工具”调整好星形的顶点位置,如图8-4所示。

图8-4  调整顶点
(5)选择调整好的多角星形,然后原位复制出一份,按Ctrl+Alt+S组合键打开“缩放和旋转”对话框,设置缩放为40%,再设置其颜色为白色,如图8-5所示。

图8-5  拷贝并缩放图形
(6)返回到“场景1”,按Ctrl+F8组合键新建一个影片剪辑(名称为Magic_mc),再设置填充类型为“放射状”,第1个色标颜色为(R:255,G:255,B:255), 第2个色标颜色为(R:255,G:255,B:204),第3个色标颜色为(R:255,G:204,B:0),第4个色标颜色为(R:255,G:102,B:0),第5个色标颜色为(R:153,G:0,B:0),Alpha为0%,然后按住Alt键的同时使用“矩形工具”以该影片剪辑中心点为起点绘制一个如图8-6所示的矩形。

图8-6  绘制矩形
(7)使用“任意变形工具”选择矩形,然后按Ctrl+T组合键打开“变形”面板,设置旋转为45°,再单击“重制选区和变形”按钮 ,复制出3份图形,如图8-7所示。

图8-7  复制图形
(8)复制出5个图形,然后将其调整成如图8-8所示的颜色,再将复制出的图形转换为影片剪辑,并将其分别命名为01、02、03、04和05 。

图8-8  复制图形
(9)将01、02、03、04和05 影片剪辑分别放置在Magic_mc图层的5个关键帧上,然后分别为其添加不同的“发光”滤镜,再新建一个AS图层,最后在“动作-帧”面板中输入stop():程序,如图8-9所示。

图8-9  应用滤镜效果

Part 2  创建元件类
(1)采用前面的方法分别为Magic_mc和Star_mc影片剪辑添加元件类,如图8-10所示。
  
图8-10  添加元件类
(2)新建一个ActionScript文件,将其命名为Main,然后将其保存在该实例的文件夹中,再输入控制代码。

AS3代码
1.        /**   
2.        * 该类为主程序类   
3.        * @author lbynet   
4.        * @version 0.1   
5.        */   
6.        package {   
7.            import flash.display.Sprite;   
8.            import flash.display.MovieClip;   
9.            import flash.events.Event;   
10.            import flash.events.MouseEvent;   
11.            import flash.ui.Mouse;   
12.            public class Main extends Sprite {   
13.                   
14.                private var star:MovieClip;   
15.          
16.                public function Main() {   
17.          
18.                    Mouse.hide();   
19.                    this.star = new Star_mc();   
20.                    addChild(star);   
21.                    stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);   
22.                }           
23.                private function moveHandler(e:MouseEvent):void {   
24.                    this.star.x = stage.mouseX;   
25.                    this.star.y = stage.mouseY;   
26.                        
27.                    var _mc = new Magic_mc();   
28.                    _mc.x = stage.mouseX;   
29.                    _mc.y = stage.mouseY;   
30.                    addChild(_mc);   
31.                    _mc.addEventListener(Event.ENTER_FRAME, RemoveDrop);   
32.                }   
33.                private function RemoveDrop(event:Event) {   
34.                    var _mc:MovieClip = event.target as MovieClip;   
35.                        
36.                    if (_mc.scaleX <= 0) {   
37.                        _mc.removeEventListener(Event.ENTER_FRAME, RemoveDrop);   
38.                        removeChild(_mc);   
39.                    }   
40.                    //trace(this.numChildren)   
41.                }   
42.                   
43.            }   
44.        }   
技巧与提示:
该文档类基本包含了“星星洒落”实例中Main文档类的知识,此外第18行代码为Mouse类的hide()方法,用于隐藏鼠标指针,在使用该方法前必须先导入Mouse类(如第11行代码)。
该文档类定义了一个私有属性Star,第19行代码是为该属性赋值,值为所创建的元件类(Star_mc),并将其添加到显示列表中(如第20行代码),而24和25行代码是为该元件类应用鼠标跟随效果。
(3)同样新建一个ActionScript文件,然后输入控制代码。

AS3代码
1.        /**   
2.        * 该类为扩展元件类   
3.        * @author lbynet   
4.        * @version 0.1   
5.        */   
6.        package {   
7.                
8.            import flash.display.MovieClip;   
9.            import flash.events.Event;   
10.          
11.            public class Magic_mc extends MovieClip {   
12.                   
13.                private var dis:Number;   
14.                   
15.                public function Magic_mc() {   
16.                    init();   
17.                }   
18.                private function init() {   
19.                    var Random = 1 + Math.round(Math.random()*4);   
20.                    this.gotoAndStop(Random);   
21.                        
22.                    this.scaleX = this.scaleY = Math.random();   
23.                    //产生随机数-5到5之间的随机数   
24.                    dis = Math.round((Math.random()-.5)*10);   
25.                    this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);   
26.                        
27.                }   
28.                private function enterFrameHandler(event:Event) {   
29.                        
30.                    this.y += 5;   
31.                    this.x += dis;   
32.                        
33.                    this.scaleX -=.005;   
34.                    this.scaleY -=.005;   
35.                }   
36.                   
37.            }   
38.        }   
技巧与提示:
第19和20行代码是为该元件类创建一个1~5之间的随机数,使该影片剪辑元件类在实例化(被创建时)时将播放头移到并停止在指定的时间帧上。
Math.random()方法产生0~1之间的随机数,Math.random()*4方法返回到0~4之间的随机数,而Math.round()方法用于向上或向下舍入为最接近的整数并返回该值,所以1+Math.round(Math.random()*4)方法取得1~5之间的随机整数值;gotoAndStop()语句使影片剪辑的播放头移到并停止在指定的时间帧上。
通过使用Math.random()-0.5 方法来生成-0.5~0.5之间的随机数,然后乘以10得到-5~5之间的随机数,再使用Math.round方法进行舍入并取得整数,这样当鼠标指针由下往上移动时,就会产生星火飘落的效果,如图8-11所示。

图8-11  星火飘落效果
第30行代码是为火花加入y轴坐标方向上的一个固定加速度,而第31行代码则是火花在x轴坐标方向上的一个-5~5之间的随机加速度值。
(4)按Ctrl+Enter组合键发布程序。

本帖子中包含更多资源

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

x

评分

参与人数 1 +3 +1 收起 理由
zctmh0336 + 3 + 1 谢谢分享

查看全部评分

该用户从未签到

 楼主| 发表于 2009-11-15 13:44:05 | 显示全部楼层
练习

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2009-11-15 14:21:09 | 显示全部楼层
以前做的,忘记是在哪里看的教程。

本帖子中包含更多资源

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

x

评分

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

查看全部评分

回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2009-11-15 15:04:51 | 显示全部楼层
谢谢分享
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2009-11-15 16:12:14 | 显示全部楼层
谢谢分享
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-7-13 18:11:38 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-7-13 18:00:30 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-7-13 18:09:14 | 显示全部楼层
难得一见的好帖
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-7-13 18:19:46 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-7-13 17:43:32 | 显示全部楼层
LZ真是人才
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:17:53 | 显示全部楼层
很不错。。。
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:28:05 | 显示全部楼层
好帖就是要顶
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:40:49 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 20:50:51 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:37:41 | 显示全部楼层
LZ真是人才
回复 支持 反对

使用道具 举报

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

本版积分规则