แผนการจดการเรยนรท 9 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ระดบชน มธยมศกษาปท3 ภาคเรยนท 2 ปการศกษา 2552 รหสวชา ง30200 รายวชา คอมพวเตอร สาระท1 เรอง การใชโปรแกรม adobe ImageReady CS เวลา 6 ชวโมง สปดาหท 9 สอนวนท 21-23 ธนวาคมพ.ศ. 2552 คาบท 1, 2, 1,2,1,2 ผสอน นาย เกยรตศกด แสงชา โรงเรยนโกสมวทยาสรรค

มาตรฐานการเรยนร มฐ ง 3.1 เขาใจธรรมชาตและกระบวนการเทคโนโลย ใชความร ภมปญญาจนตนาการ

และความคดอยางมระบบ ในการออกแบบ สรางสงของ เครองใช วธการ เชงกลยทธตามกระบวนการเทคโนโลย สามารถตดสนใจ เลอกใชเทคโนโลย ในทางสรางสรรคตอชวต สงคม สงแวดลอม โลกของงานและอาชพ

มฐ ง 4.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคน ขอมลการเรยนรการสอสาร การแกปญหา การทางานและอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม

มฐ ง 5.1 ใชเทคโนโลยในการทางาน การผลต การออกแบบ การแกปญหา การสราง งาน การสรางอาชพสจรต อยางมความเขาใจ มการวางแผนเชงกลยทธ และมความคดสรางสรรค

ตวชวด มฐ ง 2.1(1) อธบายระดบของเทคโนโลย

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

สาระส าคญ

การสรางเวบเพจเปนงานหนงทจะตองใชงานกราฟกในการตกแตงชนงานใหสวยงามนาสนใจยงขน โปรแกรม Adobe PhotoShop CS เปนโปรแกรมหนงทสนบสนนงานดานเวบเพจโดยสามารถสรางภาพเคลอนไหว ปม Button ทใชโตตอบกบผใชในลกษณะตางๆ เชน แบบ Image map,Slice และแบบ Rollover เปนตน

จดประสงคการเรยนร(K-P-A) 1. นกเรยนสามารถสลบการใชงานระหวางโปรแกรม Adobe PhotoShop CS และ Adobe

ImageReady ได 2. นกเรยนสามารถบอกสวนประกอบของโปรแกรม Adobe ImageReady ได 3. นกเรยนสามารถสราง Image Map และ สราง Slice ได 4. นกเรยนสามารถสรางภาพเคลอนไหวดวยพาเลต Animation ได

สาระการเรยนร

1. สวนประกอบของโปรแกรม Adobe ImageReady 2. การสราง Image Map และ การสราง Slice 3. สรางภาพเคลอนไหวดวยพาเลต Animation

กจกรรมการเรยนร 1.ขนเตรยมการ

1. ครกลาวถงการสรางเวบเพจเปนงานหนงทจะตองใชภาพกราฟกในการตกแตงชนงาน ใหสวยงามนาสนใจยงขน โปรแกรม Adobe ImageReady 7.0 เปนโปรแกรมหนงทสนบสนนงานดานเวบเพจ โดยสามารถสรางภาพเคลอนไหว ปม Button ทใชโตตอบกบผใชในลกษณะตางๆ เชน แบบ Image map, Slice และแบบ Rollover เปนตน 2.ขนด าเนนการ

2.1 ครอธบายการใชงานโปรแกรม Adobe ImageReady เบองตน โดยการอธบาย เตลบารเมนบารออปชนบาร พาเลตตางๆทลบอกซใหนกเรยนดเปนตวอยาง แลวใหนกเรยนทาตาม

2.2 ครนาภาพตวอยาง เพออธบายและสาธตการสรางภาพเคลอนไหวใหสวยงาม 2.3 ใหนกเรยนลงมอปฏบตเปนรายบคคล

3.ขนสรป 3.1 ครและนกเรยนรวมกนสรปขนตอนการเขา/ออกโปรแกรม Adobe ImageReady

สอ/อปกรณ/แหลงเรยนร 1. เครองคอมพวเตอรทตดตงโปรแกรม Adobe ImageReady และเชอมตอระบบอนเทอรเนต 2. จอภาพแสดงผลหนาชนเรยน 3. หนงสอเรยน การใชโปรแกรมกราฟก 4. ใบความร

