มาใช้ EventEmitter กันดีกว่า by

31
Jan
1

EventEmitter คือ class ที่เอาไว้สร้างเหตุการณ์ต่างๆ สำหรับ Node.JS ถ้าเปรียบเทียบกับงานที่ทุกคนคงรู้จักกันก็เช่น event onclick เมื่อมีการคลิกให้ทำการเรียก function ที่กำหนดให้อัตโนมัติ ในบางภาษาจะเรียก AddEventListener นั่นเอง บางคนอาจจะคิดว่าทำต้องทำต้องเป็น event ด้วยในเมื่อเรียก function ตรงๆ ก็ได้ คำตอบคือการทำงานของ class EventEmitter จะเป็นการประกาศดักรอ event เมื่อ event เกิดขึ้นจึงค่อยทำงาน ซึ่งรูปแบบการทำงานจะเป็นลักษณะ passive รอถูกเรียก และสามารถประกาศรอรับ event กี่ที่ก็ได้ ทุกๆ ที่จะโดนเรียกทั้งหมด ทำให้สามารถทำงานได้สะดวกขึ้น

EventEmitter จะมีสอง method หลักๆ ที่ใช้งานคือ on และ emit ซึ่ง on เอาไว้ดักรอ event แล้วค่อยเรียก callback function ให้ทำงาน (AddEventListener)  ส่วน emit เอาไว้เป็นตัวสั่งการให้เกิด event ชื่อที่กำหนด และจะไปเรียก callback function ที่ประกาศรอไว้ในตอนแรกจนครบโดยอัตโนมัติ (ใน flash emit ก็คือ dispatchEvent นั่นเอง)

ตัวอย่าง code:
var EventEmitter = require('events').EventEmitter;
var util = require('util');
// create the class
var MyClass = function () { }
// inherit class
MyClass.prototype.__proto__ = EventEmitter.prototype;

var obj = new MyClass();
obj.on('startProgram', function(arg){
console.log('startProgram event run '+arg);
});

obj.on('startProgram', function(arg){
console.log('startProgram event run point 2 '+arg);
});

obj.emit('startProgram', '1');

ผลลัพธ์
startProgram event run 1
startProgram event run point 2 1

จะเห็นได้ว่าประกาศ on ไว้ 2 ที่ ก็จะโดนเรียกทั้ง 2 ที่ ซึ่งเวลาใช้งานจริงสามารถประกาศ on ที่ไฟล์อื่นก็ได้ (แต่ต้องส่ง instance ของ class ไปเพื่อเรียกใช้ด้วย) ทำให้เวลาทำงานจริงเราสามารถกำหนดโครงสร้างต่างๆ ได้ง่าย ตัวอย่างการใช้งาน EventEmitter อีกตัวที่เห็นได้ชัดก็คือ Socket.IO ที่ใช้ติดต่อส่งข้อมูลผ่าน network ไปยัง client นั่นเอง หรือแม้แต่ express ก็ใช้ EventEmitter นี่เช่นกัน จะเห็นได้ว่า EventEmitter เหมาะสำหรับงานทางด้าน network เป็นที่สุด เอาไว้สร้าง code ส่วนที่เป็น asynchronous ได้โดยง่าย

Property parentDocument กับการใช้ใน ItemRenderer/DataRenderer by

31
Jan
0

ก่อนหน้านี้ถ้าเราเขียนฟังก์ชั่นใน ItemRenderer/DataRenderer แล้วถ้าจะเรียกตัวก่อนหน้าก็จะใช้ parent หรือใช้ singleton เรียกตัวหลักข้างนอก เนื่องด้วยถ้าเราใช้ parent นั้นจะต้องซ้อนหลายชั้นมากกว่าจะถึงตัวนอก (ในที่นี้คือ List ที่เราใช้แสดง DataRenderer นี้) ตัวอย่างเช่น

parentdoc01

จะเห็นได้ว่าต้องเรียกหลายชั้นมาก เพราะ parent จะนับทุก Display ที่คลุมตัวนั้นๆอยู่ ซึ่งถ้าเราเขียนใน Flex เราสามารถใช้คำสั่ง parentDocument ได้ครับ

parentdoc02จะเห็นได้ว่าสั้นกว่ามาก เพราะ parentDocument จะนับแค่ตัว MXML ที่คลุมตัวนั้นๆอยู่ครับ ถ้าเราอยากอ้างอิงถึงค่าต่างๆ ก็สามารถใช้ property นี้จะสะดวกกว่าครับ

วิธีการเรียกคลาสที่อยู่ใน SWC ขณะรันไทม์ (โดยไม่ต้องประกาศให้ Flash รู้จักไว้ก่อน) by

31
Jan
0

