2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-任务书（样）

2022年山东省职业院校技能大赛高职组

“HTML5交互融媒体内容设计与制作”赛项

（样题）

竞

赛

任

务

书

工位号___________

2022年

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

第一部分竞赛须知

一、竞赛要求

（一）按要求完成竞赛任务，严格遵守操作要求，正确使用计算机设备；

（二）竞赛过程中如有问题，及时与裁判进行联系；

（三）严格遵守赛场纪律，禁止任何作弊行为，服从安排。

二、职业素养与安全意识

（一）禁止大声喧嚷，未经裁判允许，不得站立、走动，保证竞赛秩序；

（二）参赛选手所有操作均应符合安全规范。

三、选手须知

（一）竞赛开始前，请参赛选手进行如下检查工作：

1.检查BC-理论测评考试系统、融媒体内容制作应用系统、融媒体数据分析系统。账号登录、

使用操作是否正常，所有支撑软件是否可以正常使用，如认定有故障应及时联系裁判提出，竞赛

结束后再提出的，不予认定；

2.竞赛过程中，请仔细阅读竞赛任务书。

（二）参赛小组应在规定时间内完成任务书要求的所有内容，任务完成后的作品必须按要求提交，

作品未按要求提交的，则该任务不得分。

（三）参赛选手竞赛过程中，请及时保存任务中间成果。因任务中间成果未及时保存，遇设备或

网络故障导致前续工作结果丢失的，选手自行承担。

（四）参赛选手提交的作品内容中不得出现个人、学校等标识信息，如有发现则竞赛成绩记为0

分。

（五）在裁判宣布竞赛开始前，选手不得进行任何答题操作。

（六）在裁判宣布竞赛结束后，参赛选手必须立即停止对计算机等竞赛设备的任何操作，听从裁

判相关安排。

第二部分竞赛任务

模块一融媒体理论知识考核

理论题竞赛部分为单选题、多选题、判断题等题型，以融媒体相关理论知识为基础，涵盖媒

体运营、融媒体传播矩阵、网络热点信息、数据分析、VR虚拟现实、舆情监测和网络信息技术等

多方面内容知识点。

具体考试内容登录到理论考核平台后进行答题。

模块二融媒体实操技能考核

（实操题任务一、任务二、任务三为三个独立任务，特此说明！）

任务一：融媒体平台作品制作

一、选题背景：

春节，即中国农历新年，俗称新春、新岁、岁旦等，口头上又称过年、过大年。春节历史悠

久，由上古时代岁首祈岁祭祀演变而来。万物本乎天、人本乎祖，祈岁祭祀、敬天法祖，报本反

始也。春节的起源蕴含着深邃的文化内涵，在传承发展中承载了丰厚的历史文化底蕴。在春节期

间，全国各地均有举行各种庆贺新春活动，带有浓郁的各地域特色。这些活动以除旧布新、驱邪

第1页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

攘灾、拜神祭祖、纳福祈年为主要内容，形式丰富多彩，凝聚着中华传统文化精华。

二、任务主题：

主题：“春节回家大挑战”

三、任务内容

（一）融媒体可视化作品

利用融媒体内容制作应用系统（H5专业版）制作“春节回家大挑战”融媒体可视化作品，完

成场景模拟，动画交互效果。

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

html）打开查看“春节回家大挑战”样例作品，并请仔细分析分镜图文脚本，并注意观察样例作

品中的场景、所用素材及交互，利用融媒体内容制作应用系统（H5专业版）制作“春节回家大挑

战”样例作品中所有呈现的内容。

2.融媒体内容制作要求

严格按照“春节回家大挑战”样例作品预览效果及分镜图文脚本，制作一个完整的融媒体作

品，要求如下：

（1）页数、画面、内容及排版一致；

（2）动画、逻辑交互方式及效果一致；

（3）音乐音效、旋转模式及自适应模式一致。

3.内容制作

使用融媒体内容制作应用系统（H5专业版）工具创建页面场景、导入素材（相关素材已提供）、

