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

2020年山东省职业院校技能大赛高职组“HTML5交互融媒体内容设计与制作”赛项任务书第第页共39页第一部分竞赛须知一、竞赛要求（一）按要求完成竞赛任务，正确使用计算机、手机等设备，爱惜赛场器材，严格遵守操作要求；（二）竞赛过程中如有问题，可向现场裁判或工作人员举手后反映，不得扰乱赛场秩序；（三）严格遵守赛场纪律，禁止任何作弊行为，尊重现场裁判员，服从安排。二、职业素养与安全意识（一）参赛选手组内讨论应尽可能降低音量，小范围挪动位置，禁止大声喧嚷，未经裁判允许，不得随意站立、走动，保证竞赛现场秩序；（二）参赛选手所有操作均应符合安全规范，注意用电安全。三、选手须知（一）纸质任务书如出现缺页、字迹不清等问题，请及时向裁判举手示意并要求更换。竞赛任务中所使用的非纸质资料都已拷贝至U盘中，请自行根据竞赛任务书要求使用；竞赛提供的所有资料，在竞赛结束后均不能带离考场；（二）参赛小组应在规定时间内完成任务书要求的内容，任务完成后的作品必须按要求提交，作品未按要求提交的，则该任务不得分；（三）竞赛过程中，选手认定设备或网络有故障应及时向裁判提出，竞赛后再提出的，不予认定。如设备或网络经测定完好，属误判时，设备或网络的测定时间计入该小组竞赛时间；如果设备或网络经测定确有故障，则当场更换设备或维修网络，此过程中（设备或网络测定开始到更换完成）造成的时间损失，在竞赛时间结束后，酌情对该小组进行等量的时间延迟补偿；（四）参赛选手竞赛过程中，请及时保存任务中间成果。因任务中间成果未及时保存，遇设备或网络故障导致前续工作结果丢失的，将仅对更换设备或网络造成的时间损失进行等量的时间延迟补偿；（五）竞赛过程中由于人为原因造成设备损坏，则设备不予更换，如故意损坏竞赛设备的，应承担相应的赔偿责任；（六）竞赛过程中由于自身人为原因造成网络中断，则网络修复的时间计入该小组竞赛时间；（七）参赛选手提交的作品内容中不得出现个人、学校等标识信息，如有发现则竞赛成绩记为0分；（八）在未得到现场裁判指令前，已入座参赛选手不得对竞赛设备、纸、笔进行任何操作，在裁判宣布竞赛结束后，参赛选手必须立即停止对计算机等竞赛设备的任何操作；（九）在裁判组宣布竞赛结束后，参赛选手须将任务书放回档案袋，其他竞赛设备放置到初始位置，并按裁判要求顺序离场。第二部分竞赛环境简介一、竞赛环境（一）硬件环境（每个参赛小组）序号设备名称单位数量备注1计算机台3带耳机2工作台套3桌、椅（二）软件环境序号软件类型软件名称软件版本1操作系统Windows64位Win72H5内容融合设计软件HTML5交互融媒体内容制作实训平台20173浏览器GoogleChrome浏览器20194支撑软件MicrosoftOffice20165支撑软件HBuilder编译器20196支撑软件AdobePhotoshopCC2017（三）网络环境基于以太网技术的局域网环境。二、注意事项（一）竞赛开始时，参赛选手须检查北测－HTML5交互融媒体内容制作实训平台（下称“北测-平台”）账号登录、使用操作是否正常，所有支撑软件是否可以正常使用，如认定有故障应及时向裁判提出，竞赛后再提出的，不予认定。如经测定正常，属误判时，则认定时间计入竞赛时间（扣减该小组竞赛时间）；如果经测定确有故障，则当场修复，此过程中（测定开始到修复完成）造成的时间损失，在竞赛时间结束后，酌情对该小组进行等量的时间延迟补偿；（二）竞赛过程中，请务必严格按照任务书要求对各竞赛设备进行操作使用，随意操作可能会出现作品不能正常制作、预览或提交的情况；（三）竞赛任务完成后，请务必不要关闭任何竞赛设备，不要拆卸、移动竞赛设备的网络连接，不要对文件和设备进行加密。第三部分竞赛任务（请注意：任务一和任务二是两个独立的任务，制作平台及素材均独立，特此说明！）任务一：H5内容制作部分一、选题背景：每一个平凡的日子都闪闪发光，你的一天是如何度过呢？玩游戏？学习？逛街？让我们一起来度过这美好的一天吧！二、任务主题 主题：“我的一天” 利用北测-平台制作“我的一天”可视化H5作品，完成场景模拟，动画交互效果。三、任务内容根据任务书中提供的“我的一天分镜脚本”以及“我的一天H5作品”参照样例和相关素材，在北测－平台全真制作“我的一天H5作品”所有呈现的内容。“我的一天H5作品”请查看电脑桌面“任务一作品预览”快捷方式！四、作品制作需求（一）分镜脚本请仔细分析“我的一天分镜脚本”，并注意观察“我的一天H5作品”样例中的场景、所有素材及交互。“我的一天分镜脚本”截屏在U盘“赛题要求\任务一\截屏\”目录下已提供，参赛选手需要完成H5作品中所有呈现的内容，分镜图文脚本详细内容如下：备注：页号描述如：1、2、3……为页号；1-1、1-2、1-3……为第1个页面的第1个场景、第2个场景、第3个场景…页号画面描述1画面情节1.本页作为加载页面，即第1个页面；2.钟表指针转动为主要动画；文案无动画描述1.钟表指针转动，橘红色长指针（秒针）顺时针转动，速度较快，粉红色中指针（分针）逆时针转动，速度慢于秒针，黄色短指针顺时针转动（时针），速度慢于分针；2.钟表下方表示加载速率的数字从0-100变化。交互与逻辑加载数字跳动值100%后跳转至第二页音乐与音效无页面切换出现页号画面描述2-1画面情节1.本页作为作品的第二个页面，第一个场景；2.动态的指针转动，钟表翻转为主要动画。文案无动画描述进入页面后，屏幕中间指针旋转，表盘同时绕Y轴逆时针翻转至P2-2场景页面交互与逻辑无音乐与音效开始播放背景音乐页面切换出现页号画面描述2-2画面情节1.本页作为作品的第二个页面，第二个场景；2.以动画形式引出开始交互。文案无动画描述1.承接P2-1场景，即P2-1场景钟表翻转之后的场景；2.“点击开始”外侧的色环逆时针旋转；3.“点击开始”旁边的蓝色字的圆环顺时针旋转；4.“点击开始”字样循环放大缩小。交互与逻辑1.本页开始禁止系统默认翻页行为；

