วิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web by

28
Feb
0

วันนี้จะมาสอนวิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web ไปด้วยครับ แบ่งเป็นสองส่วนหลักๆละกัน เริ่มที่ส่วนแรกก่อนการสกรอล์เมาส์แล้วทำให้ข้อมูลของเราเลื่อน

scroll1

Scroll ตัวอย่าง

โค้ดส่วนที่เป็น mxml หรือแท็กของ Flex

//ส่วนของขอบเขตการแสดงผลของ List ของเรา เราทำการใส่ MouseEvent mouseWheel เข้าไปเพื่อรับ Event การกลิ้งเมาส์ ซึ่งจะเรียกใช้ฟังก์ชั่นในย่อหน้าถัดไป
//List ที่อยู่ด้านใน

//ส่วนนี้เป็น ScrollBar ธรรมดาๆของเราที่มี viewport เป็น Group ก่อนหน้า

ต่อไปเป็นโค้ดในส่วนของ as3 ที่จะถูกเรียกฟังก์ชั่น wheelRoom

private function wheelRoom(event:MouseEvent):void{
scrollerRoom.value -= (event.delta>0 ? 20 : -20);
//จากด้านบนค่า event.delta จะมีค่าตามขนาดที่เรากลิ้งเมาส์ กลิ้งลงเป็น ค่า+ กลิ้งขึ้นเป็นค่า- เราจึงนำค่าดังกล่าวมากลับบวกลบแล้วไปตั้งค่า value ของ ScrollBar ของเราซึ่งจะมีผลให้ข้อมูลของเราเลื่อนตามไปด้วย ซึ่งเรากำหนดให้เลื่อนได้ใกล้ไกลตามใจชอบจากตัวอย่างจะใช้ 20 และ -20
}

เท่านี้ถ้าเราสกรอล์ที่ข้อมูลของเรา ข้อมูลก็จะเลื่อนตามแล้วล่ะครับ

โดนเลื่อนลงมาด้วย

โดนเลื่อนลงมาด้วย

ทีนี้ปัญหาถัดมาคือเวลาเราสกรอล์หน้า Web จะถูกเลื่อนขึ้นลงตามด้วยเพราะ Html มีการรับค่า Scroll อยู่แล้วเราจึงต้องทำการดักไว้ ซึ่งผมได้ใช้ class ที่มีชึ่อว่า MouseWheelTrap สามารถดาวน์โหลดได้จากที่นี่ครับ http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/ ให้เราทำการ import ให้เรียบร้อยในหน้า Main ของเราจากนั้นก็ทำการตั้งค่าเล็กน้อยดังนี้ครับ

ในแท็ก ใส่ eventดังนี้ addedToStage=”stretchHandler()”>
แล้วเราก็นำฟังก์ชั่นด้านล่างไปใส่ในแท็ก Script ของ Main ของเราเท่านี้ก็ใช้ได้แล้วครับ

private function stretchHandler():void{
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP;
this.width = stage.stageWidth;
this.height = stage.stageHeight;
}

วาดก้อนเมฆแบบเร่งด่วน [Ps] by

28
Feb
0

มาวาดก้อนเมฆภายในเวลาเพียงไม่กี่นาทีกัน…

เริ่มจากสร้างส่วนที่เป็นท้องฟ้า โดยการไล่สีฟ้าด้วยคำสั่ง Gradient Tool

วาดก้อนเมฆ โดยเริ่มจาก เลือก Brush แบบ Hard Brush สีขาว

ตั้งค่า Brush

เลือก Brush แบบ Soft Brush

เปลี่ยนโหมด Brush

ตั้งค่า 

เลือกคำสั่ง  

เลือก Brush แบบ Spatter

ตั้งค่า 

ปรมาณนี้

ตกแต่ง

เสร็จเรียบร้อย…

How to กระจกสี by

28
Feb
0

จะมาสอนทำการกระจกสีแบบง่ายๆนะคะ

.

อันดับแรกร่างทำลายกระจกขึ้นมาก่อน ทำเป็นแบบสมมาตรก็ได้ค่ะ ตายลายที่ต้องการ

