1

ใบความรท 1

ความรเกยวกบการท าหนาเมนแบบ Animation

ปจจบนมโปรแกรมหลากหลายทใชส าหรบสรางพนหลงในหลายรปแบบ และพนหลงทจะใชเปนหนาเมนหลกควรมความสวยงามสะดดตา เมนทใชกควรมความสวยงามเหมาะดวยเชนกน ดงนนหากหนาเมนมลกษณะเปนปมหรอภาพทเคลอนไหวไดกจะชวยท าใหหนาเมนทใชในการน าเสนอนนโดดเดนและนาสนใจ หนาเมนแบบ Animation ทจะแนะน าในเลมน ไดแก

1. เมน Animation แบบสไลด 2. เมน Amimation แบบกงหน 3. เมน Animation แบบชงชา 4. เมน Animation แบบอลบมภาพ 5. เมน Aniamtion แบบมอลากวางสการคลก

สงทวางแผนกอนการสรางเมนแบบ Animation มดงน 1. ออกแบบหนาเมน 2. เลอกเครองมอ Shape มาวาดภาพ 3. ก าหนดลกษณะการเคลอนไหว 4. ก าหนดการเชอมโยง (Link)

(อยาลมค านงถงเนอหาดวยวาเกยวกบเรองอะไรกอนการสรางหนาเมน)

นาสนใจมากๆ เลยใชไหมคะ

ถาอยางนนเราไปเรยนร

การออกแบบในใบความรท 2

กนเลยดกวานะคะ

2

ใบความรท 2

การออกแบบเมน Animation แบบสไลด

การออกแบบเมน Animation แบบสไลด เปนการสรางเมนทคลายๆ กบการก าหนด

ปมเมนบนหนาเวบไซต คอเมอน าเมาสไปคลกทเมน จะปรากฏแถบเมนเคลอนสไลดออกมา

ขนตอนการสรางเมน Animation แบบสไลด

1. ออกแบบหนาเมนใหเหมาะสมกบหวขอเรองทท า เชน การอนรกษ

ทรพยากรธรรมชาต กควรออกแบบใหสบายตาและเปนธรรมชาต

2. ก าหนดใหมรศมหมนเปนล าแสงเหนอค าวา “การอนรกษ”

3. ก าหนดใหใบไมขยบและรวง

4. ก าหนดใหดอกไมใบไมพลวลม

3

5. ออกแบบปมเมนเพอใหมเมนสไลดออกมาเพอคลกชม

6. พมพชอเมน จากนนจดกลมแตละเมน ก าหนด Animation ใหเลอนลง

ทละเมนโดยอตโนมต

4

7. ก าหนด Link ใหแตละเมน โดยการคลกเมาสคลมชอเมน

8. คลกเมน Insert เลอกเมนไอคอน Hyperlink เพอก าหนดการลงค

9. คลกก าหนดการลงคภายในเพอก าหนดการคลกไปยงหนาทตองการตามเมน

1

2

3

ไมยากเลยใชไหมคะเดกๆ ครเชอวาทกคนท าไดคะ

5

แบบฝกปฏบตท 1 คลกเมนสไลด Select

ค าชแจง ใหนกเรยนออกแบบหนาเมน Animation

แบบสไลดเมน เกยวกบเรอง ฝนเทยม โดยก าหนดเมนใหดงน

บดาแหงฝนเทยม

ฝนเทยมคออะไร

ขนตอนการท าฝนเทยม

วดโอการท าฝนเทยม

หมายเหต นกเรยนสามารถใชภาพประกอบบางสวนจากอนเตอรเนตได

6

ใบความรท 3

การออกแบบเมน Animation แบบกงหน

การออกแบบเมน Animation แบบกงหน เปนเทคนคพเศษทมกนยมใชในการ

น าเสนอขอมลดวยโปรแกรมไมโครซอฟตพาวเวอรพอยท เพราะเปนการสรางเมนทมความ

สวยงาม มความสดใส และกลมกลนกนอยางลงตว การออกแบบเมนแบบกงหนน

เหมาะกบการน าเสนอทตองการความตระการตา หรอเฉพาะงาน

ขนตอนการสรางเมน Animation แบบสไลด

1. ออกแบบหนาเมนใหเหมาะสมกบหวขอเรองทท า เชน พลงงานทดแทน

ควรออกแบบใหมองคประกอบทสอถงพลงงานทดแทนตาง ๆ

ก าหนดสพนหลงจากการแทรกภาพ แทรกภาพมาวางประกอบ

7

2. น าเครองมอ Shape มาวาดภาพฐานกงหน

3. น าเครองมอ Shape รปรางสเหลยม มาวาดหนาตางปรบสเปนสขาว

8

4. น าเครองมอ Shape เครองหมายบวก มาวาดเปนกานกงหน

และวงกลม มาวาดทบ