2.点击“点击开始”按钮，跳转至P3页面。音乐与音效1.继续播放背景音乐。页面切换无页号画面描述3画面情节1.本页作为作品的第三个页面；2.列出我的一天中三件事（三个菜单按钮）。文案无动画描述1.整体背景淡出；2.屏幕下方人物旁边两个圆形按钮缓出后循环放大缩小；3.人物下方的“记录我的一天”按钮上浮出现。交互与逻辑1.点击人物左侧按钮，即可跳转至P4页面；2.点击人物右侧按钮，即可跳转至P5页面；3.点击人物下方按钮，即可跳转至P6页面。音乐与音效继续播放背景音乐页面切换出现页号画面描述4-1画面情节1.本页作为作品的第四个页面的第一个场景；2.百科知识竞赛答题开始页面。文案百科知识竞赛开始动画描述无交互与逻辑点击“开始”按钮，即可进入P4-2答题场景；音乐与音效继续播放背景音乐页面切换平移页号画面描述4-2画面情节本页作为作品第四页开始知识竞赛页面，共十道题，满分为100分（正确答案在文案中标黑）。文案第一届百科知识竞赛（开始考试，满分100分）1.唐代诗人有称“诗圣”的杜甫“诗仙”的李白等，你可知道被人颂称“诗魔”的是谁?（单选题）A.白居易B.王维C.刘禹锡2.世界上曾有六次截流，中国就有三次，都在长江上，其中有两次是长江三峡截流，另一次是哪项工程？（单选题）A.都江堰B.黄河C.葛洲坝3.下列哪部是高尔基的代表作品？（多选题）A.《套中人》B.《在人间》C.《我的大学》4.以下属于我国四大佛教名山中的是？（多选题）A.峨眉山B.五台山C.九华山5.下列选项中,属于民事法律关系的是？（单选题）A.公民甲向税务机关纳税B.政府向某灾区捐款C.公民乙向山区某小学捐款6.以下属于活化石植物的是？（多选题）A.银杉B.金银花C.银杏7.预防近视眼要做到“三不看”（多选题）A.走路乘车不看书B.光线太暗或太强不看书C.吃饭不看书8.中国古代中最早提到小孔成像的原理的著作是？（单选题）A.《九章算术》B.《墨经》C.《天工开物》9.“古尔邦节”是一种什么节日？（单选题）A.宗教节日B.民族节日C.国家节日10.普利策奖是什么方面的奖？（多选题）A.新闻B.文话C.经济动画描述无交互与逻辑1.前9道题，选择答案（不选也可以）之后点击提交进入下一题，在屏幕上方对应的题号中出现得分，单选正确为10分，多选（两个）正确为10分，选一个得5分，选错不得分，多选（三个）选一个得三分，全部正确得10分；2.第十道题选择答案之后，点击“交卷”，跳转至P4-3场景，音乐与音效继续播放背景音乐；页面切换无页号画面描述4-3画面情节1.本页为作品第四页得分场景；2.提交信息上传成绩。文案第一届百科知识竞赛得分0（此处数值为P4-2中十道题所得分总和）姓名电话邮箱动画描述无交互与逻辑1.得分之后红色数字为P4-2场景十道题的得分总和；2.姓名、电话、邮箱后面的框可以选择填入信息；3.点击上传成绩即可跳转至P4-4场景。音乐与音效循环播放背景音乐页面切换出现页号画面描述4-4画面情节1.本页作为作品第四个页面，第四个场景；2.成绩提交成功界面。文案第一届百科知识竞赛提交成功！返回首页动画描述无交互与逻辑点击“返回首页”即可返回至P3页面。音乐与音效继续播放背景音乐；页面切换无页号画面描述5-1画面情节1.本页作为作品第五个页面，第一个场景；

