วาดกล่องของขวัญ แบบPerspective. by

31
Dec
0

วันนี้จะมาแนะนำการวาดวัตถุ ให้เป็นแบบ perspective กัน…ง่ายนิดเดียว!!!

ขั้นตอนแรกเลย กำหนดเส้นไกด์ขั้นมา (เอ่อ…อย่าให้อธิบายเลยนะ ว่าเส้นไหน เรียกว่าเส้นอะไรบ้าง เพราะไอ้กระผม…จำไม่ได้แล้วอ่ะ)

ขั้นตอนที่ 2.1 เลือก Line tool (กดU)

ขั้นตอนที่ 2.2 เลือกคำสั่ง Shape layers

ขั้นตอนต่อมา ลากเส้นจากจุดตัด ทั้งซ้ายและขวา (จะมากจะน้อย แล้วแต่ความขยัน)

เสร็จแล้ว กำหนดเส้นที่จะวาดวัตถุขึ้นมา

กำหนดด้านให้กับวัตถุ

ต่อมา วาดส่วนที่เป็นกระดาษห่อกล่องของขวัญ

แล้วเปลี่ยนโหมดส่วนที่เป็นกระดาษห่อกล่องของขวัญ ให้เป็นโหมด Overlay

วาดส่วนที่เป็นริบบิ้น

เสร็จแล้วก็…ปรับสี

ต่อมาก็…ปรับตรงนู้นนิด แต่งตรงนี้หน่อย…ให้สวยงาม

อ้อ…ของขวัญกล่องนี้ ไม่มีโบว์นะ…ขี้เกียจวาดล่ะ

การปรับเปลี่ยนขนาดของรูปโดยใช้ photoshop by

31
Dec
0

ขั้นแรกเปิดโปรแกรม photoshop ขึ้นมาแล้วโยนรูปที่เราจะแก้ไขใส่ลงไปถ้าเป็นไฟล์ .gif ให้แก้นามสกุลไฟล์เป็น .png ก่อน

drake_4_w_default

ถ้าจะเปลี่ยนขนาดของรูปโดยให้รูปนั้นมีลักษณะคงเดิมไม่โดน crop ทิ้ง ให้ไปที่ image->image size หรือกด ctrl+alt+I ก็ได้

โดยจะมีให้ปรับขนาด จะใช้เป็น pixel หรือจะเปลี่ยนไปตาม percent นับจากรูปเดิมก็ได้ ในตัวอย่างจะเปลี่ยนให้อยู่ในขนาด width 200 px height 200 px จากขนาดเดิม 120 x120

image-size_2012-12-31_15-17-06

drake_4_w_default_2

ถ้าเราจะเปลี่ยนขนาดรูป โดยที่เราไม่อยากให้รูปที่อยู่ด้านในขยายหรือหดตามให้เราปรับที่ canvas โดยไปที่ image->canvas size หรือกด ctrl+atl+C ก็ได้

โดยจะมีให้ปรับ width กับ height เหมือนเดิม แต่ถ้าเราเลือกขนาดที่เล็กลง อาจมีบางส่วนของภาพหายไป ในตัวอย่างจะปรับรูปจาก 200 x 200 ให้เป็น 150 x150

canvas-size_2012-12-31_15-27-22

drake_4_w_default_3

เมื่อเสร็จแล้วเราก็กด save ออกมาเพื่อนำไปใช้โดยการกด crtl+alt+shift+S หรือกด save for web แล้วเลือกเป็นไฟล์ png-24 ครับ

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

การแก้ปัญหาไม่สามารถเรียกอ่านไฟล์ SWF ในเครื่อง by

30
Dec
0

จาก บทความที่แล้ว ที่เรามาการเรียกโหลดไฟล์จากในเครื่องของเราได้ ซึ่งโปรเจ็คของผมที่ผ่านมาได้มีการโหลดไฟล์ SWF ในเครื่องเข้ามาประกอบด้วย ทำให้มีปัญหาหนึ่งขึ้นมาคือทาง Adove จะไม่ให้มีการอ่านไฟล์ SWF จากเครื่องเนื่องจากปัญหาทางด้านความปลอดภัย(เป็น SecurityError) จะมีหน้าตาดันรูปด้านล่างขึ้นมาเมื่อมีการอ่านไฟล์ SWF โดยอ้างอิงพาธในเครื่อง(เช่น C:\test.swf)

กล่อง Error เมื่อเราลง Flash Debugger ไว้

กล่อง Error เมื่อเราลง Flash Debugger ไว้

โดยวิธีแก้ปัญหาดังกล่าวทำได้ดังนี้ครับ

- เริ่มแรกให้เราไปที่ http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

-กด Edit locations…

กด Edit Location...

กด Edit locations...

- เลือก Add location…

sss

เลือก Add location...

- เลือก Browse for files… เพื่อเลือกไฟล์ที่เราต้องการจะอนุญาต หรือ ถ้าเรามีไฟล์ SWF หลายๆไฟล์ก็เลือก Browse for folder…

เลือก

เลือก Browse for files... หรือ Browse for folder...

- แล้วเลือกไฟล์ หรือ โฟลเดอร์ที่เราจะอนุญาตให้มีการเรียกได้

ตัวอย่างเลือกไฟล์ที่ต้องการ

ตัวอย่างเลือกไฟล์ที่ต้องการ

-จะเห็นได้ว่าไฟล์หรือโฟลเดอร์ที่เราอนุญาตจะแสดงในกล่องด้านล่าง