การวดและประเมนผล 1. ใหนกเรยนสรางภาพเคลอนไหวดวยพาเลต Animation

เครองมอการวดและการประเมนผล

1. ภาพทนกเรยนทาการเปลยนแปลงโดยการทาใหเปฯภาพเคลอนไหว เกณฑการประเมนผล

ความสวยงามและความสมจรงของภาพทนกเรยน ทไดทาการสราง พาเลต Animationวามความสวยงามมากนอยเพยงใด

ขอเสนอแนะของผบรหาร/อาจารยพเลยง ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ลงชอ ................................... ครพเลยง (นายชยพฤกษ ศรนาคา) ครชานาญการโรงเรยนโกสมวทยาสรรค บนทกผลหลงการสอน ผลการสอน ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ปญหาและอปสรรค ............................................................................................................................................................. ............................................................................................................................................................. .............................................................................................................................................................

ลงชอ ...................................... ผสอน (นายเกยรตศกด แสงชา)

ขอเสนอแนะของหวหนากลมสาระการงานอาชพและเทคโนโลย ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ลงชอ ............................................ (นายมนตร ศลคณ) หวหนากลมสาระการงานอาชพและเทคโนโลย ขอเสนอแนะของรองผอ านวยการฝายวชาการ ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ลงชอ ............................................ (นายยทธ วงษปญญา) รองผอานวยการฝายวชาการ ขอเสนอแนะของผอ านวยการโรงเรยนโกสมวทยาสรรค ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ลงชอ ............................................ (นายไพจตร ปรวฒนากล) ผอานวยการโรงเรยนโกสมวทยาสรรค

แบบสงเกตพฤตกรรมนกเรยน

ค าชแจง ใหทาเครองหมาย / ลงในชองรายการสงเกตพฤตกรรมทกาหนด

ชนมธยมศกษาปท………โรงเรยน……………..…………ภาคเรยนท………………….…………. บทท……………แผนการสอนท……..เรอง……………………………………………………….. เลขท

ชอ - สกล

รายการสงเกต

สรปผ

ลการ

ประเม

น ผา

น/ไม

ผาน

มควา

มสนใ

จ ใน

เรองท

เรยน

มมาร

ยาท

ใน

การฟ

งและ

พด

มสมา

ธในก

ารฟง

ตอบค

าถาม

ได

ถกตอ

ง

ปฏบต

งานต

าม

ใบงา

นไดถ

กตอง

2 1 0 2 1 0 2 1 0 2 1 0 2 1 0

รวมค

ะแนน

ผลกา

รประ

เมน

เกณฑการใหคะแนน 2 = ด, 1 = ปานกลาง, 0 = ตองปรบปรงแกไข

ลงชอ……………………………………….ผประเมน (..............................................................)

วนท……….เดอน…………………….พ.ศ………………

แบบสงเกตพฤตกรรมการปฏบตงานกลม

กลมท การวางแผนและ

ขนตอนการทางาน การมอบหมายงาน

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

การปฏบตตามแผน และขนตอนปฏบตงาน

ระดบคณภาพ

คะแนน 3 2 1 0 3 2 1 0 3 2 1 0 3 2 1 0 3 2 1 0 1 2 3 4 5 6

รวม

เกณฑการประเมน การใหคะแนนปฏบต พฤตกรรมหรอผลงานปรากฏชดเจน 3 คะแนน พฤตกรรมหรอผลงานปรากฏคอนขางชดเจน 2 คะแนน พฤต กรรมหรอผลงานปรากฏเลกนอย 1 คะแนน ไมไดปฏบตไมมผลงาน 0 คะแนน การตดสนคณภาพ

ชวงคะแนน ระดบคณภาพ 12-15

8-11

4-7

0-3

3 (ดมาก) 2 (ด) 1 (พอใช) 0 (ปรบปรง)

ใบความรท 9

การใชโปรแกรม adobe ImageReady CS

