แอพ Adobe Edge Creative Cloud

• อาจ 17, 2024

HTML5, JavaScript และ CSS3 ได้รับความนิยมเกือบเท่า Flash สำหรับการสร้างภาพเคลื่อนไหวแบบอินเทอร์แอคทีฟสำหรับเว็บแท็บเล็ตและโทรศัพท์ Adobe^R Edge Animate และแอพ Edge อื่น ๆ เป็นซอฟต์แวร์ที่ใช้งานง่ายมากพร้อมการตั้งค่าล่วงหน้าจำนวนมากเพื่อให้งานของคุณง่ายขึ้น

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

หากคุณคุ้นเคยกับภาพเคลื่อนไหว Flash คุณจะสังเกตเห็นว่าการเพิ่มการโต้ตอบใน Edge คล้ายกับขั้นตอนการทำงานของ Flash ซึ่งคุณสามารถใช้เส้นเวลาซ้อนสำหรับองค์ประกอบภาพเคลื่อนไหวแต่ละองค์ประกอบและใช้ตัวอย่างรหัสที่ติดตั้งไว้ล่วงหน้าสำหรับการโต้ตอบและภาพเคลื่อนไหวทั่วไป ตัวอย่างโค้ดเหล่านี้จัดการกับทั้งภาพเคลื่อนไหวการเล่นเช่นการเล่นหยุดชั่วคราวดำเนินการต่อและหยุดรวมถึงสร้างพื้นที่ร้อนแรงสำหรับการทำงานของปุ่มพื้นฐานเช่นคลิก, โฮเวอร์และแม้แต่ไฮเปอร์ลิงก์ หากต้องการเพิ่มรหัสที่กำหนดเองลงในข้อมูลโค้ดเหล่านี้คุณสามารถพิมพ์ลงในแผงการทำงานได้โดยตรง แน่นอนคุณสามารถเขียนโค้ด HTML5, JavaScript และ CSS3 ของคุณเองได้ในแผงการทำงาน เนื่องจากการเขียนโปรแกรมบนเว็บและแอนิเมชั่นประเภทนี้มักอาศัยไลบรารี JavaScript ภายนอกคุณจึงสามารถเพิ่มลิงก์ไปยังแหล่งภายนอกเหล่านี้ได้

แอนิเมชันเป็นเพียงส่วนหนึ่งของสิ่งที่คุณสามารถทำได้กับกลุ่มแอพ Edge หนึ่งในส่วนที่สำคัญที่สุดของการออกแบบเว็บคือการสร้างเว็บไซต์ที่ตอบสนองหรือมีความยืดหยุ่นสำหรับหน้าจอทุกประเภทตั้งแต่เดสก์ท็อปไปจนถึงโทรศัพท์มือถือ สิ่งนี้ทำกับเคียวรีสื่อบันทึกและการวางผังรูปแบบกริดตามเปอร์เซ็นต์ซึ่งทั้งสองอย่างนี้เป็นส่วนหนึ่งของเครื่องมือที่พบใน Edge Reflow Edge Reflow เป็นสภาพแวดล้อมการทำงานแบบ WYSIWYG ที่สร้างรหัสสำหรับโครงการของคุณ รหัสนี้เป็นรุ่นล่าสุดสำหรับมาตรฐานเว็บล่าสุดโดยเฉพาะอย่างยิ่ง WebKit ซึ่งได้รับการสนับสนุนจากทุกสิ่งตั้งแต่หน้าเว็บไปจนถึงโปรแกรมอ่าน ebook

การสร้างเลย์เอาต์ใน Edge Reflow นั้นง่ายเหมือนกับการวาดคอนเทนเนอร์ HTML div ลงบนกริดด้วยเครื่องมือ Box และการจัดตำแหน่งที่แน่นอนของ divs เหล่านี้ช่วยให้สามารถปรับขนาดหรือแปลงตามความต้องการสำหรับขนาดหน้าจอแต่ละขนาด มันทำงานอย่างไร ความลับคือ Media Queries ซึ่งคุณสามารถปรับแต่งภายใน Media Query Manager โดยการตั้งค่าพารามิเตอร์ต่ำสุดและสูงสุดสำหรับความละเอียดหน้าจอสามหรือมากกว่า พารามิเตอร์เหล่านี้จะเป็นตัวกำหนดเวลาที่การออกแบบจะเปลี่ยนขึ้นหรือลงสำหรับขนาดหน้าจอที่ใกล้ที่สุด ฉันชอบตัวทำเครื่องหมายภาพสีสำหรับแต่ละขนาดหน้าจอที่ด้านบนของพื้นที่ทำงานซึ่งช่วยให้คุณเห็นภาพเมื่อการเปลี่ยนแปลงเหล่านี้จะเกิดขึ้น

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

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

ในที่สุดสำหรับพวกเราที่ยังคงต้องการทำงานกับรหัสดิบ Adobe มี Edge Code หน้าต่างรหัสไม่กระจัดกระจายเพียงไม่กี่ตัวควบคุมทางด้านซ้ายและ Edge Code รวมกับ Google Chrome เพื่อให้คุณมีตัวอย่างสด เมื่อรหัสของคุณยาวและไม่มั่นคงคุณสามารถเจาะลึกถึงระดับองค์ประกอบแต่ละรายการโดยใช้คุณสมบัติแก้ไขด่วนซึ่งจะแสดงรายการสไตล์ทั้งหมดที่แนบกับองค์ประกอบในหน้าต่างซ้อนทับ เนื่องจากแอพ Edge เป็นส่วนหนึ่งของ Creative Cloud คุณสามารถใช้ Adobe Edge Web Fonts, Google Web Fonts และ Typekit แบบอักษรได้โดยตรงจากภายใน Edge Code รหัสขอบจะสร้างแท็กสคริปต์ส่วนหัวที่ดึงในแบบอักษรภายนอก

ในฐานะที่เป็น HTML5, JavaScript และ CSS3 จะแทนที่เทคนิคการเคลื่อนไหวแบบเก่าอย่างรวดเร็วเนื่องจากความนิยมของอุปกรณ์มือถือแอพ Edge เหล่านี้รวมถึงการรวมเข้ากับแอพ Adobe อื่น ๆ เป็นรุ่นต่อไปของเวิร์กโฟลว์การออกแบบและพัฒนาอุปกรณ์

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

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

คำแนะนำวิดีโอ: How to Make a Custom Brush with Adobe Capture CC | Adobe Creative Cloud (อาจ 2024).