แฟล็ช หรือ แฟล็ท flash ด้วย swish และ swishmax

ปรับปรุง : 2553-10-16 (เพิ่ม slideshow)
ความหมาย
แฟล็ช (Flash หรือ Macromedia Flash) คือ แฟ้มที่มีนามสกุล swf(Shock Wave Flash) เป็น Multimedia file ที่ได้รับการยอมรับอย่างมาก สามารถติดต่อสื่อสารกับผู้ใช้แบบ Interactive ด้วยภาพ และเสียง เดิมมีเพียงโปรแกรมจากค่าย Macromedia เท่านั้นที่ใช้สร้างแฟ้ม swf ปัจจุบันนักพัฒนาได้สร้างโปรแกรม เพื่อใช้สร้าง swf อย่างง่าย และโปรแกรมหนึ่งที่ได้รับความนิยม คือ Swish ใช้งานได้ง่าย แม้จะไม่มีสมบูรณ์เท่า Macromedia Flash แต่ก็ใช้สร้างแฟ้ม swf ได้ดีเป็นที่น่าพอใจ เช่น การใส่ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการใส่ action อย่างง่าย
คำาม - คำตอบ (Questions - Answers)
- mp3soundstream.com เป็นโปรแกรมทำให้ mp3 หรือ wav ถูกเปิดแบบ Streaming #
- คู่มือ SwishMax โดย justusers.net
? ถ้า SwishMax export เป็น .swf แล้วมีปัญหา ได้ พื้นดำ หรือกลับหัว ให้หามาติดตั้งใหม่
? ตัวอย่างปัญหา : การเปิดแฟ้ม .swi ที่สร้างด้วย swishmax 2004.09.10 จะเปิดด้วยรุ่น 2003.09.03 ไม่ได้
? Javascript("alert('Wrong')"); ทดสอบไม่ได้ ต้องทดสอบใน Server เช่น http://127.0.0.1/x.htm
? โดยปกติจะ import .avi, .wmv หรือ .mpg เข้า swish ไม่ได้ ต้องแปลงเป็น .swf ก่อน
? ปัจจุบัน SwishMax คือ รุ่น 3 ขนาดประมาณ 52 MB
การส่งค่าให้กับ flash แบบ 1
<embed src=x.swf width=100 height=80 FlashVars="a=abc&b=def"></embed>
Action Script คือ on (release) { textinswishmax = a + b; }
การส่งค่าให้กับ flash แบบ 2
สร้างแฟ้ม v.txt ไว้ใน Root Directory มีข้อมูลคือ a=5&b=6&c=7
Action Script คือ onLoad()
โดย loadvariables("v.txt","get"); หรือ loadvariables("http://127.0.0.1/v.txt","get");
Action Script คือ on (release) { x.text = a + b + c; }
บทเรียนที่เกี่ยวข้อง
- swishmax(new)
- photoshop
แหล่ง SwishMax
- swishzone.com
แหล่ง Flash MX
- macromedia.com
แนะนำเว็บ
- Buy SwishMax
- Swish Template
- Tutorials.de
- Dictionary
- Create Dynamic
- Loop coding from URL
- SwishTalk
- FreeSwishSite
- Swish-db
- ThaiFlashDev
Converter Tools
- swf to avi
- xml to swf (Gauge,Chart)
$ mp3 to stream
$ mp3 to flash
$ video to flash
$ Multi Converter

    บทนำ (Introduction)
  1. หาโปรแกรม Swish ได้จาก http://www.swishzone.com ซึ่งเป็นโปรแกรมที่ใช้สร้าง .swf หรือ Flash ได้ง่ายจริง ๆ เพื่อแสดงให้เห็นว่าง่าย ผมจึงสร้างบทเรียน เพื่อพิสูจน์ให้นักศึกษาไทยเห็นว่า สร้างงาน multimedia ไม่ได้ยากอย่างที่คิด เพราะเกิดมาผมก็ไม่เคยไปเรียนที่ไหนมาก่อน เช่นกัน ลองผิดลองถูกสัก 20 ชั่วโมง ก็รู้เรื่องเองครับ
  2. กำหนดขนาดของ flash :: เลือก Edit, Properties และเลือก Tab ของ Movie สามารถแก้ไขในส่วนของ width และ height ได้
  3. แฟ้ม swi และ swf ต่างกันอย่างไร :: แฟ้ม swi เป็นแฟ้มของโปรแกรม Swish ทำให้เรียกงานมาแก้ไขใหม่ได้ แต่ swf เป็นแฟ้มที่ใช้นำไปใช้ โดยปกติขนาดของ swf จะเล็กกว่า swi เช่น แฟ้ม lesson0101.swi คือแฟ้มที่โปรแกรม Swish สามารถเรียกมาแก้ไขได้ แต่ lesson0101.swf คือแฟ้มที่ browser นำไปใช้งานแสดงผลจริง
  4. สร้างงานแล้ว จะสร้าง swf อย่างไร :: ให้เลือก File, Export, SWF ก็จะได้แฟ้ม .swf ไปใช้ตามต้องการ
  5. ตัวอย่าง HTML code ที่ใช้เรียก swf
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
      id="lesson0101" width="100" height="30">
      <param name="movie" value="lesson0101.swf">
      <param name="quality" value="high">
      <param name="base" value="">
      <param name="bgcolor" value="#FFFFFF">
      <embed name="lesson0101" src="lesson0101.swf" quality="high" bgcolor="#FFFFFF"
        width="100" height="30"
        type="application/x-shockwave-flash">
      </embed>
    </object>
    หรือ
    <object id="lesson0201">
      <embed name="lesson0201" src="lesson0201.swf" width="100" height="80"
        type="application/x-shockwave-flash">
      </embed>
    </object>
    หรือ
    <object>
      <embed src=lesson0201.swf width=100 height=80></embed>
    </object>
    
  6. กด F5 หมายถึง Insert frame
  7. กด Shift + F5 หมายถึง Delete frame
  8. จุด Place เพื่อสำหรับเก็บ Action แต่ละ Frame แต่ละ Object ได้
  9. Scene ก็คือฉาก เช่นฉากภูเขาก็มีเรื่องราวในภูเขา ฉากทะเลก็มีเรื่องราวในทะเล
  10. Scene ก็คือกลุ่มของ frame ที่มีความสัมพันธ์ในเรื่องเดียวกัน ทำให้ง่ายในการจัดการ
