เมื่อเร็ว ๆ นี้ ภาพเคลื่อนไหวประเภทต่าง ๆ ของกราฟิก SVG (Scalable Vector Graphics) บนเว็บไซต์และแอปพลิเคชันได้รับความนิยมอย่างมาก นี่เป็นเพราะความจริงที่ว่าทุกสิ่ง เบราว์เซอร์ล่าสุดรองรับรูปแบบนี้แล้ว นี่คือข้อมูลเกี่ยวกับการรองรับเบราว์เซอร์สำหรับ SVG

บทความนี้กล่าวถึง ตัวอย่างที่ง่ายที่สุดทำให้เวกเตอร์ SVG เคลื่อนไหวได้ง่าย ปลั๊กอิน jqueryจิตรกรสายขี้เกียจ.

แหล่งที่มา

เพื่อให้สมบูรณ์และเข้าใจงานนี้ จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ HTML, CSS, Jquery แต่ไม่จำเป็นหากคุณต้องการสร้างภาพเคลื่อนไหว SVG) เริ่มกันเลย!

ดังนั้นขั้นตอนที่เราต้องปฏิบัติตาม:

1. สร้างโครงสร้างไฟล์ที่ถูกต้อง
2. ดาวน์โหลดและเชื่อมต่อปลั๊กอิน
3. วาดลายเส้นสุดเท่ใน Adobe Illustrator
4. แปลงรูปภาพของเราเป็น Lazy Line Converter
5. วางโค้ดผลลัพธ์ลงใน main.js
6. เพิ่ม CSS เพื่อลิ้มรส

1. สร้างโครงสร้างไฟล์ที่ถูกต้อง
บริการ Initializr จะช่วยเราในเรื่องนี้ โดยคุณต้องเลือกพารามิเตอร์ตามภาพด้านล่าง

• คลาสสิก H5BP (แผ่นหม้อต้ม HTML5)
• ไม่มีเทมเพลต
• เพียงแค่ HTML5 ชีฟ
• ลดขนาด
• คลาส .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

1. วาดภาพร่างของเราใน Illustrator (วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ Pen Tool)
2. จำเป็นที่รูปทรงของภาพวาดของเราจะไม่ปิดเพราะเราต้องการจุดเริ่มต้นและจุดสิ้นสุดสำหรับเอฟเฟกต์ของเรา
3. ไม่ควรมีการเติม
4. ขนาดไฟล์สูงสุดคือ 1,000×1,000 px, 40kb
5. มาครอบตัดขอบของวัตถุ Object>Artboards>Fit To Artboards Bounds
6. บันทึกเป็น SVG (การตั้งค่าการบันทึกมาตรฐานนั้นใช้ได้)

ตัวอย่างเช่น คุณสามารถใช้ไอคอนในเอกสารแนบ

4. แปลงรูปภาพของเราเป็น Lazy Line Converter
เพียงลากและวางไอคอนของคุณลงในช่องด้านล่าง
ความหนา สีของโครงร่าง และความเร็วของแอนิเมชันสามารถเปลี่ยนแปลงได้ในโค้ดที่จะปรากฏขึ้นหลังจากการแปลง!

5. วางโค้ดผลลัพธ์ลงใน main.js
ตอนนี้เพียงแค่วางรหัสผลลัพธ์ลงในไฟล์ main.js ที่ว่างเปล่า
ตัวเลือก:
strokeWidth — ความหนาของโครงร่าง
strokeColor - สีโครงร่าง
คุณยังสามารถเปลี่ยนความเร็วในการวาดของเวกเตอร์แต่ละตัวได้โดยเปลี่ยนค่าของพารามิเตอร์ระยะเวลา (ค่าเริ่มต้น 600)

6. เพิ่ม CSS เพื่อลิ้มรส
ลบย่อหน้าออกจาก index.html

สวัสดีชาวโลก! นี่คือ HTML5 Boilerplate

และแทนที่เราจะแทรกบล็อกที่แอนิเมชั่นของเราจะเกิดขึ้น

จากนั้นเพิ่ม CSS บางส่วนลงในไฟล์ main.css เพื่อให้ดูดีขึ้น:

