1

ทําความรูจักกับ Flash

แตเดิมน้ันโปรแกรม Flash ถูกออกแบบมาเพื่อเปนโปรแกรมสําหรับวาดภาพ ซึ่งตอมาไดพัฒนาใน

สวนของ Animation ทําใหเพิ่มประโยชนทางดานการใชสอยมากขึ้น ในแวดวงนักออกแบบเว็บไซต หรือ

นักพัฒนา Animation ไมมีทานใดที่ไมรูจักโปรแกรมน้ี เน่ืองจาก Flash เปนโปรแกรมที่สราง Animation

ที่มีคุณภาพ สามารถโตตอบกับผูใชไดดี ทําใหโปรแกรมน้ีเปนโปรแกรมที่ยอดฮิตในหมูผูสราง Animation

และ Interactive แบบ 2 มิติในปจจุบัน ซึ่งเว็บไซตที่เผยแพรผลงานที่สรางโดย Flash ดังๆ อยางเชน

http://happytreefriends.atomfilms.com, http://www.boombastick.net

รูปรางหนาตาของโปรแกรม Flash

1. Open a Recent Item จะเปนการเปดงานที่ทํา 9 ชิ้นลาสุด หรือกดปุม open เพื่อเปดไฟลอ่ืน

นอกเหนือจากน้ี

2. Create New สรางงานใหม

3. Create from Template สรางงานจากแมแบบที่ทางโปรแกรมเตรียมไวให

*ในที่น้ีจะใช Flash File (Action Script 2.0) เปนหลักในการสอน

1 2 3

2

สวนประกอบที่สําคัญของโปรแกรม

1. Menu Bar คือแถบที่รวบรวมคําสั่งทั้งหมดที่ใชสรางผลงาน รวมไปถึงการต้ังคาของโปรแกรม

2. Toolbar คือแถบเคร่ืองมือที่ชวยใหการทํางาน

3. Timeline คือสวนที่ใชสรางภาพเคลื่อนไหว

4. Stage คือสวนของหนากระดาษตรงกลาง ซึ่งจะมีสีขาว เปนพื้นที่จริงของการแสดง

สวนประกอบของ Menu Bar

*รายละเอียด Menu Bar จะอธิบายแคสวนที่ใชหลักๆ ในการเรียนคร้ังน้ี

Toolbar

Timeline

Stage

Menu Bar

3

สวนของ File

สรางไฟลใหม เรียกไฟลที่มีอยูแลวขึ้นมาใชใหม

ปดโปรแกรม ปดทุกหนาตางของโปรแกรม

บันทึกโปรแกรม

บันทึกโปรแกรมครั้งแรก

บันทึกทั้งหมด

นําผลงานออกเปนภาพนิ่ง

นําผลงานออกเปนภาพเคล่ือนไหว

จบการทํางานของโปรแกรม

4

สวนของ Edit

Undo ยอนกลับไปทําสวนที่แลว

Redo ทําตอไปสวนขางหนา

ตัดขอมูล

สําเนาขอมูล

วางขอมูล

ตั้งคาสวนตางๆ ของโปรแกรม

5

สวนของ View

***ในการวาดภาพจะใชสวนที่กลาวมานี้เปนหลักๆ หากสนใจหรือตองการหาความรูเพิ่มเติมแนะนําใหหา

หนังสือที่มีรายละเอียดเยอะๆ เชน คัมภีร Flash เปนตน

ขยายเขา ขยายออก

ขยายตามสัดสวนที่โปรแกรมกําหนด

เปด-ปดไมบรรทัด ตารางเพ่ือชวยในการวาดภาพ

6

Toolbox Toolbox เปนกลองเก็บอุปกรณที่ใชในหารสรางปรับแตง และแกไขวัตถุ สามารถเรียกใชงาน

toolbox ไดโดยเลือกคําสั่ง Window > Tools แลวคลิกเคร่ืองมือที่ตองการ

Snap to Object

No color

Swap color

Black and white

Fill color

Stroke Color

Zoom Tool [M,Z] Hand Tool [H]

Eraser Tool [E] Eyedropper Tool [I]

Paint Bucket Tool [K] Ink Bottle Tool [S]

Blush Tool [B] Pencil Tool [Y]

Rectangle Tool [R] Line Tool [N]

Text Tool [T] Pen Tool [P]

Lasso Tool [L] Free Transform Tool [Q]

Selection Tool [V] Sub selection Tool [A]

7

เครื่องมือตางๆ ใน Toolbox

Selection tool [V]

Sub Selection tool [A]

Lasso tool [L]

กลุมคําสั่ง Selection การเลือกวัตถุ

Free Transform Tool [Q] ยืด หด ยอ หรือขยายขนาดของวัตถุ

Line tool [N] วาดเสนตรง

Pen Tool [P] วาดเสนและสวนโคงตางๆ

Text Tool [T] พิมพอักษร

Rectangle Tool [R] วาดสี่เหลี่ยม

Pencil Tool [Y] ดินสอวาดภาพ

Blush Tool [B] แปรงระบายสี

Ink Bottle Tool [S] ปรับแตงเสนขอบของวัตถุ

Paint Bucket Tool [K] เทสีพื้น

