H5 頁(yè)面設(shè)計(jì)（Mugeda版）全套教學(xué)課件

現(xiàn)代

編著技術(shù)數(shù)字第1章認(rèn)識(shí)H5頁(yè)面H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）全套可編輯PPT課件1.1H5概述1.2H5頁(yè)面的設(shè)計(jì)原則1.3H5頁(yè)面的設(shè)計(jì)規(guī)范1.4H5頁(yè)面的設(shè)計(jì)流程1631.1.1H5是什么而H5則是HTML5的縮寫(xiě)，HTML5是第5代超文本標(biāo)記語(yǔ)言的簡(jiǎn)稱。，使用HTML5制作的頁(yè)面不僅視覺(jué)效果有較大的提升，還具有較強(qiáng)的可操作性與互動(dòng)性，并且展示方式多樣、表現(xiàn)形式豐富、視聽(tīng)效果好。HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）“超文本”指的是頁(yè)面內(nèi)可以包含圖片、鏈接、音樂(lè)、程序等非文字元素，“標(biāo)記”則代表這些超文本必須通過(guò)起始標(biāo)簽和結(jié)束標(biāo)簽進(jìn)行標(biāo)記?！?022大話之旅”H5頁(yè)面1.1.2H5頁(yè)面的基本特點(diǎn)H5頁(yè)面可以在各種操作系統(tǒng)（如Windows、macOS、iOS和Android等）和不同設(shè)備（如計(jì)算機(jī)設(shè)備、移動(dòng)設(shè)備和智能電視等）上展示，具有極強(qiáng)的兼容性。兼容性強(qiáng)支持多媒體互動(dòng)性強(qiáng)H5頁(yè)面中可以包含文字、圖像、動(dòng)畫(huà)、音頻、視頻等媒體元素，設(shè)計(jì)師可以綜合應(yīng)用多種媒體元素設(shè)計(jì)出具有吸引力的H5頁(yè)面，從而更好地傳遞信息，提升用戶體驗(yàn)。H5頁(yè)面可以通過(guò)手勢(shì)交互、硬件交互（如攝像頭、陀螺儀等）以及技術(shù)交互（如滑動(dòng)、拖動(dòng)、點(diǎn)擊等）等方式，實(shí)現(xiàn)更多樣化、個(gè)性化的互動(dòng)，以增強(qiáng)用戶的參與感，提升用戶體驗(yàn)和留存率。1.1.3H5頁(yè)面的應(yīng)用活動(dòng)宣傳產(chǎn)品展示或推廣品牌宣傳公益宣傳1.1.4H5頁(yè)面的風(fēng)格扁平化風(fēng)格水墨風(fēng)格實(shí)景風(fēng)格1.1.4H5頁(yè)面的風(fēng)格科技風(fēng)格卡通風(fēng)格混合風(fēng)格1.2H5概述1.1H5頁(yè)面的設(shè)計(jì)原則1.3H5頁(yè)面的設(shè)計(jì)規(guī)范1.4H5頁(yè)面的設(shè)計(jì)流程1.2.1一致性原則一致性原則貫穿H5頁(yè)面設(shè)計(jì)的全過(guò)程，在設(shè)計(jì)H5頁(yè)面時(shí)，頁(yè)面的版式、文字字體，以及圖片或圖形的顏色、風(fēng)格、色調(diào)等要做到基本統(tǒng)一和協(xié)調(diào)；在展示頁(yè)面內(nèi)容時(shí)，內(nèi)容主題和動(dòng)效風(fēng)格設(shè)置需要保持一致等。“AE動(dòng)效設(shè)計(jì)”課程的H5頁(yè)面該頁(yè)面均以藍(lán)色為背景色，以黃色和黑色為輔助色，采用扁平化風(fēng)格，以及與風(fēng)格統(tǒng)一的圖形和文字元素，直觀地展現(xiàn)了課程信息。1.2.2簡(jiǎn)潔性原則在設(shè)計(jì)H5頁(yè)面時(shí)需始終堅(jiān)持簡(jiǎn)潔性原則，可對(duì)內(nèi)容進(jìn)行刪減并簡(jiǎn)化布局，專注于核心內(nèi)容的展示，避免過(guò)多的裝飾和復(fù)雜的元素，同時(shí)適當(dāng)留白，使頁(yè)面看起來(lái)清晰和整潔，以幫助用戶更好地理解H5頁(yè)面中的內(nèi)容。“一顆膠囊的神奇之旅”H5頁(yè)面該頁(yè)面在內(nèi)容上采用圖文搭配的方式，圖片直觀、簡(jiǎn)潔，無(wú)過(guò)多裝飾，直接展現(xiàn)需要傳達(dá)的內(nèi)容；簡(jiǎn)明、扼要的文字則對(duì)圖片內(nèi)容進(jìn)行解釋，使頁(yè)面更加清晰、易懂。1.2.3條理性原則在設(shè)計(jì)H5頁(yè)面前需要梳理內(nèi)容，分清主次關(guān)系，先展示比較簡(jiǎn)單的內(nèi)容，然后依次展示更復(fù)雜的內(nèi)容，由易到難，循序漸進(jìn)。為了避免用戶難以理解內(nèi)容，在進(jìn)行H5頁(yè)面設(shè)計(jì)時(shí)最好做到“一個(gè)頁(yè)面只講一件事”?！膀v訊應(yīng)急”H5頁(yè)面”該H5頁(yè)面共5個(gè)場(chǎng)景，分別為校園、家庭、鄉(xiāng)村、社區(qū)、企業(yè)，各場(chǎng)景內(nèi)容主次分明、條理清楚。1.2.4切身性原則切身性原則需要設(shè)計(jì)師從用戶熟悉的生活和熱點(diǎn)事件中尋找突破點(diǎn)或共鳴點(diǎn)，并將其以創(chuàng)意的方式呈現(xiàn)出來(lái)。例如運(yùn)用動(dòng)畫(huà)、插畫(huà)、互動(dòng)性元素等來(lái)營(yíng)造令人印象深刻的視覺(jué)效果，引發(fā)用戶共鳴，加深用戶印象，從而達(dá)到信息傳播的目的。品牌招商H5頁(yè)面該H5頁(yè)面以用戶切身關(guān)注的問(wèn)題為出發(fā)點(diǎn)（如牧場(chǎng)、牧草、土地和奶牛等是否優(yōu)質(zhì)），然后通過(guò)對(duì)產(chǎn)品的詳細(xì)介紹，使用戶能感受到該品牌對(duì)這些問(wèn)題的注重程度，引發(fā)用戶的共鳴和認(rèn)同。1.2.5創(chuàng)新性原則運(yùn)用圖片、視頻、動(dòng)畫(huà)等媒體元素，使頁(yè)面更加生動(dòng)、有趣；或是通過(guò)講述一個(gè)有趣的故事或在頁(yè)面中呈現(xiàn)一個(gè)生動(dòng)的場(chǎng)景，以彰顯頁(yè)面的設(shè)計(jì)感。使用不同的字體、大小、顏色和樣式，創(chuàng)造出獨(dú)特的視覺(jué)效果，也可以使用有趣的文案和口號(hào)來(lái)吸引用戶的注意力，并激發(fā)他們的興趣?！胺蛉舜伞の骱{(lán)”H5頁(yè)面該頁(yè)面采用插畫(huà)的方式將產(chǎn)品融入生活場(chǎng)景中，在具有美觀性的同時(shí)也具有創(chuàng)新性。1.3H5概述1.1H5頁(yè)面的設(shè)計(jì)原則1.2H5頁(yè)面的設(shè)計(jì)規(guī)范1.4H5頁(yè)面的設(shè)計(jì)流程1.3.1頁(yè)面尺寸手機(jī)是最常見(jiàn)的終端設(shè)備之一，設(shè)計(jì)H5頁(yè)面時(shí)可根據(jù)特定手機(jī)型號(hào)的屏幕尺寸進(jìn)行設(shè)計(jì)。雖然型號(hào)不同的手機(jī)尺寸不同，但目前H5頁(yè)面普遍采用的頁(yè)面尺寸是在640像素×1136像素的基礎(chǔ)上，減去微信或?yàn)g覽器觀看時(shí)的手機(jī)頂部高度128像素，得到最終的H5頁(yè)面尺寸640像素×1008像素。1.3.2頁(yè)面適配為了確保制作完成后的H5頁(yè)面能夠適配不同屏幕尺寸的手機(jī)，很多H5制作工具或平臺(tái)都有“自動(dòng)適配”功能，只需選擇一種手機(jī)屏幕尺寸進(jìn)行設(shè)計(jì)，即可實(shí)現(xiàn)對(duì)其他手機(jī)屏幕尺寸的適配。為了避免使用“自動(dòng)適配”功能后，仍出現(xiàn)部分頁(yè)面邊緣區(qū)域無(wú)法完整顯示的情況出現(xiàn)，設(shè)計(jì)師可以將重要內(nèi)容居中放在安全框中（安全框指手機(jī)屏幕中可以完整顯示內(nèi)容的安全區(qū)域，該區(qū)域不會(huì)被屏幕裁剪或者遮擋），以確保其在各種屏幕上都能夠清晰展示。為了測(cè)試頁(yè)面適配效果，可以生成二維碼并在手機(jī)端進(jìn)行預(yù)覽，這樣可以更準(zhǔn)確地判斷頁(yè)面在手機(jī)上的實(shí)際顯示效果，以進(jìn)行調(diào)整和優(yōu)化。0102031.3.3文件大小Mugeda平臺(tái)要求一張圖片不超過(guò)10MB，一個(gè)視頻不超過(guò)20MB。當(dāng)圖片或視頻過(guò)大時(shí)，可對(duì)素材進(jìn)行壓縮。圖片壓縮視頻壓縮壓縮視頻可以使用專業(yè)的多媒體文件處理軟件，如格式工廠等。也可使用一些在線編輯器來(lái)完成，如Video2Edit等，設(shè)計(jì)師無(wú)須下載和安裝，只需在其網(wǎng)站首頁(yè)選擇“壓縮影片”選項(xiàng)，打開(kāi)“在線壓縮視頻”頁(yè)面，將需要壓縮的視頻拖動(dòng)到紫色的方塊中，在其下方還可設(shè)置文件大小和格式，單擊“開(kāi)始”按鈕后便可壓縮視頻。1.4H5概述1.1H5頁(yè)面的設(shè)計(jì)原則1.2H5頁(yè)面的設(shè)計(jì)規(guī)范1.3H5頁(yè)面的設(shè)計(jì)流程1.4.1明確設(shè)計(jì)目的在設(shè)計(jì)之初，客戶往往會(huì)提供設(shè)計(jì)需求，設(shè)計(jì)師需要先仔細(xì)閱讀設(shè)計(jì)需求，理解H5頁(yè)面的整體目標(biāo)和設(shè)計(jì)目的。明確到底要做什么，需要在其中表達(dá)什么內(nèi)容，并將重點(diǎn)信息羅列出來(lái)，確定H5頁(yè)面所要實(shí)現(xiàn)的具體目標(biāo)，如宣傳企業(yè)形象、提高品牌知名度、推廣產(chǎn)品或服務(wù)等，為H5頁(yè)面的內(nèi)容策劃提供方向。1.4.2策劃內(nèi)容1.構(gòu)建內(nèi)容大綱用戶分析了解目標(biāo)用戶的年齡、性別、受教育程度、興趣和行為習(xí)慣，分析目標(biāo)用戶的需求和期望，確定內(nèi)容大綱中需要包含的關(guān)鍵信息。品牌分析了解品牌的核心價(jià)值觀、聲譽(yù)和風(fēng)格定位，確定H5頁(yè)面應(yīng)體現(xiàn)品牌的哪些信息，以及如何對(duì)品牌進(jìn)行宣傳與推廣。產(chǎn)品分析了解產(chǎn)品的功能、賣(mài)點(diǎn)和定位，確定H5頁(yè)面應(yīng)展示產(chǎn)品的哪些方面，如何提升更多用戶對(duì)產(chǎn)品的了解程度，以及如何營(yíng)銷(xiāo)和推廣產(chǎn)品。1.4.2策劃內(nèi)容2.規(guī)劃結(jié)構(gòu)和內(nèi)容根據(jù)內(nèi)容大綱，對(duì)主要內(nèi)容的相關(guān)性和從屬關(guān)系進(jìn)行組織和劃分，考慮哪些內(nèi)容需要在同一頁(yè)展示，哪些內(nèi)容可以分散到不同頁(yè)面中展示。根據(jù)內(nèi)容的數(shù)量和相關(guān)性，確定H5頁(yè)面的結(jié)構(gòu)和頁(yè)數(shù)?？紤]整體的敘述邏輯和頁(yè)面間的銜接性，確保用戶能夠順利瀏覽和理解每一頁(yè)內(nèi)容。根據(jù)設(shè)計(jì)目的和內(nèi)容需求，確定每一頁(yè)的重點(diǎn)和焦點(diǎn)，明確每一頁(yè)要傳達(dá)的主題和核心信息。根據(jù)內(nèi)容大綱和設(shè)計(jì)需求，決定每項(xiàng)內(nèi)容的呈現(xiàn)形式，如文本、圖片、視頻、動(dòng)畫(huà)等，考慮如何利用空間和媒體元素來(lái)傳達(dá)信息，以吸引用戶的注意力。組織相關(guān)內(nèi)容劃分頁(yè)面結(jié)構(gòu)確定每一頁(yè)的核心內(nèi)容決定內(nèi)容的呈現(xiàn)形式1.4.2策劃內(nèi)容3.選擇內(nèi)容風(fēng)格選擇合適的風(fēng)格能夠提升H5頁(yè)面的吸引力、可讀性和用戶體驗(yàn)。不同的內(nèi)容其適合的風(fēng)格存在差別，設(shè)計(jì)師可以從目標(biāo)用戶和品牌的需求等方面進(jìn)行考慮。另外，不同風(fēng)格的設(shè)計(jì)效果不同，設(shè)計(jì)師應(yīng)注意選擇合適的表現(xiàn)方式，如扁平化風(fēng)格強(qiáng)調(diào)簡(jiǎn)潔和平面化，常采用簡(jiǎn)單、明快的圖形和色塊來(lái)表現(xiàn)。1.4.2策劃內(nèi)容4.組織和布局內(nèi)容設(shè)計(jì)師常通過(guò)軟件或手繪的方式繪制H5頁(yè)面原型圖，在繪制原型圖的過(guò)程中，設(shè)計(jì)師還可與企業(yè)管理者、產(chǎn)品管理者、內(nèi)容策劃者等溝通，確保在進(jìn)行H5頁(yè)面的設(shè)計(jì)時(shí)能夠更加全面地了解設(shè)計(jì)內(nèi)容、設(shè)計(jì)難點(diǎn)和設(shè)計(jì)周期等情況。1.4.3搜集素材完成原型圖的繪制后，需要根據(jù)原型圖標(biāo)注的內(nèi)容來(lái)搜集素材，常見(jiàn)的素材有文案、圖片、視頻、音效等。通常來(lái)說(shuō)，與企業(yè)產(chǎn)品和活動(dòng)相關(guān)的文字、圖片、視頻等資源，主要由企業(yè)提供，設(shè)計(jì)師也可以前往企業(yè)進(jìn)行拍攝與錄制等；頁(yè)面設(shè)計(jì)的裝飾素材、美化素材，如頁(yè)面背景、按鈕、圖標(biāo)等素材，可以通過(guò)網(wǎng)絡(luò)下載，或由設(shè)計(jì)師自行設(shè)計(jì)。1.4.4進(jìn)行頁(yè)面設(shè)計(jì)在Mugeda中選擇合適的模板，并將之前搜集的素材添加到編輯器中，替換模板內(nèi)容。使用模板設(shè)計(jì)H5頁(yè)面使用圖像工具設(shè)計(jì)H5頁(yè)面直接使用Mugeda設(shè)計(jì)H5頁(yè)面使用圖像工具設(shè)計(jì)H5頁(yè)面時(shí)多使用Photoshop、Illustrator等。在設(shè)計(jì)時(shí)可根據(jù)原型圖的要求繪制頁(yè)面，再將完成后的頁(yè)面導(dǎo)入Mugeda中。Mugeda是一款專業(yè)的H5編輯器，設(shè)計(jì)師可直接在其中使用各種工具繪制和調(diào)整圖形，添加媒體文件與文字等，完成H5頁(yè)面的設(shè)計(jì)。1.4.5進(jìn)行交互設(shè)計(jì)使用模板設(shè)計(jì)的H5頁(yè)面，大多已經(jīng)包含交互效果。而對(duì)于使用圖像工具或直接使用Mugeda設(shè)計(jì)的H5頁(yè)面，則要根據(jù)需求依次對(duì)頁(yè)面中的元素添加動(dòng)畫(huà)、音效、互動(dòng)等，使其具有交互效果。在Mugeda中為節(jié)約用水H5頁(yè)面添加預(yù)設(shè)動(dòng)畫(huà)1.4.6生成和發(fā)布H5完成H5的交互設(shè)計(jì)后，即可預(yù)覽完成后的效果。若需要將H5發(fā)布到微信或網(wǎng)頁(yè)中，可在發(fā)布頁(yè)面通過(guò)二維碼或鏈接的方式生成與發(fā)布H5。節(jié)約用水H5廣告的發(fā)布頁(yè)面祝學(xué)習(xí)進(jìn)步?。5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第2章Mugeda的基本操作H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）2.1初識(shí)Mugedea2.2新建、管理和發(fā)布H52.3模板管理與素材管理2.4Mugeda中的H5編輯器界面2.1.1認(rèn)識(shí)Mugeda平臺(tái)Mugeda除了可用于H5的制作外，還可用于一站式制作有關(guān)App、微信公眾號(hào)、網(wǎng)頁(yè)等的內(nèi)容，以及編輯與處理圖片、視頻、數(shù)據(jù)圖表等素材，充分滿足大部分內(nèi)容生產(chǎn)者的需求。Mugeda內(nèi)置功能強(qiáng)大的API，擁有業(yè)界較強(qiáng)的動(dòng)畫(huà)編輯能力和較為自由的創(chuàng)作空間，設(shè)計(jì)師和團(tuán)隊(duì)在瀏覽器中就可以直接使用Mugeda創(chuàng)建表現(xiàn)力豐富的交互動(dòng)畫(huà)，高效地完成H5的制作發(fā)布、賬號(hào)管理、協(xié)同工作、數(shù)據(jù)收集等。2.1.2Mugeda的優(yōu)勢(shì)和功能Mugeda的操作界面干凈、簡(jiǎn)潔，設(shè)計(jì)師易上手，學(xué)習(xí)成本不高。操作簡(jiǎn)單提供可視化制作工具支持跨平臺(tái)Mugeda提供了直觀的可視化制作工具，讓設(shè)計(jì)師可以在不編寫(xiě)代碼的情況下，通過(guò)拖曳、調(diào)整屬性和設(shè)置參數(shù)等簡(jiǎn)單的操作，完成復(fù)雜的交互設(shè)計(jì)。Mugeda制作的H5作品可在多種平臺(tái)和設(shè)備上播放，設(shè)計(jì)師可通過(guò)生成二維碼或者導(dǎo)出發(fā)布的方式，將作品分享給其他人，讓他們可以隨時(shí)隨地瀏覽H5作品。1.Mugeda的優(yōu)勢(shì)2.1.2Mugeda的優(yōu)勢(shì)和功能2.Mugeda的功能云計(jì)算功能矢量造型功能動(dòng)畫(huà)設(shè)計(jì)功能導(dǎo)出功能企業(yè)賬號(hào)和團(tuán)隊(duì)管理功能2.2初識(shí)Mugedea2.1新建、管理和發(fā)布H52.3模板管理與素材管理2.4Mugeda中的H5編輯器界面2.2.1新建H5頁(yè)面登錄Mugeda后，在工作臺(tái)首頁(yè)的左側(cè)導(dǎo)航窗格中，單擊“新建作品”按鈕，在打開(kāi)的下拉列表中羅列了可新建的作品類(lèi)目。選擇“H5（專業(yè)版編輯器）”選項(xiàng)后，將自動(dòng)打開(kāi)Mugeda的H5編輯器界面，并自動(dòng)打開(kāi)“新建”對(duì)話框，其中羅列了常用的H5頁(yè)面尺寸，若需要重新自定義尺寸，可在“自定義”欄中輸入W和H的數(shù)值，然后單擊“創(chuàng)建”按鈕，完成新建操作。01022.2.2管理H5作品1.新建文件夾在“H5作品”頁(yè)面中單擊“新建文件夾”按鈕，打開(kāi)“新建文件夾”對(duì)話框。在該對(duì)話框的“文件夾名稱”文本框中輸入文件夾名稱，單擊“確定”按鈕。然后，可發(fā)現(xiàn)在作品的左側(cè)有一個(gè)新建的文件夾。2.2.2管理H5作品2.移動(dòng)H5作品選擇要移動(dòng)的H5作品，此時(shí)可發(fā)現(xiàn)選擇的H5作品的左上角的復(fù)選框呈選中狀態(tài)，此時(shí)在頁(yè)面右側(cè)將出現(xiàn)“移動(dòng)到”按鈕，單擊該按鈕，打開(kāi)“移動(dòng)H5”對(duì)話框，在其中選擇目標(biāo)文件夾，單擊“確定”按鈕。此時(shí)將出現(xiàn)“提示”對(duì)話框，提示是否進(jìn)行移動(dòng)操作，單擊“確定”按鈕，可發(fā)現(xiàn)H5作品已經(jīng)移動(dòng)到選擇的目標(biāo)文件夾中。2.2.2管理H5作品3.重命名H5作品為了便于識(shí)別H5作品，可對(duì)其進(jìn)行重命名操作。選擇要重命名的H5作品，單擊右下角的按鈕，此時(shí)可發(fā)現(xiàn)名稱欄呈可編輯狀態(tài)，在其中輸入新的名稱，然后單擊其他空白區(qū)域，完成重命名操作。2.2.2管理H5作品4.刪除H5作品選擇要?jiǎng)h除的H5作品，單擊作品上方的按鈕，或直接單擊頁(yè)面右上角的按“刪除”鈕，會(huì)打開(kāi)“刪除項(xiàng)目”對(duì)話框，單擊“確定”按鈕，完成刪除操作。2.2.3發(fā)布H5作品發(fā)布H5作品查看發(fā)布結(jié)果任何作品在第一次發(fā)布時(shí)都將顯示發(fā)布進(jìn)度，發(fā)布成功后顯示“發(fā)布成功！”提示，并會(huì)在“發(fā)布地址”欄中顯示作品的地址。2.3初識(shí)Mugedea2.1新建、管理和發(fā)布H52.2模板管理與素材管理2.4Mugeda中的H5編輯器界面2.3.1將H5作品轉(zhuǎn)換為模板在“我的作品”頁(yè)面中選擇要轉(zhuǎn)換為模板的H5作品，單擊按鈕，按鈕下方會(huì)彈出下拉列表，選擇“轉(zhuǎn)為私有模板”選項(xiàng)，彈出模板轉(zhuǎn)換成功提示對(duì)話框，單擊“查看”按鈕，進(jìn)入“我的模板”頁(yè)面，查看新生成的模板。2.3.2模板管理預(yù)覽模板選擇需要預(yù)覽的模板，單擊“預(yù)覽”按鈕，可在打開(kāi)的頁(yè)面中預(yù)覽模板效果。編輯模板選擇需要編輯的模板，單擊“使用”按鈕，打開(kāi)“選擇編輯器”對(duì)話框。然后根據(jù)需要選擇對(duì)應(yīng)的編輯方式，即可進(jìn)入編輯頁(yè)面中編輯模板。共享模板選擇需要共享的模板，單擊其下方的“共享”超鏈接，在打開(kāi)的提示對(duì)話框中單擊“確認(rèn)”按鈕，即可在團(tuán)隊(duì)與企業(yè)賬號(hào)內(nèi)部成員之間共享該模板。2.3.3素材管理編輯素材選擇需要編輯的素材，單擊按鈕，打開(kāi)“編輯圖片文件”頁(yè)面，在其中可對(duì)素材進(jìn)行刪除、打開(kāi)、選擇、裁剪、旋轉(zhuǎn)、導(dǎo)出等操作。編輯文件夾在“素材庫(kù)”頁(yè)面中，單擊“新建文件夾”按鈕，可新建一個(gè)文件夾。若要編輯文件夾，可單擊選中的文件夾右側(cè)的按鈕，利用彈出的下拉列表中的選項(xiàng)進(jìn)行添加子文件夾、編輯文件夾名、刪除文件夾等操作。2.4初識(shí)Mugedea2.1新建、管理和發(fā)布H52.2模板管理與素材管理2.3Mugeda中的H5編輯器界面2.4.1菜單欄1.“文件”菜單項(xiàng)“文件”菜單項(xiàng)中包括對(duì)H5頁(yè)面進(jìn)行管理和對(duì)文件資源進(jìn)行基本處理的命令。2.“編輯”菜單項(xiàng)“編輯”菜單項(xiàng)中包括H5頁(yè)面基本編輯操作的相關(guān)命令，設(shè)計(jì)師可通過(guò)這些命令增強(qiáng)H5頁(yè)面效果，從而創(chuàng)造出豐富多樣的交互內(nèi)容。2.4.1菜單欄3.“視圖”菜單項(xiàng)“視圖”菜單項(xiàng)主要用于調(diào)整Mugeda各個(gè)窗口（面板）的顯示與隱藏情況?！?.“動(dòng)畫(huà)”菜單項(xiàng)動(dòng)畫(huà)”菜單項(xiàng)主要用于對(duì)動(dòng)畫(huà)進(jìn)行插入與編輯操作。VS2.4.1菜單欄“拓展工具”菜單項(xiàng)主要用于對(duì)第三方應(yīng)用軟件進(jìn)行相關(guān)操作。“幫助”菜單項(xiàng)主要用于為設(shè)計(jì)師提供有關(guān)Mugeda的幫助和支持。5.“拓展工具”菜單項(xiàng)6.“幫助”菜單項(xiàng)2.4.2工具欄工具欄默認(rèn)位于菜單欄的下方，主要展示了常用工具。2.4.3“時(shí)間線”面板“時(shí)間線”面板是用來(lái)對(duì)畫(huà)面進(jìn)行精確控制的操作區(qū)，可通過(guò)把圖層、圖像、幀按時(shí)間進(jìn)行組合和播放來(lái)形成動(dòng)畫(huà)?！皶r(shí)間線”面板可用于制作多種動(dòng)畫(huà)，如關(guān)鍵幀動(dòng)畫(huà)、進(jìn)度動(dòng)畫(huà)、變形動(dòng)畫(huà)、遮罩動(dòng)畫(huà)等，是制作動(dòng)畫(huà)的關(guān)鍵。2.4.4工具箱工具箱集合了H5頁(yè)面設(shè)計(jì)過(guò)程中頻繁使用的工具，包含選擇、媒體、繪制、預(yù)置考題、控件、表單、微信七大工具板塊。2.4.5“頁(yè)面編輯”面板“頁(yè)面編輯”面板主要用于展示H5作品各頁(yè)面的縮略圖，以及進(jìn)行插入、刪除、預(yù)覽和復(fù)制等操作。2.4.6頁(yè)面編輯區(qū)頁(yè)面編輯區(qū)位于“頁(yè)面編輯”面板和“屬性”面板之間，頁(yè)面編輯區(qū)主要由頁(yè)面適配方式、手機(jī)型號(hào)、舞臺(tái)縮放和舞臺(tái)4個(gè)部分組成。2.4.6頁(yè)面編輯區(qū)1.頁(yè)面適配方式選擇好適配方式后，頁(yè)面編輯區(qū)中會(huì)出現(xiàn)一個(gè)方框指示指定設(shè)備的安全框。如果舞臺(tái)上添加的內(nèi)容超出了指定設(shè)備的安全框，方框會(huì)顯示為紅色，以提示設(shè)計(jì)師需要調(diào)整元素位置；如果沒(méi)有元素超出安全框，方框會(huì)顯示為綠色。為了方便設(shè)計(jì)師更好地編輯內(nèi)容，防止內(nèi)容在設(shè)備上超出可見(jiàn)顯示范圍（安全框），Mugeda提供了顯示屏幕適配范圍的輔助線。設(shè)計(jì)師只需單擊頁(yè)面適配方式右側(cè)的下拉按鈕，在打開(kāi)的下拉列表中將顯示各種適配方式，設(shè)計(jì)師可根據(jù)手機(jī)型號(hào)選擇合適的適配方式。2.4.6頁(yè)面編輯區(qū)2.手機(jī)型號(hào)“無(wú)”選項(xiàng)的效果“華為Mate40”選項(xiàng)的安全框效果“小米2”選項(xiàng)的安全框效果2.4.6頁(yè)面編輯區(qū)3.舞臺(tái)縮放4.舞臺(tái)舞臺(tái)位于頁(yè)面編輯區(qū)中間，是設(shè)計(jì)H5頁(yè)面的核心區(qū)域，也是H5作品的顯示窗口。發(fā)布H5作品后，用戶只能瀏覽舞臺(tái)中的內(nèi)容，而舞臺(tái)四周灰色區(qū)域中的內(nèi)容將不會(huì)顯示。VS舞臺(tái)縮放主要用于調(diào)整舞臺(tái)的縮放比例，方便H5設(shè)計(jì)師在創(chuàng)作過(guò)程中觀察作品局部的細(xì)節(jié)或查看H5作品的整體效果。2.4.7“屬性”面板基礎(chǔ)屬性主要用于對(duì)基礎(chǔ)屬性，如作品尺寸、填充色、邊框色、邊框類(lèi)型、透明度、透視度等進(jìn)行設(shè)置。高級(jí)屬性主要用于對(duì)預(yù)置動(dòng)畫(huà)、濾鏡、動(dòng)作等進(jìn)行設(shè)置。專有屬性主要用于設(shè)置在舞臺(tái)上所選元素的特有屬性，所選元素不同，其屬性內(nèi)容也存在區(qū)別。祝學(xué)習(xí)進(jìn)步??！H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第3章繪制與調(diào)整圖形H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）3.1繪制圖形3.2調(diào)整圖形3.3圖形的排列與組合3.1.1直線繪制直線繪制斜線繪制豎線繪制直線后，在右側(cè)的“屬性”面板中可設(shè)置直線的基本屬性，包括長(zhǎng)、寬、高，以及填充顏色、位置等。除此之外，在“端點(diǎn)”下拉列表中可設(shè)置端點(diǎn)樣式，包括尖角、圓角、方角。3.1.2矩形繪制矩繪制正方形矩形可用作H5頁(yè)面的背景裝飾，增強(qiáng)頁(yè)面的美感和層次感；也可用于繪制圖表和展示進(jìn)度條；還可用作圖片或文字的容器，以方便在頁(yè)面中凸顯圖片和文字。在工具箱中選擇“矩形”工具或按【R】鍵，在舞臺(tái)上按住鼠標(biāo)左鍵不放并向某個(gè)方向拖曳可繪制矩形。如果拖曳的同時(shí)按住Shift】鍵，可繪制正方形。3.1.3橢圓繪制圓“OPPOR9s拍照體驗(yàn)季”H5頁(yè)面效果橢圓可以用來(lái)強(qiáng)調(diào)H5頁(yè)面中的重點(diǎn)內(nèi)容或元素，也可作為背景或是裝飾元素以提升頁(yè)面美觀度。在工具箱中選擇“橢圓”工具或按【E】鍵，在舞臺(tái)上按住鼠標(biāo)左鍵不放并拖曳至某個(gè)方向可繪制橢圓，如果拖曳的同時(shí)按住【Shift】鍵，可繪制圓形。該頁(yè)面采用圓形作為基本框架，將主要內(nèi)容放在圓形內(nèi)使視覺(jué)效果更加集中。3.1.4圓角矩形繪制圓角矩形并設(shè)置專有屬性在工具箱中選擇“圓角矩形”工具或是按【O】鍵，在舞臺(tái)上按住鼠標(biāo)左鍵不放并拖曳至某個(gè)方向可繪制圓角矩形。繪制完成后，在右側(cè)的“屬性”面板中，除了可設(shè)置基本屬性如長(zhǎng)、寬、高、填充色、邊框色、邊框類(lèi)型等外，還可在“專有屬性”欄中設(shè)置圓角半徑、背景圖片、圖片位置、圖片尺寸、水平偏移、垂直偏移、端點(diǎn)、接合等。3.1.5多邊形選擇“多邊形”工具或按【P】鍵，在舞臺(tái)上按住鼠標(biāo)左鍵不放并拖曳，可繪制多邊形。多邊形可用來(lái)強(qiáng)調(diào)H5頁(yè)面中的關(guān)鍵區(qū)域及高亮交互元素，常用于頁(yè)面背景的制作。繪制完成后，同樣可以在右側(cè)的“屬性”面板中設(shè)置多邊形的屬性，其設(shè)置方法與其他圖形類(lèi)似。3.1.6曲線使用“曲線”工具可繪制各種帶有弧度的圖形，如彎曲的河流、月亮等圖形；也可繪制圖表，如折線圖、曲線圖、雷達(dá)圖等，獨(dú)特的曲線形狀能起到提高辨識(shí)度和美觀度的作用。在工具箱中選擇“曲線”工具或按【C】鍵，在舞臺(tái)中單擊確定起點(diǎn)，將鼠標(biāo)指針移動(dòng)到線段的終點(diǎn)位置，按住鼠標(biāo)左鍵不放，進(jìn)行拖動(dòng)將出現(xiàn)控制柄，拖動(dòng)控制柄可調(diào)整所繪線段的弧度，使其形成曲線效果。3.1.7實(shí)戰(zhàn)案例：制作旅行網(wǎng)圖標(biāo)（1）新建文件（2）繪制橢圓（3）設(shè)置寬和高3.1.7實(shí)戰(zhàn)案例：制作旅行網(wǎng)圖標(biāo)（4）調(diào)整顏色（5）繪制曲線（6）取消邊框效果3.1.7實(shí)戰(zhàn)案例：制作旅行網(wǎng)圖標(biāo)（7）繪制并調(diào)整山脈形狀的顏色（8）繪制輪船形狀（9）繪制其他圖形3.2繪制圖形3.1調(diào)整圖形3.3圖形的排列與組合3.2.1調(diào)整圖形平滑度在Mugeda中調(diào)整圖形平滑度時(shí)可先選擇需要調(diào)整的圖形，然后編輯圖形的節(jié)點(diǎn)。使用“選擇”工具在舞臺(tái)中單擊想要調(diào)整的圖形即可選擇該圖形，然后選擇“節(jié)點(diǎn)”工具，此時(shí)可發(fā)現(xiàn)選擇的圖形將顯示所有的節(jié)點(diǎn)。調(diào)整圖形平滑度還可通過(guò)重置、刪除和添加節(jié)點(diǎn)來(lái)完成，選擇要編輯的節(jié)點(diǎn)，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“節(jié)點(diǎn)”命令，在彈出的子菜單中羅列了“重置選中節(jié)點(diǎn)”“刪除選中節(jié)點(diǎn)”“添加節(jié)點(diǎn)（細(xì)分）”3種命令。3.2.2變換圖形形態(tài)重置選中的節(jié)點(diǎn)刪除選中的節(jié)點(diǎn)添加節(jié)點(diǎn)3.2.3實(shí)戰(zhàn)案例：繪制小貓形狀（1）繪制小貓的大致輪廓（2）填充顏色并重置選中節(jié)點(diǎn)（3）調(diào)整冰添加節(jié)點(diǎn)3.2.3實(shí)戰(zhàn)案例：繪制小貓形狀（4）繪制小貓耳朵（5）繪制小貓眼睛（6）繪制其他細(xì)節(jié)3.3繪制圖形3.1調(diào)整圖形3.2圖形的排列與組合3.3.1排列使用Mugeda的排列功能可以調(diào)整圖形的上下順序。只需選擇要排列的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“排列”命令，在彈出的子菜單中羅列了“上移一層”“下移一層”“移至頂層”“移至底層”命令，根據(jù)需要選擇排列命令即可調(diào)整圖形排列順序。3.3.2對(duì)齊選擇需要對(duì)齊的圖形（2個(gè)及以上），單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“對(duì)齊”命令，在彈出的子菜單中選擇相應(yīng)的對(duì)齊命令即可進(jìn)行對(duì)齊；或選擇【編輯】/【對(duì)齊】命令，在彈出的子菜單中選擇對(duì)齊命令，也可對(duì)齊圖形。3.3.3變形選擇需要變形的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“變形”命令；或選擇【編輯】/【變形】命令，在彈出的子菜單中選擇相應(yīng)的變形命令即可進(jìn)行變形操作3.3.4組合選擇同一個(gè)圖層中需要組合的圖形，選擇【對(duì)象】/【組】/【組合】命令，或按【Ctrl+G】組合鍵，或單擊鼠標(biāo)右鍵后在彈出的快捷菜單中選擇【組】/【組合】命令，即可組合所選對(duì)象。組合后單擊該組中的任何一個(gè)對(duì)象，都將選擇該組的所有對(duì)象。除此之外，若需要重新編輯組合中的圖形，可選擇【對(duì)象】/【組】/【取消組合】命令，取消圖形組合。3.3.5合并合并就是對(duì)兩個(gè)或兩個(gè)以上的圖形（注意該圖形主要指在Mugeda中繪制的可編輯圖形）進(jìn)行合并、相交或裁剪處理，使其成為一個(gè)新的圖形。選中兩個(gè)或兩個(gè)以上的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“合并”命令，在彈出的子菜單中羅列了“合并”“相交”“用上層物體裁剪”“用下層物體裁剪”4個(gè)命令。3.3.5合并合并相交用上層物體裁剪用下層物體裁剪3.3.6實(shí)戰(zhàn)案例：繪制音樂(lè)圖標(biāo)（1）繪制形狀并用上層物體裁剪（2）繪制圓角矩形并用上層物體裁剪（3）翻轉(zhuǎn)圖形并繪制不同大小的矩形，對(duì)齊冰復(fù)制和移動(dòng)矩形祝學(xué)習(xí)進(jìn)步??！H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第4章添加媒體文件與文字H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）4.1添加媒體文件4.2輸入與編輯文字4.1.1添加圖片批量上傳：?jiǎn)螕簟芭可蟼鳌边x項(xiàng)卡，將要上傳的多個(gè)圖片拖曳到“批量上傳”選項(xiàng)卡下的空白處，此時(shí)空白處將會(huì)出現(xiàn)綠色虛線框，釋放鼠標(biāo)即可添加圖片，稍等片刻便可在空白處查看添加的圖片。選擇【文件】/【導(dǎo)入】/【圖片（PNG/JPG/GIF/SVG）】命令，或選擇“導(dǎo)入圖片”工具。4.1.1添加圖片掃碼上傳輸入網(wǎng)址單擊“輸入網(wǎng)址”選項(xiàng)卡，在地址欄中輸入要上傳的圖片文件鏈接，單擊“抓取”按鈕，彈出提示對(duì)話框，單擊“確定”按鈕。單擊“掃碼上傳”選項(xiàng)卡，使用手機(jī)或者其他移動(dòng)終端掃描出現(xiàn)的二維碼，然后在移動(dòng)終端中選擇需要上傳的圖片，單擊“確定”按鈕，即可將移動(dòng)終端中的圖片上傳到素材庫(kù)中。4.1.2添加音頻/音效在Mugeda中添加音頻/音效主要使用“導(dǎo)入聲音”工具，選擇該工具后，將自動(dòng)打開(kāi)“素材庫(kù)”對(duì)話框，選擇要添加的音頻/音效，單擊“添加”按鈕。4.1.3添加視頻在Mugeda中添加視頻可選擇“導(dǎo)入視頻”工具，將打開(kāi)“素材庫(kù)”對(duì)話框，選擇要添加的視頻，然后單擊“添加”按鈕，完成視頻的添加。4.1.4添加幻燈片選擇“幻燈片”工具，然后在舞臺(tái)上拖曳鼠標(biāo)，繪制出一個(gè)幻燈片圖形，選擇該圖形，在“屬性”面板中可設(shè)置幻燈片的寬度、高度、透明度等，在“專有屬性”欄中可設(shè)置幻燈片的展示方向、顯示方式、自動(dòng)播放，以及添加圖片列表等。4.1.5添加網(wǎng)頁(yè)選擇“網(wǎng)頁(yè)”工具，然后在舞臺(tái)上拖曳鼠標(biāo)，繪制出一個(gè)網(wǎng)頁(yè)圖形，選擇該圖形，在“屬性”面板中可設(shè)置網(wǎng)頁(yè)的寬度、高度、透明度等，在“專有屬性”欄的“網(wǎng)頁(yè)地址”輸入框內(nèi)輸入網(wǎng)址可添加網(wǎng)頁(yè)。添加網(wǎng)頁(yè)后，單擊工具欄的“內(nèi)容共享”按鈕，用手機(jī)掃描出現(xiàn)的二維碼，即可查看網(wǎng)頁(yè)效果4.1.6實(shí)戰(zhàn)案例：制作旅行宣傳H5頁(yè)面①添加文件夾②上傳并添加背景圖片4.1.6實(shí)戰(zhàn)案例：制作旅行宣傳H5頁(yè)面③上傳音樂(lè)④添加新頁(yè)面⑤調(diào)整圖片后繪制幻燈片圖形4.1.6實(shí)戰(zhàn)案例：制作旅行宣傳H5頁(yè)面⑥添加幻燈片⑦選擇幻燈片⑧添加視頻⑨添加圖片4.1.6實(shí)戰(zhàn)案例：制作旅行宣傳H5頁(yè)面預(yù)覽效果4.1.7添加圖表①使用圖表工具繪制矩形框