เนื้อหา ( พื้นหลัง:#F3B71C; ) #icons ( ตำแหน่ง: คงที่ ด้านบน: 50% ซ้าย: 50% ขอบ: -300px 0 0 -400px; )

บันทึกไฟล์ทั้งหมด
ตอนนี้เพียงแค่เปิด index.html ในเบราว์เซอร์รุ่นใหม่และเพลิดเพลินไปกับเอฟเฟกต์

ป.ล. เมื่อทำงานบนเครื่องท้องถิ่น การเริ่มต้นของภาพเคลื่อนไหวอาจล่าช้าไปสองสามวินาที

สวัสดีทุกคน! วันนี้ฉันจะพยายามอธิบายคุณสมบัติของโปรแกรม อะโดบี อิลลัสเตรเตอร์โดยเปรียบเทียบกับความสามารถของฟลัช นี่จะไม่ใช่การวิเคราะห์ทั่วโลกของโปรแกรมโดย Bone แต่เป็นคำอธิบายของบางส่วน ชิปที่น่าสนใจที่ฉันค้นพบในโปรแกรมนี้ ฉันรวบรวมข้อมูลทีละส่วนในขณะที่ศึกษาเพื่อรวมไว้ในโพสต์เดียว ฉันต้องยอมรับทันทีว่าฉันไม่ใช่ผู้ใช้นักวาดภาพประกอบที่มีประสบการณ์สูง ฉันใช้มันในการวาดภาพในช่วงหกเดือนที่ผ่านมาเท่านั้น (ก่อนหน้านั้นฉันวาดทุกอย่างด้วยแฟลช) หลายคนบ่นว่านักวาดภาพประกอบนั้นซับซ้อน ไม่ง่ายเสมอไป ในระดับหนึ่งฉันยอมรับว่าหลังจากแฟลชโปรแกรมนี้ยาก แต่สิ่งสำคัญที่นี่ไม่ใช่การลาออก แต่เพื่อศึกษาต่อ และหลังจากผ่านไปสองสามสัปดาห์ ความคิดก็เกิดขึ้น ฉันจะจัดการได้อย่างไรหากไม่มีมันมาก่อน!

ดังนั้น สิ่งที่ฉันชอบเกี่ยวกับนักวาดภาพประกอบ และสิ่งที่ฉันค้นพบสำหรับตัวเองที่ไม่ได้อยู่ใน Flash
1. ฉันจะเริ่มต้นด้วยสิ่งที่ง่ายที่สุด แต่ในขณะเดียวกันก็จำเป็น ลองจัดวัตถุเป็นวงกลมในแฟลช เมื่อก่อนเป็น เครื่องมือเดคโคแต่มันถูกลบออกโดยถือว่าไม่จำเป็น เราตัดสินใจว่าทำด้วยมือน่าจะสนุกกว่า Illustrator มีคุณสมบัตินี้: เอฟเฟกต์ - บิดเบือน & แปลง - แปลง.

ทุกอย่างง่ายและรวดเร็วเราตั้งค่า (ระยะห่างระหว่างวัตถุจำนวนสำเนา) ในการตั้งค่า

2. ซิกแซก

ง่ายยิ่งขึ้น แต่ก็ยังมีประโยชน์ ดูเหมือนจะเป็นเรื่องเล็ก แต่ในแฟลชคุณต้องวาดด้วยมือในนักวาดภาพประกอบนี่ใช้เวลาไม่กี่วินาที

3. การบิดเบี้ยวของวัตถุ (Warp)

ไม่มีอะไรแบบนี้ในแฟลช ในตัวอย่างด้านล่าง ฉันแสดงให้เห็นเพียง 2 วิธีในการเปลี่ยนรูปร่างง่ายๆ (เอฟเฟกต์ - การบิดงอ - ส่วนโค้ง / ปลา) จริงๆแล้วมี 15 คน รุ่นล่าสุดโปรแกรม

4. การปัดเศษมุมอัตโนมัติ (Round Corners)

สามารถทำได้ด้วยตนเอง: บนวัตถุกราฟิก เมื่อเลือกมุม (ในทุกมุม) จุดสีขาวและเครื่องหมายเส้นกลมจะปรากฏขึ้น ลากเมาส์ปรับแต่งตามที่คุณต้องการ

แต่สิ่งนี้ใช้ได้กับรูปร่างเท่านั้นโดยมีเส้นดินสอแตกต่างกันเล็กน้อย - ใช้เอฟเฟกต์การปัดเศษ ( เอฟเฟกต์ - สไตล์ - มุมมน). ที่ผลลัพธ์เราจะได้ผลลัพธ์เดียวกัน

5. หยาบ

เอฟเฟ็กต์ถูกนำไปใช้กับ รูปแบบที่เรียบง่าย (Effect-Distort&Transform-Roughen). เป็นผลให้เราได้รับสิ่งที่คล้ายกับโมเดล 3 มิติแบบโพลีต่ำ ฉันคิดว่ามันเจ๋ง :) และที่สำคัญที่สุด - ง่ายมาก

6 Pucker & Bloat(ดึงเข้าและพองออก)
ตัวอย่างในภาพด้านล่าง:

7. ส่วนขยายแบบฟอร์ม (เส้นทาง Offset)

ในแฟลชมีฟังก์ชั่น Expand Fill (ส่วนขยายการเติม) ซึ่งใช้ไม่ได้กับเส้นดินสอเลยซึ่งแตกต่างจากนักวาดภาพประกอบ

