Thai Coding

เริ่มต้นหัดเขียน JQuery

admin — Sat, 12 May 2012 23:29:03 +0000

ถ้าพูดถึง Javascript ที่เป็น library แล้วคงไม่มีใครไม่รู้จัก JQuery เพราะเป็น Library ที่นิยมมาก JQuery เป็นตัวช่วยในการพัฒนา Website ที่ใช้ javascript เพราะตัว JQuery นั้นจะมีตัวช่วยทั้งในการเลือกและควบคุม element ต่างๆที่เป็น tag html ต่างๆ ทั้งที่เรากำหนดชื่อ หรือ คลาส อย่างง่ายได้รวมไปถึงการใช้งาน ajax และมี UI ต่างๆที่สวยงามให้เรียกใช้ได้มากมาย

ส่วนขั้นตอนการใช้งานก็ไม่มีอะไรมากแค่ไป download file จาก http://jquery.com/ มาแล้วทำการ include หรือเรียกใช้ใน file ที่เราต้องการเท่านั้นเอง ส่วนไฟล์ที่ทำการ download จะมีให้เลือก 2 แบบคือแบบ min จะเป็นไฟล์ที่ผ่านการบีบอัดให้เราใช้งานและมีขนาดไฟล์ขนาดเล็ก ส่วนที่เป็นชื่อไฟล์ไม่มีคำว่า min จะไม่มีการบีบอัดเหมาะสำหรับผู้ที่ต้องการนำโค้ด JQuery มาพัฒนาต่อให้เป็นแบบฉบับของตัวเอง

ขั้นแรกในการเขียนก็ต้องใส่ tag script บริเวณของ tag head ของ html จากนั้นเราก็เขียน javascript ตามโค้ดตัวอย่างข้างล่างนี้ครับ



	 Thaicoding : Example JQuery

จะเห็นว่า jquery เวลาจะอาจถึง tag ที่มี class จะใช้ $(“.ชื่อคลาส”) ส่วน ID ก็จะใช้ $(“#ชื่อid”) เพื่ออาจ element ที่เราต้องการส่วน $(document).ready นั้นจะเป็นการเรียกใช้งานหรือทำงานโค้ดบ้างอย่างตอนหน้าเพจถูกโหลด ของดีของ Jquery คือเราสามารถใส่ function ใน ส่วน event ต่างๆเพิ่มเข้านี้ ก็เป็นัตวอย่างง่ายๆนะครับสำหรับคนที่เริ่มต้นจะเขียน JQuery

php framework CodeIgniter การใช้งาน MVCเบื้องต้น

admin — Sat, 12 May 2012 23:23:44 +0000

php framework CodeIgniter นั้นเป็น framework ที่ออกแบบมาเพื่อให้ใช้งานแบบ mvc model นั้นก็คือจะแยกเป็น 3 ส่วนที่จะรับผิดชอบในการแต่ละส่วนไปแบ่งออกเป็น M คือ model จะเป็น class ที่ทำหน้าที่ติดต่อฐานข้อมูลซึ่งเราจะเขียนเป็นคลาสที่มีคุณสมบัติและข้อมูลใกล้เคียงกับตารางในฐานข้อมูลที่เราต้องการข้อมูล ต่อมา V View คือส่วนที่จะรับผิดชอบแค่การแสดงผลในส่วนที่จะให้ผู้ใช้เห็นเท่านั้น ต่อมาสุดท้ายคือ C Controller จะเป็นตัวควบคุมว่าผู้ใช้ได้ทำอะไรลงไปในการใช้งานจะดึงข้อมูลจาก model หรือแสดงผลจาก view เป็นต้น

codeigiter นั้นจะแบ่งสามส่วนนี้อยู่ใน folder application ซึ่งมันก็จะแยกออกเป็น 3 folder อีกคือ

โดยให้เราสร้างไฟล์ใหม่ใน 3 folder นี้ตามส่วนที่เราต้องการจะสร้าง โดยถ้าเป็น model จะ extends มาจาก CI_Model แต่ถ้าเป็น controller ให้ extends มาจาก CI_Controller ส่วน View นั้นก็ไม่ต้องมีการ extends ใดๆมันเป็นแค่ไฟล์ php ที่มีการใช้ tag html และ script ต่างๆเพื่อแสดงผลเท่านั้นเอง ที่นี้เรามาเริ่มกันดีกว่า จากครั้งก่อนในบทความที่แล้ว การติดตั้งเริ่มใช้งาน php framework CodeIgniter เราได้ทำการสร้างไฟล์ main.php ในส่วนของ controller แล้วเราก็จะแก้ไขให้มันทำการเรียกใช้ไฟล์ model กับ view โดยให้เราสร้างไฟล์ model ใน folder models มีชื่อไฟล์ว่า message_model.php โดยมี code ดังนี้

message;
}

