การนำไปใช้งานในโปรแกรม marcromedia...

33
เเเเเเเเเเเเเเเเเเเเเเ E-commerce Week 7 เเเเเเเเเเเเเ SWiSHmax E-commerce (LAB) โโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโ โ.โโโโโโโโ โโโโโโโโโ โโโโโโโโ 7 โโโโโโโโโโโโโ SWiSHmax โโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโ 1. เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเ เเเเเเเเเเเเเเเเเเเเเเเเเเ 2. เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเเเเ 3. เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ (Effect) เเเเเเเเเเเเเเเเเเเเเ 4. เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเ 5. เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ 6. เเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเเ เเเเเเเ Dreamweaver โโโโโโโ โโโโ 1. โโโโโโโ 1 โโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโ 2 2. โโโโโโโ 2 โโโโโโโโโโโโโโโ 5 Page : 1 By Miss Pimolphun, MIS Major

Upload: others

Post on 07-Mar-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

E-commerce (LAB)โดย คณาจารยสาขาวชาระบบสารสนเทศเพอการจดการ

อ.พมลพรรณ อดมพนธ

ครงท 7การใชโปรแกรม SWiSHmax เพอทำาภาพเคลอนไหว

เบองตนวตถประสงค1. เพอใหผ เรยนสามารถเปดโปรแกรม และร จกองคประกอบของ

โปรแกรม2. เพอใหผเรยนทราบวธการสรางงานเพอเปนภาพเคลอนไหว3. เพอใหผเรยนทราบวธการใสลกเลน (Effect) เพอทำาภาพเคลอนไหว4. เพอใหผเรยนทราบวธการทำาแบนเนอรเคลอนไหว5. เพอใหผเรยนทราบวธการบนทกไฟล 6. เพอใหผเรยนทราบวธการนำาไปใชในโปรแกรม Dreamweaver

เนอหา หนา1.สวนท 1 รจกโปรแกรมและองคประกอบหนาจอ

22.สวนท 2 การสรางชนงาน

53. การสรางฉากใหม 54. การใสขอความ รปภาพ 7

5. การวาดเสนและวาดรปลงในชนงาน 7

Page : 1 By Miss Pimolphun, MIS Major

Page 2: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

6. การทำาใหวตถเคลอนทโดยใช Motion Path9

7.สวนท 3 การใสลกเลน (Effect) เบองตน9

8. การบนทกไฟลเพอแกไขและนำาไปใชในเวบเพจ10

9. การ Export ชนงานทสรางขนไปใชในเวบเพจ11

10. การใสลกเลน (Effect) เพมเตม12

11. สวนท 4 การสรางแบนเนอร (Banner)15

12. สวนท 5 การใส Script17

Page : 2 By Miss Pimolphun, MIS Major

Page 3: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

การใชโปรแกรม SWiSHmax เบองตน

สวนท 1 รจกโปรแกรมและองคประกอบ หนาจอ โปรแกรม SwishMAX เปนโปรแกรมทใชสรางภาพเคลอนไหว

สามารถสรางชนงานภาพเคลอนไหวของ Macromedia Flash โดยไมจำาเปนจะตองใชฟงกชนของโปรแกรม Macromedia Flash ทยงยาก เพยงแคใชเครองมอทโปรแกรมมมาใหเทานน ซงใชงานไดงาย สามารถสรางลกเลนทซบซอนดวยตวอกษร รปภาพ การวาดเขยน และเสยง ซงใชเวลาไมนาน

โปรแกรม swishMAX สามารถทจะนำาเสนองานในรปแบบของไฟล Shock wave Flash (.swf) ซ งสามารถนำาไปใชในการสรางเวบเพจได และ ยงสามารถแปลงเปนไฟล avi ซ งใชในการตดตอภาพยนตรไดอกดวย*** Swish สามารถใชงานไดโดยไมจำาเปนตองตดตง Macromedia Flash บนคอมพวเตอร

หมายเหต ขอมลเพมเตมเกยวกบ Swish

เวบไซต http://www.swishzone.com/ เปนเวบไซต ทใหบรการ Software ทสนบสนนการผลตสอ graphic animation ดวยวธงาย ๆ ทชอโปรแกรม Swish มตงแต Swish ในเวอรชน 1.0, 1.5 และ 2.0 นอกจากโปรแกรม Swish เองแลวยงมโปรแกรมทคอยชวย อำานวยความสะดวกอน ๆ อก โปรแกรมในกลม Swishzone คอ Swishmax, Swishpix, Swishvideo และ Swishstudio

