1) ศึกษาส่วนต่าง ๆ ในโปรแกรม
1. Panels คือส่วนที่ทำให้ใช้งานเครื่องมือได้ง่าย ควรฝึกปิดเปิด Panel
2. ถ้ามีปัญหา Panel บางอย่างหาย ให้ Reset to Defaults
3. หาให้พบว่าส่วนใดคือ Tools Panel, Layout Panel, Shape Panel
4. ในหัวข้อนี้ยังไม่ศึกษาส่วนของ Outline Panel, Script หรือ Options
5. ขั้นตอน การสร้างวัตถุให้เคลื่อนย้ายไปถึงตำแหน่งที่ต้องการ
- คลิ๊ก Ellipse ใน Tools Panel (รูปวงกลม)
- วาดวงกลมใน Layout Panel ที่ตำแหน่งมุมบนซ้ายของแผ่นงาน
- เปลี่ยนสีของ Fill ใน Shape Panel เป็นสีแดง
- คลิ๊ก Frame ที่ 1 ใน Timeline Panel ในบรรทัดของ Ellipse
- คลิ๊ก Add Effect, Move
- ใช้ Mouse ย้าย Ellipse ไปตรงกลางแผ่นงาน จะพบเส้นประแสดงการทิศทางการย้าย
6. จัดเก็บ และทดสอบ
- จัดเก็บ โดยคลิ๊ก Menu Bar, Save ชื่อ Movie1.swi
- ทดสอบ โดยคลิ๊ก Menu Bar, Control, Play Movie (Ctrl + Enter)
- ส่งออกไปไว้ใน c:\Movie1.swf โดยเลือก Menu Bar, File, Export, SWF
- ทดสอบด้วยโปรแกรม IE(Internet Explorer) โดยเปิดแฟ้ม c:\Movie1.swf
7. หยุด Movie ได้ 2 วิธี
- ใน Movie Panel เลือก Stop move at end of movie
- เลือก Scene1 ใน Timeline แล้วกำหนด Add Script, Movie Contorl, Stop()
 

Script Sample

onFrame (10) {

    stop();

}

2. Text, Timeline, Effect

1. ข้อความหนึ่งสามารถมีหลาย effect เพราะมี Timeline ที่ต่างกัน
2. ใน Scene หนึ่ง สามารถมีหลายข้อความแสดงผลใน Frame เดียวกันได้
3. ควบคุมความเร็วค่า Frame Rate ใน Movie Panel ปกติเป็น 12 Frames/sec
4. ขั้นตอน การแทรกข้อความ และใส่ effect
- คลิ๊ก Menu Bar, Insert, Text
- พิมพ์คำว่า HELLO แทน TEXT ใน Text Panel
- Name ของ TEXT เป็น t1 ใน Text Panel
- เปลี่ยนสีข้อความ และขนาดข้อความให้ใหญ่ขึ้น
- คลิ๊ก Frame ที่ 1 ใน Timeline Panel ในบรรทัดของ t1
- คลิ๊ก Add Effect, Slide, In From Left

5. ขั้นตอน การแทรกภาพ และแสดงในเวลาที่กำหนด
- คลิ๊ก Menu Bar, Insert, Image
- คลิ๊ก Frame ที่ 1 ใน Timeline Panel ในบรรทัดของ Image
- คลิ๊ก Add Effect, Remove ทำให้ภาพไม่แสดงผล
- คลิ๊ก Frame ที่ 5 ใน Timeline Panel ในบรรทัดของ Image
- คลิ๊ก Add Effect, Place ทำให้ภาพเริ่มแสดงผลใน Frame ที่ 5
 

กำหนดสี และความเข้มหลัง move

3. การใช้หลาย Scene

1. button มี state ให้ควบคุมเช่น Up/Over/Down/Hit เป็นต้น
2. การสร้างปุ่มควบคุม scene อาจใช้เพียง Text และ on(release) ก็ได้
3. ขั้นตอน การแทรก Scene และแทรก Shape และกำหนด effect ให้กับ Shape
- คลิ๊ก Ellipse ใน Tools Panel (รูปวงกลม)
- วาดวงกลมใน Layout Panel ที่ตำแหน่งมุมบนซ้ายของแผ่นงาน
- เปลี่ยนสีของ Fill ใน Shape Panel เป็นสีแดง
- คลิ๊ก Ellipse ใน Tools Panel (รูปวงกลม)
- วาดวงกลมใน Layout Panel ที่ตำแหน่งมุมล่างขวาของแผ่นงาน
- เปลี่ยนสีของ Fill ใน Shape Panel เป็นน้ำเงิน
- คลิ๊ก Menu Bar, Insert, Scene
- คลิ๊ก Menu Bar, Insert, Scene
- เพิ่ม shape และทำให้แตกต่างกัน ให้กับทั้ง 3 Scene
- กำหนด move ให้กับ shape ในทุก Scene
4. ขั้นตอนการสร้างปุ่ม Next ไป Scene ถัดไปด้วย copy Button
- นำแฟ้ม .swi มาแก้ไขต่อ เพื่อสร้างปุ่มควบคุม Scene
- ไปตำแหน่ง Frame 11 ของแต่ละ Scene แล้วกำหนด Movie Control เป็น stop()

