วิธีการทำ CAI

posted on 16 Sep 2009 16:52 by g-gang

การสร้างรูปภาพ และ ตัวหนังสือ

    รูปภาพ (Graphics) และ ตัวหนังสือ (Text) เป็นสื่ออันดับแรกที่จะทำให้ผู้เรียนเข้าใจในเนื้อหาของบทเรียน ไม่ว่าเครื่องมือของโปรแกรมประยุกต์ตัวไหนก็จะต้องมีความสามารถในการสร้างรูปภาพและข้อความได้

ก่อนอื่นจำเป็นที่จะต้องตกลงเบื้องต้นในการที่จะออกแบบงานของท่านต่อไปคือ

1. ความหมายของการเรียกใช้คำสั่ง จะเรียกในรูป เมนูหลัก/เมนูรอง/เมนูย่อย ตามลำดับลงไปดังรูปแบบต่อไปนี้[Menu] / [Sub Menu] / [Under submenu]

ตัวอย่างเช่น “Menu/File/New File”หมายถึง การเปิดไฟล์ใหม่โดยใช้คำสั่ง New File จากเมนู File

รูปที่6. แสดงการเรียกคำสั่ง

2. กดเมาส์ (Press) หมายถึงกดแช่เมาส์ปุ่มซ้าย

3. ลาก ปล่อย ( Drag – Drop) หมายถึงกดเมาส์ที่ Objects แล้วลากไปยังตำแหน่งที่ต้องการแล้วปล่อยเมาส์

4. คลิกเมาส์ ( Click) หมายถึง การกดเมาส์ปุ่มซ้ายครั้งเดียว

5. ดับเบิ้ลคลิก (Double Click) หมายถึง กดเมาส์ปุ่มซ้าย 2 ครั้งติด ๆ กัน

6. คลิกขวา ( Right Click) หมายถึง กดเมาส์ปุ่มขวาเพียง 1 ครั้ง

 

ไอคอนที่ใช้เพื่อการวาดรูป และใช้เขียนข้อความ

ไอคอนที่ใช้เพื่อการวาดรูป และใช้เขียนข้อความ จะมีอยู่ 2 ตัว คือ

  - ไอคอน Display    

  - ไอคอน Interaction   

     ไอคอนทั้งสองจะมีความแตกต่างกันตรงที่ ไอคอน Interaction จะเป็นทางแยก (Branching)ของ Flow Line ได้ ส่วนไอคอน Display จะนำเสนอเป็นแบบ Linear บน Flow Line รายละเอียดของไอคอน Interaction จะกล่าวต่อไป

 

รูปที่7. แสดงทางเดินของ

 Flow Line แบบ Linear และBranching

 

การสร้างรูปภาพ (Graphics Editor)

ในส่วนของการสร้างรูปภาพนี้ มีอยู่ 2 แบบ คือ

1. Drawing หมายถึง วาดขึ้นด้วยเครื่องมือในโปรแกรมนี้

2. Import หมายถึง นำภาพจากภายนอกมาใช้งาน

 

ตัวอย่างที่ 1 การวาดภาพ (drawing)

งานที่ต้องทำให้ชื่อว่า แท่งเทียนดังรูปที่8 โดยวาดในไอคอน Display

รูปที่8. รูปแท่งเทียน

วิธีการวาด

1. เข้าสู่โปรแกรม Authorware
2. เปิดไฟล์ใหม่ด้วยคำสั่ง Menu/File/New File จะปรากฏหน้าต่างว่าง ๆมีเส้น Flow Line 1 เส้นเราเรียกหน้าต่างนี้ว่า หน้าต่างออกแบบ

3. จากนั้นลากไอคอน Display แล้วปล่อยลงบนเส้น Flow Line โปรแกรมจะตั้งชื่อให้ไอคอนนี้ว่า“Untitled” (ไม่มีชื่อ) ให้พิมพ์เปลี่ยนชื่อใหม่เป็น แท่งเทียนดังรูปที่9.

รูปที่9. แสดงการวางไอคอน Display

และการเปลี่ยนชื่อของไอคอน Display

 

4. ให้ท่านดับเบิ้ลคลิกที่ไอคอน Display ที่ชื่อเปลวเทียน ที่ลากมาไว้ จะปรากฏหน้าจอที่เรียกว่าPresentation Windows พร้อมกับกล่องเครื่องการวาด (Tool Box) ที่ใช้ในการวาดภาพมาให้ ดังรูปที่10.

