เทคนิคการสร้าง CAI

เทคนิคการสร้าง CAI (ตอนที่ 1) ขั้นเตรียมงาน


• สร้างไฟล์ใหม่ขึ้นมาแล้วทำการตั้งชื่อเลเอยร์แรกว่า ” bg ” หรือ ” backgroung ”

• คลิกที่เฟรม 1 ทำการใส่ภาพและตัวอักษร ตามที่ได้คิดไว้ จะได้ดังรูป

• คลิก insert layer เพื่อสร้างเลเยอร์เพิ่ม หลังจากนั้นใหสร้างให้เป็น keyframe ทั้ง 5 เฟรม

• ไปที่เมนู Edit เลือกคลิก Insert new symbol ให้เลือกสร้างเป็นซิมโบลแบบ button และวาดรูปสี่่เหลี่ยมมุมโค้ง สีฟ้า ดังภาพ

  

• คลิกที่เฟรม Over แล้วไปคลิกที่รูปสี่เหลี่ยมมุมโค้ง เปลี่ี่ยนสีให้เป็นสีเหลือง

  

• คลิกที่ scene 1 เพื่อกลับไปทำงานหน้าหลัก

• เมื่อไปดูที่พาเนล Library จะมีซิมโบลแบบ Button เกิดขึ้น ซึ่งเราจะเอาไว้เป็น Instance ทำปุ่มต่างๆในสเตจ

มาถึงขึ้นตอนนี้แล้วเราก็จะได้ส่วนของการเตรียมงานในการสร้าง CAI เบื้องต้นไว้แล้วครับ สามารถไปดูตอนต่อไปได้เลยครับ

  • เทคนิคการสร้าง CAI (ตอนที่ 2) ขั้นสร้างงานเนื้อหา


    • หลังจากที่ได้เตรียมงานขั้นต้นไว้แล้ว เราก็มาเริ่มสร้างบทเรียนกันเลย ทำการสร้างเลเยอร์เพิ่มขึ้นอีก 2 เลเยอร์ โดยตั้งชื่อว่า content และ menu ตามลำดับ ให้เลเยอร์ content มีคีย์เฟรมครบทั้ง 5 เฟรมและ menu มีคีย์เฟรมในเฟรมที่ 1-2

    • ให้ลากปุ่มจาก Library มาเรียงกันไว้ในเลเยอร์ content เฟรมที่ 1 ดังภาพ

    • พิมพ์ชื่อ บทเรียนที่ 1-5 ไว้ในเฟรมที่ 1 ของเลเยอร์ Menu

    • เพิ่มเลเยอร์อีก 1 เลเยอร์ โดยตั้งชื่อว่า control และ มีคีย์เฟรมในเฟรมที่ 1-2

    • ลากปุ่มมาใส่อีกสองปุ่ม ในเฟรมที่ 2 ของเลเยอร์ี control และตั้งชื่อตามรูปด้านล่าง

    • ใส่ข้อมูลในเฟรมที่ 2 ในเลเยอร์ content

    • ใส่ข้อมูลในเฟรมที่ 3 ในเลเยอร์ content

    • ใส่ข้อมูลในเฟรมที่ 4 ในเลเยอร์ content

    • ใส่ข้อมูลในเฟรมที่ 5 ในเลเยอร์ content

    • จบขึ้นตอนการสร้างเนื้อหาบทเรียน ต่อไปก็จะเป็นการใส่คำสั่งเพื่อให้บทเรียนทำงานได้อย่างสมบูรณ์ ด้วย Action Script (AS) โดยเราจะใช้ AS2.0 ไปดูกันได้ในตอนที่ 3 เลยครับ

    เทคนิคการสร้าง CAI (ตอนที่ 3) ใส่คำสั่ง AS


    • ตอนนี้จะเป็นการใช้คำสั่ง AS2.0 ให้บทเรียนครับ เรามาเริ่มกันจาก เพิ่มเลเยอร์ขึ้นมาอีก 1 เลเยอร์ โดยตั้งชื่อว่า as และให้สร้างคีย์เฟรมทั้งหมด 6 Keyframe (วิธีใส่คำสั่ง / คำสั่งพื้นฐาน)

    • จากนั้นเปิดพาเนล Action Script แล้วใส่คำสั่งที่คีย์เฟรม 1-5 ของเลเยอร์ as ตามรูปด้านล่าง

     

    • ส่วนคีย์เฟรม 6 ของเลเยอร์ as ให้ใส่คำสั่ง

    • จากนั้นเราจะใส่คำสั่งให้กับปุ่มทุกปุ่มตามนี้ครับ โดยการใส่ก็ให้ไปคลิกที่ตัวปุ่มก่อนะครับ แล้วค่อยกด F9 เปิดหน้าต่างเพื่อใส่ AS มารถดูวิธีการใส่ Action Script ได้ที่นี่ >>> วิธีใส่คำสั่ง AS

    • เริ่มจากปุ่มบทเรียนที่ 1

    • ปุ่มบทเรียนที่ 2

    • ปุ่มบทเรียนที่ 3

    • ปุ่มบทเรียนที่ 4

    • ปุ่มกลับสู่หน้าหลัก

    • และสุดท้ายปุ่มออกจากโปรแกรมหรือบทเรียน

    • เท่านี้ก็เป็นอันเสร็จสิ้นสมบูรณ์สำหรับตัวอย่างการออกแบบ บทเรียนคอมพิวเตอร์ช่วยสอน CAI ด้วย โปรแกรม Flash ซึ่งหากท่านเข้าใจจะสามารถนำไปประยุกต์ใช้ได้ในการสร้าง CAI ที่มีเนื้อหา ภาพ รายละเอียด ที่เยอะกว่านี้

    ตัวอย่าง บทเรียนช่วยสอน CAI
    (ปุ่มออกจากบทเรียน จะออกจริงได้ก็ต่อเมื่อนำออกไปใช้นอกเว็บ)

    ดาวน์โหลดไฟล์ตัวอย่าง >>> Download

    ******************************************

||แสดงความคิดเห็นผ่าน Facebook||


ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *