วิธีสร้างไฟล์ใหม่ (เอกสาร) ใน Flash CS6 การสร้างเกมแฟลช วิธีสร้างแอนิเมชั่นแฟลช

การสร้าง ndash ไซต์แฟลช เรื่องนี้ค่อนข้างซับซ้อน สิ่งนี้ต้องการความรู้ในหลาย ๆ ด้าน: การเขียนโปรแกรม, คอมพิวเตอร์กราฟิก, พื้นฐานของการเพิ่มประสิทธิภาพและการส่งเสริมไซต์ คุณจำเป็นต้องรู้จักแฟลชเป็นอย่างดี ในท้ายที่สุด ทั้งในระดับความรู้เกี่ยวกับสภาพแวดล้อมการพัฒนาและสคริปต์การดำเนินการของภาษาโปรแกรม 2.0 หรือสคริปต์การดำเนินการ 3.0 ซึ่งปัจจุบันมีลำดับความสำคัญสูงกว่า
แอปพลิเคชั่นแฟลชได้รับการพัฒนาใน Adobe Flash Professional ndash; เป็นโปรแกรมมัลติมีเดียที่ใช้สร้างเนื้อหา เช่น เว็บแอปพลิเคชัน ภาพยนตร์ เกม แอปพลิเคชันสำหรับมือถือ และอุปกรณ์ฝังตัวอื่นๆ
แฟลช ndash; ปรากฏการณ์ที่ไม่เหมือนใคร ก่อนหน้านี้ ผลิตภัณฑ์นี้ถูกเรียกว่า "Macromedia Flash" หลังจากที่ Adobe เข้าซื้อกิจการ โปรแกรมนี้กลายเป็นที่รู้จักในชื่อ "Adobe Flash" ตั้งแต่ปี 2548 แอนิเมชั่น Flash ใช้สำหรับสตรีมหน้าเว็บ บางครั้ง flush ndash; นี่เป็นส่วนหนึ่งของหน้า html และเกิดขึ้นที่หน้าทั้งหมดถูกสร้างขึ้นใน Flash หรือทั้งเว็บไซต์ถูกสร้างขึ้นด้วยหน้านั้น ไฟล์ Flash ที่ได้คือไฟล์ swf ("ShockWave Flash") พิเศษที่ต้องใช้ปลั๊กอินเบราว์เซอร์พิเศษฟรีเพื่อดูเนื้อหา สามารถดาวน์โหลดและติดตั้งจากเว็บไซต์ทางการของ Adobe ได้อย่างง่ายดายและรวดเร็ว ข้อดีของภาพยนตร์แฟลชคือการโหลดที่รวดเร็วมากและทำงานกับแอนิเมชั่นเวกเตอร์ที่มีการโต้ตอบ สามารถโหลดแฟลชได้ก่อนที่วิดีโอทั้งหมดจะแสดงบนหน้าจอ กล่าวคือ คุณสามารถใช้ตัวเลือกนี้เมื่อคุณเริ่มดูภาพเคลื่อนไหว และ "สตรีม" ที่เหลือบนหน้าจอจะโหลดในพื้นหลัง
กราฟิกแฟลชที่ใช้แล้วในเวกเตอร์บวกกับรหัสโปรแกรมทำให้สามารถสร้างแอปพลิเคชั่นที่มีคุณสมบัติครบถ้วนที่สามารถแทนที่แรสเตอร์ แฟรกเมนต์วิดีโอ รหัสโปรแกรม แต่ทำให้เหมาะสมที่สุด ใช้แบนด์วิดท์น้อยลงสำหรับสตรีม ใช้พลังงานโปรเซสเซอร์น้อยลง ถูกบริโภค นอกจากการเรนเดอร์เวกเตอร์แล้ว Flash Player (เครื่องเล่นที่จำเป็นสำหรับการดูภาพยนตร์ Flash) ยังมีเครื่องเสมือน (ActionScript Virtual (AVM)) เพื่อรองรับสคริปต์การโต้ตอบแบบรันไทม์ และยังรองรับวิดีโอ, mp3
ลองพิจารณาประเภทกราฟิกที่มีอยู่และเน้นข้อดีของกราฟิกแบบเวกเตอร์ซึ่ง Flash ใช้งานได้โดยตรง
กราฟิกทั้งหมดสามารถแบ่งออกเป็นสามประเภท: แรสเตอร์ เวกเตอร์ 3 มิติ ในกราฟิกแรสเตอร์ เช่นเดียวกับบนจอทีวี แต่ละภาพประกอบด้วยชุดองค์ประกอบ ndash ขนาดเล็ก พิกเซล ndash; เป็นตัวย่อขององค์ประกอบรูปภาพ
หลักการของดอทกราฟิกนั้นง่ายมาก เมื่อเด็ก ๆ ดึงเซลล์ที่โรงเรียน เฉพาะที่นี่เซลล์เหล่านี้มีขนาดเล็กกว่ามาก กราฟิกประเภทนี้เรียบง่ายทั้งในการใช้งานและการประมวลผลและการนำเสนอ สะดวกทางเทคนิคในการนำไปใช้ ทำให้อินพุตหรือแปลงข้อมูลภาพเป็นดิจิทัล
แต่กราฟิกแรสเตอร์มีข้อเสีย: มีขนาดใหญ่ ทำให้น้ำหนักไฟล์มีขนาดใหญ่ และเมื่อรูปภาพถูกลดขนาดหรือขยาย คุณภาพของรูปภาพจะหายไป
การเข้ารหัสข้อมูลกราฟิกในกราฟิกแบบเวกเตอร์นั้นแตกต่างกัน: รูปภาพทั้งหมดถูกระบุเป็นเส้นขอบ ndash; วัตถุทางคณิตศาสตร์ เส้นขอบเหล่านี้เป็นวัตถุอิสระที่สามารถเคลื่อนย้าย ปรับขนาด ปรับขนาด และจำนวนครั้งได้ เส้นถูกกำหนดโดยจุดเริ่มต้น สูตรที่ระบุเส้นเอง ด้วยเหตุนี้ เมื่อเปลี่ยนรูปแบบ สัดส่วนจะคงเดิมเสมอ กราฟิกแบบเวกเตอร์ยังเป็นกราฟิกเชิงวัตถุ เนื่องจากภาพวาดประกอบด้วยวัตถุแต่ละชิ้น - เส้นตรงและเส้นโค้ง วงรี สี่เหลี่ยม รูปร่างปิดและเปิด ฯลฯ ซึ่งมีลักษณะเฉพาะของความหนาของเค้าร่าง สี ลักษณะเส้น ฯลฯ ง.
กราฟิกแบบเวกเตอร์นั้นประหยัดในแง่ของทรัพยากร ข้อมูลเกี่ยวกับมันถูกจัดเก็บในรูปแบบของสูตร ไม่ใช่ข้อมูลสำหรับแต่ละจุด คำอธิบายสีไม่ได้เพิ่มขนาดไฟล์อย่างมีนัยสำคัญ กราฟิกแบบเวกเตอร์ปรับเปลี่ยนได้ง่ายโดยแทบไม่สูญเสียคุณภาพของภาพ มีกราฟิกบางส่วนที่การรักษาเส้นขอบที่ชัดเจนเป็นพื้นฐาน เช่น ในการสร้างโลโก้ ในแบบอักษร ฯลฯ
เวกเตอร์ใช้ประโยชน์จากความละเอียดของอุปกรณ์ส่งออกทั้งหมด เช่น เครื่องพิมพ์ ภาพดูมีคุณภาพสูง ชัดเจนเสมอ ทุกอย่างจะขึ้นอยู่กับตัวเครื่องพิมพ์เท่านั้น
นอกจากนี้ ข้อดีของกราฟิกแบบเวกเตอร์สามารถเรียกได้ว่าเป็นความจริงที่ว่ามันเปลี่ยนเป็นกราฟิกแรสเตอร์ได้อย่างง่ายดาย แต่ไม่ใช่ในทางกลับกัน! และสามารถรวมออบเจ็กต์กราฟิกแรสเตอร์ได้ แม้ว่าจะไม่สามารถประมวลผลด้วยวิธีเดียวกันได้
ข้อได้เปรียบที่สำคัญของกราฟิกแบบเวกเตอร์ถือเป็นวิธีการรวมข้อความและรูปภาพซึ่งเป็นแนวทางหนึ่งสำหรับพวกเขาตามลำดับคือความสามารถในการสร้างผลิตภัณฑ์ขั้นสุดท้าย โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์ที่ได้รับความนิยมมากที่สุด ได้แก่ CorelDRAW, Adobe Illustrator และ Adobe Flash แน่นอน
เวกเตอร์ถูกจำกัดเมื่อสร้างภาพที่เหมือนจริง: ndash ที่ชัดเจนและเป็นการ์ตูน ใช่ แต่นี่คือวิธีการสร้างต้นสนหรือเมฆ นอกจากนี้ยังมีปัญหาในการป้อนข้อมูลกราฟิก เช่น เครื่องสแกนส่งข้อมูลเกี่ยวกับภาพทีละพิกเซล: ตำแหน่งและสีของแต่ละจุดขึ้นอยู่กับปฏิกิริยาของลำแสง ไม่สามารถครอบคลุมวัตถุทีละวัตถุ และไม่สามารถทำให้รูปภาพทั้งหมดดังที่ฉันเขียนไว้ข้างต้นได้

Flash กลายเป็น ndash ที่ได้รับความนิยมในระดับสากล แบนเนอร์การ์ตูนปรากฏอยู่ในเกือบทุกหน้าเว็บ พวกมันเป็นแบบโต้ตอบ เล่นแอนิเมชั่น และใช้พื้นที่ดิสก์เพียงเล็กน้อย ซึ่งเป็นสิ่งสำคัญเมื่อทำงานบนเครือข่าย
แอนิเมชั่นถูกสร้างขึ้นโดยการแสดงเฟรมแฟลชแต่ละเฟรมเป็นระยะเวลาหนึ่ง เมื่อมีหลายเฟรม ภาพลวงของการเคลื่อนไหวจะถูกสร้างขึ้น เทคโนโลยีแฟลชก่อนหน้านี้ปรากฏเป็นภาพเคลื่อนไหว GIF แต่ความเป็นไปได้ของ Flash นั้นกว้างกว่ามาก ด้วยความช่วยเหลือของมัน คุณสามารถสร้างองค์ประกอบการนำทาง เสียงการ์ตูน โลโก้แอนิเมชั่น เครื่องคิดเลข เว็บไซต์ทั้งหมดที่มีชุดองค์ประกอบแบบโต้ตอบต่างๆ และสิ่งที่มหัศจรรย์ของแอนิเมชั่นสามารถสร้างขึ้นบนแฟลชได้: สิ่งเหล่านี้ดูน่าประทับใจมากและเทคโนโลยีอื่น ๆ สำหรับเว็บไม่สามารถทำได้ อวดความสามารถดังกล่าว
แอนิเมชั่นแฟลชเรียกว่าภาพยนตร์ ความเป็นไปได้ของแอนิเมชั่นไม่ได้จำกัดอยู่แค่แอนิเมชั่น วัตถุต่างๆ จะเป็นแอนิเมชั่น: เมนู รูปภาพ ลิงก์ ข้อความ
เมื่อโปรแกรมเริ่มทำงาน หน้าต่างจะเปิดขึ้นพร้อมกับพื้นที่ทำงานและแถบเครื่องมือ ตลอดจนหน้าต่างเพิ่มเติมที่สามารถเชื่อมต่อระหว่างการทำงานได้ แท็บสำหรับการทำงานกับไทม์ไลน์ การตั้งค่าการตรวจสอบข้อผิดพลาด ฯลฯ จะปรากฏขึ้นด้วย ในโปรแกรม ภาพยนตร์ถูกสร้างขึ้นโดยการวาดหรือนำเข้าภาพวาดสำเร็จรูป พวกมันจะถูกวางไว้ในพื้นที่พิเศษของหน้าต่างการทำงานของ ndash ฉาก (ฉาก) และเฟรมถูกสร้างขึ้นโดยใช้ไทม์ไลน์ (ไทม์ไลน์)
อาจมีฉากในภาพยนตร์ได้หลายฉาก เมื่อคุณเริ่มภาพยนตร์ ฉากเหล่านั้นจะเล่นตามลำดับที่สร้างขึ้น เว้นแต่ว่าลำดับนี้จะถูกเปลี่ยนโดยเจตนา สิ่งนี้ช่วยให้คุณเปลี่ยนแต่ละตอนได้อย่างสะดวกและรวดเร็ว เปลี่ยนลำดับของตอน
แอนิเมชั่นทำได้โดยการเปลี่ยนเฟรมตามหลัง โดยเปลี่ยนเนื้อหา กล่าวคือ วัตถุที่มีพารามิเตอร์ที่จำเป็นจะถูกเพิ่มลงในเฟรม วัตถุบนเวทีสามารถหมุนได้, ตำแหน่ง, สี, ความโปร่งใส, รูปร่าง, ขนาดสามารถกำหนดได้ เช่นเดียวกับวัตถุอื่นๆ
แอนิเมชั่นสามารถสร้างได้ด้วยวิธีต่อไปนี้:
เฟรมต่อเฟรมแอนิเมชั่น ndash; การวาดในแต่ละเฟรมทำด้วยมือและเฟรมเรียงกันเป็นแถว
คำนวณ (Tweened Animation) ndash; เฉพาะเฟรมเริ่มต้นและเฟรมสุดท้ายเท่านั้นที่สร้างขึ้น (เรียกว่าคีย์เฟรม) และระหว่างนั้นโปรแกรมสร้างเฟรมเอง แอนิเมชั่นสองประเภท: การเคลื่อนไหว (Motion Tweening เมื่อพารามิเตอร์การเคลื่อนไหวเปลี่ยนแปลง เลี้ยว ขนาด ตำแหน่ง) รูปร่าง (Shape Tweening);
ndash โดยทางโปรแกรม; เมื่อพารามิเตอร์สำหรับการเปลี่ยนวัตถุถูกตั้งค่าโดยใช้คำสั่งของภาษาโปรแกรม Action Script
ในกระบวนการสร้างภาพยนตร์ ข้อมูลต้นฉบับจะถูกบันทึกไว้ในไฟล์พิเศษที่มีนามสกุล .fla ซึ่งรวมถึงฉากที่มีวัตถุทั้งหมด เช่นเดียวกับพารามิเตอร์เพิ่มเติมเกี่ยวกับวัตถุที่ไม่รวมอยู่ในภาพยนตร์ แต่ถูกสร้างขึ้นในนั้น เช่นเดียวกับตัวเลือกเสียง ความคิดเห็น รหัสสคริปต์ การตั้งค่าโปรแกรม ฯลฯ หลังจากสร้างแหล่งที่มาดังกล่าว คุณต้องแปลเป็นรูปแบบที่เหมาะสมกับอินเทอร์เน็ต ndash คือ SWF ดังนั้นเราจึงเผยแพร่ภาพยนตร์หรือรวบรวมโค้ด การดำเนินการนี้จะลบข้อมูลออกจากไฟล์ที่ไม่ต้องการสำหรับการเล่นในรูปแบบภาพยนตร์ที่ต้องการ ดังนั้นขนาดไฟล์จึงเล็กลงและโหลดโดยผู้ใช้อย่างรวดเร็ว ไฟล์ดังกล่าวสามารถเปิดแยกกันได้โดย ndash; โปรแกรมเล่นจะเล่น แต่คุณสามารถเชื่อมต่อกับหน้า html ใดก็ได้เป็นวัตถุ

ภาพยนตร์เรื่องนี้สร้างจากองค์ประกอบ ndash สำเร็จรูป มาตรฐาน (Symbols) หรือสัญลักษณ์ ข้อมูลอ้างอิงคือรูปภาพ ปุ่ม แอนิเมชั่น คลิปภาพยนตร์ที่ใช้ซ้ำๆ ในวิดีโอ สามารถสร้างหรือนำเข้าได้ เมื่อสร้างแล้ว สัญลักษณ์จะถูกเก็บไว้ในที่เก็บ ndash พิเศษ ห้องสมุด. ในกระบวนการประกอบภาพยนตร์ ในสถานที่ที่จำเป็น ก็มีตัวอย่าง (Instance) ของมาตรฐาน (ซึ่งจัดเก็บไว้ในห้องสมุด) ที่แทรกเข้ามาและไม่ครบถ้วนในแต่ละครั้ง และคุณสามารถแทรกได้หลายครั้งและทุกที่ ในกรณีนี้ คุณสามารถเปลี่ยนพารามิเตอร์ของอินสแตนซ์ได้ตามต้องการ: ตำแหน่ง ขนาด มาตราส่วน การหมุน การโค้งงอ ความโปร่งใส โทนเสียง ฯลฯ ในขณะที่สัญลักษณ์อ้างอิงจะไม่เปลี่ยนแปลง นี่เป็น ndash ที่สะดวกมาก คุณไม่จำเป็นต้องสร้างองค์ประกอบใหม่ทุกครั้งหรือคัดลอก องค์ประกอบนั้นเป็นองค์ประกอบเดียว และการปรับเปลี่ยนจะมากเท่าที่คุณต้องการ และในระหว่างขั้นตอนการเผยแพร่ ไฟล์ของวิดีโอขั้นสุดท้ายซึ่งสร้างขึ้นในรูปแบบ swf จะถูกประกอบเข้าด้วยกันในลักษณะที่ในที่เดียวจะมีวัตถุอ้างอิงโดยตรง และในส่วนที่เหลือทั้งหมด เพียงแค่ชี้ไปที่มัน ลองนึกภาพว่าน้ำหนักของวิดีโอลดลงด้วยวิธีนี้เพียงใดเมื่อเทียบกับการคัดลอกองค์ประกอบที่เกือบจะเหมือนกัน
มาตรฐานคือ:
วัว; คลิปหนัง (moviklip) ndash; รวมถึงเสียง กราฟิก แอนิเมชั่น สามารถเขียนสคริปต์แบบเป็นโปรแกรมได้
วัว; กราฟฟิค (กราฟฟิค) ndash; ภาพวาดคงที่ แอนิเมชั่น เสียง แต่ไม่ได้ควบคุมโดยทางโปรแกรม
วัว; ปุ่ม (ปุ่ม) - รวมรูปภาพ เสียง; เมื่อเทียบกับการอ้างอิงสัญลักษณ์ประเภทอื่น จะมีเพียงสี่เฟรม ซึ่งแสดงการเปลี่ยนแปลงในสถานะของปุ่มเมื่อมีเหตุการณ์ต่างๆ ของเมาส์เกิดขึ้น
ก่อนสร้างสัญลักษณ์อ้างอิงโดยตรง คุณต้องตั้งค่าประเภทของสัญลักษณ์ก่อนจึงจะสามารถเปลี่ยนแปลงได้ในภายหลัง
นอกเหนือจากสัญลักษณ์อ้างอิงและอินสแตนซ์ ภาพยนตร์สามารถมีรูปภาพจากไฟล์ภายนอก แบบอักษรได้
วิดีโอทั้งหมดใน Adobe Flash ndash; นี่คือลำดับของเฟรม (Frames) ซึ่งจะแสดงตามลำดับความเร็วที่กำหนด พวกเขาทำงานโดยใช้ไทม์ไลน์ ทางด้านซ้ายของสเกลคือเลเยอร์ที่ต้องตั้งชื่อบน ndash ขวา ชุดของเฟรมว่างที่เติมเป็นวัตถุที่ถูกสร้างขึ้นและวางบนพื้นที่งาน ทันทีที่เฟรมเต็มไปด้วยวัตถุ มันจะเปลี่ยนสีเป็นสีเทา คีย์เฟรมจะระบุด้วยจุดสีดำ บนไทม์ไลน์ เฟรมปัจจุบันจะถูกทำเครื่องหมายด้วยเครื่องหมายขีดแดง หัวเล่นที่เส้นสีแดงบาง ๆ ตัดในแนวตั้งซึ่งข้ามทุกชั้นและ laquo เห็น traquo; เฟรมปัจจุบันในแต่ละเฟรม เป็นเฟรมเหล่านี้ซึ่งก็คือเนื้อหาในรูปแบบของคลิปภาพยนตร์ที่แสดงบนหน้าจอ

