Adobe Flash Cs3 For Software Intro To Comp Camp 3

ทําความรูจักกับ Flash แตเดิมนั้นโปรแกรม Flash ถูกออกแบบมาเพื่อเปนโปรแกรมสําหรับวาดภาพ ซึ่งตอมาไดพัฒนาใน สวนของ Animation ทําใหเพิ่มประโยชนทางดานการใชสอยมากขึ้น ในแวดวงนักออกแบบเว็บไซต หรือ นักพัฒนา Animation ไมมีทานใดที่ไมรูจักโปรแกรมนี้ เนื่องจาก Flash เปนโปรแกรมที่สราง Animation ที่มีคุณภาพ สามารถโตตอบกับผูใชไดดี ทําใหโปรแกรมนี้เปนโปรแกรมที่ยอดฮิตในหมูผูสราง Animation และ Interactive แบบ 2 มิติในปจจุบัน ซึ่งเว็บไซตที่เผยแพรผลงานที่สรางโดย Flash ดังๆ อยางเชน http://happytreefriends.atomfilms.com, http://www.boombastick.net

1

2

3

รูปรางหนาตาของโปรแกรม Flash 1. Open a Recent Item จะเปนการเปดงานที่ทํา 9 ชิ้นลาสุด หรือกดปุม open เพื่อเปดไฟลอื่น

นอกเหนือจากนี้ 2. Create New สรางงานใหม 3. Create from Template สรางงานจากแมแบบที่ทางโปรแกรมเตรียมไวให *ในที่นี้จะใช Flash File (Action Script 2.0) เปนหลักในการสอน

1

Toolbar

Menu Bar

Timeline

Stage

สวนประกอบที่สําคัญของโปรแกรม 1. Menu Bar คือแถบที่รวบรวมคําสั่งทั้งหมดที่ใชสรางผลงาน รวมไปถึงการตั้งคาของโปรแกรม 2. Toolbar คือแถบเครื่องมือที่ชวยใหการทํางาน 3. Timeline คือสวนที่ใชสรางภาพเคลื่อนไหว 4.

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

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

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

2

สวนของ File

สรางไฟลใหม เรียกไฟลที่มีอยูแลวขึ้นมาใชใหม ปดโปรแกรม ปดทุกหนาตางของโปรแกรม บันทึกโปรแกรม บันทึกโปรแกรมครั้งแรก บันทึกทั้งหมด

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

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

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

3

สวนของ Edit

Undo ยอนกลับไปทําสวนที่แลว Redo ทําตอไปสวนขางหนา ตัดขอมูล สําเนาขอมูล วางขอมูล

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

4

สวนของ View

ขยายเขา ขยายออก ขยายตามสัดสวนที่โปรแกรมกําหนด เปด-ปดไมบรรทัด ตารางเพื่อชวยในการวาดภาพ

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

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

5

Toolbox

Toolbox เปนกลองเก็บอุปกรณที่ใชในหารสรางปรับแตง และแกไขวัตถุ สามารถเรียกใชงาน toolbox ไดโดยเลือกคําสั่ง Window > Tools แลวคลิกเครื่องมือที่ตองการ

Selection Tool [V]

Free Transform Tool [Q] Pen Tool [P] Line Tool [N] Pencil Tool [Y] Ink Bottle Tool [S] Eyedropper Tool [I] Hand Tool [H]

Sub selection Tool [A]

Lasso Tool [L] Text Tool [T] Rectangle Tool [R] Blush Tool [B] Paint Bucket Tool [K] Eraser Tool [E] Zoom Tool [M,Z]

Stroke Color Fill color Black and white

No color

Snap to Object

Swap color

6

เครื่องมือตางๆ ใน Toolbox Selection tool [V] Sub Selection tool [A]

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

Lasso tool [L] 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 กลุม ดังนี้

7

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

แมเหล็กยึดวัตถุ

8

