บทเรียนการทำงานใน Adobe Edge Animate CC. ดานิล ฟิมุชกิน บทเรียนเกี่ยวกับการสร้างแอนิเมชั่นใน Adobe Edge

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


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


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


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


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


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

ปรับปรุงเมื่อวันที่ 6 ธันวาคม 2558:
ผู้จัดการผลิตภัณฑ์ Flash Runtime และ Adobe AIR กล่าวว่าตน ไม่มีแผนเพื่อหยุดการทำงานของ Flash Runtime และ AIR และ การเปลี่ยนชื่อผลิตภัณฑ์สร้างเนื้อหาไม่มีทาง ไม่เกี่ยวข้องกับชะตากรรมของ Flash Playerและระบบนิเวศที่เกี่ยวข้อง

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

บทความต้นฉบับ http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html รายงานว่า Adobe กำลังเปลี่ยนชื่อ Flash Professional เป็น Animate CC นอกจากนี้ พวกเขารายงานว่าลูกค้าต้องการแพลตฟอร์มที่รองรับเพิ่มเติม เป็นต้น

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

ปัจจุบันคำว่า Flash ถูกมองว่าเป็นปลั๊กอินสำหรับเบราว์เซอร์ ในทางเทคนิคแล้วมันคือ Flash Player แต่มีเครื่องมือสร้างเนื้อหา - Flash Professional หาก Microsoft เปลี่ยนชื่อ Word เป็น TextMachine ผู้คนจะตะโกนว่า "Microsoft หยุดพัฒนา Word หรือไม่" แม้จะเขียนเป็นขาวดำว่ารองรับการสร้างเนื้อหาและแก้ไขข้อมูลได้?

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

“แต่บนฮับพวกเขาเขียนว่าแฟลชไม่ทำงานและใช้งานไม่ได้บนแท็บเล็ต”

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

กลับไปที่บทความต้นฉบับ พวกเขารายงานว่า html5 ได้รับการพัฒนาและรองรับคุณสมบัติส่วนใหญ่ของ Flash แล้ว จากด้านล่างนี้ เราพบว่า Adobe มองว่า Flash เป็นวิธีสำคัญในการนำเสนอเนื้อหาระดับพรีเมียม เช่น เกมบนเว็บและวิดีโอระดับพรีเมียม แต่ไม่มีคำว่าจะหยุดสนับสนุน Flash

ยิ่งไปกว่านั้น... พวกเขาระบุอย่างชัดเจนว่าพวกเขาทำงานร่วมกับ Microsoft และ Google เพื่อปรับปรุงความเข้ากันได้และความปลอดภัยของ Flash Player และพวกเขาไม่ลืมที่จะเสริมว่าพวกเขากำลังทำงานอย่างใกล้ชิดกับ Facebook เพื่อปรับปรุงความน่าเชื่อถือและความปลอดภัยของเกมใน Flash Player แล้วมีคำพูดไหนที่พวกเขาละทิ้ง Flash บ้างล่ะ?

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

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

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

เป็นที่น่าสังเกตว่าโครงการ Adobe Edge Animate จะไม่ได้รับการพัฒนาอย่างแข็งขันอีกต่อไป แต่เพราะว่า ฉันใกล้จะพัฒนา Flash Professional แล้ว - ฉันรับรองว่า Edge Animate จะไม่ได้รับการพัฒนาเลย (ยกเว้นข้อผิดพลาดร้ายแรง) การตัดสินใจนี้มีขึ้นเพื่อสนับสนุน Adobe Flash Professional (Animate CC ในอนาคต)

Adobe Edge Animate - บทเรียนเกี่ยวกับการสร้างแอนิเมชั่นสำหรับเว็บไซต์

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

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

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

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

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

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

บทเรียนเกี่ยวกับการสร้างแอนิเมชั่นใน Adobe Edge

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


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


ดูวิดีโอบน Adobe Edge Animate