ในการปรับใช้การโต้ตอบและความสามารถในการสร้างไซต์ที่สมบูรณ์ Adobe Flash ใช้ภาษาการเขียนโปรแกรม Action Script
ในการสร้างภาพยนตร์แบบโต้ตอบ Flash ใช้โปรแกรมสคริปต์ (สคริปต์-สคริปต์) ซึ่งประกอบด้วยชุดคำสั่ง (การกระทำ) ใน ActionScript และจะดำเนินการเมื่อมีเหตุการณ์บางอย่างเกิดขึ้น: ผู้ใช้กดปุ่ม ไปถึงเฟรมของภาพยนตร์ ปฏิกิริยาต่อการเคลื่อนไหวของเมาส์ วงล้อ การวางตำแหน่งตัวชี้ไว้เหนือพื้นที่เฉพาะ และอื่นๆ อีกมากมาย คำสั่งสคริปต์กำหนดว่า Flash จะตอบสนองอย่างไรเมื่อมีเหตุการณ์เกิดขึ้น

คำสั่งสคริปต์ที่สร้างขึ้นเมื่อมีการใช้เหตุการณ์จะถูกระบุสำหรับคลิป เฟรม ปุ่ม และสิ่งนี้จะทำบนแท็บพิเศษที่ด้านล่างของหน้าจอการดำเนินการ (คำสั่ง) (เฟรมการดำเนินการ คลิปภาพยนตร์การดำเนินการ) ปุ่มการดำเนินการ
เหตุการณ์ที่เป็นไปได้:
กดปุ่ม ndash; เมื่อผู้ใช้กดแป้นคีย์บอร์ด พารามิเตอร์ของฟังก์ชันจะเป็นชื่อของคีย์
โฮเวอร์ (โรลโอเวอร์) ndash; เมื่อตัวชี้เมาส์อยู่เหนือวัตถุแต่ไม่ได้กดเมาส์
ปล่อย ndash; ถ้าปล่อยปุ่มเมาส์เมื่อตัวชี้อยู่เหนือปุ่มที่ตั้งโปรแกรมไว้ นั่นคือ ถ้าผู้ใช้คลิกที่หุ่นยนต์ laquo;mouseraquo;;
กด ndash; หากกดปุ่มเมาส์ (ซ้าย) ในขณะที่ตัวชี้อยู่เหนือปุ่มที่ตั้งโปรแกรมไว้ ในกรณีนี้ พื้นที่การสั่งงานจะถูกนำมาพิจารณา ไม่ใช่ภาพที่มองเห็นได้ ซึ่งกำหนดไว้ในเฟรม Hit
ลบ (ม้วนออก) ndash; มีตัวชี้เมาส์อยู่เหนือปุ่ม ไม่ได้กด และเมาส์ถูกนำออกจากปุ่มที่ตั้งโปรแกรมได้
Shift (ลากออก) - วางปุ่มเมาส์ไว้เหนือวัตถุ กดและนำออก
ปล่อยนอก ndash; หากมีการกดปุ่มเมาส์บนวัตถุ และจากนั้น ผู้ใช้ภายนอกวัตถุจะปล่อยปุ่มนั้น
ลากเหนือ ndash; ตัวชี้ถูกตั้งค่าไว้บนวัตถุ ปุ่มซ้ายของเมาส์ถูกกดและไม่ปล่อย แต่ตัวชี้ถูกนำไปที่ด้านหลังวัตถุ จากนั้นจึงส่งคืนอีกครั้ง

ภาษา ActionScript 3.0 เมื่อเปรียบเทียบกับ ActionScript 2.0 จะมีความทันสมัยมากกว่าโดยอิงจากพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ โดยที่แนวคิดหลักคือคลาส ออบเจ็กต์ คุณลักษณะหรือคุณสมบัติของคลาส รวมถึงเมธอดที่มีอยู่ในวัตถุนี้
ActionScript ทำงานโดยใช้เครื่องเสมือน (Virtual Machine ActionScript) ซึ่งเป็นส่วนหนึ่งของ Flash Player
พื้นฐานของโค้ดโปรแกรมใดๆ คือตัวแปร ซึ่งใน ActionScript มีการตั้งค่าดังนี้: var ndash; คำสั่ง Flash พิเศษ ซึ่งหมายความว่าในส่วนนี้จะมีการกำหนดตัวแปรและกำหนดประเภทของตัวแปร ชื่อ ndash; ชื่อตัวแปร ระบุในรูปแบบข้อความ-ตัวเลข แต่ไม่ได้ขึ้นต้นด้วยตัวเลข พิมพ์ ndash; การระบุประเภทตัวแปร (ตัวเลข - ตัวเลข, ndash ตรรกะ, บูลีน, ข้อความ - สตริง ฯลฯ) นั่นคือ คุณจะระบุ: Var x: String;
อย่าลืมใส่โคลอนหลังชื่อตัวแปรและอัฒภาคที่ท้ายบรรทัด ในระหว่างการเรียกใช้โค้ด ค่าและประเภทของตัวแปรสามารถเปลี่ยนแปลงได้
ตัวแปรที่เก็บข้อมูลจำนวนมากเรียกว่าอาร์เรย์ ใน AC 3.0 มันถูกระบุด้วยประเภท Array: Var Mas: Array
องค์ประกอบอาร์เรย์ทั้งหมดมีตัวเลขตั้งแต่ 0 ดังนั้นในการเข้าถึง ตัวอย่างเช่น องค์ประกอบแรก คุณต้องระบุ Mas นั่นคือในวงเล็บเหลี่ยม คุณระบุตำแหน่งขององค์ประกอบที่ต้องการในอาร์เรย์
โค้ดเองจะประกอบด้วยฟังก์ชันที่อธิบายลำดับของคำสั่งที่เกิดขึ้นในเหตุการณ์ ndash เฉพาะ คลิกเมาส์ กดปุ่ม เข้าถึงค่าบางอย่าง ฯลฯ
ฟังก์ชันถูกระบุโดยใช้ฟังก์ชันคำสงวน จากนั้นคุณระบุชื่อ - ชื่อ - ชื่อข้อความ-ตัวเลขใดๆ แต่ไม่ได้ขึ้นต้นด้วยตัวเลข จากนั้นในวงเล็บ () คุณสามารถระบุพารามิเตอร์ของฟังก์ชัน ndash ได้ สิ่งที่ป้อนเข้าเป็นอินพุตอาจหายไปจากนั้นมีเครื่องหมายทวิภาคและประเภทข้อมูลที่ฟังก์ชันส่งคืนหรือเป็นโมฆะ ndash เมื่อฟังก์ชันไม่ส่งคืนอะไรเลย หลังจากนั้น ให้ใส่โค้ดฟังก์ชันทั้งหมดในวงเล็บปีกกา ( ) และคุณเข้าถึงฟังก์ชันโดยระบุชื่อและพารามิเตอร์หากจำเป็น: ​​name () "เงื่อนไขใน AC 3.0 ถูกกำหนดผ่านตัวดำเนินการ if: if(x==y) นั่นคือ คุณต้องระบุเงื่อนไขการเปรียบเทียบในวงเล็บกลม ลูปถูกกำหนดผ่าน for() โดยที่พารามิเตอร์ถูกตั้งค่าในวงเล็บ: ตัวแปรตัวนับ ขั้นตอนของการเปลี่ยนแปลง
แต่ละอ็อบเจ็กต์มีลักษณะเฉพาะด้วยพารามิเตอร์หรือคุณสมบัติของมัน คุณสามารถแนบฟังเหตุการณ์กับอ็อบเจ็กต์ในแฟลชได้โดยใช้ฟังก์ชัน addEventListener ผู้ฟังนี้จะจัดการกับเหตุการณ์ที่เกิดขึ้นกับวัตถุ และหากปฏิกิริยาต่อสิ่งเหล่านั้นถูกอธิบายไว้ในฟังก์ชันโดยโปรแกรมเมอร์ โปรแกรมจะตอบสนองตามนั้น