3. อุปกรณในกลุม Drawing อุปกรณในกลุมนี้มีไวเพื่อวาดรูปขึ้นในโปรแกรม Line Tool Line Tool คือเครื่องมือวาดเสนตรง โดยคลิกที่

จากนั้นเมาสจะเปลี่ยนเปนรูป + ให

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

1. เลือกเครื่องมือ

Line ลากเสนตามทิศที่ตองการ

2. กด Ctrl คางไวแลวเลื่อนเมาสไปที่กลางเสนจะเห็นวาเมาสเปลี่ยนรูปเปน สัญลักษณที่ใชในการดัดเสนโคง 3. ดัดเสนไปในทิศทางที่ตองการ การเปลี่ยนทิศทางของเสน

ซึ่งมี

1. เลือกเครื่องมือ Line ลากเสนตามทิศที่ตองการ 2. กด Ctrl คางไวแลวเลื่อนเมาสไปที่ปลายเสน สังเกตไดวาเมาสจะเปลี่ยนเปนรูป... ซึ่ง เปนสัญลักษณที่ใชในการเปลี่ยนทิศทางของเสน 3. คลิกลากเปลี่ยนไปในทิศทางที่ตองการ Pen Pen จะใชวิธีคลิกเปนจุดแลวปลอย (ไมคลิกคางแลวลากเหมือน line) เมื่อคลิกที่จุดถัดไป โปรแกรมจะลากเสนจากจุดแรกไปที่จุกถัดไปดดยทันที โดยใชสี Stroke แลวเมื่อวนกลับมาคลิกที่ จุดเริ่มตนรูปทรงจะถูกปด เสนที่เกิดจาก pen จะถูกเรียกวา Path

9

วิธีสรางเสนโคงดวย Pen tool จะเริ่มตนที่ 1. คลิกจุด A แลวปลอย 2. ลากเมาสไปที่จุด B แลวลิกคางไว 3. ลากเมาสไปทิศทางใดก็ได จะเห็นแขนลากออกมา 2 ขาง ขางหนึ่งจะไปตามทางที่เมาสลาก อีก ขางหนึ่งไปในฝงตรงขาม 4. ไดเสนโคงตามที่ตองการ

10

Text การพิมพ Text ลงใน flash นั้นใชควบคูกับ properties panel เนื่องดวยวาการปรับเปลี่ยน font สี ขนาด การจัดเรียง ลวนตองทําที่ properties ทั้งสิ้น

Text type Font

Font Size

Text (Fill) Color

Text Alignment

Change Orientation of Text Font Rendering Method

Letter Spacing

Character Position

URL Link

Edit format Option

สวนประกอบสําคัญของ Properties เมื่อเลือกใช Text 1. Text type หรือ ชนิดของ text โดยมีใหเลือกอยู 3 ชนิด Static text

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

Dynamic text

กลองแสดงขอความ หรือ text ที่สามารถเปลี่ยนการ แสดงผลไดตามการเขียนโปรแกรม

11

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 : ตัวหอย

12

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 2

Sans-serif font Serif font

13

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

14

Pencil อุปกรณดินสอนี้จะวาดเสนดวยมือ โดยเสนที่เกิดจะเปนสี Stroke โดยมี option สําหรับ ดินสอใหเลือก 3 รูปแบบ

- Straighten เสนที่ไดจะถูกบังคับใหเรียบตรง ตัดเสนโคงออกไปใหมากที่สุด - Smooth เสนที่ไดจะถูกคํานวณใหเรียบ แตจะเนนความโคงสวยงาม - Ink เสนที่ไดจะตรงกับลักษณะที่วาดจริง Brush เปนเครื่องมือระบายสรเปรียบเหมือนพูกัน และมี Option ใหเลือกใชงานหลากหลาย ทั้ง ขนาดและลักษณะหัวแปรง โดยคลิกที่

เมาสจะเปลี่ยนเปนรูป

จากนั้นคลิกเมาสไวแลวลาก

ไปทิศทางที่ตองการ การกําหนดคุณสมบัติการระบายสี โดย Brush Mode

