การสร้างสื่อการสอนอย่างง่ายด้วยโปรแกรม Flash

****************

                โปรแกรม Macromedia Flash เป็นโปรแกรมที่มีความสามารถสูงมาก        เป็นที่นิยมใช้ในการสร้างภาพเคลื่อนไหวอย่างกว้างขวางทั่วโลก  จนอาจกล่าวได้ว่า  ผู้ใช้คอมพิวเตอร์ใดไม่รู้จักโปรแกรม Flashแสดงว่าไม่รู้จักคอมพิวเตอร์จริง   แต่ในความเป็นจริงแล้วความสามารถของโปรแกรม Flash มีเหนือกว่าการสร้างภาพเคลื่อนไหวอีกมากนัก     โดยมีคุณสมบัติทั่วไปที่น่าสนใจดังนี้      

1. สามารถสร้างภาพเคลื่อนไหวได้อย่างมีประสิทธิภาพ 

2. โปรแกรมที่มีภาษาสคริปต์คล้ายโปรแกรมภาษา (Programming Language) อยู่ในตัว 

3.  ผลงานสามารถเผยแพร่ผ่านเครือข่ายอินเทอร์เน็ตได้โดยแนบไปกับภาษา HTML

4.  ยังสามารถแปลงเป็น ไฟล์ที่สามารถประมวลผลได้ในตัว  ( ไฟล์ประเภท  *.exe)

5.     ราคาโปรแกรมไม่แพงเมื่อเทียบกับความสามารถที่หลากหลาย

                จากเหตุผลดังกล่าวจึงเป็นโปรแกรมที่สามารถนำมาสร้างสื่อการสอนผ่านเครือข่ายอินเทอร์เน็ต(WBI)  ได้เป็นอย่างดี  

                โปรแกรม Flash เป็นโปรแกรมที่มีความสามารถสูงดังกล่าวจึงเป็นโปรแกรมที่ผู้ใช้งานควรมีพื้นฐานทางคอมพิวเตอร์มาแล้วเป็นอย่างดี  ในที่นี้จึงไม่กล่าวถึงวิธีการติดตั้งโปรแกรม เนื่องจากผู้มีพื้นฐานดีสามารถติดตั้งโปรแกรมอื่นๆ ได้อยู่แล้ว  วิธีการติดตั้งโปรแกรมนี้ไม่แตกต่างจากโปรแกรมอื่นๆ

                เอกสารนี้เป็นเอกสารประกอบการอบรมจึงมุ่งเน้นถึงเฉพาะเทคนิควิธีการสร้างสื่อผ่านเครือข่ายอินเทอร์เน็ตโดยตรง  ดังนั้นผู้ใช้เอกสารนี้อาจต้องศึกษาทักษะพื้นฐานจากตำราที่พิมพ์จำหน่ายโดยทั่วไปควบคู่ไปด้วย 

ข้อตกลงเบื้องต้น

                เนื่องจากการอธิบายวิธีการสร้างสื่อการสอนจำเป็นต้องใช้ข้อความซ้ำๆ บ่อยครั้ง  จึงขอกำหนดความหมายคำ   คำย่อ  หรือสัญลักษณ์แทนการอธิบายด้วยข้อความเต็มดังนี้

                1.  คลิก หมายถึงการคลิกปุ่มซ้ายของเม้าส์   1  ครั้ง

                2.  คลิกซ้ำ  หมายถึงการคลิกปุ่มซ้ายของเม้าส์สองครั้งติดต่อกัน (Double Click)

                3.  คลิกขวา หมายถึงการคลิกปุ่มขวาของเม้าส์  1  ครั้ง

                4.  ลากเม้าส์  หมายถึงกดปุ่มซีกซ้ายของเม้าส์ค้างแล้วลากตัวชี้ออกจากตำแหน่งเดิม

                5.  เครื่องหมาย > หมายถึงการสั่งงานต่อเนื่องติดต่อกัน  เช่น เลือก  Modify > Document หมายถึงให้คลิกปุ่มซ้ายของเม้าส์ที่เมนู Modify แล้วคลิกเม้าส์ต่อที่เมนูย่อยชื่อ Modify  เป็นต้น

                6.  คีย์ หมายถึง  ปุ่มซึ่งอยู่ในคีย์บอร์ด 

                6. ปุ่ม   Alt  ,   Ctrl  หรือ Shift  บนคีย์บอร์ด   เมื่อใช้ร่วมกับคีย์อื่นๆ  จะต้องกดคีย์ นี้ค้างไว้ก่อนแล้วค่อยกดปุ่มอื่นตาม  เช่น  Alt +Tab แสดงว่าให้กดคีย์  Alt ค้างไว้ก่อนแล้วค่อยกดคีย์ Tab ตามทีหลังแล้วปล่อยปุ่ม Tab ทันที  ก่อนปล่อยคีย์ Alt ตาม

