Flash Action Script 2 for e-learning

Computerlifecoach.com

By โคชเอก

13/07/57

1

สารบญ

หวขอ หนา

การใชงาน Flash เบ�องตน 2

- การใชงานโปรแกรมเบ�องตน

- การใชงานเคร�องมอตางๆ (Tools)

- รจกกบ Timeline

- รจกกบ Symbols ประเภทตางๆ

การทา Animation เบ�องตน 8

- Shape Tween

- Motion Tween

Action Script เบ�องตน 13

- ตวแปร (Variables)

- ตวดาเนนการ (Operators)

- คาส�งแบบเง�อนไข (If)

การควบคม Timeline 16

- Frame

- Scene

การทางานกบป ม (Buttons) 18

การทางานกบขอความ (Text) 19

การทางานกบมฟว;คลป (Movie Clips) 21

- คณสมบตของมฟว�คลป

- การควบคมมฟว�คลป

การทางานกบเมาส และคยบอรด 22

การทางานกบมเดย (Media) 24

- เสยง (Sounds)

- รปภาพ (Images)

การนาผลงานไปแผยแพร 27

2

1. การใชงาน Flash เบ�องตน

1.1 การใชงานโปรแกรมเบ�องตน

การสรางไฟลใหม คลกท�เมน File -> New คลกเลอกท� Flash File (Action Script 2.0) แลวคลก

ปม OK ดงภาพ

การบนทกไฟล คลกท�เมน File -> Save พมพช�อไฟลท�ตองการ แลวคลกปม Save ดงภาพ

3

การเปดไฟล เพ�อเอางานกลบแกไข คลกท�เมน File -> Open คลกเลอกไฟลท�ตองการ แลวกด

ปม Open ดงภาพ

เม�อเราไดสรางไฟลใหมมาแลวส�งแรกท�ควรทาคอการกาหนดขนาดของพ�นท�การทางาน

(Stage) มข�นตอน ดงน�

1) ท� Panel ของ Properties ให พมพขนาดของพ�นท�การทางานในชอง Dimensions

ดงภาพ

4

1.2 การใชงานเคร;องมอตางๆ (Tools)

การวาดรปทรงตางๆ เชน รปส�เหล�ยม มข�นตอนดงน�

1) คลกท�เคร�องมอ Rectangle Tool ดงภาพ

2) กาหนดคณสมบตของวตถ (ส� เหล�ยม) เชน สพ�น หรอ สเสนขอบเปนตน ดงภาพ

3) คลกท�พ�นท�การทางาน (Stage) แลวลากเมาส เพ�อกาหนดขนาดของส�เหล�ยมท�ตองการ

ดงภาพ

5

การใชเคร�องมอ Text Tool มข�นตอนดงน�

1) คลกเลอกท� Text Tool ดงภาพ

2) กาหนดคณสมบตตางๆ ใหกบขอความ เชน ส , ตวหนา , แบบอกษร , ขนาดตวอกษร

เปนตน ดงภาพ

3) คลกท�พ�นท�การทางาน แลวพมพตวอกษรท�ตองการ ดงภาพ

6

1.3 รจกกบ Timeline

Timeline เปนแถบแบงเวลาของแอนเมช�น ออกเปนสวนยอยๆ โดยเปนเหมอนตาราง จะม

ชองท�ถกแบงออกมา เปนชองเลกๆ เราเรยกวาเฟรม (Frame) แตละเฟรมสามารถเกบวตถตางๆ

ท�เราไดสรางหรอวาดข�นมา โดยมหวอานสแดง (Playhead) ว�งไปเร�อยๆ ทาใหภาพเปล�ยนไป

ในแตละเฟรมเกดเปนภาพเคล�อนไหว (Animation) ได ดงภาพ

1.4 รจกกบ Symbols ประเภทตางๆ

Flash ประกอบดวย Symbol อย 3 ประเภทดวยกน ไดแก

1) Graphic เปน Symbol ท�ใชในการจดกลมของภาพวาดตางๆ ท�เราไดวาดลงไปใน Flash

เชน รปส�เหล�ยม เปนตน