public function setMessage($newmessage){
$this->message = $newmessage;
}
}
?>

ต่อมาส่วนของไฟล์ view ก็จะสร้างไฟล์ที่ชื่อว่า viewpage.php มีโค้ดดังนี้



View Page

สุดท้ายคือส่วนของ controller ที่มีการแก้ไขคือไฟล์ main.php

load->model('message_model');
$this->message_model->setMessage("Thaicoding.net");

$data['displayMessage'] = $this->message_model->getMessage();

$this->load->view('viewpage',$data);
}
}

?>

เมื่อลองเปิด url http://localhost/code/index.php/main ก็จะได้ผลลัพธ์ดังรูปครับ

Tags: CodeIgniter, mvc, mvc คือ, php framework, php script, ภาษา php, สอน php

การติดตั้งเริ่มใช้งาน php framework CodeIgniter

admin — Sat, 12 May 2012 23:13:53 +0000

CodeIgniter นั้นเป็น framework ที่ใช้ในการพัฒนาเว็บโดยใช้ภาษา php ซึ่งคำว่า framework นั้นก็คือกรอบของงานเพื่อไม่ให้เราพัฒนาออกนอกลู่นอกทาง หรือว่าลงทะเลไป และมันมีประโยชน์ในการร่วมพัฒนาหลายคน โดยขั้นตอนในการติดตั้งนั้นเริ่มแรกให้ทำการ download จากทางเว็บ http://codeigniter.com/ เมื่อโหลดเสร็จแล้วให้ทำการแตกไฟล์ zip โดยผมแตกไฟล์แล้วทำการเปลี่ยนชื่อ folder เป็น code ซึ่งจะมีโครงสร้างดังรูป หลังจากนั้นให้เรานำไปวางบน web server หรือ server จำลองในเครื่องก็แล้วแต่

เมื่อลองพิมพ์ url เพื่อเข้าไปดูโค้ดที่เราเอาไปไว้บน web server แล้วก็จะเห็นเป็นแบบในรูป ซึ่ง url ของผมจะเป็น http://localhost/code/ ซึ่งก็แสดงว่า web server ของเราไม่น่าจะมีปัญหา

ต่อมาจะเป็นการกำหนดว่าให้ controller ไหนเป็น controller เริ่มต้นของเว็บเราซึ่งตัว codeigniter นั้นมันเป็น framework ที่รองรับการเขียนเว็บหรือพัฒนาเว็บ แบบ mvc อยู่แล้วโดยเราสามารถกำหนด controller เริ่มต้นจากไฟล์ใน application\config\routes.php โดยสังเกตบรรทัด

$route['default_controller'] = "welcome";

โดยชื่อ welcome จะเป็นไฟล์ controller เริ่มต้นโดยให้เราใส่ชื่อไฟล์แต่ไม่ต้องมีนามสกุล .php ต่อมาเราก็จะลองสร้างไฟล์ controller ขึ้นมาสักอัน โดยโครงสร้าง mvc ของ codeigniter นั้นจะเป็นในรูปแบบ folder ซึ่งจะอยู่ใน folder application โดยจะเป็น folder models, controllers, views ตามลำดับนั้นคือถ้าเราจะเพิ่ม controller ก็ให้ไปสร้างไฟล์ใน folder controller นั้นเอง โดยผมจะสร้างไฟล์ที่ชื่อว่า main.php โดยมีโค้ดดังนี้

สังเกตว่าเราจะเขียนเป็น class โดยมีการสืบทอดมาจาก CI_Controller เพื่อเป็นการบอกว่ามันเป็น class ที่ทำหน้าที่ controller ในแบบของ framework ตัวนี้นั้นเอง จากนั้นให้เปลี่ยนค่า config ในไฟล์ routes.php จาก welcome มาเป็นคำว่า main ดู

