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


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

เว็บเพจสำรอง (Backup Webpages) : lampang.thcity.com | thaiall.com
ปรับปรุง : 2550-03-13 (เพิ่ม แผนการสอน)

ความหมาย

แฟล็ช (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 คือรุ่น 2006.06.29 ขนาดประมาณ 10 MB

บทเรียนที่เกี่ยวข้อง

- swishmax(new)
- photoshop

สารบัญ
บทนำ และแผนการสอน
Swish 2.0
+ บทเรียนที่ 1.1 :: อักษร 3D spin [swi, swf]
+ บทเรียนที่ 1.2 :: เปลี่ยนขนาดภาพ Transform [swi, swf]
+ บทเรียนที่ 1.3 :: เลื่อน 2 ภาพแบบ Slide in [swi, 
swf]
+ บทเรียนที่ 1.4 :: ควบคุมหลาย Object ให้แสดงอย่างสอดคล้อง [swi, swf]
+ บทเรียนที่ 1.5 :: การใช้ Previous และ Next เพื่อทำ presentation [swi, swf]
+ บทเรียนที่ 2.1 :: เลื่อนภาพด้วย Next จาก play และ stop action [swi, swf]
+ บทเรียนที่ 2.2 :: คุมการ Slide ของภาพด้วย Previous และ Next [swi, swf]
+ บทเรียนที่ 3.1 :: ข้อสอบข้อเดียวอย่างง่าย [swi, swf]
+ บทเรียนที่ 3.2 :: ข้อสอบแบบเลื่อนหน้าหลังได้ [swi, swf]
+ บทเรียนที่ 3.3 :: ข้อสอบข้อเดียวเรียก index.php [swi, swf]
+ บทเรียนที่ 3.4 :: เกม click วงกลมช่วยสาวน้อย [swi, swf]
+ บทเรียนที่ 3.5 :: เมนูของ thaiall.com อย่างง่าย [swi, swf]
+ บทเรียนที่ 4.1 :: สร้างภาพวิ่งต่อเนื่อง ประยุกต์เป็นภาพ 360 องศา [swi, swf]
SwishMax
+ บทเรียนที่ 5.1 :: ปุ่มคำนวณจาก text box [swi, swf]
+ บทเรียนที่ 5.2 :: ข้อสอบเก็บคะแนน แบบใช้ตัวแปร [swi, swf]
+ บทเรียนที่ 5.3 :: สุ่มอักษร ใช้สอนอักษรพิมพ์ใหญ่ เด็กอนุบาล [swi, swf]
+ บทเรียนที่ 5.4 :: คุมเหตุการณ์การ Click Image ได้อย่างน่าทึ่ง เพราะง่าย [swi, swf]
+ บทเรียนที่ 5.5 :: Puzzle Game (Beta) [swi, swf]
+ บทเรียนที่ 5.6 :: Preload Scene [swi, swf]
คำสั่งที่น่าสนใจ
แบบฝึกหัดท้ายบท

แหล่ง 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)

หาโปรแกรม Swish ได้จาก http://www.swishzone.com ซึ่งเป็นโปรแกรมที่ใช้สร้าง .swf หรือ Flash ได้ง่ายจริง ๆ เพื่อแสดงให้เห็นว่าง่าย ผมจึงสร้างบทเรียน เพื่อพิสูจน์ให้นักศึกษาไทยเห็นว่า สร้างงาน multimedia ไม่ได้ยากอย่างที่คิด เพราะเกิดมาผมก็ไม่เคยไปเรียนที่ไหนมาก่อน เช่นกัน ลองผิดลองถูกสัก 20 ชั่วโมง ก็รู้เรื่องเองครับ
กำหนดขนาดของ flash :: เลือก Edit, Properties และเลือก Tab ของ Movie สามารถแก้ไขในส่วนของ width และ height ได้
แฟ้ม swi และ swf ต่างกันอย่างไร :: แฟ้ม swi เป็นแฟ้มของโปรแกรม Swish ทำให้เรียกงานมาแก้ไขใหม่ได้ แต่ swf เป็นแฟ้มที่ใช้นำไปใช้ โดยปกติขนาดของ swf จะเล็กกว่า swi เช่น แฟ้ม lesson0101.swi คือแฟ้มที่โปรแกรม Swish สามารถเรียกมาแก้ไขได้ แต่ lesson0101.swf คือแฟ้มที่ browser นำไปใช้งานแสดงผลจริง
สร้างงานแล้ว จะสร้าง swf อย่างไร :: ให้เลือก File, Export, SWF ก็จะได้แฟ้ม .swf ไปใช้ตามต้องการ