Eyedropper Tool [I คัดลอกสีที่ตองการ

Hand Tool [H] จับ stage ใหเลื่อนไปยังที่ที่ตองการ

Eraser Tool [E] ยางลบ

Zoom Tool [M,Z] ซูม/ยอขยายหนาจอ

เคร่ืองมือภายใน Toolbox แบงออกเปนกลุมไดทั้งหมด 5 กลุม ดังน้ี

8

1. อุปกรณในกลุม View

อุปกรณในชุดน้ีมีไวสําหรับดูงานในรูปแบบตางๆใหทํางานละเอียดและสะดวกขึ้น จึงถือ

เปนอุปกรณพื้นฐานที่ตองใชเปนลําดับแรก

Hand tool

อุปกรณืมือจับน้ีมีไวใชในกรณีที่ตองการเลื่อนงานไปตําแหนงตางๆ โดยสวนใหญจะ

ใชเมื่อมีการ zoom เขาไปดูใกล และเมื่อตองการขยับงานไปดูสวนอ่ืนจะไดไมตองเสียเวลา

ไปลาก scrollbar หรือ zoom ออกมาอีก

Zoom Tool

แวนขยายน้ีมีความจําเปนเมื่อตองการดูงานแบบละเอียดในระยะใกล หรือตองการดู

ภาพรวมในระยะไกล สามารถใชอุปกรณน้ี zoom เขาออกดวย โดยคาเร่ิมตนเมื่อกดคร้ังแรก

ที่สวน option ของ toolbar จะเปนแวนขยายเคร่ืองหมายบวก เมื่อคลิกที่พื้นงานจะเปนการ

zoom เขา และเมื่อตองการ zoom ออกใหกดที่แวนขยายเคร่ืองหมายลบ

2. อุปกรณในกลุม option

การทํางานของ Option น้ันจะแปรเปลี่ยนไปตามอุปกรณตางๆ เชนกรณี zoom จะมี zoom

เขาและออก ใหเลือกที่ option

Stroke Color ปรับแตงสีของเสนขอบ

Fill color ปรับแตงสีของพื้นที่

Black and white เปลี่ยนสี stoke color กับ fill color ใหเปนสี ขาว/

ดํา

No color เปลี่ยนสี stoke color ใหไมมีสี

Swap color สลับสีระหวาง stoke color กับ fill color

Snap to Object แมเหล็กยึดวัตถุ

9

3. อุปกรณในกลุม Drawing

อุปกรณในกลุมน้ีมีไวเพื่อวาดรูปขึ้นในโปรแกรม

Line Tool

Line Tool คือเคร่ืองมือวาดเสนตรง โดยคลิกที่ จากน้ันเมาสจะเปลี่ยนเปนรูป + ให

คลิกเมาสคางไวแลวลากเสนไปในทิศทางที่ตองการ แลวปลอยเมาสจะไดเสนตรงหน่ึงเสน โดยเวน

ที่วาดจะมีสี Stroke

การดัดเสนโคง

1. เลือกเคร่ืองมือ Line ลากเสนตามทิศที่ตองการ

2. กด Ctrl คางไวแลวเลื่อนเมาสไปที่กลางเสนจะเห็นวาเมาสเปลี่ยนรูปเปน ซึ่งมี

สัญลักษณที่ใชในการดัดเสนโคง

3. ดัดเสนไปในทิศทางที่ตองการ

การเปลี่ยนทิศทางของเสน

1. เลือกเคร่ืองมือ Line ลากเสนตามทิศที่ตองการ

2. กด Ctrl คางไวแลวเลื่อนเมาสไปที่ปลายเสน สังเกตไดวาเมาสจะเปลี่ยนเปนรูป... ซึ่ง

เปนสัญลักษณที่ใชในการเปลี่ยนทิศทางของเสน

3. คลิกลากเปลี่ยนไปในทิศทางที่ตองการ

Pen

Pen จะใชวิธีคลิกเปนจุดแลวปลอย (ไมคลิกคางแลวลากเหมือน line) เมื่อคลิกที่จุดถัดไป

โปรแกรมจะลากเสนจากจุดแรกไปที่จุกถัดไปดดยทันที โดยใชสี Stroke แลวเมื่อวนกลับมาคลิกที่

จุดเร่ิมตนรูปทรงจะถูกปด เสนที่เกิดจาก pen จะถูกเรียกวา Path

10

วิธีสรางเสนโคงดวย Pen tool จะเร่ิมตนที่

1. คลิกจุด A แลวปลอย

2. ลากเมาสไปที่จุด B แลวลิกคางไว

3. ลากเมาสไปทิศทางใดก็ได จะเห็นแขนลากออกมา 2 ขาง ขางหน่ึงจะไปตามทางที่เมาสลาก อีก

ขางหน่ึงไปในฝงตรงขาม

4. ไดเสนโคงตามที่ตองการ

11

Text

การพิมพ Text ลงใน flash น้ันใชควบคูกับ properties panel เน่ืองดวยวาการปรับเปลี่ยน

font สี ขนาด การจัดเรียง ลวนตองทําที่ properties ทั้งสิ้น

สวนประกอบสําคัญของ Properties เมื่อเลือกใช Text

1. Text type หรือ ชนิดของ text โดยมีใหเลือกอยู 3 ชนิด

Static text Text ที่แสดงผลเปน Graphic แบบปกติ

Dynamic text กลองแสดงขอความ หรือ text ที่สามารถเปลี่ยนการ

แสดงผลไดตามการเขียนโปรแกรม

Text type Font

Font Size

Text (Fill) Color Text Alignment

Letter Spacing

Character Position

Font Rendering Method

URL Link

Edit format Option

Change Orientation of Text

12

Input text กลองแสดงขอความ หรือ text ที่อนุญาตใหผูชมพิมพ

ขึ้นเองได ใชรับคาจากผูชม แลวนําไปคํานวณในกรณี

ตางๆ

2. Font สามารถเลือก font ที่มีอยูภายในเคร่ืองโดยสามารถกดที่เคร่ืองหมาย ดาน

ขวามือ สวน Font Size หรือขนาดของ Font จะเพิ่มขนาดไดใหญถึง 96 point

3. Text Alignment ใหเลือกจัดรูปแบบของกลุม Text ซึ่งมีรูปแบบใหใชดังน้ี

- Align Left : จัดชิดซาย

- Align Center : จัดกึ่งกลาง

- Align Right : จัดชิดขวา

- Justify : จัดเสมอ 2 ดาน

4. Edit Format Options เปนสวนที่ใหเลือกเกี่ยวกับการจัดกรอบตัวหนังสือ เมื่อกดปุม

จะมีหนาตาง pop-up มีสวนตางๆดังน้ี

- Indent : การควบคุมระยะหางของยอหนา

- Line Spacing : การควบคุมความหางระหวางบรรทัด

- Left Margin : การควบคุมความหางจากกรอบตัวอักษรดานซาย

- Right Margin : การควบคุมความหางจากกรอบตัวอักษรดานขวา

5. Change Orientation of Text and Text Rotation

สามารถกําหนดทิศทางการแสดง Text ไดจากปุมน้ีโดยจะมีใหเลือก 3 รูปแบบ

- Horizontal : เปน Text แนวนอนที่เปนคาเร่ิมตนที่ใชกันปกติ

- Vertical, Left to Right : เปน text แนวต้ังที่อานจากซายไปขวา

- Vertical, Right to Left : เปน text แนวต้ังที่อานจากขวาไปซาย

6. Letter Spacing

การกําหนดคา Letter Spacing เปนการลดหรือเพิ่มชองไฟของตัวอักษรแตละตัว

7. Character Position

เปนตัวเลือกในการพิมพตัวยกตัวหอย โดยมีให 3 ตําแหนง

- Normal : ตําแหนงปกติ

- Superscript : ตัวยก

- Subscript : ตัวหอย

13

8. Font Rendering Method

การเลือกแสดงผลของ Font ตางๆ สามารถกําหนดใชใหเหมาะสมกับการใชงานแตละ

ประเภทที่แตกตางกันได

- Use Device Fonts เปนการเลือก Font จากเคร่ืองคอมพิวเตอร โดย Flash ได

กําหนด Font ที่ใชสําหรับ Device ไว 3 รูปแบบคือ

1. _sans1 สําหรับผูที่ใช Font ใกลเคียงกับตระกูล Helvetica หรือ

Arial

2. _serif2 สําหรับผูที่ใช Font ใกลเคียงกับตระกูล Times Roman

3. _typewriter สําหรับผูที่ใช Font ใกลเคียงกับตระกูล Courier

- Bitmap text (no anti-alias) ใชในกรณีที่ตองการพิมพ Text ขนาดเล็ก

- Anti-Alias for animation เปนตัวอักษรที่ถูกออกแบบมาใชกับ text ที่จะมีการ

เคลื่อนที่

- Anti-Alias for readability ใชกับ font ขนาดทั่วไปถึงขนาดใหญ แตแสดง

ผลไดคมชัดสวยงามกวาแบบ Anti-Alias for animation แตขณะเดียวกันถา

นํามาเคลื่อนไหว ก็ไม smooth

- Custom anti-alias สําหรับการต้ังคา Anti-Alias ดวยตนเอง

9. URL Link

การพิมพ Text ใน Flash ทุกคําน้ัน มีคุณสมบัติพิเศษวา สามารถทํา Link ไดทันที

โดยทําไฮไลทบริเวณที่ตองการทํา link จากน้ันใส URL ของเว็บไซต

Rectangle

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

Fill และ Stroke เมื่อตองการวาดสี่เหลี่ยมใหใชอุปกรณ คลิกแลวลากบน Stage จะเกิดรูป

สี่เหลี่ยมซึ่งกําหนดขนาดไดอยางอิสระ แตหากวาตองการความกวางและยาวที่เทากันใหกดปุม

Shift ในขณะที่วาด

1

Sans-serif font 2

Serif font

14

Oval วงกลมสําเร็จรูป

การทํางานลักษณะเดียวกับ Rectangle แตใชวาดวงกลมโดยใชอุปกรณ และมี

properties ที่นาสนใจ

- Start angle สามารถกําหนดมุมเร่ิมวาดของวงกลมได

- End angle สามารถกําหนดมุมสิ้นสุดของวงกลมได

- Inner radius สามารถกําหนดรัศมีของวงกลมได(ในกรณีที่ตองการสรางวงแหวน)

Rectangle Primitive สี่เหลี่ยมท่ีแกไขได

ลักษณะการใชงานเหมือนกับ Rectangle คือวาดรูปโดยกําหนดคาไดเหมือนกัน แตตางจาก

rectangle ตรงที่สามารถต้ังคาไดเสมอถึงแมวาจะวาดเสร็จแลว โดยเลือกที่อุปกรณ

Oval Primitive วงกลมท่ีแกไขได

ลักษณะการใชงานเหมือน Oval แตสามารถต้ังคาไดภายหลังเชนเดียวกับ Rectangle

Primitive โดยเลือกที่อุปกรณ

Polystar Tool รูปหลายเหลี่ยมและรูปดาว

ใชสําหรับวาดรูปหลายเหลี่ยมและรูปดาวสําเร็จรูป โดยตองต้ังคาที่ Properties กอนวาดทุก

คร้ัง โดยเลือกที่อุปกรณ แลวกดที่ปุม options ของ properties

ที่หนาตาง Tool settings มีทางเลือกดังน้ี

- Style มีใหเลือก 2 แบบคือ polygon และ star

- Number of Sides กรณีของ polygon คือจํานวนดาน สวน star คือจํานวนแฉก

- Star point size สําหรับการต้ังคาระยะจากจุดศูนยกลางจนถึงขอบดาว โดยมีคาไดต้ังแต 0.1

– 1.0

15

Pencil

อุปกรณดินสอน้ีจะวาดเสนดวยมือ โดยเสนที่เกิดจะเปนสี Stroke โดยมี option สําหรับ

ดินสอใหเลือก 3 รูปแบบ

- Straighten เสนที่ไดจะถูกบังคับใหเรียบตรง ตัดเสนโคงออกไปใหมากที่สุด

- Smooth เสนที่ไดจะถูกคํานวณใหเรียบ แตจะเนนความโคงสวยงาม

- Ink เสนที่ไดจะตรงกับลักษณะที่วาดจริง

Brush

เปนเคร่ืองมือระบายสรเปรียบเหมือนพูกัน และมี Option ใหเลือกใชงานหลากหลาย ทั้ง

ขนาดและลักษณะหัวแปรง โดยคลิกที่ เมาสจะเปลี่ยนเปนรูป จากน้ันคลิกเมาสไวแลวลาก

ไปทิศทางที่ตองการ

การกําหนดคุณสมบัติการระบายสี โดย Brush Mode

Paint Normal กําหนดระบายทับทุกสวนของภาพ

Paint Fills กําหนดระบายสีในพื้นที่ Fill

Paint Behind กําหนดระบายสีหลัง Object

16

Paint selection กําหนดระบายสีเฉพาะสวนที่

Selection ไว

Paint Inside กําหนดระบายสีเฉพาะในพื้นที่ที่คลิก

เลือกคร้ังแรก

4. อุปกรณในกลุม Painting and Retouching

อุปกรณในกลุมน้ีมีไวเพื่อใหนองๆสามารถเติมสี หรือลบสวนที่ไมตองการทิ้งไป

Ink Bottle เติมสีเสนขอบ (Stroke)

อุปกรณน้ีสามารถเติมเสน Stroke หรือเสนขอบใหรูปที่วาดขึ้นได นองๆสามารถกําหนด

รูปแบบและขนาด รวมทั้งสีของเสน Stroke ไดที่ properties เมื่อเลือกอุปกรณ แลว วิธีใชคือนํา

ไปคลิกที่บริเวณขอบของวัตถุดานที่ตองการเติม

Paint Bucket เทสีใสวัตถุ

อุปกรณเทสีพื้นที่(Fill) โดยคลิกที่ แลวเลือกสีที่ตองการใน Fill Color ก็สามารถเทสี

ในพื้นที่ที่ตองการลงสีไดเลย Paint Bucket Tool ยังมี Option ใหเลือกเทสีในพื้นที่ที่ชองวางขนาด

เล็กหรือขนาดใหญไดดวย

Eyedropper ดูดส ี

เมื่อตองการใชสี

เดียวกับที่เคยใชงานไปแลว หรือสีที่มีอยูงานอ่ืน จะผสมสีไดตามสีน้ันจะเปนเร่ืองยาก อุปกรณน้ีจึง

ออกแบบใหดูดสีจากรูปภาพใดก็ได โดยวิธีการใชงานคือ ใหใช Eyedropper ไปคลิกบริเวณที่

ตองการดูดสี โดยเลือกดูดไดแยกกันระหวาง Fill และ Stroke

Don’t Close Gaps เทสีโดยไมมีชองวาง

Close Small Gaps เทสีโดยมีชองวางขนาดเล็ก

Close Medium Gaps เทสีโดยมีชองวางขนาดกลาง

Close Large Gaps เทสีโดยมีชองวางขนาดใหญ

17

Eraser ยางลบ

เมื่อตองการลบรูปบางสวน สามารถใชยางลบไปถูบริเวณที่ตองการได โดยสามารถกําหนด

Option ของยางลบได 6 แบบ

5. อุปกรณในกลุม Selection

Selection อุปกรณท่ีสําคัญท่ีสุด ใชในการเลือกวัตถุหรือรูปภาพตางๆ

Sub selection

Free Transform

Free Transform คือ เคร่ืองมือยอ, ขยาย, บิด หรือหมุน โดยคลิกที่ แลวคลิกที่วัตถุ จากน้ัน

ใชเมาสปรับยอ ขยาย บิด หรือหมุนวัตถุตามที่ตองการ โดยคลิกที่ปุมสีดํารอบวัตถุคางไว แลวลาก

เมาสในทิศทางที่ตองการ หากตองการรักษาสัดสวนของวัตถุใหกดคีย Shift คางไวดวย

Erase Normal ลบทั้ง Fill และ Stroke

Erase Fill ลบเฉพาะสี Fill เทาน้ัน

Erase Line ลบเฉพาะเสน Stroke

Erase Selected Fill ลบเฉพาะบริเวณที่เลือกไวกอน

Erase Inside ลบเฉพาะสี Fill บริเวณที่ลบ

Faucet(รูปกอกนํ้า) เมื่อกดปุมน้ี เมื่อกดโดนวัตถุใดก็ตาม

บริเวณที่เปนวัตถุชิ้นเดียวกันทั้งหมด

จะถูกลบทันที

18

เคร่ืองมือน้ีมี Option 4 แบบใหเลือกใชงาน

แบบ Rotate and

Skew

แบบ Scale

แบบ Distort

แบบ Envelope

Gradient Transform

เปนอุปกรณใชในการใสสีของ Fill

Lasso อุปกรณเลือกวัตถุแบบอิสระ

ทําหนาที่เหมือนกับ Selection คือไวสําหรับเลือกวัตถุซึ่งสามารถเลือกในพื้นที่ที่กําหนดได

อยางอิสระ ไมเปนสี่เหลี่ยมเหมือน Selection โดยคลิกลากจนครบรอบวัตถุซึ่งอยูในพื้นที่ที่ถูก

เลือก

19

Tweening “Tweening” คืออะไรใชทําอะไร?

Tweening ใน Flash นั้น หมายถึงการที่โปรแกรมชวยในการคํานวณรูปภาพที่ใชในการทํา Animation

โดยที่ไมตองวาดภาพทีละภาพ ซ่ึงการทํา Tweening ใน Flash นั้นสามารถแบงได 2 ประเภท คือ Shape และ

Motion

“Shape Tweening” คืออะไร? Shape Tweening คือ การที่โปรแกรมหนึ่งคํานวณรูปทรงจาก

รูปทรงหนึ่งเปล่ียนเปนอีกรูปทรง โดยกําหนดจุดเริ่มตนและจุดสุดทาย หรือการทํา keyframe นั่นเอง

Workshop1: ลองเปล่ียนรูปส่ีเหล่ียมเปนหาเหล่ียมดังรูป

สําหรับ Shape Tweening นั้นไมสามารถทํากับวัตถุทุกๆชนิดได ซ่ีงวัตถุเหลานั้นไดแก

1. Text เนื่องจากมีคุณสมบัติของ Font อยูแลว

กอนทํา Workshop ครั้งตอไปเราตองเรียนรูหรือทําความรูจักกับ “Layer” กันกอน

“Layer” คืออะไร?

Layer เสมือนที่เก็บของวัตถุทื่ตองการใหเราแสดงบน Stage และเปน สวนสําคัญในการสราง

Animation ลักษณะของ Layer ในการสรางภาพ Animation นั้นเปรียบเสมือนการนําแผนใสหลายๆแผนมาวาง

ซอนทับกัน โดยที่แตละแผนนั้นจะมีเหตุการณหรือการกระทําตางๆปรากฎอยู

ตัวอยางการแสดง Layer ของ Logo

20

2. Group Object วัตถุที่ได Group ไว จะตอง Ungroup กอนจึงจะสามารถทํางานได

3. Raster, Bitmap Files เนื่องจาก Shape Tween ทําไดเฉพาะทีเ่ปน Vector Graphic เทานั้น

4. Symbol จะนําไปใชกับ Motion Tweening โดยตรง ไมสามารถทํา Shape Tweening ได

Add Shape Hint คําส่ังสําหรับการบังคับจุดในการทํา Shape Tweening ใหลองทํา Shape Tweening อยางงาย

ของส่ีเหล่ียม 1 ช้ิน โดยให Keyframe แรกวาดรูปส่ีเหล่ีย มแนวนอนดังรูป จากนั้นใส Keyframe ที่ 20 แลวดัดให

เปนภาพที่ปรากฏ

วิธีทําเริ่มจากการสรางรูปส่ีเหล่ียมดังภาพไวที่ Keyframe เริ่มตนและทํา Motion Tween ซ่ึงจากตัวอยาง

กําหนด Keyframe สุดทายที่ frame 20 (สามารถกําหนด ที่ Frame ไหนก็ไดขึ้นกับตัวผูใชงาน ) สําหรับการทํา

Tween นั้นเลือกแบบ Shape Tween หลังจากนั้นเลือกที่เมนู Modify > Shape > Add Shape Hint จะเกิดวงกลมสี

แดงขึ้นบริเวณก่ึงกลางเปนอักษร “a” ใหยายจุด a ไปไวจุดที่ตองการในที่นี้คือมุมลางขวา หลังจากนั้นไปที่

Keyframe สุดทายจะพบตัวอักษรสีแดงเชนเดียวกัน ใหยายจุด a ไปไวในจุดที่ตองการใหมุมลางขวาจาก

Keyframe แรกขยับไปหา ในที่นี้ตองการใหอยูกับที่จึงไวที่ลางขวาเชนเดียวกัน

“Motion Tweening” คืออะไร?

Motion Tweening คือ การทํา Animation ของวัตถุช้ินเดิมใหมี Effect ตางๆ เชน เคล่ือนที่หมุน สวางขึ้น

มืดลง จางหายไป โดยไมไดเปล่ียนแปลงวัตถุ

ตัวอยางผลลัพธ Add Shape Hint

ขั้นตอนการ Add Shape Hint

21

“Symbol” คืออะไร

Symbol หรือ สัญลักษณ ใน Flash เปนวัตถุที่ตองใชซํ้าหลายๆครั้ง เชน โลโก ซ่ึงคุณสมบัติเดนของ

Symbol คือไมวาจะนําไปใชก่ีครั้งก็ตาม เม่ือออกไปเปน Movie โปรแกรมจะเรียกเพียงตนฉบับเทานั้น ทําให

ขนาดไฟลลดลง ทําใหเปนส่ิงที่ควบคูและเหมาะสมกับการทํา Motion Tween ที่สุด

เราจะสราง Symbol ไดอยางไร?

ใหลองสรางรูปขึ้นมา 1ช้ินเม่ือเราตองการใหเปล่ียนเปน Symbol ทําไดโดยเลือกใชคําส่ังที่เมนู Modify

> Convert to Symbol (F8) หรือคลิกขวาที่เมาส เลือกคําส่ัง Convert to Symbol… หลังจากนั้นจะปรากฎหนาตาง

Convert to Symbol

จากนั้นใหเลือก Symbol ซ่ึงมีทั้งหมด 3 แบบ ดังนี้

1. Movie Clip เปน Symbol ที่เก็บภาพเคล่ือนไหวและ Animation ได

2. Button เปน Symbol ปุมสําหรับเขียน ActionScript และใชในการกดส่ังงาน

3. Graphic เปน Symbol ที่เก็บภาพนิ่งหรือภาพเคล่ือนไหวแตไมมีการเขียน

ActionScript

ทั้ง 3 ชนิดสามารถเขียน Motion Tween ไดอยางสมบูรณ แตสําหรับ Animation แบบเบสิคทั่วไปใหเลือก Graphic

กอน สวน Registration ใหเลือกใดก็ไดแลวกด OK

สังเกตวาจะมีกรอบสีฟาและมีจุด Center ลักษณะวงกลมกลวง เปนขอสังเกตงายๆเวลาอยากทราบวา

วัตถุใดเปน Symbol และเครื่องหมายบวกที่เกิดขึ้นนั้นมาจากตําแหนงของ Registration ที่เลือกไว

หนาตางของ Convert to Symbol

วัตถุท่ีเปลี่ยนเปน Symbol แลว จะสีกรอบเปนสีฟา

22

เม่ือได Symbol แลวใหเปด Panel คูกับ Library โดยไปที่เมนู Window > Library (Ctrl + L, F11) จะ

พบวา Symbol ที่สรางถูกใสไวใน Library เรียบรอยแลว ใหลองลากที่ช่ือหรือที่รูปภาพของ Symbol ลงมาปลอยที่

Stage หลายๆช้ินซ่ึงจะมีรูปรางหนาตาเหมือนกับตนฉบับ

วัตถุซ่ึงถูกเก็บไวใน Library จะเรียกวา “Symbol” สวนวัตถุที่อยูบน Stage นั้นจะถูกเรียกวา “Instance”

สังเกตไดจากการเลือกวัตถุที่ Stage แลวดูที่ Properties Panel จะเห็นคําวา “instance of: ช่ือของ Symbol”

Instance

การลาก Symbol จาก Library มาลงท่ี Stage

…NOTE

Symbol เปนวัตถุท่ีเหมาะสมในการทํา Motion Tween มากท่ีสุด เพราะไมวาจะเปน

Bitmap Text หรือรูปภาพตางๆ จะตองถูกแปลงเปน Symbol เสมอ

23

วิธีแกไข Symbol

เลือกได 2 วิธี ขึ้นกับสถานการณการใชงาน

1. ดับเบิ้ลคลิกที่ไอคอนของ Symbol ใน Library สังเกตบริเวณใต Timeline หรือขางๆคําวา Scene 1 จะเกิด

ไอคอนและช่ือของ Symbol นั้นๆอยู เม่ือแกไขเสร็จแลว กลับมาที่ Stage โดยกดที่คําวา “Scene 1” หรือ

ดับเบิ้ลคลิกที่พ้ืนโลงก็ได

2. ดับเบิ้ลคลิกที่ตัว Instance ตัวใดก็ได ลักษณะตรงใต Timeline นั้นจะขึ้นแบบเดียวกับขอแรกแตตาง

ตรงที่กรณีนี้จะเห็น Layout ที่หนา Stage แบบบางๆ ซ่ึงบางครั้งการแกไข Symbol ก็จําเปนตองดู Stage

ไปดวย เม่ือแกไขเสร็จแลว กลับมาที่ Stage โดยกดที่คําวา “Scene 1” หรือดับเบิ้ลคลิกที่พ้ืนที่โลงก็ได

ทั้ง 2 วิธีนี้จะทําใหตนฉบับเปล่ียนไปและทําให Instance ทุกๆตัวเปล่ียนตามดวย และนี่คือคุณสมบัติเดน

ของ Symbol นั่นเอง

แลว Symbol เก่ียวของกับ Motion Tweening อยางไร

ดวยคุณสมบัติที่วา Instance ทุกตัวนั้นมีตนฉบับเดียวกัน ดังนั้นในการ Insert Keyframe ซ่ึงปกติแลว

โปรแกรมจะ Copy ภาพจาก Keyframe ลาสุดไป โดยการสราง Graphic ขึ้นใหม แตกรณีที่เปน Symbol นี้

โปรแกรมก็จะใช Instance ที่เกิดจาก Symbol เดียวกัน

แตทวาหากเปนวัตถุแบบเดียวกันทุก Keyframe ก็คงทําอะไรไมไดนอกจากจะเคล่ือนที่ไปมา ดังนั้น

ประเด็นสําคัญก็คือถึงแมวา Instance เหลานี้จะเกิดจากตนฉบับเดียวกัน แตสามารถทําใหแตกตางกันได 2

รูปแบบใหญๆ ไดแก

แกไข Symbol ดวยการคลิกท่ีตัว Instance

การแกไข Symbol ดวยการดับเบิ้ลคลิกไอคอนท่ี Library

24

1. การ Transform เชน การยอขยาย การบิด การหมุน

2. การใส Color Styles เปนคุณสมบัติเฉพาะของ Symbol คือ เลือกที่ Instance แลวไปที่ Properties Panel

ชองทางขวามือจะพบ Drop Down Menu ที่เขียนวา Color โดยมีใหเลือกตั้งได 4 คา

2.1. Brightness ปรับคาความสวาง ถาเปนบวกจะสวางขึ้น แตถาเปนลบจะมืดลง

2.2. Tint การผสมสีทับลงไปบนวัตถุ โดยเลือก % ของที่ทับลงไป

2.3. Alpha ปรับคาความโปรงใสโดย % ที่ลดลงก็จะทําใหมองทะลุดานลางไดมากขึ้น

2.4. Advance สามารถปรับสีและ Alpha ไดพรอมๆกัน แตตองใชการเลือกสี RGB โดยเลือก

Advanced แลวกดปุม Settings

เทคนิคเพิ่มเติมการทํา Animation

หลังจากที่ไดเรียนรูการทํา Animation ใน Flash ไปหลายรูปแบบแลวในบทนี้จะนําเสนอเทคนิค Layer Effects

และเทคนิคอ่ืนๆ ทั้งในแบบที่ Flash เตรียมไวใหและในแบบที่เทคนิคทั่วไปของ Animation อ่ืนๆ และจากบทที่แลวที่เราได

ทราบวาหลักการทํา Animation นั้นจะตองใช Layer อยูเสมอ ฉะนั้นเม่ือใดก็ตามที่เรามีการใช Layer ก็สามารถที่จะนํา

Layer Effects เขามาเพ่ิมเติมได โดยจะพูดถึงใน 2 รูปแบบดวยกัน คือ

1. Motion Guide การทําใหวัตถุเดินทางตามเสนที่กําหนด

2. Masking Layer การบังบางสวนของ Graphic บน Layer

Motion Guides

เม่ือเราไดทําการสราง Motion Tweening โปรแกรมจะทํางานโดยเริ่มจาก Keyframe เริ่มตนไปยัง Keyframe

สุดทายที่เรากําหนด สวนมาก Motion Tween มักใชเปนเสนตรงแตถาหากเราตองการทําเปนเสนโคง และเสนอ่ืนๆนั้น

ตัวชวยที่ดีที่สุด คือ Motion Guides นั่นเอง เพราะตัวนี้เราสามารถวาดเสนที่ตองการไดดวยตนเอง ดวยอุปกรณการวาด

เสนของ Flash และสามารถกําหนดใหวัตถุใน Layer สามารถเคล่ือนที่ไดตามเสนที่กําหนด ซ่ึงเราจะเรียกเสนนี้วา

Guide

Workshop : Motion Guide

25

ขั้นตอนการสราง

1. เตรียม Stage ขนาด 550 x 400 px ใสพ้ืนหลังตามใจชอบ และตั้ง Framerate ที่ 24 fps.

2. พิจารณา Layer ที่เราตองใชงานในที่นี้ประกอบดวย 3 สวน คือ สวนของจดหมาย หนาคน และขอความ ตั้ง

ช่ือใหเรียบรอย

3. หลังจากนั้นพิจารณาเรื่องการทํา Motion Tween ใหว่ิงตามเสน (อยาลืมทําเปน Symbol กอนนะ!) ดังนั้น

แปลงภาพเปน Symbol โดยใหเลือกเปนชนิด Graphic (Modify > Convert to Symbol)

4. หลังจากเตรียมทุกสวนเรียบรอยเริ่มตนการทํา Animation แบบ Frame – by – Frame จะใหจดหมายเริ่ม

เคล่ือนที่ตั้งแต Frame ที่ 1 ถึง Frame ที่ 15

5. เลือกที่ Layer ของจดหมาย จ ากนั้นคลิกที่สัญลักษณ Add Motion Guide สังเกตวาจะได Layer พิเศษ

เพ่ิมขึ้นมาเขียนวา “Guide:letter” และจะมีสัญลักษณบงบอกความเปน Guide

6. เลือกที่ Layer “Guide : Letter” แลววาดเสน Guide ดวยเครื่องมือวาดเสนแบบใดก็ได (Line, Pen, Pencil) อยา

ลืมวาตองไมใช Mode : Object Drawing เพราะถาเปนโหมดนี้ Guide จะไมทํางาน

7. Insert Keyframe ที่ 1 ของ Layer Guide แลววาดเสน โดยเริ่มจากตําแหนงของจุดหมุนของจดหมายที่

Keyframe เริ่มตนไปในทิศทางตามจินตนาการของทาน แตอยาซับซอนเกินกวาที่โปรแกรมจะคํานวณได

8. ขั้นตอนสุดทายหลังจากการวาดเสน Guide นั่นคือตองจับวัตถุ Snap ไปกับเสน ซ่ึงมี 2 จุดที่ตองดึง Snap เขา

หาเสน Guide คือ Keyframe เริ่มตนและ Keyframe สุดทาย

9. ใหกลับมาที่ Frame เริ่มตนใช Selection ลองเลือกที่ตัวจดหมาย สังเกตวงกลมกลวงบนตัวจดหมาย หากวาจุด

นี้อยูบนเสน Guide แลว แสดงวามันไดถูก Snap เขาไปแลว สวนใหญจุดแรกนี้โปรแกรมจะดึงวัตถุเขาไปเอง

แตวายังไมถูกใหคลิกที่จุดกลมกลวงตรงกลางแลวดึงเขาที่จุดเริ่มตนของ Guide มันจะถูกดูดเขาไปเอง

26

10. ทําแบบเดียวกันที่ Keyframe สุดทาย เม่ือ Snap เขากับเสน Guide ทั้งสองจุดแลวลองทดสอบโดยการกด Ctrl

+ Enter

11. เทคนิคเพ่ิมเติมของการทํา Motion Guide คือ ใหลองสังเกตเวลาที่จดหมายว่ิงไปตามเสน Guide อาจจะดูไม

คอยพล้ิว มีวิธีงายๆที่ทําใหดูเปนธรรมชาติ ใหเลือกที่ Frame ใดก็ไดที่เปนชวงของการทํา Motion Tween

และดูที ่Properties Panel จะสังเกตเห็นชองที่เขียนวา Orient to path ใหคลิกเครื่องหมายถูกหนาคําส่ังนี้ ลอง

ทดสอบ Movie ดูอีกครั้ง

12. หลังจบขั้นตอนของจดหมาย เขาสูขั้นตอนของขอความตอนรับ ใชเปนลักษณะแบบ Frame – By – Frame

หรือ Motion Tween ก็ได อยาลืมนะวาตอง Insert Keyframe ใหมดวยเพราะทุกอยางตั้งแต Keyframe แรกจะ

แสดงออกมาหมด

มีเทคนิคอีกอยางที่เปนตัวเพ่ิมความเฉลียวฉลาดใหกับ Animation อยาง Motion Tween ที่ช่ือวา Easing

Easing คืออะไร?

Easing เก่ียวของกับอัตราเรง แตสําหรับโปรแกรมไมจําเปนตองคํานวณอัตราเรงใดๆ เนื่องจากผลการ

ทํางานสามารถดูจากการลองใสคาและทดสอบไดอยูแลว เพียงจําวา Ease ที่เปนคาบวกหรือ East out นั้นจะเรง

ยังมีคําส่ังท่ีนาสนใจอีก 1 คําส่ัง ท่ีสามารถใชกับ Motion Tween ไดเชนเดียวกัน คือ คําส่ัง

Rotate ท่ีอยูเหนือคําส่ัง Orient to path โดยมีเมนูใหเลือก 4 แบบเปนคําส่ังสําหรับหมุนวัตถุ

อัตโนมัติน่ันเอง

• None ไมหมุนวัตถุท่ีทํา Motion Tween

• Auto คํานวณการหมุนจาก Keyframe เรมตนไปท่ี Keyframe สุดทาย

• CW ยอมาจาก Clockwise โปรแกรมจะหมนุวัตถุทวนเข็มนาฬิกาในจํานวนรอบท่ี

ระบุไวท่ีชองดานหลัง

27

ความเร็วกอนแลวคอยๆลดลง สวน Ease ที่เปนคาลบหรือ Ease in ก็จะออกตัวชา และเรงความเร็วเพ่ิมขึ้นเสมือน

เวลาวัตถุตกพ้ืน

Ease = 0 Ease = 100 Ease = -100

จะเห็นวา Ease = 0 จะเริ่มเคล่ือนที่ในระยะหางที่เทากัน แตกรณี Ease = 100 ตอนเริ่มตนระยะแตละภาพ

จะหางกัน และเริ่มเปล่ียนแปลงนอยลงในรูปหลัง

Masking Layer

Mask คือ การสรางหนากาก นั่นคือการแสดงบางสวนของภาพเทานั้น แสดงสวนที่เราตองการใหคนอ่ืน

เห็นเหมือนการที่เราใสหนากากนั่นเอง ใหเขาใจการทํา Mask มากขึ้น เราจะลองทําแบบฝกหัดพรอมๆกันนะ

Workshop Masking

1. ดึงรูปภาพเขามาที่ Stage (File > Import to Stage หรือ Ctrl+r) วางตําแหนงใดก็ได ตั้งช่ือ Layer

“image”

2. ขึ้น layer ใหม ตั้งช่ือวา mask และพิจารณาวาอยากจะแสดงสวนไหนของภาพบาง โดยใหวาดภาพ

Shape ลงไปในบริเวณนั้นๆ เปนสีใดก็ได (ควรเปน Shape เทานั้น ไมควรใช Drawing Object,

Primitive Object หรือ Grouped Object)

28

3. เม่ือได Shape ที่ตองการแลว ใหดับเบิ้ลคลิกที่กระดาษพับมุมบริเวณหนาช่ือ Layer “mask” หรือ

Layer ที่อยูดานบน จะมีหนาตาง Properties ขึ้นมา ที่ตัวเลือก Type ใหเปล่ียนจาก Normal เปน

Mask ตอบ OK ทําให Layer นี้มีคุณสมบัติเปน Mask ทันที

4. ใหจําไวดวยวาเราจะตองระบุดวยวา Layer ใดเปน Layer ที่ถูก Mask เนื่องจาก Mask หนึ่งอัน

สามารถ Mask ไดหลาย Layer ทําไดโดยดับเบิ้ลคลิกที่กระดาษพับมุมของ Layer image ที่หนาตาง

ของ Layer Properties หรือ Type เปน Masked ดังรูป

29

5. ลองทดสอบงาน (Ctrl + Enter) นอกจากนี้เรายังสามารถนําเอาเทคนิค Tween มาใชกับ Mask Layer

ไดอีกดวย ลองทํากันดูนะจะ

สรางงานแบบ Interactive ดวย Symbol & Button

หลังจากที่ไดรูจัก Symbol – Graphic ในการทํา Motion Tween เรามาทําความเขาใจกับเทคนิคใหมอยาง Symbol

& Button หรือที่เรารูจักวาปุม โดยปุมนั้นก็มีหนาที่หลักๆในการกดเพ่ือส่ังงานมากกวาที่จะกดเคล่ือนที่ไปมา ในอีกแงหนึ่ง

เม่ือมีการใช Button แลว ก็หมายความวางาน Flash นั้นจเปนงานที่ตอบโตกับผูใชไดทันที หรือเรียกวา Interactive นั่นเอง

แลวเราจะสรางปุมไดอยางไร?

วิธีการสรางก็งายดาย เพราะมีวิธีการสรางแบบเดียวกับการสราง Symbol Graphic นั่นคือ วาดภาพส่ิงที่

ตองการจะใหเปนปุม ไมวาจะเปน Text, Shape หรือรูปภาพ จากนั้นใชคําส่ัง Modify > Convert to Symbol (F8)

แตใหเลือก Type เปน Button

วิธีการสรางปุมโดยใชคําส่ัง New Symbol

1. ไปที่เมนู Insert > New Symbol (Ctrl + F8)

…NOTE

ขอแตกตางของ Convert to Symbol กับ New symbol คือ การ Convert

ใหเปน Symbol เปนการสราง Symbol ขึ้นมากอนจึงกําหนดบทบาทวาจะใหทําอะไร แต

ในการสราง New Symbol น้ันเปนการกําหนดบทบาทใหเสร็จส้ินกอนกอนท่ีจะสราง

Symbol ออกมา

30

2. ตั้งช่ือปุมพรอมเลือก Type เปน Button

3. เม่ือกด OK บริเวณ Address Bar จะปรากฏสัญลักษณของ Symbol – Button รูปนิ้วกดขึ้น ซ่ึงนี่คือ ความ

พิเศษภายในตัวมันเอง

จากรูปจะเห็นวามีการแสดงสถานะ 4 สถานะดวยกัน ซงแตละงานนั้นสามารถแสดง

สถานะการทํางานไดดังตอไปนี ้

Up หนาตาของปุมเม่ือผูชมเห็นตอนปกต ิ

Over หนาตาของปุมเม่ือนําเคอรเซอรไปวาง

Down หนาตาของปุมเม่ือผูชมเห็นตอนคลิก

Hit พ้ืนที่รับคาของปุม

ลองสรางปุมอยางงายเลนๆดูกันะ...

…NOTE

ในแตละสถานะถาเราตองการวาดรูป หรือทําอะไรก็ตาม อยาลืมตอง Insert

Keyframe กอนทุกคร้ัง และท่ีสําคัญคือ ปุมโดยท่ัวไปมักจะมีสถานะเปน Up เสมอ

31

มาทําความรูจักกับ ActionScript กันหนอย

ทําไมตองรูจัก ActionScript ? บางคนอาจจะสงสัย เพราะการที่เราจะติดตอกับ Flash ใหไดอยางสมบูรณนั้น

ActionScript เนี่ยแหละจะเปนตัวสําคัญในการติดตอ (ตรงนี้จะกลาวถึงเฉพาะสวนที่ใชงานเทานั้น ติดตามในสวนของฝาย

ActionScript นะจะ) ในเบื้องตนนี้ ActionScript จะแบงเปน 3 ประเภท

1. Frame ActionScript เปน ActionScript ที่ใสบน Frame และทําตามคําส่ังเม่ือ Animation ว่ิงมาถึง Frame

ที่ใส ActionScript ไว

2. Button ActionScript เปน ActionScript ที่ใสบนปุม และทําตามคําส่ังเม่ือมีการกระทําบนปุมที่ใส

ActionScript ไว

3. MovieClip ActionScript เปน ActionScript ที่ใสบน MovieClip และทําตามคําส่ังเม่ือมีการกระทําบน

MovieClip หรือเม่ือ animation ว่ิงมาถึง Frame ที่วาง MovieClip

ตอไปเราลองมาทํา Workshop พรอมกับการทําความเขาใจ ActionScript เบื้องตนกัน

Workshop ActionScript เบื้องตน

1. เปด Workshop Motion Guide ที่ไดทําขึ้นมา หรืออาจจะเปนช้ินงานอ่ืนที่เราสรางขึ้นมาก็ได (File > Open)

2. ขั้นแรกเราตองทําใหงานที่เปดขึ้นนั้นหยุดกอน หลักการก็คือ เราจะตองใส Frame action ที่ช่ือ “stop()” ลงไปที่

Frame แรก เพ่ือใหโปรแกรมอานและเริ่มทํางานตั้งแต Frame 1 หรือทําตามคําส่ังทันที่เม่ือพบ

…NOTE

ขอบังคับของ Frame Action คือ จะตองใสท่ี keyframe เทาน้ัน แตเน่ืองจาก

Frame แรกน้ันจะเปน Keyframe ตามปกติอยูแลว ดังน้ันใหเราเลือก Frame แรกของ Layer

ใดก็ไดและเลือกเพียง Layer เดียวเทาน้ัน

32

รูป 1 Action Panel

3. สังเกตที่มุมบนซาย ตองเขียนวา Action – Frame เพราะเรากําลังจะสราง Action ที่ Frame ใหเราสังเกตตรงนี้ทุก

ครั้งเพ่ือปองกันการผิดพลาดในการใส Action

<<<<<< อยาลืมดูตรงนี!้

4. กลับมาพิจารณาทางดานซายของ Action Panel ในสวนนี้เปนสวนของ Action สําเร็จรูป ลักษณะเปนรูปหนังสือ

หลายเลม เหมาะสําหรับผูที่ไมคอยไดใช หรือผูที่เริ่มตน มาถึงตอนนี้เราตองการสรางคําส่ัง stop() ใหเราเลือกที่

หนังสือที่เขียนวา “Global Functions” และตอดวยหนังสือยอยเขียนวา “Timeline Control” แลวเราก็จะพบกับ Action – stop

(ตรงนี้ใหเราลากลงไปยังพ้ืนที่ที่ตองเขียน หรือดับเบิ้ลคลิกที่ stop ก็ได)

5. หลังจากนั้นใหลองปด Action Panel แลวสังเกต Frame ที่เราเลือกใส Action จะปรากฎตัวอักษร a เพ่ือบอกให

เราทราบวาไดสราง Action ไวที่ Frame ดังกลาว

6. เม่ือสามารถส่ังใหหยุดการทํางานไดแลว เราลองนําเอาความรูที่ไดจากการสรางปุมที่ผานมามาสรางปุมเพ่ือให

Animation ของเราทั้งเลนและหยุดไดกันดีกวา

การเขียน Script น้ันสามารถทําได 2 แบบ คือ การกดปุม Script Assist และไมกดปุม น้ันคือ

หากเรากดปุม Script Assist จะเปนโหมดของผูชวยเขียน โดยท่ีเราไมตองเขียนเองท้ังหมด และ

หากเราไมกดปุมดังกลาว จะกลายเปนโหมดท่ีเหมาะสําหรับโปรแกรมเมอรหรือผูท่ีมีความรู

เพราะสามารถเขียนไดเองทุกอยางตามตองการ

33

7. เริ่มดวยการสรางปุม play และ stop (ออกแบบตามใจชอบ) ตามวิธีที่ผานมา เม่ือสรางเสร็จใหลากลง Stage ไปยัง

ตําแหนงที่เราตองการ โดยเราตองสราง Layer ใหมขึ้นมาเพ่ือรองรับการทํางานตรงนี้ดวย ในที่นี้ตั้งช่ือวา Layer Button

8. เม่ือไดตําแหนงที่ตองการเราเริ่มสราง ActionScript โดยเริ่มทีละปุมและเปด Action Panel สังเกตดานมุมซายของ

Action Panel วาเปน Action – Button แลวเลือกที่คําส่ัง play จะพบวาที่บรรทัดของ Action จะมีคําส่ัง on (release) ซ่ึงจะตาง

กับ Frame Action เราเรียกวา Event นั่นเอง (ปุม stop ก็ทําเชนเดียวกันเพียงเปล่ียนคําส่ังเปน stop)

มารูจัก Event กันเถอะ

Event คือ การกําหนดเหตุการณวาใหทําส่ิงใดกับปุม แลวจึงเกิด Action ซ่ึง Flash ไดกําหนดเหตุการณไวถึง 8

รูปแบบ ทดลองดูไดโดยการคลิกที่บรรทัด on (release)

มาดูกันดีกวาวาแตละ Event ทําอะไรไดบาง

Event การใชงาน

On (press) ทํา Action ทันทีเม่ือผูใชคลิกบนปุม

On (release) ทํา Action ทันทีเม่ือผูใชคลิกบนปุมแลวปลอยเมาสทันที

On (releaseOutside) ทํา Action หลังจากผูใชคลิกบนปุมแตไมปลอยเมาสดานนอกปุม

On (keyPress) ทํา Action เม่ือกดตัวอักษรบน Keyboard ที่กําหนดไว เชน “P” ส่ังให Play

On (rollOver) ทํา Action ทันทีเม่ือผูใชเอาเมาสแตะปุม

On (rollOut) ทํา Action หลังจากที่ผูใชแตะปุมและดึงเมาสออกนอกปุม

On (dragOver) ทํา Action เม่ือผูใชคลิกบนปุมแลวลากออกนอกปุม จากนั้นลากเขาไปบนปุมอีกครั้ง

On (dragOut) ทํา Action เม่ือผูใชคลิกบนปุมแลวลากออกนอกปุม คลายกับ releaseOutside ตางกัน

ตรงที่ dragOut จะทําทันทีที่ออกนอกปุม แต releaseOutside จะทําเม่ือออกนอกปุมและ

ปลอยเมาสแลว

34

กรณีที่ตองการส่ัง Action ผานคียบอรดใหเลือกเครื่องหมายถูกที่ on (keypress) และกดปุมบนคียบอรดที่ตองการ

ส่ังงาน จะปรากฏคียบอรดนั้นขึ้นที่ชองดานหลัง

กรณีที่เราตองการกระโดดขามการทํางานใหไปทํางานที่ Frame นั้นๆทันที มีคําส่ังงายอยาง “goto” สามารถชวย

ในการทํางานไดเปนอยางด ี

คําส่ัง “goto” เปนคําส่ังที่ผูใชกําหนดไดวา เม่ือผูใชกดปุมจะใหไปแสดงที่ Frame ไหนก็ได ดวยการใส Frame

number ลงไป และยังถือวาเปนคําส่ังที่ใชมากที่สุดใน Flash อีกดวยซ่ึงเราสามารถแบงคําส่ังนี้ได 2 แบบดวยกันคือ

gotoAndPlay ใหกระโดดไปอานที่ Frame นั้นๆและเลน Animation ตอ

gotoAndStop ใหกระโดดไปอานที่ Frame นั้นๆและหยุดเลน

เราลองเอาคําส่ัง goto มาใชกับ Aniamtion ที่ผานมาดูวารูปแบบจะเปนอยางไรบาง

ดูจากรูปก็จะเห็นวาเราสามารถเลือกไดทั้ง gotoAndPlay และ gotoStop และสามารถกําหนด Frame ไดที่ชอง

Frame:…. และในชอง Type เปนรูปแบบ goto วาสามารถทําอะไรไดบางโดยที่ 4 แบบไดแก

Frame Number กระโดดไปที่หมายเลข Frame ที่ตองการ

Frame Label กระโดดไปที่ช่ือ Frame ที่ตองการ

Expression กระโดดไปที่ Frame ที่ไดจากการคํานวณตามสูตรที่กําหนดขึ้น

Next Frame กระโดดไปขางหนา 1 frame

Previous Frame กระโดดถอยหลังไป 1 frame

35

** goto Frame จะใชในการสราง Presentation คอยขางบอย ดังนั้นถาเราจะใชจะตองจํา และตั้งช่ือ frame ซ่ึงการ

สรางช่ือ frame นั้นก็ไมยุงยาก เพียงเราเลือกไปยัง frame ที่ตองการแลวดูที่ Properties Panel ดานลาง เราสามารถตั้งช่ือได

ตรงชองวางที่เขียนไววา <Frame Label> ดังรูป

แคนี้เราก็สามารถสราง Animation หรือ Presentation อยางงายๆไดแลว

ไมเพียงเทาน้ี ยังมี event ของ MovieClip โดยมีรูปแบบการใชงานท่ีคลายกับ Button ท่ีกลาวมาขางตน ซึ่งมี

ดังตอไปน้ี

onClipEvent( event ){ statement; }

สวน event ของ MovieClip จะไมเหมือนกับของ Button ซึง่มีรายละเอียดดังตอไปน้ี

Event การใชงาน

Load ทํา Action ทันทีเมื่อโหลดคลิปเขาสูการทํางาน

EnterFrame ทํา Action ทันทีเมื่อโหลดคลิปเขาสูเฟรม

Unload ทํา Action ทันทีเมื่อนําคลิปออกจากการทํางาน

Mouse down ทํา Action ทันทีเมือคลิกเมาส

Mouse Up ทํา Action ทันทีเมื่อปลอยเมาส

Mouse move ทํา Action ทันทีเมื่อเมาสเคล่ือนท่ี

Key down ทํา Action ทันทีเมื่อกดปุมบนคียบอรด

Key Up ทํา Action ทันทีเมื่อปลอยปุยบนคียบอรด

Data ทํา Action ทันทีเมื่อขอมูลเกิดการเปล่ียนแปลง

36

Introduction to ActionScript2.0

About ActionScript2.0 • AS2.0 เปนภาษาเชิงวัตถุ (Object-Oriented Programming, OOP)

• AS2.0 เปนภาษาสคริปต

• สคริปตท่ีใช AS2.0 ในการนิยาม class หรือ interface จะถูกสรางเปนไฟลแยกตางหากอยูภายนอกดวยหน่ึง

class หน่ึงไฟล น่ันก็หมายความวา class และ interface ไมสามารถนิยามไดใน Actions Panel

• สามารถ import ไฟลสคริปตได โดยใชคําส่ัง import หรือถาเก็บไฟลสคริปตท่ีตองการ import ไวในท่ีท่ีถูก

ระบุไวโดย global หรือ document-specific search path ก็จะสามารถนําไฟลคริปตมาใชไดทันที

• Flash Player 6 ขึ้นไปเทาน้ันท่ีจะรอบรับ Application ท่ีพัฒนาโดย AS2.0

• คาปริยายในการสรางงานโดยใช Adobe Flash CS3 ถูกตั้งใหใช AS3.0

• AS สามารถเขียนไดบน

o Frame o Button o Movie Clip

First Program: Hello World 1. คลิกเลือกท่ี frame แลวกดปุม F9 เพ่ือเปด Actions Panel ใหเขยีน script บนเฟรม

2. พิมพ trace(“Hello World”); ใน Actions Panel

37

3. กด Ctrl + Enter เพ่ือทดสอบ

การใส Comment

• // - เพ่ือ comment บรรทัดเดียว

• /* … */ เพ่ือสราง block comment

Data Type

ชนิดตัวแปร

• Number – คือตัวเลข

• String – ขอความ

• Boolean – คาทางตรรกะ ไดแก true และ false

• Undefined – ไมระบุวาเปนตัวแปรชนิดใด

• Null – คาวาง

การประกาศตัวแปร

• var ชื่อตัวแปร: data type;

ตัวอยางการประกาศตัวแปร var a:Number; คือการประกาศตัวแปรชื่อ a โดยใหมีชนิดตัวแปรเปน Number บางคร้ัง

เราอาจจะกําหนดคาเร่ิมตนใหกับตัวแปรโดย var a:Number = 0; คาเร่ิมตนของ a ก็จะมีคาเปน 0

ในบางกรณีเราไมจําเปนตองกําหนดชนิดตัวแปรใหกับตัวแปร แตโปรแกรมจะกําหนดชนิดใหเมื่อไดรับการ assign คา

ตัวอยางเชน var b = “Hello World”; จะเห็นวาคาท่ี assign ใหกับ b น้ันคือ String ดังน้ันชนิดตัวแปรของ b จึง

เปน String โดยปริยาย

ภาษาคริปตอยาง ActionScript, PHP และ Perl ไมจําเปนตองมีการประกาศตัวแปร เราสามารถเรียกชื่อตัวแปรไดเลย

เชน a = 10; หากโปรแกรมของเราไมมีตัวแปรชื่อ a มากอน คําส่ังเพียงแคน้ีก็จะถือวาเปนการประกาศตัวแปรดวยในตัว

การต้ังชื่อตัวแปร

การตั้งชื่อตัวแปรควรส่ือถือส่ิงท่ีตัวแปรน้ันเก็บอยู โดยจะมีกฎในการตั้งชื่อตัวแปรดังตอไปน้ี

• ชื่อตัวแปรจะตองประกอบไปดวย อักษร, ตัวเลข, เคร่ืองหมาย _ และ $ เทาน้ัน

38

• อักษรแรกของชื่อตัวแปรน้ัน จะตองไมเปนตัวเลข

• ไมควรตั้งชื่อตัวแปรท่ีเหมือนกับ keyword ของ flash เชน string, true หรือ var

• ไมควรตั้งชื่อตัวแปรซ้ํากัน

Function ที่เกี่ยวของกับชนิดของตัวแปร

หากเราตองการตรวจสอบวาตัวแปรตัวใดตัวหน่ึง เปนตัวแปรชนิดใด เราสามารถใช typeof(varName or value)

เชน

var a = 1.1; trace(typeof(a));

ผลท่ีไดคือ

number

หรือหากตองการท่ีจะแปลงชนิดของตัวแปร ก็สามารถใชคําส่ัง dataType(varName or value) เชน

var s:String = "1.1"; trace(s + " is a " + typeof(s)); n = Number(s); trace(n + " is a " + typeof(Number(n)));

ผลท่ีไดคือ

1.1 is a string 1.1 is a number

การอางถึงตัวแปรใน Movie Clip

Movie Clip เปน object ชนิดหน่ึงใน Flash สามารถมีตัวแปรท่ีใชภายใน และอนุญาตใหภายนอก เรียกใชตัวแปรท่ีอยู

ภายในน้ันได โดยใชงานไดโดย instanceName.varName ตัวอยางเชน Movie Clip หน่ึง เราตั้ง instance name ไว

วา mc_clip และมีตัวแปรภายในชื่อวา s การเรียกใชตัวแปรจากภายนอก ทําไดดังน้ี mc_clip.s

หากมี Movie Clip ซอนกันหลายชั้น ก็สามารถเรียกตัวแปรไดโดยวิธีเดียวกัน โดยเรียก instance name ชั้นนอกสุดกอน

ตามดวย dot notation ( . ) ตามดวย instance name ลําดับถัดไป จนถึงชั้นของตัวแปร ตัวอยางคือ

name1.name2.name2.varName

ในทางกลับกัน หากใน movie clip ตองการเรียกใชตัวแปรจากภายนอก สามารถทําไดโดยเรียก _root ซึ่งเปนการอาง

ถึงลําดับชั้นนอกสุด เชน _root.varName

39

Expression

เคร่ืองหมายการคํานวณ

+ เคร่ืองหมายบวก

c = a + b;

- เคร่ืองหมายลบ

c = a – b;

* เคร่ืองหมายคูณ

c = a * b;

/ เคร่ืองหมายหาร

c = a / b;

% เคร่ืองหมาย mod (การหารเอาแตเศษที่เหลือ)

c = 5 % 4; //c = 1

++ การเพิ่มคาทีละหนึ่ง

การเพ่ิมคาทีละหน่ึงสามารถทําไดสองวิธี คือการนํา operator ไวหนาตัวแปร

var a = 0; var b = 3; var c = a + ++b; trace("c = " + c); trace("b = " + b);

การดําเนินการคือจะเพ่ิมคาใหกับตัวแปรกอน แลวจึงทํา operation อ่ืนๆ ตอไป ซึ่งจะไดผลคือ

c = 4 b = 4

ซึ่งจะมีผลแตกตางจากการนํา operator ไวหลังตัวแปร

var a = 0; var b = 3; var c = a + b++; trace("c = " + c); trace("b = " + b);

ไดผลคือ

c = 3 b = 4

40

จะสังเกตวาตัวแปร b จะทําการคํานวณอ่ืนๆ กอนแลวจึงเพ่ิมคาตัวเอง

-- การลดคาทีละหนึ่ง

การลดคาก็มีความคลายคลึงกับการเพ่ิมคาใหกับตัวแปร กลาวคือ มีท้ังการวาง operator ไวหนาตัวแปร และหลังตัวแปร

ซึ่งจะดําเนินการเชนเดียวกัน

var a = 0; var b = 3; var c = a + --b; trace("c = " + c); trace("b = " + b);

ไดผลคือ

c = 2 b = 2

และ

var a = 0; var b = 3; var c = a + b--; trace("c = " + c); trace("b = " + b);

ซึ่งไดผลคือ

c = 3 b = 2

41

คําสั่งควบคุมการทํางาน(Control Structure)

เพ่ือใหการทํางานน้ันมีประสิทธิภาพมากตามความตองการของผูเขียนโปรแกรมหรือผูใชงานน้ัน จําเปนท่ีจะตอง

กําหนดทิศทางการทํางานของโปรแกรม เพ่ือใหการทํางานเปนไปตามความตองการของเรา โดยมีคําส่ังสําหรับการควบคุม

การทํางานดังตอไปน้ี

if…else

if…else เปนคําส่ังแบบมีเงื่อนไข (condition) ซ่ึงจะกระทําตาม

เงื่อนไขที่กําหนดไว จากแผนภาพขางขวา โปรแกรมจะตรวจสอบคา

condition ที่กําหนดไว หากมีคาความจริงเปนจริง โปรแกรมจะทํางานตาม

statement1 แตหากคาความจริงเปนเท็จ โปรแกรมจะทํางานตาม

statement2 ซ่ึงจะมีคําส่ังตอไปนี ้

if( condition ) { Statement1; } else { Statement2; }

switch switch น้ันจะเลือกกิจกรรมโดยขึ้นอยูกับคาของตัวแปรท่ีไดกําหนดเอาไว

switch( variable ){ case value1: statement1; break; case value2: statement2; break; … default: statementn; }

while loop while จะเปนการทํางานวนซ้ําอยูภายใตเงื่อนไข หากเงื่อนไขน้ันมี

คาเปนจริง จะกระทําตาม statement ท่ีไดกําหนดเอาไว แตหากมีคาเปน

เท็จ จะออกจากการทํางานวนซ้ํา ทันที จะมีรูปแบบการใชงานดังตอไปน้ี

while( condition ){ statement; }

42

do…while do while น้ันจะทํางานตาม statement กอนแลวจริงจะตรวจสอบเงื่อนไข

หากเงื่อนไขน้ันเปนจริง โปรแกรมจะกลับไปทํางานตาม statement กอน แตหากคาเปน

เท็จ โปรแกรมจะหยุดการวนซ้ําและออกจากการทํางาน จะมีรูปแบบการใชงานดังตอไปน้ี

do { statement; } while ( condition )

for for จะทํางานโดยเร่ิมแรกน้ัน จะมีการกําหนดคาเร่ิมตนกอน

(init) แลวจะเขาสูการทํางานวนซ้ํา โดยจะตรวจสอบเงื่อนไข

(condition)กอน หากวาเงื่อนไขดังกลาวมีคาเปนจริง จะทํางานตาม

statement กอน แลวเมื่อเสร็จแลว จะเปล่ียนแปลงคาตางๆ (next) แลวจึง

เขาตรวจสอบเงื่อนไขอีกคร้ัง หากมีคาเปนเท็จ โปรแกรมจะออกจากการ

ทํางานวนซ้ําน้ีทันที

for( init ; condition ; next ) { statement; }

คําส่ังเพิ่มเติม

• Exp1 ? Exp2 : Exp3; จะเปนการกําหนดคาของตัวแปร โดยอาศัยเงื่อนไขในการกําหนดคาของตัวแปร

โดยที ่

o Exp2 จะทํางานก็ตอเมื่อ Exp1 เปนจริง

o Exp3 จะทํางานก็ตอเมื่อ Exp1 เปนเท็จ

จะเห็นไดวา การกําหนดน้ี จะมีลักษณะท่ีคลายกับการใชชุดคําส่ัง If-else

• break; จะหยุดการทํางาน ทันที เมื่อเจอคําส่ังน้ี

• continue; เมื่อเจอคําส่ังน้ี จะกลับไปตรวจสอบเงื่อนไขการทํางานได

43

function ฟงกชั่น(function) คือชุดคําส่ังท่ีใชในการทํางานโดยเฉพาะ ซึ่งอาจจะรับคาท่ีฟงกชั่นตองการหรือท่ีเรียกวา

argument มาดวยเพ่ือการทํางานของฟงกชั่น แลวอาจจะมีการสงคาท่ีไดจากการทํางานคืนดวย

โปรแกรม flash ไดเตรียมฟงกชั่นมาตรฐานไวแลวใน Action Toolbox เพ่ือใหผูใชสามารถนํามาใชงานไดอยาง

รวดเร็วและสะดวกมากยิ่งขึ้น นอกจากน้ีแลว ผูใชยังสามารถสรางฟงกชั่น เพ่ือการใชงานท่ีตรงกับความตองการของตนเอง

การสรางฟงกชั่น

function name(args:dataType):dataType { statement; return variable; }

โดยที่

• name แทนช่ือฟงกช่ันที่เราตองการจะสราง โดยยึดหลัก

• args แทนลักษณะของคาที่ฟงกช่ันตองการใชในการทํางาน

• statement แทนการทํางานของฟงกช่ัน

• variable แทนคาหรือตัวแปรที่ฟงกช่ันจะตองคืนคาใหแกผูใช

การเรียกใชฟงกชั่น

การเรียกใชฟงกชั่น จะมีรูปแบบการเรียกดังตอไปน้ี

name( value/variable );

การใชฟงกชั่นในการทํางานซํ้า

อาจจะมีบางคร้ังท่ีฟงกชั่นน้ันๆ จําเปนท่ีจะตองถูกใชหลายคร้ัง โดยมีการเรียกใชในรูปแบบเดียวกัน ซึ่งหากใช

คําส่ัง while do-while หรือ for อาจจะเกิดความซ้ําซอนได จึงมีคําส่ัง setInterval ซึ่งมีรูปแบบการเรียกใช

ดังตอไปน้ี

setInterval( functionname, intervalTime, args);

โดยที่

• functionname เปนชื่อฟงกชั่นท่ีจะนํามาใช

• intervalTime เปนความถี่ในการทํางานซ้ํา(หนวยเปน มิลลิวินาที)

• args เปนพารามิเตอรของฟงกชั่นท่ีจะใช

44

คลาส พรอพเพอรตี้ และเมธอดที่สําคัญ

จากท่ีกลาวไวในเร่ืองของฟงกชั่นมากบาง โปรแกรม flash น้ันไดกําหนดคลาส พรอพเพอรตี้ และเมธอดท่ีสําคัญ

ไวใหผูใชสามารถใชงานไดอยางรวดเร็วและสะดวก ซึ่งเราสามารถคนหาไดจาก Action Tool โดยมีคลาส พรอพเพอรตี้

และเมธอดท่ีสําคัญ ท่ีเราควรจะรูจักดังตอไปน้ี

ฟงกชั่นควบคุมการเลนภาพยนตร

• gotoAndPlay() ส่ังใหกระโดดไปยังเฟรมที่ตองการแลวเลนตอ

• gotoAndStop() ส่ังใหกระโดดไปยังเฟรมทีต่องการแลวหยุด

• nextFrame() ส่ังใหกระโดดไปยังเฟรมที่อยูถัดตอไป

• nextScene() ส่ังใหกระโดดไปยัง Scene ตอไป

• play() ส่ังใหเริ่มเลนตอไป

• prevFrame() ส่ังใหกลับไปยังเฟรมกอนหนานี ้

• prevScene() ส่ังใหกลับไปยัง Scene กอนหนานี ้

• stop() ส่ังใหหยุด

• stopAllSounds() ส่ังใหเสียงทั้งหมดหยุดเลนลง

คลาส TextField

• length แสดงความยาวหรือจํานวนอักขระของขอความที่อยูใน TextField

• maxChars กําหนดความยาวหรือจํานวนอักขระสูงสุดที่เราตองการ

• _rotation กําหนดหรือบอกถึงคาการหมุนของ TextField(ในหนวยองศา)

• selectable กําหนดใหขอความใน TextField นี้สามารถเลือกทําแถบดําได

• text กําหนดหรือแสดงขอความที่อยูใน TextField

• _visible กําหนดใหขอความใน TextField นี้สามารถมองเห็นไดหรือไม

• _x ตําแหนงพิกัดแนวนอนของขอความ นับจากซายไปขวา

• _y ตําแหนงพิกัดแนวตั้งของขอความ นับจากลางขึ้นบน

การเก็บคาจากขอความใน textfield ไวในตัวแปร

1. กําหนดชื่อตัวแปร string เพ่ือใชสําหรับเก็บขอความในชอง var

2. กําหนดชื่อตัวแปร text field instance แลวเรียกใชโดยผาน textfield.text