8. แปรง (Art Brush, Pattern Brush, Scatter Brush)
ดูภาพด้านล่างสำหรับตัวอย่าง:

9.Texture Brush (แปรงเท็กซ์เจอร์)

นอกจากนี้ยังมีแปรงพื้นผิวมากมายในโปรแกรมวาดภาพประกอบที่ฉันเขียนถึงและลักษณะที่ปรากฏของมัน เวอร์ชั่นใหม่แฟลช - . พบว่าการใช้แปรงใน Adobe Animate นั้นช้ามาก แค่นั้นแหละ:(

10. ฉันไม่แน่ใจว่านี่เป็นเคล็ดลับหรือไม่ แต่ฉันต้องการเน้นแปรงที่มีชื่อตลกๆ หยดแปรง. อยู่บนแถบเครื่องมือ เป็นแปรงที่น่าใช้มาก มันมีการตั้งค่ามากมาย ฉันชอบมันมากกว่าปกติ ยากที่จะอธิบายประโยชน์ของมันด้วยคำพูด ดีกว่าที่จะลองใช้ดูสักครั้ง

10. แยกเป็นตาราง

คุณสมบัติที่มีประโยชน์อีกอย่างคือฟังก์ชัน Split to Grid (Object-Path-Split to Grid) ช่วยให้คุณตัดแบบฟอร์มออกเป็นส่วนเท่าๆ กัน สิ่งนี้ทำให้เรานึกถึงอะไร? ถูกต้อง - หน้าต่างในอาคารสูง สำหรับฉันแล้ว การวาดภาพที่ยอดเยี่ยม เช่น ทิวทัศน์เมือง ;)

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

12. ย้าย (ขวา - แปลง - ย้าย)

หักล้างวัตถุด้วยระยะทางที่กำหนด หากต้องการ คุณสามารถสร้างสำเนาที่จะวางในระยะที่ต้องการจากวัตถุที่เลือกในแนวนอน/หรือแนวตั้งได้ทันที แฟลชรุ่นก่อนหน้ามีปลั๊กอินที่ทำ ฟังก์ชั่นนี้. น่าเสียดาย ฉันจำชื่อมันไม่ได้

สะดวกมากในการสร้างรูปแบบไร้รอยต่อในโปรแกรมวาดภาพประกอบ ( Object-Pattern-Make). ฉันจำได้ว่าฉันเก่งแฟลชอย่างเมามันด้วยการสร้างไฟล์. ในเวอร์ชัน Illustrator ของ CC 2015 ทุกอย่างจะเป็นแบบอัตโนมัติ การตั้งค่าต่างๆ มากมายจะช่วยให้คุณสร้างรูปแบบในรูปแบบต่างๆ ได้มากมาย โดยมีองค์ประกอบกราฟิกเพียงไม่กี่อย่าง ในโปรแกรมเวอร์ชันก่อนหน้า ทุกอย่างต้องทำด้วยตนเองเช่นเดียวกับในแฟลชจนถึงตอนนี้