การเตรียมตัวเบื้องต้น

                1.  หาภาพนิ่ง   ภาพเคลื่อนไหว  และเสียงที่ต้องการนำมาประกอบในสื่อการสอนแล้วบันทึกเป็นไฟล์เก็บไว้

                2.  นำเอกสารอ้างอิงมาวางไว้ใกล้ ๆ  พร้อมที่จะหยิบใช้งาน

                3.  เปิดโปรแกรมประกอบการสร้างงาน เช่น ACDsee  , Adobe Photoshop  ค้างไว้  พร้อมที่จะสลับไปทำงานที่โปรแกรมต่างๆ  เพราะการใช้โปรแกรมเหล่านี้ทำงานร่วมกันจะทำให้การทำงานสะดวกและรวดเร็ว   โดยการกดคีย์  Alt + Tab

สร้างบทนำ (Title)  ของสื่อการสอนด้วยโปรแกรม Flash

                1. เลือก   Modify  > Document  (Ctrl +J)  ปรับแต่งขนาดของ Stage ให้มีขนาดเล็กกว่ารายละเอียดของจอภาพทั่วไปเล็กน้อย คือ 760x 560 pixel ทั้งนี้เพื่อให้ไม่เกิด Scroll bar ขณะที่แสดงผลเต็มจอ   มีอัตราเร็วในการแสดงผล 12 กรอบภาพต่อวินาที (fps : Frame per Second)    พื้นหลังเป็นสีขาว เลือก Ruler Units เป็น Pixelแล้วคลิกที่ Make default เพื่อให้ขนาดของ Document (ในFlash เวอร์ชั่น 5  เรียกว่า Stage)  มีขนาดเท่ากับค่านี้ทุกครั้งที่สร้างไฟล์ใหม่ แล้วคลิกต่อที่ OK  ดังแสดงในภาพที่ 1

ภาพที่  1

                2.   ใช้โปรแกรม ACDsee เลือกภาพเมื่อพบภาพที่ต้องการแล้วให้จำชื่อไฟล์

                3.   เลือก Insert  >  New Symbol (Ctrl+F8)  ซึ่งจะเกิดหน้าต่าง  Crete New Symbol  ในช่อง Name อาจเปลี่ยนชื่อใหม่ที่ง่ายต่อการจดจำหรืออาจไม่เปลี่ยนชื่อก็ได้      แล้วเลือก Movie Clip  >  OK ดังแสดงในภาพที่  2

ภาพที่ 2

                4.   โปรแกรม Flash จะเข้าทำงานหลังฉาก (สร้าง Movie Clip ใน Library)  โดยจะปรากฎชื่อ Movie Clip ที่กำลังจะสร้าง (Symbol1)  ภายใน Scene 1  และจะปรากฎตำแหน่งกึ่งกลางมีเครื่องหมาย +   ดังแสดงในภาพที่ 3

ภาพที่ 3

5. เลือก File > Import  (Ctrl+R) เพื่อดึงภาพเคลื่อนไหว (*.gif) มาสร้างเป็น Movie Clip ดังแสดงในภาพที่ 4

ภาพที่ 4

6. จะเกิดหน้าต่าง Import ซึ่งในที่นี้เราจะต้อง Browse หา Folder และไฟล์ที่เป็นที่เก็บภาพที่ต้องการ แล้วเลือกไฟล์ดังกล่าว เมื่อคลิกเม้าส์เลือกไฟล์ดังกล่าวจะสังเกตเห็นชื่อไฟล์ที่เลือกไปปรากฎในช่อง File name  แล้วคลิกเม้าส์ต่อที่ Open  ดังแสดงในภาพที่ 5

ภาพที่ 5

                7. ผลที่เกิดขึ้นคือ  จะเกิด animation แบบ Frame to Frame ปรากฎ ในที่นี้คือภาพนกซึ่งเป็นภาพเคลื่อนไหวแบบ Frame to Frame โดยสังเกตได้จาก Time line ของ Movie Clip ซึ่งมองเห็นเป็นช่องที่มีจุดสีดำปรากฎทุกๆ Frame   แล้วคลิกต่อที่คำว่า Scene   เพื่อกลับไปที่ Stage   ดังแสดงในภาพที่ 6 

