40
Flash Flash 動動動動動 動動動動動 ( ( 基基基基基 基基基基基 ) )

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

  • Upload
    pelham

  • View
    38

  • Download
    1

Embed Size (px)

DESCRIPTION

Flash 動畫設計班 ( 基礎技術篇 ). 影格控制函數. Play() Stop() gotoAndPlay( 影格 ) gotoAndStop( 影格 ) prevFrame() nextFrame();. MOUSE 的動作介紹. CLICK 單擊 MOUSE_DOWN 把 MOUSE 放在元件上按一下 MOUSE_UP 把 MOUSE 放在元件上按一下放開 MOUSE_OVER 把 MOUSE 放在元件上在上面 MOUSE_OUT 把 MOUSE 放在元件上放在上面. function 的 基本格式. - PowerPoint PPT Presentation

Citation preview

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

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

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

影格控制函數影格控制函數

Play()Play() Stop()Stop() gotoAndPlay(gotoAndPlay( 影格影格 )) gotoAndStop(gotoAndStop( 影格影格 )) prevFrame()prevFrame() nextFrame();nextFrame(); Flash ¤å¥ó

C:\Documents and Settings\user\®à ±\¬¡°Ê½

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

MOUSEMOUSE 的動作介紹的動作介紹

CLICK CLICK 單擊單擊

MOUSE_DOWN MOUSE_DOWN 把把MOUSEMOUSE 放在元件上按一下放在元件上按一下

MOUSE_UP MOUSE_UP 把把MOUSEMOUSE 放在元件上按一下放開放在元件上按一下放開

MOUSE_OVER MOUSE_OVER 把把MOUSEMOUSE 放在元件上在上面放在元件上在上面

MOUSE_OUTMOUSE_OUT 把把 MOUSEMOUSE放在元件上放在上面放在元件上放在上面

C:\Documents and Settings\user\®à ±\¬¡°Ê½

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

functionfunction 的的基本格式基本格式

function function f1f1(event):void{(event):void{ 代碼代碼 }}b1b1.addEventListener(MouseEvent..addEventListener(MouseEvent.CLICKCLICK,,f1f1))

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

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

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

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

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

元件的應用元件的應用

我們可以將一些構成動畫的組成部分我們可以將一些構成動畫的組成部分 ,, 做成做成元件元件 ,, 元件是一個獨立的個體元件是一個獨立的個體

三類的元件三類的元件 ::1.1. 圖像 圖像 (( 用來制作靜態的影像用來制作靜態的影像 ))2.2. 影片片段 影片片段 (( 用來制作動態及可控的影像用來制作動態及可控的影像 ))3.3. 按鈕 按鈕 (( 用來制作個性化的按鈕用來制作個性化的按鈕 ))元件制作完成放出場景後元件制作完成放出場景後 ,, 必須改一個實體必須改一個實體

名稱才可以控制名稱才可以控制

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

元件的時間軸控制元件的時間軸控制

元件有自身的時間軸元件有自身的時間軸 ,, 它和場景中的時間軸是獨立它和場景中的時間軸是獨立的的 ,, 例如有元件例如有元件 ,, 它的實體名稱是它的實體名稱是 a1a1則則 ::

a1.play();a1.play();a1.stop();a1.stop();a1.gotoAndStop(a1.gotoAndStop( 影格影格 ););a1.gotoAndPlay(a1.gotoAndPlay( 影格影格 ););a1.nextFrame();a1.nextFrame();a1.prevFrame();a1.prevFrame();則可控制元件時間軸的運行則可控制元件時間軸的運行

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

元件的控制元件的控制

例如有元件例如有元件 ,, 它的實體名稱是它的實體名稱是 a1a1 則有屬性如則有屬性如下下 ::

1)x , y 1)x , y 位置屬性 位置屬性 2)scaleX, scaleY 2)scaleX, scaleY 大小 屬性大小 屬性3)rotation 3)rotation 旋轉屬性旋轉屬性

a1.x+=10; +,-a1.x+=10; +,- 向右左移動向右左移動 1010 單位單位a1. scaleX*=1.1 a1. scaleY*=1.1; a1. scaleX*=1.1 a1. scaleY*=1.1; 放大縮小放大縮小a1.rotation+=10 +,-a1.rotation+=10 +,- 向左右旋轉向左右旋轉 1010 單位單位

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

元件的拖放元件的拖放