调整素材、实现任务要求的动画交互，并查看运行效果。

（1）创建内容

舞台尺寸设置为：320*520，帧速为：12帧/秒，禁止舞台动画循环。

（2）导入素材

将文件夹中“赛题要求\任务一\素材\”目录下的图片、音频素材导入到素材库中。

（3）调整素材

按照内容要求选择场景、添加素材，注意不要遗漏素材。

利用所提供的素材进行场景的创建，对素材进行位置排版及制作等操作，使其达到作品的运

行效果。

（4）完成动画及逻辑交互

利用时间轴与预置动画等制作各种动画效果，如人物运动、图片位移、角度变化等，从而完

成规定的效果。

利用各种逻辑交互行为功能，如点击、跳转、判断等，从而完成规定的功能。

（5）运行并提交作品

根据运行结果，调整素材、交互动画和逻辑判断，完成内容制作后，将完成的内容保存，在

平台提交作品。（作品提交请查看“附件1”）

4.分镜图文脚本

“春节回家大挑战”分镜图文脚本截图在文件夹“赛题要求\任务一\截图\”目录下已提供，

分镜图文脚本是部分内容提示，并非全部内容提示，完整的内容请参考“春节回家大挑战”样例

作品，如果预览效果与任务书发生冲突，以任务书为准，分镜图文脚本详细内容如下：

（备注：页号描述如：1、2、3……为页号；1-1、1-2、1-3……为第1个页面的第1个场景、

第2个场景、第3个场景……）

第2页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为加载页面，即第一个页面；

页面文案loading；

1.首先左侧云从左侧移入，然后右侧云从右侧移入；

2.火车从右下方进入，进入后有反弹效果；

动画描述3.进度条增长，直到充满；

4.进度条右侧数字表示加载速率从0%-100%变化；

15.loading后方三个点依次循环出现。

交互逻辑加载速率值为100%后跳转至第P2页。

音乐音效无

页面切换缓入

第3页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第二个页面；

页面文案无

1.背景框以跑马灯的形式循环运动；

2.首先左侧灯笼从下方浮入，然后右侧灯笼从下方浮入；

3.“春节回家大”放大进入，“挑战”蹦入，2秒后颤抖

动画描述一次；

4.牛气卷轴擦除出现，随后“敢挑战吗？”擦除出现；

25.“我要挑战”按钮循环放大缩小；

6.白色火车从右下方进入，进入后有反弹效果。

1.本页开始禁止系统默认翻页行为；

交互逻辑

2.点击“我要挑战”按钮进入第P3-1页。

音乐音效开始播放背景音乐。

页面切换缓入

第4页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第三个页面，第一个场景；

页面文案选出“春节”错误得一组；

1.背景框以跑马灯的形式循环运动；

2.灯笼从上方浮入，“灯笼从左到右依次亮一次之后，所

有灯笼同时亮两次”并做循环播放；

动画描述

3.“第1关”翻转进入，文字【选出“春节”错误得一组】

以打字机的方式出现；

4.“6个文字组”与“下一题”按钮直接出现。

3-1

1.图中6组“春节”文字可以任意点击，每组可多次点击，

点击后当前组出现黑框，再次点击组，黑框闪烁，长按黑

框消失；【注意：每次点击只能选择一个组】

交互逻辑

2.点击“下一题”回答错误，跳转到第P3-2页；

3.点击“下一题”回答正确，直接跳转到第P4-1页。（图

中黑框为正确答案）

音乐音效继续播放背景音乐；

页面切换缓入

第5页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第三个页面，第二个场景；

页面文案您的回答错误！请重新作答；

1.背景框以跑马灯的形式循环运动；

动画描述2.“灯笼从左到右依次亮一次之后，所有灯笼同时亮两

次”并做循环播放。

3-2

1.“您的回答错误！请重新作答”文字出现后，黑框消失，

交互逻辑文字在原位慢慢消失；

2.文字消失后，跳转到第P3-1页重新作答。

