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

2022年山東省職業(yè)院校技能大賽高職組

“HTML5交互融媒體內(nèi)容設(shè)計(jì)與制作”賽項(xiàng)

（樣題）

競

賽

任

務(wù)

書

工位號___________

2022年

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

第一部分競賽須知

一、競賽要求

（一）按要求完成競賽任務(wù)，嚴(yán)格遵守操作要求，正確使用計(jì)算機(jī)設(shè)備；

（二）競賽過程中如有問題，及時與裁判進(jìn)行聯(lián)系；

（三）嚴(yán)格遵守賽場紀(jì)律，禁止任何作弊行為，服從安排。

二、職業(yè)素養(yǎng)與安全意識

（一）禁止大聲喧嚷，未經(jīng)裁判允許，不得站立、走動，保證競賽秩序；

（二）參賽選手所有操作均應(yīng)符合安全規(guī)范。

三、選手須知

（一）競賽開始前，請參賽選手進(jìn)行如下檢查工作：

1.檢查BC-理論測評考試系統(tǒng)、融媒體內(nèi)容制作應(yīng)用系統(tǒng)、融媒體數(shù)據(jù)分析系統(tǒng)。賬號登錄、

使用操作是否正常，所有支撐軟件是否可以正常使用，如認(rèn)定有故障應(yīng)及時聯(lián)系裁判提出，競賽

結(jié)束后再提出的，不予認(rèn)定；

2.競賽過程中，請仔細(xì)閱讀競賽任務(wù)書。

（二）參賽小組應(yīng)在規(guī)定時間內(nèi)完成任務(wù)書要求的所有內(nèi)容，任務(wù)完成后的作品必須按要求提交，

作品未按要求提交的，則該任務(wù)不得分。

（三）參賽選手競賽過程中，請及時保存任務(wù)中間成果。因任務(wù)中間成果未及時保存，遇設(shè)備或

網(wǎng)絡(luò)故障導(dǎo)致前續(xù)工作結(jié)果丟失的，選手自行承擔(dān)。

（四）參賽選手提交的作品內(nèi)容中不得出現(xiàn)個人、學(xué)校等標(biāo)識信息，如有發(fā)現(xiàn)則競賽成績記為0

分。

（五）在裁判宣布競賽開始前，選手不得進(jìn)行任何答題操作。

（六）在裁判宣布競賽結(jié)束后，參賽選手必須立即停止對計(jì)算機(jī)等競賽設(shè)備的任何操作，聽從裁

判相關(guān)安排。

第二部分競賽任務(wù)

模塊一融媒體理論知識考核

理論題競賽部分為單選題、多選題、判斷題等題型，以融媒體相關(guān)理論知識為基礎(chǔ)，涵蓋媒

體運(yùn)營、融媒體傳播矩陣、網(wǎng)絡(luò)熱點(diǎn)信息、數(shù)據(jù)分析、VR虛擬現(xiàn)實(shí)、輿情監(jiān)測和網(wǎng)絡(luò)信息技術(shù)等

多方面內(nèi)容知識點(diǎn)。

具體考試內(nèi)容登錄到理論考核平臺后進(jìn)行答題。

模塊二融媒體實(shí)操技能考核

（實(shí)操題任務(wù)一、任務(wù)二、任務(wù)三為三個獨(dú)立任務(wù)，特此說明?。?/p>

任務(wù)一：融媒體平臺作品制作

一、選題背景：

春節(jié)，即中國農(nóng)歷新年，俗稱新春、新歲、歲旦等，口頭上又稱過年、過大年。春節(jié)歷史悠

久，由上古時代歲首祈歲祭祀演變而來。萬物本乎天、人本乎祖，祈歲祭祀、敬天法祖，報本反

始也。春節(jié)的起源蘊(yùn)含著深邃的文化內(nèi)涵，在傳承發(fā)展中承載了豐厚的歷史文化底蘊(yùn)。在春節(jié)期

間，全國各地均有舉行各種慶賀新春活動，帶有濃郁的各地域特色。這些活動以除舊布新、驅(qū)邪

第1頁/共25頁

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

攘災(zāi)、拜神祭祖、納福祈年為主要內(nèi)容，形式豐富多彩，凝聚著中華傳統(tǒng)文化精華。

二、任務(wù)主題：

主題：“春節(jié)回家大挑戰(zhàn)”

三、任務(wù)內(nèi)容

