สร้าง Action Photoshop by

31
Jul
0

คำอธิบายเกี่ยว Action Photoshop คือ คีย์ลัด ( Shortcut Key ) ที่เราสร้างขึ้นเอง

เพื่อใช้สำหรับงานที่มีขั้นตอน และคำสั่งเดิมๆ ซ้ำๆ ซากๆ

***Action Photoshop นั้น ขึันอยู่กับงานของแต่ละบุคคลนะครับ

วันนี้เราจะมาสร้าง Action กรอบรูปกัน

เริ่มจากเปิดไฟล์งานขึ้น มาตามปกติ

จากนั้นให้สร้าง Selection กำหนดขนาดที่  760 px x 515 px

เลือก Action > Create new action

ตั้งชื่อ(นานสกุลไม่ต้อง)…เลือก Function Key(ตามใจฉัน)…ตั้งค่า Color(จะเลือกหรือไม่เลือกก็ได้…แล้วแต่ปุ๊) กด Record ด้วยละ

***ทีนี้ก็มาถึงขั้นตอนการบันทึก Action กันแล้ว ทำใจสบายๆ มีสมาธิ อย่าตื่นเต้น!!!

กด Shift+Ctrl+I (Inverse)

กด G (Paint Bucket Tool)

กด Ctrl+D (Deselect)

กด Stop playing/rcording

เสร็จลิ้นการบันทึก Action

นี้คือ Action ที่เราได้บันทึกเอาไว้

Edit>Keyboard Shortcuts and Menus เลือก Panel Menus เพื่อตรวจดู Action ที่เราได้สร้างขึ้น

***Action Photoshop นั้น ขึันอยู่กับงานของแต่ละบุคคลนะครับ

วิธีการ clone object ใน javascript ให้ไม่เป็น pointer (เมื่อ แก้ค่าในตัวลูกแล้วตัวแม่จะได้ไม่ถูกแก้ค่าตามไปด้วย) by

31
Jul
0

วิธีการ clone object ใน javascript ให้ไม่เป็น pointer (เมื่อ แก้ค่าในตัวลูกแล้วตัวแม่จะได้ไม่ถูกแก้ค่าตามไปด้วย)
มีอยู่ 2 วิธีด้วยกันคือ
1. เขียนฟังชั่นวนลูปทุก attribute ใน object ตัวต้นแบบแล้ว copy แต่ไส้ในสุดของ object ที่อยู่ใน type พื้นฐานเช่น int,string ไปใส่ใส object ตัวใหม่แล้ว return object ตัวใหม่ออกมา
2. วิธีนี้ง่ายมาก คือ การ encode object ตัวต้นแบบ แล้วก็ decode อีกรอบเพื่อให้ ได้แต่ค่าต่างๆใน object เท่านั้น ไม่สืบทอดคุณสมบัติอื่นๆด้วย

ตัวอย่างของข้อ 1
function clone(objOld){
var objNew = new Object();
for(var i in objOld){
if(typeof(objOld[i]) == ‘object’ || typeof(objOld[i]) == ‘array’){
objNew[i] = clone(objOld[i]);
}else{
objNew[i] = objOld[i];
}
}
return objNew;
}

a = {a:{a:{a:1,b:2},b:{a:1,b:2}},b{}};
b = clone(a);

ตัวอย่างของข้อ 2
a = {a:{a:{a:1,b:2},b:{a:1,b:2}},b{}};
b = JSON.parse(JSON.stringify(a));

เห็นไหม ข้อ 2 ง่ายกว่า เห็นๆไม่ต้องเขียน code เพิ่มเลย ที่สำคัญนะ ข้อ 2 เร็วกว่าด้วยนะ แต่ก็มีวิธีทำให้ข้อ 1 เร็วขึ้นนะไว้ต่อคราวหน้าละกันนะ

เปลี่ยนไฟล์วีดีโอ เป็นภาพ .GIF (ขนาดเล็ก) by

31
Jul
0

สวัสดีค่ะ วันนี้จะมาสอนวีดีโอไฟล์วีดีโอขนาดเล็กเป็นภาพ .gif นะคะ

.

ซึ่งวันนี้จะมาสอนในรูปแบบไฟล์วีดีโอกันเลยทีเดียว แต่ไมค์คนทำเสียค่ะ

.

เลยต้องวาดให้คุณเจ๊กูเกิ้ลแปลภาษาช่วยพากษ์ให้แทนค่ะ

.

เชิญชมจากลิงค์ข้างล่างได้เลยนะคะ :D

.

watch?v=OAR4YM4Fsq8&feature=youtu.be

.

.

การปรับค่าลักษณะต่างๆของ Text แต่ละบรรทัดใน RichEditableText by

30
Jul
0

จากบล็อคที่แล้วที่ได้แสดงถึงการสร้าง Chat ด้วย RichEditableText ในบล็อคนี้จะอธิบายอีกหนึ่งความสามารถของ RichEditableText ที่มีความยืดหยุ่นมากกว่า TextArea อีกอย่างนึงครับ

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

chat-color