假設有元件其實體名稱是假設有元件其實體名稱是 a1,a1, 代碼代碼a1.startDrag(),a1.startDrag(), 就可進行拖放就可進行拖放 , a1.stopDrag(),, a1.stopDrag(),則停止拖放則停止拖放

我們了解到要當我們對我們了解到要當我們對 a1a1作作 MOUSE_DOWNMOUSE_DOWN動作時動作時 ,a1,a1 就可以進行拖放就可以進行拖放 ,,對對 a1a1作作MOUSE_UPMOUSE_UP 動作時則停止拖放動作時則停止拖放

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

例子例子

function f1(event):void {function f1(event):void {

a1.startDrag();a1.startDrag();

}}

function f2(event):void {function f2(event):void {

a1.stopDrag();a1.stopDrag();

}}

a1.addEventListener(MouseEvent.MOUSE_DOWN, f1);a1.addEventListener(MouseEvent.MOUSE_DOWN, f1);

a1.addEventListener(MouseEvent.MOUSE_UP, f2);a1.addEventListener(MouseEvent.MOUSE_UP, f2);

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

元件的拖放元件的拖放

假設有兩元件其實體名稱是假設有兩元件其實體名稱是 a1,a2a1,a2

if (a1.if (a1.hitTestObjecthitTestObject((a2a2)==true))==true)

{{ 代碼代碼 }}

當當 a1a1和和 a2a2 有碰撞時有碰撞時 ,, 執行大括號中的代碼執行大括號中的代碼

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

function f1(event):void {function f1(event):void {

a1.startDrag();a1.startDrag();

}}

function f2(event):void {function f2(event):void {

a1.stopDrag();a1.stopDrag();

if (a1.hitTestObject(a2)==true)if (a1.hitTestObject(a2)==true)

{a1.play();}}{a1.play();}}

a1.addEventListener(MouseEvent.MOUSE_DOWN, f1);a1.addEventListener(MouseEvent.MOUSE_DOWN, f1);

a1.addEventListener(MouseEvent.MOUSE_UP, f2);a1.addEventListener(MouseEvent.MOUSE_UP, f2);

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

聲音作為元件導入及控制聲音作為元件導入及控制

把聲位汇入至元件庫中把聲位汇入至元件庫中 ,, 並改好類別名就並改好類別名就可利用代碼加以控制可利用代碼加以控制 ,, 比如其類別名為比如其類別名為sound1sound1 則通過下列代碼控制則通過下列代碼控制

var s1:Sound1=new Sound1();var s1:Sound1=new Sound1(); s1.play();s1.play(); 播放播放 s1.stop();s1.stop(); 停止停止

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

元件的動態加入及移除元件的動態加入及移除

元件可動態地加入到舞台中元件可動態地加入到舞台中 ,, 或動態地從或動態地從舞台中移去舞台中移去 ,, 要在代碼中控制元件要在代碼中控制元件 ,, 要完要完成以下三個步驟成以下三個步驟

1)1) 在新增元件時在新增元件時 ,, 選上為選上為”” actionscriptactionscript 導導出出””及改上元件的類別名及改上元件的類別名

2)2) 在代碼中新增元件及設定元件在舞台的在代碼中新增元件及設定元件在舞台的位置位置

3)3) 加入或移去元件加入或移去元件

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

元件的動態加入及移除元件的動態加入及移除

例如新增元件其類別名為例如新增元件其類別名為 star,star, 則用如下則用如下代碼加入到舞台中代碼加入到舞台中

var x1:star=new star()var x1:star=new star() x1.x=100;x1.y=100;x1.x=100;x1.y=100; addChild(x1);addChild(x1); 如需移除元件則用如需移除元件則用 removeChild(x1);removeChild(x1);

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

文字工具的屬性文字工具的屬性

文字工具可做三種文字文字工具可做三種文字 :: 靜態文字靜態文字 ,, 動態動態文字文字 ,, 輸入文字輸入文字

靜態文字是設先輸入的文字不能修改靜態文字是設先輸入的文字不能修改 ,, 作作標籤的作用標籤的作用

動態文字是可由代碼設置文字動態文字是可由代碼設置文字 輸入文字是可由用戶輸入輸入文字是可由用戶輸入 ,, 或由代碼設置或由代碼設置

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

動態文字的使用動態文字的使用

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

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

利用計時器控制動畫發生利用計時器控制動畫發生