ภาพที่ 6

จากขั้นตอนดังกล่าว จะทำให้เกิด Movie Clip  (ภาพเคลื่อนไหวในตัว) ที่ชื่อ Symbol 1 เก็บไว้ใน Library  (ไม่แสดงผลใน Stage)

                8.  กด Ctrl +L เพื่อเปิด Library  แล้วเลือก Symbol 1 จะปรากฏภาพที่ Import เข้ามา  เราสามารถคลิกเพื่อดูการเคลื่อนไหวของ Movie Clip  ได้ด้วยการคลิกที่ปุ่ม Play  (สามเหลี่ยมสีดำ)  เมื่อเห็นว่าถูกต้องแล้ว   ให้เม้าส์ลากภาพนี้ไปวางไว้ใน Stage  ดังแสดงในภาพที่  7

                                                                                                                                             ภาพที่ 7

                ผลจากการกระทำดังกล่าวข้างต้น  ทำให้มีภาพนกปรากฏอยู่ใน Stage ซึ่งตัวภาพจะมีการเคลื่อนไหวอยู่ในตัว  สามารถทดสอบการเคลื่อนไหวด้วยการทดสอบ โดยการใช้คำสั่ง Ctrl + Enter  ดังแสดงในภาพที่ 8

ภาพที่ 8

                9. ดึงภาพนกออกนอกบริเวณ Stage เพื่อให้การเคลื่อนไหวเริ่มต้นจากภายนอก Stage ซึ่งทำให้มองไม่เห็นว่านกเริ่มต้นบินที่ไหน   แล้วคลิกเม้าส์ขวาที่ Frame แรกแล้วเลือก Create Motion Tween   ดังแสดงในภาพที่  9

ภาพที่ 9

                10. เลือก Frame ที่ 24 (Frame ใดก็ได้)  แสดงว่าให้นกบินใช้เวลา  2 วินาที  เนื่องจากเราได้กำหนดใน Document ว่า  มี Frame rate เป็น  12  fps    แล้วกด F6  เพื่อกำหนด Key Frame ซึ่งจะเห็นเป็นภาพลูกศรสีดำปรากฏในแต่ละช่อง Frame แทน  และในตำแหน่ง Frame ที่ 24 จะเห็น ช่องสีดำมีวงกลมสีขาวปรากฏอยู่ภายใน และเนื่องจากขณะนี้เป็นแสดงผลของ Frame ที่ 24  ตำแหน่งของหัวอ่าน ( Play head)เป็นสี่เหลี่ยมสีแดงปรากฏ อยู่ด้วย (จริงแล้วหากนำหัวอ่านออกจากตำแหน่งนี้  ช่อง Frame ที่ 24 จะเป็นสีขาว และวงกลมจะเป็นสีดำแทน     การที่แสดงสีเป็นตรงกันข้ามความเป็นจริงในขณะนี้เนื่องจาก เป็น Frame  ที่  Active ในขณะนั้น) ดังแสดงในภาพที่ 10

ภาพที่ 10

                11. ขณะที่ หัวอ่านอยู่ Frame ที่ 24 นี้  ให้เลื่อนภาพนกไปไว้ด้านตรงกันข้าม  แสดงว่า ตำแหน่งของนก ใน Frame ที่  1 ต่างจากตำแหน่งของนกใน Frame ที่ 24 ในFrame  ที่เหลือ นกจะเคลื่อนไปตามลำดับเองอัตโนมัติ ลองทำสอบการทำงานด้วยการกดคีย์ Ctrl + Enter  ดังแสดงในภาพที่ 11

ภาพที่ 11

                จากการทดสอบดังกล่าวถ้าหากทำถูกต้อง  จะเห็นนกบินจากทางซีกซ้ายมือไปยังขวามือ โดยการบินจะเป็นเส้นตรง

                12. คลิกที่ปุ่ม Add Layer Guide (ลูกศรด้านล่าง) เพื่อกำหนดเส้นทางการเคลื่อนที่ของนก จะเกิด Layer Guide เหนือ Layer 1  (ลูกศรด้านบน)  และภายใน Time line เกิดช่องสีขาวเชื่อมโยงจาก Frame ที่ 1 ถึง Frame 24  ดังแสดงในภาพที่

ภาพที่  12

                 13.  เลือก frameที่ 1  ใน Layer guide แล้วเลือก Pencil tool   ลากเส้นทางการบินของนกตาม

