1. -1-
หนวยที่ 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
โดยดูวธีการติดตั้งในภาคผนวก
ิ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

2. -2-
ตอนที่ 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
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

3. -3-
1.2.2. Effects
• SWiSHMax มี Effect ใหมๆใหเลือกใชมากกวา 230 รูปแบบ
• ผูใชสามารถสราง Effect ไดดวยตนเอง
• สามารถใช Effect เพิ่มไดอยางตอเนื่องมากกวา 1 ครั้ง
1.2.3. Drawing
ในสวนของเครื่องมือที่ใชสําหรับวาดรูป (Tools Box) ไดเพิ่มเครื่องมือ
AutoShape ในรูปทรงตางๆ ดังภาพ และเพิ่มรูปทรง 3 มิติ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

4. -4-
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 จะปรากฏหนาจอดังภาพ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

5. -5-
สวนประกอบของหนาตาโปรแกรม 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
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

6. -6-
ไอคอน ชื่อปุม การใชงาน
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
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

7. -7-
ตอนที่ 1.4 ตัวอยางงานที่สรางจากโปรแกรม SWiSHMax
WebSite www.adenlandscape.com
SWiSHMax Effects
Banner
Flash ประกอบหนาเว็บ
บทเรียนคอมพิวเตอร
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

8. -8-
หนวยที่ 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)
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

9. -9-
ตอนที่ 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ประเภทภาพกราฟก
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

10. - 10 -
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 และนํามากําหนดคาภายหลัง
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

11. - 11 -
หนวยที่ 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
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

12. - 12 -
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 เปนตน
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

13. - 13 -
ตอนที่ 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
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

14. - 14 -
การเปลี่ยน Font Color Click เลือกสีตามตองการจากแผงสี หรืออาจกําหนดโคดสี
ดวยตนเองในชอง Hex เชน CC3399 และอาจปรับสีใหโปรงใสมากขึ้นดวยการใสคาที่ Alpha % ปกติ
จะมีคา 100 ใหลดลงเปน 50 หรือ 30 สีที่ไดก็จะโปรงใสสามารถนําไปซอนทับกับ Object อื่นได จะ
มองเห็นวัตถุที่อยูใน Layer ดานลาง
ในการปรับแตง Text ยังมีเครื่องไมเครื่องมือใหเลือกใชอีกหลายตัว
ดังนี้
เครื่องมือตกแตง Text อื่นๆ + Font Type เลือก Vector
+ Bold ตัวหนา
+ Italic ตัวเอียง
+ สําหรับจัดวาง text ใหชิดซาย กึ่งกลาง ชิดขวา ฯลฯ
+ ตัวกําหนดทิศทางไหลของตัวอักษร ดังภาพแสดงตัวอยางดานลาง
นอกจากนี้ยังสามารถปรับขนาด Text โดยใชเครื่องมือ Options บน Toolbox ไดแก
Scale , Resize , Rotate , Distort ดูภาพตัวอยางการใชเครื่องมือ
ดังกลาวกับ Text
วิธีการใช เครื่องมือ Scale Click Click Text นําเมาสไปวางบนกลองสี่เหลี่ยม
ลากเมาสเพื่อขยายหรือลดขนาด Text
ภาพแสดงการใชเครื่องมือ Scale
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

15. - 15 -
วิธีการใชเครื่องมือ 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 ชนิดอื่นทานอาจเรียนรูในโอกาสตอไปในขั้น
สูงขึ้น
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

16. - 16 -
หนวยที่ 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 ที่จดสีเขียวและลากไปในทิศทางตาง ๆ จะ
ุ
ทําใหรูปทรงเปลี่ยนไปดังภาพ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