รูปที่10. แสดงหน้าจอของ Presentation Windows

 

เริ่มสร้างงานที่ชื่อว่า แท่งเทียน

1. ใช้เครื่องมือ Oval Tool    (คลิกที่ Oval Tool) เขียนวงรีโดยกดเมาส์(ซึ่งตอนนี้เคอร์เซอร์ตอนนี้จะเป็นรูป ( + ) ลากไปบนพื้นที่ Presentation Windows จะได้รูปวงกลมหรือวงรีตามที่เรา   ต้องการ และหากต้องการให้เป็นวงกลมจริง ให้ทำการกดคีย์Shift แล้วจึงกดเมาส์ลากไป                                                  

หลังจากนั้นปล่อยเมาส์จะปรากฏสี่เหลี่ยมเล็ก ๆ ล้อมรอบรูปวงรี 8 รูป ดังรูปที่11. ซึ่งแสดงว่า Object นี้กำลังถูกเลือกให้ทำงานอยู่   ท่านสามารถปรับเปลี่ยนขนาด เติมสีหรือคัดลอก เคลื่อนย้ายได้  ในที่นี้ให้ท่านวาดรูปวงรีตามรูปที่11.                                  

รูปที่11. แสดงการวาดวงรีโดยการใช้เครื่องมือ Oval Tool

 

    2. ใช้เครื่องมือ Polygon Tool    วาดยอดเปลวเทียน  

    3. เมื่อทำการวาดเสร็จให้ท่านรวม Object ทั้งสองเข้าด้วยกัน (Group Object)ทำได้ดังนี้                      

   3.1 คลิกเมาส์ที่วงรี และกดคีย์ Shift แล้วคลิกที่ยอดเปลว    เทียนหรือเลือก Pointer Toolแล้วกดเมาส์ ลากสี่เหลี่ยมล้อมรอบ  Object ทั้งสอง และObject ทั้งสอง จะถูกเลือกสังเกตได้ที่จุดสี่   เหลี่ยมเล็ก ๆ ปรากฏล้อมรอบ Object ทั้งสองดังรูปที่12.          

รูปที่12. แสดงเปลวเทียน และการรวม Object

     3.2 รวม Object จาก “Menu/Modify/Group” หรือ ใช้ Hot Key (Ctrl + G) และถ้าต้องการยกเลิกการรวมกลุ่มให้ใช้คำสั่ง “Menu/Modify/UnGroup” หรือ ใช้ Hot Key (Ctrl + Shift +G)      4. เติมสีทั้งเส้นรอบวง และสีพื้นภายใน Object ให้เป็นสีเดียวกันคือสีเหลือง โดยให้ท่านดับเบิลคลิกที่ Oval Tool จะปรากฏไดอะล็อกบ็อกซ์ตารางสีขึ้นดังรูปแล้วให้ท่านคลิกที่เครื่องมือรูปดินสอ    แล้วคลิกที่ช่องสีเหลือง จากนั้นให้คลิกที่รูป ถังสี  แล้วคลิกที่ช่องสีเหลือง(ช่องเดิม) ก็จะได้รูปเปลวเทียนสีเหลืองดังรูป 13.

รูปที่13. แสดงการลงสีให้กับ Object

 

   5. สร้างเปลวเทียนชั้นใน สามารถทำได้ดังนี้

   5.1 คลิกเมาส์ที่เปลวเทียนสีเหลืองเพื่อเลือก Object
   5.2 คัดลอก Object โดยใช้คำสั่ง “Menu/Edit/Copy”

   5.3 วาง Object โดยใช้คำสั่ง “Menu/Edit/Paste” จะปรากฏ Object ขึ้นมาอีกหนึ่งObject แล้วทำการเปลี่ยนสีให้เป็นสีแดง

   6. ทำการย่อขนาดเปลวเทียนสีแดง

   6.1 เลือก Object สีแดง

   6.2 กดคีย์ Shift ค้างไว้ แล้วใช้เมาส์คลิกที่สี่เหลี่ยมเล็ก ๆ กดค้างเช่นกันแล้วทำการลากเมาส์ให้รูปเปลวเทียนให้เล็กลงดังรูปที่14.

รูปที่14. แสดงการทำเปลวเทียนชั้นใน

งานการสร้างลำเทียน

รูปที่15. แสดงการสร้างรูปลำเทียน

 

1. ใช้เครื่องมือ Rectangle Tool สร้างสี่เหลี่ยมผืนผ้าในแนวตั้ง

2. ใช้เครื่องมือ Oval Tool ทำวงรีตามแนวนอนให้มีความกว้างเท่ากับความกว้างของรูปสี่เหลี่ยมผืนผ้าให้อยู่ด้านบนสุดดังรูป

3. ทำการคัดลอกเพิ่มอีกหนึ่งวง แล้วลากมาไว้ข้างล่างของรูปสีเหลี่ยมดังรูป

4. ทำการรวม Object
5. ทำการเติมสีให้เป็นสีเหลืองตามรูป

งานสร้างไส้เทียน

รูปที่16. แสดงการสร้างไส้เทียน

 

   1. ใช้เครื่องมือ Diagonal Line Tool ลากเส้นในแนวตั้งขยายเส้นให้โตด้วยการใช้เมาส์ดับเบิ้ลคลิกที่ Line Tool จะปรากฏไดอะล็อกบ็อกซ์ ดังรูป เลือกขนาดของเส้นตามความเหมาะสม

   2. เติมสีให้กับไส้เทียนให้เป็นสีดำ

งานประกอบแท่งเทียน

   1. ลากไส้เทียนมาไว้บนลำเทียน

   2. ลากเปลวเทียนมาวางทับไส้เทียน ดังรูป

   3. รวม Object ทั้งหมดเข้าด้วยกัน เพื่อความสะดวกในการเคลื่อนย้ายต่อไป

รูปที่17. แสดงการรวมภาพแท่งเทียน

 

ตัวอย่างที่2. การนำภาพจากภายนอกมาใช้ (Import Graphics)

      จากตัวอย่างที่1 แสดงให้ท่านเห็นว่าเราต้องมีความพยายามอย่างสูงในการที่จะได้มาซึ่งรูปภาพ และมันก็ยากมากในกรณีที่บางท่านไม่มีทักษะในการวาดภาพ ดังนั้นบางครั้งเราจำเป็นที่จะต้องหารูปที่ทำสำเร็จแล้วมาใส่ใว้ในงานของเราเช่นรูปที่เราไม่สามารถวาดได้เอง เช่น รูปสัตว์ วิวเป็นต้นดังนั้นเราจำเป็นที่จะต้อง Import มาจากแหล่งภาพแหล่งอื่นเช่นจากโปรแกรม Adobe PhotoShop , CorelDraw จาก Scanner ได้

การนำเข้ารูปภาพ (Import Graphics)

รูปที่18. แสดงการวางไอคอน Display ตัวที่สอง

 

   1. ลากไอคอน Display ตัวที่2 มาวางไว้บน Flow Line ตั้งชื่อว่า Import

   2. เปิด Presentation Windows เลือกคำสั่งที่“Menu/File/Import”

รูปที่19. แสดงการใช้คำสั่ง Import

 

    จะมีไดอะล็อกบ็อกซ์ Import which file? ปรากฏขึ้น ให้เลือกรูปที่ท่านต้องการ (เวลาที่ท่านทำ CAI ท่านจำเป็นจะต้องเตรียมรูปภาพเอาไว้ก่อน แล้วท่านทำตามสคริปต์ หรือ สตอรีบอร์ดของท่าน) ให้ท่านเลือกไฟล์ที่ท่านต้องการ

รูปที่20. ไดอะล็อกบ็อกซ์ Import which file

 

3. เมื่อท่านได้ภาพที่ต้องการ ก็คลิกที่ปุ่ม Import รูปภาพก็จะนำมาสู่ PresentationWindows ของเราดังรูป

  • รูปที่21. ภาพที่เราต้องการที่ Import เข้ามา

edit @ 16 Sep 2009 18:11:53 by g-gang

edit @ 16 Sep 2009 18:13:04 by g-gang

edit @ 16 Sep 2009 18:14:15 by g-gang

edit @ 16 Sep 2009 18:17:03 by g-gang

Comment

smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry ???????????????   ??????????????????
smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry ???????????????

Tweet

Nice info about graphic

#1 By Creative Logos Gallery (110.37.28.132) on 2010-11-05 01:10