โปรแกรม Swishmax ซงเปนโปรแกรมทชวยในการสราง animation งาย ๆ สามารถ Import ภาพ - เสยง พมพขอความ และสามารถใส Effect และกม Effect ใหเลอกใชมากกวา 200 แบบ สำาหรบผทมพนฐาน การใชโปรแกรม Macromedia Flash กจะพบวาโปรแกรม Swishmax ชวยใหการใชงานงายขนมาก สำาหรบรปแบบ การวางชนงานกใชเปน Frame

Page : 3 By Miss Pimolphun, MIS Major

Page 4: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

โดยทเราสามารถกำาหนดรปแบบ Frame ตอวนาทได นอกจากนสำาหรบผเชยวชาญ ยงสามารถเขยน Script เพอกำาหนดรปแบบการทำางานเพมเตมได

สำาหรบผทชอบทำาสไลดในรปแบบตาง ๆ เชนในรปแบบ Screen Saver, exe, Website ตองลองใชโปรแกรม Swishpix ซงดวยกระบวนการทำางานทงาย โปรแกรมนจงผลตงานออกมาไดดวยวธการเพยง 5 ขนตอน คอ ขนการเลอกภาพและนำาภาพเขามา ขนตกแตงภาพในเบองตน ขนการนำาภาพใสอลบมทตองการ ขนตกแตงภาพ ในระดบสงพรอมกำาหนดเสยงและความสมพนธตาง ๆ และขน Export นอกจากน ยงมปมทใช control การเลอน และการแสดงภาพ แถมภาพในสวนทใชเปน Background กเหมอนกรอบ ภาพสตกเกอร

สำาหรบโปรแกรม Swish video กเปนโปรแกรมทชวยใหสามารถ ควบคมวดโอ โดยมแถบ Scale ปม Play ปม Stop ปม Rewind ปม Forward ทำาใหสามารถควบคมวดโอไดงายขน และสามารถ Export เพอนำาไปใชงาน รวมกบ โปรแกรมตวอน ๆ ไดอกดวย

โปรแกรมสดทายคอ Swishstudio สำาหรบ นกทองเวบไซตทชอบเกบไฟลประเภท SWF (ไฟล Flash ทแปลงสำาหรบ ใชงานแลว) ทสวยๆ มาประกอบในงานของตนเอง ซงสามารถเกบมาจาก Temporary Internet Files หลงจากทเขาไปทองเทยวใน Internet ไฟลใน รปแบบ SWF จะถกนำามาเกบท Temporary Internet Files ของเราโดยอตโนมต แตสำาหรบผทมไฟล SWF อยแลวอาจนำามาใชกบโปรแกรมนไดเลยโดย จะเรยงลำาดบไฟลทตองการใชงานตามหมายเลขไดทนทรวมถง ใสเสยงเพมได

การ Download มาใชงานท http://www.swishzone.com/index.php?area=home หรอ ท Homepage ของเวบไซต swishzone

เรมตนเขาสโปรแกรม

Page : 4 By Miss Pimolphun, MIS Major

Page 5: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax คลก Start / Program / SWiSHmax ดงรปดานขาง

รจกองคประกอบหนาจอของโปรแกรม

Page : 5 By Miss Pimolphun, MIS Major

7.Layout Panel

6.Outlin

2.Insert

3.Control 5. Timeline

1.Standard

Page 6: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

1. Standard Toolbar แถบเครองมอลดทใชควบคมคำาสงทวไปคำาสง รายละเอยด

Bring Forward เลอนวตถทเลอกอยขนไป 1 ชนBring Backward

เลอนวตถทเลอกอยลงไป 1 ชน

Bring To Front เลอนวตถทเลอกอยใหไปอยชนหนาสดBring To Back เลอนวตถทเลอกอยใหไปอยลางสด

2. Insert Toolbar แถบเครองมอลดทใชในการเรยกคำาสงแทรกคำาสง รายละเอยด

Insert Scene เพมฉาก (Scene) Insert Text แทรกขอความInsert Image แทรกรปภาพ

3. Control Toolbar แถบเครองมอทใชในการควบคมการแสดงผลของชนงานคำาสง รายละเอยด