คำสั่งใน Script จะได้ onFrame (11) { stop(); }
- ไป Scene 1 แล้วคลิ๊ก Menu Bar, Insert, Text พิมพ์คำว่า Next แทนข้อความเดิม
- กำหนด Text ใน Text Panel เป็น Static Text
- กำหนดชื่อให้ Text เป็น bnext
- เปิด Script Panel แล้วเพิ่ม Script, Events, Button, on(release)

เลือกคำสั่งอัตโนมัติจาก Add Script, Movie Control, gotoAndPlay, nextSceneAndPlay()
คำสั่งใน Script จะได้ on (release) { nextSceneAndPlay(); }
- คลิ๊ก menu bar, Modify, Convert, Convert to Button
- Right Click บน bnext แล้ว Copy Object
- คลิ๊ก Scene 2 แล้ว paste Object จะได้ bnext ไว้ใช้
- คลิ๊ก Scene 3 แล้ว paste Object จะได้ bnext ไว้ใช้
- เท่านี้ก็จะมีปุ่ม Next ให้ใช้ทุก Scene
5. ขั้นตอนการสร้าง Text : Next ไป Scene ถัดไปใน Scene แรก
- สร้าง 3 Scene ที่มี Shape และ stop() ปิดทุก Scene
- Insert Scene จะได้ Scene 4 ให้ย้ายมาอยู่ก่อน Scene 1
- คลิ๊ก Scene 4 แล้วคลิ๊ก Menu Bar, Insert, Text พิมพ์คำว่า Next แทนข้อความเดิม
- กำหนด Text ใน Text Panel เป็น Static Text
- กำหนดชื่อให้ Text เป็น bnext
- เปิด Script Panel แล้วเพิ่ม Script, Events, Button, on(release)

เลือกคำสั่งอัตโนมัติจาก Add Script, Movie Control, Play()
คำสั่งใน Script จะได้ on (release) { Play(); }
- คลิ๊ก Scene 4 แก้ใน Scene Panel โดยคลิ๊ก Checkbox : Use this scene as a background
- เท่านี้ก็จะมีปุ่ม Next ให้ใช้ทุก Scene เพราะท้ายทุก Scene เป็น stop()
 

4. การใช้หลายวัตถุร่วมกัน

1. ใส่เสียงทั้งแบบ Insert Content หรือ SoundTrack ต่าง Import เข้ามาทั้งคู่

- Insert Content แฟ้ม Mp3 จะเข้ามาเป็น Action Script

- Insert Soundtrack แฟ้ม Mp3 จะเข้ามา Frame มีระยะเวลาใน Timeline

2. นำภาพ bgstar.gif เข้าไปจะสร้างแต่ละภาพแยกเฟลมอัตโนมัติ
- คลิ๊ก Menu Bar, Insert, Image เลือกได้ 3 แบบ
- แบบ One object per frame in a group คือ นำภาพเข้าวัตถุแยก frame แต่ไม่แยก timeline
- แบบ Animated sprite คือ นำภาพเข้าไปใน sprite และแยก timeline อัตโนมัติ
- แบบ New scene คือ นำภาพเข้าไปใน scene ใหม่ และแยก timeline อัตโนมัติ
3. Swishmax ยังไม่ยอมให้ import avi หรือ mpg เข้าไป ถ้านำเข้าต้อง convert เป็น swf ก่อน
- Option 1 : http://www.my-dvd-creator.com/video2flash.htm (3 MB)
- Option 2 : http://www.blazemp.com/screenshots.html (16 MB)
- หลังจากพยายามนำภาพยนต์ หรือวีดีโอเข้าไป พบว่า .swf ไม่เหมาะกับการใช้แฟ้มเหล่านี้
4. ขั้นตอนการสร้าง Slide Image จากหลายภาพ
- Download ภาพจาก http://www.thaiall.com/face/babyface.htm
- คลิ๊ก Menu Bar, Insert, Image เลือก 4 ภาพ
- คลิ๊กที่ frame 1 ของภาพที่ 1 เลือก Add Effect, Place
- คลิ๊กที่ frame 2 ของภาพที่ 1 เลือก Add Effect, Disappear from position, Fade- Burn Out(20)
- คลิ๊กที่ frame 22 ของภาพที่ 1 เลือก Add Effect, Remove
- ทำ Effect กับอีก 3 ภาพให้เหมือนภาพที่ 1
- กด Shift ค้าง เลือกทุก Effect ของภาพที่ 2 แล้วย้ายทั้งหมดไปเริ่ม frame 23
- กด Shift ค้าง เลือกทุก Effect ของภาพที่ 3 แล้วย้ายทั้งหมดไปเริ่ม frame 45
- กด Shift ค้าง เลือกทุก Effect ของภาพที่ 4 แล้วย้ายทั้งหมดไปเริ่ม frame 67
- ทำให้ Scene นี้ใช้จำนวน Frame ทั้งหมด 89 Frame
- ปรับขนาดของ Scene เป็น 200 Pixels * 280 Pixels ให้เท่ากับภาพหญิงสาว