2) Button เปน Symbol ท�ใชสาหรบในการสรางปม เพ�อโตตอบกบผใชงาน

3) Movie Clip เปน Symbol ท�ม Timeline ยอย ซ� งเปนอสระออกจาก Timeline อ�น

สามารถควบคม และกาหนดคณสมบตได

การสราง Symbols ใหม มข�นตอนดงน�

1) คลกท�เมน Insert -> New Symbol

2) ต�งช�อของ

3) วาดวตถตางๆ ลงไปท�

4) การนา

5) ดท� Library

ทางาน

6) เราสามารถนา

ข�นตอนท�

ต�งช�อของ Symbol และเลอกประเภทของ Symbol แลวกดปม

วาดวตถตางๆ ลงไปท� Stage ดงภาพ

การนา Symbol มาใชงาน ใหกลบมาท� Scene กอน ดงภาพ

Library Panel คลกเมาสคางท� Symbol จากน�นลากแลวปลอยท�พ�นท�การ

ทางาน (Stage)

เราสามารถนา Symbol ท�สรางไวแลวกลบมาใชไดหลายๆคร� งโดยทาเหมอน

ข�นตอนท� 5

7

แลวกดปม OK ดงภาพ

กอน ดงภาพ

จากน�นลากแลวปลอยท�พ�นท�การ

ท�สรางไวแลวกลบมาใชไดหลายๆคร� งโดยทาเหมอน

8

2. การทางาน Animation เบ�องตน

การทาแอนเมช�น แบบ Sharp Tween มข�นตอนดงน�

1) วาดรปภาพท�ตองการทาแอนเมช�นในเฟรมท� 1 ดงภาพ

2) คลกขวาท�เฟรมสดทาย (สมมตเลอกเฟรมท� 30) คลกเลอกท� Insert Keyframe ดงภาพ

3) กดปม Delete ท�คยบอรด เพ�อลบภาพ (รปดาว) ท�วาดข�น แลววาดรปใหมข�นมา ท�เฟรมสดทาย

(เฟรมท� 30) ดงภาพ

4) คลกขวาระหวางเฟรมท�

Create Sharp Tween

5) กดปม Enter หรอ Ctrl+Enter

คอยๆเปล�ยนรปรางเปนภาพท�สอง

ดงภาพ

ขวาระหวางเฟรมท� 1 และ เฟรมสดทาย (ในท�น�สมมตวาเฟรมท� 30) แลวคลกเลอกท�

ดงภาพ

Ctrl+Enter เพ�อทดสอบ Movie จะไดผลงานภาพวาดภาพแรก

คอยๆเปล�ยนรปรางเปนภาพท�สอง (ส� เหล�ยม)

9

แลวคลกเลอกท�

จะไดผลงานภาพวาดภาพแรก (รปดาว)

10

การทาแอนเมช�น แบบ Classic Tween การทางานแอนเมช�นแบบ Classic Tween ตางจากแบบ Sharp

Tween เลกนอยคอเม�อวาดภาพเสรจแลวเราจะตองทาการแปลงภาพวาดน�นใหเปน Symbol เสยกอน

หรอสราง Symbol ใหมข�นมากได การทาแอนเมช�นแบบ Classic Tween มข�นตอนดงน�

1) วาดภาพท�ตองการทาแอนเมช�น ดงภาพ

2) คลกหรอดบเบ�ลคลก เพ�อเลอกวตถท�เราไดวาดลงไป แลวกดปม F8 ท�คยบอรด เพ�อเปล�ยน

รปทรงตางๆ ใหเปน Symbol จากน�นต�งช�อ Symbol และคลกเลอกประเภทของ Symbol แลว

คลกท�ปม OK ดงภาพ

11

3) คลกขวาท�เฟรมสดทายท�ตองการใหวตถเคล�อนไหวไป เชน เฟรมท� 30 เปนตน แลวเลอกท�

Insert Keyframe ดงภาพ

4) คลกเมาสท�วตถแลวลากไปยงตาแหนงท�ตองการ ดงภาพ

5) คลกขวาระหวางเฟรมท� 1 และเฟรมท� 30 คลกเลอกท� Create Classic Tween ดงภาพ