2.模拟连连看小游戏。文案请输入昵称动画描述1.连连看标题上浮出现之后放大缩小两次；2.“请输入昵称”文本框随后上浮出现；

3.“确定”按钮随后上浮出现；交互与逻辑1.“请输入昵称”文本框中可以输入文字；

2.昵称输入后，点击“确定”按钮进入P5-2场景，若未输入昵称则“确定”按钮点击无效。音乐与音效继续播放背景音乐页面切换无页号画面描述5-2画面情节本页作为作品第五个页面，第二个场景，游戏规则介绍页面。文案游戏规则在30秒内完成游戏翻牌即可获得胜利！我知道了动画描述1.进入此场景式，“连连看”标题上移至左上角并缩小一部分；

2.游戏规则弹窗缓出；3.游戏规则右上角的时间图标从右侧平移出现。交互与逻辑1.点击“我知道了”按钮，游戏规则弹窗消失，可进入P5-3游戏页面，同时开始右上角的倒计时；音乐与音效继续播放背景音乐；页面切换出现页号画面描述5-3画面情节本页作为作品第五个页面，翻牌游戏界面。文案26（此数值为倒计时的时间从30-0递减）动画描述1.右上角的倒计时从30到0每秒递减；2.点击对应方框，即可开始翻转动画，牌面绕Y轴顺时针旋转90度后漏出后面的小动物。交互与逻辑1.点击对应方框，即可开始翻转动画，并漏出后面的小动物；2.当六个方框都点击之后，游戏结束，跳转至P5-4挑战成功场景；