โดยปกติแล้วเวลาที่เราจะเรียกใช้คลาสต่างๆใน SWC ที่เราใส่ไว้ใน Library นั้นจะต้องมีการเรียกคลาสนั้นๆ(เรียกชื่อ)ในโค้ดเลย เช่น

var mc:SpecialClass1= new SpecialClass1();
var mc:SpecialClass2= new SpecialClass2();
var mc:SpecialClass3= new SpecialClass3();

ทีนี้ปัญหาอยู่ที่ถ้าสมมติเราต้องการเรียกแบบนี้ 20 คลาส เราต้องมานั่งประกาศทั้งหมดหรืออย่างน้อยก็ต้องประกาศชื่อทิ้งไว้ให้ตัว Flash ได้ import เข้ามาก่อน เช่น

SpecialClass1;
SpecialClass2;
SpecialClass3;

วันนี้เลยมาเสนอวิธีเรียกผ่านสตริง ซึ่งสามารถใช้ลูปรันขณะรันไทม์ได้ครับ

- ให้เราคลิ้กขวาที่ Project ของเราแล้วเลือก Properties ครับ
swcruntime01

- จากนั้นไปที่หัวข้อ Flex Compiler และตรงช่อง Additional compiler arguments: ให้ใส่คำสั่งพร้อม path ของ swc ของเราซึ่งต้องย้ายเข้ามาอยู่ใน assets ก่อนนะครับ(ปกติจะไว้ใน libs) ในรูปแบบดังนี้ครับ

-include-libraries /assets/myclass.swc

swcruntime02

จากรูป Class ทั้งหมดที่เราสร้างไว้ใน emo.swc และ action.swc ก็จะสามารถเรียกขณะรันไทม์ได้แล้วล่ะครับ ยกตัวอย่าง

for(var i:int=1;i<=20;i++)

this.addChild(new this["SpecialClass"]+i)

เท่านี้ก็จะได้ทั้ง 20 คลาสขณะรันไทม์ได้เลยล่ะครับ

credits : http://www.thegrego.com/2012/03/20/swc-file-as-embedded-runtime-asset-library/

วาดปีกผีเสื้อแบบไม่เสียเวลา [ai] by

31
Jan
0

วิชาเร่งรัดวาดปีกผีเสื้อ

วาดสามเหลี่ยม 2 ชิ้น มีชิ้นเล็กชิ้นใหญ่นะคะ

ทำแค่ข้างเดียวก่อน

ต่อไปเราจะเปลี่ยนให้มุมแหลมของปีกผีเสื้อกลายเป็นมุมโค้งค่ะ

ไปที่เครื่องมือ Convert Anchor Point Tool (รูปสามเหลี่ยม)

กดแล้วจิ้มไปที่มุมปีกตามภาพ

กดค้างแล้วดัดเส้น

ทำแบบนี้จนครบทุกด้านนะคะ

เสร็จแล้วใช้ Direct Selection Tool (ลูกศรสีขาว)

จิ้มที่จุดแล้วดึงบางมุมของปีกผีเสื้อออกเพื่อความสวยงามค่ะ

copy แล้ว flip ปีกที่จัดจนพอใจไปไว้อีกข้างนึง

(อย่าลืม send to back ปีกไว้หลังตัวผีเืสื้อนะคะ)

เป็นอันเสร็จเรียบร้อยค่า

ถ้าอยากให้ปีกดูพริ้วและมีชีวิตชีวามากขึ้น จะใช้วิธี

Path>>Add Anchor Points เพื่อเพิ่มจุดที่จะดัดเส้นได้ค่ะ

Balance Balance by

31
Jan
0

Balance


สมดุลหรือดุลยภาพ หมายถึง ความเท่ากัน เสมอกัน มีน้ำหนัก/ความกลมกลืนที่พอเหมาะพอดี
โดยมีแกนสมมติทำหน้าที่แบ่งให้ซ้าย-ขวา/บน บน-ล่าง ให้เท่ากันในความรู้สึกตามที่ตามองเห็น
ความสมดุลแบ่งเป็น 2 ประเภท

2.1. Symmetrical Balance หมายถึง การจัดวางองค์ประกอบต่าง ๆ
ให้ทั้ง 2 ข้างแกนสมมติมีขนาด สัดส่วน และน้ำหนักเท่ากัน หรือมีรูปแบบเหมือนกันคล้ายกัน

2.2. Asymmetrical Balance หมายถึง การจัดองค์ประกอบ
ทั้ง 2 ข้างแกนสมมติมีขนาดสัดส่วนน้ำหนักไม่เท่ากัน ไม่เหมือนกัน ไม่เสมอกัน แต่สมดุลกันในความรู้สึก
ความสมดุล 2 ข้างไม่เท่ากัน คือภาพมีความสมดุลย์ของเนื้อหาและเรื่องราวแต่ไม่เท่ากันในเรื่องขนาด น้ำหนัก

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