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 ไฟลท�ไดจะอย
Top Related