32
- 1 - Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY หนวยที1 แนะนําโปรแกรม SWiSHMax SWiSHMax เปนโปรแกรมที่ชวยใหผูใชสามารถสรางสรรคผลงานใน รูปแบบ Flash Animation, Flash Presentation, Web Multimedia โดยสามารถ สราง Web ในรูปแบบของภาพเคลื่อนไหว (Animation) พรอมเสียงประกอบเพื่อ เพิ่มความนาสนใจ นอกจากนีSWiSHMax สามารถสราง Effect แปลกใหมให กับ ตัวอักษร ภาพ กราฟก มากกวา 230 แบบ รวมไปถึงเทคนิคการสรางปุมหรือ Menu อยางงาย รวมไปถึงการเขียนสคริปเพื่อควบคุมการทํางานไดเชนเดียวกับโปรแกรม Macro media Flash แตดวยลักษณะการใชงานของโปรแกรม SWiSHMax จะมีความงายกวามาก ผูใชไม จําเปนตองมีความรูในการสรางเว็บมากนัก เปนผูมีพื้นฐานในการใชคอมพิวเตอรทั่วไปก็สามารถใช งานได ดวยความสะดวก เขาถึงความตองการของผูใช ทําใหโปรแกรม SWiSHMax ไดรับความนิยม เปนอยางสูงในปจจุบัน ตอนที1.1 ทําความรูจักกับโปรแกรม SWiSHMax SWiSHMax เปนโปรแกรมที่ใชสรางงาน Flash Animation ของบริษัท SWiSHzone.com Pty Ltd (www.swishzone.com ) เวอรชั่นลาสุดคือ SWiSHMax 2005.11.16 ซึ่งมีความสามารถในการ ผลิตผลงานไดหลากหลายรูปแบบ เชน Banner Logo Graphic Background Button Drawing Animation รวมไปถึงการสราง Interactive โตตอบกับผูใชไดในทันที ทั้งยังสามารถผลิตงานใน รูปแบบสื่อประสม (ภาพ ตัวอักษร เสียง) เพื่อเราความสนใจใหกับผูชม ทําใหผูรับสารเกิด Attention ใสใจที่จะรับสารที่เราสงไปไดเปนอยางดี รวมไปถึงการสรางงาน Web Multimedia งาน Presentation ที่นาสนใจ งานสรางบทเรียนคอมพิวเตอรชวยสอนทั้งในรูปแบบ Online และ Offline โดยสามารถ Export File เปน .SWF .AVI .HTML .EXE ความตองการดานระบบคอมพิวเตอรในการติดตั้งโปรแกรม SWiSHMax มีดังนีWindows 95/98/ME/NT/2000/XP, PIII 300 MHz, 64MB RAM 800x600 pixels and 256 color display ทั้งนี้ทานสามารถดาวโหลดโปรแกรม SWiSHMax ในแบบทดลองใช 15 วันไดทีwww.swishzone.com เลือก Download SWiSHMax เลือก Download Setup SWiSHMax.exe โดยดูวิธีการติดตั้งในภาคผนวก

2swishmax

Embed Size (px)

Citation preview

Page 1: 2swishmax

- 1 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

หนวยที่ 1 แนะนําโปรแกรม SWiSHMax SWiSHMax เปนโปรแกรมที่ชวยใหผูใชสามารถสรางสรรคผลงานในรูปแบบ Flash Animation, Flash Presentation, Web Multimedia โดยสามารถสราง Web ในรูปแบบของภาพเคลื่อนไหว (Animation) พรอมเสียงประกอบเพื่อ เพิ่มความนาสนใจ นอกจากนี้ SWiSHMax สามารถสราง Effect แปลกใหมให กับ ตัวอักษร ภาพ กราฟก มากกวา 230 แบบ รวมไปถึงเทคนิคการสรางปุมหรือ

Menu อยางงาย รวมไปถึงการเขียนสคริปเพื่อควบคุมการทํางานไดเชนเดียวกับโปรแกรม Macro media Flash แตดวยลักษณะการใชงานของโปรแกรม SWiSHMax จะมีความงายกวามาก ผูใชไมจําเปนตองมีความรูในการสรางเว็บมากนัก เปนผูมีพื้นฐานในการใชคอมพิวเตอรท่ัวไปก็สามารถใช งานได ดวยความสะดวก เขาถึงความตองการของผูใช ทําใหโปรแกรม SWiSHMax ไดรับความนิยมเปนอยางสูงในปจจุบัน