Paint Normal

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

Paint Fills

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

Paint Behind

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

15

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 ดูดสี เมื่อตองการใชสี

Don’t Close Gaps

เทสีโดยไมมีชองวาง

Close Small Gaps

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

Close Medium Gaps

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

Close Large Gaps

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

เดียวกับที่เคยใชงานไปแลว หรือสีที่มีอยูงานอื่น จะผสมสีไดตามสีนั้นจะเปนเรื่องยาก อุปกรณนี้จึง ออกแบบใหดูดสีจากรูปภาพใดก็ได โดยวิธีการใชงานคือ ใหใช Eyedropper ไปคลิกบริเวณที่ ตองการดูดสี โดยเลือกดูดไดแยกกันระหวาง Fill และ Stroke

16

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

Erase Normal

ลบทั้ง Fill และ Stroke

Erase Fill

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

Erase Line

ลบเฉพาะเสน Stroke

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

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

Faucet(รูปกอกน้ํา) เมื่อกดปุมนี้ เมื่อกดโดนวัตถุใดก็ตาม บริเวณที่เปนวัตถุชิ้นเดียวกันทั้งหมด จะถูกลบทันที

5. อุปกรณในกลุม Selection Selection อุปกรณที่สําคัญที่สุด ใชในการเลือกวัตถุหรือรูปภาพตางๆ Sub selection Free Transform Free Transform คือ เครื่องมือยอ, ขยาย, บิด หรือหมุน โดยคลิกที่

แลวคลิกที่วัตถุ จากนั้น

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

17

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

แบบ Scale

แบบ Distort

แบบ Envelope

Gradient Transform เปนอุปกรณใชในการใสสีของ Fill Lasso อุปกรณเลือกวัตถุแบบอิสระ ทําหนาที่เหมือนกับ Selection คือไวสําหรับเลือกวัตถุซึ่งสามารถเลือกในพื้นที่ที่กําหนดได อยางอิสระ ไมเปนสี่เหลี่ยมเหมือน Selection โดยคลิกลากจนครบรอบวัตถุซึ่งอยูในพื้นที่ที่ถูก เลือก

18

Tweening  “Tweening” คืออะไรใชทําอะไร? Tweening ใน Flash นั้น หมายถึงการที่โปรแกรมชวยในการคํานวณรูปภาพที่ใชในการทํา Animation โดยที่ไมตองวาดภาพทีละภาพ ซึ่งการทํา Tweening ใน Flash นั้นสามารถแบงได 2 ประเภท คือ Shape และ Motion “Shape Tweening” คืออะไร? Shape Tweening คือ การที่โปรแกรมหนึ่งคํานวณรูปทรงจาก รูปทรงหนึ่งเปลี่ยนเปนอีกรูปทรง โดยกําหนดจุดเริ่มตนและจุดสุดทาย หรือการทํา keyframe นั่นเอง 

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

สําหรับ Shape Tweening นั้นไมสามารถทํากับวัตถุทุกๆชนิดได ซี่งวัตถุเหลานั้นไดแก กอนทํา Workshop ครั้งตอไปเราตองเรียนรูหรือทําความรูจักกับ “Layer” กันกอน “Layer” คืออะไร? Layer เสมือนที่เก็บของวัตถุทื่ตองการใหเราแสดงบน Stage และเปน สวนสําคัญในการสราง Animation ลักษณะของ Layer ในการสรางภาพ Animation นั้นเปรียบเสมือนการนําแผนใสหลายๆแผนมาวาง ซอนทับกัน โดยที่แตละแผนนั้นจะมีเหตุการณหรือการกระทําตางๆปรากฎอยู

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

Text

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

19

Group Object วัตถุที่ได Group ไว จะตอง Ungroup กอนจึงจะสามารถทํางานได 3. Raster, Bitmap Files เนื่องจาก Shape Tween ทําไดเฉพาะทีเ่ ปน Vector Graphic เทานั้น 4. Symbol จะนําไปใชกับ Motion Tweening โดยตรง ไมสามารถทํา Shape Tweening ได 2.