นี่เป็นเพียงส่วนเล็ก ๆ ของสิ่งที่คุณต้องรู้เมื่อเริ่มสร้างไซต์แฟลช คุณไม่จำเป็นต้องสร้างไซต์ตั้งแต่เริ่มต้น มีเทมเพลตพิเศษที่คุณสามารถซื้อและแก้ไขเพื่อให้เหมาะกับความต้องการของคุณ (เช่น ไซต์ templatemonsters) การออกแบบได้รับการพัฒนาอย่างสมบูรณ์ที่นั่น คุณต้องเปลี่ยนเนื้อหาและในการใช้งานซอฟต์แวร์ทุกอย่างที่จำเป็นสามารถตั้งโปรแกรมใหม่ได้ จากนั้นคุณต้องซื้อโดเมนและโฮสติ้ง วางไฟล์ html ที่เชื่อมต่อ swf
อ่านหนังสือ (เช่น หนังสือ laquo; บทช่วยสอน M.Flash MXraquo 100%; ช่วยฉันในการทำงานและบทความ) เรียนรู้จากเพื่อนร่วมงานในฟอรัม (demiart, flasher.ru) และสิ่งที่ควรเป็นผู้ช่วยคนแรกของคุณคือ ความช่วยเหลือบนเว็บไซต์ Adobe อย่างเป็นทางการ ActionScript ภาษา Opsian มีรายละเอียดและรายละเอียดมาก มีการแสดงตัวอย่างและเนื้อหาที่นำเสนอเป็นภาษารัสเซียเช่นกัน
หลังจากสร้างวิดีโอแล้ว คุณต้องเผยแพร่ คุณสามารถตั้งค่าตัวเลือกการเผยแพร่ของโปรแกรมได้ในรายการเมนูไฟล์ ตัวเลือกการเผยแพร่ ซึ่งจะระบุรูปแบบที่จะอัปโหลดวิดีโอ การตั้งค่าคุณภาพของกราฟิกและเสียงคืออะไร และอื่นๆ อีกมากมาย เมื่อคุณมีไฟล์ swf แล้ว คุณสามารถใช้มันเป็นแอปพลิเคชันที่เสร็จสิ้นสมบูรณ์ได้ ในการเปลี่ยนแปลง อัปเดตวิดีโอที่สร้างขึ้น คุณต้องแก้ไขแหล่ง ndash fla แล้วเผยแพร่อีกครั้ง

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

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

วิธีสร้างเกมแฟลช: การเตรียมการเบื้องต้น

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

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

วิธีสร้างเกมแฟลช: ทำงานในนักออกแบบเกม

เปิดเทมเพลตและลากวัตถุที่ต้องการจากส่วน Animated Objects และ Static Objects เข้าไป สร้างพื้นหลังโดยเลือกพื้นผิวและสี สำหรับวัตถุ เลือกสีโดยใช้จานสี ใช้โปรแกรมเล่นแอนิเมชั่นเพื่อตรวจสอบว่าฟีเจอร์อื่นใดที่ไม่ได้เปิดใช้งาน ในการตั้งค่า กำหนดระดับการเคลื่อนไหวของตัวละครในเกม (ในเกมอาร์เคด) หรือวัตถุ (ในของเล่นตรรกะ)

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

วิธีสร้างเกมแฟลช: นำเกม "นึกถึง"

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

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

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

จะสร้างเกมแฟลชได้อย่างไรถ้าคุณมีความปรารถนา แต่ไม่มีความรู้?

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

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

บางครั้ง อาจจะเป็นเมื่อสองสามปีที่แล้ว โปรแกรม Game Maker ปรากฏบนเว็บไซต์ของเรา ซึ่งอนุญาตให้คุณสร้างเกมโดยแทบไม่มีความรู้เกี่ยวกับภาษาการเขียนโปรแกรมเลย!

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

คุณสมบัติของโปรแกรม

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

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

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

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

เริ่มส่วนต่อประสานหน้าต่าง

ภายนอก พื้นที่ทำงานของหน้าต่างเริ่ม Stencyl แบ่งออกเป็นหลายโซน:

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

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

1. เปิดโฟลเดอร์ที่ Stencyl เก็บทรัพยากรทั้งหมดของเกมที่สร้างขึ้นและตัวเกมเอง (ปุ่ม "ดูโฟลเดอร์เกม" ที่มุมล่างซ้าย)
2. เปิดหลักสูตรฝึกอบรมการทำงานกับโปรแกรม (“Start Crash Course” บนแผงสีเขียวที่มุมล่างขวา) นอกจากนี้ ยังมีปุ่มข้างๆ เพื่อซ่อนข้อเสนอเข้ารับการฝึกอบรม (“อย่าแสดงอีก”)
3. เปิดเกมที่เลือกอยู่จากรายการซึ่งคล้ายกับการดับเบิลคลิกที่ไอคอนเกม (“เปิดเกม” ที่มุมล่างขวา)

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

วิธีเริ่มสร้างเกมใน Stencyl

ก่อนที่จะสร้างเกมของคุณ ดูตัวอย่างมาตรฐานของเกมบน Stencyl คุณอาจสังเกตเห็นว่าโดยพื้นฐานแล้วเกมทั้งหมดค่อนข้างเรียบง่าย หน้าจอเดียวและมีมุมมองด้านข้าง เราจะสร้างเกมยิงจากบนลงล่างแบบไดนามิกด้วยการยิงเมาส์! ทุกอย่างเหมือนในเกม "ใหญ่" :)

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

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

ในขั้นตอนต่อไป เราต้องทำการตั้งค่าพื้นฐานบางอย่าง:

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

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

ประกอบด้วยสี่สาขา โดยสองสาขาแรกประกอบด้วยชุดทรัพยากรมาตรฐาน (RESOURCES) และตรรกะ (LOGIC) และสองสาขาสุดท้ายสามารถเลือกเก็บชุดทรัพยากรที่โหลดด้วยตนเอง (RESOURCE PACKS) และส่วนขยาย (ส่วนขยาย)

สาขาหลักที่นี่คือสาขาทรัพยากร ประกอบด้วยส่วนต่อไปนี้:

1. ประเภทนักแสดง - สไปรต์ของตัวละครในเกมทั้งหมดจะถูกเก็บไว้ที่นี่ และกำหนดค่าการทำงานของแอนิเมชั่นและการโต้ตอบซึ่งกันและกัน
2. พื้นหลัง - ในส่วนนี้ เราสามารถจัดเก็บพื้นหลังที่จำเป็นทั้งหมดสำหรับเกมได้ นอกจากนี้ พื้นหลังสามารถเป็นได้ทั้งสำหรับพื้นหลัง (พื้นหลัง) และสำหรับพื้นหน้า (เบื้องหน้า) ซึ่งช่วยให้คุณวางพื้นหลังทับซ้อนกันได้ ตัวอย่างเช่น เอฟเฟกต์พารัลแลกซ์
3. แบบอักษร - ส่วนที่เราสามารถอัปโหลดแบบอักษรที่สวยงามต่างๆ เพื่อสร้างคำจารึกดั้งเดิม อย่างไรก็ตาม การพิจารณาว่า Stencyl สามารถใช้ได้กับชุดอักขระภาษาอังกฤษเท่านั้น ดังนั้นในการเพิ่มตัวอักษรรัสเซียลงในไฟล์ฟอนต์ เราจำเป็นต้องแทนที่อักขระละตินบางตัวด้วย
4. Scenes คือที่สำหรับสร้างและแก้ไขระดับเกม ที่นี่เราสามารถกำหนดรูปลักษณ์ของเวทีใดๆ และวางตัวละคร โบนัส และองค์ประกอบอื่นๆ ของเกมได้ทั้งหมด
5. เสียง - ที่เก็บเสียงทั้งหมดที่ใช้ในเกมตามลำดับ
6. Tilesets - สาขาพิเศษที่เก็บกระเบื้อง - สไปรท์พิเศษที่เราสามารถใช้เพื่อสร้างระดับเกม

การสร้างและกำหนดค่าไทล์

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

สร้างฉากแรก - สร้างตัวละคร - สร้างศัตรู - สร้างพลัง - สร้างด่านที่เหลือ

ในการสร้างฉากใน Stencyl คุณต้องวาดลักษณะที่ปรากฏในสาขา Scenes อย่างไรก็ตาม ในการวาด ก่อนอื่นเราต้องมีบล็อคที่เราสามารถ "วาด" ได้ บล็อคเหล่านี้ในโปรแกรมเรียกว่าไทล์ (ไทล์) และถูกเก็บไว้ในส่วนไทล์เซ็ต:

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

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

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

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

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

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

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