ตอนที่ 1.1 ทําความรูจักกับโปรแกรม SWiSHMax SWiSHMax เปนโปรแกรมที่ใชสรางงาน Flash Animation ของบริษัท SWiSHzone.com Pty Ltd (www.swishzone.com) เวอรช่ันลาสุดคือ SWiSHMax 2005.11.16 ซ่ึงมีความสามารถในการผลิตผลงานไดหลากหลายรูปแบบ เชน Banner Logo Graphic Background Button Drawing Animation รวมไปถึงการสราง Interactive โตตอบกับผูใชไดในทันที ท้ังยังสามารถผลิตงานใน รูปแบบสื่อประสม (ภาพ ตวัอักษร เสียง) เพื่อเราความสนใจใหกับผูชม ทําใหผูรับสารเกิด Attention ใสใจท่ีจะรับสารที่เราสงไปไดเปนอยางดี รวมไปถึงการสรางงาน Web Multimedia งาน Presentation ท่ีนาสนใจ งานสรางบทเรียนคอมพิวเตอรชวยสอนทั้งในรูปแบบ Online และ Offline โดยสามารถ Export File เปน .SWF .AVI .HTML .EXE ความตองการดานระบบคอมพิวเตอรในการติดตั้งโปรแกรม SWiSHMax มีดังนี้

Windows 95/98/ME/NT/2000/XP, PIII 300 MHz, 64MB RAM 800x600 pixels and 256 color display

ท้ังนี้ทานสามารถดาวโหลดโปรแกรม SWiSHMax ในแบบทดลองใช 15 วันไดท่ี www.swishzone.com เลือก Download SWiSHMax เลือก Download Setup SWiSHMax.exe โดยดูวิธีการติดตั้งในภาคผนวก

Page 2: 2swishmax

- 2 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ตอนที่ 1.2 มีอะไรใหมในโปรแกรม SWiSHMax 1.2.1. User Interface 1.2.2. Effects 1.2.3. Drawing 1.2.4. Scripting 1.2.5. Import & Export

1.2.1. User Interface

• มีลักษณะจอภาพที่ใชงานสะดวกขึ้น สามารถสราง Flash Animation ไดในเวลาไมกี่นาที • Objects, frames and effects สามารถเพิ่มหรือลบไดโดยการ Click ขวาบน timeline ไดทันที • การจัดการ movies, scenes and sprites จัดการไดงายขึ้น

นอกจากนี้ในสวนของ Content Management ผูใชบริหารจัดการไดงายขึ้น มองเห็น Object ท่ีมีอยูใน Movie ท้ังหมด • สามารถแกไขภาพโดยClickเลือก Object Properties • หากตองการลบ Object ท่ีไมตองการใชเพื่อลดพื้นที่

การทํางาน เลือก Object Delete • หรือเพิ่ม Object ใหเลือก Import

Object

Page 3: 2swishmax

- 3 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

1.2.2. Effects

• SWiSHMax มี Effect ใหมๆใหเลือกใชมากกวา 230 รูปแบบ • ผูใชสามารถสราง Effect ไดดวยตนเอง • สามารถใช Effect เพิ่มไดอยางตอเนื่องมากกวา 1 ครั้ง

1.2.3. Drawing

ในสวนของเครื่องมือท่ีใชสําหรับวาดรูป (Tools Box) ไดเพิ่มเครื่องมือ AutoShape ในรูปทรงตางๆ ดังภาพ และเพิ่มรูปทรง 3 มิต ิ

Page 4: 2swishmax

- 4 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

1.2.4. Scripting

• สามารถเขียน Script ข้ันสูง โดยเลือก Script Guide Expert • Copy และ Paste Scripts ขาม Objects และ Sprites • มี 'Debug' Panel ท่ีงายตอการคนหา fixing errors ของ scripts

1.2.5. Import & Export

Import SWF Movies Import Graphic, Text, Advance Export Control Sounds, Animation gif

• Import SWF movies จากทุกไฟล Flash • Import ไฟล Sounds(.wav .mp3), Graphics(.gif .jpg .wmf .bmp .png) and Text

(.doc .txt) • Export โดยการบีบอัดไฟลข้ันสูง เพื่อใหไฟล SWF มีขนาดเล็ก

ตอนที่ 1.3 ลักษณะจอภาพของโปรแกรม SWiSHMax เมื่อเขาสูโปรแกรมโดยเลือก Start All Programs SWiSHMax จะปรากฏหนาจอดังภาพ

Page 5: 2swishmax

- 5 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

สวนประกอบของหนาตาโปรแกรม SWiSHMax มีดังนี ้

1. Main Menu เปนคําสั่งพื้นฐานที่ทุกโปรแกรมตองมีใชงาน

2. Toolbar แถบเครื่องมือรวบรวมคําสั่งเปนภาพไอคอน เพื่อใหผูใชเขาถึงคําสั่งไดทันที

