ฟอนต์ แท่ง

ฟอนต์ แท่ง  คือการเขียนตัวอักษรโดยลางเส้นตั้ง อย่างเดียวก่อน (..แล้วจึงลากเส้นขวางทีหลัง)



เริ่มจากให้ลองเดาว่า คำนี้อ่านว่าอะไรก่อน  



แน่นอน ไม่ได้อ่านง่ายๆ ถ้ายอมแพ้เมื่อไร ก็ให้กดปุ่ม bold เพื่อดูเฉลย



ก็เลย ลองทำ animate font แบบ SVG เพื่อลากเส้นขวางดู  .. ผลออกมา ยังไม่เป็นอย่างที่หวัง แม้จัดฉากไว้แล้ว



และยิ่งใช้งานจริงแบบไม่เตรียมการ ก็จะเละ อย่างนี้



55 ถือเป็นงานทดลองอีกอย่างสนุกดี เขียนโปรแกรมมือหงิก อ่านตำราอีกเพียบเลย แม้จะดู fail fail ก็เหอะ 55

ีuvSOV

download  https://drive.google.com/file/d/1mTORvglBURD7Qh5j7P3hmdW0UTxBglXG/view?usp=sharing

เบื้องหลัง coding อย่างเมามัน สำหรับ animate font

เนื่องด้วย SVG file เป็นรูปก็จริง แต่มันเป็น XML text file ด้วย ดังนั้น ก็ใช้ editor ปรกติ เขียน code ลงไปเลยตรงๆ สะดวกสุดๆ




reference site https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL  สำหรับพื้นฐาน
ส่วนลูกเล่น ยากๆ ให้ไปดูตัวอย่าง พวกที่เขียนด้วย java script  แล้วแกะ parameter มาใช้งานได้  เพราะส่วนใหญ่ไม่มีใครเขียนลงไปใน SVG ตรงๆแบบนี้

สำหรับคนไม่อยาก coding สำหรับทำ animation www.svgator.com (ไม่ฟรี) เป็นเครื่องมือให้เราสามารถสร้าง animation ได้คล้ายๆกับโปรแกรม Ae, An พร้อม export เป็น .svg signle file. ยังไม่ได้ลองใช้ไม่รู้ว่าจะทำ animation font ได้หรือป่าว ดูโค้ดที่มัน export ออกมาจะกำกับ aniamte ด้วย css แทนกำกับด้วย pure xml  

ในเชิงฟังก์ชันนี่ถือว่าล้ำอนาคตมาก
แต่อยากรู้ฟอนต์แอนิเมชันนี่ จะสามารถใช้งานในโอกาสไหนได้บ้างหนอ

เท่าที่พอนึกออกเร็วๆ (ถ้าโปรแกรมรองรับ)
ก็เช่น เอาไปใส่วิดีโอหนุกๆ / ทำพรีเซนเทชันว้าวๆ

คิดดูก็น่าสนุกมากเลยนะครับ ที่ต่อไปการแอนิเมตงานจะมากับฟอนต์ตั้งแต่แรกเลย โหดมาก

ในทางเทคนิคแล้ว SVG + CSS สามารถสร้าง Interactive กับผู้ใช้ได้นอกจากการทำ Animation
เช่นตัวอย่างโค้ดอันนี้ https://codepen.io/chriscoyier/pen/NRwANp
ต่อไปในอนาคตถ้าโปรแกรมในตลาดลองรับได้มากพอสมควรจะเปิดมิติใหม่
ในการสร้างฟอนต์กันเลยทีเดียวจะเป็น Interactive Animation Font (IAF : คิดเอาเอง )  
ความสามารถต่างๆจะรวมอยู่ในไฟล์เดียว OTF, TTF

เหยยย

สำหรับคนไม่อยาก coding สำหรับทำ animation www.svgator.com (ไม่ฟรี) เป็นเครื่องมือให้เราสามารถสร้าง animation ได้คล้ายๆกับโปรแกรม Ae, An พร้อม export เป็น .svg signle file. ยังไม่ได้ลองใช้ไม่รู้ว่าจะทำ animation font ได้หรือป่าว ดูโค้ดที่มัน export ออกมาจะกำกับ aniamte ด้วย css แทนกำกับด้วย pure xml  

่ไปลองอันนั้นก่อนเลยครับ  ..ลองเอา code มาใช้แล้ว เอาเข้า browser ตรงๆใช้งานได้ แต่เอามาทำ font ไม่ขยับเลย .. ก็เลยไปดูตัวอย่าง พบว่าต้องเขียน code ใน svg ตรงๆ  ส่วน svgator..เน้น animate โดย CSS เป็นหลัก  ซึ่งก็ถูกของเขา แต่ใช้คนละวัตถุประสงค์กัน