Add Shape Hint คําสั่งสําหรับการบังคับจุดในการทํา Shape Tweening ใหลองทํา Shape Tweening อยางงาย ของสี่เหลี่ยม 1 ชิ้น โดยให Keyframe แรกวาดรูปสี่เหลี่ย มแนวนอนดังรูป จากนั้นใส Keyframe ที่ 20 แลวดัดให เปนภาพที่ปรากฏ

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

วิธีทําเริ่มจากการสรางรูปสี่เหลี่ยมดังภาพไวที่ Keyframe เริ่มตนและทํา Motion Tween ซึ่งจากตัวอยาง กําหนด Keyframe สุดทายที่ frame 20 (สามารถกําหนด ที่ Frame ไหนก็ไดขึ้นกับตัวผูใชงาน ) สําหรับการทํา Tween นั้นเลือกแบบ Shape Tween หลังจากนั้นเลือกที่เมนู Modify > Shape > Add Shape Hint จะเกิดวงกลมสี แดงขึ้นบริเวณกึ่งกลางเปนอักษร “a” ใหยายจุด a ไปไวจุดที่ตองการในที่นี้คือมุมลางขวา หลังจากนั้นไปที่ Keyframe สุดทายจะพบตัวอักษรสีแดงเชนเดียวกัน ใหยายจุด a ไปไวในจุดที่ตองการใหมุมลางขวาจาก Keyframe แรกขยับไปหา ในที่นี้ตองการใหอยูกับที่จึงไวที่ลางขวาเชนเดียวกัน

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

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

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

20

“Symbol” คืออะไร Symbol หรือ สัญลักษณ ใน Flash เปนวัตถุที่ตองใชซ้ําหลายๆครั้ง เชน โลโก ซึ่งคุณสมบัติเดนของ Symbol คือไมวาจะนําไปใชกี่ครั้งก็ตาม เมื่อออกไปเปน Movie โปรแกรมจะเรียกเพียงตนฉบับเทานั้น ทําให ขนาดไฟลลดลง ทําใหเปนสิ่งที่ควบคูและเหมาะสมกับการทํา Motion Tween ที่สุด เราจะสราง Symbol ไดอยางไร? ใหลองสรางรูปขึ้นมา 1ชิ้นเมื่อเราตองการใหเปลี่ยนเปน Symbol ทําไดโดยเลือกใชคําสั่งที่เมนู Modify > Convert to Symbol (F8) หรือคลิกขวาที่เมาส เลือกคําสั่ง Convert to Symbol… หลังจากนั้นจะปรากฎหนาตาง Convert to Symbol

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

จากนั้นใหเลือก Symbol ซึ่งมีทั้งหมด 3 แบบ ดังนี้ Movie Clip เปน Symbol ที่เก็บภาพเคลื่อนไหวและ Animation ได 2. Button เปน Symbol ปุมสําหรับเขียน ActionScript และใชในการกดสั่งงาน 3. Graphic เปน Symbol ที่เก็บภาพนิ่งหรือภาพเคลื่อนไหวแตไมมีการเขียน ActionScript 1.

ทั้ง 3 ชนิดสามารถเขียน Motion Tween ไดอยางสมบูรณ แตสําหรับ Animation แบบเบสิคทั่วไปใหเลือก Graphic กอน สวน Registration ใหเลือกใดก็ไดแลวกด OK สังเกตวาจะมีกรอบสีฟาและมีจุด Center ลักษณะวงกลมกลวง เปนขอสังเกตงายๆเวลาอยากทราบวา วัตถุใดเปน Symbol และเครื่องหมายบวกที่เกิดขึ้นนั้นมาจากตําแหนงของ Registration ที่เลือกไว

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