• Standard Toolbar เปน Toolbar ท่ีรวบรวมเครื่องมือตางๆที่ใชจัดการกับไฟล

• Insert Toolbar เปน toolbar ท่ีใชสําหรับ Insert Object เชน Insert Scene, Insert Text, Insert Image, Insert Content, Insert button, Insert Sprite

• Control Toolbar เครื่องมือสําหรับควบคุมการแสดงผลของ Movie

Page 6: 2swishmax

- 6 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ไอคอน ช่ือปุม การใชงาน

Stop หยุดการแสดง Movie

Play Movie แสดงผลทั้ง Movie ทุก Scene ที่สรางขึ้น

Play Scene แสดงผลเฉพาะ Scene ที่เลือกทํางาน

Play Effect แสดงผล Effect ที่เลือกใช

Preview Frame แสดงผลงานที่สรางดวยเครื่องมือ Motion Path ใน Tool Box

3. Timeline Panel เปนสวนที่ใชสําหรับการกําหนด Effect และ Script ใหกับ Object

4. Outline Panel เปนสวนแสดงจํานวน Scene และ Object ท่ีบรรจุอยูภายใน สามารถจัดการเพิ่มหรือลบ Scene และ Object ได แสดง Movie ใหเห็นเปน Layer โดยมองเห็นภาพจากบนลงลาง

5. Layout Panel ประกอบดวย • Toolbox ซ่ึงประกอบดวยเครื่องมือสําหรับการ Drawing • Tool Option สําหรับปรับแตง Scale, Rotate, Resize, Distort • Workspace พื้นที่สําหรับการวางชิ้นงาน แสดง Object ตางๆ และใชสําหรับแสดงผล

Movie เมื่อ Play Movie อกีดวย

6. Movie Panel หรือ Object Panel เปนสวนที่ใชกําหนดคุณสมบัติของ Movie, Scene และ Object ตางๆ ไดแก Button Object Panel, Group Object Panel, Scene Object Panel, Shape Object Panel, Sprite Object Panel, Text Object Panel และ Sound Object Panel

Page 7: 2swishmax

- 7 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ตอนที่ 1.4 ตัวอยางงานที่สรางจากโปรแกรม SWiSHMax

WebSite www.adenlandscape.com

SWiSHMax Effects

Banner

Flash ประกอบหนาเว็บ

บทเรียนคอมพิวเตอร

Page 8: 2swishmax

- 8 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

หนวยที่ 2 การใชงาน SWiSHMax เบื้องตน

จากหนวยที่1 ไดแนะนําความสามารถของโปรแกรม SWiSHMax องคประกอบและเครื่องมือในโปรแกรมมาแลว ในหนวยที่ 2 น้ี จะกลาวถึงวิธีการสรางและปรับแตง Movie, การทํางานภายใน Scene และจะทําความรูจักกับ Object มากขึ้น สําหรับการสรางงานของโปรแกรม SWiSHMax น้ันเปรียบเสมือนกับการสรางภาพยนตร 1 เรื่อง ซ่ึงประกอบไปดวยฉากตางๆ มารอยเรียงเปนเรื่องราวตอเนื่องกัน แตละฉากก็มีองคประกอบดังนี้ ตัวแสดงหลัก ตัวประกอบ ฉาก โตะ เกาอี้ ขอความประกอบ เสียง เปนตน ในการทํางานกับโปรแกรมนั้นเราจะเรียกไฟลท่ีสรางขึ้นวา Movie ประกอบดวย Scene ตั้งแต 1 Scene ข้ึนไป ภายใน Scene จะมี Object ตัวอกัษร รูปวาด ภาพกราฟก ปุม ภาพเคลื่อนไหว เสียง รวมไปถึงใส Effect ใหกับ Object ตางๆ ดวย

ตอนที่ 2.1 การสรางและปรับแตง Movie

เมื่อเปดโปรแกรม SWiSHMax ข้ึนมา สังเกตดูท่ี Movie Panel หรืออาจเรียกอีกอยางหนึ่งวา Object Panel ทางขวามือของโปรแกรม โดยปกติขนาดของ Movie อยูท่ี 300 x 400 pixels และมีอัตราความเร็วในการแสดงผล 12 เฟรมตอวินาที ใหทํา การปรับแตงขนาด Movie ตามวัตถุประสงคของผูใช สราง Banner กําหนดขนาด 780 x 90 pixels สรางเว็บไซด กําหนดขนาด 780 x 600 pixels สรางงาน Presentation กําหนดขนาด 800 x 600 pixels

