วิธีการทำให้รูป Facebook Profile สามารถแก้ไข/ใส่เพิ่มใน ActionScript ได้ by Ziah
Oct0
โดยปกติเราเมื่อเรานำรูปโปรไฟล์เฟซบุ๊คไปทำการ redraw, แก้ไข หรือนำไปใส่ในไฟล์ AS ต่างๆ ก็จะมี Error ขึ้นมาเตือนเรื่อง Security ว่าไม่สามารถทำงานได้ ดังตัวอย่างเช่นเราใช้ capture รูปของ Spark Group ที่มีรูปโปรไฟล์เฟซบุ๊คหนึ่งอยู่ ตามฟังก์ชั่นดังนี้
public function captureImg(imageObject:IBitmapDrawable):String { //รับกรุ๊ปเข้ามา
var ohSnap:ImageSnapshot;
ohSnap = ImageSnapshot.captureImage(imageObject, 0, pngEnc); //ทำการ Capture รูป ซึ่งจะบั๊คที่บรรทัดนี้
var imageByteArray:ByteArray = ohSnap.data as ByteArray;
return ImageSnapshot.encodeImageAsBase64(ohSnap);
}
จะทำให้เกิด Error หน้าตาแบบนี้
SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://localhost/****.swf/[[DYNAMIC]]/2 cannot access http://profile.ak.fbcdn.net/hprofile-ak-prn1/*****.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
at flash.display::BitmapData/draw()
ซึ่งวิธีการแก้ไขคร่าวๆของเราก็คือ การขอ Security Domain ต่างๆของรูปโปรไฟล์เฟซบุ๊คเอาไว้ก่อนหน้า ดังนี้
var domainList:Array = ['http://profile.ak.fbcdn.net','http://profile.cc.fbcdn.net','http://fbcdn-profile-a.akamaihd.net','http://photos-a.ak.fbcdn.net','http://photos-b.ak.fbcdn.net','http://photos-c.ak.fbcdn.net','http://photos-d.ak.fbcdn.net','http://photos-e.ak.fbcdn.net','http://photos-f.ak.fbcdn.net','http://photos-g.ak.fbcdn.net','http://photos-h.ak.fbcdn.net','http://static.ak.facebook.com','http://static.ak.fbcdn.net','http://b.static.ak.fbcdn.net'];
for each (var domain:String in domainList) {
Security.loadPolicyFile(domain+'/crossdomain.xml');
Security.allowDomain(domain);
Security.allowInsecureDomain(domain);
}
เพียงเท่านี้แอปพลิเคชั่นของเราก็จะสามารถรันได้เป็นปกติแล้วล่ะครับ
เปลี่ยนภาพกลางวัน ให้เป็นภาพกลางคืน ด้วยPhotoshop by Amp3r3
Oct0
ในกรณีที่ต้องการแก้ไขงาน(เร่งด่วน) ในการเปลี่ยนภาพกลางวัน ให้กลายเป็นภาพกลางคืน แต่ขี้เกียจลงมือวาดใหม่
ทำได้โดย
1.เปิดไฟล์ภาพต้นฉบับ(ภาพตอนกลางวัน)
2. Selection ส่วนที่เป็นท้องฟ้า เสร็จแล้วกดปุ่ม G เทสีฟ้าลงไปในส่วนที่ Selection
3. กดปุ่ม G เทสี ลงไปบนภาพ และเปลี่ยนโหมดสี เป็น Hard Light
5 กด Ctrl+U เปลี่ยนสี เพื่อให้ดูเสมือนว่า เป็นกลางคืนให้มากที่สุด
6. Selection ส่วนที่เป็นท้องฟ้า ตกแต่ง…เพื่อสร้างบรรยากาศให้กับภาพ
โดยการกดปุ่ม Shift+G เพื่อไล่สี(เลือกสีที่ดูแล้วเสมือนว่าเป็นกลางคืน)
7. สร้างบรรยากาศเพิ่มเติม
เลือกสี แล้วกดปุ่ม Shift+G เพื่อไล่สีด้านที่เป็นลำแสง ดังตัวอย่าง
เสร็จแล้วทำการเปลี่ยนโหมด เป็น Screen
8. ตกแต่งเพิ่มเติม
*ตัวอย่างขั้นต้นนี้ ไม่ได้เป็นการปฏิบัติงานที่ถูกต้อง 100%
***ในการเปลี่ยนภาพกลางวัน ให้กลายเป็นกลางคืนนั้น สิ่งสำคัญที่สุด คือ การหาภาพที่มีบรรยากาศกลางคืนจริงๆ มาเป็นแบบ เพื่อง่ายต่อการปฏิบัติงาน
ทำภาพPixelง่ายๆแบบปัจจุบันทันด่วน by nontra
Oct0
.
วันนี้จะมาสอนทำภาพพิกเซลแบบง่ายๆกันนะคะ
.
อันดับแรกก็ตั้งขนาดภาพว่าเราจะทำภาพที่ขนาดกี่ pixel แต่ในตัวอย่างจะทำอยู่ที่ขนาด 200 pixel x 200 pixel ค่ะ
.
มีขั้นตอนการเตรียมก่อนจะลงมือวาดก็คือ บรัชและยางลบ เราจะต้องเลือกเป็นโหมด Pencil ก่อนเพื่อให้เวลาวาดและลบออกมาเป็นเส้นpixelค่ะ
.
และต้องปรับโหมดกระดาษก่อนจะวาดด้วย ตามภาพตัวอย่างเลยค่ะ
.
.
และจะขึ้นคำสั่งแบบนี้ขึ้นมา ให้เลือกตามภาพอีกเช่นกัน (เวลาทำเสร็จอย่าลืมเปลี่ยนกลับเป็น Bicubic ด้วยนะคะ)
.
.
พอพร้อมแล้วก็ร่างลงไปเลยค่ะ ร่างลวกๆสบายๆไปเบย
.
.
พอร่างเสร็จแล้วก็ขึ้นเลเยอร์ใหม่ ปรับขนาดดินสอให้เป็น 1pixel ค่ะ เพราะเราทำภาพเล็ก ไม่ควรเส้นใหญ่มาก
.
.
ตัดให้เสร็จทั้งภาพ ยังไม่้ต้องห่วงเรื่องเส้นมันสะเปะสะปะ เพราะเราต้องเอากลับมาแต่งทั้งภาพตอนสุดท้ายอยู่แล้ว
.
พอวาดจนเสร็จเราก็เอาภาพมานั่งแต่งค่ะ ทำให้เส้นมันเหลือแค่เส้นเดียวเรียวๆไม่ควรให้กลุ่ม pixelมันเกาะกัน วิธีเช็คงานว่าแปลกมั้ย ให้ถอยภาพมาดูที่ระยะ 100% แล้วจะสังเกตเห็นว่าจุดไหนที่แปลกหรือไม่แปลก ดูตัวอย่างเส้นในจากในภาพค่ะ
.
.
นี่คือตัวอย่างระยะ 100% ถ้ากลุ่มpixelเกาะกันเกิน1ช่องจะเห็นเป็นกระจุกแบบภาพทางซ้าย ถ้าเคลียร์ได้หมดเรียบร้อยจะเป็นแบบทางขวาค่ะ
.
.
แรกๆอาจมึนนิดหน่อยแต่พอเข้าใจแล้วจะทำได้เืรื่อยๆไม่ยากเลยค่ะ สุ้ๆ ^^o
Socket.IO Socket ที่ใช้ได้ทุก browser by heha
Oct5
Socket.IO คือ library ตัวหนึ่งซึ่งถูกเขียนขึ้นโดยภาษา NodeJS (Javascript ฝั่ง Server Side) ซึ่งเป็นภาษาใหม่มาแรงในขณะนี้เพราะการทำงานแบบ Asynchronous สามารถทำงานหลายๆ อย่างพร้อมกันแบบ Parallel ได้ (เรียกว่าการเขียนโปรแกรมแบบ Event-driven) เว็บไซต์ที่ใช้งาน Socket.IO เช่น yammer.com, trello.com, c9.io (Cloud9) รวมไปถึงสามารถนำไปใช้ทำเกมประเภท MMORPG ได้ด้วยเช่นกัน
ทำไมต้องใช้ Socket.IO?
- Support IE 5.5+, Safari 3+ ,Chrome 4+ , Firefox 3+, Opera 10+
- Cross domain support
- ใช้ Websocket เป็น protocol หลัก มีความเร็วในการเชื่อมต่อที่สูงมาก
- ใช้ง่าย
สาเหตุที่ Socket.IO สามารถใช้งานได้ครอบคลุมทุก browser เป็นเพราะจริงๆ เบื้องหลังของ Socket.IO ใช้รูปแบบการเชื่อมต่อได้หลายรูปแบบ ได้แก่
- WebSocket
- Adobe® Flash® Socket
- AJAX long polling
- AJAX multipart streaming
- Forever Iframe
- JSONP Polling
หากใช้ตัวแรกไม่ได้ browser ไม่ support ตัว library จะเลื่อนไปใช้ตัวถัดไปโดยอัตโนมัติ และจากในรายการจะเห็นว่ามี AJAX ด้วยซึ่งอย่างที่เราทราบกันวว่าใช้ได้ใน browser แทบทุกตัว จึงเป็นเหตุผลว่าทำไม Socket.IO จึงสามารถใช้งานได้ทุก browser
การ Setup
- ต้องใช้ NodeJS version ตั้งแต่ 0.4 เป็นต้นไป (ปัจจุบัน 0.8)
- npm install socket.io
ตัวอย่าง code server
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
ตัวอย่าง code client
เพิ่ม tab “Play now” ใน Facebook Fanpage by akara
Oct0
ถ้าคุณต้องการเพิ่ม tab play now เข้าไปใน facebook fanpage เพื่อให้ผู้ใช้คลิ๊กแล้ว re-direct ไปที่เกมเลย แบบดังรูป วิธีการมีตามนี้ครับ
1. เข้าไปที่ App Static Iframe Tab https://apps.facebook.com/iframehost/
(จริงๆแล้วมีหลายตัวที่ใช้งานได้เหมือนกันครับ แต่ผมลองแล้วชอบตัวนี้มากสุด)
2. คลิ๊กที่ปุ่ม Install Page Tab
3. จากนั้นเลือก Page ที่เราต้องการ แล้วคลิ๊กที่ปุ่ม Add Page Tab ครับ
4. ต่อมาคือขั้นตอนของการ Setting ดูตัวอย่างจากในรูปได้ครับ
- ใส่รูป Play Now ของเราเอง ขนาด 111×74 px
- เลือกเป็น Redirect
- ใส่ URL ของเกมเราเข้าไป
- เปลี่ยนชื่อ Tab เป็น Play Now ส่วนนี้คือตัวหนังสือข้างใต้รูปน่ะครับ
เสร็จแล้วก็กด save ก็เรียบร้อยแล้วครับ