5. การสร้างปุ่ม และเขียน Action
1. ขั้นตอนการสร้างปุ่มวงกลมไป Scene ถัดไป
- นำ Shape รูปวงกลม (Ellipse) จาก Tools Panel มาไว้บนแผ่นงาน
- Fill Color เป็นสีแดง
- เพิ่ม Script, Events, Button, on(release) ให้กับวงกลมเป็น
on (release) { nextSceneAndPlay(); }
- คลิ๊กที่ Frame 1 ของ Scene กำหนด movie control เป็น stop()
- คัดลอก Scene นี้ไปอีก 5 Scene และเปลี่ยนสีของวงกลมเป็นอื่นทุก Scene
- insert Scene ใหม่ แล้วเขียนคำว่า END ใน Text ของ Tools Panel
- คลิ๊กที่ Frame 1 ของ Scene 6 กำหนด movie control เป็น stop()
- คลิ๊ก Scene 1 เปลี่ยน Label เป็น first
- คลิ๊ก Scene 6 แล้วคลิ๊กที่ Text Object
- เพิ่ม Script, Events, Button, on(release) ให้กับ Text เป็น
on (release) { nextSceneAndPlay(); }

2. นำเข้า ellipsenext.swi ไม่พบปัญหา เมื่อเลือกแบบ New scene
- เลือก Insert, Content, ellipsenext.swi
- ถ้าเลือก Animated sprite หรือ One object.. จะพบปัญหา Script เกี่ยวกับ Scene
- ถ้าเลือก New scene จะใช้งานได้ตามปกติ
3. นำเข้า ellipsenext.swf สามารถนำมาใช้ได้ในระดับหนึ่ง
- นำเข้า Shape มาครบ ทำให้นำมาปรับปรุงได้ง่าย
- การจัดระเบียบ Scene ไม่เหมือนที่เคยสร้างไว้
- ถ้าเลือก Include decompiled scripts จะพบข้อผิดพลาดในบางกรณี

6. การใช้ Action : Goto frame, next หรือ previous
1. ขั้นตอนการสร้างปุ่มหลายปุ่ม
- นำแฟ้ม ellipsenext.swi มาแก้ไข
- นำ Text จาก Tools Panel มาไว้บนแผ่นงาน พิมพ์ 3 ใน Webdings Font ได้ลูกศร Back
- นำ Text จาก Tools Panel มาไว้บนแผ่นงาน พิมพ์ 4 ใน Webdings Font ได้ลูกศร Front
- ปรับขนาด และตำแหน่งวงกลมในแต่ละ Scene ให้เห็นความก้าวหน้าจากการ Click ลูกศร
- คลิ๊ก Scene 6 เปลี่ยน Label เป็น last และ Scene 1 เคยตั้งเป็น first แล้ว
- คัดลอก Text และใส่ Script ตามความเหมาะสม เช่น
on (release) { prevSceneAndPlay(); }
on (release) { nextSceneAndPlay(); }
on (release) { gotoAndPlay("first"); }
on (release) { gotoAndPlay("last"); }
on (release) { gotoAndPlay(5); }
on (release) { gotoSceneAndPlay("last", 5) }
2. นำเข้าภาพ computer.gif มาเป็น frame
- ไม่เลือก background เพราะเป็นพื้นดำ
- เลือกมาเป็นกลุ่มแบบ Sprite
- ขนาดของ .gif ใกล้เคียงกับ .swf มาก ตัวอย่างนี้ขนาด 3 KB

7. การสร้างข้อสอบอย่างง่าย (แบบถูกผิด)
1. สร้าง 3 Text คือ คำถามเช่น 5 + 6 = 10 คำว่า ถูก และคำว่า ผิด
2. ทั้ง 3 Text มีชื่อเป็น question, right และ wrong
3. ใน Text ผิด ให้มี code ด้านล่างนี้ แต่ใน ถูกให้ลบบรรทัดที่เขียนว่า r = r + 1; ออก
on (release) { r = r + 1;
nextSceneAndPlay(); }
4. ใน Scene_1 ให้กำหนดค่าเริ่มต้นให้กับ r และควรมีคำสั่งนี้ใน Scene_1 เท่านั้น
onLoad () { r = 0; }
5. Copy Scene และ Paste Scene แล้วเปลี่ยน โจทย์เป็น 7 + 2 = 9
6. ใน Text ถูก ให้มี code ด้านล่างนี้ แต่ใน ผิดให้ลบบรรทัดที่เขียนว่า r = r + 1; ออก
on (release) { r = r + 1;
nextSceneAndPlay(); }
7. ถ้าคัดลอก Scene_1 มาเป็น Scene_2 ให้ลบ onLoad() ของ Scene_2 เพื่อไม่ให้กำหนดค่าเริ่มต้นซ้ำ
8. ให้ insert scene ขึ้นมาใหม่ แล้วสร้าง Text ชื่อ result เป็นแบบ dynamic
9. เขียน Script ใน scene_3 ให้ result = r ใน onLoad()
10. ทุก Scene กำหนด Movie Control เป็น Stop ใน Scene
11. กำหนด Stop playing at end of movie ใน Movie Panel
12. สร้าง Text ใหม่ใน Scene_3 แสดงคำว่า Back
13. คำสั่งใน on (release) ของ Back คือ gotoAndPlay("Scene_1");
 