ปรับแตงสี Background Color โดย Click เลือกที่ถาดสี ทําการเลือกสีท่ีตองการ อาจปรับแตง Frame Rate ไดมากกวา 12 frames/sec ถาเพิ่มตัวเลขสูงขึ้น เชน 20 frames/sec ก็จะทําใหการแสดงผลของ Movieเร็ว ข้ึน ถัดไปใหทานเลือกClick ท่ีกลองสี่เหลี่ยมของ Stop playing at end of movie เพื่อให การแสดง Movie น้ันเลนเพียงครั้งเดียวและหยุดหากไมเลือกไวก็จะทําให Movie น้ันเลนแบบวนรอบ (Loop)

Page 9: 2swishmax

- 9 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ตอนที่ 2.2 การทํางานภายใน Scene Scene หรือฉาก เปนสวนที่ใชในการบรรจุ Object ประเภทตางๆ ไดแก Button, Text, Sprite, Image, Shape เปนตน สามารถมีมากกวา 1 Scene เพื่อประกอบกันเปน Movie

จากภาพ Outline Panel แสดงใหเห็นถึงสวนประกอบภายใน Scene ซ่ึงมี Object ของ Button, Sprite, Text และ Shape สามารถทําการเพิ่ม Scene และ Object ได เพิ่ม Scene เลือก Insert Sceneหรือ

เพิ่ม Object เลือก Insert Image เปนตน

ในกรณีท่ีมี Object หลายชิ้น ควรเปลี่ยนชื่อโดยการ

Click ท่ีตัวหนังสือขางทาย 1 ครั้งและพิมพช่ือใหมลงไป ในสวนของการปรับแตง Scene ให Click เลือกที่กลอง

สี่เหลี่ยมของ Stop playing at end of scene เพื่อให Sceneน้ันแสดงผล 1 ครั้งและหยุด ใหผูใชงานควบคุมการศึกษาเรื่องราวตางๆนั้นดวยตนเอง โดยทําปุมไวสําหรับโตตอบใหผูใช Click ปุม Next เพื่อไปยัง Scene ถัดไป หรือ Click ปุม Back เพื่อยอนกลับไปยัง Scene ท่ีตองการอีกครั้ง การจัดลําดับ Scene โดยอาจสลับ Scene ข้ึนหรือลงดวยเครื่องมือ หรืออาจ Click Scene แลวลากเมาสไป

วางบนหรือลาง Scene อื่น ตอนที่ 2.3 รูจักกับ Object

Object ในโปรแกรม SWiSHMax มีหลายประเภทแบงได ดังนี้ 1. Text Object เปน Objectประเภทขอความ ตัวอักษร 2. Button Object เปน Objectประเภทปุม ใชในการ Click เพื่อแสดงผล หรือเชื่อมโยงไปยังหนาเว็บตามที่กําหนดไวใน Script 3. Shape Object เปน Objectประเภทรูปวาดที่สรางจาก Tool box 4. Image Object เปน Objectประเภทภาพกราฟก

Page 10: 2swishmax

- 10 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

5. Sprite Object เปน Objectประเภทที่นําObjectอื่นเขามา และกําหนดคาการทํางานภายใน ใหกับObjectท้ังหมดดวยการใส Effect หรือ Action

6. Soundtrack Object เปน Object ประเภทไฟลเสียง 7. Content Object เปน Object ท่ีนําไฟลตางๆ เชน text, Image, Sound จากภายนอกมาเก็บไว

พรอมท่ีจะนําไปใชงานไดทันที 8. Instance Object เปน Object ท่ีคัดลอกมาจาก Object Sprite และนํามากําหนดคาภายหลัง

Page 11: 2swishmax

- 11 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

หนวยที่ 3 การสรางและตกแตงขอความ (Text)

ในหนวยที่ 2 ไดกลาวถึงการใชงานโปรแกรม SWiSHMax เบื้องตน ทําใหสามารถกําหนดคาของไฟล Movie ท่ีสรางขึ้น ไดตรงตามวัตถุประสงคของการใชงาน เขาใจถึงการทํางานภายใน Scene และรูจักประเภทของ Object สวนบทเรียนหนวยที่ 3 เปนจุดเริ่มตนของการสรางชิ้นงาน ซ่ึงจะอธิบายถึงวิธีการสรางและตกแตงขอความ (Text) ชนิดของขอความ ซ่ึงนับเปน Object ช้ินแรกที่กําลังจะถูกสรางขึ้นจากบทเรียนนี้

ตอนที่ 3.1 การสรางขอความ ในการสรางขอความนั้นสามารถสรางไดหลายวิธี สรางโดยผูใชพิมพตัวอักษรข้ึนใหม หรือเปดไฟลท่ีมีนามสกุล .txt .doc .ppt .pdf ข้ึนมา ใชเมาสลากแถบดําขอวามที่ตองการ Click ขวาเลือก Copy จากนั้นเปดโปรแกรม SWiSHMax ข้ึนนํามา Paste ภายใน Text Object ดังภาพตามลําดับ

