ขั้นตอนการสร้างปุ่มเปลี่ยนภาพ

1. เปิดLibrary Panelโดยการกดปุ่ม F11 คลิกเครื่องหมาย

2. กำหนดชื่อที่ช่อง Name โดยใช้ชื่อว่า Button เลือก Behavior เป็น Button แล้วคลิกปุ่ม OK ใส่สีให้ปุ่มตามต้องการ

3. คลิก Layer1 คลิกปุ่มแล้วจัดตำแหน่งรูปให้อยู่ตรงกลางให้ Insert Keyframeโดยการกดปุ่ม F6 ไปยัง FrameOver,Down,Hit คลิกที่คำว่า Scene1

ใส่ตัวอักษรให้กับปุ่มกด

1. คลิกปุ่ม ใน Library Panelคลิกที่ Button แล้วลากมายังด้านซ้ายของพื้นที่ Stage

2. คลิกเมนู View>Grid>show Grid กดปุ่ม <Alt+Click Mouse> เพื่อ Copy รูปสี่เหลี่ยมลงมาด้านล่างอีก 3 รูป

3. คลิกปุ่ม ให้พิมพ์ตัวเลขลงบนปุ่ม 4 ปุ่ม แล้วเอาภาพที่ต้องการมาใส่ที่แตกต่างกันมาใส่ทั้ง 4 ปุ่ม

กำหนดค่าให้กับปุ่มกดทั้งหมด

1. คลิกปุ่มคลิกบนพื้นที่สีดำที่ไม่ใช่ภาพของปุ่มแรกซึ่งอยู่ด้านบนให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOver) {

2. gotoAndStop("1");

3. }

2. คลิกบนพื้นที่สีดำที่ไม่ใช่ภาพของปุ่มที่ 2 ให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOver) {

2. gotoAndStop("6");

3. }

3. คลิกบนพื้นที่สีดำที่ไม่ใช่ภาพของปุ่มที่3 ให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOver) {

2. gotoAndStop("11");

3. }

4. คลิกบนพื้นที่สีดำที่ไม่ใช่ภาพของปุ่มที่4 ให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOver) {

2. gotoAndStop("16");

3. }

5. คลิกกลับไปยังเฟรมที่ 1 บน Action Panel ให้ใส่ค่า stop( ); ให้กับรูปภาพ

ใส่ภาพให้กับปุ่มกดแรก

1.ให้ Insert Keyframe โดยการกดปุ่มF6 ไปยังเฟรมที่ 2

2. กดปุ่ม <Esc> พร้อมกับคลิกไปบนตัวอักษรแล้วกดปุ่ม Delete คลิกเฟรมที่ 2 บน Property Panel ให้ใส่ค่า Frame lable เป็น 1

3. คลิกปุ่มบนพื้นที่สีดำทีไม่ใช่ภาพของปุ่มแรกซึ่งอยู่ด้านบน บนให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOut) {

2. gotoAndplay(1);

3. }

ใส่ภาพให้กับปุ่มกดที่ 2

1.ให้ Insert Keyframe โดยการกดปุ่มF6 ไปยังเฟรมที่ 4

2. กดปุ่ม <Esc> พร้อมกับคลิกไปบนตัวอักษรแล้วกดปุ่ม Delete คลิกเฟรมที่ 4 บน Property Panel ให้ใส่ค่า Frame lable เป็น6

3. คลิกปุ่มบนพื้นที่สีดำทีไม่ใช่ภาพของปุ่มที่ 2 ซึ่งอยู่ด้านบน บนให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOut) {

2. gotoAndplay(1);

3. }

ใส่ภาพให้กับปุ่มกดที่ 3

1.ให้ Insert Keyframe โดยการกดปุ่มF6 ไปยังเฟรมที่ 6

2. กดปุ่ม <Esc> พร้อมกับคลิกไปบนตัวอักษรแล้วกดปุ่ม Delete คลิกเฟรมที่6 บน Property Panel ให้ใส่ค่า Frame lable เป็น11

3. คลิกปุ่ม บนพื้นที่สีดำทีไม่ใช่ภาพของปุ่มที่3 ซึ่งอยู่ด้านบน บนให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOut) {

2. gotoAndplay(1);

3. }

ใส่ภาพให้กับปุ่มกดที่ 4

1.ให้ Insert Keyframe โดยการกดปุ่มF6 ไปยังเฟรมที่ 8

2. กดปุ่ม <Esc> พร้อมกับคลิกไปบนตัวอักษรแล้วกดปุ่ม Delete คลิกเฟรมที่8 บน Property Panel ให้ใส่ค่า Frame lable เป็น16