$route['default_controller'] = "main";

จะเห็นว่ามันได้เปลี่ยนไปใช้งาน controller main เป็น controller เริ่มต้นแแล้ว และอีกอย่างมันจะมองว่า function index เป็นฟังก์ชันแรกในการทำงานอีกด้วย ส่วนการตั้งค่าต่างๆนั้นก็มีอีกอยู่ในหลายไฟล์สามารถลองหาข้อมูลหรือดูจาก document ในหน้าเว็บของมันก็ได้ ส่วนการกำหนดการเชื่อมต่อฐานข้อมูลนั้นจะอยู่ใน file database.php ก็จะมีการกำหนด username, password ในการเข้าฐานข้อมูลและ ip หรือชื่อของ server database นั้นเอง

framework ตัวนี้ถือว่าดีหรือว่าที่เค้าพูดกันคือ lightweight หรือว่าเบาสะดวกนั้นเองคือในการอัพขึ้น server เราแค่แก้ค่า config นิดหน่อยแล้วมันก็สามารถทำงานได้แล้วและยืดหยึนให้เราพัฒนาตามแบบของเรา แต่ข้อเสียที่สู้ frame work อื่นได้ก็คือการที่มันไม่มีตัว generate class ในการติดต่อแก้ไขข้อมูลจาก database เหมือน frame work หลายๆตัวที่สามารถทำได้

Tags: การติดตั้งเริ่มใช้งาน CodeIgniter, การติดตั้งเริ่มใช้งาน php framework, ลง CodeIgniter

แนะนำ Starling Framework – The Open Source Game Engine For Flash

admin — Sat, 12 May 2012 22:54:17 +0000

ช่วงนี้ผมได้ลองเล่นลองเขียน game flash ผมจึงลองค้นหา flash game engine ดูก็พบ Starling Framework ซึ่งเป็นเหมือ Framework เพื่อให้เราไปต่อยอด เท่าที่ผมลองเขียนมาสักเล็กน้อยนั้น ขอบอกว่าถ้าใครกำลังบอกว่า game engine ของ flash ที่จะเขียนโค้ดเหมือน game ในรูปแบบ PC แล้วละก็ตัวนี้เลย เพราะมันมีการแบ่งเป็นคลาสเพื่อเรียกในการสร้าง object คำนวณ event ที่จะเกิดขึ้นในแต่ละฉากทำให้เรามองภาพในการพัฒนาเกมส์ได้ง่ายขึ้น ต่างจากการใช้ adobe flash กับ action script 2 อย่างในการพัฒนาที่ต้องสร้าง frame แล้วก็ใส่ script ในแต่ frame แต่ตัว Starling Framework นั้นทำให้เรารู้สึกเหมือนพัฒนาเกมส์โดยการเขียนโค้ดและพัฒนาเกมส์ในรูปแบบทั่วไปที่ทำภาพ แล้วก็เขียนโค้ดเพื่อกำหนดเหตุการณ์ แต่ได้ภาพสวยเหมือน flash และอยู่ใ platform flash แต่ ตัวนี้นั้นจะรันบน flash player 11 นะครับเพราะฉะนั้นเครื่องไม้เครื่องมือในการพัฒนานั้นก็ต้องอัพเดตนิดหน่อย ส่วนตัวผมนั้นใช้ adobe flash builder 4.5 แต่มันก็ต้องทำให้รัน flash player 11 ซึ่งวิธี่เซ็ตค่าของผมนั้นมันค่อยข้างที่จะมั่ว เลยไม่ได้เอามาเขียนในบทความก็ต้องขออภัยด้วยนะครับ ส่วนอีกเรื่องที่เกี่ยวกับ starling framework นั้นก็คือเกมส์ดังระบบโลกอย่าง angry bird นั้นก็ใช้ตัวนี้ในการที่จะทำเกมส์บน plateform flash นะครับ

Tags: flash game engine, Open Source Game Engine For Flash, หัดเขียนเกมส์ flash, แนะนำ Starling Framework

เขียน Android การใช้งาน Single TouchScreen

admin — Sun, 01 Jan 2012 06:38:34 +0000