21

 …NOTE Symbol เปนวัตถุที่เหมาะสมในการทํา Motion Tween มากที่สุด เพราะไมวาจะเปน Bitmap Text หรือรูปภาพตางๆ จะตองถูกแปลงเปน Symbol เสมอ

เมื่อได Symbol แลวใหเปด Panel คูกับ Library โดยไปที่เมนู Window > Library (Ctrl + L, F11) จะ พบวา Symbol ที่สรางถูกใสไวใน Library เรียบรอยแลว ใหลองลากที่ชื่อหรือที่รูปภาพของ Symbol ลงมาปลอยที่ Stage หลายๆชิ้นซึ่งจะมีรูปรางหนาตาเหมือนกับตนฉบับ

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

วัตถุซึ่งถูกเก็บไวใน Library จะเรียกวา “Symbol” สวนวัตถุที่อยูบน Stage นั้นจะถูกเรียกวา “Instance” สังเกตไดจากการเลือกวัตถุที่ Stage แลวดูที่ Properties Panel จะเห็นคําวา “instance of: ชื่อของ Symbol”

Instance

22

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

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

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

2.

ดับเบิ้ลคลิกที่ตัว Instance ตัวใดก็ได ลักษณะตรงใต Timeline นั้นจะขึ้นแบบเดียวกับขอแรกแตตาง ตรงที่กรณีนี้จะเห็น Layout ที่หนา Stage แบบบางๆ ซึ่งบางครั้งการแกไข Symbol ก็จําเปนตองดู Stage ไปดวย เมื่อแกไขเสร็จแลว กลับมาที่ Stage โดยกดที่คําวา “Scene 1” หรือดับเบิ้ลคลิกที่พื้นที่โลงก็ได

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

ทั้ง 2 วิธีนี้จะทําใหตนฉบับเปลี่ยนไปและทําให Instance ทุกๆตัวเปลี่ยนตามดวย และนี่คือคุณสมบัติเดน ของ Symbol นั่นเอง  แลว Symbol เกี่ยวของกับ Motion Tweening อยางไร ดวยคุณสมบัติที่วา Instance ทุกตัวนั้นมีตนฉบับเดียวกัน ดังนั้นในการ Insert Keyframe ซึ่งปกติแลว โปรแกรมจะ Copy ภาพจาก Keyframe ลาสุดไป โดยการสราง Graphic ขึ้นใหม แตกรณีที่เปน Symbol นี้ โปรแกรมก็จะใช Instance ที่เกิดจาก Symbol เดียวกัน แตทวาหากเปนวัตถุแบบเดียวกันทุก Keyframe ก็คงทําอะไรไมไดนอกจากจะเคลื่อนที่ไปมา ดังนั้น ประเด็นสําคัญก็คือถึงแมวา Instance เหลานี้จะเกิดจากตนฉบับเดียวกัน แตสามารถทําใหแตกตางกันได 2 รูปแบบใหญๆ ไดแก

23

การ 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 1.

เทคนิคเพิ่มเติมการทํา 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

24

ขั้นตอนการสราง 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 มันจะถูกดูดเขาไปเอง

25

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 แรกจะ แสดงออกมาหมด ยังมีคําสั่งที่นาสนใจอีก 1 คําสั่ง ที่สามารถใชกับ Motion Tween ไดเชนเดียวกัน คือ คําสั่ง Rotate ที่อยูเหนือคําสั่ง Orient to path โดยมีเมนูใหเลือก 4 แบบเปนคําสั่งสําหรับหมุนวัตถุ

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

None

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

•

Auto

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

•

CW

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

ระบุไวที่ชองดานหลัง มีเทคนิคอีกอยางที่เปนตัวเพิ่มความเฉลียวฉลาดใหกับ Animation อยาง Motion Tween ที่ชื่อวา Easing Easing คืออะไร? Easing เกี่ยวของกับอัตราเรง แตสําหรับโปรแกรมไมจําเปนตองคํานวณอัตราเรงใดๆ เนื่องจากผลการ ทํางานสามารถดูจากการลองใสคาและทดสอบไดอยูแลว เพียงจําวา Ease ที่เปนคาบวกหรือ East out นั้นจะเรง