3. คลิกปุ่ม บนพื้นที่สีดำทีไม่ใช่ภาพของปุ่มที่4 ซึ่งอยู่ด้านบน บนให้ใส่ค่า Action ดังต่อไปนี้ให้กับรูปภาพ

1. on ( rollOut) {

2. gotoAndplay(1);

3. }

2. คลิกเมนู Insert >Scene เพื่อกำหนดค่าถัดไป ให้ Insert Frame โดยการกดปุ่ม F5 ไปยังเผรมที่ 9

กำหนดค่าสุดท้ายก่อนการแสดงผล

1. คลิกปุ่ม คลิกเฟรมที่ 1

2. บน Action Panel ให้ใส่ค่า Action ดังต่อไปนี้

1. ifFrameLoaded ("Scene 1",8){

2. gotoAndPlay(Scene1",1);

3. }

3. ให้ Insert Keyframe โดยการกดปุ่ม F6 ไปยังเฟรมที่ 2

4. บน Action Panel ให้ใส่ค่า Action ดังต่อไปนี้

1. gotoAndPlay(1);

5. กดปุ่ม <Ctrl+Enter> เพื่อดูผลลัพธ์

ขั้นตอนการสร้างปุ่มเปลี่ยนสี

1) ใน Library Panal โดนกด F11 คลิกเครื่องหมาย

2) กำหนดชื่อที่ช่องName โดยใช้ชื่อว่า Color เลือกMovie Clip

3) สร้างรูปสี่เหลี่ยม คลิก Color Mixer เพื่อผสมสีและคลิกที่ช่อง fill style เลือก Linear คลิกที่ช่องปรับค่าสี ซึ่งอยู่ทางด้านซ้าย โดยให้เลือกเป็นสีน้ำเงิน

4) คลิกที่ช่องปรับค่าสีซึ่งอยู่ทางด้านขวา โดยให้เลือกเป็นสีดำ ซึ่งมีค่า RGB =0 และค่า Alpha =100 คลิกปุ่ม และกำหนดค่าความโค้งของมุมเหลี่ยมให้เป็น 6

5) ที่ช่องStroke Color ให้เลือกสีเป็นแบบโปร่งใส คลิกที่ช่อง Fill color 1ครั้ง วาดรูปสี่เหลี่ยมแนวตั้งไปบน Stage แล้วคลิกปุ่ม

6) คลิกที่รูปสี่เหลี่ยม หลังจากนั้นจะมีจุด 3 จุด เกิดขึ้นบนรูปสี่เหลี่ยมให้หมุนสัญลักษณ์รูปวงกลมที่อยู่ตรงมุมขวาด้านบน ทวนเข็มนาฬิกาไปยังแนวนอน คลิกสัญลักษณ์รูปวงกลมที่อยู่ตรงกลางแล้วลากเมาส์ไปให้ชิดขอบด้านบน

7) คลิกที่รูปภาพ 1 ครั้ง แล้วจัดตำแหน่งให้อยู่ตรงกลาง ให้ Insert Keyframe โดยกดปุ่ม F6 ให้ไปยังเฟรมที่ 5

8) คลิกที่ช่องปรับค่าสีซึ่งอยู่ทางด้านซ้ายโดยให้เลือกเป็นสีเหลือง ให้Insert Kayframe โดยการกดปุ่ม F6 ไปยังเฟรมที่ 10 ก็ทำอย่างนี้ไปเรื่อยๆดังที่กล่าวมาจนถึงเฟรมที่ 15 และ 20โดยเลือกสีตามใจชอบไม่ให้ซ้ำกัน

9) ให้ลากเมาส์จากเฟรมที่ 1-19 ให้เป็นแถบสีดำ คลิกที่ Property panelที่ช่อง Tween เลือก shape

10)ใน Library Panalกำหนดชื่อที่ช่องว่า button เลือก graphic คลิกปุ่มที่ช่อง Stroke Color ให้เลือกสีเป็นแบบโปร่งใสวาดรูปสี่เหลี่ยมแนวนอนไปยัง Stage คลิก เลเยอร์ 1 คลิกปุ่มเพื่อจัดให้อยู่ตรงกลาง

11) ใน Library Panalให้เลือกเป็น Button 2 เลือก Movies clip คลิกเครื่องหมาย เพื่อเพิ่ม เลเยอร์ 3 อัน คลิกเลเยอร์ 1วาดรูปสี่เหลี่ยมบน Stage คลิกปุ่มลูกศรดำใช้เมาส์เลื่อนไปที่ด้านซ้ายและด้านขวาของรูปสี่เหลี่ยม จนเกิดพอยต์เตอร์รูปครึ่งวงกลมที่ปลายเมาส์ จากนั้นให้ปรับส่วนโค้งของทั้งสองด้านจากเส้นตรงเป็นเส้นโค้ง คลิกที่รูปจัดให้อยู่ตรงกลาง

12) คลิกเลเยอร์ 2 ในLibrary Panalคลิกที่ Color แล้วลากมาบนพื้นที่ของรูปสี่เหลี่ยม ในกรณีที่รูปที่อยู่ด้านหลังมีขนาดใหญ่กว่าให้คลิกที่รูปสี่เหลี่ยมที่อยู่ด้านหลัง 1 ครั้งคลิก ปุ่มปรับลดขนาด รูปสี่เหลี่ยมด้านนอกให้มีขนาดพอดีแล้วจัดให้อยู่ตรงกลาง

13) คลิกเลเยอร์ 3 ใน Library Panalลาก button เข้ามายังพื้นที่ของรูปสี่เหลี่ยม ปรับขนาดให้พอดีหากรูปใหญ่เกินไป คลิกที่ช่อง Color แล้วเลือกประเภทสี Alpha 30%

14) ใน Library Panalคลิกเครื่องหมาย ชื่อ button 3 เลือก movie clip ใน Library Panalให้ลาก Button 2 มายังพื้นที่ stage ปรับขนาดของรูปสี่เหลี่ยมย่อให้เป็นรูปเล็กและจัดให้อยู่ตรงกลาง

15) ในLibrary Panalคลิกเครื่องหมายเดิมจากข้อที่แล้ว โดยใช้ชื่อว่า Button 4 เลือก button คลิกเครื่องหมายเพื่อเพิ่มเลเยอร์ 1 อัน คลิกเลเยอร์ 1 ในLibrary Panalเลือก button 3 แล้วลากมายัง stage จัดให้อยู่ตรงกลาง

16) ให้ insert keyframe โดยการกดปุ่ม F6 ไปยังเฟรมที่เหลืออีก 3 เฟรม คือ OVER DOWN HIT คลิกเฟรม over พร้อมกับคลิกปุ่มสี่เหลี่ยม บนproperty panel ให้เปลี่ยนค่าที่ช่อง color แล้วเลือกประเภท Alpha ให้เป็น 80%

17) คลิกเฟรม Downพร้อมกับคลิกปุ่มสี่เหลี่ยมบนproperty panel ให้เปลี่ยนค่าที่ช่อง Color เป็น Alpha ให้เป็น 0% ให้ insert keyframe โดยการกดปุ่ม F6 ไปยังเฟรม over ของเลเยอร์ 2 ให้พิมพ์คำว่า Click Here ด้านบนของปุ่มสี่เหลี่ยมคลิกที่คำว่า Scene 1

18) คลิกปุ่มลูกศรดำ ในLibrary Panal คลิกที่ button 4 แล้วลากมายังพื้นที่ stage จัดให้อยู่ตรงกลางกดปุ่ม Alt พร้อมกับคลิกเมาส์ที่ปุ่มรูปสี่เหลี่ยมแล้วขยายไปยังด้านบนและด้านล่างอีกอย่างละ 2 รูป รวมแล้วจะมีทั้งหมด 5 รูป

19) กดปุ่ม Ctrl+Enter เพื่อดูผลลัพธ์

ขั้นตอนการสร้างแผนที่

ด้วยโปรแกรม Macromedia Flash MX2004

1) สร้างพื้นหลังโดยใช้สีอ่อนโดยใช้เครื่องมือ properties ปรับขนาดแผนที่เป็น 800*600และเลือกปุ่ม rectangle tool [r] เพื่อสร้างถนน (ถนน 1 เส้น ต่อ 1 layer)

2) เมื่อสร้างถนนเสร็จก็ทำการใส่สีให้กับพื้นถนน พร้อมกับเขียนชื่อถนนให้เรียบร้อย พร้อมกับตกแต่งด้วยการสร้างตึกต่างๆให้ดูดี

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

1) กดปุ่ม F11 ไปที่ library เลือก behavier เป็นgraphic แล้วสร้างรถตามความต้องการ

2) เมื่อสร้างเสร็จแล้วก็ให้ลากรถจาก library ไปใส่ไว้ที่ "แผนที่" ซึ่งเป็นงานแรกของเราแล้วกด scene 1 โดยลากที่คำหรือชื่อใน libraryห้ามลากที่รูปโดยเด็ดขาด

[ช่อง library]

การทำให้รถเคลื่อนที่โดยการเลือกที่ time line โดยเลือกที่รถ และกำหนดระยะเวลาที่ time line ประมาณ 50-60 วินาที แล้วคลิกขวา เลือก creat motion tween และคลิกขวาอีกครั้งเพื่อเลือกinsert keyframeเป็นอันเสร็จ(หากต้องการเปลี่ยนการเคลื่อนที่ของรถในแต่ละครั้งให้แก้ไขที่ time line)