ImageReady เปนโปรแกรมทมาพรอมกบโปรแกรม Photoshop ดงนนเมอเราตดตงโปรแกรม Photoshop โปรแกรม ImageReady จะถกตดตงโดยอตโนมต โปรแกรม ImageReady นนมสวนทคลายคลงกบ Photoshop อยบาง เชน สวนของแถบคาสง และแถบเครองมอ แต ImageReady นนสามารถทางานไดเฉพาะโหมด RGB เทานน เปนโปรแกรมทสามารถสรางภาพเคลอนไหวได Gif Animation (กฟ อนเมชน) คอ ภาพเคลอนไหว ทเกดจากการนารปภาพหลายๆ รปภาพมาแสดงอยางตอเนองกน โดยไฟลทแสดงจะเปน *.gif

การเขาสโปรแกรม ImageReady

การเขาสโปรแกรม ImageReady นนมอย 2 วธ ดวยกน วธ แรกคอ การเขาสโปรกรมจาก Start Menu โดยคลกปม Start>All Programs จากนนเลอก Adobe ImageReady เพอเขาสโปรแกรม หรอวธท 2 คอ เขาสโปรแกรม ImageReady จากโปรแกรม Photoshop โดยคลกปมลางสดของToolbox วงกลมสแดง

สามารถสลบการใชงานกบ Phtoshop กบ Image Ready ไดทหมายเลข 1 และ 2

สวนประกอบตางๆของโปรแกรม

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

เมน(Context Menu) คอ แถบคาสงตางๆทใชในการทางาน เชน กรเปด-ปดไฟล การเซฟ การปรบแตงภาพ และการใชงานฟตเตอร เปนตน กลองเครองมอ(Toolbox)คอกลองรวบรวมเครองมอทใชในการทางาน แถบกาหนดรปแบบของเครองมอ(Tool Option Bar ) คอแถบตวเลอกของเครองมอซงจะปรากฏขน

เมอเลอกใชเครองมอ อยางหนงอยางใดในกลองเครองมอเพอใชในการทางานทสะดวกยงขน พาเลท(Palette) คอพาเลทตางๆทใชในการทางาน เชน พาเลทแปลงไฟต พาเลทสราง Rollover และพาเลทการใชงานเลเยอร เปนตน

สามารถสลบการใชงานกบ Phtoshop กบ Image Ready ไดทหมายเลข 1 และ 2

สวนประกอบของโปรแกรม

1. ไตเตลบาร บอกชอโปรแกรม 5. หนาตางใชสราง Animation 2. เมนบาร 6.หนาตางใชสราง Image Map และ Slice 3. กลองเครอง(Tools Box) 7. หนาตางใชงาน Layer 4. พนทออกแบบงาน

1. ใชตงความเรวการวง ของขอความ 2. ตงใหแสดงวนซ าหรอไม 3. ปมทดสอบการเลน 4. ปมคดลอกเฟรม 5. ปมลบเฟรมทง

การเปลยนภาพเฟรมตอเฟรม

อานคาอธบายพรอมดภาพประกอบ 1.เปดโปรแกรม ImageReady แลวเปดรปทตองการจะเปลยนภาพเฟรมตอเฟรม ในทนใชรปการตนสองรปน 2.คลกเลอกรปการตนรปท 1 แลวไปทเมน Edit เลอก Image Size ดขนาดของรปภาพจดความกวางและความสงของภาพไว

2. ไปทเมน file >> new กาหนดขนาดภาพ ใหเทากบรปการตนแลวคลก OK 3.จากนนใหใชปม move tool (v) ลากภาพการตนมาใสไวในหนากระดาษทเตรยนมไว

จากนนปดภาพทไมใชออกไป

4.จะเหนวามเฟรม 2 เฟรม มLayer ภาพ 2 ayer

5.ใหนกเรยนปรบการมองเหนภาพดงน >>คลกทเฟรมท 1 แลวคลกทLayerภาพบน คลกรปลกตา ใหหายไปเพอซอนภาพบน (เฟรมท 1 จะโชวภาพการตนทอย layer ลาง เฟรมท 2 จะโชวภาพ Layer บน) จะโชว Layer ไหนกเปดตา ไมโชวใหปดตา

6.สวนเฟรมทสองใหคลกทเฟรมทสองแลวคลกเปดตาบนแลวปดตาลางท Layer

7.กดสญลกษณ Play เพอทดสอบการเปดภาพเฟรมตอเฟรม

8.ภาพทไดจะกระพรบเรวเกนไปใหปรบเวลาการแสดงภาพตามเหมาะสม