（一）融媒體可視化作品

利用融媒體內(nèi)容制作應(yīng)用系統(tǒng)（H5專業(yè)版）制作“春節(jié)回家大挑戰(zhàn)”融媒體可視化作品，完

成場景模擬，動畫交互效果。

1.（/c/5f2cc2700fcad93ecb196705/20211121085141/sbtg/index.

html）打開查看“春節(jié)回家大挑戰(zhàn)”樣例作品，并請仔細(xì)分析分鏡圖文腳本，并注意觀察樣例作

品中的場景、所用素材及交互，利用融媒體內(nèi)容制作應(yīng)用系統(tǒng)（H5專業(yè)版）制作“春節(jié)回家大挑

戰(zhàn)”樣例作品中所有呈現(xiàn)的內(nèi)容。

2.融媒體內(nèi)容制作要求

嚴(yán)格按照“春節(jié)回家大挑戰(zhàn)”樣例作品預(yù)覽效果及分鏡圖文腳本，制作一個完整的融媒體作

品，要求如下：

（1）頁數(shù)、畫面、內(nèi)容及排版一致；

（2）動畫、邏輯交互方式及效果一致；

（3）音樂音效、旋轉(zhuǎn)模式及自適應(yīng)模式一致。

3.內(nèi)容制作

使用融媒體內(nèi)容制作應(yīng)用系統(tǒng)（H5專業(yè)版）工具創(chuàng)建頁面場景、導(dǎo)入素材（相關(guān)素材已提供）、

調(diào)整素材、實(shí)現(xiàn)任務(wù)要求的動畫交互，并查看運(yùn)行效果。

（1）創(chuàng)建內(nèi)容

舞臺尺寸設(shè)置為：320*520，幀速為：12幀/秒，禁止舞臺動畫循環(huán)。

（2）導(dǎo)入素材

將文件夾中“賽題要求\任務(wù)一\素材\”目錄下的圖片、音頻素材導(dǎo)入到素材庫中。

（3）調(diào)整素材

按照內(nèi)容要求選擇場景、添加素材，注意不要遺漏素材。

利用所提供的素材進(jìn)行場景的創(chuàng)建，對素材進(jìn)行位置排版及制作等操作，使其達(dá)到作品的運(yùn)

行效果。

（4）完成動畫及邏輯交互

利用時間軸與預(yù)置動畫等制作各種動畫效果，如人物運(yùn)動、圖片位移、角度變化等，從而完

成規(guī)定的效果。

利用各種邏輯交互行為功能，如點(diǎn)擊、跳轉(zhuǎn)、判斷等，從而完成規(guī)定的功能。

（5）運(yùn)行并提交作品

根據(jù)運(yùn)行結(jié)果，調(diào)整素材、交互動畫和邏輯判斷，完成內(nèi)容制作后，將完成的內(nèi)容保存，在

平臺提交作品。（作品提交請查看“附件1”）

4.分鏡圖文腳本

“春節(jié)回家大挑戰(zhàn)”分鏡圖文腳本截圖在文件夾“賽題要求\任務(wù)一\截圖\”目錄下已提供，

分鏡圖文腳本是部分內(nèi)容提示，并非全部內(nèi)容提示，完整的內(nèi)容請參考“春節(jié)回家大挑戰(zhàn)”樣例

作品，如果預(yù)覽效果與任務(wù)書發(fā)生沖突，以任務(wù)書為準(zhǔn)，分鏡圖文腳本詳細(xì)內(nèi)容如下：

（備注：頁號描述如：1、2、3……為頁號；1-1、1-2、1-3……為第1個頁面的第1個場景、

第2個場景、第3個場景……）

第2頁/共25頁

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

頁號畫面描述

頁面場景本頁作為加載頁面，即第一個頁面；

頁面文案loading；

1.首先左側(cè)云從左側(cè)移入，然后右側(cè)云從右側(cè)移入；

2.火車從右下方進(jìn)入，進(jìn)入后有反彈效果；

動畫描述3.進(jìn)度條增長，直到充滿；

4.進(jìn)度條右側(cè)數(shù)字表示加載速率從0%-100%變化；

15.loading后方三個點(diǎn)依次循環(huán)出現(xiàn)。

交互邏輯加載速率值為100%后跳轉(zhuǎn)至第P2頁。

音樂音效無

頁面切換緩入

第3頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第二個頁面；

頁面文案無

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