จากการนั่งเจาะดู Property ของมันทำให้ผมเห็นได้ว่า จริงๆแล้วการเก็บ Text ของ RichEditableText นั้นสามารถเก็บแยกๆกันเป็น Paragraph ได้เท่านี้ก็พอเดาได้ใช่ไหมครับว่าเราจะแก้ไข Text แยกกันเป็นส่วนๆได้อย่างไร โดยโค้ดมีหน้าตาดังนี้ครับ

var pe:ParagraphElement = new ParagraphElement; //สร้างตัวแปรย่อหน้า
var se:SpanElement = new SpanElement; //สร้างตัวแปรบรรทัด
se.text = obj.message; //ใส่ค่ากับ Span0
se.color = "#00FFFF"; //ใส่สี ในส่วนนี้สามารถกำหนดค่าลักษณะต่างๆของ Text ส่วนนี้ได้เลยครับ
pe.addChild(se) //กำหนดเสสร็จแล้วก็จับใส่ตัวแปรย่อหน้าเลยครับ
txtChat.content.addChild(pe); //แล้วก็ไปจับใส่ RichEditableText ได้เลยครับ โดยนำไป addChild ใส่ Property content ที่เป็น TextFlow

จากโค้ดข้างต้นเราจะใช้โค้ดดังกล่าวแทน txtChat.text+=obj.message เหมือนทั่วๆไป แต่เราจะสร้างตัวแปรเพื่อกำหนัดคุณลักษณะต่างๆของ Text ก่อนแล้วค่อยในไปใส่ RichEditableText ของเรา แล้วเราจะได้ผลลัพธ์ดังนี้เลยครับ

colorchat2

สร้างห้อง Chat โดยใช้ Spark ของ Adobe Flex by

30
Jul
1

ในที่จริงแล้วการสร้างห้อง Chat ดูเหมือนจะง่าย แต่หลังจากได้ทำแล้วส่วนที่มีปัญหาคือการเลื่อน Scrollbar อัตโนมัติทำงานไม่ถูกต้องเท่าที่ควร ในวันนี้ผมเลยจะมาเสนอวิธีการสร้างห้อง Chat และทำให้มีการ Scroll ที่ถูกต้องครับ

<s:TextInput id="txtChatInput" keyDown="sendChat(event)" text="" x="7" y="133"/>
<s:RichEditableText id="txtChat" clipAndEnableScrolling="true" x="13" y="28" width="201" height="97" editable="false" selectable="false"/>
<s:VScrollBar id="scrllChat" viewport="{txtChat}" fixedThumbSize="true" skinClass="components.chat_scrollVerticalScrollbar" x="213" y="27"/>

จากด้านบน

  • TextInput คือส่วนที่จะให้ผู้ใช้ได้กรอกข้อความ
  • RichEditableText เป็นคอมโพเนนท์ที่คล้ายๆ TextArea แต่ว่าเป็นของ Tag Spark โดยมันมีความสามารถต่างๆเพิ่มเข้ามาทำให้ใช้งานได้ดีมากยิ่งๆขึ้นส่วนสำคัญคือสามารถใช้กับ Custom ScrollBar ของเราได้ดังข้อถัดไป
  • VScrollBar จากที่เห็นจะเป็นการใส่สกินของเราเองและใส่ viewport คือ RichEditableText ของเรา

chat01

ทีนี้โดยทั่วไปแล้ว เมื่อผู้ใช้ได้รับค่าเข้ามาเพื่ออัพเดท Chat เราจะทำการเลื่อนไปที่ล่างสุดโดยอัติโนมัติ แต่โค้ดโดยทั่วไปและ ตาม website ต่างๆได้เสนอมาว่าให้ใส่โค้ดดังนี้ในฟังก์ชั่นอัพเดทค่าห้อง Chat ของเรา ( id ของคอมโพเนนท์ อ้างอิงจากคอมโพเนนท์ด้านบน)

txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat
txtChat.validateNow(); //อัพเดทค่าล่าสุด
scrllChat.value = txtChat.contentHeight; //แบบที่ 1 ให้ Scroll ไปที่ส่วนที่ท้ายสุดของ chat
scrllChat.value = scrllChat.maximum ; //แบบที่ 2 ให้ Scroll เป็นค่าที่สูงที่สุด(ท้ายสุด) ของ Scroll

chat02

แต่ว่าทั้งสองแบบนั้น เมื่อเราทำการพิมหลายๆบรรทัดก็ยังคงทำให้เกิดบั๊คตามมา (แบบที่1มักเป็นกับแค่เพียงภาษาไทย แบบที่สองเป็นทั้งสองภาษา)

ซึ่งหลังจากที่ได้อ่าน Property ต่างๆของ RichEditableText ทำให้ได้การเขียนคำสั่งที่ทำให้ Chat สามารถทำงานได้อย่างถูกต้องตลอดดังนี้ครับ

txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat
txtChat.validateNow(); //อัพเดทค่าล่าสุด
txtChat.scrollToRange(txtChat.text.length,txtChat.text.length); //ใช้ฟังก์ชั่นเลื่อน Scroll ไปที่ตำแหน่งสุดท้ายของอักษรใน Chat ของเรา

chat03

จากด้านบนจะทำให้การเลื่อน Scroll อัตโนมัติของเราเลื่อลงมาล่าสุดได้ตลอดถูกต้องแล้วล่ะครับ

Reference : http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/RichEditableText.html

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