จบ Blinkie ด้วย Flash Motion Tweens

• เมษายน 20, 2024

เมื่อเราทำงานกับภาพเคลื่อนไหว Flash Blinkie เราเพิ่งเสร็จเอฟเฟ็กต์ข้อความ เอฟเฟกต์ข้อความล่าสุดที่จะเกิดขึ้นในแอนิเมชันคือรูปลักษณ์และการหายไปของชื่อเว็บไซต์“ J3 Designs” มันจะหายไปจากเวทีไปทางซ้ายด้วย Timeline Transition Effect (Transition 3 บน Timeline) มีเหตุผลสำหรับสิ่งนี้และคุณกำลังจะค้นหาว่าเหตุผลนั้นคืออะไร

จำไว้ว่าเป็นส่วนหนึ่งของรายละเอียดการออกแบบเรามี Ladybugs สองคนนั้น ถึงเวลาที่จะทำให้พวกเขาทำงาน เมื่อเราสร้างเลเยอร์ในโปรเจค blinkie ของเราเราได้เพิ่มเต่าทองทองคำในเลเยอร์ Bug 1 ตอนนี้สิ่งแรกที่เราจะทำคือเพิ่มเต่าทองตัวที่สองลงในเลเยอร์ใหม่ซึ่งเราจะเรียกว่า Bug 2 เราต้องการให้เต่าทองสีแดงปรากฏขึ้นจากใต้จี้ ดังนั้นเราจะต้องวางเลเยอร์ใหม่ภายใต้เลเยอร์รายละเอียดแบบคงที่

เปิด blinkie2.fla ลงใน Flash CS3 แล้วไปทำงานต่อ เราต้องการให้เต่าทองเริ่มเคลื่อนไหวจากใต้จี้เนื่องจากชื่อเว็บไซต์เริ่มหายไป เราต้องการให้มันดูเหมือนข้อความที่หายไปเพราะเต่าทอง ดังนั้นเราจะเพิ่มเต่าทองตัวใหม่ลงใน Frame 110 ซึ่งก็คือเมื่อข้อความเริ่มหายไป

1. คลิกไฟล์ - นำเข้า - นำเข้าสู่ห้องสมุดเพื่อเปิดกล่องโต้ตอบนำเข้าและเพิ่มเต่าทองสีแดงลงในห้องสมุดของเรา
   
   
2. เพิ่มเลเยอร์ใหม่ภายใต้เลเยอร์รายละเอียดแบบคงที่และตั้งชื่อเป็น "Bug 2" เพิ่มคีย์เฟรม (แทรก - ไทม์ไลน์ - คีย์เฟรม) ไปที่เฟรม 110 ลากเต่าทองสีแดงจากไลบรารีไปไว้ใต้จี้และมองไม่เห็นในตอนนี้
   
   เราต้องการให้เต่าทองตัวนี้เลื่อนไปทางซ้ายจนกว่ามันจะหายไปจากเวทีขณะที่ข้อความหายไป ดังนั้นเราต้องการเต่าทองไปทางซ้ายและด้านนอกของเวทีตามเวลาที่เราไปถึง Frame 160
   
   
3. คลิกที่ Frame 160 บนเลเยอร์ Bug 2 เพิ่ม Keyframe แล้วลากเต่าทองสีแดงไปทางซ้ายและลงจากเวที คลิกขวาระหว่าง Frame 110 และ 160 แล้วเลือก Create Motion Tween จากเมนูป๊อปอัพ
   
   ทดสอบภาพยนตร์และคุณจะเห็นข้อความหายไปเมื่อเต่าทองเคลื่อนที่ผ่าน เมื่อเต่าทองแดงออกจากเวทีเราจะเลื่อนเต่าทองทองคำ (Bug 1 เลเยอร์) ขึ้นไปทางขวาจนกว่ามันจะหายไปจากเวที
   
   