12

6) กดปม Enter หรอ Ctrl+Enter เพ�อทดสอบ Movie จะเหนภาพการเคล�อนไหวของวตถ

7) เราสามารถกาหนดคณสมบต (Properties) เพ�มเตมไดเชน การหมนของวตถได ดงภาพ

13

3. Action Script เบ�องตน

Action Script คอภาษาแบบ Script ท�เพ�มความสามารถใหกบ Flash ในดานตางๆ เชน การโตตอบ

กบผใชงาน, การสรางฟอรมรบขอมล, การจดการกบมลตมเดย, การสรางเกมส เปนตน

การเขยน Action Script ท�ดน�นควรเขยนโคดแยกออกมาเปน layer ใหมตางหากเพ�อไมใหปะปนกบ

layer อ�นๆ การเขยน Action Script มข�นตอนดงน�

1) สราง layer ใหมท� Timeline และต�งช�อวา action หรอช�ออ�นกได ดงภาพ

2) คลกเลอกท�เฟรมท� 1 กดปม F9 ท�คยบอรดเพ�อเรยกหนาตาง Actions Panel ท�ใชสาหรบเขยน

โคด ดงภาพ

3) ลงมอพมพโคด Action Script โดยเร�มท�บรรทดท� 1 ดงภาพ

14

ตวแปร (Variables)

ตวแปร ทาหนาท�สาหรบเกบขอมลตางๆ โดยสามารถนาขอมลน�นกลบมาใชงานได เชน ตวแปร

สาหรบเกบคะแนนของเกมส เปนตน กอนการใชงานตวแปรทกคร� ง เราจะตองทาการประกาศตวแปร

เสยกอน เพ�อบอกวาจะต�งช�อตวแปรวาอะไร และจะเกบขอมลประเภทไหนในตวแปรท�ไดประกาศไว

1) การประกาศตวแปร สามารถเขยนโคดไดดงน�

อธบาย การประกาศตวแปรใหเราพมพข�นตนดวยคาวา var จากน�นเวนวรรคแลวพมพช�อตว

แปร (เราเปนคนต�งเอง) ใสเคร�องหมายโคลอนแลวพมพประเภทตวแปรท�ตองการ เชน String

หมายถงตวแปรท�เกบไดเฉพาะตวอกษรหรอขอความ สวน Number คอตวแปรท�เกบได

เฉพาะตวเลข เปนตน

2) การกาหนดคาใหกบตวแปร เม�อเราไดประกาศตวแปรไปแลว เรากกาหนดคาใหตวแปรท�เราได

ประกาศไว โดยกาหนดคาใหถกตอง เชน ถาประกาศเปนประเภท String กใหใสเคร�องหมาย

ฟนหน (double quote) หรอ ถาเปน Number กใหใสเปนตวเลขเทาน�น ดงภาพ (บรรทดท� 4

และ 5)

3) การเรยกใชตวแปร เม�อตวแปรท�สรางข�นไดถกกาหนดคาเรยบรอยแลวเราสามารถนาตวแปรท�

มคาน�ไปใชในงานตางๆ ได ถาตองการดคาท�ไดกาหนดไว สามารถใชคาส�ง trace เพ�อทดสอบ

ตวแปรได ดงภาพ

ในบรรทดท� 7 และ 8

15

ลองกดปม Ctrl+Enter เพ�อทดสอบโปรแกรมท�ไดเขยนข�นจะปรากฎหนาตาง output ข�นมา ดง

ภาพ

ตวดาเนนการ (Operators)

ตวดาเนนการ คอ เคร�องหมายประเภทตางๆ ท�เรานามาใชจดการตวแปรท�ไดสรางข�น เชน

ตวดาเนนทางดานคณตศาสตร ประกอบดวย เคร�องหมายบวก ลบ คณ หาร เปนตน หากเรา

ตองการผลลพธท�ไดบวกของตวแปรสองตวเราสามารถเขยนโคด ไดดงน�

16

คาส;งแบบตองตดสนใจ (If)