Stop หยดการเลนไฟลPlay เลนไฟลทงหมด(ทกฉาก)Play Scene เลนไฟลเฉพาะฉากทเลอกPlay Effect เลนเฉพาะลกเลนทสรางขน

4. Timeline Panel แถบแสดงเวลาซงจะมลกษณะเปนแถบสเหลยมผนผายาว แบงเปนชองเลกๆหลายอนซงเรยกวา Frame โดยจะเปนตวบงบอกถงการกระทำาในแตละเวลา อกทงยงมปมทใชในการเพมลกเลนอกดวย

5. Outline Panel บรเวณซงแสดงโครงรางอนดบชนของวตถทสรางขนในไฟลภาพยนตรโดยมลกษณะเปนชนทซอนทบกนตามลำาดบกอนหลงซงวตถทอยชนสงกวาจะอยขางหนาของวตถทอยในชนตำากวาภายใน Scene เดยวกน

Page : 6 By Miss Pimolphun, MIS Major

Page 7: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

6. Layout Panel บรเวณแสดงผลของชนงานไฟลภาพยนตรททำาซงเราแกไขและสรางชนงานในบรเวณน และยงม Toolbox หรอกลองเครองมอทใชสำาหรบเครองมอพนฐานทวไป ซงรายละเอยดเครองมอตางๆใน Toolbox มดงน

อปกรณ รายละเอยดSelect เลอกวตถReshape เปลยนแปลงรปทรงMotion Path สรางเสนทางการเคลอนทLine เขยนเสนตรงPencil เขยนเสนเองตามทตองการBezier เขยนเสนโคงRectangle/Square

วาดรปสเหลยม

Ellipse/Circle วาดรปวงกลมAuto Shape วาดรปตางๆตามแบบทกำาหนดZoom ยอหรอขยายขนาดจอPan เลอนภาพ

สวนท 2 การสรางชนงาน SwishMAX เบองตน

การสรางชนงานใหม SwishMAX จะใชบรเวณบรเวณ Layout Panel เปนหลกในการออกแบบและทดสอบผลสรางชนงานใหม

การสรางชนงานใหม ทำาได 2 วธ คอ 1. คลกทเมน File>New2. คลกทปมรป ท Toolbar

Page : 7 By Miss Pimolphun, MIS Major

Page 8: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

เมอสรางชนงานใหมไดแลว สามารถปรบแตงคณสมบตตางๆของชนงานไดทหนาตาง Movie ทดานขาง ดงนBackground Color – สพนหลงWidth – ความกวางของชนงานHeight – ความสงของชนงานFrame Rate – เวลาทใชในการเคลอนทม หนวยเปนจำานวนเฟรมตอวนาท

Page : 8 By Miss Pimolphun, MIS Major

Page 9: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax การแทรกฉาก (Scene) ใหมลงในชนงาน

การแทรกฉากใหมในชนงาน มวธการดงน1. คลกทเมน Insert>Scene หรอ คลกทปมรปฉาก ดงภาพ

การแทรกขอความลงในชนงาน

การแทรกขอความลงในชนงาน มวธการดงน1. คลกทเมน Insert>Text หรอ คลกทปมรปตว T ดงภาพ

2. พมพขอความทตองการในหนาตาง Text ทางดานขวา โดยสามารถปรบรปแบบ ขนาด ส ของตวอกษรได

3. ถาตองการลบหรอแกไขขอความ ทำาไดโดยคลกทชองพมพขอความในหนาตาง Text แลวทำาการแกไข

Page : 9 By Miss Pimolphun, MIS Major

2. ท Outline Panel จะม Scene เพมขน

Page 10: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

Page : 10 By Miss Pimolphun, MIS Major

Page 11: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax การแทรกรปภาพลงในชนงานการแทรกรปภาพลงในชนงาน มวธการดงน1. คลกทเมน Insert>Image หรอ คลกทรป ตนไม ดงภาพ

2. เลอกภาพทตองการแลวคลก Open

3. สามารถปรบแตงคณสมบตตางๆของภาพไดทหนาตาง Shape ดานขาง ดงรป

Name – ชอของภาพLine – กำาหนดลกษณะเสนขอบProperties – กำาหนดขนาดของภาพ ปรบความมด-สวาง และความคมชดของภาพ

การวาดเสนและวาดรปลงในชนงาน