利用計時器函數利用計時器函數 TimerTimer 可控制時間來調用可控制時間來調用function,function, 實例實例

第一步第一步 )) var x1:Timer=new Timer(100,1000)var x1:Timer=new Timer(100,1000) x1.start();x1.start();

在此生成一個計時器的實例在此生成一個計時器的實例 ,, 名叫名叫 t1,t1, 它每它每一秒計時一次一秒計時一次 ,, 共計時共計時 100100 次次

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

利用計時器控制動畫發生利用計時器控制動畫發生

第二步第二步 )) 利用計時器實例來調用利用計時器實例來調用 functionfunction function f1(event):voidfunction f1(event):void {{ 代碼代碼 ;};} x1x1.addEventListener(.addEventListener(TimerEvent.TIMERTimerEvent.TIMER ,f1 ,f1

)) 由計時器由計時器 x1x1 來調用來調用 ,, 每一秒執行一次每一秒執行一次 f1f1 中的中的

代碼代碼

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

元件來跟蹤元件來跟蹤 MOUSEMOUSE 位置位置

有元件或動態新增的元件有元件或動態新增的元件 a1a1

function f1(event):voidfunction f1(event):void

{a1.x=mouseX;{a1.x=mouseX;

a1.y=mouseY;}a1.y=mouseY;}

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

變數變數

變數用於儲存資料及運算資料變數用於儲存資料及運算資料 ,, 有兩種最簡單的有兩種最簡單的資料類型資料類型 int,stringint,string 分別用于儲存數值及文字分別用于儲存數值及文字

var x1:int;var x1:int; var x2:string;var x2:string; x1=100; (x1=100; (放放 100100在在 x1x1中中 )) x2=“he”; (x2=“he”; ( 放”放” he”he”在在 x2x2中中 )) x1+=10; (x1=110)x1+=10; (x1=110) x2+=“ is”; (x2=“he is”)x2+=“ is”; (x2=“he is”)

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

判別語句判別語句 ifif 當條件成立時當條件成立時 ,, 執行某一段代碼執行某一段代碼 形式一形式一if(if( 條件一條件一 )) {{ 代碼代碼 1;}1;} 例子例子 if(x1>100)if(x1>100) {a1.gotoAndPlay(1);}{a1.gotoAndPlay(1);}

(( 當變數當變數 x1x1 大於大於 100100時時 ,, 跳到跳到 a1a1 中的第中的第 11個影格個影格 ))

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

判別語句判別語句 ifif 的用法的用法

形式二形式二if(if( 條件一條件一 ){){ 代碼代碼 1;}1;}else{else{ 代碼代碼 2;}2;} 例子例子 if(x1>100)if(x1>100) {a1.gotoAndPlay(1);}{a1.gotoAndPlay(1);} else {a1.gotoAndPlay(2);}else {a1.gotoAndPlay(2);}(( 當變數當變數 x1x1 大於大於 100100時時 ,, 跳到跳到 a1a1 中的第中的第 11 個影個影格格 ,, 否則跳到第否則跳到第 22 影格影格 ))

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

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

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

keyboardkeyboard 動作動作

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

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

當按下左鍵當按下左鍵 ,, 向左移向左移 1010 個單位個單位 function f1(event):void{function f1(event):void{ if (event.keyCode==Keyboard.LEFT)if (event.keyCode==Keyboard.LEFT) {a1.x-=10;}{a1.x-=10;} …… …….. }}

當按下當按下 keyboardkeyboard 時調用時調用 functionfunction stage.addEventListener(KeyboardEvent.KEY_DOWN,f1)stage.addEventListener(KeyboardEvent.KEY_DOWN,f1)

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

時間時間

var time:Number=0;var time:Number=0;

time+=1time+=1 t1.text=String(time);t1.text=String(time);

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

function function 調用與停用調用與停用

例如有例如有 function f1(event):void{a1.gotoAndPlay(1)}function f1(event):void{a1.gotoAndPlay(1)}

b1.addEventListener(MouseEvent.CLICK,f1)b1.addEventListener(MouseEvent.CLICK,f1)

調用調用 f1f1 function f2(event):void{function f2(event):void{ b1.removeEventListener(MouseEvent.CLICK,f1)b1.removeEventListener(MouseEvent.CLICK,f1) }}

b2.addEventListener(MouseEvent.CLICK,f1)b2.addEventListener(MouseEvent.CLICK,f1)

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

元件的動態加入及移除元件的動態加入及移除