26

ความเร็วกอนแลวคอยๆลดลง สวน 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)

27

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 ดังรูป

28

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  …NOTE

ขอแตกตางของ Convert to Symbol กับ New symbol คือ การ Convert ใหเปน Symbol เปนการสราง Symbol ขึ้นมากอนจึงกําหนดบทบาทวาจะใหทําอะไร แต ในการสราง New Symbol นั้นเปนการกําหนดบทบาทใหเสร็จสิน้ กอนกอนที่จะสราง Symbol ออกมา

วิธีการสรางปุมโดยใชคําสั่ง New Symbol 1. ไปที่เมนู Insert > New Symbol (Ctrl + F8)

29

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

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

จากรูปจะเห็นวามีการแสดงสถานะ 4 สถานะดวยกัน ซงแตละงานนั้นสามารถแสดง สถานะการทํางานไดดังตอไปนี้ Up

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

Over

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

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

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

…NOTE

ในแตละสถานะถาเราตองการวาดรูป หรือทําอะไรก็ตาม อยาลืมตอง Insert Keyframe กอนทุกครั้ง และที่สําคัญคือ ปุมโดยทั่วไปมักจะมีสถานะเปน Up เสมอ

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

30

มาทําความรูจักกับ 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 เดียวเทานั้น

31

รูป 1 Action Panel 3. สังเกตที่มุมบนซาย ตองเขียนวา Action – Frame เพราะเรากําลังจะสราง Action ที่ Frame ใหเราสังเกตตรงนี้ทุก ครั้งเพื่อปองกันการผิดพลาดในการใส Action <<<<<< อยาลืมดูตรงนี!้ การเขียน Script นั้นสามารถทําได 2 แบบ คือ การกดปุม Script Assist และไมกดปุม นั้นคือ หากเรากดปุม Script Assist จะเปนโหมดของผูชวยเขียน โดยที่เราไมตองเขียนเองทั้งหมด และ หากเราไมกดปุมดังกลาว จะกลายเปนโหมดที่เหมาะสําหรับโปรแกรมเมอรหรือผูที่มีความรู เพราะสามารถเขียนไดเองทุกอยางตามตองการ 4. กลับมาพิจารณาทางดานซายของ Action Panel ในสวนนี้เปนสวนของ Action สําเร็จรูป ลักษณะเปนรูปหนังสือ หลายเลม เหมาะสําหรับผูที่ไมคอยไดใช หรือผูที่เริ่มตน มาถึงตอนนี้เราตองการสรางคําสั่ง stop()

ใหเราเลือกที่

หนังสือที่เขียนวา “Global Functions” และตอดวยหนังสือยอยเขียนวา “Timeline Control” แลวเราก็จะพบกับ Action – stop (ตรงนี้ใหเราลากลงไปยังพื้นที่ที่ตองเขียน หรือดับเบิ้ลคลิกที่ stop ก็ได) 5. หลังจากนั้นใหลองปด Action Panel แลวสังเกต Frame ที่เราเลือกใส Action จะปรากฎตัวอักษร a เพื่อบอกให เราทราบวาไดสราง Action ไวที่ Frame ดังกลาว 6. เมื่อสามารถสั่งใหหยุดการทํางานไดแลว เราลองนําเอาความรูที่ไดจากการสรางปุมที่ผานมามาสรางปุมเพื่อให Animation ของเราทั้งเลนและหยุดไดกันดีกวา

32

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) On (release) On (releaseOutside) On (keyPress) On (rollOver) On (rollOut) On (dragOver) On (dragOut)