2.首先左側(cè)燈籠從下方浮入，然后右側(cè)燈籠從下方浮入；

3.“春節(jié)回家大”放大進(jìn)入，“挑戰(zhàn)”蹦入，2秒后顫抖

動畫描述一次；

4.牛氣卷軸擦除出現(xiàn)，隨后“敢挑戰(zhàn)嗎？”擦除出現(xiàn)；

25.“我要挑戰(zhàn)”按鈕循環(huán)放大縮小；

6.白色火車從右下方進(jìn)入，進(jìn)入后有反彈效果。

1.本頁開始禁止系統(tǒng)默認(rèn)翻頁行為；

交互邏輯

2.點(diǎn)擊“我要挑戰(zhàn)”按鈕進(jìn)入第P3-1頁。

音樂音效開始播放背景音樂。

頁面切換緩入

第4頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第三個頁面，第一個場景；

頁面文案選出“春節(jié)”錯誤得一組；

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

2.燈籠從上方浮入，“燈籠從左到右依次亮一次之后，所

有燈籠同時亮兩次”并做循環(huán)播放；

動畫描述

3.“第1關(guān)”翻轉(zhuǎn)進(jìn)入，文字【選出“春節(jié)”錯誤得一組】

以打字機(jī)的方式出現(xiàn)；

4.“6個文字組”與“下一題”按鈕直接出現(xiàn)。

3-1

1.圖中6組“春節(jié)”文字可以任意點(diǎn)擊，每組可多次點(diǎn)擊，

點(diǎn)擊后當(dāng)前組出現(xiàn)黑框，再次點(diǎn)擊組，黑框閃爍，長按黑

框消失；【注意：每次點(diǎn)擊只能選擇一個組】

交互邏輯

2.點(diǎn)擊“下一題”回答錯誤，跳轉(zhuǎn)到第P3-2頁；

3.點(diǎn)擊“下一題”回答正確，直接跳轉(zhuǎn)到第P4-1頁。（圖

中黑框?yàn)檎_答案）

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第5頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第三個頁面，第二個場景；

頁面文案您的回答錯誤！請重新作答；

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

動畫描述2.“燈籠從左到右依次亮一次之后，所有燈籠同時亮兩

次”并做循環(huán)播放。

3-2

1.“您的回答錯誤！請重新作答”文字出現(xiàn)后，黑框消失，

交互邏輯文字在原位慢慢消失；

2.文字消失后，跳轉(zhuǎn)到第P3-1頁重新作答。

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第6頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第四個頁面，第一個場景；

頁面文案選出北京、上海、廣州的標(biāo)志性建筑；

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

2.燈籠從上方浮入，“燈籠從左到右依次亮一次之后，所

有燈籠同時亮兩次”并做循環(huán)播放；

動畫描述

3.“第2關(guān)”翻轉(zhuǎn)進(jìn)入，文字“選出北京、上海、廣州的

標(biāo)志性建筑”以打字機(jī)的方式出現(xiàn)；

4.“6張圖片”與“下一題”按鈕直接出現(xiàn)。

4-1

1.圖中6張圖片可以任意點(diǎn)擊，點(diǎn)擊后當(dāng)前照片右下角出

現(xiàn)紅色選勾，再次點(diǎn)擊照片，紅色選勾消失；【注意：可

以多選】

交互邏輯

2.點(diǎn)擊“下一題”回答錯誤，跳轉(zhuǎn)到第P4-2頁；

3.點(diǎn)擊“下一題”回答正確，直接跳轉(zhuǎn)到第P5頁。（圖

中勾選圖片為正確答案）

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第7頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的第四個頁面，第二個場景；

頁面文案您的回答錯誤！請重新作答；

1.背景以跑馬燈的形式循環(huán)運(yùn)動；

動畫描述2.“燈籠從左到右依次亮一次之后，所有燈籠同時亮兩

次”并做循環(huán)播放。

4-2

1.“您的回答錯誤！請重新作答”文字出現(xiàn)后，紅色選勾

交互邏輯消失，文字在原位慢慢消失；

2.文字消失后，跳轉(zhuǎn)到第P4-1頁重新作答。

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第8頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第五個頁面；

頁面文案瘋狂點(diǎn)擊按鈕飛天超過50米紅線過關(guān)；

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

2.燈籠從上方浮入，“燈籠從左到右依次亮一次之后，所

有燈籠同時亮兩次”并做循環(huán)播放；