การแสดงฉากใน Stencyl

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

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

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

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

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

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

การสร้างตัวละคร

หลังจากที่เราสร้างฉากแรกของเราแล้ว ก็ถึงเวลาเติมมันด้วยตัวละครที่สามารถเล่นได้หลากหลาย ใน Stencyl เรียกว่า "นักแสดง" และจัดเก็บตามลำดับในส่วน "ประเภทนักแสดง" นักแสดงถูกสร้างขึ้นตามหลักการเดียวกัน ดังนั้นเราจะพิจารณากระบวนการนี้โดยใช้ตัวอย่างการสร้างตัวละครหลักของเกมของเรา - Frida

หากต้องการเพิ่มนักแสดงใหม่ ให้ไปที่ส่วนประเภทนักแสดงดังกล่าวแล้วคลิกปุ่ม "สร้างใหม่" ที่นั่น เรามักจะถูกถามอีกครั้งเกี่ยวกับวิธีที่เราต้องการตั้งชื่อวัตถุเกมใหม่ หลังจากนั้นหน้าต่างแก้ไขแอนิเมชั่นตัวละครจะปรากฏขึ้นต่อหน้าเรา:

ทางด้านซ้ายแสดงรายการแอนิเมชั่นที่เพิ่มเข้ามาของนักแสดง (ค่าเริ่มต้นคือเฟรมว่าง "Animation 0") และทางด้านขวามีเครื่องมือสำหรับเพิ่มและกำหนดค่าแอนิเมชั่นเหล่านี้

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

เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้ว ให้คลิกปุ่ม "เพิ่ม" ที่ส่วนล่างขวาของหน้าต่างเพิ่ม - ภาพเคลื่อนไหวควรแสดงเป็นตัวอย่างในส่วนด้านซ้าย:

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

ที่แถบเครื่องมือด้านล่างในส่วนด้านขวา เราจะพบชุดปุ่มต่างๆ พวกเขาอนุญาตให้:

• เพิ่มเฟรมใหม่ให้กับแอนิเมชั่น (นำเข้าเฟรม);
• แก้ไขเฟรมที่เลือกในตัวแก้ไขภายนอก (แก้ไขเฟรม (ภายนอก));
• สร้างเฟรมในตัวแก้ไขภายนอก (สร้างเฟรม (ภายนอก));
• แก้ไขเฟรมในตัวแก้ไขในตัว (แก้ไขเฟรม);
• ลบเฟรม (ลบเฟรม);
• กรอบคัดลอก (คัดลอกกรอบ);
• ใส่กรอบ (วางกรอบ);
• ย้ายหนึ่งเฟรมไปข้างหลัง (Move Back) หรือไปข้างหน้า (Move Forward)

การตั้งค่าพารามิเตอร์และพฤติกรรมของตัวละคร

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

ก่อนอื่นมาตั้งค่าการชนกันก่อน ในการดำเนินการนี้ ให้ดูที่บรรทัดใต้รายการแท็บที่เปิดอยู่ และค้นหาปุ่ม "การชนกัน" ที่นั่น

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

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

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

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

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

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

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

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

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

ในการปะทะกันบางทีนั่นคือทั้งหมดและตอนนี้ฉันเสนอให้จัดการกับพื้นฐานที่สุด - การตั้งค่าพฤติกรรมของนักแสดงบนเวที ในการดำเนินการนี้ เราต้องไปที่ส่วน "พฤติกรรม":

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

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

การเพิ่มนักแสดงบนเวทีและการทดสอบระดับ

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

เรากลับไปที่ตัวแก้ไขของฉากที่สร้างขึ้นก่อนหน้านี้และเปิดใช้งานจานสี (จานสี) อีกครั้ง แต่ตอนนี้แทนที่จะเปิดแท็บ "นักแสดง" (นักแสดง) เราจะเห็นรายชื่อตัวละครที่สร้างไว้ก่อนหน้านี้ที่เราสามารถเพิ่มลงในฉากโดยใช้เครื่องมือดินสอ:

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

นอกจากตัวผู้เล่นเองที่มีเกมอยู่ด้านข้างแล้ว เรายังมีหน้าต่างที่แสดงบันทึกของเกมอีกด้วย ด้วยความช่วยเหลือของพวกเขา เราสามารถค้นหาปัญหาในงานและพยายามแก้ไขได้อย่างรวดเร็ว

อย่างที่คุณเห็น เราสามารถย้าย Frida ไปในทิศทางต่างๆ ได้แล้ว แต่ตัวเวทีเองยังคงนิ่งอยู่และทันทีที่นางเอกของเราไปไกลกว่าส่วนที่มองเห็นได้ของเวที เธอก็หายตัวไป ... ความผิดปกติ :) คุณสามารถแก้ปัญหาได้โดยเพิ่มพฤติกรรม "การติดตามกล้อง" ให้กับ Frida หรือโดยการตั้งค่าพารามิเตอร์ที่ต้องการโดยใช้เหตุการณ์

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

ระบบเหตุการณ์ใน Stencyl

เกมง่ายๆ ใน Stencyl สามารถสร้างได้โดยใช้พฤติกรรมมาตรฐานเท่านั้น (พฤติกรรม) อย่างไรก็ตาม หากเราต้องการบางสิ่งที่ไม่ได้มาตรฐาน เราต้องคิดเกี่ยวกับการใช้เหตุการณ์ที่กำหนดค่าไว้สำหรับนักแสดงและฉากในส่วน "กิจกรรม":

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

หน้าต่างเหตุการณ์แบ่งออกเป็นสามส่วน:

1. ส่วนด้านซ้ายประกอบด้วยรายการเหตุการณ์และปุ่มสำหรับจัดการ (สร้าง/ลบ/ย้าย) ในการเพิ่มกิจกรรม เราต้องคลิกปุ่ม "เพิ่มกิจกรรม" จากนั้นเลือกกลุ่มที่ต้องการในรายการดรอปดาวน์และระบุฟังก์ชันเฉพาะที่เราต้องการ ทางด้านขวาของกิจกรรมที่สร้างขึ้นจะมีช่องทำเครื่องหมายที่ช่วยให้เราสามารถปิดใช้งานได้หากจำเป็น
2. ในส่วนด้านขวา เรามีรายการการดำเนินการทั้งหมดที่มี ซึ่งจัดกลุ่มเป็น 10 ส่วน ซึ่งแต่ละส่วนจะเปิดใช้งานโดยปุ่มที่เกี่ยวข้อง เพื่อความสะดวกยิ่งขึ้น การดำเนินการในแต่ละส่วนจะถูกจัดเรียงเป็นแท็บเฉพาะเรื่องและมีสีเฉพาะของตัวเอง ที่ด้านล่างมีอีกสามแท็บ ตามค่าเริ่มต้น แท็บ "จานสี" (จานสี) เปิดใช้งานอยู่ ซึ่งมีรายการการดำเนินการอยู่ แท็บที่สอง - "แอตทริบิวต์" - ใช้สำหรับแสดงตัวแปรท้องถิ่น (ดูเพิ่มเติมด้านล่าง) และแท็บที่สาม - "รายการโปรด" - ใช้สำหรับแสดงการกระทำที่คุณชื่นชอบ
3. ส่วนกลางคือพื้นที่ทำงาน นี่คือที่ที่เราสร้างตัวอย่างสุดท้ายของพฤติกรรมของตัวละครโดยใช้การผสมผสานระหว่างบล็อกการกระทำและเหตุการณ์ต่างๆ ตามการกระทำเหล่านี้ การรวมเกิดขึ้นโดยเพียงแค่ลากบล็อคไปยังพื้นที่ทำงาน แล้วแก้ไขพารามิเตอร์ที่ระบุในบล็อกเหล่านั้น โปรดทราบว่าฟังก์ชันนี้ประกอบด้วยบล็อกที่รวมเข้าด้วยกันและรวมอยู่ในบล็อกเหตุการณ์หลักเท่านั้น ดังนั้น เพื่อลบชุดค่าผสมที่ไม่จำเป็นในปัจจุบัน (แต่มีประโยชน์) ออกชั่วคราว เราเพียงแค่ต้องย้ายชุดค่าผสมเหล่านี้จากโครงสร้างทั่วไปไปยังพื้นที่ว่าง หากการดำเนินการกลายเป็นสิ่งที่ไม่จำเป็นโดยสิ้นเชิงเมื่อเวลาผ่านไป ก็สามารถลบได้โดยย้ายไปยังถังขยะ ซึ่งอยู่ที่ส่วนบนขวาของพื้นที่ทำงาน

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

การตั้งค่าฟิสิกส์และคุณสมบัติ

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

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

