Jelly "เด้งดึ๊ง ๆ" (Re-Publish)
วันนี้มาต่อกันด้วยงาน 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.comvar 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 : [ LINK 1 ]
โอ้ แย่จัง เราทำไม่ได้ ไม่มีแฟลชอ่ะ
พี่โอครับ ตรงเครื่องหมายฟันหนู มันต้องเป็น ” อันนี้อ่ะ
ไม่ใช่ ” ถ้าใช้อันนี้ ” มันจะ compile ไม่ผ่าน
เหวอๆ WordPress มันเปลี่ยนเครื่องหมาย ” ให้อยู่ดี พี่ช่วยหาทางแ้ก้ไขให้ หน่อย เผื่อคนไม่รู้แล้วหาทางแก้ไม่ถูก
เดี๋ยวผมจะลองแก้ดูนะครับ ขอบคุณด้วยนะครับ ( ไม่เคยรู้ว่ามัน Compile ไม่ผ่านด้วยแหะ..ไอ้โอไม่ปลิ้ม T^T )
แก้ให้แล้วนะครับทดสอบ Compile แล้วผ่านสุด ๆ แหล่มเลย เอิ๊กๆ
( ไอ้โอกลับมาปลิ้มอีกรอบ )
ขอบคุณ Chengings ด้วยนะครับ
ว่าแต่ผมเป็นพี่จริงดิ ( ไม่ม้าง )
คงพี่จริงๆ แหละ เอิ้กๆ
พี่โอแก่กว่าตั้ง 2 ปี
ม่ายนะ
(แต่ไงก็เท่ากันกับยัยนุชแหละ ฮ่า ๆ)
ใครว่าเท่า ห่างกันตั้ง 4 เดือน
ก็แก่กันทั้งคู่แหละ หุๆๆ
โดนเด็กตอกเข้าให้เป็นไง เอิ๊กๆ
-*-
good tip. I’ll learn Flash sometime soon. Stop by later for more tips.
พี่คับ ทำไมของผม เวลามันเด้งๆ แล้วภาพมันแตกอ่ะคับ
คือผมเอารูปจากที่พี่สอน ปุ่มแก้วใสๆอ่ะคับ
ช่วยบอกทีคร้าบบบ
ถ้าใช้ภาพที่เป็นพวก Bitmap ( jpg,bmp,gif,png ) เข้ามาใช้ในงาน พวกนี้ภาพจะแตกครับเวลามีการขยายตัวของภาพ
แนะนำให้วาดเป็นแบบ Vector จะดีกว่าครับ ( เวลามีการ Zoom ภาพ จะไม่แตกเหมือนพวก Bitmap )
ง่าย ๆ ก็คือวาดมันใน Flash นั้นเองจะดีสุดอย่า Import ภาพเข้ามาใช้ในงาน เป็นเรื่องปกติ ๆ อย่าได้ตกใจไป ^^
อยากทำมั่งอ่ะ แต่ไม่มีแฟลช
จะทำแมว เด้งๆ เอิ้ก
นั้นละใช่เลยยยยยยยยยยยยย อยากทำมานาน
ขอบคุณมากนะคะ เป็นประโยชน์มากเลย ^^ อยากจาขอ MSN ของคุณที่สอนน่ะค่ะ จะได้รึป่าวคะ ^^
สวยอ่ะ ชอบมากเลย มาเว็บนี้แล้วได้ความรู้ทั้ง Photoshop และก็ Flash เลย แจ๋วจริงๆ เลยครับ
ขอบคุณมากๆ เลยครับ
สวัสดีค่ะ ไม่ทราบเหมือนกันว่าพี่เจ้าของสตูฯนี้ยังตอบคำถามคลาสนี้อยู่อีกไหมคะ
คือหนูเพิ่งลองเล่นแฟลชค่ะ หนูชอบสไตล์งานของเว็บพี่มากๆเลยค่ะ
^^
แต่ทีนี้ Action Script ที่พี่ให้ไว้ข้างบน
หนูเอาไปใส่แล้วมันไม่แสดงผลค่ะ ตอน Test Movie มันขึ้นแต่รูปเฉยๆ
หนูเลยอยากจะรบกวนพี่ขอวิธีแก้ไขหน่อยได้ไหมคะ
หนูเห็นพี่ REP#3 4 5 6 ข้างบนคุยกันเรื่องฟันหนู
มันจะเกี่ยวกันไหมคะ
รบกวนด้วยนะคะ ขอบคุณล่วงหน้าค่ะ หนูจะรอพี่มาตอบก็แล้วกันนะคะ
^^
เอ่อ…แล้วก็ขอบคุณสำหรับความรู้ดีๆทุกอย่างเลยนะคะ…^^
:ยิ้ม: ยังรับตอบคำถาม ที่พอจะช่วยตอบให้ได้อยู่ครับ
เรื่องเครื่องหมายฟันหนู(double quote) อาจจะเป็นไปได้ส่วนหนึ่งครับ
บางทีจะมีเครื่องหมาย ” แทรกเข้าไปด้วย ทำให้ script ไม่ผ่าน
หรืออาจจะเป็นที่การตั้งชื่อให้กับตัว Movies Clip ผิดก็ได้ครับ
ทำให้การอ้างอิงภายในสคริปไม่ทำงาน
อันสุดท้าย สคริปนี้เขียนไว้ตอนที่ยังทำงานกับ Flash 8 ครับ
ตอนนี้ผมลองเทสสคริปนี้กับ Flash CS3(ActionScript 2.0,3.0)
ก็คอมไพล์สคริปไม่ผ่านเช่นกันครับ :มั้ง:
คิดว่าน่าจะขึ้นอยู่กับเวอร์ชั่นของโปรแกรมด้วย
ขอเช็คสคริปกับโปรแกรมเวอร์ชั่นใหม่ ๆ อีกทีครับ
ถ้าแก้ผ่านเช่นใดจะอัพเดทให้ครับ :ยิ้ม:
:อืม: ไปทดสอบโค๊ดมาแล้วครับ
สรุปได้ว่าไม่ได้ผิดที่เวอร์ชั่นของโปรแกรม หรือปัญหาของตัว ” Double Quote
แต่ติดตรงที่ WordPress มันเปลี่ยนเครื่องหมาย -(ลบ)
ให้เป็นเครื่องหมาย –(ขีดกลาง) ทำให้สคริปทำงานไม่ผ่านครับ
ถ้า Error ตรงบรรทัดที่มีการคำนวณด้วยเครื่องหมายลบ
ให้ลบเจ้าตัว –(ขีดกลาง) ออกแล้วพิมพ์เครื่องหมาย -(ลบ) เข้าไปแทนครับ
ตัวสคริปถึงจะทำงานได้ตามปกติ
ลองดูนะครับ
ปล. :อืม: ฮึม…Wordpress ทำเหตุ
^^ ขอบคุณมากนะคะ พี่ตอบไวมาก
หนูถามเที่ยงคืนกว่าๆ พี่มาตอบตี 3
อิอิ ตกลงพี่ตื่นเช้าไปหรือยังไม่ได้นอนล่ะนี่
หนูทำได้แล้วนะคะ ดีใจจัง ^^
ตอนแรกหนูลองทำตามที่พี่บอกดูแล้ว (REP#22 23)
Script มันก็ผ่านค่ะ มันบอก No Error
ตอน Test Movie มันก็ไม่มีหน้าต่าง Error ขึ้นเหมือนเมื่อคืน
แต่มันก็ไม่ได้อยู่ดีล่ะนั่น _ _” รูปมันไม่แสดงผล
ทีนี้หนูก็เลยคิดว่ามันคงจะมีปัญหาที่ตัวหนูแล้วแหละ
เหอๆ หนูปิดแล้วลองทำใหม่อยู่ตั้งหลายรอบ
ตอนรอบสุดท้ายนี่ พอดีมาสังเกตุเห็นในรูปวิธีทำที่พี่สอน (ข้อ 6)
ตรงบรรทัด Script พี่มี 27 แต่หนูปาไป 35 (o-O)
หนูก็เลยลองลบๆบรรทัดที่คิดว่าเกินมาออกไป
แล้วทีนี้ก็…ได้แล้วววววววววว!
เหอะๆ ที่แท้มันเว้นบรรทัดผิด _ _” แค่เว้นบรรทัดผิดนิดเดียวก็ไม่ได้
ก็เล่าสู่กันฟังค่ะ ขอบคุณพี่อีกครั้งนะคะ
เดี๋ยวจะเอาไปประยุกต์ใช้ อิอิ
แล้วก็หนูมีอีกคำถามหนึ่งค่ะ เห็นพี่บอกว่าถ้าเอาไฟล์ .psd มาทำ Vector
แล้วรูปตอนเป็นเยลลี่แล้วมันจะไม่แตก Pixel
คือหนูอยากรู้ว่า Vector มันคืออะไรหรือคะ ^^”
หนูเพิ่งจับแฟลชครั้งแรกก็เมื่อคืนนี้เองค่ะ
เพราะส่วนใหญ่ชอบละเลง PS
สนใจปุ่ม หมุน ๆ เปลี่ยนสีได้ด้วยครับ ทำไงอ่ะ :ว๊าว:
:ยิ้ม: ขอบคุณมากๆ นะคะ