(หมายเหตุ - รูปแบบสามารถสร้างวัตถุแก้ไขเวกเตอร์ได้โดยใช้ฟังก์ชันแยกวิเคราะห์ ( ลักษณะการขยายวัตถุ).

14. วัตถุโมเสก (โมเสก)

สร้างจานสีตามภาพที่มีอยู่ นำเข้ารูปภาพที่คุณชอบลงในภาพประกอบ (เปิด) จากนั้น วัตถุ - สร้างโมเสกวัตถุ. ในการตั้งค่า เราระบุความถี่การแบ่งส่วนเป็นความสูงและความกว้าง

และที่ผลลัพธ์เราได้รับ:

15.เบลนด์ (การผสม)

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

เครื่องมือนี้ยังสามารถใช้เพื่อโคลนวัตถุได้อีกด้วย เราวางวัตถุสองชิ้นให้ห่างจากกันและใช้ Blend Options เลือกจำนวนขั้นตอน (จำนวนของวัตถุโคลน)

16. เครื่องมือสร้างรูปร่างสิ่งที่สะดวกมากสำหรับการทำงานกับสิ่งดั้งเดิม ในพริบตาสำหรับฉันแล้วดูเหมือนว่าจะสะดวกน้อยกว่า

กด Alt ค้างไว้แล้วคลิกส่วนที่เลือก - ลบส่วนนั้น หากเราลากเมาส์ไปบนพื้นที่ที่เลือกหลายจุด - การเชื่อมต่อ

ส่วนเสริม - เครื่องมือที่ช่วยในการตัด ต่อ ฯลฯ โดยอัตโนมัติ แบบฟอร์มที่เลือก สำหรับฉันมันไม่สะดวกมากฉันใช้บ่อยขึ้น สร้างรูปร่างเครื่องมือ.

(อาร์ตบอร์ด)

18. แผงเครื่องมือแบบกำหนดเอง

ความสามารถในการสร้างแถบเครื่องมือของคุณเอง ละทิ้งอันที่ไม่จำเป็น และเลือกเฉพาะอันที่คุณใช้

ใน flash, artboards คือ ฉาก ( ฉาก 1,2,3..) ตั้งอยู่แยกกันและคุณต้องสลับไปมาระหว่างกัน (Shift + F2) ในนักวาดภาพประกอบ พวกมันทั้งหมดสามารถวางตำแหน่งไว้ต่อหน้าต่อตาคุณได้ จะสะดวกเมื่อคุณสร้างภาพวาดเดียวกันหลายเวอร์ชันเพื่อให้ตัวเลือกทั้งหมดอยู่ตรงหน้าคุณเพื่อเปรียบเทียบ

19. ภาพสามมิติพร้อมสไตล์กราฟิก

และสิ่งสุดท้ายคือการสร้างไอโซเมตริกโดยไม่ต้องใช้ 1 คลิก (หรือมากกว่า 3 คลิกเพราะเรามี 3 ด้าน) โดยใช้สไตล์กราฟิก ( รูปแบบกราฟิก). เสร็จแล้วจะเขียนอย่างไรในครั้งต่อไป

สิ่งที่นักวาดภาพประกอบมีเหมือนกันกับแฟลชคือความสามารถในการบันทึกวัตถุเป็นสัญลักษณ์ (สัญลักษณ์) และสัญลักษณ์นี้สามารถถ่ายโอนไปยังแฟลชได้โดยไม่มีปัญหา (เปิดไฟล์ .ai ในแฟลชโดย นำเข้า - นำเข้าสู่ขั้นตอน).
สัญลักษณ์ในอิลลัสเตรเตอร์มีคุณสมบัติเหมือนกับในแฟลช
และท้ายที่สุด ฉันจะเขียนสิ่งที่นักวาดภาพประกอบในความคิดของฉันด้อยกว่าแฟลช ใช่ใช่และมี และนี่คือเครื่องมือเติม ( ถังสี). ไม่ว่าฉันจะพยายามชินกับมันแค่ไหนใน illa มันก็สะดวกกว่าในแฟลช
หากบันทึกของฉันมีประโยชน์สำหรับคุณหรือถ้าคุณต้องการเพิ่มบางอย่างด้วยตัวคุณเอง - ยินดีต้อนรับในความคิดเห็น! โชคดีทุกคน;)

รูปแบบไฟล์แฟลช (SWF) ขึ้นอยู่กับ กราฟิกแบบเวกเตอร์และได้รับการออกแบบมาสำหรับกราฟิกที่ปรับขนาดได้และกะทัดรัดสำหรับเว็บ เนื่องจากรูปแบบไฟล์นี้ใช้กราฟิกแบบเวกเตอร์ วัตถุจึงรักษาคุณภาพของภาพที่ความละเอียดใดก็ได้ และเหมาะสำหรับการสร้างเฟรมภาพเคลื่อนไหว ใน Illustrator คุณสามารถสร้างเฟรมแอนิเมชั่นแต่ละเฟรมบนเลเยอร์ แล้วส่งออกเลเยอร์ภาพเป็นเฟรมเดี่ยวเพื่อใช้บนเว็บไซต์ คุณยังสามารถกำหนด สัญลักษณ์ในไฟล์ Illustrator เพื่อลดขนาดของภาพเคลื่อนไหว เมื่อส่งออก แต่ละสัญลักษณ์จะถูกกำหนดเพียงครั้งเดียวในไฟล์ SWF

คำสั่งส่งออก (SWF)

ให้การควบคุมภาพเคลื่อนไหวและการบีบอัดบิตมากที่สุด

ให้การควบคุมส่วนผสมของรูปแบบ SWF และบิตแมปในรูปแบบแฟรกเมนต์มากขึ้น คำสั่งนี้มีตัวเลือกรูปภาพน้อยกว่าคำสั่งส่งออก (SWF) แต่ใช้ตัวเลือกคำสั่งส่งออกที่ใช้ล่าสุด (ดู )

คำนึงถึงหลักเกณฑ์ต่อไปนี้เมื่อเตรียมวัตถุสำหรับบันทึกเป็น SWF

ใช้แอป Device Central เพื่อดูว่ากราฟิก Illustrator จะมีลักษณะอย่างไรในแอป แฟลชเพลเยอร์บนอุปกรณ์พกพาต่างๆ

การแทรกกราฟิก Illustrator

วัตถุกราฟิกที่สร้างขึ้นใน Illustrator สามารถคัดลอกและวางลงในแอปพลิเคชัน Flash ได้อย่างรวดเร็ว ง่ายดาย และง่ายดาย

เมื่อคุณวางกราฟิก Illustrator ลงในแอปพลิเคชัน Flash แอตทริบิวต์ต่อไปนี้จะถูกรักษาไว้