8. การสร้างข้อสอบอย่างง่าย (แบบเติมคำ)
1. วางแผนสร้างข้อสอบ เติมคำ อย่างง่าย
2. สร้าง 3 Text คือ 5 + 6 = ? และ ช่องว่างรับค่า และ ปุ่ม Send
3. ทั้ง 3 Text มีชื่อเป็น question, answer และ send
4. ทั้ง 3 Text เป็นแบบ Static, Input และ (Dynamic หรือ Static)
5. สำหรับ answer เลือกเป็น black border with white background
6. Script ของ Scene_1
onLoad () { r = 0; answer = ""; }
7. Script ของ text ชื่อ Send
on (release) {
if (answer == "11"){ r = r + 1; }
nextSceneAndPlay();
}
8. เพิ่ม Movie Control เป็น stop() ใน frame สุดท้ายของทุก scene
9. copy scene_1 เป็น scene_2 เพื่อเพิ่มข้อสอบข้อใหม่
10. ลบ r = 0; ใน onLoad() ตั้งแต่ Scene_2 เป็นต้นไป แล้วแก้โจทย์ และคำตอบในปุ่ม Send
11. copy scene เป็นข้อต่อไป และแก้ไขตาม scene_2
12. scene สุดท้ายสร้าง text ชื่อ result แบบ dynamic
13. กำหนดให้ result = r ใน onLoad() ของ scene สุดท้าย
14. คำตอบ (answer) เป็น ภาษาไทย ที่มีสระไม่ได้
- คำที่ใช้ใน input text ไม่ได้ เช่น ไก่ น้ำ ข้าง งู
- คำที่ใช้ใน input text ได้ เช่น กบ มด ขาว ลาย
- input text รับภาษาไทยขณะทดสอบไม่ได้ ต้องทดสอบใน .swf
 

9. การสร้างข้อสอบอย่างง่าย (แบบเติมคำ และสุ่ม)
1. วางแผนสร้างข้อสอบ สุ่มจากอาร์เรย์
2. ข้อมูลภาษาไทยเกี่ยวกับสระ มีปัญหาเมื่อใช้ input หรือ dynamic
3. ทั้ง 3 Text มีชื่อเป็น question, answer และ send
4. ทั้ง 3 Text เป็นแบบ Dynamic, Input และ Dynamic
5. สำหรับ answer เลือกเป็น black border with white background
6. มี Scene_1 เพียง 1 scene แต่ใช้ตัวแปร และอาร์เรย์เปลี่ยนค่าเข้ามาแสดงผล
7. ใน onLoad() กำหนดข้อสอบในอาร์เรย์ไว้ 5 ข้อ สำหรับข้อที่ต้องรับ สระอา จะมีปัญหาบ้าง

<font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10.5pt;"><font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10pt;">onLoad () { r = 0; i = 0; ar =new Array; ans =new Array; ar[i] = "1 + 2 = ?"; ans[i]= "3"; i++; ar[i] = "7 + 8 = ?"; ans[i]= "15"; i++; ar[i] = "What is a cat in thai?"; ans[i]= "แมว"; i++; ar[i] = "What is a fish in thai?"; ans[i]= "ปลา"; i++; ar[i] = "What is a pen in thai?"; ans[i]= "ปากกา"; i++; } onFrame (1) { j = random(i); question = ar[j]; answer = ""; } onFrame (2) { stop(); }</span></font></font></span></font></font>

8. ปุ่ม Send ทำหน้าที่ตรวจคำตอบ เปลี่ยนคำถาม และไป frame 1 ใหม่

<font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10.5pt;"><font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10pt;">on (release) { if (answer == ans[j]){ r = r + 1; } i = i - 1; ar[j] = ar[i]; ans[j] = ans[i]; if (i == 0) nextSceneAndPlay(); else gotoSceneAndPlay("<current scene>",1); }</span></font></font></span></font></font>

9. Scene ที่สองมีเพียง text แบบ dynamic ชื่อ r รับคะแนนจาก scene แรก
10. กำหนดให้ result = r ใน onLoad() ของ scene ที่สอง
 

10. สร้าง Movie เป็นภาพยนต์เคลื่อนไหว 2 เรื่อง