แผนการสอน เตรียมรุ่นใหม่ 2550-03-04 เพื่อ สอน SwishMax สำหรับครู
วันที่ 1
9.00 - 10.30
- ความรู้เบื้องต้นเกี่ยวกับ SwishMax
- ศึกษาส่วนต่าง ๆ ในโปรแกรม
- การแทรกอักษร
- การกำหนด Timeline และ Effect ให้กับตัวอักษร
10.30 - 12.00
- การใช้หลาย Scene
- การใช้หลายวัตถุร่วมกัน
13.00 - 14.30
- การสร้างปุ่ม และเขียน Action
- การใช้ Action : Goto frame, next หรือ previous
- การใช้แฟ้มเสียง และวีดีโอ
14.30 - 16.00
- การสร้างข้อสอบอย่างง่าย
วันที่ 2
9.00 - 10.30
- การเขียนสคริปต์ (Script)
10.30 - 12.00
- การสร้างข้อสอบที่ใช้ตัวแปรเก็บคะแนน
13.00 - 14.30
- การสุ่มข้อสอบ และรายงานผลสอบ
14.30 - 16.00
- ศึกษาการเขียน Puzzle Game
- ศึกษาการเขียน Quiz

    บทเรียนที่ 1.1 :: อักษร 3D spin
    บทเรียนแรก ใช้โปรแกรม Swish สร้างแฟ้ม lesson0101.swf อย่างง่ายที่สุด และนำไปแสดงผลในจอภาพ ถ้าจะ save เก็บไว้ เพื่อเรียกมาแก้ไขใหม่ก็เก็บในชื่อ lesson0101.swi ผลการสร้างแฟ้มนี้ .swi มีขนาด 2538 Byte ส่วน .swf มีขนาด 1219 Byte
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 30 Pixels
  3. เลือก Insert, Text แล้วแก้ข้อความจากคำว่า Text ใน Layout เป็นคำว่า Thaiall
  4. กำหนด Font เป็น Arial และ Size เป็น 20 และ Color เป็น สีแดง
  5. ใช้ mouse ไป click คำว่า THAIALL ในส่วนของ Outline และใช้ Right click อีกครั้ง
  6. เลือก Effect, 3D spin จากเมนูที่ Pop up ขึ้นมา
  7. โปรแกรมจะแบ่ง Frame ออกเป็น 30 Frames อัตโนมัติ สามารถแก้ไขได้ตามต้องการ
  8. ผลการทดสอบ จะเห็นตัวอักษร THAIALL หายไปทีละตัวอักษร
ตัวอย่างผลลัพธ์
ขนาด 1219 Byte



    บทเรียนที่ 1.2 :: เปลี่ยนขนาดภาพ Transform
    หลักการง่ายคล้ายกับบทเรียนที่ 1.1 แต่บทเรียนนี้จะ insert, image ขนาด lesson0102.jpg ขนาด 755 Byte
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 30 Pixels
  3. เลือก Insert, Image แล้วเลือกภาพ lesson0102.jpg เข้าไป
  4. กำหนด Font เป็น Arial และ Size เป็น 20 และ Color เป็น สีแดง
  5. ใช้ mouse ไป click คำว่าภาพผู้หญิง และใช้ Right click อีกครั้ง
  6. เลือก Effect, Transform
  7. โปรแกรมจะแบ่ง Frame ออกเป็น 20 Frames อัตโนมัติ สามารถแก้ไขได้ตามต้องการ
  8. ผลการทดสอบ จะเห็นภาพผู้หญิงลดขนาดเท่าขนาดปกติ
ตัวอย่างผลลัพธ์
ขนาด 1150 Byte




    บทเรียนที่ 1.3 :: เลื่อน 2 ภาพแบบ Slide in
    หลักการง่ายคล้ายกับบทเรียนที่ 1.2 แต่บทเรียนนี้จะนำภาพมาแสดง 2 ภาพ โดยภาพหนึ่งเลือกเลื่อนขึ้น อีกภาพเลือกเลื่อนลง
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 30 Pixels
  3. เลือก Insert, Image แล้วเลือกภาพ lesson0102.jpg เข้าไป
  4. กำหนด Font เป็น Arial และ Size เป็น 20 และ Color เป็น สีแดง
  5. ใช้ mouse ไป click คำว่าภาพผู้หญิง และใช้ Right click อีกครั้ง
  6. เลือก Effect, Slide in, From top
  7. อีกภาพเลือก Effect, Slide in, From bottom
  8. โปรแกรมจะแบ่ง Frame ออกเป็น 10 Frames อัตโนมัติ สามารถแก้ไขได้ตามต้องการ
  9. ผลการทดสอบ จะเห็นภาพผู้หญิงเลื่อนขึ้น และลง แยกกันอย่างชัดเจน
