API การวาด Flash CS3, ActionScript 3, Shape Class

• เมษายน 19, 2024

หนึ่งในสิ่งที่ฉันชอบทำใน Flash คือการวาดลงบนสเตจ แต่ฉันไม่ได้พูดถึงการวาดภาพด้วยเครื่องมือวาดภาพแบบแฟลชเช่นเครื่องมือสี่เหลี่ยมผืนผ้าหรือวงรี ในบทช่วยสอนนี้เราจะเรียนรู้พื้นฐานการวาดภาพด้วย ActionScript 3 และ Drawing API

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

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

คุณสมบัติกราฟิก
วิธี lineStyle
วิธีการเริ่มต้นเติม
วิธี drawCircle
endFill () วิธีการ

ขั้นตอนแรกของเราคือการสร้างเลเยอร์การกระทำบนเส้นเวลาคลิกที่เฟรม 1 และเปิดแผงการกระทำ (หน้าต่าง - การกระทำ) รหัสบรรทัดแรกของเราจะสร้างตัวแปรใหม่ที่จะเก็บวงกลม

var myCircle: รูปร่าง = รูปร่างใหม่ ();

ในโค้ดข้างต้นเรากำลังสร้างตัวแปรใหม่และตั้งชื่อมันว่า "myCircle" เรากำลังตั้งค่าชนิดข้อมูลสำหรับตัวแปรใหม่นี้เป็น รูปร่าง. ในอีกด้านหนึ่งเรากำลังใช้ ใหม่ คำหลักเพื่อสร้างอินสแตนซ์ใหม่ของคลาส Shape

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

myCircle.graphics.lineStyle (2, 0x000000);

ในรหัสข้างต้นเรากำลังตั้งค่า Stroke ด้วยวิธี lineStyle ของคุณสมบัติ Graphics เราจะตั้งค่าความกว้างของ Stroke เป็นพิกเซลและสีของ Stroke ด้วยค่าเลขฐานสิบหก ด้านบนเราได้ตั้งค่า Stroke สำหรับวงกลมของเราเป็นความกว้าง 2 พิกเซลและสีดำ

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

myCircle.graphics.beginFill (0xff0000);

ตกลงตอนนี้เราต้องบอก Flash ว่าจะวาดวงกลมบนเวที ตามที่คุณคาดหวังคุณจะต้องตั้งค่าสำหรับแกน X และ Y และรัศมีของวงกลม เราจะทำเช่นนี้ด้วยวิธี drawCircle ซึ่งเป็นส่วนหนึ่งของคุณสมบัติกราฟิก

myCircle.graphics.drawCircle (100, 200, 50);

ในโค้ดบรรทัดนี้เรากำลังบอกให้ Flash วาดวงกลมของเรา 100 พิกเซลจากมุมซ้ายบนของเวทีตามแนวแกน X และ 200 พิกเซลตามแกน Y วงกลมของเราจะมีรัศมี 50 เมื่อคุณตั้งค่าเหล่านี้ดูแลลำดับที่คุณแสดงไว้ในรหัส ค่าแรกของคุณจะเป็นสำหรับแกน X และค่าที่สองคือสำหรับแกน Y ที่สามคือสำหรับรัศมี หากคุณให้ Flash ค่าเหล่านี้ผิดปกติคุณจะได้รับผลลัพธ์ที่ไม่คาดคิด

ในที่สุดเราจำเป็นต้องเพิ่มวงกลมของเราเป็นวัตถุแสดงเด็กไปยังรายการที่แสดง

addChild (myCircle);

โอ้ฉันทิ้งโค้ดไว้หนึ่งบรรทัด! แม้ว่ารหัสของเราจะทำงานตามที่เป็นอยู่ แต่เราก็ยังเหลือวิธี endFill () ซึ่งจะ "ปิด" กระบวนการวาดภาพ ไม่จำเป็นจริงๆเพราะ endFill () ถูกเรียกโดยอัตโนมัติ แต่เป็นวิธีปฏิบัติที่ดีในการเพิ่มรหัสของคุณก่อน addChild ()

myCircle.graphics.endFill ();

นี่คือรหัสที่สมบูรณ์

ลิขสิทธิ์ 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 ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