1. สร้างภาพยนต์เรื่อง พระอาทิตย์ของฉัน
- สร้างภูเขา ด้วย Bezier Tool และ Reshape เลือก smooth ตามจุดที่ปรากฎ
- สร้างพระอาทิตย์ ด้วย Ellipse Tool และใช้ Motion path กำหนดตำแหน่งโคจร
- สร้างเมฆ ด้วย Ellipse Tool ซ้อนกัน แล้ว Group เป็น sprite
- เพิ่ม effect: move ให้กับเมฆ เพื่อให้ขยับ ขณะพระอาทิตย์โคจรผ่าน
- สร้างถนน ด้วย Pencil Tool ให้คดเคี้ยวบนภูเขา
- สร้างรถยนต์ด้วย Rectangle Tool และใช้ Motion path กำหนดเส้นทาง
- ใช้ Rotate Tool กำหนดให้รถหันหัวไปตามเส้นทางอย่างถูกต้อง
2. สร้างภาพยนต์เรื่อง แก้วน้ำตก
- สร้าง Shape 3 Shape ทำให้เป็นแก้วไวน์
- เลือกทั้ง 3 Shape แล้ว Grouping : Group as Group เพื่อให้จัดการได้ง่าย
- ย้ายจุดศูนย์กลางมาอยู่ฐานแก้วด้านขวา แล้วกำหนด move แบบ rotate ให้เป็นแก้วตก
- กำหนด Use this scene as a background ให้กับ Scene_1 ใน Scene Panel
- Insert Scene และวาด Ellipse สีดำ
- ทำให้ดูเหมือนไหลออกจากแก้ว และอื่น ๆ อีกมากมาย ที่ต้องใจเย็น ๆ
- ปุ่ม Replay สร้างใน Scene แรก แต่ใช้ได้ในทุก Scene

sun swi + swf


glasses swi + swf

11. ขั้นตอนการสร้าง Preload 5 วินาที
1. สร้าง Scene_1 ใช้แสดง Preload
2. สร้าง Scene_2 ใช้แสดงผลหลังจบ Preload ตัวอย่างนี้วาดรูปวงกลมให้เห็น 1 วง
3. กำหนด Stop playing at end of movie ใน Movie Panel
4. สร้าง Shape รูปสี่เหลี่ยม 2 Shape สีแดง และสีดำ ซ้อนทับกันอยู่
5. กำหนด move ขนาด 60 frame เปลี่ยนขนาดของสีแดง ให้ขยายจนทับสีดำ เมื่อครบ 60 frame
6. สร้าง Text ชื่อ t แบบ Dynamic ไว้รับค่า และแสดง % ของการ Load
7. onEnterFrame() ของ Scene_1 สำหรับ เพิ่มค่าให้ text ชื่อ t
t = int(_root._currentframe / 60 * 100);
8. สามารถใช้ตัวแปร _totalframes คือ จำนวน Frame ทั้งหมด สามารถนำมาใช้กำหนด Preload ได้

preload1 swf + swi

12. การใช้ Random of Character
1. การใช้ Script อย่างง่าย
1.1 สร้าง Text ชื่อ c1 ถึง c3 ตามลำดับ โดยค่าเริ่มต้นเป็น A B และ C
- Text แบบ Static ใช้ on (release) ได้
- Text แบบ Dynamic เปลี่ยนค่าได้
- Text แบบ Input รับค่าจากแป้นพิมพ์ได้ และเปลี่ยนแปลงค่าได้
1.2 สร้าง Shape ที่มี Script จัดการกับ c2
on (release) { if (c2 == "Z") c2 = "A"; else c2 = chr(ord(c2) + 1); }
- ord() ใช้แปลงตัวอักษร เป็นรหัส Ascii
- chr() ใช้แปลงรหัส Ascii เป็นตัวอักษร
1.3 onLoad() ของ Scene_1 ให้ค่าเริ่มต้นของ c2 เป็น  c2 = chr(random(26) + 65);
1.4 การใช้ _alpha ใน on (release) ของ c1
_alpha คือค่าความเข้มของวัตถุ ถ้ากำหนด _alpha = 10 จะมีสีเพียง 10% ของทุกวัตถุ
ถ้ากำหนด target ให้กับ c1 และกำหนด c1._alpha = 10 ก็จะมีผลเฉพาะกับ c1 เท่านั้น
on (release) {
if (c1._alpha < 10) c1._alpha = 100; else c1._alpha = c1._alpha - 20;
}
1.5 สร้าง Scene_2 และ Scene_3 มีวัตถุที่ move 10 frames
1.6 เพิ่ม movie control : stop() ต่อ frame สุดท้ายในทุก scene
1.7 เพิ่ม c3 = _totalframes; ใน on (Load) ของ Scene_1
2. การทดสอบโปรแกรมนี้มี on (release) 2 ตำแหน่ง
2.1 เมื่อคลิ๊ก วงกลมสีแดง ทำให้ c2 เปลี่ยนไป
2.2 เมื่อคลิ๊ก ตัวอักษร A ทำให้สี หรือ _alpha ลดลง
 

randomchar swf + swi

