標題: CS4打造鼠標觸發的焰火飄落互動特效 [打印本頁]
作者: 讓一切隨風 時間: 2013-10-3 09:34 標題: CS4打造鼠標觸發的焰火飄落互動特效
本例介紹用flashcs4製作鼠標觸發的焰火飄落互動特效，主要是用計算鼠標跟隨對象來產生具有一定規律的星火特效。
思路：導入背景素材，然後製作出焰火飄落特效。創建文檔類，產生鼠標跟隨的多角星形特效；創建元件類的擴展類，產生隨機大小的火花效果。
[flash]http://www.flash1890.com/upFiles/download/2013052068004513.swf[/flash]
用鼠標在畫面上劃過，即可看到絢麗的互動特效
本帖隱藏的內容需要積分高於 100 才可瀏覽
作者: 讓一切隨風 時間: 2013-10-3 09:38
一 製作焰火飄落特效
(1)新建一個大小為500×300像素，幀頻為30fps的空白文檔。按Ctrl+R組合鍵導入西湖夜景作為圖片，然後設置其坐標為(0，0)，如圖1所示，再採用前面的方法在“屬性”面板中添加Main文檔類。
[attach]1314[/attach]
圖1：背景圖
作者: 讓一切隨風 時間: 2013-10-3 09:41
(2)按Ctrl+F8組合鍵新建一個影片剪輯(名稱為Star_mc)，進入該影片剪輯的編輯區域，然後按住Shift+Alt組合鍵的同時使用“橢圓工具”在該影片剪輯的中心點繪製一個圓形。
[attach]1315[/attach]
圖2：繪製圓形
技巧與提示：圖形的填充色類型為“放射狀”，第1個色標顏色為(R:255，G:0，B:0)，第2個色標顏色為(R:153，G:0 ，B:0)，第3個色標顏色為(R:153，G:0，B:0)，Alpha為0%。
作者: 讓一切隨風 時間: 2013-10-3 09:47
(3)新建一個star圖層，再單擊“工具箱”中的“多角星形工具”按鈕，並在“屬性”面板中設置好該工具的參數，然後按住Shift+Alt組合鍵的同時在影片剪輯的中心點繪製一個如圖3所示的星形。
[attach]1316[/attach]
圖3 繪製多角星形
作者: 讓一切隨風 時間: 2013-10-3 09:49
(4)使用“選擇工具”調整好星形的頂點位置，如圖4所示。
[attach]1317[/attach]
作者: 讓一切隨風 時間: 2013-10-3 09:50
5選擇調整好的多角星形，然後原位複制出一份，按Ctrl+Alt+S組合鍵打開“縮放和旋轉”對話框，設置縮放為40%，再設置其顏色為白色，如圖5所示。
[attach]1318[/attach]
作者: 讓一切隨風 時間: 2013-10-3 09:54
(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鍵的同時使用“矩形工具”
以該影片剪輯中心點為起點繪製一個如圖6所示的矩形。
[attach]1319[/attach]
圖6 繪製矩形
作者: 讓一切隨風 時間: 2013-10-3 09:57
(7)使用“任意變形工具”選擇矩形，然後按Ctrl+T組合鍵打開“變形”面板，設置旋轉為45°，再單擊“重製選區和變形”按鈕，複製出3份圖形，如圖7所示
[attach]1320[/attach]
圖7 複製圖形
(8)複製出5個圖形，然後將其調整成如圖8所示的顏色，再將復制出的圖形轉換為影片剪輯，並將其分別命名為01、02、03、04和05 。
[attach]1321[/attach]
圖8 複製圖形
作者: 讓一切隨風 時間: 2013-10-3 10:02
9將01、02、03、04和05 影片剪輯分別放置在Magic_mc圖層的5個關鍵幀上，然後分別為其添加不同的“發光”濾鏡，再新建一個AS圖層，最後在“動作-幀”面板中輸入stop()：程序，如圖9所示。
[attach]1322[/attach]
圖9 應用濾鏡效果
作者: 讓一切隨風 時間: 2013-10-3 10:05
二、 創建元件類
添加控制代碼(1)採用前面的方法分別為Magic_mc和Star_mc影片剪輯添加元件類，如圖10所示。
[attach]1323[/attach]
圖10 添加元件類
作者: 讓一切隨風 時間: 2013-10-3 10:08
(2)新建一個ActionScript文件，將其命名為Main，然後將其保存在該實例的文件夾中，再輸入控制代碼。
本帖隱藏的內容需要回復才可以瀏覽
技巧與提示：該文檔類基本包含了“星星灑落”實例中Main文檔類的知識，此外第18行代碼為Mouse類的hide()方法，用於隱藏鼠標指針，在使用該方法前必須先導入Mouse類(如第11行代碼)。
該文檔類定義了一個私有屬性Star，第19行代碼是為該屬性賦值，值為所創建的元件類(Star_mc)，並將其添加到顯示列表中(如第20行代碼)，而24和25行代碼是為該元件類應用鼠標跟隨效果。
(3)同樣新建一個ActionScript文件，然後輸入控制代碼。
本帖隱藏的內容需要回復才可以瀏覽
技巧與提示：
第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方法進行舍入並取得整數，這樣當鼠標指針由下往上移動時，就會產生星火飄落的效果，如圖11所示。
[attach]1324[/attach]
圖11 星火飄落效果
第30行代碼是為火花加入y軸坐標方向上的一個固定加速度，而第31行代碼則是火花在x軸坐標方向上的一個-5~5之間的隨機加速度值。
(4)按Ctrl+Enter組合鍵發布程序。
| 歡迎光臨 多姿多采 創作與製圖論壇 (http://colorful.joinbbs.net/) |
Powered by Discuz! 7.2 |
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line