ต้องการ    ดังแสดงในภาพที่ 12

ภาพที่ 13

                14.  เลือก Layer 1  ในตำแหน่ง Frame ที่ 1  จะพบว่า เครื่องหมายวงกลมทางด้านซ้ายบนของตัวนก

อยู่ทับเส้น Guide พอดี หากไม่ทับจะต้องนำเม้าส์ลากไปวางให้ทับพอดี   ดังแสดงในภาพที่ 14

ภาพที่ 14

                15. เลือก Layer 1  ตำแหน่ง Frame ที่ 24  จะพบว่า เครื่องหมายวงกลมทางด้านซ้ายบนของตัวนกอยู่ทับเส้น Guide พอดี หากไม่ทับจะต้องนำเม้าส์ลากไปวางให้ทับพอดี   ดังแสดงในภาพที่ 15

ภาพที่ 15

                16. ทดสอบการบินของนกโดยการกด Ctrl + Enter 

หากนกไม่บินตามเส้นทางอาจกด Ctrl + Z เพื่อย้อนขั้นตอน  แล้วลองทำซ้ำ   หรืออาจทำใหม่ตั้งแต่เริ่มต้น เมื่อเห็นว่านกบินตามเส้นทางแล้ว  ควรบันทึกไฟล์นี้ เป็น title1  ด้วยการกดคีย์ Ctrl + S หากเป็นการ บันทึกครั้งแรกหรือบันทึกซ้ำไฟล์เดิม    และหากต้องการเปลี่ยนชื่อไฟล์ใหม่ต่างจากเดิม ให้ใช้คำสั่ง Save As

Ctrl +Shift + S  โปรแกรมจะบันทึกชื่อไฟล์ตามที่เรากำหนด และใส่ส่วนขยายให้เองเป็น  fla  (เป็นไฟล์ต้นฉบับ ควรเก็บไว้ใช้เมื่อต้องการแก้ไข หรือเปลี่ยนแปลง)

                17. กดคีย์  Ctrl + F3 เพื่อเปิด Properties ของ Frame แล้วคลิกให้เกิดเครื่องหมายกาถูก ü ในช่อง Orient to path  เพื่อให้นกสามารถบินแบบผาดโผนได้ (การ) ดังแสดงในภาพที่ 16

ภาพที่ 16

                18. คลิกปุ่ม Add Layer  เพื่อสร้าง Layer ใหม่ ซึ่งมีจุดประสงค์เพื่อให้เกิดภาพใหม่เมื่อนกบินผ่านนั้นคือต้องการให้เกิดวัตถุทรงกลมเปลี่ยนเป็นคำว่า “สื่อผ่านเครือข่ายอินเทอร์เน็ต”  ซึ่งในที่นี้จะสร้าง Layer ใหม่ชื่อ  Layer 4 และเกิด ช่อง Frame ว่างๆ สีขาวเชื่อมจาก Frame ที่    1 ไปยัง Frame ที่    24       ดังแสดงในภาพที่ 17

ภาพที่ 17

                19. เลือกตำแหน่ง Frame ที่ภาพนกอยู่กึ่งกลาง  แล้วกด F6 เพื่อ Insert keyframe  แล้ววาดวงกลมสีเขียว ดังแสดงในภาพที่ 18

ภาพที่ 18

                20. เลือก Frame ที่ 24  กด F6 เพื่อ Insert  keyframe อีกครั้งหนึ่ง จะมองเห็นเป็นช่องสีดำมีวงกลมสีขาวอยู่ภายใน  วงกลมนี้จะมีสีดำและช่องเป็นสีขาวเมื่อนำเม้าส์ออกจากตำแหน่งนี้  ดังแสดงในภาพที่ 19

ภาพที่ 19

                21. เลือก Frame ที่ 21 แล้วกดคีย์ Ctrl + F3 เพื่อแสดง Properties เปลี่ยนช่อง Tween เป็น shape

ซึ่งจะพบว่าเกิดภาพลูกศรสีดำบนพื้นสีเขียวใน Frame ที่ 3 ดังแสดงในภาพที่ 20

ภาพที่ 20

                22. เลือก Frame ที่ 24 พิมพ์ข้อความ “บทเรียนผ่านเครือข่ายอินเทอร์เน็ต” ด้วย Font ชื่อ angsanaUPC  ขนาด 54 point  ชนิดของข้อความเป็น Static ดังแสดงในภาพที่ 21

