knowledge

เพิ่งรู้จริงๆ ว่า Photoshop ตัดต่อวิดีโอได้ !!!

10/07/2014

ตกข่าวมากๆ เลย เพิ่งรู้จริงๆ ว่า Photoshop ในเวอร์ชัน CS6 นั้น สามารถตัดต่อวิดีโอได้ด้วย -0- อะไรมันจะอเนกประสงค์ปานนี้ เนื่องจากไม่ค่อยได้ใช้โปรแกรมนี้เลย เวลาใช้ก็ใช้แค่ตัดรูปภาพนิดๆ หน่อยๆ เท่านั้น สรุปตกข่าวไปประมาณ 2 ปีได้มั้ง ฮ่าๆ วันนี้ก็เลยจะมาลองดูความสามารถคร่าวๆ ว่ามันจะที่งานเกี่ยวกับการตัดต่อวิดีโอได้ดีแค่ไหน … เปิดโปรแกรม Photoshop CS6 ขึ้นมา – สามารถทำงานในส่วนของวิดีโอได้เลยจากในไฟล์ psd หรือจะนำเข้าวิดีโอ หรือรูปภาพมาใช้ก็ได้ – แบ่งวิดีโอเป็นเลเยอร์ หลายๆเลเยอร์รวมอยู่ใน Group และแยกระหว่างภาพและเสียง Sony Vegas หรือ Pr เลย – มี Timeline หน้าตาเท่มาก คล้ายๆ กับใน After Effect รวมทั้งเรื่อง keyframe ก็เป็นเหมือน AE เลย – ใส่ Transition ได้ แต่น้อยไปหน่อยนะ – ตัดแบ่งวิดีโอเป็นส่วนๆ ได้ง่ายๆ แค่คลิกเดียว ลากไปต่อตรงไหนก็ตามสบาย – ไม่จำเป็นต้องใช้แต่ไฟล์วิดีโอนะ ไฟล์ภาพที่ตกแต่ง …

Continue reading

Flash AS 3.0 – การสุ่มค่าสีให้กับข้อความ, Movie Clip

06/07/2014

หายไปนานเลย ฮ่าๆ มึนๆ ไปกับ Flash นี่แหละ เอาล่ะวันนี้เราจะมาสุ่มค่าสีกัน … การสุ่มค่าสี มาเริ่มที่การสุ่มค่าสีก่อน 1.1 สุ่มทุกสีในโหมดสี RGB ก็ง่ายๆ เลยคือ Math.random()*(ค่าสี) ตัวอย่าง Math.radom()*0xFFFFFF; //แบบนี้จะเป็นการสุ่มทุกสี 1.2 สุ่มเฉพาะสีที่เรากำหนดไว้ แบบนี้ ผมใช้วิธีเก็บค่าสีไว้ใน Array แล้วก็สุ่มเลขดัชนี ดึงค่านั้นออกมา ตัวอย่าง

จะเป็นการสุ่มค่าสีที่อยู่ใน Array ซึ่งมี 3 สีคือ แดง, เขียว, น้ำเงิน แล้วกำหนดสีพื้นหลังให้เป็นสีที่สุ่มได้ 1.3 สุ่มเฉพาะโทน หรือกลุ่มของสี อันนี้ยากอยู่นะ ผมก็ยังไม่ชำนาญ การทำแบบนี้มีอยู่หลายวิธีเลยล่ะ แต่ผมรู้อยู่วิธีเดียว คือแยกสุ่มเฉพาะค่าของสีใดสีหนึ่งแล้วค่อยเอามารวมกัน ซึ่งต้องเข้าใจก่อนว่าโค้ดสี RGB มันจะเป็น FFFFFF ซึ่งแสดงค่าสีเรียงตามนั้น คราวนี้ถ้าเราต้องการเอาเฉพาะโทนสีแดง สุ่มเฉพาะหลักแรก พูดไปก็งง ลองเขียนโค้ดเลย -..-

จากตัวอย่างข้างบนคือสุ่มค่าของแม่สีแดง โดยค่าแม่สีอื่นให้เป็น 0 ดังนั้นสีที่สุ่มได้ มันก็จะเป็นแดง แดงเข้ม ไปเรื่อยๆ จนถึงแดงดำ ส่วนถ้าจะสุ่มแบบละเอียดกว่านี้เช่น …