1. แท็บทั่วไป เรามีพารามิเตอร์สามประการ: ประเภทของนักแสดง (หยุดนิ่ง แท่น (สามารถเคลื่อนที่ตามกฎที่กำหนด แต่นักแสดงคนอื่นไม่สามารถเคลื่อนย้ายได้) และเคลื่อนที่ได้) การหมุนของนักแสดง (สามารถหมุนได้หรือไม่) และอิทธิพลของแรงโน้มถ่วง
2. แท็บ "ความหนัก" ("น้ำหนัก") บนแท็บนี้ คุณสามารถกำหนดมวลของวัตถุเสมือนและความเฉื่อยของวัตถุได้
3. แท็บ "วัสดุ" ให้คุณกำหนดคุณลักษณะสำหรับนักแสดงที่จะจำลองพฤติกรรมของวัตถุจริงที่ทำจากวัสดุเฉพาะ เรามีตัวเลือกให้เลือกค่าที่ตั้งไว้ล่วงหน้าจากรายการดรอปดาวน์ "วัสดุที่ตั้งไว้ล่วงหน้า" หรือตั้งค่าลักษณะการเสียดสีและความยืดหยุ่นของนักแสดงของเราด้วยตนเอง
4. แท็บ Damping ช่วยให้เราปรับแต่งพารามิเตอร์ของการโต้ตอบของนักแสดงกับสิ่งแวดล้อมได้อย่างละเอียดโดยแนะนำค่าต่างๆ เช่น ความต้านทานเชิงเส้น (เช่น สู่อากาศ) และความต้านทานเชิงมุม (ระหว่างการหมุน)
5. แท็บ "ขั้นสูง" ทำให้เราสามารถเข้าถึงการตั้งค่าเพิ่มเติมต่างๆ ที่ไม่รวมอยู่ในส่วนก่อนหน้านี้ ที่นี่ คุณสามารถเปิดใช้งานโมเดลฟิสิกส์แบบง่าย (เพื่อเพิ่มประสิทธิภาพเกม) การตรวจจับพื้นที่การชนโดยอัตโนมัติ เหตุการณ์การชนกันซ้ำ และความสามารถในการหยุดชั่วคราวกับนักแสดง

เราหาฟิสิกส์แล้ว ทีนี้มาดูคุณสมบัติที่เรียกว่าโดยกดปุ่ม "คุณสมบัติ":

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

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

แต่นี่ไม่ใช่การตั้งค่าทั้งหมดที่มีให้เราใน Stencyl เราตั้งค่าเกมทั่วไปได้โดยกดปุ่ม "การตั้งค่า" บนแถบเครื่องมือหลัก:

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

1. "การตั้งค่า" ("การตั้งค่า") การตั้งค่ากลุ่มแรก ซึ่งช่วยให้เราปรับแต่งเกมของเราได้เล็กน้อย กลุ่มนี้มีสามแท็บ ในส่วนแรก ("หลัก") เราสามารถตั้งชื่อใหม่ คำอธิบายสั้นๆ ตลอดจนภาพตัวอย่างและไอคอนให้กับเกมได้ บนแท็บ "การแสดงผล" มีการกำหนดค่าขนาดสุดท้ายของพื้นที่เกม และในขนาดสุดท้าย ("ขั้นสูง") เป็นไปได้ที่จะเปิดใช้งานฟิสิกส์แบบง่ายและตั้งค่าพารามิเตอร์ต่อต้านนามแฝง
2. "ตัวโหลด" ("ตัวโหลด") ในกลุ่มนี้ เราสามารถบางส่วน (โดยคำนึงถึงข้อจำกัดบางประการของเวอร์ชันฟรี) ปรับแต่งรูปลักษณ์ของตัวโหลดล่วงหน้า (ตัวโหลด) ซึ่งจะแสดงก่อนที่เกมจะโหลดเต็ม มีสี่แท็บอยู่แล้ว ในตอนแรก ("ทั่วไป" - ทั่วไป) คุณสามารถระบุลิงก์ไปยังไซต์ของคุณ เปิดใช้งานการป้องกันการคัดลอกของเกมบนแหล่งข้อมูลอื่น (เราแสดงรายการไซต์ที่อนุญาตในบรรทัดที่สองโดยคั่นด้วยเครื่องหมายจุลภาค) และหนึ่งในตัวโหลด สกิน บนแท็บ Appearence เราสามารถตั้งค่าสีหน้าจอ bootloader และภาพพื้นหลังได้ การใช้แท็บ "Bar Style" คุณสามารถระบุขนาดของแถบตัวโหลดและ "Bar Color" ช่วยให้คุณสามารถตั้งค่าสีตามลำดับได้
3. "แอตทริบิวต์" ("แอตทริบิวต์") การตั้งค่ากลุ่มนี้เป็นหนึ่งในการตั้งค่าพื้นฐานที่สุด! ที่นี่คุณสามารถควบคุมตัวแปรส่วนกลางที่ใช้ในเกมได้ (เพิ่มเติมเกี่ยวกับตัวแปรในหัวข้อถัดไปด้านล่าง)
4. "การควบคุม" ("การจัดการ") ตามชื่อที่บอกไว้ ในกลุ่มนี้ เราสามารถกำหนดค่าใหม่และเพิ่มปุ่มบนแป้นพิมพ์ซึ่งจะมีการดำเนินการบางอย่างของเกม
5. "กลุ่ม" ("กลุ่ม") เราได้พิจารณากลไกของกลุ่มสูงขึ้นเล็กน้อยแล้ว ที่นี่เรามีโอกาสที่จะเห็นกลุ่มที่สร้างขึ้นทั้งหมดและแก้ไข

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

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

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

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

เล็กน้อยเกี่ยวกับตัวแปร

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

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

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

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

ที่นี่เรามีแท็บหลายแท็บ:

1. แท็บ "Getters" ให้คุณตั้งค่าตัวแปรที่จะได้รับค่าจากการคำนวณใดๆ หรือคำสั่งโดยตรง
2. แท็บ "Setters" ทำให้สามารถตั้งค่าใด ๆ สำหรับตัวแปรที่สร้างไว้ก่อนหน้านี้
3. แท็บ "คุณสมบัติของเกม" เก็บบล็อกของตัวแปรทั่วโลก และหากต้องการ จะให้คุณเพิ่มตัวแปรใหม่ได้ (แม้ว่าเราจะพิจารณาวิธีการทำให้ดีขึ้นด้านล่าง)
4. แท็บรายการทำให้เราสามารถสร้างอาร์เรย์ข้อมูลได้
5. แท็บฟังก์ชันใช้เพื่อจัดระเบียบฟังก์ชันที่สร้างขึ้น

อัลกอริธึมสำหรับสร้างตัวแปรในเครื่องนั้นเรียบง่าย: ขั้นแรกให้สร้างบล็อกใหม่ในแท็บ "Getters" จากนั้นค้นหาตัวแปรที่สร้างขึ้นใหม่ในแท็บ "Setters" และเพิ่มบล็อกในพื้นที่ทำงานโดยให้เท่ากับบางส่วน พารามิเตอร์ของเกม นั่นคือทั้งหมด - ตัวแปรถูกประกาศและได้รับชุดของค่าที่ถูกต้อง

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

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

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

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

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

เผยแพร่ นำเข้าและส่งออกเกม

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

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

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

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

ข้อดีและข้อเสียของโปรแกรม

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

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

ข้อสรุป

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

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

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

โดยสรุป เราสามารถพูดได้ว่า Stencyl จะเป็นเอ็นจิ้นในอุดมคติสำหรับการสร้างเกมแฟลชทั่วไปและเกมยิงแบบเลื่อนด้านข้างทุกประเภท นอกจากนี้ เมื่อฝึกฝนการสร้างเกมแฟลชแล้ว คุณสามารถซื้อใบอนุญาตประเภทใดประเภทหนึ่งได้ และเมื่อมีการเปลี่ยนแปลงกลไกเพียงเล็กน้อย ให้พอร์ตเกมของคุณเป็นรูปแบบที่รองรับโดย Android และ iOS และนี่คือวิธีการสร้างรายได้ที่แท้จริงด้วยการวางเกมบน Play Market หรือ App Store!

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

ป.ล. อนุญาตให้คัดลอกและอ้างอิงบทความนี้ได้อย่างอิสระ โดยมีเงื่อนไขว่าต้องระบุลิงก์ที่ใช้งานเปิดไปยังแหล่งที่มาและยังคงรักษาผลงานของ Ruslan Tertyshny ไว้

* โปรแกรมที่ใช้: แฟลช CS3, Photoshop CS3
* ความซับซ้อน: ปานกลาง
* เวลานำโดยประมาณ: 3 ชั่วโมง

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

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

ในคู่มือนี้ เราจะกล่าวถึงหัวข้อต่อไปนี้:

* การสร้างภาชนะ
* สร้างช่อง (ปุ่มปิด ปุ่มง่าย ๆ)
* สร้างโมดูล (เครื่องเล่นเพลงและแกลเลอรี่ภาพ)
* แก้ไขตัวโหลดไซต์ล่วงหน้า
* การสร้างหน้าเว็บไซต์และกรอกเนื้อหา

เราจะพูดถึงคุณสมบัติและการทำงานของแผงควบคุม Moto CMS ด้วย

เราต้องการ:
* Adobe Photoshop;
* Adobe Flash CS3;
* รุ่นออฟไลน์ของ Moto CMS (ทดลองใช้ฟรี);
* ออกแบบเว็บไซต์ ค. รูปแบบ PSD

ดูตัวอย่างผลสุดท้าย

ขั้นตอนที่ 1: ดาวน์โหลดไฟล์ Moto CMS

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

ขั้นตอนที่ 2: ภาพรวมโดยย่อของไฟล์ Moto CMS

ต่อไปนี้คือภาพรวมโดยย่อของไฟล์และโฟลเดอร์ Moto CMS:

* ส่วนประกอบ. โฟลเดอร์นี้มีส่วนประกอบ mxp ที่จัดการโดย Adobe Extension Manager
* แผงควบคุม. ประกอบด้วยไฟล์แผงควบคุมทั้งหมด
* เอกสาร. โฟลเดอร์นี้มีเอกสารประกอบ API
* ตัวอย่าง. ประกอบด้วย 4 ตัวอย่างไซต์แฟลชสำเร็จรูป ตั้งแต่แบบง่ายที่สุดไปจนถึงแบบซับซ้อนที่สุด พร้อมด้วยโมดูลแกลเลอรี โมดูลข่าว โปรแกรมเล่นเพลงและวิดีโอ แบบฟอร์มการติดต่อ ฯลฯ
* แม่แบบ. เทมเพลต 5 แบบที่คุณสามารถใช้สร้างไซต์โดยใช้ Moto CMS แต่ละเทมเพลตมีชุดไฟล์ที่จำเป็นและโครงสร้างต่างกัน วันนี้เราจะใช้หนึ่งในเทมเพลตเหล่านี้ โดยเฉพาะเทมเพลต #1 เป็นฐานของพอร์ตโฟลิโอภาพถ่ายของเรา
* ไฟล์ readmeซึ่งอธิบายวิธีเริ่มต้นสร้างไซต์ด้วย Moto CMS

ขั้นตอนที่ 3: เรียกใช้บน Localhost

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

หากต้องการเปิดเทมเพลตไซต์หมายเลข 1 เพียงอัปโหลดเนื้อหาของโฟลเดอร์ไปยังเซิร์ฟเวอร์ภายใน template_01จากไดเร็กทอรี /templates/ รวมถึงเนื้อหาของโฟลเดอร์ แผงควบคุม.

หลังจากนั้นเราไปที่แผงควบคุม Moto CMS โดยป้อน URL ของเราในแถบที่อยู่ของเบราว์เซอร์เพิ่ม /admin ในตอนท้าย

บันทึก: คุณจะไม่สามารถดูไซต์ได้ในขณะนี้ เนื่องจากยังไม่มีหน้าใดๆ หน้าข้อผิดพลาด 404 จะปรากฏขึ้น

ขั้นตอนที่ 4: การแก้ไข config.xml

สิ่งที่เราต้องทำคือเปลี่ยนความกว้างและความสูงของไซต์และกำหนดสีพื้นหลัง

ขนาดของโครงการของเราคือ 980×800 พิกเซล เพื่อให้ขนาดเปลี่ยนไปบนหน้าจอขนาดใหญ่ เราต้องตั้งค่า "100%" สำหรับความกว้างและความสูงของไซต์ และเพื่อให้แสดงผลได้ถูกต้องบนหน้าจอที่มีความละเอียดเล็กน้อย เราต้องระบุความกว้างและความสูงขั้นต่ำของไซต์ (แถบเลื่อนจะปรากฏขึ้น) สีพื้นหลังเป็นสีดำ (#000000)

ขั้นตอนที่ 5: เปลี่ยน style.css

ตอนนี้เราต้องเปิดไฟล์ style.css และตั้งค่าสีพื้นหลัง (สีดำ) ทุกอย่างสามารถแก้ไขได้โดยใช้แผงควบคุม Moto CMS

ขั้นตอนที่ 6: สร้างตัวโหลดล่วงหน้า

ไฟล์ต้นฉบับ moto.xfl และ website.xfl อยู่ในโฟลเดอร์ flamoto และ flawebsite ตามลำดับ
ควรสร้างตัวโหลดล่วงหน้าของไซต์ใน moto.xfl ตัวโหลดล่วงหน้าอาจเป็นคลิปธรรมดาที่มี 100 เฟรม

ในแผงการดำเนินการของคลิปนี้ เราเขียนว่า: “หยุด ();” สำหรับเฟรมแรก จากนั้นเราก็ทำให้เฟรมที่เหลือเคลื่อนไหวได้ตามต้องการ

เรายังเขียน “หยุด ();” ในการดำเนินการของเฟรมแรกของไทม์ไลน์ใน Fla

อย่าลืมระบุขนาดไซต์ (ความกว้างและความสูงขั้นต่ำ) ในคุณสมบัติไฟล์ moto.fla

ขั้นตอนต่อไปของเราคือการสร้างแอนิเมชั่นการหายไปของตัวโหลดล่วงหน้าที่ดี ในเฟรมสุดท้าย เราต้องเริ่มเว็บไซต์โดยเปิดใช้งานฟังก์ชัน “showWebsite()”

เปิดไฟล์ website.xfl และอัปเดตตัวโหลดล่วงหน้า

ขั้นตอนที่ 7: ความเป็นมาของเว็บไซต์

เปิดไลบรารีสื่อ Moto CMS (การตั้งค่า > ไลบรารีสื่อ) และรูปภาพที่จำเป็นอื่นๆ (สำหรับหน้าหลัก หน้าหลัก หรือแกลเลอรี) อัปโหลดภาพพื้นหลังโดยใช้ปุ่ม "เพิ่มสื่อ"

หลังจากนั้น กลับไปที่แผงควบคุม สร้างหน้าใหม่และแทรกรูปภาพพื้นหลังโดยใช้ปุ่ม "ภาพถ่าย" ลากรูปภาพและจัดกึ่งกลาง

ตัวจัดการแบบอักษรอนุญาตให้ผู้ใช้จัดการแบบอักษรของไซต์ ซึ่งจัดเก็บเป็นไฟล์ SWF และสามารถดาวน์โหลดได้

ก่อนโหลดฟอนต์ใดๆ เราต้องแปลงเป็นรูปแบบ SWF ก่อน สำหรับสิ่งนี้เราจะใช้ ผู้สร้างฟอนต์ออนไลน์เป็นแอปพลิเคชั่นออนไลน์แสนสะดวกที่พัฒนาโดยทีม MotoCMS ที่ให้คุณแปลงไฟล์ TTF และ OTF เป็น SWF ได้อย่างง่ายดาย สิ่งที่เราต้องทำคือเลือกไฟล์ฟอนต์ที่ต้องการด้วยนามสกุล .TTF หรือ .OTF เพิ่มลงใน Online Font Creator คลิกปุ่ม “สร้างฟอนต์” และดาวน์โหลดไฟล์ SWF ที่เสร็จแล้ว หลังจากนั้นเราก็สามารถใช้มันกับพอร์ตโฟลิโอของเราได้ เว็บไซต์.

สร้างชื่อเว็บไซต์และสโลแกน

เมื่ออัปโหลดแบบอักษรใหม่แล้ว คุณสามารถสร้างชื่อไซต์และสโลแกนโดยใช้เครื่องมือข้อความและนำแบบอักษรที่ต้องการไปใช้ ในการสร้างสโลแกนเราใช้แบบอักษร Tahoma ขนาด: 10 สี: # 727272 หลังจากนั้นให้เปลี่ยนชื่อและสโลแกนของไซต์ตามการออกแบบใน .PSD

ขั้นตอนที่ 9: การเพิ่มรูปภาพในโฮมเพจ

เราจะวางรูปภาพของแกลเลอรี่ไว้บนหน้าหลักของเว็บไซต์ ในการดำเนินการนี้ เลือกรูปภาพจาก Media Library โดยคลิก "Photo" ในแถบเครื่องมือด้านซ้าย หากจำเป็น ให้ปรับตำแหน่งตามการออกแบบของหน้าหลัก

ขั้นตอนที่ 10: สร้างเมนูด้านล่าง

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

ขั้นตอนที่ 11: สร้างคอนเทนเนอร์เนื้อหา

บันทึก: คอนเทนเนอร์คือคลิปใน website.fla ซึ่งสามารถเพิ่มเนื้อหาแบบไดนามิกได้ สามารถมีได้ 4 ประเภท: 1) คอนเทนเนอร์ที่มีวัตถุที่มองเห็นได้ทั่วทั้งไซต์ 2) คอนเทนเนอร์ที่มีออบเจกต์เลย์เอาต์; 3) คอนเทนเนอร์ที่มีวัตถุหน้า 4) คอนเทนเนอร์ที่มีวัตถุป๊อปอัป

เทมเพลตไซต์ #1 ที่เราเลือกมีคอนเทนเนอร์สองคอนเทนเนอร์ตามค่าเริ่มต้น: คอนเทนเนอร์ที่มีออบเจ็กต์ที่มองเห็นได้ทั่วทั้งไซต์ และคอนเทนเนอร์ที่มีออบเจ็กต์ของเพจ หากเราเปิดไฟล์เว็บไซต์.fla เราจะเห็น:

คอนเทนเนอร์เหล่านี้เขียนอยู่ในไฟล์ structure.xml ตรวจสอบว่าความกว้างคือ 980 และความสูง 800px

คอนเทนเนอร์ที่มีวัตถุที่มองเห็นได้ทั่วทั้งไซต์:

คอนเทนเนอร์ที่มีวัตถุหน้า:

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

ขั้นตอนที่ 12: สร้างหน้าเกี่ยวกับเรา

สร้างหน้าว่าง

ที่มุมซ้ายบน ให้คลิกปุ่ม "สร้าง" ซึ่งจะทำให้เราสามารถสร้างหน้าใหม่ได้