5. น าเครองมอ Shape รปรางสเหลยมขาวหลามตด มาวาดใบกงหน

9

6. คลกขวาทใบกงหน พมพขอความทจะก าหนดเปนหวขอเมน

7. คลกใบกงหนและกานกงหนทกชน จากนนด าเนนการจดกลมเพอเตรยม

ส าหรบการท า Animation

8. คลกเมน Animation เลอกโหมด Emphasis เลอก Spin

พลงงาน

แสงอาทตย

พลงงาน

น า พลงงาน

ลม

ความ

ส าคญ

10

9. คลก Effect Options… ทชอง Animation pane เพอก าหนดคณลกษณะ

10. ก าหนด Link ใหแตละเมน โดยการคลกเมาสคลมชอเมน

11. คลกเมน Insert เลอกเมนไอคอน Hyperlink เพอก าหนดการลงค

12. คลกก าหนดการลงคภายในเพอก าหนดการคลกไปยงหนาทตองการตามเมน

1

2

3

11

แบบฝกปฏบตท 2 กงหนเมน

ค าชแจง ใหนกเรยนออกแบบหนาเมน Animation

แบบกงหน เกยวกบเรอง กงหนน าชยพฒนา โดยมเมนดงน

ผคดคน

คณสมบต

วธการท างาน

รางวล

12

ใบความรท 4

การออกแบบเมน Animation แบบชงชา

การออกแบบเมน Animation แบบชงชา เปนเทคนคพเศษทมกนยมใชในการน าเสนองานทตองการความตระการตา สวยงาม และสดใส เมนแบบชงชานเหมาะสมทจะน าไปใชประกอบการน าเสนอขอมลเกยวกบประเพณตางๆ ของไทย ดงนนหากนกเรยนสามารถท าได นกเรยนกจะสามารถน าไปประยกตใชกบงานหลายๆ งานไดอยางมประสทธภาพ

ขนตอนการสรางเมน Animation แบบชงชา

1. ออกแบบหนาเมนใหเหมาะสมกบหวขอเรองทท า เชน ประเพณลอยกระทง ควรออกแบบใหมองคประกอบทสอถงงานลอยกระทงอยางชดเจน ซงอาจเลอกภาพเกยวกบลอยกระทงจากอนเตอรเนตมาใชประกอบฉากได

13

2. เลอกเครองมอ Shape รปสามเหลยม มาวาดภาพเพอเปนเสาชงชา

(วาดภาพตามแบบปรบมมและสตามแบบ) (รวมรปรางเพอเปนเสาชงชาแลวจดกลม)

3. เลอกเครองมอ Shape รปเครองหมายบวก มาวาดแกนชงชา และ รปราง 10 เหลยม มาวาดวงลอมของชงชา

4. เลอกเครองมอ Shape รปแปดเหลยมและดาวมาประกอบแกนกลาง และ วาดวงกลมมาลอมรอบเพอใหชงชาดมมตและสวยงามมากขน

14

5. เลอกเครองมอ Shape มาวาดภาพ 6 เหลยม เพอวาดกระเชาชงชา

โดยวาด 2 รปซอนกนดงภาพ จากกนนคลกทรปกระเชาทง 2 รปแลวด าเนนการจดกลม

6. ด าเนนการคดลอกกระเชาชงชา แลววางตามต าแหนงทตองการ

7. ปรบเปลยนสใหสวยงามตามความตองการ

15

8. กด Ctrl + คลกทกระเชาทกกระเชา

9. คลกทรปวงลอกระเชา จากนนเลอกเมน Animation เลอกโหมด Emphasis

เลอก Spin เพอปนวงลอ

10. ก าหนด Effect Options ท Animation pane เพอใหวงลอหมนตลอดเวลา

16

11. คลกทกระเชาชงชา เลอก Animation เลอกโหมด Motion Paths

เลอก Shapes เพอก าหนดกระเชาใหหมนตามวงลอชงชา

12. ก าหนด Effect Options ท Animation pane เพอใหกระเชาชงชา

หมนตามวงลอตลอดเวลา

17

13. คลกลากเสนประของกระเชาชงชาทละกระเชา ลากใหลอมรอบวงลอ 14. คลกทหวลกศร แลวลากจดเรมตนของกระเชาใหตรงกบกระเชา ดงภาพ

15. กด F5 เพอทดสอบการหมนของกระเชาและวงลอ จากนนปรบใหสมบรณ

16. ก าหนด Link ใหแตละเมน โดยการคลกเมาสคลมชอเมน

17. คลกเมน Insert เลอกเมนไอคอน Hyperlink เพอก าหนดการลงค

18. คลกก าหนดการลงคภายในเพอก าหนดการคลกไปยงหนาทตองการตามเมน

1

2

3

18

แบบฝกปฏบตท 3 ชงชาเมน