音乐音效继续播放背景音乐；

页面切换缓入

第6页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第四个页面，第一个场景；

页面文案选出北京、上海、广州的标志性建筑；

1.背景框以跑马灯的形式循环运动；

2.灯笼从上方浮入，“灯笼从左到右依次亮一次之后，所

有灯笼同时亮两次”并做循环播放；

动画描述

3.“第2关”翻转进入，文字“选出北京、上海、广州的

标志性建筑”以打字机的方式出现；

4.“6张图片”与“下一题”按钮直接出现。

4-1

1.图中6张图片可以任意点击，点击后当前照片右下角出

现红色选勾，再次点击照片，红色选勾消失；【注意：可

以多选】

交互逻辑

2.点击“下一题”回答错误，跳转到第P4-2页；

3.点击“下一题”回答正确，直接跳转到第P5页。（图

中勾选图片为正确答案）

音乐音效继续播放背景音乐；

页面切换缓入

第7页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的第四个页面，第二个场景；

页面文案您的回答错误！请重新作答；

1.背景以跑马灯的形式循环运动；

动画描述2.“灯笼从左到右依次亮一次之后，所有灯笼同时亮两

次”并做循环播放。

4-2

1.“您的回答错误！请重新作答”文字出现后，红色选勾

交互逻辑消失，文字在原位慢慢消失；

2.文字消失后，跳转到第P4-1页重新作答。

音乐音效继续播放背景音乐；

页面切换缓入

第8页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第五个页面；

页面文案疯狂点击按钮飞天超过50米红线过关；

1.背景框以跑马灯的形式循环运动；

2.灯笼从上方浮入，“灯笼从左到右依次亮一次之后，所

有灯笼同时亮两次”并做循环播放；

动画描述3.“第3关”翻转进入，文字“疯狂点击按钮飞天超过50

米红线过关”以打字机的方式出现；

4.“20米、50米、80米”文字与“鱼”图片与“GO”按

5钮直接出现，并且“GO”按钮循环放大缩小。

1.每点击一次“GO”按钮，鱼上升一段距离，并且每点击

两次，鱼本身抖动一次；

交互逻辑

2.停止点击“GO”按钮，鱼恢复原位且停止抖动；

3.鱼中心点接触红线后，自动跳转到第P6-1页。

音乐音效继续播放背景音乐；

页面切换缓入

第9页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第六个页面，第一个场景；

页面文案快速收取金币满5个金币才可换购车票；

1.背景框以跑马灯的形式循环运动；

2.灯笼从上方浮入，“灯笼从左到右依次亮一次之后，所有灯

笼同时亮两次”并做循环播放；

动画描述

3.“第4关”翻转进入，文字“快速收取金币满5个金币才可

换购车票”以打字机的方式出现；

4.屏幕有金币落下且自转1圈。（共5个金币）

6-11.点击当前金币后，当前金币消失；

2.点击金币，金币消失后，金币收纳框中增加一枚金币；【注

意：（1）每个金币只能点击一次。（2）只有点击掉落金币，

金币框才会增加一枚金币。（3）初次点击任意金币，金币框都

交互逻辑是从一开始增加。】

3.没有点击金币或点击不够5枚金币，直到最后一枚金币掉落

离开舞台，自动跳转到P6-2页；

4.5枚金币都点击且金币框中达到5枚金币，自动跳转到P6-3

页。

音乐音效继续播放背景音乐；

页面切换缓入

第10页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第六个页面，第二个场景；

页面文案重新挑战！金币丢失了；

1.背景框以跑马灯的形式循环运动；

动画描述2.“灯笼从左到右依次亮一次之后，所有灯笼同时亮两

次”并做循环播放。

6-2

“重新挑战！金币丢失了”文字显示2秒后消失，自动跳

交互逻辑

转到P6-1页重新挑战；

音乐音效继续播放背景音乐；

页面切换缓入

第11页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第六个页面，第三个场景；

页面文案恭喜你！可以去买车票了；

1.背景框以跑马灯的形式循环运动；