ตัวอย่างผลลัพธ์
ขนาด 1037 Byte



    บทเรียนที่ 1.4 :: ควบคุมหลาย Object ให้แสดงอย่างสอดคล้อง
    ควบคุม Object ที่ทำงานพร้อมกัน 3 Object ประกอบด้วยภาพพื้น ก้อนกลม และตัวอักษร
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 30 Pixels
  3. เลือก Insert, Image แล้วเลือกภาพ lesson0102.jpg เข้าไป
  4. ปรับขนาดภาพให้เท่ากับขนาดของ scene โดยไม่สนใจความสวยงาม
  5. Insert text และเพิ่ม effect เข้าไป 2 effects
  6. วาดวงกลม Ellipse และเพิ่ม effect เพื่อให้เลื่อนจากด้านขวาเข้ามา
  7. ผลการทดสอบ จะเห็น Object หลายส่วนทำงานร่วมกัน
  8. ตัวอย่าง Timeline ของบทเรียนนี้
ตัวอย่างผลลัพธ์
ขนาด 3593 Byte



    บทเรียนที่ 1.5 :: การใช้ Previous และ Next เพื่อทำ presentation
    Powerpoint มีความสามารถในการนำเสนอแบบ Previous และ Next สำหรับตัวอย่างนี้เป็นการสร้าง Action เพื่อควบคุมการนำเสนอ ให้เป็นไปตามต้องการ
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
  3. เลือก Insert, Text เข้าไป 6 Object
  4. คำว่า Next ให้กำหนด Action เป็น Goto frame, next
  5. คำว่า Previous ให้กำหนด Place ใน frame ที่ 2 และให้ Action เป็น Goto frame, previous
  6. Insert text และเพิ่ม effect เข้าไป 2 effects
  7. สำหรับ 4 Objects ที่เหลือ ให้ใช้ Place และ Remove ควบคุมการแสดงผล ใน frame ที่ต้องการ
  8. ผลการทดสอบ จะเห็นคำว่า Previous และ Next สำหรับเลื่อนหน้าแสดงผล
  9. ตัวอย่าง Timeline ของบทเรียนนี้
ตัวอย่างผลลัพธ์
ขนาด 5251 Byte



    บทเรียนที่ 2.1 :: เลื่อนภาพด้วย Next จาก play และ stop action
    ควบคุม Object ให้ Slide in from top ตามต้องการด้วยการคุม Action ของ play กับ stop หลักการคือ สั่ง action stop ทุก 10 วินาที จะ play ต่อเมื่อ Click ที่คำว่า Next ภาพจึงจะเลื่อนต่อไป
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
  3. เลือก Insert, Text แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Play
  4. Insert, Image โดยให้มี Effect เป็น Slide in from top
  5. จุดดำของ Scene ใน Timeline เกิดจาก Right click แล้วเลือก Stop
  6. โดยให้หัวของภาพอยู่ชิดมุมบนของ Scene ดังตัวอย่าง
  7. ผลการทดสอบ จะเห็นภาพเลื่อนลงมาระดับหนึ่ง เมื่อกดปุ่ม Next จึงจะเลื่อนลงมาอีก
  8. ตัวอย่าง Timeline และ Layout ของบทเรียนนี้
    Click to enlarge : Screen Sample
ตัวอย่างผลลัพธ์
ขนาด 4290 Byte




ตัวอย่างภาพต้นแบบ

    บทเรียนที่ 2.2 :: คุมการ Slide ของภาพด้วย Previous และ Next
    การ Slide ตามปกติโดยไม่หยุดนั้นทำได้ง่าย แต่การเพิ่ม action เพื่อคุมการ slide นั้นไม่ง่าย ต้องกำหนดว่าจุดใดจะทำคำสั่งใด ในตัวอย่างนี้มีจุดที่ทำได้ง่ายคือ Next เมื่อกด Next ก็จะสั่ง Play ซึ่งการหยุด Slide ถูกคุมด้วย Stop ที่อยู่ใน Scene ส่ง Previous จะแทรกคำสั่ง Goto frame เพื่อสั่งให้กระโดดไปยัง Frame ที่ต้องการ
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
  3. เลือก Insert, Text แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Goto frame
  4. เลือก Insert, Text แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Goto frame
  5. Insert, Image โดยให้มี Effect เป็น Slide in from top
  6. จุดดำของ Scene ใน Timeline เกิดจาก Right click แล้วเลือก Stop
  7. จุดแดงของ Previous คือการสั่ง Remove
  8. จุดเขียวของ Previous คือการสั่ง Place แล้วเพิ่ม Action ของ Goto frame เข้าไป
  9. โดยให้หัวของภาพอยู่ชิดมุมบนของ Scene ดังตัวอย่าง
  10. ผลการทดสอบ จะเห็นภาพเลื่อนลง และกลับไปจุดเดิมด้วยการควบคุมของ Next และ Previous
  11. ตัวอย่าง Timeline และ Layout ของบทเรียนนี้