ตัวอย่าง 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>

กด F5 หมายถึง Insert frame
กด Shift + F5 หมายถึง Delete frame
จุด Place เพื่อสำหรับเก็บ Action แต่ละ Frame แต่ละ Object ได้
Scene ก็คือฉาก เช่นฉากภูเขาก็มีเรื่องราวในภูเขา ฉากทะเลก็มีเรื่องราวในทะเล
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

บทเรียนแรก ใช้โปรแกรม Swish สร้างแฟ้ม lesson0101.swf อย่างง่ายที่สุด และนำไปแสดงผลในจอภาพ ถ้าจะ save เก็บไว้ เพื่อเรียกมาแก้ไขใหม่ก็เก็บในชื่อ lesson0101.swi ผลการสร้างแฟ้มนี้ .swi มีขนาด 2538 Byte ส่วน .swf มีขนาด 1219 Byte

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 30 Pixels
เลือก Insert, Text แล้วแก้ข้อความจากคำว่า Text ใน Layout เป็นคำว่า Thaiall
กำหนด Font เป็น Arial และ Size เป็น 20 และ Color เป็น สีแดง
ใช้ mouse ไป click คำว่า THAIALL ในส่วนของ Outline และใช้ Right click อีกครั้ง
เลือก Effect, 3D spin จากเมนูที่ Pop up ขึ้นมา
โปรแกรมจะแบ่ง Frame ออกเป็น 30 Frames อัตโนมัติ สามารถแก้ไขได้ตามต้องการ
ผลการทดสอบ จะเห็นตัวอักษร THAIALL หายไปทีละตัวอักษร

ตัวอย่างผลลัพธ์
ขนาด 1219 Byte

บทเรียนที่ 1.2

หลักการง่ายคล้ายกับบทเรียนที่ 1.1 แต่บทเรียนนี้จะ insert, image ขนาด lesson0102.jpg ขนาด 755 Byte

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 30 Pixels
เลือก Insert, Image แล้วเลือกภาพ lesson0102.jpg เข้าไป
กำหนด Font เป็น Arial และ Size เป็น 20 และ Color เป็น สีแดง
ใช้ mouse ไป click คำว่าภาพผู้หญิง และใช้ Right click อีกครั้ง
เลือก Effect, Transform
โปรแกรมจะแบ่ง Frame ออกเป็น 20 Frames อัตโนมัติ สามารถแก้ไขได้ตามต้องการ
ผลการทดสอบ จะเห็นภาพผู้หญิงลดขนาดเท่าขนาดปกติ

ตัวอย่างผลลัพธ์
ขนาด 1150 Byte

บทเรียนที่ 1.3

หลักการง่ายคล้ายกับบทเรียนที่ 1.2 แต่บทเรียนนี้จะนำภาพมาแสดง 2 ภาพ โดยภาพหนึ่งเลือกเลื่อนขึ้น อีกภาพเลือกเลื่อนลง

ขั้นตอนการสร้าง

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

ตัวอย่างผลลัพธ์
ขนาด 1037 Byte

บทเรียนที่ 1.4

