Flash 動畫設計班 ( 基礎技術篇 )

1. Flash 動畫設計班(基礎技術篇)

2. 影格控制函數 • Play() • Stop() • gotoAndPlay(影格) • gotoAndStop(影格) • prevFrame() • nextFrame();

3. MOUSE的動作介紹 • CLICK 單擊 • MOUSE_DOWN 把MOUSE放在元件上按一下 • MOUSE_UP 把MOUSE放在元件上按一下放開 • MOUSE_OVER 把MOUSE放在元件上在上面 • MOUSE_OUT把MOUSE放在元件上放在上面

4. function的基本格式 function f1(event):void{代碼} b1.addEventListener(MouseEvent.CLICK,f1)

5. function f1(event):void • { • gotoAndStop(1); • } • b1.addEventListener(MouseEvent.CLICK,f1) • function f2(event):void • { • stop(); • } • b2.addEventListener(MouseEvent.CLICK,f2) • function f3(event):void • { • play(); • } • b3.addEventListener(MouseEvent.CLICK,f3)

6. function f4(event):void • { • gotoAndStop(20); • } • b4.addEventListener(MouseEvent.CLICK,f4); • function f5(event):void • { • prevFrame(); • } • b5.addEventListener(MouseEvent.CLICK,f5); • function f6(event):void • { • nextFrame(); • } • b6.addEventListener(MouseEvent.CLICK,f6);

7. 元件的應用 我們可以將一些構成動畫的組成部分,做成元件,元件是一個獨立的個體 三類的元件: • 圖像 (用來制作靜態的影像) • 影片片段 (用來制作動態及可控的影像) • 按鈕 (用來制作個性化的按鈕) 元件制作完成放出場景後,必須改一個實體名稱才可以控制

8. 元件的時間軸控制 元件有自身的時間軸,它和場景中的時間軸是獨立的,例如有元件,它的實體名稱是a1則: a1.play(); a1.stop(); a1.gotoAndStop(影格); a1.gotoAndPlay(影格); a1.nextFrame(); a1.prevFrame(); 則可控制元件時間軸的運行

9. 元件的控制 • 例如有元件,它的實體名稱是a1則有屬性如下: 1)x , y 位置屬性 2)scaleX, scaleY 大小 屬性3)rotation 旋轉屬性 a1.x+=10; +,-向右左移動10單位 a1. scaleX*=1.1 a1. scaleY*=1.1; 放大縮小 a1.rotation+=10 +,-向左右旋轉10單位

10. 元件的拖放 假設有元件其實體名稱是a1,代碼a1.startDrag(),就可進行拖放, a1.stopDrag(),則停止拖放 我們了解到要當我們對a1作MOUSE_DOWN動作時,a1就可以進行拖放,對a1作MOUSE_UP動作時則停止拖放

11. 例子 function f1(event):void { a1.startDrag(); } function f2(event):void { a1.stopDrag(); } a1.addEventListener(MouseEvent.MOUSE_DOWN, f1); a1.addEventListener(MouseEvent.MOUSE_UP, f2);

12. 元件的拖放 假設有兩元件其實體名稱是a1,a2 if (a1.hitTestObject(a2)==true) {代碼} 當a1和a2有碰撞時,執行大括號中的代碼

13. function f1(event):void { a1.startDrag(); } function f2(event):void { a1.stopDrag(); if (a1.hitTestObject(a2)==true) {a1.play();}} a1.addEventListener(MouseEvent.MOUSE_DOWN, f1); a1.addEventListener(MouseEvent.MOUSE_UP, f2);

14. 聲音作為元件導入及控制 把聲位汇入至元件庫中,並改好類別名就可利用代碼加以控制,比如其類別名為sound1則通過下列代碼控制 var s1:Sound1=new Sound1(); s1.play();播放 s1.stop();停止

15. 元件的動態加入及移除 元件可動態地加入到舞台中,或動態地從舞台中移去,要在代碼中控制元件,要完成以下三個步驟 1)在新增元件時,選上為”actionscript導出”及改上元件的類別名 2)在代碼中新增元件及設定元件在舞台的位置 3)加入或移去元件

16. 元件的動態加入及移除 例如新增元件其類別名為star,則用如下代碼加入到舞台中 var x1:star=new star() x1.x=100;x1.y=100; addChild(x1); 如需移除元件則用 removeChild(x1);

17. 文字工具的屬性 • 文字工具可做三種文字:靜態文字,動態文字,輸入文字 • 靜態文字是設先輸入的文字不能修改,作標籤的作用 • 動態文字是可由代碼設置文字 • 輸入文字是可由用戶輸入,或由代碼設置

18. 動態文字的使用 • 動態文字要由代碼使用要: • 1)改動態文字的實體名稱如t1,t2等… • 2)利用文字的text屬性來設定文字 • 實例 • t1.text=“這是文字”

19. 利用計時器控制動畫發生 • 利用計時器函數Timer可控制時間來調用function,實例 • 第一步) • var x1:Timer=new Timer(100,1000) • x1.start(); 在此生成一個計時器的實例,名叫t1,它每一秒計時一次,共計時100次