รูปร่างและรูปร่าง

• ความหนาของจังหวะ

  คำจำกัดความของการไล่ระดับสี

  ข้อความ (รวมถึงฟอนต์ OpenType)

  รูปภาพที่เกี่ยวข้อง

• โหมดผสมผสาน

นอกจากนี้ Illustrator และ Flash ยังรองรับคุณสมบัติต่อไปนี้เมื่อวางกราฟิก

เมื่อเลือกเลเยอร์ในงานศิลปะของ Illustrator ระดับสูงทั้งหมดและวางลงในแอปพลิเคชัน Flash เลเยอร์และคุณสมบัติ (การมองเห็นและการปิดกั้น) จะถูกรักษาไว้

รูปแบบสีของ Illustrator นอกเหนือจาก RGB (CMYK, ระดับสีเทา และรูปแบบที่กำหนดเอง) จะถูกแปลงโดย Flash เป็น RGB สี RGB จะถูกแทรกตามปกติ

เมื่อคุณนำเข้าหรือวางงานศิลปะของ Illustrator คุณสามารถใช้ตัวเลือกต่างๆ เพื่อบันทึกเอฟเฟกต์บางอย่าง (เช่น เงาที่ทอดผ่านข้อความ) เป็นตัวกรอง Flash

Flash บันทึกมาสก์ของ Illustrator

ส่งออกไฟล์ SWF จาก Illustrator

ไฟล์ SWF ที่ส่งออกจาก Illustrator มีคุณภาพและการบีบอัดแบบเดียวกับไฟล์ SWF ที่ส่งออกจาก Flash

เมื่อส่งออก คุณสามารถเลือกสไตล์ที่กำหนดไว้ล่วงหน้าได้หลากหลายเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด และระบุวิธีการใช้อาร์ตบอร์ดหลายรายการ วิธีแปลงอักขระ เลเยอร์ ข้อความ และมาสก์ ตัวอย่างเช่น คุณสามารถเลือกที่จะส่งออกสัญลักษณ์ Illustrator เป็นภาพยนตร์หรือ ภาพกราฟิกเช่นเดียวกับการสร้างสัญลักษณ์ SWF จากเลเยอร์ Illustrator

นำเข้า ไฟล์อิลลัสเตรเตอร์ไปยังแอปพลิเคชันแฟลช

ในการสร้างเลย์เอาต์ที่สมบูรณ์ใน Illustrator แล้วนำเข้าไปยัง Flash ในขั้นตอนเดียว คุณสามารถบันทึกอาร์ตเวิร์คของคุณในรูปแบบ Illustrator native (AI) และนำเข้าด้วยความเที่ยงตรงสูงไปยัง Flash โดยใช้คำสั่ง File > Import To Workspace" หรือ " ไฟล์"> "นำเข้าห้องสมุด"

หากไฟล์ Illustrator มีอาร์ตบอร์ดหลายรายการ ให้เลือกอาร์ตบอร์ดที่จะนำเข้าจากกล่องโต้ตอบ Flash Import และระบุการตั้งค่าสำหรับแต่ละเลเยอร์ในอาร์ตบอร์ดนั้น วัตถุทั้งหมดในอาร์ตบอร์ดที่เลือกจะถูกนำเข้าไปยัง Flash เป็นเลเยอร์เดียว เมื่อคุณนำเข้าอาร์ตบอร์ดอื่นจากไฟล์ AI เดียวกัน วัตถุจากอาร์ตบอร์ดนั้นจะถูกนำเข้าไปยัง Flash เป็นเลเยอร์ใหม่

เมื่อคุณนำเข้าอาร์ตเวิร์กของ Illustrator เป็นไฟล์ AI, EPS หรือ PDF Flash จะคงคุณสมบัติเดียวกันกับเมื่อคุณวางอาร์ตเวิร์กของ Illustrator นอกจากนี้ หากไฟล์ Illustrator ที่คุณกำลังนำเข้ามีเลเยอร์ คุณสามารถนำเข้าได้โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

แปลงเลเยอร์ Illustrator เป็นเลเยอร์ Flash

แปลงเลเยอร์ Illustrator เป็นเฟรม Flash

แปลงเลเยอร์ Illustrator ทั้งหมดเป็นเลเยอร์ Flash หนึ่งเลเยอร์

อะโดบี อิลลัสเตรเตอร์ และ หลังจากผลกระทบ
นำเข้าและภาพเคลื่อนไหวอย่างง่าย

สวัสดี วันนี้เรากำลังตรวจสอบแอนิเมชั่นอย่างง่ายใน After Effects

ทรัพยากร: Adobe Illustrator CC
Adobe อาฟเตอร์เอฟเฟกต์ CC

เริ่มจากการวาดด้วยโปรแกรม Illustrator