ควบคุม Object ที่ทำงานพร้อมกัน 3 Object ประกอบด้วยภาพพื้น ก้อนกลม และตัวอักษร

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 30 Pixels
เลือก Insert, Image แล้วเลือกภาพ lesson0102.jpg เข้าไป
ปรับขนาดภาพให้เท่ากับขนาดของ scene โดยไม่สนใจความสวยงาม
Insert text และเพิ่ม effect เข้าไป 2 effects
วาดวงกลม Ellipse และเพิ่ม effect เพื่อให้เลื่อนจากด้านขวาเข้ามา
ผลการทดสอบ จะเห็น Object หลายส่วนทำงานร่วมกัน
ตัวอย่าง Timeline ของบทเรียนนี้

ตัวอย่างผลลัพธ์
ขนาด 3593 Byte

บทเรียนที่ 1.5

Powerpoint มีความสามารถในการนำเสนอแบบ Previous และ Next สำหรับตัวอย่างนี้เป็นการสร้าง Action เพื่อควบคุมการนำเสนอ ให้เป็นไปตามต้องการ

ขั้นตอนการสร้าง

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

ตัวอย่างผลลัพธ์
ขนาด 5251 Byte

บทเรียนที่ 2.1

ควบคุม Object ให้ Slide in from top ตามต้องการด้วยการคุม Action ของ play กับ stop หลักการคือ สั่ง action stop ทุก 10 วินาที จะ play ต่อเมื่อ Click ที่คำว่า Next ภาพจึงจะเลื่อนต่อไป

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
เลือก Insert, Text แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Play
Insert, Image โดยให้มี Effect เป็น Slide in from top
จุดดำของ Scene ใน Timeline เกิดจาก Right click แล้วเลือก Stop
โดยให้หัวของภาพอยู่ชิดมุมบนของ Scene ดังตัวอย่าง
ผลการทดสอบ จะเห็นภาพเลื่อนลงมาระดับหนึ่ง เมื่อกดปุ่ม Next จึงจะเลื่อนลงมาอีก
ตัวอย่าง Timeline และ Layout ของบทเรียนนี้
Click to enlarge : Screen Sample

ตัวอย่างผลลัพธ์
ขนาด 4290 Byte

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

บทเรียนที่ 2.2

การ Slide ตามปกติโดยไม่หยุดนั้นทำได้ง่าย แต่การเพิ่ม action เพื่อคุมการ slide นั้นไม่ง่าย ต้องกำหนดว่าจุดใดจะทำคำสั่งใด ในตัวอย่างนี้มีจุดที่ทำได้ง่ายคือ Next เมื่อกด Next ก็จะสั่ง Play ซึ่งการหยุด Slide ถูกคุมด้วย Stop ที่อยู่ใน Scene ส่ง Previous จะแทรกคำสั่ง Goto frame เพื่อสั่งให้กระโดดไปยัง Frame ที่ต้องการ

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
เลือก Insert, Text แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Goto frame
เลือก Insert, Text แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Goto frame
Insert, Image โดยให้มี Effect เป็น Slide in from top
จุดดำของ Scene ใน Timeline เกิดจาก Right click แล้วเลือก Stop
จุดแดงของ Previous คือการสั่ง Remove
จุดเขียวของ Previous คือการสั่ง Place แล้วเพิ่ม Action ของ Goto frame เข้าไป
โดยให้หัวของภาพอยู่ชิดมุมบนของ Scene ดังตัวอย่าง
ผลการทดสอบ จะเห็นภาพเลื่อนลง และกลับไปจุดเดิมด้วยการควบคุมของ Next และ Previous
ตัวอย่าง 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 สำหรับตรวจคำตอบ

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 100 Pixels * 80 Pixels
เลือก Insert, Text พิมพ์โจทย์ในส่วน Text ว่า 1+1=?
เลือก Insert, Text พิมพ์ตัวเลือกว่า ก.1
แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Wrong')")
ปัญหาการทดสอบ Javascript นักพัฒนาต้องทดสอบ alert กับ Server เพราะไม่ทำงานเมื่อทดสอบใน c:\..
เลือก Insert, Text พิมพ์ตัวเลือกว่า ข.2
แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Right')")
เลือก Insert, Text พิมพ์ตัวเลือกว่า ค.3
แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Wrong')")
เลือก Insert, Text พิมพ์ตัวเลือกว่า ง.4
แล้วในส่วน Actions ให้กำหนด On(Release) ให้มี event เป็น Javascript("alert('Wrong')")
ผลการทดสอบ จะมีข้อสอบแบบ 4 ตัวเลือกให้ทำ หาก Click ที่คำตอบที่ถูก จะเห็นคำว่า Right ถ้าผิดจะเห็นคำว่า Wrong
ตัวอย่าง Timeline และ Layout ของบทเรียนนี้