3.当右上角倒计时为0时，游戏结束，跳转至P5-5挑战失败场景；音乐与音效继续播放背景音乐；页面切换出现页号画面描述5-4画面情节本页作为作品第五个页面，小游戏挑战成功页面文案无动画描述无交互与逻辑1.点击“返回主菜单”返回P3页面；

2.点击“再玩一次”进入P5-2场景，继续游戏。音乐与音效继续播放背景音乐；页面切换无页号画面描述5-5画面情节本页作为作品第五个页面，小游戏挑战失败页面文案无动画描述无交互与逻辑1.点击“返回主菜单”返回P3页面；

2.点击“再玩一次”进入P5-2场景，继续游戏。音乐与音效继续播放背景音乐；页面切换无页号画面描述6-1画面情节本页作为作品第六个页面文案无动画描述1.进入页面，桌面上的粉色记事本，竖直起来之后放大出现到屏幕中；

2.记事本静止后，书面上出现白色手指，并左滑提示滑动；交互与逻辑1.在书上面左滑，即可开始翻页动画，进入P6-2场景；音乐与音效继续播放背景音乐；页面切换平移页号画面描述6-2画面情节本页作为作品第六个页面，第二个场景文案无动画描述1.承接P6-1动画，记事本出现向左翻页的动画效果；