ในมือถือ android หรือว่าพวก tablet นั้นความสามารถที่ต่างจากมือถือรุ่นเก่านั้น มีอยู่อย่างหนึ่งคือ หน้าจอแบบสัมผัสหรือที่เรียกว่า TouchScreen นั้นเอง แต่การ touch screen นั้นก็มีแบ่งออก 2 แบบคือ single touch screen กับ multi touch screen ซึ่งวันนี้ผมจะเอาตัวอย่างการใช้งานแบบ single touch screen มาให้ดูก่อน โดยครั้งนี้ผมจะใช้ api android 2.3.3 ซึ่งก็ลองอัพเวอร์ชั่นดูบ้างว่าโค้ดมีปัญหาอะไรรึเปล่าเพราะสังเกตว่ามือถือที่ออกมาหลังๆๆจะไล่ออก 2.3 กันซะส่วนใหญ่ยิ่งรุ่น top แพงๆๆก็ไป 4.0 ละ โดยผมได้สร้างโปรเจ็คที่ชื่อ THTouchScreen โดยใช้ api 2.3.3 มี min SDK Version 10 ครับโดยสร้างตามรูปเลยครับ

เมื่อสร้างเสร็จเราก็เริ่มลงโค้ดกันเลยครับโดยการใช้งาน Touch Screen นั้นต้องทำการ implement OnTouchListener ซึ่งต้องทำการ import android.view.View.OnTouchListener; เข้ามา โดยตัวอย่างนี้จะมีการสร้าง TextView ขึ้นมาตัวหนึ่งเพื่อแสดงผลการ Touch Screen ที่เกิดขึ้น โดยใช้ String Builder เป็นตัวเก็บข้อมูลก่อนไปกำหนดค่าให้ TextView โดย String Builder ก็เป็นคลาสตัวช่วยในการใช้งานของ String อันหนึ่ง

โค้ดทั้งหมดครับ

package com.thaicoding.THTouchScreen;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.TextView;

public class THTouchScreen extends Activity implements OnTouchListener {
	StringBuilder builder = new StringBuilder();
	TextView textView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        textView = new TextView(this);
        textView.setText("Touch and drag (one finger)");
        textView.setOnTouchListener(this);
        setContentView(textView);
    }

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		builder.setLength(0);

		switch(event.getAction()){
		case MotionEvent.ACTION_DOWN:
			builder.append("down, ");
			break;
		case MotionEvent.ACTION_MOVE:
			builder.append("move, ");
			break;

		case MotionEvent.ACTION_CANCEL:
			builder.append("cancel, ");
			break;
		case MotionEvent.ACTION_UP:
			builder.append("up, ");
			break;
		}
		builder.append(event.getX());
		builder.append(",");
		builder.append(event.getY());
		String text = builder.toString();

		Log.d("THTouchTest", text);
		textView.setText(text);
		return true;
	}

}

เมื่อพิมพ์โค้ดเสร็จแล้วก็ลองรันดูครับแต่อย่าลืมถ้าคุณเลือก version ตามผมก็ต้องสร้าง emulation ตัวที่มี version ตรงกันนะครับ

ผลลัพธ์การรันจะเห็นว่าจะมีการแสดงสถานะและตำแหน่งของจุดที่เราไปสัมผัสโดยในตัวอย่างนี้เป็นแบบ Single Touch Screen ซึ่งจะตรวจจับแค่จุดเดียวเท่านั้น ในสถานนะของ Touch Screen นั้นก็ประกอบด้วย Down คือการที่เรากดลงไปบนหน้าจอ , Up คือ การที่เอานิ้วออกจากหน้าจอ, Move คือการที่เราเอานิ้วไปสัมผัสบนหน้าจอแล้วเคลื่อนที่ , Cancel จะเป็นการยกเลิกใช้หน้าจอสัมผัส ซึ่งจากโค้ดตัวอย่างจะเห็นว่าใน method OnTouchListenerนั้นจะใช้ event.getAction() เพื่อหาว่าสถานะปัจจุบันของหน้าจอสัมผัสนั้นคืออะไรแล้วทำการเก็บข้อมูลเพื่อไปกำหนดค่าให้ TextView แล้วแสดงผลต่อไปส่วนตำแหน่งของจุดที่เราสัมผัสนั้นก็จะเก็บเป็นตำแหน่ง x, y ซึ่งใช้คำสั่ง event.getX() และ event.getY() โดยที่ event นั้นจะเป็นตัวแปรของ MotionEvent ครับ