13. การสร้างนาฬิกา
1. สร้างเข็มวินาที  (มีทั้งหมด 60 กรณี)
- กำหนดขนาด Movie เป็น 100 * 100 และ frames/sec = 1
- วาดวงกลมเต็มกรอบ และเส้นที่ 12 นาฬิกา
- ให้เส้นหนา 3 และย้าย Anchor ของเส้นมาที่กลางวงกลม
- กำหนด Add Effect เป็น move ให้กับเส้น ขนาด 30 frames
- หมุนปลายด้านบนลงมาด้านล่างแบบตามเข็ม และกำหนด x angle = 180
- กำหนด Add Effect เป็น move ให้กับเส้น ขนาด 30 frames
- หมุนปลายด้านล่างขึ้นด้านบนแบบตามเข็ม และกำหนด x angle = 360
- ยกเลิก Stop playing at end .. ของ movie
- ถ้า x angle เป็น + จะ rotate ตามเข็มนาฬิกา
- ถ้า x angle เป็น - จะ rotate ทวนเข็มนาฬิกา

2. สร้างเข็มนาที (มีทั้งหมด 3600 กรณี)
- นำงานวินาทีมาแก้ไข เพิ่มเข็มนาทีสีน้ำเงินให้แต่สั้นกว่าเดิม
- ย้าย Anchor ของเส้นมาที่กลางวงกลม
- convert เข็มวินาทีเป็น sprite
- ย้าย onLoad ของ scene ไปเป็น onload ของ sprite
- ให้เส้นนาทีหนา 3 และย้าย Anchor ของเส้นมาที่กลางวงกลม
- กำหนด Add Effect เป็น move ให้กับเส้น ขนาด 1800 frames
- หมุนปลายด้านบนลงมาด้านล่างแบบตามเข็ม และกำหนด x angle = 180
- กำหนด Add Effect เป็น move ให้กับเส้น ขนาด 1800 frames
- หมุนปลายด้านล่างขึ้นด้านบนแบบตามเข็ม และกำหนด x angle = 360

3. สร้างเข็มชั่วโมง (ใช้ 3600 * 60 ไม่ได้ เพราะจำกัดที่ 16000 frames)
- สร้างเข็มนาฬิกาใหม่เป็นเข็มสั้น สีเหลือง ชี้ที่ 12 นาฬิกา
- กำหนดชื่อ h ที่เป็น target ให้กับเข็มชั่วโมง ซึ่งอยู่ใต้ scene_1
- ความหมายของ hour % 12 ทำให้ได้ค่าเป็น 1-12 เพราะ hour ได้ 1-24
- เข็มนี้มีปัญหา .. ไม่ชี้กลางชั่วโมง .. ให้หาวิธี
- ค่า _rotation เริ่มที่ 0 ไปถึง 360 ดังนั้น 360/12 จึงเป็นเข็มชั่วโมง

กำหนด script ใน Scene_1
onLoad () {
t = new Date();
second = t.getSeconds();
gotoandplay(second);
}

swf(101KB) + swi(6KB)

กำหนด script ใน Scene_1
onLoad () {
t = new Date();
minute = t.getMinutes();
gotoandplay(minute * 60);
}
กำหนด script ใน sprite ของเข็มวินาที
onFrame (1) {
t = new Date();
hour = t.getHours();
_root.h._rotation = (360 / 12) * (hour % 12);
}

14. นับหินข้ามฝาก
1. สร้าง Shape รูปวงกลม 3 object และ Text Object สำหรับบันทึกคะแนน
2. สามารถใช้ Mouse หยิบลูกสีข้ามเส้น แล้วคะแนนจะเพิ่ม
3. Script ของ Scene_1 เพื่อกำหนดค่าเริ่มต้น
onLoad () { b = 0; }
4. Script ของ Shape แต่ละก้อน

15. ส่งค่าจาก .swf ไปให้ .php แบบ get หรือ post (นำเสนอ 3 ตัวอย่าง)
1. ตัวอย่างการทำงานร่วมกันของ sendv.swf เป็นตัวส่ง และ index.php เป็นตัวรับ
- ให้สร้าง text แบบ input text และกำหนดเป็น target
- ให้ variable ของ text เป็น a และ default value = abc
- Script ของ shape เพื่อสั่งเปิดเว็บเพจ
on (release) {
getURL("http://www.yonok.ac.th/?x=" + a.text ,"_blank");
}
- Script ของ index.php ใน http://www.yonok.ac.th แสดงค่าที่รับจาก sendv.swf
<? echo $_REQUEST["x"]; ?>
- ตัวอย่างนี้ทดสอบใน SwishMax ไม่พบปัญหา แต่ถ้า export แล้วทดสอบผ่าน C:\ จะใช้งานไม่ได้
- ต้องทดสอบกับ Web Server ซึ่งเป็นปัญหาเดียวกับคำสั่ง Javascript("alert('Wrong')");
2. ตัวอย่างแสดงการส่งค่าจาก sendv.swf ไปให้ v.php เพื่อเก็บลงแฟ้ม v.txt
- สร้างแฟ้ม sendv.swf เพื่อนำนาที และวินาที ส่งให้ v.php นำไปจัดเก็บลงแฟ้ม
- Script ของ sendv.swf
onLoad () { t = new Date();
x = t.getMinutes();
y = t.getSeconds(); 
loadVariables("http://127.0.0.1/v.php","get"); }
- Script ของ v.php นำค่า x และ y เขียนลงแฟ้ม v.txt แบบ append
<? $x = fopen("v.txt","a");
fputs($x,$_GET["x"].":".$_GET["y"]."\n");
fclose($x);
?>
3. จากตัวอย่างขั้นต้น อาจเปลี่ยน v.php ให้ทำหน้าที่ส่งอีเมล โดยรับข้อมูลจาก .swf
<? mail($to,$subject,$msg,$from); ?>
 