2.白色纸张上面出现文字，随后【学习】、【娱乐】两个挂栏以遮罩的形式从上到下出现。交互与逻辑1.点击【学习】，即可进入P4页面；2.点击【娱乐】，即可进入P5页面。音乐与音效继续播放背景音乐；页面切换无（二）H5作品制作要求严格按照“我的一天H5作品”样例预览效果及分镜图文脚本，制作一个H5作品，要求如下：1.页数一致；2.画面、内容及排版一致；3.动画内容及效果一致；4.交互方式及效果一致；5.音乐及音效一致；6.自适应模式一致；五、内容制作使用北测－平台“创建作品”工具新建内容、创建页面场景、导入素材（相关素材U盘中已提供）、调整素材、实现任务要求的动画交互并查看运行效果。（一）创建内容使用北测－平台“创建作品”工具创建内容，项目名称请使用“座位号-任务一”，舞台尺寸设置为：320*520，帧速为：12帧/秒。（二）导入素材将U盘中“赛题要求\任务一\素材\”目录下的图片、音频素材导入到素材库中。（三）调整素材按照内容要求选择场景、添加素材，注意不要遗漏素材。利用所提供的素材进行场景的创建，对素材进行位置调整等操作，使其达到“我的一天H5作品”的运行效果。（四）完成动画利用时间轴与预置动画等制作各种动画效果，如人物运动、图片位移、角度变化等，从而完成规定的效果。（五）完成交互利用北测－平台添加各种交互功能，如点击跳转等，从而完成规定的功能。（六）完成逻辑判断利用北测－平台实现各种逻辑判断，如改变属性、判断等，从而完成规定的效果。（七）文件运行并提交作品在平台预览制作效果，根据运行结果，调整素材、交互动画和逻辑判断，完成内容制作后，将完成的作品保存并命名为“座位号-任务一”，在平台提交作品。作品合并方式：管理员账号（A账号）查看子账号作品，选择编辑之后另存为自己的作品，将另存的作品转为模板（点击查看我的作品，作品下方第三个按钮），然后在需要提交的作品中添加模板，实现作品合并，由管理员账号提交。（点击查看我的作品，点击要提交的作品中间图片，进入新的页面，右下方点击“提交”按钮即可提交，再次提交之前需取消之前提交的作品。） 任务二：H5编程制作部分一、选题背景：抽签是中国的民间习俗，是占卜的其中一种形式。现今的道观、寺庙和民间的庙宇，大多摆上签筒供人抽取签条问卜。抽签同八卦一样，是我国古代民间为了判断问事项吉凶、祸福的一种通俗预测方式。新年文话签将从健康、爱情、财富、学业去选择，看看能否给大家带来好运吗？二、任务主题主题：“新年文话签”根据U盘“赛题要求\任务二”目录下所提供的录屏文件、psd设计稿以及作品截屏，使用Html5、JavaScript、Css3语言，在HBuilder编译器软件上进行作品的静态布局、动画处理、逻辑编码、媒体处理、适配设置，最终完成任务书要求的H5编程项目。三、任务内容根据提供的“新年文话签分镜脚本”、“新年文话签作品”录屏视频及其psd设计稿素材，制作“新年文话签作品”所呈现的内容。四、内容制作需求（一）分镜脚本请仔细分析“新年文话签分镜脚本”，并注意观察“新年文话签作品”录屏视频中的场景、所有素材及交互。“新年文话签分镜脚本”截屏在U盘“赛题要求\任务二\截屏\”目录下已提供，分镜图文脚本是部分内容提示，并非全部内容提示，完整的内容请参考U盘“赛题要求\任务二\录屏\新年文话签作品”录屏视频，参赛选手需要完成H5作品中所有呈现的内容，分镜图文脚本详细内容如下：（备注：页号描述如“1、2、3……”为页号；“1-1、1-2、1-3……”为第1个页面的第1个场景、第2个场景、第3个场景……）页号画面描述1画面情节1.本页为加载页；文案loadingXX%(xx为0-100的加载数值)动画描述文话签绕屏幕上方绳子的终点循环左右晃动；XX%模拟加载数字。交互逻辑加载完毕即进入第一个场景（loading100%）音乐与音效无页面切换出现页号画面描述2画面情节本页为作品第二个页面引出新年文话签主题。文案无动画描述1.“新年文话签”每个字依次出现；2.屏幕中两枚铜钱循环上下移动；交互与逻辑1.点击“抽一签”按钮即可进入P3页面场景；2.点击音乐图标即停止播放背景音乐，图标水平垂直停止旋转，再次点击即播放背景音乐，恢复旋转。音乐与音效点击屏幕右上角的音乐图标可播放/暂停背景音乐页面切换出现页号画面描述3画面情节本页为作品第三个场景，成语签依次出现；文案无动画描述成语标签绕中间折现依次从上到下，从左到右出现在屏幕中。交互与逻辑成语标签出现完之后自动跳转至P4页面；点击音乐图标停止播放音乐且图标停止旋转，再次点击音乐图标即播放音乐，图标旋转。音乐与音效点击屏幕右上角的音乐图标可播放/暂停背景音乐页面切换出现页号画面描述4画面情节本页为作品的第四个页面，输入昵称页面；文案无动画描述屏幕中上方的三枚铜钱循环上下小幅度移动；交互与逻辑1.请输入昵称下方的文本框可以输入文字，只有输入任意文字后，下方的“来一签”按钮才可以点击；2.点击“来一签”按钮跳转至P5页面；3.点击音乐图标停止播放音乐且图标停止旋转，再次点击音乐图标即播放音乐，图标旋转。音乐与音效点击屏幕右上角的音乐图标可播放/暂停背景音乐页面切换出现页号画面描述5画面情节本页为作品的第五个页面的第一个画面，抽签预测方向文案无动画描述1.摁住两侧的标签，向右/向左滑动，屏幕中间的四个标签都向右向左滑动，模拟旋转的效果；2.滑动标签的同时，屏幕下方的十二地支圆圈也在顺时针或逆时针旋转。交互与逻辑1.摁住两侧的标签，向右/向左滑动，屏幕中间的四个标签都向右向左滑动，模拟旋转的效果，同时左滑之后，原先右边的标签出现在正前方，右滑之后，原先左侧的标签出现在正前方；（请参考录屏文件中的动画）2.点击正前方的标签，标签放大缩小两次后进入P6页面。3.点击健康，进入P6-1健康场景，点击爱情，进入P6-2爱情场景，点击财富，进入P6-3财富场景，点击学业进入P6-4学业场景。4.点击音乐图标停止播放音乐且图标停止旋转，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换出现页号画面描述6-0画面情节本页为作品的第六个页面，模拟抽签页面。文案无动画描述1.抽签桶后方的几枚铜钱循环在屏幕中间无规则移动；