การวาดเสนลงในชนงานนน สามารถทำาไดโดยใชเครองมอ ซงจะใชในการวาดเสนตรง หรอ ใชเครองมอ ในการวาดเสนโคงไปมาตามใจชอบเหมอนดนสอ สำาหรบวธการใชงานนน ทำาในลกษณะเดยวกน คอ 1. เลอกเครองมอ จาก ToolBox ดานซายมอ 2. คลกคางไวบรเวณชนงานแลวลากจนไดเสนหรอรปรางทตองการ

สวนการวาดรปลงในชนงาน มวธการดงน

Page : 11 By Miss Pimolphun, MIS Major

Page 12: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax 1. เลอกเครองมอเปนรปทตองการวาด จาก ToolBox ดานซายมอ

(สำาหรบเครองมอ Auto Shapes ทเปนรปสเหลยมขอบมน ใหคลกขางไว จะมรปรางตางๆใหเลอก)

2. คลกคางไวบรเวณชนงานแลวลากจนไดขนาดทตองการ

3. ปรบแตงคณสมบตของวตถทวาดขนมาไดทหนาตาง Shape ดานขวา

Name – ชอของภาพLine – กำาหนดลกษณะเสนขอบ

Fill – เตมสใหรปทวาดซงมรปแบบใหเลอก คอ รปแบบ รปทได

Solid

Linear Gradient

Radial Gradient

Tiled Image

Clipped Image

Page : 12 By Miss Pimolphun, MIS Major

เปลยนรปแบบปม Shape

Page 13: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

สำาหรบการเลอก Fill แบบ Tiled Image หรอ Clipped Image นน สามารถเลอกรปทตองการได โดยคลกทปม Select new Image ทหนาตาง Shape ดานขวา

การจดลำาดบของวตถเมอเราสรางวตถหลายๆชน จำาเปนจะตองมการจดลำาดบในการ

วาง เพอกำาหนดวา เมอวตถซอนทบกน วตถชนใดจะวางอยดานบน ดงตวอยาง

รปวงกลมอยบน รปวงกลมอยลาง

Page : 13 By Miss Pimolphun, MIS Major

Page 14: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax การจดลำาดบของวตถนน ทำาไดโดย1. คลกทวตถทตองการจดลำาดบ2. คลกทปมลกศร ขน ลง บรเวณ Outline

panel เพอจดลำาดบ

การทำาใหวตถเคลอนทโดยใช Motion Path

การใชโปรแกรม Swish ทำาใหวตถเคลอนททำาไดอยางงายดาย โดยใชเครองมอ Motion Path มวธการดงน 1. สรางวตถทตองการใหเคลอนท เชน ขอความ

Welcome จากรป จากนนคลกทวตถ แลวเลอกเครองมอ Motion Path จาก Toolbox เครองหมายแสดง mouse จะเปลยนเปนรปเครองหมาย +

2. คลกขางทบรเวณกงกลางวตถ แลวทำาการลากเสน เพอใหเปนแนวของการเคลอนทของวตถ

3. ทดสอบผลทไดโดยคลกทปม Play ท Tool Bar

การใส Effect ใหวตถเพมเตม

Page : 14 By Miss Pimolphun, MIS Major

สญลกษณเสนจดการ

จดเรมตน

จดสนสด

แสดง Timeline การเคลอนทปม Motion Path

Page 15: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

เปนการใสรปแบบการเคลอนไหวท โดยโปรแกรมไดจดเตรยมรปแบบอตโนมตหลากหลาย และสวยงาม เพยงแตเราเลอก และทดสอบดผลจนกวาจะพอใจ (รายละเอยดเพมเตมดในหวขอถดไป)

1. คลกเลอกวตถทตองการ เชน ขอความ หรอ รปภาพ2. คลกเมาสปมขวา เมน

ลดจะแสดงใหเหน และใหเลอก Effect / Appear into position ดงรป

3. ทดสอบดวยปม Play

การบนทกชนงานทสรางขน

การบนทกชนงานทสรางขน ทำาไดโดย 1. คลกทปม File>Save2. ตงชอไฟลตามตองการ

แลวคลกทปม Save

3. โปรแกรมจะขนหนาตางถามวา ตองการ Export เปนไฟล .swf (เ

Page : 15 By Miss Pimolphun, MIS Major

ชอ Effect ตาง

Page 16: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

พอนำาไปใชในการออกแบบเพจ) หรอไม ใหเลอกตามตองการแลวคลกทปม OK

