วันนี้เรามีเรื่องไม่ธรรมดา บทเรียนอะโดบีนักวาดภาพประกอบ. เพราะครั้งนี้เราจะไม่สร้างภาพนิ่ง แต่เป็นแอนิเมชั่นจริง ลองนึกภาพมันกลับกลายเป็นว่า โดยใช้อะโดบี Illustrator ก็สามารถวาดการ์ตูนได้ :)
และสำหรับสิ่งนี้เราไม่ต้องการอะไรเลย การจัดระเบียบเลเยอร์ที่เหมาะสมและส่งออกงานขั้นสุดท้ายเป็นรูปแบบ swf โดยแต่ละเลเยอร์จะถูกแปลงเป็นเฟรมแอนิเมชั่น ในบทช่วยสอนวันนี้ เราจะวาดแอนิเมชั่นนับถอยหลังในรูปแบบของภาพยนตร์ย้อนยุค ผลลัพธ์ควรเป็นวิดีโอแฟลชที่มีการนับถอยหลังเดียวกันนี้
สิ่งแรกที่ต้องทำคือวาดทุกอย่าง องค์ประกอบที่จำเป็นสำหรับแอนิเมชั่นในอนาคต ในการทำเช่นนี้ ในเอกสารที่แยกออกมา ฉันได้สร้างกรอบฟิล์มสองตำแหน่ง วงกลมสำหรับอ้างอิง ซึ่งถูกตัดออกเป็นส่วนที่แยกจากกัน พื้นผิวและรอยขีดข่วนแนวตั้งเพื่อเพิ่มเอฟเฟกต์ของสมัยโบราณ เช่นเดียวกับตัวเลขและ จารึก
เมื่อทุกส่วนของการ์ตูนของเราพร้อมแล้ว เราก็สามารถเริ่มสร้างแอนิเมชั่นได้เลย เพื่อความสะดวก ควรทำเช่นนี้ในเอกสารใหม่ ในกรณีนี้ เลเยอร์ของเราจะมีบทบาทเป็นเฟรมแอนิเมชัน และในชั้นแรกคุณเพียงแค่ต้องคัดลอกเฟรมฟิล์ม วางไว้ตรงกลางพื้นที่ทำงานของคุณ
ตอนนี้สร้างเลเยอร์ที่สองแล้วคัดลอกเฟรมของฟิล์มลงไปโดยที่รูตามขอบนั้นทำด้วยออฟเซ็ต ต้องวางไว้ตรงกลางด้วย
จากสองชั้นนี้ คุณจะได้รับแอนิเมชันของภาพยนตร์ที่กำลังเคลื่อนไหวอยู่แล้ว แต่ต่อมาเราจะต้องมีเลเยอร์เพิ่มอีกหลายชั้น ดังนั้นเลือกสองชั้นแรก ไปที่ตัวเลือกพาเนลและทำสำเนาเลเยอร์ต่างๆ
ในทำนองเดียวกัน เราจำเป็นต้องสะสมเฟรมฟิล์ม 12 ชั้นเพื่อกำหนดการเคลื่อนไหว
ตอนนี้เรามีเลเยอร์จำนวนมากและมองเห็นได้ทั้งหมด ในแง่ที่ว่าชั้นบนปิดกั้นชั้นล่างซึ่งไม่สะดวกในการทำงานโดยสิ้นเชิง ดังนั้นคุณสามารถปิดบางเลเยอร์ได้โดยคลิกที่ไอคอนพร้อมตาทางด้านซ้ายของชื่อเลเยอร์ หากต้องการปิดหรือเปิดเลเยอร์ทั้งหมดพร้อมกัน ให้กดปุ่ม Alt ค้างไว้พร้อมกับคลิกที่ไอคอนรูปตา ด้วยการเปิดและปิดเลเยอร์ คุณจะเห็นได้อย่างชัดเจนว่ามีอะไรอยู่ในเฟรมเฉพาะของแอนิเมชั่นในอนาคตของเรา และตอนนี้ เพื่อที่จะเพิ่มความกระวนกระวายใจเล็กน้อยให้กับการเคลื่อนไหวของภาพยนตร์ เราจำเป็นต้องย้ายเฟรมผลลัพธ์เล็กน้อยไปในทิศทางที่ต่างกัน ในการดำเนินการนี้ ให้เปิดเฉพาะเลเยอร์ที่คุณจะใช้งานเท่านั้น ช่วงเวลานี้แล้วเลื่อนเฟรมไปสองสามพิกเซลไปในทิศทางใดก็ได้
เมื่อคุณผ่านเลเยอร์ทั้งหมดและเพิ่มการเปลี่ยนแปลงเล็กน้อยแล้ว คุณสามารถเริ่มสร้างแอนิเมชั่นของวงกลมที่กำลังเคลื่อนที่ได้ ในการดำเนินการนี้ ให้คัดลอกวงกลมที่ประกอบด้วยส่วนต่างๆ จากเอกสารพร้อมส่วนการ์ตูน และวางไว้บนชั้นแรกที่ด้านบนของกรอบฟิล์ม
หากคุณยกเลิกการเลือกวงกลม วงกลมนั้นจะมีลักษณะเป็นวงกลมเดียว นี่คือสิ่งที่เราต้องการ
แต่เนื่องจากประกอบด้วยแต่ละส่วน คุณจึงสามารถสร้างแอนิเมชั่นได้อย่างรวดเร็วและง่ายดายด้วยการเปลี่ยนสี เมื่อต้องการทำเช่นนี้ ให้คัดลอกวงกลมนี้ไปยังเลเยอร์ที่สอง และทำให้เซกเตอร์แรกสว่างขึ้น คุณจำได้ว่าฟิล์มของเราจะสั่นขณะเคลื่อนไหว ดังนั้นจึงไม่จำเป็นต้องวางวงกลมไว้ตรงกลางเฟรมพอดีเลย วางตำแหน่งด้วยสายตา
ในทำนองเดียวกัน คุณต้องคัดลอกวงกลมลงในแต่ละเลเยอร์ถัดไป ในขณะที่ทาสีอีกหนึ่งเซกเตอร์ด้วยสีที่สว่างกว่าครั้งก่อน เลเยอร์ทั้ง 12 เลเยอร์เหล่านี้รวมกันเป็นแอนิเมชั่นของภาพยนตร์ที่เคลื่อนไหวเป็นวงกลม
ต่อไปเราต้องเพิ่มพื้นผิวให้กับเลเยอร์ของเรา เปิดเลเยอร์แรกแล้วคัดลอกพื้นผิวจากที่นั่น ไฟล์ต้นฉบับพร้อมอะไหล่.
จากนั้นเปิดเลเยอร์ถัดไปทีละเลเยอร์แล้วคัดลอกพื้นผิวเดียวกันที่นั่น หากต้องการทำให้แต่ละเฟรมดูแตกต่าง เพียงหมุน 90 องศา ตามที่คุณอาจเดาได้ เราต้องเพิ่มพื้นผิวให้กับทั้ง 12 เฟรม
หากคุณเบื่อกับการคัดลอกแล้วฉันช่วยคุณได้ - เหลือน้อยมาก ส่วนที่ยากที่สุดจบลงแล้ว สิ่งที่เหลืออยู่คือการเพิ่มรอยขีดข่วนในแนวตั้งและเกือบจะเท่านั้น ในการทำเช่นนี้เราจะคัดลอกรอยขีดข่วนต้นฉบับอีกครั้งและวางไว้ในตำแหน่งที่ต้องการในหลายชั้น ในกรณีของฉัน รอยขีดข่วนปรากฏเพียงสองชั้นเท่านั้น
ตอนนี้วงจรหลักที่มีแอนิเมชั่นภาพยนตร์พร้อมแล้ว สิ่งที่เหลืออยู่คือการเพิ่มตัวเลข เนื่องจากการนับถอยหลังของเราเปลี่ยนจาก 3 เป็น 1 บวกกับคำว่า Go!!! เราจึงต้องมีเลเยอร์มากกว่านี้ ไม่ใช่ 12 แต่มากถึง 48 ในการทำเช่นนี้คุณต้องสร้างเลเยอร์สำเร็จรูปพร้อมแอนิเมชั่นภาพยนตร์อีกสามชุด
แล้วทุกอย่างก็เรียบง่าย เปิดเลเยอร์แรกแล้วใส่หมายเลขสามลงไป
จากนั้นคุณจะต้องคัดลอกหมายเลขนี้ไปยังเลเยอร์ถัดไปจนกว่าภาพเคลื่อนไหวของวงกลมจะสิ้นสุด เมื่อคุณไปถึงสำเนาเลเยอร์ถัดไปโดยที่วงกลมจะเต็มอีกครั้งคุณจะต้องใส่หมายเลขที่สอง ในทำนองเดียวกัน ให้คัดลอกหมายเลข 1 ไปยังเลเยอร์ที่ต้องการ และเมื่อคุณไปถึงเลเยอร์สุดท้ายของคำจารึก Go!!! เพียงลบวงกลมออกก่อนที่จะคัดลอกคำจารึกไปยังเลเยอร์ที่ต้องการ
นั่นคือทั้งหมดสำหรับแอนิเมชั่น สิ่งสำคัญที่นี่คืออย่าสับสน คุณสามารถตั้งชื่อที่สะดวกให้กับเลเยอร์ต่างๆ ได้ แต่ฉันค่อนข้างขี้เกียจ :) และเมื่อคุณทำงานเสร็จแล้ว อย่าลืมเปิดเลเยอร์ทั้งหมดอีกครั้งโดยคลิกที่ไอคอนรูปตา
ในหน้าต่างการตั้งค่าการส่งออก อย่าลืมตั้งค่าส่งออกเป็น: เลเยอร์ AI เป็น SWF Frames เป็นตัวเลือกนี้ที่จะเปลี่ยนเลเยอร์ Illustrator ให้เป็นเฟรมแอนิเมชั่น จากนั้นคลิกปุ่มขั้นสูง
จะเปิด การตั้งค่าเพิ่มเติม- ที่นี่คุณต้องตั้งค่าอัตราเฟรม ฉันมี 12 เฟรมต่อวินาที ช่องทำเครื่องหมายวนซ้ำมีหน้าที่รับผิดชอบในการเคลื่อนไหวแบบวนรอบ ด้วยเหตุนี้วิดีโอจึงเล่นเป็นวงกลม และตัวเลือก Layer Order: จากล่างขึ้นบน จะสร้างเลเยอร์ของนักวาดภาพประกอบจากล่างขึ้นบนในแผง นี่คือวิธีที่เราสร้างแอนิเมชั่นของเรา
ผลลัพธ์เป็นวิดีโอแฟลชพร้อมภาพเคลื่อนไหวของเรา
ตอนนี้คุณจะเห็นแล้วว่าการสร้างแอนิเมชั่นอย่างง่ายใน Adobe Illustrator นั้นไม่ใช่เรื่องยากอย่างที่คิดเมื่อเห็นแวบแรก
แต่สำหรับการสร้างวิดีโอขนาดยาวหรือแอปพลิเคชันเชิงโต้ตอบก็ยังดีกว่าถ้าใช้ อะโดบี แฟลชหรือโปรแกรมแก้ไขแฟลชอื่นๆ ตัวอย่างเช่น ฉันสร้างแมวตัวนี้ด้วย Macromedia Flash ตัวเก่าที่ฉันขุดขึ้นมาจากงานของฉัน
นอกจากนี้ เมื่อเร็ว ๆ นี้มีการใช้ HTML5 และ CSS3 เพื่อสร้างแอนิเมชั่นมากขึ้น รหัสนี้ได้รับการสนับสนุน เบราว์เซอร์ที่ทันสมัยและไม่จำเป็นต้องใช้แฟลชเพลเยอร์
Roman aka dacascas โดยเฉพาะอย่างยิ่งสำหรับบล็อก Notes ของนักวาดภาพประกอบไมโครสต็อก
สมัครรับจดหมายข่าวของเราเพื่อให้คุณไม่พลาดข่าวสารใหม่ๆ:
ตอนนี้เรามาทำให้งานซับซ้อนขึ้นหน่อย - มาสร้างแบนเนอร์ Flash แบบเคลื่อนไหวกันดีกว่า แน่นอนว่าในกรณีนี้ไม่จำเป็นต้องพูดถึง Flash Animation เต็มรูปแบบ - มีแพ็คเกจพิเศษสำหรับสิ่งนี้ แต่หากต้องการสร้างวิดีโอสมัครเล่นที่เรียบง่าย คุณสามารถใช้ Illustrator ได้เช่นกัน
ไม่มีเครื่องมือพิเศษหรือคุณลักษณะอินเทอร์เฟซ เช่น ไทม์ไลน์ ซึ่งเป็นเรื่องปกติสำหรับโปรแกรมพัฒนาแอนิเมชันใน Adobe Illustrator แต่มีความละเอียดอ่อนอย่างหนึ่ง - คุณสามารถใช้เลเยอร์เป็นเฟรมได้
สร้างแบนเนอร์ที่มีเพียงข้อความ
ข้าว. 8.11. เมนูจานสีเลเยอร์
ในเมนูนี้เราสนใจคำสั่ง Release to Layer (Sequence) ซึ่งจะแปลงแต่ละวัตถุเป็น เลเยอร์ใหม่- โปรดทราบว่าเมื่อใช้คำสั่งจะต้องเน้นไว้ กลุ่มไม่ใช่เลเยอร์ 1
วิธีดูแลจานสีเลเยอร์หลังจากดำเนินการ Release to Layer (ลำดับ) ดังแสดงในรูปที่ 1 8.12.
ข้าว. 8.12. จานสีเลเยอร์หลังจากดำเนินการ Release to Layer (ลำดับ)
เมื่อเตรียมเสร็จแล้วก็บันทึกการใช้ได้เลย บันทึกสำหรับเว็บ (บันทึกสำหรับเว็บ) ใน SWF SWF เป็นรูปแบบกราฟิกหลักที่ใช้เทคโนโลยีแฟลช มันจะแม่นยำกว่าถ้าบอกว่านี่คือรูปแบบ Flash (รูปที่ 8.13)
อาจเป็นไปได้ว่าทุกวันนี้ผู้ใช้ทุกคนคุ้นเคยกับ Flash อยู่แล้วในระดับหนึ่ง ในปัจจุบัน นี่เป็นรูปแบบแอนิเมชั่นที่ใช้กันทั่วไปบนอินเทอร์เน็ต โดยมีส่วนช่วยในการสร้างหน้าอินเทอร์เน็ตมัลติมีเดียส่วนใหญ่
แน่นอนว่า Adobe Illustrator ไม่ได้ใช้ความสามารถของ Flash แม้แต่หนึ่งในสิบเพราะนั่นไม่ใช่สิ่งที่โปรแกรมได้รับการออกแบบมา อย่างไรก็ตามในนั้นคุณสามารถสร้างภาพนิ่งหรือแอนิเมชั่นธรรมดาได้
ข้าว. 8.13. การตั้งค่าการเพิ่มประสิทธิภาพสำหรับรูปแบบ SWF
การตั้งค่าต่อไปนี้สามารถใช้ได้
- อ่านเท่านั้น. หากคุณทำเครื่องหมายที่ช่องนี้ ไฟล์จะถูกเขียนในลักษณะที่ไม่สามารถเปิดแก้ไขในโปรแกรมใดๆ ได้อีกต่อไป ในทางหนึ่งสิ่งนี้จะลดขนาดไฟล์และในทางกลับกันจะปกป้องลิขสิทธิ์ของคุณ
- การตั้งค่าที่ระบุโดย 1 พารามิเตอร์ที่ระบุประเภทของการบันทึก - รูปภาพหรือภาพเคลื่อนไหว
- หากคุณเลือกตัวเลือก AI File to SWF File ไฟล์ SWF) รูปภาพจะถูกบันทึกเป็นภาพนิ่ง โดยจำลองสิ่งที่คุณเห็นบนหน้าจอโดยสมบูรณ์เมื่อทำงานใน Illustrator
- เลเยอร์เป็น SWF Frames ช่วยให้คุณสร้างภาพเคลื่อนไหวตามเลเยอร์ที่มีอยู่ ซึ่งจะแสดงเป็นเฟรม เราต้องเลือกตัวเลือกนี้
- คุณภาพเส้นโค้ง ความแม่นยำของเส้นโค้งที่ทำซ้ำไฟล์เส้นโค้งของภาพต้นฉบับ การลดพารามิเตอร์นี้จะลดคุณภาพลงอย่างมากโดยเฉพาะในพื้นที่ที่มีรายละเอียดเล็ก ๆ แต่ยังลดขนาดไฟล์ด้วย ในกรณีของเรา ค่าที่เหมาะสมที่สุดคือ "7"
- อัตราเฟรม อัตราเฟรมและเป็นผลให้ความเร็วของแอนิเมชั่น เพื่อให้เอฟเฟ็กต์ถูกต้อง ให้ตั้งค่าเป็นไม่เกิน 4 เฟรมต่อวินาที
- วนซ้ำ (ซ้ำ) เล่นภาพเคลื่อนไหวซ้ำๆ เหมาะสำหรับแอนิเมชั่นที่การวนซ้ำเป็นสิ่งสำคัญ แบนเนอร์เป็นประเภทนี้
เมื่อเร็วๆ นี้ แอนิเมชันกราฟิก SVG (Scalable Vector Graphics) ประเภทต่างๆ บนเว็บไซต์และแอปพลิเคชันได้รับความนิยมอย่างมาก นี่เป็นเพราะความจริงที่ว่าทุกสิ่ง เบราว์เซอร์ล่าสุดรองรับรูปแบบนี้แล้ว นี่คือข้อมูลเกี่ยวกับการรองรับเบราว์เซอร์สำหรับ SVG
บทความนี้กล่าวถึง ตัวอย่างที่ง่ายที่สุดสร้างภาพเคลื่อนไหวเวกเตอร์ SVG ได้อย่างง่ายดาย ปลั๊กอิน Jqueryจิตรกรสายขี้เกียจ
แหล่งที่มาเพื่อให้งานนี้สมบูรณ์และเข้าใจอย่างถ่องแท้ ความรู้พื้นฐานเกี่ยวกับ HTML, CSS, Jquery เป็นสิ่งที่พึงปรารถนา แต่ไม่จำเป็น หากคุณต้องการสร้างภาพเคลื่อนไหว SVG) เริ่มกันเลย!
และนี่คือขั้นตอนที่เราต้องปฏิบัติตาม:
1. สร้างโครงสร้างไฟล์ที่ถูกต้อง
บริการ Initializr จะช่วยเราในเรื่องนี้ โดยเราต้องเลือกพารามิเตอร์ตามภาพด้านล่าง
- Classic H5BP (แผ่นหม้อต้ม HTML5)
- ไม่มีเทมเพลต
- เพียง HTML5 Shiv
- ย่อเล็กสุด
- คลาส IE
- กรอบโครเมียม
- จากนั้นคลิกดาวน์โหลดเลย!
2. ดาวน์โหลดและเชื่อมต่อปลั๊กอิน
เนื่องจาก Initializr มาพร้อมกับไลบรารี Jquery ล่าสุด จากไฟล์เก็บถาวรที่เราต้องดาวน์โหลดจากที่เก็บโปรเจ็กต์ Lazy Line Painter เราจึงต้องถ่ายโอนไฟล์เพียง 2 ไฟล์ไปยังโปรเจ็กต์ของเรา อันแรกคือ 'jquery.lazylinepainter-1.1.min.js' (เวอร์ชันปลั๊กอินอาจแตกต่างกัน) ซึ่งอยู่ในรูทของโฟลเดอร์ผลลัพธ์ อันที่สองคือ example/js/vendor/raphael-min.js
เราวาง 2 ไฟล์นี้ไว้ในโฟลเดอร์ js และเราเชื่อมต่อพวกมันเข้ากับ index.html ของเราก่อน main.js ดังนี้:
3. วาดภาพโครงร่างสุดเก๋ใน Adobe Illustrator
ตัวอย่างเช่น คุณสามารถใช้ไอคอนในไฟล์แนบได้
4. แปลงรูปภาพของเราเป็น Lazy Line Converter
เพียงลากไอคอนของคุณไปที่หน้าต่างในภาพด้านล่าง
ความหนา สีของโครงร่าง และความเร็วของแอนิเมชั่นสามารถเปลี่ยนแปลงได้ในโค้ดเอง ซึ่งจะปรากฏขึ้นหลังจากการแปลง!
5. วางโค้ดผลลัพธ์ลงใน main.js
ตอนนี้เราเพียงแค่วางโค้ดผลลัพธ์ลงในไฟล์ main.js ที่ว่างเปล่า
ตัวเลือก:
strokeWidth - ความหนาของโครงร่าง
strokeColor — สีเค้าร่าง
คุณยังสามารถเปลี่ยนความเร็วการวาดของเวกเตอร์แต่ละตัวได้ด้วยการเปลี่ยนค่าของพารามิเตอร์ระยะเวลา (ค่าเริ่มต้น 600)
6. เพิ่ม CSS เพื่อลิ้มรส
การลบย่อหน้าออกจาก index.html
สวัสดีชาวโลก! นี่คือ Boilerplate ของ HTML5
และแทนที่จะแทรกบล็อกที่แอนิเมชั่นของเราจะเกิดขึ้น
จากนั้นเราจะเพิ่ม CSS บางส่วนลงในไฟล์ main.css เพื่อให้ดูสวยงามยิ่งขึ้น:
เนื้อความ ( พื้นหลัง:#F3B71C; ) #icons ( ตำแหน่ง: คงที่; ด้านบน:50%; ซ้าย:50%; ระยะขอบ: -300px 0 0 -400px; )
บันทึกไฟล์ทั้งหมด
ตอนนี้เพียงแค่เปิด index.html ในเบราว์เซอร์ที่ทันสมัยและเพลิดเพลินไปกับเอฟเฟกต์
ป.ล. เมื่อทำงานบนเครื่องท้องถิ่น การเริ่มต้นภาพเคลื่อนไหวอาจล่าช้าเป็นเวลาหลายวินาที
รูปแบบ ไฟล์แฟลช(SWF) จะขึ้นอยู่กับ กราฟิกแบบเวกเตอร์และได้รับการออกแบบสำหรับกราฟิกขนาดกะทัดรัดที่ปรับขนาดได้สำหรับอินเทอร์เน็ต เนื่องจากรูปแบบไฟล์นี้ใช้กราฟิกแบบเวกเตอร์ วัตถุจึงรักษาคุณภาพของภาพไว้ที่ความละเอียดใดๆ และเหมาะสำหรับการสร้างเฟรมแอนิเมชั่น ใน Illustrator คุณสามารถสร้างเฟรมแอนิเมชั่นแต่ละเฟรมบนเลเยอร์ จากนั้นส่งออกเลเยอร์รูปภาพเป็นเฟรมเดี่ยวเพื่อใช้บนเว็บไซต์ของคุณ คุณยังสามารถกำหนดได้ สัญลักษณ์ในไฟล์ Illustrator เพื่อลดขนาดของภาพเคลื่อนไหว เมื่อส่งออก แต่ละสัญลักษณ์จะถูกกำหนดเพียงครั้งเดียวในไฟล์ SWF
คำสั่งส่งออก (SWF)
ให้การควบคุมภาพเคลื่อนไหวและการบีบอัดบิตได้มากที่สุด
ให้การควบคุมการผสมผสานระหว่างรูปแบบ SWF และบิตแมปในเค้าโครงแบบกระจัดกระจายได้มากขึ้น คำสั่งนี้มีตัวเลือกรูปภาพน้อยกว่าคำสั่งส่งออก (SWF) แต่ใช้ตัวเลือกคำสั่งส่งออกที่ใช้ล่าสุด (ดู )
เมื่อเตรียมออบเจ็กต์สำหรับการบันทึกในรูปแบบ SWF โปรดคำนึงถึงหลักเกณฑ์ต่อไปนี้
เมื่อใช้ Device Central คุณจะสามารถดูได้ว่าอาร์ตเวิร์ก Illustrator ของคุณจะมีลักษณะอย่างไรใน Flash Player บนอุปกรณ์พกพาต่างๆ
การแทรกกราฟิก Illustrator
กราฟิกที่สร้างใน Illustrator สามารถคัดลอกและวางลงใน Flash ได้อย่างรวดเร็ว ง่ายดาย และง่ายดาย
เมื่อคุณแทรกกราฟิก Illustrator ลงในแอปพลิเคชัน Flash คุณลักษณะต่อไปนี้จะยังคงอยู่
ความหนาของเส้นขีด
คำจำกัดความของการไล่ระดับสี
ข้อความ (รวมถึงแบบอักษร OpenType)
รูปภาพที่เกี่ยวข้อง
โหมดผสมผสาน
โครงร่างและรูปร่าง
นอกจากนี้ Illustrator และ Flash ยังรองรับตัวเลือกต่อไปนี้เมื่อแทรกกราฟิก
เมื่อเลือกเลเยอร์ในกราฟิก Illustrator ระดับสูงทั้งหมดและวางลงในแอปพลิเคชัน Flash เลเยอร์และคุณสมบัติ (การมองเห็นและการล็อค) จะยังคงอยู่
รูปแบบสีของ Illustrator ที่ไม่ใช่ RGB (CMYK, ระดับสีเทา และรูปแบบที่กำหนดเอง) จะถูกแปลงเป็น RGB ด้วย Flash สี RGB จะถูกแทรกตามปกติ
เมื่อคุณนำเข้าหรือแทรกกราฟิก Illustrator คุณสามารถใช้ตัวเลือกต่างๆ เพื่อบันทึกเอฟเฟ็กต์บางอย่าง (เช่น เงาของข้อความ) เป็นฟิลเตอร์ Flash
Flash เก็บมาสก์ Illustrator ไว้
ส่งออกไฟล์ SWF จาก Illustrator
ไฟล์ SWF ที่ส่งออกจาก Illustrator ตรงกับคุณภาพและอัตราส่วนการบีบอัดของไฟล์ SWF ที่ส่งออกจาก Flash
เมื่อคุณส่งออก คุณสามารถเลือกสไตล์ที่กำหนดไว้ล่วงหน้าได้หลากหลายเพื่อผลลัพธ์ที่ดีที่สุด และระบุวิธีที่คุณต้องการใช้อาร์ตบอร์ดหลายรายการ และวิธีที่คุณต้องการแปลงสัญลักษณ์ เลเยอร์ ข้อความ และมาสก์ ตัวอย่างเช่น คุณสามารถเลือกส่งออกสัญลักษณ์ Illustrator เป็นภาพยนตร์หรือ ภาพกราฟิกและสร้างสัญลักษณ์ SWF จากเลเยอร์ Illustrator
การนำเข้าไฟล์ Illustrator ลงในแอปพลิเคชัน Flash
หากต้องการสร้างเค้าโครงที่สมบูรณ์ใน Illustrator แล้วนำเข้าลงใน Flash ในขั้นตอนเดียว คุณสามารถบันทึกอาร์ตเวิร์กในรูปแบบ Native (AI) ของ Illustrator และนำเข้าลงใน Flash ได้อย่างแม่นยำโดยใช้คำสั่ง File > Import to Workbench" หรือ "File "> "นำเข้าไปยังห้องสมุด"
หากไฟล์ Illustrator ของคุณมีหลายอาร์ตบอร์ด ให้เลือกอาร์ตบอร์ดที่จะนำเข้าในกล่องโต้ตอบนำเข้าของ Flash และระบุการตั้งค่าสำหรับแต่ละเลเยอร์ในอาร์ตบอร์ดนั้น ออบเจ็กต์ทั้งหมดในอาร์ตบอร์ดที่เลือกจะถูกนำเข้าไปยัง Flash เป็นเลเยอร์เดียว เมื่อคุณนำเข้าอาร์ตบอร์ดอื่นจากไฟล์ AI เดียวกัน ออบเจ็กต์ในอาร์ตบอร์ดนั้นจะถูกนำเข้าไปยัง Flash เป็นเลเยอร์ใหม่
เมื่อคุณนำเข้ากราฟิก Illustrator เป็นไฟล์ AI, EPS หรือ PDF Flash จะคงคุณลักษณะเดิมไว้เช่นเดียวกับเมื่อคุณแทรกกราฟิก Illustrator นอกจากนี้ หากไฟล์ Illustrator ที่คุณกำลังนำเข้ามีเลเยอร์ คุณสามารถนำเข้าโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
แปลงเลเยอร์ Illustrator เป็นเลเยอร์ Flash
แปลงเลเยอร์ Illustrator เป็นเฟรม Flash
แปลงเลเยอร์ Illustrator ทั้งหมดเป็นเลเยอร์ Flash หนึ่งเลเยอร์
วันนี้เรามีบทเรียน Adobe Illustrator ที่ไม่ธรรมดา เพราะครั้งนี้เราจะไม่สร้างภาพนิ่ง แต่เป็นแอนิเมชั่นจริง ลองนึกภาพปรากฎว่าคุณสามารถวาดการ์ตูนโดยใช้ Adobe Illustrator ได้ :)
และสำหรับสิ่งนี้เราไม่ต้องการอะไรเลย การจัดระเบียบเลเยอร์ที่เหมาะสมและส่งออกงานขั้นสุดท้ายเป็นรูปแบบ swf โดยแต่ละเลเยอร์จะถูกแปลงเป็นเฟรมแอนิเมชั่น ในบทช่วยสอนวันนี้ เราจะวาดแอนิเมชั่นนับถอยหลังในรูปแบบของภาพยนตร์ย้อนยุค ผลลัพธ์ควรเป็นวิดีโอแฟลชที่มีการนับถอยหลังเดียวกันนี้
สิ่งแรกที่คุณต้องทำคือวาดองค์ประกอบที่จำเป็นทั้งหมดสำหรับแอนิเมชั่นในอนาคต ในการทำเช่นนี้ ในเอกสารที่แยกออกมา ฉันได้สร้างกรอบฟิล์มสองตำแหน่ง วงกลมสำหรับอ้างอิง ซึ่งถูกตัดออกเป็นส่วนที่แยกจากกัน พื้นผิวและรอยขีดข่วนแนวตั้งเพื่อเพิ่มเอฟเฟกต์ของสมัยโบราณ เช่นเดียวกับตัวเลขและ จารึก
เมื่อทุกส่วนของการ์ตูนของเราพร้อมแล้ว เราก็สามารถเริ่มสร้างแอนิเมชั่นได้เลย เพื่อความสะดวก ควรทำเช่นนี้ในเอกสารใหม่ ในกรณีนี้ เลเยอร์ของเราจะมีบทบาทเป็นเฟรมแอนิเมชัน และในชั้นแรกคุณเพียงแค่ต้องคัดลอกเฟรมฟิล์ม วางไว้ตรงกลางพื้นที่ทำงานของคุณ
ตอนนี้สร้างเลเยอร์ที่สองแล้วคัดลอกเฟรมของฟิล์มลงไปโดยที่รูตามขอบนั้นทำด้วยออฟเซ็ต ต้องวางไว้ตรงกลางด้วย
จากสองชั้นนี้ คุณจะได้รับแอนิเมชันของภาพยนตร์ที่กำลังเคลื่อนไหวอยู่แล้ว แต่ต่อมาเราจะต้องมีเลเยอร์เพิ่มอีกหลายชั้น ดังนั้นเลือกสองชั้นแรก ไปที่ตัวเลือกพาเนลและทำสำเนาเลเยอร์ต่างๆ
ในทำนองเดียวกัน เราจำเป็นต้องสะสมเฟรมฟิล์ม 12 ชั้นเพื่อกำหนดการเคลื่อนไหว
ตอนนี้เรามีเลเยอร์จำนวนมากและมองเห็นได้ทั้งหมด ในแง่ที่ว่าชั้นบนปิดกั้นชั้นล่างซึ่งไม่สะดวกในการทำงานโดยสิ้นเชิง ดังนั้นคุณสามารถปิดบางเลเยอร์ได้โดยคลิกที่ไอคอนพร้อมตาทางด้านซ้ายของชื่อเลเยอร์ หากต้องการปิดหรือเปิดเลเยอร์ทั้งหมดพร้อมกัน ให้กดปุ่ม Alt ค้างไว้พร้อมกับคลิกที่ไอคอนรูปตา ด้วยการเปิดและปิดเลเยอร์ คุณจะเห็นได้อย่างชัดเจนว่ามีอะไรอยู่ในเฟรมเฉพาะของแอนิเมชั่นในอนาคตของเรา และตอนนี้ เพื่อที่จะเพิ่มการสั่นเล็กน้อยให้กับการเคลื่อนไหวของฟิล์ม เราจำเป็นต้องย้ายเฟรมผลลัพธ์เล็กน้อยไปในทิศทางที่ต่างกัน ในการดำเนินการนี้ ให้เปิดเฉพาะเลเยอร์ที่คุณจะใช้งานในขณะนี้ จากนั้นเลื่อนเฟรมไปสองสามพิกเซลในทิศทางใดก็ได้
เมื่อคุณผ่านเลเยอร์ทั้งหมดและเพิ่มการเปลี่ยนแปลงเล็กน้อยแล้ว คุณสามารถเริ่มสร้างแอนิเมชั่นของวงกลมที่กำลังเคลื่อนที่ได้ ในการดำเนินการนี้ ให้คัดลอกวงกลมที่ประกอบด้วยส่วนต่างๆ จากเอกสารพร้อมส่วนการ์ตูน และวางไว้บนชั้นแรกที่ด้านบนของกรอบฟิล์ม
หากคุณยกเลิกการเลือกวงกลม วงกลมนั้นจะมีลักษณะเป็นวงกลมเดียว นี่คือสิ่งที่เราต้องการ
แต่เนื่องจากประกอบด้วยแต่ละส่วน คุณจึงสามารถสร้างแอนิเมชั่นได้อย่างรวดเร็วและง่ายดายด้วยการเปลี่ยนสี เมื่อต้องการทำเช่นนี้ ให้คัดลอกวงกลมนี้ไปยังเลเยอร์ที่สอง และทำให้เซกเตอร์แรกสว่างขึ้น คุณจำได้ว่าฟิล์มของเราจะสั่นขณะเคลื่อนไหว ดังนั้นจึงไม่จำเป็นต้องวางวงกลมไว้ตรงกลางเฟรมพอดีเลย วางตำแหน่งด้วยสายตา
ในทำนองเดียวกัน คุณต้องคัดลอกวงกลมลงในแต่ละเลเยอร์ถัดไป ในขณะที่ทาสีอีกหนึ่งเซกเตอร์ด้วยสีที่สว่างกว่าครั้งก่อน เลเยอร์ทั้ง 12 เลเยอร์เหล่านี้รวมกันเป็นแอนิเมชั่นของภาพยนตร์ที่เคลื่อนไหวเป็นวงกลม
ต่อไปเราต้องเพิ่มพื้นผิวให้กับเลเยอร์ของเรา เปิดเลเยอร์แรกและคัดลอกพื้นผิวจากไฟล์ต้นฉบับพร้อมอะไหล่
จากนั้นเปิดเลเยอร์ถัดไปทีละเลเยอร์แล้วคัดลอกพื้นผิวเดียวกันที่นั่น หากต้องการทำให้แต่ละเฟรมดูแตกต่าง เพียงหมุน 90 องศา ตามที่คุณอาจเดาได้ เราต้องเพิ่มพื้นผิวให้กับทั้ง 12 เฟรม
หากคุณเบื่อกับการคัดลอกแล้วฉันช่วยคุณได้ - เหลือน้อยมาก ส่วนที่ยากที่สุดจบลงแล้ว สิ่งที่เหลืออยู่คือการเพิ่มรอยขีดข่วนในแนวตั้งและเกือบจะเท่านั้น ในการทำเช่นนี้เราจะคัดลอกรอยขีดข่วนต้นฉบับอีกครั้งและวางไว้ในตำแหน่งที่ต้องการในหลายชั้น ในกรณีของฉัน รอยขีดข่วนปรากฏเพียงสองชั้นเท่านั้น
ตอนนี้วงจรหลักที่มีแอนิเมชั่นภาพยนตร์พร้อมแล้ว สิ่งที่เหลืออยู่คือการเพิ่มตัวเลข เนื่องจากการนับถอยหลังของเราเปลี่ยนจาก 3 เป็น 1 บวกกับคำว่า Go!!! เราจึงต้องมีเลเยอร์มากกว่านี้ ไม่ใช่ 12 แต่มากถึง 48 ในการทำเช่นนี้คุณต้องสร้างเลเยอร์สำเร็จรูปพร้อมแอนิเมชั่นภาพยนตร์อีกสามชุด
แล้วทุกอย่างก็เรียบง่าย เปิดเลเยอร์แรกแล้วใส่หมายเลขสามลงไป
จากนั้นคุณจะต้องคัดลอกหมายเลขนี้ไปยังเลเยอร์ถัดไปจนกว่าภาพเคลื่อนไหวของวงกลมจะสิ้นสุด เมื่อคุณไปถึงสำเนาเลเยอร์ถัดไปโดยที่วงกลมจะเต็มอีกครั้งคุณจะต้องใส่หมายเลขที่สอง ในทำนองเดียวกัน ให้คัดลอกหมายเลข 1 ไปยังเลเยอร์ที่ต้องการ และเมื่อคุณไปถึงเลเยอร์สุดท้ายของคำจารึก Go!!! เพียงลบวงกลมออกก่อนที่จะคัดลอกคำจารึกไปยังเลเยอร์ที่ต้องการ
นั่นคือทั้งหมดสำหรับแอนิเมชั่น สิ่งสำคัญที่นี่คืออย่าสับสน คุณสามารถตั้งชื่อที่สะดวกให้กับเลเยอร์ต่างๆ ได้ แต่ฉันค่อนข้างขี้เกียจ :) และเมื่อคุณทำงานเสร็จแล้ว อย่าลืมเปิดเลเยอร์ทั้งหมดอีกครั้งโดยคลิกที่ไอคอนรูปตา
ในหน้าต่างการตั้งค่าการส่งออก อย่าลืมตั้งค่าส่งออกเป็น: เลเยอร์ AI เป็น SWF Frames เป็นตัวเลือกนี้ที่จะเปลี่ยนเลเยอร์ Illustrator ให้เป็นเฟรมแอนิเมชั่น จากนั้นคลิกปุ่มขั้นสูง
การตั้งค่าเพิ่มเติมจะเปิดขึ้น ที่นี่คุณต้องตั้งค่าอัตราเฟรม ฉันมี 12 เฟรมต่อวินาที ช่องทำเครื่องหมายวนซ้ำมีหน้าที่รับผิดชอบในการเคลื่อนไหวแบบวนรอบ ด้วยเหตุนี้วิดีโอจึงเล่นเป็นวงกลม และตัวเลือก Layer Order: จากล่างขึ้นบน จะสร้างเลเยอร์ของนักวาดภาพประกอบจากล่างขึ้นบนในแผง นี่คือวิธีที่เราสร้างแอนิเมชั่นของเรา
ผลลัพธ์เป็นวิดีโอแฟลชพร้อมภาพเคลื่อนไหวของเรา
ตอนนี้คุณจะเห็นแล้วว่าการสร้างแอนิเมชั่นอย่างง่ายใน Adobe Illustrator นั้นไม่ใช่เรื่องยากอย่างที่คิดเมื่อเห็นแวบแรก
แต่หากต้องการสร้างวิดีโอขนาดยาวหรือแอปพลิเคชันเชิงโต้ตอบ ยังดีกว่าถ้าใช้ Adobe Flash หรือโปรแกรมแก้ไขแฟลชอื่นๆ ตัวอย่างเช่น ฉันสร้างแมวตัวนี้ด้วย Macromedia Flash ตัวเก่าที่ฉันขุดขึ้นมาจากงานของฉัน
นอกจากนี้ เมื่อเร็ว ๆ นี้มีการใช้ HTML5 และ CSS3 เพื่อสร้างแอนิเมชั่นมากขึ้น รหัสนี้รองรับโดยเบราว์เซอร์รุ่นใหม่และไม่ต้องใช้โปรแกรมเล่นแฟลช
Roman aka dacascas โดยเฉพาะอย่างยิ่งสำหรับบล็อก
สมัครรับจดหมายข่าวของเราเพื่อให้คุณไม่พลาดข่าวสารใหม่ๆ:
กำลังโหลด...