ตัวอย่างผลลัพธ์
ขนาด 1656 Byte

บทเรียนที่ 3.2

โปรแกรมนี้อาศัยความสามารถของบทเรียนที่ 1.5 ในการเลื่อนข้อสอบหน้าหลัง และนำบทเรียนที่ 3.1 มาเพิ่มจำนวนข้อสอบ รวมถึงการประยุกต์เปลี่ยน font ที่มีรูปร่างที่แปลกออกไป

ขั้นตอนการสร้าง

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

ตัวอย่างผลลัพธ์
ขนาด 5318 Byte

บทเรียนที่ 3.3

ผมสร้างข้อสอบ online ไว้ที่ http://www.thaiall.com/quiz และไม่เคยสร้างข้อสอบแบบ multimedia ที่สามารถแสดงผลได้ทั้งภาพ และเสียงได้อย่างน่าประทับใจแบบนี้ ในบทเรียนนี้ จึงสร้างข้อสอบขึ้น 1 ข้อ แล้วส่งผลไปให้โปรแกรม index.php จัดเก็บไว้ใน session เมื่อใดที่ตอบผิด โปรแกรม index.php จะแสดงให้ทราบว่าทำไปกี่ข้อ และถูกกี่ข้อ แต่จะทำข้อสอบ online นี้สำเร็จจำเป็นต้องสร้างข้อสอบจำนวนมาก เพื่อรองรับระบบข้อสอบแบบสุ่ม จะได้ไม่ซ้ำกัน ลองดูตัวอย่างการใช้งานที่ http://www.thaiall.com/quizflash ได้นะครับ โดยโปรแกรม index.php ก็ต้องไปดูที่นั้น ที่หน้านี้แสดงการสร้างตัวข้อสอบ ไม่มีส่วนประมวลผล หรือคำนวณคะแนน แต่อย่างใด

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 128 Pixels * 96 Pixels
ทำตามบทเรียนที่ 3.1 แต่เปลี่ยนในส่วน action
สำหรับตัวเลือกที่ถูก ให้กำหนด action เป็น Goto URL "index.php?act=1"
สำหรับตัวเลือกที่ผิด ให้กำหนด action เป็น Goto URL "index.php?act=0"
ผลการทดสอบ จะมีข้อสอบ เมื่อ click ตัวเลือกที่ถูกจะมีข้อต่อไปให้ทำ แต่ถ้าผิดจะแจ้งคะแนนที่ได้
โปรแกรมนี้สัมพันธ์กับโปรแกรม index.php และต้องสร้างอีกเป็นจำนวนมาก เพื่อให้ระบบข้อสอบสมบูรณ์
การจะเข้าใจเป้าหมายของบทเรียนนี้ต้องอ่านบทความที่ http://www.thaiall.com/quizflash/indexo.html
ตัวอย่างคำสั่งที่ใช้เรียกโปรแกรม lesson0303.swf ให้มีขนาดกว้าง 128 สูง 96
```
<object id="lesson0303">
 <embed name="lesson0303" src="lesson0303.swf"
 width="200" height="160"
 type="application/x-shockwave-flash">
 </embed>
</object>
```
ตัวอย่าง Timeline และ Layout ของบทเรียนนี้
Click to enlarge : Screen Sample
Source Code ของ index.php
<? // updated : 2550-03-03 session_start(); $dir_handle = opendir("."); $cnt=0; while ($list = readdir($dir_handle)) { if (strtolower(substr($list,-4)) == ".swf") { $ar[$cnt] = $list; $cnt = $cnt + 1; } } srand(time()); $r = rand() % $cnt; if (!isset($_GET['act'])) { $_SESSION['score'] = 0; $showquiz = 1; } else { if ($_GET['act'] == 0) { $showquiz = 0; $oscore = $_SESSION['score']; $_SESSION['score'] = 0; } else { $_SESSION['score'] = $_SESSION['score'] + 1; $showquiz = 1; } } echo "<head>"; if ($showquiz == 1) { echo "<meta http-equiv=refresh content='0; url=". $ar[$r] ."'>"; echo "</head>"; } else { echo "</head><body bgcolor=red link=yellow vlink=yellow><center>"; echo "Your score : ". $oscore; echo " <a href=http://lampang.thcity.com/quizflash/>Quiz again</a>"; echo " <a href=http://www.thaiall.com/quizflash/indexo.html target=_blank>Source code</a>"; echo " Script version 2.0 (Session version)"; echo "</body></html>"; } ?>

