บ้าน
โพสต์มาเเเล้ว
เงินตราFlash :การทำปุ่มเมนูแบบเด้งดึ๋ง jellyFlash, jelly
สองอันนี่แหละที่เราจะทำกัน[ ลองเอาเมาส์ ไปจิ้ม ๆ ดูสิ เอิ๊ก ๆ ] สำหรับคนที่ยังไม่มีโปรแกรมโฟโต้ชอป มีมาแนะนำให้ดาวน์โหลดทุกเวอร์ชั่น ดาวน์โหลดโปรแกรมPhotoshop ทุกเวอร์ชั่น . . v http://www.enjoylike.com/forum/forumdisplay.php?fid=6 เมื่อมีโปรแกรมโฟโต้ชอปกันแล้วมาหัดทำกัน เตรียมตัวก่อนทำ 1.โปรแกรม Macromedia Flash 8 ( ตอนนี้ต้องบอกว่า Adobe Flash แล้วสิเนอะ แต่ชอบ Macromedia มีไรอ่ะเปล่า ) เวอร์ชั่น MX,MX2004 ใช้ได้เปล่าผมมิแน่ใจต้องลองดูแล้วกัน 2.ความตั้งใจ และทำใจเย็น ๆ อย่างงกับบทความ ( อันนี้สำคัญ ฮ่า ๆ ) 3.มีทั้งข้อ 1 และ 2 เริ่ม 1.สร้างงาน flash เปล่า ๆ ขึ้นมา กำหนดขนาดของพื้นที่งานตามที่ต้องการครับ - กำหนด Frame Rate : 18 ( อาจจะสัก 18 - 25 ก็ได้ครับเพื่อความนุ่มนวลของตัวเยลลี่ ^^ ) - เปิดหน้าต่าง Library ขึ้นมาโดยไปที่เมนู Window > Library หรือกด Ctrl + L - เมื่อหน้าต่าง Library โผล่มาแล้วให้คลิกที่ปุ่ม + ด้านล่างซ้ายของ Library เพื่อสร้าง MovieClip ( ดูภาพประกอบในจุดที่ 3 )  [ รูปมันบีบคลิกขยายดูหน่อยน๊า ] 2.เมื่อคลิกแล้วจะโผล่ไดอะล๊อก Create New Symbol ขึ้นมา - ตั้งชื่อ Symbol ว่าอะไรก็ได้ ( ผมตั้งเป็น My Symbol ) - ติ๊กเลือกประเภทของ Symbol เป็น Movie Clip ( ตามภาพ )  3.ตอนนี้เราจะทำงานอยู่ในส่วนของ Movie Clip ที่เราสร้างขึ้นมาแล้วครับ ( ในภาพจุดที่ 1 ) - ทำการวาดภาพ,ข้อความหรือโลโก้ อะไรก็แล้วแต่ที่เราต้องการลงไปใน Movie Clip ( อันนี้อยู่ที่ท่าน ๆ จะวาดแล้วครับขึ้นกับความสามารถเฉพาะหน้า เอ้ย เฉพาะตัว ส่วนผมหากินกับโลโก้ตัวเองง่ายสุด ^^ ) - เมื่อได้รูปที่ต้องการเป็นที่เรียบร้อยแล้วก็ให้คลิกที่ Scene 1 เพื่อกลับไปหน้า Stage ทำงานหลักของเรา ( ในภาพจุดที่ 2 )  [ รูปมันบีบคลิกขยายดูหน่อยน๊า ] 4.เมื่อกลับมาที่ Stage ทำงานหลักของเราเป็นที่เรียบร้อยแล้วก็ลุยกันต่อ - ลาก Movie Clip ที่เราได้สร้างไว้เรียบร้อยแล้วจาก Library มาวางที่ Stage ( ในภาพจุดที่ 1 ) - ตั้งชื่อ Movie Clip ว่า mc1 ( ในภาพจุดที่ 2 )  [ รูปมันบีบคลิกขยายดูหน่อยน๊า ] 5.เมื่อตั้งชื่อให้กับ Movie Clip แล้วก็ให้คลิกที่ Filters เพื่อกำหนดเงาให้กับ Movie Clip เราซะหน่อย( ในภาพจุดที่ 1 ) - คลิกที่ + แล้วเลือก Filter : Drop Shadow ( ในภาพจุดที่ 2 ) - จากนั้นกำหนด Properties ตามภาพ ( ในภาพจุดที่ 3 ) *** แท๊บคำสั่ง Filters รู้สึกว่าจะมีใน Flash8 ขึ้นไปนะครับถ้าจำไม่ผิด MX,MX2004 จะไม่มี  [ รูปมันบีบคลิกขยายดูหน่อยน๊า ] 6.เมื่อกำหนด Filters เป็นที่เรียบร้อยแล้วมาถึงขั้นตอนสำคัญที่จะทำให้งานของเราเด้งได้ (^^) - เปิดหน้าต่าง Action ขึ้นมาโดยไปที่เมนู Window > Actions หรือกด F9 - คลิกเลือกที่ Frame1 ( ในภาพจุดที่ 1 ) ***เน้นว่าต้องคลิกที่ Frame1 ก่อนนะครับ ถ้าคลิกเลือกแล้วที่หน้าต่าง Action จะขึ้นเป็น Action - Frame ( ในภาพจุดที่ 2 ) เป็นอันว่าถูกต้องเพราะเราจะเขียน Action Script กันที่ Frame - ใส่ Action Script ลงไปดังนี้ครับ ( ในภาพจุดที่ 3 )( copy ไปวางเลยไม่ต้องเกรงใจ ) <BLOCKQUOTE style="LINE-HEIGHT: normal; WORD-WRAP: break-word"> // Jelly // Code By Xenogenesis // http://xenstudio.wordpress.com var mcWidth = _root.mc1._width; var mcHeight = _root.mc1._height; var mcRotation = _root.mc1._rotation; this.stop(); import mx.transitions.*; import mx.transitions.easing.*; mcr = new Tween(mc1, "_rotation", mx.transitions.easing.Elastic.easeOut, mcRotation - 10, mcRotation + 10, 5.5, true); mcr.onMotionFinished = function() { mcr.yoyo(); }; mc1.onRollOver = function() { mcw = new Tween(mc1, "_width", mx.transitions.easing.Elastic.easeOut, mcWidth, mcWidth + 20, 3, true); mch = new Tween(mc1, "_height", mx.transitions.easing.Elastic.easeOut, mcHeight, mcHeight + 20, 2, true); }; mc1.onRollOut = function() { mcw = new Tween(mc1, "_width", mx.transitions.easing.Elastic.easeOut, mc1._width, mcWidth, 3, true); mch = new Tween(mc1, "_height", mx.transitions.easing.Elastic.easeOut, mc1._height, mcHeight, 2, true); }; </BLOCKQUOTE> ถ้าต้องการให้งานของเราสามารถคลิกแล้วลิ้งไปที่ต่าง ๆ ได้ด้วยก็ใส่ Script นี้เพิ่มไปด้วยเลยครับ <BLOCKQUOTE style="LINE-HEIGHT: normal; WORD-WRAP: break-word"> mc1.onRelease = function() { getURL("ลิ้งที่เราต้องการ", _blank); };</BLOCKQUOTE>  [ รูปมันบีบคลิกขยายดูหน่อยน๊า ] 7.เมื่อใส่ Action Script เป็นที่เรียบร้อยแล้วให้เราเทส Movie ดูได้เลยครับโดยไปที่เมนู Control > Test Movie หรือกด Ctrl + Enter และก็ทดลองดูผลกรรมที่เราได้สร้างไว้ดู เสร็จแล้ว…  <BLOCKQUOTE style="LINE-HEIGHT: normal; WORD-WRAP: break-word"> ไอ้งานนี้เคยทำเอาไว้นานแล้วแล้วก็เขียนบทความ แต่ไม่ได้ละเอียดเท่าไรก็เลยเอามาหากินใหม่ที่นี้ ตัวผมเองก็ไม่ได้ชำนาญ Action Script มากได้แค่คำสั่งพื้น ๆ ส่วนมากก็จะเปิด Help ที่ติดมากับ Flash8 แล้วก็ลองมามั่ว ๆ ผสมกันดู ( ลองเปิดดูสิแล้วจะรู้ว่า Help ช่วยคุณได้ เอิ๊กๆ ) แต่วันนี้ค่อนข้างเซ็งนิด ๆ ที่ Wordpress.com ใส่ไฟล์ flash ไม่ได้ซะงั้น ยังไงก็ลองทำกันดูนะครับไม่ยากเลยใช่ม้า ( ไม่ยากทั้งปี )</BLOCKQUOTE> |