การใชงาน ทํา Action ทันทีเมื่อผูใชคลิกบนปุม ทํา Action ทันทีเมื่อผูใชคลิกบนปุมแลวปลอยเมาสทันที ทํา Action หลังจากผูใชคลิกบนปุมแตไมปลอยเมาสดานนอกปุม ทํา Action เมื่อกดตัวอักษรบน Keyboard ที่กําหนดไว เชน “P” สั่งให Play ทํา Action ทันทีเมื่อผูใชเอาเมาสแตะปุม ทํา Action หลังจากที่ผูใชแตะปุมและดึงเมาสออกนอกปุม ทํา Action เมื่อผูใชคลิกบนปุมแลวลากออกนอกปุม จากนั้นลากเขาไปบนปุมอีกครั้ง ทํา Action เมื่อผูใชคลิกบนปุมแลวลากออกนอกปุม คลายกับ releaseOutside ตางกัน ตรงที่ dragOut จะทําทันทีที่ออกนอกปุม แต releaseOutside จะทําเมื่อออกนอกปุมและ ปลอยเมาสแลว

33

กรณีที่ตองการสั่ง 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

34

** goto Frame จะใชในการสราง Presentation คอยขางบอย ดังนั้นถาเราจะใชจะตองจํา และตั้งชื่อ frame ซึ่งการ สรางชื่อ frame นั้นก็ไมยุงยาก เพียงเราเลือกไปยัง frame ที่ตองการแลวดูที่ Properties Panel ดานลาง เราสามารถตั้งชื่อได ตรงชองวางที่เขียนไววา ดังรูป

แคนี้เราก็สามารถสราง Animation หรือ Presentation อยางงายๆไดแลว ไมเพียงเทานี้ ยังมี event ของ MovieClip โดยมีรูปแบบการใชงานที่คลายกับ Button ที่กลาวมาขางตน ซึ่งมี ดังตอไปนี้ onClipEvent( event ){ statement; }

สวน event ของ MovieClip จะไมเหมือนกับของ Button ซึง่ มีรายละเอียดดังตอไปนี้ Event Load EnterFrame Unload Mouse down Mouse Up Mouse move Key down Key Up Data

การใชงาน ทํา Action ทันทีเมื่อโหลดคลิปเขาสูการทํางาน ทํา Action ทันทีเมื่อโหลดคลิปเขาสูเฟรม ทํา Action ทันทีเมื่อนําคลิปออกจากการทํางาน ทํา Action ทันทีเมือคลิกเมาส ทํา Action ทันทีเมื่อปลอยเมาส ทํา Action ทันทีเมื่อเมาสเคลื่อนที่ ทํา Action ทันทีเมื่อกดปุมบนคียบอรด ทํา Action ทันทีเมื่อปลอยปุยบนคียบอรด ทํา Action ทันทีเมื่อขอมูลเกิดการเปลี่ยนแปลง

35

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 o o

Frame Button Movie Clip

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

2.

พิมพ trace(“Hello

World”);

ใน Actions Panel

36

3.

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

การใส Comment •

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

•

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

Data Type

ชนิดตัวแปร •

Number –

คือตัวเลข

•

String –

ขอความ

•

Boolean –

•

Undefined –

•

Null – คาวาง

คาทางตรรกะ ไดแก

true

และ

false

ไมระบุวาเปนตัวแปรชนิดใด

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

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

มากอน คําสั่งเพียงแคนี้ก็จะถือวาเปนการประกาศตัวแปรดวยในตัว

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

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

37

•

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

•

ไมควรตั้งชื่อตัวแปรที่เหมือนกับ keyword ของ

•

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

Function

flash เชน string, true หรือ var

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

หากเราตองการตรวจสอบวาตัวแปรตัวใดตัวหนึ่ง เปนตัวแปรชนิดใด เราสามารถใช 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

38

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

39

จะสังเกตวาตัวแปร 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

40

คําสั่งควบคุมการทํางาน(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; }

41

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;

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

42

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 เปนพารามิเตอรของฟงกชั่นที่จะใช

43

คลาส พรอพเพอรตี้ และเมธอดที่สําคัญ จากที่กลาวไวในเรื่องของฟงกชั่นมากบาง โปรแกรม 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

44