เชื่อมต่อปุ่มเมนูที่จำเป็นกับหน้าใหม่

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

การเพิ่มรูปภาพพื้นหลังในหน้าเกี่ยวกับ

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

การเพิ่มข้อความในหน้าเกี่ยวกับเรา

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

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

ขั้นตอนที่ 13: เปลี่ยนอิมเมจตัวโหลดล่วงหน้า

คุณอาจสังเกตเห็นตัวโหลดล่วงหน้าแบบวงกลมสีขาวเมื่อคุณเลื่อนดูหน้าต่างๆ หากต้องการตั้งค่า ให้เปิดไฟล์ website.fla แล้วไปที่ไลบรารี่ คลิกขวาที่ตัวโหลดล่วงหน้าและเลือก Properties

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

ขั้นตอนที่ 14: แอนิเมชั่นเว็บไซต์

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

คอนเทนเนอร์เริ่มต้นเคลื่อนไหว

คอนเทนเนอร์เนื้อหาทำให้เคลื่อนไหวได้ง่ายตามไทม์ไลน์ เปิดไฟล์ website.fla และสร้างแอนิเมชั่นเฟดสำหรับแต่ละคอนเทนเนอร์

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

มาสร้างแอนิเมชั่นสำหรับคอนเทนเนอร์ที่มีออบเจ็กต์เพจ (เลเยอร์ page_1_holder_2 เลเยอร์) ในลักษณะเดียวกัน แต่ทำให้ปรากฏในภายหลังเล็กน้อย

ดังนั้น เราจะเพิ่มคีย์เฟรมอีก 2 รายการในเลเยอร์ ทำให้คอนเทนเนอร์โปร่งใสที่เฟรมแรกและเฟรมที่สอง และสร้างการค่อยๆ เปลี่ยนระหว่างจากคีย์เฟรมที่สองไปยังเฟรมที่สาม

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

นี่คือวิธีที่เราทำแอนิเมชั่นของการปรากฏและการหายไปของคอนเทนเนอร์

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

เราสร้างคอนเทนเนอร์เพิ่มเติมและทำให้พวกมันเคลื่อนไหว

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

เนื่องจากส่วนบนและส่วนล่างอยู่ที่ระดับของทั้งไซต์ เราจะเพิ่มคอนเทนเนอร์สองตู้สำหรับสองส่วนนี้ ก่อนเพิ่มคอนเทนเนอร์ เราต้องกำหนดขนาดและตำแหน่งของคอนเทนเนอร์ ทำได้ง่ายด้วยเครื่องมือ Slice ใน Photoshop

ส่วนบนมีขนาดดังต่อไปนี้: x=0, y=0, width=980, height=120.

โซนล่าง: x=0, y=765, ความกว้าง=980, ความสูง=35.

คอนเทนเนอร์ด้านบนจะมีชื่อไซต์ คอนเทนเนอร์ด้านล่างจะมีเมนู และจะแสดงแตกต่างกัน นอกจากนี้ ยังติดอยู่ที่ด้านบนและด้านล่างของหน้าจอตามลำดับเมื่อแสดงเต็มหน้าจอ

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


หลังจากเพิ่มคอนเทนเนอร์ลงในไฟล์ .xml แล้ว เราจำเป็นต้องสร้างคอนเทนเนอร์เหล่านี้ในไฟล์ website.fla เปิดไฟล์ website.fla และสร้างเลเยอร์ใหม่สำหรับคอนเทนเนอร์ของเรา ลำดับของเลเยอร์ควรตรงกับค่าความลึกที่เราตั้งไว้ในไฟล์ xml

เราสามารถคัดลอก movieclip เปล่าจากชั้น website_holder_1 และวางลงใน website_holder_3 และ website_holder_4

เราตั้งค่าพิกัดเดียวกันในคลิปตามที่ระบุในไฟล์ structure.xml

สำหรับคอนเทนเนอร์ที่ 3: x = 0, y = 0;

สำหรับคอนเทนเนอร์ที่ 4: x = 0, y = 765

เนื่องจากเราคัดลอกคลิปแล้ว ชื่อเก่าจึงยังคงอยู่ เราเปลี่ยนตาม ID เพื่อให้ง่ายต่อการค้นหา

ต้องทำเช่นเดียวกันสำหรับคอนเทนเนอร์ 4

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

นี่คือสิ่งที่เราได้รับ:

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

จากนั้นเรารวบรวมไซต์และอัปเดตแผงควบคุม

วางสิ่งของในภาชนะ

เมื่อคุณเลือกออบเจ็กต์ใดๆ คุณจะเห็นคอนเทนเนอร์ใหม่สองคอนเทนเนอร์ปรากฏขึ้นในรายการตำแหน่งที่เป็นไปได้ในเมนูแบบเลื่อนลง: ด้านบนและด้านล่าง

ชื่อไซต์ที่มีสโลแกนต้องอยู่ในคอนเทนเนอร์ด้านบน และเมนูไซต์ที่มีสี่เหลี่ยมผืนผ้าสีเทาอยู่ที่ด้านล่าง

เปลี่ยนเนื้อหาของภาชนะด้านล่าง

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

หลังจากนั้น ไปที่ฉากหลัก คลิกที่คีย์เฟรมแรกของคอนเทนเนอร์ 3 และ 4 แล้วแก้ไขโค้ด

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

ขั้นตอนที่ 15: ทำให้คอนเทนเนอร์เนื้อหาเคลื่อนไหว

เพื่อให้เนื้อหาของไซต์เคลื่อนไหวได้ เราจะต้องทำให้คอนเทนเนอร์เคลื่อนไหวด้วยวัตถุของไซต์ทั้งหมดในลักษณะเดียวกับที่เราทำกับคอนเทนเนอร์ด้านบนและด้านล่าง

ขั้นตอนที่ 16: สร้างหน้าติดต่อ

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

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

หน้า "ผู้ติดต่อ" พร้อมแล้ว ตอนนี้ยังคงต้องแก้ไขเนื้อหาโดยใช้ตัวแก้ไข WYSIWYG ที่สะดวก และใช้ตัวแก้ไขลิงก์เพื่อเชื่อมต่อกับปุ่มเมนูที่เกี่ยวข้อง

ขั้นตอนที่ 17: สร้างสล็อตอย่างง่าย

ใน Moto Flash CMS สล็อตเล่นบทบาทของวัตถุเคลื่อนไหว สล็อตอาจมีคุณลักษณะภาพเคลื่อนไหวจำนวนมากที่สามารถควบคุมได้โดยตรงจากแผงควบคุม

ก่อนอื่นเราจะพยายามสร้างช่องง่ายๆ แล้วปรับปรุง

เริ่มต้นด้วยปุ่ม "ปิด" เพิ่มลงในไซต์เป็นรูปภาพ ใช้เอฟเฟกต์บางอย่างกับมัน และกำหนดการกระทำ "ไปที่หน้า" -> "หน้าแรก"

การทำแอนิเมชั่นปุ่มปิดนั้นไม่ยากเลยเพราะเราจะทำโดยใช้สล็อต มาสร้างช่องในไฟล์เว็บไซต์.fla กัน ในการดำเนินการนี้ เรานำเข้ารูปภาพของปุ่ม "ปิด" ลงในไลบรารี ในส่วนสล็อต เราจำเป็นต้องสร้าง movieclip ใหม่และตั้งชื่อเป็น CloseButtonSlot

มาตั้งค่าคลาสเป็น CloseButtonSlot ไม่จำเป็นต้องสร้างคลาสใหม่ เพียงพอที่จะสืบทอดคลาส AbstractMotoSlot เพียงคัดลอก: com.moto.template.shell.view.components.AbstractMotoSlot แล้ววางลงในฟิลด์ Base Class

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

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

เราสร้างคีย์และระหว่างเฟรมเดียวกันบนเลเยอร์คลิปของเรา

ตัวอย่างเช่น ปุ่ม "ปิด" ของเราจะหมุนตามเข็มนาฬิกาเมื่อวางเมาส์ไว้เหนือปุ่ม และทวนเข็มนาฬิกาเมื่อถอดออก

มาเพิ่มความสว่างของการหมุนและการค่อยๆ เปลี่ยนสำหรับภาพเคลื่อนไหวกัน

หลังจากแอนิเมชั่นเสร็จแล้ว เราจะคอมไพล์ไฟล์ website.fla ด้วยสล็อตใหม่ของเรา (Ctrl + Enter)

ในการทำงานกับสล็อตโดยใช้ Moto CMS เราจำเป็นต้องระบุพารามิเตอร์ในไฟล์: โครงสร้าง.xml:

librarySymbolLinkage=” ” – ส่งออกช่อง movieclip (ชื่อคลาส)
เคลื่อนไหว=”จริง” – คุณลักษณะที่ระบุว่าช่องเป็นภาพเคลื่อนไหวหรือไม่
resizable="false" - มีเหตุผลสำหรับการปรับขนาดช่องหรือไม่
ล็อค=”เท็จ” – ไม่ว่าช่องควรจะแสดงในแผงควบคุมหรือไม่
– ชื่อสล็อตในแผงควบคุม
– คุณสมบัติสล็อตที่ขยายการทำงาน เราจะไม่ใช้มันในตัวอย่างนี้