ตัวอย่างผลลัพธ์
ขนาด 1682 Byte

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

บทเรียนที่ 3.4

โปรแกรมนี้ได้แนวคิดจาก cd เกม preschool และ barbie.com เพราะเป็นเกมง่าย ๆ ทำด้วย flash แต่เด็กสัก 5 - 6 ขวบชอบมาก อย่าง ragnarok หรือ play one ลูกผมยังไม่รู้เรื่องเลย ขนาด mouse ยังจับไม่คล่อง เกมของ preschool แผ่นตั้ง 200 บาท มีไม่เกิน 5 เกม และซ้ำไปซ้ำมา เพราะข้อจำกัดของ flash ทำให้ผมคิดว่า ถ้าแนะนำนักศึกษาของผมทำเกมแบบนี้ขายแบบ online อาจจะมีรายได้เป็นทุนการศึกษาก็ได้

ขั้นตอนการสร้าง

หลักการง่าย ๆ คือทำงานแบบตามลำดับ ไม่มีข้ามขั้นตอน
ทุกภาพมีวงกลมสี่วง แต่มี button เพียง 1 ต่อ scene
ปุ่มจะถูกซ่อนอยู่หลัง วงกลม ที่ถูกต้องเพียงวงเดียว
กำหนดสีให้แต่ละ scene เมื่อ click ถูก ก็ไป scene ต่อไป
click ไม่ถูกก็อยู่เลย ๆ ไม่ไปไหน
click ถูก 4 ครั้งก็จบเกม และมีเกมเดียว
คำสั่งสำคัญคือ goto frame ที่ต้องการ
สิ่งสำคัญคือ การกำหนดระดับความโปร่งใส ให้เห็นภาพลาง ๆ
ทุก 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

เคยเห็นกล้อง VDO ที่ถ่ายหนังแบบ 360 องศารอบตัว ผมก็คิดจะทำเหมือนกัน เพราะมีกล้อง แต่นึกถึงขนาดน่าจะมีขนาดใหญ่มาก การใช้โปรแกรม Swish น่าจะสามารถแสดงผลแบบ 360 ได้ดีกว่า เพราะมีตัวเลือกให้ทำงานมากกว่ากล้อง VDO หรือแฟ้มประเภท MPG ที่ผมใช้ประจำ แฟ้ม MPG กว่าจะหมุนรอบตัวได้ก็ใช้ขนาดไม่น้อยกว่าแสนแน่ แต่หลักการของ Flash น่าจะน้อยกว่ามาก .. ต้องลองครับ

ขั้นตอนการสร้าง