ในทางเทคนิคแล้ว SVG + CSS สามารถสร้าง Interactive กับผู้ใช้ได้นอกจากการทำ Animation
เช่นตัวอย่างโค้ดอันนี้ https://codepen.io/chriscoyier/pen/NRwANp
ต่อไปในอนาคตถ้าโปรแกรมในตลาดลองรับได้มากพอสมควรจะเปิดมิติใหม่
ในการสร้างฟอนต์กันเลยทีเดียวจะเป็น Interactive Animation Font (IAF : คิดเอาเอง )  
ความสามารถต่างๆจะรวมอยู่ในไฟล์เดียว OTF, TTF

จริง..  นี่ก็ไปแกะ code CSS มาจากที่นี่แหละ แล้วเอากลับมาเขียนใน SVG
แต่ส่วนตัว.. ก็คิดว่า interactive ผ่าน CSS, javascript น่าจะเหมาะกว่า SVG เอาไว้เป็นส่วน vector แสดงรูป ลูกเล่นเอาไปไว้ที่ web interface

ในเชิงฟังก์ชันนี่ถือว่าล้ำอนาคตมาก
แต่อยากรู้ฟอนต์แอนิเมชันนี่ จะสามารถใช้งานในโอกาสไหนได้บ้างหนอ

เท่าที่พอนึกออกเร็วๆ (ถ้าโปรแกรมรองรับ)
ก็เช่น เอาไปใส่วิดีโอหนุกๆ / ทำพรีเซนเทชันว้าวๆ

คิดดูก็น่าสนุกมากเลยนะครับ ที่ต่อไปการแอนิเมตงานจะมากับฟอนต์ตั้งแต่แรกเลย โหดมาก

ผมคิดได้แต่พวก เด้งดึ๋งๆ แต่จะวนเด้งๆไป ก็น่าเบื่อในที่สุด หรือไม่ก็ทำพวกอักษรพิเศษ เช่น logo แล้วมีแสงแว๊บผ่าน เทือกๆนั้น 55
ลองไปค้นๆดู เท่าที่หาๆดู แนวนี้น่าสนใจ น่าจะมาครับ --> animography ใช้สำหรับงาน after effect  (ราคาก็สูงดีนะ) ใช้ jsx หรือไม่ก็ aescript
https://animography.net/collections/typefaces
https://aescripts.com/after-effects/animation-libraries/animated-typefaces/jsx-typeface/
มีตัวฟรีให้ทดลอง download มาศึกษาก่อน  ถ้ามี after effect ใช้ ลองดูครับ (ผมไม่มี 55)

วันนี้ลอง เอาฟอนต์สี CORL/CPAL มารวมกับ SVG animate .. ได้แฮะ
คือโปรแกรมไหน ไม่รองรับ มันก็เป็นสีเฉยๆ แต่ถ้ารองรับ SVG มันก็ขยับ ยุกยิกๆได้

โหดร้ายสุดๆ

ชวนให้คิดถึง พวกป้ายไฟLED ป้ายไฟวิ่ง อยู่นะครับ
ไม่รู้ว่าหลักการจะแนวเดียวกันไหม 

ชื่อฟอนต์ : แท่ง

ลิงก์ : https://forum.f0nt.com/index.php/topic,24805.0.html

ข้อมูลการติดต่อ : https://www.facebook.com/worawut.thanawatanawanich

ภาพตัวอย่าง :







ภาพไอคอน :


ภาพโปสเตอร์ :


รายละเอียด :
ฟอนต์ แท่ง  คือการเขียนตัวอักษรโดยลางเส้นตั้ง อย่างเดียวก่อน เป็นคำหรือประโยคก่อน แล้วจึงลากเส้นขวางทีหลัง  ซึ่งตอนที่เป็นเส้นตั้งก็จะอ่านยากมากถึงอ่านไม่ออก ให้กดปุ่ม bold จะได้คำเฉลย
และทำฟอนต์เปลี่ยนรูป(animate font) แถมมาขำๆด้วย

uvSOV

download font : https://drive.google.com/file/d/1mTORvglBURD7Qh5j7P3hmdW0UTxBglXG/view?usp=sharing

[มังกร]

เอิ้ววววววว 

http://erikdemaine.org/fonts/tetris/

ทำเป็นตัวอนิเมท ตัวต่อแบบเว็บนี้ก็น่าสนดีนะครับ
อยากทำ แต่ไม่รู้จะได้มีเวลาทำเมื่อไหร่ 55555