1. เปดไฟล Microsoft Word เลือกแถบดําขอความ Click ขวา Copy

Page 12: 2swishmax

- 12 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

2. เปดโปรแกรม SWiSHMax Click เลือก นํา Text ท่ี Copy มา Paste ท่ี Object Panel Click 1 ครั้งบน Workspace

ภาพการสรางขอความโดยนํา Text จากภายนอกเขามาใชงาน

สําหรับการสรางขอความดวยตนเองก็ใชวิธีการเดียวกับท่ีกลาวมาแตดัดแปลงเล็กนอย ดังนี้ Click เลือก จากToolbox พิมพขอความ Text ท่ี Object Panel Click 1 ครั้งบน

Workspace * ขอแนะนําสําหรับการใช Font ภาษาไทย ควรเลือกใช Font UPC เชน AngsanaUPC

CordiaUPC เปนตน

Page 13: 2swishmax

- 13 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ตอนที่ 3.2 การตกแตงขอความ เมื่อเราสรางขอความเรียบรอยแลวใหทําการเปลี่ยน Font Style, Font Size, Font Color ดังลําดับภาพตอไป

ภาพแสดงการตกแตง Font Style วิธีการตกแตงขอความ มีดังนี้ Click เลือก Text Object ใหปรากฏกลองสี่เหลีย่มลอมรอบ

เลือก โดย Click ลูกศรเพื่อเปลี่ยน Font Style เมื่อลากเมาสผานตัวอักษรตางๆ ก็จะปรากฏตัวอยางของ Font Style น้ัน

สําหรับการเปลี่ยน Font Size Click ลูกศรหากเลือกตัวเลขมาก Font จะมีขนาดใหญ

Font Size

Font Color

Page 14: 2swishmax

- 14 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

เครื่องมือตกแตง Text อ่ืนๆ

การเปลี่ยน Font Color Click เลือกสีตามตองการจากแผงสี หรืออาจกําหนดโคดสีดวยตนเองในชอง Hex เชน CC3399 และอาจปรับสีใหโปรงใสมากขึ้นดวยการใสคาที่ Alpha % ปกติจะมีคา 100 ใหลดลงเปน 50 หรือ 30 สีท่ีไดก็จะโปรงใสสามารถนําไปซอนทับกับ Object อื่นได จะมองเห็นวัตถุท่ีอยูใน Layer ดานลาง

ในการปรับแตง Text ยังมีเครื่องไมเครื่องมือใหเลือกใชอีกหลายตัว ดังนี้

+ Font Type เลือก Vector + Bold ตัวหนา + Italic ตัวเอียง

+ สําหรับจัดวาง text ใหชิดซาย กึ่งกลาง ชิดขวา ฯลฯ + ตัวกําหนดทิศทางไหลของตัวอักษร ดังภาพแสดงตัวอยางดานลาง

นอกจากนี้ยังสามารถปรับขนาด Text โดยใชเครื่องมือ Options บน Toolbox ไดแก Scale , Resize , Rotate , Distort ดูภาพตัวอยางการใชเครื่องมือดังกลาวกับ Text

วิธีการใช เครื่องมือ Scale Click Click Text นําเมาสไปวางบนกลองสี่เหลี่ยม ลากเมาสเพื่อขยายหรือลดขนาด Text

ภาพแสดงการใชเครื่องมือ Scale

Page 15: 2swishmax

- 15 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

วิธีการใชเครื่องมือ Rotate Click Click Text นําเมาสไปวางบนวงกลมเล็กๆ ลากเมาสเพื่อปรับหมุน Text

ภาพแสดงการใชเครื่องมือ Rotate

ตอนที่ 3.3 ชนิดของขอความ ชนิดของขอความใน Object Text แบงได 3 ชนิด ดังนี้

1. สราง Object Text ขอความปกติ 2. สราง Object Text เปนเหมือน Input Form เพื่อรับคาขอมูลจากผูใชงาน 3. สราง Object Text ขอความที่แสดงผลจากขอมูลท่ีผูใชกรอกใน Input

Text **ในบทเรียนนี้ใหตั้งคาไวท่ี Static Text เสมอ สวน Text ชนิดอื่นทานอาจเรียนรูในโอกาสตอไปในขั้นสูงขึ้น

Page 16: 2swishmax

- 16 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

หนวยที่ 4 การสรางภาพกราฟก (Image)