เราวาด
1) วาดสี่เหลี่ยมผืนผ้าสีเหลืองเป็นพื้นหลัง

รูปที่ 1 - สี่เหลี่ยมผืนผ้า

2) วาดวงกลมและเติมด้วยการไล่ระดับสี
มาทำงานกับวงกลมกันสักหน่อย:
- ลบจุดล่างบนรูปร่างเราจะได้ส่วนโค้ง
- วาดเส้นตรงปิดด้านล่างของส่วนโค้งเราจะได้ครึ่งวงกลม

รูปที่ 2 - 1) วาดวงกลม 2) การไล่ระดับสี; 3) ลบจุด

3) วาดรูปสี่เหลี่ยมผืนผ้าและทำสำเนา
- สี่เหลี่ยมสีเทาหนึ่งอัน
- สี่เหลี่ยมผืนผ้าสีเทาเข้มอีกอัน
4) วาดสามเหลี่ยมจากเครื่องหมายดอกจันโดยกำหนดจำนวนรังสี - 3

รูปที่ 3 - 1) ไฟตรง; 2) มืด; 3)สามเหลี่ยม

5) วาดแมวด้วยปากกาและรูปทรงง่ายๆ

รูปที่ 4 - 1) หัว; 2) คอ; 3) ร่างกาย; 4) ขา; 5) หาง

และมากที่สุดในขณะนี้ หลักช่วงเวลา
มากระจายรูปภาพเป็นเลเยอร์ (สิ่งที่จะเคลื่อนไหว - ในเลเยอร์แยกต่างหาก) ดังนี้:

รูปที่ 5 - รูปทั้งหมด (ชั้นสำคัญที่เป็นเครื่องหมายสีแดง)

ทุกอย่างตอนนี้เราบันทึก
มาดูการตั้งค่าการบันทึกกัน

รูปที่ 6 - บันทึก

และตอนนี้ขั้นตอนต่อไป ปิดAdobe Illustrator และเปิด After Effects

นำเข้าสู่ After Effect
ไฟล์ - นำเข้า - ไฟล์ - เลือกไฟล์ที่เราบันทึกไว้นักวาดภาพประกอบ.
ลองเลือกนำเข้าเลเยอร์จาก Illustrator ถ้าเราใส่ฟุตเทจเราจะได้ภาพที่รวมเลเยอร์ แต่ไม่ต้องการสิ่งนี้

รูปที่ 7 - นำเข้าเป็นองค์ประกอบ

นำเข้าทั้งหมด.
ทีนี้มาดูกันว่าเรามีอะไรบ้าง ดับเบิลคลิกที่องค์ประกอบ สิ่งที่จะเปิดขึ้นและเราจะเห็นเลเยอร์ต่างๆ (หากทำทุกอย่างถูกต้อง จะมีหลายเลเยอร์) เราได้สิ่งนี้ ดูรูปภาพ

รูปที่ 8 - เปิดองค์ประกอบ

และตอนนี้เรามาที่นี่เพื่ออะไร - แอนิเมชัน

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

รูปที่ 9 - เครื่องมือแพนและเลเยอร์

เพียงเท่านี้ เรามาต่อกันที่เลเยอร์สำหรับแอนิเมชั่นกัน
เราต้องการเลเยอร์ Arrow และ Head_cat
เริ่มต้นด้วยลูกศร
ขยายรายการ ค้นหาและคลิกที่นาฬิกา ดังนั้นเราจึงใส่จุดแรกไว้ที่ศูนย์วินาที โดยรวมแล้วแอนิเมชั่นจะใช้เวลา 2 วินาที
ดังนั้นนี่คือการตั้งค่าที่คุณต้องทำ (เราจะรวม 3 คะแนน)

ที่สอง	0	1	2
	+66	- 70	+66

ซึ่งจะมีลักษณะดังนี้:

รูปที่ 10 - ลูกศรหมุน

ตอนนี้เรามาทำให้หัวของแมวเคลื่อนไหวกันเถอะ
ขยาย head_cat และค้นหา ตำแหน่ง.
จะมี 4 จุด
มันจะเปลี่ยนเฉพาะพิกัดสุดท้ายโดยไม่แตะส่วนที่เหลือ

ที่สอง	0.1	0.17	1.12	2.0
ตำแหน่ง	689.3	729.3	729.3	689.3

ลองดูที่ภาพ

รูปที่ 11 - ตำแหน่งหัว

ดังนั้นหลักการของแอนิเมชั่นจึงเป็นเช่นนี้ ลูกธนูแกว่งจากด้านหนึ่งไปอีกด้านหนึ่ง ทันทีที่มันเข้าใกล้ลูกแมว มันจะดึงหัวของมันเข้ามาเอง อยู่ในตำแหน่งนี้ชั่วครู่หนึ่ง แล้วนำมันกลับเข้าที่เดิม