4. ถาเลอกตองการให Export เปน .swf (เลอกหวขอท 1) โปรแกรมจะขนหนาตางเพอใหตงชอไฟล ใหทำาการตงชอไฟล แลวคลก Save

การ Export ชนงานทสรางขนไปใชในเวบเพจ

โปรแกรม Swish สามารถ Export ไฟลจาก .swi (นามสกลของโปรแกรม Swish) ไป เปน .swf , .html , .exe , .avi ได โดยมวธการดงน

1. เลอกเมน File>Export 2. เลอกชนดของไฟลท

ตองการเปลยน

3. โปรแกรมจะขนหนาตาง ใหตงชอไฟลตามตองการแลวคลกทปม Save

Page : 16 By Miss Pimolphun, MIS Major

Page 17: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

การนำาไปใชงานในโปรแกรม Marcromedia Dreamweaver

1. เปดโปรแกรม Marcromedia Dreamweaver และเลอกไฟลเวบเพจทตองการ2. คลกทเมน Insert / media / Flash3. คลกเลอกชอไฟลเคลอนไหว Swish ทนามสกล .swf ตามตองการ ดงรป

4. ทดสอบโดยการกดปม F121 เลอก

Insert/Media/Flashตย. ภาพหลงจากแทรกรป

สวนท 3 การใสลกเลนให กบชนงาน (Effect)

การใชงาน SwishMAX เพอสรางงานใหม effect(ลกเลน) สวยงามทำาไดโดยใชวธงายๆ คอ ผใชงานสามารถเลอกใส effect ตางๆใหกบชนงานได effect แตละชนดกจะมรปแบบแตกตางกนไป ใน SwishMAX นน ม effect ใหเลอกมากมาย จะขอยกมาเปนตวอยาง ดงน

Fade in เปนลกเลนสำาหรบแสดงวตถขนมาอยางชาๆ ในตำาแหนงทตองการ

Page : 17 By Miss Pimolphun, MIS Major

Media/Flash

สญลกษณเมออยบน Dream

Page 18: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

Fade out เปนลกเลนสำาหรบแสดงวตถใหหายไปอยางชาๆ ในตำาแหนงทตองการ

Zoom in เปนลกเลนสำาหรบแสดงการขยายวตถ จากขนาดเลกใหเปนขนาดปกต

Zoom out เปนลกเลนสำาหรบแสดงการยอวตถ จากขนาดใหญใหเปนขนาดปกต

Slide in เปนลกเลนสำาหรบแสดงการเคลอนทของวตถเปนเสนตรง จากหนาจอเขามาสภายในจอ โดยจะมคำาสงยอยใหเลอกวาตองการใหเคลอนทมาจากทางใด

Slide out เปนลกเลนสำาหรบแสดงการเคลอนทของวตถเปนเสนตรง จากภายในหนาจอ ไปสภายนอก โดยจะมคำาสงยอยใหเลอกวาตองการใหเคลอนทออกไปทางใด

Blur เปนลกเลนสำาหรบแสดงผลวตถอยางชาๆ โดยเรมจากภาพใหญทไมชดเจน จนกลายเปนภาพทสมบรณ

Appear into position เปนลกเลนสำาหรบแสดงผลวตถในลกษณะคอยๆปรากฏขน ซงมลกษณะการปรากฏใหเลอกอกหลายแบบ ดงภาพ

Page : 18 By Miss Pimolphun, MIS Major

Page 19: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

Disappear from position เปนลกเลนสำาหรบแสดงผล

วตถในลกษณะคอยๆหายไป ซงมลกษณะการหายจากหนาจอใหเลอกอกหลายแบบ ดงภาพ

การใส Effect ใหกบชนงาน

Page : 19 By Miss Pimolphun, MIS Major

Page 20: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

การใส Effect ใหกบชนงาน ทำาไดดงน

1. เลอกวตถทตองการใส Effect โดยการคลกทวตถนน

2. คลกทปม Add Effect หรอ คลกเมาสปมขวาเขาเมนลด

3. เลอก Effect ทตองการ4. ทดสอบผลทไดโดยคลกท

ปม Play ท Tool Bar

Page : 20 By Miss Pimolphun, MIS Major

เลอก object

คลก Add object

หรอคลกเมาสปมขวาเขาเมนลด

Page 21: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

การปรบแตง Effect

การปรบแตง Effect ใหกบชนงาน ทำาไดดงน 1. เลอกวตถทตองการปรบแตง Effect โดยการคลกทวตถนน2. ถาตองการใหวตถเคลอนทชาลงใหทำาการขยายขนาด Effect

