Post on 21-Sep-2020
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
ออกแบบตกแตงใหสวยงามไดตามจนตนาการของนกเรยน