เปิดโปรแกรม Swish แล้วเลือก New
กำหนดขนาดของงานให้เท่ากับ 128 Pixels * 96 Pixels
Insert, Image.. ที่เตรียมไว้ซึ่งภาพควรกว้างกว่าขนาดงานสัก 3 เท่า
ให้ขอบซ้ายของภาพ ติดของซ้ายของพื้นงาน
จากนั้น Click บนเลข 0 ของ Timeline จนมีจุดแดงล้อมภาพ 6 จุด
จากนั้น Double click ช่อง frame ที่ 0 จะทำให้มี effect แบบ move
จากนั้นให้ขยาย frame ออกเป็น 30 frames ในส่วน Timeline แล้วทดสอบ play
ผลการ play ไม่น่ามีอะไรเกิดขึ้น ต้องไปเลือกในช่อง frame สุดท้ายของ Timeline
ขั้นตอนสุดท้ายต้องใจเย็น ๆ คือการย้ายตำแหน่งภาพ ให้ขอบขวาของงาน และภาพชิดกัน
ผลคือการเลือก Click ที่ frame 0 หรือ frame สุดท้ายผลที่ได้จะต่างกัน

ตัวอย่างคำสั่งที่ใช้เรียกโปรแกรม lesson0401.swf

<object id="lesson0401">
  <embed name="lesson0401" src="lesson0401.swf"
    width="200" height="160"
    type="application/x-shockwave-flash">
  </embed>
</object>

อันที่จริง มีข้อผิดพลาดในการสร้างตัวอย่างเรื่องเส้น .. ให้นึกว่าอะไรคือข้อผิดพลาดในด้านแนวคิด

ตัวอย่าง Timeline และ Layout ของบทเรียนนี้

ถ่ายภาพโยนก 360 องศา

เริ่มด้วยการไปถ่ายภาพมา สิบกว่าภาพ และพยายามถ่ายในตอนที่แสงเปลี่ยนไม่มากคือตอนเที่ยง
นำมาต่อกันด้วย photoshop โดยอาศัยเพียงการตัดภาพ และปรับแสงสว่างเป็นหลัก
รวมภาพทั้งหมดเป็นภาพเดียวที่มีขนาดกว้างมาก ผมเคยทำกว้างถึง 5000 pixels
โปรแกรม Swish จำกัดความกว้างเพียง 3277 หรือประมาณนี้ หากภาพกว้างกว่านี้โปรแกรมจะ hang
ต.ย. yonokfull.jpg, yonokfull.swi และ yonokfull.swf (118 Kb)
ต.ย. waterhot.jpg, waterhot.swi และ waterhot.swf (59 Kb)
ต.ย. 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 เพื่อการรับ และแสดงผล

ขั้นตอนการสร้าง

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

Download : lesson0501.swi 3KB และ lesson0501.swf 10KB

บทเรียนที่ 5.2

การใช้ตัวแปรเก็บค่า แล้วทำให้ Scene อื่นใช้ได้ ดูจากตัวอย่างใน Help ที่มาพร้อมโปรแกรม SwishMax ทำให้ทุกครั้งที่ทำข้อสอบ จะบันทึกคะแนนเข้าตัวแปร เมื่อเข้า Scene ใหม่ ก็นำค่าจากตัวแปรไปแสดงผลเมื่อเข้าสู่ Frame 1 ซึ่งตัวอย่างนี้จบในตัวเอง ไม่เหมือนตัวอย่าง 3.3 ที่ต้องอาศัยโปรแกรม index.php จากข้างนอก ช่วยเลือก Flash แฟ้มใหม่ หรือข้อสอบข้อใหม่มาให้ทำ

ขั้นตอนการสร้าง