动画描述2.“灯笼从左到右依次亮一次之后，所有灯笼同时亮两

次”并做循环播放。

6-3

“恭喜你！可以去买车票了”文字显示1秒后消失，自动

交互逻辑

跳转到第P7页；

音乐音效继续播放背景音乐；

页面切换缓入

第12页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第七个页面；

1.请输入出发地；

页面文案

2.请输入目的地。

1.背景框以跑马灯的形式循环运动；

2.烟花背景循环闪烁；

3.首先左侧灯笼从下方浮入，然后右侧灯笼从下方浮入；

动画描述4.“恭喜过关”蹦入；

5.“成功过关获得定制出发地点的机会”从下方浮入；

7

6.文本输入外框及文本输入框依次从左侧飞入；

7.“生成车票”按钮放大进入。

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

交互逻辑

2.点击“生成车票”跳转到第P8页。

音乐音效继续播放背景音乐；

页面切换缓入

第13页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页作为作品的第八个页面；

页面文案无

1.背景框以跑马灯的形式循环运动；

2.红色火车从右上角，放大进入；白色火车从左下方进入，

进入后有反弹效果；

3.“拿到车票了！开心回家过春节”文字放大进入；

动画描述

4.“GO!GO!GO!”文字蹦入并循环放大缩小；

5.车票翻转进入；

8

6.“您是第3200位通关者”文字从下方浮入；

7.“再来一次”按钮从下方浮入。

1.图中出发地与目的地（见图文字“东北”、“西北”）

承接第P7页文本输入框所输入的内容；

交互逻辑

2.点击“再来一次”按钮，跳转到第P2页，重新挑战。

【注意：重新挑战各关卡内容要恢复初始状态】

音乐音效继续播放背景音乐；

页面切换缓入

第14页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

任务二：融媒体页面作品开发

一、任务主题

主题：“金牛闹元宵”

根据所提供的录屏文件、psd设计稿以及作品截图使用HBuilder编译器软件进行作品的静

态布局、动画处理、逻辑编码、媒体处理、适配设置，最终完成任务书要求的融媒体编程项目。

二、任务内容

根据提供的“金牛闹元宵”分镜图文脚本、“金牛闹元宵录屏视频”及其psd设计稿素材，

制作“金牛闹元宵录屏视频”所呈现的所有内容。

三、制作要求

自定义文件目录或使用HBuilder创建项目，根据所提供的psd图片素材，利用Photoshop

软件处理成合适的图片进行布局、添加动画交互，使用原生JavaScript语言进行开发，比赛环

境不提供jQuery等前端库。

严格按照“金牛闹元宵录屏视频”预览效果及分镜图文脚本，制作一个融媒体内容，要求

如下：

（一）页数、画面、内容及排版一致；

（二）动画内容、逻辑交互效果一致；

（三）音乐音效、旋转模式及自适应模式一致；

