Cool Tutorials ผล Flash!

สรุป

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

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

ความ ต้องการ

Flash CS3 หรือ Flash CS4.

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

ขั้น ที่ 1 - ติด ตั้ง องค์ประกอบ ผล

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

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

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

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

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

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

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

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

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

ตั้ง ชื่อ ปุ่ม เพื่อ btn "" และ ตรวจ สอบ ว่า ประเภท คือ "ปุ่ม".

ดับเบิล คลิก ที่ ปุ่ม. ตอน นี้ ลาก keyframe แรก "Up" ใน เฟรม สุดท้าย "กด ปุ่ม". นี้ ช่วย ให้ แน่ใจ ว่า ปุ่ม จะ มี ปฏิกิริยา แต่ ไม่ ปรากฏ.

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

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

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

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

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

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

ขั้น ที่ 6 - สร้าง End Movieclip

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

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

เลือก รูปร่าง และ กำหนด ค่า อั ล ฟา ไป 0 (รูปร่าง ยัง คง มี แต่ มอง ไม่ เห็น).

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

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

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

ขั้น ที่ 7 - เพิ่ม แบบ โรล โอเวอร์ ActionScript

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

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver)

 _onOver ฟังก์ชัน (e: MouseEvent) (
  myFilter var: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 ใหม่ ();
  myFilter.mouseEnabled = เท็จ;
  myFilter.mouseChildren = เท็จ;
  (myFilter addChild)

  myFilter.init (img1, img2, 75, "l-r>", 2, "easeInOutCubic" เท็จ)
 )

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

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

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

ActionScript 8 - ขั้น ตอน ที่ ซับซ้อน

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver)
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut)

 var ทำงาน = เท็จ;
 goIn var = เท็จ;
 goOut var = เท็จ;

 _onOver ฟังก์ชัน (e: MouseEvent) (
  หาก (! ทำงาน) (
  _createAnimation ( "ใน");
  ทำงาน = true;
  () อื่น
  goIn = เท็จ;
  goOut = true;
  )
 )

 _onOut ฟังก์ชัน (e: MouseEvent) (
  หาก (! ทำงาน) (
  _createAnimation ( "out");
  ทำงาน = true;
  () อื่น
  goIn = true;
  goOut = เท็จ;
  )
 )

 _inAnimationDone ฟังก์ชัน (e: Event) (
  e.target.removeFilter ();
  img1.visible = เท็จ;

  ถ้า (goIn) (
  _createAnimation ( "out");
  () อื่น
  ทำงาน = เท็จ;
  goOut = เท็จ;
  )
 )

 _outAnimationDone ฟังก์ชัน (e: Event) (
  e.target.removeFilter ();
  img2.visible = เท็จ;

  ถ้า (goOut) (
  _createAnimation ( "ใน");
  () อื่น
  ทำงาน = เท็จ;
  goIn = เท็จ;
  )
 )

 _createAnimation ฟังก์ชัน (dir: String) (
  myFilter var: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 ใหม่ ();
  myFilter.mouseEnabled = เท็จ;
  myFilter.mouseChildren = เท็จ;
  (myFilter addChild)

  ถ้า (dir == "ใน") (
  myFilter.init (img1, img2, 24, "l-r>", 2, "easeInOutCubic" เท็จ)
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone)
  ) อื่น ถ้า (dir == "out") (
  myFilter.init (img2, img1, 24, "r-l>", 2, "easeInOutCubic" เท็จ)
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone)
  )
 )

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

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

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

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

ดาวน์โหลด

คลิก ที่ นี่ เพื่อ ดาวน์โหลด fla การ กวด วิชา นี้. หมายเหตุ: fla. ไม่ ได้ มี ส่วน ผล. เพื่อ ให้ งาน fla คุณ ต้อง ซื้อ ผล เปลี่ยนแปลง ลูกบาศก์ ที่ นี่.

ที่ นี่ คุณ จะ พบ วิดีโอ เกี่ยว กับ การ สอน ของ วิธี การ ใช้ ผล ต่าง.