17. - 17 -
2) การวาดเสนและรูปทรงอื่นๆ
2.1 การวาดเสน
ปรับแตงเสน
ที่วาดขึ้นดวย
Shape Panel
ทางดานขวามือ
โดยปรับแตง
เลือก Tools Line ลากเสนลงบน ลักษณะเสน
Stage สามารถทําใหเสนมีความตรงโดยกด ขนาดและสีของ
Shift พรอมกับการลากเสน จะลากเสนไดโดย เสน
มีมุมฉากที่ 45 องศา
2.2 การวาดรูปทรง
เลือก Tools Ellipse
ลากวงกลมลงบน Stage สามารถทําใหวงกลมมีสัดสวนที่กลมอยางถูกตองใหกด Shift ที
คียบอรดพรอมกับการลากเสนวงกลม จะไดวงกลมที่สมบูรณ ในกรณีเดียวกันหากสราง
รูปทรงสี่เหลี่ยม Rectangle ก็สามารถกด Shift พรอมกับการลากเสนสี่เหลี่ยม จะได
สี่เหลี่ยมจัตุรัส
ปรับแตงสีไดที่ Shape Panel Fill
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

18. - 18 -
2.3 การวาดรูปดวย Pencil และ Bezier
• การวาดรูปดวย Pencil
เลือก Tools Pencil
วาดภาพลงบน Stage
ปรับแตงลักษณะเสน ขนาดและสีเสนไดที่ Shape Panel Line
• การวาดรูปดวย Bezier
การวาดรูปดวย Bezier จะเปนลักษณะการเชื่อมจากจุดหนึ่งไปยังจุดหนึ่งและเมื่อถึง
จุดสุดทายที่ตรงกับจุดเริ่มตนก็จะปรากฏสีบนพื้นที่ๆไดลากเสนกําหนดพื้นที่ไวแลว ดังภาพ B
ภาพ A
เลือก Tools Bezier
ลากเสนเชื่อมโยงจากจุดหนึ่งไปยังจุดหนึ่งให
เปนภาพที่ตองการบน Stage โดยลากจุดสุดทาย
ให ตรงกับจุดเริ่มตน
ปรับแตงสีไดที่ Shape Panel Fill
ภาพ B
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

19. - 19 -
หากตองการลากเสนใหมีความโคงให Click จุดปลายคางไวแลวลากเมาสขึ้นหรือลงดังภาพ C
ภาพ C
ตอนที่ 4.2 การปรับแตงภาพกราฟก
เราสามารถทําการปรับแตงภาพที่เราไดสรางขึ้นใหตรงกับความตองการมากที่สุดโดยใช
เครื่องมือ Reshape หรือเครื่องมือที่อยูใน Option ไดแก เครื่องมือ Resize, scale,
Rotate, Distort
ภาพ A
ภาพ A ไดทําการปรับแตงดวยเครื่องมือ ReShape โดย
เลือก Tools Reshape
จะเกิดจุดเล็กๆ สีฟาบน Object ใหทําการลากจุดเพื่อปรับแตงใหเกิด Shape ที่ตองการ
ภาพ B
ภาพ B ไดทําการปรับแตงดวยเครื่องมือ Distort (ดูวิธีการใชงานเพิ่มเติมจากหนวยที่ 3)
โดย
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

20. - 20 -
เลือก Tools Distort
จะเกิดจุดเล็กๆ สีฟาบน Object ใหทําการลากจุดเพื่อปรับแตงใหเกิด Shape ที่ตองการ
ตอนที่ 4.3 การทํางานกับ Fill
• การนําภาพกราฟกจากภายนอกเขามาใชในโปรแกรม SWiSHMax
การนําภาพกราฟกจากภายนอกเขามายังโปรแกรมทําไดโดย
เลือก File Import
จะเปดภาพขึ้นมา หากเครื่องของทานไมไดแสดงเปนภาพ
ให Click ที่ View เลือก Thumbnail ก็จะปรากฏภาพขึ้น เลือก
ภาพที่ตองการ
ภาพจะปรากฏบน Stage
สามารถปรับแตงภาพไดจาก 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 ฯลฯ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

21. - 21 -
ในสวนของการปรับ Transparency เพื่อทําพื้นหลังใหโปรงใส วิธการให Click ใน
ี
และเลือกสีที่ตรงกับพื้นหลัง เชน พื้นหลังสีขาวใหเลือก สีขาวดวย
จากภาพตัวอยางดานลางพื้นหลังเปนสีฟาและไดทําการแกใหพื้นหลังกลายเปนโปรงใส

Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