ตัวอย่างผลลัพธ์
ขนาด 5455 Byte


    บทเรียนที่ 3.1 :: ข้อสอบข้อเดียวอย่างง่าย
    โปรแกรมนี้เขียนง่าย ถ้ามีพื้นฐานจากบทเรียนก่อนมาแล้ว เพียงแต่เรียนรู้การใช้ Javascript สำหรับเรียกคำสั่ง alert เพิ่มเท่านั้น โดยคำสั่งนี้ทดสอบได้เฉพาะใน browser เท่านั้น ผมทดสอบแล้วไม่เห็นผลที่ชัดเจนใน Swish แต่ถ้าทดสอบใน Browser โดยใช้ mouse click ที่ตัวเลือก โปรแกรม browser จะมี pop up หน้าต่างใหม่ เพื่อแจ้งว่าที่ Click นั้น Right หรือ Wrong สรุปหลักการของโปรแกรมนี้ คือ สร้าง Text มา 5 object แล้วเพิ่ม Action javascript alert สำหรับตรวจคำตอบ
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
  3. เลือก Insert, Text พิมพ์โจทย์ในส่วน Text ว่า 1+1=?
  4. เลือก Insert, Text พิมพ์ตัวเลือกว่า ก.1
    แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Wrong')")
    ปัญหาการทดสอบ Javascript นักพัฒนาต้องทดสอบ alert กับ Server เพราะไม่ทำงานเมื่อทดสอบใน c:\..
  5. เลือก Insert, Text พิมพ์ตัวเลือกว่า ข.2
    แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Right')")
  6. เลือก Insert, Text พิมพ์ตัวเลือกว่า ค.3
    แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Wrong')")
  7. เลือก Insert, Text พิมพ์ตัวเลือกว่า ง.4
    แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Wrong')")
  8. ผลการทดสอบ จะมีข้อสอบแบบ 4 ตัวเลือกให้ทำ หาก Click ที่คำตอบที่ถูก จะเห็นคำว่า Right ถ้าผิดจะเห็นคำว่า Wrong
  9. ตัวอย่าง Timeline และ Layout ของบทเรียนนี้
ตัวอย่างผลลัพธ์
ขนาด 1656 Byte


    บทเรียนที่ 3.2 :: ข้อสอบแบบเลื่อนหน้าหลังได้
    โปรแกรมนี้อาศัยความสามารถของบทเรียนที่ 1.5 ในการเลื่อนข้อสอบหน้าหลัง และนำบทเรียนที่ 3.1 มาเพิ่มจำนวนข้อสอบ รวมถึงการประยุกต์เปลี่ยน font ที่มีรูปร่างที่แปลกออกไป
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
  3. ทำตามบทเรียนที่ 3.1
  4. เพิ่ม text คำว่า ข้อต่อไป และก่อนหน้า โดยกำหนด action เป็น previous และ next ตามลำดับ
  5. แต่ละ Scene มีเพียง frame เดียว และทุก frame ในทุก Scene ให้กำหนด action เป็น stop
  6. ข้อสอบข้อต่อ ๆ ไปสร้างด้วยการ copy scene แล้ว paste ก็จะได้ข้อสอบข้อใหม่
  7. สำหรับข้อ 4 ที่มีภาพ อันที่จริงเป็นเพียงตัวอักษรที่มี font เป็น Monotype sorts
  8. ผลการทดสอบ จะมีข้อสอบแบบ 4 ข้อ ที่เลื่อนไปข้อก่อนหน้า หรือข้อต่อไปได้
  9. ตัวอย่างคำสั่งที่ใช้เรียกโปรแกรม lesson0302.swf ให้มีขนาดกว้าง 200 สูง 160
    <object id="lesson0302">
      <embed name="lesson0302" src="lesson0302.swf"
        width="200" height="160"
        type="application/x-shockwave-flash">
      </embed>
    </object>
    
  10. ตัวอย่าง Timeline และ Layout ของบทเรียนนี้
    Click to enlarge : Screen Sample
ตัวอย่างผลลัพธ์
ขนาด 5318 Byte




    บทเรียนที่ 3.3 :: ข้อสอบข้อเดียวเรียก index.php
    ผมสร้างข้อสอบ online ไว้ที่ http://www.thaiall.com/quiz และไม่เคยสร้างข้อสอบแบบ multimedia ที่สามารถแสดงผลได้ทั้งภาพ และเสียงได้อย่างน่าประทับใจแบบนี้ ในบทเรียนนี้ จึงสร้างข้อสอบขึ้น 1 ข้อ แล้วส่งผลไปให้โปรแกรม index.php จัดเก็บไว้ใน session เมื่อใดที่ตอบผิด โปรแกรม index.php จะแสดงให้ทราบว่าทำไปกี่ข้อ และถูกกี่ข้อ แต่จะทำข้อสอบ online นี้สำเร็จจำเป็นต้องสร้างข้อสอบจำนวนมาก เพื่อรองรับระบบข้อสอบแบบสุ่ม จะได้ไม่ซ้ำกัน ลองดูตัวอย่างการใช้งานที่ http://www.thaiall.com/quizflash ได้นะครับ โดยโปรแกรม index.php ก็ต้องไปดูที่นั้น ที่หน้านี้แสดงการสร้างตัวข้อสอบ ไม่มีส่วนประมวลผล หรือคำนวณคะแนน แต่อย่างใด
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 128 Pixels * 96 Pixels
  3. ทำตามบทเรียนที่ 3.1 แต่เปลี่ยนในส่วน action
  4. สำหรับตัวเลือกที่ถูก ให้กำหนด action เป็น Goto URL "index.php?act=1"
  5. สำหรับตัวเลือกที่ผิด ให้กำหนด action เป็น Goto URL "index.php?act=0"
  6. ผลการทดสอบ จะมีข้อสอบ เมื่อ click ตัวเลือกที่ถูกจะมีข้อต่อไปให้ทำ แต่ถ้าผิดจะแจ้งคะแนนที่ได้
  7. โปรแกรมนี้สัมพันธ์กับโปรแกรม index.php และต้องสร้างอีกเป็นจำนวนมาก เพื่อให้ระบบข้อสอบสมบูรณ์
  8. การจะเข้าใจเป้าหมายของบทเรียนนี้ต้องอ่านบทความที่ http://www.thaiall.com/quizflash/indexo.html
  9. ตัวอย่างคำสั่งที่ใช้เรียกโปรแกรม lesson0303.swf ให้มีขนาดกว้าง 128 สูง 96
    <object id="lesson0303">
      <embed name="lesson0303" src="lesson0303.swf"
        width="200" height="160"
        type="application/x-shockwave-flash">
      </embed>
    </object>
    
  10. ตัวอย่าง Timeline และ Layout ของบทเรียนนี้
    Click to enlarge : Screen Sample
  11. Source Code ของ index.php
