2019年山東省職業(yè)院校技能大賽高職組“HTML5 交互融媒體內(nèi)容設(shè)計(jì)與制作”賽項(xiàng)任務(wù)書

2019年山東省職業(yè)院校技能大賽高職組“HTML5交互融媒體內(nèi)容設(shè)計(jì)與制作”賽項(xiàng)任務(wù)書第第頁共26頁第一部分競賽須知一、競賽要求1、按要求完成競賽任務(wù)，正確使用計(jì)算機(jī)、手機(jī)等設(shè)備，愛惜賽場器材，嚴(yán)格遵守操作要求；2、競賽過程中如有異議，可向現(xiàn)場監(jiān)督或裁判人員反映，不得擾亂賽場秩序；3、嚴(yán)格遵守賽場紀(jì)律，禁止任何作弊行為，尊重賽場工作人員，服從安排。二、職業(yè)素養(yǎng)與安全意識(shí)1、禁止大聲喧嚷，未經(jīng)裁判允許，不得站立、走動(dòng)，保證競賽現(xiàn)場秩序；2、參賽選手所有操作均應(yīng)符合安全規(guī)范，注意用電安全。三、選手須知1、紙質(zhì)任務(wù)書如出現(xiàn)缺頁、字跡不清等問題，請及時(shí)向裁判舉手示意并要求更換。競賽任務(wù)中所使用的非紙質(zhì)資料都已拷貝至U盤中，請自行根據(jù)競賽任務(wù)書要求使用；競賽提供的所有資料，在競賽結(jié)束后均不能帶離考場；2、參賽小組應(yīng)在規(guī)定時(shí)間內(nèi)完成任務(wù)書要求的內(nèi)容，任務(wù)完成后的作品必須按要求提交，作品未按要求提交的，則該任務(wù)不得分；3、競賽過程中，選手認(rèn)定設(shè)備或網(wǎng)絡(luò)有故障應(yīng)及時(shí)向裁判提出，競賽后再提出的，不予認(rèn)定。如設(shè)備或網(wǎng)絡(luò)經(jīng)測定完好，屬誤判時(shí)，設(shè)備或網(wǎng)絡(luò)的認(rèn)定時(shí)間計(jì)入競賽時(shí)間（扣減該小組競賽時(shí)間）；如果設(shè)備或網(wǎng)絡(luò)經(jīng)測定確有故障，則當(dāng)場更換設(shè)備或維修網(wǎng)絡(luò)，此過程中（設(shè)備或網(wǎng)絡(luò)測定開始到更換完成）造成的時(shí)間損失，在競賽時(shí)間結(jié)束后，酌情對該小組進(jìn)行等量的時(shí)間延遲補(bǔ)償；4、參賽選手競賽過程中，請及時(shí)保存任務(wù)中間成果。因任務(wù)中間成果未及時(shí)保存，遇設(shè)備或網(wǎng)絡(luò)故障導(dǎo)致前續(xù)工作結(jié)果丟失的，將僅對更換設(shè)備或網(wǎng)絡(luò)造成的時(shí)間損失進(jìn)行等量的時(shí)間延遲補(bǔ)償；5、競賽過程中由于人為原因造成設(shè)備損壞，則設(shè)備不予更換，如故意損壞競賽設(shè)備的，應(yīng)承擔(dān)相應(yīng)的賠償責(zé)任；6、競賽過程中由于自身人為原因造成網(wǎng)絡(luò)中斷，則網(wǎng)絡(luò)修復(fù)的時(shí)間計(jì)入競賽時(shí)間（扣減該小組競賽時(shí)間）；7、參賽選手提交的作品內(nèi)容中不得出現(xiàn)個(gè)人、學(xué)校等標(biāo)識(shí)信息，如有發(fā)現(xiàn)則競賽成績記為0分；8、在裁判組宣布競賽開始前，選手不得對任務(wù)書、競賽設(shè)備、紙、筆進(jìn)行任何操作，在裁判組宣布競賽結(jié)束后，參賽選手必須立即停止對計(jì)算機(jī)等競賽設(shè)備的任何操作；9、在裁判組宣布競賽結(jié)束后，參賽選手須將原檔案袋中物品放回檔案袋，其他競賽設(shè)備放置到初始位置，并按裁判要求順序離場。第二部分競賽環(huán)境簡介一、競賽環(huán)境1、硬件環(huán)境（每個(gè)參賽小組）序號(hào)設(shè)備名稱單位數(shù)量備注1手機(jī)部1去掉卡槽、帶耳機(jī)2計(jì)算機(jī)臺(tái)3帶耳機(jī)3工作臺(tái)套3桌、椅2、軟件環(huán)境序號(hào)軟件類型軟件名稱軟件版本1操作系統(tǒng)Windows64位Win72H5內(nèi)容制作軟件HTML5交互融媒體內(nèi)容制作實(shí)訓(xùn)平臺(tái)20173瀏覽器GoogleChrome瀏覽器20194支撐軟件MicrosoftOffice20165支撐軟件HBuilder編譯器20196支撐軟件AdobePhotoshopCC20173、網(wǎng)絡(luò)環(huán)境基于以太網(wǎng)技術(shù)的局域網(wǎng)環(huán)境。二、注意事項(xiàng)1、競賽開始時(shí)，參賽選手須檢查北測－HTML5交互融媒體內(nèi)容制作實(shí)訓(xùn)平臺(tái)（下稱“北測-平臺(tái)”）賬號(hào)登錄、使用操作是否正常，所有支撐軟件是否可以正常使用，如認(rèn)定有故障應(yīng)及時(shí)向裁判提出，競賽后再提出的，不予認(rèn)定。如經(jīng)測定正常，屬誤判時(shí)，則認(rèn)定時(shí)間計(jì)入競賽時(shí)間（扣減該小組競賽時(shí)間）；如果經(jīng)測定確有故障，則當(dāng)場修復(fù)，此過程中（測定開始到修復(fù)完成）造成的時(shí)間損失，在競賽時(shí)間結(jié)束后，酌情對該小組進(jìn)行等量的時(shí)間延遲補(bǔ)償；2、競賽過程中，請務(wù)必嚴(yán)格按照任務(wù)書要求對各競賽設(shè)備進(jìn)行操作使用，隨意操作可能會(huì)出現(xiàn)作品不能正常制作、預(yù)覽或提交的情況；3、競賽任務(wù)完成后，請務(wù)必不要關(guān)閉任何競賽設(shè)備，不要拆卸、移動(dòng)競賽設(shè)備的網(wǎng)絡(luò)連接，不要對文件和設(shè)備進(jìn)行加密。第三部分競賽任務(wù)備注：任務(wù)一和任務(wù)二是兩個(gè)獨(dú)立的任務(wù)，特此說明！任務(wù)一：可視化H5內(nèi)容制作選題背景：美麗中國這一年這一年，從爽約的“霧霾灰”到刷屏的“北京藍(lán)”；這一年，我們堅(jiān)決向污染宣戰(zhàn)、突出問題著力解決；這一年，我們在環(huán)保領(lǐng)域?qū)嵳胁粩?、政令頻出；這一年，我們的“國家顏值”越來越高，一幅卓然壯美的美麗中國畫卷由此徐徐展開。這一年，我國生態(tài)文明建設(shè)成效顯著，生態(tài)文明制度體系正加快形成；能源資源消耗強(qiáng)度大幅下降；森林覆蓋率持續(xù)提高；國土空間開發(fā)得到整體謀劃；生態(tài)環(huán)境治理明顯加強(qiáng)。這一年,我們開展了一系列根本性、開創(chuàng)性、長遠(yuǎn)性工作,加快推進(jìn)生態(tài)文明頂層設(shè)計(jì)和制度體系建設(shè),加強(qiáng)法治建設(shè),建立并實(shí)施中央環(huán)境保護(hù)督察制度,大力推動(dòng)綠色發(fā)展,深入實(shí)施大氣、水、土壤污染防治三大行動(dòng)計(jì)劃,推動(dòng)生態(tài)環(huán)境保護(hù)發(fā)生歷史性、轉(zhuǎn)折性、全局性變化。這一年，青山蘊(yùn)含美麗，藍(lán)天映襯幸福。通過我們的努力共同拼畫出中華大地上“山變綠”、“水變清”、“天變藍(lán)”的變革畫卷。美麗中國，綠色底色；環(huán)境保護(hù)，有你有我！1.任務(wù)主題 主題：“美麗中國這一年” 利用北測-平臺(tái)制作“美麗中國這一年”H5作品，對中國生態(tài)文明建設(shè)做出有力宣傳，牢固樹立社會(huì)主義生態(tài)文明觀，推動(dòng)形成人與自然和諧發(fā)展現(xiàn)代化建設(shè)新格局，為保護(hù)生態(tài)環(huán)境作出我們這代人的努力！2.任務(wù)內(nèi)容根據(jù)提供的“美麗中國這一年分鏡腳本”、“美麗中國這一年H5作品”及其素材，利用北測－平臺(tái)制作“美麗中國這一年H5作品”所有呈現(xiàn)的內(nèi)容。手機(jī)掃描二維碼可查看“美麗中國這一年H5作品”效果：打開手機(jī)照相功能對準(zhǔn)作品二維碼，點(diǎn)擊手機(jī)屏幕上顯示的“查看二維碼”進(jìn)入掃描結(jié)果界面，點(diǎn)擊訪問網(wǎng)址，選擇手機(jī)上Chrome瀏覽器即可預(yù)覽作品效果。美麗中國這一年H5作品3.內(nèi)容制作需求1）分鏡圖文腳本請仔細(xì)分析“美麗中國這一年分鏡腳本”，并注意觀察“美麗中國這一年H5作品”中的場景、所有素材及交互。“美麗中國這一年分鏡腳本”截圖在U盤“賽題要求\任務(wù)一\截圖\”目錄下已提供，分鏡圖文腳本是部分內(nèi)容提示，并非全部內(nèi)容提示，完整的內(nèi)容請參考“美麗中國這一年H5作品”，參賽選手需要完成H5作品中所有呈現(xiàn)的內(nèi)容，分鏡圖文腳本詳細(xì)內(nèi)容如下：備注：頁號(hào)描述如：1、2、3……為頁號(hào)；1-1、1-2、1-3……為第1個(gè)頁面的第1個(gè)場景、第2個(gè)場景、第3個(gè)場景…頁號(hào)畫面描述1畫面情節(jié)1.本頁作為加載頁面，即第1個(gè)頁面；2.“美麗中國”文字為主要畫面；文案美麗中國動(dòng)畫描述1.圓球從右下角按固定軌跡縮小移動(dòng)至左側(cè)；2.“美麗中國”逐字出現(xiàn)。交互與邏輯動(dòng)畫定格的同時(shí)自動(dòng)跳轉(zhuǎn)到第2頁。音樂與音效無頁面切換出現(xiàn)頁號(hào)畫面描述2畫面情節(jié)1.本頁作為作品的第二個(gè)頁面，即首頁頁面；2.使用點(diǎn)擊的交互形式，將畫面切換到下一個(gè)頁面。文案無動(dòng)畫描述1.標(biāo)題“美麗中國這一年”從下到上緩慢移出；2.按鈕“開始瀏覽”放大進(jìn)入；3.進(jìn)入頁面時(shí)左側(cè)黃色圓球旋轉(zhuǎn)一周后靜止。交互與邏輯點(diǎn)擊“開始瀏覽”按鈕，本頁消失并切換到下一頁。音樂與音效開始播放背景音樂頁面切換緩入頁號(hào)畫面描述3畫面情節(jié)1.本頁作為“國家顏值”頁面，即第3個(gè)頁面；2.以橫向長圖的方式來展示綠色發(fā)展的美麗中國，并伴有文字介紹。文案1.“國家顏值”越來越高，只因我們按下了綠色發(fā)展的快捷鍵；2.這一年，我們在環(huán)保領(lǐng)域?qū)嵳胁粩唷⒄铑l出；這一年，我們堅(jiān)決向污染宣戰(zhàn)、突出問題著力解決；這一年，美麗中國成績多多。動(dòng)畫描述1.公交車上方有箭頭向右快速劃過，提示向右拖動(dòng)公交車；2.公交車一直循環(huán)抖動(dòng)，可以左右拖動(dòng)；3.根據(jù)公交車的移動(dòng)，路面、建筑、天空會(huì)向左移動(dòng)，模擬公交車行駛，描述文字依次出現(xiàn)消失。交互與邏輯公交車可被左右拖動(dòng)，整體內(nèi)容可隨著公交車被拖動(dòng)出現(xiàn)可視化的動(dòng)畫效果。音樂與音效繼續(xù)播放背景音樂頁面切換緩入頁號(hào)畫面描述4畫面情節(jié)本頁作為“環(huán)保出新”頁面，即第4個(gè)頁面。文案無動(dòng)畫描述1.“環(huán)保標(biāo)準(zhǔn)又出新”小標(biāo)題放大進(jìn)入；2.“4月·環(huán)保部印發(fā)《國家環(huán)境保護(hù)標(biāo)準(zhǔn)“十三五”發(fā)展規(guī)劃》”文字上浮出現(xiàn)；3.白云分別從左右兩邊移入；4.屏幕中的“風(fēng)車”循環(huán)轉(zhuǎn)動(dòng)；5.地球上的眼睛循環(huán)轉(zhuǎn)動(dòng)，地球右下角排污管中的水循環(huán)流動(dòng)。交互與邏輯無音樂與音效繼續(xù)播放背景音樂頁面切換緩入頁號(hào)畫面描述5畫面情節(jié)1.本頁作為“流域規(guī)劃”頁面，即第5個(gè)頁面；2.用無污染的水注滿圓球的效果來表現(xiàn)流域規(guī)劃全面落實(shí)，并伴有文字介紹。文案無動(dòng)畫描述1.“重點(diǎn)流域有規(guī)劃”標(biāo)題放大進(jìn)入；2.云分別從左右兩邊移入；3.中間圓球內(nèi)部有水面上漲動(dòng)畫，圓球被完全填充之后，中間地球出現(xiàn)；4.下方文字依次上浮出現(xiàn)。交互與邏輯無音樂與音效繼續(xù)播放背景音樂；頁面切換緩入頁號(hào)畫面描述6-1畫面情節(jié)1.本頁作為“污染防治”頁第一個(gè)畫面，即第6個(gè)頁面；2.使用連線功能，以垃圾分類的形式來表現(xiàn)“污染防治戰(zhàn)略”。文案無動(dòng)畫描述1.“污染防治攻堅(jiān)戰(zhàn)”小標(biāo)題向上移入出現(xiàn)；2.“連連看”文字蹦跳淡入出現(xiàn)；3.“打贏藍(lán)天保衛(wèi)戰(zhàn)...”文字淡入出現(xiàn)；4.“連線端點(diǎn)”循環(huán)閃爍動(dòng)畫。交互與邏輯1.拖動(dòng)所提示的紅色圓點(diǎn)，可以進(jìn)行連線，對物體進(jìn)行分類；2.4個(gè)物體分類結(jié)束后自動(dòng)進(jìn)入“6-2”畫面。音樂與音效繼續(xù)播放背景音樂；頁面切換緩入頁號(hào)畫面描述6-2畫面情節(jié)1.本頁作為“污染防治”頁第二個(gè)畫面，即第7個(gè)頁面；2.本頁是通過“6-1頁”連線結(jié)束后判斷用戶得分并展示結(jié)果。文案1.得分2.你很棒啊/還不錯(cuò)/繼續(xù)加油動(dòng)畫描述1.火箭循上浮出現(xiàn)；2.行星循環(huán)旋轉(zhuǎn)；3.兩個(gè)紅色小球循環(huán)上下移動(dòng)。交互與邏輯1.通過“6-1頁”連線反饋為標(biāo)準(zhǔn)，結(jié)果分別為四個(gè)分?jǐn)?shù)段：0、25、50、75、100；2.“可回收物”“其他垃圾”連線到“垃圾桶2（即黃色）和“有害垃圾”“廚余垃圾”連線到“垃圾桶1（即橙色）為全部連對；四個(gè)全部連對得100分（評語：你很棒啊）；連對3個(gè)得75分（評語：還不錯(cuò)）；連對2個(gè)得50分（評語：還不錯(cuò)）；連對1個(gè)得25分（評語：繼續(xù)加油）；全部連錯(cuò)得0分（評語：繼續(xù)加油）。音樂與音效繼續(xù)播放背景音樂；頁面切換緩入頁號(hào)畫面描述7畫面情節(jié)1.本頁作為“助力”頁面，即第8個(gè)頁面；2.以建房子小游戲的形式為美麗中國助力。文案無動(dòng)畫描述1.吊塔上的吊鉤和吊著的房子循環(huán)擺動(dòng)；2.點(diǎn)擊屏幕后吊著的房子自動(dòng)下落動(dòng)作；3.“點(diǎn)擊屏幕，為建設(shè)美麗中國助力”停留一會(huì)自動(dòng)消失。交互與邏輯1.點(diǎn)擊屏幕任意位置，吊著的房子會(huì)以當(dāng)前狀態(tài)自由降落到畫面底部的房子上；2.點(diǎn)擊屏幕后，吊鉤立刻垂直顯示在畫面中；3.房子落地之后，短暫停留跳轉(zhuǎn)至下一頁面。音樂與音效繼續(xù)播放背景音樂；頁面切換緩入頁號(hào)畫面描述8-1畫面情節(jié)1.本頁作為“結(jié)束”頁的第一個(gè)畫面，即第9個(gè)頁面；2.以輸入密碼的形式進(jìn)入點(diǎn)贊畫面（8-2），為美麗中國點(diǎn)贊。文案1.請輸入上圖文字2.輸入錯(cuò)誤（輸入錯(cuò)誤之后提示文字）動(dòng)畫描述1.“請輸入上圖文字”循環(huán)閃動(dòng)，起到提示作用；2.點(diǎn)擊下方“美”、“麗”、“中”、“國”四個(gè)按鈕之后，“*”符號(hào)逐個(gè)出現(xiàn)。交互與邏輯1.按照“美”、“麗”、“中”、“國”的順序點(diǎn)擊紅色按鈕后，再點(diǎn)擊“確定”按鈕即可跳轉(zhuǎn)到本頁的下一個(gè)畫面（8-2點(diǎn)贊畫面）；2.點(diǎn)擊“美”、“麗”、“中”、“國”任意一個(gè)按鈕時(shí)，“請輸入上圖文字”更替成“*”符號(hào)，表示輸入密碼的意思；3.假如不按照上面的順序點(diǎn)擊按鈕，當(dāng)點(diǎn)擊“確定”按鈕時(shí)，出現(xiàn)“請輸入上圖文字”，再次點(diǎn)擊出現(xiàn)“輸入錯(cuò)誤”；4．點(diǎn)擊“取消”按鈕時(shí)，顯示“請輸入上圖文字”；5．手指按下紅色按鈕時(shí)，按鈕透明度有變化，手指抬起時(shí)，按鈕透明度還原，做出按鈕被按下去的效果。音樂與音效繼續(xù)播放背景音樂；頁面切換緩入頁號(hào)畫面描述8-2畫面情節(jié)本頁作為“結(jié)束”頁的第二個(gè)畫面，即第10個(gè)頁面。文案無動(dòng)畫描述建筑翻轉(zhuǎn)出現(xiàn)；2.“美麗中國綠色底色...”縮小淡入出現(xiàn)；3.點(diǎn)贊圖片緩慢出現(xiàn)。交互與邏輯點(diǎn)擊下方點(diǎn)贊按鈕，可以對美麗中國進(jìn)行點(diǎn)贊，再次點(diǎn)擊可取消點(diǎn)贊。音樂與音效繼續(xù)播放背景音樂；頁面切換緩入2）H5內(nèi)容制作要求嚴(yán)格按照“美麗中國這一年”預(yù)覽效果及分鏡圖文腳本，制作一個(gè)該H5作品，要求如下：頁數(shù)一致；畫面、內(nèi)容及排版一致；動(dòng)畫內(nèi)容及效果一致；交互方式及效果一致；音樂及音效一致；旋轉(zhuǎn)模式及自適應(yīng)模式一致；手機(jī)查看運(yùn)行流暢無錯(cuò)誤。4.內(nèi)容制作 使用北測－平臺(tái)“創(chuàng)建作品”工具新建內(nèi)容、創(chuàng)建頁面場景、導(dǎo)入素材（相關(guān)素材U盤中已提供）、調(diào)整素材、實(shí)現(xiàn)任務(wù)要求的動(dòng)畫交互，利用手機(jī)瀏覽器掃描二維碼并查看運(yùn)行效果。創(chuàng)建內(nèi)容 使用北測－平臺(tái)“創(chuàng)建作品”工具創(chuàng)建內(nèi)容，項(xiàng)目名稱請使用“座位號(hào)-任務(wù)一”，舞臺(tái)尺寸設(shè)置為：320*520，幀速為：12幀/秒。導(dǎo)入素材 將U盤中“賽題要求\任務(wù)一\素材\”目錄下的圖片、音頻素材導(dǎo)入到素材庫中。調(diào)整素材 按照內(nèi)容要求選擇場景、添加素材，注意不要遺漏素材。 利用所提供的素材進(jìn)行場景的創(chuàng)建，對素材進(jìn)行位置調(diào)整等操作，使其達(dá)到“美麗中國這一年”作品的運(yùn)行效果。完成動(dòng)畫 利用時(shí)間軸與預(yù)置動(dòng)畫等制作各種動(dòng)畫效果，如人物運(yùn)動(dòng)、圖片位移、角度變化等，從而完成規(guī)定的效果。完成交互 利用北測－平臺(tái)“創(chuàng)建作品”工具，添加各種交互功能，如點(diǎn)擊跳轉(zhuǎn)等，從而完成規(guī)定的功能。完成邏輯判斷 利用北測－平臺(tái)“創(chuàng)建作品”工具，實(shí)現(xiàn)各種邏輯判斷，如改變屬性、判斷等，從而完成規(guī)定的效果。文件運(yùn)行并提交作品 用智能手機(jī)掃描完成項(xiàng)目文件的二維碼（用智能手機(jī)掃描前，需要先保存作品），打開手機(jī)照相功能對準(zhǔn)作品二維碼靜止數(shù)秒，點(diǎn)擊手機(jī)屏幕上顯示的“查看二維碼”進(jìn)入掃描結(jié)果界面，點(diǎn)擊訪問網(wǎng)址，選擇手機(jī)上Chrome瀏覽器即可運(yùn)行演示。 根據(jù)運(yùn)行結(jié)果，調(diào)整素材、交互動(dòng)畫和邏輯判斷，完成內(nèi)容制作后，將完成的內(nèi)容保存并命名為“座位號(hào)-任務(wù)一”，在平臺(tái)提交作品。作品合并方式：管理員賬號(hào)（A賬號(hào)）查看子賬號(hào)作品，選擇編輯之后另存為自己的作品，將另存的作品轉(zhuǎn)為模板（點(diǎn)擊查看我的作品，作品下方第三個(gè)按鈕），然后在需要提交的作品中添加模板，實(shí)現(xiàn)作品合并，由管理員賬號(hào)提交。（點(diǎn)擊查看我的作品，點(diǎn)擊要提交的作品中間圖片，進(jìn)入新的頁面，右下方點(diǎn)擊“提交”按鈕即可提交，再次提交之前需取消之前提交的作品。）任務(wù)二：H5編程制作部分選題背景： 現(xiàn)在到2020年，是全面建成小康社會(huì)決勝期。要按照十六大、十七大、十八大提出的全面建成小康社會(huì)各項(xiàng)要求，緊扣我國社會(huì)主要矛盾變化，統(tǒng)籌推進(jìn)經(jīng)濟(jì)建設(shè)、政治建設(shè)、文化建設(shè)、社會(huì)建設(shè)、生態(tài)文明建設(shè)，堅(jiān)定實(shí)施科教興國戰(zhàn)略、人才強(qiáng)國戰(zhàn)略、創(chuàng)新驅(qū)動(dòng)發(fā)展戰(zhàn)略、鄉(xiāng)村振興戰(zhàn)略、區(qū)域協(xié)調(diào)發(fā)展戰(zhàn)略、可持續(xù)發(fā)展戰(zhàn)略、軍民融合發(fā)展戰(zhàn)略，突出抓重點(diǎn)、補(bǔ)短板、強(qiáng)弱項(xiàng)，特別是要堅(jiān)決打好防范化解重大風(fēng)險(xiǎn)、精準(zhǔn)脫貧、污染防治的攻堅(jiān)戰(zhàn)，使全面建成小康社會(huì)得到人民認(rèn)可、經(jīng)得起歷史檢驗(yàn)。中國特色社會(huì)主義進(jìn)入新時(shí)代，我國社會(huì)主要矛盾已經(jīng)轉(zhuǎn)化為人民日益增長的美好生活需要和不平衡不充分的發(fā)展之間的矛盾。 人民生活水平普遍小康，物質(zhì)水平逐漸提高。對吃越來越“講究”，也是小康水平的一種體現(xiàn)。美食吃前有期待、吃后有回味，已不僅僅是簡單的味覺感受，更是一種精神享受。世界各地美食文化博大精深，中國菜更是表現(xiàn)的尤為出色。不同菜肴，營養(yǎng)物質(zhì)各不相同，品味更多美食，享受更多健康，享受美食帶來的美好。 東坡肉相傳為北宋詞人蘇東坡（四川眉山人）所創(chuàng)制，最早發(fā)源地是四川眉山。原型是徐州回贈(zèng)肉，為徐州“東坡四珍”之一。東坡肉的主料和造型大同小異，主料都是半肥半瘦的豬肉，成品菜都是碼得整整齊齊的麻將塊兒，紅得透亮，色如瑪瑙，夾起一塊嘗嘗，軟而不爛，肥而不膩，廣受人民群眾和國內(nèi)外友人喜愛。1.任務(wù)主題 主題：“一碗東坡肉” 根據(jù)所提供的錄屏文件、psd設(shè)計(jì)稿以及作品截圖使用HBuilder編譯器軟件進(jìn)行作品的靜態(tài)布局、動(dòng)畫處理、邏輯編碼、媒體處理、適配設(shè)置，最終完成任務(wù)書要求的H5編程項(xiàng)目。2.任務(wù)內(nèi)容 根據(jù)提供的“一碗東坡肉分鏡腳本”、“一碗東坡肉錄屏視頻”及其psd設(shè)計(jì)稿素材，制作“一碗東坡肉作品”所呈現(xiàn)的內(nèi)容。3.內(nèi)容制作需求1）分鏡圖文腳本 請仔細(xì)分析“一碗東坡肉分鏡腳本”，并注意觀察“一碗東坡肉H5作品”中的場景、所有素材及交互?！耙煌霒|坡肉分鏡腳本”截圖在U盤“賽題要求\任務(wù)二\截圖\”目錄下已提供，分鏡圖文腳本是部分內(nèi)容提示，并非全部內(nèi)容提示，完整的內(nèi)容請參考U盤“賽題要求\任務(wù)二\錄屏\一碗東坡肉H5作品視頻”，參賽選手需要完成H5作品中所有呈現(xiàn)的內(nèi)容，分鏡圖文腳本詳細(xì)內(nèi)容如下：（備注：頁號(hào)描述如“1、2、3……”為頁號(hào)；“1-1、1-2、1-3……”為第1個(gè)頁面的第1個(gè)場景、第2個(gè)場景、第3個(gè)場景……）頁號(hào)畫面描述1畫面情節(jié)1.本頁為加載頁；2.東坡肉上方有三縷煙狀物，以中、右、左的順序出現(xiàn)、變小、消失并且循環(huán)；3.文案模擬加載效果。文案1.LOADING...2.xx%（按加載速度從0到100）動(dòng)畫描述1.loaidng...后面三個(gè)點(diǎn)依次出現(xiàn)（循環(huán)）；2.百分比數(shù)字隨加載進(jìn)度變化（0-100）；3.東坡肉上方有三縷煙狀物，以中、右、左的順序出現(xiàn)、變小、消失并且循環(huán)。交互與邏輯加載進(jìn)度100%之后畫面定格同時(shí)跳轉(zhuǎn)至第二頁音樂與音效無頁面切換出現(xiàn)頁號(hào)畫面描述2畫面情節(jié)本頁為作品第二頁，東坡肉在頁面中間右側(cè)，圍繞五花肉有四層軌道。有五個(gè)食材圓圈（冰糖、黃酒、五花肉、蔥姜、八角）圍繞東坡肉公轉(zhuǎn)加自轉(zhuǎn)；圖片頁面上方中間有縮小的東坡肉的圖畫和“一碗東坡肉”文字；頁面中間左上有文案“聊美食我是專業(yè)的”；屏幕底部中間位置有“了解做法”；5.音樂圖標(biāo)旋轉(zhuǎn)，點(diǎn)擊即停止旋轉(zhuǎn)。文案一碗東坡肉 |聊美食我是專業(yè)的3.了解做法動(dòng)畫描述1.黃酒、冰糖、五花肉、八角食材圓圈在東坡肉公轉(zhuǎn)軌道的第二層，圍繞東坡肉公轉(zhuǎn)并且自轉(zhuǎn)，自轉(zhuǎn)周期5S，公轉(zhuǎn)周期10S；2.蔥姜食材圓圈在東坡肉公轉(zhuǎn)軌道的第三層，圍繞東坡肉公轉(zhuǎn)并且自轉(zhuǎn)，自轉(zhuǎn)周期5S，公轉(zhuǎn)周期10S；3.音樂圖標(biāo)旋轉(zhuǎn)，點(diǎn)擊即停止旋轉(zhuǎn)。交互與邏輯1.上滑進(jìn)入下一頁；2.點(diǎn)擊音樂圖標(biāo)停止播放音樂且圖標(biāo)停止旋轉(zhuǎn)，再次點(diǎn)擊音樂圖標(biāo)即播放音樂，圖標(biāo)旋轉(zhuǎn)。音樂與音效循環(huán)播放背景音樂，點(diǎn)擊圖標(biāo)可關(guān)閉/打開音樂，圖標(biāo)在右上角，圖標(biāo)播放時(shí)循環(huán)轉(zhuǎn)動(dòng)，音樂停止時(shí)，圖標(biāo)停止轉(zhuǎn)動(dòng)。頁面切換平移頁號(hào)畫面描述3-1畫面情節(jié)1.本頁為第三頁的第一個(gè)畫面。背景圖片為五花肉，與點(diǎn)擊的食材內(nèi)容相同；2.文字為該食材的處理方法和挑選建議； 3.音樂圖標(biāo)旋轉(zhuǎn)，點(diǎn)停擊即止旋轉(zhuǎn)。文案一碗東坡肉豬肉焯水，切成大小適宜的方塊。肥瘦適當(dāng)、層層肥瘦相間，比例接近?！寤ㄈ馓暨x經(jīng)驗(yàn)動(dòng)畫描述1.下方三個(gè)按鈕中本頁所選食材-五花肉按鈕邊框發(fā)亮；2.音樂圖標(biāo)循環(huán)順時(shí)針旋轉(zhuǎn)。交互與邏輯1.點(diǎn)擊其他食材，切換至相應(yīng)場景；2.上滑進(jìn)第四頁，下滑返回上一頁；3.點(diǎn)擊音樂圖標(biāo)停止播放音樂且圖標(biāo)停止旋轉(zhuǎn)，再次點(diǎn)擊音樂圖標(biāo)即繼續(xù)播放音樂，圖標(biāo)繼續(xù)旋轉(zhuǎn)。音樂與音效循環(huán)播放背景音樂頁面切換無頁號(hào)畫面描述3-2畫面情節(jié)1.本頁作為作品第三頁的第二個(gè)畫面，背景圖片為蔥姜八角，與點(diǎn)擊的食材內(nèi)容一致；2.文字為該食材的處理方法和挑選建議；3.音樂圖標(biāo)旋轉(zhuǎn)，點(diǎn)停擊即止旋轉(zhuǎn)。文案1.一碗東坡肉2.用鐵鍋或者砂鍋放入蔥、姜、八角、肉皮朝下放入五花肉，倒入黃酒沒過食材。3.顆粒飽滿、整齊完整、呈棕紅色、夾邊裂縫隙較大?！私翘暨x經(jīng)驗(yàn)動(dòng)畫描述1.下方三個(gè)按鈕中本頁所選食材-蔥姜八角按鈕邊框發(fā)亮；2.音樂圖標(biāo)旋轉(zhuǎn)，點(diǎn)停擊即止旋轉(zhuǎn)。交互與邏輯1.擊其他食材，跳轉(zhuǎn)到相應(yīng)畫面；2.上滑進(jìn)第四頁，下滑返回上一頁；3.點(diǎn)擊音樂圖標(biāo)停止播放音樂且圖標(biāo)停止旋轉(zhuǎn)，再次點(diǎn)擊音樂圖標(biāo)即繼續(xù)播放音樂，圖標(biāo)繼續(xù)旋轉(zhuǎn)。音樂與音效繼續(xù)播放背景音樂頁面切換無頁號(hào)畫面描述3-3畫面情節(jié)1.本頁作為第三頁第三個(gè)畫面，背景圖片為冰糖，與點(diǎn)擊的食材內(nèi)容相同；2.音樂圖標(biāo)旋轉(zhuǎn)，點(diǎn)停擊即止旋轉(zhuǎn)。文案1.一碗東坡肉2.放入冰糖、老抽、鹽大火煮開后，小火慢燉1.5小時(shí)大火收汁出鍋！3.晶體光澤、晶粒均勻不含雜質(zhì)，呈白色或淡黃色半透明。——冰糖挑選經(jīng)驗(yàn)動(dòng)畫描述1.下方三個(gè)按鈕中本頁所選食材—冰糖邊框發(fā)亮；2.音樂圖標(biāo)循環(huán)順時(shí)針旋轉(zhuǎn)。交互與邏輯1.擊其他食材，跳轉(zhuǎn)到相應(yīng)畫面；2.上滑進(jìn)第四頁，下滑返回上一頁；3.點(diǎn)擊音樂圖標(biāo)停止播放音樂且圖標(biāo)停止旋轉(zhuǎn)，再次點(diǎn)擊音樂圖標(biāo)即繼續(xù)播放音樂，圖標(biāo)繼續(xù)旋轉(zhuǎn)。音樂與音效繼續(xù)播放背景音樂頁面切換無頁號(hào)畫面描述4畫面情節(jié)1.本頁作為第四頁，由《豬肉頌》和散發(fā)香氣的東坡肉所組成；2.音樂圖標(biāo)旋轉(zhuǎn)，點(diǎn)擊即停止旋轉(zhuǎn)。文案《豬肉頌》凈洗鐺，少著水，柴頭罨煙焰不起。待他自熟莫催他，火候足時(shí)他自美。黃州好豬肉，價(jià)賤如泥土。貴者不肯吃，貧者不解煮，早晨起來打兩碗，飽得自家君莫管?！K軾動(dòng)畫描述1.東坡肉上方有三縷煙狀物，以中、右、左的順序出現(xiàn)、變小、消失并且循環(huán)；2.音樂圖標(biāo)旋轉(zhuǎn)。交互與邏輯1.下滑返回上一頁；2.點(diǎn)擊音樂圖標(biāo)停止播放音樂且圖標(biāo)停止旋轉(zhuǎn)，再次點(diǎn)擊音樂圖標(biāo)即繼續(xù)播放音樂，