例如新增元件其類別名為例如新增元件其類別名為 star,star, 則用如下代碼加入到舞台則用如下代碼加入到舞台中中

var x1:star=new star()var x1:star=new star() x1.x=100;x1.y=100;x1.x=100;x1.y=100; addChild(x1);addChild(x1); 利用新增的動畫加入動作利用新增的動畫加入動作 ,, 其中其中 event.targetevent.target 代表代表 ,, 動態動態

的元件的元件function f1(event):voidfunction f1(event):void

{event.target.x+=10;}{event.target.x+=10;}

x1.addEventListener(Event.ENTER_FRAME,f1)x1.addEventListener(Event.ENTER_FRAME,f1)

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

場景的範圍場景的範圍

場景stage.x

stage.stageWidth

stage.x

stage.stageHeight

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

元件的屬性元件的屬性

如果在一個元件中定義了一個變量如果在一個元件中定義了一個變量 這個變量就會在它以後生成的每個對像中這個變量就會在它以後生成的每個對像中

都存在都存在元件 :planevar i=0

對像 :a1var i=0

對像 :a2var i=0

對像 :a3var i=0

生成

a1.i=1; 只改變 a1 的變量

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

隨機函數隨機函數

Math.random()Math.random() 會返回一個會返回一個 0-10-1 之間的隨之間的隨機數機數

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

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

打蚊子打蚊子 functionfunction

f1f1 新增蚊子新增蚊子 f2 mousef2 mouse 的移動的移動 f3 mousef3 mouse 的按下的按下 f4 f4 判別打中蚊子判別打中蚊子

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

陣列陣列 (Array)(Array)

我們用來保存資料是利用變量來實現的我們用來保存資料是利用變量來實現的 ,,例如 例如 var i:int,var i:int, 定義一個變量名為定義一個變量名為 ii 的整型的整型變量來保存整數變量來保存整數

但如果有但如果有 1010 個資料我們就要新增個資料我們就要新增 1010 變量變量來保存來保存 ,, 這樣做很不方便這樣做很不方便 ,, 我們可新增一我們可新增一個陣列來保存這個陣列來保存這 1010 個資料個資料

所謂陣列就是一連串空間用來存放資料所謂陣列就是一連串空間用來存放資料

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

新增陣列的形式新增陣列的形式

var var 陣列名陣列名 :Array=new Array(:Array=new Array( 資料資料 1,1, 資資料料 2,2, 資料資料 3...)3...)

例如新增一個名為例如新增一個名為 yxyx 的陣列來保存這的陣列來保存這 1111個資料個資料

var yx:Array=new Array("var yx:Array=new Array("零零 ","","一一 ","","二二 ","","三三 ","","四四 ","","五五 ","","六六 ","","七七 ","","八八 ","","九九 ","","十十 ")")

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

var yx:Array=new Array("var yx:Array=new Array("零零 ","","一一 ","","二二 ","","三三 ","","四四 ","","五五 ","","六六 ","","七七 ","","八八 ","","九九 ","","十十 ")")

如我們要取陣列中的資料會用如我們要取陣列中的資料會用陣列名陣列名 [[ 下下標標 ]] 來取得如我們要取第三個資料”二 “來取得如我們要取第三個資料”二 “就如下就如下

yxyx[[22]]

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

建立正確答案陣列建立正確答案陣列

var ansarray2:Array=new var ansarray2:Array=new Array("18","29","27","30","1999","1990","Array("18","29","27","30","1999","1990","1997","2000","1997","2000","山羊山羊 ","","天蝎天蝎 ","","天秤天秤 ","","水水瓶瓶 ")")

var ansarray2:Array=new var ansarray2:Array=new Array("27","1999","Array("27","1999","天秤天秤 ")")

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

元件的中加入動態文字元件的中加入動態文字

在元件中加入動態文字在元件中加入動態文字 ,, 其實體名稱其實體名稱為為”” t1”t1”

則使用其動態文字時用這樣表達則使用其動態文字時用這樣表達 元件名元件名 ..t1.textt1.text 修改元件修改元件

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

event.currentTarget.t1.textevent.currentTarget.t1.text 表示按下對像中的表示按下對像中的 t1t1 的文字屬性的文字屬性

event.currentTarget.gotoAndPlay(3)event.currentTarget.gotoAndPlay(3) 表示跳到按下對像中的第三影格表示跳到按下對像中的第三影格