電腦科學與技術學院
課程設計報告
課程名稱： 多**技術
專業： 計算機應用技術
班級： 1401 班
學號： 201412588022
姓名： 徐邵
指導老師： 李紅斌
二〇一六年六月二十日
電腦科學與技術學院課程設計成績單
課程名稱：高階網頁設計課程設計指導教師： 張志輝
基於as3.0的「青蛙跳」遊戲的設計與實現
1、設計目標：
本次設計是製作的乙個測試智力的小遊戲--「青蛙跳」。通過單擊滑鼠移動兩邊的青蛙，讓左邊的小青蛙與右邊的小青蛙位置互換，其中包括兩個動畫效果，乙個是跳，另乙個是躍，他們都是通過逐幀動畫來實現。而要使兩邊的青蛙互換，就要通過actionscript3.
0語句進行控制，最終效果如下圖：
遊戲開始介面：
遊戲完成介面：
2、設計方案：
這個動畫可以按照繪製背景、建立元件、布局場景和新增actionscript語句4個步驟來完成，首先需要繪製乙個荷塘月色的背景畫面，然後在繪製該動畫中要出現的「動畫角色」，如青蛙等，並將場景中的元件、圖形放置在相應的位置，最後在為物件新增動作語句，其中最重要的步驟就是新增actionscript語句，它是實現這個遊戲的關鍵所在，它是根據整個遊戲規則來編輯的。其遊戲規則是：只要前面有空位置，青蛙就能跳到該位置上，且一次只能跳一格，或越過乙個障礙跳一格，但不能反向跳動。
直到左邊的青蛙與右邊的青蛙位置互換才算成功。中途若單擊到不能跳或不能躍的青蛙，或者玩到無退路的情況，可單擊「再來一次」從新開始遊戲。
3、設計步驟：
（1）、製作背景：
使用flash cs5.5 面板中的基本繪圖工具繪製遊戲中的背景，並填充多彩的顏色，主要應用的知識點包括flash動畫的基礎知識、繪圖與編輯圖形、填充顏色以及圖層的基本操作。
具體步驟如下：
1、新建乙個flash檔案（actionscript3.0），設定大小為750*300畫素，將背景顏色設定為白色。儲存檔案，命名為「青蛙跳.fla」。
2、在圖層1中使用矩形工具在場景中畫乙個矩形（750*150）代表夜空，並設定矩形大小和顏色。
3、在夜空中（剛才所繪製的矩形）繪製一些白色點和乙個圓代表星星和月亮。
4、在用矩形工具在場景中繪製矩形(750*150)代表小河，並設定顏色和大小。
5、在小河中繪製乙個白色線條作為河水，並繪製一些小草形狀的圖形，設定小草的填充顏色，並將小草複製多個，移動到河邊，然後再河邊繪製草堆和土坡。
6、繪製的背景**的最終效果如下圖所示：
（2）、建立元件:
建立動畫中的主要原件：青蛙跳的影片剪輯元件、再來一次的按鈕元件、青蛙跳的台階元件等。
（1）、先將所繪製的背景**轉換為圖形元件
ctrl+a選中場景中所有圖形，按f8將其轉換為圖形元件並，命名為「背景」。
（2）、建立「再來一次」的按鈕元件：
（3）、建立乙個「過關」的圖形元件：
（4）、建立名為「按鈕與檔案」的影片剪輯元件：
將「再來一次」按鈕和「過關」圖形，以及事先匯入到庫中的「lihua.gif」**，拖入場景，並設定按鈕的濾鏡效果中，如下圖：
（5）、建立「台階」影片剪輯元件：
在場景中用矩形工具繪製乙個大小為「51*20」畫素的矩形，邊框為黑色。
（6）、建立「青蛙」影片剪輯元件:
建立「青蛙」元件，在圖層1第一幀處繪製青蛙的大致形狀並填充顏色，命名圖層1為「身體」，在1-10幀出分別繪製青蛙不同的動作和位置，作為「跳」的動作；新建圖層2，命名為「身體2」，在圖層2的11-20幀繪製青蛙的不同動作和位置，作為「躍」的動作，如下圖所示：
（7）、同步驟（6）建立乙個「青蛙1」影片剪輯元件，將青蛙身體設定成另外的顏色：
效果如下圖所示：
（3）、場景布局：
將整個動畫中所用到的元件拖放到場景中，與背景相搭配、映襯，並為某些元件設定濾鏡，使之看起來有立體感。再在屬性面板中為某些需要新增語句的元件例項命名，具體步驟如下。
建立「青蛙圖層」和「台階圖層」
將「青蛙」和「青蛙1」從左至右相對放置，並命名為f1,f2,f3,f4,f5,f6。將「台階」從左至右放置，放置7個，每兩個之間大概100畫素距離，並命名為p1,p2,p3,p4,p5,p6,p7。
建立「復位圖層」和「重新開始圖層」
將按鈕元件「再來一次」放到「復位圖層」，並例項名為「reset」。將「按鈕和文字」元件放到「重新開始圖層」例項名為「success」。如下圖所示：
（4）、新增actionscript語句：
在庫面板中雙擊「青蛙」元件，在圖層的最上面，新建乙個actionscript的圖層。
在第1幀處輸入以**：
stop();
在第10幀處插入關鍵幀，輸入以下**，表示青蛙的「x」距離增加100，並跳到第1幀開始**：
this.x+=100;
this.gotoandplay(1);
在第20幀處插入關鍵幀，輸入以下**，表示青蛙的「x」距離增加200，並跳到第1幀開始**：
this.x+=200;
this.gotoandplay(1);
效果如下圖所示：
同理在庫面板中雙擊「青蛙1」設定相同的**：
回到主場景，並在主場景中最上面新建乙個「actionscript圖層」，在第一幀處輸入以下**：
stop();
success.replay.addeventlistener(mouseevent.click,resetit);
reset.addeventlistener(mouseevent.click, resetit);
function resetit(evt:mouseevent)
function init()
init();
//下面這段**表示青蛙只能跳一格，越過乙個障礙跳一格，且不能反向跳動，如果跳躍成功，則顯示按鈕與文字元件。
f1.addeventlistener(mouseevent.click, clickhandler1);
function clickhandler1(event:mouseevent)
f2.addeventlistener(mouseevent.click, clickhandler2);
function clickhandler2(event:mouseevent)
f3.addeventlistener(mouseevent.click, clickhandler3);
function clickhandler3(event:mouseevent)
f4.addeventlistener(mouseevent.click, clickhandler4);
function clickhandler4(event:mouseevent)
f5.addeventlistener(mouseevent.click, clickhandler5);
function clickhandler5(event:mouseevent)
f6.addeventlistener(mouseevent.click, clickhandler6);
function clickhandler6(event:mouseevent)
function howto(i:int){
var nowpos=(getchildbyname("f"+i) as movieclip).getmp()
if(nowpos+1<8 && !(getchildbyname("p"+(nowpos+1)) as movieclip).getsta()){
(getchildbyname("f"+i) as movieclip).moveit();
(getchildbyname("f"+i) as movieclip).mp+=1;
(getchildbyname("p"+(nowpos+1)) as movieclip).sta=1;
專科《Flash動畫設計》課程設計要求
一 設計目的 通過綜合運用flash軟體的各種工具，按照動畫製作的基本步驟完成乙個flash宣傳短片或flash廣告的設計與製作，提高學生的動畫製作能力。二 題目選擇 要求一人一題，不能重複。選題方法 通過搜尋引擎選定一家企業 或者公益主題 並負責為這家公司產品或服務做乙個flash廣告或者宣傳短片...
FLASH動畫製作課程標準
編制人 白燕青 編制系部 資訊工程系 編制日期 2010年 5月10日 審核人 謝玲莉 專業負責人 顧謙 系部主任 顧謙 鄭州電力職業技術學院制 2010年 5月10 日 目錄一 課程基本情況 二 課程定位 三 課程設計思路 四 課程目標 一 知識目標 二 職業技能目標 三 職業素質養成目標 或態度...
Flash動畫製作課程標準
一 課程名稱和開課人 flash動畫製作開課人 王雙軍 二 課程性質 校本課程 三 課程設計思路 flash動畫設計製作是目前應用範圍最廣的計算機多 技術之一，主要應用於各個企事業單位製作 電子雜誌和廣告設計等領域，此外還應用於mv製作 電子賀卡 小遊戲製作等領域。本課程主要是讓學生掌握一定的平面動...