วันนี้มาต่อกันด้วยงาน Flash บ้าง ชิ้นงานที่จะทำกันวันนี้จะเป็นประมาณเยลลี่เด้งดึ๊ง ๆ เวลาเอาเมาส์ไปคลิก หน้าตาเป็นยังไงนะรึ เราไปดูตัวอย่างกันดีกว่า

เตรียมตัวก่อนทำ
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 ไปวางเลยไม่ต้องเกรงใจ )

// 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);
};

ถ้าต้องการให้งานของเราสามารถคลิกแล้วลิ้งไปที่ต่าง ๆ ได้ด้วยก็ใส่ Script นี้เพิ่มไปด้วยเลยครับ

mc1.onRelease = function() {
getURL("ลิ้งที่เราต้องการ", _blank);
};

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

7.เมื่อใส่ Action Script เป็นที่เรียบร้อยแล้วให้เราเทส Movie ดูได้เลยครับโดยไปที่เมนู
Control > Test Movie หรือกด Ctrl + Enter
และก็ทดลองดูผลกรรมที่เราได้สร้างไว้ดู เสร็จแล้ว…

ไอ้งานนี้เคยทำเอาไว้นานแล้วแล้วก็เขียนบทความไปทีที่ www.nsitez.net แต่ไม่ได้ละเอียดเท่าไรก็เลยเอามาหากินใหม่ที่นี้ ตัวผมเองก็ไม่ได้ชำนาญ Action Script มากได้แค่คำสั่งพื้น ๆ ส่วนมากก็จะเปิด Help ที่ติดมากับ Flash8 แล้วก็ลองมามั่ว ๆ ผสมกันดู ( ลองเปิดดูสิแล้วจะรู้ว่า Help ช่วยคุณได้ เอิ๊กๆ ) ยังไงก็ลองทำกันดูนะครับไม่ยากเลยใช่ม้า ( ไม่ยากทั้งปี )

ไม่ลืมสำหรับไฟล์ต้นแบบตัวอย่างสำหรับบทความนี้
( สำหรับ Flash8 ขึ้นไปนะครับ MX,MX2004 รู้สึกจะเปิดไม่ได้ ลองดูแล้วกัน)

Download .FLA Source file : Flash Jelly Tutorial