ไม่มีตัวอย่างแฟ้ม ให้ click
เพราะเป็นตัวอย่าง ที่ไม่ซับซ้อน
จึงใช้การอธิบายด้วย Script เป็นหลัก

<font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10.5pt;"><font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10pt;"><font face="Tahoma"><span style="font-family:Tahoma,sans-serif; font-size:10pt;"><body bgcolor=#ffffdd> <form action=getfs.htm method=get target=getfs> <input name=d><input type=submit> </form> <iframe name=getfs src=getfs.htm?d=hello width=600 height=600> </iframe></span></font></span></font></font></span></font></font>

getfsm.htm + getfs.htm

17. รับค่าจากแฟ้มข้อมูลด้วย loadvariables from v.txt

1. สร้างแฟ้ม v.txt ไว้ใน Root Directory มีขนาด 11 Bytes
a=5&b=6&c=7
2. Script ของ Scene_1 ใน onLoad() สำหรับ Load แฟ้มข้อมูล
loadvariables("v.txt","get");
หรือ loadvariables("http://127.0.0.1/v.txt","get");
ทดสอบดูค่าของ a ใน debug panel ด้วย trace(a);
3. Script ของ Shape รูปวงกลม สำหรับ คำนวณ และส่งค่าให้กับ text ทั้ง 3
on (release) {
x.text = a + b + c;
y.text = a;
z.text = int(x.text) + int(y.text);
}

18. การส่งค่าจาก HTML ให้กับ .swf
1. ส่งข้อมูลจาก x.htm ให้ x.swf แสดงผล ตามค่าที่ส่งไป
2. Script ของ x.htm
<object>
<embed src=x.swf width=100 height=80 FlashVars="a=abc&b=def"></embed>
</object>
3. สร้าง Text ชื่อ textinswishmax ใน x.swi หรือ x.swf เพื่อรับตัวแปรจาก FlashVars
4. Script ของ x.swf คือ on (release) { textinswishmax = a + b; }
 

19. เกมฝึกพิมพ์ดีดอย่างง่าย แบบลบคำจากรายการ
1. โปรแกรมลบข้อความจากรายการคำศัพท์ที่แสดงด้านบน เมื่อพิมพ์คำศัพท์ด้านล่างแล้วกดปุ่ม Enter
2. Script ของ text ชื่อ in สำหรับ ควบคุมเหตุการณ์ เมื่อกดปุ่ม enter
on (keyPress("<Enter>")) {
l = length(in.text);
d = dsp.text;
i = d.indexof(in.text);
f1 = d.substr(0,i);
f2 = d.substr(1 + i + l,length(d));
if (l > 0 && i > -1) { dsp.text = f1 + f2; }
in.text = "";
cnt.text = length(dsp.text);
}
3. Script ของ text ชื่อ replay สำหรับ ส่งโจทย์ใหม่เข้าไปใน dsp.text
on (release) {
dsp.text="world"+chr(13)+"hat"+chr(13)+"computer"+chr(13)+
"windows"+chr(13)+"status"+chr(13)+"microsoft"+chr(13)+"education";
cnt.text = length(dsp.text);
}
4. Text มี 4 Object: in, replay, cnt, dsp เป็นแบบ input, static, dynamic, dynamic
5. กำหนด Font ภาษาไทย เช่น CordiaUPC จะทำให้แสดงผลภาษาไทยได้
6. กำหนด Text ของ in ไม่เป็น Render Text ทำให้ตัวอย่างนี้รับภาษาไทยไม่ได้
7. ต้อง Clear Temporary Internet Files เมื่อทดสอบอีกครั้งใน IE
 

20. เกมฝึกพิมพ์ดีดอย่างง่าย แบบภาษาไทยตกทีละคำ
1. สร้าง Text ชื่อ in และกำหนด Render Text และให้ X=Y ใน Transform Panel
2. ยกเลิกการ Stop playing เมื่อจบ Movie เพื่อให้ Movie ฉายซ้ำอย่างไม่สิ้นสุด
3. ยกเลิก Mutiline text ของ Advance Option ใน Text Panel ของ in ป้องกันการรับหลายบรรทัด
4. สร้าง 3 Text ทำหน้าที่รับค่า แสดงเป้าหมาย และผลการเปรียบเทียบ ด้วย in, dsp และ debug
5. Script ของ Scene_1
onLoad () {
wrd = 0;
i = 0;
s = new array();
s[i++] = "one"; s[i++] = "ไม้ไผ่"; s[i++] = "น้ำหวาน"; s[i++] = "ไข่ไก่";
s[i++] = "วิหก"; s[i++] = "รู้ที่"; s[i++] = "ต๊กโต"; s[i++] = "eight";
twrd = i;
_root.dsp.text = s[wrd];
_root.dsp._Y = 5;
}
6. Script ของ Text ชื่อ in สำหรับ แก้ปัญหา Render Text และรหัสภาษาไทยแบบ 14 และ 1