ในชวตประจาวนของเราตองพบกบการตดสนใจอยเสมอไมเวนแมกระท�งคอมพวเตอรกตองมการ

ตดสนใจในการทางานบางอยาง โดยจะใชคาส�งท�ช�อวา If ในการใชงาน ตวอยางคาส�ง มดงน�

อธบาย จากบรรทดท� 8 หมายความวา ถาตวแปร x มคานอยกวาตวแปร y จรง ใหพมพคาวา x < y โดย

ใหแสดงท� Output Panel น�นเอง

4. การควบคม Timeline

Frame เปนชองเลกๆ ท�อยบน Timeline เราสามารถเขยนคาส�งในการควบคมเพ�อใหหวอาน (Play

head) ว�งไปท�เฟรมใดกได โดยมคาส�ง ดงน�

1) คาส�ง stop เปนคาส�งใหหวอานหยดการทางาน

2) คาส�ง play เปนคาส�งใหหวอานเร�มว�งบน Timeline

3) คาส�ง gotoAndPlay เปนคาส�งท�ใหกระโดดไปยงเฟรมท�ตองการแลวใหหวอานว�งตอไป

4) คาส�ง gotoAndStop เปนคาส�งท�ใหกระโดยไปยงเฟรมท�ตองการแลวใหหวอานหยดทนท

5) คาส�ง nextFrame เปนคาส�งเพ�อใหหวอานเล�อนไปยงเฟรมถดไป

6) คาส�ง prevFrame เปนคาส�งเพ�อใหหวอานเล�อนไปยงเฟรมกอนหนาน�

ตวอยางการเขยนโคด มดงน�

17

Scene เปนเหมอนฉากในภาพยนตรท�เราคนเคยโดยแบงออกเปนตอนๆ เราสามารถแบงงานของเรา

ออกเปนสวนๆไดโดยใช Scene ทาใหงายตอการดแล และการจดการกบช�นงานของเรา

การสราง Scene ใหม มข�นตอนดงน�

1) คลกท�เมน Insert -> Scene ดงภาพ

2) Flash จะเพ�ม Scene ใหมมาให เราสามารถสลบไปมาระหวาง Scene ได โดยคลกเลอก

ได ดงภาพ

การเขยนคาส�งควบคม Scene คาส�งท�ใชในการควบคม และจดการ Scene มดงน� ไดแก

1) คาส�ง nextScene เปนคาส�งใหไปยง Scene ตอไป

2) คาส�ง prevScene เปนคาส�งใหไปยง Scene กอนหนาน�

3) คาส�ง gotoAndPlay เปนคาส�งท�ระบไดวาจะไปท� Scene ไหน และเฟรมท�เทาไหรของ

Scene เสรจแลวส�งใหหวอานเลนตอ

4) คาส�ง gotoAndStop เปนคาส�งท�ระบไดวาจะไปท� Scene ไหน และเฟรมท�เทาไหรของ

Scene เสรจแลวส�งใหหวอานหยดทนท

5. การทางานกบป ม (Buttons)

บอยคร� งท�ช�นงานท�สรางข�น

เพ�อกระทาอะไรบางอยางเม�อผใชกดปมใดๆ ได

1) นาปมสาเรจรป โดยคลกเลอกท�

2) ปมตางๆจะอยโฟลเดอรสเหลอง การเลอกปมใหคลกเลอกท�ปมท�ตองการแลวลากไปปลอยท�

พ�นท�การทางาน (Stage)

บอยคร� งท�ช�นงานท�สรางข�นตองการตอบโตกบผใชโดยการกดท�ปม เราสามารถเขยน

เพ�อกระทาอะไรบางอยางเม�อผใชกดปมใดๆ ได โดยมข�นตอน ดงน�

นาปมสาเรจรป โดยคลกเลอกท�เมน Window -> Common Libraries -> Button

ปมตางๆจะอยโฟลเดอรสเหลอง การเลอกปมใหคลกเลอกท�ปมท�ตองการแลวลากไปปลอยท�

Stage) ดงภาพ

18

ตองการตอบโตกบผใชโดยการกดท�ปม เราสามารถเขยน Action Script