นี้ก็เป็นตัวอย่างการใช้งาน Single TouchScreen ครับซึ่งเป็นโค้ดอย่างง่ายลองไล่ดูโค้ดนะครับเพื่อความเขาใจมากขึ้น และเนื่องในวันนี้เป็นวันปีใหม่ 2555 ขอให้ทุกท่านจงประสบแต่ความสำเร็จและความสุขนะครับจาก thaicoding.net

Download SourceCode

Tags: Single TouchScreen, จอสัมผัส, มือถือ android, เขียน android, เขียนโปรแกรม android, โปรแกรม android

การสร้าง ActiveList แล้วเรียกใช้งาน class อื่น

admin — Tue, 13 Dec 2011 15:32:42 +0000

การสร้าง ActiveList แล้วเรียกใช้งาน class อื่น

ในการพัฒนา android app นั้นเมื่อโปรแกรมมีการทำงานที่ซับซ้อนนั้น หลักการพื้นฐานของ oop ก็น่าจะเป็นการสร้าง class เพื่อที่จะสร้าง object ที่ทำงานต่างกันไป วันนี้หลังจากหายไปนานไม่ได้เขียนบทความเลย เอาตัวอย่างการสร้าง Active List เมื่อ เลือก list แล้วก็จะไปเรียกใช้งาน class ต่างๆที่มีอยู่ครับเราไปดูกันเลย

หลังจากที่สร้างโปรเจ็คเสร็จแล้วให้เราทำการแก้ไขไฟล์หลัก ActiveList.java ให้ทำการ extends มาจาก ListActivity

เพื่อที่เราจะทำการหน้าตาแบบ list ได้ โดยมีโค้ดดังนี้

package com.thaicoding.activelist;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ActiveList extends ListActivity {
    /** Called when the activity is first created. */
	String menu[] = {"Helloword", "Thaicoding"};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter(this,
                android.R.layout.simple_list_item_1, menu));
    }
}

จากนั้นลองรันดูจะได้หน้าต่างแบบนี้

ซึ่งเมนูเราสร้างมาจาก String array ที่ชื่อว่า menu นั้นเองส่วนรูปแบบ style นั้นก็จะกำหนดโดย android.R.layout.simple_list_item_1 ซึ่งลองใช้แบบต่างๆดูได้ครับ ต่อมาเราจะมาสร้าง class ตามชื่อเมนูครับมีคลาสชื่อว่า? Helloword, Thaicoding

โดยทั้ง 2 คลาสไม่มีอะไรมาให้มัน extends มาจาก? Activity โดยไม่มีการทำงานอะไรมากเพิ่งแค่สร้าง TextView จากนั้นก็จะแสดงผลออกทางหน้าจอซึ่งต่างกันเฉพาะคำเท่านั้น

โค้ดทั้ง 2 คลาส

package com.thaicoding.activelist;

import android.app.Activity;
import android.widget.TextView;
import android.os.Bundle;

public class Thaicoding extends Activity {

	TextView textView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        textView = new TextView(this);
        textView.setText("Thaicoding.net");
        setContentView(textView);
    }
}

package com.thaicoding.activelist;

import android.app.Activity;
import android.widget.TextView;
import android.os.Bundle;

public class Helloword extends Activity {
	TextView textView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        textView = new TextView(this);
        textView.setText("HelloWord");
        setContentView(textView);
    }
}

เมื่อสร้างคลาสทั้ง 2 แล้วเราก็มากำหนด action ให้กับคลาสหลักให้ทำการเพิ่ม onListItemClick โดยมีโค้ดทั้งหมดดังนี้