<font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10.5pt;"><font face="Microsoft Sans Serif"><font face="Microsoft Sans Serif"><span style="font-family:Tahoma,sans-serif; font-size:10pt;"><font face="Tahoma"><span style="font-family:Tahoma,sans-serif; font-size:10pt;">onChanged() { c = in.text; c1 = c.split(">"); if(c1.length > 2) { c2 = c1[2].split("<"); c = c2[0]; } x = ""; for(i=0;i<length(c);i++){ if (ord(substr(c,i,1)) >47) { x = x + "" + ord(substr(c,i,1)); } else { if (ord(substr(c,i,1)) == 14){ i = i + 1; } x = x + "" + (ord(substr(c,i,1)) + 160); } } xin = x; c = _root.dsp.text; x = ""; for(i=0;i<length(c);i++){ x = x + "" + ord(substr(c,i,1)); } xdsp = x; debug.text = xin + chr(13) + xdsp; if (xin == xdsp) { wrd = wrd + 1; if (wrd == twrd) { wrd = 0; } dsp.text = s[wrd]; _root.dsp._Y = 5; in.text = ""; debug.text = ""; } } onEnterFrame() { _root.dsp._Y += 1; } </span></font></span></font></font></span></font></font>

7. ค่าของ text เมื่อทดสอบใน Swishmax ไม่ส่ง HTML Code ออกมาเหมือนการทดสอบใน IE สำหรับ Render Text
8. ตัวอย่างค่าที่ได้จาก text แบบ Render Text เมื่อรับใน IE แต่ไม่พบใน Debug ด้วย trace ของ Swishmax
<P ALIGN="LEFT"><FONT FACE="CordiaUPC" SIZE="16" COLOR="#000000"
LETTERSPACING="0" KERNING="0">a</FONT></P>
9. พบว่าค่าจาก ord() ที่เป็นภาษาไทยแต่ละอักษร จะได้ 14 และ 1 สำหรับ ก ส่วน ฮ จะได้ 14 และ 46
10. การปรับขนาดของ Text ให้คลิ๊กที่จุดเขียว แทนจุดขาว หลังกำหนด X=Y ใน Transform Panel
11. ทดสอบรับภาษาไทยของ Text ใน Swishmax พบปัญหาการแสดงผลเป็นสี่เหลี่ยม แต่ไม่พบปัญหาเมื่ทดสอบใน IE
12. ต้อง Clear Temporary Internet Files เมื่อทดสอบอีกครั้งใน IE

typingth swi + swf

Method of Object และ Event

String

เช่น trace("abc".length); // 3

{string}.charAt({position})

{string}.charCodeAt({position})

{string}.concat({string...})

{string}.indexOf({substring})

{string}.indexOf({substring},{start})

{string}.lastIndexOf({substring})

{string}.lastIndexOf({substring},{start})

{string}.length

{string}.slice({start},{end})

{string}.split()

{string}.split({sep})

{string}.split({sep},{limit})

{string}.substr({start})

{string}.substr({start},{length})

{string}.toLowerCase()

{string}.toUpperCase()

{string}.trim()

{string}.trimLeft()

{string}.trimRight()

{string}.fromCharCode({ascii})

Math

เช่น trace(Math.random());

Math.abs(number)

Math.ceil(number)

Math.degrees(radians)

Math.floor(number)

Math.max(number,number...)

Math.min(number,number...)

Math.Pi

Math.pow(base,power)

Math.radians(degrees)

Math.random()

Math.randomInt(max)

Math.randomRange(lo,hi)

Math.round(number)

Math.sign(number)

Math.sqrt(number)

Events ..

Frame Events

onFrame ()

onLoad ()

onEnterFrame ()

Button Events

on (press)

on (release)

on (rollOver)

on (rollOut)

on (dragOver)

on (dragOut)

on (releaseOut)

on (keyPress)

Self Events

onSelfEvent (press)

onSelfEvent (release)

onSelfEvent (rollOver)

onSelfEvent (rollOut)

onSelfEvent (dragOver)

onSelfEvent (dragOut)

onSelfEvent (releaseOut)

onSelfEvent (keyPress)

onSelfEvent (mouseEvent)

Panel

มี Panel อีกหลายแบบ ที่ผมไม่ได้นำเสนอในที่นี้ เพราะพบเห็นไม่บ่อย แต่ที่นำเสนอนี้ ท่านควรรู้จักและฝึกใช้งาน ให้ชำนาณ เช่น Movie, Shape, Text, Script, Outline, Timeline, Debug ถ้านักพัฒนาย้าย panel จนไม่สามารถย้ายกลับที่เดิมได้อย่างสมบูรณ์สามารถเลือก Panels, Reset to Defaults