บทเรียนนี้จะกลาวถึงการสรางภาพกราฟกในลักษณะตางๆ เรื่องของการวาดภาพ การนําภาพกราฟกเขามาใชงาน การปรับแตงภาพ การทํางานกับสีของโปรแกรม SwiSH Max โดยสรางภาพจากชุดเครื่องมือ ไดแก Toolbox, Tool Options และ View Options ใหเปน Object Shape, Object Image ชุดเครื่องมอื Toolbox แบงออกเปน 4 ประเภท ดังนี้

1. เครื่องมือท่ีใชสําหรับวาดภาพ ไดแก Line, Pencil, Bezier, Ellipse/Circle, Rectangle/Square, Auto Shapes

2. เครื่องมือสําหรับเลือก Objects ไดแก Select Objects 3. เครื่องมือสําหรับปรับแตละจุดของรูปวาด ไดแก Reshape 4. เครื่องมือสําหรับปรับมุมมองรูปวาด ไดแก Pan, Zoom

ชุดเครื่องมอื Tool Options เปนเคร่ืองมือท่ีใชในการปรับแตงรูปวาด หลังจากที่ใชเครื่องมือวาดภาพแลว ไดแก

Scale, Resize, Rotate, Distort (ดูวิธีการใชงานจากหนวยที่ 3) ชุดเครื่องมอื View Options

เปนเคร่ืองมือปรับแตงมุมมองจอภาพ สามารถปรับยอ ขยายได ขอแนะนําสําหรับการทํางาน ควรตั้งคาที่ Fit Scene in Window ซ่ึงทําใหเห็น Objects ตาง ๆ ท่ีมีอยูท้ังหมด แสดงผลกลางจอ ภาพเสมอ

ตอนที่ 4.1 การวาดภาพกราฟก 1) การวาดภาพดวยเครื่องมือ AutoShape เลือก Tools Auto Shape เลือก รูปรางที่ตองการ แลวลากลงบน Stage สามารถเปลี่ยนรูปรางไดโดย Click ท่ีจุดสีเขียวและลากไปในทิศทางตาง ๆ จะ ทําใหรูปทรงเปลี่ยนไปดังภาพ

Page 17: 2swishmax

- 17 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

2) การวาดเสนและรูปทรงอื่นๆ 2.1 การวาดเสน

ปรับแตงเสนท่ีวาดขึ้นดวย Shape Panel ทางดานขวามือ โดยปรับแตงลักษณะเสน ขนาดและสีของเสน

2.2 การวาดรูปทรง เลือก Tools Ellipse ลากวงกลมลงบน Stage สามารถทําใหวงกลมมีสัดสวนที่กลมอยางถูกตองใหกด Shift ที

คียบอรดพรอมกับการลากเสนวงกลม จะไดวงกลมที่สมบูรณ ในกรณีเดียวกันหากสราง รูปทรงสี่เหลี่ยม Rectangle ก็สามารถกด Shift พรอมกับการลากเสนสี่เหลี่ยม จะได

สี่เหลี่ยมจัตุรัส ปรับแตงสีไดท่ี Shape Panel Fill

เลือก Tools Line ลากเสนลงบน Stage สามารถทําใหเสนมีความตรงโดยกด Shift พรอมกับการลากเสน จะลากเสนไดโดย มีมุมฉากที่ 45 องศา

Page 18: 2swishmax

- 18 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

2.3 การวาดรูปดวย Pencil และ Bezier

• การวาดรูปดวย Pencil เลือก Tools Pencil วาดภาพลงบน Stage ปรับแตงลักษณะเสน ขนาดและสีเสนไดท่ี Shape Panel Line

• การวาดรูปดวย Bezier การวาดรูปดวย Bezier จะเปนลักษณะการเชื่อมจากจุดหนึ่งไปยังจุดหนึ่งและเมื่อถึงจุดสุดทายที่ตรงกับจุดเริ่มตนก็จะปรากฏสีบนพื้นที่ๆไดลากเสนกําหนดพื้นที่ไวแลว ดังภาพ B

ภาพ B

ภาพ A

เลือก Tools Bezier ลากเสนเชื่อมโยงจากจุดหนึ่งไปยังจุดหนึ่งให

เปนภาพที่ตองการบน Stage โดยลากจุดสุดทายให ตรงกับจุดเริ่มตน

ปรับแตงสีไดท่ี Shape Panel Fill

Page 19: 2swishmax

- 19 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

หากตองการลากเสนใหมีความโคงให Click จุดปลายคางไวแลวลากเมาสข้ึนหรือลงดังภาพ C

ตอนที่ 4.2 การปรับแตงภาพกราฟก เราสามารถทําการปรับแตงภาพที่เราไดสรางขึ้นใหตรงกับความตองการมากที่สุดโดยใชเครื่องมือ Reshape หรือเครื่องมือท่ีอยูใน Option ไดแก เครื่องมือ Resize, scale, Rotate, Distort