動畫描述3.“第3關(guān)”翻轉(zhuǎn)進(jìn)入，文字“瘋狂點(diǎn)擊按鈕飛天超過50

米紅線過關(guān)”以打字機(jī)的方式出現(xiàn)；

4.“20米、50米、80米”文字與“魚”圖片與“GO”按

5鈕直接出現(xiàn)，并且“GO”按鈕循環(huán)放大縮小。

1.每點(diǎn)擊一次“GO”按鈕，魚上升一段距離，并且每點(diǎn)擊

兩次，魚本身抖動一次；

交互邏輯

2.停止點(diǎn)擊“GO”按鈕，魚恢復(fù)原位且停止抖動；

3.魚中心點(diǎn)接觸紅線后，自動跳轉(zhuǎn)到第P6-1頁。

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第9頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第六個頁面，第一個場景；

頁面文案快速收取金幣滿5個金幣才可換購車票；

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

2.燈籠從上方浮入，“燈籠從左到右依次亮一次之后，所有燈

籠同時亮兩次”并做循環(huán)播放；

動畫描述

3.“第4關(guān)”翻轉(zhuǎn)進(jìn)入，文字“快速收取金幣滿5個金幣才可

換購車票”以打字機(jī)的方式出現(xiàn)；

4.屏幕有金幣落下且自轉(zhuǎn)1圈。（共5個金幣）

6-11.點(diǎn)擊當(dāng)前金幣后，當(dāng)前金幣消失；

2.點(diǎn)擊金幣，金幣消失后，金幣收納框中增加一枚金幣；【注

意：（1）每個金幣只能點(diǎn)擊一次。（2）只有點(diǎn)擊掉落金幣，

金幣框才會增加一枚金幣。（3）初次點(diǎn)擊任意金幣，金幣框都

交互邏輯是從一開始增加?！?/p>

3.沒有點(diǎn)擊金幣或點(diǎn)擊不夠5枚金幣，直到最后一枚金幣掉落

離開舞臺，自動跳轉(zhuǎn)到P6-2頁；

4.5枚金幣都點(diǎn)擊且金幣框中達(dá)到5枚金幣，自動跳轉(zhuǎn)到P6-3

頁。

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第10頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第六個頁面，第二個場景；

頁面文案重新挑戰(zhàn)！金幣丟失了；

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

動畫描述2.“燈籠從左到右依次亮一次之后，所有燈籠同時亮兩

次”并做循環(huán)播放。

6-2

“重新挑戰(zhàn)！金幣丟失了”文字顯示2秒后消失，自動跳

交互邏輯

轉(zhuǎn)到P6-1頁重新挑戰(zhàn)；

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第11頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第六個頁面，第三個場景；

頁面文案恭喜你！可以去買車票了；

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

動畫描述2.“燈籠從左到右依次亮一次之后，所有燈籠同時亮兩

次”并做循環(huán)播放。

6-3

“恭喜你！可以去買車票了”文字顯示1秒后消失，自動

交互邏輯

跳轉(zhuǎn)到第P7頁；

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第12頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第七個頁面；

1.請輸入出發(fā)地；

頁面文案

2.請輸入目的地。

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

2.煙花背景循環(huán)閃爍；

3.首先左側(cè)燈籠從下方浮入，然后右側(cè)燈籠從下方浮入；

動畫描述4.“恭喜過關(guān)”蹦入；

5.“成功過關(guān)獲得定制出發(fā)地點(diǎn)的機(jī)會”從下方浮入；

7

6.文本輸入外框及文本輸入框依次從左側(cè)飛入；

7.“生成車票”按鈕放大進(jìn)入。

1.文本輸入框限制輸入2字符；

交互邏輯

2.點(diǎn)擊“生成車票”跳轉(zhuǎn)到第P8頁。

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第13頁/共25頁

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

頁號畫面描述

頁面場景本頁作為作品的第八個頁面；

頁面文案無

1.背景框以跑馬燈的形式循環(huán)運(yùn)動；

2.紅色火車從右上角，放大進(jìn)入；白色火車從左下方進(jìn)入，

進(jìn)入后有反彈效果；

3.“拿到車票了！開心回家過春節(jié)”文字放大進(jìn)入；

動畫描述

4.“GO!GO!GO!”文字蹦入并循環(huán)放大縮?。?/p>

5.車票翻轉(zhuǎn)進(jìn)入；

8

