ตัวอย่างภาพเคลื่อนไหวของ Adobe การเตรียมโฆษณาในโปรแกรมแก้ไข HTML ส่วนประกอบภาพเคลื่อนไหว

ในการเตรียมโฆษณา 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

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

หากมีหลายปุ่ม ให้เพิ่มโค้ดต่อไปนี้ในโค้ดสำหรับการเรียกเหตุการณ์ 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("click", function (e) ( var t = e.nativeEvent; if (t.ซึ่ง == 1 || t. ปุ่ม == 0) ( window.callClick(n); )); this.stopCycle = true; )

ที่ไหน 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("คลิก",ขยายBanner.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- จำนวนเหตุการณ์ที่ควรเรียก

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

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

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

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

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

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

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

ปรับปรุงเมื่อวันที่ 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 ในอนาคต)

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

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

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

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

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

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

มาสร้างไฟล์ใหม่ทำให้มีขนาด 800x600 แล้วถ่ายโอนไฟล์บางไฟล์ลงไปนั่นคือรูปภาพสองสามรูปและ "noise of the Forest mp3" นั่นคือเสียง ฉันจะย้ายมันมาที่นี่ ผลลัพธ์ที่ได้คือภาพนี้ มันคือป่า เรียกว่า "bg" "เล่น" และ "หยุดชั่วคราว" ซึ่งเป็นปุ่มต่างๆ ฉันจะย้ายพวกมันลงตอนนี้ ย้ายพวกมัน แบบนี้ - ตัวเลือกที่ง่ายที่สุด

ตอนนี้ฉันจะเริ่มแอนิเมชั่น กด ctr+enter มีเพียงฟอเรสต์และมีเพียงสองปุ่ม ไม่มีอะไรทำงาน หากฉันต้องการให้เล่นเสียงโดยอัตโนมัติให้ฉัน เรียกว่า "เสียงป่า" ฉันต้องเลือกเลเยอร์นี้แล้วเลือก "เล่นอัตโนมัติ" ตอนนี้เมื่อฉันกด cntr+enter เสียงก็จะเล่น อัศจรรย์.

วิธีเพิ่มลิงก์ที่คลิกได้ลงในวิดีโอใน Adobe Edge Animate

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

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

สมมติว่าคุณมี วิดีโอที่สร้างด้วย Adobe Edge Animateเมื่อคุณคลิกมัน หน้า Landing Page ที่ต้องการจะเปิดขึ้น มันจะอยู่ในรูปแบบภาพเคลื่อนไหว Edge และบันทึกในโฟลเดอร์ที่มีซอร์สโค้ดและสคริปต์ Java เปิดในโปรแกรมแก้ไขข้อความใด ๆ คุณสามารถใช้โปรแกรมแก้ไขทดสอบใด ๆ เช่น: แผ่นจดบันทึก ฯลฯ

วิธีวนซ้ำภาพเคลื่อนไหวใน Adobe Edge Animate นั่นคือวิธีทำให้เมื่อเล่นจนจบจะเริ่มต้นใหม่อีกครั้งจากจุดเริ่มต้นและดำเนินต่อไปตลอดไป

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

สมมติว่าคุณมีแบนเนอร์ที่สร้างใน Adobe Edge Animate เมื่อคุณคลิกที่แบนเนอร์ Landing Page ที่ต้องการจะเปิดขึ้น โดยจะอยู่ในรูปแบบภาพเคลื่อนไหว Edge และบันทึกในโฟลเดอร์ที่มีซอร์สโค้ดและสคริปต์ Java เปิดในโปรแกรมแก้ไขข้อความใด ๆ คุณสามารถใช้โปรแกรมแก้ไขทดสอบใด ๆ เช่น: แผ่นจดบันทึก ฯลฯ

ต่อไป ฉันต้องการแทรกแบนเนอร์นี้ลงในไซต์ ควรทำอย่างไร? คุณต้องดาวน์โหลดไฟล์ดัชนีจากนั้นเปิดในโปรแกรมแก้ไขข้อความคัดลอกโค้ด Adobe Edge และในตอนท้ายให้เพิ่มโค้ดที่นี่หน้า "head" จากนั้นอยู่หน้าชื่อของสถานที่ที่เราจะเพิ่มแบนเนอร์ของเราก่อน div เพื่อการดำเนินการที่แม่นยำยิ่งขึ้น มีคำแนะนำที่จะช่วยคุณ: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit หลังจากนั้น เราบันทึกและไปที่บริการ FTP ฉันใช้ filezilla ค้นหาตำแหน่งที่เก็บข้อมูลของเว็บไซต์ของคุณ และคัดลอกโฟลเดอร์ดัชนีไปยังไฟล์ของคุณซึ่งอยู่บนเซิร์ฟเวอร์ แทนที่ไฟล์ปัจจุบัน ต่อไปเราจะดาวน์โหลดสคริปต์ Java ทั้งหมดและอัปเดตไซต์ ทุกอย่างพร้อมแล้ว - แอนิเมชั่นใช้งานได้และแท็บที่มีหน้า Landing Page จะเปิดขึ้นด้วย

หากคุณสนใจบทเรียนดังกล่าว ติดตามช่องของฉัน เพราะ... จะมีวิดีโอใหม่มากมายในอนาคตอันใกล้นี้ - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – สมมติว่าคุณมีแบนเนอร์ที่สร้างภาพเคลื่อนไหวใน Adobe Edge

01:30 – เพิ่มแบนเนอร์ในเว็บไซต์

02:09 – เพิ่มโค้ดก่อนแท็ก “head”

02:50 – คำแนะนำในการเพิ่มแบนเนอร์ลงในไซต์

03:31 – อัพโหลดไฟล์ไปยังเซิร์ฟเวอร์

05:29 – เราอัปเดตเว็บไซต์และทุกอย่างพร้อมแล้ว!

เข้าร่วมและถามคำถาม:

ดาวน์โหลดเทมเพลต Muse ฟรีสามเทมเพลต: http://site/free-landing.html

http://vk.com/adobeedgeanimate

ฉันใช้ VKontakte: http://vk.com/danilfimushkin

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

00:17 – เราเริ่มสร้างภาพเคลื่อนไหวภาพประกอบเวกเตอร์ใน Edge Animate
14:06 – สร้างการเคลื่อนไหวของอุ้งเท้าของตัวละคร
16:54 – ข้อดีของสัญลักษณ์ที่ซ้อนกัน
17:48 – อะไรคือสัญลักษณ์ที่ซ้อนกัน
18:24 – เขียนแอนิเมชั่นวนซ้ำ
19:42 – แอนิเมชั่นแบบวนซ้ำพร้อมแล้ว
23:40 – กระพริบตา
26:54 – กำหนดชื่อไฟล์เมื่อทำการบันทึก
27:57 – แอนิเมชั่นของข้อความ “ดรอปดาวน์”
28:39 – การแนบเส้นโค้งการเคลื่อนไหว – การเปลี่ยนแกนแอนิเมชั่น
30:03 – บทสรุประหว่างกลางของแอนิเมชั่น การสร้างภูมิทัศน์ที่เต็มไปด้วยหิมะ และสร้างภาพเคลื่อนไหวของเกล็ดหิมะ
33:39 – รีวิว Edge Animate
34:52 – การบ้าน
35:25 – วิธีเพิ่มลิงค์ที่ใช้งานอยู่
39:09 – การสร้างปุ่มหลายปุ่มและแนบลิงก์

เข้าร่วมและถามคำถาม: http://vk.com/adobeedgeanimate