ปรับปรุงมาจาก lesson0501.swi
Scene_start ใช้กำหนดค่าเริ่มต้นของตัวแปรใน Frame 1
Scene_stop ใช้แสดงผล ตัวแปรที่ได้จากการทำข้อสอบ ว่าทำกี่ข้อ และถูกกี่ข้อ
Tab Text ให้ Name เป็น x และ y โดยกำหนดค่าเป็น 1 และ 2 ตามลำดับ
Scene ที่เหลือเป็นข้อสอบประกอบด้วยข้อสอบ ข้อที่ คะแนน ปุ่ม right และ ปุ่ม wrong
ปุ่ม Right จะมี Text ที่เก็บตัวเลือกที่ถูกเพียง 1 ตัวเลือก และอยู่เหนือ wrong
on (release) {
keeps = keeps + 1;
keepv = keepv + 1;
nextSceneAndPlay(); }
ปุ่ม Wrong จะมี Text ที่เก็บตัวเลือกที่ผิด มีหลายตัวเลือก Click ตัวใดก็ผิด
on (release) {
keepv = keepv + 1;
nextSceneAndPlay(); }
ตัวอย่างนี้ยังไม่ใช้ random(10) แต่จะใช้ในตัวอย่างหน้า

Download : lesson0502.swi 17KB และ lesson0502.swf 12KB

Click to enlarge
[Screen Sample]

บทเรียนที่ 5.3 :: สุ่มอักษร ใช้สอนอักษรพิมพ์ใหญ่ เด็กอนุบาล

สุ่มตัวเลขภายใน 26 แล้วบวก 65 ก็จะได้รหัส Ascii ที่อยู่ระหว่าง A-Z แล้ว แสดงอักษรที่สุ่มได้ ถ้าเปลี่ยนอักษร ก็เริ่มที่ Frame 1 และสุ่มอักษรใหม่

ขั้นตอนการสร้าง

Script ของ Screen
onFrame (20) { stop(); }
Script ของ ปุ่มเพื่อกด Next
on (release) {
y.text = chr(random(26)+65);
gotoSceneAndPlay("<current scene>",2);
}
Text ที่ใช้แสดงอักษรชื่อ y และกำหนดเป็น target
Text ต้องกำหนดเป็น Dynamic Text เพื่อให้เปลี่ยนได้

Download : lesson0503.swi 11KB และ lesson0503.swf 4KB

บทเรียนที่ 5.4

น่าทึ่งมาก ๆ ที่ทำงานได้แบบนี้ โดย Code ไม่กี่บรรทัด ที่ทึ่ง เพราะเขียนมาหลายภาษา เชื่อว่าไม่มีภาษาคอมพิวเตอร์ใด ควบคุมการทำงานได้ง่ายขนาดนี้ โดยใช้ Code เพียงไม่กี่บรรทัดแบบนี้ ทำให้ผมเห็นแนวการทำเกมแบบ Puzzle ที่เขียนไม่กี่บรรทัดก็เสร็จ แต่เด็ก ๆ จะหลงไหล เพราะมีภาพให้เลือกมากมาย

ขั้นตอนการสร้าง

ส่งภาพ 4 ภาพเข้าไปใน Scene_1
ให้ส่งเข้าไปด้วย import แทนการ copy, paste เพราะจะชัด และขนาดเล็กกว่า
เปลี่ยนชื่อ เป็น i01 ถึง i04 เพื่อประโยชน์ในการอ้างอิง
กำหนดให้ movie มี width และ height เป็น 320,100
แต่ละภาพในส่วนของ Shape ให้ Checkbox ของ Target เป็นจริง เพื่อใช้อ้างอิงใน Script
สำคัญ: 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;
}
```
Script ของ i01 ใส่คำสั่ง onSelfEvent (press) { _width -= 10; } ภาพจะเล็กลงนิดหน่อย
Script ของ i02 ใส่คำสั่ง onSelfEvent (press) { _rotation += 45; } ภาพจะหมุนครั้งละ 45 องศา
Script ของ i03 ใส่คำสั่ง onSelfEvent (press) { _visible = false; } ภาพหายไป
Script ของ i04 ใส่คำสั่ง onSelfEvent (press) { _alpha = 40; } สีภาพจางลง
สรุปได้ว่าผมเขียนโปรแกรมนี้สำเร็จเพราะ 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 องศา ให้คนไทยได้ชมกัน