ภาพที่ 21

                23. กดคีย์ Ctrl + B สองครั้ง  เพื่อเปลี่ยน Text ให้เป็น Graphic ซึ่งจะเห็นว่ากรอบล้อมรอบข้อความสีเขียวหายไป  และปรากฎเป็นจุดเล็กบนข้อความแทน

                เพื่อป้องกันไม่ให้ Object ใน Layer อื่นๆ เปลี่ยนแปลงในขณะทำงานเราอาจคลิกเม้าส์ให้เกิดภาพกุญแจปรากฎใน Layer ที่ไม่ต้องการให้เกิดผลกระทบได้  ดังแสดงในภาพที่ 22

ภาพที่ 22

                24. ลบวงกลมสีเขียวออก   แล้วทดสอบการทำงานดู  จะพบว่าวงกลมสีเขียวจะเปลี่ยนเป็นคำว่า

“บทเรียนผ่านเครือข่ายอินเทอร์เน็ต”

                25. เลือก Frame ที่ 25 แล้วกดคีย์ F6 เพื่อ Insert keyframe ดึงนกมาวางทางซ้ายมือใหม่  แล้วเลือก Frame ที่ 48 (กำหนดให้ทำงานในช่วงนี้ต่ออีก 2 วินาที) ดึงนกมาวางขวามือ  ทำให้มองคล้ายกับมีนกอีกตัวหนึ่งกำลังบินผ่านมา  และกำหนดเส้นทางการบินใน  Layer Guide โดยการกด F6  ที่ Frame ที่ 25  และ Frame ที่ 48   เพื่อกำหนดขอบเขตการแสดงผลและวาดเส้นทางบินด้วย Pencil tool อีกเช่นเดียวกัน แล้วทดสอบการบินของนกด้วยการกดคีย์ Ctrl + Enter แล้วปรับแต่งให้นกบินตามเส้นทางที่ต้องการ

26.  กดปุ่ม  Insert Layer ซึ่งโปรแกรมจะตั้งชื่อ Layer ขึ้นมาใหม่ในที่นี้ชื่อ Layer  9  (อาจชื่อเป็นอย่างอื่น โปรแกรมจะนับเพิ่มให้เอง)  หาตำแหน่งนกบินผ่านกลาง ด้วยการเลื่อน Play head  โดยกดคีย์ > เพื่อเลื่อนตำแหน่ง Play head ไปทางขวามือ  และกดคีย์ <  เพื่อเลือกตำแหน่งของ Play head ไปทางซ้ายมือ เมื่อพบตำแหน่งที่นกบนตรงกลาง  ให้กดคีย์ F6 เพื่อ Insert keyframe แล้ววางวงกลมสีเขียวอีกหนึ่งวง  กดคีย์ F6 ที่ Frame ที่ 48 เพื่อกำหนด Key frame ที่ปลายทางอีกครั้งหนึ่ง  ซึ่งจะทำให้ได้ขอบเขตของการทำงาน แล้วกลับมาเลือก Frame ที่ 25  เพื่อกำหนด Properties ของ Tween ให้เป็น Shape  แล้วเลือก Frame ที่ 48  พิมพ์ข้อความว่า “เรื่อง”    ซึ่งจะพบว่ามีเส้นบอกขอบเขตของข้อความ  หากมองไม่เห็นให้คลิกเม้าส์บนพื้นที่ว่างๆ  หนึ่งครั้งเพื่อเลิกการเลือก Object ข้อความ  ถ้าทำถูกต้องจะมองเห็นเส้นบอกขอบเขตข้อความเป็นสีเขียว  แล้วกดคีย์  Ctrl + B (Break apart)  จำนวน 2 ครั้งเพื่อทำให้ข้อความเป็น Graphic  แล้วลบวงกลมสีเขียวออก 

การปฏิบัติดังกล่าวข้างต้นจะทำให้เกิดผลคือเห็นภาพนกบินผ่านอีกครั้งหนึ่ง และขณะบินผ่านกึ่งกลางจอภาพจะเกิดวงกลมสีเขียวหลุดออกจากตัวนก และวงกลมสีเขียวจะเปลี่ยนเป็นข้อความว่า “เรื่อง”

เมื่อนกบินผ่านไปแล้ว  โดยมีจุดสังเกตที่เกิดขึ้นดังแสดงในภาพที่  23

ภาพที่ 23