22. - 22 -
• การเลือกใชงาน Fill
Solid สีเต็ม Linear gradient สีไลโทน Radial gradient สีไลโทนทรงกลม
ภาพ การทํางานกับ Fill ในรูปแบบตางๆ
ภาพ การสรางภาพดวย Tiled Image
จากภาพการสรางภาพดวย Tiled Image ซึ่งสามารถทําใหภาพ 1 ภาพ มีลักษณะตอ
เนื่องกันเปนภาพหลายๆภาพตอกันโดยการกําหนดขนาดภาพไวโดยการวาดวงกลมขึ้นมาและเลือก
ภาพจาก Tiled Image ซึ่งมีวิธีการทําดังนี้
เลือก Tools Ellipse
ลากวงกลมลงบน Stage
เลือก Fill Click ที่ Solid เลือก Tiled Image และ Click ที่ภาพโฟลเดอร เลือกภาพที่
ตองการ จะปรากฏภาพที่ตอเปนหลายๆ ชิ้นเรียงตอกันในวงกลม สังเกตดูจะเห็นวาวงกลมจะเปนตัว
กําหนดพื้นที่ในการแสดงภาพ ภายนอกวงกลมจะไมแสดงภาพดังกลาว ทานสามารถเลือกใชการวาด
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

23. - 23 -
รูปทรงตางๆในการกําหนดพื้นที่แลวจึงเลือกภาพใสในรูปทรงนั้น สามารถเลือกใสภาพใชไดทั้ง Tiled
Image และ Clipped Image
วิธีการสรางภาพดวย Tiled Image
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

24. - 24 -
หนวยที่ 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
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

25. - 25 -
ตอนที่ 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 ดังภาพ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

26. - 26 -
ใหทําการแสดงผลของ Effect ที่เลือก ดังนี้
A. เลือก ที่ Control Toolbar
B. ผล Animation ที่ไดหลังจากเลือก Play Effect
• วิธีการเพิ่ม Effect ใหกับ Object Image
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

27. - 27 -
การเพิ่ม Effect ใหกับ Object Image ใหดําเนินการตามขั้นตอนดังนี้
เลือก File Import เลือกภาพที่ตองการ
ผลที่ไดดงภาพ
ั
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

28. - 28 -
ไปที่ Outline Panel เลือก Object Image โดยการ Click ที่ Object 1 ครั้ง จะปรากฏแถบสี
น้ําเงิน แสดงวาทานกําลังจะทํางานกับ Object ชิ้นนั้น
Click เลือก Frame ที่ 1 บน Timeline หรือผูใชอาจเลือก Frame อื่นๆ ที่ตองการใหเกิด
Effect ได เชน Frame ที่ 15 เปนตน
จากนั้นเลือก Add Effect Appear into position เลือก Effect แบบใดก็ได
Effect ที่เลือกจะปรากฏบน Timeline ดังภาพ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

29. - 29 -
ใหทําการแสดงผลของ 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 เมื่อตองการหยุด หากวายังไม
ตรงความตองการใหปรับแตงอีกครั้งและ
ทดสอบการแสดงผล
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

30. - 30 -
C. Click Close
B
A
C
ในการปรับแตงคุณลักษณะของ Effect แตละรูปแบบนั้นจะแตกตางกัน ผูใชสามารถ
ปรับแตงไดหลายสวน ซึ่งโปรแกรมจะติดตั้งมากับ Effect นั้นๆ ตัวอยางดังภาพ
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

31. - 31 -
ตอนที่ 5.4 การสรางภาพเคลื่อนไหวดวย Effect แบบตางๆ
5.4.1 Effect “ Whirlpool ”
5.4.2 Effect “Move Around Circle ”
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY

32. - 32 -
5.4.3 Effect “ Radiation ”
5.4.4 Effect “ Scale Letter ”
Created by Sayamon Insaard
CopyRight 2006 Borderless Education Project : SURANAREE UNIVERSITY OF TECHNOLOGY