6.“您是第3200位通關(guān)者”文字從下方浮入；

7.“再來一次”按鈕從下方浮入。

1.圖中出發(fā)地與目的地（見圖文字“東北”、“西北”）

承接第P7頁文本輸入框所輸入的內(nèi)容；

交互邏輯

2.點(diǎn)擊“再來一次”按鈕，跳轉(zhuǎn)到第P2頁，重新挑戰(zhàn)。

【注意：重新挑戰(zhàn)各關(guān)卡內(nèi)容要恢復(fù)初始狀態(tài)】

音樂音效繼續(xù)播放背景音樂；

頁面切換緩入

第14頁/共25頁

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

任務(wù)二：融媒體頁面作品開發(fā)

一、任務(wù)主題

主題：“金牛鬧元宵”

根據(jù)所提供的錄屏文件、psd設(shè)計(jì)稿以及作品截圖使用HBuilder編譯器軟件進(jìn)行作品的靜

態(tài)布局、動畫處理、邏輯編碼、媒體處理、適配設(shè)置，最終完成任務(wù)書要求的融媒體編程項(xiàng)目。

二、任務(wù)內(nèi)容

根據(jù)提供的“金牛鬧元宵”分鏡圖文腳本、“金牛鬧元宵錄屏視頻”及其psd設(shè)計(jì)稿素材，

制作“金牛鬧元宵錄屏視頻”所呈現(xiàn)的所有內(nèi)容。

三、制作要求

自定義文件目錄或使用HBuilder創(chuàng)建項(xiàng)目，根據(jù)所提供的psd圖片素材，利用Photoshop

軟件處理成合適的圖片進(jìn)行布局、添加動畫交互，使用原生JavaScript語言進(jìn)行開發(fā)，比賽環(huán)

境不提供jQuery等前端庫。

嚴(yán)格按照“金牛鬧元宵錄屏視頻”預(yù)覽效果及分鏡圖文腳本，制作一個融媒體內(nèi)容，要求

如下：

（一）頁數(shù)、畫面、內(nèi)容及排版一致；

（二）動畫內(nèi)容、邏輯交互效果一致；

（三）音樂音效、旋轉(zhuǎn)模式及自適應(yīng)模式一致；