โดยคลกคางทเสนดานทายของ Effect แลวลากใหขยายออก

3. ถาตองการใหวตถเคลอนทเรวขนใหทำาการลดขนาด Effect โดยคลกคางทเสนดานทายของ Effect แลวลากใหแคบลง

4.

4.ทดสอบผลทไดโดยคลกทปม Play ท Tool Bar

การลบ Effect

การลบ Effect ทำาไดดงน 1. เลอกวตถทตองการลบ Effect โดยการคลกทวตถนน2. คลกท Effect ทตองการลบ บรเวณ Timeline Panel3. กดปม Delete ทคยบอรด4. ทดสอบผลทไดโดยคลกทปม Play ท Tool Bar

Page : 21 By Miss Pimolphun, MIS Major

Page 22: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax สวนท 4 ตวอยางการทำาแบนเนอร (Banner) สำาหรบ ใชในเวบไซต

โปรแกรม Swish เปนโปรแกรมสรางกราฟกอยางงายๆ ซงสามารถใชในการสรางภาพเคลอนไหวเพอตกแตงเวบไซตไดอยางสะดวกและรวดเรว ในสวนนจะขอยกตวอยางการใชโปรแกรม Swish เพอสรางแบนเนอรและนำามาใชในการตกแตงเวบไซต

ตวอยางการทำาแบนเนอร1. เปดโปรแกรม Swish

เลอก Start a new empty movie

2. ปรบขนาดของภาพดงน Width = 760 Height 80

3. ปรบสตามตองการท Background Color

4. แทรกภาพโดยคลกทปม Insert Image แลวเลอกภาพทตองการ

5. คลกทภาพเพอทำาการตงชอภาพ โดยพมพชอในแทบ Shape ทชอง Name (ตงชอเพอใหสะดวกเวลาทำางาน) สามารถคลกคางทภาพ และลากไปมา เพอวางบนจดทเหมาะสมได หรอสามารถยอขยายภาพไดโดยคลกทภาพ แลวคลกคางทรปสเหลยมบรเวณมมของภาพ

Page : 22 By Miss Pimolphun, MIS Major

Insert Image

กำาหนดขนาด Banner

Page 23: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

6. คลกทแทรกขอความแลวแทรกขอความทตองการลงไป ปรบแตงรปแบบขอความไดทแทบ Text

7. ใส effect ใหรปภาพและขอความตามตองการ โดยคลกทภาพหรอขอความนน แลวคลกทปม Add Effect

8. ปรบความเรว และการเคลอนไหวของภาพท Timeline Panel

9. ทดสอบผลทไดโดยคลกทปม Play ท Tool Bar

10. เมอปรบแตงจนไดผลตามทตองการแลว ทำาการเซฟ โดยคลกทเมน File>Save พรอมทงทำาการ Export เปน .swf เพอจะนำาไปใชในการสรางเวบ เพจตอไป

Page : 23 By Miss Pimolphun, MIS Major

Insert Text

Insert Image

ใส effect

Page 24: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

Page : 24 By Miss Pimolphun, MIS Major

เสน Timeline แสดง effect

Page 25: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax สวนท 5 การใส Script เบองตน

ในโปรแกรม Swish ม Script เตรยมไวใหมากมาย ทมกใชบอยๆ มดงน

Script รายละเอยดMovie Control>gotoAndPlay>gotoAndPlay(FRAME)

แสดงเฟรมทตองการ

Movie Control>gotoAndPlay>nextFrameAndPlay()

แสดงเฟรมถดไป

Movie Control>gotoAndPlay>prevFrameAndPlay()

แสดงเฟรมกอนหนา

Movie Control>gotoAndPlay>nextSceneAndPlay()

แสดงฉาก (Scene) ถดไป

Movie Control>gotoAndPlay>prevSceneAndPlay()

แสดงฉาก (Scene) กอนหนา

Browser/Network>getURL(…) ไปท URLSound>playSound(…) ใสเสยง

การใส Script เกยวกบการควบคมการแสดงผลชนงาน

Movie

Control>gotoAndPlay>nextSceneAndPlay() ใชเมอแสดงฉากแรกเสรจแลว ตองการใหแสดงฉากถดไป ทำาไดโดย

Page : 25 By Miss Pimolphun, MIS Major

Page 26: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