②顯示曲線圖表

③編輯圖表數(shù)據(jù)4.1.7添加圖表④選擇圖表類(lèi)型

⑤設(shè)置圖表內(nèi)容4.1.8添加虛擬現(xiàn)實(shí)在工具箱中選擇“虛擬現(xiàn)實(shí)”工具，在舞臺(tái)上拖動(dòng)鼠標(biāo)，繪制一個(gè)虛擬現(xiàn)實(shí)圖形，然后會(huì)自動(dòng)打開(kāi)“導(dǎo)入全景虛擬場(chǎng)景”對(duì)話框。4.1.9添加直播在工具箱中選擇“直播”工具，在舞臺(tái)上拖曳鼠標(biāo)，繪制一個(gè)直播圖形，選中直播圖形，在“屬性”面板“專有屬性”欄的“直播地址”輸入框中輸入直播地址（僅支持手機(jī)播放直播流內(nèi)容，PC端無(wú)法直接預(yù)覽）。4.1.10實(shí)戰(zhàn)案例：制作年中總結(jié)H5頁(yè)面①添加素材并新建頁(yè)面②添加場(chǎng)景③設(shè)置場(chǎng)景1熱點(diǎn)4.1.10實(shí)戰(zhàn)案例：制作年中總結(jié)H5頁(yè)面⑤調(diào)整圖片大?、尢砑訄D表并選擇圖表類(lèi)型④設(shè)置場(chǎng)景2熱點(diǎn)4.1.10實(shí)戰(zhàn)案例：制作年中總結(jié)H5頁(yè)面⑧添加直播⑦設(shè)置圖表內(nèi)容添加媒體文件4.14.2輸入與編輯文字4.2.1輸入文字在Mugeda中輸入文字可先選擇“文字”工具，在舞臺(tái)中單擊，將出現(xiàn)文本框。刪除文本框中的默認(rèn)內(nèi)容“Text”，即可輸入需要的文字內(nèi)容，如輸入“大會(huì)開(kāi)始”文字。輸入文字后，在文本框以外的舞臺(tái)任意位置單擊以結(jié)束編輯狀態(tài)，文字將被完整地顯示出來(lái)。4.2.2編輯文字設(shè)置預(yù)置文本、文字樣式、字體、大小、垂直對(duì)齊、文字超出時(shí)、行高、字間距等，都可通過(guò)“屬性”面板中的“專有屬性”欄進(jìn)行操作。此外，在“字體”下拉列表中向上拖動(dòng)右側(cè)的滑塊，將出現(xiàn)“云字體”選項(xiàng)，單擊“選擇云字體”按鈕，即可上傳或選擇使用云字體（僅支持TTF格式）。4.2.3實(shí)戰(zhàn)案例：制作七夕節(jié)H5頁(yè)面①輸入文字②調(diào)整文字屬性③拖動(dòng)文字調(diào)整點(diǎn)4.2.7實(shí)戰(zhàn)案例：制作企業(yè)員工評(píng)選H5頁(yè)面④復(fù)制并修改文字⑤輸入并編輯文字⑥直排顯示文字現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進(jìn)步??！H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第5章幀動(dòng)畫(huà)與動(dòng)畫(huà)技術(shù)H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）5.1幀動(dòng)畫(huà)5.2特型動(dòng)畫(huà)5.3預(yù)置動(dòng)畫(huà)5.1.1幀的基本類(lèi)型播放標(biāo)記：該標(biāo)記是一條黃色的指示線，主要有兩個(gè)作用，一是瀏覽動(dòng)畫(huà)，二是選擇指定的幀。幀編號(hào)：用于提示當(dāng)前幀數(shù)，每10幀顯示一個(gè)編號(hào)。幀刻度：每一個(gè)刻度代表一個(gè)幀。5.1.1幀的基本類(lèi)型關(guān)鍵幀關(guān)鍵幀是指在動(dòng)畫(huà)播放過(guò)程中，定義了動(dòng)畫(huà)關(guān)鍵變化環(huán)節(jié)的幀。關(guān)鍵幀在“時(shí)間線”面板中以黑色小圓表示?？瞻钻P(guān)鍵幀空白關(guān)鍵幀就是關(guān)鍵幀中沒(méi)有任何對(duì)象，它主要用于在關(guān)鍵幀與關(guān)鍵幀之間形成間隔?？瞻钻P(guān)鍵幀在“時(shí)間線”面板中以白色小圓表示，若在空白關(guān)鍵幀中添加內(nèi)容，該空白關(guān)鍵幀將會(huì)變?yōu)殛P(guān)鍵幀。普通幀普通幀是指常用幀，它在“時(shí)間線”面板中以灰色方塊表示，具有過(guò)濾和延長(zhǎng)內(nèi)容顯示的功能。普通幀越多，關(guān)鍵幀與關(guān)鍵幀之間的過(guò)渡就越緩慢。0102035.1.2幀的基本操作1.插入幀插入關(guān)鍵幀插入普通幀單擊想要插入普通幀的位置，選擇【動(dòng)畫(huà)】/【插入幀】命令，或按【F5】鍵。單擊想要插入關(guān)鍵幀的位置，選擇【動(dòng)畫(huà)】/【插入關(guān)鍵幀】命令，或按【F6】鍵。2.選擇幀編輯幀前，需要選擇該幀。若要選擇一個(gè)幀，可以單擊該幀將其選中。若要選擇多個(gè)連續(xù)的幀，可以拖動(dòng)鼠標(biāo)框選。5.1.2幀的基本操作選擇要復(fù)制的幀后，可以通過(guò)【動(dòng)畫(huà)】/【復(fù)制幀】命令，或按【Ctrl+C】組合鍵復(fù)制幀；定位鼠標(biāo)指針到需要粘貼的位置后，再通過(guò)【動(dòng)畫(huà)】/【粘貼幀】命令，或按【Ctrl+V】組合鍵粘貼幀。3.復(fù)制幀、粘貼幀4.刪除幀選擇要?jiǎng)h除的幀，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“刪除幀（可多選）”命令，或按【Ctrl+F5】組合鍵，可刪除普通幀；選擇“刪除關(guān)鍵幀（可多選）”命令，或按【Ctrl+F6】組合鍵，可刪除關(guān)鍵幀。5.1.3關(guān)鍵幀動(dòng)畫(huà)關(guān)鍵幀動(dòng)畫(huà)是通過(guò)設(shè)定動(dòng)畫(huà)的起點(diǎn)幀和終點(diǎn)幀兩個(gè)關(guān)鍵幀，然后通過(guò)軟件自動(dòng)生成動(dòng)畫(huà)過(guò)程的動(dòng)畫(huà)形式。制作時(shí)在終點(diǎn)幀上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入關(guān)鍵幀動(dòng)畫(huà)”命令，此時(shí)起點(diǎn)幀和終點(diǎn)幀之間的區(qū)域?qū)⒊示G色顯示，然后通過(guò)調(diào)整終點(diǎn)幀或起點(diǎn)幀上的圖形，可生成連續(xù)的動(dòng)畫(huà)效果，而起點(diǎn)幀和終點(diǎn)幀的中間區(qū)域?yàn)檫^(guò)渡幀。5.1.4序列幀動(dòng)畫(huà)序列幀動(dòng)畫(huà)是把多張靜態(tài)圖片按指定順序播放，使畫(huà)面具有連貫性的動(dòng)畫(huà)。單擊需要添加序列幀動(dòng)畫(huà)的幀位置，打開(kāi)“素材庫(kù)”對(duì)話框，勾選“全選”“以序列幀形式添加”復(fù)選框，單擊“添加”按鈕，此時(shí)舞臺(tái)中將生成序列幀動(dòng)畫(huà)。5.1.5實(shí)戰(zhàn)案例：制作汽車(chē)公司H5進(jìn)入頁(yè)和首頁(yè)①添加序列幀動(dòng)畫(huà)素材并查看效果②復(fù)制并粘貼關(guān)鍵幀5.1.5實(shí)戰(zhàn)案例：制作汽車(chē)公司H5進(jìn)入頁(yè)和首頁(yè)③添加圖層⑤調(diào)整文字④設(shè)置文字專有屬性5.1.5實(shí)戰(zhàn)案例：制作汽車(chē)公司H5進(jìn)入頁(yè)和首頁(yè)⑥新建頁(yè)面⑧輸入并設(shè)置文字⑦添加背景幀動(dòng)畫(huà)5.15.2特型動(dòng)畫(huà)5.3預(yù)置動(dòng)畫(huà)5.2.1元件動(dòng)畫(huà)元件動(dòng)畫(huà)就是將這些元件看作一個(gè)一個(gè)的“零件”，然后用這些“零件”進(jìn)行拼裝，從而快速組成完整的動(dòng)畫(huà)。制作元件動(dòng)畫(huà)的方法為：選擇要轉(zhuǎn)換為元件的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“轉(zhuǎn)換為元件”命令，將圖形轉(zhuǎn)換為元件。雙擊元件，進(jìn)入該元件的編輯頁(yè)面，在其中可編輯元件中的內(nèi)容。打開(kāi)“元件”面板，在其中可進(jìn)行元件的新建、復(fù)制、導(dǎo)入、導(dǎo)出以及新建文件夾、導(dǎo)出至元件庫(kù)、編輯元件、添加到繪畫(huà)板、刪除元件等操作。5.2.2路徑動(dòng)畫(huà)路徑動(dòng)畫(huà)即對(duì)象沿著繪制的路徑運(yùn)動(dòng)的動(dòng)畫(huà)。在制作時(shí)需先在舞臺(tái)中添加一個(gè)圖形，然后在“時(shí)間線”面板中進(jìn)行路徑的編輯。①②③④⑤⑥⑦5.2.3進(jìn)度動(dòng)畫(huà)進(jìn)度動(dòng)畫(huà)主要按照?qǐng)D形的繪制順序或文字的編輯順序來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果，可實(shí)現(xiàn)繪制線條過(guò)程的效果和文字打字機(jī)的效果。在制作時(shí)可繪制多個(gè)線性圖形，然后在“時(shí)間線”面板中確定路徑的終點(diǎn)幀，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入進(jìn)度動(dòng)畫(huà)”命令。繪制圖形后插入進(jìn)度動(dòng)畫(huà)5.2.4變形動(dòng)畫(huà)1.形狀變形動(dòng)畫(huà)形狀變形動(dòng)畫(huà)可以實(shí)現(xiàn)將一個(gè)形狀變成另一個(gè)形狀的動(dòng)畫(huà)效果。以將矩形變?yōu)槿切螢槔?，可先使用“矩形”工具繪制矩形，然后確定終點(diǎn)幀，并在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入變形動(dòng)畫(huà)”命令。選中終點(diǎn)幀，使用“節(jié)點(diǎn)”工具拖動(dòng)矩形上方的錨點(diǎn)，使矩形變成三角形。5.2.4變形動(dòng)畫(huà)2.文字變形動(dòng)畫(huà)文字變形動(dòng)畫(huà)可以讓文字實(shí)現(xiàn)由聚集到展開(kāi)的效果，其主要通過(guò)設(shè)置關(guān)鍵幀上文本屬性的變化，如字體顏色、字體大小、行間距、字間距等，從而達(dá)到文字變形的效果。只需使用“文字”工具在舞臺(tái)上輸入文字，然后確定終點(diǎn)幀，并在該幀上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入變形動(dòng)畫(huà)”命令。在“屬性”面板的“專有屬性”欄中調(diào)整字體、大小、對(duì)齊方式等。5.2.5遮罩動(dòng)畫(huà)遮罩層用于控制顯示的范圍及形狀，被遮罩層則主要顯示動(dòng)畫(huà)內(nèi)容，如遮罩層中是一個(gè)橢圓圖形。被遮罩層是一個(gè)卡通場(chǎng)景，則用戶只能看到這個(gè)橢圓中所顯示的卡通場(chǎng)景效果制作遮罩動(dòng)畫(huà)時(shí)，可先選擇需要作為遮罩層的圖層，在“時(shí)間線”面板中單擊“轉(zhuǎn)為遮罩層”按鈕，將普通圖層轉(zhuǎn)換為遮罩層；若需要只顯示被遮罩層，可單擊“添加到遮罩層”按鈕；若要顯示遮罩內(nèi)容，可單擊“切換遮罩顯示”按鈕。5.2.6實(shí)戰(zhàn)案例：制作H5加載動(dòng)畫(huà)①導(dǎo)入素材并調(diào)整順序②轉(zhuǎn)換圖形為元件③向下拖曳圖形④插入關(guān)鍵幀動(dòng)畫(huà)5.2.6實(shí)戰(zhàn)案例：制作H5加載動(dòng)畫(huà)⑤調(diào)整氣球并插入關(guān)鍵幀動(dòng)畫(huà)⑥調(diào)整氣球并插入關(guān)鍵幀動(dòng)畫(huà)⑦插入其他關(guān)鍵幀動(dòng)畫(huà)5.2.6實(shí)戰(zhàn)案例：制作H5加載動(dòng)畫(huà)⑧自定義路徑⑨調(diào)整路徑線⑩縮小文字5.2.6實(shí)戰(zhàn)案例：制作H5加載動(dòng)畫(huà)?新建“遮罩”圖層并插入關(guān)鍵幀?繪制圓角矩形并粘貼圖層?新建遮罩圖層后插入關(guān)鍵幀動(dòng)畫(huà)?移動(dòng)被遮罩元素?轉(zhuǎn)為遮罩層5.2.6實(shí)戰(zhàn)案例：制作H5加載動(dòng)畫(huà)?輸入文字和插入進(jìn)度動(dòng)畫(huà)?調(diào)整其他幀?添加濾鏡5.3幀動(dòng)畫(huà)5.1特型動(dòng)畫(huà)5.2預(yù)置動(dòng)畫(huà)5.3.1添加預(yù)置動(dòng)畫(huà)在“屬性”面板中單擊“預(yù)置動(dòng)畫(huà)”后的圖標(biāo)，可打開(kāi)“添加預(yù)置動(dòng)畫(huà)”面板，其中羅列了進(jìn)入、強(qiáng)調(diào)、退出3種動(dòng)畫(huà)類(lèi)型。添加預(yù)置動(dòng)畫(huà)需要先選擇添加預(yù)置動(dòng)畫(huà)的素材，單擊素材右側(cè)的圖標(biāo)。將鼠標(biāo)指針移動(dòng)到預(yù)置動(dòng)畫(huà)選項(xiàng)上可在舞臺(tái)上查看該動(dòng)畫(huà)效果，單擊選擇預(yù)置動(dòng)畫(huà)，便可完成預(yù)置動(dòng)畫(huà)的添加，添加后在素材右側(cè)將會(huì)顯示該動(dòng)畫(huà)的藍(lán)色圖標(biāo)5.3.2設(shè)置預(yù)置動(dòng)畫(huà)添加預(yù)置動(dòng)畫(huà)后，單擊素材右側(cè)的藍(lán)色圖標(biāo)，或單擊“屬性”面板“高級(jí)屬性”欄中所選擇動(dòng)畫(huà)右側(cè)的按鈕，可打開(kāi)“動(dòng)畫(huà)選項(xiàng)”對(duì)話框，在其中設(shè)置時(shí)長(zhǎng)、延遲和方向后，單擊“確定”按鈕。除此之外，在“高級(jí)屬性”欄中拖動(dòng)“自動(dòng)播放”“循環(huán)播放”右側(cè)的滑塊還可設(shè)置播放方式。5.3.3自定義預(yù)置動(dòng)畫(huà)若Mugeda自帶的預(yù)置動(dòng)畫(huà)不符合設(shè)計(jì)需求，可先在“時(shí)間線”面板中制作需要的動(dòng)畫(huà)效果，然后在完成后的動(dòng)畫(huà)的過(guò)渡幀上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“保存為預(yù)置動(dòng)畫(huà)”命令。打開(kāi)“修改計(jì)時(shí)”對(duì)話框，在其中可設(shè)置時(shí)長(zhǎng)、延遲等信息，單擊按鈕。再次打開(kāi)“添加預(yù)置動(dòng)畫(huà)”面板，便可在“自定義”選項(xiàng)卡中查看添加的預(yù)置動(dòng)畫(huà)。5.3.4實(shí)戰(zhàn)案例：制作元旦H5頁(yè)面首頁(yè)①選擇預(yù)置動(dòng)畫(huà)②通過(guò)“屬性”面板設(shè)置預(yù)置動(dòng)畫(huà)5.3.4實(shí)戰(zhàn)案例：制作元旦H5頁(yè)面首頁(yè)③選擇“螺旋進(jìn)入”預(yù)置動(dòng)畫(huà)④設(shè)置動(dòng)畫(huà)選項(xiàng)5.3.4實(shí)戰(zhàn)案例：制作元旦H5頁(yè)面首頁(yè)⑤效果預(yù)覽現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進(jìn)步??！H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第6章行為、觸發(fā)條件與控件H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）6.1行為與觸發(fā)條件6.2控件6.1.1認(rèn)識(shí)行為在H5頁(yè)面中，行為指的是用戶與頁(yè)面之間的交互和響應(yīng)。H5頁(yè)面通常包含了各種動(dòng)態(tài)元素和交互功能，通過(guò)用戶的操作或事件觸發(fā)，頁(yè)面會(huì)產(chǎn)生相應(yīng)的響應(yīng)和動(dòng)作，這些響應(yīng)和動(dòng)作就是頁(yè)面中的行為。在Mugeda中，行為主要用于解決幀鏈接和頁(yè)鏈接的問(wèn)題，以及物體與物體之間的關(guān)聯(lián)問(wèn)題。點(diǎn)擊按鈕滑動(dòng)頁(yè)面播放音/視頻6.1.2編輯行為在Mugeda中，行為可以添加到任意元素上，設(shè)計(jì)師只需選擇任意的圖形，單擊按鈕或按【X】鍵，打開(kāi)“編輯行為”對(duì)話框，在左側(cè)的“行為”欄中羅列了常用的行為選項(xiàng)。6.1.3設(shè)置觸發(fā)條件選擇符合需求的行為后，在“編輯行為”對(duì)話框的右側(cè)可設(shè)置行為的觸發(fā)條件。觸發(fā)條件與行為相對(duì)應(yīng)，是控制行為的方式。①選擇觸發(fā)條件②設(shè)置參數(shù)“播放聲音”行為的觸發(fā)條件設(shè)置6.1.4實(shí)戰(zhàn)案例：為游戲H5首頁(yè)按鈕添加行為①添加素材②編輯行為③添加行為后的效果行為與觸發(fā)條件6.16.2控件6.2.1陀螺儀控件在工具箱中選擇“陀螺儀”工具，在舞臺(tái)中單擊，會(huì)出現(xiàn)陀螺儀”工具的圖標(biāo)和一串?dāng)?shù)字，系統(tǒng)自動(dòng)將陀螺儀命名為“陀螺儀1”。在其“屬性”面板中可調(diào)整陀螺儀的各個(gè)屬性，改變其顏色、文本內(nèi)容、陀螺儀類(lèi)型等。陀螺儀控件主要用于制作外力感應(yīng)交互效果，如當(dāng)用戶晃動(dòng)手機(jī)時(shí)，H5頁(yè)面中的物體將跟隨手機(jī)的晃動(dòng)角度進(jìn)行運(yùn)動(dòng)。添加陀螺儀陀螺儀的旋轉(zhuǎn)類(lèi)型6.2.2點(diǎn)贊控件選擇繪制的愛(ài)心圖案，在“屬性”面板中可設(shè)置其屬性，包括文字位置、文字顏色、文字大小、不允許撤銷(xiāo)、允許多次點(diǎn)贊、隱藏提交提示、多次點(diǎn)贊間隔、每次增加數(shù)等。選擇工具箱中的“點(diǎn)贊”工具，在舞臺(tái)中拖動(dòng)鼠標(biāo)，確定點(diǎn)贊按鈕的尺寸后，釋放鼠標(biāo)左鍵，將會(huì)出現(xiàn)一個(gè)示意圖案（一般為愛(ài)心圖案），示意圖案上方的數(shù)字為點(diǎn)贊的數(shù)量。6.2.2點(diǎn)贊控件如果需要直觀地顯示點(diǎn)贊數(shù)量，可先在舞臺(tái)上添加一個(gè)文本框，在文本框中輸入數(shù)值“0”，選擇繪制的愛(ài)心圖案，單擊右側(cè)的按鈕，打開(kāi)“編輯行為”對(duì)話框。在左側(cè)選擇“屬性控制”展開(kāi)列表中的“改變?cè)貙傩浴边x項(xiàng)，然后設(shè)置觸發(fā)條件為“屬性改變”。單擊按鈕，打開(kāi)“參數(shù)”對(duì)話框，在其中設(shè)置對(duì)應(yīng)的參數(shù)，如右圖所示。6.2.3擦玻璃控件選擇繪制的形狀。在“屬性”面板的“專有屬性”欄中可設(shè)置其各種屬性，如背景圖片、前景圖片、圖片位置、圖片尺寸、水平偏移、垂直偏移、橡皮擦大小、剩余比例、端點(diǎn)、接合等。在Mugeda中使用擦玻璃控件可通過(guò)手指拖動(dòng)形成玻璃擦除效果。只需選擇“擦玻璃”工具，在舞臺(tái)中拖動(dòng)鼠標(biāo)，確定玻璃區(qū)域。6.2.3擦玻璃控件另外，擦玻璃控件還有特有的觸發(fā)條件，選擇繪制的擦玻璃控件形狀，單擊按鈕，打開(kāi)“編輯行為”對(duì)話框，在左側(cè)任意選擇觸發(fā)行為，如選擇“下一頁(yè)”選項(xiàng)，在右側(cè)“觸發(fā)條件”下拉列表中選擇“擦玻璃完成”選項(xiàng)。6.2.4投票控件選擇“投票”工具，在舞臺(tái)中單擊，將自動(dòng)打開(kāi)“投票數(shù)據(jù)設(shè)置”對(duì)話框，在其中可設(shè)置相關(guān)參數(shù)，完成后單擊“確定”按鈕。此時(shí)，數(shù)據(jù)庫(kù)中會(huì)生成一個(gè)投票數(shù)據(jù)點(diǎn)，同時(shí)會(huì)在舞臺(tái)中生成投票控件。投票控件是一個(gè)后臺(tái)數(shù)據(jù)組件，添加后會(huì)在服務(wù)器中生成一個(gè)投票數(shù)據(jù)記錄，完成記錄后還需要添加投票行為才能提交投票結(jié)果。6.2.4投票控件選擇設(shè)置的投票對(duì)象，單擊按鈕，打開(kāi)“編輯行為”對(duì)話框，選擇“數(shù)據(jù)服務(wù)”展開(kāi)列表中的“投票”選項(xiàng)，在右側(cè)單擊