> Buttons ดงภาพ

ปมตางๆจะอยโฟลเดอรสเหลอง การเลอกปมใหคลกเลอกท�ปมท�ตองการแลวลากไปปลอยท�

19

3) คลกท�ปม แลวต�งช�อใหกบปมท�สรางข�นจากหนาตาง Properties ดานลาง ดงภาพ

4) สราง layer ใหมแลวต�งช�อวา action คลกท�เฟรมท� 1 แลวกดปม F9 เพ�อเรยกหนาตาง Actions

Panel

5) เขยนโคด Action Script ดงภาพ

อธบาย การเขยนโคดเราจะตองอางถงช�อปมท�เราไดสรางในข�นตอนท� 3 ตามดวยเหตการณ

ในทน� คอ onRelease หมายถง เม�อผใชกดท�ปมแลวปลอย จะใหทาอะไร โดยท�ภายในวงเลบปก

กาน� คอโคดในสวนท�เราสามารถเขยนโคดอะไรกไดในการส�งให Flash ทางานตามท�เรา

ตองการ

6. การทางานกบขอความ (Text)

เพ�อใหไดงานท�นาสนใจเราควรมตวอกษรประกอบในงานของเรา ในท�น� เราจะใชเคร�องมอท�ช�อวา

Text Tool โดยเคร�องมอตวน�สามารถใชแสดงตวอกษรใหปรากฏท�พ�นท�การทางานของเราได โดยม

ข�นตอนดงน�

1) ใหคลกเลอกท�เคร�องมอ Text Tool ดงภาพ

20

2) กาหนดคณสมบตท�หนาตาง Properties โดยกาหนดชนดของ Text ใหเลอกเปนแบบ Dynamic

Text แลววาดลงไปท� Stage ดงภาพ

3) วาด Text ลงบนพ�นท�การทางาน คลกท� Text แลวต�งช�อใหกบ Text ดงภาพ

4) สราง layer ใหม แลวต�งช�อวา action ท�เฟรมท� 1 กดปม F9 แลวพมพโคดดงตอไปน�

ใหสงเกตบรรทดท� 4 เปนการกาหนดคาประโยคท�วา “Hello! Action Script” ใหกบกลอง

ขอความท�เราไดสรางข�นโดยการอางช�อในท�น� คอ txtName ผลลพธจากการทางานคอเม�อคลก

ปมช�อวา btnEnter จะทาใหเกดขอความข�นท�กลองขอความช�อวา txtName น�นเอง

21

7. การทางานกบมฟว;คลป (Movies Clips)

คณสมบตของมฟว�คลป

เราสามารถกาหนดคณสมบต (Properties) ของมฟว�คลปแตละตวท�สรางข�นใหมลกษณะท�แตกตาง

กน และมการทางานท�แตกตางกนได คณสมบตท�สาคญท�ควรทราบ ของมฟว�คลปม ดงตอไปน�

1) _x หมายถงกาหนดตาแหนงของมฟว�คลปในแนวแกน x

2) _y หมายถงกาหนดตาแหนงของมฟว�คลปในแนวแกน y

3) _xscale หมายถงกาหนดขนาดของมฟว�คลปขยายในแนวแกน x

4) _yscale หมายถงกาหนดขนาดของมฟว�คลปขยายในแนวแกน y

5) _width หมายถงกาหนดความกวางของมฟว�คลป

6) _height หมายถงกาหนดความสงของมฟว�คลป

7) _visible หมายถงกาหนดการมองเหนของมฟว�คลป

8) _rotation หมายถงกาหนดการหมนของมฟว�คลป

การควบคมมฟว�คลป

การเขยนควบคมการทางานของมฟว�คลปโดยใชความรจากคณสมบตของมฟว�คลป

มข�นตอนดงน�

1) ลากมฟว�คลปท�ไดสรางไวแลวจาก Library Panel ดงภาพ

2) คลกเลอกท�มฟว�คลป แลวต�งช�อท� Properties ดงภาพ

22

3) สราง layer ใหมต�งช�อวา action คลกท�เฟรมท� 1 กดปม F9 เพ�อเขยนโคด

