Cool Effect Flash Tutorials!

Summary

ใน tutorial นี้คุณจะได้เรียนรู้วิธีการสร้างผลการเปลี่ยนแปลงก้อนในแบบโรลโอเวอร์เมาส์

ที่นี่ผลสุดท้าย :

ความต้องการ

Flash CS3 หรือ Flash CS4

หมายเหตุ : ภาพในแบบฝึกหัดนี้คือทำใน Flash CS3 ทำงานตรงเดียวกันใน Flash CS4

ส่วนขั้นที่ 1 -- ติดผล

ซื้อ ผลการเปลี่ยน Cube ที่นี่ โปรดปฏิบัติตาม คำแนะนำการติดตั้ง และลากส่วนจากแผงชิ้นส่วนเป็นของห้องสมุดของคุณ . fla ไฟล์

ขั้นที่ 2 -- สร้างชั้นใหม่

เพื่อให้สิ่งเรียบร้อยคุณควรสร้างชั้นใหม่ในระยะเวลาหลักและตั้งชื่อ ทำตามที่ปรากฏในภาพด้านล่าง

พื้นหลังขั้นที่ 3 -- สร้าง

ตอนนี้คุณสร้างพื้นหลังด้วยการไล่ระดับสี แม้ว่าจะไม่จำเป็นต้องทำผลงานได้แสดงให้เห็นว่ายังมีผลงานที่มีเนื้อหาโปร่งใส (เพิ่มเติมว่าภายหลัง)

เลือกเฟรมแรกใน"ชั้น"bg และวาดรูปด้วยเครื่องมือสี่เหลี่ยมผืนผ้าบนผ้าใบ เลือกรูปสี่เหลี่ยมผืนผ้าและปรับการตั้งค่าสีที่มีการไล่ระดับสีดี (คุณยังสามารถใช้สีอื่น ๆ )

ปุ่มขั้นตอนที่ 4 -- สร้าง

ผลลูกบาศก์ควรตอบสนองแบบไดนามิกที่รัฐใช้เมาส์ (โรลโอเวอร์ / rollout) ที่ดีที่สุดคือการไม่เพิ่มฟังเหตุการณ์ที่ตัวเองมีผลและแทนที่จะใช้ปุ่ม"เปล่า

คลิกที่เฟรมแรกในชั้น btn"และวาดรูปสี่เหลี่ยมผืนผ้าขนาดของผ้าใบ (สีไม่เยื่อไม่ตั้งแต่ปุ่มจะมองไม่เห็นได้) เลือกรูปสี่เหลี่ยมผืนผ้าและแปลงเป็นปุ่มที่มี [กด F8] หรือคลิกขวาที่ MovieClip -->"แปลงเป็นหุ้น ... "

ตั้งชื่อของปุ่ม btn"และให้แน่ใจว่าชนิดคือ"ปุ่ม"

ดับเบิลคลิกที่ปุ่ม ตอนนี้ลาก keyframe แรก"Up"ในกรอบล่าสุด"Hit" นี้ทำให้แน่ใจว่าปุ่มจะโต้ตอบ แต่มองไม่เห็น

กลับไปที่ระยะเวลาหลักและตั้งชื่อตัวอย่างของปุ่มเพื่อ"btn"

ขั้นที่ 5 -- เริ่มต้นสร้าง Movieclip

ผลของความมีสอง Movieclip ซึ่งข้อมูลภาพที่ถ่ายจาก ท่านจะสร้าง Movieclip การเปลี่ยนแปลงจะเริ่มต้นด้วย

คลิกที่เฟรมแรกใน"img1 เลเยอร์" นำเข้าภาพที่มีขนาดของผ้าใบโดยกดกด Ctrl - R [] หรือ"File"-- นำเข้า">"-->"นำเข้าบนเวที ... "

ตอนนี้แปลงภาพนี้ Movieclip และตั้งชื่อ"img1"

ตั้งชื่อตัวอย่างของเพิ่งสร้าง Movieclip to"img1"

6 -- สร้าง Movieclip End

End Movieclip จะมีข้อความแทนภาพ บรรลุนี้คุณจะต้องมีแนวทางแตกต่างกันเล็กน้อย

เลือกเฟรมแรกของชั้น"img2"(ok, การตั้งชื่อไม่ดีโปรดให้ถูกต้องว่า ) และวาดรูปสี่เหลี่ยมผืนผ้าขนาดของผ้าใบ คุณต้องการให้แน่ใจว่าสุดท้าย Movieclip มีขนาดเดียวกับ Start Movieclip Thats ทำไมคุณวาดรูปมองไม่เห็นขนาดเดียวกันกับที่เริ่ม Movieclip

เลือกรูปร่างและตั้งค่า alpha ที่ 0 (รูปร่างยังคงมี แต่มองไม่เห็น)

แปลงรูปร่างเป็น Movieclip [] กดปุ่ม F8 หรือคลิกขวาที่ MovieClip -->"แปลงเป็นหุ้น ... "และตั้งชื่อ"img2"

คลิกสองครั้งที่เพิ่งสร้าง Movieclip สร้างชั้นว่างใหม่และใส่ข้อความบางอย่างที่ชั้นสร้างขึ้นใหม่ว่า

หัวกลับไปที่ระยะเวลาหลักและตั้งชื่อตัวอย่างของ Movieclip เพื่อ"img2"

7 -- เพิ่มแบบโรลโอเวอร์ ActionScript

เลือกชั้นสคริปต์"และเปิดหน้าต่าง"การกระทำ"ด้วย"Windows"-- การกระทำ">"หรือ F9 กด []