27. กด  F6   ในตำแหน่ง Frame ที่  70  ของทุกๆ Layer  เพื่อให้มองเห็นภาพสุดท้ายได้นานพอสมควร  (หรือ Frame อื่นใดที่ทำให้ผู้ใช้สามารถอ่านข้อความทั้งหมดได้ และมองเห็นไม่นานจนเกินไป)                  28. เลือก Frame ที่ 70 ของ Layer ใดๆ  แล้วกด F9 เพื่อใส่ Action script  แล้วคลิก

เครื่องหมาย +   > Actoin > Browser/Network > loadMovie   ดังแสดงในภาพที่ 24

ภาพที่ 24

29. พิมพ์ข้อความในช่อง URL เป็น title2.swf  ในช่อง Level  ใช้เลข 0  (เป็น Layer เดียวกับ File เดิมคือ title1.swf )  ซึ่งเมื่อพิมพ์ข้อความเรียบร้อยแล้วจะทำให้เกิดข้อความในช่อง Editor เป็น loadMovieNum(“title2.swf”,0);  ดังแสดงในภาพที่ 25

ภาพที่ 25

จากคำสั่งดังกล่าวจะทำให้เรียกไฟล์  title2.swf มาแทนที่ไฟล์  title1.swf เมื่อแสดงมาถึง Frame ที่ 70

                30. บันทึกชื่อไฟล์เป็น title1.swf  แล้วกด   Shift +F12    เพื่อ publishเป็นไฟล์  title1.html          และ title1.swf  ทำให้ผลงานนี้สามารถแสดงผลทาง Browser ซึ่งเผยแพร่ในอินเทอร์เน็ตและใช้งานแบบ Real time ได้

กิจกรรม 1

                  ใช้วิธีการดังกล่าวข้างต้นทำให้มองเห็นเป็นภาพนกบินผ่านอีกเป็นครั้งที่ 3 โดยขณะบินผ่านกึ่งกลางจอภาพให้ปรากฎวงกลมสีเขียวอีกครั้งหนึ่ง และเมื่อนกบินผ่านไป วงกลมสีเขียวจะเปลี่ยนเป็นข้อความว่า “สิ่งมีชีวิต” (หรือชื่ออื่นใดที่ผู้รับการอบรมต้องการ)

กิจกรรมที่ 2

                  ใช้ความรู้ที่ได้รับการอบรมหรือจากที่ศึกษาเพิ่มเติมจากตำราทั่วไป  ออกแบบ Title ของสื่อการสอนเป็นของตนเอง

การสร้างแบบฟอร์มรับข้อมูล

                เราสามารถสร้างแบบฟอร์มรับตัวแปรเพื่อเก็บข้อมูลผู้เรียนในเครือข่ายอินเทอร์เน็ตได้โดยปฏิบัติ  ดังนี้

               1.  เปิดไฟล์ใหม่โดยใช้คำสั่ง File > new  หรือ Ctrl+ N

                2.  พิมพ์ข้อความว่า “กรุณาพิมพ์ชื่อของท่าน” 

                3.  สร้าง Text Field แบบ Input text   ชนิดอักษร  angsanaUPC ขนาด  56  point   ในช่อง Var  พิมพ์คำส่ง name  เพื่อให้รับชื่อของผู้ใช้เก็บในตัวแปรช ื่อ name  ดังแสดงในภาพที่ 26

ภาพที่ 26

                4. คลิกที่ปุ่ม Character จะเกิดหน้าต่างใหม่  เลือก  All character  เพื่อเก็บ Font นี้ไปแสดงผลที่ Browser ด้วย  (อาจไม่จำเป็นต้องทำหากคิดว่า Font ที่เราเลือกมีใช้ทุกๆ เครื่อง  แต่อาจจำเป็นอย่างยิ่งหากเราใช้ Font ที่แปลกออกไป  เครื่องผู้ใช้หากไม่มี Font ดังกล่าว จะทำให้ไม่สามารถอ่านข้อความได้  ) ดังแสดงในภาพที่ 27

ภาพที่ 27

                5. ลากสี่เหลี่ยมแบบมุมโค้งเพื่อกำหนดขอบเขตของข้อความโดยคลิกที่ rectangle tool

> Round Rectangle Radius  พิมพ์ 15 ลงในช่อง Corner  Radius แล้วลากขอบเขตของสี่เหลี่ยมให้มีขนาดเท่าขอบเขตของ Text Field   ดังแสดงในภาพที่ 28 

ภาพที่ 28

6. คลิก OK  จะเกิดผลดังแสดงในภาพที่ 29

