叙事故事动画
何时使用
用于客户案例、营销活动、产品发布、市场进入旅程、案例研究、学习教程或叙事性说明，应作为自包含的动画HTML体验播放。仅生成HTML。除非用户明确要求，否则不要创建PowerPoint、旁白文本文件、音频文件或视频。
匹配编辑型Story Studio体验，而非创建通用的幻灯片式动画。本技能的demo/文件夹中包含了完整的Story Studio参考和一个虚构的Routewise示例。
输入
- 故事来源：用户提供的简述、事实或命名的SharePoint源。
- 可选：故事类型、受众、语言、行动号召、品牌方向和目标文件夹。
- 如果用户未提供来源，则创建一个明确虚构的示例。切勿将虚构的名称、数字、结果或引用呈现为真实信息。
步骤
- 收集故事。在编写前阅读提供的SharePoint源。仅使用源事实或用户提供的详细信息。如果未提供来源，则将完成的故事标记为虚构。
- 规划6-9个场景的叙事弧。仅使用Story Studio系统中适合故事的场景类型：标题、统计数据、柱状图、路线、网络、时间线、引用、结果和行动号召。
- 编写适合旁白的场景数据。每个
say字段保持在45个词以内，使用短句和自然停顿。标题必须简洁，并且只能使用<em>进行编辑性强调。每个可见的数字必须来自来源。如果所需数字未提供，则使用[placeholder]。 - 构建一个完整的、可离线运行的HTML文件。不要使用CDN、外部字体、外部图片、网络调用或
<script src>。 - 复现Story Studio的设计和用户体验：
- 温暖的编辑纸张调色板、衬线展示字体、等宽标签、红色强调色、精致边框、颗粒纹理、16:9带边框舞台、报头、运行标签、页码和场景计数；
- 当包含多个故事变体时，显示场景选择按钮；
- 动画擦除过渡、交错文本揭示、遮罩标题行、减少运动支持以及响应式全屏舞台；
- 针对特定场景的运动效果：计数统计、柱状图填充、动画路线和地图标注、合作伙伴网络揭示、时间线进度、逐字引用揭示和结果五彩纸屑爆发；
- 与旁白进度同步的说明文字、场景进度条/指示器、上一步、下一步、重新开始、字幕切换、旁白切换、语音选择器、速度选择器、全屏控制、键盘快捷键和状态文本；
- 可访问性标签、可见控件、响应式行为和
prefers-reduced-motion处理。
- 旁白默认打开。加载时，将旁白设置为启用状态并立即尝试为第一场景进行浏览器语音合成。在场景间保持旁白启用，并等待每个场景的语音结束后自动前进。
- 包含一个语音选择器。使用
speechSynthesis.getVoices()填充，列出用户浏览器/系统中已安装的英语语音，并包含一个默认语音选项。响应voiceschanged事件，以便后期加载的语音出现。选择语音后必须使用该语音重新开始当前场景的旁白。不要发明共享语音库或声称命名的语音对每个用户都可用。 - 诚实地处理浏览器的自动播放限制。浏览器可能会阻止音频播放，直到用户与页面交互。当被阻止时，在舞台上显示一条醒目的消息，例如“旁白已准备就绪——选择播放以收听”，保留启用的旁白状态，并在首次点击、按键或触摸时开始语音。不要声称音频保证会自动播放。
- 生成完整文件后，不要手动编辑独立的动画引擎。验证结果是一个完整的HTML文档，具有可工作的控件且没有外部依赖项。
- 将此站点上所有HTML仪表板和动画HTML故事保存到报告库。除非用户要求其他目标，否则不要上传或发布到其他位置。
输出格式
简要回复，包括：
- 故事场景弧的概述（一行）；
- 确切的HTML文件名和链接；
- 控件：空格键播放/暂停，左右箭头切换场景，N键切换旁白，C键切换字幕，F键全屏；
- 注意：语音选择器列出用户浏览器/设备中已安装的英语语音，并使用所选语音进行旁白；
- 当故事为虚构或包含占位符时，明确说明；
- 注意：旁白在浏览器允许时自动开始，否则首次交互会启动它。
约束
- 当提供真实来源时，切勿编造客户名称、数字、引用或结果。
- 将真实引用归因于提供的来源。
- 保持完成的体验自包含且可在浏览器中直接打开。
- 使用用户浏览器的语音进行旁白。
- 如果语音合成或语音不可用，在舞台上显示一条明确的消息，并保持视觉故事可用。
- 如果无法读取输入源，请直接说明，不要编造源事实。