ค าชแจง ใหนกเรยนออกแบบหนาเมน Animation

แบบชงชา เกยวกบเรอง ประเพณไทย โดยมเมนดงน

ภาคกลาง

ภาคเหนอ

ภาคตะวนออกเฉยงเหนอ

ภาคใต

19

ใบความรท 5

การออกแบบเมน Animation แบบภาพ

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

ขนตอนการสรางเมน Animation แบบภาพ

1. ออกแบบหนาเมนใหชดเจน สวยงาม และเหมาะสมกบหวขอเรองทจะน าเสนอ เชน พระอจฉรยภาพ รชกาลท 9 หนาเมนควรออกแบบใหยงใหญสวยงาม

20

2. ด าเนนการวางภาพตามต าแหนงทตองการเพอใหผใชเลอกคลกเขาสเนอหาตางๆ

13. กด Crtl + คลกทเมนภาพทกเมนเพอก าหนดใหเมนภาพมเทคนคเคลอนไหว

โดยใหเสนขอบเปลยนสสลบกนไปเรอยๆ

14. เลอกเมน Animation แลวเลอกโหมด Emphasis เลอก Line Color

21

15. คลกก าหนด Effect Option… ทหนาตาง Animation Pane เพอก าหนด

คาใหกบเมนภาพทเลอก

16. คลกทเมนทละเมนเพอก าหนดการหนวงเวลาในการเลนใหแสดงออกทละเมน

17. ก าหนดคาการหนวงเวลาเลนใหเลนชากวาเมนกอนหนา ให Delay

22

18. คลกทเมนภาพเพอก าหนด Link ใหแตละเมน

19. คลกเมน Insert เลอกเมนไอคอน Hyperlink เพอก าหนดการลงค

20. คลกก าหนดการลงคภายในเพอก าหนดการคลกไปยงหนาทตองการตามเมน

( ท าเหมอนกนทกเมนภาพ )

21. กดปม F5 เพอชมการน าเสนอและปรบปรงใหสวยงามตามความตองการ

1

2

3

เชญชวนนกเรยนทกคน

ไปท าแบบฝกทกษะกน

เลยดกวาคะ

23

แบบฝกปฏบตท 4 เมนภาพ

ค าชแจง ใหนกเรยนออกแบบหนาเมน Animation

แบบเมนภาพ เกยวกบเรอง เทศกาลไทย โดยมเมนดงน

เทศกาลสงกรานต

เทศกาลปใหม

เทศกาลตรษจน

เทศกาลกนเจ

24

ใบความรท 6

การออกแบบเมน Animation แบบปมไอคอน

การออกแบบเมน Animation แบบปมไอคอน เปนการออกแบบทไมยากแตตองวางแผนใหเหมาะสมสวยงาม เพราะหากเลอกปมเมนไมดจะท าใหหนาสไลดดรกตาและ ไมนาสนใจ ซงการออกแบบเมน Animation แบปมไอคอนนจะเปนสวนหนงทชวยให งานน าเสนอทมเรองราวทเปนทางการดมสสนและนาสนใจ

ขนตอนการสรางเมน Animation แบบปมไอคอน

1. ออกแบบหนาเมนใหชดเจน สวยงาม และเหมาะสมกบหวขอเรองทจะน าเสนอ

เชน การน าเสนอเกยวกบ เรองเศรษฐกจพอเพยง

25

2. ก าหนด Animation ใหกบปมเมน โดยการคลกทเครองมอ Shape เลอกรปดาว มาวาดเพอจะก าหนดใหดาวประกายแสงบนพนหลงตามต าแหนงทเหมาะสม

3. ก าหนด Animation ใหกบแสงดาวโดยคลก Animation เลอกโหมด Emphasis

เลอก Pulse เพอใหแสงดาวกะพรบ

4. ก าหนด Effect Option ท Animation Pane ใหแสงดาวกะพรบตลอดเวลา

26

5. คลกทปมเมนทกปม จากนนคลกเมน Animation เลอกโหมด Empasis

เลอก Fill color เพอก าหนดใหปมเมนเปลยนสได

6. ก าหนด Effect Option.. เพอใหมการไลเปลยนสตลอดเวลา

7. คลกทปมเมนทละปมแลวก าหนดเวลาการเลนใหมระยะหางกน เพอใหปมไล

เปลยนสไมพรอมกน ทชอง Duration

27

แบบฝกปฏบตท 5 เมนแบบปมไอคอน

ค าชแจง ใหนกเรยนออกแบบหนาเมน Animation

แบบปมไอคอน เกยวกบเรอง ไมโครซอฟตออฟฟศ โดยมเมนดงน

Microsoft Word

Microsoft Excel

Microsoft Powerpoint

Microsoft Accress

ออกแบบตกแตงใหสวยงามไดตามจนตนาการของนกเรยน