อะโดบีแฟลช

กำเนิดในปี 1996 (2539) ชื่อ FutureSplash ที่เป็น vector-based animation แล้วปี 2005 (2548) Macromedia Flash ก็ถูกซื้อโดย Adobe แล้วปี 2011 (2554) ประกาศยกเลิกการพัฒนา [Adobe Flash](https://www.sanook.com/hitech/1430657/) แล้วปี 2020 (2563) บริษัท [Adobe](https://blog.adobe.com/) ประกาศยุติการสนับสนุน Flash ในทุก Platform อย่างเป็นทางการ อ่านจากหัวข้อ "Flash & The Future of Interactive Content" พบว่าหมดเวลาของ Flash ซึ่งปัจจุบันมีเทคโนโลยีใหม่ ที่เข้ามาแทนที่ คือ HTML5 มารองรับการทำงานของสื่อมัลติมีเดียบน Web Browser แทน Adobe Flash

อันที่จริงก็น่าจะเลิกพูดถึง Flash ไปนานแล้ว แต่พบว่ามีนักพัฒนาที่ยังเลือกใช้ Flash ในการนำเสนอ Multimedia กันอยู่ หากทำงานด้วย Chrome Browser แล้วต้องการเปิด Media file บน Flash Player มีคำแนะนำให้ดำเนินการ ดังนี้ 1. เปิด Webpage ที่มี Flash File ฝังอยู่แล้วรอที่จะ Play แล้ว 2. คลิ๊กมุมซ้ายของ URL ใน Address bar ที่เขียนว่า Not Secure แล้วคลิ๊ก Site Settings 3. พบ URL และรายการที่มีทั้ง Allow และ Block ให้มองหา Flash แล้วเปลี่ยนจาก Block เป็น Allow แล้วปิด Tab ของ Site Settings ได้ 4. กลับไปยัง Webpage ที่มี Flash File จะพบว่า Play ได้แล้ว หรือไม่ก็กด Reload อีกครั้ง (เรื่องนี้ได้รับคำแนะนำจากคุณเปรม และคุณเบนซ์ ในปี 2563 มาครับ)

สำหรับการทำงานบน Smart phone มีแอพ ชื่อ Puffin Web Browser เป็นแอพที่มี Plug-in สนับสนุน Flash เมื่อผมเปิด /flash /swishmax /e-book หรือ /listen/_atoz.php พบว่า webpage ที่มี Flash ที่ใช้สื่อมัลติมีเดีย ทำงานได้ตามปกติ เพราะมีนิสิตบอกว่า เค้ามีเฉพาะ Smartphone ไม่มีเครื่อง Notebook หรือ Desktop แต่ความต้องการเปิดใช้ Flash Player บน Browser ใน Android Smart phone ก็คงต้องแนะนำให้ทดลอง Puffin Web Browser

แฟล็ช (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; }

ขั้นตอนการสร้าง
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 หายไปทีละตัวอักษร

ขั้นตอนการสร้าง
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. ผลการทดสอบ จะเห็นภาพผู้หญิงลดขนาดเท่าขนาดปกติ

ขั้นตอนการสร้าง
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. ผลการทดสอบ จะเห็นภาพผู้หญิงเลื่อนขึ้น และลง แยกกันอย่างชัดเจน

ขั้นตอนการสร้าง
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 ของบทเรียนนี้
   

ขั้นตอนการสร้าง
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 ของบทเรียนนี้
   

ขั้นตอนการสร้าง
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

ขั้นตอนการสร้าง
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 ของบทเรียนนี้
    

ขั้นตอนการสร้าง
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 ของบทเรียนนี้
   

ขั้นตอนการสร้าง
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
    <? // 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 "<font size=4 face=impact color=white>Your score : ". $oscore; echo "<br><br><a href=http://lampang.thcity.com/quizflash/>Quiz again</a>"; echo "<br><br><a href=http://www.thaiall.com/quizflash/indexo.html target=_blank>Source code</a>"; echo "<br><br><font size=0>Script version 2.0 (Session version)"; echo "</body></html>"; } ?>

ขั้นตอนการสร้าง
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 ที่สอง

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

ถ่ายภาพโยนก 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)

ขั้นตอนการสร้าง
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 ดูสิครับ

ขั้นตอนการสร้าง
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) แต่จะใช้ในตัวอย่างหน้า

ขั้นตอนการสร้าง
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 เพื่อให้เปลี่ยนได้

ขั้นตอนการสร้าง
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 จึงต้องกำหนดต่างจากจุดกลางของภาพ
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 นี่หละครับ และแผนต่อไปคือทำเกม