ตัวอย่างผลลัพธ์
ขนาด 1682 Byte


ทดสอบไม่ได้
ต้องทดสอบกับ index.php
ต้องใช้ .swf จำนวนมาก

    บทเรียนที่ 3.4 :: เกม click วงกลมช่วยสาวน้อย
    โปรแกรมนี้ได้แนวคิดจาก cd เกม preschool และ barbie.com เพราะเป็นเกมง่าย ๆ ทำด้วย flash แต่เด็กสัก 5 - 6 ขวบชอบมาก อย่าง ragnarok หรือ play one ลูกผมยังไม่รู้เรื่องเลย ขนาด mouse ยังจับไม่คล่อง เกมของ preschool แผ่นตั้ง 200 บาท มีไม่เกิน 5 เกม และซ้ำไปซ้ำมา เพราะข้อจำกัดของ flash ทำให้ผมคิดว่า ถ้าแนะนำนักศึกษาของผมทำเกมแบบนี้ขายแบบ online อาจจะมีรายได้เป็นทุนการศึกษาก็ได้
    ขั้นตอนการสร้าง
  1. หลักการง่าย ๆ คือทำงานแบบตามลำดับ ไม่มีข้ามขั้นตอน
  2. ทุกภาพมีวงกลมสี่วง แต่มี button เพียง 1 ต่อ scene
  3. ปุ่มจะถูกซ่อนอยู่หลัง วงกลม ที่ถูกต้องเพียงวงเดียว
  4. กำหนดสีให้แต่ละ scene เมื่อ click ถูก ก็ไป scene ต่อไป
  5. click ไม่ถูกก็อยู่เลย ๆ ไม่ไปไหน
  6. click ถูก 4 ครั้งก็จบเกม และมีเกมเดียว
  7. คำสั่งสำคัญคือ goto frame ที่ต้องการ
  8. สิ่งสำคัญคือ การกำหนดระดับความโปร่งใส ให้เห็นภาพลาง ๆ
  9. ทุก scene จะสั่ง insert, action, stop ใน frame ที่สอง
Download : game01.swi 107KB และ game01.swf 27KB
game01.jpg
Click to enlarge

บทเรียนที่ 3.5 :: เมนูของ thaiall.com อย่างง่าย [swi, swf]
เพื่อตอบคำถาม อ.วิเชพ ว่าทำเว็บ Flash ทั้งเว็บ ทำอย่างไร ผมจึงลองใช้ Swish ทำเมนูอย่างง่ายขึ้นมา แต่ตัดภาพออก และพยายามใส่เนื้อหาให้น้อยที่สุด เพราะต้องการทำเป็นตัวอย่างให้เห็นว่าเว็บที่ไม่เป็น เว็บนรก(เว็บน่ะมันรก) นั้นเป็นอย่างไร หลักการสำคัญ คือ การควบคุม action ขณะ on(roll over) และ on(roll out) ให้แสดง scene ที่ต้องการอย่างเหมาะสม

    บทเรียนที่ 4.1 :: สร้างภาพวิ่งต่อเนื่อง ประยุกต์เป็นภาพ 360 องศา
    เคยเห็นกล้อง VDO ที่ถ่ายหนังแบบ 360 องศารอบตัว ผมก็คิดจะทำเหมือนกัน เพราะมีกล้อง แต่นึกถึงขนาดน่าจะมีขนาดใหญ่มาก การใช้โปรแกรม Swish น่าจะสามารถแสดงผลแบบ 360 ได้ดีกว่า เพราะมีตัวเลือกให้ทำงานมากกว่ากล้อง VDO หรือแฟ้มประเภท MPG ที่ผมใช้ประจำ แฟ้ม MPG กว่าจะหมุนรอบตัวได้ก็ใช้ขนาดไม่น้อยกว่าแสนแน่ แต่หลักการของ Flash น่าจะน้อยกว่ามาก .. ต้องลองครับ
    ขั้นตอนการสร้าง
  1. เปิดโปรแกรม Swish แล้วเลือก New
  2. กำหนดขนาดของงานให้เท่ากับ 128 Pixels * 96 Pixels
  3. Insert, Image.. ที่เตรียมไว้ซึ่งภาพควรกว้างกว่าขนาดงานสัก 3 เท่า
  4. ให้ขอบซ้ายของภาพ ติดของซ้ายของพื้นงาน
  5. จากนั้น Click บนเลข 0 ของ Timeline จนมีจุดแดงล้อมภาพ 6 จุด
  6. จากนั้น Double click ช่อง frame ที่ 0 จะทำให้มี effect แบบ move
  7. จากนั้นให้ขยาย frame ออกเป็น 30 frames ในส่วน Timeline แล้วทดสอบ play
  8. ผลการ play ไม่น่ามีอะไรเกิดขึ้น ต้องไปเลือกในช่อง frame สุดท้ายของ Timeline
  9. ขั้นตอนสุดท้ายต้องใจเย็น ๆ คือการย้ายตำแหน่งภาพ ให้ขอบขวาของงาน และภาพชิดกัน
  10. ผลคือการเลือก Click ที่ frame 0 หรือ frame สุดท้ายผลที่ได้จะต่างกัน
  11. ตัวอย่างคำสั่งที่ใช้เรียกโปรแกรม lesson0401.swf
    <object id="lesson0401">
      <embed name="lesson0401" src="lesson0401.swf"
        width="200" height="160"
        type="application/x-shockwave-flash">
      </embed>
    </object>
    
  12. อันที่จริง มีข้อผิดพลาดในการสร้างตัวอย่างเรื่องเส้น .. ให้นึกว่าอะไรคือข้อผิดพลาดในด้านแนวคิด