ภาพ A ไดทําการปรับแตงดวยเครื่องมือ ReShape โดย เลือก Tools Reshape จะเกิดจุดเล็กๆ สีฟาบน Object ใหทําการลากจุดเพื่อปรับแตงใหเกิด Shape ท่ีตองการ

ภาพ B ไดทําการปรับแตงดวยเครื่องมือ Distort (ดูวิธีการใชงานเพิ่มเติมจากหนวยที่ 3) โดย

ภาพ C

ภาพ A

ภาพ B

Page 20: 2swishmax

- 20 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

เลือก Tools Distort จะเกิดจุดเล็กๆ สีฟาบน Object ใหทําการลากจุดเพื่อปรับแตงใหเกิด Shape ท่ีตองการ

ตอนที่ 4.3 การทํางานกับ Fill • การนําภาพกราฟกจากภายนอกเขามาใชในโปรแกรม SWiSHMax

สามารถปรับแตงภาพไดจาก Object Panel โดยเลือกที่ Shape Panel หรือ Click ท่ีภาพที่ปรากฏบน Stage เห็นไดวาที่ Fill ปรากฏเปน Clipped Image เปนการนําภาพเขามาใชงานเพียงภาพเดียว ใหทําการ Click ท่ี Properties Image Properties แสดงในสวนของ Image Transform

สามารถปรับแกความกวาง สูง ของภาพ และในสวนของ Export Options สามารถลดขนาดไฟลของภาพไดโดยลด bit ลงใหดขูนาด bytes วา Exported size ลดลงจาก Original size หรือไม นอกจากนี้สามารถปรับแตงภาพดวย Adjust Appearance โดยลากแถบสไลดในสวนที่ตองการปรับ เชน Contrast, Brightness, Saturation ฯลฯ

การนําภาพกราฟกจากภายนอกเขามายังโปรแกรมทําไดโดย เลือก File Import จะเปดภาพขึ้นมา หากเครื่องของทานไมไดแสดงเปนภาพ

ให Click ท่ี View เลือก Thumbnail ก็จะปรากฏภาพขึ้น เลือกภาพที่ตองการ

ภาพจะปรากฏบน Stage

Page 21: 2swishmax

- 21 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ในสวนของการปรับ Transparency เพื่อทําพื้นหลังใหโปรงใส วิธกีารให Click ใน

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

Page 22: 2swishmax

- 22 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

Solid สีเต็ม Linear gradient สีไลโทน Radial gradient สีไลโทนทรงกลม • การเลือกใชงาน Fill

จากภาพการสรางภาพดวย Tiled Image ซ่ึงสามารถทําใหภาพ 1 ภาพ มีลักษณะตอ เนื่องกันเปนภาพหลายๆภาพตอกันโดยการกําหนดขนาดภาพไวโดยการวาดวงกลมขึ้นมาและเลือกภาพจาก Tiled Image ซ่ึงมีวิธีการทําดังนี้

เลือก Tools Ellipse ลากวงกลมลงบน Stage เลือก Fill Click ท่ี Solid เลือก Tiled Image และ Click ท่ีภาพโฟลเดอร เลือกภาพที่

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

ภาพ การทํางานกับ Fill ในรูปแบบตางๆ

ภาพ การสรางภาพดวย Tiled Image

Page 23: 2swishmax

- 23 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

รูปทรงตางๆในการกําหนดพื้นที่แลวจึงเลือกภาพใสในรูปทรงนั้น สามารถเลือกใสภาพใชไดท้ัง Tiled Image และ Clipped Image

วิธีการสรางภาพดวย Tiled Image

Page 24: 2swishmax

- 24 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

หนวยที่ 5 การสรางภาพเคลื่อนไหวดวย Effect

จากที่ไดศึกษาการสราง Object ในรูปแบบ Text, Image, Sprite แลวนั้น ในหนวยนี้จะเปนสวนที่ชวยให Object เกิดAnimation เคลื่อนไหวได โดยการเพิ่ม Effect ใหกับ Object ท่ีสรางขึ้น ซ่ึงโปรแกรม SWiSHMax มี Effect ใหเลือกมากกวา 230 รูปแบบ ผูใชเลือกใชไดตามความตองการและความเหมาะสมของการสรางงาน