Continue reading

WebFlow สร้างและออกแบบเว็บไซต์ง่ายๆ เพียงแค่ลากวาง

10/06/2014

        ได้ไปลองใช้ Webflow ซึ่งเป็นโปรแกรมใช้ในการออกแบบ สร้างเว็บไซต์ด้วย HTML และ CSS โดยทำงานในโปรแกรม Browser หรือทำงานแบบออนไลน์เลย โดยการลากแล้ววาง ดูแล้วท่าทางจะง่ายมากๆ สามารถ Publish Site ได้เลยโดยจะได้โดเมนเป็น mysite.webflow.com ซึ่งในเวอร์ชั่นฟรีจะได้แค่ 1 เว็บไซต์เท่านั้น และยังสามารถ Export Code เพื่อนำมาใช้งานในเครื่องเราหรืออัพขึ้นเว็บเราเองได้        การทำงานก็คล้ายๆกับโปรแกรม Dreamweaver แหละนะ แต่ Webflow เราไม่จำเป็นต้องไปแตะโค้ดเลยซักนิดเดียว ลากวาง ปรับค่าอย่างเดียว มันง่ายสำหรับมือใหม่มาก ถึงแม้จะไม่รู้โค้ด CSS เลยก็ตาม เพราะเมื่อปรับค่า มันก็จะสร้างโค้ดและแสดงผลทันทีเลย และทำการเซฟให้อัติโนมัติ ถ้าจะเรียนรู้ CSS เรียนรู้โดยใช้วิธีนี้ก็ไม่เลวเลย และอีกอย่างเว็บไซต์ทำงานบนพื้นฐานของ Template และเป็น Responsive ด้วย คือสามารถรองรับกับอุปกรณ์พกพาพวก Smart Phone, Tablet ไรงี้ได้ ซึ่งเว็บแนวนี้รู้สึกจะทำยากอยู่เหมือนกัน ถ้าเราต้องเขียนโค้ดเอง ทดลองใช้งานซะหน่อย – ดูหน้าตาของโปรแกรม สวยงามเรียบง่าย – …

Continue reading

Flash – Text Animate – ข้อความค่อยๆ แสดงอย่างรวดเร็ว

30/05/2014

ตั้งชื่อบทความยากมาก -..- เอาหล่ะวันนี้จะทำไร พอดีไปเจอคำถาม มีคนถามใน pantip ว่าตรงแถบนี้ทำยังไง ? เราก็เลยเจอก็เลยอยากลองทำ (ว่างจัดไง)  จริงๆ ใช้ AE ทำดูท่าจะง่ายกว่า แต่เราจะต้องทำด้วย Flash งั้นก็ลุยเลย !!! ตัวอย่างวิดีโอ ตรงที่มันเป็นข้อความแสดงตัวเลข ชื่อนักร้อง และชื่อเพลงอ่านะ จากการดูตัวอย่าง จะเห็นว่ามีแค่การ scale กับ Mask เท่านั้น ซึ่งไม่ยากเท่าไหร่ เริ่มกันเลย !!! ตัวอย่างเมื่อเสร็จแล้ว   1. วาดวัตถุทั้งหมด ที่เราเห็น กรอบของตัวเลขลำดับ – วาด 4 เหลี่ยมจตุจักร เอ้ย ! จัตุรัส โดยใช้ Rectangle Tool กด Shift ตอนวาดด้วย แล้วแปลงเป็น Graphic Symbol – ใช้ Text Tool พิพ์ตัวเลข แล้วก็แปลงเป็น Graphic Symbol กรอบของชื่อศิลปิน และชื่อเพลง – วาด …

Continue reading

พื้นฐานการทำ CSS Menu

29/05/2014

         การทำ menu CSS เอาแค่พื้นฐานๆ ให้รู้ว่าอะไรตรงไหน เป็นยังไง เพราะว่าเดี๋ยวนี้ menu css สามารถหาได้ง่ายๆ ตามเว็บซึ่งแจกฟรีกันไปเลย แถมยังสวยกว่าเราทำเองอีก ฮ่าๆ แต่เราก็สามรถนำมาแก้ไขตามที่เราต้องการได้ CSS Menu แนวตั้ง 1. ขั้นแรกก็สร้าง List ก่อน HTML