ส่วนที่หนึ่งของบทช่วยสอนเกี่ยวกับการสร้างแอนิเมชั่นแรกของคุณใน Adobe Edge Animate ผู้เขียนบทเรียน Valery Medvedev แสดงการกระทำที่จำเป็นทั้งหมดและความหมายของปุ่มแผงควบคุมอย่างเรียบง่ายชัดเจนและทั่วถึง


ดูวิดีโอบน Adobe Edge Animate

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


ดูวิดีโอบน Adobe Edge Animate

ในวิดีโอนี้ เราจะเรียนรู้วิธีดูภาพเคลื่อนไหวที่สร้างใน Edge Animate ในเว็บเบราว์เซอร์ ข้อมูลเล็กๆ น้อยๆ เกี่ยวกับ HTML5


ดูวิดีโอบน Adobe Edge Animate

ตัวอย่างแอนิเมชันที่น่าสนใจเมื่อจรวดพุ่งขึ้นด้วยค่าตัวนับที่แน่นอน

รหัสพร้อมสำหรับทริกเกอร์:

ตัวจับเวลานับ = 5; sym.$("counter_txt").html(timerCount); tCounter = setInterval (ตัวจับเวลา 1,000); ฟังก์ชั่น ตัวจับเวลา () ( timerCount -= 1; if (timerCount< 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }

ตัวนับเวลา = 5 ;

tCounter = setInterval (ตัวจับเวลา 1,000);

ฟังก์ชั่นจับเวลา()

ตัวจับเวลานับ -= 1 ;

ถ้า (timerCount< 1 )

ซิม เล่น("เริ่มต้น");

clearInterval(tเคาน์เตอร์);

กลับ ;

ซิม $("counter_txt"). html(ตัวจับเวลา);


ดูวิดีโอบน Adobe Edge Animate

วิธีเปลี่ยนสถานะของปุ่มเมื่อเลื่อนเมาส์ รหัสที่จำเป็นสำหรับ mouseleave:

sym.getSymbol("goBtn").stop("ปกติ");


ดูวิดีโอบน Adobe Edge Animate

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

var youtube = $("
ดูวิดีโอบน Adobe Edge Animate

วิธีทำให้แอนิเมชั่นเริ่มเล่นหลังจากที่ผู้ใช้เลื่อนหน้าไปยังตำแหน่งที่ต้องการเท่านั้น ลองทำสิ่งนี้โดยใช้โปรเจ็กต์ตัวอย่างใน Adobe Muse การกำหนดตำแหน่งเริ่มต้นสำหรับการเปิดตัว


ดูวิดีโอบน Adobe Edge Animate

วิธีทำให้รูปภาพหมุนได้ 180 องศารอบแกนตั้งเมื่อวางเมาส์

คุณสามารถดาวน์โหลดไฟล์และรหัสที่จำเป็นได้


ดูวิดีโอบน Adobe Edge Animate

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


ดูวิดีโอบน Adobe Edge Animate

วิธีทำให้โลโก้ที่ต้องการหมุนรอบแกน น่าเสียดายที่โลโก้ไม่สามารถคลิกได้


ดูวิดีโอบน Adobe Edge Animate

วิธีเพิ่มเสียงเมื่อกดปุ่ม


ดูวิดีโอบน Adobe Edge Animate

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

ขอให้โชคดีและประสบความสำเร็จอย่างสร้างสรรค์สำหรับทุกคน!

ในการเตรียมโฆษณา HTML สำหรับการวางใน ADFOX สิ่งสำคัญคือต้องปฏิบัติตามข้อกำหนดสำหรับการแทรกโค้ดที่ประมวลผลการคลิกบนแบนเนอร์และนับเหตุการณ์ในแบนเนอร์
เมื่อพัฒนาโค้ด HTML คุณสามารถใช้โปรแกรมแก้ไขที่เขียนคำแนะนำเหล่านี้:
- Adobe ภาพเคลื่อนไหว CC;
- Google นักออกแบบเว็บ;
- Adobe Edge เคลื่อนไหว CC

ข้อกำหนดสำหรับโค้ด HTML (สำหรับนักพัฒนาโค้ด)

เตรียมโครงการของคุณโดยปฏิบัติตามข้อกำหนดต่อไปนี้:

1. จำนวนอักขระสูงสุดที่อนุญาตในโค้ด HTML คือ 65,000
2. ขอแนะนำให้วาง JavaScript และ CSS ไว้ในโค้ด HTML ของแบนเนอร์
หากโค้ด HTML ที่ได้ผลลัพธ์เกินจำนวนอักขระสูงสุดที่อนุญาต จำเป็นต้องลดโค้ดโดยการย้าย JavaScript และ CSS ไปยังไฟล์แยกกัน:
- บันทึกโค้ด js และ css ลงในไฟล์แยกกันโดยมีนามสกุล .js หรือ .css
3. โปรเจ็กต์สามารถมีได้เพียงไฟล์เดียวที่มีนามสกุล .html
4. จำนวนไฟล์สูงสุดที่อนุญาตในโครงการคือ 50;
5. ประเภทไฟล์ที่อนุญาตในโครงการ: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx , eot, fnt, ฝน, mf, ttc, woff;
6. ขนาดสูงสุดของแต่ละไฟล์ (ใช้กับไฟล์ภายในไฟล์เก็บถาวรด้วย):
- 300กิโลไบต์;
- 1MB สำหรับไฟล์วิดีโอ
7. ชื่อไฟล์ต้องประกอบด้วยตัวเลขหรือตัวอักษรภาษาอังกฤษและขีดล่างเท่านั้น ไม่อนุญาตให้ใช้ตัวอักษรรัสเซีย ช่องว่าง เครื่องหมายคำพูด และอักขระพิเศษในชื่อไฟล์
8. คุณไม่สามารถใช้ตัวอักษรรัสเซียในชื่อของตัวแปรและวัตถุได้
ข้อยกเว้นเพียงอย่างเดียวคือข้อความบนแบนเนอร์
9. รูปแบบของโครงการที่เสร็จสมบูรณ์ - ซิปคลังเก็บเอกสารสำคัญ.

อะโดบี แอนิเมชั่น ซีซี

1. การเตรียมบรรณาธิการ

หากต้องการสร้างโครงการใหม่ใน AdobeAnimate CC ให้เลือกโครงการ "HTML5 Canvas"

รหัสของเทมเพลตนี้สามารถใช้เป็นพื้นฐานในการสร้างโฆษณาในตัวแก้ไข

หากต้องการใช้เทมเพลตกับโปรเจ็กต์ ในการตั้งค่าการเผยแพร่ ให้เลือก "การตั้งค่าการเผยแพร่ขั้นสูง -> นำเข้าใหม่...".

เทมเพลตมีสคริปต์ adfox_HTML5.js

3. คลิกการประมวลผล

หากโฆษณาของคุณมีภาพเคลื่อนไหวแบบวน ให้ใช้โค้ดสำหรับปุ่มจากส่วนนั้นเท่านั้น

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

Canvas.style.cursor = "ตัวชี้"; canvas.addEventListener("คลิก", ​​function() ( window.callClick(); ));

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

This.btnMain.addEventListener("คลิก", ​​ฟังก์ชั่น (e) ( var t = e.nativeEvent; if (t.ซึ่ง == 1 || t.button == 0) ( window.callClick(); ); )) ;

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

This.btnLeft.addEventListener("คลิก", ​​ฟังก์ชั่น (e) ( var t = e.nativeEvent; if (t.ซึ่ง == 1 || t.button == 0) ( window.callClick(n); ); ) );

ที่ไหน n

3.3

This.btnText.addEventListener("เมาส์โอเวอร์", function() ( window.callEvent(n); ));

ที่ไหน วางเมาส์เหนือ- เหตุการณ์จาวาสคริปต์ n- หมายเลขเหตุการณ์ตั้งแต่ 1 ถึง 30 ที่ควรถูกทริกเกอร์

คุณสมบัติของการสร้างแอนิเมชั่นแบบวนซ้ำ

วิธีใช้ภาพเคลื่อนไหวแบบวนซ้ำในโฆษณาในตัวแก้ไข Animate CC:
- ตั้งค่าตัวเลือก "วนรอบไทม์ไลน์" ในการตั้งค่าสิ่งพิมพ์
- ใช้รหัสสำหรับปุ่มจากส่วนนี้ และจะต้องลบรหัสสำหรับปุ่มปกติจากย่อหน้าที่ 3.1 และ 3.2

โค้ดสำหรับโฆษณาที่มีปุ่มเดียวและภาพเคลื่อนไหวแบบวนซ้ำ:

ถ้า (typeof(this.stopCycle) == "unknown") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.ซึ่ง == 1 || t.button == 0) ( window.callClick(); )); this.stopCycle = จริง;

