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

第第页/共18页第一部分竞赛须知一、竞赛要求（一）按要求完成竞赛任务，严格遵守操作要求，正确使用计算机设备；（二）竞赛过程中如有问题，及时与裁判进行联系；（三）严格遵守赛场纪律，禁止任何作弊行为，服从安排。二、职业素养与安全意识（一）禁止大声喧嚷，未经裁判允许，不得站立、走动，保证竞赛秩序；（二）参赛选手所有操作均应符合安全规范。三、选手须知（一）竞赛开始前，请参赛选手进行如下检查工作：1.检查BC-理论测评考试系统、融媒体内容制作应用系统、融媒体数据分析系统。账号登录、使用操作是否正常，所有支撑软件是否可以正常使用，如认定有故障应及时联系裁判提出，竞赛结束后再提出的，不予认定；2.竞赛过程中，请仔细阅读竞赛任务书。（二）参赛小组应在规定时间内完成任务书要求的所有内容，任务完成后的作品必须按要求提交，作品未按要求提交的，则该任务不得分。（三）参赛选手竞赛过程中，请及时保存任务中间成果。因任务中间成果未及时保存，遇设备或网络故障导致前续工作结果丢失的，选手自行承担。（四）参赛选手提交的作品内容中不得出现个人、学校等标识信息，如有发现则竞赛成绩记为0分。（五）在裁判宣布竞赛开始前，选手不得进行任何答题操作。（六）在裁判宣布竞赛结束后，参赛选手必须立即停止对计算机等竞赛设备的任何操作，听从裁判相关安排。第二部分竞赛任务模块一融媒体理论知识考核理论题竞赛部分为单选题、多选题、判断题等题型，以融媒体相关理论知识为基础，涵盖媒体运营、融媒体传播矩阵、网络热点信息、数据分析、VR虚拟现实、舆情监测和网络信息技术等多方面内容知识点。具体考试内容登录到理论考核平台后进行答题。模块二融媒体实操技能考核（实操题任务一、任务二、任务三为三个独立任务，特此说明！）任务一：融媒体平台作品制作一、选题背景：“小游戏”这个词的型含义其实很简单，它不是一些大的游戏，不必花费更多的时间和精力。小游戏是原始的游戏娱乐方式，小游戏本身是为了叫人们在工作，学习后的一种娱乐、休闲的一种方式。二、任务主题：主题：“游戏之家”三、任务内容（一）融媒体可视化作品利用融媒体内容制作应用系统（H5专业版）制作“水果乐园”融媒体可视化作品，完成场景模拟，动画交互效果。打开电脑桌面“融媒体可视化作品-预览”快捷方式，查看“水果乐园”样例作品，并请仔细分析分镜图文脚本，并注意观察样例作品中的场景、所用素材及交互，利用融媒体内容制作应用系统（H5专业版）制作“水果乐园”样例作品中所有呈现的内容。融媒体内容制作要求严格按照“水果乐园”样例作品预览效果及分镜图文脚本，制作一个完整的融媒体作品，要求如下：（1）页数、画面、内容及排版一致；（2）动画、逻辑交互方式及效果一致；（3）音乐音效、旋转模式及自适应模式一致。内容制作使用融媒体内容制作应用系统（H5专业版）工具创建页面场景、导入素材（相关素材已提供）、调整素材、实现任务要求的动画交互，并查看运行效果。（1）创建内容舞台尺寸设置为：320*520，帧速为：12帧/秒，禁止舞台动画循环。（2）导入素材将文件夹中“赛题要求\任务一\素材\”目录下的图片、音频素材导入到素材库中。（3）调整素材按照内容要求选择场景、添加素材，注意不要遗漏素材。利用所提供的素材进行场景的创建，对素材进行位置排版及制作等操作，使其达到作品的运行效果。（4）完成动画及逻辑交互利用时间轴与预置动画等制作各种动画效果，如人物运动、图片位移、角度变化等，从而完成规定的效果。利用各种逻辑交互行为功能，如点击、跳转、判断等，从而完成规定的功能。（5）运行并提交作品根据运行结果，调整素材、交互动画和逻辑判断，完成内容制作后，将完成的内容保存，在平台提交作品。（作品提交请查看“附件1”）分镜图文脚本“水果乐园”分镜图文脚本截图在文件夹“赛题要求\任务一\截图\”目录下已提供，分镜图文脚本是部分内容提示，并非全部内容提示，完整的内容请参考“水果乐园”样例作品，如果预览效果与任务书发生冲突，以任务书为准，分镜图文脚本详细内容如下：（备注：页号描述如：1、2、3……为页号；1-1、1-2、1-3……为第1个页面的第1个场景、第2个场景、第3个场景……）页号画面描述1页面场景本页作为加载页面，即第一个页面。页面文案加载中...0%-100%动画描述背景素材等直接出现；进度条以水面浮动的方式增长；太阳在冰山上方以弧形运动且自身旋转360°；三朵白云循环左右晃动；“加载中...”尾部百分数从0%-100%变化。交互逻辑加载百分数值为100%后跳转至P2页。音乐音效无。页面切换出现。页号画面描述2-1页面场景本页作为作品的第二个页面，第一个场景。页面文案游戏说明步骤：摘取水果-切水果-去榨汁。动画描述背景素材等直接出现；游戏说明框放大进入；“开始寻找”按钮缓入。交互逻辑本页开始禁止系统默认翻页行为；点击“开始寻找”按钮即可进入P2-2页面。音乐音效开始播放背景音乐。页面切换出现。页号画面描述2-2页面场景本页作为作品的第二个页面，第二个场景。页面文案无。动画描述背景素材等直接出现。交互逻辑进入页面后，定时器时间从20秒开始倒计时；定时器时间为0时即可进入P2-3页面；“左右滑动画面寻找”提示循环闪烁2秒后消失；本页可左右滑动屏幕，滑动屏幕同时下方汽车跟随滑动动作实现前进或后退（车身上下浮动；排气管冒烟；轮胎跟随转动）；该屏幕中共6个水果（3个苹果、3个梨）；每点击一个水果，下方车厢中则出现对应水果；6个水果都点击且下方车厢中6个水果都亮起，2秒后即可跳转P2-4页面。音乐音效停止播放背景音乐，播放定时器倒计时声音。页面切换出现。页号画面描述2-3页面场景本页作为作品的第二个页面，第三个场景。页面文案无。动画描述页面缓慢变暗；“闯关失败”图案缓入；“再玩一次”按钮循环上下浮动。交互逻辑点击“再玩一次”按钮即可进入P2-1页面（要求所有内容属性恢复初始状态）。音乐音效只播放失败音乐。页面切换出现。页号画面描述2-4页面场景本页作为作品的第二个页面，第四个场景。页面文案无。动画描述背景素材直接出现；手指做循环提示（先放大缩小再向上移动并消失）。交互逻辑下方苹果、梨可以自由拖动；拖动苹果、梨任意一个到切水果面板中即可播放切水果动画（拖动苹果只播放切苹果动画，拖动梨只播放切梨动画）；每切一个水果上方对应计数会增加（1个苹果、1个梨）；拖动最后一个水果到切水果面板中且切水果动画结束后2秒即可进入P2-5页面。音乐音效停止所有音乐。页面切换出现。页号画面描述2-5页面场景本页作为作品的第二个页面，第五个场景。页面文案无。动画描述页面缓慢变暗；“恭喜您”放大进入；“去榨汁”循环上下浮动；烟花做有规则循环闪烁动画。交互逻辑点击“去榨汁”即可跳转到P3-1页面。音乐音效只播放胜利音乐。页面切换出现。页号画面描述3-1页面场景本页为作品的第三个页面，第一个场景。页面文案无。动画描述背景及相关素材直接出现。交互逻辑进入该页面后下方倒计时从3秒开始倒计时，倒计时为0时，第一批水果从黑色传送带进入舞台（每批水果全部拖出传送带并移入榨汁机，倒计时自动从3秒倒计时，一批为3个水果且随机，共3批）；手指提示一次（先放大缩小再向上移动并消失）；左上方为得分，每个水果为10分，满分90分；右上方为轮次数，共3轮（9个水果）；传送带上的水果可往榨汁机中移动（如图，移动到榨汁机白色处且有吸附功能）；苹果对应红色榨汁机得分，梨对应绿色榨汁机得分，反之不得分；传送带3轮9个水果都拖拽到榨汁机中即可跳转到P3-2页面；点击“再玩一次”按钮及当前页面所有内容属性恢复初始状态。音乐音效开始播放背景音乐。页面切换出现。页号画面描述3-2页面场景本页为作品的第三个页面，第二个场景。页面文案得分：0-90称号：青铜黄金钻石动画描述背景及相关素材直接出现；落叶有规则循环下落并消失；烟花有规则循环闪烁；下方三个按钮缓入。交互逻辑“得分”项取值为P3-1页面得分值；称号根据分数分段位，小于等于50为青铜，大于50小于等于70为黄金，大于70小于等于90为钻石；点击苹果汁即可播放红色榨汁机动画；点击梨汁即可播放绿色榨汁机动画；点击“返回首页”按钮即可跳转P2-1页面（要求所有页面内容属性恢复初始状态）。音乐音效继续播放背景音乐。页面切换出现任务二：融媒体页面作品开发一、任务主题主题：“点亮灯笼”根据所提供的录屏文件、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个场景…）页号画面描述1画面情节本页为作品的加载页。文案XX(XX为0%-100%的加载数值)动画描述屏幕左上角灯笼分别循环晃动；屏幕背景烟花循环缩放消失出现；屏幕中心灯笼黄色光晕循环扩散；XX%模拟加载数字。交互逻辑“100%”加载完毕自动进入P2页。音乐与音效无页面切换折叠页号画面描述2画面情节本页为作品的第二页。文案点亮灯笼动画描述1.右上角音乐符号顺时针循环转动；2.屏幕左上角灯笼分别循环晃动；3.屏幕中心“点”、“笼”文字背景阴影循环缩放；4.屏幕中心辅助手指循环上下移动；5.屏幕底部背景条循环反复移动。交互与逻辑点击“灯笼”，辅助手指消失，灯笼后方出现光晕并循环缩放扩散；在第一次点击“灯笼”后，屏幕下方出现“查看游戏规则”按钮；再次点击“灯笼”，辅助手指出现，灯笼周围光晕消失；点击“查看游戏规则”按钮后即进入P3页。音乐与音效点击屏幕右上角的音乐图标可播放/暂停背景音乐。页面切换折叠页号画面描述3画面情节本页为作品的第三页。文案游戏规则将所有的灯泡进行点亮则游戏获得胜利，需要注意在点击灯泡的同时，周围的灯泡也会跟随着被点亮，周围被点亮的灯泡则会熄灭，当所有的灯泡都被点亮则游戏获得胜利。动画描述无交互与逻辑1.点击“进入游戏”按钮即可进入P4页。音乐与音效点击屏幕右上角的音乐图标可播放/暂停背景音乐。页面切换放大出现页号画面描述4画面情节本页为作品的第四页。文案无动画描述1.屏幕中心灯笼在可以全部点亮的前提下，在每次进入当前页面时，多个点亮灯笼的位置为随机组合（至少两种）。交互与逻辑1.点击屏幕中心的灯笼，如果灯笼是熄灭状态则会进行点亮，如果是点亮状态则会被熄灭，同时，它的上、下、左、右四周的灯笼都会进行点亮或被熄灭。2.点击“重置”按钮，屏幕中心的所有灯笼全部熄灭。3.在灯笼未全部点亮时，点击“提交”按钮无反应。在灯笼全部点亮后，“点击提交按钮”即进入P5页。音乐与音效点击屏幕右上角的音乐图标可播放/暂停背景音乐。页面切换折叠页号画面描述5画面情节本页为作品的第五页。文案“太棒了，仅用了X步就点亮了全部的灯泡，快来领取属于你的大奖吧！”2.“非常厉害！，仅用了X步就点亮了全部的灯泡，不要忘了领取丰厚的奖励哦。”动画描述屏幕中心上方输入框中文字以打印机效果逐字出现，并可以进行添加和删除；屏幕中心下方过关图标出现。交互与逻辑点击“返回首页”按钮即进入P2页；屏幕上方显示的“步数”为P4页当中完成点亮全部灯笼使用的点击按钮的次数，当步数小于10步完成时为文案中第一段话，当步数大于等于10步完成则为文案中第二段话。音乐与音效点击屏幕右上角的音乐图标可播放/暂停背景音乐。页面切换折叠任务三：融媒体数据分析请仔细观察U盘中“赛题素材/任务三”文件夹中的某平台主播达人数据，使用融媒体数据分析系统平台对所提供的数据源进行相关数据分析及撰写数据分析报告，具体如下：一、任务背景对于融媒体内容运营来说，数据分析在其中是非常重要的，内容定位、营销管理等都需要应用到数据分析，利用数据分析来发现产品营销问题、营销手段的有效性等等，有效提升内容创作的卖点及带货销售收入和销售能力。二、任务要求（一）数据分析使用融媒体数据分析系统平台中“看板”制作对应图表，对数据探索式分析，找到有价值的信息，改善并提升店铺的经营能力。制作看板，选取数据可视化分析的图表及参赛选手认为需要添加的图表制作看板，对分析指标进行统一展示。要求参赛选手自行决定看板要展示的具体内容以及看板的布局，制作美观清晰的看板。（二）数据分析报告使用融媒体数据分析系统平台中“故事板”以报告的形式完整呈现数据分析的过程、结论及建议。要求格式规范，逻辑清晰，结构合理，观点明确，有理有据，结论符合实际，优化建议可行，为提升店铺的经营能力提出合理、可行性建议。1.数据分析的步骤和结果的呈现，并进行分析说明。2.归纳总结数据分析结果，并根据分析结果给出合理的建议。附件1：作品提交方式及命名要求一、比赛作品分两部分提交。（一）理论答卷提交选手在理论测评考试系统中完成答卷并手动提交（在比赛时间内提交且电脑屏幕出现理论成绩分数，视为有效提交，比赛时间外提交成绩不予认定）。（二）实操作品提交按照任务模块，需在融媒体内容