ผลลัพธ์ 2. ใส่ css #menu {} /*กำหนดรูปแบบให้กับ selector เช่นความกว้าง สูง สี*/#menu li a:link {} /*กำหนดลิ้งที่อยู่ใน list*/#menu li a:visited {} /*กำหนดลิ้งใน list ที่ถูกเยี่ยมชมไปแล้ว*/#menu li a:hover {} /*กำหนดลิ้งใน list เมื่อเมาส์ชี้*/#menu li a:active {} /*กำหนดลิ้งใน list เมื่อเมาส์กด*/

ผลลัพธ์ อธิบายนิดหน่อย list-style:none; ก็คือเอาสญลักษณ์หน้ารายการออก (ที่มันเป็นจุด)display: …

Continue reading

พื้นฐาน CSS Properties – Lists And Links

22/05/2014

Lists and Link List  List หรือรายการเป็นอีก element ที่นิยมใช้กันมาก ส่วนใหญ่จะเกี่ยวกับการทำ css menu หรือ Navigation (ลิ้งนำทาง) ซึ่งจะใช้ Tag <ul>, <ol>, <li>, ซึ่งถ้าเราไม่กำหนดอะไร มันก็แสดงผลเป็นค่าปกติของมัน แต่ถ้าเราอยากเปลี่ยนรูปแบบการแดสงผลล่ะ ก็ต้องใช้ CSS เข้ามาช่วย       การแสดงผลเมื่อไม่ได้กำหนดอะไร โค้ด

จะเห็นว่ามันก็ธรรมดาๆ อ่ะ ถ้าเราจะปรับแต่งได้มั้ย อ่าได้ ก็ต้องใช้ความสามารถของ CSSProperty ที่ใช้ในการจัดรูปแบบของ list ก็คือlist-style-type เป็นรูปสัญลักษณ์ที่อยู่หน้ารายการ ประกอบด้วย disc วงกลมทึบ เป็นค่าปกติ armenian circle cjk-ideographic decimal decimal-leading-zero georgian hebrew hiragana hiragana-iroha katakana katakana-iroha lower-alpha lower-greek lower-latin lower-roman square upper-alpha upper-latin upper-roman none คือไม่ใส่สัญลักษณ์ list-style-image …

Continue reading

พื้นฐาน CSS Properties – Box Model – กล่อง กรอบ ขอบ เขต

19/05/2014

Box Model หรือจะแบบไทยๆ ว่า อะไรดี… เรื่องนี้จะเกี่ยวกับการกำหนดรูปแบบของ กรอบ ขอบเขต ของ element ซึ่งเป็นเรื่องที่สำคัญอันดับต้นๆ เลยล่ะในการออกแบบเว็บไซต์ ที่จริง position ก็สำคัญพอๆ กัน -..- เอาล่ะ ดูรูปกันก่อน border ขอบหรือกรอบ (สีแดง) margin พื้นที่ส่วนที่ขยายออกจากขอบออกไปด้านนอก (สีขาว) padding พื้นที่ส่วนที่ขยายออกจากขอบเข้ามาด้านใน (สีดำ) content คือเนื้อหาของเว็บไซต์ ไม่ว่าจะเป็นข้อความ รูปภาพ วิดีโอ อื่นๆ (สีเทา) มาดูรายละเอียดกันเลย…  1. border มีรายละเอียดปลีกย่อยเยอะพอสมควร ลักษณะการเขียนในแบบต่างๆ – border-width: กำหนดความกว้าง สามารถกำหนดได้เป็น thin บาง, medium กลาง, thick หนาสุด หรือใส่เป็น px ก็ได้ – border-style: กำหนดรูปแบบของขอบ ดูเพิ่มเติมด้านล่าง – border-color: กำหนดสีของขอบ ก็ใส่ค่าเป็นค่าของสี หรือ – border-[top|right|bottom|left]-[width|style|color]: value; …

Continue reading

พื้นฐาน CSS Properties – Position – การกำหนดตำแหน่ง