หากมีหลายปุ่ม ให้เพิ่มโค้ดต่อไปนี้ในโค้ดสำหรับการเรียกเหตุการณ์ ADFOX:

ถ้า (typeof(this.stopCycle) == "unknown") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.ซึ่ง == 1 || t.button == 0) ( window.callClick(); )); this.btnLeft.addEventListener("คลิก", ​​ฟังก์ชั่น (e) ( var t = e.nativeEvent; if (t.ซึ่ง == 1 || t. ปุ่ม = = 0) ( window.callClick(n); )); this.stopCycle = จริง;

ที่ไหน n- หมายเลขเหตุการณ์ตั้งแต่ 1 ถึง 30 ที่ควรถูกทริกเกอร์

การใช้ปุ่มโปร่งใส

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

ปุ่มใน Animate คือสัญลักษณ์ที่มีสี่เฟรม คุณสามารถปล่อยสามรายการแรกว่างไว้และเติมเฉพาะ "Hit" สุดท้ายโดยการเพิ่มเนื้อหา (องค์ประกอบกราฟิก) เข้าไปผ่านทางแทรก > ไทม์ไลน์ > คีย์เฟรม

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

คุณสมบัติของการใช้แบนเนอร์ยืด (ยาง)

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

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

คุณสมบัติการสร้างแบนเนอร์พร้อมไฟกระพริบอัตโนมัติ

หากคุณต้องการแสดงแบนเนอร์จากสถานะขยาย เมื่อเพิ่มแบนเนอร์ในอินเทอร์เฟซ คุณต้องระบุค่า "ใช่" ในพารามิเตอร์ "ขยายอัตโนมัติเสมอ" หรือ "ขยายเมื่อเริ่มต้น" และเพิ่มโค้ดใน โฆษณา HTML:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = นี้.main_banner; window.global_exp_banner.visible = เท็จ; ถ้า (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else( window.global_exp_banner. มองเห็นได้ = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; window.global_main_banner.btnExpand.addEventListener("คลิก", ​​ขยายแบนเนอร์.bind(นี้) ); window.global_exp_banner.btnCollapse.addEventListener("คลิก",ยุบBanner.bind(นี้)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = จริง)

5. การเผยแพร่โครงการ

สำคัญ! เมื่อดูตัวอย่างโครงการในเบราว์เซอร์ผ่าน (Ctrl-Enter | Cmd-Enter)ค่าสุ่มของแบบฟอร์มจะถูกผนวกเข้ากับลิงก์ในชื่อไฟล์ในรูปแบบ HTML ?1468231208369 - ค่าดังกล่าวจะต้องถูกแยกออกจากโครงการเมื่อโหลดลงใน ADFOX
เมื่อต้องการทำเช่นนี้ โปรเจ็กต์สุดท้ายในตัวแก้ไขจะต้องได้รับการเผยแพร่ผ่านทาง ไฟล์ > การตั้งค่าการเผยแพร่ > เผยแพร่ (Shift-Ctrl-F12 | Shift-Cmd-F12).

เมื่อเผยแพร่โครงการ ให้เลือกเทมเพลต AdobeAnimate_Adfox_.html.

.zip

Google นักออกแบบเว็บ

โค้ดของแบนเนอร์นี้สามารถใช้เป็นพื้นฐานในการสร้างโฆษณาในตัวแก้ไขได้

เทมเพลตมีสคริปต์ adfox_HTML5.jsและชุดพารามิเตอร์สำหรับการดำเนินการที่ถูกต้องของการเปลี่ยนภาพและการนับเหตุการณ์:
%reference%, %user1%, %eventN% โดยที่ N คือหมายเลขเหตุการณ์ตั้งแต่ 1 ถึง 30

2. คลิกการประมวลผล

เหตุการณ์ทั้งหมดถูกกำหนดให้กับองค์ประกอบภาพเคลื่อนไหวเฉพาะผ่านทางแท็บเหตุการณ์


ส่วนประกอบ Interactive Area ใช้เพื่อเรียกใช้การดำเนินการ
เพิ่มและเลือกกิจกรรม "พื้นที่โต้ตอบ" - "สัมผัส/คลิก"(หรือ "พื้นที่การแตะ > สัมผัส/คลิก" ในเวอร์ชันภาษาอังกฤษ)


ในแท็บ "รหัสที่กำหนดเอง" ให้ระบุการเรียกฟังก์ชันคลิก

2.1

โทรคลิก();

2.2

โทรคลิก(n);

ที่ไหน n

2.3 หากคุณต้องการทริกเกอร์เหตุการณ์จากภาพเคลื่อนไหวโดยไม่มีการเปลี่ยนแปลง ให้ใช้โค้ดต่อไปนี้:

กิจกรรมการโทร (n);

ที่ไหน n- จำนวนเหตุการณ์ที่ควรเรียก



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

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

4. การเผยแพร่โครงการ

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

หลังจากเผยแพร่โครงการแล้ว ให้เก็บถาวรในรูปแบบ .zip- โฆษณาของคุณพร้อมที่จะอัปโหลดไปยังแบนเนอร์ ADFOX แล้ว

Adobe Edge ภาพเคลื่อนไหว CC

ในการเริ่มต้น ให้เรียกใช้ไฟล์ที่มีนามสกุล .หนึ่งจากเอกสารสำคัญ

2. คลิกการประมวลผล

กิจกรรมทั้งหมดถูกกำหนดให้กับองค์ประกอบภาพเคลื่อนไหวเฉพาะผ่านแท็บ "โค้ด"

หากต้องการนำทางผ่านองค์ประกอบที่เลือก คุณต้องเลือกเหตุการณ์ คลิกและเขียนการเรียกไปยังฟังก์ชันคลิก

ปุ่มจะต้องได้รับการกำหนดชื่ออินสแตนซ์ เช่น btnMain, btnRight

2.1 หากใช้ปุ่มกระโดดปุ่มเดียว:

โทรคลิก();

2.2 หากมีปุ่มเปลี่ยนหลายปุ่ม:

โทรคลิก(n);

ที่ไหน n- จำนวนเหตุการณ์ที่ควรเรียก

2.3 หากคุณต้องการทริกเกอร์เหตุการณ์จากภาพเคลื่อนไหวโดยไม่มีการเปลี่ยนแปลง ให้ใช้โค้ดต่อไปนี้:

กิจกรรมการโทร (n);

ที่ไหน n- จำนวนเหตุการณ์ที่ควรเรียก

คุณสมบัติของการใช้แบนเนอร์ยืด (ยาง)

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

นอกจากนี้ยังมีปุ่มขนาดและตำแหน่งขนาดสำหรับองค์ประกอบในแผงตำแหน่งและขนาด


4. การเผยแพร่โครงการ

ควรเผยแพร่โปรเจ็กต์ด้วยการตั้งค่าต่อไปนี้:

หลังจากเผยแพร่โครงการแล้ว ให้เก็บถาวรในรูปแบบ .zip- โฆษณาของคุณพร้อมที่จะอัปโหลดไปยังแบนเนอร์ ADFOX แล้ว

บทความที่เกี่ยวข้อง