按鈕，打開(kāi)“參數(shù)”對(duì)話框，在其中設(shè)置投票行為。由于在預(yù)覽H5頁(yè)面時(shí)投票控件不會(huì)顯示，為了方便用戶查看投票的內(nèi)容，通常還需要單獨(dú)設(shè)置每個(gè)投票對(duì)象。設(shè)置投票對(duì)象設(shè)置參數(shù)6.2.5抽獎(jiǎng)控件選擇“抽獎(jiǎng)”工具，在舞臺(tái)中單擊，將自動(dòng)打開(kāi)“抽獎(jiǎng)設(shè)置”對(duì)話框，在其中可對(duì)抽獎(jiǎng)狀態(tài)、活動(dòng)期間抽獎(jiǎng)次數(shù)、再次抽獎(jiǎng)等待時(shí)間、抽獎(jiǎng)模式、獎(jiǎng)項(xiàng)設(shè)置、領(lǐng)獎(jiǎng)碼等進(jìn)行設(shè)置。6.2.5抽獎(jiǎng)控件選擇繪制的抽獎(jiǎng)按鈕，單擊按鈕，打開(kāi)“編輯行為”對(duì)話框，選擇左側(cè)“數(shù)據(jù)服務(wù)”展開(kāi)列表中的“抽獎(jiǎng)”選項(xiàng)，在右側(cè)的“觸發(fā)條件”下拉列表中選擇“點(diǎn)擊”選項(xiàng)，單擊按鈕，打開(kāi)“參數(shù)”對(duì)話框，對(duì)抽獎(jiǎng)行為進(jìn)行設(shè)置由于抽獎(jiǎng)控件是一個(gè)后臺(tái)數(shù)據(jù)組件，不會(huì)在舞臺(tái)上顯示，添加后會(huì)在服務(wù)器中生成一個(gè)抽獎(jiǎng)數(shù)據(jù)記錄，設(shè)計(jì)師需要為該組件添加抽獎(jiǎng)行為才能提交抽獎(jiǎng)結(jié)果。添加抽獎(jiǎng)設(shè)置參數(shù)6.2.6其他控件用于創(chuàng)建定時(shí)事件和動(dòng)畫(huà)。通過(guò)使用定時(shí)器控件，可以設(shè)定一個(gè)時(shí)間間隔，在該時(shí)間間隔內(nèi)執(zhí)行特定的操作或觸發(fā)某些事件。選擇“定時(shí)器”工具，在舞臺(tái)中單擊創(chuàng)建控件，在右側(cè)的“屬性”面板中可設(shè)置定時(shí)器的參數(shù)，如精度、記時(shí)方向、是否循環(huán)、不可見(jiàn)時(shí)、長(zhǎng)度等。定時(shí)器繪畫(huà)板用于創(chuàng)建繪畫(huà)效果的控件，可以為用戶提供自由繪畫(huà)的體驗(yàn)，并能夠?qū)崿F(xiàn)交互和多樣化的創(chuàng)作內(nèi)容。選擇“繪畫(huà)板”工具，在舞臺(tái)中拖動(dòng)鼠標(biāo)，繪制出一個(gè)繪畫(huà)板，通過(guò)調(diào)整“調(diào)整繪畫(huà)板屬性”行為，可設(shè)置繪畫(huà)板、畫(huà)筆線寬、畫(huà)筆顏色等，提升繪畫(huà)板的可操作性。用于在一些特定內(nèi)容（如教育類(lèi)測(cè)試課件等）中允許用戶連接兩個(gè)元素，從而實(shí)現(xiàn)特定的交互效果。選擇“連線”工具，在舞臺(tái)中拖動(dòng)鼠標(biāo)，可繪制連線。連線6.2.6其他控件用戶可指定一個(gè)拖放容器來(lái)接收拖放元素，以實(shí)現(xiàn)特定的交互效果。選擇“拖放容器”工具，在舞臺(tái)中拖動(dòng)鼠標(biāo)，繪制拖放容器控件，在右側(cè)的“屬性”面板中可設(shè)置放置提示、提示顏色、允許多次拖放、自動(dòng)復(fù)位等。用于在一些特定內(nèi)容（如測(cè)試類(lèi)H5頁(yè)面等）中設(shè)置特定時(shí)間。選擇“計(jì)時(shí)器”工具，在舞臺(tái)中單擊可生成計(jì)時(shí)器內(nèi)容，在右側(cè)的“屬性”面板中可設(shè)置計(jì)時(shí)方向、自動(dòng)開(kāi)始、計(jì)時(shí)方式、顯示格式、時(shí)間長(zhǎng)度、長(zhǎng)度單位、是否循環(huán)等。用于按照一定規(guī)則對(duì)參加活動(dòng)的用戶進(jìn)行排序并顯示結(jié)果。選擇“排行榜”工具，在舞臺(tái)中單擊，打開(kāi)“排行榜”對(duì)話框，在其中可設(shè)置上榜數(shù)目、上榜分?jǐn)?shù)、分?jǐn)?shù)規(guī)則等。用于設(shè)置簽到內(nèi)容，包括簽到的開(kāi)始時(shí)間、結(jié)束時(shí)間、簽到規(guī)則等。選擇“簽到”工具，在舞臺(tái)中單擊，打開(kāi)“簽到”對(duì)話框，在其中可設(shè)置開(kāi)始日期、結(jié)束日期、簽到規(guī)則等。拖放容器計(jì)時(shí)器排行榜簽到6.2.7實(shí)戰(zhàn)案例：制作企業(yè)員工評(píng)選H5頁(yè)面①添加素材②縮小文字③制作按鈕6.2.7實(shí)戰(zhàn)案例：制作企業(yè)員工評(píng)選H5頁(yè)面④編輯行為⑤繪制形狀6.2.7實(shí)戰(zhàn)案例：制作企業(yè)員工評(píng)選H5頁(yè)面⑥設(shè)置擦除圖片⑦設(shè)置投票數(shù)據(jù)6.2.7實(shí)戰(zhàn)案例：制作企業(yè)員工評(píng)選H5頁(yè)面⑧完成投票插件添加⑨輸入文字⑩設(shè)置點(diǎn)擊行為的事件參數(shù)6.2.7實(shí)戰(zhàn)案例：制作企業(yè)員工評(píng)選H5頁(yè)面預(yù)覽效果現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進(jìn)步?。5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第7章關(guān)聯(lián)與表單H5頁(yè)面設(shè)計(jì)（Mugeda版）（微課版）7.1關(guān)聯(lián)7.2表單7.1.1舞臺(tái)動(dòng)畫(huà)關(guān)聯(lián)關(guān)聯(lián)即互相貫連，是指事物之間互相牽連和影響。在Mugeda中，關(guān)聯(lián)是指通過(guò)連接和交互來(lái)建立頁(yè)面元素之間的邏輯關(guān)系和互動(dòng)效果。設(shè)計(jì)師使用Mugeda的關(guān)聯(lián)功能可實(shí)現(xiàn)更復(fù)雜和豐富的H5頁(yè)面效果。7.1.2實(shí)戰(zhàn)案例：為H5頁(yè)面添加舞臺(tái)動(dòng)畫(huà)關(guān)聯(lián)①添加素材②設(shè)置圖標(biāo)拖動(dòng)方式7.1.2實(shí)戰(zhàn)案例：為H5頁(yè)面添加舞臺(tái)動(dòng)畫(huà)關(guān)聯(lián)③啟用關(guān)聯(lián)④設(shè)置關(guān)聯(lián)內(nèi)容⑤編輯行為7.1.2實(shí)戰(zhàn)案例：為H5頁(yè)面添加舞臺(tái)動(dòng)畫(huà)關(guān)聯(lián)⑥查看效果7.1.3元件動(dòng)畫(huà)關(guān)聯(lián)選擇需要關(guān)聯(lián)的元件，在“屬性”面板中設(shè)置該元件的名稱，然后設(shè)置“拖動(dòng)”方式，再設(shè)置“動(dòng)畫(huà)關(guān)聯(lián)”為“啟用”，單擊右側(cè)的“關(guān)聯(lián)”按鈕，在其下方將顯示關(guān)聯(lián)的相關(guān)屬性，在其中可設(shè)置元件動(dòng)畫(huà)關(guān)聯(lián)的參數(shù)。7.1.4基礎(chǔ)屬性關(guān)聯(lián)1.公式關(guān)聯(lián)在“關(guān)聯(lián)方式”下拉列表中選擇“公式關(guān)聯(lián)”選項(xiàng)，在下方將出現(xiàn)“被控量=”選項(xiàng)，在右側(cè)的文本框中可通過(guò)輸入關(guān)聯(lián)公式來(lái)完成公式關(guān)聯(lián)，如設(shè)置“被控量=”為“關(guān)聯(lián)屬性”，以右圖所示的數(shù)據(jù)為例，被控對(duì)象的值等于“文字1”的“旋轉(zhuǎn)角度Z”的值。同理，若設(shè)置“被控量=”為“關(guān)聯(lián)屬性×3”，即被控對(duì)象的值等于“文字1”的“旋轉(zhuǎn)角度Z”值的3倍。7.1.4基礎(chǔ)屬性關(guān)聯(lián)2.自動(dòng)關(guān)聯(lián)自動(dòng)關(guān)聯(lián)是一種更加便捷的方式，可自動(dòng)對(duì)關(guān)聯(lián)屬性和被控制對(duì)象進(jìn)行關(guān)聯(lián)，如通過(guò)拖動(dòng)進(jìn)度條來(lái)控制動(dòng)畫(huà)的播放。①繪制關(guān)聯(lián)對(duì)象②設(shè)置關(guān)聯(lián)屬性③查看效果關(guān)聯(lián)7.17.2表單7.2.1自定義表單1.輸入框輸入框是表單中的一種常見(jiàn)組件，提供了一個(gè)可編輯的區(qū)域，用戶可以在其中輸入相關(guān)信息以響應(yīng)特定