08/05/2014

      วันนี้เป็นเรื่องของ position หรือการกำหนดตำแหน่งของ element ว่าจะให้มันแสดงผลอยู่ตรงไหนๆ และมีรูแบบการแสดงผลด้วย Position – เป็นการกำหนดลักษณะการแสดงผล แบบต่างๆ ได้แก่ position: static; – เป็นค่าเริ่มต้น position: absolute; – กำหนดตำแหน่งได้ ทับ element อื่น พาตัวเองไปอยู่จุดที่กำหนด โดยอิงจากตำแหน่งของจอ browser โดยไม่สน element อื่น ยกเว้นว่า absolute ไปอยู่ใน element ที่กำหนด position เป็น relative มันก็จะไปอิงกับ element นั้นแทนที่จะอิง browser position: fixed; – ตำแหน่งค้างอยู่ที่เดิม แม่จะเลื่อน scrollbar ลงมันก็จะเหมือนเลื่อนตาม position: relative; – กำหนดตำแหน่งได้  คล้าย absolute แต่ตำแหน่งจพถูกอิงกับ element แม่ของมัน หรือที่อยู่ด้านบน และสามารถกำหนดตำแหน่งการแสดงผลleft – กำหนดระยะห่างจากด้านซ้ายright – กำหนดระยะห่างจากด้านขวาtop – กำหนดระยะห่างจากด้านบนbottom – กำหนดระยะห่างจากด้านล่าง …

Continue reading

พื้นฐาน CSS Properties – Color Background and Image – ภาพพื้นหลัง

07/05/2014

วันนี้จะเป็นคุณสมบัติของ CSS ในเรื่องเกี่ยวกับการใส่สีพื้นหลัง ภาพพื้นหลัง เอาแบบพื้นๆ ไปก่อน จะเป็นยังไงไปดูกันเลย… background-color        กำหนดสีของพื้นหลัง ตัวอย่าง background-color:#FFF; ซึ่งค่า Value จะเป็นรหัสสีซึ่งก็สามารถเขียนได้หลายแบบ ดูเพิ่มเติ่ม……CSS กับ Value background-image ภาพพื้นหลัง ใส่ภาพพื้นหลัง โดย Value จะเป็น URL ของภาพ ตัวอย่าง url(images/olivia5.jpg) หรือภาพจากอินเทอร์เน็ตก็ได้เช่น url(https://www.image.com/olivia.jpg) ประมาณนี้ แต่ต้องระบุโพรโทคอลโดยใส่คำว่า http ด้วย background-repeat เป็นการแสดงภาพซ้ำ value ได้แก่ repeat เป็นค่าปกติ โดยจะซ้ำทั้ง x และ y โดยตำแหน่งของภาพเริ่มจากด้านซ้าย background-repeat: repeat; no-repeat ก็คือไม่ซ้ำภาพ จะแสดงภาพเดียว background-repeat: no-repeat; repeat-x ซ้ำภาพในแนวนอน หรือแกน X background-repeat: repeat-x; repeat-y ซ้ำภาพในแนวตั้ง หรือแกน Y background-repeat: repeat-y; …

Continue reading

พื้นฐาน CSS Properties – Font and Text – รูปแบบฟอนต์และข้อความ

06/05/2014

  1. Font & Text – เกี่ยวกับฟอนต์และข้อความ  Font รูปแบบฟอนต์ font-famimy รูปแบบของตระกูลฟอนต์ที่จะใช้ ดูเพิ่มเติมได้ที่ css_websafe_fonts font-style กำหนดตัวธรรมดา ตัวเอียง ได้แก่ normal, italic, oblique font-variant กำหนดตัวพิมพ์เล็ก ได้แก่ normal – ปกติ, small-caps  กำหนดให้อักษรเป็นพิมพ์ใหญ่ทั้งหมด แต่ขนาดอักษรจะเล็กเท่าเดิม font-weight น้ำหนักหรือความหนาของอักษร ได้แก่ normal, bold, bolder, lighter, 100, 200, 300…900 font-size ขนาดของอักษร ได้แก่ medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger font เป็นการเขียนแบบ shorthand คือเขียนแบบสั้น ตัวอย่าง

ผลลัพธ์   Text รูปแบบข้อความ line-height – ระยะห่างระหว่างบรรทัด ได้แก่ normal, …

Continue reading