.

.

.

ต่อมา เพื่อความง่ายในการทำงาน ให้หยอดสีไว้ส่วนละเลเย่อ เพราะกระจกสีแต่ละช่องสีจะต่างกันค่ะ

ไม่แนะนำให้นั่งเทียนเองถ้าไม่เชี่ยวชาญ หาแบบดูก็ได้ค่ะ

.

.

.

.

ต่อมาให้เลือกบรัชที่มีลายพื้นผิวขรุขระปาดลงไป ไม่ต้องประณีตมาก ให้พอได้อารมณ์ก็พอ (ใช้บรัชใบไม้ที่สอนไปในเอนทรี่เก่าก็ได้ค่ะ)

.

.

.

.

จะได้รูปร่างๆประมาณนี้ค่ะ จริงๆก็เสร็จเรียบร้อยแล้ว แต่….!!!

.

.

.

.

ถ้าอยากให้สมบูรณ์ ก็เติมแสงเข้าไปด้วยคำสั่ง Overlayค่ะ ใช้ Gradient สีเหลืองทับกับเลเยอร์กระจกได้เลยค่ะ

.

.

.

.

เส้นสีดำให้ปรับลด opacity ให้บางลงหน่อย ก็สมบูรณ์แบบแล้วค่ะ!

.

.

MongoDB Cheat list และขั้นตอนการทำ Replication by

28
Feb
0

สรุปคำสั่ง mongoDB ที่ใช้บ่อยๆ

  • use db1 – ใช้งาน database db1 หรือสร้าง database ใหม่
  • show dbs – แสดงรายชื่อ database ทั้งหมด
  • db.getCollectionNames() – แสดง collection (ตาราง) ทั้งหมด
  • db.createCollection(“users”) – สร้าง collection ชื่อ users
  • db.users.drop() – ลบ collection users
  • db.createCollection(“new”, {capped:true, size:1073741824}); – สร้าง capped collection ขนาด 1073741824 bytes
  • db.logMoney.find({time:{$gte: new Date(2013,2,5)}}); – query date มากกว่าเท่ากับวันที่ๆ กำหนด
  • db.logMoney.ensureIndex({‘time’:1},{background:true}) – new index field time โดย background ไว้สั่งให้ทำโดยไม่ lock collection
  • db.logMoney.getIndexes()  - ดู Index ทั้งหมดขณะนั้น
  • db.logMoney.find({time:{$gt:new Date()}}) – query ระบุเวลา สามารถใช้ร่วมกับ mongodump ได้
  • db.logMoney.aggregate({$match:{time:{$gt:new Date(2013,1,1)},chng:{$lt:0}}},{$group:{_id:{usrId:1, }, count:{$sum:1}, sumAll:{$sum:”$chng”}}}) – ตัวอย่างการใช้งาน query ลักษณะเดียวกับ GROUP BY ใน MySQL
    (SELECT *, COUNT(*) as count,  SUM(chng) as sumAll FROM logMoney WHERE time > “2013-01-01″ AND chng < 0  GROUP BY usrId)

วิธีทำ Replication

ก่อนอื่น MongoDB แนะนำว่าควรมีเครื่องในวงอย่างน้อย 3 เครื่องครับ (แต่เราอาจจะใช้ 2 เครื่อง แล้วใช้อีกเครื่องเป็น Arbiter หรือตัวหลอกแทนได้) ขั้นตอนมีดังนี้

  1. Edit /etc/mongodb.conf ด้วยโปรแกรมที่ถนัด
  2. กำหนด replSet = <ชื่อกลุ่มที่ต้องการ> ในที่นี้ผมตั้งว่า rs0
  3. restart mongodb
  4. ทำข้อ 1-3 ใหม่กับเครื่องที่จะเป็น Slave ทุกเครื่อง
  5. เข้าเครื่องที่จะให้เป็น Master (สมมติว่า ip ภายในของเครื่อง master คือ 10.0.0.1) แล้วพิมพ์ mongo 10.0.0.1 (สำคัญมาก ห้ามลืมพิมพ์ ip หรือพิมพ์ผิดเด็ดขาด ไม่อย่างนั้นจะใช้ไม่ได้)
  6. ถ้าหน้าจอปรากฏดังนี้แสดงว่าทำได้ถูกต้อง

    mongo 10.0.0.1
    MongoDB shell version: 2.2.2
    connecting to: 10.0.0.1/test
    rs0:PRIMARY>
  7. สั่ง rs.initiate()
  8. สั่ง rs.add(“10.0.0.2″) (สมมติเครื่อง slave ip 10.0.0.2) และเครื่อง slave เครื่องอื่นๆ
  9. เสร็จ!