ตัวอย่าง Timeline และ Layout ของบทเรียนนี้

    ถ่ายภาพโยนก 360 องศา
  1. เริ่มด้วยการไปถ่ายภาพมา สิบกว่าภาพ และพยายามถ่ายในตอนที่แสงเปลี่ยนไม่มากคือตอนเที่ยง
  2. นำมาต่อกันด้วย photoshop โดยอาศัยเพียงการตัดภาพ และปรับแสงสว่างเป็นหลัก
  3. รวมภาพทั้งหมดเป็นภาพเดียวที่มีขนาดกว้างมาก ผมเคยทำกว้างถึง 5000 pixels
  4. โปรแกรม Swish จำกัดความกว้างเพียง 3277 หรือประมาณนี้ หากภาพกว้างกว่านี้โปรแกรมจะ hang
  5. ต.ย. yonokfull.jpg, yonokfull.swi และ yonokfull.swf (118 Kb)
  6. ต.ย. waterhot.jpg, waterhot.swi และ waterhot.swf (59 Kb)
  7. ต.ย. gov.jpg, gov.swi และ gov.swf (105 Kb)
ตัวอย่างผลลัพธ์
ขนาด 1135 Byte





อีกตัวอย่างที่คล้ายกัน
ขนาด 6950 Byte
แฟ้ม .swi

บทเรียนที่ 5.1 :: ปุ่มคำนวณจาก text box
สร้าง Text Box 2 Objects แล้วนำมาคำนวณกัน โดยสั่งจากปุ่ม Button โดย Text Box มีคุณสมบัติ Input และ Dynamic เพื่อการรับ และแสดงผล
    ขั้นตอนการสร้าง
  1. ใช้ SwishMax (เริ่มศึกษา 14 ตุลาคม 2548)
  2. Insert Text มา 2 Objects
  3. Tab Text ให้ Name เป็น x และ y โดยกำหนดค่าเป็น 1 และ 2 ตามลำดับ
  4. Click CheckBox ชื่อ Target ทั้ง 2 Objects
  5. เปลี่ยน Static Text ของ x เป็น Input Text (เปลี่ยนค่าขณะ Run ได้)
  6. เปลี่ยน Static Text ของ y เป็น Dynamic Text
  7. ทั้ง x และ y ให้ชิดขวา มี font เป็น arial ขนาด 8 และกว้าง 24
  8. Insert Button
  9. Right Click ที่ Up/Over/Down/Hit State แล้วเลือก Paste Text
  10. Tab ชื่อ Text พิมพ์ = เพื่อเป็นข้อความในปุ่ม แล้วขยาย Text จะได้ Click ง่าย ๆ
  11. Click ที่ Button แล้วเลือก Tab ชื่อ Script
  12. Click Add Script, Events, Button, on (release)
  13. Click Guided, Expert แล้วพิมพ์ y.text = y.text * x.text + 2;
  14. ลองทดสอบเปลี่ยนค่าของ x ดูสิครับ
Download : lesson0501.swi 3KB และ lesson0501.swf 10KB

    บทเรียนที่ 5.2 :: ข้อสอบเก็บคะแนน แบบใช้ตัวแปร
    การใช้ตัวแปรเก็บค่า แล้วทำให้ Scene อื่นใช้ได้ ดูจากตัวอย่างใน Help ที่มาพร้อมโปรแกรม SwishMax ทำให้ทุกครั้งที่ทำข้อสอบ จะบันทึกคะแนนเข้าตัวแปร เมื่อเข้า Scene ใหม่ ก็นำค่าจากตัวแปรไปแสดงผลเมื่อเข้าสู่ Frame 1 ซึ่งตัวอย่างนี้จบในตัวเอง ไม่เหมือนตัวอย่าง 3.3 ที่ต้องอาศัยโปรแกรม index.php จากข้างนอก ช่วยเลือก Flash แฟ้มใหม่ หรือข้อสอบข้อใหม่มาให้ทำ
    ขั้นตอนการสร้าง
  1. ปรับปรุงมาจาก lesson0501.swi
  2. Scene_start ใช้กำหนดค่าเริ่มต้นของตัวแปรใน Frame 1
  3. Scene_stop ใช้แสดงผล ตัวแปรที่ได้จากการทำข้อสอบ ว่าทำกี่ข้อ และถูกกี่ข้อ
  4. Tab Text ให้ Name เป็น x และ y โดยกำหนดค่าเป็น 1 และ 2 ตามลำดับ
  5. Scene ที่เหลือเป็นข้อสอบประกอบด้วยข้อสอบ ข้อที่ คะแนน ปุ่ม right และ ปุ่ม wrong
  6. ปุ่ม Right จะมี Text ที่เก็บตัวเลือกที่ถูกเพียง 1 ตัวเลือก และอยู่เหนือ wrong
    on (release) {
    keeps = keeps + 1;
    keepv = keepv + 1;
    nextSceneAndPlay(); }
  7. ปุ่ม Wrong จะมี Text ที่เก็บตัวเลือกที่ผิด มีหลายตัวเลือก Click ตัวใดก็ผิด
    on (release) {
    keepv = keepv + 1;
    nextSceneAndPlay(); }
  8. ตัวอย่างนี้ยังไม่ใช้ random(10) แต่จะใช้ในตัวอย่างหน้า