2.点击“点击抽签”按钮后，抽签通左右晃动，随后缩小，交互与逻辑1.点击“点击抽签”按钮，进入P5中选择的健康、爱情、财富、学业对应的场景即P6-1健康、P6-2爱情、P6-3财富、P6-4学业场景；

2.点击音乐图标停止播放音乐且图标停止旋转，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换出现页号画面描述6-1画面情节本页为健康抽签的文话签所在页面。文案无动画描述1.承接P6-0场景动画，即点击“点击抽签”后的后续动画，文话签从下到上、从小到大出现；2.抽签桶后方的几枚铜钱循环在屏幕中间无规则移动；交互与逻辑1.点击“文话解签”，进入P6-1-1场景；

2.点击音乐图标停止播放音乐且图标停止旋转且切换为禁止状态，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换无页号画面描述6-1-1画面情节本页为健康抽签的文话签解签页面。文案无动画描述无交互与逻辑1.点击“再来一次”，进入P5场景；

2.点击音乐图标停止播放音乐且图标停止旋转且切换为禁止状态，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换出现页号画面描述6-2画面情节本页为爱情抽签的文话签所在页面。文案无动画描述1.承接P6-0场景动画，即点击“点击抽签”后的后续动画，文话签从下到上、从小到大出现；2.抽签桶后方的几枚铜钱循环在屏幕中间无规则移动；交互与逻辑1.点击“文话解签”，进入P6-2-1场景；

2.点击音乐图标停止播放音乐且图标停止旋转且切换为禁止状态，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换无页号画面描述6-2-1画面情节本页为爱情抽签的文话签解签页面。文案无动画描述无交互与逻辑1.点击“再来一次”，进入P5场景；

2.点击音乐图标停止播放音乐且图标停止旋转且切换为禁止状态，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换出现页号画面描述6-3画面情节本页为财富抽签的文话签所在页面。文案无动画描述1.承接P6-0场景动画，即点击“点击抽签”后的后续动画，文话签从下到上、从小到大出现；2.抽签桶后方的几枚铜钱循环在屏幕中间无规则移动；交互与逻辑1.点击“文话解签”，进入P6-3-1场景；

2.点击音乐图标停止播放音乐且图标停止旋转且切换为禁止状态，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换无页号画面描述6-3-1画面情节本页为财富抽签的文话签解签页面。文案无动画描述无交互与逻辑1.点击“再来一次”，进入P5场景；

2.点击音乐图标停止播放音乐且图标停止旋转且切换为禁止状态，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换出现页号画面描述6-4画面情节.本页为学业抽签的文话签所在页面。文案无动画描述1.承接P6-0场景动画，即点击“点击抽签”后的后续动画，文话签从下到上、从小到大出现；2.抽签桶后方的几枚铜钱循环在屏幕中间无规则移动；交互与逻辑1.点击“文话解签”，进入P6-4-1场景；

2.点击音乐图标停止播放音乐且图标停止旋转且切换为禁止状态，再次点击音乐图标即播放音乐，图标旋转。音乐与音效继续播放背景音乐页面切换无页号画面描述6-4-