ขั้นตอนสุดท้าย

การผลิต
คุณต้องสร้างผลิตภัณฑ์สำเร็จรูปจากงานของคุณ
ไปที่เมนู - เพิ่มไปยัง Render Queue
แผง Render จะเปิดขึ้นและในโมดูลเอาต์พุต (คลิกสองครั้ง) เลือกรูปแบบเอาต์พุต ฉันเอา *.mov

รูปที่ 12 - เรนเดอร์

คลิกที่ปุ่ม RENDER และรับผลลัพธ์ (อย่าลืมระบุเส้นทาง)
นั่นคือทั้งหมด

วันนี้เรามีมาไม่บ่อยนัก บทเรียนอะโดบีนักวาดภาพประกอบ. เพราะคราวนี้เราจะไม่สร้างภาพนิ่ง แต่เป็นแอนิเมชั่นจริงๆ ลองนึกภาพดูสิ ความช่วยเหลือจาก Adobe Illustrator ก็วาดการ์ตูนได้นะ :)

และเราไม่ต้องการอะไรสำหรับสิ่งนี้ การจัดระเบียบเลเยอร์ที่มีความสามารถและการส่งออกผลงานขั้นสุดท้ายเป็นรูปแบบ SWF ซึ่งแต่ละเลเยอร์จะถูกแปลงเป็นเฟรมแอนิเมชั่น ในบทช่วยสอนวันนี้ เราจะวาดแอนิเมชั่นนับถอยหลังในรูปแบบภาพยนตร์ย้อนยุค ผลลัพธ์ควรเป็นภาพยนตร์แฟลชที่มีการนับถอยหลังเดียวกันนี้

สิ่งแรกที่ต้องทำคือวาดทุกอย่าง องค์ประกอบที่จำเป็นสำหรับอนิเมชั่นในอนาคต ในการทำเช่นนี้ ฉันสร้างตำแหน่งกรอบฟิล์มสองตำแหน่งในเอกสารแยกต่างหาก วงกลมสำหรับอ้างอิง ซึ่งตัดเป็นส่วนต่างๆ แยกกัน พื้นผิวและรอยขีดข่วนแนวตั้งเพื่อเพิ่มเอฟเฟกต์ของสมัยโบราณ ตลอดจนตัวเลขและคำจารึกทั้งหมด

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

ตอนนี้สร้างเลเยอร์ที่สองแล้วคัดลอกกรอบฟิล์มลงไปซึ่งมีการเลื่อนรูที่ขอบ ต้องเข้าศูนย์ด้วย

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

ในทำนองเดียวกัน เราต้องสะสม 12 ชั้นด้วยกรอบฟิล์มที่กำหนดการเคลื่อนไหว

ตอนนี้เรามีเลเยอร์มากมายและมองเห็นได้ทั้งหมด ในแง่ที่ว่าชั้นบนปิดกั้นชั้นล่างซึ่งไม่สะดวกในการทำงาน ดังนั้น คุณสามารถปิดบางเลเยอร์ได้โดยคลิกที่ไอคอนรูปตาทางด้านซ้ายของชื่อเลเยอร์ หากต้องการปิดหรือเปิดเลเยอร์ทั้งหมดพร้อมกัน ให้กดปุ่ม Alt ค้างไว้ในขณะที่คลิกที่ไอคอนรูปตา การเปิดและปิดเลเยอร์ คุณจะเห็นได้อย่างชัดเจนว่ามีอะไรอยู่ในเฟรมหนึ่งของแอนิเมชั่นในอนาคตของเรา และตอนนี้เพื่อให้เราเพิ่มการสั่นเล็กน้อยให้กับการเคลื่อนไหวของฟิล์ม เราจำเป็นต้องขยับเฟรมที่ได้รับไปในทิศทางต่างๆ กันเล็กน้อย ในการทำเช่นนี้ให้เปิดเฉพาะเลเยอร์ที่คุณจะใช้งาน ช่วงเวลานี้แล้วย้ายกรอบสองสามพิกเซลไปด้านใดด้านหนึ่ง

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

หากคุณลบส่วนที่เลือกออกจากวงกลม การเลือกนั้นจะดูเหมือนเป็นการเลือกทั้งหมด นี่คือสิ่งที่เราต้องการ

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

ในทำนองเดียวกัน คุณต้องคัดลอกวงกลมไปยังแต่ละเลเยอร์ถัดไป ในขณะที่วาดภาพด้วยสีที่อ่อนกว่าหนึ่งส่วนมากกว่าครั้งก่อน เมื่อรวมกันแล้ว 12 เลเยอร์เหล่านี้จะสร้างแอนิเมชันการเคลื่อนไหวของภาพยนตร์ด้วยการเติมวงกลม