20. 利用計時器控制動畫發生 • 第二步)利用計時器實例來調用function • function f1(event):void • {代碼;} • x1.addEventListener(TimerEvent.TIMER ,f1) • 由計時器x1來調用,每一秒執行一次f1中的代碼

21. 元件來跟蹤MOUSE位置 有元件或動態新增的元件a1 function f1(event):void {a1.x=mouseX; a1.y=mouseY;}

22. 變數 • 變數用於儲存資料及運算資料,有兩種最簡單的資料類型int,string分別用于儲存數值及文字 • var x1:int; • var x2:string; • x1=100; (放100在x1中) • x2=“he”; (放”he”在x2中) • x1+=10; (x1=110) • x2+=“ is”; (x2=“he is”)

23. 判別語句if • 當條件成立時,執行某一段代碼 • 形式一 if(條件一) • {代碼1;} • 例子 • if(x1>100) • {a1.gotoAndPlay(1);} (當變數x1大於100時,跳到a1中的第1個影格)

24. 判別語句if的用法 • 形式二 if(條件一){代碼1;} else{代碼2;} • 例子 • if(x1>100) • {a1.gotoAndPlay(1);} • else {a1.gotoAndPlay(2);} (當變數x1大於100時,跳到a1中的第1個影格,否則跳到第2影格)

25. 判別語句if的用法 • 形式三 if(條件一) {代碼1;} else if(條件2) {代碼2;} else {代碼三} • 例子 • if(x1>100) • {a1.gotoAndPlay(1);} • else if(x1>50){a1.gotoAndPlay(2);} • else{a1.gotoAndPlay(3);} (當變數x1大於100時,跳到a1中的第1個影格,當x1大於50時跳到第2影格,否則跳到第3影格)

26. keyboard動作 • 利用鍵盤來控制利畫時, keyboard每一個按鍵都有一個獨立的keyCode.故此要先判別到底按了哪一個按鍵再做相應的動作

27. 當按下左鍵,向左移10個單位 • function f1(event):void{ • if (event.keyCode==Keyboard.LEFT) • {a1.x-=10;} • ……. • } • 當按下keyboard時調用function • stage.addEventListener(KeyboardEvent.KEY_DOWN,f1)

28. 時間 • var time:Number=0; • time+=1 • t1.text=String(time);

29. function 調用與停用 • 例如有 • function f1(event):void{a1.gotoAndPlay(1)} b1.addEventListener(MouseEvent.CLICK,f1) 調用f1 • function f2(event):void{ • b1.removeEventListener(MouseEvent.CLICK,f1) • } b2.addEventListener(MouseEvent.CLICK,f1)

30. 元件的動態加入及移除 例如新增元件其類別名為star,則用如下代碼加入到舞台中 var x1:star=new star() x1.x=100;x1.y=100; addChild(x1); 利用新增的動畫加入動作,其中event.target代表,動態的元件 function f1(event):void {event.target.x+=10;} x1.addEventListener(Event.ENTER_FRAME,f1)

31. 場景的範圍 stage.x 場景 stage.x stage.stageWidth stage.stageHeight

32. 元件的屬性 元件:plane var i=0 生成 對像:a1 var i=0 對像:a2 var i=0 對像:a3 var i=0 a1.i=1;只改變a1的變量 如果在一個元件中定義了一個變量 這個變量就會在它以後生成的每個對像中都存在

33. 隨機函數 Math.random()會返回一個0-1之間的隨機數 如要會返回一個1-100之間的隨機數就Math.random()*100

34. 打蚊子function f1新增蚊子 f2 mouse的移動 f3 mouse的按下 f4 判別打中蚊子

35. 陣列(Array) • 我們用來保存資料是利用變量來實現的,例如 var i:int,定義一個變量名為i的整型變量來保存整數 • 但如果有10個資料我們就要新增10變量來保存,這樣做很不方便,我們可新增一個陣列來保存這10個資料 • 所謂陣列就是一連串空間用來存放資料

36. 新增陣列的形式 • var 陣列名:Array=new Array(資料1,資料2,資料3...) • 例如新增一個名為yx的陣列來保存這11個資料 • var yx:Array=new Array("零","一","二","三","四","五","六","七","八","九","十")

37. var yx:Array=new Array("零","一","二","三","四","五","六","七","八","九","十") • 如我們要取陣列中的資料會用陣列名[下標]來取得如我們要取第三個資料”二 “就如下 yx[2]

38. 建立正確答案陣列 var ansarray2:Array=new Array("18","29","27","30","1999","1990","1997","2000","山羊","天蝎","天秤","水瓶") var ansarray2:Array=new Array("27","1999","天秤")

39. 元件的中加入動態文字 在元件中加入動態文字,其實體名稱為”t1” 則使用其動態文字時用這樣表達 元件名.t1.text 修改元件

40. event.currentTarget.t1.text 表示按下對像中的t1的文字屬性 event.currentTarget.gotoAndPlay(3) 表示跳到按下對像中的第三影格