package com.thaicoding.activelist;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ActiveList extends ListActivity {
    /** Called when the activity is first created. */
	String menu[] = {"Helloword", "Thaicoding"};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter(this,
                android.R.layout.simple_list_item_1, menu));
    }

    @Override
    protected void onListItemClick(ListView list, View view, int position,long id)
    {
        super.onListItemClick(list, view, position, id);
        String testName = menu[position];
        try {
            Class clazz = Class
                    .forName("com.thaicoding.activelist." + testName);
            Log.d(testName, testName);
            Intent intent = new Intent(this, clazz);
            startActivity(intent);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
}

หลักจากที่เราเขียนโค้ดเสร็จแล้วก็กำหนดสิทธิการรันของ class ในไฟล์ AndroidManifest.xml โดยเพิ่ม tag ใหม่จะได้ดังนี้

เมื่อเสร็จแล้วลองรันแล้วเลือกดูครับมันก็จะได้หน้าตาประมาณนี้ครับ

หลักการสำคัญให้สังเกต onListItemClick ให้ดีครับจะมีการใช้งาน

Class clazz = Class.forName(“com.thaicoding.activelist.” + testName);

ซึ่ง testName นั้นจะเป็นชื่อ class ที่อยู่ในตัวแปรเมนูนั้นเอง ซึ่งในการใช้งานแบบนี้เราต้องดูเรื่องของ package ของภาษาจาวาให้ดีนะครับ หวังว่าจากตัวอย่างนี้จะทำให้หลายคนเอาไปประยุกต์ใช้งานได้นะครับ

Download SourceCode

No tags for this post.

การสร้างสี่เหลี่ยมด้วย action script 3.0

admin — Sun, 13 Nov 2011 16:29:36 +0000

หลังจากที่ adobe ประกาศว่าจะยกเลิกการพัฒนา flash player บนมือถือเล่นเอาคนที่อยู่ในวงการ flash คิดหนักกันพอสมควรมามันจะเป็นอย่างไรกันต่อไป แต่อย่างไรผมก็จะเขียนบทความต่อไปละกัน ครั้งนี้จะเป็นการสร้างสี่เหลี่ยมโดยใช้ action script ครับเรามาเริ่มกันเลยดีกว่า ขั้นแรกเราก็สร้างไฟล์ fla ที่เป็น action script 3.0 ก่อนครับ

จากนั้นเมื่อเราสร้างไฟล์เสร็จแล้วให้ทำการคลิกที่ timeline แล้วก็คลิกขวาแบบในรูปเพื่อทำการเขียน action script

จากนั้นก็เขียนโค้ดตามนี้ครับ


import flash.display.MovieClip;

var mc:MovieClip = new MovieClip();

mc.graphics.beginFill(0xFF0000);

mc.graphics.drawRect(0,0,120,120);

mc.graphics.endFill();

addChild(mc);

เมื่อเขียนเสร็จก็ลองกด ctl+enter เพื่อทำการ test movie ดูครับจะเห็นว่ามีการสร้างสี่หลี่ยมสีแดงเกิดขึ้นครับ

การทำงานของโค้ดก็คือ เรามีการสร้าง movie clip ขึ้นมา 1 ตัวเพราะการสร้างสีเหลี่ยมนั้นต้องอาศัย movie clip เป็นตัวสร้างเพราะ movie clip นั้นมันจะเป็นตัว graphics ที่สามารถสร้างรูปร่างต่างๆ รวมไปถึงการแสดงภาพจากไฟล์ภาพด้วย เมื่อเราสร้าง movie clip ขึ้นมาแล้วจากนั้นเราก็เริ่มกำหนดสีให้มันด้วย method beginFill ซึ่งต้องใส่ค่าให้มัน โดยผมกำหนดสีเป็นสีแดงโดยการกำหนดสีนั้นต้องใส่เป็นเลขฐาน 16 ซึ่งเป็นค่าของสีครับจากนั้นเราก็สั่งให้มันทำการวาดสีเหลี่ยมโดยใช้ method drawRect เมื่อเราทำการวาดรูปต่างๆเสร็จแล้วเราก็ควรจบด้วย method endFill เพื่อเป็นการบอกว่าจบการวาดหรือกำหนดรูปร่างของ movie clip ครับ เมื่อเราทำการสร้างและกำหนดรูปร่างให้ movie clip แล้วเราก็ทำให้มันแสดงบนผลลัพธ์ของ stage โดยใช้คำสั่ง addChild() ครับ

Download SourceCode

Tags: action script 3.0 หัด action script, สอน action script, สี่เหลี่ยม

Action Script 3.0 การใช้งาน Timer

admin — Tue, 08 Nov 2011 16:04:35 +0000

ในการเขียน action script นั้นเป็นการกำหนดเหตุการณ์และควบคุมเหตุการณ์ที่เกิดขึ้นในโปรแกรม ดังนั้นสิ่งหนึ่งที่ขาดไม่ได้ก็น่าจะเป็น timer เพราะมันสามารถทำสร้างหรือคงบคุมการทำงานตามเวลาที่เรากำหนดได้ ซึ่งมีประโยชน์มาก

เรามาดูตัวอย่างการใช้ timer ใน action script กันเลย ขั้นแรกเราก็ทำการสร้างไฟล์ flash ตามรูปครับ

จากนั้นไปในส่วน timeline เพื่อเปิด หน้าต่างเขียน actionขึ้นมาจากนั้นก็เขียนโค้ดตามนี้ครับ


import flash.utils.Timer;

import flash.events.TimerEvent;

import flash.events.Event;

var timeLine:Timer = new Timer(500);

var mc:MovieClip = new MovieClip();

addChild(mc);

var linex:int = 10;

var liney:int = 10;

timeLine.addEventListener(TimerEvent.TIMER, drawLine);

timeLine.start();

function drawLine(e:Event)

{

trace("drawline");

mc.graphics.lineStyle(2, 0x990000, .75);

mc.graphics.moveTo(linex, liney);

linex = linex + 10;

liney = liney + 10;

mc.graphics.lineTo(linex,liney);

}

เมื่อกด ctrl + enter ก็ได้ผลลัพธ์ดังรูปโดยมันจะทำการวาดเส้นตรงตามค่า x, y เพิ่มขึ้นทุกๆ 500 ms ขั้นตอนในการทำงานของโค้ดเริ่มแรกเราต้องทำการ import package ที่เกี่ยวข้องกับ timer เข้ามาจากนั้นให้เราทำการสร้าง timer ขึ้นมา 1 ตัวโดยเรากำหนดเวลารอบโดยกำหนดไปใน constructor ตอนสร้าง object timer จากนั้นมีการสร้างตัวแปรแบบ movie clip ที่ชื่อว่า mc เพื่อทำการวาดรูปกราฟิกต่างๆ และมีการประกาศตัวแปรเพื่อเก็บตำแหน่ง x และ y จากนั้นเราก็ทำการ add movie clip mc ไปยัง stage โดยใช้คำสั่ง addChild จากนั้นเราก็ทำการใช้ event listener ให้กับ timer เพื่อให้ตัวแปร timeline จัดการเหตุการณ์ที่เกิดขึ้นโดยในการกำหนด addEventListener นั้นก็จะทำเมื่อ timer ครบทุกๆรอบนั้นคือครบทุกๆ 500 ms โดยจะให้ทำงานใน function drawLine โดยภายใน function นี้ก็จะมีการวาดเส้นตรงโดยให้ทำการ move ไปยังตำแหน่ง x และ y จากนั้นก็เพิ่มค่า x และ y แล้วทำการวาดเส้นตรงจากจุดที่มนอยู่ไปยังจุดใหม่ซึ่งเป็นจุดที่ค่า x และ y เพิ่มค่าไปแล้ว

Download Source

Tags: ActionScript, movie clip, การใช้งาน Timer, สอน ActionScript, เริ่มเขียน actionscript

เขียนเกมส์ยามว่าง flash game fireball v1.0

admin — Mon, 31 Oct 2011 16:07:48 +0000

หลังจากที่ผมศึกษา actionscript มาสักพักก็เลยลองเขียนเกมส์ดูก็ปรากฎว่ามันสนุกดีเลย ว่าจะพัฒนาไปเรื่อยตามความรู้ที่มี นั้นก็คือถ้ามีความรู้เพิ่มขึ้นก็จะพัฒนาให้มันน่าเล่นมากกว่านี้และดีกว่านี้ครับ

นี้เป็นวีดีโอที่ผมอัดไว้ เสียดายมันไม่มีเสียงเพราะ encode เสียงเครื่องผมมีปัญหาเวลาอัดแล้วอัพขึ้น youtube เลยมีปัญหาเรื่องเสียงครับ

v1.0 นี้มีอะไรบ้าง

หน้าตัวละครเปลี่ยนหน้าได้เวลาตีลูกบอล
เสียงประกอบเวลาตีลูกบอลและเก็บดาว
มีหน้า intro, game over และสามารถเล่นซ้ำได้
มีการแสดงผลคะแนน

ส่วนรายละเอียดการเล่นก็คลิกที่เวลาตัวละครโดนลูกบอลเพื่อตีไปฝั่งตรงข้าม ถ้าลูกบอลเด่งไปยังเส้นหลังของคู่ต่อสู้เราก็จได้คะแนนใครได้ ห้าคะแนนก่อนชนะ ส่วนดาวนั้นจะเป็น item ทำให้ลูกที่เราตีไปไกลขึ้นซึ่งจะต้องเก็บให้มากๆๆ เพราะทุกครั้งที่เก็บได้ระยะทางการตีบอลจะเพิ่มขึ้นด้วย

ส่วนใครอยากลองเล่นดูก็เลยได้ที่ลิงค์นี้ ครับ เล่นเกมส์

Tags: action script, fireball game, flash game fireball

เริ่มเขียน actionscript ด้วย adobe flash cs 5.5

admin — Sun, 30 Oct 2011 14:28:35 +0000

เริ่มเขียน actionscript ด้วย adobe flash cs 5.5

วันนี้ผมเขียนบทความสำหรับผู้ที่เริ่มจะหัดเขียน actionscript หรือกำลังสนใจ ผมจะเขียนบทความที่เกี่ยวกับเขียน actionscript version 3.0 นะครับ โดยเราจำเป็นที่จะต้องหาโปรแกรม adobe flash cs 5.0 หรือ 5.5 ก็ได้ตามแต่ที่ท่านจะหามาลงในเครื่องได้นะครับ ขั้นแรกเราก็เปิดโปรแกรม flash มาจากนั้นเลือก new file แล้วมันจะมีหน้าต่างให้เลือกชนิดของไฟล์ที่เราจะสร้างโดย ผมเลือกเป็น ActionScript 3.0

เมื่อเราสร้างไฟล์เสร็จแล้วให้คลิกที่ tab timeline เพื่อจะไปยังหน้าต่าง script ซึ่งในการเขียน actionscript นั้นมันก็เขียนได้หลายรูปแบบ ทั้งเขียนบน stage เลย หรือจะแยกเป็นไฟล์คลาสหรือว่าจะเขียน script ใน movie clip ซึ่งในตัวอย่างนี้ผมจะเขียนบน stage ซึ่ง stage คืออะไรมันก็คือ stage ในการแสดงผลของ flash ซึ่งจะแบ่งเป็น flame ตามที่เราต้องการซึ่งมันคล้ายๆกับโปรแกรมตัดต่อหนัง ที่มันจะมีวิดีโอหลักที่เราต้องใส่ effect ในวินาทีต่างๆนั้นเอง stage ก็เหมือนกันที่เราใส่เหตุการณ์ต่างๆ เอาละเรามาเขียน action script ?โดยให้ที่ timeline แล้วคลิกขวาที่เฟรมเหมือนในรูปจากนั้นก็เขียนโค้ดครับ

import flash.text.TextField;

var textmessage:TextField = new TextField();

textmessage.text = "Thaicoding.net";

addChild(textmessage);

trace("Thaicoding.net");

เมื่อเราเขียนโค้ดเสร็จแล้วให้ลองรันโปรแกรมดูโดยกด ctr+enter ครับแล้วจะได้ผลลัพธ์ดังรูป

โดยโปรแกรมนี้มันได้ทำการสร้าง TextField ขึ้นมา จากนั้นกำหนดให้มันมีข้อความว่า Thaicoding.net จากนั้นเราก็ทำให้มันไปอยู่ใน stage โดยใช้คำสั่ง addChild() นั้นเองซึ่งใน action script นี้หากเราจะต้องการสร้างหรือใช้ control ตัวใดเราต้องทำการ import library ของ control ตัวนั้นเข้ามา แต่ส่วนมาโปรแกรม adobe flash มันจะทำการ import อัตโนมัติให้อยู่แล้วถ้าคุณไม่ไปปรับค่าอะไร ส่วนคำสั่ง trace นั้นมันใช้แสดงข้อความออกทางหน้าต่าง output ซึ่งมันมีประโยชน์ในการ debug โปรแกรมอย่างมากครับ

Download SourceCode

Tags: ActionScript, adobe flash cs 5.5, สอน ActionScript, เริ่มเขียน actionscript