ต่อไปเราต้องเพิ่มพื้นผิวให้กับเลเยอร์ของเรา เปิดเลเยอร์แรกและคัดลอกพื้นผิวจากที่นั่น ไฟล์ต้นฉบับพร้อมอะไหล่.

จากนั้นเปิดเลเยอร์ถัดไปและคัดลอกพื้นผิวเดียวกันที่นั่น เพื่อให้ดูแตกต่างในทุกเฟรม เพียงหมุน 90 องศา อย่างที่คุณเดาได้ เราจำเป็นต้องเพิ่มพื้นผิวให้กับทั้ง 12 เฟรม

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

ตอนนี้วงจรหลักพร้อมแอนิเมชั่นภาพยนตร์พร้อมแล้ว มันยังคงเพิ่มตัวเลข เนื่องจากเรากำลังนับ 3 ต่อ 1 บวกกับคำว่า Go!!! เราจึงต้องมีเลเยอร์มากกว่านี้ ไม่ใช่ 12 แต่มากถึง 48 ในการทำเช่นนี้คุณต้องทำสำเนาเลเยอร์สำเร็จรูปอีกสามชุดด้วยแอนิเมชั่นภาพยนตร์

แล้วทุกอย่างก็ง่าย เปิดชั้นแรกและใส่หมายเลขสามไว้ที่นั่น

จากนั้นคุณต้องคัดลอกรูปภาพนี้ไปยังเลเยอร์ถัดไปจนกว่าแอนิเมชั่นวงกลมจะสิ้นสุดลง เมื่อคุณไปที่สำเนาเลเยอร์ถัดไปซึ่งวงกลมจะเต็มอีกครั้งคุณต้องใส่หมายเลขสอง ในทำนองเดียวกัน ให้คัดลอกหมายเลขหนึ่งไปยังเลเยอร์ที่ต้องการ และเมื่อคุณไปถึงเลเยอร์สุดท้ายของป้ายกำกับ Go!!! เพียงแค่ลบวงกลมออกก่อนที่จะคัดลอกป้ายกำกับไปยังเลเยอร์ที่ต้องการ

นั่นคือทั้งหมดที่เกี่ยวกับแอนิเมชั่น สิ่งสำคัญที่นี่คืออย่าสับสน คุณสามารถตั้งชื่อที่สะดวกให้กับเลเยอร์ได้ แต่ฉันขี้เกียจเกินไป :) และเมื่อคุณทำเสร็จแล้ว อย่าลืมเปิดเลเยอร์ทั้งหมดอีกครั้งโดยคลิกที่ไอคอนรูปตา

ในหน้าต่างการตั้งค่าการส่งออก อย่าลืมตั้งค่าส่งออกเป็น: AI Layers เป็น SWF Frames ตัวเลือกนี้จะเปลี่ยนเลเยอร์ของ Illustrator เป็นเฟรมแอนิเมชั่น จากนั้นคลิกปุ่มขั้นสูง

จะเปิด การตั้งค่าเพิ่มเติม. ที่นี่คุณต้องตั้งค่าอัตราเฟรม ฉันมี 12 เฟรมต่อวินาที ช่องทำเครื่องหมายวนซ้ำมีหน้าที่หมุนเวียนภาพเคลื่อนไหว ขอบคุณเธอวิดีโอจะเล่นเป็นวงกลม และตัวเลือก Layer Order: Bottom Up จะแสดงเลเยอร์ของนักวาดภาพประกอบจากล่างขึ้นบนในแผงควบคุม นี่คือวิธีที่เราสร้างแอนิเมชันของเรา

เป็นผลให้เราได้ภาพยนตร์แฟลชพร้อมแอนิเมชั่นของเรา

ตอนนี้คุณเห็นแล้วว่าการสร้างแอนิเมชั่นอย่างง่ายใน Adobe Illustrator นั้นไม่ยากอย่างที่คิด

แต่สำหรับการสร้างวิดีโอขนาดยาวหรือแอปพลิเคชันเชิงโต้ตอบก็ยังดีกว่าที่จะใช้ อะโดบี แฟลชหรือตัวแก้ไขแฟลชอื่น ๆ ตัวอย่างเช่น ฉันสร้างแมวตัวนี้ด้วย Macromedia Flash รุ่นเก่าที่ฉันขุดขึ้นมาจากที่ทำงาน

เมื่อเร็ว ๆ นี้ HTML5 และ CSS3 ถูกนำมาใช้มากขึ้นในการสร้างภาพเคลื่อนไหว รหัสที่กำหนดได้รับการสนับสนุน เบราว์เซอร์สมัยใหม่และไม่ต้องใช้แฟลชเพลเยอร์

โรมัน aka dacascasโดยเฉพาะอย่างยิ่งสำหรับบล็อก

สมัครรับจดหมายข่าวของเรา เพื่อให้คุณไม่พลาดสิ่งใหม่ๆ: