App Inventor 2 : Magic 8-Ball

App Inventor2

App Inventor 2 : Magic 8-Ball

magic8 001หลายคนคงเคยเล่นเกมเสี่ยงโชคที่ชื่อว่า Magic 8-Ball โดยเฉพาะสาวๆ แต่บางครั้งการเสี่ยงทายก็ไม่ค่อยจะตรงตามความต้องการของเรา วันนี้ผมจึงมาแนะนำวิธีสร้าง application ง่ายๆ ด้วย App inventor 2 เพื่อสร้าง Magic 8 ball เอาไว้ทำนายเรื่องราวต่างๆ ตามที่เราต้องการ หรือใครจะเขียนไว้ทำนายอาหารเที่ยงก็ได้ เพราะบางทีเราก็คิดไม่ออกว่าอยากกินอะไรดี เอาล่ะ ลงมือกันเลย

เตรียมข้อมูลก่อนลงมือ
ก่อนที่จะลงมือ ขอให้จัดเตรียมไฟล์ภาพและเสียงให้พร้อมก่อนใช้งาน คือ ภาพของ magic ball และไฟล์เสียงประกอบ หากไม่มี สามารถ download ไฟล์ตัวอย่างได้จากรายการต่อไปนี้

1. image_8_ball.jpg

2. Cha_Ching.mp3

หรือสามารถ download ได้จาก App Inventor Media Library. 

ขั้นตอนที่ 1 สร้างปุ่ม และใส่เสียง

1. เปิดเว็บ เข้าไปยังหน้าสำหรับสร้าง Project ตั้งชื่อ project ว่า Magic8Ball

 talk 002

 magic8 002

 2. upload ไฟล์ภาพและเสียงที่จะใช้ ไปเก็บไว้ที่ media

 magic8 003

 3. เพิ่มปุ่มเข้ามาในหน้าออกแบบ

 magic8 004

 

 ลบข้อความของปุ่มออกให้เป็นช่องว่าง และกำหนดภาพของปุ่มให้เป็น ภาพ image_8_ball.jpg

 magic8 005

 

4. เพิ่ม player เข้ามาใน project ของเรา

 magic8 006

 

กำหนด source เป็นไฟล์เสียง cha_ching.mp3

 magic8 007

 

5. สร้างคำสั่ง เมื่อเกิดการกดปุ่ม
เปลี่ยนมุมมองการทำงานเป็นแบบ Block

 magic8 008

 คลิกที่ Button1 จะปรากฏคำสั่งที่ใช้งานได้ เลือก When Button1.Click ลากมาวางลงบนแผ่นงาน

 magic8 009

  

คลิกที่ Player1 จะปรากฏคำสั่งขึ้นมา เลือก call Player1.Start ลากมาวางใน block ของ when Button1.Click ดังภาพ

 magic8 010

  

ขั้นตอนที่ 2 สร้างคำทำนาย
จากขั้นตอนที่ 1 เมื่อเราทดสอบโปรแกรม โดยกดที่ปุ่มลูกบอล application จะส่งเสียงออกมา ในขั้นตอนนี้ เราจะต้องสร้าง label ขึ้นมา 2 ตัว ตัวแรกเป็นคำอธิบายวิธีการทำนาย ตัวที่ 2 จะเป็นคำทำนายที่ได้จากการสุ่มลูกบอลแต่ละครั้ง เปลี่ยนการทำงานกลับมาที่ Designer

 magic8 011

1. เพิ่ม layout แบบ VerticalArrangement เข้ามาในแผ่นงาน

 magic8 012

  

กำหนดความกว้างให้เป็น Fill parent คือ การกำหนดให้มีความกว้างเท่ากับ layout หลัก ในที่นี้คือ ให้แสดงเต็มความกว้างหน้าจอ

 magic8 013

 

2. เพิ่ม Label จำนวน 2 ตัว เข้ามาใน layout

 magic8 014

  

เปลี่ยนข้อความของ label1 เป็น “ตั้งจิตอธิฐาน แล้วถามลูกบอล”
เปลี่ยนข้อความของ label2 เป็น “แตะที่ลูกบอลเพื่อรับคำทำนาย”
กำหนดความกว้างของ label เป็น Fill parent... และจัดเรียงอักษร แบบ center : 1

 magic8 015

 

จะได้ดังภาพ

 magic8 016

 3. กำหนดคำสั่งในการทำงาน โดยเปลี่ยนมาที่มุมมอง Blocks คลิกที่ Label2 จะปรากฏคำสั่ง เลื่อนหาจนเจอคำสั่ง set Label2.Text to ลากมาวางในกล่อง when Button1.Click โดยวางไว้ก่อนคำสั่ง call Player1.Start ดังภาพ

 magic8 017

 

4. สร้าง list คำทำนายจาก magic 8-ball คลิกที่ Lists จะปรากฏคำสั่ง เลือกคำสั่ง pick a random item list ลากไปวางต่อกับคำสั่ง set Label2.Text to

 magic8 018

 

5. สร้าง list คำทำนาย โดยคลิกที่ lists แล้วเลือกคำสั่ง make a list ลากไปลางต่อท้ายคำสั่ง pick a random item list

 magic8 019

 

เพิ่มจำนวน item ใน list โดยคลิกที่รูปเฟือง หน้า make a list จะปรากฏคำสั่งขึ้นมา ให้ลากคำสั่ง item ไปเพิ่มในรายการของ list ตามจำนวนที่ต้องการ ประมาณ 8 item

 magic8 020

 สร้างข้อความสำหรับ item แต่ละตัว โดยคลิกที่ Text แล้วลากกล่องข้อความเปล่า มาต่อท้าย item แต่ละตัว แล้วเขียนคำทำนายลงไป

 magic8 021

 ตัวอย่างคำทำนาย อาจจะเปลี่ยนไปตามความต้องการของผู้เขียนโปรแกรมครับ

 magic8 022

 เมื่อทดลองโปรแกรม ก็จะได้ผลคำทำนายออกมา

 magic8 001

  

Add comment

Security code
Refresh