2012-11-24

Flash:雪花飄落


結果預覽


請依照下列步驟進行:

(一) 練習檔案預備

1. 請下載已初步完成之練習檔 [snowfall.zip]
2. 解壓後在 Flash CS5 中開啟

(二) 事先準備
1. 畫面大小為 800x600
2. 背景圖檔,尺寸為 800x600
3. Flash 用之材質元件 (雪花、雪球、星星等)

(三) 開始佈置
1. 開新檔案,重設影片大小為 800x600 像素
2. 在元件庫內有『光芒、雪花』之角色,各元件之時間軸內具有各自的動畫變化 (檔案 snow1.fla)
3. 在各圖層佈置背景及元件 (檔案snow2.fla)

(四) 加入產生大量雪花的程式
1. 在元件『雪花(會轉動)』上設定類別連接 (按右鍵->屬性->進階)
  (1) 匯出給 ActionScript 使用 (打勾)
  (2) 類別欄位輸入『Snow』
2. 新增 Scripts 圖層,按 F9 寫程式 (檔案 snow3.fla)
=====================================
var snowNum:int = 100;  // 雪花數量

for(var i:int=0; i<snowNum; i++)
{
// 產生 Snow 物件,並加入舞台
var snow_mc:MovieClip = new Snow();
this.addChild(snow_mc);

// 隨機亂數指定位置 (x,y)
snow_mc.x = Math.random() * 800;
snow_mc.y = Math.random() * 600;

// 設定雪花的名稱
snow_mc.name = "snow" + i;
}
=====================================

(五) 修正程式:
1. 調整各個雪花的屬性
2. 雪花下降的程式
=====================================
import flash.display.MovieClip;

var snowNum:int = 100;  // 雪花數量

for(var i:int=0; i
<snowNum; i++)
{
// 產生 Snow 物件,並加入舞台
var snow_mc:MovieClip = new Snow();
this.addChild(snow_mc);

// 隨機亂數指定位置 (x,y)
snow_mc.x = Math.random() * 800;
snow_mc.y = Math.random() * 600;

// 亂數設定不同的縮放比例
var scale:Number = Math.random() * 0.2 + 0.4;
snow_mc.scaleX = scale;
snow_mc.scaleY = scale;

// 亂數設定透明度
snow_mc.alpha = Math.random() * 0.4 + 0.3;

// 亂數決定雪花開始旋轉的影格 (雪花內部的影格有9格)
snow_mc.gotoAndPlay(Math.floor(Math.random()*9)+1);

// 亂數決定雪花的下降速度
snow_mc.speedY = Math.random() * 7 + 5;

// 設定雪花的名稱
snow_mc.name = "snow" + i;
}

// 加入事件
this.addEventListener(Event.ENTER_FRAME, doSnowing);

function doSnowing(e:Event):void
{
for(var i:int=0; i
<snowNum; i++)
{
// 依名稱取出各雪花物件
var snow_mc:MovieClip = this.getChildByName("snow"+i) as MovieClip;

// 使 Y 值座標增加
snow_mc.y += snow_mc.speedY;

// 超過底部時會到頂端
if(snow_mc.y>600)
{
snow_mc.y = 0;
}
}
}
=====================================

(完成檔案 snow4.fla)

教材參考:ActionSctipt 3.0 互動媒體設計 (學貫.羅智軒)

張貼留言

Whatsapp Button works on Mobile Device only

Start typing and press Enter to search