4. คลิกที่ Frame 160 บนเลเยอร์ Bug 1 และเพิ่ม Keyframe เพื่อเป็นจุดเริ่มต้นสำหรับการเคลื่อนไหวของเต่าทอง มาใช้ 20 เฟรมเพื่อย้ายเต่าทองทองคำออกจากเวที คลิกที่ Frame 180 และเพิ่ม Keyframe เลื่อนเต่าทองทองคำขึ้นและลงจากเวที
   
   
5. คลิกขวาระหว่าง Frame 160 และ 180 แล้วสร้าง Motion Tween คลิกที่กรอบ 180 และเพิ่มกรอบไปยังเลเยอร์รายละเอียดคงที่และพื้นหลังเพื่อให้เนื้อหาในเลเยอร์เหล่านี้ปรากฏอีกครั้ง
   
   ในที่สุดเราต้องการย้ายเต่าทองทองคำกลับสู่ตำแหน่งเดิมที่ด้านล่างซ้ายของเวที แต่เราไม่ต้องการให้ข้อบกพร่องเลื่อนลงมาจากด้านบนสุดของเวที เราต้องการให้มันขยับขึ้นมาจากใต้เวที ดังนั้นเราต้องวางเต่าทองสีทองไว้ทางซ้ายและใต้เวที จากนั้นสิ่งที่เราต้องทำคือเลื่อนมันกลับขึ้นไปสู่ตำแหน่งเดิมเพื่อให้ภาพเคลื่อนไหวสามารถทำซ้ำได้ เราจะใช้ 10 เฟรมเพื่อย้ายเต่าทองกลับเข้าที่
   
   
6. ย้อนกลับไปที่ Frame 1 บนเลเยอร์ Bug 1 แล้วเลือก Ladybug ทองคำ คลิกแก้ไข - คัดลอกเพื่อบันทึกตำแหน่งเดิมของเต่าทอง
   
   
7. ยังอยู่ใน Bug 1 เลเยอร์เพิ่ม Keyframe ไปที่ Frame 190 คลิก Edit - Clear เพื่อลบ Ladybug สีทองที่มีอยู่แล้ว จากนั้นคลิกแก้ไข - วางในตำแหน่งเพื่อให้ Ladybug ทองคำกลับสู่ตำแหน่งเดิม
   
   
8. ยังอยู่ในเลเยอร์ Bug 1 คลิกที่ Frame 181 และเพิ่ม Keyframe จากนั้นนำเต่าทองที่มีอยู่แล้วออก ใส่เต่าทองสีทองกลับไปที่ตำแหน่งเดิมบนเฟรมนี้ (วางในตำแหน่ง) จากนั้นลากเต่าทองนี้ไปยังใต้เวที เพิ่ม Motion Tween ระหว่าง Frame 181 และ 190 ซึ่งจะเลื่อนเต่าทองนี้ขึ้นและขึ้นไปบนเวที
   
   
9. คลิกที่กรอบ 190 และเพิ่มกรอบไปยังเลเยอร์รายละเอียดคงที่และพื้นหลังเพื่อให้เนื้อหาในเลเยอร์เหล่านี้ปรากฏอีกครั้ง
   
   

ทดสอบและบันทึกไฟกะพริบเป็น blinkie3.fla จากนั้นเผยแพร่ Blinkie ของคุณเป็นไฟล์. swf และสนุกกับ Blinkie ใหม่ของคุณ

การออกแบบ J3

ลิขสิทธิ์ 2018 Adobe Systems Incorporated สงวนลิขสิทธิ์. ภาพหน้าจอผลิตภัณฑ์ Adobe พิมพ์ซ้ำได้รับอนุญาตจาก Adobe Systems Incorporated Adobe, Photoshop, อัลบั้ม Photoshop, องค์ประกอบ Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, องค์ประกอบรอบปฐมทัศน์, สะพาน, After Effects, InCopy, Dreamweaver, แฟลช, ActionScript, ดอกไม้ไฟ, Contribute, Flash Catalyst และ Flash Paper เป็น / เป็น [a] เครื่องหมายการค้าจดทะเบียน [s] หรือเครื่องหมายการค้า [s] ของ Adobe Systems Incorporated ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