Download : lesson0502.swi 17KB และ lesson0502.swf 12KB



Click to enlarge
[Screen Sample]

บทเรียนที่ 5.3 :: สุ่มอักษร ใช้สอนอักษรพิมพ์ใหญ่ เด็กอนุบาล
สุ่มตัวเลขภายใน 26 แล้วบวก 65 ก็จะได้รหัส Ascii ที่อยู่ระหว่าง A-Z แล้ว แสดงอักษรที่สุ่มได้ ถ้าเปลี่ยนอักษร ก็เริ่มที่ Frame 1 และสุ่มอักษรใหม่
    ขั้นตอนการสร้าง
  1. Script ของ Screen
    onFrame (20) { stop(); }
  2. Script ของ ปุ่มเพื่อกด Next
    on (release) {
    y.text = chr(random(26)+65);
    gotoSceneAndPlay("<current scene>",2);
    }
  3. Text ที่ใช้แสดงอักษรชื่อ y และกำหนดเป็น target
  4. Text ต้องกำหนดเป็น Dynamic Text เพื่อให้เปลี่ยนได้
Download : lesson0503.swi 11KB และ lesson0503.swf 4KB

    บทเรียนที่ 5.4 :: คุมเหตุการณ์การ Click Image ได้อย่างน่าทึ่ง เพราะง่าย
    น่าทึ่งมาก ๆ ที่ทำงานได้แบบนี้ โดย Code ไม่กี่บรรทัด ที่ทึ่ง เพราะเขียนมาหลายภาษา เชื่อว่าไม่มีภาษาคอมพิวเตอร์ใด ควบคุมการทำงานได้ง่ายขนาดนี้ โดยใช้ Code เพียงไม่กี่บรรทัดแบบนี้ ทำให้ผมเห็นแนวการทำเกมแบบ Puzzle ที่เขียนไม่กี่บรรทัดก็เสร็จ แต่เด็ก ๆ จะหลงไหล เพราะมีภาพให้เลือกมากมาย
    ขั้นตอนการสร้าง
  1. ส่งภาพ 4 ภาพเข้าไปใน Scene_1
  2. ให้ส่งเข้าไปด้วย import แทนการ copy, paste เพราะจะชัด และขนาดเล็กกว่า
  3. เปลี่ยนชื่อ เป็น i01 ถึง i04 เพื่อประโยชน์ในการอ้างอิง
  4. กำหนดให้ movie มี width และ height เป็น 320,100
  5. แต่ละภาพในส่วนของ Shape ให้ Checkbox ของ Target เป็นจริง เพื่อใช้อ้างอิงใน Script
  6. สำคัญ: Click ชื่อ Scene_1 และเขียน Script ของ Scene_1 กำหนด
    x,y หมายถึง ตำแหน่งบน scene เพราะภาพมีขนาด 80 * 100 จึงต้องกำหนดต่างจากจุดกลางของภาพ
    onLoad () {
    i01._width = 80;
    i02._width = 80;
    i03._width = 80;
    i04._width = 80;
    i01._height = 100;
    i02._height = 100;
    i03._height = 100;
    i04._height = 100;
    i01._x = 0 + 40;
    i02._x = 80 + 40;
    i03._x = 160 + 40;
    i04._x = 240 + 40;
    i01._y = 50;
    i02._y = 50;
    i03._y = 50;
    i04._y = 50;
    }
  7. Script ของ i01 ใส่คำสั่ง onSelfEvent (press) { _width -= 10; } ภาพจะเล็กลงนิดหน่อย
  8. Script ของ i02 ใส่คำสั่ง onSelfEvent (press) { _rotation += 45; } ภาพจะหมุนครั้งละ 45 องศา
  9. Script ของ i03 ใส่คำสั่ง onSelfEvent (press) { _visible = false; } ภาพหายไป
  10. Script ของ i04 ใส่คำสั่ง onSelfEvent (press) { _alpha = 40; } สีภาพจางลง
  11. สรุปได้ว่าผมเขียนโปรแกรมนี้สำเร็จเพราะ help ของ SwishMax นี่หละครับ และแผนต่อไปคือทำเกม
Download : lesson0504.swi 29KB และ lesson0504.swf 15KB