ในทนครปรบ 0.2 วนาท

การ Save ภาพ Gif ไปใชงาน การ Save งาน ม 2 รปแบบ คอ

รปแบบท 1 การ Save เพอสามารถกลบมาแกไขไดใน Photoshop หรอ Image Ready เพราะเปนนามสกล .psd วธการ save คอ ใหนกเรยนไปทคาสง File เลอก Save as (ใชในกรณทนกเรยน save งานเพอทาเองทบานหรอทโรงเรยน) จากนนเลอกไดรฟทตองการจะบนทก ตงชอไฟลตามตองการแลวคลกปม Save

รปแบบท 2 การ Save เพอนาไปใชจรง และไมสามารถกลบมาแกไขไดใน Photoshop หรอ Image Ready เนองจากเปนนามสกล .gif ซงเปนไฟลภาพ และมขนาดเลกกวา .psd มาก วธการ save คอ ใหนกเรยนไปทคาสง File เลอก Save Optimize as (ใชในกรณ save สงคร) จากนนเลอกไดรฟทตองการจะบนทก ตงชอไฟลตามตองการแลวคลกปม Save ดงภาพอธบายตอไปน

1. หลงจากสรางภาพเคลอนไหวเสรจมวธการSave คอ เลอกเมน File >> Save Optimized As...

ภาพทไดจะเปนนามสกล Gif ซงเปนภาพเคลอนไหว

การเปลยนภาพแบบจางหายหรอปรากฏ

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

จากนนไปทเมน Edit >>Copy แลวไปเมน File >> New แลวไปเมน Edit อกครง เลอก Paste

ปดรปทไมใชออกไปใหเหลอแตรปทเราจะสราง

ขนตอนตอไป

การเปดตาคอการโชวภาพปดตาคอซอนภาพ เฟรมท 2 และ 3 กทาเชนเดยวกน สวนเฟรม 3-5 นกเรยนกคลก ปด-เปด ตาโชวรปการตนดงภาพ และเฟรม 7-9 กเชนเดยวกนโชวรปดงภาพดานลาง

หลงจากนนเราจะลดความจางของภาพโดยปรบคา opacity ท Layer (เฟรมท 1,4,7) ไมตองปรบใหคงไว 100 % เฟรมท 2,5,8 ปรบเหลอ 60 % เฟรมท 3,5,9 ปรบเหลอ 20%

ขนตอนตอไป

จากนนลอง Play ดจะไดผลงานแบบน

การสรางภาพเคลอนไหวแบบTweens (เคลอนท)

แบบTweens คอการเคลอนท 1. เปดไฟลภาพทจะใหเคลอนไหวออกมา

2. คลก File > New เพอกาหนดขนาดงานใหม กาหนดคาตามความสงของภาพเทากบรปทจะนามาสรางภาพเคลอนไหว

สวนความกวางกาหนดใหมลกษณะยาวตามการทจะใหภาพเคลอนทไป ในทนกาหนดเปน Width = 400 pixel , Height =207 pixel เสรจแลวคลกปม OK

จากนน

กาหนดการเปดแสดงภาพเรมจากเฟรมท 1 เปดตาท Layer1 สวน Lyer อนปดตาใหหมด

จากนนนกเรยนลองกด Play จะไดภาพเคลอนไหวแบบTweens ดงภาพดานบน นกเรยนสามารถกาหนดทศการเคลอนทไดหลายอยางตามลกษณะของการตนเชน กระโดด เคลอนจากบนลงลาง ลางขนบน เรากจดเรยงLayerภาพตามทศทางทตองการ

การสรางการตน Animation

จากรปการตนเราจะสรางใหการตน กระดกกระดกไปทางซายและทางขวา มขนตอนดงน

จากนน copy อกสองเฟรม

จากนนเราจะเปลยนถาทางของการตนออกเปนสามทา โดยเฟรมท 1ขยบไปทางซาย เฟรมท 2 อยนง เฟรมทสามขยบไปทางขวา

ปรบหมนภาพใหเอยงไปทางซายเลกนอย

เฟรมท 3 ใหปรบหมนภาพไปทางขวาเลกนอย โดยไปทเมน Edit >>Transform>>Rotate

ลองกด Play ดภาพ จะเหนวาภาพเคลอนไหวแลว