แฟลชอนิเมชั่นกันง่ายๆ บนเวบ
posted on 18 May 2009 12:16 by kikuka in Howto
พอดีเห็น รายการ Cyber City เอามาออก ช่อง5
อยากทำแฟลชดูบ้างนานแล้ว แต่มึนมาก เลยไม่มีความอดทนพอ
มาลองทำตามเวบนี้ วาดและ ควบคุมการเคลื่อนไหวง่ายดี
แถมไม่ต้องหาโปรแกรมมาติดตั้งด้วย
(แต่ต้องมี java เพื่อเปิดเครื่องมือวาดของเวบนี้นะ
คล้ายๆ วาดโปสการ์ดเอ็กซ์ทีน แต่มีการดุ้กดิ้กๆ วิ่งได้)
ก่อนอื่น เข้าเว็บ http://www.doink.com
แล้วกดสมัครไปเล้ย
เปิดหน้าจอทำงานตรงนี้ ต้องมีjava ในเครื่องด้วยนะคะ
ครั้งแรกอาจจะโหลดนานนิดส์นุง
หน้าตา ดูอิงค์ ดูเป็นมิตรมากมาย ไม่มึน
เครื่องมือด้านบนก็เหมือนโปรแกรมส่วนใหญ่เลย เวลาวาดแล้ว
เส้นก็จะดูดติดกันแล้ว ปรับให้คมสวยเหมือนแฟลชอ่ะจ้า
ทดลองวาดแมวขึ้นมาตัวนึง การทำงานขั้นแรก คือ ทำให้มันกระดิก 5555
(คือทำให้มันขยับ หรือแสดงอารมณ์ ด้วยการวาด หลายๆ เฟรม แต่ยังไม่ต้องให้มันวิ่งหรือเดิน ไง งงมั้ยคะ)
เครื่องมือเอ่อ ...เลือกพื้นที่ ที่ต้องการ มีสามแบบ อันแรกdrag สีเหลี่ยมคลุมพื้นที่ ที่ต้องการ
อันที่สอง จะแก้ไข เพิ่ิมจุดหักเห? ดึงเส้น ใช้การปรับเปลี่ยนแบบนี้จะเนียนกว่าวาดใหม่ทั้งเฟรม
อันนี้ก็เลือกแบบอิสระ
มาลองทำให้มันเอียงคอดู กด + เพิ่มเฟรม จะวาดใหม่ทั้งหมด หรือเอาเฟรมเก่ามาดัดๆ ลบแล้วแต่งก็ได้จ้า
เวลาเซฟ ก็จะเก็บโปรเจคของเราไว้บนเวบ แต่จะยังเห็นแค่เราคนเดียวจ้า
drawingก็คือวัตถุที่เราวาดcomposition คืออนิเมที่เราจะทำเป็นขั้นตอนต่อไป
วาด แมงมุมอีกสักตัว แค่ให้มันกระดิกขา
บางอย่าง ค้นหาpropsที่คนอื่นเคยวาดไว้เอามาประกอบก็ได้นะ โฮะๆ ง่ายจัง
พอตัวละครครบแล้ว เราก็มาสร้างเรื่องราว
สลับโหมดมาทำ อนิเมโดยกดด้านล่าง new composotion
แล้วเราก็ลาก บรรดา แมวหมากาไก่ -*- มาวางไว้ก่อน
จากนั้นก็ย้ายตำแหน่ง ปรับขนาดให้มันลงตัว
ด้านล่าง คือ กำหนด ว่า แมวจะปรากฏเมื่อไหร่ แสดงอยู่นานเท่าไหร่
ก็หยิบ ลาก ย้าย หรือยืดแถบระยะเวลา ได้ตามใจเลย
กดplay ด้านล่าง ทดสอบการแสดงผลก็ได้
คราวนี้มาลอง ทำให้ตัวแมงมุม เคลื่อนที่ เราก็แค่จิ้มที่ตัวมัน
เลือกเครื่องมือในวงกลม
แล้วลากเส้นทาง จะซิกแซกยังไงก็ได้ อย่างเช่น รูปเนือยวิ่งด้านบนสุดนั่น ก็ใช่อันนี้ลาก
เสร็จจริงๆ แล้วค่อย กด share บนเวบ
มองข้างๆ คลิบ จะสามารถโหลดเป็นไฟล์ .swf มาอัพไว้ที่เอ็กซ์ทีนเหมือนอัพรูปได้เลย
แต่แมว กับ แมงมุมนี้ เพราะเอาพร๊อพของคนอื่นมาใช้มั้งเลยโหลด มาอัพที่นี่ไม่ได้
แต่ก็สามารถ ก๊อบโค๊ด Embed มา ใส่ได้
eh??? by zilvernia, made at DoInk.com
ทำแล้วมาอวดกันมั้งนะจ้ะ
5 กลยุทธ์เจาะตลาดสาววาย










#53 By {Abi-hara*} "กระต่าย ซึน ซึน ตัวหนึ่ง" on 2009-05-20 13:47