1. เลอกเฟรมทตองการใหเปลยนฉาก เชน เลอกเฟรมท 10 ดงภาพ

2. คลกทปม Add Script แลวเลอก Movie Control> gotoAndPlay> nextSceneAndPlay() โปรแกรมจะทำาการสลบมมมองไปยง Script View ดงภาพ

Page : 26 By Miss Pimolphun, MIS Major

ถาตองการเปลยนแปลง

เฟรมทเลอกไว เชน ตองการใหเปลยนฉาก

ทเฟรมท 12 แทน สามารถเปลยนตวเลข

ไดทชอง Frame

(บรเวณกรอบดาน

Page 27: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

3. จะมสญลกษณ ขนท Timeline Panel ในเฟรมททำาการเลอกไว

4. ทดสอบผลทไดโดยกลบไปท Layout Vies แลวคลกทปม Play ท Tool Bar

*** คำาสงอนๆในหมวดของ Movie Control>gotoAndPlay กจะทำาในลกษณะเดยวกน ***

Page : 27 By Miss Pimolphun, MIS Major

Page 28: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax การใส Script เกยวกบการสรางการเชอมโยง (Link)

Browser/Network>getURL(…) ใชเมอตองการสรางการเชอมโยง (Link) ไปท URL ตางๆ ทำาไดโดย

1. เลอกบรเวณทตองการสรางการเชอมโยง ถาตองการใหคลกบรเวณชนงานทงหมดแลวเชอมโยงไป ใหคลกบรเวณทวางในฉาก จะมรปกากบาทลอมรอบฉาก แลวทำาการคลกทปม Add Script และเลอก Browser/Network>getURL(…) ดงภาพ

แตถาตองการใหคลกทวตถใดวตถหนงบนชนงานแลวจงทำาการเชอมโยงไป ใหคลก ขวาทวตถนน แลวเลอก Script>Browser/Network>getURL(…) ดงภาพ

2. ใสขอมลตามตองการโดย URL คอ URL ทตองการใหทำาการเชอมโยงไปและ Window คอลกษณะในการเปดการเชอมโยงนน (เลอกไดโดยคลกทลกศรชลงดานขาง) ทนยมใชม 2 แบบคอ

_self เปดการเชอมโยงทบในหนาเดม_blank เปดการเชอมโยงในหนาใหม

Page : 28 By Miss Pimolphun, MIS Major

Page 29: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

3. เมอใสขอมลทตองการเรยบรอยจะได ดงภาพ

ทดสอบผลทไดโดยกลบไปท Layout View แลวคลกทปม Play ท Tool Bar

การใส Script เกยวกบเสยง

Sound>playSound(…) ใชเมอตองการใสเสยงในเฟรมหรอฉากทตองการ ทำาไดโดย

1. เลอกฉากหรอเฟรมทตองการใสเสยง

เชน เฟรมท 10 ดงภาพ

2. คลกท Add Script เลอก Sound>playSound(…)

3. ทำาการ Import ไฟลเสยงทตองการ โดยคลกทปม Import

Page : 29 By Miss Pimolphun, MIS Major

Page 30: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax

เลอกเสยงทตองการแลวคลกทปม Open ไฟลเพลงททำาการ Import

จะขนมาอยใน list ดานลาง ดงภาพ

4. เลอกไฟลเสยงทตองการ จะแสดงแถบสเทา และชอไฟลเสยงนนจะแทรกอยใน Script และจะมสญลกษณ ทเฟรมททำาการเลอกไว

5. ทดสอบผลทไดโดยคลกทปม Play ท Tool Bar

Page : 30 By Miss Pimolphun, MIS Major

Page 31: การนำไปใช้งานในโปรแกรม Marcromedia …paisanme.com/km_files/swishmax.doc · Web viewโดย คณาจารย สาขาว ชาระบบสารสนเทศเพ

เอกสารประกอบภาคปฏบต E-commerce Week 7 การใชโปรแกรม SWiSHmax การลบ Script

การลบ Script ทำาไดดงน 1. เลอกวตถทตองการลบ Script โดยการคลกทวตถนน2. กดปม Delete ทคยบอรด หรอ คลกทปม Del Script

เอกสารอางอง1. ictc.doae.go.th/html/tutorial/manual/SwishMAX.doc 2. ศกษาเพมเตมดวยตนเองไดท http://lampang.thcity.com/flash/indexo.html

Page : 31 By Miss Pimolphun, MIS Major