ภาพที่ 29

                7. สร้างปุ่มเพิ่มขึ้นมา 1 ปุ่ม  โดยใช้ขั้นตอนดังนี้

                               7.1  คลิก Insert > New Symbol  หรือ Ctrl + F8   จะเกิดหน้าต่างใหม่ ที่มีจั่วหน้าว่า Create New  Symbol  เลือก Movie Button  ซึ่งจะทำให้เกิด Time line ของ Button  และเกิดเครื่องหมาย + ซึ่งหมายถึงตำแหน่ง  กึ่งกลางของ Symbol ที่กำลังสร้างดังแสดงในภาพที่ 30

ภาพที่ 30

                7.2  เลือก Rectangle tool และ Radius  Corner เป็น 15 และใช้ สี Fill เป็น สีเขียวแบบ Gradiant  แล้ววาดสี่เหลี่ยมให้ เครื่องหมายบวก (+) อยู่กึ่งกลางปุ่มพอดี  ดังแสดงในภาพที่ 31

          ในการจัดภาพให้อยู่กึ่งกลางดังกล่าวอาจใช้  Align Inspector (Ctrl +K) ช่วยจะทำให้ง่าย รวดเร็ว และแม่นยำกว่า  โดยการคลิกที่  To  stage และเลือกกึ่งกลางแนวตั้งและกึ่งกลางแนวระดับ   ดังแสดงในภาพที่ 32

ภาพที่  31                                                          ภาพที่ 32

                7.3  นำเม้าส์วางที่ Over (Stage) กด F6 เพื่อ Insert key Frame แล้วเปลี่ยนสีของภาพที่เหลี่ยมเป็นสีแดง  ดังแสดงในภาพที่ 33

ภาพที่ 33

                7.4 คลิกที่  Down  (Stage) F6 เพื่อ Insert key Frame แล้วเปลี่ยนสีของภาพที่เหลี่ยมเป็นสีแดง  ดังแสดงในภาพที่ 34

ภาพที่ 34

                7.5 คลิกปุ่ม Insert Layer เพื่อสร้าง Layer สำหรับใส่ข้อความ ดังแสดงในภาพที่ 35

ภาพที่ 35

                7.6  เลือก Frame ที่ 1 ของ Layer 2 แล้วกด เพื่อลบ Frame ของ Over (Stage) และ Down (stage) หลังจากนั้นให้นำเม้าส์วางที่ Over แล้วกดคีย์ (F6) เพื่อ Insert Key  Frame โดยหลังจากปฏิบัติดังกล่าวเรียบร้อยแล้ว ในช่อง Over จะเป็นสี่เหลี่ยมสีดำ และมีวงกลมสีขาวตรงกลาง แล้วพิมพ์ข้อความว่า “ต่อไป”  โดยเลือก Font ที่เป็น angsanaUPC และเลือกสีข้อความเป็นสีขาวเพื่อให้มองเห็นได้ง่ายโดยให้ข้อความอยู่ตรงกลางสี่เหลี่ยมพอดี แล้วกด Ctrl + B เพื่อเปลี่ยนข้อความที่เป็น Text ให้เป็น Graphic   แล้วกด F6  ที่ Over และDown เพื่อสร้าง Key frame และคัดลอกวัตถุที่สร้างไว้ใน Frame ซึ่งอยู่ด้านซ้ายมือ   ดังแสดงในภาพที่ 36

ภาพที่ 36

                7.6  คลิกที่ Scene ใต้ Time line เพื่อกลับไปยังหน้าสร้างงานตามเดิมแล้วเปิด Library Inspector  จะพบว่าปุ่มที่เราได้สร้างขึ้นไปปรากฎอยู่ใน Library ให้ลากปุ่มนี้ไปวางใน Stage

ดังแสดงในภาพที่ 37

                8. คลิกเลือกปุ่มแล้วกด F9 เพื่อใส่คำสั่งลงในปุ่ม  โดยการคลิกที่ + > Actions>Movie Control > goto  ดังแสดงในภาพที่ 38

ภาพที่ 38

                9.  เมื่อใช้คำสั่งจากข้อ 8 จะเกิดหน้าต่าง Action Button ให้แก้ไข  โดยคลิกที่ drop down list ท้ายช่อง Type และเลือก Next Frame จะทำให้เกิดข้อความในช่อง  Script Editor เป็น nextFrame();

ดังแสดงในภาพที่ 39

