การสานปลาตะเพียน

การสร้างภาพเคลื่อนไหว(Animation) แบบที่ 3

ภาพเคลื่อนไหว แบบที่ 3 การเปลี่ยนสีวัตถุ  (วันที่ 15 กค. 53 คาบที่ 3-4 ให้นักเรียนห้อง ม. 2/13 ศึกษาจากวีดิโอ แล้วฝึกปฏิบัติ ส่งผลงานครูโดยเข้า network /teacherlab2/user/public/งานห้อง 2.13 แสดงความคิดเห็นได้ที่ comment)

ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต

ก่อนที่จะนำเว็บไซต์ที่นักเรียนสร้างขึ้นมาไปไว้บนเครื่อง server นักเรียนควรมีความรู้เกี่ยวกับอินเตอร์เน็ตเพื่อเป็นพื้นฐานในารอัพโหลดไฟล์ที่นักเรียนสร้างขึ้นสู่อินเตอร์เน็ต

อ่านเพิ่มเติม

การใส่ JavaScript ลงในเวบเพจ

การใส่ JavaScript ลงในเวบเพจ หลังจากเรียนสร้างเว็บแล้วนักเรียนมาเรียนรู้การหาลูกเล่นใส่ในเว็บเพจของนักเรียนเพื่อดึงดูดความสนใจผู้เยี่ยมชม นักเรียนสามารถหาโค้ดจาวาสริปต์ที่มีให้ใช้ฟรีได้มากมาย เมื่อได้โค้ดมาแล้ว    นักเรียนสามารถใส่ JavaScript ลงใน WebPage ได้โดยการใส่ Tag <script> และ </script> คร่อมคำสั่งต่างๆของ JavaScript และกำหนด Language เป็น JavaScript  ตามตัวอย่าง 

Tag <Script> นี้จะใช้ได้ทั้งในส่วน Head และ Body  ถ้าเป็นการประกาศ ฟังก์ชั่น หรือกำหนดค่าตัวแปรจะ นิยมทำในส่วน <Head>…</Head> แต่ถ้าเป็นคำสั่งให้ทำงานจริงจะใส่ในส่วน <Body>…</Body>

การสร้างภาพกราฟิก

เรื่องที่ 3 ที่ครูจะสอนนักเรียนคือ การสร้างภาพกราฟิกเพื่อนำไปใช้งานในเว็บไซต์ ร่วมกับภาพเคลื่อนไหว (Animation) ที่เราเรียนไปในตอนที่ 2 เพื่อทำให้เว็บไซต์ของเราสวยงามดึงดูดความสนใจจากผู้ชมได้มากขึ้นสรุปประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ
การทำภาพกราฟิกเพื่อใช้ในงานเว็บ มีหลักการเฉพาะแตกต่างไปจากงานสื่อสิ่งพิมพ์ ทั้งเรื่องความละเอียดของภาพ (Resolution) ที่ใช้เพียง 72 dpi หรือจำนวนสีที่ใช้แสดงผล เป็นต้น ดังนั้นการศึกษาถึง ลักษณะเฉพาะในการใช้ PhotoShop สร้างกราฟิกในงานเว็บ จึงเป็นศาสตร์ที่น่าสนใจอีกศาสตร์หนึ่งประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ

  • ใช้ความความละเอียดของภาพ (Resolution) 72 dpi
  • ใช้โหมด RGB ในการสร้างงาน
  • ต้องคำนึงถึง Screen Area ของจอภาพ ดังนี้
    • 640 x 480 pixel
    • 800 x 600 pixel
    • 1024 x 768 pixel
  • เก็บไฟล์ต้นฉบับไว้เสมอ (.psd เมื่อใช้ PhotoShop)
    • เลือกประเภทไฟล์ใช้งานให้เหมาะสม
    • ภาพที่มีสีน้อย, ต้องการความคมชัดต่ำ บันทึกเป็น .gif
    • ภาพที่ต้องการความคมชัดสูงๆ แสดงสีมากๆ บันทึกเป็น .jpg
  • กำหนดลักษณะพิเศษของภาพให้เหมาะสม เช่น การใช้ความสามารถ Interlaced, Progressive, Transparent
  • ภาพที่มีขนาดใหญ่ๆ มาก ควรใช้เทคนิคการตัดภาพเป็นชิ้นเล็กๆ แล้วนำมาประกอบด้วยคำสั่ง HTML

แล้วเราจะมาเรียน ตอนที่ 2 กันต่อไปนะคะ

การสร้างภาพเคลื่อนไหว(Animation) แบบที่ 2

แบบที่ 2 การสร้างภาพคนเดินหน้า

การสร้างภาพเคลื่อนไหว (Animation) แบบที่ 1

บทเรียนที่  2 ที่จะสอนนักเรียนคือ เรื่อง การสร้างภาพเคลื่อนไหว โดยใช้สื่อที่สร้างขึ้นเพื่อช่วยสอนเพิ่มเติมให้กับนักเรียนที่ยังขาดความรู้ความเข้าใจในการใช้โปรแกรมและเครื่องมือต่าง ๆ อีกทั้งช่วยเสริมให้กับนักเรียนที่มีความสนใจได้เข้าใจมากยิ่งขึ้น โดยนักเรียนสามารถนำไปศึกษาได้ที่บ้าน หรือตามสถานที่ต่าง ๆ ที่นักเรียนต้องการ

แบบที่ 1 การสร้างภาพคนเดินข้าง