ตอนที่ 5.1 ประเภทของ Effect เราสามารถแบงประเภทของ Effect ได 4 ประเภท ไดแก 1. Place Effect เปนการสรางภาพเคลื่อนไหวจากตําแหนงตาง ๆ โดยกําหนดตําแหนงใหกับ Object ไดแก Place, Remove, Move 2. Basic Effect เปนการสรางภาพเคลื่อนไหวดวย Effect พื้นฐาน ไดแก Fade, Zoom, Slide, Blur, Repeat Frames, Revert 3. Authored Effect เปนกลุม Effect ท่ีถูกติดตั้งมากับโปรแกรม SWiSHMax ซ่ึงผูใชงานสามารถสราง หรือ ปรับแตง Effect ไดเอง ไดแก Appear into position, Disappear from position, Looping continuously, One off, Return to Start 4. Core Effect เปน Effect ท่ีใชในการนําไปสราง Effect ใหมเพื่อใชงาน ไดแก Transform, Squeeze, Alternate, Snake, Explode, 3D Spin, 3D Wave, Vortex, Wave, Typewriter

Page 25: 2swishmax

- 25 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ตอนที่ 5.2 การเพิ่ม-ลบ Effect ในตอนนี้จะขอเสนอวิธีการเพิ่ม Effect ใหกับ Object Text และ Image ดังนี้

• วิธีการเพิ่ม Effect ใหกับ Object Text

ใหพิมพขอความโดยการเลือก Tools Click 1 ครั้ง บน Stage จะเปนภาพกลองขอความข้ึนมา พิมพขอความที่ตองการใน Text Panel ไปท่ี Outline Panel เลือก Object Text ท่ีสรางขึ้น Click 1 ครั้ง จะ

ปรากฏแถบสี้นํ้าเงิน แสดงวาทานกําลังจะทํางานกับ Object ช้ินนั้น Click เลือก Frame ท่ี 1 บน Timeline หรือผูใชอาจเลือก Frame อื่นๆ ท่ี

ตองการใหเกิดEffect ไดตามตองการ จากน้ันเลือก Add Effect Appear into position เลือก Effect

แบบใดก็ไดโดยการ Click 1 ครั้ง Effect ท่ีเลือกจะปรากฏบน Timeline ดังภาพ

Page 26: 2swishmax

- 26 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ใหทําการแสดงผลของ Effect ท่ีเลือก ดังนี้ A. เลือก ท่ี Control Toolbar

B. ผล Animation ท่ีไดหลังจากเลือก Play Effect

• วิธีการเพิ่ม Effect ใหกับ Object Image

Page 27: 2swishmax

- 27 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

การเพิ่ม Effect ใหกับ Object Image ใหดําเนินการตามขั้นตอนดังนี้ เลือก File Import เลือกภาพที่ตองการ

ผลท่ีไดดงัภาพ

Page 28: 2swishmax

- 28 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ไปท่ี Outline Panel เลือก Object Image โดยการ Click ท่ี Object 1 ครั้ง จะปรากฏแถบสีนํ้าเงิน แสดงวาทานกําลังจะทํางานกับ Object ช้ินนั้น

Click เลือก Frame ท่ี 1 บน Timeline หรือผูใชอาจเลือก Frame อื่นๆ ท่ีตองการใหเกิด Effect ได เชน Frame ท่ี 15 เปนตน

จากน้ันเลือก Add Effect Appear into position เลือก Effect แบบใดก็ได

Effect ท่ีเลือกจะปรากฏบน Timeline ดังภาพ

Page 29: 2swishmax

- 29 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ใหทําการแสดงผลของ Effect ท่ีเลือก ดังนี้ A. เลือก ท่ี Control Toolbar

B. ผล Animation ท่ีไดหลังจากเลือก Play Effect

ตอนที่ 5.3 การปรับแตง Effect

Click เลือก Object Effect บน Timeline Double Click ท่ี Effect บน Timeline ใหทดลองทําการปรับแตงคุณลักษณะ

ของ Effect ดังนี้ A. ลากแถบสไลด เพื่อ

ปรับแตงคาในแตละสวน B. จากน้ัน Click ท่ี เพื่อ

แสดงผลจากการปรับแตง Effect และClick ปุม Stop เมื่อตองการหยุด หากวายังไม ตรงความตองการใหปรับแตงอีกครั้งและ ทดสอบการแสดงผล

Page 30: 2swishmax

- 30 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

C. Click Close

ในการปรับแตงคุณลักษณะของ Effect แตละรูปแบบนั้นจะแตกตางกัน ผูใชสามารถปรับแตงไดหลายสวน ซ่ึงโปรแกรมจะติดตั้งมากับ Effect น้ันๆ ตัวอยางดังภาพ

A

B

C

Page 31: 2swishmax

- 31 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

ตอนที่ 5.4 การสรางภาพเคลื่อนไหวดวย Effect แบบตางๆ 5.4.1 Effect “ Whirlpool ”

5.4.2 Effect “Move Around Circle ”

Page 32: 2swishmax

- 32 -

Created by Sayamon Insaard CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

5.4.3 Effect “ Radiation ”

5.4.4 Effect “ Scale Letter ”