บทเรียนที่ 5.5 :: Puzzle Game (Beta)
Puzzle แปลว่าทำให้ฉงน เมื่อเปิดเกม ก็จะมีภาพอยู่ 16 ภาพ ให้สลับภาพไปมา จนกว่าภาพ 16 ภาพนั้น จะกลายเป็นภาพใหญ่ดังตัวอย่างข้างขวา เมื่อเริ่มเกมให้ Click Start และกด Stop ก็จะหยุด พร้อมแสดงเวลาที่ใช้ไป สามารถนำไปใช้แข่งขันง่าย ๆ ระหว่างเพื่อน ๆ ในชั้นเรียนได้ว่าใครเร็วสุด ด้วย เกมภาพฉงน
เริ่มจาก หาภาพขนาด 256 * 192 Pixels แล้วใช้ Image Ready สั่ง Slice ให้เป็น 16 ภาพ แบบ 4 * 4 ดังนั้นภาพเล็กก็จะมีขนาด 64 * 48 Pixels ส่งภาพทั้ง 16 ร่วมกับภาพตัวอย่างเป็น 17 ภาพ แล้วใช้ Script คุมตอน Load และในภาพเล็กทั้งหมด โปรแกรมไม่ใช้ Algorithm ที่ซับซ้อน เพียงแต่ควบคุมตำแหน่งของการแสดงผลเท่านั้น นักเรียน อาจนำไปใช้แข่งขันกันได้ เพราะมีส่วนของเวลาที่ชัดเจนว่า จัดเรียงเสร็จใช้เวลาเท่าใด ส่วนที่ยังขาดไปคือการ Random ภาพ เพราะตาม Code จะเห็นว่าผมไม่ได้สุ่มขึ้นมา
แต่รุ่น 0505n ได้เพิ่มการสุ่มอัตโนมัติ และการ Reload ทำให้เล่นเกมต่อเนื่องได้ และที่สำคัญผมสร้าง function ใน scene_1 อีก 3 ตัว ทำให้ลด code ในแต่ละ image ไปได้มาก และไม่น่าเชื่อว่าขนาด swf ลดจากเป็นเหลือแค่ 50000 Byte เอง ในอนาคตคาดว่าจะเพิ่ม level ต่อไป เพราะปัจจุบันแต่ละแฟ้มมีภาพให้ภาพเดียวครับ
Image Ready
1. เปิดภาพ imge.jpg ขึ้นมา
2. ใช้ Slice Tool แบ่งภาพเป็น 16 ภาพ เท่า ๆ กัน
3. กำหนด Output เป็นแบบ Slice ท่านก็จะได้ภาพ 16 ภาพ
นำมาแก้ไข
1. หาภาพสวย ขนาด 256 * 192 Pixels กำหนดชื่อเป็น imge.jpg ไว้ในห้อง d:\puzzle
2. ลดขนาดภาพเป็น 64 * 48 Pixels กำหนดชื่อเป็น imgt.jpg ไว้ในห้อง d:\puzzle
3. นำ imge.jpg มาแตกเป็น 16 ด้วย Image Ready ชื่อ img_01.jpg ถึง img_16.jpg
4. เปิด lesson0505n.swi มาแก้ไขภาพ ด้วยการ click ที่ภาพ imgt.jpg แล้วเลือก Shape
5. ถ้าแฟ้ม .swi จำตำแหน่งภาพเดิมไว้ ก็เพียงแต่กด Reload หรือ Select ภาพใหม่
6. ถ้าท่านมีภาพใหม่ สำหรับแทนภาพเก่า ก็ Reload ให้หมด แล้ว Export เป็น SWF
lesson0505 swi 200KB และ swf 100KB
lesson0505n swi 100KB และ swf 50KB
Script ส่วนของ Scene_01 (แบบเดิม)
Script ที่ต้องมีในทุกภาพ 16 ภาพ (แบบใหม่)
Script ปุ่ม button (แบบใหม่)

บทเรียนที่ 5.6 :: Preload Scene
ขั้นตอนการสร้าง
1. วางแผนสร้าง 2 Scene โดย Scene แรกเป็น Preload ตามด้วยหลัง Load แสดงวงกลม
2. กำหนด Stop playing at end of movie ใน Movie Panel
3. สร้าง 2 Shape เป็นพื้นดำ และแท่งที่วิ่งสีแดง เลื่อนไปตาม Frame
4. กำหนด move ให้ Shape เป็น 60 Frame ทำให้ใช้เวลา 5 วินาที (60/12=5)
5. สร้าง Text ที่มีค่าเริ่มต้นเป็น 0 และเป็น Dynamic ตั้งชื่อเป็น t
6. กำหนด Script ให้กับ Scene_1
onEnterFrame() {
t = int(_root._currentframe / 60 * 100);
}

swi + swf

    คำสั่งที่น่าสนใจ และข้อควรทราบ
    1. Help ใน SwishMax Tutorials
    
    - Help มีมาให้พร้อมโปรแกรม ละเอียดดีมาก
        เช่น Script Object, Object Properties
        เช่น Object, Array (Object)
    - ผมเขียน SwishMax ก็เพราะ Help ที่มีมากับโปรแกรมนี่หละครับ 2. การใช้ trace
    - เพื่อแสดงค่าใน Debug Windows ขณะทดสอบโปรแกรม
    - เช่น trace(_root._width); และ stop(); 3. เกี่ยวกับ timer
    - trace(timer.ticks());
    - trace (getTimer());
    - theDate = new Date(); start.text = theDate.getTime();
    - ใช้ theDate.toString(); ได้ครับ ? เมื่อใส่ Text ใน Button ควรเป็น Static Text
    - เพราะเป็น Dynamic Text แล้ว on(release) ไม่ทำงานเฉยเลย

    แบบฝึกหัด
    1. เขียนอักษร 1 อักษร แล้วนำไปแสดงในเว็บ
    2. วาดวงกลม 1 วง แล้วนำไปแสดงในเว็บ
    3. หากภาพใส่ลงไป แล้วกำหนด effect แล้วนำไปแสดงในเว็บ
    4. ทำตามตัวอย่างให้ได้โดยใช้โปรแกรม Swish
    5. ศึกษาจากตัวอย่างที่ Swish เตรียมมาให้ที่ File, Samples โดยทดสอบแก้ไข
    6. ลองคิด และออกแบบงานของตนเองที่ไม่ซ้ำใคร
    7. หาซื้อกล้อง Digital แล้วทำภาพ 360 องศา ให้คนไทยได้ชมกัน
    

slideshow.swf
สำหรับเลื่อนภาพได้อย่างมืออาชีพ โดยแก้ไขใน slideshow.xml เพื่อกำหนดเวลา และภาพที่ต้องการใช้ แต่ถ้าต้องการ link ภาพออกไป ต้อง register
+ download : ตัวอย่าง

แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยโยนก
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : yourname@thaiall.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223