（四）文件目录要求：img(存放图片素材）、css（存放css层叠样式表文件）、js（存

放JavaScript脚本文件）、media（存放音、视频文件）、index.html（入口文件）；

（五）处理素材。考生可使用Photoshop软件对图片进行整理，自定义图片大小、格式，

最终实现任务说明中的布局样式。

（六）完成动画交互制作。模拟正常移动端前端开发，使用JavaScript、CSS3、HTML5完

成对整个作品的开发。

（七）作品查看与提交。使用chrome浏览器模拟移动端运行（移动端尺寸为：750*1334适

应3种以上机型），对作品进行查看、排错。（作品提交请查看“附件1”）

四、分镜图文脚本

请仔细分析“金牛闹元宵”分镜图文脚本，并注意观察文件夹中“赛题要求\任务二\录屏\

金牛闹元宵录屏视频”中的场景、所有素材及交互。“金牛闹元宵分镜图文脚本”截图在文件

夹“赛题要求\任务二\截图\”目录下已提供，分镜图文脚本是部分内容提示，并非全部内容提

示，完整的内容请参考“金牛闹元宵录屏视频”，参赛选手需要完成“金牛闹元宵录屏视频”

中所有呈现的内容（录屏中出现的黄绿色按钮为模拟鼠标，请注意甄别），如果预览效果与任

务书发生冲突，以任务书为准，分镜图文脚本详细内容如下：

（备注：页号描述如“1、2、3……”为页号；“1-1、1-2、1-3……”为第1个页面的第

1个场景、第2个场景、第3个场景…）

第15页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的加载页；

页面文案Loading...XX%(xx为0%-100%的加载数值)

1.背景烟花循环有规律绽放；

2.屏幕下方炮竹循环放大缩小；

动画描述

3.小牛在进度条上前进；

14.XX%模拟加载数字。

交互逻辑“loading...100%”加载完毕自动进入第P2页。

音乐音效开始播放背景音乐；

页面切换出现

第16页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的第二页；

页面文案无

1.右上角音乐符号顺时针循环转动；

2.背景烟花有规则绽放；

动画描述3.两侧灯笼以绳子根部为圆点循环左右晃动；

4.屏幕下方炮竹循环放大缩小；

5.“我要猜灯谜”按钮，从左下方移入。

2

交互逻辑点击“我要猜灯谜”按钮即可进入第P3页；

音乐音效点击屏幕右上角的音乐图标可播放/暂停背景音乐

页面切换出现

第17页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的第三页；

1.本活动仅限参加比赛用户参与。

2.用户在页面内可参与猜灯谜活动，本次活动共有6道灯

页面文案谜题，需全部答对方可领取元旦祝福语。

3.如您已拥有祝福语，不要重复领取哦，本活动有效期7

天呢！还等什么？快来领取吧！

1.右上角音乐符号消失；

2.背景烟花有规则绽放；

动画描述

33.三段文字依次出现；

4.“开始猜灯谜”按钮从左下侧移入。

交互逻辑点击“开始猜灯谜”按钮即可进入第P4-1页；

音乐音效继续播放背景音乐；

页面切换出现

第18页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的第四页，第一个场景；

页面文案小提示：全部答对获取祝福哦~

1.背景烟花有规则绽放；

动画描述

2.所有灯笼循环放大缩小。

4-1

交互逻辑点击左上第一个灯笼，即可跳转到第P4-2页；

音乐音效继续播放背景音乐；

页面切换出现

第19页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的第五页，第二个场景；

【注意：标黑处文字为正确答案】

1.充耳不闻无话讲(打一茶叶名）

A：龙井B：碧螺春C：佛手D：铁观音

2.春香连日去听琴(打一字）

A：项B：需C：秦D：鹏

3.山水相连称第一(打一广东地名）

页面文案A：深圳B：广州C：佛山D：汕头

4.动物学索引(打一成语）

A：虎头虎脑B：目中无人C：双龙戏珠D：物是人非

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

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

6.公孙胜驾云，丁得孙狂奔(打一成语）

A：精神抖擞B：龙腾虎跃C：无法无天D：春暖花开

动画描述无

1.点击错误答案，即可跳转到P4-3页；

交互逻辑

2.点击正确答案，即可跳转到P4-4页。

音乐音效继续播放背景音乐；

页面切换出现

第20页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的第四页，第三个场景；

页面文案您的回答错误！

动画描述“您的回答错误”文字显示1秒后消失；

4-3

“您的回答错误”文字消失后，自动跳转到第P4-2页继续

交互逻辑

作答；

音乐音效继续播放背景音乐；

页面切换出现

第21页/共25页

2022年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项-竞赛任务书（样）

页号画面描述

页面场景本页为作品的第四页，第四个场景；

页面文案无

1.背景烟花有规则绽放；

2.回答正确后，当前灯笼点亮，灯笼文字变为“答对啦！”

动画描述

并停止放大缩小；

4-43.6个灯笼全部点亮后，“我的祝福语”按钮从左下方移入；

交互逻辑点击“我的祝福语”按钮，即可跳转到第