หากคุณเพียงต้องการให้มีการเปลี่ยนแปลงในแบบโรลโอเวอร์ (และไม่มีการเปลี่ยนแปลง - back on rollout) สำเนาบรรทัดต่อไปนี้ในหน้าต่างโค้ด

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver)

 _onOver function (e : MouseEvent) (
  myFilter var : CubeTransitionEffectAS3 CubeTransitionEffectAS3 ใหม่ = ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter)

  r myFilter.init (img1, img2, 75,"l>", 2"easeInOutCubic", false);
 )

ในบรรทัดแรกที่คุณเพิ่มฟังเหตุการณ์แบบโรลโอเวอร์กับปุ่ม ในฟังก์ชัน _onOver"(3 สาย) คุณสร้างตัวอย่างของ CubeTransitionEffectAS3 ก่อนที่จะปิดการโต้ตอบเมาส์ของส่วนประกอบ (4 สายและ 5) จำไว้ว่าปุ่มที่คุณสร้างขึ้นก่อนหน้าจะดูแลผลเมาส์และคุณไม่ต้องการให้มีผลในการรบกวนที่ว่า

ใน 9 บรรทัดสุดท้ายคุณเริ่มต้นผล ( เอกสารของที่นี่พารามิเตอร์ ) ส่วนที่สำคัญเป็นครั้งแรกสองพารามิเตอร์ คุณกำหนดว่าการเปลี่ยนแปลงจะเริ่มต้นด้วย"img1"และลงท้ายด้วย"img2"

ส่งออก fla ไฟล์ ตามที่เห็นองค์ประกอบผลการทำงานอย่างสมบูรณ์แบบมีพื้นหลังโปร่งใสของ"img2"

8 -- ซับซ้อน ActionScript

ตกลงกับรหัสก่อนโรลโอเวอร์ทำงานได้ดี แต่ถ้าคุณยังต้องการมีฟังก์ชัน rollout ที่กลับหลังการเปลี่ยนแปลงจาก"img2"ถึง"img1"? เพื่อให้บรรลุสิ่งที่คุณต้องการใช้รหัสที่ซับซ้อนมากขึ้น ลบสคริปต์และใส่ต่อไปนี้

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver) btn.addEventListener (MouseEvent.ROLL_OUT, _onOut) ทำงาน var = false; goin var = false; goOut var = false; _onOver function (e : MouseEvent) (if (! ทำงาน) _createAnimation (("ใน"); ทำงาน = true;) อื่น goin (= false; goOut = true;)) ฟังก์ชัน _onOut (e : MouseEvent) (if (! ทำงาน) (_createAnimation (out"); ทำงาน = true; () อื่น goin = true; goOut = false;)) _inAnimationDone function (e : Event) (e.target.removeFilter (); img1.visible = false; goin (ถ้ามี) (_createAnimation (out");) else ( ทำงาน = false; goOut = false;)) _outAnimationDone function (e : Event) (e.target.removeFilter (); img2.visible = false; goOut (ถ้ามี) (_createAnimation ("ใน");) else (ทำงาน = false ; goin = false;)) ฟังก์ชัน _createAnimation (dir : String) (var myFilter : CubeTransitionEffectAS3 CubeTransitionEffectAS3 ใหม่ = (); myFilter.mouseEnabled = false; myFilter.mouseChildren เท็จ =; myFilter (addChild) dir (ถ้า =="ใน" ) (myFilter.init (img1, img2, 24,"> r l", 2"easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);) อื่น if (dir == ออก") (myFilter.init (img2, img1, 24,"> l r", 2,"easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);)) 

สิ่งสำคัญคือการรู้ว่าคุณไม่สามารถย้อนกลับการเปลี่ยนแปลงทิศทางของผลในระหว่างกำลังทำงาน แต่คุณ"จำได้"การกระทำของผู้ใช้ให้รอจนกว่าผลจะทำและใช้พลิกกลับเปลี่ยนแปลง

ตัวแปร goin"และ goOut""(5 สายและ 6) จะใช้เพื่อวัตถุประสงค์ที่ คุณตั้งได้เมื่อฟังก์ชัน _onOver"และ _onOut"(line 8 และ 18) จะดำเนินการ แต่ถ้า var ทำงานเป็นจริงหากเป็นเท็จ (สาย 9 และ 19) คุณเริ่มเปลี่ยนทันที (สาย 10 และ 20)

ฟังก์ชัน _createAnimation""(52 line) เป็นฟังก์ชันผู้ช่วยของคุณจะเริ่มเคลื่อนไหวขึ้นอยู่กับทิศทาง"dir"คุณผ่านเป็นพารามิเตอร์ที่

สังเกตว่าหลังจากเรียก removeFilter"วิธี (29 สายและ 41) ทั้ง Movieclip Start และ End Movieclip ถูกตั้งค่าให้มองเห็น (จากผล) Thats ทำไมคุณตั้งค่าการแสดง Movieclip -- การเปลี่ยนแปลงเริ่มต้นด้วย -- เพื่อ line (เท็จ 30 และ 42)

Download

คลิกที่นี่ เพื่อดาวน์โหลด tutorial fla นี้ของ หมายเหตุ : . fla ไม่ได้มีส่วนผล เพื่อให้งาน fla คุณจะต้องซื้อ ผลเปลี่ยน Cube ที่นี่

ที่นี่คุณสามารถค้นหา วิดีโอแนะนำเกี่ยวกับวิธีการใช้ผลที่แตกต่างกัน