สรุปคำสั่ง replication ที่ใช้บ่อย

  • rs.initiate() – เริ่ม replica set
  • rs.status() – status replica set
  • rs.add(“ip”) – เพิ่ม secondary node
  • rs.addArb(“ip”) – เพิ่ม secondary node แบบตัวหลอกเพื่อโหวตตอน fail-over เท่านั้น ไม่มีข้อมูลจริง
  • rs.stepDown() – ถอนตัวจากการเป็น master
  • db.printReplicationInfo() – เช็คว่า oplog มีอายุกี่วัน

วิธี Backup MongoDB

เทียบเท่า mysqldump นั่นเอง ตัวอย่างนั้นใช้ dump เฉพาะตารางที่กำหนด และ query ในช่วงเวลาที่กำหนด ดังนี้

mongodump –host –port –db <ชื่อ database> –collection <ชื่อ collection> -q ‘{“time”:{“$gte”:{“$date”:1360627200000}}}’

วิธี Restore MongoDB

mongorestore

ขอให้สนุกกับ MongoDB :D

Starling Asset Manager by

28
Feb
0


package
{
import flash.display.Bitmap;
import flash.utils.Dictionary;

import starling.textures.Texture;
import starling.textures.TextureAtlas;

public class Assets
{
[Embed(source="../system/Blackground.jpg")]
public static const Blackground:Class;

[Embed(source="../assets/audio/sound1.mp3")]
public static const sound1:Class;

private static var gameTextureAtlas:TextureAtlas;

[Embed(source="../assets/textures/atlas.png")]
public static const atlasTexture:Class;

[Embed(source="../assets/textures/atlas.xml", mimeType="application/octet-stream")]
public static const atlasXML:Class;

public static function getAtlas():TextureAtlas
{
if (gameTextureAtlas == null)
{
var texture:Texture = getTexture("atlasTexture");
var xml:XML = XML(new atlasXML());
gameTextureAtlas = new TextureAtlas(texture, xml);
}
return gameTextureAtlas;
}

private static var gameTextures:Dictionary = new Dictionary();

public static function getTexture(name:String):Texture
{
if (gameTextures[name] == undefined)
{
var bitmap:Bitmap = new Assets[name]();
gameTextures[name] = Texture.fromBitmap(bitmap);
}
return gameTextures[name];
}
}
}


import starling.utils.AssetManager;
import starling.display.Sprite;
import starling.display.Image;
import flash.media.Sound;

private static var sAssets:AssetManager;
public function Main() extends Sprite
{
sAssets = new AssetManager();

//Add Texture
sAssets.addTexture("nameBlackground",Assets.getTexture("Blackground"));
//Add Atlas
sAssets.addTextureAtlas("atlas1",Assets.getAtlas());
//Add Sound
sAssets.addSound("sound1",new Assets.sound1() as Sound);

}
public function exampleUse():void
{
//Texture
var img:Image = new Image( assets.getTexture("nameBlackground"));
this.addChild(img);
//Atlast
var mc:MovieClip = new MovieClip( assets.getTextureAtlas("atlas1").getTextures("heroAttack"),12);
Starling.juggler.add(mc);//For sprite to play animation
this.addChild(mc);
//Sound
var s1:Sound = assets.getSound("sound1");
s1.play(0,1);
}
public static function get assets():AssetManager { return sAssets; }

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