ไฟล์หรือโฟลเดอร์ที่เราอนุญาตจะแสดงในกล่องด้านล่าง

ไฟล์หรือโฟลเดอร์ที่เราอนุญาตจะแสดงในกล่องด้านล่าง

อย่าเพิ่งแปลกใจว่าทำไมไฟล์ของเรายังใช้ไม่ได้นะครับ ให้เราทำการ Reset Browser ของเรา 1 รอบ (ปิดแล้วเปิดใหม่) ก็จะสามารถเรียกโหลด SWF มาใช้งานในแอปพลิเคชั่นของเราได้แล้วล่ะครับ

Javascript “this”, “self” object by

29
Dec
0

เราคงจะคุ้นเคยว่าในภาษา OOP ทั่วๆ ไปอย่าง C#, Java นั้นจะมีการใช้งาน this เพื่ออ้างอิงถึงตัว obj ของ class นั้นๆ แต่ว่า this ใน javascript นั้นจะแตกต่างกันออกไป เราลองมาดูตัวอย่าง


var obj = {
items: ["a", "b", "c"],
process: function() {
this.items.forEach(function(item) {
this.print(item);
});
},
print: function(item) {
console.log('*' + item + '*');
}
};
obj.process();

ตัวอย่างนี้เราประกาศตัวแปรชื่อ obj มี properties ชื่อ items และมี function ชื่อ process กับ print เราสั่งให้ทำงานด้วย obj.process() ซึ่งจะเห็นว่ามีการสั่ง this.items.forEach ณ บรรทัดนี้โค้ดจะยังทำงานได้ดังที่เราคาดหวังอยู่ แต่เมื่อเข้ามาอยู่ใน forEach แล้วบรรทัดที่สั่ง this.print(item); ก็ควรจะทำงานได้เหมือน this.items ใช่ไหมครับ แต่เดี๋ยวก่อน! ลอง copy ไปรันใน Google Chrome Developer Tools หรือ Firebug ไหงไม่มีผลลัพธ์ออกมาเลยล่ะ! ลองมาดูที่บรรทัดนี้อีกครั้ง


this.items.forEach(function(item) {
this.print(item);
});

this.items อ้างถึง items จาก function ชื่อ process ได้ แต่ this.print ทำไมสั่งไม่ได้ล่ะ? เป็นเพราะเมื่อมีการประกาศ function(item) {} ซึ่งเป็น function anonymous (ไม่มีชื่อ) ขึ้นมาจะพบว่ามีการสร้าง block ขอบเขตให้ตัวแปร block ใหม่ การประกาศตัวแปรใดๆ ในนี้จะไม่สามารถถูกเรียกจากนอก scope function นี้ได้ใช่ไหมครับ เช่น


this.items.forEach(function(item) {
var a =5;
});
console.log(a);

แน่นอน เราไม่สามารถสั่งการแบบนี้ได้ a จะได้เป็น undefined เช่นเดียวกันกับตัวแปร this ซึ่งตัว javascript จะถือว่าเป็นตัวแปรภายใน scope anonymous function โดยอัตโนมัติ เราไม่ได้เป็นคนประกาศตัวแปรชื่อ this การที่เราสั่ง this.print(item) this นั้นเป็นตัวแปรภายใน scope ที่เราสร้างขึ้นเอง จะไม่สามารถอ้างอิงถึง function print ได้จริงๆ เพราะอยู่คนละ scope กัน ดังนั้น ทีนี้มาดูวิธีแก้ปัญหากันครับ


var self = this;
this.items.forEach(function(item) {
self.print(item);
});

เราจะสร้างตัวแปรชื่อ self มารับค่า this เอาไว้ก่อนเข้าส่วนของ forEach ซึ่งภาษา Javascript นี้สามารถอ้างอิงถึงตัวแปรที่อยู่ภายนอก scope ได้ (ตรงกันข้าม ไม่สามารถอ้างถึงตัวแปรที่อยู่ภายใน scope ที่ลึกกว่าได้ดังที่แสดงให้ดูไปแล้ว เนื่องจาก code ด้านในยังไม่ถูก execute จริงๆ) ทำให้มีตัวแปรที่จำค่า this ของก่อนเข้า forEach เอาไว้ พอมีการอ้างถึง self ซึ่งเก็บว่า this ของ scope ตัวนอกเอาไว้จึงสามารถทำงานได้เป็นปกติครับ เทคนิคนี้ถูกใช้อย่างแพร่หลายมากใน library javascript หลายๆ ตัว ดังนั้นถ้าเจอ self เมื่อไหร่ให้เดาได้เลยว่ามันคือ this ของ scope ตัวนอกครับ :)

Reference: http://book.mixu.net/ch4.html

ลากกันให้สนุก by

25
Dec
0

วันนี้มีทริคเล็กน้อยที่บางคนอาจจะยังไม่รู้เอามาฝาก

คือใน ai เราสามารถลาก Tool อย่างต่อเนื่องได้

โดยกดปุ่ม ~ ค้าง (ปุ่มที่อยู่ก่อนหน้าเลข 1) ระหว่างลาก

ตัวอย่างลากวงกลมจากซ้ายบนมาขวาล่างโดยกด ~ ค้างไว้

.

สามารถเล่นได้ทุกทิศเลยค่ะ :-D

เผื่อมีใครเอาไปเล่นเป็นเกล็ดหิมะให้เข้ากับเทศกาล

เมอรี่คริสต์มาสนะคะ!

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