（四）文件目錄要求：img(存放圖片素材）、css（存放css層疊樣式表文件）、js（存

放JavaScript腳本文件）、media（存放音、視頻文件）、index.html（入口文件）；

（五）處理素材。考生可使用Photoshop軟件對圖片進(jìn)行整理，自定義圖片大小、格式，

最終實(shí)現(xiàn)任務(wù)說明中的布局樣式。

（六）完成動畫交互制作。模擬正常移動端前端開發(fā)，使用JavaScript、CSS3、HTML5完

成對整個作品的開發(fā)。

（七）作品查看與提交。使用chrome瀏覽器模擬移動端運(yùn)行（移動端尺寸為：750*1334適

應(yīng)3種以上機(jī)型），對作品進(jìn)行查看、排錯。（作品提交請查看“附件1”）

四、分鏡圖文腳本

請仔細(xì)分析“金牛鬧元宵”分鏡圖文腳本，并注意觀察文件夾中“賽題要求\任務(wù)二\錄屏\

金牛鬧元宵錄屏視頻”中的場景、所有素材及交互?！敖鹋ｔ[元宵分鏡圖文腳本”截圖在文件

夾“賽題要求\任務(wù)二\截圖\”目錄下已提供，分鏡圖文腳本是部分內(nèi)容提示，并非全部內(nèi)容提

示，完整的內(nèi)容請參考“金牛鬧元宵錄屏視頻”，參賽選手需要完成“金牛鬧元宵錄屏視頻”

中所有呈現(xiàn)的內(nèi)容（錄屏中出現(xiàn)的黃綠色按鈕為模擬鼠標(biāo)，請注意甄別），如果預(yù)覽效果與任

務(wù)書發(fā)生沖突，以任務(wù)書為準(zhǔn)，分鏡圖文腳本詳細(xì)內(nèi)容如下：

（備注：頁號描述如“1、2、3……”為頁號；“1-1、1-2、1-3……”為第1個頁面的第

1個場景、第2個場景、第3個場景…）

第15頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的加載頁；

頁面文案Loading...XX%(xx為0%-100%的加載數(shù)值)

1.背景煙花循環(huán)有規(guī)律綻放；

2.屏幕下方炮竹循環(huán)放大縮??；

動畫描述

3.小牛在進(jìn)度條上前進(jìn)；

14.XX%模擬加載數(shù)字。

交互邏輯“l(fā)oading...100%”加載完畢自動進(jìn)入第P2頁。

音樂音效開始播放背景音樂；

頁面切換出現(xiàn)

第16頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的第二頁；

頁面文案無

1.右上角音樂符號順時針循環(huán)轉(zhuǎn)動；

2.背景煙花有規(guī)則綻放；

動畫描述3.兩側(cè)燈籠以繩子根部為圓點(diǎn)循環(huán)左右晃動；

4.屏幕下方炮竹循環(huán)放大縮??；

5.“我要猜燈謎”按鈕，從左下方移入。

2

交互邏輯點(diǎn)擊“我要猜燈謎”按鈕即可進(jìn)入第P3頁；

音樂音效點(diǎn)擊屏幕右上角的音樂圖標(biāo)可播放/暫停背景音樂

頁面切換出現(xiàn)

第17頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的第三頁；

1.本活動僅限參加比賽用戶參與。

2.用戶在頁面內(nèi)可參與猜燈謎活動，本次活動共有6道燈

頁面文案謎題，需全部答對方可領(lǐng)取元旦祝福語。

3.如您已擁有祝福語，不要重復(fù)領(lǐng)取哦，本活動有效期7

天呢！還等什么？快來領(lǐng)取吧！

1.右上角音樂符號消失；

2.背景煙花有規(guī)則綻放；

動畫描述

33.三段文字依次出現(xiàn)；

4.“開始猜燈謎”按鈕從左下側(cè)移入。

交互邏輯點(diǎn)擊“開始猜燈謎”按鈕即可進(jìn)入第P4-1頁；

音樂音效繼續(xù)播放背景音樂；

頁面切換出現(xiàn)

第18頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的第四頁，第一個場景；

頁面文案小提示：全部答對獲取祝福哦~

1.背景煙花有規(guī)則綻放；

動畫描述

2.所有燈籠循環(huán)放大縮小。

4-1

交互邏輯點(diǎn)擊左上第一個燈籠，即可跳轉(zhuǎn)到第P4-2頁；

音樂音效繼續(xù)播放背景音樂；

頁面切換出現(xiàn)

第19頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的第五頁，第二個場景；

【注意：標(biāo)黑處文字為正確答案】

1.充耳不聞無話講(打一茶葉名）

A：龍井B：碧螺春C：佛手D：鐵觀音

2.春香連日去聽琴(打一字）

A：項(xiàng)B：需C：秦D：鵬

3.山水相連稱第一(打一廣東地名）

頁面文案A：深圳B：廣州C：佛山D：汕頭

4.動物學(xué)索引(打一成語）

A：虎頭虎腦B：目中無人C：雙龍戲珠D：物是人非

5.二人別后又相逢(打一字）

4-2A：友B：歸C：情D：笑

6.公孫勝駕云，丁得孫狂奔(打一成語）

A：精神抖擻B：龍騰虎躍C：無法無天D：春暖花開

動畫描述無

1.點(diǎn)擊錯誤答案，即可跳轉(zhuǎn)到P4-3頁；

交互邏輯

2.點(diǎn)擊正確答案，即可跳轉(zhuǎn)到P4-4頁。

音樂音效繼續(xù)播放背景音樂；

頁面切換出現(xiàn)

第20頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的第四頁，第三個場景；

頁面文案您的回答錯誤！

動畫描述“您的回答錯誤”文字顯示1秒后消失；

4-3

“您的回答錯誤”文字消失后，自動跳轉(zhuǎn)到第P4-2頁繼續(xù)

交互邏輯

作答；

音樂音效繼續(xù)播放背景音樂；

頁面切換出現(xiàn)

第21頁/共25頁

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

頁號畫面描述

頁面場景本頁為作品的第四頁，第四個場景；

頁面文案無

1.背景煙花有規(guī)則綻放；

2.回答正確后，當(dāng)前燈籠點(diǎn)亮，燈籠文字變?yōu)椤按饘?！?/p>

動畫描述

并停止放大縮??；

4-43.6個燈籠全部點(diǎn)亮后，“我的祝福語”按鈕從左下方移入；

交互邏輯點(diǎn)擊“我的祝福語”按鈕，即可跳轉(zhuǎn)到第