4) เขยนโคดดงตอไปน�

5) กด Ctrl+Enter เพ�อทดสอบการทางานของ Movie

8. การทางานกบเมาสและคยบอรด

การทางานกบเมาส โดยใชวธ Drag and Drop มข�นตอนดงน�

1) ลากมฟว�คลปท�ไดสรางไวแลวจาก Library Panel ดงภาพ

2) คลกเลอกท�มฟว�คลป แลวต�งช�อท� Properties ดงภาพ

23

3) สราง layer ใหมต�งช�อวา action คลกท�เฟรมท� 1 กดปม F9 เพ�อเขยนโคด

4) เขยนโคดดงตอไปน�

การทางานกบคยบอรด เพ�อควบคม Movie Clips มข�นตอน ดงน�

1) ลากมฟว�คลปท�ไดสรางไวแลวจาก Library Panel ดงภาพ

2) คลกเลอกท�มฟว�คลป แลวต�งช�อท� Properties ดงภาพ

3) สราง layer ใหมต�งช�อวา action คลกท�เฟรมท� 1 กดปม F9 เพ�อเขยนโคด

24

4) เขยนโคดดงตอไปน�

9. การทางานกบไฟลมเดย (Media)

เสยง (Sounds)

เสยงถอวาเปนสวนประกอบสาคญในงานแฟลช การนาเสยงเขามาใชงานในแฟลชโดยใช Action

Script มดงน�

1) นาไฟลเสยงท�เตรยมไวแลวเขามาในแฟลช

โดยคลกท�เมน File -> Import -> Import to Library ดงภาพ

2) คลกขวาไฟลท�ตองการ

3) คลกเคร�องหมายถกท�

(ควรเปนภาษาองกฤษและไมซ� ากบไฟลเสยงอ�น

4) สราง layer ใหมต�งช�อวา

ไฟลท�ตองการ เลอก Properties ดงภาพ

คลกเคร�องหมายถกท� Export for Action Script ท�ชอง Identifier พมพช�อไฟลเสยงตามตองการ

ควรเปนภาษาองกฤษและไมซ� ากบไฟลเสยงอ�น) แลวคลกปม OK ดงภาพ

ใหมต�งช�อวา action คลกท�เฟรมท� 1 กดปม F9 เพ�อเขยนโคด

25

พมพช�อไฟลเสยงตามตองการ

ดงภาพ

26

5) เขยนโคด ดงตอไปน�

6) กดปม Ctrl+Enter เพ�อทดสอบ Movie

รปภาพ (Images)

การนาไฟลภาพเขามาใชงานโดยใช Action Script มข�นตอน ดงน�

1) ใหคดลอก (Copy) ไฟลรปภาพท�ตองการนามาใชเกบไวในโฟลเดอรเดยวกนกบไฟลแฟลชของ

เรา ดงภาพ

2) สราง layer ใหมต�งช�อวา action คลกท�เฟรมท� 1 กดปม F9 เพ�อเขยนโคด

3) เขยนโคด ดงตอไปน�

4) กดปม Ctrl+Enter เพ�อทดสอบ Movie

10. การนาผลงานไปเผยแพร

การนาผลงานท�ทาเสรจเรยบรอยแลวสามารถทาไดดงน�

1) คลกเลอกท�เมน File -> Publish Settings

2) คลกเคร�องหมายถกเพ�อเลอกประเภทไฟลท�ตองการ

ในโฟลเดอรเดยวกนกบไฟลแฟลชของเรา

เพยงแคน� เรากจะไดไฟลท�พรอมนาเผยแพร และใชงานแลว

การนาผลงานท�ทาเสรจเรยบรอยแลวสามารถทาไดดงน�

> Publish Settings ดงภาพ

คลกเคร�องหมายถกเพ�อเลอกประเภทไฟลท�ตองการเผยแพร แลวคลกปม Publish

ในโฟลเดอรเดยวกนกบไฟลแฟลชของเรา

เพยงแคน� เรากจะไดไฟลท�พรอมนาเผยแพร และใชงานแลว

………………………………………

27

Publish ไฟลท�ไดจะอย