ภาพที่ 39

                10. คลิกเลือกบรรทัดบนสุด ซึ่งมีข้อความว่า on (release) จะเกิด ช่อง Event ให้เลือก  เพิ่มเติม คลิกเลือก Key Press แล้วใช้เม้าส์คลิกในช่องหลังตัวเลือก กดคีย์  Enter ใน keyboard จะทำให้เกิดข้อความในช่อง Script Editor เป็น on (release,keyPress “<Enter>”) { ดังแสดงในภาพที่ 40

ภาพที่ 40

                ข้อความใน Script Editor ทั้งหมดจะมีข้อความดังนี้

on (release, keyPress "<Enter>") {

    nextFrame();

}

                จากคำสั่งนี้จะทำให้ไปแสดงผลที่ frame ที่ 2 

                11.  เลือก  frame ที่  1 ในขณะที่หน้าต่าง  Action  ยังคงปรากฎอยู่  แล้วคลิกที่  ปุ่ม view option  เลือก  Expert mode แล้วพิมพ์ข้อความใน Script Editor ดังแสดงในภาพที่ 41

ภาพที่ 41

                ข้อความในช่อง Script Editor อธิบายได้ดังนี้

Selection.setFocus("name");   เพื่อให้ เคอเซอร์กระพริบอยู่ใน Text Field ชื่อ name

loadMovieNum("sound1.swf", 1);  เพื่อ Load ไฟล์เสียงชื่อ sound1.swf ทำให้ได้ยินเสียงด้วยในขณะแสดงผลไฟล์นี้ เลข 1 หลังเครื่องหมายจุลภาค หมายถึง Level ของการประมวลผล  ทำให้ไฟล์ที่กำลังใช้งานซึ่งมีสถานะเป็น Level   0  เสมอ  โหลดไฟล์  sould1.swf  ซึ่งอยู่ใน level 1 ออกมาทำงานเหนือ ไฟล์ level ได้พร้อมๆ กันในขณะเดียวกัน

stop();             เพื่อให้การแสดงผลอยู่ที่ Frame ที่ 1  โดยไปกระโดดไปทำงานที่ Frame 2 โดยอัตโนมัติ

                12. เลือก frame ที่ 2  กด F7  (Insert  Blank keyframe) เพื่อสร้าง frame ว่างๆ สำหรับ

เพิ่ม Objects  ที่แตกต่างจาก frame แรก แล้วพิมพ์ข้อความ “ยินดีต้อนรับคุณ”  และข้อความ

“ด้วยความยินดียิ่ง”   และสร้าง Text Field ชนิด Dynamic text ขึ้นมา  1  ฟิลด์  สังเกตได้จากสี่เหลี่ยมเส้นประ   พร้อม copy ปุ่มจาก Frame ที่ 1  มาวางดังแสดงในภาพที่ 42

ภาพที่ 42

                13. หาก Properties ของ Text Field ดังกล่าวไม่ตรงตามที่ต้องการ  ให้กด Ctrl +F3 เพื่อเปิด Properties แล้วเปลี่ยนให้เป็น  Dynamic text  ชนิดของอักษรเป็น angsanaUPC  ขนาดโตพอเหมาะ ในที่นี้คือ 56  point   จำนวนบรรทัดเป็น Single line  และใส่ตัวแปรเป็น   name2       ดังแสดง

ในภาพที่ 43

ภาพที่ 43

                14. เลือก Frame ที่ 2 ในTime line  แล้วกด Ctrl + F3 เพื่อใส่ Script  โดยการเลือก Expert Mode แล้วใส่ Script ด้วยข้อความดังนี้

name2 = name;   หมายถึงให้ตัวแปรชื่อ name2 มีค่าเท่ากับ name คือรับตัวแปรจากการที่ผู้ใช้พิมพ์มาเก็บในตัวแปร name2 แล้วแสดงผลที่นี่

stop();  หมายถึงให้หยุดทำงานต่อที่ frame นี้    ดังแสดงในภาพที่ 44

ภาพที่ 44

                15. เลือก ปุ่ม “ต่อไป” แล้วใส่ Script ดังนี้

on (release, keyPress "<Enter>") {  หมายถึงให้ทำงานตามคำสั่งเมื่อ ปล่อยปุ่มซ้ายของเม้าส์

หรือกดคีย์ Enter  และมีเครื่องหมายปีกกาเปิดเพื่อรับคำสั่ง

    loadMovieNum("menu.swf", 0);  หมายถึงให้ เปิด File ชื่อ  menu.swf   และ Level 0  หมายถึง

มาแสดงแทนที่โปรแกรมนี้

}    หมายถึง   ปิดคำสั่ง

ดังแสดงในภาพที่ 45

ภาพที่ 45